/* @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);
}
}