/* assets/css/public/core/reset.css */
/* @layer-wrap:site.reset */
@layer site.reset {
/* Version: 20-09-2026-16-46 */
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, a, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
p, ul, span, a, h1, h2, h3, h4, h5, h6, article div, form, .tab, #delete main {
position: relative;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
color: #ffffff;
overflow-x: hidden;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
padding: 0px;
margin: 0px;
text-decoration: none;
}
fieldset {
border: 0px;
}
.unexist {
cursor: default;
width: 90%;
text-align: center;
padding: 5vh 5%;
}
* {
word-wrap: break-word;
}
/* Graisse et interlettrage par défaut, hors chrome hub (éditeur de thème, overlay) : :where garde la spécificité
* de *, la remise à zéro ci-dessus (font: inherit) l'emporte sur les éléments qu'elle liste. */
:where(*:not(:is(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal), :is(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *)) {
letter-spacing: 0.4px;
font-weight: 400;
}
}
/* assets/css/public/structure/layout/zindex.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 23-09-2026-20-19 */
/* Portfolios */
#portfolio_page main article {
z-index: 2;
}
#title-illustration {
z-index: 0;
}
/* Fonds décoratifs (grain, grille) — sous le contenu */
#portfolio_page {
isolation: isolate;
}
#portfolio_page::after {
z-index: 0;
}
#portfolio_page > *:not(#loader):not(header):not(footer):not(#welcome-to):not(#welcome-to-blur) {
position: relative;
z-index: 1;
}
.about-artist-img {
position: relative;
z-index: 10;
}
.pf-thumbs--landscape a,
.pf-thumbs--square a,
.pf-thumbs--portrait a {
z-index: 10;
}
p,
ul,
span,
a,
h1,
h2,
h3,
h4,
h5,
h6,
article div,
form,
.tab,
#delete main {
z-index: 5;
}
.table-design {
z-index: 15;
}
/* Header: above content but below overlays */
#arktefakt-header {
z-index: 800;
}
#arktefakt-burger,
.arktefakt-burger {
z-index: 850;
}
#portfolio-content-interface,
#hub-content-interface {
z-index: 900;
}
#arktefakt-top-bar {
z-index: 910;
}
/* Content / components */
.content-article img,
.article img {
z-index: 1;
}
.content-article blockquote::before,
.content-article blockquote::after {
z-index: 10;
}
.welcome-to-window {
z-index: 180;
}
#welcome-to-blur {
z-index: 170;
}
.list-tickets a {
z-index: 5;
}
.services-slider .arrow {
z-index: 20;
}
/* Navigation */
#arktefakt-header #arktefakt-services-nav,
#arktefakt-top-bar .main-footer {
z-index: 800;
}
#arktefakt-header .user-menu-about {
z-index: 805;
}
#arktefakt-header .user-menu-about ul {
z-index: 805;
}
#arktefakt-header #arktefakt-app-nav {
z-index: 800;
}
/* Loader — sous le header (820) et le footer (800) */
#loader {
z-index: 790;
}
/* Modules */
.faq {
z-index: 5;
}
#orders a {
z-index: 5;
}
/* Gallery (albums + grille photos fiche production) */
#gallery a,
#production-show-photos-grid a {
z-index: 10;
}
#gallery a::after,
#production-show-photos-grid a::after {
z-index: 1;
}
/* Swipebox (lightbox) */
#swipebox-overlay {
z-index: 1200;
}
#swipebox-bottom-bar,
#swipebox-top-bar {
z-index: 1210;
}
.swipebox-touch #swipebox-container:before,
.swipebox-touch #swipebox-container:after {
z-index: 1210;
}
/* Agenda */
.agenda-item .agenda-item-open {
z-index: 9;
}
/* Projects */
#hero .project-cover {
z-index: 10;
}
/* Members / profile modal */
.member-item .member-img,
.profil-window .member-img {
z-index: 5;
}
/* Members / profile modal — au-dessus du hub admin (#visitor_mode : 9500) */
#profil-modal-root {
position: fixed;
inset: 0;
z-index: 9600;
pointer-events: none;
}
#profil-modal-root .profil-overlay.open {
pointer-events: auto;
}
#profil-modal-root .profil-window.open {
pointer-events: auto;
}
.profil-overlay {
z-index: 1;
}
.profil-window {
z-index: 2;
}
.close-content-button {
z-index: 3;
}
body.modal-open #profil-modal-root {
pointer-events: auto;
}
/* Services */
#services-slider .services-slider-item {
z-index: 5;
}
/* Thumbnails / hover stacking */
.thumbnail:hover,
.thumbnail-tile.thumb-border:hover,
a.thumbnail-tile.thumb-border:hover,
.vertical-grid-item:hover,
.horizontal-grid-item:hover,
#goto article a:hover,
.blog-list .thumbnail-tile:hover,
.blog-list .thumbnail:hover,
.service-item:hover,
.faq-item:hover,
.profil-button:hover,
.agenda-item:hover,
.square-grid-item:hover,
.swipebox:hover {
z-index: 30;
}
#portfolio_page #hub-logo .hub-logo__mark--image {
z-index: 60;
}
/*
* Portfolio header — échelle courte :
* shell 820 · voile 830 · bar 840 · burger 845 · panel 850
* (détails mobile dans mobile.css)
*/
#portfolio_page > header {
z-index: 820;
}
#portfolio_page header .header-bar {
z-index: 840;
}
#portfolio_page header #hamburgerBtn {
z-index: 845;
}
#portfolio_page header #header-nav {
z-index: 850;
}
#portfolio_page header #header-nav .nav__content {
z-index: 1;
}
#portfolio_background::before {
z-index: 0;
}
#portfolio_page {
z-index: 1;
}
#portfolio_page .sub-menu::before,
#portfolio_page header .sub-menu::before {
z-index: -1;
}
#portfolio_page > footer {
position: relative;
z-index: 800;
}
#portfolio_page header::before,
#portfolio_page footer::before {
z-index: 0;
}
#welcome-to-blur {
z-index: 900;
}
#welcome-to {
z-index: 901;
}
}
/* assets/css/public/themes/portfolios-modules.css */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
:root {
/* Couleurs principales */
--portfolios-color-bg-main: #fafafa;
--portfolios-color-bg-dark: #000000;
--portfolios-color-bg-light: #ffffff;
--portfolios-color-primary: #191919;
--portfolios-color-secondary: #eaeaea;
--portfolios-color-accent: #007bff;
--portfolios-color-border: #dee2e6;
--portfolios-color-border-custom: #cccccc;
--portfolios-heading-primary-color: #191919;
--portfolios-heading-secondary-color: #007bff;
--portfolios-color-one: var(--portfolios-heading-primary-color);
--portfolios-color-two: var(--portfolios-heading-secondary-color);
/* Radius */
--portfolios-border-radius-xs: 2px;
--portfolios-border-radius-s: 5px;
--portfolios-border-radius-m: 8px;
--portfolios-border-radius-l: 15px;
--portfolios-border-radius-xl: 50px;
--portfolios-border-radius-full: 50%;
/* Ombres */
--portfolios-box-shadow-s: 0 0 0 0.2rem rgba(0,0,0,0.08);
--portfolios-box-shadow-m: 0px 2px 28px 0px var(--portfolios-color-border-custom);
--portfolios-box-shadow-alt: 0px 0px 0px 3px var(--portfolios-color-border-custom);
/* Fontes */
--portfolios-font-size-base: 14px;
--portfolios-heading-primary-size: 21px;
--portfolios-heading-secondary-size: 14px;
--portfolios-font-size-title: var(--portfolios-heading-primary-size);
--portfolios-font-size-subtitle: var(--portfolios-heading-secondary-size);
--portfolios-font-size-lg: calc(var(--portfolios-font-size-base) * 1.5);
--portfolios-font-size-md: calc(var(--portfolios-font-size-base) * 1.2);
--portfolios-font-size-sm: var(--portfolios-font-size-meta, calc(var(--portfolios-font-size-base) * 0.8));
--portfolios-font-family-base: 'Poppins', Arial, sans-serif;
--portfolios-font-family-serif: 'Spectral', serif;
--portfolios-font-family-accent: 'Abril Fatface', cursive;
--portfolios-font-weight-normal: 400;
--portfolios-font-weight-bold: 700;
--portfolios-line-height-base: var(--portfolios-text-line-height);
--portfolios-letter-spacing: 0.4px;
/* Divers */
/* z-index variables removed for centralization */
--portfolios-opacity-disabled: 0.4;
--portfolios-gap: 20px;
--portfolios-padding-base: 15px;
--portfolios-margin-base: 15px;
/* Utilitaires modules (ex root.css — overlays, FAQ, galerie) */
--modules-white: #ffffff;
--modules-black: #000000;
--modules-black-alpha: #000000b0;
--modules-black-alpha2: #000000af;
--modules-black-alpha3: #000000c2;
--modules-blue-grey: #7288a2;
--modules-grey: #444444;
}
/* Utilitaires radius (custom properties injectées aussi dans style.php) */
.portfolios-thumbnail-radius {
border-radius: var(--portfolios-thumbnail-radius, 0%);
}
.portfolios-button-radius {
border-radius: var(--portfolios-button-radius, 0px);
}
.portfolios-nav-links-radius {
border-radius: var(--portfolios-nav-links-radius, 8px);
}
.portfolios-border-radius-xs {
border-radius: var(--portfolios-border-radius-xs);
}
.portfolios-border-radius-s {
border-radius: var(--portfolios-border-radius-s);
}
.portfolios-border-radius-m {
border-radius: var(--portfolios-border-radius-m);
}
.portfolios-border-radius-l {
border-radius: var(--portfolios-border-radius-l);
}
.portfolios-border-radius-xl {
border-radius: var(--portfolios-border-radius-xl);
}
.portfolios-border-radius-full {
border-radius: var(--portfolios-border-radius-full);
}
}
/* assets/css/public/core/layout.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 08-10-2026-text-col */
/* ==========================================================================
Portfolios — primitives de mise en page du site visiteur (préfixe pf-)
Remplace core/grid.css. Même modèle que le hub (backoffice/core/layout.css) :
les tokens --layout-* portent les valeurs, les classes pf-* la structure.
Le préfixe évite toute collision avec le layout.css back-office, chargé
en mode connecté et dans l'aperçu du générateur de thème.
Référence : portfolios/docs/theme/layout.md
Aperçu de l'éditeur (Bureau / Tablette / Téléphone) : iframe à la vraie
largeur de l'appareil, les paliers ci-dessous s'y appliquent tels quels.
Paliers :
xl ≥ 1440px
lg 1101 – 1439px (portable : pf-cols-4 passe à 3 colonnes)
md ≤ 1100px (tablette)
≤ 900px (pf-split passe sur une colonne)
sm ≤ 650px (mobile)
========================================================================== */
:root {
/* Largeurs de contenu */
--layout-width-narrow: 500px;
--layout-width-content: 1000px;
--layout-width-wide: 1400px;
/* Longueur de ligne max du texte courant en pleine largeur (structure/layout/reading.css)
et colonne principale de l'article de blog. */
--layout-width-read: var(--layout-width-content);
/* Gouttières de grille */
--layout-gap: 20px;
--layout-gap-lg: 50px;
/* Espacement vertical */
--layout-space-y-sm: 15px;
--layout-space-y-md: 25px;
--layout-space-y-lg: 45px;
--layout-space-y-xl: 80px;
/* Espacement horizontal */
--layout-space-x-sm: 10px;
--layout-space-x-md: 20px;
--layout-space-x-lg: 40px;
/* Gouttière de page (padding latéral -lg des sections) : 20px à tous les
paliers, comme le header et le footer (pf-pad-x-md) — un seul bord pour
header, hero, contenus et footer. */
--layout-gutter: var(--layout-space-x-md);
}
/* ---- Visibilité ---- */
@media screen and (min-width: 1101px) {
.pf-desk-hidden {
display: none;
}
}
@media screen and (max-width: 1100px) {
.pf-mobile-hidden {
display: none;
}
}
/* ---- Largeurs ---- */
.pf-w-narrow,
.pf-w-content,
.pf-w-wide {
width: 100%;
margin: 0 auto;
}
.pf-w-narrow { max-width: var(--layout-width-narrow); }
.pf-w-content { max-width: var(--layout-width-content); }
.pf-w-wide { max-width: var(--layout-width-wide); }
/* Sections de l'accueil : conteneur nommé, disponible pour des @container
(thèmes custom). Conservé tel quel : il crée aussi un contexte de formatage. */
#portfolio_page [id^="home-section-"] .pf-w-wide {
container-type: inline-size;
container-name: portfolio-full;
}
/* ---- Espacement : core/utilities.css (couche « utilitaires ») ---- */
/* ---- Flux ---- */
.pf-stack {
display: flex;
flex-direction: column;
gap: var(--pf-stack-gap, var(--layout-space-y-md));
}
.pf-stack--sm { --pf-stack-gap: var(--layout-space-y-sm); }
.pf-stack--lg { --pf-stack-gap: var(--layout-space-y-lg); }
.pf-cluster {
display: flex;
flex-wrap: wrap;
gap: var(--pf-cluster-gap, 0);
}
.pf-split {
display: grid;
grid-template-rows: auto;
gap: var(--layout-gap-lg);
}
.pf-split--left { grid-template-columns: 2fr 5fr; }
.pf-split--right { grid-template-columns: 5fr 2fr; }
.pf-split--both { grid-template-columns: 1fr 7fr 1fr; }
@media screen and (max-width: 900px) {
.pf-split--left,
.pf-split--right,
.pf-split--both {
grid-template-columns: 1fr;
}
}
.pf-auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(var(--pf-min, 240px), 100%), 1fr));
gap: var(--layout-gap);
}
/* ---- Grilles à colonnes ----
pf-cols-N fixe le nombre de colonnes à tous les paliers, sauf la bande
portable (lg) où pf-cols-4 passe automatiquement à 3 colonnes
(--cols-lg-auto ; comportement historique de grid-four).
Surcharges par palier : pf-cols-lg-N, pf-cols-md-N, pf-cols-sm-N.
md hérite de la base, sm hérite de md.
Chaque pf-cols-N réinitialise les surcharges : une grille imbriquée
n'hérite pas de celles de son parent. */
.pf-cols-1,
.pf-cols-2,
.pf-cols-3,
.pf-cols-4,
.pf-cols-5,
.pf-cols-6,
.pf-cols-7,
.pf-cols-8,
.pf-cols-9,
.pf-cols-10 {
--cols-lg: initial;
--cols-md: initial;
--cols-sm: initial;
display: grid;
grid-template-rows: auto;
gap: var(--layout-gap);
}
.pf-cols-1 { --cols: 1; --cols-lg-auto: 1; }
.pf-cols-2 { --cols: 2; --cols-lg-auto: 2; }
.pf-cols-3 { --cols: 3; --cols-lg-auto: 3; }
.pf-cols-4 { --cols: 4; --cols-lg-auto: 3; }
.pf-cols-5 { --cols: 5; --cols-lg-auto: 5; }
.pf-cols-6 { --cols: 6; --cols-lg-auto: 6; }
.pf-cols-7 { --cols: 7; --cols-lg-auto: 7; }
.pf-cols-8 { --cols: 8; --cols-lg-auto: 8; }
.pf-cols-9 { --cols: 9; --cols-lg-auto: 9; }
.pf-cols-10 { --cols: 10; --cols-lg-auto: 10; }
.pf-cols-lg-1 { --cols-lg: 1; }
.pf-cols-lg-2 { --cols-lg: 2; }
.pf-cols-lg-3 { --cols-lg: 3; }
.pf-cols-lg-4 { --cols-lg: 4; }
.pf-cols-lg-5 { --cols-lg: 5; }
.pf-cols-lg-6 { --cols-lg: 6; }
.pf-cols-lg-7 { --cols-lg: 7; }
.pf-cols-lg-8 { --cols-lg: 8; }
.pf-cols-lg-9 { --cols-lg: 9; }
.pf-cols-lg-10 { --cols-lg: 10; }
.pf-cols-md-1 { --cols-md: 1; }
.pf-cols-md-2 { --cols-md: 2; }
.pf-cols-md-3 { --cols-md: 3; }
.pf-cols-md-4 { --cols-md: 4; }
.pf-cols-md-5 { --cols-md: 5; }
.pf-cols-md-6 { --cols-md: 6; }
.pf-cols-md-7 { --cols-md: 7; }
.pf-cols-md-8 { --cols-md: 8; }
.pf-cols-md-9 { --cols-md: 9; }
.pf-cols-md-10 { --cols-md: 10; }
.pf-cols-sm-1 { --cols-sm: 1; }
.pf-cols-sm-2 { --cols-sm: 2; }
.pf-cols-sm-3 { --cols-sm: 3; }
.pf-cols-sm-4 { --cols-sm: 4; }
.pf-cols-sm-5 { --cols-sm: 5; }
.pf-cols-sm-6 { --cols-sm: 6; }
.pf-cols-sm-7 { --cols-sm: 7; }
.pf-cols-sm-8 { --cols-sm: 8; }
.pf-cols-sm-9 { --cols-sm: 9; }
.pf-cols-sm-10 { --cols-sm: 10; }
/* #portfolio_page : les colonnes l'emportent sur les règles de composant,
comme l'ancien grid.css (parité). --_cols = nombre de colonnes du palier actif. */
#portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .pf-cols-4, .pf-cols-5,
.pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
--_cols: var(--cols);
grid-template-columns: repeat(var(--_cols), 1fr);
}
@media screen and (min-width: 1101px) and (max-width: 1439px) {
#portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .pf-cols-4, .pf-cols-5,
.pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
--_cols: var(--cols-lg, var(--cols-lg-auto));
}
}
@media screen and (max-width: 1100px) {
#portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .pf-cols-4, .pf-cols-5,
.pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
--_cols: var(--cols-md, var(--cols));
}
}
@media screen and (max-width: 650px) {
#portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .pf-cols-4, .pf-cols-5,
.pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
--_cols: var(--cols-sm, var(--cols-md, var(--cols)));
}
}
/* Largeur limitée (pf-w-content, ~1000px) : au-delà du palier lg, les grilles à colonnes
gardent les colonnes du palier lg (pf-cols-4 → 3, ou pf-cols-lg-N). */
@media screen and (min-width: 1440px) {
#portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .pf-cols-4, .pf-cols-5,
.pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10):is(.pf-w-content, .pf-w-content *) {
--_cols: var(--cols-lg, var(--cols-lg-auto));
}
}
}
/* assets/css/public/core/utilities.css */
/* @layer-wrap:site.utilitaires */
@layer site.utilitaires {
/* Version: 16-10-2026 */
/* Utilitaires d'espacement (classes pf-*), sortis de core/layout.css (couches CSS, lot L2).
* Couche « utilitaires » (shared/core/design/stylesheets.php) : après le socle, les éléments, le header commun et la
* typographie imposée, avant le thème. Ils l'emportent sur les règles des composants quelle que soit leur
* spécificité, sans !important ; un thème peut les ajuster. Échelle : sm · md · lg · xl (xl : vertical seul). */
.pf-pad-sm { padding: var(--layout-space-y-sm) var(--layout-space-x-sm); }
.pf-pad-md { padding: var(--layout-space-y-md) var(--layout-space-x-md); }
.pf-pad-lg { padding: var(--layout-space-y-lg) var(--layout-gutter); }
.pf-pad-x-sm { padding-left: var(--layout-space-x-sm); padding-right: var(--layout-space-x-sm); }
.pf-pad-x-md { padding-left: var(--layout-space-x-md); padding-right: var(--layout-space-x-md); }
.pf-pad-x-lg { padding-left: var(--layout-gutter); padding-right: var(--layout-gutter); }
.pf-pad-y-sm { padding-top: var(--layout-space-y-sm); padding-bottom: var(--layout-space-y-sm); }
.pf-pad-y-md { padding-top: var(--layout-space-y-md); padding-bottom: var(--layout-space-y-md); }
.pf-pad-y-lg { padding-top: var(--layout-space-y-lg); padding-bottom: var(--layout-space-y-lg); }
.pf-pad-y-xl { padding-top: var(--layout-space-y-xl); padding-bottom: var(--layout-space-y-xl); }
.pf-pt-sm { padding-top: var(--layout-space-y-sm); }
.pf-pt-md { padding-top: var(--layout-space-y-md); }
.pf-pt-lg { padding-top: var(--layout-space-y-lg); }
.pf-pt-xl { padding-top: var(--layout-space-y-xl); }
.pf-pb-sm { padding-bottom: var(--layout-space-y-sm); }
.pf-pb-md { padding-bottom: var(--layout-space-y-md); }
.pf-pb-lg { padding-bottom: var(--layout-space-y-lg); }
.pf-pb-xl { padding-bottom: var(--layout-space-y-xl); }
.pf-pl-sm { padding-left: var(--layout-space-x-sm); }
.pf-pl-md { padding-left: var(--layout-space-x-md); }
.pf-pl-lg { padding-left: var(--layout-gutter); }
.pf-pr-sm { padding-right: var(--layout-space-x-sm); }
.pf-pr-md { padding-right: var(--layout-space-x-md); }
.pf-pr-lg { padding-right: var(--layout-gutter); }
.pf-mt-sm { margin-top: var(--layout-space-y-sm); }
.pf-mt-md { margin-top: var(--layout-space-y-md); }
.pf-mt-lg { margin-top: var(--layout-space-y-lg); }
.pf-mt-xl { margin-top: var(--layout-space-y-xl); }
.pf-mb-sm { margin-bottom: var(--layout-space-y-sm); }
.pf-mb-md { margin-bottom: var(--layout-space-y-md); }
.pf-mb-lg { margin-bottom: var(--layout-space-y-lg); }
.pf-mb-xl { margin-bottom: var(--layout-space-y-xl); }
/* Marges latérales : fixes (la gouttière de page ne concerne que le padding). */
.pf-ml-sm { margin-left: var(--layout-space-x-sm); }
.pf-ml-md { margin-left: var(--layout-space-x-md); }
.pf-ml-lg { margin-left: var(--layout-space-x-lg); }
.pf-mr-sm { margin-right: var(--layout-space-x-sm); }
.pf-mr-md { margin-right: var(--layout-space-x-md); }
.pf-mr-lg { margin-right: var(--layout-space-x-lg); }
/* Fonds utilitaires des cartes (.bg-color / .bg-color-alt posés par les templates) : couche « utilitaires »,
passent devant le fond générique des éléments sans !important. */
#portfolio_page .bg-color,
#profil-modal-root .bg-color {
background: var(--portfolios-theme-bg-main, #272727);
}
#portfolio_page .bg-color-alt,
#profil-modal-root .bg-color-alt {
background: var(--portfolios-theme-bg-alt, #272727);
}
}
/* assets/css/public/design/thumbnails/grid.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-desktop-cols */
/* ==========================================================================
Grilles de vignettes (pf-thumbs) — anciennes classes « *-elements »
de core/grid.css (horizontal / square / vertical).
Colonnes par palier (--thumbs-xs … --thumbs-xl), paliers propres aux vignettes :
< 530 ≥ 530 ≥ 768 ≥ 1100 ≥ 1440
landscape 1 2 2 3 3
square 1 2 3 4 5
portrait 2 3 3 3 4
Aperçu de l'éditeur : iframe à la largeur de l'appareil, mêmes @media que le site.
========================================================================== */
#portfolio_page .pf-thumbs {
--_thumbs: var(--thumbs-xs);
margin: 0 auto;
display: grid;
grid-template-rows: auto;
grid-template-columns: repeat(var(--_thumbs), 1fr);
gap: var(--layout-gap);
}
.pf-thumbs--landscape { --thumbs-xs: 1; --thumbs-sm: 2; --thumbs-md: 2; --thumbs-lg: 3; --thumbs-xl: 3; }
.pf-thumbs--square { --thumbs-xs: 1; --thumbs-sm: 2; --thumbs-md: 3; --thumbs-lg: 4; --thumbs-xl: 5; }
.pf-thumbs--portrait { --thumbs-xs: 2; --thumbs-sm: 3; --thumbs-md: 3; --thumbs-lg: 3; --thumbs-xl: 4; }
@media screen and (min-width: 530px) {
#portfolio_page .pf-thumbs { --_thumbs: var(--thumbs-sm); }
}
@media screen and (min-width: 768px) {
#portfolio_page .pf-thumbs { --_thumbs: var(--thumbs-md); }
}
@media screen and (min-width: 1100px) {
#portfolio_page .pf-thumbs { --_thumbs: var(--thumbs-lg); }
}
@media screen and (min-width: 1440px) {
#portfolio_page .pf-thumbs { --_thumbs: var(--thumbs-xl); }
}
/* Vignette : hauteur portée par le ratio (padding-bottom). */
#portfolio_page .pf-thumbs a {
position: relative;
transition: 0.2s linear;
height: 0;
width: 100%;
box-sizing: border-box;
}
#portfolio_page .pf-thumbs--landscape a { padding: 0% 0% 50% 0%; }
#portfolio_page .pf-thumbs--square a { padding: 0% 0% 100% 0%; }
#portfolio_page .pf-thumbs--portrait a { padding: 0% 0% 150% 0%; }
/* Accueil : deux rangées pleines selon les colonnes du palier.
Les pages modules (listing complet) ne sont pas concernées. */
@media screen and (max-width: 529px) {
#portfolio_page [id^="home-section-"] .pf-thumbs--landscape > :nth-child(n+3),
#portfolio_page [id^="home-section-"] .pf-thumbs--square > :nth-child(n+3),
#portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+5) {
display: none;
}
}
@media screen and (min-width: 530px) and (max-width: 767px) {
#portfolio_page [id^="home-section-"] .pf-thumbs--landscape > :nth-child(n+5),
#portfolio_page [id^="home-section-"] .pf-thumbs--square > :nth-child(n+5),
#portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+7) {
display: none;
}
}
@media screen and (min-width: 768px) and (max-width: 1099px) {
#portfolio_page [id^="home-section-"] .pf-thumbs--landscape > :nth-child(n+5),
#portfolio_page [id^="home-section-"] .pf-thumbs--square > :nth-child(n+7),
#portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+7) {
display: none;
}
}
@media screen and (min-width: 1100px) and (max-width: 1439px) {
#portfolio_page [id^="home-section-"] .pf-thumbs--square > :nth-child(n+9),
#portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+7) {
display: none;
}
}
@media screen and (min-width: 1440px) {
#portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+9) {
display: none;
}
}
/* Listes d'articles de l'accueil (pf-cols) : deux rangées également. */
@media screen and (max-width: 650px) {
#portfolio_page [id^="home-section-"] .blog-list > :nth-child(n+3) {
display: none;
}
}
@media screen and (min-width: 651px) and (max-width: 1100px) {
#portfolio_page [id^="home-section-"] .blog-list > :nth-child(n+5) {
display: none;
}
}
@media screen and (min-width: 1101px) and (max-width: 1439px) {
#portfolio_page [id^="home-section-"] .blog-list > :nth-child(n+7) {
display: none;
}
}
/* ---- Contenu des vignettes ---- */
.horizontal-grid-item .poster, .square-grid-item .poster, .vertical-grid-item .poster {
position: absolute;
background-size: cover;
background-position: center;
transition: 0.2s linear;
height: 100%;
width: 100%;
}
/* Contraste automatique : le texte reste masqué le temps que sa couleur soit calculée, pour
qu'il apparaisse directement dans sa teinte définitive au lieu de basculer après coup.
Le dégradé, lui, reste visible : seule la typo est révélée en fondu. */
.thumbnail-contrast-pending :is(h4, h5, p) {
opacity: 0;
}
.thumbnail-contrast-resolved :is(h4, h5, p) {
opacity: 1;
transition: opacity 160ms linear;
}
.horizontal-grid-item .horizontal-infos, .square-grid-item .square-infos, .vertical-grid-item .vertical-infos {
position: absolute;
bottom: 0;
/* Marges du texte selon l'arrondi des vignettes (/theme) : le texte reste hors de la courbe des coins. */
--pf-thumb-text-inset: calc(var(--pf-radius, var(--portfolios-thumbnail-radius, 0px)) * 0.5);
padding: 10px max(10px, var(--pf-thumb-text-inset)) max(20px, var(--pf-thumb-text-inset));
box-sizing: border-box;
width: 100%;
background: var(--portfolios-thumbnail-overlay-gradient, linear-gradient(0deg, rgba(0,0,0,0.8673670151654411) 0%, rgba(0,0,0,0.6082633737088585) 39%, rgba(0,0,0,0.4878151944371498) 67%, rgba(0,0,0,0.2721289199273459) 89%, rgba(0,0,0,0) 97%, rgba(0,0,0,0) 100%));
transition: 0.1s linear;
}
.horizontal-grid-item h4, .square-grid-item h4, .vertical-grid-item h4 {
margin-bottom: 2px;
}
/* Largeur limitée (pf-w-content, ~1000px) : le conteneur est plus étroit que l'écran,
les vignettes prennent donc les colonnes du palier md (768–1099) au-delà de 1100px.
--_thumbs pilote toutes les variantes (matrices/base.css). */
@media screen and (min-width: 1100px) {
#portfolio_page .pf-thumbs:is(.pf-w-content, .pf-w-content *) { --_thumbs: var(--thumbs-md); }
}
/* « Autres … » en bas des fiches (pf-thumbs--one-row) : une seule ligne sur ordinateur.
On masque tout ce qui dépasse le nombre de colonnes du palier (mêmes valeurs que plus haut ;
polaroïd carré plafonné à 4 en xl, cf. matrices/base.css). Mobile et tablette inchangés. */
@media screen and (min-width: 1100px) {
#portfolio_page .pf-thumbs--one-row:is(.pf-thumbs--landscape, .pf-thumbs--portrait) > :nth-child(n+4),
#portfolio_page .pf-thumbs--one-row.pf-thumbs--square > :nth-child(n+5),
#portfolio_page .pf-thumbs--one-row.pf-thumbs--landscape:is(.pf-w-content, .pf-w-content *) > :nth-child(n+3),
#portfolio_page .pf-thumbs--one-row:is(.pf-thumbs--square, .pf-thumbs--portrait):is(.pf-w-content, .pf-w-content *) > :nth-child(n+4) {
display: none;
}
}
@media screen and (min-width: 1440px) {
#portfolio_page .pf-thumbs--one-row.pf-thumbs--portrait:not(.pf-w-content, .pf-w-content *) > :nth-child(4),
#portfolio_page .pf-thumbs--one-row.pf-thumbs--square:not(.pf-w-content, .pf-w-content *, [data-works-layout="polaroid"]) > :nth-child(5) {
display: revert;
}
}
}
/* assets/css/public/core/elements.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 23-09-2026-20-19 */
/* Éléments transverses du site visiteur (issus de l'ancien core/grid.css) :
fermeture de contenu, boutons Arktefakt, champs, contrastes forcés, embeds vidéo.
Toujours chargé, y compris en thème custom. La mise en page vit dans core/layout.css. */
/* CLOSE CONTENT */
#close-content {
position: fixed;
top: 0px;
padding-top: 25px;
left: 0;
right: 0;
}
#close-content nav ul {
display: flex;
justify-content: flex-end;
align-items: center;
}
.close-content-button {
cursor: pointer;
transition: 0.2s linear;
}
.close-content-button:hover {
opacity: 0.7;
}
.close-content-button img {
width: 50px;
}
/* BUTTONS — .folio_button / thème : design/themes/basic/buttons.css ; ici uniquement héritage UI type formulaires */
/* Chrome éditeur / intégrations : boutons Arktefakt (.arkt-btn) */
#portfolio_page #portfolio-content-interface .arkt-btn,
#portfolio_page #hub-content-interface .arkt-btn {
padding: 10px 20px;
max-width: max-content;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border: none;
transition: 0.2s linear;
cursor: pointer;
filter: brightness(100%);
}
#portfolio_page #portfolio-content-interface .arkt-btn:hover,
#portfolio_page #hub-content-interface .arkt-btn:hover {
filter: brightness(110%);
}
/* Hors chrome hub (éditeur de thème, overlay) : :where garde la spécificité d'origine. */
input:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *),
select:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *),
textarea:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *),
#loadmore:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *) {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
width: 100%;
}
#portfolio_page #portfolio-content-interface .arkt-btn-full,
#portfolio_page #hub-content-interface .arkt-btn-full,
form .arkt-btn {
width: 100%;
max-width: 100%;
}
#portfolio_page #portfolio-content-interface .arkt-btn svg,
#portfolio_page #hub-content-interface .arkt-btn svg {
width: 20px;
height: 20px;
}
#portfolio_page #portfolio-content-interface .arkt-btn span,
#portfolio_page #hub-content-interface .arkt-btn span {
margin-left: 5px;
}
#portfolio_page #portfolio-content-interface .arkt-btn,
#portfolio_page #hub-content-interface .arkt-btn,
input[type="submit"]:not(.folio_button):not(.folio-button),
#form-menu li, #goto_project, .nav__content .nav__list li .sub-menu a {
filter: brightness(100%);
}
#portfolio_page #portfolio-content-interface .arkt-btn:hover,
#portfolio_page #hub-content-interface .arkt-btn:hover,
input[type="submit"]:not(.folio_button):not(.folio-button):hover,
#delete ul li a:hover, #goto_project:hover, .nav__content .nav__list li:hover .sub-menu a:hover, .nav__content .nav__list li a:hover {
filter: brightness(110%);
}
input[type=radio] {
margin-bottom: 0px;
}
input[type="radio"] {
width: 15px;
height: 15px;
}
input[type=color] {
width: 100%;
height: 10vh;
}
.-black, .-black * {
color: #000000;
}
.-black svg {
fill: #000000;
}
.-white, .-white * {
color: #ffffff;
}
.-white svg {
fill: #ffffff;
}
.-black:hover, .-black:hover *, menu-item .-black:hover {
color: #000000;
}
.-black:hover svg {
fill: #000000;
}
.-white:hover, .-white:hover *, .menu-item .-white:hover {
color: #ffffff;
}
.-white:hover svg {
fill: #ffffff;
}
/* YOUTUBE & FACEBOOK (paysage) */
.youtube,
.facebook:not(.video-portrait) {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.youtube iframe,
.youtube object,
.youtube embed,
.facebook:not(.video-portrait) iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Portrait : Shorts, TikTok, Instagram, Reels Facebook — pleine largeur, ratio 9:16 */
.youtube.video-portrait,
.tiktok,
.tiktok.video-portrait,
.instagram,
.instagram.video-portrait,
.facebook.video-portrait {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
aspect-ratio: 9 / 16;
height: auto;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
}
.youtube.video-portrait iframe,
.tiktok iframe,
.tiktok.video-portrait iframe,
.instagram iframe,
.instagram.video-portrait iframe,
.facebook.video-portrait iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
h1, h2, h3, h4, label, select, .arkt-btn, p, a {
white-space: wrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* assets/css/public/themes/scrollbar-night.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
/* Scrollbar sombre (nightmode) - compatible macOS/Windows, Chrome, Firefox, Edge, Safari */
::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.4);
border-radius: var(--portfolios-border-radius-m);
transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.6);
cursor: pointer;
}
::-webkit-scrollbar-corner {
background: transparent;
cursor: pointer;
}
html, body, * {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}
@media (hover: hover) {
::-webkit-scrollbar {
background: rgba(255, 255, 255, 0.28);
cursor: pointer;
}
}
}
/* assets/css/public/themes/theme-base.css */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
/* Version: 12-07-2026 — structure thème portfolio (couleurs injectées inline) */
:root {
/* Effets de flou (structure) */
--portfolios-blur-strong-effect: blur(200px);
--portfolios-blur-soft-effect: blur(10px);
--portfolios-blur-none-effect: blur(0px);
/* Images — fallbacks ; surchargés par css_vars */
--portfolios-grain-img: url(../../../assets/media/public/design/background/noise-white.png);
--portfolios-grid-img: url(../../../assets/media/public/design/background/grid-black.png);
--portfolios-img-repeat: repeat;
--portfolios-img-position: center;
/* Fallbacks couleur (surchargés par dérivation body_bg_color) */
--portfolios-text-main-color: #222;
--portfolios-bg-main-color: #fafafa;
--portfolios-bg-contrast-color: #0f0f0f;
--portfolios-bg-contrast-transparence-color: rgba(139, 139, 139, 0.14);
--portfolios-bg-hover-color: #f7f7f7;
--portfolios-bg-alt-color: #e2e2e2;
--portfolios-bg-dark-alt-color: #333;
--portfolios-border-color: rgb(224, 224, 224);
--portfolios-border-strong-color: #bdbdbd;
--portfolios-border-light-color: #e2e2e2;
--portfolios-border-accent-color: #987ed1;
--portfolios-blur-bg-color: #fafafae7;
--portfolios-pattern-bg-color: #eeeeee;
--portfolios-neutral-bg-color: #eeeeee;
--portfolios-theme-bg-main: #fafafa;
--portfolios-theme-bg-contrast: #0f0f0f;
--portfolios-theme-bg-hover: #f7f7f7;
--portfolios-theme-bg-alt: #e2e2e2;
--portfolios-theme-bg-dark-alt: #333;
--portfolios-theme-border: rgb(224, 224, 224);
--portfolios-theme-border-strong: #bdbdbd;
--portfolios-theme-border-light: #e2e2e2;
--portfolios-theme-input-required: rgb(241, 174, 174);
--portfolios-theme-input-valid: rgb(212, 242, 184);
--portfolios-theme-fill: #0f0f0f;
--portfolios-theme-fill-alt: #bdbdbd;
--portfolios-theme-fill-light: #e4e4e4;
--portfolios-theme-text-main: #222;
--portfolios-theme-text-contrast: #000000;
--portfolios-theme-menus-bg: transparent;
--portfolios-theme-menus-bg-hover: #f7f7f7;
--portfolios-theme-menus-text: #222;
--portfolios-theme-mandatory: rgb(192, 113, 113);
--portfolios-full-box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.432);
--portfolios-shadow-box-shadow: 1px 2px 17px -5px rgba(0,0,0,0.75);
}
}
/* assets/css/public/structure/layout/hero-title.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/*
* Tous thèmes : espace entre titre, sous-titre et description des fiches
* (#title-about). headings.css (couche « reglages ») remet à zéro les marges des h2,
* d'où un `gap` plutôt que des marges. Le thème par défaut remplace ce gap par des
* marges calées sur l'interligne des titres (hero-spacing.css) ; un thème ou
* /custom/css/main.css peut le surcharger.
*/
#portfolio_page #hero #title-star #title-about {
display: flex;
flex-direction: column;
gap: var(--layout-space-y-sm, 15px);
}
#portfolio_page #hero #title-star #title-about > * {
margin-top: 0;
margin-bottom: 0;
}
/* Fiche avec illustration : écart entre l'illustration et le texte (auparavant l'utilitaire pf-ml-lg posé par le
template, que les règles mobiles des modules annulaient en !important). Les feuilles des modules (couche elements)
le remettent à zéro quand le hero s'empile. */
#portfolio_page #hero #title-star > #pochette + #title-about {
margin-left: var(--layout-space-x-lg);
}
}
/* assets/css/public/structure/layout/hero-scrim.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 03-10-2026 */
/*
* Tous thèmes : voile de lisibilité du hero des fiches (#title-illustration).
* Seules les fiches portent #title-illustration : l'accueil (#title-home) et les
* vedettes gardent leur propre gestion et ne sont pas touchés.
*
* L'image de couverture est fondue dans la couleur de fond de la section sous
* le texte (fondu latéral côté texte + fondu bas vers le contenu). Le texte
* garde les couleurs du thème (headings.css), qui contrastent déjà avec ce fond : aucune
* détection clair/sombre, aucune ombre, quel que soit le contenu de l'image.
* L'image reste visible du côté opposé et nette dans la pochette / cover.
*
* À 0.92, l'image ne pèse plus que 8 % sous le texte : même un pixel blanc pur
* sous un thème sombre (ou noir pur sous un thème clair) ne retire qu'une petite
* part du contraste texte / fond prévu par le thème.
*
* Réglages surchargeables par un thème personnalisé :
* --hero-scrim-color couleur du voile (posée par includes/js.php sur
* #hero = couleur de section ; repli : fond du thème)
* --hero-scrim-strength opacité sous le texte (0..1)
* --hero-scrim-reach limite droite de la zone pleine
* --hero-scrim-feather longueur du fondu après cette limite
*/
#portfolio_page #hero:has(> #title-illustration) {
--hero-scrim-strength: 0.92;
/* Pochette (≤ 200px) + texte (≤ 40 % de la colonne de 1000px) ≈ bord gauche de la colonne + 660px */
--hero-scrim-reach: max(65%, calc(50% + 160px));
--hero-scrim-feather: 25%;
isolation: isolate;
}
#portfolio_page #hero:has(> #title-illustration)::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
/* Couleur de section par-dessus le fond de page : couvre aussi les couleurs de section translucides */
background:
linear-gradient(var(--hero-scrim-color, transparent), var(--hero-scrim-color, transparent)),
var(--portfolios-theme-bg-main, var(--portfolios-bg-main-color, #fafafa));
-webkit-mask-image:
linear-gradient(to right,
rgb(0 0 0 / var(--hero-scrim-strength)) 0,
rgb(0 0 0 / var(--hero-scrim-strength)) var(--hero-scrim-reach),
transparent calc(var(--hero-scrim-reach) + var(--hero-scrim-feather))),
linear-gradient(to bottom, transparent 55%, #000 100%);
mask-image:
linear-gradient(to right,
rgb(0 0 0 / var(--hero-scrim-strength)) 0,
rgb(0 0 0 / var(--hero-scrim-strength)) var(--hero-scrim-reach),
transparent calc(var(--hero-scrim-reach) + var(--hero-scrim-feather))),
linear-gradient(to bottom, transparent 55%, #000 100%);
-webkit-mask-composite: source-over;
mask-composite: add;
}
#portfolio_page #hero:has(> #title-illustration) > #title-content {
position: relative;
z-index: 2;
}
/* Projets : la cover 16:9 pleine largeur montre déjà l'image et le texte passe
dessous, sur toute la largeur : voile uniforme. */
#portfolio_page #hero:has(> #title-illustration):has(.project-cover) {
--hero-scrim-reach: 100%;
}
/* Mobile : le texte occupe toute la largeur sous la pochette. */
@media screen and (max-width: 800px) {
#portfolio_page #hero:has(> #title-illustration) {
--hero-scrim-reach: 100%;
}
}
}
/* assets/css/public/structure/layout/main.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 28-09-2026-14-30 */
html,
#loader {
background-color: var(--portfolios-theme-bg-main, var(--portfolios-bg-main-color, var(--portfolios-color-bg-main, #fafafa)));
}
body {
margin: 0 auto;
min-height: 100vh;
background-color: var(--portfolios-theme-bg-main, var(--portfolios-bg-main-color, var(--portfolios-color-bg-main, #fafafa)));
}
#portfolio_page {
position: relative;
}
@media screen and (max-width: 900px) {
.member-item .member-img {
width: 60px;
height: 60px;
}
.close-content-button {
top: 8%;
right: 10%;
}
.close-content-button img {
width: 50px;
}
}
#portfolio_page main {
border: 0px;
}
/* Fond : celui de la page article reste (modules/blog/article.css). */
#portfolio_page main:not(:has(#blog-article)) {
background-color: initial;
}
#hero {
position: relative;
background-size: cover;
background-position: center;
}
#title-illustration {
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
#hero #title-star {
display: flex;
align-items: flex-start;
min-height: 50vh;
}
#hero #title-star #title-about {
display: flex;
flex-direction: column;
justify-content: flex-start;
box-sizing: border-box;
flex: 1;
max-width: 40%;
margin: 0px;
}
#hero #title-star #title-about h1,
#hero #title-star #title-about h2,
#hero #title-star #title-about h3,
#hero #title-star #title-about h4,
#hero #title-star #title-about p {
text-align: left;
}
#hero.hero-plain #title-star {
min-height: 0;
}
#hero #title-star #title-about h3 {
padding: 0px;
margin: 0px;
}
#hero #title-star > #pochette {
--pochette-size: min(200px, 20%);
width: var(--pochette-size);
height: var(--pochette-size);
max-width: 200px;
max-height: 200px;
min-height: 0;
padding: 0;
flex: 0 0 var(--pochette-size);
align-self: flex-start;
aspect-ratio: 1 / 1;
position: relative;
overflow: hidden;
box-sizing: border-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#hero #pochette:hover,
#hero #pochette:active {
transform: none;
filter: none;
}
#hero #profil {
background-size: cover;
width: 50px;
height: 50px;
background-color: var(--portfolios-color-bg-dark);
border-radius: var(--portfolios-border-radius-full);
margin-right: var(--portfolios-margin-base);
}
#hero .festivals {
margin-top: 20px;
}
@media screen and (max-width: 700px) {
/* Pochette album audio masquée en mobile : voir modules/audios/show.css.
* Productions : pochette verticale visible (modules/videos/productions.css). */
#hero #title-illustration {
width: 100%;
}
#hero #title-star {
padding-top: 50px;
}
#hero #title-star #title-about {
width: 80%;
max-width: 80%;
margin-left: 0px;
}
}
/* Portrait « à propos » / auteur : préférer ![…]()
(sémantique, SEO, lecteurs d’écran).
Contours (bordure, ombre, radius) : design/thumbnails/main.css — mêmes tokens que .vertical-grid-item */
.about-artist-img {
height: 150px;
width: 150px;
margin-right: 25px;
background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color, transparent));
flex-shrink: 0;
box-sizing: border-box;
cursor: default;
}
img.about-artist-img {
display: block;
max-width: 100%;
object-fit: cover;
object-position: center;
}
/* Avatar d'auteur d'article : rond. Ciblé sur le lien d'avatar car la classe
.about-artist-img sert aussi au portrait de la page « à propos », qui reste carré. */
.title-article-author__avatar-link .about-artist-img {
border-radius: 50%;
}
/* Initiales affichées quand l'auteur n'a pas de photo. Les couleurs viennent des
tokens de thème : le contraste avec le fond s'inverse donc tout seul entre
thème clair et thème sombre. */
.about-artist-img.portfolios-avatar-initials {
display: flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
border-radius: 50%;
color: var(--portfolios-text-main-color, inherit);
font-size: 42px;
font-weight: 700;
line-height: 1;
letter-spacing: 1px;
text-transform: uppercase;
user-select: none;
}
/* Page à propos — hero : le portrait suit align_title_about_custom (bloc empilé, sans marge latérale). */
#portfolio_page main#about #about-hero.about-align-left img.about-artist-img,
#portfolio_page main#about #about-hero.title-align-left img.about-artist-img,
#portfolio_page main#about #about-hero.text-align-left img.about-artist-img {
margin-left: 0;
margin-right: 0;
}
#portfolio_page main#about #about-hero.about-align-center img.about-artist-img,
#portfolio_page main#about #about-hero.title-align-center img.about-artist-img,
#portfolio_page main#about #about-hero.text-align-center img.about-artist-img {
margin-left: auto;
margin-right: auto;
}
#portfolio_page main#about #about-hero.about-align-right img.about-artist-img,
#portfolio_page main#about #about-hero.title-align-right img.about-artist-img,
#portfolio_page main#about #about-hero.text-align-right img.about-artist-img {
margin-left: auto;
margin-right: 0;
}
div.about-artist-img {
background-size: cover;
background-position: center;
}
@media screen and (max-width: 700px) {
.about-artist-img {
height: 100px;
width: 100px;
}
}
.open-graph-card {
border-bottom: none;
background: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color, #e2e2e2));
border-radius: var(--portfolios-border-radius-m, 8px);
box-shadow: var(--portfolios-box-shadow-s, 0 0 0 0.2rem rgba(0,0,0,0.08));
}
.open-graph-card .open-graph-illustration {
width: 100%;
height: 45vh;
background-size: cover;
background-position: center;
transition: 0.2s linear;
}
.open-graph-card .open-graph-illustration::after {
position: absolute;
bottom: 0;
content: "¶";
height: 100%;
width: 100%;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: 0.2s linear;
}
.open-graph-card:hover .open-graph-illustration::after {
bottom: 0px;
opacity: 1;
}
.open-graph-card .open-graph-infos {
padding: 15px 25px;
}
.open-graph-card .open-graph-infos p {
margin-bottom: 0px;
}
.open-graph-card .open-graph-infos h4 {
margin-top: 0px;
}
/* TECHNIQUE */
#technique article ul {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
}
#technique article ul li {
max-width: 30%;
}
#technique article ul li:first-child {
font-weight: bold;
text-align: left;
}
#technique article ul li:last-child {
text-align: right;
}
#technique article ul .dots {
flex: 1;
max-width: none;
border-bottom: 2px dotted;
margin: 0 10px;
height: 0;
opacity: 0.4;
}
#goto article a.platform-link {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
text-align: left;
padding: 14px 16px;
transition: 0.2s linear;
}
#goto article a:not(.platform-link) {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px 10px;
transition: 0.2s linear;
}
#goto svg {
max-height: 35px;
max-width: 60px;
margin-bottom: 15px;
}
@media screen and (max-width: 800px) {
#goto svg {
width: 25px;
}
#goto article {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (max-width: 500px) {
#goto article {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 350px) {
#goto article {
grid-template-columns: 1fr;
}
}
/* LOADER */
#portfolio_page .loader div {
border: 4px solid #bdbdbd;
}
/* FRONTS */
#portfolio_page p,
#portfolio_page span,
#portfolio_page *,
#portfolio_page svg {
color: var(--portfolios-theme-bg-contrast);
}
#portfolio_page .blog-page-content * {
color: #bdbdbd;
}
/* FOOTER */
/* ARTICLES */
#portfolio_page main section:first-child {
border-top: none;
}
#portfolio_page main section:last-child {
border-bottom: none;
}
#portfolio_page .section-bg-pair {
background-color: var(--portfolios-section-color-pair, var(--portfolios-theme-bg-alt, var(--portfolios-bg-alt-color, #e2e2e2)));
}
#portfolio_page .section-bg-odd {
background-color: var(--portfolios-section-color-odd, var(--portfolios-theme-bg-main, var(--portfolios-bg-main-color, #fafafa)));
}
#portfolio_page #head-article .date,
#portfolio_page .article .main p,
#portfolio_page .article .main img,
#portfolio_page .youtube,
#portfolio_page .vimeo {
color: var(--portfolios-theme-border-light, #bdbdbd);
}
/* POSTER */
#portfolio_page .audio-slider .audio-set .poster,
#portfolio_page #gallery a,
#portfolio_page #production-show-photos-grid a,
#portfolio_page .book-slider .book-set .poster,
#portfolio_page .video-slider .video-set .poster,
#portfolio_page .photo-slider .photo-set .poster,
#portfolio_page .card .thumb,
#portfolio_page .open-graph-card .open-graph-illustration {
transition: all 200ms linear;
}
#portfolio_page .horizontal-infos h4,
#portfolio_page .vertical-infos h4,
#portfolio_page .square-infos h4 {
color: var(--portfolios-thumbnail-overlay-title-color, #ffffff);
text-shadow: var(--portfolios-thumbnail-overlay-text-shadow, none);
}
#portfolio_page .horizontal-infos p,
#portfolio_page .vertical-infos p,
#portfolio_page .square-infos p {
color: var(--portfolios-thumbnail-overlay-description-color, #ffffff);
text-shadow: var(--portfolios-thumbnail-overlay-text-shadow, none);
}
/* GALLERY */
#portfolio_page .photo-slider .photo-set .poster {
background-color: var(--portfolio-gallery-poster-bg, var(--portfolios-theme-bg-main, #e2e2e2));
}
#portfolio_page #swipebox-prev,
#portfolio_page #swipebox-next,
#portfolio_page #swipebox-close {
background-color: var(--portfolios-theme-bg-main);
}
#portfolio_page #swipebox-title {
color: var(--portfolios-theme-text-main, #ffffff);
transition: 0.2s linear;
}
/* swipebox/photo-viewer styles moved to modules/photos/swipebox.css */
#portfolio_page #swipebox-prev:hover,
#portfolio_page #swipebox-next:hover,
#portfolio_page #swipebox-close:hover {
color: var(--portfolios-theme-text-contrast, #000000);
}
/* VIDEOS */
#portfolio_page .video-slider .video-set .poster {
background-color: var(--portfolio-video-poster-bg, var(--portfolios-theme-bg-alt, #e2e2e2));
}
/* GO TO — voir structure/layout/theme-advanced-colors.css */
/* SERVICES — voir structure/layout/theme-advanced-colors.css */
/* MEMBERS */
#portfolio_page .close-content-button {
filter: invert(1);
}
/* FAQ */
#portfolio_page .faq button[aria-expanded=true] {
border-bottom: 2px solid var(--portfolios-ui-border-color, var(--portfolios-theme-border));
}
/* AGENDA */
/* Les icônes (lieu, horaires, ouvrir) suivent la couleur du texte. */
#portfolio_page .agenda-item svg {
fill: currentColor;
}
}
/* assets/css/public/structure/layout/hero-spacing.css */
/* @layer-wrap:site.reglages */
@layer site.reglages {
/* Version: 18-10-2026-hero-spacing */
/*
* Espacement autour des titres — fiches œuvres (`.hero-single`), pages
* principales des catégories (`.hero-listing`) et pages secondaires dont
* /about (`.hero-secondary`). Thème par défaut uniquement : chargée avec main.css,
* jamais sous thème personnalisé.
*
* Règle unique : sous un titre, ½ line-height de ce titre
* (--portfolios-heading-primary-line-height pour les h1,
* --portfolios-heading-secondary-line-height pour les sous-titres et
* intertitres). L'interligne ajoute déjà un demi-écart au-dessus et en dessous
* du texte, d'où des marges courtes ; elles suivent la taille et l'interligne
* choisis dans le setup. Seule exception : ¼ entre un titre et son sous-titre,
* qui forment un bloc.
* Valeurs indiquées pour le réglage par défaut (texte 14px) :
* h1 21px / interligne 23px, h2 14px / interligne 24px.
*
* Les templates posent des utilitaires `pf-mb-md` / `pf-mt-md` / `pf-pb-md` sur
* ces titres pour les thèmes personnalisés : cette feuille est dans la couche
* « reglages » (après « utilitaires »), sans !important.
*/
/*
* Hero fiche : pas d'écart fixe entre les blocs (gap de hero-title.css), les
* titres portent leur marge. Les actions retrouvent l'espace que leur donnait
* le gap (hero-title.css remet à zéro les marges des enfants).
*/
#portfolio_page #hero.hero-single #title-star #title-about {
gap: 0;
}
#portfolio_page #hero.hero-single #title-star #title-about > h1 {
margin-bottom: calc(var(--portfolios-heading-primary-line-height, 1lh) * 0.5); /* ≈ 12px */
}
#portfolio_page #hero.hero-single #title-star #title-about > h1:has(+ h2) {
margin-bottom: calc(var(--portfolios-heading-primary-line-height, 1lh) * 0.25); /* ≈ 6px */
}
#portfolio_page #hero.hero-single #title-star #title-about > h2 {
margin-bottom: calc(var(--portfolios-heading-secondary-line-height, 1lh) * 0.5); /* 12px */
padding-bottom: 0;
}
#portfolio_page #hero.hero-single #title-star #title-about > .title-about-actions {
margin-top: var(--layout-space-y-sm);
}
/* Hero des pages de catégorie et secondaires : titre → texte d'introduction. */
#portfolio_page main section#hero:is(.hero-listing, .hero-secondary) > div > h1 + .content-article {
margin-top: calc(var(--portfolios-heading-primary-line-height, 1lh) * 0.5); /* ≈ 12px */
}
/* Hero /about : titre + sous-titre (bloc), puis réseaux. */
#portfolio_page main#about #about-hero h1 + h2 {
margin-top: calc(var(--portfolios-heading-primary-line-height, 1lh) * 0.25); /* ≈ 6px */
margin-bottom: calc(var(--portfolios-heading-secondary-line-height, 1lh) * 0.5); /* 12px */
}
/* Intertitres de section, y compris « A propos » / « Autres … » (padding-bottom neutralisé). */
#portfolio_page main:has(> #hero:is(.hero-single, .hero-listing, .hero-secondary)) > section h2.section-title {
margin-bottom: calc(var(--portfolios-heading-secondary-line-height, 1lh) * 0.5); /* 12px */
padding-bottom: 0;
}
}
/* assets/css/public/design/themes/basic/buttons.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 14-10-2026-hover-color */
/* Fusion des styles boutons : structure/button.css + design/themes/basic/buttons.css */
/* Boutons dynamiques du portfolio */
.folio_button, .folio-button {
/* Couleur du texte : une seule déclaration (protégée), l'état la change par --_pf-button-color.
Les couleurs de survol / clic ne pouvaient pas l'emporter sur un !important. */
color: var(--_pf-button-color, var(--portfolios-button-text-color, #fff));
background-color: var(--portfolios-button-background-color, #222);
background-image: var(--portfolios-button-gradient, none);
border: var(--portfolios-button-border-width, 0px) var(--portfolios-button-border-type, solid) var(--portfolios-button-border-color, #222);
border-radius: var(--portfolios-button-radius, 0px);
padding: var(--portfolios-button-padding-y, 10px) var(--portfolios-button-padding-x, 24px);
transition: box-shadow 0.2s, border 0.2s, background 0.2s, color 0.2s, filter 0.18s, transform 0.18s;
box-shadow: var(--portfolios-button-box-shadow, none);
font-family: var(--portfolios-button-font-family, inherit);
font-size: var(--portfolios-button-font-size, 1rem);
font-weight: var(--portfolios-button-font-weight, 500);
letter-spacing: var(--portfolios-button-letter-spacing, normal);
text-transform: none;
cursor: var(--portfolios-button-cursor, pointer);
opacity: var(--portfolios-button-opacity, 1);
display: inline-block;
align-items: center;
gap: var(--portfolios-button-gap, 0.5em);
outline: var(--portfolios-button-outline-width, 0px) var(--portfolios-button-outline-style, solid) var(--portfolios-button-outline-color, transparent);
filter: brightness(100%);
justify-content: center;
max-width: max-content;
}
.folio_button svg, .folio-button svg {
width: 15px;
}
.folio_button.gradient, .folio-button.gradient {
background-color: var(--portfolios-button-background-color, #222);
background-image: var(--portfolios-button-gradient, none);
}
.folio_button.shadow, .folio-button.shadow {
border: none;
box-shadow: 0px 2px 10px 0px var(--portfolios-button-border-color, #222);
}
.folio_button.glow, .folio-button.glow {
box-shadow: var(--portfolios-button-glow, 0 0 8px 2px var(--portfolios-button-border-color, #ff0));
}
.folio_button:hover, .folio-button:hover,
.folio_button:focus-visible, .folio-button:focus-visible {
--_pf-button-color: var(--portfolios-button-hover-text-color, var(--portfolios-button-text-color, #fff));
background: var(--portfolios-button-hover-background);
box-shadow: var(--portfolios-button-hover-box-shadow, var(--portfolios-button-box-shadow));
transform: var(--portfolios-button-hover-transform, none);
filter: var(--portfolios-button-hover-filter, brightness(100%));
}
.folio_button:active, .folio-button:active {
--_pf-button-color: var(--portfolios-button-click-text-color, var(--portfolios-button-hover-text-color, var(--portfolios-button-text-color, #fff)));
background: var(--portfolios-button-click-background, var(--portfolios-button-hover-background));
box-shadow: var(--portfolios-button-click-effect, none);
transform: var(--portfolios-button-click-transform, scale(0.95));
filter: var(--portfolios-button-hover-filter, brightness(100%));
}
.folio_button:disabled, .folio-button:disabled {
opacity: var(--portfolios-button-disabled-opacity, 0.5);
cursor: not-allowed;
}
/* Effets avancés réutilisables */
.button-gradient {
background: linear-gradient(90deg, #ff6600, #ffcc00);
}
.button-hover-translate:hover {
transform: translateY(-4px);
transition: transform 0.2s;
}
.button-hover-scale:hover {
transform: scale(1.08);
transition: transform 0.2s;
}
.button-hover-rotate:hover {
transform: rotate(-3deg);
transition: transform 0.2s;
}
.button-hover-invert:hover {
filter: invert(1);
transition: filter 0.2s;
}
.button-click-down:active {
transform: scale(0.95);
transition: transform 0.1s;
}
/* Accueil (#hero) : le bloc texte peut imposer couleur / fond ; on réapplique le thème bouton. */
#portfolio_page #hero #title-home a.folio_button,
#portfolio_page #hero #title-home a.folio-button {
background-color: var(--portfolios-button-background-color, #222);
background-image: var(--portfolios-button-gradient, none);
color: var(--portfolios-button-text-color, #fff);
border-color: var(--portfolios-button-border-color, #222);
}
#portfolio_page #hero #title-home a.folio_button:hover,
#portfolio_page #hero #title-home a.folio-button:hover {
color: var(--portfolios-button-hover-text-color, var(--portfolios-button-text-color, #fff));
background: var(--portfolios-button-hover-background, var(--portfolios-button-background-color, #333));
}
/* Thème des boutons (button_theme : Plein, Contour, Fond au survol, Souligné, Texte seul).
Les --portfolios-button-th-* sont calculées dans la portée des variables (render_css_vars.php)
à partir des réglages précis : on les redistribue ici sur les variables lues par les règles
ci-dessus. Repli sur les alias --folio-button-* (valeurs héritées, sans cycle). */
.folio_button, .folio-button {
--portfolios-button-background-color: var(--portfolios-button-th-bg, var(--folio-button-background-color, #222));
--portfolios-button-gradient: var(--portfolios-button-th-image, var(--folio-button-gradient, none));
--portfolios-button-text-color: var(--portfolios-button-th-color, var(--folio-button-text-color, #fff));
--portfolios-button-border-width: var(--portfolios-button-th-border-width, var(--folio-button-border-width, 0px));
--portfolios-button-border-type: var(--portfolios-button-th-border-style, var(--folio-button-border-type, solid));
--portfolios-button-padding-x: var(--portfolios-button-th-padding-x, var(--folio-button-padding-x, 24px));
--portfolios-button-hover-background: var(--portfolios-button-th-hover-bg, var(--folio-button-hover-background));
--portfolios-button-hover-text-color: var(--portfolios-button-th-hover-color, var(--folio-button-hover-text-color));
--portfolios-button-click-background: var(--portfolios-button-th-click-bg, var(--folio-button-click-background));
--portfolios-button-click-text-color: var(--portfolios-button-th-click-color, var(--folio-button-click-text-color));
text-decoration-line: var(--portfolios-button-th-deco, none);
text-decoration-thickness: var(--portfolios-button-th-underline-width, 2px);
text-underline-offset: 0.3em;
}
/* --- Lien Contact du header en bouton (réglage « Lien Contact », lot E3) ---------------------------------
header.php pose .folio_button sur le lien Contact du menu. Les règles des liens du menu (links.css,
links-menus.css : marge, arrondi, fond, contour, ombre, trait souligné, souvent en !important) ne doivent pas
l'habiller : on remet celui des boutons. Contour, ombre et reflet propres à un thème : --pf-button-th-border /
--pf-button-th-shadow / --pf-button-th-image (Brutal, Verre), sinon ceux des réglages des boutons. */
#portfolio_page #header #header-nav .nav__list a.nav__contact.folio_button {
color: var(--_pf-button-color, var(--portfolios-button-text-color, #fff));
padding: var(--portfolios-button-padding-y, 10px) var(--portfolios-button-padding-x, 24px);
border: var(--pf-button-th-border, var(--portfolios-button-border-width, 0px) var(--portfolios-button-border-type, solid) var(--portfolios-button-border-color, #222));
border-radius: var(--portfolios-button-radius, 0px);
background-color: var(--portfolios-button-background-color, #222);
background-image: var(--pf-button-th-image, var(--portfolios-button-gradient, none));
box-shadow: var(--pf-button-th-shadow, var(--portfolios-button-box-shadow, none));
font-size: var(--portfolios-button-font-size, 1rem);
font-weight: var(--portfolios-button-font-weight, 500);
text-decoration: none;
}
#portfolio_page #header #header-nav .nav__list a.nav__contact.folio_button:is(:hover, :focus-visible) {
background-color: var(--portfolios-button-hover-background, var(--portfolios-button-background-color, #222));
box-shadow: var(--pf-button-th-shadow, var(--portfolios-button-hover-box-shadow, var(--portfolios-button-box-shadow, none)));
}
#portfolio_page #header #header-nav .nav__list a.nav__contact.folio_button::after {
content: none;
}
}
/* assets/css/public/design/themes/basic/socials.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 12-10-2026-underline-width */
/* SOCIAL-MEDIAS */
.social-medias {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 0;
}
/* Espacement par gap (comme #footer-social) : des marges sur les li décalaient
le bord aligné (ex. 10px à droite du dernier bouton en alignement droite). */
.social-medias li {
margin: 0;
}
.align-left .social-medias {
justify-content: flex-start;
}
.align-center .social-medias {
justify-content: center;
}
.align-right .social-medias {
justify-content: flex-end;
}
/* À propos : même logique flex que le footer (footer/main.css + nav-left/center/right) */
.about-align-left .social-medias {
justify-content: flex-start;
text-align: left;
}
.about-align-center .social-medias {
justify-content: center;
text-align: center;
}
.about-align-right .social-medias {
justify-content: flex-end;
text-align: right;
}
/* Accueil (#title-home, #home-about) : classes title-align-* au lieu de align-* */
.title-align-left .social-medias {
justify-content: flex-start;
text-align: left;
}
.title-align-center .social-medias {
justify-content: center;
text-align: center;
}
.title-align-right .social-medias {
justify-content: flex-end;
text-align: right;
}
/* Réseaux du pied de page : alignement, écart et marges dans themes/basic/footer.css (zone). */
.social-medias a,
.social-medias button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: 0.2s linear;
padding: var(--portfolios-social-padding, 8px);
background-color: var(--portfolios-social-background-color, var(--portfolios-theme-bg-main, #272727));
background-image: var(--portfolios-social-background-gradient, none);
border: var(--portfolios-social-border-width, 0px) var(--portfolios-social-border-style, solid) var(--portfolios-social-border-color, var(--portfolios-theme-bg-alt, #222));
border-radius: var(--portfolios-social-border-radius, 0px);
box-shadow: var(--portfolios-social-box-shadow, none);
transition: box-shadow 0.2s, border 0.2s, filter 0.18s, transform 0.18s;
filter: brightness(100%);
gap: 0.5em;
cursor: pointer;
}
.social-medias button {
margin: 0;
font: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
}
.social-medias svg {
width: var(--portfolios-social-icon-size, 25px);
height: var(--portfolios-social-icon-size, 25px);
}
.social-medias p {
display: none;
}
/* Nom de la plateforme à gauche de l'icône (arktefakt_render_socials, option show_label) :
nom et logo centrés verticalement sur la même ligne. */
.social-medias--labeled a,
.social-medias--labeled button {
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.5em;
padding-inline: var(--portfolios-social-label-padding-x, 12px);
}
.social-medias--labeled svg {
display: block;
flex-shrink: 0;
margin: 0;
}
.social-medias__label {
display: block;
margin: 0;
font-size: var(--portfolios-social-label-size, 0.9em);
line-height: 1;
white-space: nowrap;
color: inherit;
}
/* Même couleur que le logo (fill ci-dessous) : les couleurs de texte/lien du thème
(footer, nav…) ne doivent pas s'appliquer au nom de la plateforme. */
#portfolio_page .social-medias__label,
#portfolio_page .social-medias a:hover .social-medias__label,
#portfolio_page .social-medias button:hover .social-medias__label {
color: var(--portfolios-social-icon-color, #0f0f0f);
}
/* Nom masqué par le thème (social_show_label = off) : rendu dans le HTML sans la classe
social-medias--labeled, pour que l'éditeur puisse le rebasculer en direct. */
.social-medias:not(.social-medias--labeled) .social-medias__label {
display: none;
}
/* Icône générique d'une plateforme sans logo : visible seulement quand le nom est masqué. */
.social-medias__fallback-icon {
display: contents;
}
.social-medias--labeled .social-medias__fallback-icon {
display: none;
}
/* Plateforme sans logo (nom seul) : même hauteur que les boutons avec icône. */
.social-medias__label:only-child,
.social-medias__label:has(+ .social-medias__fallback-icon:last-child) {
line-height: var(--portfolios-social-icon-size, 25px);
}
/* Encre des liens hors #portfolio_page (fenêtre de profil rattachée à body) ; dans la page, l'encre du texte. */
#profil-modal-root .social-medias :is(a, button) {
color: var(--portfolios-social-icon-color, var(--portfolios-theme-fill, #0f0f0f));
}
#portfolio_page .social-medias svg,
#profil-modal-root .social-medias svg {
fill: var(--portfolios-social-icon-color, #0f0f0f);
}
#portfolio_page .social-medias svg path[stroke-width],
#profil-modal-root .social-medias svg path[stroke-width] {
fill: none;
stroke: var(--portfolios-social-icon-color, #0f0f0f);
}
#portfolio_page .social-medias a:hover,
#portfolio_page .social-medias button:hover,
#profil-modal-root .social-medias a:hover,
#profil-modal-root .social-medias button:hover {
border-color: var(--portfolios-social-border-color, var(--portfolios-theme-bg-alt, #222));
color: var(--portfolios-social-icon-color, var(--portfolios-theme-fill, #0f0f0f));
box-shadow: var(--portfolios-social-box-shadow, none);
transform: var(--portfolios-social-hover-transform, none);
filter: var(--portfolios-social-hover-filter, brightness(100%));
}
#portfolio_page .social-medias a:hover svg,
#portfolio_page .social-medias button:hover svg,
#profil-modal-root .social-medias a:hover svg,
#profil-modal-root .social-medias button:hover svg {
fill: var(--portfolios-social-icon-color, #0f0f0f);
}
#portfolio_page .social-medias a:hover svg path[stroke-width],
#portfolio_page .social-medias button:hover svg path[stroke-width],
#profil-modal-root .social-medias a:hover svg path[stroke-width],
#profil-modal-root .social-medias button:hover svg path[stroke-width] {
fill: none;
stroke: var(--portfolios-social-icon-color, #0f0f0f);
}
#portfolio_page .social-medias a.gradient,
#portfolio_page .social-medias button.gradient,
#profil-modal-root .social-medias a.gradient,
#profil-modal-root .social-medias button.gradient {
background-color: var(--portfolios-social-background-color, var(--portfolios-theme-bg-main, #272727));
background-image: var(--portfolios-social-background-gradient, none);
}
#portfolio_page .social-medias a.shadow,
#portfolio_page .social-medias button.shadow,
#profil-modal-root .social-medias a.shadow,
#profil-modal-root .social-medias button.shadow {
box-shadow: var(--portfolios-social-box-shadow, 0px 2px 10px 0px var(--portfolios-social-border-color, #222));
}
#portfolio_page .social-medias a.glow,
#portfolio_page .social-medias button.glow,
#profil-modal-root .social-medias a.glow,
#profil-modal-root .social-medias button.glow {
box-shadow: var(--portfolios-social-box-shadow, 0 0 8px 2px var(--portfolios-social-border-color, #222));
}
#portfolio_page .social-medias a:active,
#portfolio_page .social-medias button:active,
#profil-modal-root .social-medias a:active,
#profil-modal-root .social-medias button:active {
transform: var(--portfolios-social-click-transform, none);
filter: var(--portfolios-social-hover-filter, brightness(100%));
}
#portfolio_page .social-medias a:disabled,
#portfolio_page .social-medias button:disabled,
#profil-modal-root .social-medias a:disabled,
#profil-modal-root .social-medias button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* #hero (accueil, à propos, fiches…) : aligner sur le même rendu que #footer-social */
#portfolio_page #hero .social-medias {
margin-top: 1.25rem;
flex-wrap: wrap;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
#portfolio_page #hero #home-about .social-medias,
#portfolio_page section.home-feature-vedette #feature-about .social-medias {
align-self: stretch;
}
#portfolio_page #hero .social-medias svg {
fill: var(--portfolios-social-icon-color, #0f0f0f);
}
#portfolio_page #hero .social-medias svg path[stroke-width] {
fill: none;
stroke: var(--portfolios-social-icon-color, #0f0f0f);
}
#portfolio_page #hero .social-medias a:hover,
#portfolio_page #hero .social-medias button:hover {
border-color: var(--portfolios-social-border-color, var(--portfolios-theme-bg-alt, #222));
color: var(--portfolios-social-icon-color, var(--portfolios-theme-fill, #0f0f0f));
box-shadow: var(--portfolios-social-box-shadow, none);
transform: var(--portfolios-social-hover-transform, none);
filter: var(--portfolios-social-hover-filter, brightness(100%));
}
#portfolio_page #hero .social-medias a:active,
#portfolio_page #hero .social-medias button:active {
transform: var(--portfolios-social-click-transform, none);
filter: var(--portfolios-social-hover-filter, brightness(100%));
}
#portfolio_page #hero .social-medias a:hover svg,
#portfolio_page #hero .social-medias button:hover svg {
fill: var(--portfolios-social-icon-color, #0f0f0f);
}
#portfolio_page #hero .social-medias a:hover svg path[stroke-width],
#portfolio_page #hero .social-medias button:hover svg path[stroke-width] {
fill: none;
stroke: var(--portfolios-social-icon-color, #0f0f0f);
}
/* Team modal (.profil-infos) : même rendu que footer / vedettes */
#profil-modal-root .profil-infos .social-medias,
.profil-window .profil-infos .social-medias {
margin-top: 1.25rem;
flex-wrap: wrap;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
justify-content: center;
gap: 10px;
}
#profil-modal-root .profil-infos .social-medias li,
.profil-window .profil-infos .social-medias li {
margin: 0;
}
#profil-modal-root .profil-infos .social-medias svg,
.profil-window .profil-infos .social-medias svg {
fill: var(--portfolios-social-icon-color, #0f0f0f);
}
#profil-modal-root .profil-infos .social-medias svg path[stroke-width],
.profil-window .profil-infos .social-medias svg path[stroke-width] {
fill: none;
stroke: var(--portfolios-social-icon-color, #0f0f0f);
}
#profil-modal-root .profil-infos .social-medias a:hover,
#profil-modal-root .profil-infos .social-medias button:hover,
.profil-window .profil-infos .social-medias a:hover,
.profil-window .profil-infos .social-medias button:hover {
border-color: var(--portfolios-social-border-color, var(--portfolios-theme-bg-alt, #222));
color: var(--portfolios-social-icon-color, var(--portfolios-theme-fill, #0f0f0f));
box-shadow: var(--portfolios-social-box-shadow, none);
transform: var(--portfolios-social-hover-transform, none);
filter: var(--portfolios-social-hover-filter, brightness(100%));
}
#profil-modal-root .profil-infos .social-medias a:active,
#profil-modal-root .profil-infos .social-medias button:active,
.profil-window .profil-infos .social-medias a:active,
.profil-window .profil-infos .social-medias button:active {
transform: var(--portfolios-social-click-transform, none);
filter: var(--portfolios-social-hover-filter, brightness(100%));
}
#profil-modal-root .profil-infos .social-medias a:hover svg,
#profil-modal-root .profil-infos .social-medias button:hover svg,
.profil-window .profil-infos .social-medias a:hover svg,
.profil-window .profil-infos .social-medias button:hover svg {
fill: var(--portfolios-social-icon-color, #0f0f0f);
}
#profil-modal-root .profil-infos .social-medias a:hover svg path[stroke-width],
#profil-modal-root .profil-infos .social-medias button:hover svg path[stroke-width],
.profil-window .profil-infos .social-medias a:hover svg path[stroke-width],
.profil-window .profil-infos .social-medias button:hover svg path[stroke-width] {
fill: none;
stroke: var(--portfolios-social-icon-color, #0f0f0f);
}
/* Thème des réseaux sociaux (social_theme, mêmes thèmes que les boutons et les liens du header).
Les --portfolios-social-th-* (render_css_vars.php) partent des réglages précis ; on les
redistribue sur les variables lues ci-dessus, au repos puis au survol / clic. */
.social-medias a,
.social-medias button {
--portfolios-social-background-color: var(--portfolios-social-th-bg, var(--portfolios-theme-bg-main, #272727));
--portfolios-social-background-gradient: var(--portfolios-social-th-image, none);
--portfolios-social-icon-color: var(--portfolios-social-th-color, var(--portfolios-theme-fill, #0f0f0f));
--portfolios-social-border-width: var(--portfolios-social-th-border-width, 0px);
--portfolios-social-border-style: var(--portfolios-social-th-border-style, solid);
text-decoration-line: var(--portfolios-social-th-deco, none);
text-decoration-thickness: var(--portfolios-social-th-underline-width, 2px);
text-underline-offset: 0.3em;
}
/* Souligné / Texte seul : pas de marge latérale (le nom affiché garde la sienne). */
.social-medias:not(.social-medias--labeled) a,
.social-medias:not(.social-medias--labeled) button {
padding-inline: var(--portfolios-social-th-padding-x, var(--portfolios-social-padding, 8px));
}
.social-medias a:hover,
.social-medias button:hover,
.social-medias a:focus-visible,
.social-medias button:focus-visible {
--portfolios-social-background-color: var(--portfolios-social-th-hover-bg, var(--portfolios-theme-bg-main, #272727));
--portfolios-social-background-gradient: none;
--portfolios-social-icon-color: var(--portfolios-social-th-hover-color, var(--portfolios-theme-fill, #0f0f0f));
}
.social-medias a:active,
.social-medias button:active {
--portfolios-social-background-color: var(--portfolios-social-th-click-bg, var(--portfolios-theme-bg-main, #272727));
--portfolios-social-icon-color: var(--portfolios-social-th-click-color, var(--portfolios-theme-fill, #0f0f0f));
}
}
/* assets/css/public/structure/promo/arkt-promo.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
/* Boutons promotion / cross-sell Arktefakt (hors variables thème portfolio) */
a.arkt-promo-btn,
button.arkt-promo-btn,
span.arkt-promo-btn,
li.arkt-promo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: max-content;
padding: 10px 18px;
margin: 4px 0;
box-sizing: border-box;
font: inherit;
font-weight: 600;
font-size: clamp(0.75rem, 2.5vw, 0.85rem);
letter-spacing: 0.05em;
text-transform: none;
text-decoration: none;
cursor: pointer;
border-radius: 999px;
border: 1px solid rgba(128, 128, 128, 0.35);
background: rgba(128, 128, 128, 0.12);
color: inherit;
transition: background 0.2s ease, transform 0.2s ease;
list-style: none;
}
li.arkt-promo-btn {
text-align: center;
}
a.arkt-promo-btn:hover,
button.arkt-promo-btn:hover,
span.arkt-promo-btn:hover,
li.arkt-promo-btn:hover {
transform: translateY(-1px);
background: rgba(128, 128, 128, 0.22);
}
}
/* assets/css/public/design/themes/basic/align.css */
/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 16-10-2026 — alignement partagé header + pied de page (plan-header-footer.md, lot E1) */
/*
* Réglages « Alignement » du header (header_align_custom) et du pied de page (footer_align_custom) : classes
* .nav-left / .nav-center / .nav-right sur #header, #footer et #legal. Traduits une seule fois en deux variables,
* lues par toutes les règles qui alignent :
* --pf-align-justify : flex-start · center · flex-end (justify-content, align-items, align-self) ;
* --pf-align-text : left · center · right (text-align, transform-origin).
* Chargé sans condition (public/includes/css.php, shared/core/theme/preview_head.php), avant les feuilles du
* header et du pied de page.
*/
#portfolio_page :is(#header, #footer, #legal) {
--pf-align-justify: flex-start;
--pf-align-text: left;
}
#portfolio_page :is(#header, #footer, #legal).nav-center {
--pf-align-justify: center;
--pf-align-text: center;
}
#portfolio_page :is(#header, #footer, #legal).nav-right {
--pf-align-justify: flex-end;
--pf-align-text: right;
}
}
/* assets/css/public/design/themes/basic/header.css */
/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 11-10-2026-hub-sticky-header */
#portfolio_page header,
#portfolio_page #header {
/* Menu mobile : tailles et respiration (mobile.css ≤1100px) */
--portfolios-hamburger-icon-size: 2.125rem;
--portfolios-hamburger-min-touch: 3.25rem;
--portfolios-hamburger-touch-padding: 0.4rem;
--portfolios-header-wrapper-gap: 0.75rem;
/* Espacement entre liens (desktop / mobile / sous-menus) */
--portfolios-header-nav-gap-x: 1.25rem;
--portfolios-header-nav-gap-y: 0.4rem;
--portfolios-header-nav-gap-mobile: 0.35rem;/* En-tête en îlot (matrices : Bento, Verre, forme « Flottante ») : écart fixe autour (--pf-header-pad-outer),
le réglage s'applique dans l'îlot. */
}
/*
* Item avec sous-menu :
* a.nav__item-main = [libellé + chevron], un seul contrôle (comme desktop).
*/
#portfolio_page #header-nav .item-has-children {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#portfolio_page #header-nav a.nav__item-main {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 0.35em;
max-width: 100%;
margin: 0;
min-width: 0;
}
#portfolio_page #header-nav .submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin: 0;
padding: 0;
border: none;
background: transparent;
color: inherit;
line-height: 1;
width: 1.1em;
height: 1.1em;
font-size: calc(var(--portfolios-font-size-base) * 0.85);
pointer-events: none;
transition: color 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 #header-nav .submenu-toggle-icon {
color: inherit;
}
#portfolio_page #header-nav .submenu-toggle .submenu-toggle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
#portfolio_page #header-nav .submenu-toggle .submenu-toggle-icon svg {
display: block;
width: 1em;
height: 1em;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Mobile / accordéon : rotation sur .submenu-open */
#portfolio_page #header-nav .item-has-children.submenu-open .submenu-toggle .submenu-toggle-icon svg {
transform: rotate(180deg);
}
#portfolio_page #hub-logo {
display: flex;
align-items: center;
min-height: var(--portfolios-hamburger-min-touch, 3.25rem);
}
#portfolio_page #hub-logo > a {
display: flex;
align-items: center;
gap: inherit;
}
#portfolio_page #hub-logo .hub-logo__mark--image {
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s linear;
}
#portfolio_page #hub-logo .hub-logo__mark--image:hover {
opacity: 0.5;
}
#portfolio_page #hub-logo .hub-logo__mark--image #site-title,
#portfolio_page #hub-logo .hub-logo__mark--text {
color: var(--portfolios-nav-text-color);
transition: color var(--portfolios-nav-links-transition);
}
/* Largeur pilotée par --portfolios-logo-width (setup / customizer) */
#portfolio_page #hub-logo .hub-logo__mark--image img {
width: var(--portfolios-logo-width, 120px);
height: auto;
max-width: 100%;
object-fit: contain;
}
@media screen and (max-width: 450px) {
/* Masquer le titre texte uniquement quand un logo image est affiché (sinon le titre du portfolio reste visible sur mobile) */
#portfolio_page #hub-logo:has(.hub-logo__mark--image:not([hidden])) .hub-logo__mark--text {
display: none;
}
}
/* Sous-menus : fermés par défaut (mobile = ouverture au clic / .submenu-open) */
#portfolio_page .item-has-children .sub-menu {
display: none;
opacity: 0;
max-height: 0;
overflow: hidden;
visibility: hidden;
transition: opacity 0.25s ease, max-height 0.3s ease, visibility 0.25s ease;
}
#portfolio_page .item-has-children.submenu-open > .sub-menu {
opacity: 1;
max-height: 500px;
visibility: visible;
transition: opacity 0.25s ease, max-height 0.3s ease, visibility 0.25s ease;
}
@media (min-width: 1101px) {
/*
* Desktop : barre pleine largeur sous le header, visible au survol / :focus-within /
* .submenu-hover-intent. Position fixed + top calculé en JS (header réel − pont).
*
* Pont de survol : padding-top + ::before au-dessus pour garder le pointeur dans le .
*/
#portfolio_page #header-nav .item-has-children > .sub-menu {
position: fixed;
left: 0;
right: 0;
top: calc(var(--header-height, 70px) - var(--portfolios-submenu-hover-bridge, 24px));
box-sizing: border-box;
/* Suit nav_text_size : évite un padding figé sur la taille générale du texte quand le menu est réduit */
font-size: var(--portfolios-nav-font-size, 1rem);
padding-top: var(--portfolios-submenu-hover-bridge, 24px);
opacity: 0;
visibility: hidden;
max-height: 0;
overflow: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease, max-height 0.25s ease;
}
/* Sous-menu : padding latéral relatif à la taille du texte du menu (évite un gros vide quand nav_text_size est petit) */
#portfolio_page #header-nav .item-has-children > .sub-menu .sub-menu-content {
width: 100%;
box-sizing: border-box;
padding-inline: 1.25em;
}
#portfolio_page #header-nav .item-has-children > .sub-menu ul {
display: flex;
padding: 1.25em 0;
max-width: var(--layout-width-wide);
width: 100%;
margin-inline: auto;
box-sizing: border-box;
}
#portfolio_page #header-nav .item-has-children:hover > .sub-menu,
#portfolio_page #header-nav .item-has-children:focus-within > .sub-menu,
#portfolio_page #header-nav .item-has-children.submenu-hover-intent > .sub-menu {
opacity: 1;
visibility: visible;
max-height: 500px;
overflow: visible;
pointer-events: auto;
}
/* Bandeau invisible au-dessus du sous-menu (au-delà du padding-top) */
#portfolio_page #header-nav .item-has-children:hover > .sub-menu::before,
#portfolio_page #header-nav .item-has-children:focus-within > .sub-menu::before,
#portfolio_page #header-nav .item-has-children.submenu-hover-intent > .sub-menu::before {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 0.75rem;
pointer-events: auto;
z-index: 2;
}
}
/*
* Desktop : icône visible (état ouvert/fermé), non cliquable —
* l’ouverture reste au survol / focus-within.
*/
@media (min-width: 1101px) {
#portfolio_page #header-nav .item-has-children {
display: inline-flex;
flex-direction: column;
align-items: stretch;
}
#portfolio_page #header-nav .item-has-children:hover .submenu-toggle .submenu-toggle-icon svg,
#portfolio_page #header-nav .item-has-children:focus-within .submenu-toggle .submenu-toggle-icon svg,
#portfolio_page #header-nav .item-has-children.submenu-hover-intent .submenu-toggle .submenu-toggle-icon svg {
transform: rotate(180deg);
}
}
/*
* Header fixe line/tower :
* - sans #hero : décaler le main sous le header
* - avec #hero : le header passe par-dessus ; le hero absorbe
* padding-top = --header-height + --hero-padding-block
* La hauteur du header passe aussi par --pf-hero-offset, que lit design/home/section-layout.css (hero de
* l'accueil) : sa marge suit l'« Espacement vertical de l'en-tête » quelle que soit la couche qui l'emporte.
* Hors #theme-visualiser (customizer : header en flux, pas d’overlay).
*/
#portfolio_page header.line ~ main:not(:has(> #hero)),
#portfolio_page header.tower ~ main:not(:has(> #hero)) {
margin-top: var(--header-height, 70px);
}
#portfolio_page header.line ~ main:has(> #hero),
#portfolio_page header.tower ~ main:has(> #hero) {
margin-top: 0;
}
#portfolio_page header.line ~ main > #hero:not(.hero-layout--image-behind),
#portfolio_page header.tower ~ main > #hero:not(.hero-layout--image-behind) {
--pf-hero-offset: var(--header-height, 70px);
}
#portfolio_page header.line ~ main > #hero.hero-layout--image-behind #title-home #home-about,
#portfolio_page header.tower ~ main > #hero.hero-layout--image-behind #title-home #home-about {
--pf-hero-offset: var(--header-height, 70px);
}
}
/* 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,
#portfolio_page #header {
padding-top: var(--pf-header-pad-outer, var(--portfolios-header-padding-y));
padding-bottom: var(--pf-header-pad-outer, var(--portfolios-header-padding-y));
}
#portfolio_page #header-nav li:not(.item-has-children) .submenu-toggle {
display: none;
}
#portfolio_page .item-has-children.submenu-open > .sub-menu {
display: block;
}
@media (min-width: 1101px) {
#portfolio_page #header-nav .item-has-children > .sub-menu {
display: none;
}
}
@media (min-width: 1101px) {
#portfolio_page #header-nav .item-has-children:hover > .sub-menu,
#portfolio_page #header-nav .item-has-children:focus-within > .sub-menu,
#portfolio_page #header-nav .item-has-children.submenu-hover-intent > .sub-menu {
display: block;
}
}
#portfolio_page header.line ~ main:has(> #hero),
#portfolio_page header.tower ~ main:has(> #hero) {
padding-top: 0;
}
#portfolio_page header.line ~ main > #hero:not(.hero-layout--image-behind),
#portfolio_page header.tower ~ main > #hero:not(.hero-layout--image-behind) {
padding-top: calc(var(--header-height, 70px) + var(--hero-padding-block, 45px));
}
#portfolio_page header.line ~ main > #hero.hero-layout--image-behind #title-home #home-about,
#portfolio_page header.tower ~ main > #hero.hero-layout--image-behind #title-home #home-about {
padding-top: calc(var(--header-height, 70px) + var(--hero-padding-block, 45px));
}
}
/* assets/css/public/design/themes/basic/header-line.css */
/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 23-09-2026-20-19 */
#portfolio_page header {
top: 0;
left: 0;
right: 0;
box-sizing: border-box;
width: 100%;
max-width: 100%;
overflow: visible;
}
/* line : logo + nav en rangée dans .header-inner (même plafond .pf-w-wide que #footer-main) */
#portfolio_page header.line {
display: block;
}
#portfolio_page header.line .header-inner {
display: flex;
align-items: center;
}
#portfolio_page header .header-bar {
display: flex;
align-items: center;
flex-shrink: 0;
min-width: 0;
transition: 0.2s linear;
}
@media (min-width: 1101px) {
#portfolio_page header.line .header-bar {
width: auto;
max-width: none;
margin: 0;
}
#portfolio_page header.line.nav-left .header-inner {
justify-content: flex-start;
}
#portfolio_page header.line.nav-center .header-inner {
justify-content: center;
}
#portfolio_page header.line.nav-right .header-inner {
justify-content: space-between;
}
#portfolio_page header:is(.nav-left, .nav-center, .nav-right) .item-has-children > .sub-menu ul {
justify-content: var(--pf-align-justify);
}
#portfolio_page header:is(.nav-left, .nav-center, .nav-right) #header-nav .nav__content .nav__list {
justify-content: var(--pf-align-justify);
}
}
#portfolio_page header .header-bar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: 0.5s linear;
}
#portfolio_page header .nav-but-wrap {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding-left: 15px;
transition: all 0.3s ease-out;
}
@media (min-width: 1101px) {
/* Écart entre le logo et le menu : réglage « Espace entre le logo et le menu » (header-options.css). */
#portfolio_page header.nav-left #header-nav.nav,
#portfolio_page header.nav-right #header-nav.nav {
flex: 1 1 0;
min-width: 0;
max-width: 100%;
}
#portfolio_page header.nav-center #header-nav.nav {
flex: 0 1 auto;
min-width: 0;
max-width: calc(100% - 12rem);
}
#portfolio_page header #header-nav.nav {
overflow: visible;
}
#portfolio_page header #header-nav .nav__content {
min-width: 0;
width: 100%;
}
#portfolio_page header #header-nav .nav__content .nav__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: var(--portfolios-header-nav-gap-y, 0.4rem) var(--portfolios-header-nav-gap-x, 1.25rem);
padding: 4px 0 2px;
overflow: visible;
}
#portfolio_page header #header-nav .nav__content .nav__list > li {
margin: 0;
}
#portfolio_page header #header-nav .nav__content .nav__list li a {
margin: 0;
}
/* Pastilles compactes dans la barre. Le pied de page n'est pas concerné : ses liens suivent le réglage « Liens ». */
/* Apparence des liens : voir la feuille de liens (lot E2). */
}
#hamburgerBtn {
display: 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 {
position: fixed;
}
@media (min-width: 1101px) {
#portfolio_page header #header-nav {
padding-left: var(--pf-header-logo-gap, 15px);
}
}
@media (min-width: 1101px) {
#portfolio_page header #header-nav .nav__content .nav__list li a {
white-space: normal;
}
}
}
/* assets/css/public/design/themes/basic/header-mobile.css */
/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 13-10-2026-hamburger-unified */
/* Menu hamburger : UNE mise en page pour l'ordinateur et le mobile.
- coque du header (fond, flou, paddings) : écran étroit seulement (@media) ;
- bouton, voile, panneau et liens : dès que header[data-nav-menu] est posé (header.js : écran étroit
ou motif « bouton » ordinateur) — la largeur n'intervient plus. Motif affiché : data-nav-active
(design/matrices/base.css, section 3). :where() garde la spécificité d'origine. */
@media (max-width: 1100px) {
#portfolio_page header,
#portfolio_page #header {
--portfolios-mobile-header-gutter: 20px;
--portfolios-mobile-nav-icon-inset: calc(
(var(--portfolios-hamburger-min-touch, 3.25rem) - var(--portfolios-hamburger-icon-size, 2.125rem)) / 2
);
}
html,
body {
max-width: 100%;
overscroll-behavior-x: none;
}
#portfolio_background,
#portfolio_page {
max-width: 100%;
width: 100%;
position: relative;
}
/*
* Gutters latéraux = .pf-pad-x-md (20px), comme le footer / le contenu.
* Fond et flou : nav-background.css (même modèle qu'à l'ordinateur).
*/
#portfolio_page header,
#portfolio_page #header {
box-sizing: border-box;
width: 100%;
max-width: 100%;
left: 0;
right: 0;
overflow: hidden;
/* Conservent padding-y (main.css) + padding-x (.pf-pad-x-md) */
}
#portfolio_page header .header-inner,
#portfolio_page header .header-inner.pf-w-wide {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
z-index: auto;
background: transparent;
/* Même logique que desktop : le plafond --layout-width-wide est inutile sous 1100px */
}
/* Barre logo + burger : layout seul, pas de second verre */
#portfolio_page header .header-bar {
display: flex;
position: relative;
z-index: 840;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
gap: var(--portfolios-header-wrapper-gap, 0.75rem);
padding: 0;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#portfolio_page header.nav-left #hub-logo,
#portfolio_page header.nav-right #hub-logo {
margin-inline-end: auto;
min-width: 0;
}
/* Logo : largeur setup, plafonnée à la largeur utile mobile */
#portfolio_page #hub-logo .hub-logo__mark--image img {
width: min(var(--portfolios-logo-width, 120px), 58vw);
height: auto;
max-width: 100%;
object-fit: contain;
}
}
/* Verrou de défilement quand le menu est ouvert (écran étroit ou panneau ordinateur). */
html.portfolios-mobile-nav-open,
body.portfolios-mobile-nav-open {
overscroll-behavior: none;
max-width: 100%;
touch-action: pan-y;
}
body.portfolios-mobile-nav-open:not(.customizer-page) {
position: fixed;
inset-inline: 0;
width: 100%;
max-width: 100%;
}
#portfolio_page header.nav-left:where([data-nav-menu]) #hamburgerBtn,
#portfolio_page header.nav-right:where([data-nav-menu]) #hamburgerBtn {
margin-inline-start: auto;
}
#portfolio_page header.nav-center:where([data-nav-menu]) .header-bar {
justify-content: center;
}
#portfolio_page header.nav-center:where([data-nav-menu]) #hamburgerBtn {
position: absolute;
/* .header-bar est déjà dans le gutter shell (.pf-pad-x-md) */
inset-inline-end: 0;
top: 50%;
transform: translateY(-50%);
margin-inline-start: 0;
}
#portfolio_page header.nav-center:where([data-nav-menu]) #hamburgerBtn:active {
transform: translateY(-50%) scale(0.96);
}
#portfolio_page header.nav-center:where([data-nav-menu]) #hamburgerBtn:hover:not(.active) .hamburger__box {
transform: scale(1.05);
}
#portfolio_page header.nav-center:where([data-nav-menu]) #hamburgerBtn.active .hamburger__box {
transform: none;
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
flex-shrink: 0;
min-width: var(--portfolios-hamburger-min-touch, 3.25rem);
min-height: var(--portfolios-hamburger-min-touch, 3.25rem);
margin: 0;
padding: var(--portfolios-hamburger-touch-padding, 0.4rem);
border: none;
background: transparent;
cursor: pointer;
color: var(--portfolios-nav-text-color, currentColor);
position: relative;
z-index: 845;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.2s ease, transform 0.2s ease;
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn:focus-visible {
outline: 2px solid var(--portfolios-nav-text-color, currentColor);
outline-offset: 3px;
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn:active {
transform: scale(0.96);
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn .hamburger__box {
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
width: 100%;
height: 100%;
transition: transform 0.25s cubic-bezier(0.34, 1.45, 0.64, 1);
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn:hover:not(.active) .hamburger__box {
transform: scale(1.05);
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn.active .hamburger__box {
transform: none;
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn .hamburger__svg {
display: block;
width: var(--portfolios-hamburger-icon-size, 2.125rem);
height: auto;
aspect-ratio: 1;
flex-shrink: 0;
overflow: visible;
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn .hamburger__state {
transition: opacity 0.22s ease, visibility 0.22s ease;
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn .hamburger__state--close {
opacity: 0;
visibility: hidden;
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn .hamburger__state--menu {
opacity: 1;
visibility: visible;
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn.active .hamburger__state--menu {
opacity: 0;
visibility: hidden;
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn.active .hamburger__state--close {
opacity: 1;
visibility: visible;
}
/*
* Voile décoratif uniquement — ne capture pas les clics.
* Fermeture du menu = croix (hamburger) uniquement.
*/
#portfolio_page header.mobile-nav-open:where([data-nav-menu])::after {
content: "";
position: fixed;
inset-inline: 0;
top: var(--header-height, 5rem);
bottom: 0;
width: auto;
max-width: 100%;
background: color-mix(in srgb, var(--portfolios-body-text-color, #111) 18%, transparent);
z-index: 830;
pointer-events: none;
animation: portfolios-mobile-nav-backdrop-in 0.35s ease forwards;
}
@keyframes portfolios-mobile-nav-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Panneau navigation — fermé : totalement masqué (évite bande glass fantôme) */
#portfolio_page header:where([data-nav-menu]) #header-nav,
#portfolio_page header:where([data-nav-menu]) #header-nav {
position: fixed;
top: var(--header-height, 5rem);
right: 0;
bottom: 0;
left: 0;
width: auto;
max-width: 100%;
height: auto;
margin: 0;
box-sizing: border-box;
z-index: 850;
display: flex;
flex-direction: column;
pointer-events: none;
overflow: hidden;
background-color: transparent;
background-image: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
transform: none;
clip-path: inset(0 0 100% 0);
-webkit-clip-path: inset(0 0 100% 0);
visibility: hidden;
opacity: 0;
transition:
clip-path 0.42s cubic-bezier(0.32, 0.72, 0, 1),
-webkit-clip-path 0.42s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.2s ease,
visibility 0s linear 0.42s;
}
#portfolio_page header:where([data-nav-menu]) #header-nav::before,
#portfolio_page header:where([data-nav-menu]) #header-nav::before {
content: none;
display: none;
}
#portfolio_page header:where([data-nav-menu]) #header-nav.nav-full,
#portfolio_page header:where([data-nav-menu]) #header-nav.nav-full {
clip-path: inset(0 0 0 0);
-webkit-clip-path: inset(0 0 0 0);
pointer-events: auto;
overscroll-behavior: contain;
visibility: visible;
opacity: 1;
-webkit-backdrop-filter: var(--portfolios-nav-bg-blur, blur(6px));
backdrop-filter: var(--portfolios-nav-bg-blur, blur(6px));
transition:
clip-path 0.42s cubic-bezier(0.32, 0.72, 0, 1),
-webkit-clip-path 0.42s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.2s ease,
visibility 0s linear 0s;
}
#portfolio_page header:where([data-nav-menu]) #header-nav.nav-full::before,
#portfolio_page header:where([data-nav-menu]) #header-nav.nav-full::before {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 0;
background-color: var(--portfolios-nav-bg-color, rgba(255, 255, 255, 0.15));
pointer-events: none;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content {
width: 100%;
max-width: 100%;
flex: 1 1 auto;
min-width: 0;
min-height: 100%;
max-height: 100%;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
position: relative;
z-index: 2;
background: transparent;
pointer-events: auto;
padding-block: clamp(1.5rem, 5vw, 2.5rem) clamp(4rem, 10vw, 6rem);
padding-inline: var(--portfolios-mobile-header-gutter, 20px);
}
#portfolio_page header:where([data-nav-menu]) #header-nav.nav-full .nav__content a {
pointer-events: auto;
position: relative;
z-index: 2;
}
#portfolio_page header.nav-right:where([data-nav-menu]) #header-nav .nav__content {
padding-inline-end: calc(
var(--portfolios-mobile-header-gutter, 20px) + var(--portfolios-mobile-nav-icon-inset, 0.5625rem)
);
}
/* Hors fond plein : texte nu, pas de padding latéral */
/* Apparence des liens : voir la feuille de liens (lot E2). */
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content > * {
position: relative;
z-index: 1;
max-width: 100%;
box-sizing: border-box;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .nav__list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--portfolios-header-nav-gap-mobile, 0.35rem);
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
#portfolio_page header:is(.nav-left, .nav-center, .nav-right):where([data-nav-menu]) #header-nav .nav__content .nav__list {
align-items: var(--pf-align-justify);
text-align: var(--pf-align-text);
}
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .nav__list > li {
width: 100%;
max-width: 100%;
margin: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
min-width: 0;
}
#portfolio_page header:is(.nav-left, .nav-center, .nav-right):where([data-nav-menu]) #header-nav .nav__content .nav__list > li {
align-items: var(--pf-align-justify);
}
/*
* .nav__item-main regroupe [libellé][chevron] — alignement via le .
*/
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .nav__list > .item-has-children {
flex-direction: column;
align-items: flex-start;
}
#portfolio_page header:is(.nav-left, .nav-center, .nav-right):where([data-nav-menu]) #header-nav .nav__content .nav__list > .item-has-children {
align-items: var(--pf-align-justify);
}
#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 {
display: inline-flex;
align-items: center;
line-height: var(--portfolios-nav-line-height);
min-height: max(2.75rem, var(--portfolios-nav-line-height));
max-width: 100%;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: break-word;
}
/*
* Fond plein : pastilles = paddings thème (vert/horiz),
* pas le padding « texte nu » mobile.
*/
#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 {
min-height: 0;
line-height: var(--portfolios-nav-line-height);
}
#portfolio_page header:where([data-nav-menu]) #header-nav a.nav__item-main {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 0.35em;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .submenu-toggle,
#portfolio_page header:where([data-nav-menu]) #header-nav .submenu-toggle .submenu-toggle-icon {
color: inherit;
font-size: calc(var(--portfolios-font-size-base) * 0.85);
}
#portfolio_page header:where([data-nav-menu]) #header-nav .submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 1em;
height: 1em;
margin: 0;
padding: 0;
pointer-events: none;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .submenu-toggle .submenu-toggle-icon {
font-size: var(--portfolios-font-size-base);
line-height: 0;
}
/* Fond plein : chevron = même couleur initiale que le texte du lien */
#portfolio_page header:where([data-nav-menu]) #header-nav .item-has-children > .sub-menu {
width: 100%;
}
/* Sous-menu : même alignement horizontal que la liste */
#portfolio_page header:is(.nav-left, .nav-center, .nav-right):where([data-nav-menu]) #header-nav .item-has-children > .sub-menu .sub-menu-content,
#portfolio_page header:is(.nav-left, .nav-center, .nav-right):where([data-nav-menu]) #header-nav .item-has-children > .sub-menu ul {
align-items: var(--pf-align-justify);
text-align: var(--pf-align-text);
}
/* Sous-menus accordéon */
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .sub-menu {
display: none;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .item-has-children .sub-menu {
display: none;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .sub-menu {
margin-top: 0.25rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .sub-menu .sub-menu-content,
#portfolio_page header:where([data-nav-menu]) #header-nav .sub-menu ul,
#portfolio_page header:where([data-nav-menu]) #header-nav .sub-menu ul.pf-w-wide {
align-items: inherit;
gap: var(--portfolios-header-nav-gap-mobile, 0.35rem);
box-sizing: border-box;
}
#portfolio_page header:is(.nav-left, .nav-center, .nav-right):where([data-nav-menu]) #header-nav .sub-menu ul {
align-items: var(--pf-align-justify);
text-align: var(--pf-align-text);
}
#portfolio_page header:where([data-nav-menu]) #header-nav .sub-menu ul li {
display: flex;
flex-direction: column;
margin: 0;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
#portfolio_page header:is(.nav-left, .nav-center, .nav-right):where([data-nav-menu]) #header-nav .sub-menu ul li {
align-items: var(--pf-align-justify);
text-align: var(--pf-align-text);
}
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .sub-menu .sub-menu-content {
padding-inline: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .sub-menu ul li a {
display: inline-flex;
align-items: center;
width: auto;
min-height: 2.75rem;
max-width: 100%;
box-sizing: border-box;
opacity: 0.92;
overflow-wrap: anywhere;
word-break: break-word;
}
#portfolio_page header:is(.nav-left, .nav-center, .nav-right):where([data-nav-menu]) #header-nav .sub-menu ul li a {
justify-content: var(--pf-align-justify);
text-align: var(--pf-align-text);
}
#portfolio_page header:where([data-nav-menu]) #header-nav.nav--bg .sub-menu ul li a {
min-height: 0;
opacity: 1;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .item-has-children.submenu-open {
padding-bottom: 0.35rem;
}
#portfolio_page header:where([data-nav-menu]) #header-nav.nav--underline .nav__list > .nav__list-item > a::after {
inset-inline: 0;
}
#portfolio_page header:is(.nav-left, .nav-center, .nav-right):where([data-nav-menu]) #header-nav.nav--underline .nav__list a::after,
#portfolio_page header:is(.nav-left, .nav-center, .nav-right):where([data-nav-menu]) #header-nav.nav--underline .sub-menu a::after {
transform-origin: var(--pf-align-text) center;
}
#portfolio_page header.nav-left:where([data-nav-menu]) #header-nav.nav--bg .nav__list > li > a:not(.footer-title),
#portfolio_page header.nav-right:where([data-nav-menu]) #header-nav.nav--bg .nav__list > li > a:not(.footer-title) {
width: auto;
max-width: 100%;
}
@media (hover: none) {
}
@media (prefers-reduced-motion: reduce) {
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content {
transition-duration: 0.01ms;
}
#portfolio_page header:where([data-nav-menu]) #hamburgerBtn .hamburger__state {
transition-duration: 0.01ms;
}
#portfolio_page header.mobile-nav-open:where([data-nav-menu])::after {
animation: none;
}
#portfolio_page header:where([data-nav-menu]) #header-nav,
#portfolio_page header:where([data-nav-menu]) #header-nav {
transition-duration: 0.01ms;
}
}
}
/* 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 (max-width: 1100px) {
html,
body {
overflow-x: hidden;
}
}
@media (max-width: 1100px) {
#portfolio_background,
#portfolio_page {
overflow-x: hidden;
}
}
@media (max-width: 1100px) {
#portfolio_page header,
#portfolio_page #header {
display: block;
}
}
html.portfolios-mobile-nav-open,
body.portfolios-mobile-nav-open {
overflow: hidden;
overflow-x: hidden;
}
#portfolio_page header:where([data-nav-menu]) #header-nav,
#portfolio_page header:where([data-nav-menu]) #header-nav {
padding: 0;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .pf-w-wide {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
#portfolio_page header:where([data-nav-menu]) #header-nav :is(.pf-pad-sm, .pf-pad-md, .pf-pad-lg,
.pf-pad-x-sm, .pf-pad-x-md, .pf-pad-x-lg,
.pf-pl-sm, .pf-pl-md, .pf-pl-lg,
.pf-pr-sm, .pf-pr-md, .pf-pr-lg) {
padding-left: 0;
padding-right: 0;
}
#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 {
stroke: currentColor;
fill: none;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .item-has-children.submenu-open > .sub-menu {
display: block;
opacity: 1;
max-height: min(80vh, 2000px);
visibility: visible;
overflow: visible;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .sub-menu {
position: static;
left: auto;
right: auto;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .item-has-children > .sub-menu {
position: static;
inset: auto;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .sub-menu .sub-menu-content,
#portfolio_page header:where([data-nav-menu]) #header-nav .sub-menu ul,
#portfolio_page header:where([data-nav-menu]) #header-nav .sub-menu ul.pf-w-wide {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .sub-menu .sub-menu-content {
background-color: transparent;
background-image: none;
border: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .sub-menu .sub-menu-content::before {
display: none;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .item-has-children .sub-menu {
overflow: visible;
}
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .sub-menu {
background: none;
background-color: transparent;
background-image: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
@media (hover: none) {
#portfolio_page header:where([data-nav-menu]) #header-nav .nav__content .item-has-children:hover:not(.submenu-open) > .sub-menu {
display: none;
}
}
}
/* assets/css/public/design/themes/basic/nav-background.css */
/* @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//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;
}
}
/* assets/css/public/design/themes/basic/links.css */
/* @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;
}
}
}
/* assets/css/public/design/themes/basic/header-order.css */
/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 20-09-2026-16-46 */
#portfolio_page .nav-order-0 {
order: 0;
}
#portfolio_page .nav-order-1 {
order: 2;
}
#portfolio_page .nav-order-2 {
order: 3;
}
#portfolio_page .nav-order-3 {
order: 4;
}
#portfolio_page .nav-order-4 {
order: 5;
}
#portfolio_page .nav-order-5 {
order: 6;
}
#portfolio_page .nav-order-6 {
order: 7;
}
#portfolio_page .nav-order-7 {
order: 8;
}
#portfolio_page .nav-order-8 {
order: 9;
}
#portfolio_page .nav-order-9 {
order: 10;
}
#portfolio_page .nav-order-10 {
order: 11;
}
#portfolio_page .nav-order-11 {
order: 12;
}
}
/* assets/css/public/design/elements/settings.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — settings (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
0. Réglages de l'utilisateur repris par tous les thèmes
Les gabarits sont des bases de style : ils fixent la structure (disposition, proportions,
typographie de mise en page). Tout ce que le générateur règle passe par ces variables :
arrondis (vignettes / liens du menu), contour (type, épaisseur, couleur), ombre, survol et
clic, fond des contenus, filets entre sections, couleurs d'accent, police.
Interdit dans les gabarits : couleur littérale (#hex, rgba), !important sur fond / bordure /
ombre, transform au survol (utiliser --pf-hover / --pf-press), font-family forcée.
Contrôle : docs/tools/matrices-banc/check.php.
========================================================================== */
#portfolio_page {
--pf-radius: var(--portfolios-thumbnail-radius, 0px);
--pf-radius-inner: max(0px, calc(var(--pf-radius) * 0.75));
--pf-pill-radius: var(--portfolios-nav-links-radius, 999px);
--pf-border-width: var(--portfolios-thumbnail-border-width, 0px);
--pf-border-style-or-solid: solid;
--pf-border-color: var(--portfolios-thumbnail-border-color, currentColor);
/* Contour réglé par l'utilisateur (type « aucun » → pas de bordure). */
--pf-border: var(--pf-border-width) var(--portfolios-thumbnail-border-type, none) var(--pf-border-color);
/* Carte cadrée (1) ou libre (0) : contour ou ombre réglés par l'utilisateur, ou cadre propre au thème
(--pf-card-framed: 1 dans themes//tokens.css). Multiplie les marges latérales des dispositions sans
fond (Grand format des services) : sans cadre, le texte s'aligne sur le titre de la section. */
--pf-card-framed: var(--portfolios-thumbnail-framed, 0);
/* Couleur du contour si l'utilisateur en a réglé un, sinon filet discret du thème. */
--pf-contour-or-hairline: var(--portfolios-thumbnail-contour-color, color-mix(in srgb, currentColor 18%, transparent));
/* Contour « fort » (Brutal, billets, contours) : épaisseur du thème + celle de l'utilisateur, couleur de l'utilisateur. */
--pf-ink: var(--portfolios-text-main-color, currentColor);
--pf-strong-border: calc(2px + var(--pf-border-width)) solid var(--portfolios-thumbnail-contour-color, var(--pf-ink));
--pf-strong-shadow-color: var(--portfolios-thumbnail-contour-color, var(--pf-ink));
/* Fond des cartes : « Couleur de fond des contenus », sinon fond du site. */
--pf-surface: var(--portfolios-content-bg-color, var(--portfolios-theme-bg-main, transparent));
--pf-surface-alt: color-mix(in srgb, var(--pf-surface) 88%, var(--pf-ink) 12%);
/* Teintes de compartiments (cartes « bento », tuiles du thème Bento) : accents sur le fond des contenus. */
--pf-tint-1: color-mix(in srgb, var(--pf-accent) 14%, var(--pf-surface));
--pf-tint-2: color-mix(in srgb, var(--portfolios-color-two, var(--pf-accent)) 16%, var(--pf-surface));
--pf-tint-3: var(--pf-surface-alt);
--pf-tint-4: color-mix(in srgb, var(--pf-accent) 26%, var(--pf-surface));
/* Titre / texte lisibles sur le fond des contenus (calculés en PHP, miroir JS dans l'éditeur). */
--pf-title: var(--portfolios-content-title-color, var(--portfolios-heading-secondary-color, var(--pf-ink)));
--pf-text: var(--portfolios-content-text-color, var(--pf-ink));
--pf-on-accent: var(--portfolios-button-text-color, var(--portfolios-theme-bg-main, Canvas));
--pf-accent: var(--portfolios-color-one, var(--pf-ink));
/* Ombre de l'utilisateur ; un thème peut proposer la sienne (--pf-theme-shadow), l'utilisateur garde la main. */
--pf-shadow: var(--portfolios-thumbnail-box-shadow, 0 0 0 0 transparent);
--pf-theme-shadow: 0 0 0 0 transparent;
/* Usage : box-shadow: var(--pf-shadow), var(--pf-theme-shadow) — écrit sur l'élément, pour que
--pf-theme-shadow posé localement soit pris en compte. */
/* Texte et voile posés sur une image (réglages « Textes des vignettes »). */
--pf-on-media: var(--portfolios-thumbnail-overlay-title-color, #fff);
--pf-scrim: color-mix(in srgb, #000 65%, transparent);
--pf-scrim-strong: color-mix(in srgb, #000 85%, transparent);
/* Verre dépoli : dérivé du fond des contenus et du contour de l'utilisateur. */
--pf-glass-bg: color-mix(in srgb, var(--pf-surface) 55%, transparent);
--pf-glass-edge: var(--portfolios-thumbnail-contour-color, color-mix(in srgb, #fff 40%, transparent));
--pf-glass-shadow: 0 16px 40px color-mix(in srgb, #000 12%, transparent);
--pf-drop-shadow: 0 10px 25px color-mix(in srgb, #000 18%, transparent);
--pf-panel-shadow: 0 10px 30px color-mix(in srgb, #000 14%, transparent);
--pf-panel-shadow-up: 0 -8px 24px color-mix(in srgb, #000 8%, transparent);
/* Panneaux de menu (feuille, tiroir, palette, bulles) et voile derrière eux. */
--pf-backdrop: color-mix(in srgb, #000 35%, transparent);
--pf-sheet-shadow: 0 12px 40px color-mix(in srgb, #000 18%, transparent);
--pf-sheet-shadow-strong: 0 30px 80px color-mix(in srgb, #000 35%, transparent);
--pf-sheet-shadow-side: -24px 0 60px color-mix(in srgb, #000 18%, transparent);
--pf-sheet-shadow-up: 0 -18px 50px color-mix(in srgb, #000 20%, transparent);
--pf-drawer-shadow: -18px 0 50px color-mix(in srgb, #000 20%, transparent);
--pf-bubble-shadow: 0 10px 30px color-mix(in srgb, #000 30%, transparent);
--pf-chip-shadow: 0 6px 20px color-mix(in srgb, #000 18%, transparent);
/* Survol / clic de l'utilisateur, à composer avec les transformations décoratives (rotate: …). */
--pf-hover: var(--portfolios-thumbnail-hover-transform, none);
--pf-hover-filter: var(--portfolios-thumbnail-hover-filter, none);
--pf-press: var(--portfolios-thumbnail-click-transform, none);
/* Police d'accent des thèmes « console » : celle de l'utilisateur, sauf choix contraire. */
--pf-mono: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif);
/* En-têtes en îlot (Bento, Verre, forme « Flottante ») : « Espacement vertical de l'en-tête »
règle la hauteur de l'îlot (padding intérieur), l'écart autour de l'îlot reste fixe. */
--pf-island-pad-y: calc(var(--portfolios-header-padding-y, 15px) * 0.5);
--pf-island-gap: 0.75rem;
--pf-rule-width: var(--portfolios-section-divider-width, 1px);
--pf-rule-color: var(--portfolios-section-divider-color, color-mix(in srgb, currentColor 20%, transparent));
}
}
/* assets/css/public/design/elements/articles.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — articles (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
4. Articles
Balisage : .blog-list > .blog-list__item > a.thumbnail-tile > .thumb + .article-blog-infos
========================================================================== */
#portfolio_page .blog-list:not([data-articles-layout="grid"]) .thumbnail-tile {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
color: inherit;
text-decoration: none;
}
#portfolio_page .blog-list:not([data-articles-layout="grid"]) .thumb {
position: relative;
padding-bottom: 60%;
background-size: cover;
background-position: center;
}
#portfolio_page .blog-list:not([data-articles-layout="grid"]) .article-blog-infos {
padding: calc(1rem * var(--pf-density-pad, 1)) 0;
}
/* --- Magazine : une grande « une », puis colonnes ------------------------- */
#portfolio_page .blog-list[data-articles-layout="magazine"] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(2.5rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
}
#portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child {
grid-column: 1 / -1;
}
#portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child .thumbnail-tile {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: calc(2.5rem * var(--pf-density-gap, 1));
align-items: center;
}
#portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child .thumb {
padding-bottom: 60%; /* format historique des vignettes d'articles (thumbnails/main.css) */
}
#portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child .article-blog-infos__title {
/* Tailles dérivées de la taille des titres du générateur (blog.css les fixe en !important). */
font-size: calc(var(--portfolios-heading-secondary-size, 14px) * 2);
line-height: 1.1;
}
/* --- Mosaïque plein bord ------------------------------------------------- */
#portfolio_page .blog-list[data-articles-layout="mosaic"] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: 14rem;
grid-auto-flow: dense;
gap: calc(4px * var(--pf-density-gap, 1));
}
#portfolio_page .blog-list[data-articles-layout="mosaic"] > :nth-child(5n + 1) {
grid-column: span 2;
grid-row: span 2;
}
#portfolio_page .blog-list[data-articles-layout="mosaic"] > :nth-child(5n + 4) {
grid-row: span 2;
}
#portfolio_page .blog-list[data-articles-layout="mosaic"] .thumbnail-tile {
position: relative;
}
#portfolio_page .blog-list[data-articles-layout="mosaic"] .thumb {
position: absolute;
inset: 0;
padding: 0;
}
#portfolio_page .blog-list[data-articles-layout="mosaic"] .article-blog-infos {
position: absolute;
inset: auto 0 0;
padding: calc(2.5rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
color: var(--pf-on-media);
/* Dégradé « Textes des vignettes » (/theme) : le texte (--pf-on-media) est contrasté pour lui. */
background: var(--portfolios-thumbnail-overlay-gradient, linear-gradient(0deg, var(--pf-scrim-strong), transparent));
opacity: 0;
transform: translateY(0.5rem);
transition: opacity 0.3s ease, transform 0.3s ease;
}
#portfolio_page .blog-list[data-articles-layout="mosaic"] .thumbnail-tile:is(:hover, :focus-visible) .article-blog-infos {
opacity: 1;
transform: none;
}
#portfolio_page .blog-list[data-articles-layout="mosaic"] .article-blog-infos__description {
display: none;
}
/* --- Index (tableau numéroté) / journal / survol : listes en lignes ------- */
#portfolio_page .blog-list:is([data-articles-layout="index"], [data-articles-layout="journal"], [data-articles-layout="reveal"]) {
display: block;
counter-reset: pf-article;
}
#portfolio_page .blog-list:is([data-articles-layout="index"], [data-articles-layout="journal"], [data-articles-layout="reveal"]) > * {
counter-increment: pf-article;
}
#portfolio_page .blog-list:is([data-articles-layout="index"], [data-articles-layout="journal"], [data-articles-layout="reveal"]) .thumb {
display: none;
}
#portfolio_page .blog-list[data-articles-layout="index"] .thumbnail-tile {
display: grid;
grid-template-columns: 4rem minmax(0, 1fr);
align-items: baseline;
padding: calc(1.1rem * var(--pf-density-pad, 1)) 0;
}
#portfolio_page .blog-list[data-articles-layout="index"] .thumbnail-tile::before {
content: counter(pf-article, decimal-leading-zero);
font-variant-numeric: tabular-nums;
opacity: 0.55;
}
#portfolio_page .blog-list[data-articles-layout="index"] .article-blog-infos {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0 calc(2rem * var(--pf-density-gap, 1));
padding: 0;
}
#portfolio_page .blog-list[data-articles-layout="index"] .article-blog-infos__meta {
grid-column: 2;
grid-row: 1;
margin: 0;
white-space: nowrap;
}
#portfolio_page .blog-list[data-articles-layout="index"] .article-blog-infos__description {
grid-column: 1;
margin: 0.35rem 0 0;
opacity: 0.75;
}
#portfolio_page .blog-list[data-articles-layout="index"] .thumbnail-tile:hover .article-blog-infos__title {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Journal : date en marge */
#portfolio_page .blog-list[data-articles-layout="journal"] .thumbnail-tile {
display: block;
padding: calc(1.5rem * var(--pf-density-pad, 1)) 0;
}
#portfolio_page .blog-list[data-articles-layout="journal"] .article-blog-infos {
display: grid;
grid-template-columns: 9rem minmax(0, 1fr);
gap: calc(0.25rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
padding: 0;
}
#portfolio_page .blog-list[data-articles-layout="journal"] .article-blog-infos > * {
grid-column: 2;
}
#portfolio_page .blog-list[data-articles-layout="journal"] .article-blog-infos__meta {
grid-column: 1;
grid-row: 1 / span 3;
margin: 0.3rem 0 0;
font-style: italic;
opacity: 0.7;
}
/* Liste « image qui suit la souris » (cinétique) — image positionnée par matrix-reveal (header.js) */
#portfolio_page .blog-list[data-articles-layout="reveal"] .thumbnail-tile {
display: block;
padding: calc(1.25rem * var(--pf-density-pad, 1)) 0;
}
#portfolio_page .blog-list[data-articles-layout="reveal"] .article-blog-infos {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: calc(0.5rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
padding: 0;
}
#portfolio_page .blog-list[data-articles-layout="reveal"] .article-blog-infos__title {
font-size: clamp(calc(var(--portfolios-heading-secondary-size, 14px) * 1.4), 4vw, calc(var(--portfolios-heading-secondary-size, 14px) * 2.6));
line-height: 1.05;
letter-spacing: -0.02em;
transition: translate 0.35s ease, opacity 0.35s ease;
}
#portfolio_page .blog-list[data-articles-layout="reveal"]:hover .thumbnail-tile:not(:hover) .article-blog-infos__title {
opacity: 0.35;
}
#portfolio_page .blog-list[data-articles-layout="reveal"] .thumbnail-tile:hover .article-blog-infos__title {
translate: 0.75rem 0;
}
#portfolio_page .blog-list[data-articles-layout="reveal"] .article-blog-infos__description {
display: none;
}
.matrix-reveal-image {
position: fixed;
top: 0;
left: 0;
z-index: 700;
width: 18rem;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
border-radius: var(--pf-radius);
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%) scale(0.85);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.matrix-reveal-image.is-visible {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* --- Bento : grille à tailles variées (articles ; œuvres plus bas) -----------
Un seul motif, repris tous les 7 éléments sur 4 colonnes × 3 rangées : une grande tuile 2 × 2,
deux tuiles larges 2 × 1, quatre petites. Rangées de hauteur fixe : l'image remplit la tuile.
Sous 1100px : 2 colonnes, la grande tuile et les larges prennent toute la ligne. */
#portfolio_page .blog-list[data-articles-layout="bento"] {
--pf-bento-row: clamp(10rem, 16vw, 16rem);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: var(--pf-bento-row);
grid-auto-flow: dense;
gap: calc(0.75rem * var(--pf-density-gap, 1));
}
#portfolio_page .blog-list[data-articles-layout="bento"] > :nth-child(7n + 1) {
grid-column: span 2;
grid-row: span 2;
}
#portfolio_page .blog-list[data-articles-layout="bento"] > :is(:nth-child(7n + 2), :nth-child(7n + 5)) {
grid-column: span 2;
}
@media (max-width: 1100px) {
#portfolio_page .blog-list[data-articles-layout="bento"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Œuvres : mêmes tuiles teintées, mais jamais de tuile « large » (2 × 1) : une affiche ou un album ne devient pas
un bandeau. Colonnes de grid.css (--_thumbs), tuiles au format de l'œuvre ; une grande tuile 2 × 2 sur sept
garde ce format (comme la mosaïque). */
#portfolio_page .pf-thumbs[data-works-layout="bento"] {
grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: auto;
grid-auto-flow: dense;
gap: calc(0.75rem * var(--pf-density-gap, 1));
}
#portfolio_page .pf-thumbs[data-works-layout="bento"] > a:nth-child(7n + 1) {
grid-column: span 2;
grid-row: span 2;
}
/* Article : comme les œuvres, l'image remplit la tuile et le texte tient dans une étiquette
(titre + catégorie / date) ; la description n'apparaît que dans la grande tuile. */
#portfolio_page .blog-list[data-articles-layout="bento"] > * {
min-height: 0;
}
#portfolio_page .blog-list[data-articles-layout="bento"] .thumbnail-tile {
position: relative;
display: block;
height: 100%;
overflow: hidden;
}
#portfolio_page .blog-list[data-articles-layout="bento"] .thumbnail-tile .thumb {
position: absolute;
inset: 0;
height: 100%;
aspect-ratio: auto;
border-radius: inherit;
}
#portfolio_page .blog-list[data-articles-layout="bento"] .article-blog-infos {
position: absolute;
left: 0.6rem;
bottom: 0.6rem;
max-width: calc(100% - 1.2rem);
padding: calc(0.55rem * var(--pf-density-pad, 1)) calc(0.85rem * var(--pf-density-pad, 1)) calc(0.6rem * var(--pf-density-pad, 1));
border-radius: var(--pf-radius-inner);
background: color-mix(in srgb, var(--pf-tile, var(--pf-surface)) 88%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
#portfolio_page .blog-list[data-articles-layout="bento"] .article-blog-infos__title {
font-weight: 700;
}
#portfolio_page .blog-list[data-articles-layout="bento"] > :not(:nth-child(7n + 1)) .article-blog-infos__description {
display: none;
}
/* Grande tuile : étiquette plus large, titre plus grand, description sur 2 lignes. */
#portfolio_page .blog-list[data-articles-layout="bento"] > :nth-child(7n + 1) .article-blog-infos {
max-width: min(28rem, calc(100% - 1.2rem));
padding: calc(0.85rem * var(--pf-density-pad, 1)) calc(1.1rem * var(--pf-density-pad, 1)) calc(0.95rem * var(--pf-density-pad, 1));
}
#portfolio_page .blog-list[data-articles-layout="bento"] > :nth-child(7n + 1) .article-blog-infos__title {
font-size: 1.35em;
}
#portfolio_page .blog-list[data-articles-layout="bento"] > :nth-child(7n + 1) .article-blog-infos__description {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/* --- Grand format : un article par bandeau ------------------------------- */
#portfolio_page .blog-list[data-articles-layout="feature"] {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: calc(3rem * var(--pf-density-gap, 1));
}
#portfolio_page .blog-list[data-articles-layout="feature"] .thumbnail-tile {
position: relative;
min-height: min(78vh, 44rem);
justify-content: flex-end;
}
#portfolio_page .blog-list[data-articles-layout="feature"] .thumb {
position: absolute;
inset: 0;
padding: 0;
}
#portfolio_page .blog-list[data-articles-layout="feature"] .thumb::after {
content: "";
position: absolute;
inset: 0;
/* Dégradé « Textes des vignettes » (/theme), sur le bas de l'image : le texte (--pf-on-media) est contrasté pour lui. */
background: var(--portfolios-thumbnail-overlay-gradient, linear-gradient(0deg, var(--pf-scrim-strong), transparent)) bottom / 100% 65% no-repeat;
opacity: 1;
}
#portfolio_page .blog-list[data-articles-layout="feature"] .article-blog-infos {
position: relative;
flex: 0 0 auto;
max-width: 46rem;
margin-top: auto;
padding: calc(2.5rem * var(--pf-density-pad, 1));
color: var(--pf-on-media);
}
#portfolio_page .blog-list:is([data-articles-layout="feature"], [data-articles-layout="mosaic"]) .article-blog-infos :is(h4, p, span, time) {
color: var(--pf-on-media);
}
/* Article sans image (fond de remplacement clair) : pas de voile, texte aux couleurs du thème. */
#portfolio_page .blog-list:is([data-articles-layout="feature"], [data-articles-layout="mosaic"]) .thumbnail-tile:has(.thumb-placeholder-blog) .thumb::after {
background: none;
}
#portfolio_page .blog-list:is([data-articles-layout="feature"], [data-articles-layout="mosaic"]) .thumbnail-tile:has(.thumb-placeholder-blog) .article-blog-infos {
color: var(--pf-ink);
background: none; /* voile de la mosaïque */
}
#portfolio_page .blog-list:is([data-articles-layout="feature"], [data-articles-layout="mosaic"]) .thumbnail-tile:has(.thumb-placeholder-blog) .article-blog-infos :is(h4, p, span, time) {
color: var(--pf-ink);
}
#portfolio_page .blog-list:is([data-articles-layout="feature"], [data-articles-layout="mosaic"]) .thumbnail-tile:has(.thumb-placeholder-blog) .article-blog-infos__title {
color: var(--portfolios-heading-secondary-color, var(--pf-ink));
}
#portfolio_page .blog-list[data-articles-layout="feature"] .article-blog-infos__title {
font-size: clamp(calc(var(--portfolios-heading-secondary-size, 14px) * 1.6), 5vw, calc(var(--portfolios-heading-secondary-size, 14px) * 3.2));
line-height: 1.02;
text-transform: var(--portfolios-title-transform, uppercase);
letter-spacing: 0.02em;
}
@media (max-width: 1100px) {
#portfolio_page .blog-list[data-articles-layout="magazine"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child .thumbnail-tile {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
#portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child .article-blog-infos__title {
font-size: 1.6em;
}
#portfolio_page .blog-list[data-articles-layout="mosaic"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 11rem;
}
/* Mobile : pas de survol → légende toujours visible. */
#portfolio_page .blog-list[data-articles-layout="mosaic"] .article-blog-infos {
opacity: 1;
transform: none;
padding: calc(1.75rem * var(--pf-density-pad, 1)) calc(0.75rem * var(--pf-density-pad, 1)) calc(0.75rem * var(--pf-density-pad, 1));
font-size: 0.85em;
}
#portfolio_page .blog-list[data-articles-layout="index"] .thumbnail-tile {
grid-template-columns: 2.5rem minmax(0, 1fr);
}
#portfolio_page .blog-list[data-articles-layout="index"] .article-blog-infos {
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page .blog-list[data-articles-layout="index"] .article-blog-infos__meta {
grid-column: 1;
grid-row: auto;
}
#portfolio_page .blog-list[data-articles-layout="journal"] .article-blog-infos {
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page .blog-list[data-articles-layout="journal"] .article-blog-infos__meta {
grid-row: auto;
order: -1;
}
#portfolio_page .blog-list[data-articles-layout="journal"] .article-blog-infos > * {
grid-column: 1;
}
#portfolio_page .blog-list[data-articles-layout="feature"] {
gap: 0;
margin-inline: -20px;
}
/* Format portrait au lieu de presque tout l'écran (88svh) : on voit l'article suivant arriver. */
#portfolio_page .blog-list[data-articles-layout="feature"] .thumbnail-tile {
min-height: 0;
aspect-ratio: 4 / 5;
scroll-snap-align: start;
}
#portfolio_page .blog-list[data-articles-layout="feature"] .article-blog-infos {
padding: calc(1.5rem * var(--pf-density-pad, 1)) calc(1.25rem * var(--pf-density-pad, 1)) calc(2rem * var(--pf-density-pad, 1));
}
}
@media (max-width: 640px) {
#portfolio_page .blog-list[data-articles-layout="magazine"] {
grid-template-columns: minmax(0, 1fr);
}
}
/* ==========================================================================
9. Articles — gabarits ajoutés : list · minimal · carousel
========================================================================== */
/* Liste illustrée : image à gauche, texte à droite */
#portfolio_page .blog-list[data-articles-layout="list"] {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: calc(1.25rem * var(--pf-density-gap, 1));
}
#portfolio_page .blog-list[data-articles-layout="list"] .thumbnail-tile {
display: grid;
grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr);
gap: calc(1.5rem * var(--pf-density-gap, 1));
align-items: center;
}
#portfolio_page .blog-list[data-articles-layout="list"] .thumb {
padding-bottom: 60%; /* format historique des vignettes d'articles (thumbnails/main.css) */
}
#portfolio_page .blog-list[data-articles-layout="list"] .article-blog-infos {
padding: calc(0.5rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1)) calc(0.5rem * var(--pf-density-pad, 1)) 0;
}
/* Titres seuls : grande typographie, sans image */
#portfolio_page .blog-list[data-articles-layout="minimal"] {
display: block;
}
#portfolio_page .blog-list[data-articles-layout="minimal"] .thumb,
#portfolio_page .blog-list[data-articles-layout="minimal"] .article-blog-infos__description {
display: none;
}
#portfolio_page .blog-list[data-articles-layout="minimal"] .thumbnail-tile {
display: block;
padding: calc(0.9rem * var(--pf-density-pad, 1)) 0;
}
#portfolio_page .blog-list[data-articles-layout="minimal"] .article-blog-infos {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: calc(0.25rem * var(--pf-density-gap, 1)) calc(1rem * var(--pf-density-gap, 1));
padding: 0;
}
#portfolio_page .blog-list[data-articles-layout="minimal"] .article-blog-infos__title {
font-size: calc(var(--portfolios-heading-secondary-size, 14px) * 1.6);
line-height: 1.15;
}
#portfolio_page .blog-list[data-articles-layout="minimal"] .article-blog-infos__meta {
margin: 0;
opacity: 0.6;
}
/* Carrousel : défilement horizontal aimanté */
#portfolio_page .blog-list[data-articles-layout="carousel"] {
display: flex;
gap: calc(1.25rem * var(--pf-density-gap, 1));
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
scrollbar-width: thin;
}
#portfolio_page .blog-list[data-articles-layout="carousel"] > * {
flex: 0 0 clamp(15rem, 28vw, 22rem);
scroll-snap-align: start;
}
@media (max-width: 1100px) {
#portfolio_page .blog-list[data-articles-layout="list"] .thumbnail-tile {
grid-template-columns: 7.5rem minmax(0, 1fr);
gap: calc(0.9rem * var(--pf-density-gap, 1));
}
#portfolio_page .blog-list[data-articles-layout="list"] .article-blog-infos__description {
display: none;
}
#portfolio_page .blog-list[data-articles-layout="carousel"] > * {
flex-basis: 78vw;
}
}
}
/* assets/css/public/design/elements/awards.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — awards (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
5. Prix
Balisage : ul.awards-list[data-awards-layout] > li.award > .award__index + img.award__logo? + .award__name
(`logos` = rendu historique : ul.festivals > li > img)
========================================================================== */
#portfolio_page .awards-list {
margin: 0;
padding: 0;
list-style: none;
}
#portfolio_page .awards-list .award__index {
display: none;
}
#portfolio_page .awards-list .award__logo {
display: block;
max-width: 100%;
height: auto;
object-fit: contain;
}
/* Liste texte : filets fins */
#portfolio_page .awards-list[data-awards-layout="list"] .award {
display: flex;
align-items: center;
gap: calc(1rem * var(--pf-density-gap, 1));
padding: calc(0.7rem * var(--pf-density-pad, 1)) 0;
}
#portfolio_page .awards-list[data-awards-layout="list"] .award__logo {
width: 2.25rem;
height: 2.25rem;
}
/* Tableau indexé */
#portfolio_page .awards-list[data-awards-layout="index"] .award {
display: grid;
grid-template-columns: 3rem 3rem minmax(0, 1fr);
align-items: center;
gap: calc(1rem * var(--pf-density-gap, 1));
padding: calc(0.75rem * var(--pf-density-pad, 1)) 0;
}
#portfolio_page .awards-list[data-awards-layout="index"] .award__index {
display: block;
font-variant-numeric: tabular-nums;
opacity: 0.55;
}
#portfolio_page .awards-list[data-awards-layout="index"] .award__logo {
grid-column: 2;
width: 3rem;
height: 2rem;
}
#portfolio_page .awards-list[data-awards-layout="index"] .award__name {
grid-column: 3;
}
/* Badges discrets / tuiles / médailles / rosettes : en flux */
#portfolio_page .awards-list:is([data-awards-layout="mosaic"], [data-awards-layout="bento"], [data-awards-layout="polaroid"], [data-awards-layout="journal"], [data-awards-layout="feature"]) {
display: flex;
flex-wrap: wrap;
gap: calc(0.75rem * var(--pf-density-gap, 1));
}
#portfolio_page .awards-list[data-awards-layout="mosaic"] .award {
display: inline-flex;
align-items: center;
gap: calc(0.5rem * var(--pf-density-gap, 1));
padding: calc(0.3rem * var(--pf-density-pad, 1)) calc(0.8rem * var(--pf-density-pad, 1)) calc(0.3rem * var(--pf-density-pad, 1)) calc(0.35rem * var(--pf-density-pad, 1));
font-size: 0.85em;
}
#portfolio_page .awards-list[data-awards-layout="mosaic"] .award__logo {
width: 1.6rem;
height: 1.6rem;
border-radius: var(--pf-pill-radius);
}
#portfolio_page .awards-list[data-awards-layout="bento"] .award {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: calc(0.75rem * var(--pf-density-gap, 1));
width: 11rem;
min-height: 8rem;
padding: calc(1rem * var(--pf-density-pad, 1));
}
#portfolio_page .awards-list[data-awards-layout="bento"] .award__index {
display: block;
font-size: 1.8em;
font-weight: 600;
line-height: 1;
}
#portfolio_page .awards-list[data-awards-layout="bento"] .award__logo {
width: 3rem;
height: 3rem;
}
/* Lauriers : feuillage SVG de part et d'autre du texte */
#portfolio_page .awards-list[data-awards-layout="feature"] {
gap: calc(1.25rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
}
#portfolio_page .awards-list[data-awards-layout="feature"] .award {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 10rem;
min-height: 5.5rem;
padding: 0 calc(2.25rem * var(--pf-density-pad, 1));
text-align: center;
text-transform: var(--portfolios-title-transform, uppercase);
letter-spacing: 0.08em;
font-size: 0.75em;
line-height: 1.25;
}
#portfolio_page .awards-list[data-awards-layout="feature"] .award::before,
#portfolio_page .awards-list[data-awards-layout="feature"] .award::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 2rem;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 88'%3E%3Cpath d='M26 84C10 70 4 50 8 26 10 16 14 8 20 2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cg fill='%23000'%3E%3Cellipse cx='20' cy='10' rx='3' ry='7' transform='rotate(35 20 10)'/%3E%3Cellipse cx='12' cy='22' rx='3' ry='7' transform='rotate(20 12 22)'/%3E%3Cellipse cx='8' cy='36' rx='3' ry='7' transform='rotate(5 8 36)'/%3E%3Cellipse cx='8' cy='50' rx='3' ry='7' transform='rotate(-10 8 50)'/%3E%3Cellipse cx='12' cy='64' rx='3' ry='7' transform='rotate(-28 12 64)'/%3E%3Cellipse cx='19' cy='76' rx='3' ry='7' transform='rotate(-45 19 76)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 88'%3E%3Cpath d='M26 84C10 70 4 50 8 26 10 16 14 8 20 2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cg fill='%23000'%3E%3Cellipse cx='20' cy='10' rx='3' ry='7' transform='rotate(35 20 10)'/%3E%3Cellipse cx='12' cy='22' rx='3' ry='7' transform='rotate(20 12 22)'/%3E%3Cellipse cx='8' cy='36' rx='3' ry='7' transform='rotate(5 8 36)'/%3E%3Cellipse cx='8' cy='50' rx='3' ry='7' transform='rotate(-10 8 50)'/%3E%3Cellipse cx='12' cy='64' rx='3' ry='7' transform='rotate(-28 12 64)'/%3E%3Cellipse cx='19' cy='76' rx='3' ry='7' transform='rotate(-45 19 76)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
#portfolio_page .awards-list[data-awards-layout="feature"] .award::before {
left: 0;
}
#portfolio_page .awards-list[data-awards-layout="feature"] .award::after {
right: 0;
transform: scaleX(-1);
}
#portfolio_page .awards-list[data-awards-layout="feature"] .award__logo {
display: none;
}
/* Polaroïd : médailles */
#portfolio_page .awards-list[data-awards-layout="polaroid"] .award {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(0.4rem * var(--pf-density-gap, 1));
width: 8.5rem;
height: 8.5rem;
padding: calc(1rem * var(--pf-density-pad, 1));
box-sizing: border-box;
text-align: center;
font-size: 0.8em;
}
#portfolio_page .awards-list[data-awards-layout="polaroid"] .award__logo {
width: 2.5rem;
height: 2.5rem;
}
/* Rosettes */
#portfolio_page .awards-list[data-awards-layout="journal"] {
flex-direction: column;
gap: calc(0.5rem * var(--pf-density-gap, 1));
}
#portfolio_page .awards-list[data-awards-layout="journal"] .award {
display: flex;
align-items: center;
gap: calc(0.75rem * var(--pf-density-gap, 1));
font-style: italic;
}
#portfolio_page .awards-list[data-awards-layout="journal"] .award::before {
content: "✿";
color: var(--pf-accent);
}
#portfolio_page .awards-list[data-awards-layout="journal"] .award__logo {
width: 1.75rem;
height: 1.75rem;
}
/* Bandeau défilant */
#portfolio_page .awards-marquee {
display: flex;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
#portfolio_page .awards-list[data-awards-layout="carousel"] {
display: flex;
flex: 0 0 auto;
gap: calc(3rem * var(--pf-density-gap, 1));
padding-inline-end: calc(3rem * var(--pf-density-pad, 1));
animation: pf-matrix-marquee 28s linear infinite;
}
#portfolio_page .awards-marquee:hover .awards-list[data-awards-layout="carousel"] {
animation-play-state: paused;
}
#portfolio_page .awards-list[data-awards-layout="carousel"] .award {
display: inline-flex;
align-items: center;
gap: calc(0.75rem * var(--pf-density-gap, 1));
white-space: nowrap;
font-size: 1.4em;
font-weight: 600;
letter-spacing: -0.01em;
}
#portfolio_page .awards-list[data-awards-layout="carousel"] .award__logo {
width: 2rem;
height: 2rem;
}
@keyframes pf-matrix-marquee {
to { transform: translateX(-100%); }
}
/* Carrousel horizontal sur mobile pour les gabarits en flux */
@media (max-width: 1100px) {
#portfolio_page .awards-list:is([data-awards-layout="bento"], [data-awards-layout="polaroid"], [data-awards-layout="feature"], [data-awards-layout="mosaic"]) {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: calc(0.5rem * var(--pf-density-pad, 1));
scrollbar-width: thin;
}
#portfolio_page .awards-list:is([data-awards-layout="bento"], [data-awards-layout="polaroid"], [data-awards-layout="feature"], [data-awards-layout="mosaic"]) .award {
flex: 0 0 auto;
scroll-snap-align: start;
}
#portfolio_page .awards-list[data-awards-layout="index"] .award {
grid-template-columns: 2.25rem minmax(0, 1fr);
}
#portfolio_page .awards-list[data-awards-layout="index"] .award__logo {
display: none;
}
#portfolio_page .awards-list[data-awards-layout="index"] .award__name {
grid-column: 2;
}
}
@media (prefers-reduced-motion: reduce) {
#portfolio_page .awards-list[data-awards-layout="carousel"] {
animation: none;
flex-wrap: wrap;
}
#portfolio_page .awards-marquee {
-webkit-mask-image: none;
mask-image: none;
}
#portfolio_page .awards-list--echo {
display: none;
}
.matrix-reveal-image {
display: none;
}
}
}
/* assets/css/public/design/elements/images.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — images (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
8. Images — [data-images-layout] sur #gallery et #production-show-photos-grid
Balisage : > a.gallery-item (fond = image) > img (masquée en grille)
========================================================================== */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout]:not([data-images-layout="grid"]) > a::after {
content: none;
}
/* Contrat d'orientation : une tuile d'image est carrée (gallery.css). Aucune mise en page ci-dessous ne change ce
format : elle varie l'emprise (colonnes / rangées) ou le nombre par ligne, jamais le rapport largeur / hauteur. */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout] {
--pf-card-ratio: 1 / 1;
}
/* gallery.css (≤ 620 px) centre les éléments : les tuiles doivent remplir leur ligne. */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout]:not([data-images-layout="grid"]) {
align-items: stretch;
}
/* Mosaïque : tailles variées */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="mosaic"] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: auto;
grid-auto-flow: dense;
gap: calc(6px * var(--pf-density-gap, 1));
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="mosaic"] > a {
height: auto;
padding: 0;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="mosaic"] > a:nth-child(6n + 1) {
grid-column: span 2;
grid-row: span 2;
}
/* Pellicule : défilement horizontal aimanté */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="carousel"] {
display: flex;
gap: calc(10px * var(--pf-density-gap, 1));
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
scrollbar-width: thin;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="carousel"] > a {
flex: 0 0 clamp(10rem, 26vw, 18rem);
height: auto;
aspect-ratio: var(--pf-card-ratio);
padding: 0;
scroll-snap-align: start;
}
/* Polaroïd : cadre couleur des contenus (+ épaisseur de l'utilisateur), légère rotation */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] {
display: grid;
gap: calc(28px * var(--pf-density-gap, 1));
padding: calc(12px * var(--pf-density-pad, 1));
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] > a {
background-clip: padding-box;
transition: rotate 0.2s ease;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] > a:nth-child(3n + 1) {
rotate: -2deg;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] > a:nth-child(3n + 2) {
rotate: 1.5deg;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] > a:hover {
rotate: 0deg;
}
/* Bento : tuiles arrondies, une grande */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: auto;
grid-auto-flow: dense;
gap: calc(12px * var(--pf-density-gap, 1));
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a {
height: auto;
padding: 0;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a:nth-child(5n + 1) {
grid-column: span 2;
grid-row: span 2;
}
/* Index numéroté : planche contact, vignettes serrées (6 à 7 par ligne sur ordinateur), numéro sur chacune */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="index"] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
gap: calc(4px * var(--pf-density-gap, 1));
counter-reset: pf-image;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="index"] > a {
position: relative;
counter-increment: pf-image;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="index"] > a::before {
content: counter(pf-image, decimal-leading-zero);
position: absolute;
top: 0.3rem;
left: 0.3rem;
padding: calc(0.05rem * var(--pf-density-pad, 1)) calc(0.35rem * var(--pf-density-pad, 1));
border-radius: var(--pf-radius-inner);
background: var(--pf-ink);
color: var(--pf-on-accent);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.4;
}
@media (max-width: 1100px) {
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="mosaic"], [data-images-layout="bento"]) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: auto;
}
/* modules/photos/gallery.css passe la grille en carrousel flex : les gabarits en grille la gardent. */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="carousel"] > a {
flex-basis: 78vw;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="index"] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
}
/* assets/css/public/design/elements/events.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — events (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
6. Agenda
Balisage : ul#agenda-list[data-events-layout] > a.agenda-item
> ul > li.date (p.date-day, p.date-month, p année) + ul (h3, description, lieu, heure)
(`cards` = rendu historique, agenda.css)
========================================================================== */
#portfolio_page #agenda-list[data-events-layout] {
margin: 0;
padding: 0;
list-style: none;
}
/* Lignes compactes : date en ligne, filets fins */
#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item {
align-items: center;
margin: 0;
padding: calc(1rem * var(--pf-density-pad, 1)) 0;
}
#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item .date {
flex-direction: row;
gap: calc(0.4em * var(--pf-density-gap, 1));
min-width: 11rem;
min-height: 0;
margin-right: 1.5rem;
padding: 0;
background: transparent;
}
#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item .date,
#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item .date p {
color: var(--portfolios-badge-text-color, var(--portfolios-badge-color, var(--portfolios-text-main-color, inherit)));
}
#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item ul li:not(.date) {
margin-bottom: 0.35rem;
}
#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item .agenda-item-description {
margin-bottom: 0.35rem;
}
#portfolio_page #agenda-list[data-events-layout="list"] .agenda-item .agenda-item-open {
position: static;
margin-left: auto;
}
/* Frise chronologique : axe vertical, pastille par date */
#portfolio_page #agenda-list[data-events-layout="journal"] {
position: relative;
padding-left: calc(2rem * var(--pf-density-pad, 1));
}
#portfolio_page #agenda-list[data-events-layout="journal"]::before {
content: "";
position: absolute;
top: 0.5rem;
bottom: 0.5rem;
left: 0.45rem;
width: 2px;
background: var(--pf-accent);
opacity: 0.4;
}
#portfolio_page #agenda-list[data-events-layout="journal"] .agenda-item {
flex-direction: column;
margin-bottom: 2rem;
padding: 0 0 0 calc(1rem * var(--pf-density-pad, 1));
}
#portfolio_page #agenda-list[data-events-layout="journal"] .agenda-item::before {
content: "";
position: absolute;
top: 0.35rem;
left: -1.95rem;
width: 0.9rem;
height: 0.9rem;
border-radius: 50%;
background: var(--pf-accent);
box-shadow: 0 0 0 4px var(--pf-surface);
}
#portfolio_page #agenda-list[data-events-layout="journal"] .agenda-item .date {
flex-direction: row;
justify-content: flex-start;
gap: calc(0.4em * var(--pf-density-gap, 1));
min-width: 0;
min-height: 0;
margin: 0 0 0.5rem;
padding: 0;
background: transparent;
font-size: var(--portfolios-badge-size, 0.9em);
letter-spacing: 0.06em;
text-transform: var(--portfolios-badge-transform, uppercase);
}
#portfolio_page #agenda-list[data-events-layout="journal"] .agenda-item .date,
#portfolio_page #agenda-list[data-events-layout="journal"] .agenda-item .date p {
color: var(--portfolios-badge-text-color, var(--portfolios-badge-color, var(--pf-accent)));
}
#portfolio_page #agenda-list[data-events-layout="journal"] .agenda-item .agenda-item-open {
top: 0;
right: 0;
bottom: auto;
}
/* Feuillets de calendrier : cartes en grille, page de calendrier en tête */
#portfolio_page #agenda-list[data-events-layout="bento"] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: var(--layout-gap, 20px);
}
#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item {
flex-direction: column;
margin: 0;
padding: 0 0 calc(1.5rem * var(--pf-density-pad, 1));
overflow: hidden;
}
#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item .date {
width: 100%;
min-height: 0;
margin: 0 0 1.25rem;
padding: calc(0.5rem * var(--portfolios-badge-pad, 1)) calc(1rem * var(--portfolios-badge-pad, 1)) calc(1rem * var(--portfolios-badge-pad, 1));
border-radius: var(--portfolios-badge-radius, 0);
}
#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item .date-month {
order: -1;
width: calc(100% + 2rem);
margin: 0 -1rem 0.5rem;
padding: calc(0.3rem * var(--pf-density-pad, 1));
text-align: center;
background: color-mix(in srgb, var(--pf-accent) 70%, var(--pf-ink));
text-transform: uppercase;
letter-spacing: 0.08em;
}
#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item .date-day {
font-size: 3em;
line-height: 1;
}
#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item > ul:not(:first-child) {
padding: 0 calc(1.25rem * var(--pf-density-pad, 1));
}
#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item .agenda-item-open {
right: 1.25rem;
bottom: 1.25rem;
}
/* Affiches : jour en très grand, typographie d'affiche */
#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item {
align-items: stretch;
/* Les thèmes posent contour, ombre ou fond sur l'affiche : le texte ne touche pas ses bords. */
padding: calc(1.25rem * var(--pf-density-pad, 1)) calc(1.5rem * var(--pf-density-pad, 1));
margin-bottom: 2.5rem;
}
#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item .date {
align-items: flex-start;
justify-content: flex-start;
min-width: 12rem;
min-height: 0;
padding: 0;
background: transparent;
}
#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item .date,
#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item .date p {
color: var(--portfolios-badge-text-color, var(--portfolios-badge-color, var(--portfolios-text-main-color, inherit)));
}
#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item .date-day {
font-size: clamp(3.5rem, 9vw, 7rem);
line-height: 0.85;
letter-spacing: -0.04em;
}
#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item .date-month {
text-transform: uppercase;
letter-spacing: 0.12em;
}
#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item ul li:not(.date) :is(h2, h3) {
font-size: calc(var(--portfolios-heading-secondary-size) * 1.4);
line-height: 1.1;
text-transform: var(--portfolios-title-transform, uppercase);
}
#portfolio_page #agenda-list[data-events-layout="feature"] .agenda-item .agenda-item-open {
top: 1.25rem;
right: 0;
bottom: auto;
}
/* Texte seul : pas de pavé daté, date en petite ligne au-dessus du titre */
#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item {
flex-direction: column;
padding: 0;
margin-bottom: 2rem;
}
#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item .date {
flex-direction: row;
justify-content: flex-start;
gap: calc(0.35em * var(--pf-density-gap, 1));
min-width: 0;
min-height: 0;
margin: 0 0 0.35rem;
padding: 0;
background: transparent;
font-size: var(--portfolios-badge-size, 0.85em);
opacity: 0.65;
}
#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item .date,
#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item .date p {
color: var(--portfolios-badge-text-color, var(--portfolios-badge-color, var(--portfolios-text-main-color, inherit)));
font-weight: normal;
}
#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item ul li svg,
#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item .agenda-item-open {
display: none;
}
#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item ul li:not(.date) {
margin-bottom: 0.25rem;
}
#portfolio_page #agenda-list[data-events-layout="minimal"] .agenda-item .agenda-item-description {
font-weight: normal;
margin-bottom: 0.25rem;
}
@media (max-width: 1100px) {
/* Empilé : le centrage vertical de l'ordinateur (align-items) centrerait tout à l'horizontale. Aligné à
gauche, centré seulement quand le titre de la section l'est. */
#portfolio_page #agenda-list:is([data-events-layout="list"], [data-events-layout="feature"]) .agenda-item {
flex-direction: column;
align-items: stretch;
}
#portfolio_page #agenda-list:is([data-events-layout="list"], [data-events-layout="feature"]) .agenda-item .date {
justify-content: flex-start;
min-width: 0;
margin: 0 0 0.5rem;
}
#portfolio_page section:has(.title-align-center) #agenda-list:is([data-events-layout="list"], [data-events-layout="feature"]) .agenda-item {
align-items: center;
text-align: center;
}
#portfolio_page section:has(.title-align-center) #agenda-list:is([data-events-layout="list"], [data-events-layout="feature"]) .agenda-item :is(.date, ul li:not(.date)) {
justify-content: center;
}
}
}
/* assets/css/public/design/elements/services.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — services (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
7. Services
Balisage : .services-slider[data-services-layout] > article.services-slider-item(.populare)
> .service-item > .service-badge? + .service-header + .service-body + .service-footer
(`cards` = rendu historique, services.css)
========================================================================== */
/* Gabarits à une offre par ligne */
#portfolio_page .services-slider:is([data-services-layout="list"], [data-services-layout="index"], [data-services-layout="feature"]) {
display: flex;
flex-direction: column;
gap: var(--layout-gap, 20px);
}
#portfolio_page .services-slider:is([data-services-layout="list"], [data-services-layout="index"], [data-services-layout="feature"]) > * {
flex: 0 0 auto;
width: 100%;
}
/* Lignes : nom et prix à gauche, contenu au centre, bouton à droite */
#portfolio_page .services-slider[data-services-layout="list"] .service-item {
display: grid;
grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr) auto;
align-items: center;
gap: calc(2rem * var(--pf-density-gap, 1));
}
#portfolio_page .services-slider[data-services-layout="list"] .service-badge {
grid-column: 1 / -1;
justify-self: start;
margin-bottom: 0;
}
#portfolio_page .services-slider[data-services-layout="list"] :is(.service-header, .service-body) {
margin: 0;
padding: 0;
border: 0;
}
#portfolio_page .services-slider[data-services-layout="list"] .service-footer {
margin: 0;
}
/* Carte de restaurant : nom …… prix, contenu en petit, sans cadre */
#portfolio_page .services-slider[data-services-layout="index"] {
gap: calc(1.5rem * var(--pf-density-gap, 1));
}
#portfolio_page .services-slider[data-services-layout="index"] .service-item {
padding: 0;
}
#portfolio_page .services-slider[data-services-layout="index"] .service-header {
display: flex;
align-items: baseline;
gap: calc(0.75rem * var(--pf-density-gap, 1));
margin: 0 0 0.35rem;
padding: 0;
border: 0;
}
#portfolio_page .services-slider[data-services-layout="index"] .service-header::after {
content: "";
order: 1;
flex: 1;
border-bottom: max(2px, var(--pf-rule-width)) dotted currentColor;
opacity: 0.4;
}
#portfolio_page .services-slider[data-services-layout="index"] .service-title {
order: 0;
margin: 0;
}
#portfolio_page .services-slider[data-services-layout="index"] .pricing-container {
order: 2;
}
#portfolio_page .services-slider[data-services-layout="index"] .price-main {
font-size: calc(var(--portfolios-font-size-base) * 1.3);
}
#portfolio_page .services-slider[data-services-layout="index"] .service-body {
margin-bottom: 0.5rem;
font-size: calc(var(--portfolios-font-size-base) * 0.9);
opacity: 0.8;
}
#portfolio_page .services-slider[data-services-layout="index"] .features-list {
display: flex;
flex-wrap: wrap;
gap: 0 calc(1.25rem * var(--pf-density-gap, 1));
}
#portfolio_page .services-slider[data-services-layout="index"] .feature-item {
margin-bottom: 0.25rem;
}
#portfolio_page .services-slider[data-services-layout="index"] .service-badge {
margin-bottom: 0.5rem;
padding: calc(2px * var(--portfolios-badge-pad, 1)) calc(10px * var(--portfolios-badge-pad, 1));
}
#portfolio_page .services-slider[data-services-layout="index"] .full-width-btn {
display: inline-block;
width: auto;
padding: calc(8px * var(--pf-density-pad, 1)) calc(18px * var(--pf-density-pad, 1));
}
/* Pleine largeur : bandeau par offre, prix en très grand */
#portfolio_page .services-slider[data-services-layout="feature"] .service-item {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: calc(1rem * var(--pf-density-gap, 1)) calc(3rem * var(--pf-density-gap, 1));
/* Marge latérale seulement si la fiche est cadrée (--pf-card-framed) : sinon le texte s'aligne sur le titre. */
padding: calc(calc(var(--pf-spacing-unit) * 1.75) * var(--pf-density-pad, 1))
calc(calc(var(--pf-spacing-unit) * 1.75) * var(--pf-density-pad, 1) * var(--pf-card-framed, 0));
}
#portfolio_page .services-slider[data-services-layout="feature"] .service-badge {
grid-column: 1 / -1;
justify-self: start;
margin-bottom: 0;
}
#portfolio_page .services-slider[data-services-layout="feature"] .service-header {
grid-row: span 2;
margin: 0;
padding: 0;
border: 0;
}
#portfolio_page .services-slider[data-services-layout="feature"] .service-title {
font-size: calc(var(--portfolios-font-size-base) * 2);
}
#portfolio_page .services-slider[data-services-layout="feature"] .price-main {
font-size: calc(var(--portfolios-font-size-base) * 3);
}
#portfolio_page .services-slider[data-services-layout="feature"] .service-body {
margin: 0;
}
/* Minimal : sans fond ni cadre, centré */
#portfolio_page .services-slider[data-services-layout="minimal"] .service-item {
padding: calc(0.5rem * var(--pf-density-pad, 1)) 0;
text-align: center;
}
#portfolio_page .services-slider[data-services-layout="minimal"] .service-header {
text-align: center;
}
#portfolio_page .services-slider[data-services-layout="minimal"] :is(.pricing-container, .feature-item) {
justify-content: center;
}
#portfolio_page .services-slider[data-services-layout="minimal"] .service-badge {
align-self: center;
}
@media (max-width: 1100px) {
/* Une offre par ligne sur tablette et mobile, quel que soit le gabarit. */
/* display / flex : l'aperçu mobile de l'éditeur tourne dans une fenêtre large, où services.css
passe la liste en flex sur trois colonnes. */
#portfolio_page .services-slider {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page .services-slider > * {
flex: none;
width: auto;
max-width: none;
}
/* Empilé : aligné à gauche (le centrage vertical de l'ordinateur centrait tout), centré avec
« Alignement : centré » des offres ; la pastille « Populaire » suit. */
#portfolio_page .services-slider:is([data-services-layout="list"], [data-services-layout="feature"]) .service-item {
display: flex;
flex-direction: column;
align-items: stretch;
gap: calc(1rem * var(--pf-density-gap, 1));
}
#portfolio_page .services-slider.services-slider--align-center:is([data-services-layout="list"], [data-services-layout="feature"]) .service-item {
align-items: center;
text-align: center;
}
#portfolio_page .services-slider.services-slider--align-center:is([data-services-layout="list"], [data-services-layout="feature"]) .service-badge {
align-self: center;
justify-self: center;
}
}
}
/* assets/css/public/design/elements/works.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — works (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
12. Œuvres — [data-works-layout] sur chaque .pf-thumbs (productions, livres,
discographie, projets, albums photo) : un seul design pour toutes les œuvres.
Balisage : .pf-thumbs > a.(vertical|horizontal|square)-grid-item > .poster + .(…)-infos
(`grid` = rendu historique : grid.css, un format par type d'œuvre)
========================================================================== */
/* Orientation préservée dans tous les thèmes : une œuvre verticale (affiche, livre) reste verticale,
une horizontale (projet) reste horizontale, un carré (album) reste carré. Mêmes formats que la grille
historique (grid.css : 2/3, 2/1, 1/1). --pf-work-thumb = largeur d'une vignette en ligne (liste, journal).
Colonnes : toujours celles de grid.css par palier et par orientation (--_thumbs), aucune mise en page
n'en ajoute. Les mises en page ne changent que la disposition, jamais le format ni le nombre par ligne. */
#portfolio_page .pf-thumbs[data-works-layout]:where(:not([data-works-layout="grid"])) {
--pf-work-ratio: 2 / 3;
--pf-work-thumb: 4.5rem;
}
#portfolio_page .pf-thumbs--landscape[data-works-layout]:where(:not([data-works-layout="grid"])) {
--pf-work-ratio: 2 / 1;
--pf-work-thumb: 9rem;
}
#portfolio_page .pf-thumbs--square[data-works-layout]:where(:not([data-works-layout="grid"])) {
--pf-work-ratio: 1 / 1;
--pf-work-thumb: 6rem;
}
/* Grille, œuvres verticales : une par ligne sur mobile (deux affiches côte à côte étaient trop petites). */
#portfolio_page .pf-thumbs--portrait[data-works-layout="grid"] {
--thumbs-xs: 1;
}
/* Hors grille historique : la vignette prend sa hauteur du format de son type d'œuvre. */
#portfolio_page .pf-thumbs[data-works-layout]:where(:not([data-works-layout="grid"])) > a {
height: auto;
padding: 0;
aspect-ratio: var(--pf-work-ratio);
}
/* Texte posé à côté de l'image (liste, titres seuls) : couleurs du thème, pas celles de la surimpression. */
#portfolio_page .pf-thumbs:is([data-works-layout="list"], [data-works-layout="minimal"]) :is(.vertical-infos, .horizontal-infos, .square-infos) {
--portfolios-thumbnail-overlay-title-color: var(--pf-ink);
--portfolios-thumbnail-overlay-description-color: color-mix(in srgb, var(--pf-ink) 70%, transparent);
--portfolios-thumbnail-overlay-text-shadow: none;
position: static;
background: none;
}
/* Liste illustrée : vignette à gauche, titre et sous-titre à droite */
#portfolio_page .pf-thumbs[data-works-layout="list"] {
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page .pf-thumbs[data-works-layout="list"] > a {
display: grid;
grid-template-columns: var(--pf-work-thumb) minmax(0, 1fr);
align-items: center;
aspect-ratio: auto;
}
/* Vignette au format de l'œuvre (verticale étroite, horizontale large). */
#portfolio_page .pf-thumbs[data-works-layout="list"] > a > .poster {
position: relative;
grid-row: 1;
align-self: center;
height: auto;
aspect-ratio: var(--pf-work-ratio);
}
#portfolio_page .pf-thumbs[data-works-layout="list"] :is(.vertical-infos, .horizontal-infos, .square-infos) {
grid-column: 2;
grid-row: 1;
padding: calc(1rem * var(--pf-density-pad, 1)) calc(1.25rem * var(--pf-density-pad, 1));
}
/* Mosaïque : tailles variées, sans marge entre les vignettes */
#portfolio_page .pf-thumbs[data-works-layout="mosaic"] {
grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: auto;
grid-auto-flow: dense;
gap: calc(4px * var(--pf-density-gap, 1));
}
/* Une vignette en grand toutes les sept : 2 colonnes × 2 rangées, donc même format que les autres
(une vignette sur 2 colonnes et 1 rangée écraserait une affiche ou étirerait un projet). */
#portfolio_page .pf-thumbs[data-works-layout="mosaic"] > a:nth-child(7n + 1) {
grid-column: span 2;
grid-row: span 2;
/* Format propre (pas « auto ») : seule ou presque seule, la vignette ne dépend pas des rangées voisines
(sinon elle s'écrase à quelques pixels de haut). */
aspect-ratio: var(--pf-work-ratio);
}
/* Défilement horizontal aimanté */
#portfolio_page .pf-thumbs[data-works-layout="carousel"] {
display: flex;
gap: var(--layout-gap, 20px);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
scrollbar-width: thin;
}
/* Autant de vignettes visibles que de colonnes de la grille. */
#portfolio_page .pf-thumbs[data-works-layout="carousel"] > a {
flex: 0 0 calc((100% - (var(--_thumbs) - 1) * var(--layout-gap, 20px)) / var(--_thumbs));
scroll-snap-align: start;
}
#portfolio_page [id^="home-section-"] .pf-thumbs[data-works-layout="carousel"] > a {
display: block;
}
/* Bento : grille à tailles variées, avec les articles (section 4). */
/* Grand format : une œuvre par bandeau */
/* Œuvres horizontales : une par ligne, au format de leur type (2/1, comme la grille historique) ;
verticales et carrées : grands formats, une colonne de moins que la grille. */
#portfolio_page .pf-thumbs[data-works-layout="feature"] {
grid-template-columns: repeat(max(1, calc(var(--_thumbs) - 1)), minmax(0, 1fr));
gap: calc(2rem * var(--pf-density-gap, 1));
}
#portfolio_page .pf-thumbs--landscape[data-works-layout="feature"] {
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page .pf-thumbs[data-works-layout="feature"] :is(.vertical-infos, .horizontal-infos, .square-infos) {
padding: calc(3rem * var(--pf-density-pad, 1)) calc(2rem * var(--pf-density-pad, 1)) calc(2rem * var(--pf-density-pad, 1));
}
#portfolio_page .pf-thumbs[data-works-layout="feature"] :is(.vertical-infos, .horizontal-infos, .square-infos) h4 {
font-size: calc(var(--portfolios-heading-secondary-size, 14px) * 2);
line-height: 1.1;
}
/* Polaroïd : cadre couleur des contenus (+ épaisseur de l'utilisateur), légère rotation */
/* Format de l'œuvre gardé dans le cadre ; colonnes réduites pour les carrés seulement
(horizontales et verticales gardent les colonnes de leur type : 3 puis 4 pour les verticales). */
#portfolio_page .pf-thumbs[data-works-layout="polaroid"] {
gap: calc(2rem * var(--pf-density-gap, 1));
padding: calc(0.75rem * var(--pf-density-pad, 1));
}
#portfolio_page .pf-thumbs--square[data-works-layout="polaroid"] {
--thumbs-xs: 2;
--thumbs-sm: 3;
--thumbs-md: 3;
--thumbs-lg: 4;
--thumbs-xl: 4;
}
/* Le cadre (bordures épaisses, bas plus large) mangerait le format : il est porté par l'image. */
#portfolio_page .pf-thumbs[data-works-layout="polaroid"] > a {
aspect-ratio: auto;
}
#portfolio_page .pf-thumbs[data-works-layout="polaroid"] > a > .poster {
position: relative;
height: auto;
aspect-ratio: var(--pf-work-ratio);
}
#portfolio_page .pf-thumbs[data-works-layout="polaroid"] > a {
background-clip: padding-box;
transition: rotate 0.2s ease;
}
#portfolio_page .pf-thumbs[data-works-layout="polaroid"] > a:nth-child(odd) {
rotate: -1deg;
}
#portfolio_page .pf-thumbs[data-works-layout="polaroid"] > a:nth-child(even) {
rotate: 1deg;
}
#portfolio_page .pf-thumbs[data-works-layout="polaroid"] > a:hover {
rotate: 0deg;
}
/* Planche contact : petites vignettes serrées, titre au survol */
#portfolio_page .pf-thumbs[data-works-layout="index"] {
grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
gap: calc(4px * var(--pf-density-gap, 1));
padding: calc(8px * var(--pf-density-pad, 1));
background: var(--pf-ink);
}
/* Index numéroté : numéro sur chaque vignette, titre toujours lisible. */
#portfolio_page .pf-thumbs[data-works-layout="index"] {
counter-reset: pf-work;
}
#portfolio_page .pf-thumbs[data-works-layout="index"] > a {
position: relative;
isolation: isolate;
counter-increment: pf-work;
}
#portfolio_page .pf-thumbs[data-works-layout="index"] > a::before {
content: counter(pf-work, decimal-leading-zero);
position: absolute;
top: 0.4rem;
left: 0.4rem;
z-index: 10;
padding: calc(0.05rem * var(--pf-density-pad, 1)) calc(0.4rem * var(--pf-density-pad, 1));
border-radius: var(--pf-radius-inner);
background: var(--pf-ink);
color: var(--pf-on-accent);
font-size: 0.8rem;
font-weight: 700;
line-height: 1.4;
}
/* Titres seuls : liste typographique, filets entre les œuvres */
#portfolio_page .pf-thumbs[data-works-layout="minimal"] {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
#portfolio_page .pf-thumbs[data-works-layout="minimal"] > a {
aspect-ratio: auto;
padding: calc(1rem * var(--pf-density-pad, 1)) 0;
}
#portfolio_page .pf-thumbs[data-works-layout="minimal"] > a > :is(.poster, .no-illustration__icon) {
display: none;
}
#portfolio_page .pf-thumbs[data-works-layout="minimal"] > a.no-illustration {
background-image: none;
}
#portfolio_page .pf-thumbs[data-works-layout="minimal"] :is(.vertical-infos, .horizontal-infos, .square-infos) {
padding: 0;
}
#portfolio_page .pf-thumbs[data-works-layout="minimal"] :is(.vertical-infos, .horizontal-infos, .square-infos) h4 {
font-size: calc(var(--portfolios-heading-secondary-size, 14px) * 1.4);
}
@media (max-width: 1100px) {
/* Grande vignette (2 × 2) seulement s'il y a au moins 3 colonnes : sinon elle remplit la ligne
et crée une colonne fantôme quand la grille n'en a qu'une. */
#portfolio_page .pf-thumbs--landscape[data-works-layout="mosaic"] > a:nth-child(7n + 1) {
grid-column: auto;
grid-row: auto;
aspect-ratio: var(--pf-work-ratio);
}
#portfolio_page .pf-thumbs--landscape[data-works-layout="feature"] {
--pf-work-ratio: 16 / 9;
grid-template-columns: minmax(0, 1fr);
}
}
}
/* assets/css/public/design/elements/catalogue.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — catalogue (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
14. Catalogue commun — compléments
Tous les éléments de contenu proposent les mêmes styles (portfolios_matrix_content_styles()).
Ici, les combinaisons qui n'avaient pas encore de rendu propre. Familles :
- cartes : polaroid (cadre clair, légère rotation) ; l'habillage vient du thème (themes//cards.css) ;
- dispositions : magazine (premier élément en grand), mosaic (tailles variées), bento (tuiles égales),
feature (un par bandeau), carousel (défilement), list / journal / index (lignes) ;
- texte : minimal, reveal (média montré au survol).
Fond des cartes = « Couleur de fond des contenus » ; titre / texte = --pf-title / --pf-text (section 15).
========================================================================== */
/* --- Articles ------------------------------------------------------------ */
#portfolio_page .blog-list[data-articles-layout="polaroid"] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: calc(1.5rem * var(--pf-density-gap, 1));
}
/* Magazine, défilement (cartes à fond et contour) : le texte ne touche pas le bord de la carte.
Éditorial dessine un magazine sans cadre : sa feuille de thème reprend la marge. */
#portfolio_page .blog-list:is([data-articles-layout="magazine"], [data-articles-layout="carousel"]) .article-blog-infos {
padding: calc(1rem * var(--pf-density-pad, 1)) calc(1.1rem * var(--pf-density-pad, 1)) calc(1.2rem * var(--pf-density-pad, 1));
}
/* « Couleur de la section voisine » : les cartes d'articles prennent le fond de l'autre
alternance de section (paire ↔ impaire), pour un contraste entre la carte et la section. */
#portfolio_page:has(header[data-articles-neighbor="1"]) .section-bg-odd .blog-list {
--pf-surface: var(--portfolios-section-color-pair, var(--portfolios-theme-bg-alt, var(--portfolios-bg-alt-color, #e2e2e2)));
}
#portfolio_page:has(header[data-articles-neighbor="1"]) .section-bg-pair .blog-list {
--pf-surface: var(--portfolios-section-color-odd, var(--portfolios-theme-bg-main, var(--portfolios-bg-main-color, #fafafa)));
}
/* Image hors carte (à côté du texte, plein bord, sans fond) : arrondie aux quatre coins. Le rendu
tuile (thumbnails/main.css) n'arrondit que le haut, prévu pour un texte posé dessous dans la carte. */
#portfolio_page .blog-list:is([data-articles-layout="list"], [data-articles-layout="mosaic"], [data-articles-layout="feature"], [data-articles-layout="index"], [data-articles-layout="journal"], [data-articles-layout="reveal"]) .thumbnail-tile .thumb,
#portfolio_page .blog-list[data-articles-layout="magazine"] > :first-child .thumbnail-tile .thumb {
border-radius: var(--pf-radius);
}
/* Polaroïd : image posée dans le cadre (pas contre le bord) : arrondie aux quatre coins. */
#portfolio_page .blog-list[data-articles-layout="polaroid"] .thumbnail-tile .thumb {
border-radius: var(--pf-radius-inner);
}
/* Informations : même règle d'arrondi que les articles. Image à côté du texte → quatre coins ;
grand format → image contre le bord, rognée par la carte (overflow: hidden), sans arrondi propre. */
#portfolio_page .informations-list:is([data-informations-layout="list"], [data-informations-layout="journal"], [data-informations-layout="index"], [data-informations-layout="reveal"]) .information-item__illustration,
#portfolio_page .informations-list[data-informations-layout="magazine"] .information-item:first-child .information-item__illustration {
border-radius: var(--pf-radius);
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item__illustration {
border-radius: 0;
}
/* Page article : l'aside « Autres articles » reste sur une colonne. */
#portfolio_page #blog-about .blog-list[data-articles-layout] {
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page .blog-list[data-articles-layout="polaroid"] .thumbnail-tile {
padding: calc(0.75rem * var(--pf-density-pad, 1)) calc(0.75rem * var(--pf-density-pad, 1)) 0;
rotate: -1.5deg;
}
#portfolio_page .blog-list[data-articles-layout="polaroid"] > :nth-child(even) .thumbnail-tile {
rotate: 1.5deg;
}
#portfolio_page .blog-list[data-articles-layout="polaroid"] .article-blog-infos {
padding: calc(0.9rem * var(--pf-density-pad, 1)) calc(0.25rem * var(--pf-density-pad, 1)) calc(1.1rem * var(--pf-density-pad, 1));
}
/* --- Œuvres -------------------------------------------------------------- */
#portfolio_page .pf-thumbs:is([data-works-layout="journal"], [data-works-layout="reveal"]) :is(.vertical-infos, .horizontal-infos, .square-infos) {
--portfolios-thumbnail-overlay-title-color: var(--pf-ink);
--portfolios-thumbnail-overlay-description-color: var(--pf-ink);
}
#portfolio_page .pf-thumbs:is([data-works-layout="journal"], [data-works-layout="reveal"]) :is(.vertical-infos, .horizontal-infos, .square-infos) {
--portfolios-thumbnail-overlay-text-shadow: none;
position: static;
background: none;
padding: calc(0.9rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
}
/* Bento : l'image remplit la tuile, la légende est une étiquette posée dans un coin
(teinte de la tuile dépolie, section 15) : titre, catégorie en dessous. */
#portfolio_page .pf-thumbs[data-works-layout="bento"] > a {
position: relative;
display: block;
height: auto;
aspect-ratio: var(--pf-work-ratio);
overflow: hidden;
padding: 0;
}
#portfolio_page .pf-thumbs[data-works-layout="bento"] > a > .poster {
position: absolute;
inset: 0;
height: 100%;
aspect-ratio: auto;
border-radius: inherit;
}
#portfolio_page .pf-thumbs[data-works-layout="bento"] :is(.vertical-infos, .horizontal-infos, .square-infos) {
--portfolios-thumbnail-overlay-title-color: var(--pf-title);
--portfolios-thumbnail-overlay-description-color: var(--pf-text);
--portfolios-thumbnail-overlay-text-shadow: none;
position: absolute;
top: auto;
right: auto;
left: 0.6rem;
bottom: 0.6rem;
width: auto;
max-width: calc(100% - 1.2rem);
padding: calc(0.5rem * var(--pf-density-pad, 1)) calc(0.85rem * var(--pf-density-pad, 1)) calc(0.55rem * var(--pf-density-pad, 1));
border-radius: var(--pf-radius-inner);
background: color-mix(in srgb, var(--pf-tile, var(--pf-surface)) 88%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
#portfolio_page .pf-thumbs[data-works-layout="bento"] :is(.vertical-infos, .horizontal-infos, .square-infos) h4 {
font-weight: 700;
}
#portfolio_page .pf-thumbs[data-works-layout="bento"] > a:nth-child(7n + 1) :is(.vertical-infos, .horizontal-infos, .square-infos) h4 {
font-size: 1.3em;
}
/* Une seule colonne (petit mobile) : pas de vignette 2 × 2, elle créerait une colonne fantôme. */
@media (max-width: 529px) {
#portfolio_page .pf-thumbs--portrait[data-works-layout="mosaic"] > a:nth-child(7n + 1),
#portfolio_page .pf-thumbs:is(.pf-thumbs--landscape, .pf-thumbs--square)[data-works-layout="mosaic"] > a:nth-child(7n + 1),
#portfolio_page .pf-thumbs[data-works-layout="bento"] > a:nth-child(7n + 1),
#portfolio_page .pf-thumbs:is(.pf-thumbs--landscape, .pf-thumbs--square)[data-works-layout="magazine"] > a:first-child {
grid-column: auto;
grid-row: auto;
aspect-ratio: var(--pf-work-ratio);
}
}
/* Magazine : une œuvre en grand, les suivantes en grille */
/* Rangées au format des œuvres ; la première sur 2 × 2 garde donc le même format, en grand. */
#portfolio_page .pf-thumbs[data-works-layout="magazine"] {
grid-template-columns: repeat(var(--_thumbs), minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: auto;
grid-auto-flow: dense;
gap: var(--layout-gap, 20px);
}
#portfolio_page .pf-thumbs[data-works-layout="magazine"] > a:first-child {
grid-column: span 2;
grid-row: span 2;
/* Format propre (voir mosaïque) : ne s'écrase pas avec une seule œuvre. */
aspect-ratio: var(--pf-work-ratio);
}
/* Journal / survol : une œuvre par ligne */
#portfolio_page .pf-thumbs:is([data-works-layout="journal"], [data-works-layout="reveal"]) {
grid-template-columns: minmax(0, 1fr);
gap: 0;
counter-reset: pf-work;
}
#portfolio_page .pf-thumbs:is([data-works-layout="journal"], [data-works-layout="reveal"]) > a {
display: grid;
align-items: center;
aspect-ratio: auto;
counter-increment: pf-work;
}
#portfolio_page .pf-thumbs[data-works-layout="journal"] > a {
grid-template-columns: 4rem var(--pf-work-thumb) minmax(0, 1fr);
gap: calc(1rem * var(--pf-density-gap, 1));
padding: calc(0.75rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
}
#portfolio_page .pf-thumbs[data-works-layout="journal"] > a::before {
content: counter(pf-work, decimal-leading-zero);
color: var(--pf-accent);
font-size: 1.6em;
font-weight: 700;
}
#portfolio_page .pf-thumbs[data-works-layout="journal"] > a > .poster {
position: relative;
height: auto;
aspect-ratio: var(--pf-work-ratio);
border-radius: var(--pf-radius-inner);
}
#portfolio_page .pf-thumbs:is([data-works-layout="journal"], [data-works-layout="reveal"]) :is(.vertical-infos, .horizontal-infos, .square-infos) {
position: static;
padding: 0;
text-align: start;
}
/* Survol : petite vignette toujours visible (plus de ligne sans image). */
#portfolio_page .pf-thumbs[data-works-layout="reveal"] > a > .poster {
position: relative;
inset: auto;
display: block;
height: auto;
aspect-ratio: var(--pf-work-ratio);
border-radius: var(--pf-radius-inner);
}
#portfolio_page .pf-thumbs[data-works-layout="reveal"] {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page .pf-thumbs[data-works-layout="reveal"] > a {
position: relative;
display: grid;
width: auto;
grid-template-columns: var(--pf-work-thumb) minmax(0, 1fr);
gap: calc(1.25rem * var(--pf-density-gap, 1));
padding: calc(1.1rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
}
#portfolio_page .pf-thumbs[data-works-layout="reveal"] > a > .poster {
width: 100%;
transform-origin: left center;
transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
#portfolio_page .pf-thumbs[data-works-layout="reveal"] :is(.vertical-infos, .horizontal-infos, .square-infos) h4 {
font-size: calc(var(--portfolios-heading-secondary-size, 14px) * 1.6);
}
/* Survol : la vignette s'agrandit et passe au-dessus de la ligne. */
#portfolio_page .pf-thumbs[data-works-layout="reveal"] > a:is(:hover, :focus-visible) > .poster {
z-index: 2;
scale: 1.9;
box-shadow: var(--pf-drop-shadow);
}
/* --- Images -------------------------------------------------------------- */
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="list"], [data-images-layout="feature"]) {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
gap: calc(1.5rem * var(--pf-density-gap, 1));
}
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="list"], [data-images-layout="feature"]) > a {
width: auto;
height: auto;
padding: 0;
aspect-ratio: var(--pf-card-ratio);
}
/* Carrés : « grand format » = deux par ligne, « liste » = une colonne étroite (jamais un bandeau). */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="feature"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="list"] {
max-width: min(100%, 32rem);
margin-inline: auto;
}
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="magazine"], [data-images-layout="journal"], [data-images-layout="minimal"], [data-images-layout="reveal"]) {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: none;
grid-auto-rows: auto;
gap: calc(14px * var(--pf-density-gap, 1));
}
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="magazine"], [data-images-layout="journal"], [data-images-layout="minimal"], [data-images-layout="reveal"]) > a {
width: auto;
height: auto;
padding: 0;
background-size: cover;
background-position: center;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="magazine"] > a:first-child {
grid-column: span 2;
grid-row: span 2;
}
/* Cellules carrées : la hauteur suit la largeur de colonne (image recadrée en cover),
les tuiles étendues gardent un multiple du carré. */
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="mosaic"], [data-images-layout="bento"], [data-images-layout="magazine"], [data-images-layout="journal"], [data-images-layout="minimal"], [data-images-layout="reveal"]) > a {
aspect-ratio: 1 / 1;
height: auto;
background-size: cover;
background-position: center;
}
/* Journal : numéro de planche sur chaque image */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="journal"] {
counter-reset: pf-image;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="journal"] > a {
position: relative;
counter-increment: pf-image;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="journal"] > a::before {
content: counter(pf-image, decimal-leading-zero);
position: absolute;
left: 0.6rem;
bottom: 0.5rem;
padding: calc(0.15rem * var(--pf-density-pad, 1)) calc(0.5rem * var(--pf-density-pad, 1));
border-radius: var(--pf-radius-inner);
background: var(--pf-surface);
color: var(--pf-title);
font-weight: 700;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="minimal"] {
gap: calc(2px * var(--pf-density-gap, 1));
}
/* Survol : image toujours visible, elle s'avance au survol (zoom dans le cadre + ombre). */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="reveal"] > a {
background-size: 100%;
transition: background-size 0.4s ease, box-shadow 0.3s ease;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="reveal"] > a:is(:hover, :focus-visible) {
background-size: 112%;
box-shadow: var(--pf-drop-shadow);
}
/* --- Prix ---------------------------------------------------------------- */
#portfolio_page .awards-list[data-awards-layout="magazine"] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(1rem * var(--pf-density-gap, 1));
}
#portfolio_page .awards-list[data-awards-layout="magazine"] .award {
display: flex;
flex-direction: column;
gap: calc(0.5rem * var(--pf-density-gap, 1));
padding: calc(1.25rem * var(--pf-density-pad, 1)) calc(1.4rem * var(--pf-density-pad, 1));
}
#portfolio_page .awards-list[data-awards-layout="magazine"] .award:first-child {
grid-column: 1 / -1;
padding: calc(2rem * var(--pf-density-pad, 1));
}
#portfolio_page .awards-list[data-awards-layout="magazine"] .award:first-child .award__name {
font-size: 1.8em;
}
#portfolio_page .awards-list[data-awards-layout="magazine"] .award__index {
color: var(--pf-title);
font-weight: 700;
}
#portfolio_page .awards-list[data-awards-layout="magazine"] .award__logo {
max-height: 3.5rem;
width: auto;
align-self: flex-start;
}
/* Texte seul : les prix à la suite, séparés par un point */
#portfolio_page .awards-list[data-awards-layout="minimal"] {
display: flex;
flex-wrap: wrap;
gap: calc(0.25rem * var(--pf-density-gap, 1)) 0;
}
#portfolio_page .awards-list[data-awards-layout="minimal"] :is(.award__index, .award__logo) {
display: none;
}
#portfolio_page .awards-list[data-awards-layout="minimal"] .award:not(:last-child)::after {
content: "·";
margin-inline: 0.75rem;
opacity: 0.6;
}
/* Survol : noms en grand, logo révélé au survol */
#portfolio_page .awards-list[data-awards-layout="reveal"] .award {
position: relative;
display: flex;
align-items: baseline;
gap: calc(1rem * var(--pf-density-gap, 1));
padding: calc(0.9rem * var(--pf-density-pad, 1)) 0;
}
#portfolio_page .awards-list[data-awards-layout="reveal"] .award__name {
font-size: 1.6em;
}
#portfolio_page .awards-list[data-awards-layout="reveal"] .award__logo {
position: absolute;
right: 0;
top: 50%;
max-height: 4rem;
width: auto;
opacity: 0;
transform: translateY(-50%);
transition: opacity 0.25s ease;
}
#portfolio_page .awards-list[data-awards-layout="reveal"] .award:hover .award__logo {
opacity: 1;
}
/* --- Services ------------------------------------------------------------ */
#portfolio_page .services-slider:is([data-services-layout="magazine"], [data-services-layout="mosaic"], [data-services-layout="bento"], [data-services-layout="polaroid"]) {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--layout-gap, 20px);
}
#portfolio_page .services-slider:is([data-services-layout="magazine"], [data-services-layout="mosaic"], [data-services-layout="bento"], [data-services-layout="polaroid"]) > * {
flex: none;
width: auto;
max-width: none;
}
/* Magazine : la première offre en bandeau, les autres dessous */
#portfolio_page .services-slider[data-services-layout="magazine"] > :first-child {
grid-column: 1 / -1;
}
#portfolio_page .services-slider[data-services-layout="magazine"] > :first-child .service-item {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
align-items: center;
gap: calc(1.5rem * var(--pf-density-gap, 1));
}
/* Deux offres seulement (ordinateur) : deux colonnes égales, sans bandeau. */
@media (min-width: 1101px) {
#portfolio_page .services-slider[data-services-layout="magazine"]:has(> :nth-child(2):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#portfolio_page .services-slider[data-services-layout="magazine"]:has(> :nth-child(2):last-child) > :first-child {
grid-column: auto;
}
#portfolio_page .services-slider[data-services-layout="magazine"]:has(> :nth-child(2):last-child) > :first-child .service-item {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
}
/* Mosaïque : l'offre populaire prend deux lignes */
#portfolio_page .services-slider[data-services-layout="mosaic"] {
grid-auto-flow: dense;
}
#portfolio_page .services-slider[data-services-layout="mosaic"] > .populare {
grid-row: span 2;
}
#portfolio_page .services-slider[data-services-layout="mosaic"] > .populare .service-item {
height: 100%;
}
#portfolio_page .services-slider[data-services-layout="bento"] .service-item {
height: 100%;
}
#portfolio_page .services-slider[data-services-layout="polaroid"] .service-item {
padding-bottom: calc(2rem * var(--pf-density-pad, 1));
rotate: -1.2deg;
}
#portfolio_page .services-slider[data-services-layout="polaroid"] > :nth-child(even) .service-item {
rotate: 1.2deg;
}
/* Journal / survol : une offre par ligne */
#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) {
display: flex;
flex-direction: column;
gap: 0;
counter-reset: pf-service;
}
#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) > * {
flex: none;
width: auto;
max-width: none;
}
#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .service-item {
display: grid;
grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr) auto;
align-items: center;
gap: calc(1.25rem * var(--pf-density-gap, 1));
padding: calc(1.1rem * var(--pf-density-pad, 1)) calc(1.25rem * var(--pf-density-pad, 1));
counter-increment: pf-service;
}
#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .service-item::before {
content: counter(pf-service, decimal-leading-zero);
color: var(--pf-accent);
font-size: 1.5em;
font-weight: 700;
}
/* Badge « Populaire » sur sa propre ligne, au-dessus du titre (dans la grille : il ne peut pas déborder sur le
texte, quelle que soit sa taille), large comme son texte ; le numéro couvre les deux lignes. */
#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .service-badge {
grid-column: 2 / -1;
grid-row: 1;
justify-self: start;
margin: 0;
transform: none;
}
#portfolio_page .services-slider[data-services-layout="journal"] .service-item:has(> .service-badge)::before {
grid-row: 1 / span 2;
}
#portfolio_page .services-slider[data-services-layout="reveal"] .service-badge {
grid-column: 1 / -1;
}
/* Une offre par ligne : le filet sépare les lignes entières (pas seulement le titre), le bouton reste centré dans
la sienne, au-dessus du filet. */
#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .service-header {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .service-item {
border-bottom: var(--pf-rule-width) solid var(--pf-rule-color);
}
#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .full-width-btn {
width: auto;
white-space: nowrap;
}
#portfolio_page .services-slider[data-services-layout="reveal"] .service-item::before {
content: none;
}
#portfolio_page .services-slider[data-services-layout="reveal"] .service-item {
grid-template-columns: minmax(0, 1fr) auto;
}
#portfolio_page .services-slider[data-services-layout="reveal"] .service-body {
display: none;
grid-column: 1 / -1;
}
#portfolio_page .services-slider[data-services-layout="reveal"] .service-item:is(:hover, :focus-within) .service-body {
display: block;
}
#portfolio_page .services-slider[data-services-layout="reveal"] .service-title {
font-size: 1.5em;
}
/* Défilement horizontal */
#portfolio_page .services-slider[data-services-layout="carousel"] {
display: flex;
flex-wrap: nowrap;
gap: var(--layout-gap, 20px);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
scrollbar-width: thin;
}
#portfolio_page .services-slider[data-services-layout="carousel"] > * {
flex: 0 0 clamp(15rem, 30vw, 21rem);
max-width: none;
scroll-snap-align: start;
}
/* --- Agenda -------------------------------------------------------------- */
#portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"], [data-events-layout="polaroid"]) {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--layout-gap, 20px);
}
#portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"], [data-events-layout="polaroid"], [data-events-layout="carousel"]) .agenda-item {
flex-direction: column;
gap: calc(1rem * var(--pf-density-gap, 1));
margin: 0;
padding: calc(1.25rem * var(--pf-density-pad, 1));
}
#portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"], [data-events-layout="polaroid"], [data-events-layout="carousel"]) .agenda-item .date {
flex-direction: row;
justify-content: flex-start;
gap: calc(0.4rem * var(--pf-density-gap, 1));
min-width: 0;
min-height: 0;
margin: 0;
padding: calc(0.4rem * var(--portfolios-badge-pad, 1)) calc(0.75rem * var(--portfolios-badge-pad, 1));
align-self: flex-start;
}
#portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"]) .agenda-item:first-child {
grid-column: span 2;
grid-row: span 2;
justify-content: flex-end;
padding: calc(2rem * var(--pf-density-pad, 1));
}
#portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"]) .agenda-item:first-child h3 {
font-size: 1.8em;
}
#portfolio_page #agenda-list[data-events-layout="magazine"] .agenda-item:first-child {
grid-column: 1 / -1;
grid-row: auto;
}
#portfolio_page #agenda-list[data-events-layout="mosaic"] {
grid-auto-flow: dense;
}
#portfolio_page #agenda-list[data-events-layout="polaroid"] .agenda-item {
padding-bottom: calc(2rem * var(--pf-density-pad, 1));
rotate: -1.2deg;
}
#portfolio_page #agenda-list[data-events-layout="polaroid"] .agenda-item:nth-child(even) {
rotate: 1.2deg;
}
/* Index numéroté : tableau numéro · date · titre */
#portfolio_page #agenda-list[data-events-layout="index"] {
counter-reset: pf-event;
}
#portfolio_page #agenda-list[data-events-layout="index"] .agenda-item {
align-items: center;
gap: calc(1.5rem * var(--pf-density-gap, 1));
margin: 0;
padding: calc(0.9rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
counter-increment: pf-event;
}
#portfolio_page #agenda-list[data-events-layout="index"] .agenda-item::before {
content: counter(pf-event, decimal-leading-zero);
min-width: 2.5rem;
color: var(--pf-accent);
font-weight: 700;
}
#portfolio_page #agenda-list[data-events-layout="index"] .agenda-item .date {
flex-direction: row;
gap: calc(0.35rem * var(--pf-density-gap, 1));
min-width: 9rem;
min-height: 0;
margin: 0;
padding: 0;
background: none;
}
#portfolio_page #agenda-list[data-events-layout="index"] .agenda-item .date,
#portfolio_page #agenda-list[data-events-layout="index"] .agenda-item .date p {
color: var(--portfolios-badge-text-color, var(--portfolios-badge-color, var(--pf-accent)));
}
/* Défilement horizontal */
#portfolio_page #agenda-list[data-events-layout="carousel"] {
display: flex;
gap: var(--layout-gap, 20px);
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
scrollbar-width: thin;
}
#portfolio_page #agenda-list[data-events-layout="carousel"] .agenda-item {
flex: 0 0 clamp(15rem, 30vw, 20rem);
scroll-snap-align: start;
}
/* Survol : titres en grand, détails au survol */
#portfolio_page #agenda-list[data-events-layout="reveal"] .agenda-item {
align-items: baseline;
gap: calc(1.5rem * var(--pf-density-gap, 1));
margin: 0;
padding: calc(1rem * var(--pf-density-pad, 1)) calc(0.5rem * var(--pf-density-pad, 1));
}
#portfolio_page #agenda-list[data-events-layout="reveal"] .agenda-item .date {
flex-direction: row;
gap: calc(0.35rem * var(--pf-density-gap, 1));
min-width: 8rem;
min-height: 0;
margin: 0;
padding: 0;
background: none;
}
#portfolio_page #agenda-list[data-events-layout="reveal"] .agenda-item .date,
#portfolio_page #agenda-list[data-events-layout="reveal"] .agenda-item .date p {
color: var(--portfolios-badge-text-color, var(--portfolios-badge-color, var(--pf-accent)));
}
#portfolio_page #agenda-list[data-events-layout="reveal"] h3 {
font-size: 1.6em;
}
#portfolio_page #agenda-list[data-events-layout="reveal"] .agenda-item ul li:not(.date):not(:first-child) {
display: none;
}
#portfolio_page #agenda-list[data-events-layout="reveal"] .agenda-item:is(:hover, :focus-visible) ul li:not(.date):not(:first-child) {
display: list-item;
}
@media (max-width: 1100px) {
/* Œuvres : colonnes de grid.css (--_thumbs) à tous les paliers ; vignette du journal réduite, format gardé. */
#portfolio_page .pf-thumbs[data-works-layout="journal"] > a {
grid-template-columns: 3rem calc(var(--pf-work-thumb) * 0.75) minmax(0, 1fr);
}
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="magazine"], [data-images-layout="journal"], [data-images-layout="minimal"], [data-images-layout="reveal"]) {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: auto;
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="feature"] {
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page .awards-list[data-awards-layout="magazine"] {
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page .services-slider[data-services-layout="magazine"] > :first-child .service-item,
#portfolio_page .services-slider:is([data-services-layout="journal"], [data-services-layout="reveal"]) .service-item {
display: flex;
flex-direction: column;
align-items: stretch;
}
#portfolio_page .services-slider[data-services-layout="mosaic"] > .populare {
grid-row: auto;
}
/* Une offre par ligne (services.css le pose pour tous les gabarits, ces trois colonnes l'emportaient). */
#portfolio_page .services-slider:is([data-services-layout="magazine"], [data-services-layout="mosaic"], [data-services-layout="bento"], [data-services-layout="polaroid"]) {
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"], [data-events-layout="polaroid"]) {
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page #agenda-list:is([data-events-layout="magazine"], [data-events-layout="mosaic"]) .agenda-item:first-child {
grid-column: auto;
grid-row: auto;
}
#portfolio_page #agenda-list:is([data-events-layout="index"], [data-events-layout="reveal"]) .agenda-item {
flex-wrap: wrap;
gap: calc(0.5rem * var(--pf-density-gap, 1)) calc(1rem * var(--pf-density-gap, 1));
}
}
}
/* assets/css/public/design/elements/cards.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — cards (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
15. Habillage des cartes — une seule définition par style, pour tous les éléments
Articles, enquêtes, œuvres, images, prix, agenda, services, informations : un même style donne
la même carte. Contour, arrondi, ombre = réglages de l'utilisateur (section 0) ; le fond des
contenus n'est posé que par les styles à carte (cartes, bento, polaroïd). L'habillage propre à
chaque thème est dans themes//cards.css. Les styles en lignes ou texte seul restent sans fond et gardent les couleurs de la page.
Les sections 4 à 14 ne fixent que la disposition (grille, proportions, typographie, décors) :
aucune bordure, aucun fond, aucune ombre sur la carte elle-même.
« grid » = rendu historique (thumbnails/main.css, .border-design), non touché ici.
========================================================================== */
/* Cartes : fond des contenus, contour et ombre de l'utilisateur. */
#portfolio_page :is(
.blog-list[data-articles-layout="magazine"] .thumbnail-tile,
.blog-list[data-articles-layout="carousel"] .thumbnail-tile,
.pf-thumbs[data-works-layout="magazine"] > a,
.pf-thumbs[data-works-layout="carousel"] > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout="magazine"] > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout="carousel"] > a,
.awards-list[data-awards-layout="magazine"] .award,
.awards-list[data-awards-layout="carousel"] .award,
#agenda-list[data-events-layout="magazine"] .agenda-item,
#agenda-list[data-events-layout="carousel"] .agenda-item,
.services-slider[data-services-layout="magazine"] .service-item,
.services-slider[data-services-layout="carousel"] .service-item,
.informations-list[data-informations-layout="magazine"] .information-item,
.informations-list[data-informations-layout="carousel"] .information-item,
[data-recommendations-layout="carousel"] .recommendation-card
) {
border: var(--pf-border);
border-radius: var(--pf-radius);
background: var(--pf-surface);
box-shadow: var(--pf-shadow), var(--pf-theme-shadow);
}
/* Lecteurs intégrés (vidéos, lecteurs d'un album : shared/includes/ui/media_embeds.php) : un cadre, jamais
l'intérieur (il appartient à la plateforme). Contour et arrondi de l'utilisateur (.border-design,
.portfolios-border-radius-l) ; habillage du thème avec ses cartes par défaut (themes//cards.css). */
#portfolio_page .pf-embed {
overflow: hidden;
}
#portfolio_page .pf-embed > iframe {
display: block;
border: 0;
}
/* Casse des titres (/theme) sur les titres de toutes les cartes. Spécificité nulle : un thème ou une disposition qui
veut sa propre casse la pose avec var(--portfolios-title-transform, …) et garde donc le réglage prioritaire. */
#portfolio_page :where(.article-blog-infos__title, .agenda-item h3, .service-title, .award__name,
.information-item__title, .about-timeline-title, .casting-section-title, .survey-title,
:is(.vertical-infos, .horizontal-infos, .square-infos) h4) {
text-transform: var(--portfolios-title-transform);
}
/* Bento : compartiments teintés tour à tour (--pf-tint-1..4), soulevés au survol. */
#portfolio_page :is(
.blog-list[data-articles-layout="bento"] .thumbnail-tile,
.pf-thumbs[data-works-layout="bento"] > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a,
.awards-list[data-awards-layout="bento"] .award,
#agenda-list[data-events-layout="bento"] .agenda-item,
.services-slider[data-services-layout="bento"] .service-item,
.informations-list[data-informations-layout="bento"] .information-item,
[data-recommendations-layout="bento"] .recommendation-card
) {
--pf-tile: var(--pf-tint-1);
border: var(--pf-border);
border-radius: var(--pf-radius);
background: var(--pf-tile);
box-shadow: var(--pf-shadow), var(--pf-theme-shadow);
transition: box-shadow 0.25s ease;
}
#portfolio_page :is(
.blog-list[data-articles-layout="bento"] > :nth-child(4n + 2) .thumbnail-tile,
.pf-thumbs[data-works-layout="bento"] > a:nth-child(4n + 2),
:is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a:nth-child(4n + 2),
.awards-list[data-awards-layout="bento"] .award:nth-child(4n + 2),
#agenda-list[data-events-layout="bento"] .agenda-item:nth-child(4n + 2),
.services-slider[data-services-layout="bento"] .service-item:nth-child(4n + 2),
.informations-list[data-informations-layout="bento"] .information-item:nth-child(4n + 2),
[data-recommendations-layout="bento"] .recommendation-card:nth-child(4n + 2)
) {
--pf-tile: var(--pf-tint-2);
}
#portfolio_page :is(
.blog-list[data-articles-layout="bento"] > :nth-child(4n + 3) .thumbnail-tile,
.pf-thumbs[data-works-layout="bento"] > a:nth-child(4n + 3),
:is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a:nth-child(4n + 3),
.awards-list[data-awards-layout="bento"] .award:nth-child(4n + 3),
#agenda-list[data-events-layout="bento"] .agenda-item:nth-child(4n + 3),
.services-slider[data-services-layout="bento"] .service-item:nth-child(4n + 3),
.informations-list[data-informations-layout="bento"] .information-item:nth-child(4n + 3),
[data-recommendations-layout="bento"] .recommendation-card:nth-child(4n + 3)
) {
--pf-tile: var(--pf-tint-3);
}
#portfolio_page :is(
.blog-list[data-articles-layout="bento"] > :nth-child(4n + 4) .thumbnail-tile,
.pf-thumbs[data-works-layout="bento"] > a:nth-child(4n + 4),
:is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a:nth-child(4n + 4),
.awards-list[data-awards-layout="bento"] .award:nth-child(4n + 4),
#agenda-list[data-events-layout="bento"] .agenda-item:nth-child(4n + 4),
.services-slider[data-services-layout="bento"] .service-item:nth-child(4n + 4),
.informations-list[data-informations-layout="bento"] .information-item:nth-child(4n + 4),
[data-recommendations-layout="bento"] .recommendation-card:nth-child(4n + 4)
) {
--pf-tile: var(--pf-tint-4);
}
#portfolio_page :is(
.blog-list[data-articles-layout="bento"] .thumbnail-tile,
.pf-thumbs[data-works-layout="bento"] > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a,
.awards-list[data-awards-layout="bento"] .award,
#agenda-list[data-events-layout="bento"] .agenda-item,
.services-slider[data-services-layout="bento"] .service-item,
.informations-list[data-informations-layout="bento"] .information-item,
[data-recommendations-layout="bento"] .recommendation-card
):hover {
box-shadow: var(--pf-shadow), var(--pf-drop-shadow);
}
/* Bento : l'image remplit la tuile, la carte (overflow: hidden) la rogne à ses coins. */
#portfolio_page .blog-list[data-articles-layout="bento"] .thumbnail-tile .thumb {
border-radius: var(--pf-radius-inner);
}
/* Polaroïd : cadre couleur des contenus (+ épaisseur de l'utilisateur), bas plus large. */
#portfolio_page :is(
.blog-list[data-articles-layout="polaroid"] .thumbnail-tile,
.pf-thumbs[data-works-layout="polaroid"] > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] > a,
.awards-list[data-awards-layout="polaroid"] .award,
#agenda-list[data-events-layout="polaroid"] .agenda-item,
.services-slider[data-services-layout="polaroid"] .service-item,
.informations-list[data-informations-layout="polaroid"] .information-item,
[data-recommendations-layout="polaroid"] .recommendation-card
) {
--pf-theme-shadow: var(--pf-drop-shadow);
border: calc(10px + var(--pf-border-width)) solid var(--portfolios-thumbnail-contour-color, var(--pf-surface));
border-bottom-width: calc(28px + var(--pf-border-width));
border-radius: var(--pf-radius-inner);
background: var(--pf-surface);
box-shadow: var(--pf-shadow), var(--pf-theme-shadow);
}
/* Mosaïque / grand format / planche contact (index des œuvres et images) : l'image occupe la carte, pas de fond. */
#portfolio_page :is(
.blog-list[data-articles-layout="mosaic"] .thumbnail-tile,
.blog-list[data-articles-layout="feature"] .thumbnail-tile,
.pf-thumbs[data-works-layout="mosaic"] > a,
.pf-thumbs[data-works-layout="feature"] > a,
.pf-thumbs[data-works-layout="index"] > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout="mosaic"] > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout="feature"] > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout="index"] > a,
.awards-list[data-awards-layout="mosaic"] .award,
.awards-list[data-awards-layout="feature"] .award,
#agenda-list[data-events-layout="mosaic"] .agenda-item,
#agenda-list[data-events-layout="feature"] .agenda-item,
.services-slider[data-services-layout="mosaic"] .service-item,
.services-slider[data-services-layout="feature"] .service-item,
.informations-list[data-informations-layout="mosaic"] .information-item,
.informations-list[data-informations-layout="feature"] .information-item,
[data-recommendations-layout="feature"] .recommendation-card
) {
border: var(--pf-border);
border-radius: var(--pf-radius);
background-color: transparent;
box-shadow: var(--pf-shadow), var(--pf-theme-shadow);
}
/* Lignes (liste, index, journal) : filet de séparation des sections, pas de fond. */
#portfolio_page :is(
.blog-list[data-articles-layout="list"] .thumbnail-tile,
.blog-list[data-articles-layout="index"] .thumbnail-tile,
.blog-list[data-articles-layout="journal"] .thumbnail-tile,
.pf-thumbs[data-works-layout="list"] > a,
.pf-thumbs[data-works-layout="journal"] > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout="list"] > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout="journal"] > a,
.awards-list[data-awards-layout="list"] .award,
.awards-list[data-awards-layout="index"] .award,
.awards-list[data-awards-layout="journal"] .award,
#agenda-list[data-events-layout="list"] .agenda-item,
#agenda-list[data-events-layout="index"] .agenda-item,
#agenda-list[data-events-layout="journal"] .agenda-item,
.services-slider[data-services-layout="list"] .service-item,
.services-slider[data-services-layout="index"] .service-item,
.services-slider[data-services-layout="journal"] .service-item,
.informations-list[data-informations-layout="list"] .information-item,
.informations-list[data-informations-layout="index"] .information-item,
.informations-list[data-informations-layout="journal"] .information-item,
[data-timeline-layout="index"] .about-timeline-card,
[data-timeline-layout="journal"] .about-timeline-card,
[data-casting-layout="index"] :is(.casting-detail, .casting-block, .casting-timeline-card),
[data-casting-layout="journal"] :is(.casting-detail, .casting-block, .casting-timeline-card)
) {
border: 0;
border-bottom: var(--pf-rule-width) solid var(--pf-rule-color);
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
/* Texte seul / titres au survol : ni contour ni fond. */
#portfolio_page :is(
.blog-list[data-articles-layout="minimal"] .thumbnail-tile,
.blog-list[data-articles-layout="reveal"] .thumbnail-tile,
.pf-thumbs[data-works-layout="minimal"] > a,
.pf-thumbs[data-works-layout="reveal"] > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout="minimal"] > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout="reveal"] > a,
.awards-list[data-awards-layout="minimal"] .award,
.awards-list[data-awards-layout="reveal"] .award,
#agenda-list[data-events-layout="minimal"] .agenda-item,
#agenda-list[data-events-layout="reveal"] .agenda-item,
.services-slider[data-services-layout="minimal"] .service-item,
.services-slider[data-services-layout="reveal"] .service-item,
.informations-list[data-informations-layout="minimal"] .information-item,
.informations-list[data-informations-layout="reveal"] .information-item,
[data-timeline-layout="minimal"] .about-timeline-card,
[data-recommendations-layout="minimal"] .recommendation-card
) {
border: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
/* Profil artistique en Texte seul / Magazine : ni fond ni cadre ni ombre. Règle à part, de même poids que celles
de casting.css (chargée après) : les filets de ces dispositions y restent possibles. */
#portfolio_page [data-casting-layout="minimal"] :is(.casting-detail, .casting-block, .casting-timeline-card),
#portfolio_page [data-casting-layout="magazine"] :is(.casting-detail, .casting-block, .casting-timeline-card) {
border: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
/* Un seul contour : celui de la carte. Les contours historiques posés à l'intérieur de la carte
(.border-design sur l'image) s'effacent ; la carte elle-même garde l'habillage ci-dessus.
Seuls les descendants sont visés : jamais la carte elle-même. */
#portfolio_page :is(
.blog-list[data-articles-layout]:not([data-articles-layout="grid"]) .thumbnail-tile,
.pf-thumbs[data-works-layout]:not([data-works-layout="grid"]) > a,
:is(#gallery, #production-show-photos-grid)[data-images-layout]:not([data-images-layout="grid"]) > a,
.awards-list[data-awards-layout]:not([data-awards-layout="grid"]) .award,
#agenda-list[data-events-layout]:not([data-events-layout="grid"]) .agenda-item,
.services-slider[data-services-layout]:not([data-services-layout="grid"]) .service-item,
.informations-list[data-informations-layout]:not([data-informations-layout="grid"]) .information-item
) :is(.border-design, .information-item__illustration--inherit-design) {
border: 0;
box-shadow: none;
}
/* Couleurs du contenu : sur le fond des contenus, titre / texte lisibles (--pf-title / --pf-text,
portfolios_design_content_ink()). Le texte posé sur une image garde les couleurs de surimpression. */
#portfolio_page .blog-list[data-articles-layout="polaroid"] .article-blog-infos__title,
#portfolio_page .blog-list[data-articles-layout="bento"] .article-blog-infos__title,
#portfolio_page .blog-list[data-articles-layout="magazine"] .article-blog-infos__title,
#portfolio_page .blog-list[data-articles-layout="carousel"] .article-blog-infos__title,
#portfolio_page .services-slider[data-services-layout="grid"] .service-title,
#portfolio_page .services-slider[data-services-layout="grid"] .price-main:not(.promo-color),
#portfolio_page .services-slider[data-services-layout="polaroid"] .service-title,
#portfolio_page .services-slider[data-services-layout="bento"] .service-title,
#portfolio_page .services-slider[data-services-layout="magazine"] .service-title,
#portfolio_page .services-slider[data-services-layout="carousel"] .service-title,
#portfolio_page .services-slider[data-services-layout="polaroid"] .price-main:not(.promo-color),
#portfolio_page .services-slider[data-services-layout="bento"] .price-main:not(.promo-color),
#portfolio_page .services-slider[data-services-layout="magazine"] .price-main:not(.promo-color),
#portfolio_page .services-slider[data-services-layout="carousel"] .price-main:not(.promo-color),
#portfolio_page #agenda-list[data-events-layout="polaroid"] .agenda-item h3,
#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item h3,
#portfolio_page #agenda-list[data-events-layout="magazine"] .agenda-item h3,
#portfolio_page #agenda-list[data-events-layout="carousel"] .agenda-item h3,
#portfolio_page .awards-list[data-awards-layout="polaroid"] .award__name,
#portfolio_page .awards-list[data-awards-layout="bento"] .award__name,
#portfolio_page .awards-list[data-awards-layout="magazine"] .award__name,
#portfolio_page .awards-list[data-awards-layout="carousel"] .award__name,
#portfolio_page .informations-list[data-informations-layout="polaroid"] .information-item__title,
#portfolio_page .informations-list[data-informations-layout="bento"] .information-item__title,
#portfolio_page .informations-list[data-informations-layout="magazine"] .information-item__title,
#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-author cite,
#portfolio_page [data-recommendations-layout="bento"] .recommendation-author cite,
#portfolio_page [data-recommendations-layout="carousel"] .recommendation-author cite,
#portfolio_page .informations-list[data-informations-layout="carousel"] .information-item__title {
color: var(--pf-title);
}
#portfolio_page .blog-list[data-articles-layout="polaroid"] :is(.article-blog-infos__meta, .article-blog-infos__description, .article-blog-infos__date),
#portfolio_page .blog-list[data-articles-layout="bento"] :is(.article-blog-infos__meta, .article-blog-infos__description, .article-blog-infos__date),
#portfolio_page .blog-list[data-articles-layout="magazine"] :is(.article-blog-infos__meta, .article-blog-infos__description, .article-blog-infos__date),
#portfolio_page .blog-list[data-articles-layout="carousel"] :is(.article-blog-infos__meta, .article-blog-infos__description, .article-blog-infos__date),
#portfolio_page .services-slider[data-services-layout="grid"] :is(.service-body, .feature-item, .price-old, .price-detail),
#portfolio_page #agenda-list[data-events-layout="grid"] .agenda-item ul li:not(.date):not(:first-child),
#portfolio_page .services-slider[data-services-layout="polaroid"] :is(.service-body, .feature-item, .price-old, .price-detail),
#portfolio_page .services-slider[data-services-layout="bento"] :is(.service-body, .feature-item, .price-old, .price-detail),
#portfolio_page .services-slider[data-services-layout="magazine"] :is(.service-body, .feature-item, .price-old, .price-detail),
#portfolio_page .services-slider[data-services-layout="carousel"] :is(.service-body, .feature-item, .price-old, .price-detail),
#portfolio_page #agenda-list[data-events-layout="polaroid"] .agenda-item ul li:not(.date):not(:first-child),
#portfolio_page #agenda-list[data-events-layout="bento"] .agenda-item ul li:not(.date):not(:first-child),
#portfolio_page #agenda-list[data-events-layout="magazine"] .agenda-item ul li:not(.date):not(:first-child),
#portfolio_page #agenda-list[data-events-layout="carousel"] .agenda-item ul li:not(.date):not(:first-child),
#portfolio_page .informations-list[data-informations-layout="polaroid"] .information-item__description,
#portfolio_page .informations-list[data-informations-layout="bento"] .information-item__description,
#portfolio_page .informations-list[data-informations-layout="magazine"] .information-item__description,
#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-quote,
#portfolio_page [data-recommendations-layout="bento"] .recommendation-quote,
#portfolio_page [data-recommendations-layout="carousel"] .recommendation-quote,
#portfolio_page .informations-list[data-informations-layout="carousel"] .information-item__description {
color: var(--pf-text);
}
/* Styles sans fond (lignes, texte seul, mosaïque, grand format) : la couleur « titre sur fond des
contenus » ne vaut plus, le titre reprend les couleurs de la page. Variable lue par blog.css /
agenda.css (qui la posent en !important) ; le texte sur image garde ses couleurs de surimpression. */
#portfolio_page :is(
.blog-list:is([data-articles-layout="mosaic"], [data-articles-layout="feature"], [data-articles-layout="list"], [data-articles-layout="index"], [data-articles-layout="journal"], [data-articles-layout="minimal"], [data-articles-layout="reveal"]) .thumbnail-tile,
#agenda-list:is([data-events-layout="mosaic"], [data-events-layout="feature"], [data-events-layout="list"], [data-events-layout="index"], [data-events-layout="journal"], [data-events-layout="minimal"], [data-events-layout="reveal"]) .agenda-item
) {
--pf-card-title: var(--portfolios-heading-secondary-color, var(--pf-ink));
}
.informations-list[data-informations-layout]:not([data-informations-layout="grid"]) .information-item {
box-sizing: border-box;
}
#portfolio_page .informations-list:is([data-informations-layout="polaroid"], [data-informations-layout="bento"], [data-informations-layout="magazine"], [data-informations-layout="carousel"]) .information-item {
padding: calc(1rem * var(--pf-density-pad, 1)) calc(1.1rem * var(--pf-density-pad, 1));
}
/* Galeries : l'habillage de carte (§15) pose un `background` raccourci qui remet l'image et
background-size à zéro. La photo (variable --pf-photo posée en ligne par le template) revient ici,
recadrée pour remplir sa tuile ; les dispositions qui la posent sur l'![]()
la retirent plus bas.
Spécificité renforcée ([data-images-layout] doublé, a[href]) : le :is() du §15 pèse (2,2,0). */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout][data-images-layout] > a[href] {
background-image: var(--pf-photo, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Cartes à marge (magazine, défilement, bento) : la photo couvrait tout le fond et masquait
la carte. Elle est posée dans la carte, avec une marge où l'effet reste visible. */
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="magazine"], [data-images-layout="carousel"], [data-images-layout="bento"])[data-images-layout] > a[href] {
padding: calc(var(--pf-gallery-frame, 8px) * var(--pf-density-pad, 1));
background-clip: content-box;
background-origin: content-box;
outline: none;
}
/* Le fond rogné (content-box) perdait l'arrondi : rayon de la carte moins la marge, soit 0 en pratique.
La photo passe sur l'![]()
du balisage, posée dans la marge et arrondie (rayon intérieur). */
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="magazine"], [data-images-layout="carousel"], [data-images-layout="bento"])[data-images-layout] > a[href] {
position: relative;
background-image: none;
}
#portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="magazine"], [data-images-layout="carousel"], [data-images-layout="bento"])[data-images-layout] > a[href] > img {
display: block;
position: absolute;
inset: var(--pf-gallery-frame, 8px);
width: calc(100% - 2 * var(--pf-gallery-frame, 8px));
height: calc(100% - 2 * var(--pf-gallery-frame, 8px));
object-fit: cover;
border-radius: var(--pf-radius-inner);
}
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"][data-images-layout] > a[href] {
background-clip: padding-box;
background-origin: padding-box;
}
/* Cartes du parcours (expériences, formations, profil, recommandations) : leur classe .bg-color
impose le fond de page en !important (main.css), ce qui effaçait le fond du style choisi
et le « Fond des contenus » des styles par défaut (frise, grille), alors que
l'agenda, les services et les articles le prennent. La variable lue par .bg-color reprend le fond
des contenus (ou celui du style) ; le texte courant suit ce fond. Sans fond des contenus réglé,
--pf-surface vaut le fond de la page : rendu inchangé. */
#portfolio_page :is(
[data-timeline-layout] .about-timeline-card,
[data-casting-layout] :is(.casting-detail, .casting-block, .casting-timeline-card),
[data-recommendations-layout] .recommendation-card
).bg-color {
--portfolios-theme-bg-main: var(--pf-card-bg, var(--pf-surface));
--portfolios-body-text-color: var(--pf-card-text, var(--pf-text));
}
#portfolio_page [data-recommendations-layout="bento"] .recommendation-card.bg-color {
--pf-card-bg: var(--pf-tile);
}
/* Sans fond (lignes, texte seul, grand format) : texte aux couleurs de la page. */
#portfolio_page :is(
[data-timeline-layout]:is([data-timeline-layout="index"], [data-timeline-layout="journal"], [data-timeline-layout="minimal"]) .about-timeline-card,
[data-casting-layout]:is([data-casting-layout="index"], [data-casting-layout="minimal"], [data-casting-layout="magazine"], [data-casting-layout="journal"]) :is(.casting-detail, .casting-block, .casting-timeline-card),
[data-recommendations-layout]:is([data-recommendations-layout="feature"], [data-recommendations-layout="minimal"]) .recommendation-card
).bg-color {
--pf-card-bg: transparent;
--pf-card-text: var(--pf-ink);
}
}
/* assets/css/public/design/elements/timeline.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — timeline (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
16. Expériences et formations : [data-timeline-layout] (posé sur la section)
« list » = frise historique (experiences.css), non touchée ici.
========================================================================== */
/* Sans frise : ni filet vertical ni pastille. */
#portfolio_page [data-timeline-layout]:not([data-timeline-layout="list"]) .about-timeline::before,
#portfolio_page [data-timeline-layout]:not([data-timeline-layout="list"]) .about-timeline-dot {
display: none;
}
/* Index : tableau compact, dates en chasse fixe à gauche. */
#portfolio_page [data-timeline-layout="index"] .about-timeline-entry {
grid-template-columns: 6.5rem minmax(0, 1fr);
gap: 0 calc(1rem * var(--pf-density-gap, 1));
}
#portfolio_page [data-timeline-layout="index"] .about-timeline-year {
font-family: var(--pf-mono);
font-variant-numeric: tabular-nums;
}
#portfolio_page [data-timeline-layout="index"] .about-timeline-card {
padding: calc(0.6rem * var(--pf-density-pad, 1)) 0;
}
/* Journal : grande date en exergue au-dessus de l'entrée. */
#portfolio_page [data-timeline-layout="journal"] .about-timeline-entry {
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page [data-timeline-layout="journal"] .about-timeline-axis {
justify-content: flex-start;
}
#portfolio_page [data-timeline-layout="journal"] .about-timeline-year {
font-size: 2em;
font-weight: 500;
line-height: 1.1;
}
#portfolio_page [data-timeline-layout="journal"] .about-timeline-card {
padding: calc(0.4rem * var(--pf-density-pad, 1)) 0 calc(1rem * var(--pf-density-pad, 1));
}
/* Date au-dessus de l'entrée, alignée à gauche (la frise la cale à droite de son axe). */
#portfolio_page [data-timeline-layout]:not([data-timeline-layout="list"], [data-timeline-layout="index"]) .about-timeline-axis {
align-items: flex-start;
padding: 0;
}
/* Date : pastille du réglage /theme « Pastilles » dans toutes les mises en page (modules/experiences).
Mises en page typographiques (index, journal, texte seul) : date en simple texte, comme l'agenda en liste. */
#portfolio_page :is([data-timeline-layout="index"], [data-timeline-layout="journal"], [data-timeline-layout="minimal"]) .about-timeline-year:not(.about-timeline-year--nodate) {
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--portfolios-heading-primary-color, inherit);
}
/* Texte seul : date au-dessus, aucune carte. */
#portfolio_page [data-timeline-layout="minimal"] .about-timeline-entry {
grid-template-columns: minmax(0, 1fr);
}
#portfolio_page [data-timeline-layout="minimal"] .about-timeline-axis {
justify-content: flex-start;
opacity: 0.7;
}
#portfolio_page [data-timeline-layout="minimal"] .about-timeline-card {
padding: 0 0 calc(1rem * var(--pf-density-pad, 1));
}
@media (max-width: 1100px) {
#portfolio_page [data-timeline-layout="index"] .about-timeline-entry {
grid-template-columns: 4.5rem minmax(0, 1fr);
}
}
}
/* assets/css/public/design/elements/recommendations.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — recommendations (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
17. Recommandations : [data-recommendations-layout] (posé sur la section)
« grid » = grille historique (recommendations.css), non touchée ici.
========================================================================== */
/* Grand format : une citation par ligne, en grand, centrée. */
#portfolio_page [data-recommendations-layout="feature"] .recommendations-grid {
--cols: 1;
--cols-md: 1;
--cols-sm: 1;
}
#portfolio_page [data-recommendations-layout="feature"] .recommendation-card-header {
flex-direction: column;
align-items: center;
text-align: center;
}
#portfolio_page [data-recommendations-layout="feature"] .recommendation-quote {
font-size: 1.4em;
line-height: 1.45;
max-width: var(--layout-width-read, 65ch);
margin-inline: auto;
}
/* Polaroïd : photo en haut, cartes légèrement inclinées tour à tour. */
#portfolio_page [data-recommendations-layout="polaroid"] .recommendations-grid {
--cols: 3;
--cols-md: 2;
--cols-sm: 1;
}
#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-card-header {
flex-direction: column;
align-items: stretch;
text-align: center;
}
/* Le tirage : la photo de l'auteur occupe toute la largeur du cadre (une pastille de 80 px laissait une
carte vide, plus proche du verre que d'un polaroïd) ; la citation fait la légende dans le bas large. */
#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-card-header .about-artist-img.recommendation-author-photo {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 0;
}
#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-card:nth-child(odd) {
transform: rotate(-1.2deg);
}
#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-card:nth-child(even) {
transform: rotate(1deg);
}
/* Défilement : une rangée qui glisse, une citation calée à la fois. */
#portfolio_page [data-recommendations-layout="carousel"] .recommendations-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: min(85%, 34rem);
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
}
#portfolio_page [data-recommendations-layout="carousel"] .recommendation-card {
scroll-snap-align: start;
}
/* Bento : une citation sur trois en double largeur. */
#portfolio_page [data-recommendations-layout="bento"] .recommendations-grid {
--cols: 3;
--cols-md: 2;
--cols-sm: 1;
}
#portfolio_page [data-recommendations-layout="bento"] .recommendation-card:nth-child(3n + 1) {
grid-column: span 2;
}
/* Texte seul : citation en italique, filet d'accent à gauche. */
#portfolio_page [data-recommendations-layout="minimal"] .recommendation-card-body {
padding-left: calc(1rem * var(--pf-density-pad, 1));
border-left: max(2px, var(--pf-border-width, 2px)) solid var(--pf-rule-color);
}
#portfolio_page [data-recommendations-layout="minimal"] .recommendation-quote {
font-style: italic;
}
@media (max-width: 1100px) {
#portfolio_page [data-recommendations-layout="bento"] .recommendation-card:nth-child(3n + 1) {
grid-column: auto;
}
#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-card:is(:nth-child(odd), :nth-child(even)) {
transform: none;
}
}
}
/* assets/css/public/design/elements/casting.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 19-10-2026-casting */
/* Éléments de contenu — casting (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
18. Profil artistique : [data-casting-layout] (posé sur la section)
« grid » = rendu historique (cartes en trois colonnes), non touché ici.
========================================================================== */
/* Index : fiche technique « clé · valeur », une ligne par caractéristique. */
#portfolio_page [data-casting-layout="index"] .casting-details {
--cols: 1;
--cols-md: 1;
--cols-sm: 1;
gap: 0;
}
#portfolio_page [data-casting-layout="index"] .casting-detail {
display: grid;
grid-template-columns: 12rem minmax(0, 1fr);
gap: 0 calc(1rem * var(--pf-density-gap, 1));
align-items: baseline;
padding: calc(0.55rem * var(--pf-density-pad, 1)) 0;
}
#portfolio_page [data-casting-layout="index"] :is(.casting-detail-label, .casting-detail-summary) {
margin: 0;
}
#portfolio_page [data-casting-layout="index"] .casting-block {
padding-inline: 0;
}
@media (max-width: 1100px) {
#portfolio_page [data-casting-layout="index"] .casting-detail {
grid-template-columns: minmax(0, 1fr);
}
}
/* Liste : une carte pleine largeur par caractéristique et par bloc, libellé à gauche. */
#portfolio_page [data-casting-layout="list"] .casting-details {
--cols: 1;
--cols-md: 1;
--cols-sm: 1;
}
#portfolio_page [data-casting-layout="list"] :is(.casting-detail, .casting-block) {
--layout-space-y-md: calc(1rem * var(--pf-density-pad, 1));
display: grid;
grid-template-columns: 14rem minmax(0, 1fr);
gap: 0 calc(1.5rem * var(--pf-density-gap, 1));
align-items: baseline;
}
#portfolio_page [data-casting-layout="list"] :is(.casting-detail-label, .casting-detail-summary, .casting-section-title) {
margin: 0;
}
/* Texte seul : sans cartes, caractéristiques en lignes « libellé : valeur » séparées par des filets,
blocs en simples paragraphes titrés. */
#portfolio_page [data-casting-layout="minimal"] .casting-details {
--cols: 2;
--cols-md: 2;
--cols-sm: 1;
gap: 0 calc(2.5rem * var(--pf-density-gap, 1));
}
/* Marges des cartes : .pf-pad-md (couche utilitaires, après les éléments) lit ces variables. Sans cadre : pas de
marge latérale, le texte s'aligne sur le titre. Idem en Magazine et Journal. */
#portfolio_page [data-casting-layout]:is([data-casting-layout="minimal"], [data-casting-layout="magazine"], [data-casting-layout="journal"]) :is(.casting-detail, .casting-block) {
--layout-space-x-md: 0px;
--layout-space-y-md: calc(0.7rem * var(--pf-density-pad, 1));
/* Filets droits : l'arrondi de .portfolios-border-radius-l (couche variables) lit ces variables. */
--portfolios-border-radius-custom: 0px;
--portfolios-border-radius-l: 0px;
}
#portfolio_page [data-casting-layout="minimal"] .casting-detail {
display: flex;
flex-direction: row; /* modules/casting/casting.css empile libellé et valeur */
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.5em;
border-bottom: max(1px, var(--pf-rule-width)) solid var(--pf-rule-color);
}
#portfolio_page [data-casting-layout="minimal"] .casting-detail-label {
width: auto;
margin: 0;
}
#portfolio_page [data-casting-layout="minimal"] .casting-detail-label::after {
content: " :";
}
#portfolio_page [data-casting-layout="minimal"] .casting-detail-summary {
flex: 1 1 auto;
width: auto;
min-width: 0;
margin: 0;
}
/* Magazine : caractéristiques en 4 colonnes sous un filet d'encre, blocs côte à côte en 2 colonnes. */
#portfolio_page [data-casting-layout="magazine"] .casting-details {
--cols: 4;
--cols-lg: 4;
--cols-md: 2;
--cols-sm: 1;
gap: calc(1.5rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
}
#portfolio_page [data-casting-layout="magazine"] :is(.casting-detail, .casting-block) {
border-top: max(2px, var(--pf-border-width)) solid var(--portfolios-thumbnail-contour-color, var(--pf-ink));
}
#portfolio_page [data-casting-layout="magazine"] .casting-detail-label {
margin: 0 0 0.35rem;
font-size: var(--portfolios-font-size-small, 0.875em);
letter-spacing: 0.08em;
text-transform: uppercase;
}
@media (min-width: 1101px) {
#portfolio_page [data-casting-layout="magazine"] > article {
display: flex;
flex-wrap: wrap;
column-gap: calc(2.5rem * var(--pf-density-gap, 1));
}
#portfolio_page [data-casting-layout="magazine"] > article > * {
flex: 1 1 100%;
min-width: 0;
}
#portfolio_page [data-casting-layout="magazine"] > article > .casting-block {
flex-basis: calc(50% - 1.25rem * var(--pf-density-gap, 1));
}
}
/* Journal : fiche de presse, libellés en petites capitales dans une colonne étroite, valeurs à droite. */
#portfolio_page [data-casting-layout="journal"] .casting-details {
--cols: 1;
--cols-md: 1;
--cols-sm: 1;
gap: 0;
}
#portfolio_page [data-casting-layout="journal"] :is(.casting-detail, .casting-block) {
display: grid;
grid-template-columns: 10rem minmax(0, 1fr);
gap: 0 calc(1.5rem * var(--pf-density-gap, 1));
align-items: baseline;
}
#portfolio_page [data-casting-layout="journal"] :is(.casting-detail-label, .casting-section-title) {
margin: 0;
font-size: var(--portfolios-font-size-small, 0.875em);
font-variant-caps: all-small-caps;
letter-spacing: 0.1em;
}
#portfolio_page [data-casting-layout="journal"] .casting-detail-summary {
margin: 0;
}
@media (max-width: 1100px) {
#portfolio_page [data-casting-layout]:is([data-casting-layout="list"], [data-casting-layout="journal"]) :is(.casting-detail, .casting-block) {
grid-template-columns: minmax(0, 1fr);
gap: calc(0.35rem * var(--pf-density-gap, 1));
}
}
}
/* assets/css/public/design/elements/menus.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — menus (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
Sous-menus — un modèle par contexte (header.js, portfoliosSyncNavContext) :
- ordinateur « En ligne » / « Méga » : déroulant au survol / focus (section 2) ;
- onglets en bas : pas de sous-menu, le lien parent ouvre sa page (section 3) ;
- panneaux (#header.nav-ctx-panel : mobile, tablette, panneau ordinateur, aperçus de l'éditeur) :
accordéon sous le lien, un seul ouvert, page parente reprise en tête (.submenu-parent-link).
Contexte posé en JS (pas de media query) : l'éditeur est une grande fenêtre quel que soit l'appareil.
Sélecteurs renforcés : passent devant header/main.css (bandeau fixe ordinateur), header/mobile.css
et l'aperçu (customizer-preview-devices.css).
========================================================================== */
/* Page parente en tête de sous-menu : utile seulement là où le lien parent ouvre le sous-menu. */
#portfolio_page .submenu-parent-link {
display: none;
}
}
/* assets/css/public/design/elements/badges.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — badges (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
Pastilles : « Populaire » des offres, dates de l'agenda, dates des expériences et formations,
catégories d'article du blog, titres de section des articles
Réglages /theme (registry.php, portfolios_design_badge_options) → --portfolios-badge-* ;
sans réglage, les valeurs de repli redonnent le rendu du thème.
Chaque pastille déclare dans sa feuille --pf-badge-base (sa couleur) et --pf-badge-base-on
(le texte posé dessus) ; les couleurs finales sont calculées ici, sur l'élément lui-même.
========================================================================== */
#portfolio_page :is(.service-badge, .agenda-item .date, .content-article h2:not(.subtitle), .about-timeline-year:not(.about-timeline-year--nodate), .article-blog-infos__category) {
--pf-badge-c: var(--portfolios-badge-color, var(--pf-badge-base));
--pf-badge-on: var(--portfolios-badge-on-color, var(--pf-badge-base-on));
--pf-badge-bg: color-mix(in srgb, var(--pf-badge-c) var(--portfolios-badge-fill, 100%), transparent);
/* Couleur du texte choisie dans /theme : quel que soit le style ; sinon dosage du style (Plein : texte « sur fond »). */
--pf-badge-ink: var(--portfolios-badge-text-color, color-mix(in srgb, var(--pf-badge-on) var(--portfolios-badge-ink, 100%), var(--pf-badge-c)));
--pf-badge-line: color-mix(in srgb, var(--pf-badge-c) var(--portfolios-badge-line, 0%), transparent);
}
/* Titres de section des articles : en pastille seulement si « Titres d'article » est activé (h = 1).
Pas le chapô (h2.subtitle de #subtitle-article, aussi .content-article) : c'est un paragraphe, pas un titre.
Arrondi seulement en pastille, et jamais de découpe : core/elements.css pose overflow: hidden sur les titres,
qui rognait en pilule tout titre de plusieurs lignes. */
#portfolio_page .content-article h2:not(.subtitle) {
--pf-badge-base: var(--portfolios-heading-secondary-color, var(--portfolios-text-main-color, #222));
--pf-badge-base-on: var(--portfolios-button-text-color, #fff);
--pf-badge-h: var(--portfolios-badge-headings, 0);
width: var(--portfolios-badge-heading-width, auto);
padding: calc(0.3em * var(--pf-badge-h) * var(--portfolios-badge-pad, 1)) calc(0.8em * var(--pf-badge-h) * var(--portfolios-badge-pad, 1));
border-radius: calc(var(--portfolios-badge-radius, 999px) * var(--pf-badge-h));
overflow: visible;
background-color: color-mix(in srgb, var(--pf-badge-bg) calc(var(--pf-badge-h) * 100%), transparent);
box-shadow: inset 0 0 0 calc(var(--pf-badge-h) * 1px) var(--pf-badge-line);
color: color-mix(in srgb, var(--pf-badge-ink) calc(var(--pf-badge-h) * 100%), var(--pf-badge-base));
}
/* main.css colore chaque span / p / svg du site : le contenu des pastilles reprend leur couleur et leur casse. */
#portfolio_page :is(.service-badge, .agenda-item .date, .content-article h2:not(.subtitle), .about-timeline-year:not(.about-timeline-year--nodate), .article-blog-infos__category) :is(span, p, svg, svg *) {
color: inherit;
text-transform: inherit;
}
}
/* assets/css/public/design/elements/informations.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — informations (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
ordre de chargement : portfolios_content_element_sheets()). */
/* ==========================================================================
19. Informations : [data-informations-layout] (posé sur .informations-list)
Balisage : .informations-list > (a | article).information-item
> img.information-item__illustration ? + h3.__title + div.__description ? + span.__cta ?
« follow » est résolu côté PHP / JS en style des articles : toutes les valeurs du catalogue
commun arrivent ici. Habillage (fond, contour, ombre) : section 15. Ici, la disposition seule.
« grid » = rendu historique (informations.css), non touché.
========================================================================== */
#portfolio_page .informations-list[data-informations-layout]:not([data-informations-layout="grid"]) {
counter-reset: pf-information;
}
/* :where : socle commun des dispositions, plus léger que la règle propre à chacune (Liste, Index, Journal… en grille). */
#portfolio_page .informations-list:where([data-informations-layout]:not([data-informations-layout="grid"], [data-informations-layout="feature"])) .information-item {
display: flex;
flex-direction: column;
gap: calc(0.5rem * var(--pf-density-gap, 1));
min-width: 0;
height: 100%;
color: inherit;
text-decoration: none;
counter-increment: pf-information;
}
#portfolio_page .informations-list[data-informations-layout]:not([data-informations-layout="grid"]) .information-item__illustration {
max-width: 100%;
margin-bottom: 0.25rem;
object-fit: cover;
}
#portfolio_page .informations-list[data-informations-layout]:not([data-informations-layout="grid"]) .information-item__description {
margin-top: 0;
}
#portfolio_page .informations-list[data-informations-layout]:not([data-informations-layout="grid"]) .information-item__cta {
align-self: flex-start;
margin-top: auto;
}
#portfolio_page .informations-list[data-informations-layout]:not([data-informations-layout="grid"]) a.information-item:is(:hover, :focus-visible) .information-item__title {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Polaroïd, texte seul : grille régulière, jamais plus de 3 colonnes. */
#portfolio_page .informations-list:is([data-informations-layout="polaroid"], [data-informations-layout="minimal"]) {
grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
gap: calc(1.5rem * var(--pf-density-gap, 1));
}
#portfolio_page .informations-list[data-informations-layout="polaroid"] .information-item {
padding: calc(0.75rem * var(--pf-density-pad, 1)) calc(0.75rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
rotate: -1.5deg;
}
#portfolio_page .informations-list[data-informations-layout="polaroid"] .information-item:nth-child(even) {
rotate: 1.5deg;
}
#portfolio_page .informations-list[data-informations-layout="polaroid"] .information-item__illustration {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--pf-radius-inner);
}
/* Texte seul : pas d'image, fiches aérées. */
#portfolio_page .informations-list:is([data-informations-layout="minimal"], [data-informations-layout="reveal"], [data-informations-layout="index"]) .information-item__illustration {
display: none;
}
#portfolio_page .informations-list[data-informations-layout="minimal"] .information-item {
padding: 0;
}
/* Lignes : une fiche par ligne (liste, index, journal, survol, grand format). */
#portfolio_page .informations-list:is([data-informations-layout="list"], [data-informations-layout="index"], [data-informations-layout="journal"], [data-informations-layout="reveal"], [data-informations-layout="feature"]) {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
/* Liste : vignette à gauche, texte, bouton à droite. */
#portfolio_page .informations-list[data-informations-layout="list"] .information-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "media title cta" "media text cta";
align-items: center;
gap: calc(0.35rem * var(--pf-density-gap, 1)) calc(1.5rem * var(--pf-density-gap, 1));
padding: calc(1.1rem * var(--pf-density-pad, 1)) 0;
text-align: left;
}
#portfolio_page .informations-list[data-informations-layout="list"] .information-item__illustration {
grid-area: media;
width: 7.5rem;
aspect-ratio: 1;
margin: 0;
}
#portfolio_page .informations-list[data-informations-layout="list"] .information-item__title {
grid-area: title;
align-self: end;
text-align: left;
}
#portfolio_page .informations-list[data-informations-layout="list"] .information-item__description {
grid-area: text;
align-self: start;
}
#portfolio_page .informations-list[data-informations-layout="list"] .information-item__cta {
grid-area: cta;
align-self: center;
margin: 0;
}
/* Index numéroté : numéro, titre + texte, bouton. */
#portfolio_page .informations-list[data-informations-layout="index"] .information-item {
display: grid;
grid-template-columns: 4rem minmax(0, 1fr) auto;
align-items: baseline;
gap: calc(0.35rem * var(--pf-density-gap, 1)) calc(1.5rem * var(--pf-density-gap, 1));
padding: calc(1.1rem * var(--pf-density-pad, 1)) 0;
text-align: left;
}
#portfolio_page .informations-list[data-informations-layout="index"] .information-item::before {
content: counter(pf-information, decimal-leading-zero);
grid-row: 1 / span 2;
font-variant-numeric: tabular-nums;
opacity: 0.55;
}
#portfolio_page .informations-list[data-informations-layout="index"] :is(.information-item__title, .information-item__description) {
grid-column: 2;
text-align: left;
}
#portfolio_page .informations-list[data-informations-layout="index"] .information-item__description {
opacity: 0.75;
}
#portfolio_page .informations-list[data-informations-layout="index"] .information-item__cta {
grid-column: 3;
grid-row: 1 / span 2;
align-self: center;
margin: 0;
}
/* Journal : axe vertical, pastille par fiche. */
#portfolio_page .informations-list[data-informations-layout="journal"] {
position: relative;
padding-left: calc(2rem * var(--pf-density-pad, 1));
}
#portfolio_page .informations-list[data-informations-layout="journal"]::before {
content: "";
position: absolute;
top: 0.5rem;
bottom: 0.5rem;
left: 0.45rem;
width: 2px;
background: var(--pf-accent);
opacity: 0.4;
}
#portfolio_page .informations-list[data-informations-layout="journal"] .information-item {
position: relative;
padding: 0 0 calc(1.5rem * var(--pf-density-pad, 1)) calc(1rem * var(--pf-density-pad, 1));
margin-bottom: 1.5rem;
text-align: left;
}
#portfolio_page .informations-list[data-informations-layout="journal"] .information-item::before {
content: "";
position: absolute;
top: 0.35rem;
left: -1.95rem;
width: 0.9rem;
height: 0.9rem;
border-radius: 50%;
background: var(--pf-accent);
box-shadow: 0 0 0 4px var(--pf-surface);
}
#portfolio_page .informations-list[data-informations-layout="journal"] .information-item__illustration {
width: min(100%, 20rem);
}
#portfolio_page .informations-list[data-informations-layout="journal"] .information-item__title {
text-align: left;
}
/* Titres au survol : grands titres, le détail se déplie au survol. */
#portfolio_page .informations-list[data-informations-layout="reveal"] .information-item {
padding: calc(1rem * var(--pf-density-pad, 1)) 0;
text-align: left;
}
#portfolio_page .informations-list[data-informations-layout="reveal"] .information-item__title {
font-size: clamp(1.4rem, 3vw, 2.2rem);
line-height: 1.15;
text-align: left;
transition: opacity 0.25s ease;
}
#portfolio_page .informations-list[data-informations-layout="reveal"]:hover .information-item:not(:hover) .information-item__title {
opacity: 0.4;
}
#portfolio_page .informations-list[data-informations-layout="reveal"] :is(.information-item__description, .information-item__cta) {
display: none;
}
#portfolio_page .informations-list[data-informations-layout="reveal"] .information-item:is(:hover, :focus-within, :focus-visible) :is(.information-item__description, .information-item__cta) {
display: block;
}
/* Grand format : une fiche par bandeau, image et texte côte à côte. */
#portfolio_page .informations-list[data-informations-layout="feature"] {
gap: calc(2rem * var(--pf-density-gap, 1));
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item {
min-width: 0;
color: inherit;
text-decoration: none;
counter-increment: pf-information;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
align-items: start;
gap: calc(0.75rem * var(--pf-density-gap, 1)) calc(2.5rem * var(--pf-density-gap, 1));
padding: 0;
overflow: hidden;
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item__illustration {
grid-column: 1;
grid-row: 1 / span 3;
width: 100%;
max-width: none;
height: 100%;
min-height: 16rem;
margin: 0;
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item:has(.information-item__illustration) > :not(.information-item__illustration) {
grid-column: 2;
padding-right: calc(1.5rem * var(--pf-density-pad, 1));
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item:has(.information-item__illustration) .information-item__title {
padding-top: calc(1.5rem * var(--pf-density-pad, 1));
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item:not(:has(.information-item__illustration)) > * {
grid-column: 1 / -1;
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item__title {
font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item__cta {
margin: 0.5rem 0 1.5rem;
}
/* Ordinateur : titre, texte et bouton groupés au milieu de la hauteur de l'image (plus de titre en haut et
de bouton en bas). */
@media (min-width: 1101px) {
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item:has(.information-item__illustration) {
grid-template-rows: 1fr auto auto auto 1fr;
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item:has(.information-item__illustration) .information-item__illustration {
grid-row: 1 / -1;
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item:has(.information-item__illustration) .information-item__title {
grid-row: 2;
padding-top: 0;
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item:has(.information-item__illustration) .information-item__description {
grid-row: 3;
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item:has(.information-item__illustration) .information-item__cta {
grid-row: 4;
margin-bottom: 0;
}
}
/* Magazine : la première fiche en grand (image à gauche), les autres en grille. */
#portfolio_page .informations-list[data-informations-layout="magazine"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: calc(1.5rem * var(--pf-density-gap, 1));
}
#portfolio_page .informations-list[data-informations-layout="magazine"] .information-item__illustration {
width: 100%;
aspect-ratio: 16 / 10;
border-radius: var(--pf-radius-inner);
}
#portfolio_page .informations-list[data-informations-layout="magazine"] .information-item:first-child {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
grid-template-rows: auto auto 1fr;
align-items: start;
gap: calc(0.75rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1));
}
#portfolio_page .informations-list[data-informations-layout="magazine"] .information-item:first-child .information-item__illustration {
grid-row: 1 / span 3;
height: 100%;
margin: 0;
}
#portfolio_page .informations-list[data-informations-layout="magazine"] .information-item:first-child:has(.information-item__illustration) > :not(.information-item__illustration) {
grid-column: 2;
}
#portfolio_page .informations-list[data-informations-layout="magazine"] .information-item:first-child .information-item__title {
font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}
/* Mosaïque : tailles variées, image en fond de tuile si présente. */
#portfolio_page .informations-list[data-informations-layout="mosaic"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-flow: dense;
gap: calc(1rem * var(--pf-density-gap, 1));
}
#portfolio_page .informations-list[data-informations-layout="mosaic"] .information-item {
padding: calc(1rem * var(--pf-density-pad, 1));
}
#portfolio_page .informations-list[data-informations-layout="mosaic"] .information-item:nth-child(5n + 1) {
grid-column: span 2;
grid-row: span 2;
}
#portfolio_page .informations-list[data-informations-layout="mosaic"] .information-item:nth-child(5n + 4) {
grid-column: span 2;
}
#portfolio_page .informations-list[data-informations-layout="mosaic"] .information-item__illustration {
width: 100%;
flex: 1 1 auto;
min-height: 8rem;
border-radius: var(--pf-radius-inner);
}
/* Bento : 4 colonnes, la première fiche sur 2 × 2. */
#portfolio_page .informations-list[data-informations-layout="bento"] {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-flow: dense;
gap: calc(1rem * var(--pf-density-gap, 1));
}
#portfolio_page .informations-list[data-informations-layout="bento"] .information-item:nth-child(7n + 1) {
grid-column: span 2;
grid-row: span 2;
}
#portfolio_page .informations-list[data-informations-layout="bento"] .information-item:is(:nth-child(7n + 2), :nth-child(7n + 5)) {
grid-column: span 2;
}
#portfolio_page .informations-list[data-informations-layout="bento"] .information-item__illustration {
width: 100%;
aspect-ratio: 16 / 10;
border-radius: var(--pf-radius-inner);
}
#portfolio_page .informations-list[data-informations-layout="bento"] .information-item:nth-child(7n + 1) .information-item__title {
font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}
/* Défilement : bande horizontale aimantée. */
#portfolio_page .informations-list[data-informations-layout="carousel"] {
display: flex;
gap: calc(1.25rem * var(--pf-density-gap, 1));
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
scrollbar-width: thin;
}
#portfolio_page .informations-list[data-informations-layout="carousel"] .information-item {
flex: 0 0 clamp(15rem, 28vw, 22rem);
height: auto;
scroll-snap-align: start;
}
#portfolio_page .informations-list[data-informations-layout="carousel"] .information-item__illustration {
width: 100%;
aspect-ratio: 16 / 10;
border-radius: var(--pf-radius-inner);
}
/* Styles sans fond : titre aux couleurs de la page. */
#portfolio_page .informations-list:is([data-informations-layout="list"], [data-informations-layout="index"], [data-informations-layout="journal"], [data-informations-layout="minimal"], [data-informations-layout="reveal"], [data-informations-layout="feature"], [data-informations-layout="mosaic"]) .information-item__title {
color: var(--portfolios-heading-secondary-color, var(--pf-ink));
}
@media (max-width: 1100px) {
#portfolio_page .informations-list:is([data-informations-layout="magazine"], [data-informations-layout="mosaic"], [data-informations-layout="bento"]) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#portfolio_page .informations-list[data-informations-layout="list"] .information-item {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "media title" "media text" "media cta";
gap: calc(0.35rem * var(--pf-density-gap, 1)) calc(1rem * var(--pf-density-gap, 1));
}
#portfolio_page .informations-list[data-informations-layout="list"] .information-item__illustration {
width: 5rem;
}
#portfolio_page .informations-list[data-informations-layout="list"] .information-item__cta {
justify-self: start;
}
#portfolio_page .informations-list[data-informations-layout="index"] .information-item {
grid-template-columns: 2.5rem minmax(0, 1fr);
}
#portfolio_page .informations-list[data-informations-layout="index"] .information-item__cta {
grid-column: 2;
grid-row: auto;
justify-self: start;
}
/* Empilé : align-items de la grille d'ordinateur (start) calait chaque bloc à gauche, à sa largeur minimale
(description non centrée). Pleine largeur : le texte suit l'alignement de la fiche ; le bouton aussi. */
#portfolio_page .informations-list:is([data-informations-layout="feature"], [data-informations-layout="magazine"]) .information-item:is(*, :first-child) {
display: flex;
flex-direction: column;
align-items: stretch;
}
#portfolio_page .informations-list:is([data-informations-layout="feature"], [data-informations-layout="magazine"]) .information-item__cta {
align-self: flex-start;
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item:has(.information-item__illustration) > :not(.information-item__illustration) {
padding: 0 calc(1rem * var(--pf-density-pad, 1));
}
#portfolio_page .informations-list[data-informations-layout="feature"] .information-item__illustration {
min-height: 0;
aspect-ratio: 16 / 10;
}
#portfolio_page .informations-list[data-informations-layout="carousel"] .information-item {
flex-basis: 78vw;
}
}
@media (prefers-reduced-motion: reduce) {
#portfolio_page {
--pf-submenu-speed: 0;
}
}
}
/* assets/css/public/design/elements/options.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 19-10-2026-c4 */
/* Éléments de contenu — réglages fins par élément (plan-elements-contenu.md, lot C4), chargés après les feuilles
d'élément (portfolios_content_element_sheets()). Attributs posés sur le header seulement quand le réglage s'écarte
de la disposition (portfolios_element_option_attrs(), matrices_registry.php) ; Premium.
1. Densité : facteurs lus par les écarts (--pf-density-gap) et les marges intérieures (--pf-density-pad) des feuilles
d'élément, calc( * var(--pf-density-…, 1)) : sans réglage, rendu inchangé. Les écarts déjà en
var(--layout-gap) (grilles .pf-cols, vignettes) suivent --layout-gap, redéfini sur le conteneur (20px à la racine).
2. Colonnes sur ordinateur (dès 1101px) : dispositions en grille (Grille, Polaroïd, Bento, Magazine) ; mobile inchangé.
Œuvres : seul le nombre par ligne change (--_thumbs), le format reste celui du type.
3. Infos affichées : infos masquées (data-<élément>-hide, liste de mots). */
/* --- 1. Densité ------------------------------------------------------------------------------------------- */
#portfolio_page:has(header[data-articles-density="tight"]) .blog-list,
#portfolio_page:has(header[data-events-density="tight"]) #agenda-list,
#portfolio_page:has(header[data-services-density="tight"]) .services-slider,
#portfolio_page:has(header[data-works-density="tight"]) .pf-thumbs:not([data-layout-slot="images"]),
#portfolio_page:has(header[data-images-density="tight"]) :is(#gallery, #production-show-photos-grid, .pf-thumbs[data-layout-slot="images"]),
#portfolio_page:has(header[data-awards-density="tight"]) :is(.awards-list, ul.festivals),
#portfolio_page:has(header[data-timeline-density="tight"]) [data-timeline-layout],
#portfolio_page:has(header[data-recommendations-density="tight"]) [data-recommendations-layout],
#portfolio_page:has(header[data-casting-density="tight"]) [data-casting-layout],
#portfolio_page:has(header[data-informations-density="tight"]) .informations-list {
--pf-density-gap: 0.5;
--pf-density-pad: 0.7;
--layout-gap: calc(20px * 0.5);
}
#portfolio_page:has(header[data-recommendations-density="tight"]) [data-recommendations-layout] .recommendations-grid {
--layout-gap: calc(20px * 0.5);
--layout-space-y-md: calc(25px * 0.7);
--layout-space-x-md: calc(20px * 0.7);
}
#portfolio_page:has(header[data-articles-density="airy"]) .blog-list,
#portfolio_page:has(header[data-events-density="airy"]) #agenda-list,
#portfolio_page:has(header[data-services-density="airy"]) .services-slider,
#portfolio_page:has(header[data-works-density="airy"]) .pf-thumbs:not([data-layout-slot="images"]),
#portfolio_page:has(header[data-images-density="airy"]) :is(#gallery, #production-show-photos-grid, .pf-thumbs[data-layout-slot="images"]),
#portfolio_page:has(header[data-awards-density="airy"]) :is(.awards-list, ul.festivals),
#portfolio_page:has(header[data-timeline-density="airy"]) [data-timeline-layout],
#portfolio_page:has(header[data-recommendations-density="airy"]) [data-recommendations-layout],
#portfolio_page:has(header[data-casting-density="airy"]) [data-casting-layout],
#portfolio_page:has(header[data-informations-density="airy"]) .informations-list {
--pf-density-gap: 1.75;
--pf-density-pad: 1.35;
--layout-gap: calc(20px * 1.75);
}
#portfolio_page:has(header[data-recommendations-density="airy"]) [data-recommendations-layout] .recommendations-grid {
--layout-gap: calc(20px * 1.75);
--layout-space-y-md: calc(25px * 1.35);
--layout-space-x-md: calc(20px * 1.35);
}
/* --- 2. Colonnes sur ordinateur ---------------------------------------------------------------------------- */
@media (min-width: 1101px) {
#portfolio_page:has(header[data-articles-cols="2"]) .blog-list[data-articles-layout="grid"],
#portfolio_page:has(header[data-articles-cols="2"]) .blog-list[data-articles-layout="polaroid"],
#portfolio_page:has(header[data-articles-cols="2"]) .blog-list[data-articles-layout="bento"],
#portfolio_page:has(header[data-articles-cols="2"]) .blog-list[data-articles-layout="magazine"],
#portfolio_page:has(header[data-events-cols="2"]) #agenda-list[data-events-layout="grid"],
#portfolio_page:has(header[data-events-cols="2"]) #agenda-list[data-events-layout="polaroid"],
#portfolio_page:has(header[data-events-cols="2"]) #agenda-list[data-events-layout="bento"],
#portfolio_page:has(header[data-events-cols="2"]) #agenda-list[data-events-layout="magazine"],
#portfolio_page:has(header[data-services-cols="2"]) .services-slider[data-services-layout="grid"],
#portfolio_page:has(header[data-services-cols="2"]) .services-slider[data-services-layout="polaroid"],
#portfolio_page:has(header[data-services-cols="2"]) .services-slider[data-services-layout="bento"],
#portfolio_page:has(header[data-services-cols="2"]) .services-slider[data-services-layout="magazine"],
#portfolio_page:has(header[data-images-cols="2"]) :is(#gallery, #production-show-photos-grid)[data-images-layout="grid"],
#portfolio_page:has(header[data-images-cols="2"]) :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"],
#portfolio_page:has(header[data-images-cols="2"]) :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"],
#portfolio_page:has(header[data-images-cols="2"]) :is(#gallery, #production-show-photos-grid)[data-images-layout="magazine"],
#portfolio_page:has(header[data-awards-cols="2"]) :is(.awards-list, ul.festivals)[data-awards-layout="grid"],
#portfolio_page:has(header[data-awards-cols="2"]) :is(.awards-list, ul.festivals)[data-awards-layout="polaroid"],
#portfolio_page:has(header[data-awards-cols="2"]) :is(.awards-list, ul.festivals)[data-awards-layout="bento"],
#portfolio_page:has(header[data-awards-cols="2"]) :is(.awards-list, ul.festivals)[data-awards-layout="magazine"],
#portfolio_page:has(header[data-recommendations-cols="2"]) [data-recommendations-layout="grid"] .recommendations-grid,
#portfolio_page:has(header[data-recommendations-cols="2"]) [data-recommendations-layout="polaroid"] .recommendations-grid,
#portfolio_page:has(header[data-recommendations-cols="2"]) [data-recommendations-layout="bento"] .recommendations-grid,
#portfolio_page:has(header[data-recommendations-cols="2"]) [data-recommendations-layout="magazine"] .recommendations-grid {
--_cols: 2;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#portfolio_page:has(header[data-works-cols="2"]) .pf-thumbs[data-works-layout="grid"]:not([data-layout-slot="images"]),
#portfolio_page:has(header[data-works-cols="2"]) .pf-thumbs[data-works-layout="polaroid"]:not([data-layout-slot="images"]),
#portfolio_page:has(header[data-works-cols="2"]) .pf-thumbs[data-works-layout="bento"]:not([data-layout-slot="images"]),
#portfolio_page:has(header[data-works-cols="2"]) .pf-thumbs[data-works-layout="magazine"]:not([data-layout-slot="images"]) {
--_thumbs: 2;
}
#portfolio_page:has(header[data-services-cols="2"]) .services-slider[data-services-layout="grid"] {
--pf-services-cols: 2;
}
#portfolio_page:has(header[data-articles-cols="3"]) .blog-list[data-articles-layout="grid"],
#portfolio_page:has(header[data-articles-cols="3"]) .blog-list[data-articles-layout="polaroid"],
#portfolio_page:has(header[data-articles-cols="3"]) .blog-list[data-articles-layout="bento"],
#portfolio_page:has(header[data-articles-cols="3"]) .blog-list[data-articles-layout="magazine"],
#portfolio_page:has(header[data-events-cols="3"]) #agenda-list[data-events-layout="grid"],
#portfolio_page:has(header[data-events-cols="3"]) #agenda-list[data-events-layout="polaroid"],
#portfolio_page:has(header[data-events-cols="3"]) #agenda-list[data-events-layout="bento"],
#portfolio_page:has(header[data-events-cols="3"]) #agenda-list[data-events-layout="magazine"],
#portfolio_page:has(header[data-services-cols="3"]) .services-slider[data-services-layout="grid"],
#portfolio_page:has(header[data-services-cols="3"]) .services-slider[data-services-layout="polaroid"],
#portfolio_page:has(header[data-services-cols="3"]) .services-slider[data-services-layout="bento"],
#portfolio_page:has(header[data-services-cols="3"]) .services-slider[data-services-layout="magazine"],
#portfolio_page:has(header[data-images-cols="3"]) :is(#gallery, #production-show-photos-grid)[data-images-layout="grid"],
#portfolio_page:has(header[data-images-cols="3"]) :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"],
#portfolio_page:has(header[data-images-cols="3"]) :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"],
#portfolio_page:has(header[data-images-cols="3"]) :is(#gallery, #production-show-photos-grid)[data-images-layout="magazine"],
#portfolio_page:has(header[data-awards-cols="3"]) :is(.awards-list, ul.festivals)[data-awards-layout="grid"],
#portfolio_page:has(header[data-awards-cols="3"]) :is(.awards-list, ul.festivals)[data-awards-layout="polaroid"],
#portfolio_page:has(header[data-awards-cols="3"]) :is(.awards-list, ul.festivals)[data-awards-layout="bento"],
#portfolio_page:has(header[data-awards-cols="3"]) :is(.awards-list, ul.festivals)[data-awards-layout="magazine"],
#portfolio_page:has(header[data-recommendations-cols="3"]) [data-recommendations-layout="grid"] .recommendations-grid,
#portfolio_page:has(header[data-recommendations-cols="3"]) [data-recommendations-layout="polaroid"] .recommendations-grid,
#portfolio_page:has(header[data-recommendations-cols="3"]) [data-recommendations-layout="bento"] .recommendations-grid,
#portfolio_page:has(header[data-recommendations-cols="3"]) [data-recommendations-layout="magazine"] .recommendations-grid {
--_cols: 3;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#portfolio_page:has(header[data-works-cols="3"]) .pf-thumbs[data-works-layout="grid"]:not([data-layout-slot="images"]),
#portfolio_page:has(header[data-works-cols="3"]) .pf-thumbs[data-works-layout="polaroid"]:not([data-layout-slot="images"]),
#portfolio_page:has(header[data-works-cols="3"]) .pf-thumbs[data-works-layout="bento"]:not([data-layout-slot="images"]),
#portfolio_page:has(header[data-works-cols="3"]) .pf-thumbs[data-works-layout="magazine"]:not([data-layout-slot="images"]) {
--_thumbs: 3;
}
#portfolio_page:has(header[data-services-cols="3"]) .services-slider[data-services-layout="grid"] {
--pf-services-cols: 3;
}
#portfolio_page:has(header[data-articles-cols="4"]) .blog-list[data-articles-layout="grid"],
#portfolio_page:has(header[data-articles-cols="4"]) .blog-list[data-articles-layout="polaroid"],
#portfolio_page:has(header[data-articles-cols="4"]) .blog-list[data-articles-layout="bento"],
#portfolio_page:has(header[data-articles-cols="4"]) .blog-list[data-articles-layout="magazine"],
#portfolio_page:has(header[data-events-cols="4"]) #agenda-list[data-events-layout="grid"],
#portfolio_page:has(header[data-events-cols="4"]) #agenda-list[data-events-layout="polaroid"],
#portfolio_page:has(header[data-events-cols="4"]) #agenda-list[data-events-layout="bento"],
#portfolio_page:has(header[data-events-cols="4"]) #agenda-list[data-events-layout="magazine"],
#portfolio_page:has(header[data-services-cols="4"]) .services-slider[data-services-layout="grid"],
#portfolio_page:has(header[data-services-cols="4"]) .services-slider[data-services-layout="polaroid"],
#portfolio_page:has(header[data-services-cols="4"]) .services-slider[data-services-layout="bento"],
#portfolio_page:has(header[data-services-cols="4"]) .services-slider[data-services-layout="magazine"],
#portfolio_page:has(header[data-images-cols="4"]) :is(#gallery, #production-show-photos-grid)[data-images-layout="grid"],
#portfolio_page:has(header[data-images-cols="4"]) :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"],
#portfolio_page:has(header[data-images-cols="4"]) :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"],
#portfolio_page:has(header[data-images-cols="4"]) :is(#gallery, #production-show-photos-grid)[data-images-layout="magazine"],
#portfolio_page:has(header[data-awards-cols="4"]) :is(.awards-list, ul.festivals)[data-awards-layout="grid"],
#portfolio_page:has(header[data-awards-cols="4"]) :is(.awards-list, ul.festivals)[data-awards-layout="polaroid"],
#portfolio_page:has(header[data-awards-cols="4"]) :is(.awards-list, ul.festivals)[data-awards-layout="bento"],
#portfolio_page:has(header[data-awards-cols="4"]) :is(.awards-list, ul.festivals)[data-awards-layout="magazine"],
#portfolio_page:has(header[data-recommendations-cols="4"]) [data-recommendations-layout="grid"] .recommendations-grid,
#portfolio_page:has(header[data-recommendations-cols="4"]) [data-recommendations-layout="polaroid"] .recommendations-grid,
#portfolio_page:has(header[data-recommendations-cols="4"]) [data-recommendations-layout="bento"] .recommendations-grid,
#portfolio_page:has(header[data-recommendations-cols="4"]) [data-recommendations-layout="magazine"] .recommendations-grid {
--_cols: 4;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#portfolio_page:has(header[data-works-cols="4"]) .pf-thumbs[data-works-layout="grid"]:not([data-layout-slot="images"]),
#portfolio_page:has(header[data-works-cols="4"]) .pf-thumbs[data-works-layout="polaroid"]:not([data-layout-slot="images"]),
#portfolio_page:has(header[data-works-cols="4"]) .pf-thumbs[data-works-layout="bento"]:not([data-layout-slot="images"]),
#portfolio_page:has(header[data-works-cols="4"]) .pf-thumbs[data-works-layout="magazine"]:not([data-layout-slot="images"]) {
--_thumbs: 4;
}
#portfolio_page:has(header[data-services-cols="4"]) .services-slider[data-services-layout="grid"] {
--pf-services-cols: 4;
}
}
/* --- 3. Infos affichées -------------------------------------------------------------------------------------- */
#portfolio_page:has(header[data-articles-hide~="date"]) .blog-list .article-blog-infos__date,
#portfolio_page:has(header[data-articles-hide~="category"]) .blog-list .article-blog-infos__category,
#portfolio_page:has(header[data-articles-hide~="excerpt"]) .blog-list .article-blog-infos__description,
#portfolio_page:has(header[data-events-hide~="place"]) #agenda-list .agenda-item-place,
#portfolio_page:has(header[data-events-hide~="time"]) #agenda-list .agenda-item-time,
#portfolio_page:has(header[data-events-hide~="description"]) #agenda-list .agenda-item-description,
#portfolio_page:has(header[data-services-hide~="strike"]) .services-slider :is(.price-old, .price-discount),
#portfolio_page:has(header[data-services-hide~="content"]) .services-slider .service-body,
#portfolio_page:has(header[data-services-hide~="offer"]) .services-slider :is(.service-badge, .promo-banner),
#portfolio_page:has(header[data-works-hide~="subtitle"]) .pf-thumbs:not([data-layout-slot="images"]) :is(.vertical-infos, .horizontal-infos, .square-infos) > p,
#portfolio_page:has(header[data-awards-hide~="logo"]) :is(.awards-list, ul.festivals) .award__logo,
#portfolio_page:has(header[data-recommendations-hide~="year"]) [data-recommendations-layout] .recommendation-year,
#portfolio_page:has(header[data-recommendations-hide~="photo"]) [data-recommendations-layout] .recommendation-author-photo {
display: none;
}
/* Date et catégorie masquées : la ligne qui les porte disparaît aussi (pas de marge vide). */
#portfolio_page:has(header[data-articles-hide~="date"][data-articles-hide~="category"]) .blog-list .article-blog-infos__meta {
display: none;
}
}
/* assets/css/public/design/themes/basic/menu-desktop.css */
/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 16-10-2026 — menus ordinateur (plan-header-footer.md, lot E2) */
/*
* Menus ordinateur, liens dans la barre : sous-menus en petite liste (bandeau) et en grand cadre (méga),
* menu trop rempli (deux lignes puis défilement), ouverture des sous-pages au survol.
* 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).
*/
/* --- Sous-menus (bandeau sous l'en-tête, menus « En ligne » et « Méga ») ----
Habillage commun piloté par variables ; chaque thème (matrices/.css) règle les siennes sur
header[data-matrix=""], comme pour les cartes. Fond par défaut : celui du menu (themes/basic/nav-background.css). */
#portfolio_page header[data-matrix] {
--pf-submenu-bg: var(--portfolios-nav-bg-color, transparent);
--pf-submenu-edge: 0 solid transparent;
--pf-submenu-rule: var(--pf-submenu-edge);
/* Fenêtre de sous-menu : angles des liens. Arrondi des liens + marge intérieure (0,5rem) pour rester
concentrique, liens carrés ⇒ fenêtre carrée, plafonné pour les liens en pilule. */
--pf-submenu-radius: min(calc(var(--portfolios-nav-links-radius, 0px) + min(var(--portfolios-nav-links-radius, 0px), 0.5rem)), 1.75rem);
--pf-submenu-shadow: var(--pf-panel-shadow, 0 10px 30px rgba(0, 0, 0, 0.14));
/* Menus flottants (panneau, tiroir, feuille, barre flottante, bulles, palette, onglets) :
fond du menu choisi par l'utilisateur sur le fond du site, arrondi qui suit celui des liens,
contour / ombre / flou propres au thème (chaque matrices/.css peut les régler). */
--pf-float-bg: var(--pf-nav-panel-bg);
--pf-float-edge: max(1px, var(--pf-border-width)) solid color-mix(in srgb, var(--portfolios-nav-text-color, currentColor) 14%, transparent);
--pf-float-radius: min(calc(var(--portfolios-nav-links-radius, 0.5rem) + 0.5rem), 1.75rem);
--pf-float-chip-radius: var(--pf-pill-radius);
--pf-float-shadow: var(--pf-sheet-shadow);
--pf-float-blur: var(--portfolios-nav-bg-blur-custom, none);
--pf-float-gap: 0.75rem;
}
@media (min-width: 1101px) {
#portfolio_page header:is([data-nav-desktop="inline"], [data-nav-desktop="mega"]) #header-nav .item-has-children > .sub-menu {
box-sizing: border-box;
z-index: 30;
}
#portfolio_page header[data-nav-desktop="inline"] #header-nav .item-has-children > .sub-menu {
min-width: 11rem;
}
#portfolio_page header:is([data-nav-desktop="inline"], [data-nav-desktop="mega"]) #header-nav .item-has-children > .sub-menu .sub-menu-content {
box-sizing: border-box;
}
#portfolio_page header:is([data-nav-desktop="inline"], [data-nav-desktop="mega"]) #header-nav .item-has-children > .sub-menu li {
margin: 0;
list-style: none;
}
#portfolio_page header[data-nav-desktop="inline"] #header-nav .item-has-children > .sub-menu a {
white-space: nowrap;
text-align: start;
}
/* Souligné / Texte seul : le lien s'arrête au texte (le trait aussi) ; l'écart latéral passe en marge,
et le dessous garde au moins la place du trait (themes/basic/links.css). */
#portfolio_page header[data-nav-desktop="inline"] #header-nav.nav--underline .item-has-children > .sub-menu a {
width: fit-content;
}
/* Méga : bande sous le header, alignée sur la largeur du contenu. */
/* Toute la largeur de l'en-tête, quel que soit le repère (liste, pilule…) : position calculée
par header.js (portfoliosPlaceMegaMenus → --pf-mega-left / --pf-mega-width). */
/* Bande pleine largeur : pas d'arrondi ni de contour latéral. */
/* Contenu calé comme l'en-tête : largeur du site, marge latérale du header, alignement du menu. */
#portfolio_page header[data-nav-desktop="mega"] #header-nav .item-has-children > .sub-menu ul {
justify-content: flex-start;
box-sizing: border-box;
text-align: start;
}
/* En-tête « En bulle » (et îlots de Bento / Verre) : le grand cadre devient lui aussi une bulle,
en retrait des bords comme l'en-tête, arrondi et ombré, au lieu d'une bande bord à bord. */
#portfolio_page header[data-nav-desktop="mega"]:is([data-header-desktop="island"], [data-island="own"][data-header-desktop="theme"]) #header-nav .item-has-children > .sub-menu .sub-menu-content {
overflow: hidden;
}
#portfolio_page header[data-nav-desktop="mega"].nav-center #header-nav .item-has-children > .sub-menu ul {
justify-content: center;
text-align: center;
}
#portfolio_page header[data-nav-desktop="mega"].nav-right #header-nav .item-has-children > .sub-menu ul {
justify-content: flex-end;
text-align: end;
}
}
/* --- Menu trop rempli : deux lignes au plus, puis défilement horizontal -------------------
.nav-scroll-x posé par header.js (portfoliosFitNavLines) quand les liens prendraient plus de deux lignes
(ordinateur, menus visibles ; jamais la colonne ni le bouton Menu). Liste sur une ligne qui défile ;
sous-menus en position fixe calée sur leur lien (--pf-sub-top / --pf-sub-left), sinon le défilement
de la liste les rognerait. Spécificité : passe devant les flex-wrap: wrap !important des thèmes
et de l'aperçu de l'éditeur (customizer-matrices.css). */
#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav.nav {
min-width: 0;
}
#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav .nav__content {
min-width: 0;
max-width: 100%;
}
#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav .nav__content .nav__list {
max-width: 100%;
overscroll-behavior-x: contain;
scrollbar-width: thin;/* Place des ombres et contours des liens (Brutal…), que le défilement rognerait. */
}
#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav .nav__content .nav__list > li {
flex: none;
}
/* Grand cadre : bande sous l'en-tête, sur toute sa largeur (header.js : --pf-mega-width). */
/* --- Méga-menu : sous-menus en panneau pleine largeur, colonnes ---------- */
#portfolio_page header[data-nav-desktop="mega"] .item-has-children {
position: static;
}
#portfolio_page header[data-nav-desktop="mega"] .item-has-children > .sub-menu {
left: 0;
right: 0;
width: 100%;
max-width: none;
}
#portfolio_page header[data-nav-desktop="mega"] .item-has-children > .sub-menu ul {
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
gap: 0.25rem 2rem;
padding-block: 1.5rem;
}
#portfolio_page header[data-nav-desktop="mega"] .item-has-children > .sub-menu ul a {
display: block;
}
/* Déroulant ordinateur. Jamais sur un menu hamburger (data-nav-menu) : ses sous-menus sont en flux,
cachés ici ils garderaient leur hauteur (grands vides). :where() garde la spécificité d'origine. */
@media (min-width: 1101px) {
#portfolio_page header:not([data-header-rail]):not(.nav-ctx-panel):where(:not([data-nav-menu])) #header-nav.nav .item-has-children > .sub-menu .sub-menu-content {
transform: translateY(-0.4rem);
transition: transform calc(0.28s * var(--pf-submenu-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1);
}
#portfolio_page header:not([data-header-rail]):not(.nav-ctx-panel):where(:not([data-nav-menu])) #header-nav.nav .item-has-children:is(:hover, :focus-within, .submenu-hover-intent) > .sub-menu .sub-menu-content {
transform: none;
}
/* Bandeau par défaut : liens espacés. */
#portfolio_page header:not([data-header-rail]):not(.nav-ctx-panel):where(:not([data-nav-menu])) #header-nav.nav .item-has-children > .sub-menu ul {
gap: 0.6rem 2rem;
}
}
}
/* 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-nav-desktop="inline"] #header-nav .item-has-children {
position: relative;
}
}
@media (min-width: 1101px) {
#portfolio_page header:is([data-nav-desktop="inline"], [data-nav-desktop="mega"]) #header-nav .item-has-children > .sub-menu {
position: absolute;
top: 100%;
bottom: auto;
padding: var(--pf-submenu-gap, 0.5rem) 0 0;
background: none;
}
}
@media (min-width: 1101px) {
#portfolio_page header[data-nav-desktop="inline"] #header-nav .item-has-children > .sub-menu {
left: 50%;
right: auto;
width: max-content;
max-width: min(22rem, calc(100vw - 2rem));
transform: translateX(-50%);
}
}
@media (min-width: 1101px) {
#portfolio_page header:is([data-nav-desktop="inline"], [data-nav-desktop="mega"]) #header-nav .item-has-children > .sub-menu .sub-menu-content {
width: auto;
margin: 0;
padding: 0.5rem;
border: var(--pf-submenu-rule);
border-radius: var(--pf-submenu-radius);
background: linear-gradient(var(--pf-submenu-bg), var(--pf-submenu-bg)), var(--portfolios-theme-bg-main, #fff);
box-shadow: var(--pf-submenu-shadow);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
@media (min-width: 1101px) {
#portfolio_page header[data-nav-desktop="inline"] #header-nav .item-has-children > .sub-menu ul {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.3rem;
width: auto;
max-width: none;
margin: 0;
padding: 0;
}
}
@media (min-width: 1101px) {
#portfolio_page header[data-nav-desktop="inline"] #header-nav .item-has-children > .sub-menu a {
display: block;
}
}
@media (min-width: 1101px) {
#portfolio_page header[data-nav-desktop="inline"] #header-nav.nav--underline .item-has-children > .sub-menu a {
margin-inline: var(--pf-nav-link-pad-x, 1rem);
}
}
@media (min-width: 1101px) {
#portfolio_page header[data-nav-desktop="mega"] #header-nav .item-has-children {
position: static;
}
}
@media (min-width: 1101px) {
#portfolio_page header[data-nav-desktop="mega"] #header-nav .item-has-children > .sub-menu {
left: var(--pf-mega-left, 0px);
right: auto;
width: var(--pf-mega-width, 100%);
max-width: none;
transform: none;
}
}
@media (min-width: 1101px) {
#portfolio_page header[data-nav-desktop="mega"] #header-nav .item-has-children > .sub-menu .sub-menu-content {
padding: 0;
border-inline: 0;
border-radius: 0;
}
}
@media (min-width: 1101px) {
#portfolio_page header[data-nav-desktop="mega"] #header-nav .item-has-children > .sub-menu ul {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 2.5rem;
width: 100%;
max-width: var(--layout-width-wide, 100%);
margin-inline: auto;
padding: 1.25rem var(--pf-mega-pad, 20px);
}
}
@media (min-width: 1101px) {
#portfolio_page header[data-nav-desktop="mega"]:is([data-header-desktop="island"], [data-island="own"][data-header-desktop="theme"]) #header-nav .item-has-children > .sub-menu .sub-menu-content {
width: calc(100% - 2rem);
max-width: var(--layout-width-wide);
margin-inline: auto;
border: var(--pf-submenu-rule);
border-radius: max(var(--pf-radius, 0px), 1rem);
box-shadow: var(--pf-submenu-shadow);
}
}
#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav .nav__content .nav__list {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
padding: 4px 4px 8px;
}
#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav .nav__content .nav__list > li > a {
white-space: nowrap;
}
#portfolio_page #header.nav-scroll-x:not([data-header-rail]):not([data-nav-menu]) #header-nav .item-has-children > .sub-menu {
position: fixed;
top: var(--pf-sub-top, 100%);
left: var(--pf-sub-left, 0px);
}
#portfolio_page #header.nav-scroll-x[data-nav-desktop="mega"]:not([data-header-rail]):not([data-nav-menu]) #header-nav .item-has-children > .sub-menu {
transform: none;
}
#portfolio_page header[data-nav-desktop="mega"] .item-has-children > .sub-menu ul {
display: grid;
}
@media (min-width: 1101px) {
#portfolio_page header:not([data-header-rail]):not(.nav-ctx-panel):where(:not([data-nav-menu])) #header-nav.nav .item-has-children > .sub-menu {
display: block;
max-height: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity calc(0.22s * var(--pf-submenu-speed, 1)) ease, visibility 0s linear calc(0.22s * var(--pf-submenu-speed, 1));
}
}
@media (min-width: 1101px) {
#portfolio_page header:not([data-header-rail]):not(.nav-ctx-panel):where(:not([data-nav-menu])) #header-nav.nav .item-has-children:is(:hover, :focus-within, .submenu-hover-intent) > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity calc(0.22s * var(--pf-submenu-speed, 1)) ease, visibility 0s linear 0s;
}
}
}
/* assets/css/public/design/themes/basic/menu-rail.css */
/* @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//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 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 : 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;
}
}
}
/* assets/css/public/design/themes/basic/menu-panels.css */
/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 16-10-2026 — menus derrière le bouton Menu (plan-header-footer.md, lot E2) */
/*
* Menus derrière le bouton Menu, un seul rendu sur ordinateur et sur mobile (data-nav-active) : déroulant,
* depuis le bas (sheet), tiroir (drawer), plein écran ; fond des panneaux (--pf-nav-panel-bg) ; logo et bouton
* sur une ligne ; sous-pages en accordéon (nav-ctx-panel) ; accordéon des sous-menus sur écran étroit.
* 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).
*/
/* Fond des panneaux de menu (feuille, tiroir, plein écran, onglets, bulles, panneau) :
la couleur du menu posée sur le fond du site, comme le menu déroulant d'origine
(mobile.css : teinte ::before sur la page). Le texte reste --portfolios-nav-text-color. */
#portfolio_page header {
--pf-nav-panel-bg: linear-gradient(var(--portfolios-nav-bg-color, transparent), var(--portfolios-nav-bg-color, transparent)), var(--portfolios-theme-bg-main, #fff);
}
/* Motifs du menu hamburger : data-nav-active = motif réellement affiché (écran étroit : data-nav-mobile ;
écran large avec bouton Menu : data-nav-open converti). Aucune règle ne dépend de la largeur. */
/* --- Feuille : monte du bas, coins arrondis ---------------------------- */
#portfolio_page header[data-nav-active="sheet"] #header-nav {
top: auto;
right: var(--pf-float-gap, 0px);
bottom: calc(var(--pf-float-gap, 0px) + env(safe-area-inset-bottom, 0px));
left: var(--pf-float-gap, 0px);
max-height: 82vh;
border: var(--pf-float-edge, 0 solid transparent);
border-radius: var(--pf-float-radius, var(--pf-radius));
-webkit-backdrop-filter: var(--pf-float-blur, none);
backdrop-filter: var(--pf-float-blur, none);
clip-path: none;
-webkit-clip-path: none;
transform: translateY(calc(100% + 2rem));
transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s linear 0.45s;
background: var(--pf-float-bg, var(--pf-nav-panel-bg));
color: var(--portfolios-nav-text-color, inherit);
box-shadow: var(--pf-float-shadow, var(--pf-sheet-shadow-up));
}
#portfolio_page header[data-nav-active="sheet"] #header-nav.nav-full {
transform: none;
transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s;
}
#portfolio_page header[data-nav-active="sheet"] #header-nav .nav__content {
min-height: 0;
padding-top: 2.25rem;
}
#portfolio_page header[data-nav-active="sheet"] #header-nav .nav__content::before {
content: "";
position: absolute;
top: 0.75rem;
left: 50%;
width: 2.75rem;
height: 0.3rem;
margin-left: -1.375rem;
border-radius: var(--pf-pill-radius);
background: color-mix(in srgb, var(--portfolios-body-text-color, #111) 25%, transparent);
}
/* --- Tiroir latéral --------------------------------------------------- */
#portfolio_page header[data-nav-active="drawer"] #header-nav {
/* Sous l'en-tête : titre et bouton de fermeture restent hors du panneau. */
top: calc(var(--header-height, 5rem) + var(--pf-float-gap, 0px));
right: var(--pf-float-gap, 0px);
bottom: calc(var(--pf-float-gap, 0px) + env(safe-area-inset-bottom, 0px));
left: auto;
width: min(86vw, 24rem);
height: auto;
border: var(--pf-float-edge, 0 solid transparent);
border-radius: var(--pf-float-radius, 0px);
-webkit-backdrop-filter: var(--pf-float-blur, none);
backdrop-filter: var(--pf-float-blur, none);
clip-path: none;
-webkit-clip-path: none;
transform: translateX(calc(100% + 2rem));
transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s linear 0.42s;
background: var(--pf-float-bg, var(--pf-nav-panel-bg));
color: var(--portfolios-nav-text-color, inherit);
box-shadow: var(--pf-float-shadow, var(--pf-drawer-shadow));
}
#portfolio_page header[data-nav-active="drawer"] #header-nav.nav-full {
transform: none;
transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s;
}
#portfolio_page header[data-nav-active="drawer"] #header-nav .nav__content {
padding-top: 1.5rem;
}
/* Voile cliquable : fermeture au toucher (header.js). */
#portfolio_page header[data-nav-active="drawer"].mobile-nav-open::after,
#portfolio_page header[data-nav-active="sheet"].mobile-nav-open::after {
top: 0;
pointer-events: auto;
}
/* --- Plein écran typographique --------------------------------------- */
#portfolio_page header[data-nav-active="fullscreen"] #header-nav {
top: 0;
background: var(--pf-nav-panel-bg);
color: var(--portfolios-nav-text-color, inherit);
}
#portfolio_page header[data-nav-active="fullscreen"] #header-nav .nav__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Centrage par marges auto : une liste plus haute que l'écran démarre sous le logo
au lieu de déborder vers le haut (justify-content: center). */
#portfolio_page header[data-nav-active="fullscreen"] #header-nav .nav__content .nav__list {
margin-block: auto;
}
/* Liens : taille des liens du thème (pas de grands caractères sur mobile). */
/* ==========================================================================
11. Menus hamburger — corrections d'intégration
========================================================================== */
/* Logo et bouton Menu / croix : toujours sur la même ligne, centrés sur la verticale (le padding du header
est réglable). Sans cette règle, selon la feuille de forme chargée (ligne / tour) et la largeur, la barre
pouvait rester « auto » ou passer en bloc : la croix tombait sous le logo. */
#portfolio_page header[data-nav-menu] .header-inner {
align-items: center;
}
#portfolio_page header[data-nav-menu] .header-bar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
width: 100%;
max-width: 100%;
min-width: 0;
}
#portfolio_page header[data-nav-menu] .header-bar > #hub-logo {
flex: 0 1 auto;
min-width: 0;
align-self: center;
}
#portfolio_page header[data-nav-menu] .header-bar > #hamburgerBtn {
flex: 0 0 auto;
align-self: center;
margin-block: 0;
}
/* Menu ouvert : logo + bouton de fermeture restent au-dessus du panneau. */
#portfolio_page header.mobile-nav-open .header-bar {
z-index: 870;
}
/* Teinte de mobile.css (::before) déjà incluse dans --pf-nav-panel-bg. */
#portfolio_page header:is([data-nav-active="sheet"], [data-nav-active="drawer"], [data-nav-active="fullscreen"], [data-nav-active="radial"]) #header-nav.nav-full::before {
content: none;
}
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu {
border: 0;
background: none;
box-shadow: none;
}
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu .sub-menu-content {
border: 0;
background: none;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Liste des sous-pages : en retrait, filet du côté de l'alignement du menu. */
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
border-inline-start: var(--pf-rule-width, 1px) solid color-mix(in srgb, currentColor 25%, transparent);
}
#portfolio_page #header.nav-ctx-panel.nav-center #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
border-inline-start: 0;
}
#portfolio_page #header.nav-ctx-panel.nav-right #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
border-inline-start: 0;
border-inline-end: var(--pf-rule-width, 1px) solid color-mix(in srgb, currentColor 25%, transparent);
}
/* Apparence des liens : voir la feuille de liens (lot E2). */
/* Liens soulignés / texte seul : sous-pages aussi serrées que les liens principaux (padding hérité de mobile.css),
dessous au moins la place du trait (themes/basic/links.css). Sauf en bulles : une bulle garde toujours son padding. */
/* Apparence des liens : voir la feuille de liens (lot E2). */
/* Chevron : pivote à l'ouverture. */
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > a .submenu-toggle-icon svg {
transition: transform 0.25s ease;
}
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children.submenu-open > a .submenu-toggle-icon svg {
transform: rotate(180deg);
}
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
}
@media (max-width: 1100px) {
#portfolio_page header #header-nav.nav .nav__content .item-has-children > .sub-menu {
grid-template-rows: 0fr;
}
#portfolio_page header #header-nav.nav .nav__content .item-has-children > .sub-menu > .sub-menu-content {
min-height: 0;
overflow: hidden;
}
#portfolio_page header #header-nav.nav .nav__content .item-has-children.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 {
#portfolio_page header[data-nav-active="fullscreen"] #header-nav .nav__content {
padding-top: calc(var(--header-height, 5rem) + 2rem);
}
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .submenu-parent-link {
display: list-item;
}
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list > .item-has-children {
position: static;
display: block;
}
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu {
position: static;
inset: auto;
display: block;
width: auto;
max-width: none;
max-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
transform: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: max-height 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s linear 0.3s;
}
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children.submenu-open > .sub-menu {
max-height: min(80vh, 40rem);
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: max-height 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease, visibility 0s;
}
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu::before,
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu .sub-menu-content::before {
content: none;
}
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu .sub-menu-content {
min-height: 0;
width: auto;
max-width: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
width: auto;
max-width: none;
margin: 0.4rem 0 0.6rem;
padding: 0 0 0 0.9rem;
}
#portfolio_page #header.nav-ctx-panel.nav-center #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
align-items: center;
padding: 0;
}
#portfolio_page #header.nav-ctx-panel.nav-right #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
align-items: flex-end;
padding: 0 0.9rem 0 0;
}
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu li {
width: auto;
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu,
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children.submenu-open > .sub-menu,
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > a .submenu-toggle-icon svg {
transition: none;
}
}
@media (max-width: 1100px) {
#portfolio_page header #header-nav.nav .nav__content .item-has-children > .sub-menu {
display: grid;
margin-top: 0;
opacity: 0;
visibility: hidden;
max-height: none;
transition: grid-template-rows calc(0.32s * var(--pf-submenu-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1), margin-top calc(0.32s * var(--pf-submenu-speed, 1)) ease, opacity calc(0.25s * var(--pf-submenu-speed, 1)) ease, visibility 0s linear calc(0.32s * var(--pf-submenu-speed, 1));
}
}
@media (max-width: 1100px) {
#portfolio_page header #header-nav.nav .nav__content .item-has-children.submenu-open > .sub-menu {
margin-top: 0.35rem;
opacity: 1;
visibility: visible;
transition: grid-template-rows calc(0.32s * var(--pf-submenu-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1), margin-top calc(0.32s * var(--pf-submenu-speed, 1)) ease, opacity calc(0.25s * var(--pf-submenu-speed, 1)) ease, visibility 0s linear 0s;
}
}
@media (max-width: 1100px) {
#portfolio_page header #header-nav.nav .nav__content .item-has-children > .sub-menu ul {
gap: 0.6rem;
}
}
}
/* assets/css/public/design/themes/basic/menu-radial.css */
/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 16-10-2026 — menu « Flottant » (plan-header-footer.md, lot E2) */
/*
* Menu « Flottant » (data-nav-active="radial") : bouton rond en bas à droite, liens en bulles pleines
* (lisibles sur le contenu : pas de trait souligné en plus) ; sous-pages décalées avec un filet, en bulles.
* 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).
*/
/* --- Bouton rond qui se déplie (bas droite) -------------------------- */
#portfolio_page header[data-nav-active="radial"] #hamburgerBtn {
top: auto;
right: 1.25rem;
bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
inset-inline-end: 1.25rem;/* Même habillage que les pastilles du menu : icône lisible quel que soit le thème
(couleur des titres / fond du thème pouvaient être deux teintes sombres). */
border-radius: var(--pf-float-chip-radius, var(--pf-pill-radius));
background: var(--pf-float-bg, var(--pf-nav-panel-bg));
box-shadow: var(--pf-float-shadow, var(--pf-bubble-shadow));
z-index: 860;
}
#portfolio_page header[data-nav-active="radial"] #header-nav {
top: auto;
left: auto;
right: 1.25rem;
bottom: calc(5.5rem + env(safe-area-inset-bottom, 0));
width: auto;
max-width: calc(100vw - 2.5rem);
max-height: none;
clip-path: none;
-webkit-clip-path: none;
transform: scale(0.6);
transform-origin: bottom right;
transition: transform 0.35s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.2s ease, visibility 0s linear 0.35s;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
#portfolio_page header[data-nav-active="radial"] #header-nav.nav-full {
transform: none;
transition: transform 0.35s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.2s ease, visibility 0s;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
#portfolio_page header[data-nav-active="radial"] #header-nav.nav-full::before {
content: none;
}
/* Liste bornée entre le bas du header et le bouton : au-delà, elle défile
(sinon les dernières pages débordent derrière le bouton). */
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content {
min-height: 0;
max-height: calc(100dvh - var(--header-height, 5rem) - 6.5rem - env(safe-area-inset-bottom, 0px));
overflow-y: auto;
}
/* Pastilles calées à droite, au-dessus du bouton, quel que soit l'alignement du header. */
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list,
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list > li {
align-items: flex-end;
text-align: right;
}
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list {
gap: 0.5rem;
}
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list > li {
width: auto;
}
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list > li > a {
display: inline-block;
-webkit-backdrop-filter: var(--pf-float-blur, none);
backdrop-filter: var(--pf-float-blur, none);
}
/* Bulle toujours pleine (lisibilité sur le contenu derrière) : le trait des thèmes
« Souligné » / « Texte seul » ferait doublon avec elle. */
/* Apparence des liens : voir la feuille de liens (lot E2). */
/* Bulle toujours pleine (lisibilité sur le contenu derrière) : le trait des thèmes
« Souligné » / « Texte seul » ferait doublon avec elle. */
/* Sous-pages (accordéon, nav-ctx-panel) : décalées avec un filet sur le côté, comme dans les autres menus
alignés à droite (menu-panels.css), et en bulles elles aussi (lisibles sur le contenu). Même écart que
les bulles principales ; pas de marge sous le sous-menu ouvert. */
#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
border: 0;
border-inline-end: var(--pf-rule-width, 1px) solid color-mix(in srgb, currentColor 25%, transparent);
}
#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav .nav__content .nav__list .item-has-children.submenu-open {
padding-bottom: 0;
}
#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav .nav__content .nav__list .item-has-children > .sub-menu a {
display: inline-block;
}
/* Bulle toujours pleine : le trait des thèmes « Souligné » / « Texte seul » ferait doublon avec elle. */
/* Mobile : bouton plein, jamais translucide sur le contenu (un fond de menu flottant en verre, à 70 %, laissait voir
la page à travers). Le fond du thème est posé sur celui de la page : même teinte, opaque. */
@media (max-width: 1100px) {
#portfolio_page header[data-nav-active="radial"] {
--pf-bubble-base: var(--portfolios-theme-bg-main, var(--portfolios-bg-main-color, #fafafa));
}
}
}
/* 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[data-nav-active="radial"] #hamburgerBtn {
position: fixed;
transform: none;
border: var(--pf-float-edge, 1px solid transparent);
color: var(--portfolios-nav-text-color, currentColor);
}
#portfolio_page header[data-nav-active="radial"] #hamburgerBtn:active {
transform: scale(0.94);
}
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content {
padding: 0.5rem;
}
#portfolio_page header[data-nav-active="radial"] #header-nav.nav--underline .nav__content .nav__list > li > a::after {
content: none;
}
#portfolio_page header[data-nav-active="radial"] #header-nav.nav--underline .nav__content .nav__list > li > a::after {
content: none;
}
#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav .nav__content .nav__list .item-has-children > .sub-menu ul {
align-items: flex-end;
gap: 0.5rem;
margin: 0.5rem 0 0;
padding: 0 0.9rem 0 0;
}
#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav.nav--underline .nav__content .nav__list .item-has-children > .sub-menu a::after {
content: none;
}
@media (max-width: 1100px) {
#portfolio_page header[data-nav-active="radial"] #hamburgerBtn {
background:
linear-gradient(var(--pf-float-bg, var(--pf-nav-panel-bg)), var(--pf-float-bg, var(--pf-nav-panel-bg))),
var(--pf-bubble-base);
}
}
}
/* assets/css/public/design/themes/basic/links-menus.css */
/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 16-10-2026 — apparence des liens dans les menus du header (plan-header-footer.md, lot E2) */
/*
* Liens dans les menus : marge intérieure, bordure, fond, couleur des liens des sous-menus, de la colonne, des panneaux
* et des bulles. Contrat (themes/basic/links.css) : l'apparence d'un lien vit dans une feuille de liens, jamais dans
* une feuille de zone (menu-*.css : position, ouverture, disposition seulement). Chaque règle reprend le sélecteur du
* motif ; la taille propre d'un thème passe par --pf-nav-link-pad-y / --pf-nav-link-pad-x (themes//links.css).
* Chargé juste après les menus (menu-desktop / -rail / -panels / -radial.css), avant header-layouts.css.
*/
/* --- Menus ordinateur : petite liste, grand cadre (menu-desktop.css) --- */
@media (min-width: 1101px) {
#portfolio_page header[data-nav-desktop="inline"] #header-nav .item-has-children > .sub-menu a {/* Taille des liens du thème (--pf-nav-link-pad-*, themes//links.css : Verre, Bento, Brutal), sinon rangée de liste. */
}
}
@media (min-width: 1101px) {
}
#portfolio_page header[data-nav-desktop="mega"] .item-has-children > .sub-menu ul a {
padding-block: 0.5rem;
border-bottom: var(--pf-rule-width) solid color-mix(in srgb, currentColor 15%, transparent);
}
/* --- Sur le côté (menu-rail.css) --- */
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .nav__list > li > a {
padding-inline: var(--pf-nav-link-pad-x, 0.6rem);
}
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav.nav--underline .nav__list > li > a {
padding-inline: var(--pf-nav-link-pad-inline, 0);
}
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu a {/* Taille des liens du thème (--pf-nav-link-pad-*, themes//links.css), sinon sous-pages serrées. */
}
/* --- Derrière le bouton Menu : sous-pages des panneaux (menu-panels.css) --- */
#portfolio_page #header.nav-ctx-panel #header-nav .nav__content .nav__list .item-has-children > .sub-menu a {
font-size: 0.92em;
}
/* --- Flottant : bulles (menu-radial.css) --- */
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list > li > a {/* Taille des liens du thème (--pf-nav-link-pad-*, themes//links.css), sinon bulle par défaut. */
border: var(--pf-float-edge, 0 solid transparent);
border-radius: var(--pf-float-chip-radius, var(--pf-pill-radius));
background: var(--pf-float-bg, var(--pf-nav-panel-bg));
color: var(--portfolios-nav-text-color, inherit);
box-shadow: var(--pf-float-shadow, var(--pf-chip-shadow));
}
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list > li > a {/* --pf-nav-bubble-bg : fond d'une bulle choisi par le thème (ex. Verre au survol), sinon celui des menus flottants. */
}
#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav .nav__content .nav__list .item-has-children > .sub-menu a {
border: var(--pf-float-edge, 0 solid transparent);
background: var(--pf-float-bg, var(--pf-nav-panel-bg));
color: var(--portfolios-nav-text-color, inherit);
box-shadow: var(--pf-float-shadow, var(--pf-chip-shadow));
}
/* Mobile : bulles pleines, jamais translucides sur le contenu (--pf-bubble-base : menu-radial.css). */
@media (max-width: 1100px) {
#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav .nav__content .nav__list .item-has-children > .sub-menu a {
background:
linear-gradient(var(--pf-nav-bubble-bg, var(--pf-float-bg, var(--pf-nav-panel-bg))), var(--pf-nav-bubble-bg, var(--pf-float-bg, var(--pf-nav-panel-bg)))),
var(--pf-bubble-base);
}
}
}
/* 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-nav-desktop="inline"] #header-nav .item-has-children > .sub-menu a {
padding: var(--pf-nav-link-pad-y, 0.6rem) var(--pf-nav-link-pad-x, 1rem);
}
}
@media (min-width: 1101px) {
#portfolio_page header[data-nav-desktop="inline"] #header-nav.nav--underline .item-has-children > .sub-menu a {
padding: var(--pf-nav-sublink-pad, var(--pf-nav-link-pad-y, 0.6rem) 0 max(var(--pf-nav-link-pad-y, 0.6rem), var(--portfolios-nav-underline-width, 2px)));
}
}
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav .item-has-children > .sub-menu a {
padding: var(--pf-nav-link-pad-y, 0.2rem) var(--pf-nav-link-pad-x, 0.4rem);
}
#portfolio_page header[data-header-rail]:where(:not([data-nav-menu])) #header-nav.nav--underline .item-has-children > .sub-menu a {
padding: var(--pf-nav-sublink-pad, var(--pf-nav-link-pad-y, 0.2rem) 0 max(var(--pf-nav-link-pad-y, 0.2rem), var(--portfolios-nav-underline-width, 2px)));
}
#portfolio_page #header.nav-ctx-panel:not([data-nav-active="radial"]) #header-nav.nav--underline .nav__content .nav__list .item-has-children > .sub-menu a {
padding: 0.2rem 0 max(0.2rem, var(--portfolios-nav-underline-width, 2px));
}
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list > li > a {
padding: var(--pf-nav-link-pad-y, 0.6rem) var(--pf-nav-link-pad-x, 1.1rem);
}
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list > li > a {
border-radius: var(--pf-float-chip-radius, var(--pf-pill-radius));
background: var(--pf-nav-bubble-bg, var(--pf-float-bg, var(--pf-nav-panel-bg)));
}
#portfolio_page #header.nav-ctx-panel[data-nav-active="radial"] #header-nav .nav__content .nav__list .item-has-children > .sub-menu a {
padding: var(--pf-nav-link-pad-y, 0.5rem) var(--pf-nav-link-pad-x, 1rem);
border-radius: var(--pf-float-chip-radius, var(--pf-pill-radius));
}
@media (max-width: 1100px) {
#portfolio_page header[data-nav-active="radial"] #header-nav .nav__content .nav__list > li > a {
background:
linear-gradient(var(--pf-nav-bubble-bg, var(--pf-float-bg, var(--pf-nav-panel-bg))), var(--pf-nav-bubble-bg, var(--pf-float-bg, var(--pf-nav-panel-bg)))),
var(--pf-bubble-base);
}
}
}
/* assets/css/public/design/themes/basic/header-layouts.css */
/* @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/.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;
}
}
}
/* assets/css/public/design/themes/basic/header-options.css */
/* @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);
}
}
}
/* assets/css/public/design/background/neutral.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
#portfolio_background,
#portfolio_background #loader {
background-color: var(--portfolios-neutral-bg-color);
background-image: none;
}
#portfolio_page #header,
#portfolio_page footer,
#portfolio_page .item-has-children > .sub-menu {
background-image: none;
}
}
/* assets/css/public/design/background/grain.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
/* Grain : entre le fond (page / section) et le contenu */
#portfolio_page {
position: relative;
}
#portfolio_page::after {
position: absolute;
content: "";
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--portfolios-grain-img, url('../../../assets/media/public/design/background/noise-white.png'));
background-repeat: repeat;
background-position: center;
}
#portfolio_page .section-bg {
position: relative;
isolation: isolate;
}
#portfolio_page .section-bg::before {
position: absolute;
content: "";
inset: 0;
z-index: -1;
pointer-events: none;
background-image: var(--portfolios-grain-img, url('../../../assets/media/public/design/background/noise-white.png'));
background-repeat: repeat;
background-position: center;
}
.horizontal-grid-item .poster,
.square-grid-item .poster,
.vertical-grid-item .poster {
position: absolute;
}
.horizontal-grid-item .horizontal-infos,
.square-grid-item .square-infos,
.vertical-grid-item .vertical-infos {
position: absolute;
}
}
/* assets/css/public/design/thumbnails/list.css */
@layer site.elements {
/* Version: 20-09-2026-16-46 */
/* Version: 04-09-2026-list-no-text-padding */
/* Mode LISTE */
.thumbnail {
overflow: visible;
text-decoration: none;
display: flex;
flex-direction: column;
min-height: 100%;
box-sizing: border-box;
position: relative;
top: 0;
background-color: transparent;
transition: transform 0.2s, filter 0.18s;
}
.thumbnail p {
flex: 1;
}
/* Mode LISTE - Bordure et arrondi sur .thumb */
.thumbnail .thumb {
background-size: cover;
background-position: center center;
transition: box-shadow 0.2s, border 0.2s, filter 0.18s, transform 0.18s;
filter: brightness(100%);
padding: 0% 0% 50% 0%;
margin-bottom: 20px;
}
.thumbnail .thumb::after {
position: absolute;
top: 0;
content: "¶";
height: 100%;
width: 100%;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: var(--thumbnail-hover-effect, 0.2s linear);
color: var(--portfolios-text-main-color, var(--modules-white));
}
.thumbnail:hover .thumb::after {
bottom: 0px;
opacity: 1;
box-shadow: var(--thumbnail-hover-effect, none);
}
.thumbnails {
margin-bottom: 40px;
}
.thumbnail article {
padding: 0;
}
.thumbnail .article-blog-infos {
flex:1;
display: flex;
flex-direction: column;
padding: 0;
transition: 0.2s linear;
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, #222));
background-color: transparent;
}
/* Ensure div/h4 inside list thumbnails follow portfolio text color */
.thumbnail h4, .thumbnail div {
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, #222));
}
.thumbnail:hover .article-blog-infos {
opacity: 0.7;
}
.thumbnail h5 {
font-weight: bold;
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, #222));
}
}
/* assets/css/public/design/thumbnails/main.css */
@layer site.elements {
/* Version: 14-10-2026-09-37 */
/* Version: 04-09-2026-list-no-text-padding */
/* Titres de cartes / listes : remis à la typo du composant (pas celle des intertitres) ; les règles propres à chaque
carte, plus précises, s'appliquent ensuite. Venu de headings.css (couche reglages) : ici dans la couche elements. */
#portfolio_page main .vertical-infos h4,
#portfolio_page main .vertical-infos h5,
#portfolio_page main .pf-thumbs--landscape h4,
#portfolio_page main .pf-thumbs--square h4,
#portfolio_page main .square-grid-item h4,
#portfolio_page main .thumbnail h4,
#portfolio_page main .thumbnail h5,
#portfolio_page main .thumbnail-tile h4,
#portfolio_page main .thumbnail-tile h5 {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
text-align: inherit;
}
/* Surimpressions grille (photo + dégradé) : couleurs personnalisables */
#portfolio_page main .horizontal-infos :is(h4, h5, a, span),
#portfolio_page main .vertical-infos :is(h4, h5, a, span),
#portfolio_page main .square-infos :is(h4, h5, a, span),
#portfolio_page .horizontal-infos :is(h4, h5, a, span),
#portfolio_page .vertical-infos :is(h4, h5, a, span),
#portfolio_page .square-infos :is(h4, h5, a, span) {
color: var(--portfolios-thumbnail-overlay-title-color, #ffffff);
text-shadow: var(--portfolios-thumbnail-overlay-text-shadow, none);
}
#portfolio_page main .horizontal-infos p,
#portfolio_page main .vertical-infos p,
#portfolio_page main .square-infos p,
#portfolio_page .horizontal-infos p,
#portfolio_page .vertical-infos p,
#portfolio_page .square-infos p {
color: var(--portfolios-thumbnail-overlay-description-color, #ffffff);
text-shadow: var(--portfolios-thumbnail-overlay-text-shadow, none);
}
/* Couleurs de texte — list.css / tiles.css (chargés avant) définissent la mise en page liste vs tuiles */
.thumbnail .article-blog-infos,
.thumbnail .article-blog-infos *,
.thumbnail-tile .article-blog-infos,
.thumbnail-tile .article-blog-infos * {
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, inherit));
}
/* Complément mode tuiles uniquement (le mode liste : .thumbnail sans .thumbnail-tile sur le lien) */
.thumbnail-tile {
overflow: hidden;
text-decoration: none;
display: flex;
flex-direction: column;
min-height: 100%;
box-sizing: border-box;
position: relative;
top: 0;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.thumbnail-tile .thumb {
position: relative;
padding-bottom: 60%;
background-size: cover;
background-position: center center;
transition: box-shadow 0.2s, border 0.2s, filter 0.18s, transform 0.18s;
filter: brightness(100%);
}
.thumbnail-tile .thumb::after {
position: absolute;
bottom: 0;
content: "¶";
height: 100%;
width: 100%;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: var(--thumbnail-hover-effect, 0.2s linear);
color: var(--portfolios-text-main-color, var(--modules-white));
}
.thumbnail-tile:hover .thumb::after {
bottom: 0px;
opacity: 1;
box-shadow: var(--thumbnail-hover-effect, none);
}
.thumbnail-tile .article-blog-infos {
flex: 1;
display: flex;
flex-direction: column;
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, #222));
padding: 20px;
border-bottom-left-radius: var(--portfolios-thumbnail-radius, 0%);
border-bottom-right-radius: var(--portfolios-thumbnail-radius, 0%);
}
.thumbnail-tile h5 {
font-weight: bold;
margin-bottom: 10px;
margin-top: 10px;
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, #222));
}
/* ========================================== */
/* MAIN.CSS ORIGINAL CONTENT */
/* ========================================== */
/* Styles principaux des vignettes (thumbnails) */
/* Ce fichier surcharge les styles de list.css et tiles.css */
/* Transitions de base pour mode LISTE */
.thumbnail {
transition: transform 0.3s ease, filter 0.3s ease;
}
/* Effets au survol - Mode LISTE (sur .thumbnail) */
.thumbnail:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
/* z-index removed for centralization */
}
/* Correction pour éviter que l'ombre soit coupée par le lien parent en mode liste */
.thumbnail a {
overflow: visible;
}
/* Transitions de base pour mode TUILES */
.thumbnail-tile {
transition: transform 0.3s ease, filter 0.3s ease;
}
/* Ajout d'un fond plus prononcé pour les tuiles uniquement */
.thumbnail-tile,
.customizer-preview-card.thumbnail-tile,
.thumbnail-tile.customizer-preview-card {
background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color, transparent));
}
/* Mode liste : titre / meta / description sans fond carte ni padding (comme /public) */
.blog-list .thumbnail > a:not(.thumbnail-tile),
.blog-list .thumbnail > .customizer-preview-card:not(.thumbnail-tile),
.thumbnail > a.portfolios-thumbnail-radius:not(.thumbnail-tile),
.thumbnail > .customizer-preview-card:not(.thumbnail-tile),
.thumbnail .article-blog-infos {
background-color: transparent;
}
.blog-list .thumbnail:not(:has(.thumbnail-tile)) article,
.blog-list .thumbnail:not(:has(.thumbnail-tile)) .article-blog-infos,
.blog-list .thumbnail > a:not(.thumbnail-tile) article,
.blog-list .thumbnail > a:not(.thumbnail-tile) .article-blog-infos,
.blog-list .thumbnail > .customizer-preview-card:not(.thumbnail-tile) article,
.blog-list .thumbnail > .customizer-preview-card:not(.thumbnail-tile) .article-blog-infos,
.thumbnail > a:not(.thumbnail-tile) article,
.thumbnail > a:not(.thumbnail-tile) .article-blog-infos,
.thumbnail > .customizer-preview-card:not(.thumbnail-tile) article,
.thumbnail > .customizer-preview-card:not(.thumbnail-tile) .article-blog-infos,
#portfolio_page[data-thumbnail-display-mode="list"] .thumbnail article,
#portfolio_page[data-thumbnail-display-mode="list"] .thumbnail .article-blog-infos,
#portfolio_page[data-thumbnail-display-mode="list"] .blog-list .article-blog-infos {
padding: 0;
}
/* Effets au survol - Mode TUILES (sur .thumbnail-tile) */
.thumbnail-tile:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}
/* Classe thumb-border pour les bordures personnalisées */
/* PRIORITÉ : Surcharge list.css et tiles.css */
/* Mode LISTE : .thumb.thumb-border (div enfant avec image) */
.thumbnail .thumb.thumb-border {
box-sizing: border-box;
display: block;
width: auto;
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: visible;
transition: border-width 0.3s ease,
border-style 0.3s ease,
border-color 0.3s ease,
border-radius 0.3s ease,
box-shadow 0.3s ease;
/* Arrondi sur tous les angles */
border-radius: var(--portfolios-thumbnail-radius, 0%);
}
/* Mode TUILES : a.thumbnail-tile.thumb-border (lien parent) */
.thumbnail-tile.thumb-border,
a.thumbnail-tile.thumb-border {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: hidden;
transition: 0.2s linear;
}
.thumbnail-tile.thumb-border:hover,
a.thumbnail-tile.thumb-border:hover {
/* z-index removed for centralization */
}
/* Mode TUILES : ombre sur la tuile entière, pas sur l'illustration */
.thumbnail-tile.thumb-border .thumb,
a.thumbnail-tile.thumb-border .thumb,
.thumbnail-tile.border-design .thumb:not(.thumb-border) {
box-shadow: none;
border-width: 0;
border-style: none;
}
/* Mode TUILES - Arrondi du thumb enfant pour suivre le parent */
.thumbnail-tile.thumb-border .thumb,
a.thumbnail-tile.thumb-border .thumb {
border-top-left-radius: var(--portfolios-thumbnail-radius, 0%);
border-top-right-radius: var(--portfolios-thumbnail-radius, 0%);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transition: border-radius 0.3s ease;
width: 100%;
display: block;
padding-bottom: 60%; /* Force le ratio d'aspect */
}
/* ===== Video tile specific styling to match thumbnails ===== */
.thumbnail-tile.video-tile {
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: hidden;
background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color));
}
.thumbnail-tile.video-tile .thumb {
background-size: cover;
background-position: center center;
position: relative;
overflow: hidden;
border: none;
box-shadow: none;
border-top-left-radius: var(--portfolios-thumbnail-radius, 0%);
border-top-right-radius: var(--portfolios-thumbnail-radius, 0%);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Replace default ¶ with a play icon for videos */
.thumbnail-tile.video-tile .thumb::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 48px 48px;
opacity: 0;
transition: opacity 0.18s ease;
}
.thumbnail-tile.video-tile:hover .thumb::after {
opacity: 1;
}
/* Mode liste : icône lecture sur vignettes vidéo */
.thumbnail .video-tile .thumb {
background-size: cover;
background-position: center center;
position: relative;
overflow: hidden;
}
.thumbnail .video-tile .thumb::after {
content: "";
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 48px 48px;
opacity: 0;
transition: opacity 0.18s ease;
}
.thumbnail .video-tile:hover .thumb::after {
opacity: 1;
}
.thumbnail-tile.video-tile .showvideo-set-infos {
padding: 25px;
border-bottom-left-radius: var(--portfolios-thumbnail-radius, 0%);
border-bottom-right-radius: var(--portfolios-thumbnail-radius, 0%);
}
.thumbnail-tile.video-tile .showvideo-set-infos h4 {
margin-bottom: 6px;
}
.thumbnail-tile.video-tile .showvideo-set-infos p {
margin: 0;
opacity: 0.9;
}
.thumbnail .thumb.thumb-border::after,
.thumbnail-tile.thumb-border .thumb::after {
border-radius: inherit;
}
#demo-tiles-css > div {
overflow: visible;
}
/* ─────────────────────────────────────────────────────────── */
/* EXTENSION AUX ÉLÉMENTS DE GRILLE (DEMANDE UTILISATEUR) */
/* ─────────────────────────────────────────────────────────── */
/* Contours .border-design — pilotés par thumbnail_border_type (admin thème).
Cartes du parcours avec un style d'élément (hors frise / grille) : habillage dans matrices/base.css §15,
chargée avant ce fichier à spécificité égale — exclues ici (:where = spécificité inchangée). */
#portfolio_page .border-design:not(.thumb.thumb-border):not(:where([data-timeline-layout]:not([data-timeline-layout="list"]) .about-timeline-card, [data-recommendations-layout]:not([data-recommendations-layout="grid"]) .recommendation-card, [data-casting-layout]:not([data-casting-layout="grid"]) :is(.casting-detail, .casting-block, .casting-timeline-card))),
#profil-modal-root .border-design:not(.thumb.thumb-border) {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
box-sizing: border-box;
}
/* Mode LISTE : contour/ombre sur .thumb uniquement, pas sur le lien parent */
.thumbnail > a.border-design,
.blog-list .thumbnail > a.border-design {
border: none;
box-shadow: none;
border-radius: 0;
}
/* 1. Vertical & Horizontal Grid Items */
.vertical-grid-item,
.horizontal-grid-item,
#profil-modal-root .profil-infos,
.profil-window .profil-infos {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
box-sizing: border-box;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}
.vertical-grid-item,
.horizontal-grid-item {
overflow: hidden;
}
#profil-modal-root .profil-infos,
.profil-window .profil-infos {
background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color, transparent));
color: var(--portfolios-text-main-color, inherit);
}
.vertical-grid-item:hover,
.horizontal-grid-item:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
/* z-index removed for centralization */
}
/*
* Grille portfolio (vertical / horizontal) — poster plein cadre sous overlay.
* Le contour et l'arrondi sont sur le lien parent ; le poster hérite et ne porte
* pas portfolios-thumbnail-radius / border-design (contrairement aux tuiles blog/vidéo
* où .thumb et .article-blog-infos partagent l'arrondi haut/bas).
*/
#portfolio_page .vertical-grid-item > .poster,
#portfolio_page .horizontal-grid-item > .poster,
#profil-modal-root .vertical-grid-item > .poster,
#profil-modal-root .horizontal-grid-item > .poster {
border-radius: inherit;
border: none;
box-shadow: none;
}
/* Vignette œuvre sans image (productions/books/projects/photos/audios) : même dégradé
que .thumb-placeholder-blog, appliqué au conteneur qui portait le background-image. */
#portfolio_page .poster.no-illustration,
#portfolio_page .vertical-grid-item.no-illustration,
#portfolio_page .square-grid-item.no-illustration {
background-color: var(--portfolios-neutral-bg-color);
background-image: linear-gradient(
145deg,
var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color)) 0%,
var(--portfolios-neutral-bg-color) 50%,
var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color)) 100%
);
background-size: cover;
background-position: center;
}
#portfolio_page .no-illustration .no-illustration__icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(22%, 72px);
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, inherit));
opacity: 0.4;
line-height: 0;
pointer-events: none;
}
#portfolio_page .no-illustration .no-illustration__icon svg {
width: 100%;
height: auto;
display: block;
fill: currentColor;
}
/* Vignette blog sans image : fond et icône selon variables :root (couleur body dérivée). */
.thumb.thumb-placeholder-blog {
position: relative;
background-color: var(--portfolios-neutral-bg-color);
background-image: linear-gradient(
145deg,
var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color)) 0%,
var(--portfolios-neutral-bg-color) 50%,
var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color)) 100%
);
background-size: cover;
background-position: center;
}
.thumb.thumb-placeholder-blog .thumb-placeholder-blog__icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(22%, 72px);
/* Même couleur que le texte des vignettes blog */
opacity: 0.4;
line-height: 0;
pointer-events: none;
}
.thumb.thumb-placeholder-blog .thumb-placeholder-blog__icon svg {
width: 100%;
height: auto;
display: block;
fill: currentColor;
}
.thumb.thumb-placeholder-blog::after,
.thumbnail-tile .thumb.thumb-placeholder-blog::after,
.thumbnail .thumb.thumb-placeholder-blog::after {
display: none;
content: none;
}
/* 2. Blog List Items (Renforcement) */
/* Mode Tuiles (conteneur) */
.blog-list .thumbnail-tile {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: hidden;
}
/* ─────────────────────────────────────────────────────────── */
/* #goto Anchors — appliquer les mêmes contours que .vertical-grid-item
Sans toucher au fond actuel : on ne change que l'aspect de bordure/arrondi/ombre */
#goto article a:not(.platform-link) {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: visible;
box-sizing: border-box;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}
#goto article a:not(.platform-link):hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}
#goto article a .poster {
border-radius: inherit;
}
/* Mode LISTE : contour/ombre uniquement sur l'illustration (.thumb.thumb-border) */
.blog-list .thumbnail .thumb.thumb-border {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
}
/* Mode LISTE : pas d'ombre sur le conteneur carte / lien (texte hors illustration) */
.thumbnail > a.portfolios-thumbnail-radius:not(.thumbnail-tile):not(.thumb-border),
.thumbnail > .customizer-preview-card.portfolios-thumbnail-radius {
box-shadow: none;
border-width: 0;
border-style: none;
}
/* Application des effets de survol/clic pour le blog-list si pas déjà appliqués */
.blog-list .thumbnail-tile:hover,
.blog-list .thumbnail:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
/* z-index removed for centralization */
}
.service-item,
.faq-item,
.profil-button,
.agenda-item,
#blog-main-article img,
.youtube,
.vimeo,
.dailymotion,
.tiktok,
.instagram,
.facebook {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color, transparent));
box-sizing: border-box;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}
#portfolio_page #videos .thumbnail-tile :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook) {
border: none;
box-shadow: none;
border-radius: 0;
background-color: transparent;
}
/* Cartes informatives (casting, expériences, formations, recommandations) — contours sans effet hover */
.about-timeline-card,
.recommendation-card,
.casting-timeline-card,
.casting-block,
.casting-detail,
#portfolio_page .about-artist-img,
#portfolio_page .content-article .writer-figure img {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
background-color: var(--portfolios-content-bg-color, var(--portfolios-bg-alt-color, transparent));
box-sizing: border-box;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, border-radius 0.3s ease, border 0.3s ease;
}
.about-timeline-card:hover,
.about-timeline-card:active,
.recommendation-card:hover,
.recommendation-card:active,
.casting-timeline-card:hover,
.casting-timeline-card:active,
.casting-block:hover,
.casting-block:active,
.casting-detail:hover,
.casting-detail:active,
#portfolio_page .about-artist-img:hover,
#portfolio_page .about-artist-img:active,
#portfolio_page .content-article .writer-figure img:hover,
#portfolio_page .content-article .writer-figure img:active {
transform: none;
filter: none;
}
.service-item:hover,
.faq-item:hover,
.profil-button:hover,
.agenda-item:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}
/* 4. Square Grid Items — bordure, radius, ombre et fond sur le lien unique */
.square-grid-item {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: hidden;
box-sizing: border-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}
.square-grid-item:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
/* z-index removed for centralization */
}
.swipebox {
border-width: var(--portfolios-thumbnail-border-width, 0px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, #222);
border-radius: var(--portfolios-thumbnail-radius, 0%);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
overflow: visible;
box-sizing: border-box;
transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, border 0.3s ease;
}
.swipebox:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
/* z-index removed for centralization */
}
/* 5. Galerie albums + grille photos production */
#gallery a,
#production-show-photos-grid a {
transition:
box-shadow 0.3s ease-in-out,
border 0.3s ease-in-out,
filter 0.3s ease-in-out,
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.2s linear;
}
#gallery a:hover,
#production-show-photos-grid a:hover {
transform: var(--portfolios-thumbnail-hover-transform, none);
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
}
/* Video Embeds Inheritance */
.youtube iframe,
.vimeo iframe,
.dailymotion iframe,
.tiktok iframe,
.instagram iframe {
border-radius: inherit;
}
/* Pochette (#title-star) — format carré, effets sur une seule div, sans étirement flex */
#hero #title-star > #pochette {
--pochette-size: min(200px, 20%);
width: var(--pochette-size);
height: var(--pochette-size);
max-width: 200px;
max-height: 200px;
min-height: 0;
padding: 0;
flex: 0 0 var(--pochette-size);
align-self: flex-start;
aspect-ratio: 1 / 1;
position: relative;
overflow: hidden;
box-sizing: border-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#hero #title-star > #pochette:hover,
#hero #title-star > #pochette:active {
transform: none;
filter: none;
}
/* Legacy : ancienne structure imbriquée (vertical-grid-item / poster) */
#hero #title-star > #pochette .vertical-grid-item,
#hero #title-star > #pochette .square-grid-item {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}
#hero #title-star > #pochette .poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: inherit;
}
}
/* assets/css/public/design/platform-links.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 27-09-2026 */
/* Liens plateformes (#goto) — cartes mises en avant, habillées par la personnalisation du créateur :
fond / bordure / rayon / ombre / survol des vignettes, pastille aux couleurs des boutons. */
#portfolio_page #goto {
scroll-margin-top: 90px;
}
#portfolio_page #goto .platform-links-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--layout-space-y-sm, 15px);
}
#portfolio_page #goto .platform-link,
#portfolio_page #goto article a.platform-link {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 16px;
width: 100%;
box-sizing: border-box;
padding: 18px 18px 18px 22px;
text-align: left;
text-decoration: none;
color: inherit;
background: var(--portfolios-content-bg-color, transparent);
border-width: var(--portfolios-thumbnail-border-width, 1px);
border-style: var(--portfolios-thumbnail-border-type, solid);
border-color: var(--portfolios-thumbnail-border-color, currentColor);
border-radius: var(--portfolios-thumbnail-radius, 0);
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
#portfolio_page #goto .platform-link:hover,
#portfolio_page #goto .platform-link:focus-visible {
color: inherit;
transform: var(--portfolios-thumbnail-hover-transform, translateY(-2px));
filter: var(--portfolios-thumbnail-hover-filter, none);
}
#portfolio_page #goto .platform-link:active {
transform: var(--portfolios-thumbnail-click-transform, scale(0.98));
}
#portfolio_page #goto .platform-link__label {
flex: 1 1 auto;
min-width: 0;
font-weight: 600;
font-size: 1.1em;
line-height: 1.35;
}
/* Pastille « ouvrir » aux couleurs du bouton du créateur */
#portfolio_page #goto .platform-link__open {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: var(--portfolios-button-text-color, #fff);
background-color: var(--portfolios-button-background-color, #222);
background-image: var(--portfolios-button-gradient, none);
border-radius: var(--portfolios-button-radius, 50%);
transition: filter 0.2s ease;
}
#portfolio_page #goto .platform-link:hover .platform-link__open,
#portfolio_page #goto .platform-link:focus-visible .platform-link__open {
color: var(--portfolios-button-hover-text-color, var(--portfolios-button-text-color, #fff));
filter: var(--portfolios-button-hover-filter, brightness(110%));
}
/* Token direct dans fill : main.css colore tout `#portfolio_page *` (svg compris), currentColor ne suffit pas. */
#portfolio_page #goto .platform-link .platform-link__open svg {
display: block;
width: 16px;
height: 16px;
max-height: none;
margin: 0;
fill: var(--portfolios-button-text-color, #fff);
}
#portfolio_page #goto .platform-link:hover .platform-link__open svg,
#portfolio_page #goto .platform-link:focus-visible .platform-link__open svg {
fill: var(--portfolios-button-hover-text-color, var(--portfolios-button-text-color, #fff));
}
/* Bouton du hero (« Où regarder / lire / écouter ») et autres actions de la fiche */
#portfolio_page #hero #title-about .title-about-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: var(--layout-space-y-sm, 15px);
}
#portfolio_page #hero #title-about .title-about-actions .folio_button {
margin: 0;
}
@media screen and (max-width: 500px) {
#portfolio_page #goto .platform-links-list {
grid-template-columns: 1fr;
}
#portfolio_page #goto .platform-link,
#portfolio_page #goto article a.platform-link {
padding: 14px 14px 14px 18px;
}
}
}
/* assets/css/public/fonts/lato.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../../../assets/fonts/lato/lato-latin-400-normal.woff2) format('woff2');
}
}
/* assets/css/public/core/fonts.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 23-09-2026-20-19 */
/* Police et tailles imposées par les réglages : core/typography.css (couche « typo »). */
#portfolio_page .title-align-left {
text-align: left;
margin: 0 auto;
}
#portfolio_page .title-align-center {
text-align: center;
margin: 0 auto;
}
#portfolio_page .title-align-right {
text-align: right;
margin: 0 auto;
}
@media screen and (max-width: 1050px) {
#portfolio_page :is(.title-align-left, .title-align-center, .title-align-right) {
margin-bottom: 0px;
}
}
.blog-copy {
font-family: var(--font-serif);
font-style: italic;
}
@media screen and (max-width: 1050px) {
#portfolio_page #hero #home-about {
display: flex;
flex-direction: column;
}
}
}
/* assets/css/public/core/typography.css */
/* @layer-wrap:site.typo */
@layer site.typo {
/* Version: 16-10-2026 */
/* Typographie imposée par les réglages (police, tailles de texte), sortie de core/fonts.css (couches CSS, lot L2).
* Couche « typo » (shared/core/design/stylesheets.php) : juste après le socle, avant les éléments et le header commun,
* qui affinent cette base (tailles « petite » / « méta », titres de cartes) sans !important ; avant le thème, qui garde
* la main sur sa propre typographie (police à chasse fixe de Terminal, tailles de Cinéma…).
* Titres : structure/layout/headings.css. */
/* Police du portfolio : l'emporte sur la police du hub, la remise à zéro et les composants (couches antérieures). */
body.portfolio-font,
#portfolio_page.portfolio-font,
#loader.portfolio-font,
#profil-modal-root.portfolio-font,
.portfolio-font {
font-family: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif);
}
body.portfolio-font :is(p, span, a, li, ul, ol, time, label, h1, h2, h3, h4, h5, h6, cite, em, strong, small, td, th, input, textarea, select, button, div, article, section, figcaption, header, footer, nav),
#portfolio_page.portfolio-font :is(p, span, a, li, ul, ol, time, label, h1, h2, h3, h4, h5, h6, cite, em, strong, small, td, th, input, textarea, select, button, div, article, section, figcaption, header, footer, nav),
#loader.portfolio-font :is(span, div),
#profil-modal-root.portfolio-font :is(p, span, a, li, ul, ol, time, label, h1, h2, h3, h4, h5, h6, cite, em, strong, small, td, th, input, textarea, select, button, div, article, section, figcaption, header, footer, nav),
#portfolio_page :is(header, #header, footer, #footer, #legal),
#portfolio_page :is(header, #header, footer, #footer, #legal) :is(p, span, a, li, ul, ol, button, nav, div, strong, em, small, label) {
font-family: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif);
}
/* Accroches logo / titres (comme setup/theme) : héritent de #portfolio_page */
#portfolio_page .dynamic-font {
font-family: inherit;
}
#portfolio_page :is(p, span, a) {
font-size: var(--portfolios-font-size-base);
line-height: var(--portfolios-text-line-height);
}
.arkt-btn:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *) {
font-size: var(--portfolios-font-size-base);
}
/* Typo des titres h1–h6 : voir structure/layout/headings.css */
#portfolio_page :is(.populare-head span, #about #services .price-head .title, .pricing .price) {
font-size: var(--portfolios-heading-primary-size);
line-height: var(--portfolios-heading-primary-line-height);
}
#portfolio_page :is(.pf-thumbs--landscape p, .pf-thumbs--square p, .pf-thumbs--portrait p, .article-blog-infos__meta, .article-blog-infos__description) {
font-size: var(--portfolios-font-size-meta, calc(var(--portfolios-font-size-base) * 0.8));
line-height: calc(var(--portfolios-text-line-height) * 0.8);
}
}
/* assets/css/public/structure/layout/content.css */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
/* Version: 04-09-2026-content-align */
/*
* Contenu riche Arktefakt — public + éditeur Writer.
* Contrat HTML : blocs Writer (serialize.js) + sanitize writer.php.
* Variables : --portfolios-font-size-base, --portfolios-heading-* (thème portfolio).
* Les fallbacks gardent un rendu lisible hors thème portfolio (hub Writer, register CGV).
*/
/* --------------------------------------------------------------------------
Conteneur
-------------------------------------------------------------------------- */
.content-article {
font-size: var(--portfolios-font-size-base, 14px);
line-height: var(--portfolios-text-line-height, calc(var(--portfolios-font-size-base, 14px) + 10px));
letter-spacing: 0.4px;
font-weight: inherit;
color: inherit;
--portfolios-content-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z'/%3E%3C/svg%3E");
--portfolios-content-link-padding-y: 0.15em;
--portfolios-content-link-padding-x: 0.42em;
}
.content-article .subtitle,
.content-article .subtitle p {
margin: 20px 0;
font-weight: bold;
}
/* --------------------------------------------------------------------------
Paragraphes et variantes
-------------------------------------------------------------------------- */
.content-article p {
margin-bottom: 25px;
}
.content-article p.description,
.content-article .writer-editable.description {
font-size: calc(var(--portfolios-font-size-base, 14px) * 1.05);
line-height: 1.55;
color: inherit;
opacity: 0.92;
}
.content-article p.commentaire,
.content-article .writer-editable.commentaire {
font-size: calc(var(--portfolios-font-size-base, 14px) * 0.95);
line-height: 1.5;
font-style: italic;
color: inherit;
opacity: 0.85;
padding-left: 0.5rem;
border-left: 2px solid color-mix(in srgb, currentColor 25%, transparent);
}
.content-article u {
text-decoration: underline;
}
/* Gras et italique (reset + fonts.css annulent les styles navigateur par défaut) */
.content-article :is(strong, b),
.content-article .writer-editable :is(strong, b) {
font-weight: var(--portfolios-font-weight-bold, 700);
}
.content-article :is(em, i),
.content-article .writer-editable :is(em, i) {
font-style: italic;
}
/* Tableau (bloc Writer) : défile horizontalement s’il est plus large que le contenu.
contain: inline-size : sa largeur ne remonte pas aux parents ; sans cela, dans une
colonne de grille / flex sans min-width: 0, le tableau élargit la colonne au lieu
de défiler et le bord droit est coupé sur mobile. */
.content-article .writer-table {
max-width: 100%;
margin: 1.2em 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
contain: inline-size;
}
.content-article .writer-table table {
width: 100%;
border-collapse: collapse;
font-size: 0.95em;
}
.content-article .writer-table caption {
caption-side: bottom;
padding-top: 0.5em;
font-size: 0.85em;
text-align: left;
opacity: 0.75;
}
.content-article .writer-table :is(th, td) {
padding: 0.5em 0.75em;
border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
text-align: left;
vertical-align: top;
}
.content-article .writer-table th {
font-weight: var(--portfolios-font-weight-bold, 700);
border-bottom-width: 2px;
}
.content-article .writer-table :is(th, td).writer-align-center {
text-align: center;
}
.content-article .writer-table :is(th, td).writer-align-right {
text-align: right;
}
/* Code en ligne (Markdown `code`, collage) : police à chasse fixe, fond léger. */
.content-article code,
.content-article .writer-editable code {
padding: 0.1em 0.3em;
border-radius: 3px;
background: color-mix(in srgb, currentColor 8%, transparent);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
}
/* --------------------------------------------------------------------------
Titres dans le corps (hors titres de page)
-------------------------------------------------------------------------- */
.content-article h1 {
font-size: var(--portfolios-heading-primary-size, 21px);
line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size, 21px) + 2px));
font-weight: bold;
color: var(--portfolios-heading-primary-color, inherit);
display: block;
padding: 0;
margin: 0 0 0.75rem;
}
.content-article h1 :is(a, span, p, strong, em, b, i, small) {
color: inherit;
}
.content-article :is(h2, h3, h4, h5, h6) {
font-size: var(--portfolios-heading-secondary-size, 14px);
line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size, 14px) + 10px));
font-weight: bold;
color: var(--portfolios-heading-secondary-color, inherit);
}
.content-article h2 {
margin: 45px 0 0.65rem;
}
.content-article h3 {
margin: 25px 0 0.65rem;
}
.content-article :is(h4, h5, h6) {
margin: 0 0 0.65rem;
}
.content-article :is(h2, h3, h4, h5, h6) :is(a, span, p, strong, em, b, i, small) {
color: inherit;
}
/* --------------------------------------------------------------------------
Alignement et décalage (Writer)
-------------------------------------------------------------------------- */
.content-article p.writer-align-center,
.content-article blockquote p.writer-align-center {
text-align: center;
}
.content-article p.writer-align-right,
.content-article blockquote p.writer-align-right {
text-align: right;
}
.content-article p.writer-align-justify,
.content-article blockquote p.writer-align-justify {
text-align: justify;
}
.content-article p.writer-indent-1,
.content-article blockquote p.writer-indent-1 { margin-left: 1.25rem; }
.content-article p.writer-indent-2,
.content-article blockquote p.writer-indent-2 { margin-left: 2.5rem; }
.content-article p.writer-indent-3,
.content-article blockquote p.writer-indent-3 { margin-left: 3.75rem; }
.content-article p.writer-indent-4,
.content-article blockquote p.writer-indent-4 { margin-left: 5rem; }
.content-article p.writer-indent-5,
.content-article blockquote p.writer-indent-5 { margin-left: 6.25rem; }
/* Éditeur Writer : classes sur .writer-editable (div), pas seulement p */
.content-article .writer-editable.writer-align-center {
text-align: center;
}
.content-article .writer-editable.writer-align-right {
text-align: right;
}
.content-article .writer-editable.writer-align-justify {
text-align: justify;
}
.content-article .writer-editable.writer-indent-1 { margin-left: 1.25rem; }
.content-article .writer-editable.writer-indent-2 { margin-left: 2.5rem; }
.content-article .writer-editable.writer-indent-3 { margin-left: 3.75rem; }
.content-article .writer-editable.writer-indent-4 { margin-left: 5rem; }
.content-article .writer-editable.writer-indent-5 { margin-left: 6.25rem; }
/* --------------------------------------------------------------------------
Mise en page (Writer)
-------------------------------------------------------------------------- */
.content-article hr.writer-separator,
.writer-editor.content-article hr.writer-separator {
display: block;
width: 100%;
height: 0;
margin: 1.5rem 0;
padding: 0;
border: none;
border-top: 1px solid var(--portfolios-color-border, color-mix(in srgb, currentColor 22%, transparent));
border-top-color: color-mix(
in srgb,
var(--folio-button-background-color, var(--portfolios-heading-secondary-color, currentColor)) 55%,
var(--portfolios-color-border-custom, var(--portfolios-color-border, currentColor)) 45%
);
background: transparent;
opacity: 0.9;
}
.content-article .writer-spacer {
display: block;
width: 100%;
height: 10px;
margin: 0;
padding: 0;
border: none;
background: transparent;
}
.content-article .writer-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
width: 100%;
margin: 1rem 0;
}
.content-article .writer-column {
min-width: 0;
}
.content-article .writer-column > :first-child {
margin-top: 0;
}
.content-article .writer-column > :last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.content-article .writer-columns {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* --------------------------------------------------------------------------
Citations
-------------------------------------------------------------------------- */
#portfolio_page .content-article blockquote,
#portfolio_page .article .main blockquote,
#portfolio_page .content-article blockquote :is(p, span, cite, em, strong, b, i, li),
#portfolio_page .article .main blockquote :is(p, span, cite, em, strong, b, i, li) {
color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
}
.content-article blockquote {
position: relative;
padding: 50px;
margin-top: 30px;
margin-bottom: 20px;
}
.content-article blockquote * {
margin: 0;
font-weight: bold;
}
.content-article blockquote::before {
position: absolute;
content: '❝';
font-size: 60px;
left: 0;
top: 0;
}
.content-article blockquote::after {
position: absolute;
content: '❞';
font-size: 60px;
right: 0;
bottom: 0;
}
/* --------------------------------------------------------------------------
Listes
-------------------------------------------------------------------------- */
/* Fil d'Ariane (nav.ariane) dans une zone de texte : hors des listes éditoriales, il garde le style du thème
(:where = sans changer la priorité de ces règles). */
.content-article ul:where(:not(nav.ariane *)),
.content-article ol:where(:not(nav.ariane *)) {
margin-bottom: 25px;
}
.content-article ul li:where(:not(nav.ariane *)),
.content-article ol li:where(:not(nav.ariane *)) {
margin-left: 15px;
padding-left: 15px;
margin-bottom: 20px;
line-height: calc(1em + 15px);
}
.content-article ul li:where(:not(nav.ariane *)) {
list-style-type: disc;
}
.content-article ol li:where(:not(nav.ariane *)) {
list-style-type: decimal;
}
/* --------------------------------------------------------------------------
Figures et médias intégrés
-------------------------------------------------------------------------- */
.content-article .writer-figure {
display: flex;
flex-direction: column;
gap: var(--layout-space-y-sm, 15px);
margin: var(--layout-space-y-md, 25px) 0 var(--layout-space-y-lg, 45px);
}
.content-article .writer-figure img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--portfolios-thumbnail-radius, 0);
}
.content-article .writer-figure > :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook) {
margin-bottom: 0;
}
/* Légende : 1re ligne / gras = titre, reste = description. */
.content-article .writer-figure figcaption {
max-width: 65ch;
padding-left: var(--layout-space-x-sm, 10px);
border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
font-size: calc(var(--portfolios-font-size-base, 14px) * 0.9);
line-height: 1.55;
opacity: 0.78;
}
.content-article .writer-figure figcaption :is(strong, b) {
display: block;
margin-bottom: calc(var(--layout-space-y-sm, 15px) / 5);
font-size: 1.08em;
font-weight: 500;
opacity: 1;
}
.content-article .writer-figure figcaption:empty {
display: none;
}
.content-article .youtube,
.content-article .vimeo,
.content-article .dailymotion,
.content-article .tiktok,
.content-article .instagram,
.content-article .facebook {
max-width: 100%;
box-sizing: border-box;
margin-bottom: 1.5rem;
}
.content-article .youtube:not(.video-portrait),
.content-article .vimeo,
.content-article .dailymotion,
.content-article .facebook:not(.video-portrait) {
position: relative;
height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 56.25%;
}
.content-article .vimeo {
padding-bottom: 56.25%;
}
.content-article .youtube:not(.video-portrait) iframe,
.content-article .vimeo iframe,
.content-article .dailymotion iframe,
.content-article .facebook:not(.video-portrait) iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.content-article :is(.tiktok, .tiktok.video-portrait, .instagram, .instagram.video-portrait, .youtube.video-portrait, .facebook.video-portrait) {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
aspect-ratio: 9 / 16;
height: auto;
padding: 0;
overflow: hidden;
}
.content-article :is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait) iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
@media screen and (max-width: 700px) {
.content-article :is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait) {
max-height: 85svh;
}
}
.content-article .youtube iframe,
.content-article .dailymotion iframe,
.content-article iframe,
.content-article video,
.content-article embed,
.content-article object {
max-width: 100%;
box-sizing: border-box;
}
.content-article video {
height: auto;
}
#portfolio_page .content-article :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
#portfolio_page .content-article :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active,
#portfolio_page #media-article:is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
#portfolio_page #media-article :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover,
#portfolio_page #media-article:is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active,
#portfolio_page #media-article :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active {
filter: none;
transform: none;
transition: none;
}
/* --------------------------------------------------------------------------
Liens dans le corps : icône (soulignement et couleur : reading.css, couche lecture)
-------------------------------------------------------------------------- */
.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):where(:not(nav.ariane *))::after,
.content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after,
#subtitle-article a::after,
#subtitle-article p a::after,
.writer-page .writer-editor.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after {
content: "";
display: inline-block;
width: 0.8em;
height: 0.8em;
margin-left: 0.12em;
vertical-align: -0.05em;
background-color: currentColor;
-webkit-mask: var(--portfolios-content-link-icon) no-repeat center / contain;
mask: var(--portfolios-content-link-icon) no-repeat center / contain;
text-decoration: none;
pointer-events: none;
}
/* Hub Writer : priorité sur fonts.css (p, a { font-size: var(--portfolios-font-size-base) !important }) */
.writer-page form .writer-editor.content-article {
font-size: 14px;
line-height: calc(1em + 14px);
letter-spacing: normal;
}
.writer-page .writer-editor.content-article {
font-size: var(--portfolios-font-size-base, 14px);
line-height: calc(1em + 14px);
}
.writer-page .writer-editor.content-article :is(p, span, li, blockquote, h1, h2, h3, h4, h5, h6, .writer-list-item-text, .writer-editable) {
font-size: inherit;
line-height: inherit;
}
.writer-page .writer-editor.content-article :is(strong, b) {
font-weight: var(--portfolios-font-weight-bold, 700) !important;
}
.writer-page .writer-editor.content-article :is(em, i) {
font-style: italic !important;
}
/* Modes d'écriture (paragraphe, description, commentaire) : même taille dans l'éditeur */
.writer-page .writer-editor.content-article :is(
p.description,
.writer-editable.description,
p.commentaire,
.writer-editable.commentaire
) {
font-size: inherit;
line-height: inherit;
}
.writer-page .writer-editor.content-article h1 {
font-size: var(--portfolios-heading-primary-size, 21px) !important;
line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size, 21px) + 2px)) !important;
}
.writer-page .writer-editor.content-article :is(h2, h3, h4, h5, h6) {
font-size: var(--portfolios-heading-secondary-size, 14px) !important;
line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size, 14px) + 10px)) !important;
}
.writer-page .writer-editor.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)),
.writer-page .writer-editor.content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
color: inherit !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
font: inherit !important;
font-size: 1.06em !important;
text-decoration-line: underline !important;
text-decoration-thickness: 1px !important;
text-decoration-color: var(--portfolios-button-background-color, currentColor) !important;
text-underline-offset: 0.2em;
display: inline !important;
cursor: pointer !important;
transition: color 0.3s ease, text-decoration-color 0.3s ease, text-decoration-thickness 0.3s ease;
}
.writer-page .writer-editor.content-article a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active),
.writer-page .writer-editor.content-article p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active) {
color: var(--portfolios-button-background-color, currentColor) !important;
background: none !important;
box-shadow: none !important;
}
.writer-page .writer-editor.content-article img,
.writer-page .writer-editor.content-article .writer-figure img {
max-width: 100%;
height: auto;
box-sizing: border-box;
}
/* Placeholder éditeur (zones contenteditable vides) */
.writer-editor.content-article .writer-editable:empty::before {
content: attr(data-placeholder);
color: var(--writer-ui-muted, rgba(128, 128, 128, 0.75));
pointer-events: none;
}
/* --------------------------------------------------------------------------
Images — largeur conteneur par contexte de page
-------------------------------------------------------------------------- */
#portfolio_page .content-article img,
#portfolio_page #subtitle-article img,
#portfolio_page #content-article img,
#portfolio_page #blog-main-article img,
#portfolio_page #media-article img,
#portfolio_page .article img {
max-width: 100%;
height: auto;
box-sizing: border-box;
filter: none;
transform: none;
transition: none;
}
#portfolio_page .content-article img:hover,
#portfolio_page #subtitle-article img:hover,
#portfolio_page #content-article img:hover,
#portfolio_page #blog-main-article img:hover,
#portfolio_page #media-article img:hover,
#portfolio_page .article img:hover,
#portfolio_page .content-article img:active,
#portfolio_page #subtitle-article img:active,
#portfolio_page #content-article img:active,
#portfolio_page #blog-main-article img:active,
#portfolio_page #media-article img:active,
#portfolio_page .article img:active {
filter: none;
transform: none;
transition: none;
}
/*
* Fiches de contenu — bloc « A propos » (#about-content), rendu par
* includes/structure/about_card.php : titre → .about-card → .about-card-socials.
* Le conteneur .about-content porte about-align-left|center|right et pilote toute la pile :
* - gauche / droite : portrait à côté du texte (miroir à droite) ;
* - centre : portrait au-dessus du texte, tout centré.
* La carte est plafonnée à la largeur de lecture pour ne pas s'étaler en pleine largeur.
*/
#portfolio_page #about-content .about-card {
display: flex;
align-items: center;
gap: 24px;
max-width: var(--layout-width-read);
margin-bottom: 24px;
}
#portfolio_page #about-content .about-card .about-artist-img {
flex: 0 0 auto;
margin: 0;
}
#portfolio_page #about-content .about-card-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
#portfolio_page #about-content .about-card-body > * {
margin: 0;
}
#portfolio_page #about-content .about-card-socials .social-medias {
margin-bottom: 0;
justify-content: flex-start;
}
/* Droite : miroir de la gauche. */
#portfolio_page #about-content .about-align-right .about-card {
flex-direction: row-reverse;
margin-left: auto;
text-align: right;
}
#portfolio_page #about-content .about-align-right .about-card-body {
align-items: flex-end;
}
#portfolio_page #about-content .about-align-right .about-card-socials .social-medias {
justify-content: flex-end;
}
/* Centre : pile verticale centrée. */
#portfolio_page #about-content .about-align-center .about-card {
flex-direction: column;
margin-inline: auto;
text-align: center;
}
#portfolio_page #about-content .about-align-center .about-card-body {
align-items: center;
}
#portfolio_page #about-content .about-align-center .about-card-socials .social-medias {
justify-content: center;
}
/* Petit écran : pile verticale quel que soit l'alignement. */
@media screen and (max-width: 700px) {
#portfolio_page #about-content .about-card,
#portfolio_page #about-content .about-align-right .about-card {
flex-direction: column;
align-items: flex-start;
}
#portfolio_page #about-content .about-align-center .about-card {
align-items: center;
}
#portfolio_page #about-content .about-align-right .about-card {
align-items: flex-end;
}
}
}
/* assets/css/public/structure/layout/genai-badge.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* --------------------------------------------------------------------------
Bulle « IA générative » sous le titre des œuvres (arktefakt_genai_badge_html)
Habillage = pastille floutée (fond flouté, padding 10px 15px, survol à 0.8) ; elle n'est plus
liée au fil d'ariane, devenu discret. Rayon via la classe .portfolios-nav-links-radius
posée dans le HTML. Couleurs et espacements en tokens --portfolios-* / --layout-*.
Dans #title-about (flex colonne, gap --layout-space-y-sm) : aucune marge propre.
-------------------------------------------------------------------------- */
#portfolio_page .genai-badge {
position: relative;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--layout-space-x-sm, 10px);
width: auto;
max-width: 100%;
margin: 0;
padding: 10px 15px 10px 10px; /* icône calée à gauche */
box-sizing: border-box;
border: 0;
background: var(--portfolios-bg-contrast-transparence-color, rgba(139, 139, 139, 0.14));
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
background-clip: padding-box;
color: var(--portfolios-text-main-color, #222);
font-family: inherit;
font-size: calc(var(--portfolios-font-size-base, 14px) * 0.9);
line-height: 1.4;
opacity: 1;
cursor: help;
transition: 0.2s linear;
}
/* --------------------------------------------------------------------------
Emplacements (arktefakt_genai_placement / _tech_row_html / _mention_html)
-------------------------------------------------------------------------- */
/* Fiche technique : ligne « IA générative: ······ [bulle] » comme les autres lignes. */
#portfolio_page #technique article ul.genai-tech-row li:last-child {
max-width: none;
flex: 0 0 auto;
}
/* Bulle à droite : infobulle ancrée à droite pour ne pas déborder. */
#portfolio_page .genai-tech-row .genai-badge__tip {
left: auto;
right: 0;
}
#portfolio_page .genai-tech-row .genai-badge__tip::after {
left: auto;
right: var(--layout-space-x-md, 20px);
}
/* Fin de la section « A propos ». */
#portfolio_page .genai-mention--about {
margin-top: var(--layout-space-y-md, 25px);
}
/* Article de blog : sous le sous-titre, avant l'illustration. */
#portfolio_page .genai-mention--subtitle {
margin: var(--layout-space-y-sm, 15px) 0 var(--layout-space-y-md, 25px);
}
/* Bulle placée ailleurs (page personnalisée) : espacement de la grille. */
#portfolio_page :not(.genai-mention, #technique li) > .genai-badge {
margin-block: var(--layout-space-y-sm, 15px);
}
/* Survol : flou réduit, opacité 0.8 */
#portfolio_page .genai-badge:hover,
#portfolio_page .genai-badge:focus-visible {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* Opacité 0.8 sur le contenu seul, pour ne pas atténuer l'infobulle. */
#portfolio_page .genai-badge:is(:hover, :focus-visible) > :is(.genai-badge__icon, .genai-badge__label) {
opacity: 0.8;
}
#portfolio_page .genai-badge:focus-visible {
outline: 2px solid var(--portfolios-text-main-color, #222);
outline-offset: 2px;
}
#portfolio_page .genai-badge__icon {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
min-width: 2.2em;
height: 1.8em;
padding: 0 0.4em;
box-sizing: border-box;
border-radius: var(--portfolios-nav-links-radius, 0px);
background: var(--portfolios-theme-fill, var(--portfolios-text-main-color, #0f0f0f));
color: var(--portfolios-theme-bg-main, var(--portfolios-bg-main-color, #fafafa));
font-size: 0.8em;
font-weight: var(--portfolios-font-weight-bold, 600);
letter-spacing: 0.06em;
}
#portfolio_page .genai-badge--none .genai-badge__icon {
background: transparent;
color: var(--portfolios-text-main-color, #222);
border: 1px dashed var(--portfolios-border-strong-color, #bdbdbd);
text-decoration: line-through;
}
#portfolio_page .genai-badge__label {
color: inherit;
white-space: nowrap;
}
/* Infobulle : habillage de la bulle elle-même. */
#portfolio_page .genai-badge__tip {
position: absolute;
left: 0;
bottom: calc(100% + var(--layout-space-x-sm, 10px));
z-index: 5;
width: max-content;
max-width: min(300px, calc(100vw - 2 * var(--layout-gutter, 20px)));
padding: var(--layout-space-x-sm, 10px) var(--layout-space-x-md, 20px);
box-sizing: border-box;
border-radius: var(--portfolios-nav-links-radius, 0px);
/* Mêmes propriétés que la bulle (pastille floutée), sur une base opaque du fond de page
pour rester lisible au-dessus du contenu. */
background:
linear-gradient(var(--portfolios-bg-contrast-transparence-color, rgba(139, 139, 139, 0.14)), var(--portfolios-bg-contrast-transparence-color, rgba(139, 139, 139, 0.14))),
var(--portfolios-bg-main-color, #fafafa);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
color: var(--portfolios-text-main-color, #222);
box-shadow: var(--portfolios-shadow-box-shadow, 0 6px 20px rgba(0, 0, 0, 0.18));
font-size: inherit;
line-height: var(--portfolios-text-line-height, 1.5);
white-space: normal;
text-align: left;
opacity: 0;
transform: translateY(4px);
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
}
#portfolio_page .genai-badge__tip::after {
content: '';
position: absolute;
left: var(--layout-space-x-md, 20px);
top: 100%;
width: 10px;
height: 10px;
margin-top: -5px;
background: inherit;
transform: rotate(45deg);
z-index: -1;
}
#portfolio_page .genai-badge:is(:hover, :focus-visible) .genai-badge__tip {
opacity: 1;
transform: none;
}
@media screen and (max-width: 700px) {
#portfolio_page .genai-badge__label {
white-space: normal;
}
}
@media (prefers-reduced-motion: reduce) {
#portfolio_page .genai-badge,
#portfolio_page .genai-badge__tip {
transition: none;
}
}
}
/* assets/css/public/structure/layout/reading.css */
/* @layer-wrap:site.lecture */
@layer site.lecture {
/* Version: 19-10-2026-ariane */
/*
* Confort de lecture (site public uniquement) :
* - planchers sur les textes longs (.content-article, .pf-read) : taille mini, interligne ;
* - en pleine largeur, le texte courant est borné à --layout-width-read (core/layout.css) ;
* titres, médias et grilles suivent la largeur de page ;
* - préférence visiteur (assets/js/public/reading-tools.js) via --pf-read-scale / --pf-read-lh sur .
* Les réglages admin restent la base : on ne fait que borner par le bas.
* Chargé après fonts.css, content.css et headings.css (leurs règles sont surclassées par #portfolio_page).
*/
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
#portfolio_page {
--pf-read-min: 15px;
}
@media (max-width: 650px) {
#portfolio_page {
--pf-read-min: 16px;
}
}
/* --------------------------------------------------------------------------
Texte courant
-------------------------------------------------------------------------- */
#portfolio_page :is(.content-article, .pf-read) :is(p, li, dd, td, th, blockquote, figcaption, span, a, em, strong, code, small):not(:is(h1, h2, h3, h4, h5, h6, .pf-reading-tools, nav.ariane) *) {
font-size: calc(max(var(--portfolios-font-size-base, 14px), var(--pf-read-min)) * var(--pf-read-scale, 1));
line-height: max(var(--portfolios-text-line-height, 0px), calc(1em * var(--pf-read-lh, 1.75)));
overflow-wrap: break-word;
}
/* Description / chapô : proche du texte courant (pas plus de 1.1x), et suit le réglage visiteur */
#portfolio_page :is(.content-article, .pf-read) :is(p.description, .writer-editable.description) {
font-size: calc(max(var(--portfolios-font-size-base, 14px), var(--pf-read-min)) * 1.05 * var(--pf-read-scale, 1));
opacity: 1;
}
#portfolio_page main #subtitle-article h2.subtitle,
#portfolio_page main #subtitle-article h2.subtitle :is(p, span, a, strong, em, b, i, small) {
font-size: calc(max(var(--portfolios-font-size-base, 14px), var(--pf-read-min)) * 1.1 * var(--pf-read-scale, 1));
line-height: calc(1em * var(--pf-read-lh, 1.75) * 0.9);
font-weight: 600;
}
/* Interligne de base des paragraphes hors zones .content-article (modules, accueil...) */
#portfolio_page main :is(p, dd):not(:is(.content-article, .pf-read, .social-medias, button, a, .arkt-btn, .pf-thumbs--landscape, .pf-thumbs--square, .pf-thumbs--portrait, h1, h2, h3, h4, h5, h6) *):not(.pf-reading-tools__title) {
line-height: max(var(--portfolios-text-line-height, 0px), calc(1em * var(--pf-read-lh, 1.75)));
}
#portfolio_page :is(.content-article, .pf-read) :is(p.commentaire, .writer-editable.commentaire, figcaption) {
font-size: calc(max(var(--portfolios-font-size-base, 14px), var(--pf-read-min)) * 0.92 * var(--pf-read-scale, 1));
}
#portfolio_page :is(.content-article, .pf-read) :is(p, ul, ol, dl) {
margin-bottom: 1em;
hyphens: auto;
}
/* Pleine largeur : le conteneur (hero ou section) suit le réglage, seul le texte
courant est borné ; il se place selon l'alignement du bloc. En largeur limitée
la borne égale le conteneur : aucun effet. */
#portfolio_page .pf-w-wide :is(.content-article, .pf-read) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) {
max-width: var(--layout-width-read);
}
#portfolio_page .pf-w-wide :is(.title-align-center, .text-align-center):is(.content-article, .pf-read) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *),
#portfolio_page .pf-w-wide :is(.title-align-center, .text-align-center) :is(.content-article, .pf-read) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) {
margin-inline: auto;
}
#portfolio_page .pf-w-wide :is(.title-align-right, .text-align-right):is(.content-article, .pf-read) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *),
#portfolio_page .pf-w-wide :is(.title-align-right, .text-align-right) :is(.content-article, .pf-read) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) {
margin-left: auto;
}
#portfolio_page :is(.content-article, .pf-read) :is(ul, ol) li {
margin-bottom: 0.5em;
}
/* --------------------------------------------------------------------------
Titres dans les textes : suivent le réglage visiteur (leurs tailles sont des px calculés en PHP)
-------------------------------------------------------------------------- */
#portfolio_page :is(.content-article, .pf-read) h1 {
font-size: calc(var(--portfolios-heading-primary-size, 2em) * var(--pf-read-scale, 1));
}
#portfolio_page :is(.content-article, .pf-read) :is(h2, h3, h4, h5, h6) {
font-size: calc(var(--portfolios-heading-secondary-size, 1.4em) * var(--pf-read-scale, 1));
}
#portfolio_page :is(.content-article, .pf-read) :is(h1, h2, h3, h4, h5, h6):not(.subtitle) {
line-height: max(var(--portfolios-heading-secondary-line-height, 0px), 1.3em);
}
#portfolio_page :is(.content-article, .pf-read) :is(h1, h2, h3, h4, h5, h6) {
text-wrap: balance;
overflow-wrap: break-word;
}
/* --------------------------------------------------------------------------
Citations : moins massives, lisibles
-------------------------------------------------------------------------- */
#portfolio_page .content-article blockquote {
padding: 1.25em 1.5em 1.25em 3.25em;
margin-top: 1.5em;
margin-bottom: 1.25em;
border-left: 3px solid color-mix(in srgb, currentColor 35%, transparent);
}
/* Dernier bloc de l'article : pas de marge sous le texte (venu de modules/blog/article.css). */
#portfolio_page #content-article.content-article > :last-child {
margin-bottom: 0;
}
#portfolio_page .content-article blockquote * {
font-weight: 500;
font-style: italic;
}
#portfolio_page .content-article blockquote::before {
font-size: 2.5rem;
line-height: 1;
left: 0.75rem;
top: 0.5rem;
opacity: 0.55;
}
#portfolio_page .content-article blockquote::after {
content: none;
}
/* --------------------------------------------------------------------------
Méta : plancher de lisibilité
-------------------------------------------------------------------------- */
#portfolio_page :is(.article-blog-infos__meta, .article-blog-infos__description, #profil-infos .date, #profil-infos .author) {
font-size: max(var(--portfolios-font-size-meta, 12px), 12px);
line-height: 1.5;
}
/* --------------------------------------------------------------------------
Contrôles visiteur (confort de lecture + partage d'article)
Règles du hub : fantômes, sans fond ni ombre au repos ; au survol, léger fond teinté de l'encre
(8 %, comme --ak-state-hover) ; monochrome, aucune couleur de bouton ou d'accent du thème.
L'encre reste celle du texte de la page : ces contrôles sont posés sur le fond du portfolio.
-------------------------------------------------------------------------- */
#portfolio_page {
--pf-ctl-ink: var(--portfolios-body-text-color, var(--portfolios-text-main-color, currentColor));
--pf-ctl-ink-soft: color-mix(in srgb, var(--pf-ctl-ink) 72%, transparent);
--pf-ctl-line: color-mix(in srgb, var(--pf-ctl-ink) 16%, transparent);
--pf-ctl-tint: color-mix(in srgb, var(--pf-ctl-ink) 8%, transparent);
--pf-ctl-size: 34px;
}
.pf-reading-tools[hidden] {
display: none;
}
.pf-reading-tools__title {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.pf-reading-tools__group {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 1px solid var(--pf-ctl-line);
border-radius: 999px;
color: var(--pf-ctl-ink-soft);
}
.pf-reading-tools__btn,
.pf-act {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--pf-ctl-size);
height: var(--pf-ctl-size);
padding: 0 0.5rem;
margin: 0;
border: 0;
border-radius: 999px;
background: transparent;
box-shadow: none;
color: inherit;
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.pf-act svg,
.pf-act svg :is(path, circle, rect, polygon),
.pf-reading-tools__btn svg :is(path, circle, rect) {
transition: fill 0.3s ease, stroke 0.3s ease, color 0.3s ease;
}
.pf-act svg {
width: 20px;
height: 20px;
fill: currentColor;
stroke: none;
}
.pf-reading-tools__btn svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pf-reading-tools__btn:hover:not(:disabled),
.pf-reading-tools__btn:focus-visible,
.pf-act:is(:hover, :focus-visible) {
background: var(--pf-ctl-tint);
color: var(--pf-ctl-ink);
}
/* Barre d'article : passe devant les styles de liens et boutons du thème (même rendu fantôme). */
#portfolio_page .article-meta-block .pf-act:is(:hover, :focus-visible, .is-copied),
#portfolio_page .article-meta-block .pf-reading-tools__btn:is(:hover, :focus-visible):not(:disabled) {
background: var(--pf-ctl-tint);
color: var(--pf-ctl-ink);
filter: none;
box-shadow: none;
}
#portfolio_page .article-meta-block .pf-act:is(:hover, :focus-visible, .is-copied) svg,
#portfolio_page .article-meta-block .pf-act:is(:hover, :focus-visible, .is-copied) svg :is(path, circle, rect, polygon) {
fill: var(--pf-ctl-ink);
color: var(--pf-ctl-ink);
}
#portfolio_page .article-meta-block .pf-reading-tools__btn:is(:hover, :focus-visible):not(:disabled) svg :is(path, circle, rect) {
stroke: var(--pf-ctl-ink);
color: var(--pf-ctl-ink);
}
.pf-reading-tools__btn:focus-visible,
.pf-act:focus-visible {
outline: 2px solid var(--pf-ctl-ink);
outline-offset: 1px;
}
.pf-reading-tools__btn:disabled {
opacity: 0.3;
cursor: default;
}
.pf-reading-tools__value {
min-width: 3.2em;
text-align: center;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
color: var(--pf-ctl-ink-soft);
}
.pf-reading-tools__sep {
align-self: stretch;
width: 1px;
margin: 9px 2px;
background: var(--pf-ctl-line);
}
.pf-reading-tools--compact {
margin: 0 0 1.5rem;
}
/* Partage : icônes fantômes (markup dédié, indépendant du design « social » du portfolio) */
.pf-article-actions {
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
color: var(--pf-ctl-ink-soft);
}
.pf-article-actions li {
margin: 0;
padding: 0;
list-style: none;
}
.pf-act.is-copied {
color: var(--pf-ctl-ink);
background: var(--pf-ctl-tint);
}
@media (max-width: 480px) {
#portfolio_page #blog-main-article .blog-article-bar {
justify-content: flex-start;
}
}
/* --------------------------------------------------------------------------
Liens dans le corps — texte souligné dans la couleur des boutons du thème (après le texte courant,
spécificité supérieure : l'emporte sur lui ; icône : content.css)
-------------------------------------------------------------------------- */
#portfolio_page :is(.content-article, #subtitle-article) a:not(:is(h1, h2, h3, h4, h5, h6, .pf-reading-tools, nav.ariane) *) {
color: inherit;
background: none;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
font: inherit;
font-size: 1.06em;
letter-spacing: inherit;
text-transform: none;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 1px;
text-decoration-color: var(--portfolios-button-background-color, currentColor);
text-underline-offset: 0.2em;
display: inline;
cursor: pointer;
transition: color 0.3s ease, text-decoration-color 0.3s ease, text-decoration-thickness 0.3s ease;
}
#portfolio_page :is(.content-article, #subtitle-article) a:not(:is(h1, h2, h3, h4, h5, h6, .pf-reading-tools, nav.ariane) *):is(:hover, :active, :focus-visible) {
color: var(--portfolios-button-background-color, currentColor);
background: none;
box-shadow: none;
transform: none;
filter: none;
outline: none;
}
/* Dans une zone de texte (.content-article / .pf-read, ex. hero des pages légales), les styles
éditoriaux (puces, liens soulignés, interligne de lecture, marges) ne touchent pas au fil d'Ariane :
cette couche s'efface (revert-layer) et le fil garde le style de son thème (themes//links.css,
navigation/breadcrumbs.css), comme hors des zones de texte. */
#portfolio_page :is(.content-article, .pf-read) nav.ariane :is(ol, li, a, span),
#portfolio_page :is(.content-article, .pf-read) nav.ariane a::after {
all: revert-layer;
}
}
/* assets/css/public/structure/overlay/hub-viewer-theme.css */
/* @layer-wrap:site.editeur */
@layer site.editeur {
/* Version: 18-10-2026-08-30 */
/* Visionneuse photo + boutons fermer des modales (.ak-viewer-ctl) : thème hub sombre,
* chargé sur le site public et dans l'éditeur. Généré par portfolios/tools/build-editor-themes.php
* depuis themes/hub-structure.css + hub-tokens-base.css + hub-color.css : ne pas éditer à la main. */
#photo-viewer,
.ak-viewer-ctl {
--arktefakt-text-main: #fcfcfc;
--arktefakt-text-muted: #a0a0a0;
--ak-surface-0: #0e0e10;
--ak-surface-1: #121214;
--ak-surface-2: #161618;
--ak-surface-3: #2a2a2f;
--ak-state-hover: color-mix(in srgb, var(--arktefakt-text-main) 8%, var(--ak-surface-2));
--ak-state-pressed: color-mix(in srgb, var(--arktefakt-text-main) 12%, var(--ak-surface-2));
--arktefakt-border-width: 1.5px;
--arktefakt-border-tint: 255, 255, 255;
--arktefakt-border-main: rgba(var(--arktefakt-border-tint), 0.025);
--arktefakt-border-soft-color: var(--arktefakt-border-main);
--arktefakt-border-soft-hover-color: color-mix(in srgb, var(--arktefakt-border-main), var(--arktefakt-text-main) 6%);
--arktefakt-control-border-width: var(--arktefakt-border-width);
--arktefakt-control-border-color: var(--arktefakt-border-soft-color);
--ak-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
}
}
/* assets/css/public/structure/overlay/viewer-controls.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 03-10-2026 */
/* Boutons d'outil visiteur (visionneuse photo, fermer des modales enquête et équipe) :
* design du hub, jamais les réglages de boutons du portfolio. Ronds, sombres, monochromes.
* Tokens : hub-viewer-theme.css (généré, portée #photo-viewer et .ak-viewer-ctl).
* Le placement (position, marges) reste dans la feuille de chaque composant. */
#photo-viewer {
background: var(--ak-surface-0);
color: var(--arktefakt-text-main);
}
button.ak-viewer-ctl {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
min-width: 0;
min-height: 0;
padding: 0;
margin: 0;
border: var(--arktefakt-control-border-width) solid var(--arktefakt-control-border-color);
border-radius: 50%;
background: var(--ak-surface-2);
box-shadow: none;
color: var(--arktefakt-text-main);
font: inherit;
line-height: 1;
opacity: 1;
filter: none;
transform: none;
cursor: pointer;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
transition: background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.18s;
}
button.ak-viewer-ctl svg,
button.ak-viewer-ctl svg path {
width: 1.25rem;
height: 1.25rem;
margin: 0;
fill: var(--arktefakt-text-main);
color: var(--arktefakt-text-main);
stroke: none;
}
button.ak-viewer-ctl:hover {
background: var(--ak-state-hover);
border-color: var(--arktefakt-border-soft-hover-color);
}
button.ak-viewer-ctl:focus {
outline: none;
}
button.ak-viewer-ctl:focus-visible {
background: var(--ak-state-hover);
outline: 2px solid var(--arktefakt-text-main);
outline-offset: 2px;
}
button.ak-viewer-ctl:active {
background: var(--ak-state-pressed);
transform: scale(0.95);
}
button.ak-viewer-ctl:is(.disabled, :disabled) {
opacity: 0.4;
background: var(--ak-surface-2);
cursor: default;
pointer-events: none;
}
@media screen and (max-width: 900px) {
button.ak-viewer-ctl {
width: 2.25rem;
height: 2.25rem;
}
button.ak-viewer-ctl svg,
button.ak-viewer-ctl svg path {
width: 1.125rem;
height: 1.125rem;
}
}
@media (prefers-reduced-motion: reduce) {
button.ak-viewer-ctl:active {
transform: none;
}
}
}
/* assets/css/public/design/navigation/breadcrumbs.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 08-10-2026-c */
/* Fil d'Ariane public (arktefakt_portfolio_public_breadcrumb) :
Discret : texte atténué et plus petit, pastille floutée au survol seulement, page courante en texte simple.
Les anciens des thèmes personnalisés restent couverts. */
nav.ariane {
display: block;
min-width: 0;
}
nav.ariane > ol, ul.ariane, .breadcrumbs ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: .15rem;
align-items: center;
flex-wrap: wrap;
font-size: .85em;
}
.ariane li, .breadcrumbs li {
display: flex;
align-items: center;
gap: .15rem;
min-width: 0;
}
/* Alignement calé sur le titre qui suit (title-align-*). */
nav.ariane:has(+ h1.title-align-center) > ol { justify-content: center; }
nav.ariane:has(+ h1.title-align-right) > ol { justify-content: flex-end; }
/* Zones « À propos » (hero, blocs) : l'alignement est posé sur le conteneur (title-align-*),
le fil suit le texte. Centré / droite : pas de décalage de la pastille du premier lien. */
.title-align-center nav.ariane > ol { justify-content: center; }
.title-align-right nav.ariane > ol { justify-content: flex-end; }
.title-align-left nav.ariane > ol { justify-content: flex-start; }
:is(.title-align-center, .title-align-right) nav.ariane li:first-child > a,
#portfolio_page :is(.title-align-center, .title-align-right) :is(.content-article, .pf-read) nav.ariane li:first-child > a,
#portfolio_page :is(.content-article, .pf-read):is(.title-align-center, .title-align-right) nav.ariane li:first-child > a {
margin-left: 0;
}
/* Séparateur : petit chevron dessiné, couleur du texte atténuée. */
.ariane li + li::before,
.breadcrumbs li + li::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
margin: 0 4px 0 2px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: rotate(45deg);
color: var(--portfolios-text-main-color, #666);
opacity: .35;
}
.ariane a, .breadcrumbs a {
position: relative;
display: inline-block;
max-width: 18rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
padding: 4px 10px;
border-radius: var(--portfolios-button-radius, 0px);
background: transparent;
opacity: .6;
transition: background .2s linear, opacity .2s linear;
}
/* Couleur : passe devant le fourre-tout « #portfolio_page * » du socle (même couche : par la spécificité). */
.ariane a, .breadcrumbs a,
#portfolio_page :is(.ariane, .breadcrumbs) a {
color: var(--portfolios-text-main-color, #666);
}
.ariane a:hover, .breadcrumbs a:hover,
.ariane a:focus-visible, .breadcrumbs a:focus-visible {
outline: none;
opacity: 1;
background: var(--portfolios-bg-contrast-transparence-color, rgba(255,255,255,0.6));
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.ariane a:focus-visible, .breadcrumbs a:focus-visible {
box-shadow: 0 0 0 2px var(--portfolios-text-main-color, #666);
}
/* Le texte du premier lien s'aligne sur le titre ; la pastille de survol déborde à gauche. */
nav.ariane li:first-child > a,
#portfolio_page :is(.content-article, .pf-read) nav.ariane li:first-child > a {
margin-left: -10px;
}
/* Page courante : texte simple, sans pastille. */
.ariane [aria-current="page"] {
display: inline-block;
max-width: 24rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 4px 0 4px 4px;
color: var(--portfolios-text-main-color, #666);
opacity: .45;
}
/* Titres de catégorie des listes : lien vers la page de la catégorie, discret. */
.category-title-link {
color: inherit;
text-decoration: none;
transition: opacity .2s linear;
}
.category-title-link:hover,
.category-title-link:focus-visible {
opacity: .7;
}
@media (max-width: 600px) {
/* Mobile : un seul lien de retour vers le parent (« ‹ Romans »). */
nav.ariane li:not(.is-parent) {
display: none;
}
nav.ariane li.is-parent > a,
#portfolio_page :is(.content-article, .pf-read) nav.ariane li.is-parent > a {
margin-left: -10px;
}
nav.ariane li.is-parent::before {
display: none;
}
nav.ariane li.is-parent > a::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin: 0 8px 1px 2px;
border-bottom: 1.5px solid currentColor;
border-left: 1.5px solid currentColor;
transform: rotate(45deg);
}
ul.ariane li:not(:last-child) a,
.breadcrumbs li:not(:last-child) a {
max-width: 8rem;
}
}
@media print {
.ariane, .breadcrumbs { display: none; }
}
}
/* assets/css/public/design/themes/basic/footer.css */
/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 14-10-2026 — structure et alignement du pied de page (plan-header-footer.md, lot F1) */
/*
* Pied de page : structure commune à tous les thèmes (sans habillage) et alignement.
* - Dispositions ordinateur / mobile : footer-layouts.css ; réglages fins (blocs, espacement, séparation) : footer-options.css.
* - Fond et flou (partagés avec le header) : nav-background.css.
* - Habillage d'un thème : themes//footer.css (variables partagées avec le header : themes//chrome.css).
* - Apparence des liens, boutons, réseaux : links.css, buttons.css, socials.css.
* Balisage : public/includes/structure/footer.php (#footer : classe .nav + .nav-left / .nav-center / .nav-right ;
* #legal : mentions légales, même classe d'alignement).
*/
/* Grand nom (signature) : masqué par défaut ; les dispositions et les thèmes qui l'affichent le rallument. */
#portfolio_page #footer .footer-signature {
display: none;
}
/* fonts.css fixe la taille des span en !important : la signature suit son conteneur. */
#portfolio_page footer {
position: relative;
}
/* ==========================================================================
1. Alignement — réglage « Alignement du pied de page » (footer_align_custom)
Traduit une seule fois en deux variables (align.css, commun au header), lues par tous les éléments du pied de page et des mentions,
et par les dispositions (footer-layouts.css) et les thèmes qui empilent ou centrent des blocs.
========================================================================== */
/* Variables --pf-align-justify / --pf-align-text : themes/basic/align.css (partagées avec le header). */
/* Blocs et listes : texte et rangées flex (titres en inline-block, liens en pastille, icônes des réseaux). */
#portfolio_page #footer.nav :is(#footer-main, #footer-about, #footer-pages, #footer-pages > ul, #footer-social, .footer-signature) {
text-align: var(--pf-align-text);
}
#portfolio_page #footer.nav :is(#footer-main, #footer-pages, #footer-pages > ul, #footer-pages li, .footer-heading-item, #footer-social, #footer-social .social-medias, .footer-signature) {
justify-content: var(--pf-align-justify);
}
/* Présentation : le texte saisi dans l'éditeur (TinyMCE) porte souvent un text-align en ligne,
seul un !important le ramène sur l'alignement du pied de page. */
#portfolio_page #legal ul {
justify-content: var(--pf-align-justify);
text-align: var(--pf-align-text);
}
/* ==========================================================================
2. Structure
========================================================================== */
/* Lignes de liens en flex : les liens inline-block (pastille / trait, links.css) ne laissent
pas d'espace de ligne sous eux, et l'alignement suit justify-content. */
#portfolio_page #footer .nav__list > li {
display: flex;
}
#portfolio_page #footer-pages > ul > li:not(.footer-heading-item) {
/* Réglage « Espacement » : footer-options.css. */
margin-bottom: var(--pf-footer-link-gap, 15px);
align-items: flex-start;
}
#portfolio_page #footer #footer-social .social-medias {
gap: 10px;
}
#portfolio_page #footer #footer-social .social-medias li {
margin: 0;
}
/* Grille de pages (pf-cols-3 pf-cols-sm-2) à deux colonnes sur mobile : les réseaux, troisième bloc,
prennent toute la largeur au lieu d'une demi-colonne. */
@media (max-width: 1100px) {
#portfolio_page #footer-pages.pf-cols-sm-2 > #footer-social {
grid-column: 1 / -1;
}
}
/* ==========================================================================
3. Mentions légales (#legal) : petite ligne de liens texte (la liste n'est pas un menu : legal__list)
========================================================================== */
#portfolio_page #legal {
display: flex;
position: relative;
}
#portfolio_page #legal ul {
display: flex;
flex-wrap: wrap;
/* Écart par gap (pas de marge à droite des li) : l'alignement centré / droite tombe juste. */
gap: 2px 15px;
}
#portfolio_page #legal ul li {
margin: 0;
}
/* Taille volontairement petite et indépendante des réglages typo / nav du thème (fonts.css applique
--portfolios-nav-font-size au header et au pied de page). */
/* Liens texte simples, couleur du texte du thème utilisateur. */
#portfolio_page #legal a {
color: var(--portfolios-text-main-color);
text-decoration: none;
text-underline-offset: 0.15em;
}
#portfolio_page #legal a:focus-visible {
outline: 2px solid color-mix(in srgb, var(--portfolios-text-main-color) 45%, transparent);
outline-offset: 2px;
}
/* #visitor_mode : styles dans structure/overlay/visitor-mode.css (chargé en mode plein écran) */
}
/* 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 #footer .footer-signature span {
font-size: inherit;
line-height: inherit;
}
#portfolio_page #footer.nav #footer-about :is(a.footer-heading, p, div, span, li) {
text-align: var(--pf-align-text);
}
#portfolio_page footer#legal,
#portfolio_page footer#legal :is(ul, li, a) {
font-size: 0.6875rem;
line-height: 1.35;
}
}
/* assets/css/public/design/themes/basic/footer-layouts.css */
/* @layer-wrap:site.dispositions */
@layer site.dispositions {
/*
* Dispositions du pied de page — réglages « Pied de page sur ordinateur / sur mobile » (/setup/theme).
* Attributs posés par portfolios_matrix_footer_attrs() sur #footer et #legal :
* data-footer-desktop : theme | columns | stacked | inline | signature | card | minimal
* data-footer-mobile : theme | stacked | grid | compact | card | minimal
*
* Règle : la disposition décide de l'arrangement (grille, ligne, empilement) et des blocs affichés ;
* le thème garde son habillage (couleurs, filets, polices, tuiles, grand nom, fond et flou).
* « theme » n'a aucune règle ici : c'est la section « Selon le thème » de themes//footer.css
* (ou la structure de themes/basic/footer.css pour les thèmes Basic).
*
* Alignement : variables --pf-align-justify / --pf-align-text (themes/basic/align.css), jamais de valeur en dur.
* Priorité : chaque règle commence par « :root #portfolio_page #footer[data-footer-…] », un cran au-dessus de la
* section « Selon le thème » des thèmes (#portfolio_page #footer[data-matrix=…]) qu'elle remplace. Provisoire :
* remplacé par les couches CSS (docs/llm/plans/plan-header-footer.md, D4).
* Écart entre blocs : --pf-footer-gap (les thèmes à tuiles le règlent dans leur footer.css / chrome.css ; repli 2rem 3rem).
* L'aperçu de l'éditeur est une iframe à la vraie largeur : les @media s'y appliquent comme sur le site.
*/
/* --pf-footer-gap : écart posé par le thème (couche antérieure) ou par l'option de densité (footer-options.css) ;
sinon 2rem 3rem, valeur de repli de chaque lecture. */
/* ==========================================================================
Ordinateur (≥ 1101 px)
========================================================================== */
@media (min-width: 1101px) {
/* --- Colonnes et Grande signature : présentation, puis trois colonnes (À propos, Portfolio, Réseaux) --- */
:root #portfolio_page #footer:is([data-footer-desktop="columns"], [data-footer-desktop="signature"]) #footer-main {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.7fr);
gap: var(--pf-footer-gap, 2rem 3rem);
/* Blocs de même hauteur : les tuiles (Bento, Brutal) restent alignées. */
align-items: stretch;
}
:root #portfolio_page #footer:is([data-footer-desktop="columns"], [data-footer-desktop="signature"]) #footer-pages {
display: grid;
/* Réseaux masqués : leur colonne disparaît (--pf-footer-no-socials, footer-options.css). */
grid-template-columns: repeat(calc(3 - var(--pf-footer-no-socials, 0)), minmax(0, 1fr));
gap: var(--pf-footer-gap, 2rem 3rem);
grid-column: auto;
}
:root #portfolio_page #footer:is([data-footer-desktop="columns"], [data-footer-desktop="signature"]) :is(#footer-about, #footer-pages > *) {
grid-column: auto;
}
:root #portfolio_page #footer:is([data-footer-desktop="columns"], [data-footer-desktop="signature"]) #footer-pages > ul {
display: block;
}
/* Colonnes, Grande signature, Empilée : description affichée (et titres des groupes pour les colonnes),
même si le thème les masque dans sa propre disposition (Galerie, Cinéma). */
:root #portfolio_page #footer:is([data-footer-desktop="columns"], [data-footer-desktop="signature"], [data-footer-desktop="stacked"]) #footer-about p {
display: block;
}
:root #portfolio_page #footer:is([data-footer-desktop="columns"], [data-footer-desktop="signature"]) .footer-heading-item {
display: flex;
}
/* Grande signature : le nom du site en très grand, sous les colonnes. Les thèmes qui dessinent le leur
(data-signature="own" : Suisse, Bento, Cinéma, Cinétique) gardent sa typographie. :where() garde la priorité
des autres dispositions : « Blocs affichés » (footer-options.css, chargé après) peut masquer le grand nom. */
:root #portfolio_page #footer[data-footer-desktop="signature"] {
display: flex;
flex-direction: column;
}
:root #portfolio_page #footer[data-footer-desktop="signature"] #footer-main {
order: 0;
width: 100%;
}
:root #portfolio_page #footer[data-footer-desktop="signature"] .footer-signature {
order: 99;
}
:root #portfolio_page #footer[data-footer-desktop="signature"]:where(:not([data-signature="own"])) .footer-signature {
position: relative;
z-index: 1;
display: block;
box-sizing: border-box;
width: 100%;
max-width: var(--layout-width-wide);
margin: var(--layout-space-y-md, 2rem) auto 0;
overflow: hidden;
font-size: clamp(3rem, 11vw, 10rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.9;
/* Jamais coupé : un nom long passe à la ligne entre les mots (lignes équilibrées), un mot de 12 lettres
et plus est coupé avec un trait d'union. */
white-space: normal;
overflow-wrap: break-word;
hyphens: auto;
hyphenate-limit-chars: 12 5 5;
text-wrap: balance;
color: var(--portfolios-nav-text-color, currentColor);
}
:root #portfolio_page #footer[data-footer-desktop="signature"]:where(:not([data-signature="own"])) .footer-signature span + span {
display: none;
}
/* --- Empilée : blocs les uns sous les autres, liens à plat, titres de groupes masqués --- */
:root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-main {
display: flex;
flex-direction: column;
align-items: var(--pf-align-justify);
gap: 1.75rem;
}
:root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-about {
max-width: 40rem;
margin: 0;
}
:root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-pages {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: var(--pf-align-justify);
gap: 0.75rem 2.5rem;
grid-column: auto;
}
:root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-pages > ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: var(--pf-align-justify);
gap: 0.5rem 1.5rem;
margin: 0;
}
:root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-pages > ul > li {
margin: 0;
}
:root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-pages .footer-heading-item {
display: none;
}
:root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-social {
flex-basis: 100%;
}
/* --- En ligne : une bande — nom (et contact) au début, réseaux à la fin ; les liens à plat se placent
selon l'alignement : contre le nom, centrés entre les deux, ou contre les réseaux. --- */
:root #portfolio_page #footer[data-footer-desktop="inline"] #footer-main {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 2.5rem;
text-align: left;
}
:root #portfolio_page #footer[data-footer-desktop="inline"] #footer-about {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.25rem;
margin: 0;
}
:root #portfolio_page #footer[data-footer-desktop="inline"] #footer-about :is(p, .nav__list, .footer-heading, .footer-contact-button) {
margin: 0;
}
:root #portfolio_page #footer[data-footer-desktop="inline"] :is(#footer-about p, #footer-pages .footer-heading-item, .footer-signature) {
display: none;
}
:root #portfolio_page #footer[data-footer-desktop="inline"] #footer-pages {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0.5rem 2rem;
grid-column: auto;
}
:root #portfolio_page #footer[data-footer-desktop="inline"] #footer-pages > ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 1.25rem;
margin: 0;
}
:root #portfolio_page #footer[data-footer-desktop="inline"] #footer-pages > ul > li {
margin: 0;
}
:root #portfolio_page #footer[data-footer-desktop="inline"] #footer-social {
margin-left: auto;
}
:root #portfolio_page #footer[data-footer-desktop="inline"]:is(.nav-center, .nav-right) #about-pages {
margin-left: auto;
}
:root #portfolio_page #footer[data-footer-desktop="inline"].nav-right #footer-social {
margin-left: 0;
}
:root #portfolio_page #footer[data-footer-desktop="inline"] #footer-main > .arktefakt-frame {
flex-basis: 100%;
}
/* --- Minimale : nom et réseaux sur une ligne, listes de pages masquées (les mentions suivent dans #legal) --- */
:root #portfolio_page #footer[data-footer-desktop="minimal"] #footer-main {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: var(--pf-align-justify);
gap: 1rem 2.5rem;
}
:root #portfolio_page #footer[data-footer-desktop="minimal"] :is(#footer-about p, .footer-contact-button, #footer-pages > ul, #footer-social .nav__list, .footer-signature) {
display: none;
}
:root #portfolio_page #footer[data-footer-desktop="minimal"] :is(#footer-about, #footer-about .nav__list, #footer-about .footer-heading) {
margin: 0;
}
:root #portfolio_page #footer[data-footer-desktop="minimal"] #footer-pages {
display: flex;
flex: 0 1 auto;
grid-column: auto;
}
:root #portfolio_page #footer[data-footer-desktop="minimal"] #footer-main > .arktefakt-frame {
flex-basis: 100%;
}
/* --- En carte : le pied de page dans un panneau arrondi détaché des bords (comme l'en-tête « En bulle ») ;
arrangement du thème gardé. Verre et Bento, qui dessinent déjà leurs blocs (data-island="own"),
gardent leur rendu. Contour et ombre : ceux des menus flottants du thème. --- */
:root #portfolio_page #footer[data-footer-desktop="card"]:not([data-island="own"])::before,
:root #portfolio_page #footer[data-footer-desktop="card"]:not([data-island="own"]) .footer-glass {
inset: var(--pf-island-gap, 0.75rem);
border-radius: max(var(--pf-radius, 0px), 1rem);
}
:root #portfolio_page #footer[data-footer-desktop="card"]:not([data-island="own"])::before {
border: var(--pf-float-edge, 0 solid transparent);
box-shadow: var(--pf-float-shadow, var(--pf-panel-shadow));
/* Panneau : fond et flou de la pilule (nav-background.css), couleur pleine même sur un fondu (Cinéma). */
background: var(--pf-island-bg);
}
:root #portfolio_page #footer[data-footer-desktop="card"]:not([data-island="own"]) .footer-glass {
-webkit-backdrop-filter: var(--pf-island-blur);
backdrop-filter: var(--pf-island-blur);
}
:root #portfolio_page #footer[data-footer-desktop="card"]:not([data-island="own"]) {
/* Pas de filet au-dessus de la carte : variable lue par structure/layout/theme-advanced-colors.css. */
--pf-footer-rule: 0 solid transparent;
border-top: 0;
padding-block: calc(var(--pf-island-gap, 0.75rem) + 2rem);
}
:root #portfolio_page #footer[data-footer-desktop="card"]:not([data-island="own"]) #footer-main {
box-sizing: border-box;
padding-inline: 1.5rem;
}
}
/* ==========================================================================
Mobile (≤ 1100 px)
========================================================================== */
@media (max-width: 1100px) {
/* Empilée et Deux colonnes : description et titres des groupes affichés (voir Colonnes, ordinateur). */
:root #portfolio_page #footer:is([data-footer-mobile="stacked"], [data-footer-mobile="grid"]) #footer-about p {
display: block;
}
:root #portfolio_page #footer:is([data-footer-mobile="stacked"], [data-footer-mobile="grid"]) .footer-heading-item {
display: flex;
}
/* --- Empilée : une colonne --- */
:root #portfolio_page #footer[data-footer-mobile="stacked"] #footer-main {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.5rem;
}
:root #portfolio_page #footer[data-footer-mobile="stacked"] #footer-pages {
display: flex;
flex-direction: column;
gap: 1.25rem;
grid-column: auto;
}
:root #portfolio_page #footer[data-footer-mobile="stacked"] :is(#footer-about, #footer-pages > *) {
grid-column: auto;
margin-bottom: 0;
}
:root #portfolio_page #footer[data-footer-mobile="stacked"] #footer-pages > ul {
display: block;
}
/* --- Deux colonnes : « À propos » et « Portfolio » côte à côte, présentation et réseaux sur toute la largeur --- */
:root #portfolio_page #footer[data-footer-mobile="grid"] #footer-main {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1.5rem;
}
:root #portfolio_page #footer[data-footer-mobile="grid"] #footer-pages {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem 1rem;
grid-column: auto;
}
:root #portfolio_page #footer[data-footer-mobile="grid"] #footer-pages > * {
grid-column: auto;
margin-bottom: 0;
}
:root #portfolio_page #footer[data-footer-mobile="grid"] #footer-pages > ul {
display: block;
}
:root #portfolio_page #footer[data-footer-mobile="grid"] #footer-social {
grid-column: 1 / -1;
}
/* --- Compacte : liens à plat (simple espacement : un séparateur se retrouverait en début de ligne au retour
à la ligne), description et titres de groupes masqués --- */
:root #portfolio_page #footer[data-footer-mobile="compact"] #footer-main {
display: flex;
flex-direction: column;
align-items: var(--pf-align-justify);
gap: 1.25rem;
text-align: var(--pf-align-text);
}
:root #portfolio_page #footer[data-footer-mobile="compact"] :is(#footer-about p, #footer-pages .footer-heading-item, #footer-social .nav__list) {
display: none;
}
:root #portfolio_page #footer[data-footer-mobile="compact"] #footer-about {
display: flex;
flex-direction: column;
align-items: var(--pf-align-justify);
margin: 0;
}
:root #portfolio_page #footer[data-footer-mobile="compact"] #footer-pages {
display: flex;
flex-direction: column;
align-items: var(--pf-align-justify);
gap: 0.6rem;
grid-column: auto;
}
:root #portfolio_page #footer[data-footer-mobile="compact"] #footer-pages > ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: var(--pf-align-justify);
gap: 0.4rem 1.1rem;
margin: 0;
}
:root #portfolio_page #footer[data-footer-mobile="compact"] #footer-pages > ul > li {
align-items: center;
margin: 0;
}
:root #portfolio_page #footer[data-footer-mobile="compact"] #footer-social {
margin-top: 0.4rem;
}
/* --- Minimale : nom et réseaux seulement (les mentions suivent dans #legal) --- */
:root #portfolio_page #footer[data-footer-mobile="minimal"] #footer-main {
display: flex;
flex-direction: column;
align-items: var(--pf-align-justify);
gap: 1rem;
text-align: var(--pf-align-text);
}
:root #portfolio_page #footer[data-footer-mobile="minimal"] :is(#footer-about p, .footer-contact-button, #footer-pages > ul, #footer-social .nav__list, .footer-signature) {
display: none;
}
:root #portfolio_page #footer[data-footer-mobile="minimal"] :is(#footer-about, #footer-about .nav__list, #footer-about .footer-heading) {
margin: 0;
}
:root #portfolio_page #footer[data-footer-mobile="minimal"] #footer-pages {
display: flex;
justify-content: var(--pf-align-justify);
grid-column: auto;
}
/* --- En carte : panneau arrondi détaché des bords (comme l'en-tête « Flottante ») ; arrangement du thème --- */
:root #portfolio_page #footer[data-footer-mobile="card"]:not([data-island="own"])::before,
:root #portfolio_page #footer[data-footer-mobile="card"]:not([data-island="own"]) .footer-glass {
inset: 0.6rem;
border-radius: var(--pf-radius);
}
:root #portfolio_page #footer[data-footer-mobile="card"]:not([data-island="own"])::before {
border: var(--pf-float-edge, 0 solid transparent);
box-shadow: var(--pf-float-shadow, var(--pf-panel-shadow));
/* Panneau : fond et flou de la pilule (nav-background.css), couleur pleine même sur un fondu (Cinéma). */
background: var(--pf-island-bg);
}
:root #portfolio_page #footer[data-footer-mobile="card"]:not([data-island="own"]) .footer-glass {
-webkit-backdrop-filter: var(--pf-island-blur);
backdrop-filter: var(--pf-island-blur);
}
:root #portfolio_page #footer[data-footer-mobile="card"]:not([data-island="own"]) {
--pf-footer-rule: 0 solid transparent;
border-top: 0;
padding-block: 2.25rem;
}
:root #portfolio_page #footer[data-footer-mobile="card"]:not([data-island="own"]) #footer-main {
box-sizing: border-box;
padding-inline: 1rem;
}
}
}
/* assets/css/public/design/themes/basic/footer-options.css */
/* @layer-wrap:site.dispositions */
@layer site.dispositions {
/* Version: 14-10-2026 — réglages fins du pied de page (docs/llm/plans/plan-header-footer.md, lot F4) */
/*
* Réglages fins du pied de page, par-dessus la disposition (footer-layouts.css) et le thème : Premium,
* réglés à part sur ordinateur et sur mobile (/setup/theme, partials/footer-menu.php).
* Attributs posés par portfolios_footer_option_attrs() sur #footer et #legal, seulement s'ils s'écartent du thème :
* data-footer-hide-{desktop|mobile} blocs masqués, liste de mots (lue par ~=) :
* description contact headings socials signature
* data-footer-spacing-{desktop|mobile} compact | airy
* data-footer-rule-{desktop|mobile} none | rule | contrast
*
* Espacement et séparation passent par des variables, jamais par une valeur imposée aux thèmes :
* --layout-space-y-sm/md/lg utilitaires pf-pt-lg, pf-pb-md, pf-mb-md… (core/layout.css), redéfinis sur le pied de page ;
* --pf-footer-gap écart entre blocs des dispositions ;
* --pf-footer-link-gap écart entre les liens d'un groupe (footer.css) ;
* --pf-footer-rule filet du haut (structure/layout/theme-advanced-colors.css) ;
* --pf-chrome-bg teinte de la barre (nav-background.css).
* Masquer un bloc : chargé après footer-layouts.css, même priorité (:root #portfolio_page #footer[…]) que les
* dispositions qui réaffichent des blocs : le choix de l'utilisateur passe en dernier.
*/
/* ==========================================================================
Ordinateur (≥ 1101 px)
========================================================================== */
@media (min-width: 1101px) {
/* --- Blocs affichés --- */
:root #portfolio_page #footer[data-footer-hide-desktop~="description"] #footer-about p {
display: none;
}
:root #portfolio_page #footer[data-footer-hide-desktop~="contact"] #footer-about .footer-contact-button {
display: none;
}
:root #portfolio_page #footer[data-footer-hide-desktop~="headings"] #footer-pages .footer-heading-item {
display: none;
}
:root #portfolio_page #footer[data-footer-hide-desktop~="socials"] #footer-pages #footer-social {
display: none;
}
/* Réseaux masqués : les grilles où ils occupent une colonne la retirent (thèmes, « Colonnes » :
repeat(calc(N - var(--pf-footer-no-socials, 0)), …)) ; grille du socle (pf-cols-3) : --cols. */
:root #portfolio_page #footer[data-footer-hide-desktop~="socials"] {
--pf-footer-no-socials: 1;
}
:root #portfolio_page #footer[data-footer-hide-desktop~="socials"] #footer-pages.pf-cols-3 {
--cols: 2;
--cols-lg-auto: 2;
}
:root #portfolio_page #footer[data-footer-hide-desktop~="signature"] .footer-signature {
display: none;
}
/* --- Espacement --- */
:root #portfolio_page #footer[data-footer-spacing-desktop="compact"] {
--layout-space-y-sm: 8px;
--layout-space-y-md: 14px;
--layout-space-y-lg: 24px;
--pf-footer-gap: 1rem 1.75rem;
--pf-footer-link-gap: 8px;
}
:root #portfolio_page #footer[data-footer-spacing-desktop="airy"] {
--layout-space-y-sm: 22px;
--layout-space-y-md: 40px;
--layout-space-y-lg: 80px;
--pf-footer-gap: 3rem 4.5rem;
--pf-footer-link-gap: 22px;
}
/* --- Séparation du haut --- */
:root #portfolio_page #footer[data-footer-rule-desktop="none"] {
--pf-footer-rule: 0 none;
}
:root #portfolio_page #footer[data-footer-rule-desktop="rule"] {
--pf-footer-rule: var(--pf-theme-footer-rule, var(--pf-rule-width, 1px) solid var(--pf-rule-color, currentColor));
}
/* Fond contrasté : la barre du pied de page et des mentions prend une teinte nettement distincte du fond
de page, y compris pour les thèmes à pilule (la barre se rallume derrière leurs blocs). Sans filet.
« En carte » garde son panneau (--pf-island-bg). */
:root #portfolio_page :is(#footer, #legal)[data-footer-rule-desktop="contrast"] {
--pf-footer-rule: 0 none;
--pf-chrome-bg: color-mix(in srgb, var(--portfolios-text-main-color, #111) 8%, var(--portfolios-theme-bg-main, #fff));
}
:root #portfolio_page :is(#footer, #legal)[data-footer-rule-desktop="contrast"]::before {
display: block;
}
}
/* ==========================================================================
Mobile (≤ 1100 px)
========================================================================== */
@media (max-width: 1100px) {
:root #portfolio_page #footer[data-footer-hide-mobile~="description"] #footer-about p {
display: none;
}
:root #portfolio_page #footer[data-footer-hide-mobile~="contact"] #footer-about .footer-contact-button {
display: none;
}
:root #portfolio_page #footer[data-footer-hide-mobile~="headings"] #footer-pages .footer-heading-item {
display: none;
}
:root #portfolio_page #footer[data-footer-hide-mobile~="socials"] #footer-pages #footer-social {
display: none;
}
:root #portfolio_page #footer[data-footer-hide-mobile~="socials"] {
--pf-footer-no-socials: 1;
}
:root #portfolio_page #footer[data-footer-hide-mobile~="socials"] #footer-pages.pf-cols-3 {
--cols: 2;
}
:root #portfolio_page #footer[data-footer-hide-mobile~="signature"] .footer-signature {
display: none;
}
:root #portfolio_page #footer[data-footer-spacing-mobile="compact"] {
--layout-space-y-sm: 6px;
--layout-space-y-md: 12px;
--layout-space-y-lg: 20px;
--pf-footer-gap: 0.75rem 1.25rem;
--pf-footer-link-gap: 6px;
}
:root #portfolio_page #footer[data-footer-spacing-mobile="airy"] {
--layout-space-y-sm: 20px;
--layout-space-y-md: 34px;
--layout-space-y-lg: 64px;
--pf-footer-gap: 2.5rem 3rem;
--pf-footer-link-gap: 20px;
}
:root #portfolio_page #footer[data-footer-rule-mobile="none"] {
--pf-footer-rule: 0 none;
}
:root #portfolio_page #footer[data-footer-rule-mobile="rule"] {
--pf-footer-rule: var(--pf-theme-footer-rule, var(--pf-rule-width, 1px) solid var(--pf-rule-color, currentColor));
}
:root #portfolio_page :is(#footer, #legal)[data-footer-rule-mobile="contrast"] {
--pf-footer-rule: 0 none;
--pf-chrome-bg: color-mix(in srgb, var(--portfolios-text-main-color, #111) 8%, var(--portfolios-theme-bg-main, #fff));
}
:root #portfolio_page :is(#footer, #legal)[data-footer-rule-mobile="contrast"]::before {
display: block;
}
}
}
/* assets/css/public/structure/feedback/loader.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
/* Version: 02-09-2026-save-loader-stop */
#loader {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 790;
background-color: var(
--portfolios-theme-bg-main,
var(--portfolios-bg-main-color, var(--portfolios-color-bg-main, #fafafa))
);
color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
font-family: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif);
background-image: none;
pointer-events: none;
opacity: 1;
visibility: visible;
transition: opacity 420ms ease, visibility 0s linear 420ms;
}
body.customizer-page #loader {
display: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
#loader::before {
content: "";
position: absolute;
inset: 0;
background-color: inherit;
background-image: none;
pointer-events: none;
transition: opacity 420ms ease, background 420ms ease;
}
#loader.loader-hidden::before {
opacity: 0;
}
.ark-loader {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.1rem;
pointer-events: none;
color: var(--portfolios-icon-color, var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit)));
}
.ark-loader-mark {
position: relative;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
}
.ark-loader-pulse {
position: absolute;
inset: 4px;
border-radius: var(--portfolios-border-radius-full, 50%);
background: currentColor;
opacity: 0.08;
animation: ark-loader-pulse 1.6s ease-in-out infinite;
}
.ark-loader-ring {
position: relative;
z-index: 1;
width: 48px;
height: 48px;
display: block;
animation: ark-loader-spin 1.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.ark-loader-ring-track,
.ark-loader-ring-arc {
fill: none;
stroke: currentColor;
stroke-width: 3;
}
.ark-loader-ring-track {
opacity: 0.16;
}
.ark-loader-ring-arc {
stroke-linecap: round;
stroke-dasharray: 56 80;
}
@keyframes ark-loader-spin {
to {
transform: rotate(360deg);
}
}
@keyframes ark-loader-pulse {
0%,
100% {
transform: scale(0.72);
opacity: 0.05;
}
50% {
transform: scale(1);
opacity: 0.12;
}
}
.ark-loader-label {
color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
font-family: var(--portfolios-font-name), var(--portfolios-font-stack, sans-serif);
font-size: var(--portfolios-font-size-base);
font-weight: 400;
letter-spacing: var(--portfolios-letter-spacing, 0.4px);
line-height: var(--portfolios-text-line-height, 1.2);
text-align: center;
opacity: 0.88;
}
.sr-only {
position: absolute;
left: -9999px;
}
#loader.loader-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Header / footer restent visibles au-dessus du loader ; seul le contenu est masqué */
html:not(.ark-page-ready) #portfolio_page {
opacity: 1;
visibility: visible;
z-index: auto;
}
html:not(.ark-page-ready) #portfolio_page > :is(header, #header, footer, #footer, #legal) {
opacity: 1;
visibility: visible;
position: relative;
z-index: 820;
}
html:not(.ark-page-ready) #portfolio_page > :not(header):not(#header):not(footer):not(#footer):not(#legal):not(#loader),
html:not(.ark-page-ready) .page-content {
opacity: 0;
}
html.ark-page-ready #portfolio_page,
html.ark-page-ready .page-content {
opacity: 1;
visibility: visible;
transition: none;
}
@media (max-width: 600px) {
.ark-loader-mark {
width: 48px;
height: 48px;
}
.ark-loader-ring {
width: 40px;
height: 40px;
}
.ark-loader-label {
font-size: 0.95rem;
}
}
@media (prefers-reduced-motion: reduce) {
#loader {
transition: opacity 160ms linear, visibility 0s linear 160ms;
}
#loader::before {
transition: opacity 160ms linear;
}
.ark-loader-pulse,
.ark-loader-ring {
animation: none;
}
.ark-loader-ring-arc {
stroke-dasharray: 70 44;
opacity: 0.85;
}
.ark-loader-pulse {
opacity: 0.08;
transform: none;
}
}
}
/* assets/css/public/structure/feedback/page-reveal.css */
/* @layer-wrap:site.effets */
@layer site.effets {
/* Version: 20-09-2026-16-46 */
/* Opt-out custom templates: html[data-ark-reveal="off"] */
#portfolio_page {
--ark-reveal-duration: 520ms;
--ark-reveal-distance: 18px;
--ark-reveal-stagger: 70ms;
--ark-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
#portfolio_page .ark-reveal {
opacity: 0;
transform: translateY(var(--ark-reveal-distance));
transition:
opacity var(--ark-reveal-duration) var(--ark-reveal-ease),
transform var(--ark-reveal-duration) var(--ark-reveal-ease);
transition-delay: calc(var(--ark-reveal-index, 0) * var(--ark-reveal-stagger));
will-change: opacity, transform;
}
#portfolio_page .ark-reveal.ark-reveal--fade {
transform: none;
will-change: opacity;
}
#portfolio_page .ark-reveal.is-revealed {
opacity: 1;
transform: none;
}
html.ark-reveal-skip #portfolio_page .ark-reveal,
html[data-ark-reveal="off"] #portfolio_page .ark-reveal {
opacity: 1;
transform: none;
transition: none;
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
#portfolio_page {
--ark-reveal-duration: 0ms;
--ark-reveal-distance: 0px;
--ark-reveal-stagger: 0ms;
}
#portfolio_page .ark-reveal {
opacity: 1;
transform: none;
transition: none;
will-change: auto;
}
}
}
/* assets/css/public/structure/feedback/press.css */
/* @layer-wrap:site.effets */
@layer site.effets {
/* Version: 18-10-2026-press */
/*
* Effets d'interaction des cartes et vignettes (clic, survol des médias intégrés), venus de
* design/thumbnails/main.css. Couche « effets » (shared/core/design/stylesheets.php) : après le thème et
* l'apparition au défilement, qu'ils remplacent pendant le clic sans !important.
*/
/* Effets au clic - Mode LISTE (sur .thumbnail) */
.thumbnail:active {
transform: var(--portfolios-thumbnail-click-transform, none);
transition: transform 0.1s ease;
}
/* Effets au clic - Mode TUILES (sur .thumbnail-tile) */
.thumbnail-tile:active {
transform: var(--portfolios-thumbnail-click-transform, none);
transition: transform 0.1s ease;
}
/* Styling for video hover - Zoom disabled as requested */
.thumbnail-tile.video-tile:hover,
.thumbnail-tile.video-tile:focus,
.thumbnail-tile.video-tile:active {
transform: none;
filter: var(--portfolios-thumbnail-hover-filter, brightness(100%));
box-shadow: var(--portfolios-thumbnail-box-shadow, none);
}
.vertical-grid-item:active,
.horizontal-grid-item:active {
transform: var(--portfolios-thumbnail-click-transform, none);
transition: transform 0.1s ease;
}
#goto article a:not(.platform-link):active {
transform: var(--portfolios-thumbnail-click-transform, none);
transition: transform 0.1s ease;
}
.blog-list .thumbnail-tile:active,
.blog-list .thumbnail:active {
transform: var(--portfolios-thumbnail-click-transform, none);
}
.service-item:active,
.faq-item:active,
.profil-button:active,
.agenda-item:active {
transform: var(--portfolios-thumbnail-click-transform, none);
transition: transform 0.1s ease;
}
.square-grid-item:active {
transform: var(--portfolios-thumbnail-click-transform, none);
transition: transform 0.1s ease;
}
.swipebox:active {
transform: var(--portfolios-thumbnail-click-transform, none);
transition: transform 0.1s ease;
}
#gallery a:active,
#production-show-photos-grid a:active {
transform: var(--portfolios-thumbnail-click-transform, none);
transition: transform 0.1s ease;
}
/* Médias intégrés (YouTube, Vimeo, vidéo…) : jamais d'effet survol / focus / clic du personnalisateur,
l'interaction se fait dans le lecteur. Couvre les tuiles qui contiennent un lecteur. */
#portfolio_page :is(.thumbnail, .thumbnail-tile, .vertical-grid-item, .horizontal-grid-item):has(iframe, video, embed, object),
#portfolio_page :is(.thumbnail, .thumbnail-tile, .vertical-grid-item, .horizontal-grid-item):has(iframe, video, embed, object):is(:hover, :focus, :focus-within, :active),
#portfolio_page :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook, .production-video-media),
#portfolio_page :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook, .production-video-media):is(:hover, :focus, :focus-within, :active) {
transform: none;
filter: none;
outline: none;
}
}
/* assets/css/backoffice/structure/feedback/roast.css */
@layer site.socle {
/* Version: 10-07-2026-19-09 */
/* roast.css — toast interne (flash), distinct des notifications applicatives */
.roast {
background: var(--ak-glass-sheen), var(--ak-float-fill);
-webkit-backdrop-filter: var(--ak-glass-blur);
backdrop-filter: var(--ak-glass-blur);
border: var(--ak-border-panel);
position: fixed;
bottom: 35px;
right: 50px;
padding: 15px 15px;
border-radius: var(--radius-lg);
display: none;
z-index: 99;
transform: scale(1.1);
animation: roast-pop-x2 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes roast-pop-x2 {
0% {
opacity: 0;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1.2);
}
}
.roast::after {
content: '';
position: absolute;
bottom: 0;
left: 2px;
height: 5px;
width: 0;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
background-color: var(--arktefakt-color-success, rgb(174, 241, 185));
animation: roast-fill-border 10s linear forwards;
}
.roast.error::after {
background-color: var(--arktefakt-color-danger, rgb(248, 215, 218));
}
@keyframes roast-fill-border {
from { width: 0; }
to { width: 98%; }
}
}
/* assets/css/backoffice/editor/forms/submit.css */
@layer site.socle {
/* Version: 10-07-2026-19-09 */
@keyframes form-submit-spin {
to {
transform: rotate(360deg);
}
}
button.form-submit--pending {
position: relative;
pointer-events: none;
cursor: wait;
opacity: 0.88;
}
button.form-submit--pending::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.5em;
vertical-align: -0.12em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: form-submit-spin 0.65s linear infinite;
}
input.form-submit--pending[type="submit"],
input.form-submit--pending[type="image"] {
pointer-events: none;
cursor: wait;
opacity: 0.88;
padding-left: 2.35em;
background-repeat: no-repeat;
background-position: 0.65em center;
background-size: 1em 1em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23666' stroke-width='3' stroke-dasharray='16 48' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.65s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
}
}
/* assets/css/public/structure/layout/headings.css */
@layer site.reglages {
/* Version: 18-10-2026-casse-titres */
/*
* Titres de gabarit : couleurs / tailles du setup (variables primary / secondary).
* Titres in-body (.content-article) : voir structure/layout/content.css
*/
/* Logo / titre : taille pilotée par --portfolios-logo-title-size (dérivé du curseur setup / customizer) */
#portfolio_page #hub-logo .hub-logo__mark--text {
font-size: var(--portfolios-logo-title-size, 20px);
/* Casse (/theme) : sans réglage, la variable est invalide ⇒ valeur héritée ; les thèmes posent la leur en repli. */
text-transform: var(--portfolios-logo-transform);
line-height: calc(var(--portfolios-logo-title-size, 20px) + 2px);
font-weight: bold;
margin: 0;
padding: 0;
}
/* Titres principaux de contenu (h1) — sélecteurs hors blocs TinyMCE */
#portfolio_page #title-article h1,
#portfolio_page #about-content h1,
#portfolio_page #hero #title-star #title-about h1,
#portfolio_page #title-star #title-about h1,
#portfolio_page main h1.pf-w-content,
#portfolio_page main#about section article h1,
#portfolio_page #quatrecentquatre-elements h1,
#portfolio_page main section#hero > div > h1 {
font-size: var(--portfolios-heading-primary-size);
line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size) + 2px));
font-weight: bold;
color: var(--portfolios-heading-primary-color);
display: block;
padding: 0;
/* Casse (/theme), sinon celle du thème (--pf-title-transform, ex. cinema), sinon héritée. */
text-transform: var(--portfolios-title-transform, var(--pf-title-transform));
}
#portfolio_page #title-article h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #about-content h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #hero #title-star #title-about h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #title-star #title-about h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page main h1.pf-w-content :is(a, span, p, strong, em, b, i, small),
#portfolio_page main#about section article h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #quatrecentquatre-elements h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page main section#hero > div > h1 :is(a, span, p, strong, em, b, i, small) {
color: var(--portfolios-heading-primary-color);
}
/* Bloc « A propos » sur les fiches : nom du portfolio (title_about) — échelle h2 du thème, couleur du texte courant */
#portfolio_page #about-content .about-card-title,
#portfolio_page #blog-about .about-card-title {
font-size: var(--portfolios-heading-secondary-size);
line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size) + 10px));
font-weight: bold;
color: inherit;
margin-top: 0;
}
#portfolio_page #about-content .about-card-title :is(a, span, p, strong, em, b, i, small),
#portfolio_page #blog-about .about-card-title :is(a, span, p, strong, em, b, i, small) {
color: inherit;
}
/*
* Accueil — hero (#title-home) et vedettes (.home-feature-vedette) :
* couleurs définies dans manage (home_custom.color_home_custom, color_feature_element).
* Variables optionnelles posées dans public/pages/home.php ; sinon repli sur le thème.
*/
#portfolio_page #hero #title-home {
--home-hero-title-color: var(--portfolios-heading-primary-color);
--home-hero-subtitle-color: var(--portfolios-heading-secondary-color);
}
#portfolio_page #hero #title-home #home-about h1,
#portfolio_page #hero #title-home #home-present h1 {
font-size: var(--portfolios-heading-primary-size);
line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size) + 2px));
font-weight: bold;
color: var(--home-hero-title-color);
display: block;
padding: 0;
}
#portfolio_page #hero #title-home #home-about h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #hero #title-home #home-present h1 :is(a, span, p, strong, em, b, i, small) {
color: var(--home-hero-title-color);
}
#portfolio_page #hero #title-home #home-about h2,
#portfolio_page #hero #title-home #home-present h2 {
font-size: var(--portfolios-heading-secondary-size);
line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size) + 10px));
font-weight: bold;
color: var(--home-hero-subtitle-color);
}
#portfolio_page #hero #title-home #home-about h2 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #hero #title-home #home-present h2 :is(a, span, p, strong, em, b, i, small) {
color: var(--home-hero-subtitle-color);
}
#portfolio_page section.home-feature-vedette {
--home-feature-title-color: var(--portfolios-heading-primary-color);
--home-feature-subtitle-color: var(--portfolios-heading-secondary-color);
}
#portfolio_page section.home-feature-vedette #feature-about h1,
#portfolio_page section.home-feature-vedette #feature-present h1 {
font-size: var(--portfolios-heading-primary-size);
line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size) + 2px));
font-weight: bold;
color: var(--home-feature-title-color);
display: block;
padding: 0;
}
#portfolio_page section.home-feature-vedette #feature-about h1 :is(a, span, p, strong, em, b, i, small),
#portfolio_page section.home-feature-vedette #feature-present h1 :is(a, span, p, strong, em, b, i, small) {
color: var(--home-feature-title-color);
}
#portfolio_page section.home-feature-vedette #feature-about h2,
#portfolio_page section.home-feature-vedette #feature-present h2 {
font-size: var(--portfolios-heading-secondary-size);
line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size) + 10px));
font-weight: bold;
color: var(--home-feature-subtitle-color);
margin: 0;
}
#portfolio_page section.home-feature-vedette #feature-about h2 :is(a, span, p, strong, em, b, i, small),
#portfolio_page section.home-feature-vedette #feature-present h2 :is(a, span, p, strong, em, b, i, small) {
color: var(--home-feature-subtitle-color);
}
/* Accueil — rythme vertical commun hero + vedettes : marges sous titre / sous-titre uniquement */
#portfolio_page #hero #title-home :is(#home-about, #home-present) h1,
#portfolio_page section.home-feature-vedette :is(#feature-about, #feature-present) h1 {
margin: 0 0 8px;
}
#portfolio_page #hero #title-home :is(#home-about, #home-present) h2,
#portfolio_page section.home-feature-vedette :is(#feature-about, #feature-present) h2 {
margin: 0 0 20px;
}
/* Équipe (/team) — nom membre h1, rôle h2 */
#portfolio_page .member-head h1,
#profil-modal-root .member-head h1 {
font-size: var(--portfolios-heading-primary-size);
line-height: var(--portfolios-heading-primary-line-height, calc(var(--portfolios-heading-primary-size) + 2px));
font-weight: bold;
color: var(--portfolios-heading-primary-color);
margin: 0;
padding: 0;
}
#portfolio_page .member-head h1 :is(a, span, p, strong, em, b, i, small),
#profil-modal-root .member-head h1 :is(a, span, p, strong, em, b, i, small) {
color: var(--portfolios-heading-primary-color);
}
#portfolio_page .member-head h2,
#profil-modal-root .member-head h2 {
font-size: var(--portfolios-heading-secondary-size);
line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size) + 10px));
font-weight: bold;
color: var(--portfolios-heading-secondary-color);
margin: 0;
padding: 0;
}
#portfolio_page .member-head h2 :is(a, span, p, strong, em, b, i, small),
#profil-modal-root .member-head h2 :is(a, span, p, strong, em, b, i, small) {
color: var(--portfolios-heading-secondary-color);
}
/* Sous-titres de hero (ex. « De … », sous-titre album) */
#portfolio_page #hero #title-star #title-about h2,
#portfolio_page #title-star #title-about h2 {
font-size: var(--portfolios-heading-secondary-size);
line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size) + 10px));
font-weight: bold;
color: var(--portfolios-heading-secondary-color);
margin: 0;
}
#portfolio_page #hero #title-star #title-about h2 :is(a, span, p, strong, em, b, i, small),
#portfolio_page #title-star #title-about h2 :is(a, span, p, strong, em, b, i, small) {
color: var(--portfolios-heading-secondary-color);
}
/* Intertitres de mise en page : classes title-align / padding-bottom (accueil, modules, etc.) */
/* :not(#h2_demo) : plus aucun élément ne porte cet id (ancienne démo de l'éditeur) ; gardé car il compte
pour un id dans la spécificité des règles title-align ci-dessous. */
#portfolio_page main h2.subtitle {
font-size: var(--portfolios-heading-secondary-size);
line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size) + 10px));
font-weight: bold;
color: var(--portfolios-heading-secondary-color);
margin-top: 0;
padding: 0;
}
#portfolio_page main h2[class*="title-align-left"]:not(#h2_demo),
#portfolio_page main h2[class*="pf-pb-"][class*="title-align-left"]:not(#h2_demo),
#portfolio_page main h3[class*="title-align-left"],
#portfolio_page main h3[class*="pf-pb-"][class*="title-align-left"] {
text-align: left;
}
#portfolio_page main h2[class*="title-align-center"]:not(#h2_demo),
#portfolio_page main h2[class*="pf-pb-"][class*="title-align-center"]:not(#h2_demo),
#portfolio_page main h3[class*="title-align-center"],
#portfolio_page main h3[class*="pf-pb-"][class*="title-align-center"] {
text-align: center;
}
#portfolio_page main h2[class*="title-align-right"]:not(#h2_demo),
#portfolio_page main h2[class*="pf-pb-"][class*="title-align-right"]:not(#h2_demo),
#portfolio_page main h3[class*="title-align-right"],
#portfolio_page main h3[class*="pf-pb-"][class*="title-align-right"] {
text-align: right;
}
/* Exception : sur ordinateur, le titre de la colonne « Autres articles » d'un article est centré, quel que soit
l'alignement des titres (venu de modules/blog/article.css ; l'emporte ici par la spécificité). */
@media screen and (min-width: 901px) {
#portfolio_page #blog-article #blog-about > article.blog-aside-heading > h2[class*="title-align"] {
text-align: center;
}
}
#portfolio_page main h2.section-title:not(#h2_demo) :is(a, span, p, strong, em, b, i, small),
#portfolio_page main h2.pf-mt-lg :is(a, span, p, strong, em, b, i, small),
#portfolio_page main h3[class*="title-align"] :is(a, span, p, strong, em, b, i, small),
#portfolio_page main h3[class*="pf-pb-"][class*="title-align"] :is(a, span, p, strong, em, b, i, small),
#portfolio_page main section:not(.demo-pair-section) > article > h2 :is(a, span, p, strong, em, b, i, small),
#portfolio_page main h2.subtitle :is(a, span, p, strong, em, b, i, small) {
color: var(--portfolios-heading-secondary-color);
}
/*
* Intertitres de gabarit : la typographie (taille, couleur, graisse, marges)
* est portée par `.section-title`, émise systématiquement par
* portfolios_module_heading_classes() — y compris sous thème personnalisé, où
* `title-align-*` n'est volontairement pas émis. Les classes `title-align-*` ne
* pilotent plus que `text-align` (bloc ci-dessus).
*
* Les six propriétés ci-dessous sont verrouillées en `` : un thème
* personnalisé qui veut ses propres intertitres doit les contester une à une,
* et pas seulement `color` / `font-weight` — voir custom/css/base/section-titles.css.
* Le sélecteur `section > article > h2` attrape aussi les titres écrits à la
* main dans un thème custom : ceux-là passent par `.pfcustom-section-title`.
*/
#portfolio_page main h2.section-title:not(#h2_demo),
#portfolio_page main h2.pf-mt-lg,
#portfolio_page main h3[class*="title-align"],
#portfolio_page main h3[class*="pf-pb-"][class*="title-align"],
#portfolio_page main section:not(.demo-pair-section) > article > h2 {
font-size: var(--portfolios-heading-secondary-size);
line-height: var(--portfolios-heading-secondary-line-height, calc(var(--portfolios-heading-secondary-size) + 10px));
font-weight: bold;
color: var(--portfolios-heading-secondary-color);
margin-top: 0;
padding: 0;
/* Casse des titres (/theme) : comme les h1, sinon celle du thème, sinon héritée. */
text-transform: var(--portfolios-title-transform, var(--pf-title-transform));
}
/* Titres de sections (accueil / modules) : couleur « titres » du setup, pas « sous-titres » */
#portfolio_page main section.section-bg h2.section-title:not(#h2_demo),
#portfolio_page main section.section-content:not(.customizer-demo-section) h2.section-title:not(#h2_demo),
#portfolio_page main section.section-bg h3[class*="title-align"],
#portfolio_page main section.section-content:not(.customizer-demo-section) h3[class*="title-align"] {
color: var(--portfolios-heading-primary-color);
}
#portfolio_page main section.section-bg h2.section-title:not(#h2_demo) :is(a, span, p, strong, em, b, i, small),
#portfolio_page main section.section-content:not(.customizer-demo-section) h2.section-title:not(#h2_demo) :is(a, span, p, strong, em, b, i, small),
#portfolio_page main section.section-bg h3[class*="title-align"] :is(a, span, p, strong, em, b, i, small),
#portfolio_page main section.section-content:not(.customizer-demo-section) h3[class*="title-align"] :is(a, span, p, strong, em, b, i, small) {
color: var(--portfolios-heading-primary-color);
}
#portfolio_page #subtitle-article h2.subtitle,
#portfolio_page #subtitle-article h2.subtitle :is(a, span, p, strong, em, b, i, small) {
color: inherit;
}
}
/* assets/css/public/structure/layout/theme-advanced-colors.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 23-09-2026-20-19 */
/* Version: 12-07-2026 — portée des couleurs avancées (texte courant, icônes UI, bordures inter-sections) */
/* Texte courant : paragraphes et contenu courant dans main */
#portfolio_page main :where(p, li, dd, blockquote, figcaption, td, th) {
color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
}
#portfolio_page #hero #home-about :where(p, li),
#portfolio_page .home-feature-vedette #feature-about :where(p, li) {
color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
}
/* Pied de page : description sous le titre + coordonnées (hors .footer-heading) */
#portfolio_page footer #footer-about :where(p, div, span, li),
#portfolio_page footer .contact-details,
#portfolio_page footer .contact-details :where(span, div) {
color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
}
/* Labels vignettes blog : dérivés du fond, hors override texte courant */
#portfolio_page .article-blog-infos,
#portfolio_page .article-blog-infos :is(p, h4, h5, div, span, time),
#portfolio_page .pf-thumbs--landscape p,
#portfolio_page .pf-thumbs--portrait p,
#portfolio_page .pf-thumbs--square p {
color: var(--portfolios-ui-label-color, var(--portfolios-text-main-color, inherit));
}
/* Séparateurs entre sections, header et footer */
#portfolio_page main > section + section {
border-top: var(--portfolios-section-divider-width, 1px) solid var(--portfolios-section-divider-color, var(--portfolios-ui-border-color, #e0e0e0));
}
/* Header : --pf-header-rule = réglage « Séparation du bas » (design/themes/basic/header-options.css) ;
sinon le filet propre au thème (--pf-theme-header-rule : Brutal, Suisse, Terminal), sinon le séparateur entre sections. */
#portfolio_page #header {
border-bottom: var(--pf-header-rule, var(--pf-theme-header-rule, var(--portfolios-section-divider-width, 1px) solid var(--portfolios-section-divider-color, var(--portfolios-ui-border-color, #e0e0e0))));
}
/* Pied de page : --pf-footer-rule = réglage « Séparation du haut » (design/themes/basic/footer-options.css) ;
sinon le filet propre au thème (--pf-theme-footer-rule : Suisse, Éditorial), sinon le séparateur entre sections. */
#portfolio_page #footer {
border-top: var(--pf-footer-rule, var(--pf-theme-footer-rule, var(--portfolios-section-divider-width, 1px) solid var(--portfolios-section-divider-color, var(--portfolios-ui-border-color, #e0e0e0))));
}
#portfolio_page main > section:first-child {
border-top: none;
}
/* Icônes UI générales (hors réseaux sociaux) */
#portfolio_page #goto .platform-link__open svg {
fill: currentColor;
}
#portfolio_page #about #services .populare .populare-head svg {
fill: var(--portfolios-icon-color, var(--portfolios-theme-fill, #0f0f0f));
}
#portfolio_page #about #services .content svg {
fill: var(--portfolios-icon-color-alt, var(--portfolios-theme-fill-alt, #bdbdbd));
}
#portfolio_page #about #services .populare li {
color: var(--portfolios-body-text-color, var(--portfolios-text-main-color, inherit));
}
}