/*
 * Utilitaires - DIGITALGREEN
 * Classes utilitaires pour le spacing, couleurs, etc.
 */

/* Marges */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mx-0 { margin-left: 0; margin-right: 0; }
.my-0 { margin-top: 0; margin-bottom: 0; }

.m-xs { margin: var(--spacing-xs); }
.mt-xs { margin-top: var(--spacing-xs); }
.mr-xs { margin-right: var(--spacing-xs); }
.mb-xs { margin-bottom: var(--spacing-xs); }
.ml-xs { margin-left: var(--spacing-xs); }
.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }

.m-sm { margin: var(--spacing-sm); }
.mt-sm { margin-top: var(--spacing-sm); }
.mr-sm { margin-right: var(--spacing-sm); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.ml-sm { margin-left: var(--spacing-sm); }
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }

.m-md { margin: var(--spacing-md); }
.mt-md { margin-top: var(--spacing-md); }
.mr-md { margin-right: var(--spacing-md); }
.mb-md { margin-bottom: var(--spacing-md); }
.ml-md { margin-left: var(--spacing-md); }
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }

.m-lg { margin: var(--spacing-lg); }
.mt-lg { margin-top: var(--spacing-lg); }
.mr-lg { margin-right: var(--spacing-lg); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.ml-lg { margin-left: var(--spacing-lg); }
.mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }

.m-xl { margin: var(--spacing-xl); }
.mt-xl { margin-top: var(--spacing-xl); }
.mr-xl { margin-right: var(--spacing-xl); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.ml-xl { margin-left: var(--spacing-xl); }
.mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }
.my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }

/* Paddings */
.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }
.px-0 { padding-left: 0; padding-right: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }

.p-xs { padding: var(--spacing-xs); }
.pt-xs { padding-top: var(--spacing-xs); }
.pr-xs { padding-right: var(--spacing-xs); }
.pb-xs { padding-bottom: var(--spacing-xs); }
.pl-xs { padding-left: var(--spacing-xs); }
.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }

.p-sm { padding: var(--spacing-sm); }
.pt-sm { padding-top: var(--spacing-sm); }
.pr-sm { padding-right: var(--spacing-sm); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pl-sm { padding-left: var(--spacing-sm); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }

.p-md { padding: var(--spacing-md); }
.pt-md { padding-top: var(--spacing-md); }
.pr-md { padding-right: var(--spacing-md); }
.pb-md { padding-bottom: var(--spacing-md); }
.pl-md { padding-left: var(--spacing-md); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }

.p-lg { padding: var(--spacing-lg); }
.pt-lg { padding-top: var(--spacing-lg); }
.pr-lg { padding-right: var(--spacing-lg); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pl-lg { padding-left: var(--spacing-lg); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }

.p-xl { padding: var(--spacing-xl); }
.pt-xl { padding-top: var(--spacing-xl); }
.pr-xl { padding-right: var(--spacing-xl); }
.pb-xl { padding-bottom: var(--spacing-xl); }
.pl-xl { padding-left: var(--spacing-xl); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

/* Largeurs */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }

/* Hauteurs */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.h-auto { height: auto; }

/* Backgrounds */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }
.bg-light { background-color: var(--bg-light); }
.bg-dark { background-color: var(--bg-dark); }
.bg-white { background-color: #fff; }
.bg-transparent { background-color: transparent; }

/* Bordures */
.border { border: 1px solid #dee2e6; }
.border-top { border-top: 1px solid #dee2e6; }
.border-right { border-right: 1px solid #dee2e6; }
.border-bottom { border-bottom: 1px solid #dee2e6; }
.border-left { border-left: 1px solid #dee2e6; }
.border-0 { border: 0; }

.rounded { border-radius: var(--border-radius-md); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: 50%; }

/* Ombres */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* Z-index */
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Visibilité responsive */
@media (max-width: 576px) {
	.d-sm-none { display: none !important; }
	.d-sm-block { display: block !important; }
}

@media (max-width: 768px) {
	.d-md-none { display: none !important; }
	.d-md-block { display: block !important; }
}

@media (max-width: 992px) {
	.d-lg-none { display: none !important; }
	.d-lg-block { display: block !important; }
}