/* 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%; } /* Contraste automatique : le texte reste masqué le temps que sa couleur soit calculée, pour qu'il apparaisse directement dans sa teinte définitive au lieu de basculer après coup. Le dégradé, lui, reste visible : seule la typo est révélée en fondu. */ :where(.pf-c-card__caption).is-pending :is(h4, h5, p) { opacity: 0; } :where(.pf-c-card__caption).is-visible :is(h4, h5, p) { opacity: 1; transition: opacity 160ms linear; } .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)); } .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 setup, 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, 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; } } /* 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 : dérivé du fond des contenus et du contour de l'utilisateur. */ --pf-glass-bg: color-mix(in srgb, var(--pf-surface) 55%, transparent); --pf-glass-edge: var(--pf-thumbnail-contour-color, color-mix(in srgb, #fff 40%, transparent)); --pf-glass-shadow: 0 16px 40px color-mix(in srgb, #000 12%, transparent); --pf-drop-shadow: 0 10px 25px color-mix(in srgb, #000 18%, transparent); --pf-panel-shadow: 0 10px 30px color-mix(in srgb, #000 14%, transparent); --pf-panel-shadow-up: 0 -8px 24px color-mix(in srgb, #000 8%, transparent); /* Panneaux de menu (feuille, tiroir, palette, bulles) et voile derrière eux. */ --pf-backdrop: color-mix(in srgb, #000 35%, transparent); --pf-sheet-shadow: 0 12px 40px color-mix(in srgb, #000 18%, transparent); --pf-sheet-shadow-strong: 0 30px 80px color-mix(in srgb, #000 35%, transparent); --pf-sheet-shadow-side: -24px 0 60px color-mix(in srgb, #000 18%, transparent); --pf-sheet-shadow-up: 0 -18px 50px color-mix(in srgb, #000 20%, transparent); --pf-drawer-shadow: -18px 0 50px color-mix(in srgb, #000 20%, transparent); --pf-bubble-shadow: 0 10px 30px color-mix(in srgb, #000 30%, transparent); --pf-chip-shadow: 0 6px 20px color-mix(in srgb, #000 18%, transparent); /* Survol / clic de l'utilisateur, à composer avec les transformations décoratives (rotate: …). */ --pf-hover: var(--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); --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)); } } /* 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)); 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)); opacity: 0; transform: translateY(0.5rem); transition: opacity 0.3s ease, transform 0.3s ease; } .pf-c-page .pf-c-cards--articles[data-pf-layout="mosaic"] .pf-c-card--tile:is(:hover, :focus-visible) .pf-c-card__body { opacity: 1; transform: none; } .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)); color: var(--pf-on-media); } .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; width: 6px; height: 6px; margin: 0 4px 0 2px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); color: var(--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; } /* 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; } } }