/* assets/css/public/core/reset.css */
/* @layer-wrap:site.reset */
@layer site.reset {
/* Version: 20-09-2026-16-46 */
/* RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, a, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}

p, ul, span, a, h1, h2, h3, h4, h5, h6, article div, form, .tab, #delete main {
	position: relative;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
    color: #ffffff;
    overflow-x: hidden;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

fieldset {
    border: 0px;
}

.unexist {
    cursor: default;
    width: 90%;
    text-align: center;
    padding: 5vh 5%;
}

* {
    word-wrap: break-word;
}

/* Graisse et interlettrage par défaut, hors chrome hub (éditeur de thème, overlay) : :where garde la spécificité
 * de *, la remise à zéro ci-dessus (font: inherit) l'emporte sur les éléments qu'elle liste. */
:where(*:not(:is(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal), :is(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *)) {
    letter-spacing: 0.4px;
    font-weight: 400;
}
}

/* assets/css/public/structure/layout/zindex.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 23-09-2026-20-19 */
/* Portfolios */
#portfolio_page main article {
    z-index: 2;
}

#title-illustration {
    z-index: 0;
}

/* Fonds décoratifs (grain, grille) — sous le contenu */
#portfolio_page {
    isolation: isolate;
}

#portfolio_page::after {
    z-index: 0;
}

#portfolio_page > *:not(#loader):not(header):not(footer):not(#welcome-to):not(#welcome-to-blur) {
    position: relative;
    z-index: 1;
}

.about-artist-img {
    position: relative;
    z-index: 10;
}

.pf-thumbs--landscape a,
.pf-thumbs--square a,
.pf-thumbs--portrait a {
    z-index: 10;
}

p,
ul,
span,
a,
h1,
h2,
h3,
h4,
h5,
h6,
article div,
form,
.tab,
#delete main {
    z-index: 5;
}

.table-design {
    z-index: 15;
}

/* Header: above content but below overlays */
#arktefakt-header {
    z-index: 800;
}

#arktefakt-burger,
.arktefakt-burger {
    z-index: 850;
}

#portfolio-content-interface,
#hub-content-interface {
    z-index: 900;
}

#arktefakt-top-bar {
    z-index: 910;
}

/* Content / components */
.content-article img,
.article img {
    z-index: 1;
}

.content-article blockquote::before,
.content-article blockquote::after {
    z-index: 10;
}

.welcome-to-window {
    z-index: 180;
}

#welcome-to-blur {
    z-index: 170;
}

.list-tickets a {
    z-index: 5;
}

.services-slider .arrow {
    z-index: 20;
}

/* Navigation */
#arktefakt-header #arktefakt-services-nav,
#arktefakt-top-bar .main-footer {
    z-index: 800;
}

#arktefakt-header .user-menu-about {
    z-index: 805;
}

#arktefakt-header .user-menu-about ul {
    z-index: 805;
}

#arktefakt-header #arktefakt-app-nav {
    z-index: 800;
}

/* Loader — sous le header (820) et le footer (800) */
#loader {
    z-index: 790;
}

/* Modules */
.faq {
    z-index: 5;
}
#orders a {
    z-index: 5;
}

/* Gallery (albums + grille photos fiche production) */
#gallery a,
#production-show-photos-grid a {
    z-index: 10;
}
#gallery a::after,
#production-show-photos-grid a::after {
    z-index: 1;
}

/* Swipebox (lightbox) */
#swipebox-overlay {
    z-index: 1200;
}

#swipebox-bottom-bar,
#swipebox-top-bar {
    z-index: 1210;
}

.swipebox-touch #swipebox-container:before,
.swipebox-touch #swipebox-container:after {
    z-index: 1210;
}

/* Agenda */
.agenda-item .agenda-item-open {
    z-index: 9;
}

/* Projects */
#hero .project-cover {
    z-index: 10;
}

/* Members / profile modal */
.member-item .member-img,
.profil-window .member-img {
    z-index: 5;
}

/* Members / profile modal — au-dessus du hub admin (#visitor_mode : 9500) */
#profil-modal-root {
    position: fixed;
    inset: 0;
    z-index: 9600;
    pointer-events: none;
}

#profil-modal-root .profil-overlay.open {
    pointer-events: auto;
}

#profil-modal-root .profil-window.open {
    pointer-events: auto;
}

.profil-overlay {
    z-index: 1;
}

.profil-window {
    z-index: 2;
}

.close-content-button {
    z-index: 3;
}

body.modal-open #profil-modal-root {
    pointer-events: auto;
}

/* Services */
#services-slider .services-slider-item {
    z-index: 5;
}

/* Thumbnails / hover stacking */
.thumbnail:hover,
.thumbnail-tile.thumb-border:hover,
a.thumbnail-tile.thumb-border:hover,
.vertical-grid-item:hover,
.horizontal-grid-item:hover,
#goto article a:hover,
.blog-list .thumbnail-tile:hover,
.blog-list .thumbnail:hover,
.service-item:hover,
.faq-item:hover,
.profil-button:hover,
.agenda-item:hover,
.square-grid-item:hover,
.swipebox:hover {
    z-index: 30;
}

#portfolio_page #hub-logo .hub-logo__mark--image {
    z-index: 60;
}

/*
 * Portfolio header — échelle courte :
 * shell 820 · voile 830 · bar 840 · burger 845 · panel 850
 * (détails mobile dans mobile.css)
 */
#portfolio_page > header {
    z-index: 820;
}

#portfolio_page header .header-bar {
    z-index: 840;
}

#portfolio_page header #hamburgerBtn {
    z-index: 845;
}

#portfolio_page header #header-nav {
    z-index: 850;
}

#portfolio_page header #header-nav .nav__content {
    z-index: 1;
}

#portfolio_background::before {
    z-index: 0;
}
#portfolio_page {
    z-index: 1;
}
#portfolio_page .sub-menu::before,
#portfolio_page header .sub-menu::before {
    z-index: -1;
}
#portfolio_page > footer {
    position: relative;
    z-index: 800;
}
#portfolio_page header::before,
#portfolio_page footer::before {
    z-index: 0;
}

#welcome-to-blur {
    z-index: 900;
}

#welcome-to {
    z-index: 901;
}
}

/* assets/css/public/themes/portfolios-modules.css */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
:root {
	/* Couleurs principales */
	--portfolios-color-bg-main: #fafafa;
	--portfolios-color-bg-dark: #000000;
	--portfolios-color-bg-light: #ffffff;
	--portfolios-color-primary: #191919;
	--portfolios-color-secondary: #eaeaea;
	--portfolios-color-accent: #007bff;
	--portfolios-color-border: #dee2e6;
	--portfolios-color-border-custom: #cccccc;
	--portfolios-heading-primary-color: #191919;
	--portfolios-heading-secondary-color: #007bff;
	--portfolios-color-one: var(--portfolios-heading-primary-color);
	--portfolios-color-two: var(--portfolios-heading-secondary-color);

	/* Radius */
	--portfolios-border-radius-xs: 2px;
	--portfolios-border-radius-s: 5px;
	--portfolios-border-radius-m: 8px;
	--portfolios-border-radius-l: 15px;
	--portfolios-border-radius-xl: 50px;
	--portfolios-border-radius-full: 50%;

	/* Ombres */
	--portfolios-box-shadow-s: 0 0 0 0.2rem rgba(0,0,0,0.08);
	--portfolios-box-shadow-m: 0px 2px 28px 0px var(--portfolios-color-border-custom);
	--portfolios-box-shadow-alt: 0px 0px 0px 3px var(--portfolios-color-border-custom);

	/* Fontes */
	--portfolios-font-size-base: 14px;
	--portfolios-heading-primary-size: 21px;
	--portfolios-heading-secondary-size: 14px;
	--portfolios-font-size-title: var(--portfolios-heading-primary-size);
	--portfolios-font-size-subtitle: var(--portfolios-heading-secondary-size);
	--portfolios-font-size-lg: calc(var(--portfolios-font-size-base) * 1.5);
	--portfolios-font-size-md: calc(var(--portfolios-font-size-base) * 1.2);
	--portfolios-font-size-sm: var(--portfolios-font-size-meta, calc(var(--portfolios-font-size-base) * 0.8));
	--portfolios-font-family-base: 'Poppins', Arial, sans-serif;
	--portfolios-font-family-serif: 'Spectral', serif;
	--portfolios-font-family-accent: 'Abril Fatface', cursive;
	--portfolios-font-weight-normal: 400;
	--portfolios-font-weight-bold: 700;
	--portfolios-line-height-base: var(--portfolios-text-line-height);
	--portfolios-letter-spacing: 0.4px;

	/* Divers */
	/* z-index variables removed for centralization */
	--portfolios-opacity-disabled: 0.4;
	--portfolios-gap: 20px;
	--portfolios-padding-base: 15px;
	--portfolios-margin-base: 15px;

	/* Utilitaires modules (ex root.css — overlays, FAQ, galerie) */
	--modules-white: #ffffff;
	--modules-black: #000000;
	--modules-black-alpha: #000000b0;
	--modules-black-alpha2: #000000af;
	--modules-black-alpha3: #000000c2;
	--modules-blue-grey: #7288a2;
	--modules-grey: #444444;
}

/* Utilitaires radius (custom properties injectées aussi dans style.php) */
.portfolios-thumbnail-radius {
	border-radius: var(--portfolios-thumbnail-radius, 0%);
}
.portfolios-button-radius {
	border-radius: var(--portfolios-button-radius, 0px);
}
.portfolios-nav-links-radius {
	border-radius: var(--portfolios-nav-links-radius, 8px);
}
.portfolios-border-radius-xs {
	border-radius: var(--portfolios-border-radius-xs);
}
.portfolios-border-radius-s {
	border-radius: var(--portfolios-border-radius-s);
}
.portfolios-border-radius-m {
	border-radius: var(--portfolios-border-radius-m);
}
.portfolios-border-radius-l {
	border-radius: var(--portfolios-border-radius-l);
}
.portfolios-border-radius-xl {
	border-radius: var(--portfolios-border-radius-xl);
}
.portfolios-border-radius-full {
	border-radius: var(--portfolios-border-radius-full);
}

}
/* assets/css/public/core/layout.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 08-10-2026-text-col */
/* ==========================================================================
   Portfolios — primitives de mise en page du site visiteur (préfixe pf-)

   Remplace core/grid.css. Même modèle que le hub (backoffice/core/layout.css) :
   les tokens --layout-* portent les valeurs, les classes pf-* la structure.
   Le préfixe évite toute collision avec le layout.css back-office, chargé
   en mode connecté et dans l'aperçu du générateur de thème.

   Référence : portfolios/docs/theme/layout.md
   Aperçu de l'éditeur (Bureau / Tablette / Téléphone) : iframe à la vraie
   largeur de l'appareil, les paliers ci-dessous s'y appliquent tels quels.

   Paliers :
     xl  ≥ 1440px
     lg  1101 – 1439px (portable : pf-cols-4 passe à 3 colonnes)
     md  ≤ 1100px      (tablette)
         ≤ 900px       (pf-split passe sur une colonne)
     sm  ≤ 650px       (mobile)
   ========================================================================== */

:root {
  /* Largeurs de contenu */
  --layout-width-narrow: 500px;
  --layout-width-content: 1000px;
  --layout-width-wide: 1400px;
  /* Longueur de ligne max du texte courant en pleine largeur (structure/layout/reading.css)
     et colonne principale de l'article de blog. */
  --layout-width-read: var(--layout-width-content);

  /* Gouttières de grille */
  --layout-gap: 20px;
  --layout-gap-lg: 50px;

  /* Espacement vertical */
  --layout-space-y-sm: 15px;
  --layout-space-y-md: 25px;
  --layout-space-y-lg: 45px;
  --layout-space-y-xl: 80px;

  /* Espacement horizontal */
  --layout-space-x-sm: 10px;
  --layout-space-x-md: 20px;
  --layout-space-x-lg: 40px;

  /* Gouttière de page (padding latéral -lg des sections) : 20px à tous les
     paliers, comme le header et le footer (pf-pad-x-md) — un seul bord pour
     header, hero, contenus et footer. */
  --layout-gutter: var(--layout-space-x-md);
}

/* ---- Visibilité ---- */

@media screen and (min-width: 1101px) {
  .pf-desk-hidden {
    display: none;
  }
}

@media screen and (max-width: 1100px) {
  .pf-mobile-hidden {
    display: none;
  }
}

/* ---- Largeurs ---- */

.pf-w-narrow,
.pf-w-content,
.pf-w-wide {
  width: 100%;
  margin: 0 auto;
}

.pf-w-narrow { max-width: var(--layout-width-narrow); }
.pf-w-content { max-width: var(--layout-width-content); }
.pf-w-wide { max-width: var(--layout-width-wide); }

/* Sections de l'accueil : conteneur nommé, disponible pour des @container
   (thèmes custom). Conservé tel quel : il crée aussi un contexte de formatage. */
#portfolio_page [id^="home-section-"] .pf-w-wide {
  container-type: inline-size;
  container-name: portfolio-full;
}

/* ---- Espacement : core/utilities.css (couche « utilitaires ») ---- */

/* ---- Flux ---- */

.pf-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pf-stack-gap, var(--layout-space-y-md));
}

.pf-stack--sm { --pf-stack-gap: var(--layout-space-y-sm); }
.pf-stack--lg { --pf-stack-gap: var(--layout-space-y-lg); }

.pf-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-cluster-gap, 0);
}

.pf-split {
  display: grid;
  grid-template-rows: auto;
  gap: var(--layout-gap-lg);
}

.pf-split--left { grid-template-columns: 2fr 5fr; }
.pf-split--right { grid-template-columns: 5fr 2fr; }
.pf-split--both { grid-template-columns: 1fr 7fr 1fr; }

@media screen and (max-width: 900px) {
  .pf-split--left,
  .pf-split--right,
  .pf-split--both {
    grid-template-columns: 1fr;
  }
}

.pf-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--pf-min, 240px), 100%), 1fr));
  gap: var(--layout-gap);
}

/* ---- Grilles à colonnes ----
   pf-cols-N fixe le nombre de colonnes à tous les paliers, sauf la bande
   portable (lg) où pf-cols-4 passe automatiquement à 3 colonnes
   (--cols-lg-auto ; comportement historique de grid-four).
   Surcharges par palier : pf-cols-lg-N, pf-cols-md-N, pf-cols-sm-N.
     md hérite de la base, sm hérite de md.
   Chaque pf-cols-N réinitialise les surcharges : une grille imbriquée
   n'hérite pas de celles de son parent. */

.pf-cols-1,
.pf-cols-2,
.pf-cols-3,
.pf-cols-4,
.pf-cols-5,
.pf-cols-6,
.pf-cols-7,
.pf-cols-8,
.pf-cols-9,
.pf-cols-10 {
  --cols-lg: initial;
  --cols-md: initial;
  --cols-sm: initial;
  display: grid;
  grid-template-rows: auto;
  gap: var(--layout-gap);
}

.pf-cols-1 { --cols: 1; --cols-lg-auto: 1; }
.pf-cols-2 { --cols: 2; --cols-lg-auto: 2; }
.pf-cols-3 { --cols: 3; --cols-lg-auto: 3; }
.pf-cols-4 { --cols: 4; --cols-lg-auto: 3; }
.pf-cols-5 { --cols: 5; --cols-lg-auto: 5; }
.pf-cols-6 { --cols: 6; --cols-lg-auto: 6; }
.pf-cols-7 { --cols: 7; --cols-lg-auto: 7; }
.pf-cols-8 { --cols: 8; --cols-lg-auto: 8; }
.pf-cols-9 { --cols: 9; --cols-lg-auto: 9; }
.pf-cols-10 { --cols: 10; --cols-lg-auto: 10; }

.pf-cols-lg-1 { --cols-lg: 1; }
.pf-cols-lg-2 { --cols-lg: 2; }
.pf-cols-lg-3 { --cols-lg: 3; }
.pf-cols-lg-4 { --cols-lg: 4; }
.pf-cols-lg-5 { --cols-lg: 5; }
.pf-cols-lg-6 { --cols-lg: 6; }
.pf-cols-lg-7 { --cols-lg: 7; }
.pf-cols-lg-8 { --cols-lg: 8; }
.pf-cols-lg-9 { --cols-lg: 9; }
.pf-cols-lg-10 { --cols-lg: 10; }

.pf-cols-md-1 { --cols-md: 1; }
.pf-cols-md-2 { --cols-md: 2; }
.pf-cols-md-3 { --cols-md: 3; }
.pf-cols-md-4 { --cols-md: 4; }
.pf-cols-md-5 { --cols-md: 5; }
.pf-cols-md-6 { --cols-md: 6; }
.pf-cols-md-7 { --cols-md: 7; }
.pf-cols-md-8 { --cols-md: 8; }
.pf-cols-md-9 { --cols-md: 9; }
.pf-cols-md-10 { --cols-md: 10; }

.pf-cols-sm-1 { --cols-sm: 1; }
.pf-cols-sm-2 { --cols-sm: 2; }
.pf-cols-sm-3 { --cols-sm: 3; }
.pf-cols-sm-4 { --cols-sm: 4; }
.pf-cols-sm-5 { --cols-sm: 5; }
.pf-cols-sm-6 { --cols-sm: 6; }
.pf-cols-sm-7 { --cols-sm: 7; }
.pf-cols-sm-8 { --cols-sm: 8; }
.pf-cols-sm-9 { --cols-sm: 9; }
.pf-cols-sm-10 { --cols-sm: 10; }

/* #portfolio_page : les colonnes l'emportent sur les règles de composant,
   comme l'ancien grid.css (parité). --_cols = nombre de colonnes du palier actif. */
#portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .pf-cols-4, .pf-cols-5,
                    .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
  --_cols: var(--cols);
  grid-template-columns: repeat(var(--_cols), 1fr);
}

@media screen and (min-width: 1101px) and (max-width: 1439px) {
  #portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .pf-cols-4, .pf-cols-5,
                      .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
    --_cols: var(--cols-lg, var(--cols-lg-auto));
  }
}

@media screen and (max-width: 1100px) {
  #portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .pf-cols-4, .pf-cols-5,
                      .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
    --_cols: var(--cols-md, var(--cols));
  }
}

@media screen and (max-width: 650px) {
  #portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .pf-cols-4, .pf-cols-5,
                      .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10) {
    --_cols: var(--cols-sm, var(--cols-md, var(--cols)));
  }
}

/* Largeur limitée (pf-w-content, ~1000px) : au-delà du palier lg, les grilles à colonnes
   gardent les colonnes du palier lg (pf-cols-4 → 3, ou pf-cols-lg-N). */
@media screen and (min-width: 1440px) {
  #portfolio_page :is(.pf-cols-1, .pf-cols-2, .pf-cols-3, .pf-cols-4, .pf-cols-5,
                      .pf-cols-6, .pf-cols-7, .pf-cols-8, .pf-cols-9, .pf-cols-10):is(.pf-w-content, .pf-w-content *) {
    --_cols: var(--cols-lg, var(--cols-lg-auto));
  }
}
}

/* assets/css/public/core/utilities.css */
/* @layer-wrap:site.utilitaires */
@layer site.utilitaires {
/* Version: 16-10-2026 */
/* Utilitaires d'espacement (classes pf-*), sortis de core/layout.css (couches CSS, lot L2).
 * Couche « utilitaires » (shared/core/design/stylesheets.php) : après le socle, les éléments, le header commun et la
 * typographie imposée, avant le thème. Ils l'emportent sur les règles des composants quelle que soit leur
 * spécificité, sans !important ; un thème peut les ajuster. Échelle : sm · md · lg · xl (xl : vertical seul). */

.pf-pad-sm { padding: var(--layout-space-y-sm) var(--layout-space-x-sm); }
.pf-pad-md { padding: var(--layout-space-y-md) var(--layout-space-x-md); }
.pf-pad-lg { padding: var(--layout-space-y-lg) var(--layout-gutter); }

.pf-pad-x-sm { padding-left: var(--layout-space-x-sm); padding-right: var(--layout-space-x-sm); }
.pf-pad-x-md { padding-left: var(--layout-space-x-md); padding-right: var(--layout-space-x-md); }
.pf-pad-x-lg { padding-left: var(--layout-gutter); padding-right: var(--layout-gutter); }

.pf-pad-y-sm { padding-top: var(--layout-space-y-sm); padding-bottom: var(--layout-space-y-sm); }
.pf-pad-y-md { padding-top: var(--layout-space-y-md); padding-bottom: var(--layout-space-y-md); }
.pf-pad-y-lg { padding-top: var(--layout-space-y-lg); padding-bottom: var(--layout-space-y-lg); }
.pf-pad-y-xl { padding-top: var(--layout-space-y-xl); padding-bottom: var(--layout-space-y-xl); }

.pf-pt-sm { padding-top: var(--layout-space-y-sm); }
.pf-pt-md { padding-top: var(--layout-space-y-md); }
.pf-pt-lg { padding-top: var(--layout-space-y-lg); }
.pf-pt-xl { padding-top: var(--layout-space-y-xl); }

.pf-pb-sm { padding-bottom: var(--layout-space-y-sm); }
.pf-pb-md { padding-bottom: var(--layout-space-y-md); }
.pf-pb-lg { padding-bottom: var(--layout-space-y-lg); }
.pf-pb-xl { padding-bottom: var(--layout-space-y-xl); }

.pf-pl-sm { padding-left: var(--layout-space-x-sm); }
.pf-pl-md { padding-left: var(--layout-space-x-md); }
.pf-pl-lg { padding-left: var(--layout-gutter); }

.pf-pr-sm { padding-right: var(--layout-space-x-sm); }
.pf-pr-md { padding-right: var(--layout-space-x-md); }
.pf-pr-lg { padding-right: var(--layout-gutter); }

.pf-mt-sm { margin-top: var(--layout-space-y-sm); }
.pf-mt-md { margin-top: var(--layout-space-y-md); }
.pf-mt-lg { margin-top: var(--layout-space-y-lg); }
.pf-mt-xl { margin-top: var(--layout-space-y-xl); }

.pf-mb-sm { margin-bottom: var(--layout-space-y-sm); }
.pf-mb-md { margin-bottom: var(--layout-space-y-md); }
.pf-mb-lg { margin-bottom: var(--layout-space-y-lg); }
.pf-mb-xl { margin-bottom: var(--layout-space-y-xl); }

/* Marges latérales : fixes (la gouttière de page ne concerne que le padding). */
.pf-ml-sm { margin-left: var(--layout-space-x-sm); }
.pf-ml-md { margin-left: var(--layout-space-x-md); }
.pf-ml-lg { margin-left: var(--layout-space-x-lg); }

.pf-mr-sm { margin-right: var(--layout-space-x-sm); }
.pf-mr-md { margin-right: var(--layout-space-x-md); }
.pf-mr-lg { margin-right: var(--layout-space-x-lg); }

/* Fonds utilitaires des cartes (.bg-color / .bg-color-alt posés par les templates) : couche « utilitaires »,
   passent devant le fond générique des éléments sans !important. */
#portfolio_page .bg-color,
#profil-modal-root .bg-color {
    background: var(--portfolios-theme-bg-main, #272727);
}

#portfolio_page .bg-color-alt,
#profil-modal-root .bg-color-alt {
    background: var(--portfolios-theme-bg-alt, #272727);
}
}

/* assets/css/public/design/thumbnails/grid.css */
/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-desktop-cols */
/* ==========================================================================
   Grilles de vignettes (pf-thumbs) — anciennes classes « *-elements »
   de core/grid.css (horizontal / square / vertical).

   <div class="pf-thumbs pf-thumbs--landscape|square|portrait">
     <a class="horizontal-grid-item|square-grid-item|vertical-grid-item">…</a>
   </div>

   Colonnes par palier (--thumbs-xs … --thumbs-xl), paliers propres aux vignettes :
                 < 530   ≥ 530   ≥ 768   ≥ 1100   ≥ 1440
     landscape     1       2       2       3        3
     square        1       2       3       4        5
     portrait      2       3       3       3        4
   Aperçu de l'éditeur : iframe à la largeur de l'appareil, mêmes @media que le site.
   ========================================================================== */

#portfolio_page .pf-thumbs {
  --_thumbs: var(--thumbs-xs);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(var(--_thumbs), 1fr);
  gap: var(--layout-gap);
}

.pf-thumbs--landscape { --thumbs-xs: 1; --thumbs-sm: 2; --thumbs-md: 2; --thumbs-lg: 3; --thumbs-xl: 3; }
.pf-thumbs--square { --thumbs-xs: 1; --thumbs-sm: 2; --thumbs-md: 3; --thumbs-lg: 4; --thumbs-xl: 5; }
.pf-thumbs--portrait { --thumbs-xs: 2; --thumbs-sm: 3; --thumbs-md: 3; --thumbs-lg: 3; --thumbs-xl: 4; }

@media screen and (min-width: 530px) {
  #portfolio_page .pf-thumbs { --_thumbs: var(--thumbs-sm); }
}

@media screen and (min-width: 768px) {
  #portfolio_page .pf-thumbs { --_thumbs: var(--thumbs-md); }
}

@media screen and (min-width: 1100px) {
  #portfolio_page .pf-thumbs { --_thumbs: var(--thumbs-lg); }
}

@media screen and (min-width: 1440px) {
  #portfolio_page .pf-thumbs { --_thumbs: var(--thumbs-xl); }
}

/* Vignette : hauteur portée par le ratio (padding-bottom). */
#portfolio_page .pf-thumbs a {
  position: relative;
  transition: 0.2s linear;
  height: 0;
  width: 100%;
  box-sizing: border-box;
}

#portfolio_page .pf-thumbs--landscape a { padding: 0% 0% 50% 0%; }
#portfolio_page .pf-thumbs--square a { padding: 0% 0% 100% 0%; }
#portfolio_page .pf-thumbs--portrait a { padding: 0% 0% 150% 0%; }

/* Accueil : deux rangées pleines selon les colonnes du palier.
   Les pages modules (listing complet) ne sont pas concernées. */
@media screen and (max-width: 529px) {
  #portfolio_page [id^="home-section-"] .pf-thumbs--landscape > :nth-child(n+3),
  #portfolio_page [id^="home-section-"] .pf-thumbs--square > :nth-child(n+3),
  #portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+5) {
    display: none;
  }
}

@media screen and (min-width: 530px) and (max-width: 767px) {
  #portfolio_page [id^="home-section-"] .pf-thumbs--landscape > :nth-child(n+5),
  #portfolio_page [id^="home-section-"] .pf-thumbs--square > :nth-child(n+5),
  #portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+7) {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1099px) {
  #portfolio_page [id^="home-section-"] .pf-thumbs--landscape > :nth-child(n+5),
  #portfolio_page [id^="home-section-"] .pf-thumbs--square > :nth-child(n+7),
  #portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+7) {
    display: none;
  }
}

@media screen and (min-width: 1100px) and (max-width: 1439px) {
  #portfolio_page [id^="home-section-"] .pf-thumbs--square > :nth-child(n+9),
  #portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+7) {
    display: none;
  }
}

@media screen and (min-width: 1440px) {
  #portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+9) {
    display: none;
  }
}

/* Listes d'articles de l'accueil (pf-cols) : deux rangées également. */
@media screen and (max-width: 650px) {
  #portfolio_page [id^="home-section-"] .blog-list > :nth-child(n+3) {
    display: none;
  }
}

@media screen and (min-width: 651px) and (max-width: 1100px) {
  #portfolio_page [id^="home-section-"] .blog-list > :nth-child(n+5) {
    display: none;
  }
}

@media screen and (min-width: 1101px) and (max-width: 1439px) {
  #portfolio_page [id^="home-section-"] .blog-list > :nth-child(n+7) {
    display: none;
  }
}

/* ---- Contenu des vignettes ---- */

.horizontal-grid-item .poster, .square-grid-item .poster, .vertical-grid-item .poster {
  position: absolute;
  background-size: cover;
  background-position: center;
  transition: 0.2s linear;
  height: 100%;
  width: 100%;
}

/* Contraste automatique : le texte reste masqué le temps que sa couleur soit calculée, pour
   qu'il apparaisse directement dans sa teinte définitive au lieu de basculer après coup.
   Le dégradé, lui, reste visible : seule la typo est révélée en fondu. */
.thumbnail-contrast-pending :is(h4, h5, p) {
  opacity: 0;
}

.thumbnail-contrast-resolved :is(h4, h5, p) {
  opacity: 1;
  transition: opacity 160ms linear;
}

.horizontal-grid-item .horizontal-infos, .square-grid-item .square-infos, .vertical-grid-item .vertical-infos {
  position: absolute;
  bottom: 0;
  /* Marges du texte selon l'arrondi des vignettes (/theme) : le texte reste hors de la courbe des coins. */
  --pf-thumb-text-inset: calc(var(--pf-radius, var(--portfolios-thumbnail-radius, 0px)) * 0.5);
  padding: 10px max(10px, var(--pf-thumb-text-inset)) max(20px, var(--pf-thumb-text-inset));
  box-sizing: border-box;
  width: 100%;
  background: var(--portfolios-thumbnail-overlay-gradient, linear-gradient(0deg, rgba(0,0,0,0.8673670151654411) 0%, rgba(0,0,0,0.6082633737088585) 39%, rgba(0,0,0,0.4878151944371498) 67%, rgba(0,0,0,0.2721289199273459) 89%, rgba(0,0,0,0) 97%, rgba(0,0,0,0) 100%));
  transition: 0.1s linear;
}

.horizontal-grid-item h4, .square-grid-item h4, .vertical-grid-item h4 {
  margin-bottom: 2px;
}

/* Largeur limitée (pf-w-content, ~1000px) : le conteneur est plus étroit que l'écran,
   les vignettes prennent donc les colonnes du palier md (768–1099) au-delà de 1100px.
   --_thumbs pilote toutes les variantes (matrices/base.css). */
@media screen and (min-width: 1100px) {
  #portfolio_page .pf-thumbs:is(.pf-w-content, .pf-w-content *) { --_thumbs: var(--thumbs-md); }
}

/* « Autres … » en bas des fiches (pf-thumbs--one-row) : une seule ligne sur ordinateur.
   On masque tout ce qui dépasse le nombre de colonnes du palier (mêmes valeurs que plus haut ;
   polaroïd carré plafonné à 4 en xl, cf. matrices/base.css). Mobile et tablette inchangés. */
@media screen and (min-width: 1100px) {
  #portfolio_page .pf-thumbs--one-row:is(.pf-thumbs--landscape, .pf-thumbs--portrait) > :nth-child(n+4),
  #portfolio_page .pf-thumbs--one-row.pf-thumbs--square > :nth-child(n+5),
  #portfolio_page .pf-thumbs--one-row.pf-thumbs--landscape:is(.pf-w-content, .pf-w-content *) > :nth-child(n+3),
  #portfolio_page .pf-thumbs--one-row:is(.pf-thumbs--square, .pf-thumbs--portrait):is(.pf-w-content, .pf-w-content *) > :nth-child(n+4) {
    display: none;
  }
}

@media screen and (min-width: 1440px) {
  #portfolio_page .pf-thumbs--one-row.pf-thumbs--portrait:not(.pf-w-content, .pf-w-content *) > :nth-child(4),
  #portfolio_page .pf-thumbs--one-row.pf-thumbs--square:not(.pf-w-content, .pf-w-content *, [data-works-layout="polaroid"]) > :nth-child(5) {
    display: revert;
  }
}
}

/* assets/css/public/core/elements.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 23-09-2026-20-19 */
/* Éléments transverses du site visiteur (issus de l'ancien core/grid.css) :
   fermeture de contenu, boutons Arktefakt, champs, contrastes forcés, embeds vidéo.
   Toujours chargé, y compris en thème custom. La mise en page vit dans core/layout.css. */

/* CLOSE CONTENT */

#close-content {
  position: fixed;
  top: 0px;
  padding-top: 25px;
  left: 0;
  right: 0;
}

#close-content nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.close-content-button {
  cursor: pointer;
  transition: 0.2s linear;
}

.close-content-button:hover {
  opacity: 0.7;
}

.close-content-button img {
  width: 50px;
}


/* BUTTONS — .folio_button / thème : design/themes/basic/buttons.css ; ici uniquement héritage UI type formulaires */

/* Chrome éditeur / intégrations : boutons Arktefakt (.arkt-btn) */
#portfolio_page #portfolio-content-interface .arkt-btn,
#portfolio_page #hub-content-interface .arkt-btn {
  padding: 10px 20px;
  max-width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: none;
  transition: 0.2s linear;
  cursor: pointer;
  filter: brightness(100%);
}

#portfolio_page #portfolio-content-interface .arkt-btn:hover,
#portfolio_page #hub-content-interface .arkt-btn:hover {
  filter: brightness(110%);
}

/* Hors chrome hub (éditeur de thème, overlay) : :where garde la spécificité d'origine. */
input:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *),
select:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *),
textarea:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *),
#loadmore:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 100%;
}

#portfolio_page #portfolio-content-interface .arkt-btn-full,
#portfolio_page #hub-content-interface .arkt-btn-full,
form .arkt-btn {
  width: 100%;
  max-width: 100%;
}

#portfolio_page #portfolio-content-interface .arkt-btn svg,
#portfolio_page #hub-content-interface .arkt-btn svg {
  width: 20px;
  height: 20px;
}

#portfolio_page #portfolio-content-interface .arkt-btn span,
#portfolio_page #hub-content-interface .arkt-btn span {
  margin-left: 5px;
}

#portfolio_page #portfolio-content-interface .arkt-btn,
#portfolio_page #hub-content-interface .arkt-btn,
input[type="submit"]:not(.folio_button):not(.folio-button),
#form-menu li, #goto_project, .nav__content .nav__list li .sub-menu a {
  filter: brightness(100%);
}

#portfolio_page #portfolio-content-interface .arkt-btn:hover,
#portfolio_page #hub-content-interface .arkt-btn:hover,
input[type="submit"]:not(.folio_button):not(.folio-button):hover,
#delete ul li a:hover, #goto_project:hover, .nav__content .nav__list li:hover .sub-menu a:hover, .nav__content .nav__list li a:hover {
  filter: brightness(110%);
} 

input[type=radio] {
  margin-bottom: 0px;
}

input[type="radio"] {
  width: 15px;
  height: 15px;
}

input[type=color] {
  width: 100%;
  height: 10vh;
}

.-black, .-black * {
  color: #000000;
}

.-black svg {
  fill: #000000;
}

.-white, .-white * {
  color: #ffffff;
}

.-white svg {
  fill: #ffffff;
}

.-black:hover, .-black:hover *, menu-item .-black:hover {
  color: #000000;
}

.-black:hover svg {
  fill: #000000;
}

.-white:hover, .-white:hover *, .menu-item .-white:hover {
  color: #ffffff;
}

.-white:hover svg {
  fill: #ffffff;
}



/* YOUTUBE & FACEBOOK (paysage) */

.youtube,
.facebook:not(.video-portrait) {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.youtube iframe,
.youtube object,
.youtube embed,
.facebook:not(.video-portrait) iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Portrait : Shorts, TikTok, Instagram, Reels Facebook — pleine largeur, ratio 9:16 */
.youtube.video-portrait,
.tiktok,
.tiktok.video-portrait,
.instagram,
.instagram.video-portrait,
.facebook.video-portrait {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 9 / 16;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.youtube.video-portrait iframe,
.tiktok iframe,
.tiktok.video-portrait iframe,
.instagram iframe,
.instagram.video-portrait iframe,
.facebook.video-portrait iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

h1, h2, h3, h4, label, select, .arkt-btn, p, a {
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
}

/* assets/css/public/themes/scrollbar-night.css */
/* @layer-wrap:site.socle */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
/* Scrollbar sombre (nightmode) - compatible macOS/Windows, Chrome, Firefox, Edge, Safari */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--portfolios-border-radius-m);
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
::-webkit-scrollbar-corner {
    background: transparent;
    cursor: pointer;
}

html, body, * {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

@media (hover: hover) {
  ::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
  }
}
}

/* assets/css/public/themes/theme-base.css */
@layer site.socle {
/* Version: 20-09-2026-16-46 */
/* Version: 12-07-2026 — structure thème portfolio (couleurs injectées inline) */
:root {
  /* Effets de flou (structure) */
  --portfolios-blur-strong-effect: blur(200px);
  --portfolios-blur-soft-effect: blur(10px);
  --portfolios-blur-none-effect: blur(0px);

  /* Images — fallbacks ; surchargés par css_vars */
  --portfolios-grain-img: url(../../../assets/media/public/design/background/noise-white.png);
  --portfolios-grid-img: url(../../../assets/media/public/design/background/grid-black.png);
  --portfolios-img-repeat: repeat;
  --portfolios-img-position: center;

  /* Fallbacks couleur (surchargés par dérivation body_bg_color) */
  --portfolios-text-main-color: #222;
  --portfolios-bg-main-color: #fafafa;
  --portfolios-bg-contrast-color: #0f0f0f;
  --portfolios-bg-contrast-transparence-color: rgba(139, 139, 139, 0.14);
  --portfolios-bg-hover-color: #f7f7f7;
  --portfolios-bg-alt-color: #e2e2e2;
  --portfolios-bg-dark-alt-color: #333;
  --portfolios-border-color: rgb(224, 224, 224);
  --portfolios-border-strong-color: #bdbdbd;
  --portfolios-border-light-color: #e2e2e2;
  --portfolios-border-accent-color: #987ed1;
  --portfolios-blur-bg-color: #fafafae7;
  --portfolios-pattern-bg-color: #eeeeee;
  --portfolios-neutral-bg-color: #eeeeee;
  --portfolios-theme-bg-main: #fafafa;
  --portfolios-theme-bg-contrast: #0f0f0f;
  --portfolios-theme-bg-hover: #f7f7f7;
  --portfolios-theme-bg-alt: #e2e2e2;
  --portfolios-theme-bg-dark-alt: #333;
  --portfolios-theme-border: rgb(224, 224, 224);
  --portfolios-theme-border-strong: #bdbdbd;
  --portfolios-theme-border-light: #e2e2e2;
  --portfolios-theme-input-required: rgb(241, 174, 174);
  --portfolios-theme-input-valid: rgb(212, 242, 184);
  --portfolios-theme-fill: #0f0f0f;
  --portfolios-theme-fill-alt: #bdbdbd;
  --portfolios-theme-fill-light: #e4e4e4;
  --portfolios-theme-text-main: #222;
  --portfolios-theme-text-contrast: #000000;
  --portfolios-theme-menus-bg: transparent;
  --portfolios-theme-menus-bg-hover: #f7f7f7;
  --portfolios-theme-menus-text: #222;
  --portfolios-theme-mandatory: rgb(192, 113, 113);
  --portfolios-full-box-shadow: 0px 0px 0px 3px rgba(255, 255, 255, 0.432);
  --portfolios-shadow-box-shadow: 1px 2px 17px -5px rgba(0,0,0,0.75);
}

}