/* =========================================================
   SOURIRE PRESTIGE — Layout
   Conteneurs, grille, sections, utilitaires de mise en page.
   ========================================================= */

.sp-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--section-padding-x);
}
.sp-container--narrow { max-width: var(--container-narrow); }
.sp-container--wide { max-width: 1560px; }

.sp-section {
	padding-block: var(--section-padding-y);
	position: relative;
}
.sp-section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 5rem); }
.sp-section--bg-alt { background: var(--sp-bg-alt); }
.sp-section--bg-dark { background: var(--sp-bg-dark); color: var(--sp-text-on-dark); }
.sp-section--bg-dark p { color: var(--sp-grey-300); }
.sp-section--bg-dark h1, .sp-section--bg-dark h2, .sp-section--bg-dark h3 { color: var(--sp-white); }

.sp-grid {
	display: grid;
	gap: var(--gutter);
	grid-template-columns: repeat(12, 1fr);
}
.sp-grid > * { grid-column: span 12; }

@media (min-width: 640px) {
	.sp-col-sm-6 { grid-column: span 6; }
}
@media (min-width: 900px) {
	.sp-col-md-3 { grid-column: span 3; }
	.sp-col-md-4 { grid-column: span 4; }
	.sp-col-md-5 { grid-column: span 5; }
	.sp-col-md-6 { grid-column: span 6; }
	.sp-col-md-7 { grid-column: span 7; }
	.sp-col-md-8 { grid-column: span 8; }
}

.sp-section-head {
	max-width: 720px;
	margin-bottom: var(--space-7);
}
.sp-section-head--center { margin-inline: auto; text-align: center; }
.sp-section-head .sp-eyebrow { margin-bottom: var(--space-3); }
.sp-section-head h2 { margin-bottom: var(--space-4); }

.sp-flex { display: flex; }
.sp-flex--between { justify-content: space-between; }
.sp-flex--center { align-items: center; }
.sp-flex--wrap { flex-wrap: wrap; }
.sp-gap-2 { gap: var(--space-2); }
.sp-gap-4 { gap: var(--space-4); }
.sp-gap-6 { gap: var(--space-6); }

.sp-text-center { text-align: center; }

.sp-404 { padding-top: calc(var(--space-14) + 2rem); min-height: 70vh; display: flex; align-items: center; }
.sp-404__title { margin-top: var(--space-3); }

@media (max-width: 899px) {
	.sp-hide-mobile { display: none !important; }
}
@media (min-width: 900px) {
	.sp-hide-desktop { display: none !important; }
}