/* assets/css/public/core/reset.css */ /* @layer-wrap:site.reset */ @layer site.reset { /* Version: 20-09-2026-16-46 */ /* RESET */ @layer general { 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; } } @layer general { p, ul, span, a, h1, h2, h3, h4, h5, h6, article div, form { 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; } * { 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-frame--footer, .production-child-modal), :is(.arktefakt-frame--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 */ .pf-c-page main article { z-index: 2; } :where(.pf-c-hero__media):is(.pf-c-page *) { z-index: 0; } /* Fonds décoratifs (grain, grille) — sous le contenu */ .pf-c-page { isolation: isolate; } .pf-c-page::after { z-index: 0; } .pf-c-page > *:not([data-ark-loader]):not(header):not(footer):not(.pf-c-consent):not(.pf-c-consent-backdrop) { position: relative; z-index: 1; } @layer general { .pf-c-avatar { position: relative; z-index: 10; } [data-pf-ratio="landscape"] a:where(.pf-c-card), [data-pf-ratio="square"] a:where(.pf-c-card), [data-pf-ratio="portrait"] a:where(.pf-c-card) { z-index: 10; } } @layer general { p, ul, span, a, h1, h2, h3, h4, h5, h6, article div, form { z-index: 5; } } /* Header: above content but below overlays */ /* Content / components */ @layer general { .pf-c-prose img { z-index: 1; } .pf-c-prose blockquote::before, .pf-c-prose blockquote::after { z-index: 10; } .pf-c-consent-backdrop { z-index: 170; } } /* Navigation */ /* Loader — sous le header (820) et le footer (800) */ [data-ark-loader] { z-index: 790; } /* Modules */ @layer general { .pf-c-faq { z-index: 5; } } /* Gallery (albums + grille photos fiche production) */ .pf-c-gallery:where([data-pf-page="gallery-album"] *) a:where(.pf-c-gallery__item), .pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)) a { z-index: 10; } .pf-c-gallery:where([data-pf-page="gallery-album"] *) a:where(.pf-c-gallery__item)::after, .pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)) a::after { z-index: 1; } /* Agenda */ @layer general { .pf-c-event .pf-c-event__open { z-index: 9; } } /* Projects */ :where(.pf-c-hero):is(.pf-c-page *) .pf-c-hero__cover--wide { z-index: 10; } /* Members / profile modal */ @layer general { .pf-c-person .pf-c-portrait, .pf-c-profile .pf-c-portrait { z-index: 5; } /* Members / profile modal — au-dessus du hub admin (#visitor_mode : 9500) */ .pf-c-profiles { position: fixed; inset: 0; z-index: 9600; pointer-events: none; } .pf-c-profiles .pf-c-profile-overlay.is-open { pointer-events: auto; } .pf-c-profiles .pf-c-profile.is-open { pointer-events: auto; } .pf-c-profile-overlay { z-index: 1; } .pf-c-profile { z-index: 2; } body.is-modal-open .pf-c-profiles { pointer-events: auto; } /* Services */ .pf-c-services__list .pf-c-services__item { z-index: 5; } } /* Thumbnails / hover stacking */ .pf-c-section--platforms article a:where(.pf-c-platforms__link):hover { z-index: 30; } @layer general { .pf-c-cards__item--list:hover, .pf-c-card--tile:hover, a.pf-c-card--tile:hover, .pf-c-card--portrait:hover, .pf-c-card--landscape:hover, .pf-c-cards--articles .pf-c-card--tile:hover, .pf-c-cards--articles .pf-c-cards__item--list:hover, .pf-c-service:hover, .pf-c-faq__item:hover, .pf-c-person__button:hover, .pf-c-event:hover, .pf-c-card--square:hover, .pf-c-gallery__item:hover { z-index: 30; } } .pf-c-page .pf-c-brand .pf-c-brand__logo { z-index: 60; } /* * Portfolio header — échelle courte : * shell 820 · voile 830 · bar 840 · burger 845 · panel 850 * (détails mobile dans mobile.css) */ .pf-c-page > header:where(.pf-c-header) { z-index: 820; } .pf-c-page header .pf-c-header__bar { z-index: 840; } .pf-c-page header .pf-c-burger { z-index: 845; } .pf-c-page header .pf-c-nav--header { z-index: 850; } .pf-c-page header .pf-c-nav--header .pf-c-nav__content { z-index: 1; } .pf-c-backdrop::before { z-index: 0; } .pf-c-page { z-index: 1; } .pf-c-page .pf-c-nav__submenu::before, .pf-c-page header .pf-c-nav__submenu::before { z-index: -1; } .pf-c-page > footer:where(.pf-c-legal, .pf-c-nav) { position: relative; z-index: 800; } .pf-c-page header:where(.pf-c-header)::before, .pf-c-page footer:where(.pf-c-legal, .pf-c-nav)::before { z-index: 0; } @layer general { .pf-c-consent-backdrop { z-index: 900; } .pf-c-consent { z-index: 901; } } } /* assets/css/public/themes/portfolios-modules.css */ @layer site.socle.general { /* Version: 20-09-2026-16-46 */ :root { /* Couleurs principales */ --pf-color-bg-main: #fafafa; --pf-color-bg-dark: #000000; --pf-color-bg-light: #ffffff; --pf-color-primary: #191919; --pf-color-secondary: #eaeaea; --pf-color-accent: #007bff; --pf-color-border: #dee2e6; --pf-color-border-custom: #cccccc; --pf-heading-primary-color: #191919; --pf-heading-secondary-color: #007bff; --pf-color-one: var(--pf-heading-primary-color); --pf-color-two: var(--pf-heading-secondary-color); /* Radius */ --pf-border-radius-xs: 2px; --pf-border-radius-s: 5px; --pf-border-radius-m: 8px; --pf-border-radius-l: 15px; --pf-border-radius-xl: 50px; --pf-border-radius-full: 50%; /* Ombres */ --pf-box-shadow-s: 0 0 0 0.2rem rgba(0,0,0,0.08); --pf-box-shadow-m: 0px 2px 28px 0px var(--pf-color-border-custom); --pf-box-shadow-alt: 0px 0px 0px 3px var(--pf-color-border-custom); /* Fontes */ --pf-font-size-base: 14px; --pf-heading-primary-size: 21px; --pf-heading-secondary-size: 14px; --pf-font-size-title: var(--pf-heading-primary-size); --pf-font-size-subtitle: var(--pf-heading-secondary-size); --pf-font-size-lg: calc(var(--pf-font-size-base) * 1.5); --pf-font-size-md: calc(var(--pf-font-size-base) * 1.2); --pf-font-size-sm: var(--pf-font-size-meta, calc(var(--pf-font-size-base) * 0.8)); --pf-font-family-base: 'Poppins', Arial, sans-serif; --pf-font-family-serif: 'Spectral', serif; --pf-font-family-accent: 'Abril Fatface', cursive; --pf-font-weight-normal: 400; --pf-font-weight-bold: 700; --pf-line-height-base: var(--pf-text-line-height); --pf-letter-spacing: 0.4px; /* Divers */ /* z-index variables removed for centralization */ --pf-opacity-disabled: 0.4; --pf-gap: 20px; --pf-padding-base: 15px; --pf-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; } /* Arrondis des réglages, portés par les composants (autrefois classes portfolios-*-radius posées dans le HTML : même couche, même spécificité). Arrondi des vignettes : aussi design/thumbnails/grid.css (cartes, galerie). */ :is(.pf-c-hero__cover, .pf-c-service, .pf-c-profile__infos, .pf-c-info__media--inherit-design, .pf-c-biolink-profile__avatar, .pf-c-biolink-content-card, .pf-c-biolink-content-card__media, .pf-c-biolink-preview-card, .pf-c-biolink-preview-card__media, .pf-c-biolink-creation-gallery__item, .customizer-preview-card) { border-radius: var(--pf-thumbnail-radius, 0%); } .pf-c-price__discount { border-radius: var(--pf-button-radius, 0px); } :is(.pf-c-breadcrumb__link, .pf-c-event__date, .pf-c-genai) { border-radius: var(--pf-nav-links-radius, 8px); } :is(.pf-c-timeline__card, .pf-c-quote, .pf-c-event, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-offer, .pf-c-faq__item, .pf-c-article__main, .pf-c-embed, .arktefakt-radius-l, .customizer-showreel-demo, .customizer-feature-preview__present) { border-radius: var(--pf-border-radius-l); } } /* assets/css/public/core/layout/01-base.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 1/6 de core/layout.css : composant « base » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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) ========================================================================== */ @layer general { :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) { @layer general { .pf-desk-hidden { display: none; } } } @media screen and (max-width: 1100px) { @layer general { .pf-mobile-hidden { display: none; } } } } /* assets/css/public/core/layout/02-consent.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 2/6 de core/layout.css : composant « consent » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* ---- Largeurs ---- */ @layer general { .pf-w-narrow, :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs), :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) { width: 100%; margin: 0 auto; } .pf-w-narrow { max-width: var(--layout-width-narrow); } :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) { max-width: var(--layout-width-content); } :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) { max-width: var(--layout-width-wide); } } } /* assets/css/public/core/layout/03-header.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 3/6 de core/layout.css : composant « header » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Sections de l'accueil : conteneur nommé, disponible pour des @container (thèmes custom). Conservé tel quel : il crée aussi un contexte de formatage. */ .pf-c-page [id^="home-section-"] :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) { container-type: inline-size; container-name: portfolio-full; } } /* assets/css/public/core/layout/04-base.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 4/6 de core/layout.css : composant « base » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* ---- Espacement : core/utilities.css (couche « utilitaires ») ---- */ /* ---- Flux ---- */ @layer general { .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) { @layer general { .pf-split--left, .pf-split--right, .pf-split--both { grid-template-columns: 1fr; } } } } /* assets/css/public/core/layout/05-info.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 5/6 de core/layout.css : composant « info » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @layer general { .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. */ :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"])), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-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); } :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"])) { --cols: 1; --cols-lg-auto: 1; } :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])) { --cols: 2; --cols-lg-auto: 2; } :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid) { --cols: 3; --cols-lg-auto: 3; } :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-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; } :is(.pf-cols-lg-3, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *)) { --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; } :is(.pf-cols-md-1, .pf-c-quotes, .pf-c-infos:where(:not([data-pf-cols="4"]))) { --cols-md: 1; } :is(.pf-cols-md-2, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-infos:where([data-pf-cols="4"])) { --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; } :is(.pf-cols-sm-1, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos) { --cols-sm: 1; } :is(.pf-cols-sm-2, .pf-c-footer__pages--grid) { --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; } } /* .pf-c-page : les colonnes l'emportent sur les règles de composant, comme l'ancien grid.css (parité). --_cols = nombre de colonnes du palier actif. */ .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-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) { .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-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) { .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-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) { .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-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))); } } } /* assets/css/public/core/layout/06-consent.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 6/6 de core/layout.css : composant « consent » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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) { .pf-c-page :is(.pf-cols-1, .pf-c-infos:where([data-pf-cols="1"]), :is(.pf-cols-2, .pf-c-quotes, .pf-c-biolink-creations-grid, .pf-c-biolink-creation-blog, .pf-c-infos:where([data-pf-cols="2"])), :is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid), :is(.pf-cols-4, .pf-c-cards--articles:where([data-pf-page-type="home"] *, [data-pf-page="surveys"] *), .pf-c-award-logos, .pf-c-infos:where([data-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, [data-pf-width="content"], .pf-c-consent-prefs, :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *) { --_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). */ @layer general { .pf-pad-sm { padding: var(--layout-space-y-sm) var(--layout-space-x-sm); } :is(.pf-pad-md, .pf-c-consent) { padding: var(--layout-space-y-md) var(--layout-space-x-md); } :is(.pf-pad-lg, .pf-c-section:where([data-pf-page-type="single"] main > :not(.pf-c-hero, .pf-c-section--slide), [data-pf-page="about"] main > :not(.pf-c-hero), [data-pf-page="contact"] main > :not(.pf-c-hero), [data-pf-page="team"] main > :not(.pf-c-hero), [data-pf-page="sitemap"] main > :not(.pf-c-hero), [data-pf-page^="legal-"] main > :not(.pf-c-hero))) { 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); } :is(.pf-pad-x-md, .pf-c-section:where([data-pf-page-type="home"] :is(main, .customizer-features-slot) > :not(.customizer-demo-section)), .pf-c-header, .pf-c-footer, .pf-c-legal) { padding-left: var(--layout-space-x-md); padding-right: var(--layout-space-x-md); } :is(.pf-pad-x-lg, .pf-c-section:where([data-pf-page-type="listing"] main > :not(.pf-c-hero), [data-pf-page="informations"] main > :not(.pf-c-hero), [data-pf-page="surveys"] main > :not(.pf-c-hero), [data-pf-page="memberships"] main > :not(.pf-c-hero), [data-pf-page="agenda"] main > :not(.pf-c-hero), [data-pf-page-type="single"] main > .pf-c-section--slide, [data-pf-page="blog-article"] main)) { padding-left: var(--layout-gutter); padding-right: var(--layout-gutter); } :is(.pf-pad-y-sm, .pf-c-legal) { padding-top: var(--layout-space-y-sm); padding-bottom: var(--layout-space-y-sm); } :is(.pf-pad-y-md, .pf-c-section:where([data-pf-page="discography-album"] main > .pf-c-section--slide), .pf-c-section__notice) { padding-top: var(--layout-space-y-md); padding-bottom: var(--layout-space-y-md); } :is(.pf-pad-y-lg, .pf-c-section:where([data-pf-page-type="listing"] main > :not(.pf-c-hero), [data-pf-page="informations"] main > :not(.pf-c-hero), [data-pf-page="surveys"] main > :not(.pf-c-hero), [data-pf-page="memberships"] main > :not(.pf-c-hero), [data-pf-page="agenda"] main > :not(.pf-c-hero), [data-pf-page="gallery-album"] main > .pf-c-section--slide, [data-pf-page-type="home"] main > [data-pf-order]:not(.pf-c-home-feature))) { 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); } :is(.pf-pt-lg, .pf-c-section:where([data-pf-page="blog-article"] main), .pf-c-hero__body:where([data-pf-page="book"] *), .pf-c-footer) { 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); } :is(.pf-pb-md, .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *), .pf-c-footer) { padding-bottom: var(--layout-space-y-md); } :is(.pf-pb-lg, .pf-c-hero:where(:not([data-pf-page-type="home"] *, [data-pf-page="invitation"] *)), .pf-c-hero__inner:where([data-pf-page="discography-album"] *)) { 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); } :is(.pf-pl-lg, .pf-c-hero:where(:not([data-pf-page-type="home"] *, [data-pf-page="invitation"] *))) { 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); } :is(.pf-pr-lg, .pf-c-hero:where(:not([data-pf-page-type="home"] *, [data-pf-page="invitation"] *))) { padding-right: var(--layout-gutter); } :is(.pf-mt-sm, .pf-c-footer__contact) { margin-top: var(--layout-space-y-sm); } :is(.pf-mt-md, .pf-c-prose:where([data-pf-page="contact"] .pf-c-hero *), .pf-c-btn:where([data-pf-page-type="home"] .pf-c-home-feature__text > *), .pf-c-reading__list, .pf-c-prose__list, .pf-c-prose__note, .pf-c-section__notice) { margin-top: var(--layout-space-y-md); } :is(.pf-mt-lg, .pf-c-btn:where([data-pf-page="project"] .pf-c-hero__text > *)) { margin-top: var(--layout-space-y-lg); } .pf-mt-xl { margin-top: var(--layout-space-y-xl); } :is(.pf-mb-sm, .pf-c-footer__heading) { margin-bottom: var(--layout-space-y-sm); } :is(.pf-mb-md, .pf-c-breadcrumb:where([data-pf-page-type="listing"] *, [data-pf-page-type="secondary"] *), .pf-c-section__title:where(:not([data-pf-page="blog-article"] *, [data-pf-page="contact"] *, [data-pf-page="sitemap"] .pf-c-hero *)), .pf-c-hero__subtitle:where(:not([data-pf-page-type="home"] *, [data-pf-page="discography-album"] *)), .pf-c-hero__title:where([data-pf-page="contact"] *, [data-pf-page="legal-notice"] *, [data-pf-page="legal-privacy"] *, [data-pf-page="legal-statutes"] *, [data-pf-page="legal-rules"] *, [data-pf-page="sitemap"] *), .pf-c-hero__lead:where([data-pf-page-type="home"] *, [data-pf-page="legal-statutes"] *, [data-pf-page="legal-rules"] *), .pf-c-btn:where([data-pf-page-type="home"] .pf-c-hero__text > *), .pf-c-hero__socials, .pf-c-avatar:where([data-pf-page="about"] .pf-c-hero *), .pf-c-home-feature__lead, .pf-c-prose__list--gap, .pf-c-section__notice-text, .pf-c-socials:where(:not(.pf-c-socials--flush)), .pf-c-footer__about, .pf-c-footer__group, .pf-c-consent__text) { margin-bottom: var(--layout-space-y-md); } :is(.pf-mb-lg, .pf-c-breadcrumb:where([data-pf-page="production"] *, [data-pf-page="project"] *, [data-pf-page="discography-album"] *, [data-pf-page="gallery-album"] *), .pf-c-hero__cover--wide) { 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); } :is(.pf-mr-md, .pf-c-btn__icon) { margin-right: var(--layout-space-x-md); } .pf-mr-lg { margin-right: var(--layout-space-x-lg); } } /* Fond des cartes (autrefois classe .bg-color posée par les templates) : couche « utilitaires », passe devant le fond générique des éléments sans !important. */ .pf-c-page :is(.pf-c-timeline__card, .pf-c-quote, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-offer, .pf-c-person__button, .pf-c-faq__item, .pf-c-invitation) { background: var(--pf-theme-bg-main, #272727); } @layer general { .pf-c-profiles :is(.pf-c-timeline__card, .pf-c-quote, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-offer, .pf-c-person__button, .pf-c-faq__item, .pf-c-invitation) { background: var(--pf-theme-bg-main, #272727); } } } /* assets/css/public/design/thumbnails/grid/01-card.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/5 de design/thumbnails/grid.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Version: 18-10-2026-desktop-cols */ /* ========================================================================== Grilles de vignettes d'œuvres (pf-c-cards--works) — 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. ========================================================================== */ .pf-c-page .pf-c-cards--works { --_thumbs: var(--thumbs-xs); margin: 0 auto; display: grid; grid-template-rows: auto; grid-template-columns: repeat(var(--_thumbs), 1fr); gap: var(--layout-gap); } @media screen and (min-width: 530px) { .pf-c-page .pf-c-cards--works { --_thumbs: var(--thumbs-sm); } } @media screen and (min-width: 768px) { .pf-c-page .pf-c-cards--works { --_thumbs: var(--thumbs-md); } } @media screen and (min-width: 1100px) { .pf-c-page .pf-c-cards--works { --_thumbs: var(--thumbs-lg); } } @media screen and (min-width: 1440px) { .pf-c-page .pf-c-cards--works { --_thumbs: var(--thumbs-xl); } } /* Vignette : hauteur portée par le ratio (padding-bottom). */ .pf-c-page .pf-c-cards--works a:where(.pf-c-card) { position: relative; transition: 0.2s linear; height: 0; width: 100%; box-sizing: border-box; } .pf-c-page [data-pf-ratio="landscape"] a:where(.pf-c-card) { padding: 0% 0% 50% 0%; } .pf-c-page [data-pf-ratio="square"] a:where(.pf-c-card) { padding: 0% 0% 100% 0%; } .pf-c-page [data-pf-ratio="portrait"] a:where(.pf-c-card) { padding: 0% 0% 150% 0%; } } /* assets/css/public/design/thumbnails/grid/02-base.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/5 de design/thumbnails/grid.css : composant « base » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @layer general { [data-pf-ratio="landscape"] { --thumbs-xs: 1; --thumbs-sm: 2; --thumbs-md: 2; --thumbs-lg: 3; --thumbs-xl: 3; } [data-pf-ratio="square"] { --thumbs-xs: 1; --thumbs-sm: 2; --thumbs-md: 3; --thumbs-lg: 4; --thumbs-xl: 5; } [data-pf-ratio="portrait"] { --thumbs-xs: 2; --thumbs-sm: 3; --thumbs-md: 3; --thumbs-lg: 3; --thumbs-xl: 4; } } } /* assets/css/public/design/thumbnails/grid/03-page.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 3/5 de design/thumbnails/grid.css : composant « page » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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) { .pf-c-page [id^="home-section-"] [data-pf-ratio="landscape"] > :nth-child(n+3), .pf-c-page [id^="home-section-"] [data-pf-ratio="square"] > :nth-child(n+3), .pf-c-page [id^="home-section-"] [data-pf-ratio="portrait"] > :nth-child(n+5) { display: none; } } @media screen and (min-width: 530px) and (max-width: 767px) { .pf-c-page [id^="home-section-"] [data-pf-ratio="landscape"] > :nth-child(n+5), .pf-c-page [id^="home-section-"] [data-pf-ratio="square"] > :nth-child(n+5), .pf-c-page [id^="home-section-"] [data-pf-ratio="portrait"] > :nth-child(n+7) { display: none; } } @media screen and (min-width: 768px) and (max-width: 1099px) { .pf-c-page [id^="home-section-"] [data-pf-ratio="landscape"] > :nth-child(n+5), .pf-c-page [id^="home-section-"] [data-pf-ratio="square"] > :nth-child(n+7), .pf-c-page [id^="home-section-"] [data-pf-ratio="portrait"] > :nth-child(n+7) { display: none; } } @media screen and (min-width: 1100px) and (max-width: 1439px) { .pf-c-page [id^="home-section-"] [data-pf-ratio="square"] > :nth-child(n+9), .pf-c-page [id^="home-section-"] [data-pf-ratio="portrait"] > :nth-child(n+7) { display: none; } } @media screen and (min-width: 1440px) { .pf-c-page [id^="home-section-"] [data-pf-ratio="portrait"] > :nth-child(n+9) { display: none; } } } /* assets/css/public/design/thumbnails/grid/04-card.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 4/5 de design/thumbnails/grid.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Listes d'articles de l'accueil (pf-cols) : deux rangées également. */ @media screen and (max-width: 650px) { .pf-c-page [id^="home-section-"] .pf-c-cards--articles > :nth-child(n+3) { display: none; } } @media screen and (min-width: 651px) and (max-width: 1100px) { .pf-c-page [id^="home-section-"] .pf-c-cards--articles > :nth-child(n+5) { display: none; } } @media screen and (min-width: 1101px) and (max-width: 1439px) { .pf-c-page [id^="home-section-"] .pf-c-cards--articles > :nth-child(n+7) { display: none; } } /* ---- Contenu des vignettes ---- */ @layer general { .pf-c-card--landscape .pf-c-card__media, .pf-c-card--square .pf-c-card__media, .pf-c-card--portrait .pf-c-card__media { position: absolute; background-size: cover; background-position: center; transition: 0.2s linear; height: 100%; width: 100%; } .pf-c-card--landscape .pf-c-card__caption, .pf-c-card--square .pf-c-card__caption, .pf-c-card--portrait .pf-c-card__caption { 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(--pf-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(--pf-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; } .pf-c-card--landscape h4:where(.pf-c-card__caption-title), .pf-c-card--square h4:where(.pf-c-card__caption-title), .pf-c-card--portrait h4:where(.pf-c-card__caption-title) { margin-bottom: 2px; } } /* « Autres … » en bas des fiches (pf-c-cards--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) { .pf-c-page .pf-c-cards--one-row:is([data-pf-ratio="landscape"], [data-pf-ratio="portrait"]) > :nth-child(n+4), .pf-c-page .pf-c-cards--one-row[data-pf-ratio="square"] > :nth-child(n+5), .pf-c-page .pf-c-cards--one-row[data-pf-ratio="landscape"]:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs, :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *) > :nth-child(n+3), .pf-c-page .pf-c-cards--one-row:is([data-pf-ratio="square"], [data-pf-ratio="portrait"]):is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs, :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *) > :nth-child(n+4) { display: none; } } } /* assets/css/public/design/thumbnails/grid/05-consent.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 5/5 de design/thumbnails/grid.css : composant « consent » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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) { .pf-c-page .pf-c-cards--works:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs, :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *) { --_thumbs: var(--thumbs-md); } } @media screen and (min-width: 1440px) { .pf-c-page .pf-c-cards--one-row[data-pf-ratio="portrait"]:not(:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs), :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *) > :nth-child(4), .pf-c-page .pf-c-cards--one-row[data-pf-ratio="square"]:not(:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs), :is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) *, [data-pf-layout="polaroid"]) > :nth-child(5) { display: revert; } } } /* Arrondi autrefois posé par la classe portfolios-thumbnail-radius (themes/portfolios-modules.css) sur les cartes, la galerie et la couverture de l'article : même couche (socle), même spécificité. (portfolios-border-radius-l reste sur les lecteurs et l'article : son réglage est aussi écrit en couche variables par render_css_vars.php.) */ @layer site.socle { @layer general { .pf-c-card--tile, .pf-c-card--landscape, .pf-c-card--portrait, .pf-c-card--square, .pf-c-gallery__item, .pf-c-article__cover, :where(.pf-c-cards__item--list) > :where(a).pf-c-card, :where(.pf-c-card--video:not(.pf-c-card--tile)) > .pf-c-card__media { border-radius: var(--pf-thumbnail-radius, 0%); } } } /* 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 */ /* BUTTONS — .pf-c-btn / thème : design/themes/basic/buttons.css ; ici uniquement héritage UI type formulaires */ /* Chrome éditeur / intégrations : boutons Arktefakt (.arkt-btn) */ /* Hors chrome hub (éditeur de thème, overlay) : :where garde la spécificité d'origine. */ @layer general { input:not(:where(.arktefakt-frame--footer, .production-child-modal) *), select:not(:where(.arktefakt-frame--footer, .production-child-modal) *), textarea:where(.pf-c-form__control):not(:where(.arktefakt-frame--footer, .production-child-modal) *) { box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 10px; width: 100%; } } @layer general { form .arkt-btn { width: 100%; max-width: 100%; } } @layer general { input[type="submit"]:not(.pf-c-btn):not(.pf-c-btn), .pf-c-nav__content .pf-c-nav__list li .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { filter: brightness(100%); } } @layer general { input[type="submit"]:not(.pf-c-btn):not(.pf-c-btn):hover, .pf-c-nav__content .pf-c-nav__list li:hover .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link):hover, .pf-c-nav__content .pf-c-nav__list li a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link):hover { filter: brightness(110%); } input[type=radio] { margin-bottom: 0px; } input[type="radio"] { width: 15px; height: 15px; } input[type=color] { width: 100%; height: 10vh; } /* 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 */ @layer general { ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.4); border-radius: var(--pf-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:where(:root), body:where([data-pf-page]), * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.4) transparent; } } @media (hover: hover) { @layer general { ::-webkit-scrollbar { background: rgba(255, 255, 255, 0.28); cursor: pointer; } } } } /* assets/css/public/themes/theme-base.css */ @layer site.socle.general { /* Version: 20-09-2026-16-46 */ /* Version: 12-07-2026 — structure thème portfolio (couleurs injectées inline) */ :root { /* Effets de flou (structure) */ --pf-blur-strong-effect: blur(200px); --pf-blur-soft-effect: blur(10px); --pf-blur-none-effect: blur(0px); /* Images — fallbacks ; surchargés par css_vars */ --pf-grain-img: url(../../../assets/media/public/design/background/noise-white.png); --pf-grid-img: url(../../../assets/media/public/design/background/grid-black.png); --pf-img-repeat: repeat; --pf-img-position: center; /* Fallbacks couleur (surchargés par dérivation body_bg_color) */ --pf-text-main-color: #222; --pf-bg-main-color: #fafafa; --pf-bg-contrast-color: #0f0f0f; --pf-bg-contrast-transparence-color: rgba(139, 139, 139, 0.14); --pf-bg-hover-color: #f7f7f7; --pf-bg-alt-color: #e2e2e2; --pf-bg-dark-alt-color: #333; --pf-theme-border-color: rgb(224, 224, 224); --pf-border-strong-color: #bdbdbd; --pf-border-light-color: #e2e2e2; --pf-border-accent-color: #987ed1; --pf-blur-bg-color: #fafafae7; --pf-pattern-bg-color: #eeeeee; --pf-neutral-bg-color: #eeeeee; --pf-theme-bg-main: #fafafa; --pf-theme-bg-contrast: #0f0f0f; --pf-theme-bg-hover: #f7f7f7; --pf-theme-bg-alt: #e2e2e2; --pf-theme-bg-dark-alt: #333; --pf-theme-border: rgb(224, 224, 224); --pf-theme-border-strong: #bdbdbd; --pf-theme-border-light: #e2e2e2; --pf-theme-input-required: rgb(241, 174, 174); --pf-theme-input-valid: rgb(212, 242, 184); --pf-theme-fill: #0f0f0f; --pf-theme-fill-alt: #bdbdbd; --pf-theme-fill-light: #e4e4e4; --pf-theme-text-main: #222; --pf-theme-text-contrast: #000000; --pf-theme-menus-bg: transparent; --pf-theme-menus-bg-hover: #f7f7f7; --pf-theme-menus-text: #222; --pf-theme-mandatory: rgb(192, 113, 113); --pf-full-box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.432); --pf-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. */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) { display: flex; flex-direction: column; gap: var(--layout-space-y-sm, 15px); } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) > *:where(.pf-c-btn, .pf-c-hero__actions, .pf-c-hero__lead, .pf-c-hero__subtitle, .pf-c-hero__title) { 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. */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *) + :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) { 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é : * --pf-c-hero-scrim-color couleur du voile (posée par includes/js.php sur * #hero = couleur de section ; repli : fond du thème) * --pf-c-hero-scrim-strength opacité sous le texte (0..1) * --pf-c-hero-scrim-reach limite droite de la zone pleine * --pf-c-hero-scrim-feather longueur du fondu après cette limite */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *):has(> :where(.pf-c-hero__media):is(.pf-c-page *)) { --pf-c-hero-scrim-strength: 0.92; /* Pochette (≤ 200px) + texte (≤ 40 % de la colonne de 1000px) ≈ bord gauche de la colonne + 660px */ --pf-c-hero-scrim-reach: max(65%, calc(50% + 160px)); --pf-c-hero-scrim-feather: 25%; isolation: isolate; } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *):has(> :where(.pf-c-hero__media):is(.pf-c-page *))::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(--pf-c-hero-scrim-color, transparent), var(--pf-c-hero-scrim-color, transparent)), var(--pf-theme-bg-main, var(--pf-bg-main-color, #fafafa)); -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / var(--pf-c-hero-scrim-strength)) 0, rgb(0 0 0 / var(--pf-c-hero-scrim-strength)) var(--pf-c-hero-scrim-reach), transparent calc(var(--pf-c-hero-scrim-reach) + var(--pf-c-hero-scrim-feather))), linear-gradient(to bottom, transparent 55%, #000 100%); mask-image: linear-gradient(to right, rgb(0 0 0 / var(--pf-c-hero-scrim-strength)) 0, rgb(0 0 0 / var(--pf-c-hero-scrim-strength)) var(--pf-c-hero-scrim-reach), transparent calc(var(--pf-c-hero-scrim-reach) + var(--pf-c-hero-scrim-feather))), linear-gradient(to bottom, transparent 55%, #000 100%); -webkit-mask-composite: source-over; mask-composite: add; } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *):has(> :where(.pf-c-hero__media):is(.pf-c-page *)) > :where([data-pf-page-type="single"] .pf-c-hero__inner):is(.pf-c-page *) { 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. */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *):has(> :where(.pf-c-hero__media):is(.pf-c-page *)):has(.pf-c-hero__cover--wide) { --pf-c-hero-scrim-reach: 100%; } /* Mobile : le texte occupe toute la largeur sous la pochette. */ @media screen and (max-width: 800px) { .pf-c-page :where(.pf-c-hero):is(.pf-c-page *):has(> :where(.pf-c-hero__media):is(.pf-c-page *)) { --pf-c-hero-scrim-reach: 100%; } } } /* assets/css/public/structure/layout/main/01-base.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 1/21 de structure/layout/main.css : composant « base » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Version: 28-09-2026-14-30 */ [data-ark-loader] { background-color: var(--pf-theme-bg-main, var(--pf-bg-main-color, var(--pf-color-bg-main, #fafafa))); } @layer general { html:where(:root) { background-color: var(--pf-theme-bg-main, var(--pf-bg-main-color, var(--pf-color-bg-main, #fafafa))); } body:where([data-pf-page]) { margin: 0 auto; min-height: 100vh; background-color: var(--pf-theme-bg-main, var(--pf-bg-main-color, var(--pf-color-bg-main, #fafafa))); } } } /* assets/css/public/structure/layout/main/02-page.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 2/21 de structure/layout/main.css : composant « page » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page { position: relative; } } /* assets/css/public/structure/layout/main/03-portrait.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 3/21 de structure/layout/main.css : composant « portrait » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @media screen and (max-width: 900px) { @layer general { .pf-c-person .pf-c-portrait { width: 60px; height: 60px; } } } } /* assets/css/public/structure/layout/main/04-main.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 4/21 de structure/layout/main.css : composant « main » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page main:where(.pf-c-main) { border: 0px; } /* Fond : celui de la page article reste (modules/blog/article.css). */ .pf-c-page main:where(.pf-c-main):not(:has(.pf-c-article)) { background-color: initial; } } /* assets/css/public/structure/layout/main/05-hero.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 5/21 de structure/layout/main.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ :where(.pf-c-hero):is(.pf-c-page *) { position: relative; background-size: cover; background-position: center; } :where(.pf-c-hero__media):is(.pf-c-page *) { position: absolute; background-repeat: no-repeat; background-size: cover; background-position: center; top: 0; right: 0; width: 100%; height: 100%; } :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) { display: flex; align-items: flex-start; min-height: 50vh; } :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) { display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; flex: 1; max-width: 40%; margin: 0px; } :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h1:where(.pf-c-hero__title), :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h2:where(.pf-c-hero__subtitle), :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h3:where(.pf-c-author__name, .pf-c-casting-block__title, .pf-c-consent__title, .pf-c-event__title, .pf-c-info__title, .pf-c-offer__title), :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) p:where(.pf-c-hero__lead) { text-align: left; } :where(.pf-c-hero):is(.pf-c-page *).pf-c-hero--plain :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) { min-height: 0; } } /* assets/css/public/structure/layout/main/06-author.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 6/21 de structure/layout/main.css : composant « author » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h3:where(.pf-c-author__name, .pf-c-casting-block__title, .pf-c-consent__title, .pf-c-event__title, .pf-c-info__title, .pf-c-offer__title) { padding: 0px; margin: 0px; } } /* assets/css/public/structure/layout/main/07-hero.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 7/21 de structure/layout/main.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *) { --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; } :where(.pf-c-hero):is(.pf-c-page *) :where(.pf-c-hero__cover--poster):is(.pf-c-page *):hover, :where(.pf-c-hero):is(.pf-c-page *) :where(.pf-c-hero__cover--poster):is(.pf-c-page *):active { transform: none; filter: none; } } /* assets/css/public/structure/layout/main/08-award.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 8/21 de structure/layout/main.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ :where(.pf-c-hero):is(.pf-c-page *) .pf-c-award-logos { margin-top: 20px; } } /* assets/css/public/structure/layout/main/09-hero.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 9/21 de structure/layout/main.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @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). */ :where(.pf-c-hero):is(.pf-c-page *) :where(.pf-c-hero__media):is(.pf-c-page *) { width: 100%; } :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) { padding-top: 50px; } :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) { width: 80%; max-width: 80%; margin-left: 0px; } } } /* assets/css/public/structure/layout/main/10-avatar.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 10/21 de structure/layout/main.css : composant « avatar » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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 */ @layer general { .pf-c-avatar { height: 150px; width: 150px; margin-right: 25px; background-color: var(--pf-content-bg-color, var(--pf-bg-alt-color, transparent)); flex-shrink: 0; box-sizing: border-box; cursor: default; } img.pf-c-avatar { 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é. */ .pf-c-author__link .pf-c-avatar { 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. */ .pf-c-avatar.pf-c-avatar--initials { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; color: var(--pf-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). */ .pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar, .pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar, .pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar { margin-left: 0; margin-right: 0; } .pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar, .pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar, .pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar { margin-left: auto; margin-right: auto; } .pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar, .pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar, .pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *)[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) img.pf-c-avatar { margin-left: auto; margin-right: 0; } @layer general { div.pf-c-avatar { background-size: cover; background-position: center; } } @media screen and (max-width: 700px) { @layer general { .pf-c-avatar { height: 100px; width: 100px; } } } } /* assets/css/public/structure/layout/main/11-link.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 11/21 de structure/layout/main.css : composant « link » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @layer general { .pf-c-link-card { border-bottom: none; background: var(--pf-content-bg-color, var(--pf-bg-alt-color, #e2e2e2)); border-radius: var(--pf-border-radius-m, 8px); box-shadow: var(--pf-box-shadow-s, 0 0 0 0.2rem rgba(0,0,0,0.08)); } .pf-c-link-card .pf-c-link-card__media { width: 100%; height: 45vh; background-size: cover; background-position: center; transition: 0.2s linear; } .pf-c-link-card .pf-c-link-card__media::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; } .pf-c-link-card:hover .pf-c-link-card__media::after { bottom: 0px; opacity: 1; } .pf-c-link-card .pf-c-link-card__body { padding: 15px 25px; } .pf-c-link-card .pf-c-link-card__body p:where(.pf-c-link-card__kicker) { margin-bottom: 0px; } .pf-c-link-card .pf-c-link-card__body h4:where(.pf-c-link-card__title) { margin-top: 0px; } } } /* assets/css/public/structure/layout/main/12-spec.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 12/21 de structure/layout/main.css : composant « spec » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* TECHNIQUE */ .pf-c-section--specs article ul:where(.pf-c-specs__row) { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; } .pf-c-section--specs article ul li:where(.pf-c-specs__dots, .pf-c-specs__label, .pf-c-specs__value) { max-width: 30%; } .pf-c-section--specs article ul li:where(.pf-c-specs__label):first-child { font-weight: bold; text-align: left; } .pf-c-section--specs article ul li:where(.pf-c-specs__value):last-child { text-align: right; } .pf-c-section--specs article ul .pf-c-specs__dots { flex: 1; max-width: none; border-bottom: 2px dotted; margin: 0 10px; height: 0; opacity: 0.4; } } /* assets/css/public/structure/layout/main/13-platform.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 13/21 de structure/layout/main.css : composant « platform » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-section--platforms article a.pf-c-platforms__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; } } /* assets/css/public/structure/layout/main/14-icon.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 14/21 de structure/layout/main.css : composant « icon » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-section--platforms svg:where(.pf-c-icon) { max-height: 35px; max-width: 60px; margin-bottom: 15px; } @media screen and (max-width: 800px) { .pf-c-section--platforms svg:where(.pf-c-icon) { width: 25px; } .pf-c-section--platforms article:where(.pf-c-section__inner) { grid-template-columns: 1fr 1fr 1fr; } } /* AGENDA */ /* Les icônes (lieu, horaires, ouvrir) suivent la couleur du texte. */ .pf-c-page .pf-c-event svg:where(.pf-c-icon) { fill: currentColor; } } /* assets/css/public/structure/layout/main/15-section.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 15/21 de structure/layout/main.css : composant « section » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @media screen and (max-width: 500px) { .pf-c-section--platforms article:where(.pf-c-section__inner) { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 350px) { .pf-c-section--platforms article:where(.pf-c-section__inner) { grid-template-columns: 1fr; } } /* FOOTER */ /* ARTICLES */ .pf-c-page main section:where(.pf-c-section):first-child { border-top: none; } } /* assets/css/public/structure/layout/main/16-prose.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 16/21 de structure/layout/main.css : composant « prose » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* LOADER */ /* FRONTS */ /* Couleur par défaut, éclatée (grammaire, 2026-10-25) : éléments du tronc (porteurs d'une classe), contenu saisi (.pf-c-prose), contenu des icônes ; p / span gardent leur spécificité d'origine (0,1,1). */ .pf-c-page p:where([class], .pf-c-prose *, .pf-c-reading *), .pf-c-page span:where([class], .pf-c-prose *, .pf-c-reading *), .pf-c-page :where([class], .pf-c-altcha *), .pf-c-page :where(.pf-c-prose, .pf-c-reading) *, .pf-c-page :where(svg) *, .pf-c-page svg:where(.pf-c-icon, .pf-c-nav__submenu-svg, .pf-c-reading-tools__icon) { color: var(--pf-theme-bg-contrast); } } /* assets/css/public/structure/layout/main/17-article.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 17/21 de structure/layout/main.css : composant « article » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page main section:where(.pf-c-article__bar, .pf-c-author, .pf-c-error, .pf-c-hero, .pf-c-prose, .pf-c-section):last-child { border-bottom: none; } } /* assets/css/public/structure/layout/main/18-page.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 18/21 de structure/layout/main.css : composant « page » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .youtube, .pf-c-page .vimeo { color: var(--pf-theme-border-light, #bdbdbd); } } /* assets/css/public/structure/layout/main/19-gallery.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 19/21 de structure/layout/main.css : composant « gallery » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* POSTER */ .pf-c-page .pf-c-gallery:where([data-pf-page="gallery-album"] *) a:where(.pf-c-gallery__item), .pf-c-page .pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)) a:where(.pf-c-gallery__item), .pf-c-page .pf-c-link-card .pf-c-link-card__media { transition: all 200ms linear; } } /* assets/css/public/structure/layout/main/20-card.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 20/21 de structure/layout/main.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-card__caption h4:where(.pf-c-card__caption-title), .pf-c-page .pf-c-card__caption h4:where(.pf-c-card__caption-title), .pf-c-page .pf-c-card__caption h4:where(.pf-c-card__caption-title) { color: var(--pf-thumbnail-overlay-title-color, #ffffff); text-shadow: var(--pf-thumbnail-overlay-text-shadow, none); } .pf-c-page .pf-c-card__caption p:where(.pf-c-card__caption-text), .pf-c-page .pf-c-card__caption p:where(.pf-c-card__caption-text), .pf-c-page .pf-c-card__caption p:where(.pf-c-card__caption-text) { color: var(--pf-thumbnail-overlay-description-color, #ffffff); text-shadow: var(--pf-thumbnail-overlay-text-shadow, none); } } /* assets/css/public/structure/layout/main/21-faq.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 21/21 de structure/layout/main.css : composant « faq » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* GALLERY */ /* Visionneuse : modules/photos/swipebox.css et pf-c-viewer (le greffon swipebox n'est plus chargé). */ /* VIDEOS */ /* GO TO — voir structure/layout/theme-advanced-colors.css */ /* SERVICES — voir structure/layout/theme-advanced-colors.css */ /* MEMBERS */ /* FAQ */ .pf-c-page .pf-c-faq button[aria-expanded=true] { border-bottom: 2px solid var(--pf-ui-border-color, var(--pf-theme-border)); } } /* assets/css/public/structure/layout/hero-spacing/01-hero.css */ /* @layer-wrap:site.reglages */ @layer site.reglages { /* Part 1/4 de structure/layout/hero-spacing.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Version: 18-10-2026-hero-spacing */ /* * Espacement autour des titres — fiches œuvres (`[data-pf-page-type="single"]`), pages * principales des catégories (`[data-pf-page-type="listing"]`) et pages secondaires dont * /about (`[data-pf-page-type="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 * (--pf-heading-primary-line-height pour les h1, * --pf-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). */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="single"] *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) { gap: 0; } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="single"] *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) > h1:where(.pf-c-hero__title) { margin-bottom: calc(var(--pf-heading-primary-line-height, 1lh) * 0.5); /* ≈ 12px */ } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="single"] *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) > h1:where(.pf-c-hero__title):has(+ h2) { margin-bottom: calc(var(--pf-heading-primary-line-height, 1lh) * 0.25); /* ≈ 6px */ } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="single"] *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) > h2:where(.pf-c-hero__subtitle) { margin-bottom: calc(var(--pf-heading-secondary-line-height, 1lh) * 0.5); /* 12px */ padding-bottom: 0; } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="single"] *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) > .pf-c-hero__actions { margin-top: var(--layout-space-y-sm); } } /* assets/css/public/structure/layout/hero-spacing/02-prose.css */ /* @layer-wrap:site.reglages */ @layer site.reglages { /* Part 2/4 de structure/layout/hero-spacing.css : composant « prose » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Hero des pages de catégorie et secondaires : titre → texte d'introduction. */ .pf-c-page main section:where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="listing"] *, [data-pf-page-type="secondary"] *) > div > h1 + .pf-c-prose { margin-top: calc(var(--pf-heading-primary-line-height, 1lh) * 0.5); /* ≈ 12px */ } } /* assets/css/public/structure/layout/hero-spacing/03-hero.css */ /* @layer-wrap:site.reglages */ @layer site.reglages { /* Part 3/4 de structure/layout/hero-spacing.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Hero /about : titre + sous-titre (bloc), puis réseaux. */ .pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) :where([data-pf-page="about"] .pf-c-hero__body):is(.pf-c-page *) h1 + h2:where(.pf-c-hero__subtitle) { margin-top: calc(var(--pf-heading-primary-line-height, 1lh) * 0.25); /* ≈ 6px */ margin-bottom: calc(var(--pf-heading-secondary-line-height, 1lh) * 0.5); /* 12px */ } } /* assets/css/public/structure/layout/hero-spacing/04-section.css */ /* @layer-wrap:site.reglages */ @layer site.reglages { /* Part 4/4 de structure/layout/hero-spacing.css : composant « section » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Intertitres de section, y compris « A propos » / « Autres … » (padding-bottom neutralisé). */ .pf-c-page main:has(> :where(.pf-c-hero):is(.pf-c-page *):is([data-pf-page-type="single"] *, [data-pf-page-type="listing"] *, [data-pf-page-type="secondary"] *)) > section h2.pf-c-section__title { margin-bottom: calc(var(--pf-heading-secondary-line-height, 1lh) * 0.5); /* 12px */ padding-bottom: 0; } } /* assets/css/public/structure/layout/section-backgrounds.css */ /* @layer-wrap:site.reglages */ @layer site.reglages { /* Version: 26-10-2026-section-backgrounds */ /* * Fonds alternés des sections (réglages « couleur des sections » : --pf-section-color-odd / --pf-section-color-pair). * Avant le 2026-10-26 ces fonds étaient posés en JavaScript (style="background-color" sur chaque section, includes/js.php) : * ils sont maintenant dans le CSS, donc aussi dans le thème de départ du mode sur mesure. * * Règle (identique à l'ancien script) : on compte les sections d'un même parent, dans l'ordre du document ; la 1re, la 3e… * prennent la couleur « impaire » (--pf-section-color-odd), la 2e, la 4e… la couleur « paire » (--pf-section-color-pair) ; * une section « --alt » prend toujours la couleur impaire. Repli : fonds du thème. Le voile de lisibilité du hero des * fiches (hero-scrim.css) reprend la couleur de sa section. * * Limite connue : un rang CSS ne compte que les frères. L'ancien script comptait toutes les sections visibles du document, * même dans des parents différents ; toutes les pages du tronc posent leurs sections côte à côte. Une section masquée par * display: none (et non par l'attribut hidden) est comptée ici, pas dans l'ancien script. */ .pf-c-page .pf-c-section { --pf-c-section-bg: var(--pf-section-color-odd, var(--pf-theme-bg-main, var(--pf-bg-main-color, #fafafa))); background-color: var(--pf-c-section-bg); } .pf-c-page .pf-c-section:where(:nth-child(even of .pf-c-section:not([hidden]))) { --pf-c-section-bg: var(--pf-section-color-pair, var(--pf-theme-bg-alt, var(--pf-bg-alt-color, #e2e2e2))); } .pf-c-page .pf-c-section.pf-c-section--alt { --pf-c-section-bg: var(--pf-section-color-odd, var(--pf-theme-bg-main, var(--pf-bg-main-color, #fafafa))); } .pf-c-page .pf-c-hero:has(> .pf-c-hero__media) { --pf-c-hero-scrim-color: var(--pf-c-section-bg); } } /* assets/css/public/design/themes/basic/buttons/01-btn.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/2 de design/themes/basic/buttons.css : composant « btn » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Version: 14-10-2026-hover-color */ /* Fusion des styles boutons : structure/button.css + design/themes/basic/buttons.css */ /* Boutons dynamiques du portfolio */ @layer general { .pf-c-btn, .pf-c-btn { /* 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(--pf-button-text-color, #fff)); background-color: var(--pf-button-background-color, #222); background-image: var(--pf-button-gradient, none); border: var(--pf-button-border-width, 0px) var(--pf-button-border-type, solid) var(--pf-button-border-color, #222); border-radius: var(--pf-button-radius, 0px); padding: var(--pf-button-padding-y, 10px) var(--pf-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(--pf-button-box-shadow, none); font-family: var(--pf-button-font-family, inherit); font-size: var(--pf-button-font-size, 1rem); font-weight: var(--pf-button-font-weight, 500); letter-spacing: var(--pf-button-letter-spacing, normal); text-transform: var(--pf-button-text-transform, none); cursor: var(--pf-button-cursor, pointer); opacity: var(--pf-button-opacity, 1); display: inline-block; align-items: center; gap: var(--pf-button-gap, 0.5em); outline: var(--pf-button-outline-width, 0px) var(--pf-button-outline-style, solid) var(--pf-button-outline-color, transparent); filter: brightness(100%); justify-content: center; max-width: var(--pf-button-max-width, max-content); } .pf-c-btn svg:where(.ark-loader-ring, .pf-c-icon, .pf-c-nav__submenu-svg, .pf-c-reading-tools__icon, .pf-c-viewer__icon), .pf-c-btn svg:where(.ark-loader-ring, .pf-c-icon, .pf-c-nav__submenu-svg, .pf-c-reading-tools__icon, .pf-c-viewer__icon) { width: 15px; } .pf-c-btn:hover, .pf-c-btn:hover, .pf-c-btn:focus-visible, .pf-c-btn:focus-visible { --_pf-button-color: var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff)); background: var(--pf-button-hover-background); box-shadow: var(--pf-button-hover-box-shadow, var(--pf-button-box-shadow)); transform: var(--pf-button-hover-transform, none); filter: var(--pf-button-hover-filter, brightness(100%)); } .pf-c-btn:active, .pf-c-btn:active { --_pf-button-color: var(--pf-button-click-text-color, var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff))); background: var(--pf-button-click-background, var(--pf-button-hover-background)); box-shadow: var(--pf-button-click-effect, none); transform: var(--pf-button-click-transform, scale(0.95)); filter: var(--pf-button-hover-filter, brightness(100%)); } .pf-c-btn:disabled, .pf-c-btn:disabled { opacity: var(--pf-button-disabled-opacity, 0.5); cursor: not-allowed; } } /* Effets avancés réutilisables */ /* Accueil (#hero) : le bloc texte peut imposer couleur / fond ; on réapplique le thème bouton. */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) a.pf-c-btn, .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) a.pf-c-btn { background-color: var(--pf-button-background-color, #222); background-image: var(--pf-button-gradient, none); color: var(--pf-button-text-color, #fff); border-color: var(--pf-button-border-color, #222); } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) a.pf-c-btn:hover, .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) a.pf-c-btn:hover { color: var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff)); background: var(--pf-button-hover-background, var(--pf-button-background-color, #333)); } /* Thème des boutons (button_theme : Plein, Contour, Fond au survol, Souligné, Texte seul). Les --pf-button-th-* sont calculées dans la portée des variables (render_css_vars.php) à partir des réglages précis (le thème sur mesure les pose dans tokens/root.css) : on les redistribue ici sur les variables lues par les règles ci-dessus. Seul le fond en image garde un repli, --pf-button-gradient-user du mode commun (aucun cycle possible : copie posée à la racine, render_css_vars.php). */ @layer general { .pf-c-btn, .pf-c-btn { --pf-button-background-color: var(--pf-button-th-bg, #222); --pf-button-gradient: var(--pf-button-th-fill-image, var(--pf-button-gradient-user, none)); --pf-button-text-color: var(--pf-button-th-color, #fff); --pf-button-border-width: var(--pf-button-th-border-width, 0px); --pf-button-border-type: var(--pf-button-th-border-style, solid); --pf-button-padding-x: var(--pf-button-th-padding-x, 24px); --pf-button-hover-background: var(--pf-button-th-hover-bg); --pf-button-hover-text-color: var(--pf-button-th-hover-color); --pf-button-click-background: var(--pf-button-th-click-bg); --pf-button-click-text-color: var(--pf-button-th-click-color); text-decoration-line: var(--pf-button-th-deco, none); text-decoration-thickness: var(--pf-button-th-underline-width, 2px); text-underline-offset: 0.3em; } } } /* assets/css/public/design/themes/basic/buttons/02-nav.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/2 de design/themes/basic/buttons.css : composant « nav » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* --- Lien Contact du header en bouton (réglage « Lien Contact », lot E3) --------------------------------- header.php pose .pf-c-btn 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. */ .pf-c-page .pf-c-header .pf-c-nav--header .pf-c-nav__list a.pf-c-nav__link--contact.pf-c-btn { color: var(--_pf-button-color, var(--pf-button-text-color, #fff)); padding: var(--pf-button-padding-y, 10px) var(--pf-button-padding-x, 24px); border: var(--pf-button-th-border, var(--pf-button-border-width, 0px) var(--pf-button-border-type, solid) var(--pf-button-border-color, #222)); border-radius: var(--pf-button-radius, 0px); background-color: var(--pf-button-background-color, #222); background-image: var(--pf-button-th-image, var(--pf-button-gradient, none)); box-shadow: var(--pf-button-th-shadow, var(--pf-button-box-shadow, none)); font-size: var(--pf-button-font-size, 1rem); font-weight: var(--pf-button-font-weight, 500); text-decoration: none; } .pf-c-page .pf-c-header .pf-c-nav--header .pf-c-nav__list a.pf-c-nav__link--contact.pf-c-btn:is(:hover, :focus-visible) { background-color: var(--pf-button-hover-background, var(--pf-button-background-color, #222)); box-shadow: var(--pf-button-th-shadow, var(--pf-button-hover-box-shadow, var(--pf-button-box-shadow, none))); } .pf-c-page .pf-c-header .pf-c-nav--header .pf-c-nav__list a.pf-c-nav__link--contact.pf-c-btn::after { content: none; } } /* assets/css/public/design/themes/basic/socials/01-social.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/10 de design/themes/basic/socials.css : composant « social » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Version: 12-10-2026-underline-width */ /* SOCIAL-MEDIAS */ @layer general { .pf-c-socials { 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). */ .pf-c-socials li:where(.pf-c-socials__item) { margin: 0; } /* À propos : même logique flex que le footer (footer/main.css + nav-left/center/right) */ [data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-socials { justify-content: flex-start; text-align: left; } [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-socials { justify-content: center; text-align: center; } [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-socials { justify-content: flex-end; text-align: right; } /* Accueil (#title-home, #home-about) : alignement par data-pf-align */ [data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-socials { justify-content: flex-start; text-align: left; } [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-socials { justify-content: center; text-align: center; } [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-socials { justify-content: flex-end; text-align: right; } /* Réseaux du pied de page : alignement, écart et marges dans themes/basic/footer.css (zone). */ .pf-c-socials a:where(.pf-c-socials__link), .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate) { display: flex; flex-direction: column; justify-content: center; align-items: center; transition: 0.2s linear; padding: var(--pf-social-padding, 8px); background-color: var(--pf-social-background-color, var(--pf-theme-bg-main, #272727)); background-image: var(--pf-social-background-gradient, none); border: var(--pf-social-border-width, 0px) var(--pf-social-border-style, solid) var(--pf-social-border-color, var(--pf-theme-bg-alt, #222)); border-radius: var(--pf-social-border-radius, 0px); box-shadow: var(--pf-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; } .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate) { margin: 0; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; } .pf-c-socials svg:where(.pf-c-icon) { width: var(--pf-social-icon-size, 25px); height: var(--pf-social-icon-size, 25px); } /* 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. */ .pf-c-socials--labeled a:where(.pf-c-socials__link), .pf-c-socials--labeled button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate) { flex-direction: row; align-items: center; justify-content: center; gap: 0.5em; padding-inline: var(--pf-social-label-padding-x, 12px); } .pf-c-socials--labeled svg:where(.pf-c-icon) { display: block; flex-shrink: 0; margin: 0; } .pf-c-socials__label { display: block; margin: 0; font-size: var(--pf-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. */ .pf-c-page .pf-c-socials__label, .pf-c-page .pf-c-socials a:hover .pf-c-socials__label, .pf-c-page .pf-c-socials button:hover .pf-c-socials__label { color: var(--pf-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. */ @layer general { .pf-c-socials:not(.pf-c-socials--labeled) .pf-c-socials__label { display: none; } /* Icône générique d'une plateforme sans logo : visible seulement quand le nom est masqué. */ .pf-c-socials__icon { display: contents; } .pf-c-socials--labeled .pf-c-socials__icon { display: none; } /* Plateforme sans logo (nom seul) : même hauteur que les boutons avec icône. */ .pf-c-socials__label:only-child, .pf-c-socials__label:has(+ .pf-c-socials__icon:last-child) { line-height: var(--pf-social-icon-size, 25px); } /* Encre des liens hors .pf-c-page (fenêtre de profil rattachée à body) ; dans la page, l'encre du texte. */ .pf-c-profiles .pf-c-socials :is(a, button) { color: var(--pf-social-icon-color, var(--pf-theme-fill, #0f0f0f)); } } } /* assets/css/public/design/themes/basic/socials/02-icon.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/10 de design/themes/basic/socials.css : composant « icon » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-socials svg:where(.pf-c-icon) { fill: var(--pf-social-icon-color, #0f0f0f); } @layer general { .pf-c-profiles .pf-c-socials svg:where(.pf-c-icon) { fill: var(--pf-social-icon-color, #0f0f0f); } } } /* assets/css/public/design/themes/basic/socials/03-social.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 3/10 de design/themes/basic/socials.css : composant « social » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-socials svg path[stroke-width] { fill: none; stroke: var(--pf-social-icon-color, #0f0f0f); } @layer general { .pf-c-profiles .pf-c-socials svg path[stroke-width] { fill: none; stroke: var(--pf-social-icon-color, #0f0f0f); } } .pf-c-page .pf-c-socials a:where(.pf-c-socials__link):hover, .pf-c-page .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):hover { border-color: var(--pf-social-border-color, var(--pf-theme-bg-alt, #222)); color: var(--pf-social-icon-color, var(--pf-theme-fill, #0f0f0f)); box-shadow: var(--pf-social-box-shadow, none); transform: var(--pf-social-hover-transform, none); filter: var(--pf-social-hover-filter, brightness(100%)); } @layer general { .pf-c-profiles .pf-c-socials a:where(.pf-c-socials__link):hover, .pf-c-profiles .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):hover { border-color: var(--pf-social-border-color, var(--pf-theme-bg-alt, #222)); color: var(--pf-social-icon-color, var(--pf-theme-fill, #0f0f0f)); box-shadow: var(--pf-social-box-shadow, none); transform: var(--pf-social-hover-transform, none); filter: var(--pf-social-hover-filter, brightness(100%)); } } } /* assets/css/public/design/themes/basic/socials/04-icon.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 4/10 de design/themes/basic/socials.css : composant « icon » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-socials a:hover svg:where(.pf-c-icon), .pf-c-page .pf-c-socials button:hover svg:where(.pf-c-icon) { fill: var(--pf-social-icon-color, #0f0f0f); } @layer general { .pf-c-profiles .pf-c-socials a:hover svg:where(.pf-c-icon), .pf-c-profiles .pf-c-socials button:hover svg:where(.pf-c-icon) { fill: var(--pf-social-icon-color, #0f0f0f); } } } /* assets/css/public/design/themes/basic/socials/05-social.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 5/10 de design/themes/basic/socials.css : composant « social » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-socials a:hover svg path[stroke-width], .pf-c-page .pf-c-socials button:hover svg path[stroke-width] { fill: none; stroke: var(--pf-social-icon-color, #0f0f0f); } @layer general { .pf-c-profiles .pf-c-socials a:hover svg path[stroke-width], .pf-c-profiles .pf-c-socials button:hover svg path[stroke-width] { fill: none; stroke: var(--pf-social-icon-color, #0f0f0f); } } .pf-c-page .pf-c-socials a:where(.pf-c-socials__link):active, .pf-c-page .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):active { transform: var(--pf-social-click-transform, none); filter: var(--pf-social-hover-filter, brightness(100%)); } @layer general { .pf-c-profiles .pf-c-socials a:where(.pf-c-socials__link):active, .pf-c-profiles .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):active { transform: var(--pf-social-click-transform, none); filter: var(--pf-social-hover-filter, brightness(100%)); } } /* #hero (accueil, à propos, fiches…) : aligner sur le même rendu que #footer-social */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-socials { margin-top: 1.25rem; flex-wrap: wrap; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) .pf-c-socials, .pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__text):is(.pf-c-page *) .pf-c-socials { align-self: stretch; } } /* assets/css/public/design/themes/basic/socials/06-viewer.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 6/10 de design/themes/basic/socials.css : composant « viewer » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-socials button:where(.pf-c-viewer__next, .pf-c-viewer__prev):disabled { opacity: 0.5; cursor: not-allowed; } @layer general { .pf-c-profiles .pf-c-socials button:where(.pf-c-viewer__next, .pf-c-viewer__prev):disabled { opacity: 0.5; cursor: not-allowed; } } } /* assets/css/public/design/themes/basic/socials/07-icon.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 7/10 de design/themes/basic/socials.css : composant « icon » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-socials svg:where(.pf-c-icon) { fill: var(--pf-social-icon-color, #0f0f0f); } } /* assets/css/public/design/themes/basic/socials/08-social.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 8/10 de design/themes/basic/socials.css : composant « social » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-socials svg path[stroke-width] { fill: none; stroke: var(--pf-social-icon-color, #0f0f0f); } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-socials a:where(.pf-c-socials__link):hover, .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):hover { border-color: var(--pf-social-border-color, var(--pf-theme-bg-alt, #222)); color: var(--pf-social-icon-color, var(--pf-theme-fill, #0f0f0f)); box-shadow: var(--pf-social-box-shadow, none); transform: var(--pf-social-hover-transform, none); filter: var(--pf-social-hover-filter, brightness(100%)); } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-socials a:where(.pf-c-socials__link):active, .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):active { transform: var(--pf-social-click-transform, none); filter: var(--pf-social-hover-filter, brightness(100%)); } } /* assets/css/public/design/themes/basic/socials/09-icon.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 9/10 de design/themes/basic/socials.css : composant « icon » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-socials a:hover svg:where(.pf-c-icon), .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-socials button:hover svg:where(.pf-c-icon) { fill: var(--pf-social-icon-color, #0f0f0f); } } /* assets/css/public/design/themes/basic/socials/10-social.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 10/10 de design/themes/basic/socials.css : composant « social » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-socials a:hover svg path[stroke-width], .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) .pf-c-socials button:hover svg path[stroke-width] { fill: none; stroke: var(--pf-social-icon-color, #0f0f0f); } /* Team modal (.profil-infos) : même rendu que footer / vedettes */ @layer general { .pf-c-profiles .pf-c-profile__infos .pf-c-socials, .pf-c-profile .pf-c-profile__infos .pf-c-socials { margin-top: 1.25rem; flex-wrap: wrap; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; justify-content: center; gap: 10px; } .pf-c-profiles .pf-c-profile__infos .pf-c-socials li:where(.pf-c-socials__item), .pf-c-profile .pf-c-profile__infos .pf-c-socials li:where(.pf-c-socials__item) { margin: 0; } .pf-c-profiles .pf-c-profile__infos .pf-c-socials svg:where(.pf-c-icon), .pf-c-profile .pf-c-profile__infos .pf-c-socials svg:where(.pf-c-icon) { fill: var(--pf-social-icon-color, #0f0f0f); } .pf-c-profiles .pf-c-profile__infos .pf-c-socials svg path[stroke-width], .pf-c-profile .pf-c-profile__infos .pf-c-socials svg path[stroke-width] { fill: none; stroke: var(--pf-social-icon-color, #0f0f0f); } .pf-c-profiles .pf-c-profile__infos .pf-c-socials a:where(.pf-c-socials__link):hover, .pf-c-profiles .pf-c-profile__infos .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):hover, .pf-c-profile .pf-c-profile__infos .pf-c-socials a:where(.pf-c-socials__link):hover, .pf-c-profile .pf-c-profile__infos .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):hover { border-color: var(--pf-social-border-color, var(--pf-theme-bg-alt, #222)); color: var(--pf-social-icon-color, var(--pf-theme-fill, #0f0f0f)); box-shadow: var(--pf-social-box-shadow, none); transform: var(--pf-social-hover-transform, none); filter: var(--pf-social-hover-filter, brightness(100%)); } .pf-c-profiles .pf-c-profile__infos .pf-c-socials a:where(.pf-c-socials__link):active, .pf-c-profiles .pf-c-profile__infos .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):active, .pf-c-profile .pf-c-profile__infos .pf-c-socials a:where(.pf-c-socials__link):active, .pf-c-profile .pf-c-profile__infos .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):active { transform: var(--pf-social-click-transform, none); filter: var(--pf-social-hover-filter, brightness(100%)); } .pf-c-profiles .pf-c-profile__infos .pf-c-socials a:hover svg:where(.pf-c-icon), .pf-c-profiles .pf-c-profile__infos .pf-c-socials button:hover svg:where(.pf-c-icon), .pf-c-profile .pf-c-profile__infos .pf-c-socials a:hover svg:where(.pf-c-icon), .pf-c-profile .pf-c-profile__infos .pf-c-socials button:hover svg:where(.pf-c-icon) { fill: var(--pf-social-icon-color, #0f0f0f); } .pf-c-profiles .pf-c-profile__infos .pf-c-socials a:hover svg path[stroke-width], .pf-c-profiles .pf-c-profile__infos .pf-c-socials button:hover svg path[stroke-width], .pf-c-profile .pf-c-profile__infos .pf-c-socials a:hover svg path[stroke-width], .pf-c-profile .pf-c-profile__infos .pf-c-socials button:hover svg path[stroke-width] { fill: none; stroke: var(--pf-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 --pf-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. */ .pf-c-socials a:where(.pf-c-socials__link), .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate) { --pf-social-background-color: var(--pf-social-th-bg, var(--pf-theme-bg-main, #272727)); --pf-social-background-gradient: var(--pf-social-th-fill-image, none); --pf-social-icon-color: var(--pf-social-th-color, var(--pf-theme-fill, #0f0f0f)); --pf-social-border-width: var(--pf-social-th-border-width, 0px); --pf-social-border-style: var(--pf-social-th-border-style, solid); text-decoration-line: var(--pf-social-th-deco, none); text-decoration-thickness: var(--pf-social-th-underline-width, 2px); text-underline-offset: 0.3em; } /* Souligné / Texte seul : pas de marge latérale (le nom affiché garde la sienne). */ .pf-c-socials:not(.pf-c-socials--labeled) a:where(.pf-c-socials__link), .pf-c-socials:not(.pf-c-socials--labeled) button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate) { padding-inline: var(--pf-social-th-padding-x, var(--pf-social-padding, 8px)); } .pf-c-socials a:where(.pf-c-socials__link):hover, .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):hover, .pf-c-socials a:where(.pf-c-socials__link):focus-visible, .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):focus-visible { --pf-social-background-color: var(--pf-social-th-hover-bg, var(--pf-theme-bg-main, #272727)); --pf-social-background-gradient: none; --pf-social-icon-color: var(--pf-social-th-hover-color, var(--pf-theme-fill, #0f0f0f)); } .pf-c-socials a:where(.pf-c-socials__link):active, .pf-c-socials button:where(.pf-c-btn, .pf-c-consent__accept, .pf-c-consent__refuse, .pf-c-header__toggle, .pf-c-profile__close, .pf-c-reading-tools__btn, .pf-c-services__option, .pf-c-share__action, .pf-c-survey, .pf-c-survey-modal__count-btn, .pf-c-viewer__close, .pf-c-viewer__next, .pf-c-viewer__prev, .pf-c-viewer__rotate):active { --pf-social-background-color: var(--pf-social-th-click-bg, var(--pf-theme-bg-main, #272727)); --pf-social-icon-color: var(--pf-social-th-click-color, var(--pf-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. */ .pf-c-page :is(.pf-c-header, .pf-c-footer, .pf-c-legal) { --pf-align-justify: flex-start; --pf-align-text: left; } .pf-c-page :is(.pf-c-header, .pf-c-footer, .pf-c-legal)[data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) { --pf-align-justify: center; --pf-align-text: center; } .pf-c-page :is(.pf-c-header, .pf-c-footer, .pf-c-legal)[data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) { --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 */ .pf-c-page header:where(.pf-c-header), .pf-c-page .pf-c-header { /* Menu mobile : tailles et respiration (mobile.css ≤1100px) */ --pf-hamburger-icon-size: 2.125rem; --pf-hamburger-min-touch: 3.25rem; --pf-hamburger-touch-padding: 0.4rem; --pf-header-wrapper-gap: 0.75rem; /* Espacement entre liens (desktop / mobile / sous-menus) */ --pf-header-nav-gap-x: 1.25rem; --pf-header-nav-gap-y: 0.4rem; --pf-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). */ .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu { position: relative; display: flex; flex-direction: column; align-items: flex-start; } .pf-c-page .pf-c-nav--header .pf-c-nav__link.pf-c-nav__link--has-submenu { 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; } .pf-c-page .pf-c-nav--header .pf-c-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(--pf-font-size-base) * 0.85); pointer-events: none; transition: color var(--pf-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), opacity var(--pf-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)); } .pf-c-page .pf-c-nav--header .pf-c-nav__submenu-icon { color: inherit; } .pf-c-page .pf-c-nav--header .pf-c-nav__submenu-toggle .pf-c-nav__submenu-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .pf-c-page .pf-c-nav--header .pf-c-nav__submenu-toggle .pf-c-nav__submenu-icon svg:where(.pf-c-nav__submenu-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 */ .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu.is-open .pf-c-nav__submenu-toggle .pf-c-nav__submenu-icon svg:where(.pf-c-nav__submenu-svg) { transform: rotate(180deg); } .pf-c-page .pf-c-brand { display: flex; align-items: center; min-height: var(--pf-hamburger-min-touch, 3.25rem); } .pf-c-page .pf-c-brand > a:where(.pf-c-brand__link) { display: flex; align-items: center; gap: inherit; } .pf-c-page .pf-c-brand .pf-c-brand__logo { display: flex; align-items: center; justify-content: center; transition: 0.2s linear; } .pf-c-page .pf-c-brand .pf-c-brand__logo:hover { opacity: 0.5; } .pf-c-page .pf-c-brand .pf-c-brand__logo .pf-c-brand__title, .pf-c-page .pf-c-brand .pf-c-brand__title { color: var(--pf-nav-text-color); transition: color var(--pf-nav-links-transition); } /* Largeur pilotée par --pf-logo-width (setup / customizer) */ .pf-c-page .pf-c-brand .pf-c-brand__logo img:where(.pf-c-brand__img) { width: var(--pf-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) */ .pf-c-page .pf-c-brand:has(.pf-c-brand__logo:not([hidden])) .pf-c-brand__title { display: none; }} /* Sous-menus : fermés par défaut (mobile = ouverture au clic / .submenu-open) */ .pf-c-page .pf-c-nav__item--has-submenu .pf-c-nav__submenu { 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; } .pf-c-page .pf-c-nav__item--has-submenu.is-open > .pf-c-nav__submenu { 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
  • . */ .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { position: fixed; left: 0; right: 0; top: calc(var(--header-height, 70px) - var(--pf-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(--pf-nav-font-size, 1rem); padding-top: var(--pf-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) */ .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu .pf-c-nav__submenu-content { width: 100%; box-sizing: border-box; padding-inline: 1.25em; } .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { display: flex; padding: 1.25em 0; max-width: var(--layout-width-wide); width: 100%; margin-inline: auto; box-sizing: border-box; } .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu:hover > .pf-c-nav__submenu, .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu:focus-within > .pf-c-nav__submenu, .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu.is-intent > .pf-c-nav__submenu { opacity: 1; visibility: visible; max-height: 500px; overflow: visible; pointer-events: auto; } /* Bandeau invisible au-dessus du sous-menu (au-delà du padding-top) */ .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu:hover > .pf-c-nav__submenu::before, .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu:focus-within > .pf-c-nav__submenu::before, .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu.is-intent > .pf-c-nav__submenu::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) { .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu { display: inline-flex; flex-direction: column; align-items: stretch; } .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu:hover .pf-c-nav__submenu-toggle .pf-c-nav__submenu-icon svg:where(.pf-c-nav__submenu-svg), .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu:focus-within .pf-c-nav__submenu-toggle .pf-c-nav__submenu-icon svg:where(.pf-c-nav__submenu-svg), .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu.is-intent .pf-c-nav__submenu-toggle .pf-c-nav__submenu-icon svg:where(.pf-c-nav__submenu-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 + --pf-c-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). */ .pf-c-page header[data-pf-header="line"] ~ main:where(.pf-c-main):not(:has(> :where(.pf-c-hero):is(.pf-c-page *))){ margin-top: var(--header-height, 70px); } .pf-c-page header[data-pf-header="line"] ~ main:where(.pf-c-main):has(> :where(.pf-c-hero):is(.pf-c-page *)){ margin-top: 0; } .pf-c-page header[data-pf-header="line"] ~ main > :where(.pf-c-hero):is(.pf-c-page *):not([data-pf-hero-image="behind"]){ --pf-hero-offset: var(--header-height, 70px); } .pf-c-page header[data-pf-header="line"] ~ main > :where(.pf-c-hero):is(.pf-c-page *)[data-pf-hero-image="behind"] :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *){ --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 { .pf-c-page header:where(.pf-c-header), .pf-c-page .pf-c-header { padding-top: var(--pf-header-pad-outer, var(--pf-header-padding-y)); padding-bottom: var(--pf-header-pad-outer, var(--pf-header-padding-y)); } /* « Espacement vertical » de l'en-tête sur mobile (sinon celui de l'ordinateur). */ @media (max-width: 1100px) { .pf-c-page header:where(.pf-c-header), .pf-c-page .pf-c-header { padding-top: var(--pf-header-pad-outer, var(--pf-header-padding-y-mobile, var(--pf-header-padding-y))); padding-bottom: var(--pf-header-pad-outer, var(--pf-header-padding-y-mobile, var(--pf-header-padding-y))); }} .pf-c-page .pf-c-nav--header li:not(.pf-c-nav__item--has-submenu) .pf-c-nav__submenu-toggle { display: none; } .pf-c-page .pf-c-nav__item--has-submenu.is-open > .pf-c-nav__submenu { display: block; } @media (min-width: 1101px) { .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { display: none; }} @media (min-width: 1101px) { .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu:hover > .pf-c-nav__submenu, .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu:focus-within > .pf-c-nav__submenu, .pf-c-page .pf-c-nav--header .pf-c-nav__item--has-submenu.is-intent > .pf-c-nav__submenu { display: block; }} .pf-c-page header[data-pf-header="line"] ~ main:where(.pf-c-main):has(> :where(.pf-c-hero):is(.pf-c-page *)){ padding-top: 0; } .pf-c-page header[data-pf-header="line"] ~ main > :where(.pf-c-hero):is(.pf-c-page *):not([data-pf-hero-image="behind"]){ padding-top: calc(var(--header-height, 70px) + var(--pf-c-hero-padding-block, 45px)); } .pf-c-page header[data-pf-header="line"] ~ main > :where(.pf-c-hero):is(.pf-c-page *)[data-pf-hero-image="behind"] :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *){ padding-top: calc(var(--header-height, 70px) + var(--pf-c-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 */ .pf-c-page header:where(.pf-c-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) */ .pf-c-page header[data-pf-header="line"] { display: block; } .pf-c-page header[data-pf-header="line"] .pf-c-header__inner { display: flex; align-items: center; } .pf-c-page header .pf-c-header__bar { display: flex; align-items: center; flex-shrink: 0; min-width: 0; transition: 0.2s linear; } @media (min-width: 1101px) { .pf-c-page header[data-pf-header="line"] .pf-c-header__bar { width: auto; max-width: none; margin: 0; } .pf-c-page header[data-pf-header="line"][data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-header__inner { justify-content: flex-start; } .pf-c-page header[data-pf-header="line"][data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-header__inner { justify-content: center; } .pf-c-page header[data-pf-header="line"][data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-header__inner { justify-content: space-between; } .pf-c-page header:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)) .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { justify-content: var(--pf-align-justify); } .pf-c-page header:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list { justify-content: var(--pf-align-justify); } } .pf-c-page header .pf-c-header__bar { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.5s linear; } @media (min-width: 1101px) { /* Écart entre le logo et le menu : réglage « Espace entre le logo et le menu » (header-options.css). */ .pf-c-page header[data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-nav--header.pf-c-nav, .pf-c-page header[data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-nav--header.pf-c-nav { flex: 1 1 0; min-width: 0; max-width: 100%; } .pf-c-page header[data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-nav--header.pf-c-nav { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 12rem); } .pf-c-page header .pf-c-nav--header.pf-c-nav { overflow: visible; } .pf-c-page header .pf-c-nav--header .pf-c-nav__content { min-width: 0; width: 100%; } .pf-c-page header .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--pf-header-nav-gap-y, 0.4rem) var(--pf-header-nav-gap-x, 1.25rem); padding: 4px 0 2px; overflow: visible; } .pf-c-page header .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > li:where(.pf-c-nav__item) { margin: 0; } .pf-c-page header .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list li a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { 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). */ } @layer general { .pf-c-burger { 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 { .pf-c-page header:where(.pf-c-header) { position: fixed; } @media (min-width: 1101px) { .pf-c-page header .pf-c-nav--header { padding-left: var(--pf-header-logo-gap, 15px); } } @media (min-width: 1101px) { .pf-c-page header .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list li a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { 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) { .pf-c-page header:where(.pf-c-header), .pf-c-page .pf-c-header { --pf-mobile-header-gutter: 20px; --pf-mobile-nav-icon-inset: calc( (var(--pf-hamburger-min-touch, 3.25rem) - var(--pf-hamburger-icon-size, 2.125rem)) / 2 ); } @layer general { html:where(:root), body:where([data-pf-page]) { max-width: 100%; overscroll-behavior-x: none; }} .pf-c-backdrop, .pf-c-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). */ .pf-c-page header:where(.pf-c-header), .pf-c-page .pf-c-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) */ } .pf-c-page header .pf-c-header__inner, .pf-c-page header .pf-c-header__inner:is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) { 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 */ .pf-c-page header .pf-c-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(--pf-header-wrapper-gap, 0.75rem); padding: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .pf-c-page header[data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-brand, .pf-c-page header[data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-brand { margin-inline-end: auto; min-width: 0; } /* Logo : largeur réglée pour le mobile (sinon celle de l'ordinateur), plafonnée à la largeur utile mobile */ .pf-c-page .pf-c-brand .pf-c-brand__logo img:where(.pf-c-brand__img) { width: min(var(--pf-logo-width-mobile, var(--pf-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). */ @layer general { html.is-nav-open, body.is-nav-open { overscroll-behavior: none; max-width: 100%; touch-action: pan-y; } body.is-nav-open:not(.customizer-page) { position: fixed; inset-inline: 0; width: 100%; max-width: 100%; }} .pf-c-page header[data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal):where([data-pf-nav-menu]) .pf-c-burger, .pf-c-page header[data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal):where([data-pf-nav-menu]) .pf-c-burger { margin-inline-start: auto; } .pf-c-page header[data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal):where([data-pf-nav-menu]) .pf-c-header__bar { justify-content: center; } .pf-c-page header[data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal):where([data-pf-nav-menu]) .pf-c-burger { 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; } .pf-c-page header[data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal):where([data-pf-nav-menu]) .pf-c-burger:active { transform: translateY(-50%) scale(0.96); } .pf-c-page header[data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal):where([data-pf-nav-menu]) .pf-c-burger:hover:not([aria-expanded="true"]) .pf-c-burger__box { transform: scale(1.05); } .pf-c-page header[data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal):where([data-pf-nav-menu]) .pf-c-burger[aria-expanded="true"] .pf-c-burger__box { transform: none; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex-shrink: 0; min-width: var(--pf-hamburger-min-touch, 3.25rem); min-height: var(--pf-hamburger-min-touch, 3.25rem); margin: 0; padding: var(--pf-hamburger-touch-padding, 0.4rem); border: none; background: transparent; cursor: pointer; color: var(--pf-nav-text-color, currentColor); position: relative; z-index: 845; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, transform 0.2s ease; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger:focus-visible { outline: 2px solid var(--pf-nav-text-color, currentColor); outline-offset: 3px; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger:active { transform: scale(0.96); } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger .pf-c-burger__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); } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger:hover:not([aria-expanded="true"]) .pf-c-burger__box { transform: scale(1.05); } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger[aria-expanded="true"] .pf-c-burger__box { transform: none; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger .hamburger__svg { display: block; width: var(--pf-hamburger-icon-size, 2.125rem); height: auto; aspect-ratio: 1; flex-shrink: 0; overflow: visible; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger .hamburger__state { transition: opacity 0.22s ease, visibility 0.22s ease; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger .hamburger__state--close { opacity: 0; visibility: hidden; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger .hamburger__state--menu { opacity: 1; visibility: visible; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger[aria-expanded="true"] .hamburger__state--menu { opacity: 0; visibility: hidden; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger[aria-expanded="true"] .hamburger__state--close { opacity: 1; visibility: visible; } /* * Voile décoratif uniquement — ne capture pas les clics. * Fermeture du menu = croix (hamburger) uniquement. */ .pf-c-page header.is-nav-open:where([data-pf-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(--pf-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) */ .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header, .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header { 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; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header::before, .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header::before { content: none; display: none; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header.is-open, .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header.is-open { 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(--pf-nav-bg-blur, blur(6px)); backdrop-filter: var(--pf-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; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header.is-open::before, .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header.is-open::before { content: ""; display: block; position: absolute; inset: 0; z-index: 0; background-color: var(--pf-nav-bg-color, rgba(255, 255, 255, 0.15)); pointer-events: none; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-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(--pf-mobile-header-gutter, 20px); } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header.is-open .pf-c-nav__content a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { pointer-events: auto; position: relative; z-index: 2; } .pf-c-page header[data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal):where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content { padding-inline-end: calc( var(--pf-mobile-header-gutter, 20px) + var(--pf-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). */ .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content > * { position: relative; z-index: 1; max-width: 100%; box-sizing: border-box; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pf-header-nav-gap-mobile, 0.35rem); width: 100%; max-width: 100%; margin: 0; padding: 0; list-style: none; box-sizing: border-box; } .pf-c-page header:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)):where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list { align-items: var(--pf-align-justify); text-align: var(--pf-align-text); } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > li:where(.pf-c-nav__item, .pf-c-nav__submenu-item) { width: 100%; max-width: 100%; margin: 0; display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; } .pf-c-page header:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)):where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > li:where(.pf-c-nav__item, .pf-c-nav__submenu-item) { align-items: var(--pf-align-justify); } /* * .nav__item-main regroupe [libellé][chevron] — alignement via le
  • . */ .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > .pf-c-nav__item--has-submenu { flex-direction: column; align-items: flex-start; } .pf-c-page header:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)):where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > .pf-c-nav__item--has-submenu { align-items: var(--pf-align-justify); } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > li > a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link), .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header a.pf-c-nav__link--has-submenu { display: inline-flex; align-items: center; line-height: var(--pf-nav-line-height); min-height: max(2.75rem, var(--pf-nav-line-height)); max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; word-break: break-word; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header a.pf-c-nav__link--has-submenu { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 0.35em; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu-toggle, .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu-toggle .pf-c-nav__submenu-icon { color: inherit; font-size: calc(var(--pf-font-size-base) * 0.85); } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-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; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu-toggle .pf-c-nav__submenu-icon { font-size: var(--pf-font-size-base); line-height: 0; } /* Fond plein : chevron = même couleur initiale que le texte du lien */ .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { width: 100%; } /* Sous-menu : même alignement horizontal que la liste */ .pf-c-page header:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)):where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu .pf-c-nav__submenu-content, .pf-c-page header:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)):where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { align-items: var(--pf-align-justify); text-align: var(--pf-align-text); } /* Sous-menus accordéon */ .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__submenu { display: none; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__item--has-submenu .pf-c-nav__submenu { display: none; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu { margin-top: 0.25rem; width: 100%; max-width: 100%; box-sizing: border-box; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu .pf-c-nav__submenu-content, .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list), .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu ul:is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) { align-items: inherit; gap: var(--pf-header-nav-gap-mobile, 0.35rem); box-sizing: border-box; } .pf-c-page header:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)):where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { align-items: var(--pf-align-justify); text-align: var(--pf-align-text); } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu ul li:where(.pf-c-nav__submenu-item) { display: flex; flex-direction: column; margin: 0; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .pf-c-page header:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)):where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu ul li:where(.pf-c-nav__submenu-item) { align-items: var(--pf-align-justify); text-align: var(--pf-align-text); } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__submenu .pf-c-nav__submenu-content { padding-inline: 0; width: 100%; max-width: 100%; box-sizing: border-box; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu .pf-c-nav__submenu-list li a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { 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; } .pf-c-page header:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)):where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu ul li a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { justify-content: var(--pf-align-justify); text-align: var(--pf-align-text); } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__item--has-submenu.is-open { padding-bottom: 0.35rem; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header[data-pf-link-shape="underline"] .pf-c-nav__list > .pf-c-nav__item > a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link)::after { inset-inline: 0; } .pf-c-page header:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)):where([data-pf-nav-menu]) .pf-c-nav--header[data-pf-link-shape="underline"] .pf-c-nav__list a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link)::after, .pf-c-page header:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)):where([data-pf-nav-menu]) .pf-c-nav--header[data-pf-link-shape="underline"] .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link)::after { transform-origin: var(--pf-align-text) center; } @media (prefers-reduced-motion: reduce) { .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content { transition-duration: 0.01ms; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-burger .hamburger__state { transition-duration: 0.01ms; } .pf-c-page header.is-nav-open:where([data-pf-nav-menu])::after { animation: none; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header, .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header { 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) { @layer general { html:where(:root), body:where([data-pf-page]) { overflow-x: hidden; }}} @media (max-width: 1100px) { .pf-c-backdrop, .pf-c-page { overflow-x: hidden; }} @media (max-width: 1100px) { .pf-c-page header:where(.pf-c-header), .pf-c-page .pf-c-header { display: block; }} @layer general { html.is-nav-open, body.is-nav-open { overflow: hidden; overflow-x: hidden; }} .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header, .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header { padding: 0; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) { width: 100%; max-width: 100%; margin-inline: 0; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header :is(.pf-pad-sm, :is(.pf-pad-md, .pf-c-consent), :is(.pf-pad-lg, .pf-c-section:where([data-pf-page-type="single"] main > :not(.pf-c-hero, .pf-c-section--slide), [data-pf-page="about"] main > :not(.pf-c-hero), [data-pf-page="contact"] main > :not(.pf-c-hero), [data-pf-page="team"] main > :not(.pf-c-hero), [data-pf-page="sitemap"] main > :not(.pf-c-hero), [data-pf-page^="legal-"] main > :not(.pf-c-hero))), .pf-pad-x-sm, :is(.pf-pad-x-md, .pf-c-section:where([data-pf-page-type="home"] :is(main, .customizer-features-slot) > :not(.customizer-demo-section)), .pf-c-header, .pf-c-footer, .pf-c-legal), :is(.pf-pad-x-lg, .pf-c-section:where([data-pf-page-type="listing"] main > :not(.pf-c-hero), [data-pf-page="informations"] main > :not(.pf-c-hero), [data-pf-page="surveys"] main > :not(.pf-c-hero), [data-pf-page="memberships"] main > :not(.pf-c-hero), [data-pf-page="agenda"] main > :not(.pf-c-hero), [data-pf-page-type="single"] main > .pf-c-section--slide, [data-pf-page="blog-article"] main)), .pf-pl-sm, .pf-pl-md, :is(.pf-pl-lg, .pf-c-hero:where(:not([data-pf-page-type="home"] *, [data-pf-page="invitation"] *))), .pf-pr-sm, .pf-pr-md, :is(.pf-pr-lg, .pf-c-hero:where(:not([data-pf-page-type="home"] *, [data-pf-page="invitation"] *)))) { padding-left: 0; padding-right: 0; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__item--has-submenu.is-open > .pf-c-nav__submenu { display: block; opacity: 1; max-height: min(80vh, 2000px); visibility: visible; overflow: visible; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu { position: static; left: auto; right: auto; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { position: static; inset: auto; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu .pf-c-nav__submenu-content, .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list), .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu ul:is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; width: 100%; max-width: 100%; margin: 0; padding: 0; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__submenu .pf-c-nav__submenu-content { background-color: transparent; background-image: none; border: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__submenu .pf-c-nav__submenu-content::before { display: none; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__item--has-submenu .pf-c-nav__submenu { overflow: visible; } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__submenu { background: none; background-color: transparent; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; } @media (hover: none) { .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__item--has-submenu:hover:not(.is-open:where(.pf-c-nav__item)) > .pf-c-nav__submenu { display: none; }}} /* assets/css/public/design/themes/basic/nav-background/01-header.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 1/5 de design/themes/basic/nav-background.css : composant « header » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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. * --pf-nav-bg-color / --pf-nav-bg-blur : toujours posées (défauts compris) ; * --pf-nav-bg-color-custom / --pf-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 ========================================================================== */ .pf-c-page header:where(.pf-c-header), .pf-c-page footer:where(.pf-c-legal, .pf-c-nav) { --pf-chrome-bg: var(--pf-nav-bg-color, rgba(255, 255, 255, 0.15)); --pf-chrome-blur: var(--pf-nav-bg-blur, blur(6px)); --pf-island-bg: var(--pf-nav-bg-color, rgba(255, 255, 255, 0.15)); --pf-island-blur: var(--pf-nav-bg-blur, blur(6px)); } /* ========================================================================== 2. Barre pleine largeur Coquille sans fond ni flou ; teinte sur ::before, flou sur .header-glass / .footer-glass. ========================================================================== */ .pf-c-page header:where(.pf-c-header), .pf-c-page footer:where(.pf-c-legal, .pf-c-nav), .pf-c-page .pf-c-header { background-color: transparent; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; } } /* assets/css/public/design/themes/basic/nav-background/02-legal.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 2/5 de design/themes/basic/nav-background.css : composant « legal » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page footer:where(.pf-c-legal, .pf-c-nav) { position: relative; } } /* assets/css/public/design/themes/basic/nav-background/03-header.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 3/5 de design/themes/basic/nav-background.css : composant « header » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page header:where(.pf-c-header)::before, .pf-c-page footer:where(.pf-c-legal, .pf-c-nav)::before, .pf-c-page .pf-c-header::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--pf-chrome-bg); pointer-events: none; } .pf-c-page header .pf-c-header__glass, .pf-c-page .pf-c-header .pf-c-header__glass, .pf-c-page footer .pf-c-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; } /* Contenu au-dessus de la barre. Pas de z-index sur .header-inner (piège le panneau fixe en mobile). */ .pf-c-page header .pf-c-header__inner, .pf-c-page .pf-c-header .pf-c-header__inner { position: relative; z-index: auto; }} /* assets/css/public/design/themes/basic/nav-background/04-footer.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 4/5 de design/themes/basic/nav-background.css : composant « footer » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page footer .pf-c-footer__main, .pf-c-page .pf-c-footer .pf-c-footer__main { position: relative; z-index: 1; } /* Couche de flou des panneaux du pied de page (thèmes à verre : Verre sur le bloc principal, Bento sur chaque tuile), sur un pseudo-élément : posé sur le panneau, le flou faisait redessiner tout le verre au survol d'un lien (Safari : quadrillage furtif). Variables d'accroche réglées par le thème : --pf-footer-panel-blur, --pf-footer-tile-blur (aucun flou par défaut). */ .pf-c-page .pf-c-footer :where(.pf-c-footer__about, .pf-c-footer__group--about, .pf-c-footer__group--portfolio, .pf-c-footer__social) { position: relative; } .pf-c-page .pf-c-footer .pf-c-footer__main::before, .pf-c-page .pf-c-footer :is(.pf-c-footer__about, .pf-c-footer__group--about, .pf-c-footer__group--portfolio, .pf-c-footer__social)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; } .pf-c-page .pf-c-footer .pf-c-footer__main::before { -webkit-backdrop-filter: var(--pf-footer-panel-blur, none); backdrop-filter: var(--pf-footer-panel-blur, none); } .pf-c-page .pf-c-footer :is(.pf-c-footer__about, .pf-c-footer__group--about, .pf-c-footer__group--portfolio, .pf-c-footer__social)::before { -webkit-backdrop-filter: var(--pf-footer-tile-blur, none); backdrop-filter: var(--pf-footer-tile-blur, none); } } /* assets/css/public/design/themes/basic/nav-background/05-nav.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 5/5 de design/themes/basic/nav-background.css : composant « nav » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* ========================================================================== 3. Sous-menu ordinateur (repli sans thème ; les menus et leurs panneaux passent aux variables en E2) ========================================================================== */ .pf-c-page header .pf-c-nav__submenu .pf-c-nav__submenu-content { position: relative; z-index: 1; background-color: var(--pf-nav-bg-color, rgba(255, 255, 255, 0.15)); -webkit-backdrop-filter: var(--pf-nav-bg-blur, blur(6px)); backdrop-filter: var(--pf-nav-bg-blur, blur(6px)); } .pf-c-page header .pf-c-nav__submenu .pf-c-nav__submenu-content::before { content: none; display: none; } } /* assets/css/public/design/themes/basic/links/01-nav.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* --- Liens des menus derrière le bouton Menu (ex-header-mobile.css, même raison) --- */ .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header:not([data-pf-link-shape="bg"]) .pf-c-nav__content .pf-c-nav__list a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link), .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header:not([data-pf-link-shape="bg"]) .pf-c-nav__content .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) {/* --pf-nav-link-pad-inline : écart latéral d'un thème en style texte / souligné (Terminal). */ } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > li > a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link), .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header a.pf-c-nav__link--has-submenu { padding-block: calc((var(--pf-nav-line-height, 1.4em) - 1em) * 0.5 + 0.45rem); } .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__submenu ul li a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { padding-block: 0.5rem; } .pf-c-page :is(.pf-c-nav) { --pf-link-text: var(--pf-nav-link-text-custom, var(--pf-nav-link-text, var(--pf-nav-links-color))); --pf-link-bg: var(--pf-nav-link-bg-custom, var(--pf-nav-link-bg, transparent)); --pf-link-active-text: var(--pf-nav-link-active-text-custom, var(--pf-nav-link-active-text, var(--pf-link-text))); --pf-link-active-bg: var(--pf-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. */ .pf-c-page .pf-c-nav[data-pf-link-style="solid"] { --pf-link-text: var(--pf-nav-link-text-custom, var(--pf-nav-link-text, var(--pf-link-active-text))); --pf-link-bg: var(--pf-nav-link-bg-custom, var(--pf-nav-link-bg, var(--pf-link-active-bg))); --pf-link-active-text: var(--pf-nav-link-active-text-custom, var(--pf-nav-link-active-text, var(--pf-nav-links-color))); } .pf-c-page .pf-c-nav .pf-c-nav__list a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link), .pf-c-page .pf-c-nav__item a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { color: var(--pf-link-text); text-decoration: none; padding: var(--pf-nav-links-padding-vert) var(--pf-nav-links-padding-horiz); display: inline-block; position: relative; overflow: visible; text-overflow: clip; transition: transform var(--pf-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), filter var(--pf-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), color var(--pf-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), background-color var(--pf-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), border-color var(--pf-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), box-shadow var(--pf-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)), opacity var(--pf-nav-links-transition, 280ms cubic-bezier(0.22, 1, 0.36, 1)); } /* Survol et page active : mêmes couleurs dans tous les styles */ .pf-c-page :is(.pf-c-nav .pf-c-nav__list, .pf-c-nav .pf-c-nav__submenu) a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link):is(:hover, :focus-visible, [aria-current="page"]:where(.pf-c-nav__link), .pf-c-footer__heading) { opacity: 1; } /* Enfants (icônes, spans, chevron) : couleur du lien */ .pf-c-page :is(.pf-c-nav .pf-c-nav__list, .pf-c-nav .pf-c-nav__submenu) a :where([class], svg *), .pf-c-page .pf-c-nav__submenu-toggle, .pf-c-page .pf-c-nav__submenu-icon { color: inherit; } /* ---------- 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. */ .pf-c-page .pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__list > .pf-c-nav__item > a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link), .pf-c-page .pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) {/* --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. */ .pf-c-page :is(.pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__list, .pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__submenu) a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { background: none; } .pf-c-page :is(.pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__list, .pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__submenu) a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--pf-nav-underline-width, 2px); background: var(--pf-link-active-text); transform-origin: left center; transform: scaleX(0); transition: transform var(--pf-nav-links-transition), background var(--pf-nav-links-transition); border-radius: var(--pf-border-radius-xs); } .pf-c-page :is(.pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__list, .pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__submenu) a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link):is(:hover, :focus-visible, [aria-current="page"]:where(.pf-c-nav__link), .pf-c-footer__heading)::after { transform: scaleX(1); } /* Texte seul : comme Souligné, sans le trait */ .pf-c-page .pf-c-nav[data-pf-link-style="text"] :is(.pf-c-nav__list, .pf-c-nav__submenu) a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link)::after { display: none; } /* ---------- Sous-menu, effets, accessibilité ---------- */ .pf-c-page .pf-c-nav .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { gap: var(--pf-header-nav-gap-y, 0.4rem) var(--pf-header-nav-gap-x, 1.25rem); } /* Effets de survol / clic (variables posées par css_vars_primary.php) */ .pf-c-page .pf-c-nav .pf-c-nav__list a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link):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) */ .pf-c-page .pf-c-nav__submenu-icon svg:where(.pf-c-nav__submenu-svg), .pf-c-page .pf-c-nav__submenu-icon svg path, .pf-c-page .pf-c-nav__submenu-icon svg circle:where(.ark-loader-ring-arc, .ark-loader-ring-track), .pf-c-page .pf-c-nav__submenu-icon svg rect, .pf-c-page .pf-c-nav__submenu-icon svg polygon, .pf-c-page .pf-c-nav__submenu-icon svg line, .pf-c-page .pf-c-nav__submenu-icon svg polyline { color: inherit; transition: stroke var(--pf-nav-links-transition), color var(--pf-nav-links-transition); } .pf-c-page .pf-c-nav__submenu-icon img { display: inline-block; max-width: 1em; height: 1em; vertical-align: middle; }} /* assets/css/public/design/themes/basic/links/02-card.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 2/4 de design/themes/basic/links.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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 */ .pf-c-page .pf-c-card--tile, .pf-c-page .pf-c-profile__infos a:where(.pf-c-socials__link), .pf-c-page .pf-c-profile__infos a :where([class], svg *) { color: inherit; text-decoration: none; } } /* assets/css/public/design/themes/basic/links/03-social.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 3/4 de design/themes/basic/links.css : composant « social » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @layer general { .pf-c-profiles .pf-c-profile__infos a:where(.pf-c-socials__link), .pf-c-profiles .pf-c-profile__infos a :where([class], svg *) { color: inherit; text-decoration: none; } } } /* assets/css/public/design/themes/basic/links/04-btn.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 4/4 de design/themes/basic/links.css : composant « btn » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Boutons thème : ne pas forcer color:inherit ici (spécificité .pf-c-page gagnait sur buttons.css et annulait --pf-button-text-color / hover). */ .pf-c-page .pf-c-btn, .pf-c-page .pf-c-btn { text-decoration-line: var(--pf-button-th-deco, none); /* thème Souligné (buttons.css) */ } .pf-c-page .pf-c-btn :where([class], svg *) { 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 { .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header:not([data-pf-link-shape="bg"]) .pf-c-nav__content .pf-c-nav__list a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link), .pf-c-page header:where([data-pf-nav-menu]) .pf-c-nav--header:not([data-pf-link-shape="bg"]) .pf-c-nav__content .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { padding-inline: var(--pf-nav-link-pad-inline, 0); } .pf-c-page .pf-c-nav .pf-c-nav__list a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link), .pf-c-page .pf-c-nav__item a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { border-radius: var(--pf-nav-links-radius); white-space: nowrap; } .pf-c-page .pf-c-nav .pf-c-nav__list a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link), .pf-c-page .pf-c-nav .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { font-size: var(--pf-nav-link-font-size, var(--pf-nav-font-size)); line-height: var(--pf-nav-link-line-height, var(--pf-nav-line-height)); } .pf-c-page :is(.pf-c-nav .pf-c-nav__list, .pf-c-nav .pf-c-nav__submenu) a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link):is(:hover, :focus-visible, [aria-current="page"]:where(.pf-c-nav__link), .pf-c-footer__heading) { color: var(--pf-link-active-text); } .pf-c-page .pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__list > .pf-c-nav__item > a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link), .pf-c-page .pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { padding: var(--pf-nav-link-pad, 0 0 var(--pf-nav-underline-width, 2px)); } .pf-c-page .pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__list > .pf-c-nav__item > a > *:where(.pf-c-nav__submenu-toggle) { padding: 0 0 2px; } .pf-c-page .pf-c-nav[data-pf-link-style="text"] :is(.pf-c-nav__list > .pf-c-nav__item > a, .pf-c-nav__submenu a) { padding-bottom: 2px; } .pf-c-page :is(.pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__list, .pf-c-nav[data-pf-link-shape="underline"] .pf-c-nav__submenu) a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { 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); } .pf-c-page .pf-c-nav .pf-c-nav__list a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link):hover { transform: var(--pf-nav-hover-transform, none); filter: var(--pf-nav-hover-filter, none); } .pf-c-page .pf-c-nav .pf-c-nav__list a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link):active, .pf-c-page .pf-c-nav .pf-c-nav__list a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link):focus { transform: var(--pf-nav-click-transform, none); } .pf-c-page .pf-c-nav__submenu-icon svg:where(.pf-c-nav__submenu-svg), .pf-c-page .pf-c-nav__submenu-icon svg path, .pf-c-page .pf-c-nav__submenu-icon svg circle:where(.ark-loader-ring-arc, .ark-loader-ring-track), .pf-c-page .pf-c-nav__submenu-icon svg rect, .pf-c-page .pf-c-nav__submenu-icon svg polygon, .pf-c-page .pf-c-nav__submenu-icon svg line, .pf-c-page .pf-c-nav__submenu-icon svg polyline { fill: none; stroke: currentColor; } @media (max-width: 1100px) { .pf-c-page .pf-c-nav .pf-c-nav__list a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link), .pf-c-page .pf-c-nav__item a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { 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 */ .pf-c-page [data-pf-order="0"]:where(.pf-c-nav__item) { order: 0; } .pf-c-page [data-pf-order="1"]:where(.pf-c-nav__item) { order: 2; } .pf-c-page [data-pf-order="2"]:where(.pf-c-nav__item) { order: 3; } .pf-c-page [data-pf-order="3"]:where(.pf-c-nav__item) { order: 4; } .pf-c-page [data-pf-order="4"]:where(.pf-c-nav__item) { order: 5; } .pf-c-page [data-pf-order="5"]:where(.pf-c-nav__item) { order: 6; } .pf-c-page [data-pf-order="6"]:where(.pf-c-nav__item) { order: 7; } .pf-c-page [data-pf-order="7"]:where(.pf-c-nav__item) { order: 8; } .pf-c-page [data-pf-order="8"]:where(.pf-c-nav__item) { order: 9; } .pf-c-page [data-pf-order="9"]:where(.pf-c-nav__item) { order: 10; } .pf-c-page [data-pf-order="10"]:where(.pf-c-nav__item) { order: 11; } .pf-c-page [data-pf-order="11"]:where(.pf-c-nav__item) { 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. ========================================================================== */ .pf-c-page { --pf-radius: var(--pf-thumbnail-radius, 0px); --pf-radius-inner: max(0px, calc(var(--pf-radius) * 0.75)); --pf-pill-radius: var(--pf-nav-links-radius, 999px); --pf-border-width: var(--pf-thumbnail-border-width, 0px); --pf-border-style-or-solid: solid; --pf-border-color: var(--pf-thumbnail-border-color, currentColor); /* Contour réglé par l'utilisateur (type « aucun » → pas de bordure). */ --pf-border: var(--pf-border-width) var(--pf-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(--pf-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(--pf-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(--pf-text-main-color, currentColor); --pf-strong-border: calc(2px + var(--pf-border-width)) solid var(--pf-thumbnail-contour-color, var(--pf-ink)); --pf-strong-shadow-color: var(--pf-thumbnail-contour-color, var(--pf-ink)); /* Fond des cartes : « Couleur de fond des contenus », sinon fond du site. */ --pf-surface: var(--pf-content-bg-color, var(--pf-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(--pf-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(--pf-content-title-color, var(--pf-heading-secondary-color, var(--pf-ink))); --pf-text: var(--pf-content-text-color, var(--pf-ink)); --pf-on-accent: var(--pf-button-text-color, var(--pf-theme-bg-main, Canvas)); --pf-accent: var(--pf-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(--pf-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(--pf-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 (thème « Verre ») : dérivé du fond des contenus et du contour de l'utilisateur. Bord lumineux d'1 px en haut (pas de reflet en dégradé), contour fin lisible sur fond clair comme sombre, ombre courte. */ --pf-glass-bg: color-mix(in srgb, var(--pf-surface) 62%, transparent); --pf-glass-edge: var(--pf-thumbnail-contour-color, color-mix(in srgb, var(--pf-ink) 12%, transparent)); --pf-glass-highlight: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent); --pf-glass-shadow: 0 4px 16px color-mix(in srgb, #000 7%, 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(--pf-thumbnail-hover-transform, none); --pf-hover-filter: var(--pf-thumbnail-hover-filter, none); --pf-press: var(--pf-thumbnail-click-transform, none); /* Police d'accent des thèmes « console » : celle de l'utilisateur, sauf choix contraire. */ --pf-mono: var(--pf-font-name), var(--pf-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(--pf-header-padding-y, 15px) * 0.5); /* Sur mobile : « Espacement vertical » propre au mobile s'il est réglé (@media plus bas). */ --pf-island-pad-y-mobile: calc(var(--pf-header-padding-y-mobile, var(--pf-header-padding-y, 15px)) * 0.5); --pf-island-gap: 0.75rem; --pf-rule-width: var(--pf-section-divider-width, 1px); --pf-rule-color: var(--pf-section-divider-color, color-mix(in srgb, currentColor 20%, transparent)); } /* Texte « Automatique » sur une image claire (« Textes des vignettes ») : ton mesuré côté serveur et posé sur l'image (data-pf-media-tone, shared/core/design/media_tones.php) ; la carte passe au jeu « texte noir, voile clair » (theme_derivation.php : portfolios_design_media_text_css_vars). Les thèmes à légende en panneau gardent leur encre, posée sur la légende elle-même. */ body[data-pf-media-text="auto"] .pf-c-page .pf-c-card:has(> .pf-c-card__media[data-pf-media-tone="light"]) { --pf-thumbnail-overlay-title-color: var(--pf-thumbnail-overlay-title-color-black); --pf-thumbnail-overlay-description-color: var(--pf-thumbnail-overlay-description-color-black); --pf-thumbnail-overlay-gradient: var(--pf-thumbnail-overlay-gradient-black); --pf-thumbnail-overlay-text-shadow: var(--pf-thumbnail-overlay-text-shadow-black); --pf-on-media: var(--pf-thumbnail-overlay-title-color-black); } @media (max-width: 1100px) { .pf-c-page { --pf-island-pad-y: var(--pf-island-pad-y-mobile); } } } /* assets/css/public/design/elements/articles/01-card.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/3 de design/elements/articles.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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 : .pf-c-cards--articles > .pf-c-cards__item > a.pf-c-card--tile > .pf-c-card__media + .pf-c-card__body ========================================================================== */ .pf-c-page .pf-c-cards--articles:not([data-pf-layout="grid"]) .pf-c-card--tile { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; text-decoration: none; } .pf-c-page .pf-c-cards--articles:not([data-pf-layout="grid"]) .pf-c-card__media { position: relative; padding-bottom: 60%; background-size: cover; background-position: center; } .pf-c-page .pf-c-cards--articles:not([data-pf-layout="grid"]) .pf-c-card__body { padding: calc(1rem * var(--pf-density-pad, 1)) 0; } /* --- Magazine : une grande « une », puis colonnes ------------------------- */ .pf-c-page .pf-c-cards--articles[data-pf-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)); } .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child { grid-column: 1 / -1; } .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child .pf-c-card--tile { display: grid; grid-template-columns: 1.4fr 1fr; gap: calc(2.5rem * var(--pf-density-gap, 1)); align-items: center; } .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child .pf-c-card__media { padding-bottom: 60%; /* format historique des vignettes d'articles (thumbnails/main.css) */ } .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child .pf-c-card__title { /* Tailles dérivées de la taille des titres du générateur (blog.css les fixe en !important). */ font-size: calc(var(--pf-heading-secondary-size, 14px) * 2); line-height: 1.1; } /* --- Mosaïque plein bord ------------------------------------------------- */ .pf-c-page .pf-c-cards--articles[data-pf-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)); } .pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] > :nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; } .pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] > :nth-child(5n + 4) { grid-row: span 2; } .pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card--tile { position: relative; } .pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card__media { position: absolute; inset: 0; padding: 0; } .pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card__body { 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)); /* Texte toujours visible, comme les légendes des œuvres (le thème peut le réserver au survol : Galerie) ; couleur reprise de la légende, que les thèmes à panneau fixent (themes//works.css). */ --pf-on-media: var(--pf-thumbnail-overlay-title-color, #fff); /* Titre à la couleur du texte sur l'image, pas à l'encre des cartes (--pf-card-title des thèmes). */ --pf-card-title: var(--pf-on-media); --pf-title: var(--pf-on-media); color: var(--pf-on-media); /* Dégradé « Textes des vignettes » (/theme) : le texte (--pf-on-media) est contrasté pour lui. */ background: var(--pf-thumbnail-overlay-gradient, linear-gradient(0deg, var(--pf-scrim-strong), transparent)); } .pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card__excerpt { display: none; } /* --- Index (tableau numéroté) / journal / survol : listes en lignes ------- */ .pf-c-page .pf-c-cards--articles:is([data-pf-layout="index"], [data-pf-layout="journal"], [data-pf-layout="reveal"]) { display: block; counter-reset: pf-article; } .pf-c-page .pf-c-cards--articles:is([data-pf-layout="index"], [data-pf-layout="journal"], [data-pf-layout="reveal"]) > * { counter-increment: pf-article; } .pf-c-page .pf-c-cards--articles:is([data-pf-layout="index"], [data-pf-layout="journal"], [data-pf-layout="reveal"]) .pf-c-card__media { display: none; } .pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card--tile { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: baseline; padding: calc(1.1rem * var(--pf-density-pad, 1)) 0; } .pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card--tile::before { content: counter(pf-article, decimal-leading-zero); font-variant-numeric: tabular-nums; opacity: 0.55; } .pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 calc(2rem * var(--pf-density-gap, 1)); padding: 0; } .pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card__meta { grid-column: 2; grid-row: 1; margin: 0; white-space: nowrap; } .pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card__excerpt { grid-column: 1; margin: 0.35rem 0 0; opacity: 0.75; } .pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card--tile:hover .pf-c-card__title { text-decoration: underline; text-underline-offset: 0.2em; } /* Journal : date en marge */ .pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card--tile { display: block; padding: calc(1.5rem * var(--pf-density-pad, 1)) 0; } .pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card__body { 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; } .pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card__body > *:where(.pf-c-card__category, .pf-c-card__date, .pf-c-card__excerpt, .pf-c-card__meta, .pf-c-card__title) { grid-column: 2; } .pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card__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) */ .pf-c-page .pf-c-cards--articles[data-pf-layout="reveal"] .pf-c-card--tile { display: block; padding: calc(1.25rem * var(--pf-density-pad, 1)) 0; } .pf-c-page .pf-c-cards--articles[data-pf-layout="reveal"] .pf-c-card__body { 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; } .pf-c-page .pf-c-cards--articles[data-pf-layout="reveal"] .pf-c-card__title { font-size: clamp(calc(var(--pf-heading-secondary-size, 14px) * 1.4), 4vw, calc(var(--pf-heading-secondary-size, 14px) * 2.6)); line-height: 1.05; letter-spacing: -0.02em; transition: translate 0.35s ease, opacity 0.35s ease; } .pf-c-page .pf-c-cards--articles[data-pf-layout="reveal"]:hover .pf-c-card--tile:not(:hover) .pf-c-card__title { opacity: 0.35; } .pf-c-page .pf-c-cards--articles[data-pf-layout="reveal"] .pf-c-card--tile:hover .pf-c-card__title { translate: 0.75rem 0; } .pf-c-page .pf-c-cards--articles[data-pf-layout="reveal"] .pf-c-card__excerpt { display: none; } /* --- 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. */ .pf-c-page .pf-c-cards--articles[data-pf-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)); } .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; } .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > :is(:nth-child(7n + 2), :nth-child(7n + 5)) { grid-column: span 2; } @media (max-width: 1100px) { .pf-c-page .pf-c-cards--articles[data-pf-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). */ .pf-c-page .pf-c-cards--works[data-pf-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)); } .pf-c-page .pf-c-cards--works[data-pf-layout="bento"] > a:where(.pf-c-card):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. */ .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > * { min-height: 0; } } /* assets/css/public/design/elements/articles/02-reveal.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/3 de design/elements/articles.css : composant « reveal » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @layer general { .pf-c-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; } .pf-c-reveal-image.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); } } } /* assets/css/public/design/elements/articles/03-card.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 3/3 de design/elements/articles.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card--tile { position: relative; display: block; height: 100%; overflow: hidden; } .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card--tile .pf-c-card__media { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: inherit; } .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card__body { 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); } .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card__title { font-weight: 700; } .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > :not(:nth-child(7n + 1)) .pf-c-card__excerpt { display: none; } /* Grande tuile : étiquette plus large, titre plus grand, description sur 2 lignes. */ .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(7n + 1) .pf-c-card__body { 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)); } .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(7n + 1) .pf-c-card__title { font-size: 1.35em; } .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(7n + 1) .pf-c-card__excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* --- Grand format : un article par bandeau ------------------------------- */ .pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(3rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card--tile { position: relative; min-height: min(78vh, 44rem); justify-content: flex-end; } .pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card__media { position: absolute; inset: 0; padding: 0; } .pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card__media::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(--pf-thumbnail-overlay-gradient, linear-gradient(0deg, var(--pf-scrim-strong), transparent)) bottom / 100% 65% no-repeat; opacity: 1; } .pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card__body { position: relative; flex: 0 0 auto; max-width: 46rem; margin-top: auto; padding: calc(2.5rem * var(--pf-density-pad, 1)); /* Couleur reprise de la légende, que les thèmes à panneau fixent (themes//works.css). */ --pf-on-media: var(--pf-thumbnail-overlay-title-color, #fff); /* Titre à la couleur du texte sur l'image, pas à l'encre des cartes (--pf-card-title des thèmes). */ --pf-card-title: var(--pf-on-media); --pf-title: var(--pf-on-media); color: var(--pf-on-media); } /* Titre posé sur l'image : même graisse que les légendes des œuvres (un thème la règle pour les deux, works.css). */ .pf-c-page .pf-c-cards--articles:is([data-pf-layout="feature"], [data-pf-layout="mosaic"]) .pf-c-card__body .pf-c-card__title { font-weight: 400; } .pf-c-page .pf-c-cards--articles:is([data-pf-layout="feature"], [data-pf-layout="mosaic"]) .pf-c-card__body :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. */ .pf-c-page .pf-c-cards--articles:is([data-pf-layout="feature"], [data-pf-layout="mosaic"]) .pf-c-card--tile:has(.pf-c-card__media--empty) .pf-c-card__media::after { background: none; } .pf-c-page .pf-c-cards--articles:is([data-pf-layout="feature"], [data-pf-layout="mosaic"]) .pf-c-card--tile:has(.pf-c-card__media--empty) .pf-c-card__body { color: var(--pf-ink); background: none; /* voile de la mosaïque */ } .pf-c-page .pf-c-cards--articles:is([data-pf-layout="feature"], [data-pf-layout="mosaic"]) .pf-c-card--tile:has(.pf-c-card__media--empty) .pf-c-card__body :is(h4, p, span, time) { color: var(--pf-ink); } .pf-c-page .pf-c-cards--articles:is([data-pf-layout="feature"], [data-pf-layout="mosaic"]) .pf-c-card--tile:has(.pf-c-card__media--empty) .pf-c-card__title { color: var(--pf-heading-secondary-color, var(--pf-ink)); } .pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card__title { font-size: clamp(calc(var(--pf-heading-secondary-size, 14px) * 1.6), 5vw, calc(var(--pf-heading-secondary-size, 14px) * 3.2)); line-height: 1.02; text-transform: var(--pf-set-title-transform, uppercase); letter-spacing: 0.02em; } @media (max-width: 1100px) { .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child .pf-c-card--tile { grid-template-columns: minmax(0, 1fr); gap: 0; } .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child .pf-c-card__title { font-size: 1.6em; } .pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 11rem; } /* Mobile : pas de survol → légende toujours visible. */ .pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card__body { 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; } .pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card--tile { grid-template-columns: 2.5rem minmax(0, 1fr); } .pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card__body { grid-template-columns: minmax(0, 1fr); } .pf-c-page .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card__meta { grid-column: 1; grid-row: auto; } .pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card__body { grid-template-columns: minmax(0, 1fr); } .pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card__meta { grid-row: auto; order: -1; } .pf-c-page .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card__body > *:where(.pf-c-card__category, .pf-c-card__date, .pf-c-card__excerpt, .pf-c-card__meta, .pf-c-card__title) { grid-column: 1; } .pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] { gap: 0; margin-inline: -20px; } /* Format portrait au lieu de presque tout l'écran (88svh) : on voit l'article suivant arriver. */ .pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card--tile { min-height: 0; aspect-ratio: 4 / 5; scroll-snap-align: start; } .pf-c-page .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card__body { 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) { .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== 9. Articles — gabarits ajoutés : list · minimal · carousel ========================================================================== */ /* Liste illustrée : image à gauche, texte à droite */ .pf-c-page .pf-c-cards--articles[data-pf-layout="list"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(1.25rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-cards--articles[data-pf-layout="list"] .pf-c-card--tile { display: grid; grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr); gap: calc(1.5rem * var(--pf-density-gap, 1)); align-items: center; } .pf-c-page .pf-c-cards--articles[data-pf-layout="list"] .pf-c-card__media { padding-bottom: 60%; /* format historique des vignettes d'articles (thumbnails/main.css) */ } .pf-c-page .pf-c-cards--articles[data-pf-layout="list"] .pf-c-card__body { 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 */ .pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] { display: block; } .pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card__media, .pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card__excerpt { display: none; } .pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card--tile { display: block; padding: calc(0.9rem * var(--pf-density-pad, 1)) 0; } .pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card__body { 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; } .pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card__title { font-size: calc(var(--pf-heading-secondary-size, 14px) * 1.6); line-height: 1.15; } .pf-c-page .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card__meta { margin: 0; opacity: 0.6; } /* Carrousel : défilement horizontal aimanté */ .pf-c-page .pf-c-cards--articles[data-pf-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; } .pf-c-page .pf-c-cards--articles[data-pf-layout="carousel"] > * { flex: 0 0 clamp(15rem, 28vw, 22rem); scroll-snap-align: start; } @media (max-width: 1100px) { .pf-c-page .pf-c-cards--articles[data-pf-layout="list"] .pf-c-card--tile { grid-template-columns: 7.5rem minmax(0, 1fr); gap: calc(0.9rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-cards--articles[data-pf-layout="list"] .pf-c-card__excerpt { display: none; } .pf-c-page .pf-c-cards--articles[data-pf-layout="carousel"] > * { flex-basis: 78vw; } } } /* assets/css/public/design/elements/awards/01-award.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/2 de design/elements/awards.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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.pf-c-awards[data-pf-awards-layout] > li.pf-c-awards__item > __index + img.__logo? + __name (`logos` = rendu historique : ul.pf-c-award-logos > li.__item > img.__img) ========================================================================== */ .pf-c-page .pf-c-awards { margin: 0; padding: 0; list-style: none; } .pf-c-page .pf-c-awards .pf-c-awards__index { display: none; } .pf-c-page .pf-c-awards .pf-c-awards__logo { display: block; max-width: 100%; height: auto; object-fit: contain; } /* Liste texte : filets fins */ .pf-c-page .pf-c-awards[data-pf-awards-layout="list"] .pf-c-awards__item { display: flex; align-items: center; gap: calc(1rem * var(--pf-density-gap, 1)); padding: calc(0.7rem * var(--pf-density-pad, 1)) 0; } .pf-c-page .pf-c-awards[data-pf-awards-layout="list"] .pf-c-awards__logo { width: 2.25rem; height: 2.25rem; } /* Tableau indexé */ .pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__item { 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; } .pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__index { display: block; font-variant-numeric: tabular-nums; opacity: 0.55; } .pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__logo { grid-column: 2; width: 3rem; height: 2rem; } .pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__name { grid-column: 3; } /* Badges discrets / tuiles / médailles / rosettes : en flux */ .pf-c-page .pf-c-awards:is([data-pf-awards-layout="mosaic"], [data-pf-awards-layout="bento"], [data-pf-awards-layout="polaroid"], [data-pf-awards-layout="journal"], [data-pf-awards-layout="feature"]) { display: flex; flex-wrap: wrap; gap: calc(0.75rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-awards[data-pf-awards-layout="mosaic"] .pf-c-awards__item { 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; } .pf-c-page .pf-c-awards[data-pf-awards-layout="mosaic"] .pf-c-awards__logo { width: 1.6rem; height: 1.6rem; border-radius: var(--pf-pill-radius); } .pf-c-page .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__item { 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)); } .pf-c-page .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__index { display: block; font-size: 1.8em; font-weight: 600; line-height: 1; } .pf-c-page .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__logo { width: 3rem; height: 3rem; } /* Lauriers : feuillage SVG de part et d'autre du texte */ .pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] { gap: calc(1.25rem * var(--pf-density-gap, 1)) calc(2rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__item { 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(--pf-set-title-transform, uppercase); letter-spacing: 0.08em; font-size: 0.75em; line-height: 1.25; } .pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__item::before, .pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__item::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; } .pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__item::before { left: 0; } .pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__item::after { right: 0; transform: scaleX(-1); } .pf-c-page .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__logo { display: none; } /* Polaroïd : médailles */ .pf-c-page .pf-c-awards[data-pf-awards-layout="polaroid"] .pf-c-awards__item { 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; } .pf-c-page .pf-c-awards[data-pf-awards-layout="polaroid"] .pf-c-awards__logo { width: 2.5rem; height: 2.5rem; } /* Rosettes */ .pf-c-page .pf-c-awards[data-pf-awards-layout="journal"] { flex-direction: column; gap: calc(0.5rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-awards[data-pf-awards-layout="journal"] .pf-c-awards__item { display: flex; align-items: center; gap: calc(0.75rem * var(--pf-density-gap, 1)); font-style: italic; } .pf-c-page .pf-c-awards[data-pf-awards-layout="journal"] .pf-c-awards__item::before { content: "✿"; color: var(--pf-accent); } .pf-c-page .pf-c-awards[data-pf-awards-layout="journal"] .pf-c-awards__logo { width: 1.75rem; height: 1.75rem; } /* Bandeau défilant */ .pf-c-page .pf-c-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); } .pf-c-page .pf-c-awards[data-pf-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; } .pf-c-page .pf-c-awards-marquee:hover .pf-c-awards[data-pf-awards-layout="carousel"] { animation-play-state: paused; } .pf-c-page .pf-c-awards[data-pf-awards-layout="carousel"] .pf-c-awards__item { 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; } .pf-c-page .pf-c-awards[data-pf-awards-layout="carousel"] .pf-c-awards__logo { width: 2rem; height: 2rem; } /* Carrousel horizontal sur mobile pour les gabarits en flux */ @media (max-width: 1100px) { .pf-c-page .pf-c-awards:is([data-pf-awards-layout="bento"], [data-pf-awards-layout="polaroid"], [data-pf-awards-layout="feature"], [data-pf-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; } .pf-c-page .pf-c-awards:is([data-pf-awards-layout="bento"], [data-pf-awards-layout="polaroid"], [data-pf-awards-layout="feature"], [data-pf-awards-layout="mosaic"]) .pf-c-awards__item { flex: 0 0 auto; scroll-snap-align: start; } .pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__item { grid-template-columns: 2.25rem minmax(0, 1fr); } .pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__logo { display: none; } .pf-c-page .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__name { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { .pf-c-page .pf-c-awards[data-pf-awards-layout="carousel"] { animation: none; flex-wrap: wrap; } .pf-c-page .pf-c-awards-marquee { -webkit-mask-image: none; mask-image: none; } .pf-c-page .pf-c-awards--echo { display: none; } @layer general { .pf-c-reveal-image { display: none; } } } } /* assets/css/public/design/elements/awards/02-base.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/2 de design/elements/awards.css : composant « base » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @keyframes pf-matrix-marquee { to { transform: translateX(-100%); } } } /* Primitive retirée du HTML (grammaire, décision n° 1) : son effet, dans la couche qu'elle occupait (core/layout.css). */ @layer site.socle { /* ex-.pf-w-wide sur l'image des logos */ @layer general { .pf-c-award-logos__img { width: 100%; margin: 0 auto; max-width: var(--layout-width-wide); } } } /* 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-pf-layout] sur les galeries pf-c-gallery (#gallery, #production-show-photos-grid) Balisage : > a.gallery-item (fond = image) > img (masquée en grille) ========================================================================== */ .pf-c-page .pf-c-gallery[data-pf-layout]:not([data-pf-layout="grid"]) > a:where(.pf-c-gallery__item)::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. */ .pf-c-page .pf-c-gallery[data-pf-layout] { --pf-card-ratio: 1 / 1; } /* gallery.css (≤ 620 px) centre les éléments : les tuiles doivent remplir leur ligne. */ .pf-c-page .pf-c-gallery[data-pf-layout]:not([data-pf-layout="grid"]) { align-items: stretch; } /* Mosaïque : tailles variées */ .pf-c-page .pf-c-gallery[data-pf-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)); } .pf-c-page .pf-c-gallery[data-pf-layout="mosaic"] > a:where(.pf-c-gallery__item) { height: auto; padding: 0; } .pf-c-page .pf-c-gallery[data-pf-layout="mosaic"] > a:where(.pf-c-gallery__item):nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; } /* Pellicule : défilement horizontal aimanté */ .pf-c-page .pf-c-gallery[data-pf-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; } .pf-c-page .pf-c-gallery[data-pf-layout="carousel"] > a:where(.pf-c-gallery__item) { 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 */ .pf-c-page .pf-c-gallery[data-pf-layout="polaroid"] { display: grid; gap: calc(28px * var(--pf-density-gap, 1)); padding: calc(12px * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-gallery[data-pf-layout="polaroid"] > a:where(.pf-c-gallery__item) { background-clip: padding-box; transition: rotate 0.2s ease; } .pf-c-page .pf-c-gallery[data-pf-layout="polaroid"] > a:where(.pf-c-gallery__item):nth-child(3n + 1) { rotate: -2deg; } .pf-c-page .pf-c-gallery[data-pf-layout="polaroid"] > a:where(.pf-c-gallery__item):nth-child(3n + 2) { rotate: 1.5deg; } .pf-c-page .pf-c-gallery[data-pf-layout="polaroid"] > a:where(.pf-c-gallery__item):hover { rotate: 0deg; } /* Bento : tuiles arrondies, une grande */ .pf-c-page .pf-c-gallery[data-pf-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)); } .pf-c-page .pf-c-gallery[data-pf-layout="bento"] > a:where(.pf-c-gallery__item) { height: auto; padding: 0; } .pf-c-page .pf-c-gallery[data-pf-layout="bento"] > a:where(.pf-c-gallery__item):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 */ .pf-c-page .pf-c-gallery[data-pf-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; } .pf-c-page .pf-c-gallery[data-pf-layout="index"] > a:where(.pf-c-gallery__item) { position: relative; counter-increment: pf-image; } .pf-c-page .pf-c-gallery[data-pf-layout="index"] > a:where(.pf-c-gallery__item)::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) { .pf-c-page .pf-c-gallery:is([data-pf-layout="mosaic"], [data-pf-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. */ .pf-c-page .pf-c-gallery[data-pf-layout="polaroid"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-c-page .pf-c-gallery[data-pf-layout="carousel"] > a:where(.pf-c-gallery__item) { flex-basis: 78vw; } .pf-c-page .pf-c-gallery[data-pf-layout="index"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } } } /* assets/css/public/design/elements/events/01-event.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/2 de design/elements/events.css : composant « event » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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.pf-c-events[data-pf-layout] > a.pf-c-event > ul > li.date (p.date-day, p.date-month, p année) + ul (h3, description, lieu, heure) (`cards` = rendu historique, agenda.css) ========================================================================== */ .pf-c-page .pf-c-events[data-pf-layout] { margin: 0; padding: 0; list-style: none; } /* Lignes compactes : date en ligne, filets fins */ .pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event { align-items: center; margin: 0; padding: calc(1rem * var(--pf-density-pad, 1)) 0; } .pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event .pf-c-event__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; } .pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event .pf-c-event__date, .pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event .pf-c-event__date p:where(.pf-c-event__day, .pf-c-event__month, .pf-c-event__year) { color: var(--pf-badge-text-color, var(--pf-badge-color, var(--pf-text-main-color, inherit))); } .pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date) { margin-bottom: 0.35rem; } .pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event .pf-c-event__description { margin-bottom: 0.35rem; } .pf-c-page .pf-c-events[data-pf-layout="list"] .pf-c-event .pf-c-event__open { position: static; margin-left: auto; } /* Frise chronologique : axe vertical, pastille par date */ .pf-c-page .pf-c-events[data-pf-layout="journal"] { position: relative; padding-left: calc(2rem * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-events[data-pf-layout="journal"]::before { content: ""; position: absolute; top: 0.5rem; bottom: 0.5rem; left: 0.45rem; width: 2px; background: var(--pf-accent); opacity: 0.4; } .pf-c-page .pf-c-events[data-pf-layout="journal"] .pf-c-event { flex-direction: column; margin-bottom: 2rem; padding: 0 0 0 calc(1rem * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-events[data-pf-layout="journal"] .pf-c-event::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); } .pf-c-page .pf-c-events[data-pf-layout="journal"] .pf-c-event .pf-c-event__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(--pf-badge-size, 0.9em); letter-spacing: 0.06em; text-transform: var(--pf-badge-transform, uppercase); } .pf-c-page .pf-c-events[data-pf-layout="journal"] .pf-c-event .pf-c-event__date, .pf-c-page .pf-c-events[data-pf-layout="journal"] .pf-c-event .pf-c-event__date p:where(.pf-c-event__day, .pf-c-event__month, .pf-c-event__year) { color: var(--pf-badge-text-color, var(--pf-badge-color, var(--pf-accent))); } .pf-c-page .pf-c-events[data-pf-layout="journal"] .pf-c-event .pf-c-event__open { top: 0; right: 0; bottom: auto; } /* Feuillets de calendrier : cartes en grille, page de calendrier en tête */ .pf-c-page .pf-c-events[data-pf-layout="bento"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--layout-gap, 20px); } .pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event { flex-direction: column; margin: 0; padding: 0 0 calc(1.5rem * var(--pf-density-pad, 1)); overflow: hidden; } .pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event .pf-c-event__date { width: 100%; min-height: 0; margin: 0 0 1.25rem; padding: calc(0.5rem * var(--pf-badge-pad, 1)) calc(1rem * var(--pf-badge-pad, 1)) calc(1rem * var(--pf-badge-pad, 1)); border-radius: var(--pf-badge-radius, 0); } .pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event .pf-c-event__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; } .pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event .pf-c-event__day { font-size: 3em; line-height: 1; } .pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event > ul:where(.pf-c-event__list):not(:first-child) { padding: 0 calc(1.25rem * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event .pf-c-event__open { right: 1.25rem; bottom: 1.25rem; } /* Affiches : jour en très grand, typographie d'affiche */ .pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event { 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; } .pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event .pf-c-event__date { align-items: flex-start; justify-content: flex-start; min-width: 12rem; min-height: 0; padding: 0; background: transparent; } .pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event .pf-c-event__date, .pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event .pf-c-event__date p:where(.pf-c-event__day, .pf-c-event__month, .pf-c-event__year) { color: var(--pf-badge-text-color, var(--pf-badge-color, var(--pf-text-main-color, inherit))); } .pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event .pf-c-event__day { font-size: clamp(3.5rem, 9vw, 7rem); line-height: 0.85; letter-spacing: -0.04em; } .pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event .pf-c-event__month { text-transform: uppercase; letter-spacing: 0.12em; } .pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event ul li:not(.pf-c-event__date) :is(h2, h3) { font-size: calc(var(--pf-heading-secondary-size) * 1.4); line-height: 1.1; text-transform: var(--pf-set-title-transform, uppercase); } .pf-c-page .pf-c-events[data-pf-layout="feature"] .pf-c-event .pf-c-event__open { top: 1.25rem; right: 0; bottom: auto; } /* Texte seul : pas de pavé daté, date en petite ligne au-dessus du titre */ .pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event { flex-direction: column; padding: 0; margin-bottom: 2rem; } .pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event .pf-c-event__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(--pf-badge-size, 0.85em); opacity: 0.65; } .pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event .pf-c-event__date, .pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event .pf-c-event__date p:where(.pf-c-event__day, .pf-c-event__month, .pf-c-event__year) { color: var(--pf-badge-text-color, var(--pf-badge-color, var(--pf-text-main-color, inherit))); font-weight: normal; } .pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date) { margin-bottom: 0.25rem; } .pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event .pf-c-event__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. */ .pf-c-page .pf-c-events:is([data-pf-layout="list"], [data-pf-layout="feature"]) .pf-c-event { flex-direction: column; align-items: stretch; } .pf-c-page .pf-c-events:is([data-pf-layout="list"], [data-pf-layout="feature"]) .pf-c-event .pf-c-event__date { justify-content: flex-start; min-width: 0; margin: 0 0 0.5rem; } .pf-c-page section:has([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) .pf-c-events:is([data-pf-layout="list"], [data-pf-layout="feature"]) .pf-c-event { align-items: center; text-align: center; } .pf-c-page section:has([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) .pf-c-events:is([data-pf-layout="list"], [data-pf-layout="feature"]) .pf-c-event :is(.pf-c-event__date, ul li:not(.pf-c-event__date)) { justify-content: center; } } } /* assets/css/public/design/elements/events/02-icon.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/2 de design/elements/events.css : composant « icon » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event ul li svg:where(.pf-c-icon), .pf-c-page .pf-c-events[data-pf-layout="minimal"] .pf-c-event .pf-c-event__open { display: none; } } /* assets/css/public/design/elements/services/01-service.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/6 de design/elements/services.css : composant « service » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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 : .pf-c-services__list[data-pf-services-layout] > article.pf-c-services__item(--popular) > .pf-c-service > __badge? + __header + __body + __footer (`cards` = rendu historique, services.css) ========================================================================== */ /* Gabarits à une offre par ligne */ .pf-c-page .pf-c-services__list:is([data-pf-services-layout="list"], [data-pf-services-layout="index"], [data-pf-services-layout="feature"]) { display: flex; flex-direction: column; gap: var(--layout-gap, 20px); } .pf-c-page .pf-c-services__list:is([data-pf-services-layout="list"], [data-pf-services-layout="index"], [data-pf-services-layout="feature"]) > .pf-c-services__item { flex: 0 0 auto; width: 100%; } /* Lignes : nom et prix à gauche, contenu au centre, bouton à droite */ .pf-c-page .pf-c-services__list[data-pf-services-layout="list"] .pf-c-service { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr) auto; align-items: center; gap: calc(2rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-services__list[data-pf-services-layout="list"] .pf-c-service__badge { grid-column: 1 / -1; justify-self: start; margin-bottom: 0; } .pf-c-page .pf-c-services__list[data-pf-services-layout="list"] :is(.pf-c-service__header, .pf-c-service__body) { margin: 0; padding: 0; border: 0; } .pf-c-page .pf-c-services__list[data-pf-services-layout="list"] .pf-c-service__footer { margin: 0; } /* Carte de restaurant : nom …… prix, contenu en petit, sans cadre */ .pf-c-page .pf-c-services__list[data-pf-services-layout="index"] { gap: calc(1.5rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service { padding: 0; } .pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-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; } .pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__header::after { content: ""; order: 1; flex: 1; border-bottom: max(2px, var(--pf-rule-width)) dotted currentColor; opacity: 0.4; } .pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__title { order: 0; margin: 0; } } /* assets/css/public/design/elements/services/02-price.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/6 de design/elements/services.css : composant « price » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-price { order: 2; } .pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-price__main { font-size: calc(var(--pf-font-size-base) * 1.3); } } /* assets/css/public/design/elements/services/03-service.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 3/6 de design/elements/services.css : composant « service » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__body { margin-bottom: 0.5rem; font-size: calc(var(--pf-font-size-base) * 0.9); opacity: 0.8; } .pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__features { display: flex; flex-wrap: wrap; gap: 0 calc(1.25rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__feature { margin-bottom: 0.25rem; } .pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service__badge { margin-bottom: 0.5rem; padding: calc(2px * var(--pf-badge-pad, 1)) calc(10px * var(--pf-badge-pad, 1)); } } /* assets/css/public/design/elements/services/04-btn.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 4/6 de design/elements/services.css : composant « btn » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-services__list[data-pf-services-layout="index"] .pf-c-btn--block { display: inline-block; width: auto; padding: calc(8px * var(--pf-density-pad, 1)) calc(18px * var(--pf-density-pad, 1)); } } /* assets/css/public/design/elements/services/05-service.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 5/6 de design/elements/services.css : composant « service » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Pleine largeur : bandeau par offre, prix en très grand */ .pf-c-page .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-service { 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)); } .pf-c-page .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-service__badge { grid-column: 1 / -1; justify-self: start; margin-bottom: 0; } .pf-c-page .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-service__header { grid-row: span 2; margin: 0; padding: 0; border: 0; } .pf-c-page .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-service__title { font-size: calc(var(--pf-font-size-base) * 2); } .pf-c-page .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-service__body { margin: 0; } /* Minimal : sans fond ni cadre, centré */ .pf-c-page .pf-c-services__list[data-pf-services-layout="minimal"] .pf-c-service { padding: calc(0.5rem * var(--pf-density-pad, 1)) 0; text-align: center; } .pf-c-page .pf-c-services__list[data-pf-services-layout="minimal"] .pf-c-service__header { text-align: center; } .pf-c-page .pf-c-services__list[data-pf-services-layout="minimal"] .pf-c-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. */ .pf-c-page .pf-c-services__list { display: grid; grid-template-columns: minmax(0, 1fr); } .pf-c-page .pf-c-services__list > .pf-c-services__item { 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. */ .pf-c-page .pf-c-services__list:is([data-pf-services-layout="list"], [data-pf-services-layout="feature"]) .pf-c-service { display: flex; flex-direction: column; align-items: stretch; gap: calc(1rem * var(--pf-density-gap, 1)); } } } /* assets/css/public/design/elements/services/06-price.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 6/6 de design/elements/services.css : composant « price » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-price__main { font-size: calc(var(--pf-font-size-base) * 3); } .pf-c-page .pf-c-services__list[data-pf-services-layout="minimal"] :is(.pf-c-price, .pf-c-service__feature) { justify-content: center; } } /* assets/css/public/design/elements/works/01-card.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/3 de design/elements/works.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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-pf-layout] sur chaque .pf-c-cards--works (productions, livres, discographie, projets, albums photo) : un seul design pour toutes les œuvres. Balisage : .pf-c-cards--works[data-pf-ratio] > a.pf-c-card--(landscape|portrait|square) > .pf-c-card__media + .pf-c-card__caption (`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. */ .pf-c-page .pf-c-cards--works[data-pf-layout]:where(:not([data-pf-layout="grid"])) { --pf-work-ratio: 2 / 3; --pf-work-thumb: 4.5rem; } /* Hors grille historique : la vignette prend sa hauteur du format de son type d'œuvre. */ .pf-c-page .pf-c-cards--works[data-pf-layout]:where(:not([data-pf-layout="grid"])) > a:where(.pf-c-card) { 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. */ .pf-c-page .pf-c-cards--works:is([data-pf-layout="list"], [data-pf-layout="minimal"]) :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) { --pf-thumbnail-overlay-title-color: var(--pf-ink); --pf-thumbnail-overlay-description-color: color-mix(in srgb, var(--pf-ink) 70%, transparent); --pf-thumbnail-overlay-text-shadow: none; position: static; background: none; } /* Liste illustrée : vignette à gauche, titre et sous-titre à droite */ .pf-c-page .pf-c-cards--works[data-pf-layout="list"] { grid-template-columns: minmax(0, 1fr); } .pf-c-page .pf-c-cards--works[data-pf-layout="list"] > a:where(.pf-c-card) { 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). */ .pf-c-page .pf-c-cards--works[data-pf-layout="list"] > a > .pf-c-card__media { position: relative; grid-row: 1; align-self: center; height: auto; aspect-ratio: var(--pf-work-ratio); } .pf-c-page .pf-c-cards--works[data-pf-layout="list"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) { 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 */ .pf-c-page .pf-c-cards--works[data-pf-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). */ .pf-c-page .pf-c-cards--works[data-pf-layout="mosaic"] > a:where(.pf-c-card):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é */ .pf-c-page .pf-c-cards--works[data-pf-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. */ .pf-c-page .pf-c-cards--works[data-pf-layout="carousel"] > a:where(.pf-c-card) { flex: 0 0 calc((100% - (var(--_thumbs) - 1) * var(--layout-gap, 20px)) / var(--_thumbs)); scroll-snap-align: start; } .pf-c-page [id^="home-section-"] .pf-c-cards--works[data-pf-layout="carousel"] > a:where(.pf-c-card) { 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. */ .pf-c-page .pf-c-cards--works[data-pf-layout="feature"] { grid-template-columns: repeat(max(1, calc(var(--_thumbs) - 1)), minmax(0, 1fr)); gap: calc(2rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-cards--works[data-pf-layout="feature"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) { padding: calc(3rem * var(--pf-density-pad, 1)) calc(2rem * var(--pf-density-pad, 1)) calc(2rem * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-cards--works[data-pf-layout="feature"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) h4:where(.pf-c-card__caption-title) { font-size: calc(var(--pf-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). */ .pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] { gap: calc(2rem * var(--pf-density-gap, 1)); padding: calc(0.75rem * var(--pf-density-pad, 1)); } /* Le cadre (bordures épaisses, bas plus large) mangerait le format : il est porté par l'image. */ .pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] > a:where(.pf-c-card) { aspect-ratio: auto; } .pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] > a > .pf-c-card__media { position: relative; height: auto; aspect-ratio: var(--pf-work-ratio); } .pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] > a:where(.pf-c-card) { background-clip: padding-box; transition: rotate 0.2s ease; } .pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] > a:where(.pf-c-card):nth-child(odd) { rotate: -1deg; } .pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] > a:where(.pf-c-card):nth-child(even) { rotate: 1deg; } .pf-c-page .pf-c-cards--works[data-pf-layout="polaroid"] > a:where(.pf-c-card):hover { rotate: 0deg; } } /* assets/css/public/design/elements/works/02-page.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/3 de design/elements/works.css : composant « page » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page [data-pf-ratio="landscape"][data-pf-layout]:where(:not([data-pf-layout="grid"])) { --pf-work-ratio: 2 / 1; --pf-work-thumb: 9rem; } .pf-c-page [data-pf-ratio="square"][data-pf-layout]:where(:not([data-pf-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). */ .pf-c-page [data-pf-ratio="portrait"][data-pf-layout="grid"] { --thumbs-xs: 1; } .pf-c-page [data-pf-ratio="landscape"][data-pf-layout="feature"] { grid-template-columns: minmax(0, 1fr); } .pf-c-page [data-pf-ratio="square"][data-pf-layout="polaroid"] { --thumbs-xs: 2; --thumbs-sm: 3; --thumbs-md: 3; --thumbs-lg: 4; --thumbs-xl: 4; } } /* assets/css/public/design/elements/works/03-card.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 3/3 de design/elements/works.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Planche contact : petites vignettes serrées, titre au survol */ .pf-c-page .pf-c-cards--works[data-pf-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-surface); } /* Index numéroté : numéro sur chaque vignette, titre toujours lisible. */ .pf-c-page .pf-c-cards--works[data-pf-layout="index"] { counter-reset: pf-work; } .pf-c-page .pf-c-cards--works[data-pf-layout="index"] > a:where(.pf-c-card) { position: relative; isolation: isolate; counter-increment: pf-work; } .pf-c-page .pf-c-cards--works[data-pf-layout="index"] > a:where(.pf-c-card)::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-accent); color: var(--pf-on-accent); font-size: 0.8rem; font-weight: 700; line-height: 1.4; } /* Titres seuls : liste typographique, filets entre les œuvres */ .pf-c-page .pf-c-cards--works[data-pf-layout="minimal"] { grid-template-columns: minmax(0, 1fr); gap: 0; } .pf-c-page .pf-c-cards--works[data-pf-layout="minimal"] > a:where(.pf-c-card) { aspect-ratio: auto; padding: calc(1rem * var(--pf-density-pad, 1)) 0; } .pf-c-page .pf-c-cards--works[data-pf-layout="minimal"] > a > :is(.pf-c-card__media, .pf-c-card__icon) { display: none; } .pf-c-page .pf-c-cards--works[data-pf-layout="minimal"] > a.pf-c-card--empty { background-image: none; } .pf-c-page .pf-c-cards--works[data-pf-layout="minimal"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) { padding: 0; } .pf-c-page .pf-c-cards--works[data-pf-layout="minimal"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) h4:where(.pf-c-card__caption-title) { font-size: calc(var(--pf-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. */ .pf-c-page [data-pf-ratio="landscape"][data-pf-layout="mosaic"] > a:where(.pf-c-card):nth-child(7n + 1) { grid-column: auto; grid-row: auto; aspect-ratio: var(--pf-work-ratio); } .pf-c-page [data-pf-ratio="landscape"][data-pf-layout="feature"] { --pf-work-ratio: 16 / 9; grid-template-columns: minmax(0, 1fr); } } } /* assets/css/public/design/elements/catalogue/01-card.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/10 de design/elements/catalogue.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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 ------------------------------------------------------------ */ .pf-c-page .pf-c-cards--articles[data-pf-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. */ .pf-c-page .pf-c-cards--articles:is([data-pf-layout="magazine"], [data-pf-layout="carousel"]) .pf-c-card__body { 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. */ .pf-c-page:has(header[data-articles-neighbor="1"]) .pf-c-section--alt .pf-c-cards--articles { --pf-surface: var(--pf-section-color-pair, var(--pf-theme-bg-alt, var(--pf-bg-alt-color, #e2e2e2))); } /* 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. */ .pf-c-page .pf-c-cards--articles:is([data-pf-layout="list"], [data-pf-layout="mosaic"], [data-pf-layout="feature"], [data-pf-layout="index"], [data-pf-layout="journal"], [data-pf-layout="reveal"]) .pf-c-card--tile .pf-c-card__media, .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] > :first-child .pf-c-card--tile .pf-c-card__media { border-radius: var(--pf-radius); } /* Polaroïd : image posée dans le cadre (pas contre le bord) : arrondie aux quatre coins. */ .pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] .pf-c-card--tile .pf-c-card__media { border-radius: var(--pf-radius-inner); } /* Page article : l'aside « Autres articles » reste sur une colonne. */ .pf-c-page .pf-c-article__aside .pf-c-cards--articles[data-pf-layout] { grid-template-columns: minmax(0, 1fr); } .pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] .pf-c-card--tile { padding: calc(0.75rem * var(--pf-density-pad, 1)) calc(0.75rem * var(--pf-density-pad, 1)) 0; rotate: -1.5deg; } .pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] > :nth-child(even) .pf-c-card--tile { rotate: 1.5deg; } .pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] .pf-c-card__body { 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 -------------------------------------------------------------- */ .pf-c-page .pf-c-cards--works:is([data-pf-layout="journal"], [data-pf-layout="reveal"]) :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) { --pf-thumbnail-overlay-title-color: var(--pf-ink); --pf-thumbnail-overlay-description-color: var(--pf-ink); } .pf-c-page .pf-c-cards--works:is([data-pf-layout="journal"], [data-pf-layout="reveal"]) :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) { --pf-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. */ .pf-c-page .pf-c-cards--works[data-pf-layout="bento"] > a:where(.pf-c-card) { position: relative; display: block; height: auto; aspect-ratio: var(--pf-work-ratio); overflow: hidden; padding: 0; } } /* assets/css/public/design/elements/catalogue/02-info.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/10 de design/elements/catalogue.css : composant « info » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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. */ .pf-c-page .pf-c-infos:is([data-pf-informations-layout="list"], [data-pf-informations-layout="journal"], [data-pf-informations-layout="index"], [data-pf-informations-layout="reveal"]) .pf-c-info__media, .pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info:first-child .pf-c-info__media { border-radius: var(--pf-radius); } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info__media { border-radius: 0; } } /* assets/css/public/design/elements/catalogue/03-card.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 3/10 de design/elements/catalogue.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-cards--works[data-pf-layout="bento"] > a > .pf-c-card__media { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: inherit; } .pf-c-page .pf-c-cards--works[data-pf-layout="bento"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) { --pf-thumbnail-overlay-title-color: var(--pf-title); --pf-thumbnail-overlay-description-color: var(--pf-text); --pf-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); } .pf-c-page .pf-c-cards--works[data-pf-layout="bento"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) h4:where(.pf-c-card__caption-title) { font-weight: 700; } .pf-c-page .pf-c-cards--works[data-pf-layout="bento"] > a:nth-child(7n + 1) :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) h4:where(.pf-c-card__caption-title) { 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) { .pf-c-page [data-pf-ratio="portrait"][data-pf-layout="mosaic"] > a:where(.pf-c-card):nth-child(7n + 1), .pf-c-page .pf-c-cards--works:is([data-pf-ratio="landscape"], [data-pf-ratio="square"])[data-pf-layout="mosaic"] > a:where(.pf-c-card):nth-child(7n + 1), .pf-c-page .pf-c-cards--works[data-pf-layout="bento"] > a:where(.pf-c-card):nth-child(7n + 1), .pf-c-page .pf-c-cards--works:is([data-pf-ratio="landscape"], [data-pf-ratio="square"])[data-pf-layout="magazine"] > a:where(.pf-c-card):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. */ .pf-c-page .pf-c-cards--works[data-pf-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); } .pf-c-page .pf-c-cards--works[data-pf-layout="magazine"] > a:where(.pf-c-card):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 */ .pf-c-page .pf-c-cards--works:is([data-pf-layout="journal"], [data-pf-layout="reveal"]) { grid-template-columns: minmax(0, 1fr); gap: 0; counter-reset: pf-work; } .pf-c-page .pf-c-cards--works:is([data-pf-layout="journal"], [data-pf-layout="reveal"]) > a:where(.pf-c-card) { display: grid; align-items: center; aspect-ratio: auto; counter-increment: pf-work; } .pf-c-page .pf-c-cards--works[data-pf-layout="journal"] > a:where(.pf-c-card) { 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)); } .pf-c-page .pf-c-cards--works[data-pf-layout="journal"] > a:where(.pf-c-card)::before { content: counter(pf-work, decimal-leading-zero); color: var(--pf-accent); font-size: 1.6em; font-weight: 700; } .pf-c-page .pf-c-cards--works[data-pf-layout="journal"] > a > .pf-c-card__media { position: relative; height: auto; aspect-ratio: var(--pf-work-ratio); border-radius: var(--pf-radius-inner); } .pf-c-page .pf-c-cards--works:is([data-pf-layout="journal"], [data-pf-layout="reveal"]) :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) { position: static; padding: 0; text-align: start; } /* Survol : petite vignette toujours visible (plus de ligne sans image). */ .pf-c-page .pf-c-cards--works[data-pf-layout="reveal"] > a > .pf-c-card__media { position: relative; inset: auto; display: block; height: auto; aspect-ratio: var(--pf-work-ratio); border-radius: var(--pf-radius-inner); } .pf-c-page .pf-c-cards--works[data-pf-layout="reveal"] { display: grid; grid-template-columns: minmax(0, 1fr); } .pf-c-page .pf-c-cards--works[data-pf-layout="reveal"] > a:where(.pf-c-card) { 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)); } .pf-c-page .pf-c-cards--works[data-pf-layout="reveal"] > a > .pf-c-card__media { width: 100%; transform-origin: left center; transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; } .pf-c-page .pf-c-cards--works[data-pf-layout="reveal"] :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) h4:where(.pf-c-card__caption-title) { font-size: calc(var(--pf-heading-secondary-size, 14px) * 1.6); } /* Survol : la vignette s'agrandit et passe au-dessus de la ligne. */ .pf-c-page .pf-c-cards--works[data-pf-layout="reveal"] > a:is(:hover, :focus-visible) > .pf-c-card__media { z-index: 2; scale: 1.9; box-shadow: var(--pf-drop-shadow); } } /* assets/css/public/design/elements/catalogue/04-gallery.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 4/10 de design/elements/catalogue.css : composant « gallery » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* --- Images -------------------------------------------------------------- */ .pf-c-page .pf-c-gallery:is([data-pf-layout="list"], [data-pf-layout="feature"]) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: calc(1.5rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-gallery:is([data-pf-layout="list"], [data-pf-layout="feature"]) > a:where(.pf-c-gallery__item) { 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). */ .pf-c-page .pf-c-gallery[data-pf-layout="feature"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-c-page .pf-c-gallery[data-pf-layout="list"] { max-width: min(100%, 32rem); margin-inline: auto; } .pf-c-page .pf-c-gallery:is([data-pf-layout="magazine"], [data-pf-layout="journal"], [data-pf-layout="minimal"], [data-pf-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)); } .pf-c-page .pf-c-gallery:is([data-pf-layout="magazine"], [data-pf-layout="journal"], [data-pf-layout="minimal"], [data-pf-layout="reveal"]) > a:where(.pf-c-gallery__item) { width: auto; height: auto; padding: 0; background-size: cover; background-position: center; } .pf-c-page .pf-c-gallery[data-pf-layout="magazine"] > a:where(.pf-c-gallery__item):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é. */ .pf-c-page .pf-c-gallery:is([data-pf-layout="mosaic"], [data-pf-layout="bento"], [data-pf-layout="magazine"], [data-pf-layout="journal"], [data-pf-layout="minimal"], [data-pf-layout="reveal"]) > a:where(.pf-c-gallery__item) { aspect-ratio: 1 / 1; height: auto; background-size: cover; background-position: center; } /* Journal : numéro de planche sur chaque image */ .pf-c-page .pf-c-gallery[data-pf-layout="journal"] { counter-reset: pf-image; } .pf-c-page .pf-c-gallery[data-pf-layout="journal"] > a:where(.pf-c-gallery__item) { position: relative; counter-increment: pf-image; } .pf-c-page .pf-c-gallery[data-pf-layout="journal"] > a:where(.pf-c-gallery__item)::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; } .pf-c-page .pf-c-gallery[data-pf-layout="minimal"] { gap: calc(2px * var(--pf-density-gap, 1)); } /* Survol : image toujours visible, elle s'avance au survol (zoom dans le cadre + ombre). */ .pf-c-page .pf-c-gallery[data-pf-layout="reveal"] > a:where(.pf-c-gallery__item) { background-size: 100%; transition: background-size 0.4s ease, box-shadow 0.3s ease; } .pf-c-page .pf-c-gallery[data-pf-layout="reveal"] > a:where(.pf-c-gallery__item):is(:hover, :focus-visible) { background-size: 112%; box-shadow: var(--pf-drop-shadow); } } /* assets/css/public/design/elements/catalogue/05-award.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 5/10 de design/elements/catalogue.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* --- Prix ---------------------------------------------------------------- */ .pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__item { 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)); } .pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__item:first-child { grid-column: 1 / -1; padding: calc(2rem * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__item:first-child .pf-c-awards__name { font-size: 1.8em; } .pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__index { color: var(--pf-title); font-weight: 700; } .pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__logo { max-height: 3.5rem; width: auto; align-self: flex-start; } /* Texte seul : les prix à la suite, séparés par un point */ .pf-c-page .pf-c-awards[data-pf-awards-layout="minimal"] { display: flex; flex-wrap: wrap; gap: calc(0.25rem * var(--pf-density-gap, 1)) 0; } .pf-c-page .pf-c-awards[data-pf-awards-layout="minimal"] :is(.pf-c-awards__index, .pf-c-awards__logo) { display: none; } .pf-c-page .pf-c-awards[data-pf-awards-layout="minimal"] .pf-c-awards__item:not(:last-child)::after { content: "·"; margin-inline: 0.75rem; opacity: 0.6; } /* Survol : noms en grand, logo révélé au survol */ .pf-c-page .pf-c-awards[data-pf-awards-layout="reveal"] .pf-c-awards__item { 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; } .pf-c-page .pf-c-awards[data-pf-awards-layout="reveal"] .pf-c-awards__name { font-size: 1.6em; } .pf-c-page .pf-c-awards[data-pf-awards-layout="reveal"] .pf-c-awards__logo { position: absolute; right: 0; top: 50%; max-height: 4rem; width: auto; opacity: 0; transform: translateY(-50%); transition: opacity 0.25s ease; } .pf-c-page .pf-c-awards[data-pf-awards-layout="reveal"] .pf-c-awards__item:hover .pf-c-awards__logo { opacity: 1; } } /* assets/css/public/design/elements/catalogue/06-service.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 6/10 de design/elements/catalogue.css : composant « service » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* --- Services ------------------------------------------------------------ */ .pf-c-page .pf-c-services__list:is([data-pf-services-layout="magazine"], [data-pf-services-layout="mosaic"], [data-pf-services-layout="bento"], [data-pf-services-layout="polaroid"]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--layout-gap, 20px); } .pf-c-page .pf-c-services__list:is([data-pf-services-layout="magazine"], [data-pf-services-layout="mosaic"], [data-pf-services-layout="bento"], [data-pf-services-layout="polaroid"]) > * { flex: none; width: auto; max-width: none; } /* Magazine : la première offre en bandeau, les autres dessous */ .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"] > :first-child { grid-column: 1 / -1; } .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"] > :first-child .pf-c-service { 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) { .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"]:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"]:has(> :nth-child(2):last-child) > :first-child { grid-column: auto; } .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"]:has(> :nth-child(2):last-child) > :first-child .pf-c-service { display: flex; flex-direction: column; align-items: stretch; gap: 0; } } /* Mosaïque : l'offre populaire prend deux lignes */ .pf-c-page .pf-c-services__list[data-pf-services-layout="mosaic"] { grid-auto-flow: dense; } .pf-c-page .pf-c-services__list[data-pf-services-layout="mosaic"] > .pf-c-services__item--popular { grid-row: span 2; } .pf-c-page .pf-c-services__list[data-pf-services-layout="mosaic"] > .pf-c-services__item--popular .pf-c-service { height: 100%; } .pf-c-page .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service { height: 100%; } .pf-c-page .pf-c-services__list[data-pf-services-layout="polaroid"] .pf-c-service { padding-bottom: calc(2rem * var(--pf-density-pad, 1)); rotate: -1.2deg; } .pf-c-page .pf-c-services__list[data-pf-services-layout="polaroid"] > :nth-child(even) .pf-c-service { rotate: 1.2deg; } /* Journal / survol : une offre par ligne */ .pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) { display: flex; flex-direction: column; gap: 0; counter-reset: pf-service; } .pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) > * { flex: none; width: auto; max-width: none; } .pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-service { 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; } .pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-service::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. */ .pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-service__badge { grid-column: 2 / -1; grid-row: 1; justify-self: start; margin: 0; transform: none; } .pf-c-page .pf-c-services__list[data-pf-services-layout="journal"] .pf-c-service:has(> .pf-c-service__badge)::before { grid-row: 1 / span 2; } .pf-c-page .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-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. */ .pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-service__header { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-service { border-bottom: var(--pf-rule-width) solid var(--pf-rule-color); } .pf-c-page .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service::before { content: none; } .pf-c-page .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service { grid-template-columns: minmax(0, 1fr) auto; } .pf-c-page .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service__body { display: none; grid-column: 1 / -1; } .pf-c-page .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service:is(:hover, :focus-within) .pf-c-service__body { display: block; } .pf-c-page .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service__title { font-size: 1.5em; } /* Défilement horizontal */ .pf-c-page .pf-c-services__list[data-pf-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; } } /* assets/css/public/design/elements/catalogue/07-btn.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 7/10 de design/elements/catalogue.css : composant « btn » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-btn--block { width: auto; white-space: nowrap; } } /* assets/css/public/design/elements/catalogue/08-service.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 8/10 de design/elements/catalogue.css : composant « service » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-services__list[data-pf-services-layout="carousel"] > * { flex: 0 0 clamp(15rem, 30vw, 21rem); max-width: none; scroll-snap-align: start; } } /* assets/css/public/design/elements/catalogue/09-event.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 9/10 de design/elements/catalogue.css : composant « event » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* --- Agenda -------------------------------------------------------------- */ .pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"], [data-pf-layout="polaroid"]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--layout-gap, 20px); } .pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"], [data-pf-layout="polaroid"], [data-pf-layout="carousel"]) .pf-c-event { flex-direction: column; gap: calc(1rem * var(--pf-density-gap, 1)); margin: 0; padding: calc(1.25rem * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"], [data-pf-layout="polaroid"], [data-pf-layout="carousel"]) .pf-c-event .pf-c-event__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(--pf-badge-pad, 1)) calc(0.75rem * var(--pf-badge-pad, 1)); align-self: flex-start; } .pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"]) .pf-c-event:first-child { grid-column: span 2; grid-row: span 2; justify-content: flex-end; padding: calc(2rem * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"]) .pf-c-event:first-child h3:where(.pf-c-event__title) { font-size: 1.8em; } .pf-c-page .pf-c-events[data-pf-layout="magazine"] .pf-c-event:first-child { grid-column: 1 / -1; grid-row: auto; } .pf-c-page .pf-c-events[data-pf-layout="mosaic"] { grid-auto-flow: dense; } .pf-c-page .pf-c-events[data-pf-layout="polaroid"] .pf-c-event { padding-bottom: calc(2rem * var(--pf-density-pad, 1)); rotate: -1.2deg; } .pf-c-page .pf-c-events[data-pf-layout="polaroid"] .pf-c-event:nth-child(even) { rotate: 1.2deg; } /* Index numéroté : tableau numéro · date · titre */ .pf-c-page .pf-c-events[data-pf-layout="index"] { counter-reset: pf-event; } .pf-c-page .pf-c-events[data-pf-layout="index"] .pf-c-event { 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; } .pf-c-page .pf-c-events[data-pf-layout="index"] .pf-c-event::before { content: counter(pf-event, decimal-leading-zero); min-width: 2.5rem; color: var(--pf-accent); font-weight: 700; } .pf-c-page .pf-c-events[data-pf-layout="index"] .pf-c-event .pf-c-event__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; } .pf-c-page .pf-c-events[data-pf-layout="index"] .pf-c-event .pf-c-event__date, .pf-c-page .pf-c-events[data-pf-layout="index"] .pf-c-event .pf-c-event__date p:where(.pf-c-event__day, .pf-c-event__month, .pf-c-event__year) { color: var(--pf-badge-text-color, var(--pf-badge-color, var(--pf-accent))); } /* Défilement horizontal */ .pf-c-page .pf-c-events[data-pf-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; } .pf-c-page .pf-c-events[data-pf-layout="carousel"] .pf-c-event { flex: 0 0 clamp(15rem, 30vw, 20rem); scroll-snap-align: start; } /* Survol : titres en grand, détails au survol */ .pf-c-page .pf-c-events[data-pf-layout="reveal"] .pf-c-event { 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)); } .pf-c-page .pf-c-events[data-pf-layout="reveal"] .pf-c-event .pf-c-event__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; } .pf-c-page .pf-c-events[data-pf-layout="reveal"] .pf-c-event .pf-c-event__date, .pf-c-page .pf-c-events[data-pf-layout="reveal"] .pf-c-event .pf-c-event__date p:where(.pf-c-event__day, .pf-c-event__month, .pf-c-event__year) { color: var(--pf-badge-text-color, var(--pf-badge-color, var(--pf-accent))); } .pf-c-page .pf-c-events[data-pf-layout="reveal"] h3:where(.pf-c-event__title) { font-size: 1.6em; } .pf-c-page .pf-c-events[data-pf-layout="reveal"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child) { display: none; } .pf-c-page .pf-c-events[data-pf-layout="reveal"] .pf-c-event:is(:hover, :focus-visible) ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child) { display: list-item; } } /* assets/css/public/design/elements/catalogue/10-card.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 10/10 de design/elements/catalogue.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @media (max-width: 1100px) { /* Œuvres : colonnes de grid.css (--_thumbs) à tous les paliers ; vignette du journal réduite, format gardé. */ .pf-c-page .pf-c-cards--works[data-pf-layout="journal"] > a:where(.pf-c-card) { grid-template-columns: 3rem calc(var(--pf-work-thumb) * 0.75) minmax(0, 1fr); } .pf-c-page .pf-c-gallery:is([data-pf-layout="magazine"], [data-pf-layout="journal"], [data-pf-layout="minimal"], [data-pf-layout="reveal"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; } .pf-c-page .pf-c-gallery[data-pf-layout="feature"] { grid-template-columns: minmax(0, 1fr); } .pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] { grid-template-columns: minmax(0, 1fr); } .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"] > :first-child .pf-c-service, .pf-c-page .pf-c-services__list:is([data-pf-services-layout="journal"], [data-pf-services-layout="reveal"]) .pf-c-service { display: flex; flex-direction: column; align-items: stretch; } .pf-c-page .pf-c-services__list[data-pf-services-layout="mosaic"] > .pf-c-services__item--popular { grid-row: auto; } /* Une offre par ligne (services.css le pose pour tous les gabarits, ces trois colonnes l'emportaient). */ .pf-c-page .pf-c-services__list:is([data-pf-services-layout="magazine"], [data-pf-services-layout="mosaic"], [data-pf-services-layout="bento"], [data-pf-services-layout="polaroid"]) { grid-template-columns: minmax(0, 1fr); } .pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"], [data-pf-layout="polaroid"]) { grid-template-columns: minmax(0, 1fr); } .pf-c-page .pf-c-events:is([data-pf-layout="magazine"], [data-pf-layout="mosaic"]) .pf-c-event:first-child { grid-column: auto; grid-row: auto; } .pf-c-page .pf-c-events:is([data-pf-layout="index"], [data-pf-layout="reveal"]) .pf-c-event { 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/01-award.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/13 de design/elements/cards.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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. */ .pf-c-page :is( .pf-c-cards--articles[data-pf-layout="magazine"] .pf-c-card--tile, .pf-c-cards--articles[data-pf-layout="carousel"] .pf-c-card--tile, .pf-c-cards--works[data-pf-layout="magazine"] > a, .pf-c-cards--works[data-pf-layout="carousel"] > a, .pf-c-gallery[data-pf-layout="magazine"] > a, .pf-c-gallery[data-pf-layout="carousel"] > a, .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__item, .pf-c-awards[data-pf-awards-layout="carousel"] .pf-c-awards__item, .pf-c-events[data-pf-layout="magazine"] .pf-c-event, .pf-c-events[data-pf-layout="carousel"] .pf-c-event, .pf-c-services__list[data-pf-services-layout="magazine"] .pf-c-service, .pf-c-services__list[data-pf-services-layout="carousel"] .pf-c-service, .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info, .pf-c-infos[data-pf-informations-layout="carousel"] .pf-c-info, [data-pf-recommendations-layout="carousel"] .pf-c-quote ) { border: var(--pf-border); border-radius: var(--pf-radius); background: var(--pf-surface); box-shadow: var(--pf-shadow), var(--pf-theme-shadow); } } /* assets/css/public/design/elements/cards/02-embed.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/13 de design/elements/cards.css : composant « embed » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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). */ .pf-c-page .pf-c-embed { overflow: hidden; } .pf-c-page .pf-c-embed > iframe { display: block; border: 0; } } /* assets/css/public/design/elements/cards/03-timeline.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 3/13 de design/elements/cards.css : composant « timeline » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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(--pf-set-title-transform, …) et garde donc le réglage prioritaire. */ .pf-c-page :where(.pf-c-card__title, .pf-c-event h3, .pf-c-service__title, .pf-c-awards__name, .pf-c-info__title, .pf-c-timeline:not(.pf-c-timeline--casting) .pf-c-timeline__title, .pf-c-casting-block__title, .pf-c-card__caption h4) { text-transform: var(--pf-set-title-transform); } } /* assets/css/public/design/elements/cards/04-award.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 4/13 de design/elements/cards.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Bento : compartiments teintés tour à tour (--pf-tint-1..4), soulevés au survol. */ .pf-c-page :is( .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card--tile, .pf-c-cards--works[data-pf-layout="bento"] > a, .pf-c-gallery[data-pf-layout="bento"] > a, .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__item, .pf-c-events[data-pf-layout="bento"] .pf-c-event, .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service, .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info, [data-pf-recommendations-layout="bento"] .pf-c-quote ) { --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; } .pf-c-page :is( .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card--tile, .pf-c-cards--works[data-pf-layout="bento"] > a, .pf-c-gallery[data-pf-layout="bento"] > a, .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__item, .pf-c-events[data-pf-layout="bento"] .pf-c-event, .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service, .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info, [data-pf-recommendations-layout="bento"] .pf-c-quote ):hover { box-shadow: var(--pf-shadow), var(--pf-drop-shadow); } } /* assets/css/public/design/elements/cards/05-quote.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 5/13 de design/elements/cards.css : composant « quote » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page :is( .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(4n + 2) .pf-c-card--tile, .pf-c-cards--works[data-pf-layout="bento"] > a:nth-child(4n + 2), .pf-c-gallery[data-pf-layout="bento"] > a:nth-child(4n + 2), .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__item:nth-child(4n + 2), .pf-c-events[data-pf-layout="bento"] .pf-c-event:nth-child(4n + 2), .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service:nth-child(4n + 2), .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info:nth-child(4n + 2), [data-pf-recommendations-layout="bento"] .pf-c-quote:nth-child(4n + 2) ) { --pf-tile: var(--pf-tint-2); } .pf-c-page :is( .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(4n + 3) .pf-c-card--tile, .pf-c-cards--works[data-pf-layout="bento"] > a:nth-child(4n + 3), .pf-c-gallery[data-pf-layout="bento"] > a:nth-child(4n + 3), .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__item:nth-child(4n + 3), .pf-c-events[data-pf-layout="bento"] .pf-c-event:nth-child(4n + 3), .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service:nth-child(4n + 3), .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info:nth-child(4n + 3), [data-pf-recommendations-layout="bento"] .pf-c-quote:nth-child(4n + 3) ) { --pf-tile: var(--pf-tint-3); } .pf-c-page :is( .pf-c-cards--articles[data-pf-layout="bento"] > :nth-child(4n + 4) .pf-c-card--tile, .pf-c-cards--works[data-pf-layout="bento"] > a:nth-child(4n + 4), .pf-c-gallery[data-pf-layout="bento"] > a:nth-child(4n + 4), .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__item:nth-child(4n + 4), .pf-c-events[data-pf-layout="bento"] .pf-c-event:nth-child(4n + 4), .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service:nth-child(4n + 4), .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info:nth-child(4n + 4), [data-pf-recommendations-layout="bento"] .pf-c-quote:nth-child(4n + 4) ) { --pf-tile: var(--pf-tint-4); } .pf-c-page [data-pf-recommendations-layout="bento"] .pf-c-quote:is(.pf-c-timeline__card, .pf-c-quote, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-offer, .pf-c-person__button, .pf-c-faq__item, .pf-c-invitation) { --pf-card-bg: var(--pf-tile); } /* Sans fond (lignes, texte seul, grand format) : texte aux couleurs de la page. */ .pf-c-page :is( [data-pf-timeline-layout]:is([data-pf-timeline-layout="index"], [data-pf-timeline-layout="journal"], [data-pf-timeline-layout="minimal"]) .pf-c-timeline__card, [data-pf-casting-layout]:is([data-pf-casting-layout="index"], [data-pf-casting-layout="minimal"], [data-pf-casting-layout="magazine"], [data-pf-casting-layout="journal"]) :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card), [data-pf-recommendations-layout]:is([data-pf-recommendations-layout="feature"], [data-pf-recommendations-layout="minimal"]) .pf-c-quote ):is(.pf-c-timeline__card, .pf-c-quote, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-offer, .pf-c-person__button, .pf-c-faq__item, .pf-c-invitation) { --pf-card-bg: transparent; --pf-card-text: var(--pf-ink); } } /* assets/css/public/design/elements/cards/06-card.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 6/13 de design/elements/cards.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Bento : l'image remplit la tuile, la carte (overflow: hidden) la rogne à ses coins. */ .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card--tile .pf-c-card__media { border-radius: var(--pf-radius-inner); } /* 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. */ .pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] .pf-c-card__title, .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] .pf-c-card__title, .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] .pf-c-card__title, .pf-c-page .pf-c-cards--articles[data-pf-layout="carousel"] .pf-c-card__title, .pf-c-page .pf-c-services__list[data-pf-services-layout="grid"] .pf-c-service__title, .pf-c-page .pf-c-services__list[data-pf-services-layout="grid"] .pf-c-price__main:not(.pf-c-price__main--promo), .pf-c-page .pf-c-services__list[data-pf-services-layout="polaroid"] .pf-c-service__title, .pf-c-page .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-service__title, .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"] .pf-c-service__title, .pf-c-page .pf-c-services__list[data-pf-services-layout="carousel"] .pf-c-service__title, .pf-c-page .pf-c-services__list[data-pf-services-layout="polaroid"] .pf-c-price__main:not(.pf-c-price__main--promo), .pf-c-page .pf-c-services__list[data-pf-services-layout="bento"] .pf-c-price__main:not(.pf-c-price__main--promo), .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"] .pf-c-price__main:not(.pf-c-price__main--promo), .pf-c-page .pf-c-services__list[data-pf-services-layout="carousel"] .pf-c-price__main:not(.pf-c-price__main--promo), .pf-c-page .pf-c-events[data-pf-layout="polaroid"] .pf-c-event h3:where(.pf-c-event__title), .pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event h3:where(.pf-c-event__title), .pf-c-page .pf-c-events[data-pf-layout="magazine"] .pf-c-event h3:where(.pf-c-event__title), .pf-c-page .pf-c-events[data-pf-layout="carousel"] .pf-c-event h3:where(.pf-c-event__title), .pf-c-page .pf-c-awards[data-pf-awards-layout="polaroid"] .pf-c-awards__name, .pf-c-page .pf-c-awards[data-pf-awards-layout="bento"] .pf-c-awards__name, .pf-c-page .pf-c-awards[data-pf-awards-layout="magazine"] .pf-c-awards__name, .pf-c-page .pf-c-awards[data-pf-awards-layout="carousel"] .pf-c-awards__name, .pf-c-page .pf-c-infos[data-pf-informations-layout="polaroid"] .pf-c-info__title, .pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info__title, .pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info__title, .pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote__author cite:where(.pf-c-quote__cite), .pf-c-page [data-pf-recommendations-layout="bento"] .pf-c-quote__author cite:where(.pf-c-quote__cite), .pf-c-page [data-pf-recommendations-layout="carousel"] .pf-c-quote__author cite:where(.pf-c-quote__cite), .pf-c-page .pf-c-infos[data-pf-informations-layout="carousel"] .pf-c-info__title { color: var(--pf-title); } .pf-c-page .pf-c-cards--articles[data-pf-layout="polaroid"] :is(.pf-c-card__meta, .pf-c-card__excerpt, .pf-c-card__date), .pf-c-page .pf-c-cards--articles[data-pf-layout="bento"] :is(.pf-c-card__meta, .pf-c-card__excerpt, .pf-c-card__date), .pf-c-page .pf-c-cards--articles[data-pf-layout="magazine"] :is(.pf-c-card__meta, .pf-c-card__excerpt, .pf-c-card__date), .pf-c-page .pf-c-cards--articles[data-pf-layout="carousel"] :is(.pf-c-card__meta, .pf-c-card__excerpt, .pf-c-card__date), .pf-c-page .pf-c-services__list[data-pf-services-layout="grid"] :is(.pf-c-service__body, .pf-c-service__feature, .pf-c-price__old, .pf-c-price__detail), .pf-c-page .pf-c-events[data-pf-layout="grid"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child), .pf-c-page .pf-c-services__list[data-pf-services-layout="polaroid"] :is(.pf-c-service__body, .pf-c-service__feature, .pf-c-price__old, .pf-c-price__detail), .pf-c-page .pf-c-services__list[data-pf-services-layout="bento"] :is(.pf-c-service__body, .pf-c-service__feature, .pf-c-price__old, .pf-c-price__detail), .pf-c-page .pf-c-services__list[data-pf-services-layout="magazine"] :is(.pf-c-service__body, .pf-c-service__feature, .pf-c-price__old, .pf-c-price__detail), .pf-c-page .pf-c-services__list[data-pf-services-layout="carousel"] :is(.pf-c-service__body, .pf-c-service__feature, .pf-c-price__old, .pf-c-price__detail), .pf-c-page .pf-c-events[data-pf-layout="polaroid"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child), .pf-c-page .pf-c-events[data-pf-layout="bento"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child), .pf-c-page .pf-c-events[data-pf-layout="magazine"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child), .pf-c-page .pf-c-events[data-pf-layout="carousel"] .pf-c-event ul li:where(.pf-c-event__item):not(.pf-c-event__date):not(:first-child), .pf-c-page .pf-c-infos[data-pf-informations-layout="polaroid"] .pf-c-info__description, .pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info__description, .pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info__description, .pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote__text, .pf-c-page [data-pf-recommendations-layout="bento"] .pf-c-quote__text, .pf-c-page [data-pf-recommendations-layout="carousel"] .pf-c-quote__text, .pf-c-page .pf-c-infos[data-pf-informations-layout="carousel"] .pf-c-info__description { color: var(--pf-text); } } /* assets/css/public/design/elements/cards/07-award.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 7/13 de design/elements/cards.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Polaroïd : cadre couleur des contenus (+ épaisseur de l'utilisateur), bas plus large. */ .pf-c-page :is( .pf-c-cards--articles[data-pf-layout="polaroid"] .pf-c-card--tile, .pf-c-cards--works[data-pf-layout="polaroid"] > a, .pf-c-gallery[data-pf-layout="polaroid"] > a, .pf-c-awards[data-pf-awards-layout="polaroid"] .pf-c-awards__item, .pf-c-events[data-pf-layout="polaroid"] .pf-c-event, .pf-c-services__list[data-pf-services-layout="polaroid"] .pf-c-service, .pf-c-infos[data-pf-informations-layout="polaroid"] .pf-c-info, [data-pf-recommendations-layout="polaroid"] .pf-c-quote ) { --pf-theme-shadow: var(--pf-drop-shadow); border: calc(10px + var(--pf-border-width)) solid var(--pf-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. */ .pf-c-page :is( .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card--tile, .pf-c-cards--articles[data-pf-layout="feature"] .pf-c-card--tile, .pf-c-cards--works[data-pf-layout="mosaic"] > a, .pf-c-cards--works[data-pf-layout="feature"] > a, .pf-c-cards--works[data-pf-layout="index"] > a, .pf-c-gallery[data-pf-layout="mosaic"] > a, .pf-c-gallery[data-pf-layout="feature"] > a, .pf-c-gallery[data-pf-layout="index"] > a, .pf-c-awards[data-pf-awards-layout="mosaic"] .pf-c-awards__item, .pf-c-awards[data-pf-awards-layout="feature"] .pf-c-awards__item, .pf-c-events[data-pf-layout="mosaic"] .pf-c-event, .pf-c-events[data-pf-layout="feature"] .pf-c-event, .pf-c-services__list[data-pf-services-layout="mosaic"] .pf-c-service, .pf-c-services__list[data-pf-services-layout="feature"] .pf-c-service, .pf-c-infos[data-pf-informations-layout="mosaic"] .pf-c-info, .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info, [data-pf-recommendations-layout="feature"] .pf-c-quote ) { border: var(--pf-border); border-radius: var(--pf-radius); background-color: transparent; box-shadow: var(--pf-shadow), var(--pf-theme-shadow); } } /* assets/css/public/design/elements/cards/08-detail.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 8/13 de design/elements/cards.css : composant « detail » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Lignes (liste, index, journal) : filet de séparation des sections, pas de fond. */ .pf-c-page :is( .pf-c-cards--articles[data-pf-layout="list"] .pf-c-card--tile, .pf-c-cards--articles[data-pf-layout="index"] .pf-c-card--tile, .pf-c-cards--articles[data-pf-layout="journal"] .pf-c-card--tile, .pf-c-cards--works[data-pf-layout="list"] > a, .pf-c-cards--works[data-pf-layout="journal"] > a, .pf-c-gallery[data-pf-layout="list"] > a, .pf-c-gallery[data-pf-layout="journal"] > a, .pf-c-awards[data-pf-awards-layout="list"] .pf-c-awards__item, .pf-c-awards[data-pf-awards-layout="index"] .pf-c-awards__item, .pf-c-awards[data-pf-awards-layout="journal"] .pf-c-awards__item, .pf-c-events[data-pf-layout="list"] .pf-c-event, .pf-c-events[data-pf-layout="index"] .pf-c-event, .pf-c-events[data-pf-layout="journal"] .pf-c-event, .pf-c-services__list[data-pf-services-layout="list"] .pf-c-service, .pf-c-services__list[data-pf-services-layout="index"] .pf-c-service, .pf-c-services__list[data-pf-services-layout="journal"] .pf-c-service, .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info, .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info, .pf-c-infos[data-pf-informations-layout="journal"] .pf-c-info, [data-pf-timeline-layout="index"] .pf-c-timeline__card, [data-pf-timeline-layout="journal"] .pf-c-timeline__card, [data-pf-casting-layout="index"] :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card), [data-pf-casting-layout="journal"] :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card) ) { border: 0; border-bottom: var(--pf-rule-width) solid var(--pf-rule-color); border-radius: 0; background-color: transparent; box-shadow: none; } } /* assets/css/public/design/elements/cards/09-award.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 9/13 de design/elements/cards.css : composant « award » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Texte seul / titres au survol : ni contour ni fond. */ .pf-c-page :is( .pf-c-cards--articles[data-pf-layout="minimal"] .pf-c-card--tile, .pf-c-cards--articles[data-pf-layout="reveal"] .pf-c-card--tile, .pf-c-cards--works[data-pf-layout="minimal"] > a, .pf-c-cards--works[data-pf-layout="reveal"] > a, .pf-c-gallery[data-pf-layout="minimal"] > a, .pf-c-gallery[data-pf-layout="reveal"] > a, .pf-c-awards[data-pf-awards-layout="minimal"] .pf-c-awards__item, .pf-c-awards[data-pf-awards-layout="reveal"] .pf-c-awards__item, .pf-c-events[data-pf-layout="minimal"] .pf-c-event, .pf-c-events[data-pf-layout="reveal"] .pf-c-event, .pf-c-services__list[data-pf-services-layout="minimal"] .pf-c-service, .pf-c-services__list[data-pf-services-layout="reveal"] .pf-c-service, .pf-c-infos[data-pf-informations-layout="minimal"] .pf-c-info, .pf-c-infos[data-pf-informations-layout="reveal"] .pf-c-info, [data-pf-timeline-layout="minimal"] .pf-c-timeline__card, [data-pf-recommendations-layout="minimal"] .pf-c-quote ) { border: 0; border-radius: 0; background-color: transparent; box-shadow: none; } } /* assets/css/public/design/elements/cards/10-detail.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 10/13 de design/elements/cards.css : composant « detail » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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. */ .pf-c-page [data-pf-casting-layout="minimal"] :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card), .pf-c-page [data-pf-casting-layout="magazine"] :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card) { border: 0; border-radius: 0; background-color: transparent; box-shadow: none; } /* 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é. */ .pf-c-page :is( [data-pf-timeline-layout] .pf-c-timeline__card, [data-pf-casting-layout] :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card), [data-pf-recommendations-layout] .pf-c-quote ):is(.pf-c-timeline__card, .pf-c-quote, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-offer, .pf-c-person__button, .pf-c-faq__item, .pf-c-invitation) { --pf-theme-bg-main: var(--pf-card-bg, var(--pf-surface)); --pf-body-text-color: var(--pf-card-text, var(--pf-text)); } } /* assets/css/public/design/elements/cards/11-info.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 11/13 de design/elements/cards.css : composant « info » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Un seul contour : celui de la carte. Les contours historiques posés à l'intérieur de la carte (autrefois .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. */ .pf-c-page :is( .pf-c-cards--articles[data-pf-layout]:not([data-pf-layout="grid"]) .pf-c-card--tile, .pf-c-cards--works[data-pf-layout]:not([data-pf-layout="grid"]) > a, .pf-c-gallery[data-pf-layout]:not([data-pf-layout="grid"]) > a, .pf-c-awards[data-pf-awards-layout]:not([data-pf-awards-layout="grid"]) .pf-c-awards__item, .pf-c-events[data-pf-layout]:not([data-pf-layout="grid"]) .pf-c-event, .pf-c-services__list[data-pf-services-layout]:not([data-pf-services-layout="grid"]) .pf-c-service, .pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) .pf-c-info ) :is(.pf-c-info__media--inherit-design) { border: 0; box-shadow: none; } @layer general { .pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) .pf-c-info { box-sizing: border-box; } } .pf-c-page .pf-c-infos:is([data-pf-informations-layout="polaroid"], [data-pf-informations-layout="bento"], [data-pf-informations-layout="magazine"], [data-pf-informations-layout="carousel"]) .pf-c-info { padding: calc(1rem * var(--pf-density-pad, 1)) calc(1.1rem * var(--pf-density-pad, 1)); } } /* assets/css/public/design/elements/cards/12-event.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 12/13 de design/elements/cards.css : composant « event » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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. */ .pf-c-page :is( .pf-c-cards--articles:is([data-pf-layout="mosaic"], [data-pf-layout="feature"], [data-pf-layout="list"], [data-pf-layout="index"], [data-pf-layout="journal"], [data-pf-layout="minimal"], [data-pf-layout="reveal"]) .pf-c-card--tile, .pf-c-events:is([data-pf-layout="mosaic"], [data-pf-layout="feature"], [data-pf-layout="list"], [data-pf-layout="index"], [data-pf-layout="journal"], [data-pf-layout="minimal"], [data-pf-layout="reveal"]) .pf-c-event ) { --pf-card-title: var(--pf-heading-secondary-color, var(--pf-ink)); } } /* assets/css/public/design/elements/cards/13-gallery.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 13/13 de design/elements/cards.css : composant « gallery » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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). */ .pf-c-page .pf-c-gallery[data-pf-layout][data-pf-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. */ .pf-c-page .pf-c-gallery:is([data-pf-layout="magazine"], [data-pf-layout="carousel"], [data-pf-layout="bento"])[data-pf-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). */ .pf-c-page .pf-c-gallery:is([data-pf-layout="magazine"], [data-pf-layout="carousel"], [data-pf-layout="bento"])[data-pf-layout] > a[href] { position: relative; background-image: none; } .pf-c-page .pf-c-gallery:is([data-pf-layout="magazine"], [data-pf-layout="carousel"], [data-pf-layout="bento"])[data-pf-layout] > a[href] > img:where(.pf-c-gallery__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); } .pf-c-page .pf-c-gallery[data-pf-layout="polaroid"][data-pf-layout] > a[href] { background-clip: padding-box; background-origin: padding-box; } } /* 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-pf-timeline-layout] (posé sur la section) « list » = frise historique (experiences.css), non touchée ici. ========================================================================== */ /* Sans frise : ni filet vertical ni pastille. */ .pf-c-page [data-pf-timeline-layout]:not([data-pf-timeline-layout="list"]) .pf-c-timeline::before, .pf-c-page [data-pf-timeline-layout]:not([data-pf-timeline-layout="list"]) .pf-c-timeline__dot { display: none; } /* Index : tableau compact, dates en chasse fixe à gauche. */ .pf-c-page [data-pf-timeline-layout="index"] .pf-c-timeline__entry { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 calc(1rem * var(--pf-density-gap, 1)); } .pf-c-page [data-pf-timeline-layout="index"] .pf-c-timeline__year { font-family: var(--pf-mono); font-variant-numeric: tabular-nums; } .pf-c-page [data-pf-timeline-layout="index"] .pf-c-timeline__card { padding: calc(0.6rem * var(--pf-density-pad, 1)) 0; } /* Journal : grande date en exergue au-dessus de l'entrée. */ .pf-c-page [data-pf-timeline-layout="journal"] .pf-c-timeline__entry { grid-template-columns: minmax(0, 1fr); } .pf-c-page [data-pf-timeline-layout="journal"] .pf-c-timeline__axis { justify-content: flex-start; } .pf-c-page [data-pf-timeline-layout="journal"] .pf-c-timeline__year { font-size: 2em; font-weight: 500; line-height: 1.1; } .pf-c-page [data-pf-timeline-layout="journal"] .pf-c-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). */ .pf-c-page [data-pf-timeline-layout]:not([data-pf-timeline-layout="list"], [data-pf-timeline-layout="index"]) .pf-c-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. */ .pf-c-page :is([data-pf-timeline-layout="index"], [data-pf-timeline-layout="journal"], [data-pf-timeline-layout="minimal"]) .pf-c-timeline__year:not(.pf-c-timeline__year--nodate) { padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--pf-heading-primary-color, inherit); } /* Texte seul : date au-dessus, aucune carte. */ .pf-c-page [data-pf-timeline-layout="minimal"] .pf-c-timeline__entry { grid-template-columns: minmax(0, 1fr); } .pf-c-page [data-pf-timeline-layout="minimal"] .pf-c-timeline__axis { justify-content: flex-start; opacity: 0.7; } .pf-c-page [data-pf-timeline-layout="minimal"] .pf-c-timeline__card { padding: 0 0 calc(1rem * var(--pf-density-pad, 1)); } @media (max-width: 1100px) { .pf-c-page [data-pf-timeline-layout="index"] .pf-c-timeline__entry { grid-template-columns: 4.5rem minmax(0, 1fr); } } } /* assets/css/public/design/elements/recommendations/01-quote.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/2 de design/elements/recommendations.css : composant « quote » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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-pf-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. */ .pf-c-page [data-pf-recommendations-layout="feature"] .pf-c-quotes { --cols: 1; --cols-md: 1; --cols-sm: 1; } .pf-c-page [data-pf-recommendations-layout="feature"] .pf-c-quote__header { flex-direction: column; align-items: center; text-align: center; } .pf-c-page [data-pf-recommendations-layout="feature"] .pf-c-quote__text { 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. */ .pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quotes { --cols: 3; --cols-md: 2; --cols-sm: 1; } .pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote__header { flex-direction: column; align-items: stretch; text-align: center; } .pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote:nth-child(odd) { transform: rotate(-1.2deg); } .pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote:nth-child(even) { transform: rotate(1deg); } /* Défilement : une rangée qui glisse, une citation calée à la fois. */ .pf-c-page [data-pf-recommendations-layout="carousel"] .pf-c-quotes { 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)); } .pf-c-page [data-pf-recommendations-layout="carousel"] .pf-c-quote { scroll-snap-align: start; } /* Bento : une citation sur trois en double largeur. */ .pf-c-page [data-pf-recommendations-layout="bento"] .pf-c-quotes { --cols: 3; --cols-md: 2; --cols-sm: 1; } .pf-c-page [data-pf-recommendations-layout="bento"] .pf-c-quote:nth-child(3n + 1) { grid-column: span 2; } /* Texte seul : citation en italique, filet d'accent à gauche. */ .pf-c-page [data-pf-recommendations-layout="minimal"] .pf-c-quote__body { padding-left: calc(1rem * var(--pf-density-pad, 1)); border-left: max(2px, var(--pf-border-width, 2px)) solid var(--pf-rule-color); } .pf-c-page [data-pf-recommendations-layout="minimal"] .pf-c-quote__text { font-style: italic; } @media (max-width: 1100px) { .pf-c-page [data-pf-recommendations-layout="bento"] .pf-c-quote:nth-child(3n + 1) { grid-column: auto; } .pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote:is(:nth-child(odd), :nth-child(even)) { transform: none; } } } /* assets/css/public/design/elements/recommendations/02-avatar.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/2 de design/elements/recommendations.css : composant « avatar » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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. */ .pf-c-page [data-pf-recommendations-layout="polaroid"] .pf-c-quote__header .pf-c-avatar.pf-c-quote__photo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; } } /* assets/css/public/design/elements/casting/01-detail.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/4 de design/elements/casting.css : composant « detail » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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-pf-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. */ .pf-c-page [data-pf-casting-layout="index"] .pf-c-details { --cols: 1; --cols-md: 1; --cols-sm: 1; gap: 0; } .pf-c-page [data-pf-casting-layout="index"] .pf-c-details__item { 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; } .pf-c-page [data-pf-casting-layout="index"] :is(.pf-c-details__label, .pf-c-details__summary) { margin: 0; } @media (max-width: 1100px) { .pf-c-page [data-pf-casting-layout="index"] .pf-c-details__item { grid-template-columns: minmax(0, 1fr); } } /* Liste : une carte pleine largeur par caractéristique et par bloc, libellé à gauche. */ .pf-c-page [data-pf-casting-layout="list"] .pf-c-details { --cols: 1; --cols-md: 1; --cols-sm: 1; } .pf-c-page [data-pf-casting-layout="list"] :is(.pf-c-details__item, .pf-c-casting-block--card) { --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; } .pf-c-page [data-pf-casting-layout="list"] :is(.pf-c-details__label, .pf-c-details__summary, .pf-c-casting-block__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. */ .pf-c-page [data-pf-casting-layout="minimal"] .pf-c-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. */ .pf-c-page [data-pf-casting-layout]:is([data-pf-casting-layout="minimal"], [data-pf-casting-layout="magazine"], [data-pf-casting-layout="journal"]) :is(.pf-c-details__item, .pf-c-casting-block--card) { --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. */ --pf-border-radius-custom: 0px; --pf-border-radius-l: 0px; } .pf-c-page [data-pf-casting-layout="minimal"] .pf-c-details__item { 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); } .pf-c-page [data-pf-casting-layout="minimal"] .pf-c-details__label { width: auto; margin: 0; } .pf-c-page [data-pf-casting-layout="minimal"] .pf-c-details__label::after { content: " :"; } .pf-c-page [data-pf-casting-layout="minimal"] .pf-c-details__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. */ .pf-c-page [data-pf-casting-layout="magazine"] .pf-c-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)); } .pf-c-page [data-pf-casting-layout="magazine"] :is(.pf-c-details__item, .pf-c-casting-block--card) { border-top: max(2px, var(--pf-border-width)) solid var(--pf-thumbnail-contour-color, var(--pf-ink)); } .pf-c-page [data-pf-casting-layout="magazine"] .pf-c-details__label { margin: 0 0 0.35rem; font-size: var(--pf-font-size-small, 0.875em); letter-spacing: 0.08em; text-transform: uppercase; } } /* assets/css/public/design/elements/casting/02-casting.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/4 de design/elements/casting.css : composant « casting » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page [data-pf-casting-layout="index"] .pf-c-casting-block--card { padding-inline: 0; } } /* assets/css/public/design/elements/casting/03-section.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 3/4 de design/elements/casting.css : composant « section » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @media (min-width: 1101px) { .pf-c-page [data-pf-casting-layout="magazine"] > article:where(.pf-c-section__inner) { display: flex; flex-wrap: wrap; column-gap: calc(2.5rem * var(--pf-density-gap, 1)); } .pf-c-page [data-pf-casting-layout="magazine"] > article:where(.pf-c-section__inner) > * { flex: 1 1 100%; min-width: 0; } .pf-c-page [data-pf-casting-layout="magazine"] > article:where(.pf-c-section__inner) > .pf-c-casting-block--card { flex-basis: calc(50% - 1.25rem * var(--pf-density-gap, 1)); } } } /* assets/css/public/design/elements/casting/04-detail.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 4/4 de design/elements/casting.css : composant « detail » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Journal : fiche de presse, libellés en petites capitales dans une colonne étroite, valeurs à droite. */ .pf-c-page [data-pf-casting-layout="journal"] .pf-c-details { --cols: 1; --cols-md: 1; --cols-sm: 1; gap: 0; } .pf-c-page [data-pf-casting-layout="journal"] :is(.pf-c-details__item, .pf-c-casting-block--card) { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0 calc(1.5rem * var(--pf-density-gap, 1)); align-items: baseline; } .pf-c-page [data-pf-casting-layout="journal"] :is(.pf-c-details__label, .pf-c-casting-block__title) { margin: 0; font-size: var(--pf-font-size-small, 0.875em); font-variant-caps: all-small-caps; letter-spacing: 0.1em; } .pf-c-page [data-pf-casting-layout="journal"] .pf-c-details__summary { margin: 0; } @media (max-width: 1100px) { .pf-c-page [data-pf-casting-layout]:is([data-pf-casting-layout="list"], [data-pf-casting-layout="journal"]) :is(.pf-c-details__item, .pf-c-casting-block--card) { 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. */ .pf-c-page .pf-c-nav__submenu-item--parent { display: none; } } /* assets/css/public/design/elements/badges/01-timeline.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/3 de design/elements/badges.css : composant « timeline » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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) → --pf-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. ========================================================================== */ .pf-c-page :is(.pf-c-service__badge, .pf-c-event .pf-c-event__date, .pf-c-prose h2:not(:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle)), :where(.pf-c-timeline:not(.pf-c-timeline--casting)) .pf-c-timeline__year:not(.pf-c-timeline__year--nodate), .pf-c-card__category) { --pf-badge-c: var(--pf-badge-color, var(--pf-badge-base)); --pf-badge-on: var(--pf-badge-on-color, var(--pf-badge-base-on)); --pf-badge-bg: color-mix(in srgb, var(--pf-badge-c) var(--pf-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(--pf-badge-text-color, color-mix(in srgb, var(--pf-badge-on) var(--pf-badge-ink-mix, 100%), var(--pf-badge-c))); --pf-badge-line: color-mix(in srgb, var(--pf-badge-c) var(--pf-badge-line-mix, 0%), transparent); } } /* assets/css/public/design/elements/badges/02-article.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/3 de design/elements/badges.css : composant « article » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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. */ .pf-c-page .pf-c-prose h2:not(:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle)) { --pf-badge-base: var(--pf-heading-secondary-color, var(--pf-text-main-color, #222)); --pf-badge-base-on: var(--pf-button-text-color, #fff); --pf-badge-h: var(--pf-badge-headings, 0); width: var(--pf-badge-heading-width, auto); padding: calc(0.3em * var(--pf-badge-h) * var(--pf-badge-pad, 1)) calc(0.8em * var(--pf-badge-h) * var(--pf-badge-pad, 1)); border-radius: calc(var(--pf-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)); } } /* assets/css/public/design/elements/badges/03-card.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 3/3 de design/elements/badges.css : composant « card » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* main.css colore chaque span / p / svg du site : le contenu des pastilles reprend leur couleur et leur casse. */ .pf-c-page :is(.pf-c-service__badge, .pf-c-event .pf-c-event__date, .pf-c-prose h2:not(:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle)), :where(.pf-c-timeline:not(.pf-c-timeline--casting)) .pf-c-timeline__year:not(.pf-c-timeline__year--nodate), .pf-c-card__category) :is(span, p, svg, svg *) { color: inherit; text-transform: inherit; } } /* assets/css/public/design/elements/informations/01-info.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 1/2 de design/elements/informations.css : composant « info » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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-pf-informations-layout] (posé sur .pf-c-infos) Balisage : .pf-c-infos > (a | article).pf-c-info > img.pf-c-info__media ? + 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é. ========================================================================== */ .pf-c-page .pf-c-infos[data-pf-informations-layout]:not([data-pf-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). */ .pf-c-page .pf-c-infos:where([data-pf-informations-layout]:not([data-pf-informations-layout="grid"], [data-pf-informations-layout="feature"])) .pf-c-info { 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; } .pf-c-page .pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) .pf-c-info__media { max-width: 100%; margin-bottom: 0.25rem; object-fit: cover; } .pf-c-page .pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) .pf-c-info__description { margin-top: 0; } .pf-c-page .pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) .pf-c-info__cta { align-self: flex-start; margin-top: auto; } .pf-c-page .pf-c-infos[data-pf-informations-layout]:not([data-pf-informations-layout="grid"]) a.pf-c-info:is(:hover, :focus-visible) .pf-c-info__title { text-decoration: underline; text-underline-offset: 0.2em; } /* Polaroïd, texte seul : grille régulière, jamais plus de 3 colonnes. */ .pf-c-page .pf-c-infos:is([data-pf-informations-layout="polaroid"], [data-pf-informations-layout="minimal"]) { grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: calc(1.5rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-infos[data-pf-informations-layout="polaroid"] .pf-c-info { 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; } .pf-c-page .pf-c-infos[data-pf-informations-layout="polaroid"] .pf-c-info:nth-child(even) { rotate: 1.5deg; } .pf-c-page .pf-c-infos[data-pf-informations-layout="polaroid"] .pf-c-info__media { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--pf-radius-inner); } /* Texte seul : pas d'image, fiches aérées. */ .pf-c-page .pf-c-infos:is([data-pf-informations-layout="minimal"], [data-pf-informations-layout="reveal"], [data-pf-informations-layout="index"]) .pf-c-info__media { display: none; } .pf-c-page .pf-c-infos[data-pf-informations-layout="minimal"] .pf-c-info { padding: 0; } /* Lignes : une fiche par ligne (liste, index, journal, survol, grand format). */ .pf-c-page .pf-c-infos:is([data-pf-informations-layout="list"], [data-pf-informations-layout="index"], [data-pf-informations-layout="journal"], [data-pf-informations-layout="reveal"], [data-pf-informations-layout="feature"]) { grid-template-columns: minmax(0, 1fr); gap: 0; } /* Liste : vignette à gauche, texte, bouton à droite. */ .pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info { 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; } .pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info__media { grid-area: media; width: 7.5rem; aspect-ratio: 1; margin: 0; } .pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info__title { grid-area: title; align-self: end; text-align: left; } .pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info__description { grid-area: text; align-self: start; } .pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info__cta { grid-area: cta; align-self: center; margin: 0; } /* Index numéroté : numéro, titre + texte, bouton. */ .pf-c-page .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info { 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; } .pf-c-page .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info::before { content: counter(pf-information, decimal-leading-zero); grid-row: 1 / span 2; font-variant-numeric: tabular-nums; opacity: 0.55; } .pf-c-page .pf-c-infos[data-pf-informations-layout="index"] :is(.pf-c-info__title, .pf-c-info__description) { grid-column: 2; text-align: left; } .pf-c-page .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info__description { opacity: 0.75; } .pf-c-page .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info__cta { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0; } /* Journal : axe vertical, pastille par fiche. */ .pf-c-page .pf-c-infos[data-pf-informations-layout="journal"] { position: relative; padding-left: calc(2rem * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-infos[data-pf-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; } .pf-c-page .pf-c-infos[data-pf-informations-layout="journal"] .pf-c-info { 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; } .pf-c-page .pf-c-infos[data-pf-informations-layout="journal"] .pf-c-info::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); } .pf-c-page .pf-c-infos[data-pf-informations-layout="journal"] .pf-c-info__media { width: min(100%, 20rem); } .pf-c-page .pf-c-infos[data-pf-informations-layout="journal"] .pf-c-info__title { text-align: left; } /* Titres au survol : grands titres, le détail se déplie au survol. */ .pf-c-page .pf-c-infos[data-pf-informations-layout="reveal"] .pf-c-info { padding: calc(1rem * var(--pf-density-pad, 1)) 0; text-align: left; } .pf-c-page .pf-c-infos[data-pf-informations-layout="reveal"] .pf-c-info__title { font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.15; text-align: left; transition: opacity 0.25s ease; } .pf-c-page .pf-c-infos[data-pf-informations-layout="reveal"]:hover .pf-c-info:not(:hover) .pf-c-info__title { opacity: 0.4; } .pf-c-page .pf-c-infos[data-pf-informations-layout="reveal"] :is(.pf-c-info__description, .pf-c-info__cta) { display: none; } .pf-c-page .pf-c-infos[data-pf-informations-layout="reveal"] .pf-c-info:is(:hover, :focus-within, :focus-visible) :is(.pf-c-info__description, .pf-c-info__cta) { display: block; } /* Grand format : une fiche par bandeau, image et texte côte à côte. */ .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] { gap: calc(2rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info { 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; } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info__media { grid-column: 1; grid-row: 1 / span 3; width: 100%; max-width: none; height: 100%; min-height: 16rem; margin: 0; } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) > :not(.pf-c-info__media) { grid-column: 2; padding-right: calc(1.5rem * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) .pf-c-info__title { padding-top: calc(1.5rem * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:not(:has(.pf-c-info__media)) > *:where(.pf-c-info__cta, .pf-c-info__description, .pf-c-info__media, .pf-c-info__title) { grid-column: 1 / -1; } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info__title { font-size: clamp(1.3rem, 2.4vw, 1.8rem); } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info__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) { .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) { grid-template-rows: 1fr auto auto auto 1fr; } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) .pf-c-info__media { grid-row: 1 / -1; } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) .pf-c-info__title { grid-row: 2; padding-top: 0; } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) .pf-c-info__description { grid-row: 3; } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) .pf-c-info__cta { grid-row: 4; margin-bottom: 0; } } /* Magazine : la première fiche en grand (image à gauche), les autres en grille. */ .pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1.5rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info__media { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--pf-radius-inner); } .pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info: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)); } .pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info:first-child .pf-c-info__media { grid-row: 1 / span 3; height: 100%; margin: 0; } .pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info:first-child:has(.pf-c-info__media) > :not(.pf-c-info__media) { grid-column: 2; } .pf-c-page .pf-c-infos[data-pf-informations-layout="magazine"] .pf-c-info:first-child .pf-c-info__title { font-size: clamp(1.3rem, 2.4vw, 1.8rem); } /* Mosaïque : tailles variées, image en fond de tuile si présente. */ .pf-c-page .pf-c-infos[data-pf-informations-layout="mosaic"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: calc(1rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-infos[data-pf-informations-layout="mosaic"] .pf-c-info { padding: calc(1rem * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-infos[data-pf-informations-layout="mosaic"] .pf-c-info:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; } .pf-c-page .pf-c-infos[data-pf-informations-layout="mosaic"] .pf-c-info:nth-child(5n + 4) { grid-column: span 2; } .pf-c-page .pf-c-infos[data-pf-informations-layout="mosaic"] .pf-c-info__media { 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. */ .pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: calc(1rem * var(--pf-density-gap, 1)); } .pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; } .pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info:is(:nth-child(7n + 2), :nth-child(7n + 5)) { grid-column: span 2; } .pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info__media { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--pf-radius-inner); } .pf-c-page .pf-c-infos[data-pf-informations-layout="bento"] .pf-c-info:nth-child(7n + 1) .pf-c-info__title { font-size: clamp(1.3rem, 2.4vw, 1.8rem); } /* Défilement : bande horizontale aimantée. */ .pf-c-page .pf-c-infos[data-pf-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; } .pf-c-page .pf-c-infos[data-pf-informations-layout="carousel"] .pf-c-info { flex: 0 0 clamp(15rem, 28vw, 22rem); height: auto; scroll-snap-align: start; } .pf-c-page .pf-c-infos[data-pf-informations-layout="carousel"] .pf-c-info__media { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--pf-radius-inner); } /* Styles sans fond : titre aux couleurs de la page. */ .pf-c-page .pf-c-infos:is([data-pf-informations-layout="list"], [data-pf-informations-layout="index"], [data-pf-informations-layout="journal"], [data-pf-informations-layout="minimal"], [data-pf-informations-layout="reveal"], [data-pf-informations-layout="feature"], [data-pf-informations-layout="mosaic"]) .pf-c-info__title { color: var(--pf-heading-secondary-color, var(--pf-ink)); } @media (max-width: 1100px) { .pf-c-page .pf-c-infos:is([data-pf-informations-layout="magazine"], [data-pf-informations-layout="mosaic"], [data-pf-informations-layout="bento"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info { 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)); } .pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info__media { width: 5rem; } .pf-c-page .pf-c-infos[data-pf-informations-layout="list"] .pf-c-info__cta { justify-self: start; } .pf-c-page .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info { grid-template-columns: 2.5rem minmax(0, 1fr); } .pf-c-page .pf-c-infos[data-pf-informations-layout="index"] .pf-c-info__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. */ .pf-c-page .pf-c-infos:is([data-pf-informations-layout="feature"], [data-pf-informations-layout="magazine"]) .pf-c-info:is(*, :first-child) { display: flex; flex-direction: column; align-items: stretch; } .pf-c-page .pf-c-infos:is([data-pf-informations-layout="feature"], [data-pf-informations-layout="magazine"]) .pf-c-info__cta { align-self: flex-start; } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info:has(.pf-c-info__media) > :not(.pf-c-info__media) { padding: 0 calc(1rem * var(--pf-density-pad, 1)); } .pf-c-page .pf-c-infos[data-pf-informations-layout="feature"] .pf-c-info__media { min-height: 0; aspect-ratio: 16 / 10; } .pf-c-page .pf-c-infos[data-pf-informations-layout="carousel"] .pf-c-info { flex-basis: 78vw; } } } /* assets/css/public/design/elements/informations/02-page.css */ /* @layer-wrap:site.elements */ @layer site.elements { /* Part 2/2 de design/elements/informations.css : composant « page » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @media (prefers-reduced-motion: reduce) { .pf-c-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é ------------------------------------------------------------------------------------------- */ .pf-c-page:has(header[data-articles-density="tight"]) .pf-c-cards--articles, .pf-c-page:has(header[data-events-density="tight"]) .pf-c-events, .pf-c-page:has(header[data-services-density="tight"]) .pf-c-services__list, .pf-c-page:has(header[data-works-density="tight"]) .pf-c-cards--works:not([data-pf-layout-slot="images"]), .pf-c-page:has(header[data-images-density="tight"]) :is(.pf-c-gallery:where([data-pf-page="gallery-album"] *), .pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)), .pf-c-cards--works[data-pf-layout-slot="images"]), .pf-c-page:has(header[data-awards-density="tight"]) :is(.pf-c-awards, ul.pf-c-award-logos), .pf-c-page:has(header[data-timeline-density="tight"]) [data-pf-timeline-layout], .pf-c-page:has(header[data-recommendations-density="tight"]) [data-pf-recommendations-layout], .pf-c-page:has(header[data-casting-density="tight"]) [data-pf-casting-layout], .pf-c-page:has(header[data-informations-density="tight"]) .pf-c-infos { --pf-density-gap: 0.5; --pf-density-pad: 0.7; --layout-gap: calc(20px * 0.5); } .pf-c-page:has(header[data-recommendations-density="tight"]) [data-pf-recommendations-layout] .pf-c-quotes { --layout-gap: calc(20px * 0.5); --layout-space-y-md: calc(25px * 0.7); --layout-space-x-md: calc(20px * 0.7); } .pf-c-page:has(header[data-articles-density="airy"]) .pf-c-cards--articles, .pf-c-page:has(header[data-events-density="airy"]) .pf-c-events, .pf-c-page:has(header[data-services-density="airy"]) .pf-c-services__list, .pf-c-page:has(header[data-works-density="airy"]) .pf-c-cards--works:not([data-pf-layout-slot="images"]), .pf-c-page:has(header[data-images-density="airy"]) :is(.pf-c-gallery:where([data-pf-page="gallery-album"] *), .pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)), .pf-c-cards--works[data-pf-layout-slot="images"]), .pf-c-page:has(header[data-awards-density="airy"]) :is(.pf-c-awards, ul.pf-c-award-logos), .pf-c-page:has(header[data-timeline-density="airy"]) [data-pf-timeline-layout], .pf-c-page:has(header[data-recommendations-density="airy"]) [data-pf-recommendations-layout], .pf-c-page:has(header[data-casting-density="airy"]) [data-pf-casting-layout], .pf-c-page:has(header[data-informations-density="airy"]) .pf-c-infos { --pf-density-gap: 1.75; --pf-density-pad: 1.35; --layout-gap: calc(20px * 1.75); } .pf-c-page:has(header[data-recommendations-density="airy"]) [data-pf-recommendations-layout] .pf-c-quotes { --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) { .pf-c-page:has(header[data-articles-cols="2"]) .pf-c-cards--articles[data-pf-layout="grid"], .pf-c-page:has(header[data-articles-cols="2"]) .pf-c-cards--articles[data-pf-layout="polaroid"], .pf-c-page:has(header[data-articles-cols="2"]) .pf-c-cards--articles[data-pf-layout="bento"], .pf-c-page:has(header[data-articles-cols="2"]) .pf-c-cards--articles[data-pf-layout="magazine"], .pf-c-page:has(header[data-events-cols="2"]) .pf-c-events[data-pf-layout="grid"], .pf-c-page:has(header[data-events-cols="2"]) .pf-c-events[data-pf-layout="polaroid"], .pf-c-page:has(header[data-events-cols="2"]) .pf-c-events[data-pf-layout="bento"], .pf-c-page:has(header[data-events-cols="2"]) .pf-c-events[data-pf-layout="magazine"], .pf-c-page:has(header[data-services-cols="2"]) .pf-c-services__list[data-pf-services-layout="grid"], .pf-c-page:has(header[data-services-cols="2"]) .pf-c-services__list[data-pf-services-layout="polaroid"], .pf-c-page:has(header[data-services-cols="2"]) .pf-c-services__list[data-pf-services-layout="bento"], .pf-c-page:has(header[data-services-cols="2"]) .pf-c-services__list[data-pf-services-layout="magazine"], .pf-c-page:has(header[data-images-cols="2"]) .pf-c-gallery[data-pf-layout="grid"], .pf-c-page:has(header[data-images-cols="2"]) .pf-c-gallery[data-pf-layout="polaroid"], .pf-c-page:has(header[data-images-cols="2"]) .pf-c-gallery[data-pf-layout="bento"], .pf-c-page:has(header[data-images-cols="2"]) .pf-c-gallery[data-pf-layout="magazine"], .pf-c-page:has(header[data-awards-cols="2"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="grid"], .pf-c-page:has(header[data-awards-cols="2"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="polaroid"], .pf-c-page:has(header[data-awards-cols="2"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="bento"], .pf-c-page:has(header[data-awards-cols="2"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="magazine"], .pf-c-page:has(header[data-recommendations-cols="2"]) [data-pf-recommendations-layout="grid"] .pf-c-quotes, .pf-c-page:has(header[data-recommendations-cols="2"]) [data-pf-recommendations-layout="polaroid"] .pf-c-quotes, .pf-c-page:has(header[data-recommendations-cols="2"]) [data-pf-recommendations-layout="bento"] .pf-c-quotes, .pf-c-page:has(header[data-recommendations-cols="2"]) [data-pf-recommendations-layout="magazine"] .pf-c-quotes { --_cols: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-c-page:has(header[data-works-cols="2"]) .pf-c-cards--works[data-pf-layout="grid"]:not([data-pf-layout-slot="images"]), .pf-c-page:has(header[data-works-cols="2"]) .pf-c-cards--works[data-pf-layout="polaroid"]:not([data-pf-layout-slot="images"]), .pf-c-page:has(header[data-works-cols="2"]) .pf-c-cards--works[data-pf-layout="bento"]:not([data-pf-layout-slot="images"]), .pf-c-page:has(header[data-works-cols="2"]) .pf-c-cards--works[data-pf-layout="magazine"]:not([data-pf-layout-slot="images"]) { --_thumbs: 2; } .pf-c-page:has(header[data-services-cols="2"]) .pf-c-services__list[data-pf-services-layout="grid"] { --pf-services-cols: 2; } .pf-c-page:has(header[data-articles-cols="3"]) .pf-c-cards--articles[data-pf-layout="grid"], .pf-c-page:has(header[data-articles-cols="3"]) .pf-c-cards--articles[data-pf-layout="polaroid"], .pf-c-page:has(header[data-articles-cols="3"]) .pf-c-cards--articles[data-pf-layout="bento"], .pf-c-page:has(header[data-articles-cols="3"]) .pf-c-cards--articles[data-pf-layout="magazine"], .pf-c-page:has(header[data-events-cols="3"]) .pf-c-events[data-pf-layout="grid"], .pf-c-page:has(header[data-events-cols="3"]) .pf-c-events[data-pf-layout="polaroid"], .pf-c-page:has(header[data-events-cols="3"]) .pf-c-events[data-pf-layout="bento"], .pf-c-page:has(header[data-events-cols="3"]) .pf-c-events[data-pf-layout="magazine"], .pf-c-page:has(header[data-services-cols="3"]) .pf-c-services__list[data-pf-services-layout="grid"], .pf-c-page:has(header[data-services-cols="3"]) .pf-c-services__list[data-pf-services-layout="polaroid"], .pf-c-page:has(header[data-services-cols="3"]) .pf-c-services__list[data-pf-services-layout="bento"], .pf-c-page:has(header[data-services-cols="3"]) .pf-c-services__list[data-pf-services-layout="magazine"], .pf-c-page:has(header[data-images-cols="3"]) .pf-c-gallery[data-pf-layout="grid"], .pf-c-page:has(header[data-images-cols="3"]) .pf-c-gallery[data-pf-layout="polaroid"], .pf-c-page:has(header[data-images-cols="3"]) .pf-c-gallery[data-pf-layout="bento"], .pf-c-page:has(header[data-images-cols="3"]) .pf-c-gallery[data-pf-layout="magazine"], .pf-c-page:has(header[data-awards-cols="3"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="grid"], .pf-c-page:has(header[data-awards-cols="3"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="polaroid"], .pf-c-page:has(header[data-awards-cols="3"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="bento"], .pf-c-page:has(header[data-awards-cols="3"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="magazine"], .pf-c-page:has(header[data-recommendations-cols="3"]) [data-pf-recommendations-layout="grid"] .pf-c-quotes, .pf-c-page:has(header[data-recommendations-cols="3"]) [data-pf-recommendations-layout="polaroid"] .pf-c-quotes, .pf-c-page:has(header[data-recommendations-cols="3"]) [data-pf-recommendations-layout="bento"] .pf-c-quotes, .pf-c-page:has(header[data-recommendations-cols="3"]) [data-pf-recommendations-layout="magazine"] .pf-c-quotes { --_cols: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pf-c-page:has(header[data-works-cols="3"]) .pf-c-cards--works[data-pf-layout="grid"]:not([data-pf-layout-slot="images"]), .pf-c-page:has(header[data-works-cols="3"]) .pf-c-cards--works[data-pf-layout="polaroid"]:not([data-pf-layout-slot="images"]), .pf-c-page:has(header[data-works-cols="3"]) .pf-c-cards--works[data-pf-layout="bento"]:not([data-pf-layout-slot="images"]), .pf-c-page:has(header[data-works-cols="3"]) .pf-c-cards--works[data-pf-layout="magazine"]:not([data-pf-layout-slot="images"]) { --_thumbs: 3; } .pf-c-page:has(header[data-services-cols="3"]) .pf-c-services__list[data-pf-services-layout="grid"] { --pf-services-cols: 3; } .pf-c-page:has(header[data-articles-cols="4"]) .pf-c-cards--articles[data-pf-layout="grid"], .pf-c-page:has(header[data-articles-cols="4"]) .pf-c-cards--articles[data-pf-layout="polaroid"], .pf-c-page:has(header[data-articles-cols="4"]) .pf-c-cards--articles[data-pf-layout="bento"], .pf-c-page:has(header[data-articles-cols="4"]) .pf-c-cards--articles[data-pf-layout="magazine"], .pf-c-page:has(header[data-events-cols="4"]) .pf-c-events[data-pf-layout="grid"], .pf-c-page:has(header[data-events-cols="4"]) .pf-c-events[data-pf-layout="polaroid"], .pf-c-page:has(header[data-events-cols="4"]) .pf-c-events[data-pf-layout="bento"], .pf-c-page:has(header[data-events-cols="4"]) .pf-c-events[data-pf-layout="magazine"], .pf-c-page:has(header[data-services-cols="4"]) .pf-c-services__list[data-pf-services-layout="grid"], .pf-c-page:has(header[data-services-cols="4"]) .pf-c-services__list[data-pf-services-layout="polaroid"], .pf-c-page:has(header[data-services-cols="4"]) .pf-c-services__list[data-pf-services-layout="bento"], .pf-c-page:has(header[data-services-cols="4"]) .pf-c-services__list[data-pf-services-layout="magazine"], .pf-c-page:has(header[data-images-cols="4"]) .pf-c-gallery[data-pf-layout="grid"], .pf-c-page:has(header[data-images-cols="4"]) .pf-c-gallery[data-pf-layout="polaroid"], .pf-c-page:has(header[data-images-cols="4"]) .pf-c-gallery[data-pf-layout="bento"], .pf-c-page:has(header[data-images-cols="4"]) .pf-c-gallery[data-pf-layout="magazine"], .pf-c-page:has(header[data-awards-cols="4"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="grid"], .pf-c-page:has(header[data-awards-cols="4"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="polaroid"], .pf-c-page:has(header[data-awards-cols="4"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="bento"], .pf-c-page:has(header[data-awards-cols="4"]) :is(.pf-c-awards, ul.pf-c-award-logos)[data-pf-awards-layout="magazine"], .pf-c-page:has(header[data-recommendations-cols="4"]) [data-pf-recommendations-layout="grid"] .pf-c-quotes, .pf-c-page:has(header[data-recommendations-cols="4"]) [data-pf-recommendations-layout="polaroid"] .pf-c-quotes, .pf-c-page:has(header[data-recommendations-cols="4"]) [data-pf-recommendations-layout="bento"] .pf-c-quotes, .pf-c-page:has(header[data-recommendations-cols="4"]) [data-pf-recommendations-layout="magazine"] .pf-c-quotes { --_cols: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); } .pf-c-page:has(header[data-works-cols="4"]) .pf-c-cards--works[data-pf-layout="grid"]:not([data-pf-layout-slot="images"]), .pf-c-page:has(header[data-works-cols="4"]) .pf-c-cards--works[data-pf-layout="polaroid"]:not([data-pf-layout-slot="images"]), .pf-c-page:has(header[data-works-cols="4"]) .pf-c-cards--works[data-pf-layout="bento"]:not([data-pf-layout-slot="images"]), .pf-c-page:has(header[data-works-cols="4"]) .pf-c-cards--works[data-pf-layout="magazine"]:not([data-pf-layout-slot="images"]) { --_thumbs: 4; } .pf-c-page:has(header[data-services-cols="4"]) .pf-c-services__list[data-pf-services-layout="grid"] { --pf-services-cols: 4; } } /* --- 3. Infos affichées -------------------------------------------------------------------------------------- */ .pf-c-page:has(header[data-articles-hide~="date"]) .pf-c-cards--articles .pf-c-card__date, .pf-c-page:has(header[data-articles-hide~="category"]) .pf-c-cards--articles .pf-c-card__category, .pf-c-page:has(header[data-articles-hide~="excerpt"]) .pf-c-cards--articles .pf-c-card__excerpt, .pf-c-page:has(header[data-events-hide~="place"]) .pf-c-events .pf-c-event__place, .pf-c-page:has(header[data-events-hide~="time"]) .pf-c-events .pf-c-event__time, .pf-c-page:has(header[data-events-hide~="description"]) .pf-c-events .pf-c-event__description, .pf-c-page:has(header[data-services-hide~="strike"]) .pf-c-services__list :is(.pf-c-price__old, .pf-c-price__discount), .pf-c-page:has(header[data-services-hide~="content"]) .pf-c-services__list .pf-c-service__body, .pf-c-page:has(header[data-services-hide~="offer"]) .pf-c-services__list :is(.pf-c-service__badge, .pf-c-pricing__promo), .pf-c-page:has(header[data-works-hide~="subtitle"]) .pf-c-cards--works:not([data-pf-layout-slot="images"]) :is(.pf-c-card__caption, .pf-c-card__caption, .pf-c-card__caption) > p:where(.pf-c-card__caption-text), .pf-c-page:has(header[data-awards-hide~="logo"]) :is(.pf-c-awards, ul.pf-c-award-logos) .pf-c-awards__logo, .pf-c-page:has(header[data-recommendations-hide~="year"]) [data-pf-recommendations-layout] .pf-c-quote__year, .pf-c-page:has(header[data-recommendations-hide~="photo"]) [data-pf-recommendations-layout] .pf-c-quote__photo { display: none; } /* Date et catégorie masquées : la ligne qui les porte disparaît aussi (pas de marge vide). */ .pf-c-page:has(header[data-articles-hide~="date"][data-articles-hide~="category"]) .pf-c-cards--articles .pf-c-card__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). */ [data-pf-matrix] .pf-c-page header:where(.pf-c-header) { --pf-submenu-bg: var(--pf-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(--pf-nav-links-radius, 0px) + min(var(--pf-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(--pf-nav-text-color, currentColor) 14%, transparent); --pf-float-radius: min(calc(var(--pf-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(--pf-nav-bg-blur-custom, none); --pf-float-gap: 0.75rem; } @media (min-width: 1101px) { .pf-c-page header:is([data-pf-nav-desktop="inline"], [data-pf-nav-desktop="mega"]) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { box-sizing: border-box; z-index: 30; } .pf-c-page header:is([data-pf-nav-desktop="inline"], [data-pf-nav-desktop="mega"]) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu .pf-c-nav__submenu-content { box-sizing: border-box; } .pf-c-page header:is([data-pf-nav-desktop="inline"], [data-pf-nav-desktop="mega"]) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu li:where(.pf-c-nav__submenu-item) { margin: 0; list-style: none; } /* 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. */ .pf-c-page header[data-pf-nav-desktop="mega"] .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { justify-content: flex-start; box-sizing: border-box; text-align: start; } .pf-c-page header[data-pf-nav-desktop="mega"][data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { justify-content: center; text-align: center; } .pf-c-page header[data-pf-nav-desktop="mega"][data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { 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). */ .pf-c-page .pf-c-header[data-pf-nav-scroll="x"]:not([data-pf-header-rail]):not([data-pf-nav-menu]) .pf-c-nav--header.pf-c-nav { min-width: 0; } .pf-c-page .pf-c-header[data-pf-nav-scroll="x"]:not([data-pf-header-rail]):not([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content { min-width: 0; max-width: 100%; } .pf-c-page .pf-c-header[data-pf-nav-scroll="x"]:not([data-pf-header-rail]):not([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-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. */ } .pf-c-page .pf-c-header[data-pf-nav-scroll="x"]:not([data-pf-header-rail]):not([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > li:where(.pf-c-nav__item, .pf-c-nav__submenu-item) { 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 ---------- */ .pf-c-page header[data-pf-nav-desktop="mega"] .pf-c-nav__item--has-submenu { position: static; } .pf-c-page header[data-pf-nav-desktop="mega"] .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { left: 0; right: 0; width: 100%; max-width: none; } .pf-c-page header[data-pf-nav-desktop="mega"] .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.25rem 2rem; padding-block: 1.5rem; } /* Jamais dans le menu hamburger (data-pf-nav-menu) : ses liens restent en ligne (header-mobile.css), sans changer la spécificité. */ .pf-c-page header[data-pf-nav-desktop="mega"]:where(:not([data-pf-nav-menu])) .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { 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) { .pf-c-page header:not([data-pf-header-rail]):not([data-pf-nav-panel]):where(:not([data-pf-nav-menu])) .pf-c-nav--header.pf-c-nav .pf-c-nav__item--has-submenu > .pf-c-nav__submenu .pf-c-nav__submenu-content { transform: translateY(-0.4rem); transition: transform calc(0.28s * var(--pf-submenu-speed, 1)) cubic-bezier(0.22, 1, 0.36, 1); } .pf-c-page header:not([data-pf-header-rail]):not([data-pf-nav-panel]):where(:not([data-pf-nav-menu])) .pf-c-nav--header.pf-c-nav .pf-c-nav__item--has-submenu:is(:hover, :focus-within, .is-intent:where(.pf-c-nav__item)) > .pf-c-nav__submenu .pf-c-nav__submenu-content { transform: none; } /* Bandeau par défaut : liens espacés. */ .pf-c-page header:not([data-pf-header-rail]):not([data-pf-nav-panel]):where(:not([data-pf-nav-menu])) .pf-c-nav--header.pf-c-nav .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { 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) { .pf-c-page header:is([data-pf-nav-desktop="inline"], [data-pf-nav-desktop="mega"]) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { position: absolute; top: 100%; bottom: auto; padding: var(--pf-submenu-gap, 0.5rem) 0 0; background: none; }} @media (min-width: 1101px) { .pf-c-page header:is([data-pf-nav-desktop="inline"], [data-pf-nav-desktop="mega"]) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu .pf-c-nav__submenu-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(--pf-theme-bg-main, #fff); box-shadow: var(--pf-submenu-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }} @media (min-width: 1101px) { .pf-c-page header[data-pf-nav-desktop="mega"] .pf-c-nav--header .pf-c-nav__item--has-submenu { position: static; }} @media (min-width: 1101px) { .pf-c-page header[data-pf-nav-desktop="mega"] .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { left: var(--pf-mega-left, 0px); right: auto; width: var(--pf-mega-width, 100%); max-width: none; transform: none; }} @media (min-width: 1101px) { .pf-c-page header[data-pf-nav-desktop="mega"] .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu .pf-c-nav__submenu-content { padding: 0; border-inline: 0; border-radius: 0; }} @media (min-width: 1101px) { .pf-c-page header[data-pf-nav-desktop="mega"] .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { 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); }} .pf-c-page .pf-c-header[data-pf-nav-scroll="x"]:not([data-pf-header-rail]):not([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 4px 4px 8px; } .pf-c-page .pf-c-header[data-pf-nav-scroll="x"]:not([data-pf-header-rail]):not([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > li > a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { white-space: nowrap; } .pf-c-page .pf-c-header[data-pf-nav-scroll="x"]:not([data-pf-header-rail]):not([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { position: fixed; top: var(--pf-sub-top, 100%); left: var(--pf-sub-left, 0px); } .pf-c-page .pf-c-header[data-pf-nav-scroll="x"][data-pf-nav-desktop="mega"]:not([data-pf-header-rail]):not([data-pf-nav-menu]) .pf-c-nav--header .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { transform: none; } .pf-c-page header[data-pf-nav-desktop="mega"] .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { display: grid; } @media (min-width: 1101px) { .pf-c-page header:not([data-pf-header-rail]):not([data-pf-nav-panel]):where(:not([data-pf-nav-menu])) .pf-c-nav--header.pf-c-nav .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { 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) { .pf-c-page header:not([data-pf-header-rail]):not([data-pf-nav-panel]):where(:not([data-pf-nav-menu])) .pf-c-nav--header.pf-c-nav .pf-c-nav__item--has-submenu:is(:hover, :focus-within, .is-intent:where(.pf-c-nav__item)) > .pf-c-nav__submenu { 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 {} /* 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 {} /* 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 --pf-nav-text-color. */ .pf-c-page header:where(.pf-c-header) { --pf-nav-panel-bg: linear-gradient(var(--pf-nav-bg-color, transparent), var(--pf-nav-bg-color, transparent)), var(--pf-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 ---------------------------- */ .pf-c-page header[data-pf-nav-active="sheet"] .pf-c-nav--header { 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(--pf-nav-text-color, inherit); box-shadow: var(--pf-float-shadow, var(--pf-sheet-shadow-up)); } .pf-c-page header[data-pf-nav-active="sheet"] .pf-c-nav--header.is-open { transform: none; transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s; } .pf-c-page header[data-pf-nav-active="sheet"] .pf-c-nav--header .pf-c-nav__content { min-height: 0; padding-top: 2.25rem; } .pf-c-page header[data-pf-nav-active="sheet"] .pf-c-nav--header .pf-c-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(--pf-body-text-color, #111) 25%, transparent); } /* --- Tiroir latéral --------------------------------------------------- */ .pf-c-page header[data-pf-nav-active="drawer"] .pf-c-nav--header { /* 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(--pf-nav-text-color, inherit); box-shadow: var(--pf-float-shadow, var(--pf-drawer-shadow)); } .pf-c-page header[data-pf-nav-active="drawer"] .pf-c-nav--header.is-open { transform: none; transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, visibility 0s; } .pf-c-page header[data-pf-nav-active="drawer"] .pf-c-nav--header .pf-c-nav__content { padding-top: 1.5rem; } /* Voile cliquable : fermeture au toucher (header.js). */ .pf-c-page header[data-pf-nav-active="drawer"].is-nav-open:where(.pf-c-header)::after, .pf-c-page header[data-pf-nav-active="sheet"].is-nav-open:where(.pf-c-header)::after { top: 0; pointer-events: auto; } /* --- Plein écran typographique --------------------------------------- */ .pf-c-page header[data-pf-nav-active="fullscreen"] .pf-c-nav--header { top: 0; background: var(--pf-nav-panel-bg); color: var(--pf-nav-text-color, inherit); } .pf-c-page header[data-pf-nav-active="fullscreen"] .pf-c-nav--header .pf-c-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). */ .pf-c-page header[data-pf-nav-active="fullscreen"] .pf-c-nav--header .pf-c-nav__content .pf-c-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. */ .pf-c-page header[data-pf-nav-menu] .pf-c-header__inner { align-items: center; } .pf-c-page header[data-pf-nav-menu] .pf-c-header__bar { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: 100%; min-width: 0; } .pf-c-page header[data-pf-nav-menu] .pf-c-header__bar > .pf-c-brand { flex: 0 1 auto; min-width: 0; align-self: center; } .pf-c-page header[data-pf-nav-menu] .pf-c-header__bar > .pf-c-burger { flex: 0 0 auto; align-self: center; margin-block: 0; } /* Menu ouvert : logo + bouton de fermeture restent au-dessus du panneau. */ .pf-c-page header.is-nav-open .pf-c-header__bar { z-index: 870; } /* Teinte de mobile.css (::before) déjà incluse dans --pf-nav-panel-bg. */ .pf-c-page header:is([data-pf-nav-active="sheet"], [data-pf-nav-active="drawer"], [data-pf-nav-active="fullscreen"], [data-pf-nav-active="radial"]) .pf-c-nav--header.is-open::before { content: none; } .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { border: 0; background: none; box-shadow: none; } .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu .pf-c-nav__submenu-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. */ .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { border-inline-start: var(--pf-rule-width, 1px) solid color-mix(in srgb, currentColor 25%, transparent); } .pf-c-page .pf-c-header[data-pf-nav-panel][data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { border-inline-start: 0; } .pf-c-page .pf-c-header[data-pf-nav-panel][data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { 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. */ .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > a .pf-c-nav__submenu-icon svg:where(.pf-c-nav__submenu-svg) { transition: transform 0.25s ease; } .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu.is-open > a .pf-c-nav__submenu-icon svg:where(.pf-c-nav__submenu-svg) { transform: rotate(180deg); } .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { } @media (max-width: 1100px) { .pf-c-page header .pf-c-nav--header.pf-c-nav .pf-c-nav__content .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { grid-template-rows: 0fr; } .pf-c-page header .pf-c-nav--header.pf-c-nav .pf-c-nav__content .pf-c-nav__item--has-submenu > .pf-c-nav__submenu > .pf-c-nav__submenu-content { min-height: 0; overflow: hidden; } .pf-c-page header .pf-c-nav--header.pf-c-nav .pf-c-nav__content .pf-c-nav__item--has-submenu.is-open > .pf-c-nav__submenu { 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 { .pf-c-page header[data-pf-nav-active="fullscreen"] .pf-c-nav--header .pf-c-nav__content { padding-top: calc(var(--header-height, 5rem) + 2rem); } .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__submenu-item--parent { display: list-item; } .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > .pf-c-nav__item--has-submenu { position: static; display: block; } .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { 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; } .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu.is-open > .pf-c-nav__submenu { 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; } .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu::before, .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu .pf-c-nav__submenu-content::before { content: none; } .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu .pf-c-nav__submenu-content { min-height: 0; width: auto; max-width: none; margin: 0; padding: 0; overflow: hidden; } .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { 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; } .pf-c-page .pf-c-header[data-pf-nav-panel][data-pf-align="center"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { align-items: center; padding: 0; } .pf-c-page .pf-c-header[data-pf-nav-panel][data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal) .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { align-items: flex-end; padding: 0 0.9rem 0 0; } .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu li:where(.pf-c-nav__submenu-item) { width: auto; margin: 0; } @media (prefers-reduced-motion: reduce) { .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu, .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu.is-open > .pf-c-nav__submenu, .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > a .pf-c-nav__submenu-icon svg:where(.pf-c-nav__submenu-svg) { transition: none; } } @media (max-width: 1100px) { .pf-c-page header .pf-c-nav--header.pf-c-nav .pf-c-nav__content .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { 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) { .pf-c-page header .pf-c-nav--header.pf-c-nav .pf-c-nav__content .pf-c-nav__item--has-submenu.is-open > .pf-c-nav__submenu { 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) { .pf-c-page header .pf-c-nav--header.pf-c-nav .pf-c-nav__content .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { gap: 0.6rem; } } } /* assets/css/public/design/themes/basic/menu-radial/01-burger.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 1/3 de design/themes/basic/menu-radial.css : composant « burger » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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) -------------------------- */ .pf-c-page header[data-pf-nav-active="radial"] .pf-c-burger { 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; } } /* assets/css/public/design/themes/basic/menu-radial/02-nav.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 2/3 de design/themes/basic/menu-radial.css : composant « nav » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header { 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; } .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header.is-open { 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; } .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header.is-open::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). */ .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-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. */ .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list, .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > li:where(.pf-c-nav__item, .pf-c-nav__submenu-item) { align-items: flex-end; text-align: right; } .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list { gap: 0.5rem; } .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > li:where(.pf-c-nav__item, .pf-c-nav__submenu-item) { width: auto; } .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > li > a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { 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. */ .pf-c-page .pf-c-header[data-pf-nav-panel][data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { border: 0; border-inline-end: var(--pf-rule-width, 1px) solid color-mix(in srgb, currentColor 25%, transparent); } .pf-c-page .pf-c-header[data-pf-nav-panel][data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu.is-open { padding-bottom: 0; } .pf-c-page .pf-c-header[data-pf-nav-panel][data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { display: inline-block; } } /* assets/css/public/design/themes/basic/menu-radial/03-page.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 3/3 de design/themes/basic/menu-radial.css : composant « page » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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) { .pf-c-page header[data-pf-nav-active="radial"] { --pf-bubble-base: var(--pf-theme-bg-main, var(--pf-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 { .pf-c-page header[data-pf-nav-active="radial"] .pf-c-burger { position: fixed; transform: none; border: var(--pf-float-edge, 1px solid transparent); color: var(--pf-nav-text-color, currentColor); } .pf-c-page header[data-pf-nav-active="radial"] .pf-c-burger:active { transform: scale(0.94); } .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content { padding: 0.5rem; } .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header[data-pf-link-shape="underline"] .pf-c-nav__content .pf-c-nav__list > li > a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link)::after { content: none; } .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header[data-pf-link-shape="underline"] .pf-c-nav__content .pf-c-nav__list > li > a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link)::after { content: none; } .pf-c-page .pf-c-header[data-pf-nav-panel][data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul:where(.pf-c-nav__submenu-list) { align-items: flex-end; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0 0.9rem 0 0; } .pf-c-page .pf-c-header[data-pf-nav-panel][data-pf-nav-active="radial"] .pf-c-nav--header[data-pf-link-shape="underline"] .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link)::after { content: none; } @media (max-width: 1100px) { .pf-c-page header[data-pf-nav-active="radial"] .pf-c-burger { 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/01-nav.css */ /* @layer-wrap:site.zones */ @layer site.zones { .pf-c-page header[data-pf-nav-desktop="mega"] .pf-c-nav__item--has-submenu > .pf-c-nav__submenu ul a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { padding-block: 0.5rem; border-bottom: var(--pf-rule-width) solid color-mix(in srgb, currentColor 15%, transparent); } /* --- Derrière le bouton Menu : sous-pages des panneaux (menu-panels.css) --- */ .pf-c-page .pf-c-header[data-pf-nav-panel] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { font-size: 0.92em; } /* --- Flottant : bulles (menu-radial.css) --- */ .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > .pf-c-nav__item > .pf-c-nav__link {/* 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(--pf-nav-text-color, inherit); box-shadow: var(--pf-float-shadow, var(--pf-chip-shadow)); } .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > .pf-c-nav__item > .pf-c-nav__link {/* --pf-nav-bubble-bg : fond d'une bulle choisi par le thème (ex. Verre au survol), sinon celui des menus flottants. */ } .pf-c-page .pf-c-header[data-pf-nav-panel][data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { border: var(--pf-float-edge, 0 solid transparent); background: var(--pf-float-bg, var(--pf-nav-panel-bg)); color: var(--pf-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) { .pf-c-page .pf-c-header[data-pf-nav-panel][data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { 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/links-menus/02-base.css */ /* @layer-wrap:site.zones */ @layer site.zones {} /* 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 { .pf-c-page .pf-c-header[data-pf-nav-panel]:not([data-pf-nav-active="radial"]) .pf-c-nav--header[data-pf-link-shape="underline"] .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { padding: 0.2rem 0 max(0.2rem, var(--pf-nav-underline-width, 2px)); } .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > .pf-c-nav__item > .pf-c-nav__link { padding: var(--pf-nav-link-pad-y, 0.6rem) var(--pf-nav-link-pad-x, 1.1rem); } .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > .pf-c-nav__item > .pf-c-nav__link { 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))); } .pf-c-page .pf-c-header[data-pf-nav-panel][data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list .pf-c-nav__item--has-submenu > .pf-c-nav__submenu a:where(.pf-c-nav__link, .pf-c-footer__heading, .pf-c-footer__contact, .pf-c-socials__link) { 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) { .pf-c-page header[data-pf-nav-active="radial"] .pf-c-nav--header .pf-c-nav__content .pf-c-nav__list > .pf-c-nav__item > .pf-c-nav__link { 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/01-header.css */ /* @layer-wrap:site.dispositions */ @layer site.dispositions { /* Part 1/2 de design/themes/basic/header-layouts.css : composant « header » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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). */ .pf-c-page .pf-c-header[data-pf-header-desktop="bar"] { --pf-island-bg: transparent; --pf-island-blur: none; } .pf-c-page .pf-c-header[data-pf-header-desktop="bar"]::before, .pf-c-page .pf-c-header[data-pf-header-desktop="bar"] .pf-c-header__glass { display: block; border-radius: 0; } .pf-c-page .pf-c-header[data-pf-header-desktop="bar"] .pf-c-header__inner { width: 100%; max-width: var(--layout-width-wide); margin-inline: auto; padding-inline: 0; border: 0; border-radius: 0; box-shadow: none; }} @media (max-width: 1100px) { .pf-c-page header[data-pf-header-mobile] { transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), top 0.35s ease, background-color 0.25s ease; }}} /* assets/css/public/design/themes/basic/header-layouts/02-page.css */ /* @layer-wrap:site.dispositions */ @layer site.dispositions { /* Part 2/2 de design/themes/basic/header-layouts.css : composant « page » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @media (prefers-reduced-motion: reduce) { .pf-c-page header[data-pf-header-mobile] { transition: none; } } } /* assets/css/public/design/themes/basic/header-options/01-burger.css */ /* @layer-wrap:site.dispositions */ @layer site.dispositions { /* Part 1/4 de design/themes/basic/header-options.css : composant « burger » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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). */ .pf-c-page header .pf-c-burger :is(.pf-c-burger__box, .hamburger__svg, .hamburger__svg *) { color: inherit; } @media (max-width: 1100px) { .pf-c-page header[data-pf-nav-button="text"] .pf-c-burger::after, .pf-c-page header[data-pf-nav-button="icon-text"] .pf-c-burger::after { content: "Menu"; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; } .pf-c-page header[data-pf-nav-button="text"] .pf-c-burger[aria-expanded="true"]::after, .pf-c-page header[data-pf-nav-button="icon-text"] .pf-c-burger[aria-expanded="true"]::after { content: "Fermer"; } .pf-c-page header[data-pf-nav-button="text"] .pf-c-burger .pf-c-burger__box, .pf-c-page header[data-pf-nav-button="dots"] .pf-c-burger:not([aria-expanded="true"]) .pf-c-burger__box { display: none; } .pf-c-page header[data-pf-nav-button="icon-text"] .pf-c-burger { gap: 0.45rem; } /* Points : trois points dessinés (pas de police ni d'icône supplémentaire) ; croix à l'ouverture. */ .pf-c-page header[data-pf-nav-button="dots"] .pf-c-burger:not([aria-expanded="true"])::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) { .pf-c-page header[data-pf-nav-button-desktop="text"] .pf-c-burger::after, .pf-c-page header[data-pf-nav-button-desktop="icon-text"] .pf-c-burger::after { content: "Menu"; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; } .pf-c-page header[data-pf-nav-button-desktop="text"] .pf-c-burger[aria-expanded="true"]::after, .pf-c-page header[data-pf-nav-button-desktop="icon-text"] .pf-c-burger[aria-expanded="true"]::after { content: "Fermer"; } .pf-c-page header[data-pf-nav-button-desktop="text"] .pf-c-burger .pf-c-burger__box, .pf-c-page header[data-pf-nav-button-desktop="dots"] .pf-c-burger:not([aria-expanded="true"]) .pf-c-burger__box { display: none; } .pf-c-page header[data-pf-nav-button-desktop="icon-text"] .pf-c-burger { gap: 0.45rem; } /* Points : trois points dessinés (pas de police ni d'icône supplémentaire) ; croix à l'ouverture. */ .pf-c-page header[data-pf-nav-button-desktop="dots"] .pf-c-burger:not([aria-expanded="true"])::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; } } } /* assets/css/public/design/themes/basic/header-options/02-header.css */ /* @layer-wrap:site.dispositions */ @layer site.dispositions { /* Part 2/4 de design/themes/basic/header-options.css : composant « header » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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). */ .pf-c-page header:where(.pf-c-header) { --pf-header-scroll-shadow: 0 10px 24px -14px color-mix(in srgb, var(--pf-ink, #000) 45%, transparent); } } /* assets/css/public/design/themes/basic/header-options/03-nav.css */ /* @layer-wrap:site.dispositions */ @layer site.dispositions { /* Part 3/4 de design/themes/basic/header-options.css : composant « nav » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Lien Contact en bouton : toujours le dernier lien du menu. */ .pf-c-page header[data-pf-header-contact="button"] .pf-c-nav--header .pf-c-nav__list > li:where(.pf-c-nav__item, .pf-c-nav__submenu-item):has(> .pf-c-nav__link--contact) { order: 999; } } /* assets/css/public/design/themes/basic/header-options/04-brand.css */ /* @layer-wrap:site.dispositions */ @layer site.dispositions { /* Part 4/4 de design/themes/basic/header-options.css : composant « brand » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @media (min-width: 1101px) { .pf-c-page header[data-pf-header-hide-desktop~="logo"] .pf-c-brand { display: none; } .pf-c-page header[data-pf-header-hide-desktop~="contact"] .pf-c-nav--header .pf-c-nav__list > li:where(.pf-c-nav__item, .pf-c-nav__submenu-item):has(> .pf-c-nav__link--contact) { display: none; } .pf-c-page header[data-pf-header-rule-desktop="none"] { --pf-header-rule: 0 none; } .pf-c-page header[data-pf-header-rule-desktop="rule"] { --pf-header-rule: var(--pf-theme-header-rule, var(--pf-rule-width, 1px) solid var(--pf-rule-color, currentColor)); } .pf-c-page header[data-pf-header-rule-desktop="shadow"] { --pf-header-rule: 0 none; transition: box-shadow 0.25s ease; } .pf-c-page header[data-pf-header-rule-desktop="shadow"].is-scrolled { box-shadow: var(--pf-header-scroll-shadow); } .pf-c-page header[data-pf-header-gap-desktop="tight"] { --pf-header-logo-gap: 0.4rem; } .pf-c-page header[data-pf-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). */ .pf-c-page header[data-pf-header-contact="button"]:is([data-pf-align="left"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal), [data-pf-align="right"]:where(.pf-c-header, .pf-c-footer, .pf-c-legal)):where(:not([data-pf-nav-menu], [data-pf-header-rail])) .pf-c-nav--header .pf-c-nav__list > li:where(.pf-c-nav__item, .pf-c-nav__submenu-item):has(> .pf-c-nav__link--contact) { margin-inline-start: auto; }} @media (max-width: 1100px) { .pf-c-page header[data-pf-header-hide-mobile~="logo"] .pf-c-brand { visibility: hidden; } .pf-c-page header[data-pf-header-hide-mobile~="contact"] .pf-c-nav--header .pf-c-nav__list > li:where(.pf-c-nav__item, .pf-c-nav__submenu-item):has(> .pf-c-nav__link--contact) { display: none; } .pf-c-page header[data-pf-header-rule-mobile="none"] { --pf-header-rule: 0 none; } .pf-c-page header[data-pf-header-rule-mobile="rule"] { --pf-header-rule: var(--pf-theme-header-rule, var(--pf-rule-width, 1px) solid var(--pf-rule-color, currentColor)); } .pf-c-page header[data-pf-header-rule-mobile="shadow"] { --pf-header-rule: 0 none; transition: box-shadow 0.25s ease; } .pf-c-page header[data-pf-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 */ .pf-c-backdrop, .pf-c-backdrop [data-ark-loader] { background-color: var(--pf-neutral-bg-color); background-image: none; } .pf-c-page .pf-c-header, .pf-c-page footer:where(.pf-c-legal, .pf-c-nav), .pf-c-page .pf-c-nav__item--has-submenu > .pf-c-nav__submenu { 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 */ .pf-c-page { position: relative; } .pf-c-page::after { position: absolute; content: ""; inset: 0; z-index: 0; pointer-events: none; background-image: var(--pf-grain-img, url('../../../assets/media/public/design/background/noise-white.png')); background-repeat: repeat; background-position: center; } .pf-c-page .pf-c-section { position: relative; isolation: isolate; } .pf-c-page .pf-c-section::before { position: absolute; content: ""; inset: 0; z-index: -1; pointer-events: none; background-image: var(--pf-grain-img, url('../../../assets/media/public/design/background/noise-white.png')); background-repeat: repeat; background-position: center; } @layer general { .pf-c-card--landscape .pf-c-card__media, .pf-c-card--square .pf-c-card__media, .pf-c-card--portrait .pf-c-card__media { position: absolute; } .pf-c-card--landscape .pf-c-card__caption, .pf-c-card--square .pf-c-card__caption, .pf-c-card--portrait .pf-c-card__caption { position: absolute; } } } /* assets/css/public/design/thumbnails/list.css */ @layer site.elements.general { /* Version: 20-09-2026-16-46 */ /* Version: 04-09-2026-list-no-text-padding */ /* Mode LISTE */ .pf-c-cards__item--list { 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; } .pf-c-cards__item--list p:where(.pf-c-card__meta, .pf-c-card__excerpt, .pf-c-card__caption-text) { flex: 1; } /* Mode LISTE - Bordure et arrondi sur .pf-c-card__media */ .pf-c-cards__item--list .pf-c-card__media { 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; } .pf-c-cards__item--list .pf-c-card__media::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(--pf-text-main-color, var(--modules-white)); } .pf-c-cards__item--list:hover .pf-c-card__media::after { bottom: 0px; opacity: 1; box-shadow: var(--thumbnail-hover-effect, none); } .pf-c-cards__item--list article:where(.pf-c-card) { padding: 0; } .pf-c-cards__item--list .pf-c-card__body { flex:1; display: flex; flex-direction: column; padding: 0; transition: 0.2s linear; color: var(--pf-ui-label-color, var(--pf-text-main-color, #222)); background-color: transparent; } /* Ensure div/h4 inside list thumbnails follow portfolio text color */ .pf-c-cards__item--list h4:where(.pf-c-card__title, .pf-c-card__caption-title), .pf-c-cards__item--list div:where(.pf-c-card, .pf-c-card__body, .pf-c-card__media, .pf-c-card__caption, .pf-c-media__frame, .youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook) { color: var(--pf-ui-label-color, var(--pf-text-main-color, #222)); } .pf-c-cards__item--list:hover .pf-c-card__body { opacity: 0.7; } } /* assets/css/public/design/thumbnails/main.css */ @layer site.elements.general { /* 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. */ .pf-c-page main :where(.pf-c-card--portrait) .pf-c-card__caption h4:where(.pf-c-card__caption-title), .pf-c-page main [data-pf-ratio="landscape"] h4:where(.pf-c-card__caption-title), .pf-c-page main [data-pf-ratio="square"] h4:where(.pf-c-card__caption-title), .pf-c-page main .pf-c-card--square h4:where(.pf-c-card__caption-title), .pf-c-page main .pf-c-cards__item--list h4:where(.pf-c-card__title, .pf-c-card__caption-title), .pf-c-page main .pf-c-card--tile h4:where(.pf-c-card__title) { 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 */ .pf-c-page main .pf-c-card__caption :is(h4, h5, a, span), .pf-c-page .pf-c-card__caption :is(h4, h5, a, span) { color: var(--pf-thumbnail-overlay-title-color, #ffffff); text-shadow: var(--pf-thumbnail-overlay-text-shadow, none); } .pf-c-page main .pf-c-card__caption p:where(.pf-c-card__caption-text), .pf-c-page .pf-c-card__caption p:where(.pf-c-card__caption-text) { color: var(--pf-thumbnail-overlay-description-color, #ffffff); text-shadow: var(--pf-thumbnail-overlay-text-shadow, none); } /* Couleurs de texte — list.css / tiles.css (chargés avant) définissent la mise en page liste vs tuiles */ .pf-c-cards__item--list .pf-c-card__body, .pf-c-cards__item--list .pf-c-card__body *:where(.pf-c-card__category, .pf-c-card__date, .pf-c-card__excerpt, .pf-c-card__meta, .pf-c-card__title), .pf-c-card--tile .pf-c-card__body, .pf-c-card--tile .pf-c-card__body *:where(.pf-c-card__category, .pf-c-card__date, .pf-c-card__excerpt, .pf-c-card__meta, .pf-c-card__title) { color: var(--pf-ui-label-color, var(--pf-text-main-color, inherit)); } /* Complément mode tuiles uniquement (le mode liste : .pf-c-cards__item--list, sans .pf-c-card--tile sur le lien) */ .pf-c-card--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); } .pf-c-card--tile .pf-c-card__media { 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%); } .pf-c-card--tile .pf-c-card__media::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(--pf-text-main-color, var(--modules-white)); } .pf-c-card--tile:hover .pf-c-card__media::after { bottom: 0px; opacity: 1; box-shadow: var(--thumbnail-hover-effect, none); } .pf-c-card--tile .pf-c-card__body { flex: 1; display: flex; flex-direction: column; color: var(--pf-ui-label-color, var(--pf-text-main-color, #222)); padding: 20px; border-bottom-left-radius: var(--pf-thumbnail-radius, 0%); border-bottom-right-radius: var(--pf-thumbnail-radius, 0%); } /* ========================================== */ /* 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 */ .pf-c-cards__item--list { transition: transform 0.3s ease, filter 0.3s ease; } /* Effets au survol - Mode LISTE (sur .thumbnail) */ .pf-c-cards__item--list:hover { transform: var(--pf-thumbnail-hover-transform, none); filter: var(--pf-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 */ .pf-c-cards__item--list a:where(.pf-c-card) { overflow: visible; } /* Transitions de base pour mode TUILES */ .pf-c-card--tile { transition: transform 0.3s ease, filter 0.3s ease; } /* Ajout d'un fond plus prononcé pour les tuiles uniquement */ .pf-c-card--tile, .customizer-preview-card.pf-c-card--tile, .pf-c-card--tile.customizer-preview-card { background-color: var(--pf-content-bg-color, var(--pf-bg-alt-color, transparent)); } /* Mode liste : titre / meta / description sans fond carte ni padding (comme /public) */ .pf-c-cards--articles .pf-c-cards__item--list > a:where(.pf-c-card):not(.pf-c-card--tile), .pf-c-cards--articles .pf-c-cards__item--list > .customizer-preview-card:not(.pf-c-card--tile), .pf-c-cards__item--list > a:is(.pf-c-card):not(.pf-c-card--tile), .pf-c-cards__item--list > .customizer-preview-card:not(.pf-c-card--tile), .pf-c-cards__item--list .pf-c-card__body { background-color: transparent; } .pf-c-cards--articles .pf-c-cards__item--list:not(:has(.pf-c-card--tile)) article:where(.pf-c-card), .pf-c-cards--articles .pf-c-cards__item--list:not(:has(.pf-c-card--tile)) .pf-c-card__body, .pf-c-cards--articles .pf-c-cards__item--list > a:not(.pf-c-card--tile) article:where(.pf-c-card), .pf-c-cards--articles .pf-c-cards__item--list > a:not(.pf-c-card--tile) .pf-c-card__body, .pf-c-cards--articles .pf-c-cards__item--list > .customizer-preview-card:not(.pf-c-card--tile) article:where(.pf-c-card), .pf-c-cards--articles .pf-c-cards__item--list > .customizer-preview-card:not(.pf-c-card--tile) .pf-c-card__body, .pf-c-cards__item--list > a:not(.pf-c-card--tile) article:where(.pf-c-card), .pf-c-cards__item--list > a:not(.pf-c-card--tile) .pf-c-card__body, .pf-c-cards__item--list > .customizer-preview-card:not(.pf-c-card--tile) article:where(.pf-c-card), .pf-c-cards__item--list > .customizer-preview-card:not(.pf-c-card--tile) .pf-c-card__body, .pf-c-page[data-thumbnail-display-mode="list"] .pf-c-cards__item--list article:where(.pf-c-card), .pf-c-page[data-thumbnail-display-mode="list"] .pf-c-cards__item--list .pf-c-card__body, .pf-c-page[data-thumbnail-display-mode="list"] .pf-c-cards--articles .pf-c-card__body { padding: 0; } /* Effets au survol - Mode TUILES (sur .pf-c-card--tile) */ .pf-c-card--tile:hover { transform: var(--pf-thumbnail-hover-transform, none); filter: var(--pf-thumbnail-hover-filter, brightness(100%)); } /* Contour personnalisé (autrefois classe thumb-border) : sur l'image en mode liste, sur la tuile en mode tuiles. Surcharge list.css et tiles.css (chargés avant). */ /* Mode LISTE : l'image */ .pf-c-cards__item--list .pf-c-card__media { box-sizing: border-box; display: block; width: auto; border-width: var(--pf-thumbnail-border-width, 0px); border-style: var(--pf-thumbnail-border-type, solid); border-color: var(--pf-thumbnail-border-color, #222); box-shadow: var(--pf-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(--pf-thumbnail-radius, 0%); } /* Mode TUILES : la tuile (lien parent) */ .pf-c-card--tile, a.pf-c-card--tile { border-width: var(--pf-thumbnail-border-width, 0px); border-style: var(--pf-thumbnail-border-type, solid); border-color: var(--pf-thumbnail-border-color, #222); border-radius: var(--pf-thumbnail-radius, 0%); box-shadow: var(--pf-thumbnail-box-shadow, none); overflow: hidden; transition: 0.2s linear; } .pf-c-card--tile:hover, a.pf-c-card--tile:hover { /* z-index removed for centralization */ } /* Mode TUILES : ombre sur la tuile entière, pas sur l'illustration */ .pf-c-card--tile .pf-c-card__media, a.pf-c-card--tile .pf-c-card__media { box-shadow: none; border-width: 0; border-style: none; } /* Mode TUILES - Arrondi du thumb enfant pour suivre le parent */ .pf-c-card--tile .pf-c-card__media, a.pf-c-card--tile .pf-c-card__media { border-top-left-radius: var(--pf-thumbnail-radius, 0%); border-top-right-radius: var(--pf-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 ===== */ .pf-c-card--tile.pf-c-card--video { box-shadow: var(--pf-thumbnail-box-shadow, none); overflow: hidden; background-color: var(--pf-content-bg-color, var(--pf-bg-alt-color)); } .pf-c-card--tile.pf-c-card--video .pf-c-card__media { background-size: cover; background-position: center center; position: relative; overflow: hidden; border: none; box-shadow: none; border-top-left-radius: var(--pf-thumbnail-radius, 0%); border-top-right-radius: var(--pf-thumbnail-radius, 0%); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Replace default ¶ with a play icon for videos */ .pf-c-card--tile.pf-c-card--video .pf-c-card__media::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; } .pf-c-card--tile.pf-c-card--video:hover .pf-c-card__media::after { opacity: 1; } /* Mode liste : icône lecture sur vignettes vidéo */ .pf-c-cards__item--list .pf-c-card--video .pf-c-card__media { background-size: cover; background-position: center center; position: relative; overflow: hidden; } .pf-c-cards__item--list .pf-c-card--video .pf-c-card__media::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; } .pf-c-cards__item--list .pf-c-card--video:hover .pf-c-card__media::after { opacity: 1; } .pf-c-cards__item--list .pf-c-card__media::after, .pf-c-card--tile .pf-c-card__media::after { border-radius: inherit; } /* ─────────────────────────────────────────────────────────── */ /* EXTENSION AUX ÉLÉMENTS DE GRILLE (DEMANDE UTILISATEUR) */ /* ─────────────────────────────────────────────────────────── */ /* Contours des cartes et blocs (autrefois classe .border-design dans le HTML) — 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). */ .pf-c-page :is(.pf-c-timeline__card, .pf-c-quote, .pf-c-event, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-service, .pf-c-offer, .pf-c-person__button, .pf-c-profile__infos, .pf-c-faq__item, .pf-c-invitation, .pf-c-hero__cover, .pf-c-biolink-tile__inner, .pf-c-biolink-profile__avatar, .pf-c-biolink-content-card, .pf-c-biolink-content-card__media, .pf-c-biolink-preview-card, .pf-c-biolink-preview-card__media, .pf-c-biolink-creation-gallery__item, .customizer-showreel-demo, .pf-c-card--landscape, .pf-c-card--portrait, .pf-c-card--square, .pf-c-gallery__item, .pf-c-embed):not(.pf-c-cards__item--list .pf-c-card__media):not(:where([data-pf-timeline-layout]:not([data-pf-timeline-layout="list"]) .pf-c-timeline__card, [data-pf-recommendations-layout]:not([data-pf-recommendations-layout="grid"]) .pf-c-quote, [data-pf-casting-layout]:not([data-pf-casting-layout="grid"]) :is(.pf-c-details__item, .pf-c-casting-block--card, .pf-c-timeline__card))), .pf-c-profiles :is(.pf-c-timeline__card, .pf-c-quote, .pf-c-event, .pf-c-details__item, .pf-c-casting-block--card, .pf-c-service, .pf-c-offer, .pf-c-person__button, .pf-c-profile__infos, .pf-c-faq__item, .pf-c-invitation, .pf-c-hero__cover, .pf-c-biolink-tile__inner, .pf-c-biolink-profile__avatar, .pf-c-biolink-content-card, .pf-c-biolink-content-card__media, .pf-c-biolink-preview-card, .pf-c-biolink-preview-card__media, .pf-c-biolink-creation-gallery__item, .customizer-showreel-demo):not(.pf-c-cards__item--list .pf-c-card__media) { border-width: var(--pf-thumbnail-border-width, 0px); border-style: var(--pf-thumbnail-border-type, solid); border-color: var(--pf-thumbnail-border-color, #222); border-radius: var(--pf-thumbnail-radius, 0%); box-shadow: var(--pf-thumbnail-box-shadow, none); box-sizing: border-box; } /* 1. Vertical & Horizontal Grid Items */ .pf-c-card--portrait, .pf-c-card--landscape, .pf-c-profiles .pf-c-profile__infos, .pf-c-profile .pf-c-profile__infos { border-width: var(--pf-thumbnail-border-width, 0px); border-style: var(--pf-thumbnail-border-type, solid); border-color: var(--pf-thumbnail-border-color, #222); border-radius: var(--pf-thumbnail-radius, 0%); box-shadow: var(--pf-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; } .pf-c-card--portrait, .pf-c-card--landscape { overflow: hidden; } .pf-c-profiles .pf-c-profile__infos, .pf-c-profile .pf-c-profile__infos { background-color: var(--pf-content-bg-color, var(--pf-bg-alt-color, transparent)); color: var(--pf-text-main-color, inherit); } .pf-c-card--portrait:hover, .pf-c-card--landscape:hover { transform: var(--pf-thumbnail-hover-transform, none); filter: var(--pf-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ù .pf-c-card__media et .pf-c-card__body partagent l'arrondi haut/bas). */ .pf-c-page .pf-c-card--portrait > .pf-c-card__media, .pf-c-page .pf-c-card--landscape > .pf-c-card__media, .pf-c-profiles .pf-c-card--portrait > .pf-c-card__media, .pf-c-profiles .pf-c-card--landscape > .pf-c-card__media { border-radius: inherit; border: none; box-shadow: none; } /* Vignette œuvre sans image (productions/books/projects/photos/audios) : même dégradé que .pf-c-card__media--empty, appliqué au conteneur qui portait le background-image. */ .pf-c-page .pf-c-card__media.pf-c-card__media--blank, .pf-c-page .pf-c-card--portrait.pf-c-card--empty, .pf-c-page .pf-c-card--square.pf-c-card--empty { background-color: var(--pf-neutral-bg-color); background-image: linear-gradient( 145deg, var(--pf-content-bg-color, var(--pf-bg-alt-color)) 0%, var(--pf-neutral-bg-color) 50%, var(--pf-content-bg-color, var(--pf-bg-alt-color)) 100% ); background-size: cover; background-position: center; } .pf-c-page :is(.pf-c-card--empty, .pf-c-card__media--blank) .pf-c-card__icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(22%, 72px); color: var(--pf-ui-label-color, var(--pf-text-main-color, inherit)); opacity: 0.4; line-height: 0; pointer-events: none; } .pf-c-page :is(.pf-c-card--empty, .pf-c-card__media--blank) .pf-c-card__icon svg:where(.pf-c-icon) { width: 100%; height: auto; display: block; fill: currentColor; } /* Vignette blog sans image : fond et icône selon variables :root (couleur body dérivée). */ .pf-c-card__media.pf-c-card__media--empty { position: relative; background-color: var(--pf-neutral-bg-color); background-image: linear-gradient( 145deg, var(--pf-content-bg-color, var(--pf-bg-alt-color)) 0%, var(--pf-neutral-bg-color) 50%, var(--pf-content-bg-color, var(--pf-bg-alt-color)) 100% ); background-size: cover; background-position: center; } .pf-c-card__media.pf-c-card__media--empty .pf-c-card__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; } .pf-c-card__media.pf-c-card__media--empty .pf-c-card__icon svg:where(.pf-c-icon) { width: 100%; height: auto; display: block; fill: currentColor; } .pf-c-card__media.pf-c-card__media--empty::after, .pf-c-card--tile .pf-c-card__media.pf-c-card__media--empty::after, .pf-c-cards__item--list .pf-c-card__media.pf-c-card__media--empty::after { display: none; content: none; } /* 2. Blog List Items (Renforcement) */ /* Mode Tuiles (conteneur) */ .pf-c-cards--articles .pf-c-card--tile { border-width: var(--pf-thumbnail-border-width, 0px); border-style: var(--pf-thumbnail-border-type, solid); border-color: var(--pf-thumbnail-border-color, #222); border-radius: var(--pf-thumbnail-radius, 0%); box-shadow: var(--pf-thumbnail-box-shadow, none); overflow: hidden; } /* ─────────────────────────────────────────────────────────── */ /* #goto Anchors — appliquer les mêmes contours que .pf-c-card--portrait Sans toucher au fond actuel : on ne change que l'aspect de bordure/arrondi/ombre */ .pf-c-section--platforms article a .pf-c-card__media { border-radius: inherit; } /* Mode LISTE : contour/ombre uniquement sur l'illustration */ .pf-c-cards--articles .pf-c-cards__item--list .pf-c-card__media { border-width: var(--pf-thumbnail-border-width, 0px); border-style: var(--pf-thumbnail-border-type, solid); border-color: var(--pf-thumbnail-border-color, #222); border-radius: var(--pf-thumbnail-radius, 0%); box-shadow: var(--pf-thumbnail-box-shadow, none); } /* Mode LISTE : pas d'ombre sur le conteneur carte / lien (texte hors illustration) */ .pf-c-cards__item--list > a:is(.pf-c-card):not(.pf-c-card--tile):not(.pf-c-card__media), .pf-c-cards__item--list > .customizer-preview-card.pf-c-card { box-shadow: none; border-width: 0; border-style: none; } /* Application des effets de survol/clic pour les listes d'articles si pas déjà appliqués */ .pf-c-cards--articles .pf-c-card--tile:hover, .pf-c-cards--articles .pf-c-cards__item--list:hover { transform: var(--pf-thumbnail-hover-transform, none); filter: var(--pf-thumbnail-hover-filter, brightness(100%)); /* z-index removed for centralization */ } .pf-c-service, .pf-c-faq__item, .pf-c-person__button, .pf-c-event, .pf-c-article__main img:where(.pf-c-article__cover), .youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook { border-width: var(--pf-thumbnail-border-width, 0px); border-style: var(--pf-thumbnail-border-type, solid); border-color: var(--pf-thumbnail-border-color, #222); border-radius: var(--pf-thumbnail-radius, 0%); box-shadow: var(--pf-thumbnail-box-shadow, none); background-color: var(--pf-content-bg-color, var(--pf-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; } .pf-c-page .pf-c-videos .pf-c-card--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 */ .pf-c-timeline__card, .pf-c-quote, .pf-c-timeline__card, .pf-c-casting-block--card, .pf-c-details__item, .pf-c-page .pf-c-avatar, .pf-c-page .pf-c-prose .writer-figure img { border-width: var(--pf-thumbnail-border-width, 0px); border-style: var(--pf-thumbnail-border-type, solid); border-color: var(--pf-thumbnail-border-color, #222); border-radius: var(--pf-thumbnail-radius, 0%); box-shadow: var(--pf-thumbnail-box-shadow, none); background-color: var(--pf-content-bg-color, var(--pf-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; } .pf-c-timeline__card:hover, .pf-c-timeline__card:active, .pf-c-quote:hover, .pf-c-quote:active, .pf-c-timeline__card:hover, .pf-c-timeline__card:active, .pf-c-casting-block--card:hover, .pf-c-casting-block--card:active, .pf-c-details__item:hover, .pf-c-details__item:active, .pf-c-page .pf-c-avatar:hover, .pf-c-page .pf-c-avatar:active, .pf-c-page .pf-c-prose .writer-figure img:hover, .pf-c-page .pf-c-prose .writer-figure img:active { transform: none; filter: none; } .pf-c-service:hover, .pf-c-faq__item:hover, .pf-c-person__button:hover, .pf-c-event:hover { transform: var(--pf-thumbnail-hover-transform, none); filter: var(--pf-thumbnail-hover-filter, brightness(100%)); } /* 4. Square Grid Items — bordure, radius, ombre et fond sur le lien unique */ .pf-c-card--square { border-width: var(--pf-thumbnail-border-width, 0px); border-style: var(--pf-thumbnail-border-type, solid); border-color: var(--pf-thumbnail-border-color, #222); border-radius: var(--pf-thumbnail-radius, 0%); box-shadow: var(--pf-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; } .pf-c-card--square:hover { transform: var(--pf-thumbnail-hover-transform, none); filter: var(--pf-thumbnail-hover-filter, brightness(100%)); /* z-index removed for centralization */ } .pf-c-gallery__item { border-width: var(--pf-thumbnail-border-width, 0px); border-style: var(--pf-thumbnail-border-type, solid); border-color: var(--pf-thumbnail-border-color, #222); border-radius: var(--pf-thumbnail-radius, 0%); box-shadow: var(--pf-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; } .pf-c-gallery__item:hover { transform: var(--pf-thumbnail-hover-transform, none); filter: var(--pf-thumbnail-hover-filter, brightness(100%)); /* z-index removed for centralization */ } /* 5. Galerie albums + grille photos production */ .pf-c-page :where(.pf-c-gallery) a:where(.pf-c-gallery__item) { 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; } .pf-c-page :where(.pf-c-gallery) a:where(.pf-c-gallery__item):hover { transform: var(--pf-thumbnail-hover-transform, none); filter: var(--pf-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 */ :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *) { --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; } :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *):hover, :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *):active { transform: none; filter: none; } /* Legacy : ancienne structure imbriquée (pf-c-card--portrait / pf-c-card__media) */ :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *) .pf-c-card--portrait, :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *) .pf-c-card--square { padding: 0; margin: 0; width: 100%; height: 100%; aspect-ratio: 1 / 1; overflow: hidden; } :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) > :where(.pf-c-hero__cover--poster):is(.pf-c-page *) .pf-c-card__media { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; } } /* assets/css/public/design/platform-links/01-section.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 1/5 de design/platform-links.css : composant « section » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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. */ .pf-c-page .pf-c-section--platforms { scroll-margin-top: 90px; } } /* assets/css/public/design/platform-links/02-platform.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 2/5 de design/platform-links.css : composant « platform » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-section--platforms .pf-c-platforms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--layout-space-y-sm, 15px); } .pf-c-page .pf-c-section--platforms .pf-c-platforms__link, .pf-c-page .pf-c-section--platforms article a.pf-c-platforms__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(--pf-content-bg-color, transparent); border-width: var(--pf-thumbnail-border-width, 1px); border-style: var(--pf-thumbnail-border-type, solid); border-color: var(--pf-thumbnail-border-color, currentColor); border-radius: var(--pf-thumbnail-radius, 0); box-shadow: var(--pf-thumbnail-box-shadow, none); transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; } .pf-c-page .pf-c-section--platforms .pf-c-platforms__link:hover, .pf-c-page .pf-c-section--platforms .pf-c-platforms__link:focus-visible { color: inherit; transform: var(--pf-thumbnail-hover-transform, translateY(-2px)); filter: var(--pf-thumbnail-hover-filter, none); } .pf-c-page .pf-c-section--platforms .pf-c-platforms__link:active { transform: var(--pf-thumbnail-click-transform, scale(0.98)); } .pf-c-page .pf-c-section--platforms .pf-c-platforms__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 */ .pf-c-page .pf-c-section--platforms .pf-c-platforms__open { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--pf-button-text-color, #fff); background-color: var(--pf-button-background-color, #222); background-image: var(--pf-button-gradient, none); border-radius: var(--pf-button-radius, 50%); transition: filter 0.2s ease; } .pf-c-page .pf-c-section--platforms .pf-c-platforms__link:hover .pf-c-platforms__open, .pf-c-page .pf-c-section--platforms .pf-c-platforms__link:focus-visible .pf-c-platforms__open { color: var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff)); filter: var(--pf-button-hover-filter, brightness(110%)); } @media screen and (max-width: 500px) { .pf-c-page .pf-c-section--platforms .pf-c-platforms { grid-template-columns: 1fr; } .pf-c-page .pf-c-section--platforms .pf-c-platforms__link, .pf-c-page .pf-c-section--platforms article a.pf-c-platforms__link { padding: 14px 14px 14px 18px; } } } /* assets/css/public/design/platform-links/03-icon.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 3/5 de design/platform-links.css : composant « icon » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Token direct dans fill : main.css colore tout `.pf-c-page *` (svg compris), currentColor ne suffit pas. */ .pf-c-page .pf-c-section--platforms .pf-c-platforms__link .pf-c-platforms__open svg:where(.pf-c-icon) { display: block; width: 16px; height: 16px; max-height: none; margin: 0; fill: var(--pf-button-text-color, #fff); } .pf-c-page .pf-c-section--platforms .pf-c-platforms__link:hover .pf-c-platforms__open svg:where(.pf-c-icon), .pf-c-page .pf-c-section--platforms .pf-c-platforms__link:focus-visible .pf-c-platforms__open svg:where(.pf-c-icon) { fill: var(--pf-button-hover-text-color, var(--pf-button-text-color, #fff)); } } /* assets/css/public/design/platform-links/04-hero.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 4/5 de design/platform-links.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Bouton du hero (« Où regarder / lire / écouter ») et autres actions de la fiche */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) .pf-c-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--layout-space-y-sm, 15px); } } /* assets/css/public/design/platform-links/05-btn.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 5/5 de design/platform-links.css : composant « btn » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) .pf-c-hero__actions .pf-c-btn { margin: 0; } } /* 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/01-header.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 1/2 de core/fonts.css : composant « header » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* Version: 23-09-2026-20-19 */ /* Police et tailles imposées par les réglages : core/typography.css (couche « typo »). */ .pf-c-page [data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) { text-align: left; margin: 0 auto; } .pf-c-page [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) { text-align: center; margin: 0 auto; } .pf-c-page [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) { text-align: right; margin: 0 auto; } @media screen and (max-width: 1050px) { .pf-c-page :is([data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) { margin-bottom: 0px; } } } /* assets/css/public/core/fonts/02-hero.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Part 2/2 de core/fonts.css : composant « hero » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ @media screen and (max-width: 1050px) { .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) { 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). */ .pf-c-page.pf-c-page, [data-ark-loader][data-pf-font] { font-family: var(--pf-font-name), var(--pf-font-stack, sans-serif); } @layer general { body[data-pf-font], .pf-c-profiles[data-pf-font], [data-pf-font] { font-family: var(--pf-font-name), var(--pf-font-stack, sans-serif); } } .pf-c-page.pf-c-page :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), [data-ark-loader][data-pf-font] :is(span, div), .pf-c-page :is(header, .pf-c-header, footer, .pf-c-footer, .pf-c-legal), .pf-c-page :is(header, .pf-c-header, footer, .pf-c-footer, .pf-c-legal) :is(p, span, a, li, ul, ol, button, nav, div, strong, em, small, label) { font-family: var(--pf-font-name), var(--pf-font-stack, sans-serif); } @layer general { body[data-pf-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), .pf-c-profiles[data-pf-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) { font-family: var(--pf-font-name), var(--pf-font-stack, sans-serif); } /* Taille du texte du portfolio (réglage) : variable du réglage, plus de style="font-size" sur la page. */ .pf-c-page { font-size: var(--pf-font-size-base); } } /* Accroches logo / titres (comme setup/theme) : héritent de .pf-c-page */ .pf-c-page .customizer-dynamic-font { font-family: inherit; } .pf-c-page :is(p, span, a) { font-size: var(--pf-font-size-base); line-height: var(--pf-text-line-height); } @layer general { .arkt-btn:not(:where(.arktefakt-frame--footer, .production-child-modal) *) { font-size: var(--pf-font-size-base); } } /* Typo des titres h1–h6 : voir structure/layout/headings.css */ .pf-c-page :is([data-pf-ratio="landscape"] p, [data-pf-ratio="square"] p, [data-pf-ratio="portrait"] p, .pf-c-card__meta, .pf-c-card__excerpt) { font-size: var(--pf-font-size-meta, calc(var(--pf-font-size-base) * 0.8)); line-height: calc(var(--pf-text-line-height) * 0.8); } } /* assets/css/public/structure/layout/content.css */ @layer site.socle.general { /* 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 : --pf-font-size-base, --pf-heading-* (thème portfolio). * Les fallbacks gardent un rendu lisible hors thème portfolio (hub Writer, register CGV). */ /* -------------------------------------------------------------------------- Conteneur -------------------------------------------------------------------------- */ .pf-c-prose { font-size: var(--pf-font-size-base, 14px); line-height: var(--pf-text-line-height, calc(var(--pf-font-size-base, 14px) + 10px)); letter-spacing: 0.4px; font-weight: inherit; color: inherit; --pf-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"); --pf-content-link-padding-y: 0.15em; --pf-content-link-padding-x: 0.42em; } .pf-c-prose :is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle), .pf-c-prose :is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) p { margin: 20px 0; font-weight: bold; } /* -------------------------------------------------------------------------- Paragraphes et variantes -------------------------------------------------------------------------- */ .pf-c-prose p { margin-bottom: 25px; } .pf-c-prose p.description, .pf-c-prose .writer-editable.description { font-size: calc(var(--pf-font-size-base, 14px) * 1.05); line-height: 1.55; color: inherit; opacity: 0.92; } .pf-c-prose p.commentaire, .pf-c-prose .writer-editable.commentaire { font-size: calc(var(--pf-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); } .pf-c-prose u { text-decoration: underline; } /* Gras et italique (reset + fonts.css annulent les styles navigateur par défaut) */ .pf-c-prose :is(strong, b), .pf-c-prose .writer-editable :is(strong, b) { font-weight: var(--pf-font-weight-bold, 700); } .pf-c-prose :is(em, i), .pf-c-prose .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. */ .pf-c-prose .writer-table { max-width: 100%; margin: 1.2em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; contain: inline-size; } .pf-c-prose .writer-table table { width: 100%; border-collapse: collapse; font-size: 0.95em; } .pf-c-prose .writer-table caption { caption-side: bottom; padding-top: 0.5em; font-size: 0.85em; text-align: left; opacity: 0.75; } .pf-c-prose .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; } .pf-c-prose .writer-table th { font-weight: var(--pf-font-weight-bold, 700); border-bottom-width: 2px; } .pf-c-prose .writer-table :is(th, td).writer-align-center { text-align: center; } .pf-c-prose .writer-table :is(th, td).writer-align-right { text-align: right; } /* Code en ligne (Markdown `code`, collage) : police à chasse fixe, fond léger. */ .pf-c-prose code, .pf-c-prose .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) -------------------------------------------------------------------------- */ .pf-c-prose h1 { font-size: var(--pf-heading-primary-size, 21px); line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size, 21px) + 2px)); font-weight: bold; color: var(--pf-heading-primary-color, inherit); display: block; padding: 0; margin: 0 0 0.75rem; } .pf-c-prose h1 :is(a, span, p, strong, em, b, i, small) { color: inherit; } .pf-c-prose :is(h2, h3, h4, h5, h6) { font-size: var(--pf-heading-secondary-size, 14px); line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size, 14px) + 10px)); font-weight: bold; color: var(--pf-heading-secondary-color, inherit); } .pf-c-prose h2 { margin: 45px 0 0.65rem; } .pf-c-prose h3 { margin: 25px 0 0.65rem; } .pf-c-prose :is(h4, h5, h6) { margin: 0 0 0.65rem; } .pf-c-prose :is(h2, h3, h4, h5, h6) :is(a, span, p, strong, em, b, i, small) { color: inherit; } /* -------------------------------------------------------------------------- Alignement et décalage (Writer) -------------------------------------------------------------------------- */ .pf-c-prose p.writer-align-center, .pf-c-prose blockquote p.writer-align-center { text-align: center; } .pf-c-prose p.writer-align-right, .pf-c-prose blockquote p.writer-align-right { text-align: right; } .pf-c-prose p.writer-align-justify, .pf-c-prose blockquote p.writer-align-justify { text-align: justify; } .pf-c-prose p.writer-indent-1, .pf-c-prose blockquote p.writer-indent-1 { margin-left: 1.25rem; } .pf-c-prose p.writer-indent-2, .pf-c-prose blockquote p.writer-indent-2 { margin-left: 2.5rem; } .pf-c-prose p.writer-indent-3, .pf-c-prose blockquote p.writer-indent-3 { margin-left: 3.75rem; } .pf-c-prose p.writer-indent-4, .pf-c-prose blockquote p.writer-indent-4 { margin-left: 5rem; } .pf-c-prose p.writer-indent-5, .pf-c-prose blockquote p.writer-indent-5 { margin-left: 6.25rem; } /* Éditeur Writer : classes sur .writer-editable (div), pas seulement p */ .pf-c-prose .writer-editable.writer-align-center { text-align: center; } .pf-c-prose .writer-editable.writer-align-right { text-align: right; } .pf-c-prose .writer-editable.writer-align-justify { text-align: justify; } .pf-c-prose .writer-editable.writer-indent-1 { margin-left: 1.25rem; } .pf-c-prose .writer-editable.writer-indent-2 { margin-left: 2.5rem; } .pf-c-prose .writer-editable.writer-indent-3 { margin-left: 3.75rem; } .pf-c-prose .writer-editable.writer-indent-4 { margin-left: 5rem; } .pf-c-prose .writer-editable.writer-indent-5 { margin-left: 6.25rem; } /* -------------------------------------------------------------------------- Mise en page (Writer) -------------------------------------------------------------------------- */ .pf-c-prose hr.writer-separator, .writer-editor.pf-c-prose hr.writer-separator { display: block; width: 100%; height: 0; margin: 1.5rem 0; padding: 0; border: none; border-top: 1px solid var(--pf-color-border, color-mix(in srgb, currentColor 22%, transparent)); border-top-color: color-mix( in srgb, var(--pf-button-background-color, var(--pf-heading-secondary-color, currentColor)) 55%, var(--pf-color-border-custom, var(--pf-color-border, currentColor)) 45% ); background: transparent; opacity: 0.9; } .pf-c-prose .writer-spacer { display: block; width: 100%; height: 10px; margin: 0; padding: 0; border: none; background: transparent; } .pf-c-prose .writer-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; width: 100%; margin: 1rem 0; } .pf-c-prose .writer-column { min-width: 0; } .pf-c-prose .writer-column > :first-child { margin-top: 0; } .pf-c-prose .writer-column > :last-child { margin-bottom: 0; } @media (max-width: 768px) { .pf-c-prose .writer-columns { grid-template-columns: 1fr; gap: 1rem; } } /* -------------------------------------------------------------------------- Citations -------------------------------------------------------------------------- */ .pf-c-page .pf-c-prose blockquote, .pf-c-page .pf-c-prose blockquote :is(p, span, cite, em, strong, b, i, li) { color: var(--pf-body-text-color, var(--pf-text-main-color, inherit)); } .pf-c-prose blockquote { position: relative; padding: 50px; margin-top: 30px; margin-bottom: 20px; } .pf-c-prose blockquote * { margin: 0; font-weight: bold; } .pf-c-prose blockquote::before { position: absolute; content: '❝'; font-size: 60px; left: 0; top: 0; } .pf-c-prose 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). */ .pf-c-prose ul:where(:not(nav.pf-c-breadcrumb *)), .pf-c-prose ol:where(:not(nav.pf-c-breadcrumb *)) { margin-bottom: 25px; } .pf-c-prose ul li:where(:not(nav.pf-c-breadcrumb *)), .pf-c-prose ol li:where(:not(nav.pf-c-breadcrumb *)) { margin-left: 15px; padding-left: 15px; margin-bottom: 20px; line-height: calc(1em + 15px); } .pf-c-prose ul li:where(:not(nav.pf-c-breadcrumb *)) { list-style-type: disc; } .pf-c-prose ol li:where(:not(nav.pf-c-breadcrumb *)) { list-style-type: decimal; } /* -------------------------------------------------------------------------- Figures et médias intégrés -------------------------------------------------------------------------- */ .pf-c-prose .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); } .pf-c-prose .writer-figure img { display: block; max-width: 100%; height: auto; border-radius: var(--pf-thumbnail-radius, 0); } .pf-c-prose .writer-figure > :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook) { margin-bottom: 0; } /* Légende : 1re ligne / gras = titre, reste = description. */ .pf-c-prose .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(--pf-font-size-base, 14px) * 0.9); line-height: 1.55; opacity: 0.78; } .pf-c-prose .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; } .pf-c-prose .writer-figure figcaption:empty { display: none; } .pf-c-prose .youtube, .pf-c-prose .vimeo, .pf-c-prose .dailymotion, .pf-c-prose .tiktok, .pf-c-prose .instagram, .pf-c-prose .facebook { max-width: 100%; box-sizing: border-box; margin-bottom: 1.5rem; } .pf-c-prose .youtube:not(.video-portrait), .pf-c-prose .vimeo, .pf-c-prose .dailymotion, .pf-c-prose .facebook:not(.video-portrait) { position: relative; height: 0; overflow: hidden; padding-top: 0; padding-bottom: 56.25%; } .pf-c-prose .vimeo { padding-bottom: 56.25%; } .pf-c-prose .youtube:not(.video-portrait) iframe, .pf-c-prose .vimeo iframe, .pf-c-prose .dailymotion iframe, .pf-c-prose .facebook:not(.video-portrait) iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .pf-c-prose :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; } .pf-c-prose :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) { .pf-c-prose :is(.tiktok, .instagram, .youtube.video-portrait, .facebook.video-portrait) { max-height: 85svh; } } .pf-c-prose .youtube iframe, .pf-c-prose .dailymotion iframe, .pf-c-prose iframe, .pf-c-prose video, .pf-c-prose embed, .pf-c-prose object { max-width: 100%; box-sizing: border-box; } .pf-c-prose video { height: auto; } .pf-c-page .pf-c-prose :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover, .pf-c-page .pf-c-prose :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active, .pf-c-page .pf-c-article__media:is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover, .pf-c-page .pf-c-article__media :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):hover, .pf-c-page .pf-c-article__media:is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook):active, .pf-c-page .pf-c-article__media :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) -------------------------------------------------------------------------- */ .pf-c-prose a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):where(:not(nav.pf-c-breadcrumb *))::after, .pf-c-prose p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a))::after, .pf-c-article__lead:where(.pf-c-prose) a::after, .pf-c-article__lead:where(.pf-c-prose) p a::after, .writer-page .writer-editor.pf-c-prose 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(--pf-content-link-icon) no-repeat center / contain; mask: var(--pf-content-link-icon) no-repeat center / contain; text-decoration: none; pointer-events: none; } /* Hub Writer : priorité sur fonts.css (p, a { font-size: var(--pf-font-size-base) !important }) */ .writer-page form .writer-editor.pf-c-prose { font-size: 14px; line-height: calc(1em + 14px); letter-spacing: normal; } .writer-page .writer-editor.pf-c-prose { font-size: var(--pf-font-size-base, 14px); line-height: calc(1em + 14px); } .writer-page .writer-editor.pf-c-prose :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.pf-c-prose :is(strong, b) { font-weight: var(--pf-font-weight-bold, 700) !important; } .writer-page .writer-editor.pf-c-prose :is(em, i) { font-style: italic !important; } /* Modes d'écriture (paragraphe, description, commentaire) : même taille dans l'éditeur */ .writer-page .writer-editor.pf-c-prose :is( p.description, .writer-editable.description, p.commentaire, .writer-editable.commentaire ) { font-size: inherit; line-height: inherit; } .writer-page .writer-editor.pf-c-prose h1 { font-size: var(--pf-heading-primary-size, 21px) !important; line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size, 21px) + 2px)) !important; } .writer-page .writer-editor.pf-c-prose :is(h2, h3, h4, h5, h6) { font-size: var(--pf-heading-secondary-size, 14px) !important; line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size, 14px) + 10px)) !important; } .writer-page .writer-editor.pf-c-prose a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)), .writer-page .writer-editor.pf-c-prose 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(--pf-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.pf-c-prose a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active), .writer-page .writer-editor.pf-c-prose p a:not(:is(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)):is(:hover, :active) { color: var(--pf-button-background-color, currentColor) !important; background: none !important; box-shadow: none !important; } .writer-page .writer-editor.pf-c-prose img, .writer-page .writer-editor.pf-c-prose .writer-figure img { max-width: 100%; height: auto; box-sizing: border-box; } /* Placeholder éditeur (zones contenteditable vides) */ .writer-editor.pf-c-prose .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 -------------------------------------------------------------------------- */ .pf-c-page .pf-c-prose img, .pf-c-page .pf-c-article__lead img:where(.pf-c-article__cover), .pf-c-page .pf-c-article__body:where(.pf-c-prose) img, .pf-c-page .pf-c-article__main img:where(.pf-c-article__cover) { max-width: 100%; height: auto; box-sizing: border-box; filter: none; transform: none; transition: none; } .pf-c-page .pf-c-prose img:hover, .pf-c-page .pf-c-article__lead img:where(.pf-c-article__cover):hover, .pf-c-page .pf-c-article__body:where(.pf-c-prose) img:hover, .pf-c-page .pf-c-article__main img:where(.pf-c-article__cover):hover, .pf-c-page .pf-c-prose img:active, .pf-c-page .pf-c-article__lead img:where(.pf-c-article__cover):active, .pf-c-page .pf-c-article__body:where(.pf-c-prose) img:active, .pf-c-page .pf-c-article__main img:where(.pf-c-article__cover):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. */ .pf-c-page .pf-c-author--card .pf-c-author__row { display: flex; align-items: center; gap: 24px; max-width: var(--layout-width-read); margin-bottom: 24px; } .pf-c-page .pf-c-author--card .pf-c-author__row .pf-c-avatar { flex: 0 0 auto; margin: 0; } .pf-c-page .pf-c-author--card .pf-c-author__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .pf-c-page .pf-c-author--card .pf-c-author__body > * { margin: 0; } .pf-c-page .pf-c-author--card .pf-c-author__socials .pf-c-socials { margin-bottom: 0; justify-content: flex-start; } /* Droite : miroir de la gauche. */ .pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row { flex-direction: row-reverse; margin-left: auto; text-align: right; } .pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__body { align-items: flex-end; } .pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__socials .pf-c-socials { justify-content: flex-end; } /* Centre : pile verticale centrée. */ .pf-c-page .pf-c-author--card [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row { flex-direction: column; margin-inline: auto; text-align: center; } .pf-c-page .pf-c-author--card [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__body { align-items: center; } .pf-c-page .pf-c-author--card [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__socials .pf-c-socials { justify-content: center; } /* Petit écran : pile verticale quel que soit l'alignement. */ @media screen and (max-width: 700px) { .pf-c-page .pf-c-author--card .pf-c-author__row, .pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row { flex-direction: column; align-items: flex-start; } .pf-c-page .pf-c-author--card [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row { align-items: center; } .pf-c-page .pf-c-author--card [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) .pf-c-author__row { 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 --pf-* / --layout-*. Dans #title-about (flex colonne, gap --layout-space-y-sm) : aucune marge propre. -------------------------------------------------------------------------- */ .pf-c-page .pf-c-genai { 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(--pf-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(--pf-text-main-color, #222); font-family: inherit; font-size: calc(var(--pf-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. */ .pf-c-page .pf-c-section--specs article .pf-c-genai-row .pf-c-genai-row__value { max-width: none; flex: 0 0 auto; } /* Bulle à droite : infobulle ancrée à droite pour ne pas déborder. */ .pf-c-page .pf-c-genai-row .pf-c-genai__tip { left: auto; right: 0; } .pf-c-page .pf-c-genai-row .pf-c-genai__tip::after { left: auto; right: var(--layout-space-x-md, 20px); } /* Fin de la section « A propos ». */ .pf-c-page .pf-c-genai-mention--about { margin-top: var(--layout-space-y-md, 25px); } /* Article de blog : sous le sous-titre, avant l'illustration. */ .pf-c-page .pf-c-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. */ .pf-c-page :not(.pf-c-genai-mention, .pf-c-section--specs li) > .pf-c-genai { margin-block: var(--layout-space-y-sm, 15px); } /* Survol : flou réduit, opacité 0.8 */ .pf-c-page .pf-c-genai:hover, .pf-c-page .pf-c-genai: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. */ .pf-c-page .pf-c-genai:is(:hover, :focus-visible) > :is(.pf-c-genai__icon, .pf-c-genai__label) { opacity: 0.8; } .pf-c-page .pf-c-genai:focus-visible { outline: 2px solid var(--pf-text-main-color, #222); outline-offset: 2px; } .pf-c-page .pf-c-genai__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(--pf-nav-links-radius, 0px); background: var(--pf-theme-fill, var(--pf-text-main-color, #0f0f0f)); color: var(--pf-theme-bg-main, var(--pf-bg-main-color, #fafafa)); font-size: 0.8em; font-weight: var(--pf-font-weight-bold, 600); letter-spacing: 0.06em; } .pf-c-page [data-pf-genai="none"] .pf-c-genai__icon { background: transparent; color: var(--pf-text-main-color, #222); border: 1px dashed var(--pf-border-strong-color, #bdbdbd); text-decoration: line-through; } .pf-c-page .pf-c-genai__label { color: inherit; white-space: nowrap; } /* Infobulle : habillage de la bulle elle-même. */ .pf-c-page .pf-c-genai__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(--pf-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(--pf-bg-contrast-transparence-color, rgba(139, 139, 139, 0.14)), var(--pf-bg-contrast-transparence-color, rgba(139, 139, 139, 0.14))), var(--pf-bg-main-color, #fafafa); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--pf-text-main-color, #222); box-shadow: var(--pf-shadow-box-shadow, 0 6px 20px rgba(0, 0, 0, 0.18)); font-size: inherit; line-height: var(--pf-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; } .pf-c-page .pf-c-genai__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; } .pf-c-page .pf-c-genai:is(:hover, :focus-visible) .pf-c-genai__tip { opacity: 1; transform: none; } @media screen and (max-width: 700px) { .pf-c-page .pf-c-genai__label { white-space: normal; } } @media (prefers-reduced-motion: reduce) { .pf-c-page .pf-c-genai, .pf-c-page .pf-c-genai__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. * Planchers : --pf-read-floor (texte) et --pf-read-floor-heading (chapô) sont des LONGUEURS (le max() ne mélange pas un nombre * et une longueur). Le mode commun et le thème de départ les écrivent (= --pf-text-line-height / --pf-heading-secondary-line-height) ; * un thème dont l'interligne est un NOMBRE (--pf-text-line-height: 1.55) ne les pose pas : pas de plancher, règle toujours valide. * Chargé après fonts.css, content.css et headings.css (leurs règles sont surclassées par .pf-c-page). */ @layer general { html:where(:root) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } } .pf-c-page { --pf-read-min: 15px; /* Gabarit des cibles tactiles (mobile) : boutons-icônes de lecture, de partage, de la visionneuse, des filtres. */ --pf-c-touch-target: 44px; } @media (max-width: 650px) { .pf-c-page { --pf-read-min: 16px; } } /* -------------------------------------------------------------------------- Texte courant -------------------------------------------------------------------------- */ .pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(p, li, dd, td, th, blockquote, figcaption, span, a, em, strong, code, small):not(:is(h1, h2, h3, h4, h5, h6, .pf-c-reading-tools, nav.pf-c-breadcrumb) *) { font-size: calc(max(var(--pf-font-size-base, 14px), var(--pf-read-min)) * var(--pf-read-scale, 1)); line-height: max(var(--pf-read-floor, 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 */ .pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(p.description, .writer-editable.description) { font-size: calc(max(var(--pf-font-size-base, 14px), var(--pf-read-min)) * 1.05 * var(--pf-read-scale, 1)); opacity: 1; } .pf-c-page main .pf-c-article__lead h2.pf-c-article__subtitle, .pf-c-page main .pf-c-article__lead h2.pf-c-article__subtitle :is(p, span, a, strong, em, b, i, small) { font-size: calc(max(var(--pf-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...) */ .pf-c-page main :is(p, dd):not(:is(.pf-c-prose, .pf-c-reading, .pf-c-socials, button, a, .arkt-btn, [data-pf-ratio="landscape"], [data-pf-ratio="square"], [data-pf-ratio="portrait"], h1, h2, h3, h4, h5, h6) *):not(.pf-c-reading-tools__title) { line-height: max(var(--pf-read-floor, 0px), calc(1em * var(--pf-read-lh, 1.75))); } .pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(p.commentaire, .writer-editable.commentaire, figcaption) { font-size: calc(max(var(--pf-font-size-base, 14px), var(--pf-read-min)) * 0.92 * var(--pf-read-scale, 1)); } .pf-c-page :is(.pf-c-prose, .pf-c-reading) :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. */ .pf-c-page :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) :is(.pf-c-prose, .pf-c-reading) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) { max-width: var(--layout-width-read); } .pf-c-page :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) :is([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))):is(.pf-c-prose, .pf-c-reading) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *), .pf-c-page :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) :is([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) :is(.pf-c-prose, .pf-c-reading) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) { margin-inline: auto; } .pf-c-page :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) :is([data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))):is(.pf-c-prose, .pf-c-reading) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *), .pf-c-page :is(.pf-w-wide, [data-pf-width="wide"], .pf-c-header__inner, .pf-c-nav__submenu-list, .pf-c-footer__main, .pf-c-legal__list) :is([data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) :is(.pf-c-prose, .pf-c-reading) :is(p, ul, ol, dl, blockquote):not(:is(.writer-columns, .writer-figure, table) *) { margin-left: auto; } .pf-c-page :is(.pf-c-prose, .pf-c-reading) :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) -------------------------------------------------------------------------- */ .pf-c-page :is(.pf-c-prose, .pf-c-reading) h1:where(.pf-c-hero__title) { font-size: calc(var(--pf-heading-primary-size, 2em) * var(--pf-read-scale, 1)); } .pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(h2, h3, h4, h5, h6) { font-size: calc(var(--pf-heading-secondary-size, 1.4em) * var(--pf-read-scale, 1)); } .pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(h1, h2, h3, h4, h5, h6):not(:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle)) { line-height: max(var(--pf-read-floor-heading, 0px), 1.3em); } .pf-c-page :is(.pf-c-prose, .pf-c-reading) :is(h1, h2, h3, h4, h5, h6) { text-wrap: balance; overflow-wrap: break-word; } /* -------------------------------------------------------------------------- Citations : moins massives, lisibles -------------------------------------------------------------------------- */ .pf-c-page .pf-c-prose 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). */ .pf-c-page .pf-c-article__body.pf-c-prose > :last-child { margin-bottom: 0; } .pf-c-page .pf-c-prose blockquote * { font-weight: 500; font-style: italic; } .pf-c-page .pf-c-prose blockquote::before { font-size: 2.5rem; line-height: 1; left: 0.75rem; top: 0.5rem; opacity: 0.55; } .pf-c-page .pf-c-prose blockquote::after { content: none; } /* -------------------------------------------------------------------------- Méta : plancher de lisibilité -------------------------------------------------------------------------- */ .pf-c-page :is(.pf-c-card__meta, .pf-c-card__excerpt, :where(.pf-c-author--byline .pf-c-author__body):is(.pf-c-page *) .pf-c-author__date, :where(.pf-c-author--byline .pf-c-author__body):is(.pf-c-page *) .pf-c-author__name) { font-size: max(var(--pf-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. -------------------------------------------------------------------------- */ .pf-c-page { --pf-ctl-ink: var(--pf-body-text-color, var(--pf-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; } @media (max-width: 650px) { .pf-c-page { --pf-ctl-size: var(--pf-c-touch-target, 44px); } } @layer general { .pf-c-reading-tools[hidden] { display: none; } .pf-c-reading-tools__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pf-c-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-c-reading-tools__btn, .pf-c-share__action { 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-c-share__action svg:where(.pf-c-icon), .pf-c-share__action svg :is(path, circle, rect, polygon), .pf-c-reading-tools__btn svg:where(.pf-c-reading-tools__icon) :is(path, circle, rect) { transition: fill 0.3s ease, stroke 0.3s ease, color 0.3s ease; } .pf-c-share__action svg:where(.pf-c-icon) { width: 20px; height: 20px; fill: currentColor; stroke: none; } .pf-c-reading-tools__btn svg:where(.pf-c-reading-tools__icon) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pf-c-reading-tools__btn:hover:not(:disabled), .pf-c-reading-tools__btn:focus-visible, .pf-c-share__action: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). */ .pf-c-page .pf-c-article__meta .pf-c-share__action:is(:hover, :focus-visible, .is-copied), .pf-c-page .pf-c-article__meta .pf-c-reading-tools__btn:is(:hover, :focus-visible):not(:disabled) { background: var(--pf-ctl-tint); color: var(--pf-ctl-ink); filter: none; box-shadow: none; } .pf-c-page .pf-c-article__meta .pf-c-share__action:is(:hover, :focus-visible, .is-copied) svg:where(.pf-c-icon), .pf-c-page .pf-c-article__meta .pf-c-share__action:is(:hover, :focus-visible, .is-copied) svg :is(path, circle, rect, polygon) { fill: var(--pf-ctl-ink); color: var(--pf-ctl-ink); } .pf-c-page .pf-c-article__meta .pf-c-reading-tools__btn:is(:hover, :focus-visible):not(:disabled) svg :is(path, circle, rect) { stroke: var(--pf-ctl-ink); color: var(--pf-ctl-ink); } @layer general { .pf-c-reading-tools__btn:focus-visible, .pf-c-share__action:focus-visible { outline: 2px solid var(--pf-ctl-ink); outline-offset: 1px; } .pf-c-reading-tools__btn:disabled { opacity: 0.3; cursor: default; } .pf-c-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-c-reading-tools__sep { align-self: stretch; width: 1px; margin: 9px 2px; background: var(--pf-ctl-line); } .pf-c-reading-tools--compact { margin: 0 0 1.5rem; } /* Partage : icônes fantômes (markup dédié, indépendant du design « social » du portfolio) */ .pf-c-share__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--pf-ctl-ink-soft); } .pf-c-share__list li:where(.pf-c-share__item) { margin: 0; padding: 0; list-style: none; } .pf-c-share__action.is-copied { color: var(--pf-ctl-ink); background: var(--pf-ctl-tint); } } @media (max-width: 480px) { .pf-c-page .pf-c-article__main .pf-c-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) -------------------------------------------------------------------------- */ .pf-c-page :is(.pf-c-prose, .pf-c-article__lead) a:not(:is(h1, h2, h3, h4, h5, h6, .pf-c-reading-tools, nav.pf-c-breadcrumb) *) { 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(--pf-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; } .pf-c-page :is(.pf-c-prose, .pf-c-article__lead) a:not(:is(h1, h2, h3, h4, h5, h6, .pf-c-reading-tools, nav.pf-c-breadcrumb) *):is(:hover, :active, :focus-visible) { color: var(--pf-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. */ .pf-c-page :is(.pf-c-prose, .pf-c-reading) nav.pf-c-breadcrumb :is(ol, li, a, span), .pf-c-page :is(.pf-c-prose, .pf-c-reading) nav.pf-c-breadcrumb a:where(.pf-c-breadcrumb__link)::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: var(--pf-c-touch-target, 44px); height: var(--pf-c-touch-target, 44px); } 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. */ @layer general { nav.pf-c-breadcrumb { display: block; min-width: 0; } nav.pf-c-breadcrumb > ol:where(.pf-c-breadcrumb__list), ul.pf-c-breadcrumb { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; align-items: center; flex-wrap: wrap; font-size: .85em; } .pf-c-breadcrumb li:where(.pf-c-breadcrumb__item) { display: flex; align-items: center; gap: .15rem; min-width: 0; } /* Alignement calé sur le titre qui suit (data-pf-align). */ nav.pf-c-breadcrumb:has(+ h1[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) > ol:where(.pf-c-breadcrumb__list) { justify-content: center; } nav.pf-c-breadcrumb:has(+ h1[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) > ol:where(.pf-c-breadcrumb__list) { justify-content: flex-end; } /* Zones « À propos » (hero, blocs) : l'alignement est posé sur le conteneur (data-pf-align), le fil suit le texte. Centré / droite : pas de décalage de la pastille du premier lien. */ [data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) nav.pf-c-breadcrumb > ol:where(.pf-c-breadcrumb__list) { justify-content: center; } [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) nav.pf-c-breadcrumb > ol:where(.pf-c-breadcrumb__list) { justify-content: flex-end; } [data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) nav.pf-c-breadcrumb > ol:where(.pf-c-breadcrumb__list) { justify-content: flex-start; } } .pf-c-page :is([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) :is(.pf-c-prose, .pf-c-reading) nav.pf-c-breadcrumb li:first-child > a:where(.pf-c-breadcrumb__link), .pf-c-page :is(.pf-c-prose, .pf-c-reading):is([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) nav.pf-c-breadcrumb li:first-child > a:where(.pf-c-breadcrumb__link) { margin-left: 0; } @layer general { :is([data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), [data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list))) nav.pf-c-breadcrumb li:first-child > a:where(.pf-c-breadcrumb__link) { margin-left: 0; } /* Séparateur : petit chevron dessiné, couleur du texte atténuée. */ .pf-c-breadcrumb li + li:where(.pf-c-breadcrumb__item)::before { content: ''; flex-shrink: 0; /* Taille du chevron ; un thème qui le remplace par un caractère règle ces variables (auto). */ width: var(--pf-breadcrumb-sep-width, 6px); height: var(--pf-breadcrumb-sep-height, 6px); margin: 0 4px 0 2px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); color: var(--pf-text-main-color, #666); opacity: .35; } .pf-c-breadcrumb a:where(.pf-c-breadcrumb__link) { 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(--pf-button-radius, 0px); background: transparent; opacity: .6; transition: background .2s linear, opacity .2s linear; } } /* Couleur : passe devant le fourre-tout « .pf-c-page * » du socle (même couche : par la spécificité). */ .pf-c-page .pf-c-breadcrumb a:where(.pf-c-breadcrumb__link) { color: var(--pf-text-main-color, #666); } @layer general { .pf-c-breadcrumb a:where(.pf-c-breadcrumb__link) { color: var(--pf-text-main-color, #666); } .pf-c-breadcrumb a:where(.pf-c-breadcrumb__link):hover, .pf-c-breadcrumb a:where(.pf-c-breadcrumb__link):focus-visible { outline: none; opacity: 1; background: var(--pf-bg-contrast-transparence-color, rgba(255,255,255,0.6)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .pf-c-breadcrumb a:where(.pf-c-breadcrumb__link):focus-visible { box-shadow: 0 0 0 2px var(--pf-text-main-color, #666); } } /* Le texte du premier lien s'aligne sur le titre ; la pastille de survol déborde à gauche. */ .pf-c-page :is(.pf-c-prose, .pf-c-reading) nav.pf-c-breadcrumb li:first-child > a:where(.pf-c-breadcrumb__link) { margin-left: -10px; } @layer general { nav.pf-c-breadcrumb li:first-child > a:where(.pf-c-breadcrumb__link) { margin-left: -10px; } /* Page courante : texte simple, sans pastille. */ .pf-c-breadcrumb [aria-current="page"] { display: inline-block; max-width: 24rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 4px 0 4px 4px; color: var(--pf-text-main-color, #666); opacity: .45; } /* Titres de catégorie des listes : lien vers la page de la catégorie, discret. */ .pf-c-section__title-link { color: inherit; text-decoration: none; transition: opacity .2s linear; } .pf-c-section__title-link:hover, .pf-c-section__title-link:focus-visible { opacity: .7; } } @media (max-width: 600px) { /* Mobile : un seul lien de retour vers le parent (« ‹ Romans »). */ @layer general { nav.pf-c-breadcrumb li:where(.pf-c-breadcrumb__item):not(.pf-c-breadcrumb__item--parent) { display: none; } } .pf-c-page :is(.pf-c-prose, .pf-c-reading) nav.pf-c-breadcrumb li.pf-c-breadcrumb__item--parent > a:where(.pf-c-breadcrumb__link) { margin-left: -10px; } @layer general { nav.pf-c-breadcrumb li.pf-c-breadcrumb__item--parent > a:where(.pf-c-breadcrumb__link) { margin-left: -10px; } nav.pf-c-breadcrumb li.pf-c-breadcrumb__item--parent::before { display: none; } nav.pf-c-breadcrumb li.pf-c-breadcrumb__item--parent > a:where(.pf-c-breadcrumb__link)::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.pf-c-breadcrumb li:not(:last-child) a:where(.pf-c-breadcrumb__link) { max-width: 8rem; } } } @media print { @layer general { .pf-c-breadcrumb { display: none; } } } } /* assets/css/public/design/themes/basic/footer/01-footer.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 1/5 de design/themes/basic/footer.css : composant « footer » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* 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. */ .pf-c-page .pf-c-footer .pf-c-footer__signature { display: none; } /* ========================================================================== 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). */ .pf-c-page .pf-c-footer.pf-c-nav :is(.pf-c-footer__main, .pf-c-footer__about, .pf-c-footer__pages, .pf-c-footer__pages > ul, .pf-c-footer__social, .pf-c-footer__signature) { text-align: var(--pf-align-text); } .pf-c-page .pf-c-footer.pf-c-nav :is(.pf-c-footer__main, .pf-c-footer__pages, .pf-c-footer__pages > ul, .pf-c-footer__pages li, .pf-c-footer__heading-item, .pf-c-footer__social, .pf-c-footer__social .pf-c-socials, .pf-c-footer__signature) { justify-content: var(--pf-align-justify); } /* 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) { .pf-c-page .pf-c-footer__pages:is(.pf-cols-sm-2, .pf-c-footer__pages--grid) > .pf-c-footer__social { grid-column: 1 / -1; } } } /* assets/css/public/design/themes/basic/footer/02-legal.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 2/5 de design/themes/basic/footer.css : composant « legal » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* fonts.css fixe la taille des span en !important : la signature suit son conteneur. */ .pf-c-page footer:where(.pf-c-legal, .pf-c-nav) { position: relative; } /* 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. */ .pf-c-page .pf-c-legal ul:where(.pf-c-legal__list) { justify-content: var(--pf-align-justify); text-align: var(--pf-align-text); } } /* assets/css/public/design/themes/basic/footer/03-nav.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 3/5 de design/themes/basic/footer.css : composant « nav » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* ========================================================================== 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. */ .pf-c-page .pf-c-footer .pf-c-nav__list > li:where(.pf-c-nav__item) { display: flex; } .pf-c-page .pf-c-footer__pages > ul > li:where(.pf-c-nav__item):not(.pf-c-footer__heading-item) { /* Réglage « Espacement » : footer-options.css. */ margin-bottom: var(--pf-footer-link-gap, 15px); align-items: flex-start; } } /* assets/css/public/design/themes/basic/footer/04-social.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 4/5 de design/themes/basic/footer.css : composant « social » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ .pf-c-page .pf-c-footer .pf-c-footer__social .pf-c-socials { gap: 10px; } .pf-c-page .pf-c-footer .pf-c-footer__social .pf-c-socials li:where(.pf-c-socials__item) { margin: 0; } } /* assets/css/public/design/themes/basic/footer/05-legal.css */ /* @layer-wrap:site.zones */ @layer site.zones { /* Part 5/5 de design/themes/basic/footer.css : composant « legal » (découpage par composant, lot 5b ; la cascade de la feuille d'origine est gardée). */ /* ========================================================================== 3. Mentions légales (#legal) : petite ligne de liens texte (la liste n'est pas un menu : legal__list) ========================================================================== */ .pf-c-page .pf-c-legal { display: flex; position: relative; } .pf-c-page .pf-c-legal ul:where(.pf-c-legal__list) { display: flex; flex-wrap: wrap; /* Écart par gap (pas de marge à droite des li) : l'alignement centré / droite tombe juste. */ gap: 2px 15px; } .pf-c-page .pf-c-legal ul li:where(.pf-c-legal__item) { margin: 0; } /* Taille volontairement petite et indépendante des réglages typo / nav du thème (fonts.css applique --pf-nav-font-size au header et au pied de page). */ /* Liens texte simples, couleur du texte du thème utilisateur. */ .pf-c-page .pf-c-legal a:where(.pf-c-legal__link, .pf-c-legal__version) { color: var(--pf-text-main-color); text-decoration: none; text-underline-offset: 0.15em; } .pf-c-page .pf-c-legal a:where(.pf-c-legal__link, .pf-c-legal__version):focus-visible { outline: 2px solid color-mix(in srgb, var(--pf-text-main-color) 45%, transparent); outline-offset: 2px; } } /* 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 { .pf-c-page .pf-c-footer .pf-c-footer__signature span:where(.pf-c-footer__signature-text) { font-size: inherit; line-height: inherit; } .pf-c-page .pf-c-footer.pf-c-nav .pf-c-footer__about :is(a.pf-c-footer__heading, p, div, span, li) { text-align: var(--pf-align-text); } .pf-c-page footer.pf-c-legal, .pf-c-page footer.pf-c-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 {} /* 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 .pf-c-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 .pf-c-page .pf-c-footer[data-pf-footer-hide-desktop~="description"] .pf-c-footer__about p:where(.pf-c-footer__text) { display: none; } :root .pf-c-page .pf-c-footer[data-pf-footer-hide-desktop~="contact"] .pf-c-footer__about .pf-c-footer__contact { display: none; } :root .pf-c-page .pf-c-footer[data-pf-footer-hide-desktop~="headings"] .pf-c-footer__pages .pf-c-footer__heading-item { display: none; } :root .pf-c-page .pf-c-footer[data-pf-footer-hide-desktop~="socials"] .pf-c-footer__pages .pf-c-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 .pf-c-page .pf-c-footer[data-pf-footer-hide-desktop~="socials"] { --pf-footer-no-socials: 1; } :root .pf-c-page .pf-c-footer[data-pf-footer-hide-desktop~="socials"] .pf-c-footer__pages:is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid) { --cols: 2; --cols-lg-auto: 2; } :root .pf-c-page .pf-c-footer[data-pf-footer-hide-desktop~="signature"] .pf-c-footer__signature { display: none; } /* --- Espacement --- */ :root .pf-c-page .pf-c-footer[data-pf-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 .pf-c-page .pf-c-footer[data-pf-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 .pf-c-page .pf-c-footer[data-pf-footer-rule-desktop="none"] { --pf-footer-rule: 0 none; } :root .pf-c-page .pf-c-footer[data-pf-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 .pf-c-page :is(.pf-c-footer, .pf-c-legal)[data-pf-footer-rule-desktop="contrast"] { --pf-footer-rule: 0 none; --pf-chrome-bg: color-mix(in srgb, var(--pf-text-main-color, #111) 8%, var(--pf-theme-bg-main, #fff)); } :root .pf-c-page :is(.pf-c-footer, .pf-c-legal)[data-pf-footer-rule-desktop="contrast"]::before { display: block; } } /* ========================================================================== Mobile (≤ 1100 px) ========================================================================== */ @media (max-width: 1100px) { :root .pf-c-page .pf-c-footer[data-pf-footer-hide-mobile~="description"] .pf-c-footer__about p:where(.pf-c-footer__text) { display: none; } :root .pf-c-page .pf-c-footer[data-pf-footer-hide-mobile~="contact"] .pf-c-footer__about .pf-c-footer__contact { display: none; } :root .pf-c-page .pf-c-footer[data-pf-footer-hide-mobile~="headings"] .pf-c-footer__pages .pf-c-footer__heading-item { display: none; } :root .pf-c-page .pf-c-footer[data-pf-footer-hide-mobile~="socials"] .pf-c-footer__pages .pf-c-footer__social { display: none; } :root .pf-c-page .pf-c-footer[data-pf-footer-hide-mobile~="socials"] { --pf-footer-no-socials: 1; } :root .pf-c-page .pf-c-footer[data-pf-footer-hide-mobile~="socials"] .pf-c-footer__pages:is(.pf-cols-3, .pf-c-infos:where([data-pf-cols="3"]), .pf-c-footer__pages--grid) { --cols: 2; } :root .pf-c-page .pf-c-footer[data-pf-footer-hide-mobile~="signature"] .pf-c-footer__signature { display: none; } :root .pf-c-page .pf-c-footer[data-pf-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 .pf-c-page .pf-c-footer[data-pf-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 .pf-c-page .pf-c-footer[data-pf-footer-rule-mobile="none"] { --pf-footer-rule: 0 none; } :root .pf-c-page .pf-c-footer[data-pf-footer-rule-mobile="rule"] { --pf-footer-rule: var(--pf-theme-footer-rule, var(--pf-rule-width, 1px) solid var(--pf-rule-color, currentColor)); } :root .pf-c-page :is(.pf-c-footer, .pf-c-legal)[data-pf-footer-rule-mobile="contrast"] { --pf-footer-rule: 0 none; --pf-chrome-bg: color-mix(in srgb, var(--pf-text-main-color, #111) 8%, var(--pf-theme-bg-main, #fff)); } :root .pf-c-page :is(.pf-c-footer, .pf-c-legal)[data-pf-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 */ [data-ark-loader] { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 790; background-color: var( --pf-theme-bg-main, var(--pf-bg-main-color, var(--pf-color-bg-main, #fafafa)) ); color: var(--pf-body-text-color, var(--pf-text-main-color, inherit)); font-family: var(--pf-font-name), var(--pf-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 [data-ark-loader] { display: none; opacity: 0; visibility: hidden; pointer-events: none; } [data-ark-loader]::before { content: ""; position: absolute; inset: 0; background-color: inherit; background-image: none; pointer-events: none; transition: opacity 420ms ease, background 420ms ease; } [data-ark-loader].loader-hidden::before { opacity: 0; } @layer general { .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(--pf-icon-color, var(--pf-body-text-color, var(--pf-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(--pf-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; } } @layer general { .ark-loader-label { color: var(--pf-body-text-color, var(--pf-text-main-color, inherit)); font-family: var(--pf-font-name), var(--pf-font-stack, sans-serif); font-size: var(--pf-font-size-base); font-weight: 400; letter-spacing: var(--pf-letter-spacing, 0.4px); line-height: var(--pf-text-line-height, 1.2); text-align: center; opacity: 0.88; } } [data-ark-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) .pf-c-page { opacity: 1; visibility: visible; z-index: auto; } html:not(.ark-page-ready) .pf-c-page > :is(header, .pf-c-header, footer, .pf-c-footer, .pf-c-legal) { opacity: 1; visibility: visible; position: relative; z-index: 820; } html:not(.ark-page-ready) .pf-c-page > :not(header):not(.pf-c-header):not(footer):not(.pf-c-footer):not(.pf-c-legal):not([data-ark-loader]) { opacity: 0; } html.ark-page-ready .pf-c-page { opacity: 1; visibility: visible; transition: none; } @media (max-width: 600px) { @layer general { .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) { [data-ark-loader] { transition: opacity 160ms linear, visibility 0s linear 160ms; } [data-ark-loader]::before { transition: opacity 160ms linear; } @layer general { .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"] */ .pf-c-page { --ark-reveal-duration: 520ms; --ark-reveal-distance: 18px; --ark-reveal-stagger: 70ms; --ark-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); } .pf-c-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; } .pf-c-page .ark-reveal.ark-reveal--fade { transform: none; will-change: opacity; } .pf-c-page .ark-reveal.is-revealed { opacity: 1; transform: none; } html.ark-reveal-skip .pf-c-page .ark-reveal, html[data-ark-reveal="off"] .pf-c-page .ark-reveal { opacity: 1; transform: none; transition: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { .pf-c-page { --ark-reveal-duration: 0ms; --ark-reveal-distance: 0px; --ark-reveal-stagger: 0ms; } .pf-c-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) */ @layer general { .pf-c-cards__item--list:active { transform: var(--pf-thumbnail-click-transform, none); transition: transform 0.1s ease; } /* Effets au clic - Mode TUILES (sur .thumbnail-tile) */ .pf-c-card--tile:active { transform: var(--pf-thumbnail-click-transform, none); transition: transform 0.1s ease; } /* Styling for video hover - Zoom disabled as requested */ .pf-c-card--tile.pf-c-card--video:hover, .pf-c-card--tile.pf-c-card--video:focus, .pf-c-card--tile.pf-c-card--video:active { transform: none; filter: var(--pf-thumbnail-hover-filter, brightness(100%)); box-shadow: var(--pf-thumbnail-box-shadow, none); } .pf-c-card--portrait:active, .pf-c-card--landscape:active { transform: var(--pf-thumbnail-click-transform, none); transition: transform 0.1s ease; } } @layer general { .pf-c-cards--articles .pf-c-card--tile:active, .pf-c-cards--articles .pf-c-cards__item--list:active { transform: var(--pf-thumbnail-click-transform, none); } .pf-c-service:active, .pf-c-faq__item:active, .pf-c-person__button:active, .pf-c-event:active { transform: var(--pf-thumbnail-click-transform, none); transition: transform 0.1s ease; } .pf-c-card--square:active { transform: var(--pf-thumbnail-click-transform, none); transition: transform 0.1s ease; } .pf-c-gallery__item:active { transform: var(--pf-thumbnail-click-transform, none); transition: transform 0.1s ease; } } .pf-c-gallery:where([data-pf-page="gallery-album"] *) a:where(.pf-c-gallery__item):active, .pf-c-gallery:where(:not([data-pf-page="gallery-album"] *)) a:where(.pf-c-gallery__item):active { transform: var(--pf-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. */ .pf-c-page :is(.pf-c-cards__item--list, .pf-c-card--tile, .pf-c-card--portrait, .pf-c-card--landscape):has(iframe, video, embed, object), .pf-c-page :is(.pf-c-cards__item--list, .pf-c-card--tile, .pf-c-card--portrait, .pf-c-card--landscape):has(iframe, video, embed, object):is(:hover, :focus, :focus-within, :active), .pf-c-page :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook, .pf-c-media__frame), .pf-c-page :is(.youtube, .vimeo, .dailymotion, .tiktok, .instagram, .facebook, .pf-c-media__frame):is(:hover, :focus, :focus-within, :active) { transform: none; filter: none; outline: none; } } /* assets/css/backoffice/structure/feedback/roast.css */ @layer site.socle.general { /* 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.general { /* 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 --pf-logo-title-size (dérivé du curseur setup / customizer) */ .pf-c-page .pf-c-brand .pf-c-brand__title { font-size: var(--pf-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(--pf-logo-transform); line-height: calc(var(--pf-logo-title-size, 20px) + 2px); font-weight: bold; margin: 0; padding: 0; } /* Sur mobile : taille déduite de la « Taille du logo » mobile, si elle est réglée. */ @media (max-width: 1100px) { .pf-c-page .pf-c-brand .pf-c-brand__title { font-size: var(--pf-logo-title-size-mobile, var(--pf-logo-title-size, 20px)); line-height: calc(var(--pf-logo-title-size-mobile, var(--pf-logo-title-size, 20px)) + 2px); } } /* Titres principaux de contenu (h1) — sélecteurs hors blocs TinyMCE */ .pf-c-page .pf-c-article__header h1:where(.pf-c-article__title), .pf-c-page .pf-c-author--card h1:where(.pf-c-article__title, .pf-c-error__title, .pf-c-hero__title, .pf-c-home-feature__title, .pf-c-identity__name), .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h1:where(.pf-c-hero__title), .pf-c-page :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h1:where(.pf-c-hero__title), .pf-c-page main h1:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs), .pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) section article h1:where(.pf-c-hero__title, .pf-c-identity__name), .pf-c-page .pf-c-error h1:where(.pf-c-error__title), .pf-c-page main section:where(.pf-c-hero):is(.pf-c-page *) > div > h1:where(.pf-c-hero__title) { font-size: var(--pf-heading-primary-size); line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size) + 2px)); font-weight: bold; color: var(--pf-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(--pf-set-title-transform, var(--pf-title-transform)); } .pf-c-page .pf-c-article__header h1 :is(a, span, p, strong, em, b, i, small), .pf-c-page .pf-c-author--card h1 :is(a, span, p, strong, em, b, i, small), .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h1 :is(a, span, p, strong, em, b, i, small), .pf-c-page :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h1 :is(a, span, p, strong, em, b, i, small), .pf-c-page main h1:is(.pf-w-content, [data-pf-width="content"], .pf-c-consent-prefs) :is(a, span, p, strong, em, b, i, small), .pf-c-page main.pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) section article h1 :is(a, span, p, strong, em, b, i, small), .pf-c-page .pf-c-error h1 :is(a, span, p, strong, em, b, i, small), .pf-c-page main section:where(.pf-c-hero):is(.pf-c-page *) > div > h1 :is(a, span, p, strong, em, b, i, small) { color: var(--pf-heading-primary-color); } /* Bloc « A propos » sur les fiches : nom du portfolio (title_about) — échelle h2 du thème, couleur du texte courant */ .pf-c-page .pf-c-author--card .pf-c-author__name, .pf-c-page .pf-c-article__aside .pf-c-author__name { font-size: var(--pf-heading-secondary-size); line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px)); font-weight: bold; color: inherit; margin-top: 0; } .pf-c-page .pf-c-author--card .pf-c-author__name :is(a, span, p, strong, em, b, i, small), .pf-c-page .pf-c-article__aside .pf-c-author__name :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. */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) { --pf-c-hero-title-color: var(--pf-heading-primary-color); --pf-c-hero-subtitle-color: var(--pf-heading-secondary-color); } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) h1:where(.pf-c-hero__title), .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where(.pf-c-hero__present):is(.pf-c-page *) h1:where(.pf-c-article__title, .pf-c-error__title, .pf-c-hero__title, .pf-c-home-feature__title, .pf-c-identity__name) { font-size: var(--pf-heading-primary-size); line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size) + 2px)); font-weight: bold; color: var(--pf-c-hero-title-color); display: block; padding: 0; } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) h1 :is(a, span, p, strong, em, b, i, small), .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where(.pf-c-hero__present):is(.pf-c-page *) h1 :is(a, span, p, strong, em, b, i, small) { color: var(--pf-c-hero-title-color); } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) h2:where(.pf-c-hero__subtitle) { font-size: var(--pf-heading-secondary-size); line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px)); font-weight: bold; color: var(--pf-c-hero-subtitle-color); } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) h2 :is(a, span, p, strong, em, b, i, small), .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :where(.pf-c-hero__present):is(.pf-c-page *) h2 :is(a, span, p, strong, em, b, i, small) { color: var(--pf-c-hero-subtitle-color); } .pf-c-page section.pf-c-home-feature { --pf-c-home-feature-title-color: var(--pf-heading-primary-color); --pf-c-home-feature-subtitle-color: var(--pf-heading-secondary-color); } .pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__text):is(.pf-c-page *) h1:where(.pf-c-home-feature__title), .pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__present):is(.pf-c-page *) h1:where(.pf-c-article__title, .pf-c-error__title, .pf-c-hero__title, .pf-c-home-feature__title, .pf-c-identity__name) { font-size: var(--pf-heading-primary-size); line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size) + 2px)); font-weight: bold; color: var(--pf-c-home-feature-title-color); display: block; padding: 0; } .pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__text):is(.pf-c-page *) h1 :is(a, span, p, strong, em, b, i, small), .pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__present):is(.pf-c-page *) h1 :is(a, span, p, strong, em, b, i, small) { color: var(--pf-c-home-feature-title-color); } .pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__text):is(.pf-c-page *) h2:where(.pf-c-home-feature__subtitle) { font-size: var(--pf-heading-secondary-size); line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px)); font-weight: bold; color: var(--pf-c-home-feature-subtitle-color); margin: 0; } .pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__text):is(.pf-c-page *) h2 :is(a, span, p, strong, em, b, i, small), .pf-c-page section.pf-c-home-feature :where(.pf-c-home-feature__present):is(.pf-c-page *) h2 :is(a, span, p, strong, em, b, i, small) { color: var(--pf-c-home-feature-subtitle-color); } /* Accueil — couleur du texte d'introduction quand l'image est en fond (réglage du hero / de la vedette) : posée en variable sur le paragraphe par le PHP (style en ligne interdit par la grammaire, sauf variables --pf-*). */ .pf-c-page :where(.pf-c-hero__lead)[style*="--pf-c-hero-lead-color"] { color: var(--pf-c-hero-lead-color); } .pf-c-page :where(.pf-c-home-feature__lead)[style*="--pf-c-home-feature-lead-color"] { color: var(--pf-c-home-feature-lead-color); } /* Accueil — rythme vertical commun hero + vedettes : marges sous titre / sous-titre uniquement */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :is(:where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *), :where(.pf-c-hero__present):is(.pf-c-page *)) h1:where(.pf-c-hero__title), .pf-c-page section.pf-c-home-feature :is(:where(.pf-c-home-feature__text):is(.pf-c-page *), :where(.pf-c-home-feature__present):is(.pf-c-page *)) h1:where(.pf-c-home-feature__title) { margin: 0 0 8px; } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__inner):is(.pf-c-page *) :is(:where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *), :where(.pf-c-hero__present):is(.pf-c-page *)) h2:where(.pf-c-hero__subtitle), .pf-c-page section.pf-c-home-feature :is(:where(.pf-c-home-feature__text):is(.pf-c-page *), :where(.pf-c-home-feature__present):is(.pf-c-page *)) h2:where(.pf-c-home-feature__subtitle) { margin: 0 0 20px; } /* Équipe (/team) — nom membre h1, rôle h2 */ .pf-c-page .pf-c-identity h1:where(.pf-c-identity__name), .pf-c-profiles .pf-c-identity h1:where(.pf-c-identity__name) { font-size: var(--pf-heading-primary-size); line-height: var(--pf-heading-primary-line-height, calc(var(--pf-heading-primary-size) + 2px)); font-weight: bold; color: var(--pf-heading-primary-color); margin: 0; padding: 0; } .pf-c-page .pf-c-identity h1 :is(a, span, p, strong, em, b, i, small), .pf-c-profiles .pf-c-identity h1 :is(a, span, p, strong, em, b, i, small) { color: var(--pf-heading-primary-color); } .pf-c-page .pf-c-identity h2:where(.pf-c-identity__role), .pf-c-profiles .pf-c-identity h2:where(.pf-c-identity__role) { font-size: var(--pf-heading-secondary-size); line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px)); font-weight: bold; color: var(--pf-heading-secondary-color); margin: 0; padding: 0; } .pf-c-page .pf-c-identity h2 :is(a, span, p, strong, em, b, i, small), .pf-c-profiles .pf-c-identity h2 :is(a, span, p, strong, em, b, i, small) { color: var(--pf-heading-secondary-color); } /* Sous-titres de hero (ex. « De … », sous-titre album) */ .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h2:where(.pf-c-hero__subtitle), .pf-c-page :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h2:where(.pf-c-hero__subtitle) { font-size: var(--pf-heading-secondary-size); line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px)); font-weight: bold; color: var(--pf-heading-secondary-color); margin: 0; } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h2 :is(a, span, p, strong, em, b, i, small), .pf-c-page :where([data-pf-page-type="single"] .pf-c-hero__body):is(.pf-c-page *) :where([data-pf-page-type="single"] .pf-c-hero__text):is(.pf-c-page *) h2 :is(a, span, p, strong, em, b, i, small) { color: var(--pf-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. */ .pf-c-page main h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) { font-size: var(--pf-heading-secondary-size); line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px)); font-weight: bold; color: var(--pf-heading-secondary-color); margin-top: 0; padding: 0; } .pf-c-page main h2[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), .pf-c-page main h2:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), .pf-c-page main h3[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), .pf-c-page main h3:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align="left"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) { text-align: left; } .pf-c-page main h2[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), .pf-c-page main h2:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), .pf-c-page main h3[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), .pf-c-page main h3:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align="center"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) { text-align: center; } .pf-c-page main h2[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), .pf-c-page main h2:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), .pf-c-page main h3[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), .pf-c-page main h3:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align="right"]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) { 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) { .pf-c-page .pf-c-article .pf-c-article__aside > article.pf-c-article__aside-about > h2[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) { text-align: center; } } .pf-c-page main h2.pf-c-section__title :is(a, span, p, strong, em, b, i, small), .pf-c-page main h2:is(.pf-mt-lg, .pf-c-btn:where([data-pf-page="project"] .pf-c-hero__text > *)) :is(a, span, p, strong, em, b, i, small), .pf-c-page main h3[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) :is(a, span, p, strong, em, b, i, small), .pf-c-page main h3:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) :is(a, span, p, strong, em, b, i, small), .pf-c-page main section:not(.pf-c-backdrop) > article > h2 :is(a, span, p, strong, em, b, i, small), .pf-c-page main h2:is(.pf-c-article__subtitle, .pf-c-gate__label, .pf-c-error__code, .pf-c-error__subtitle) :is(a, span, p, strong, em, b, i, small) { color: var(--pf-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ù * l'alignement n'est volontairement pas émis. `data-pf-align` ne pilote 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. * « section:not(.pf-c-backdrop) » (jamais vrai pour une section) garde la spécificité de l'ancien :not(.demo-pair-section). * 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`. */ .pf-c-page main h2.pf-c-section__title, .pf-c-page main h2:is(.pf-mt-lg, .pf-c-btn:where([data-pf-page="project"] .pf-c-hero__text > *)), .pf-c-page main h3[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), .pf-c-page main h3:is([class*="pf-pb-"], .pf-c-section__title:where([data-pf-page-type="home"] *, .pf-c-author--card *, [data-pf-page="project"] :has(~ .pf-c-cards), [data-pf-page="book"] :has(~ .pf-c-cards), [data-pf-page="production"] :has(~ .pf-c-cards)), .pf-c-hero__subtitle:where([data-pf-page="discography-album"] *))[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), .pf-c-page main section:not(.pf-c-backdrop) > article > h2:where(.pf-c-error__code, .pf-c-error__subtitle, .pf-c-section__title) { font-size: var(--pf-heading-secondary-size); line-height: var(--pf-heading-secondary-line-height, calc(var(--pf-heading-secondary-size) + 10px)); font-weight: bold; color: var(--pf-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(--pf-set-title-transform, var(--pf-title-transform)); } /* Titres de sections (accueil / modules) : couleur « titres » du setup, pas « sous-titres » */ .pf-c-page main section.pf-c-section h2.pf-c-section__title, .pf-c-page main section.pf-c-section:not(.customizer-demo-section) h2.pf-c-section__title, .pf-c-page main section.pf-c-section h3[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)), .pf-c-page main section.pf-c-section:not(.customizer-demo-section) h3[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) { color: var(--pf-heading-primary-color); } .pf-c-page main section.pf-c-section h2.pf-c-section__title :is(a, span, p, strong, em, b, i, small), .pf-c-page main section.pf-c-section:not(.customizer-demo-section) h2.pf-c-section__title :is(a, span, p, strong, em, b, i, small), .pf-c-page main section.pf-c-section h3[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) :is(a, span, p, strong, em, b, i, small), .pf-c-page main section.pf-c-section:not(.customizer-demo-section) h3[data-pf-align]:where(:not(.pf-c-header, .pf-c-footer, .pf-c-legal, .pf-c-services__list)) :is(a, span, p, strong, em, b, i, small) { color: var(--pf-heading-primary-color); } .pf-c-page .pf-c-article__lead h2.pf-c-article__subtitle, .pf-c-page .pf-c-article__lead h2.pf-c-article__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 */ .pf-c-page main :where(p, li, dd, blockquote, figcaption, td, th) { color: var(--pf-body-text-color, var(--pf-text-main-color, inherit)); } .pf-c-page :where(.pf-c-hero):is(.pf-c-page *) :where([data-pf-page-type="home"] .pf-c-hero__text):is(.pf-c-page *) :where(p, li), .pf-c-page .pf-c-home-feature :where(.pf-c-home-feature__text):is(.pf-c-page *) :where(p, li) { color: var(--pf-body-text-color, var(--pf-text-main-color, inherit)); } /* Pied de page : description sous le titre + coordonnées (hors .footer-heading) */ .pf-c-page footer .pf-c-footer__about :where(p, div, span, li) { color: var(--pf-body-text-color, var(--pf-text-main-color, inherit)); } /* Labels vignettes blog : dérivés du fond, hors override texte courant */ .pf-c-page .pf-c-card__body, .pf-c-page .pf-c-card__body :is(p, h4, h5, div, span, time), .pf-c-page [data-pf-ratio="landscape"] p:where(.pf-c-card__caption-text), .pf-c-page [data-pf-ratio="portrait"] p:where(.pf-c-card__caption-text), .pf-c-page [data-pf-ratio="square"] p:where(.pf-c-card__caption-text) { color: var(--pf-ui-label-color, var(--pf-text-main-color, inherit)); } /* Séparateurs entre sections, header et footer */ .pf-c-page main > section + section:where(.pf-c-section) { border-top: var(--pf-section-divider-width, 1px) solid var(--pf-section-divider-color, var(--pf-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. */ .pf-c-page .pf-c-header { border-bottom: var(--pf-header-rule, var(--pf-theme-header-rule, var(--pf-section-divider-width, 1px) solid var(--pf-section-divider-color, var(--pf-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. */ .pf-c-page .pf-c-footer { border-top: var(--pf-footer-rule, var(--pf-theme-footer-rule, var(--pf-section-divider-width, 1px) solid var(--pf-section-divider-color, var(--pf-ui-border-color, #e0e0e0)))); } .pf-c-page main > section:where(.pf-c-section):first-child { border-top: none; } /* Icônes UI générales (hors réseaux sociaux) */ .pf-c-page .pf-c-section--platforms .pf-c-platforms__open svg:where(.pf-c-icon) { fill: currentColor; } .pf-c-page .pf-c-main:where(:is([data-pf-page="about"], [data-pf-page="team"], [data-pf-page="sitemap"], [data-pf-page^="legal-"]) *) .pf-c-section--services .pf-c-services__item--popular li:where(.pf-c-service__feature) { color: var(--pf-body-text-color, var(--pf-text-main-color, inherit)); } } /* assets/css/public/structure/overlay/media-protect.css */ /* @layer-wrap:site.socle */ @layer site.socle { /* Version: 31-10-2026 */ /* Médias protégés (assets/js/public/media-protect.js) : images non sélectionnables sur tout portfolio ; voile posé sur * les lecteurs vidéo et commandes maison d'un portfolio privé (classes posées par le script). Chargée quand * ark_portfolio_media_protected() est vrai (condition « medias_proteges »). * Placement seulement : les boutons ronds sont ceux de la visionneuse (button.ak-viewer-ctl, viewer-controls.css). * Les commandes passent toujours sur l'image d'une vidéo : texte et dégradé fixes, jamais les couleurs du thème. */ .pf-media-protect img, .pf-media-protect video, .pf-media-protect picture { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; } /* Le cadre garde la position que lui donnent les feuilles des vidéos ; relative quand aucune ne la pose. */ .pf-is-media-protected { position: relative; isolation: isolate; } .pf-c-media-shield { position: absolute; inset: 0; z-index: 1; background: transparent; cursor: pointer; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* Lecteurs sans API (Dailymotion, TikTok, Instagram, Facebook) : seule la bande du titre et des liens est couverte. */ .pf-c-media-shield--top { bottom: auto; height: 22%; min-height: 3.5rem; cursor: default; } button.ak-viewer-ctl.pf-c-media-shield__play { position: absolute; inset: 0; z-index: 2; width: 4rem; height: 4rem; margin: auto; } button.ak-viewer-ctl.pf-c-media-shield__play svg, button.ak-viewer-ctl.pf-c-media-shield__play svg path { width: 2rem; height: 2rem; } .pf-is-media-protected:not(.is-paused) .pf-c-media-shield__play { display: none; } .pf-c-media-shield__bar { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; align-items: center; gap: 0.5rem; padding: 1.5rem 0.75rem 0.5rem; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7)); color: #ffffff; transition: opacity 0.25s ease; } .pf-c-media-shield__bar button.ak-viewer-ctl { flex: 0 0 auto; } .pf-c-media-shield__progress { flex: 1 1 auto; min-width: 0; margin: 0; accent-color: #ffffff; cursor: pointer; } .pf-c-media-shield__volume { flex: 0 0 5rem; width: 5rem; margin: 0; accent-color: #ffffff; cursor: pointer; } .pf-c-media-shield__time { flex: 0 0 auto; font-size: 0.75rem; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Lecture sans mouvement de souris : commandes et curseur s'effacent. */ .pf-is-media-protected.is-idle .pf-c-media-shield__bar { opacity: 0; pointer-events: none; } .pf-is-media-protected.is-idle .pf-c-media-shield { cursor: none; } /* Le plein écran du navigateur étire déjà le cadre (règles du navigateur) ; fond noir autour de la vidéo. */ .pf-is-media-protected:fullscreen { background: #000000; } @media screen and (max-width: 600px) { .pf-c-media-shield__volume, .pf-c-media-shield__time { display: none; } } }