/* ======================
   Spacing Utilities (Padding & Margin)
====================== */
.h-100 { height: 100vh; }
.w-100 { width: 100% !important; }

.h-75 { height: 80vh; }

.bg-cover {
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	}

.img-fluid {
	max-width: 100%;
	height: auto;
	}

:root {
	--spacing-unit: var(--gut); /* Taille de base pour les espacements */
}

/* Padding (intérieur) */
.p-1 { padding: calc(1 * var(--spacing-unit)); }
.p-2 { padding: calc(2 * var(--spacing-unit)); }
.p-3 { padding: calc(3 * var(--spacing-unit)); }
.p-4 { padding: calc(4 * var(--spacing-unit)); }

.pt-1 { padding-top: calc(1 * var(--spacing-unit)); }
.pt-2 { padding-top: calc(2 * var(--spacing-unit)); }
.pt-3 { padding-top: calc(3 * var(--spacing-unit)); }
.pt-4 { padding-top: calc(4 * var(--spacing-unit)); }
.pt-9 { padding-top: calc(9 * var(--spacing-unit)); }


.pb-1 { padding-bottom: calc(1 * var(--spacing-unit)); }
.pb-2 { padding-bottom: calc(2 * var(--spacing-unit)); }
.pb-3 { padding-bottom: calc(3 * var(--spacing-unit)); }
.pb-4 { padding-bottom: calc(4 * var(--spacing-unit)); }
.pt-xl { padding-bottom: calc(10 * var(--spacing-unit)); }

.pl-1 { padding-left: calc(1 * var(--spacing-unit)); }
.pl-2 { padding-left: calc(2 * var(--spacing-unit)); }
.pl-3 { padding-left: calc(3 * var(--spacing-unit)); }

.pr-1 { padding-right: calc(1 * var(--spacing-unit)); }
.pr-2 { padding-right: calc(2 * var(--spacing-unit)); }
.pr-3 { padding-right: calc(3 * var(--spacing-unit)); }
.pr-4 { padding-right: calc(4 * var(--spacing-unit)); }

.pxy-1 { padding: calc(1 * var(--spacing-unit)); }


/* Margin (extérieur) */
.m-1 { margin: calc(1 * var(--spacing-unit)); }
.m-2 { margin: calc(2 * var(--spacing-unit)); }
.m-3 { margin: calc(3 * var(--spacing-unit)); }
.m-4 { margin: calc(4 * var(--spacing-unit)); }

.mt-1 { margin-top: calc(1 * var(--spacing-unit)); }
.mt-2 { margin-top: calc(2 * var(--spacing-unit)); }
.mt-3 { margin-top: calc(3 * var(--spacing-unit)); }
.mt-4 { margin-top: calc(4 * var(--spacing-unit)); }

.mb-1 { margin-bottom: calc(1 * var(--spacing-unit)); }
.mb-2 { margin-bottom: calc(2 * var(--spacing-unit)); }
.mb-3 { margin-bottom: calc(3 * var(--spacing-unit)); }
.mb-4 { margin-bottom: calc(4 * var(--spacing-unit)); }

.ml-1 { margin-left: calc(1 * var(--spacing-unit)); }
.ml-2 { margin-left: calc(2 * var(--spacing-unit)); }
.ml-3 { margin-left: calc(3 * var(--spacing-unit)); }
.ml-4 { margin-left: calc(4 * var(--spacing-unit)); }

.mr-1 { margin-right: calc(1 * var(--spacing-unit)); }
.mr-2 { margin-right: calc(2 * var(--spacing-unit)); }
.mr-3 { margin-right: calc(3 * var(--spacing-unit)); }
.mr-4 { margin-right: calc(4 * var(--spacing-unit)); }


/* Auto margins pour centrer */
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }