/* ============================================================
   Sellerie Marti — utilities.css
   Helpers globaux réutilisables pour blocs et templates.
   Valeurs alignées sur la maquette de référence (design_handoff).
   À enqueuer AVANT main.css.
   ============================================================ */

/* -------- Sections (padding vertical standard) -------- */
.sm-section {
	padding: clamp(56px, 8vw, 96px) 0;
	position: relative;
}
.sm-section--tight {
	padding: clamp(40px, 5vw, 64px) 0;
}
.sm-section--alt {
	background: var(--sm-bg-2);
}
.sm-section--dark {
	background: var(--sm-header-bg);
	color: var(--sm-header-fg);
}

/* -------- Container (max-width + padding horizontal) -------- */
.sm-container {
	max-width: var(--sm-col-max, 1280px);
	margin: 0 auto;
	padding-left: var(--sm-pad-x, clamp(20px, 4vw, 56px));
	padding-right: var(--sm-pad-x, clamp(20px, 4vw, 56px));
}
.sm-container--narrow {
	max-width: 880px;
}
.sm-container--wide {
	max-width: 1440px;
}

/* -------- Échelle typographique -------- */
.sm-h1 {
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: clamp(56px, 8vw, 110px);
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0;
	color: var(--sm-fg);
}
.sm-h2 {
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: clamp(40px, 5.5vw, 72px);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0;
	color: var(--sm-fg);
}
.sm-h3 {
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
	color: var(--sm-fg);
}
.sm-h4 {
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	color: var(--sm-fg);
}

/* Italique d'accent partagé (à utiliser dans <em> ou span.accent) */
.sm-accent {
	font-family: var(--sm-font-serif);
	font-style: italic;
	font-weight: 300;
	text-transform: none;
	letter-spacing: -0.01em;
	color: var(--sm-accent);
}

/* -------- Textes -------- */
.sm-text-lede {
	font-family: var(--sm-font-body);
	font-size: clamp(16px, 1.3vw, 19px);
	color: var(--sm-fg-mute);
	max-width: 60ch;
	line-height: 1.55;
	margin: 0;
}
.sm-text-subtitle {
	color: var(--sm-fg-mute);
	font-size: 15px;
	max-width: 36ch;
	line-height: 1.55;
	margin: 0;
}
.sm-text-mute {
	color: var(--sm-fg-mute);
}

/* -------- Eyebrow (label en haut de section, mono uppercase) -------- */
/* (déjà défini dans main.css comme .sm-eyebrow base — variante "accent") */
.sm-eyebrow--accent {
	color: var(--sm-accent);
}

/* -------- Section heads (head 2 colonnes : titre + sous-titre côté droit) -------- */
.sm-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 56px;
	flex-wrap: wrap;
}
.sm-section__head-text { flex: 1 1 60%; }
.sm-section__head-subtitle { flex: 1 1 28%; }
@media (max-width: 720px) {
	.sm-section__head { align-items: flex-start; margin-bottom: 36px; }
}

/* -------- Grids -------- */
.sm-grid {
	display: grid;
	gap: clamp(20px, 3vw, 40px);
}
.sm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sm-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sm-grid--gap-sm { gap: clamp(16px, 2vw, 20px); }
.sm-grid--gap-lg { gap: clamp(40px, 5vw, 80px); }
@media (max-width: 1024px) {
	.sm-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.sm-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.sm-grid--4, .sm-grid--3, .sm-grid--2 { grid-template-columns: 1fr; }
}

/* -------- 2 colonnes texte+média (réutilisable intro/atelier/contact) -------- */
.sm-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
}
.sm-split--text-l { grid-template-columns: 1.2fr 1fr; }
.sm-split--text-r { grid-template-columns: 1fr 1.2fr; }
.sm-split--media-l { grid-template-columns: 1fr 1.3fr; }
.sm-split--media-r { grid-template-columns: 1.3fr 1fr; }
@media (max-width: 899px) {
	.sm-split, .sm-split--text-l, .sm-split--text-r, .sm-split--media-l, .sm-split--media-r {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* -------- Liste à puces avec marqueur accent (style maquette) -------- */
.sm-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.sm-bullets li {
	display: flex;
	gap: 12px;
	font-size: 15px;
	padding: 12px 0;
	border-bottom: 1px solid var(--sm-line);
	line-height: 1.5;
}
.sm-bullets li:last-child { border-bottom: 0; }
.sm-bullets li .num {
	color: var(--sm-accent);
	font-weight: 700;
}

/* -------- Utilitaires d'espacement -------- */
.sm-mt-0  { margin-top: 0; }
.sm-mt-1  { margin-top: 8px; }
.sm-mt-2  { margin-top: 16px; }
.sm-mt-3  { margin-top: 24px; }
.sm-mt-4  { margin-top: 32px; }
.sm-mt-6  { margin-top: 56px; }
.sm-mb-0  { margin-bottom: 0; }
.sm-mb-2  { margin-bottom: 16px; }
.sm-mb-4  { margin-bottom: 32px; }
.sm-mb-6  { margin-bottom: 56px; }

/* -------- Visibility helpers -------- */
@media (max-width: 720px) {
	.sm-hide-mobile { display: none !important; }
}
@media (min-width: 721px) {
	.sm-hide-desktop { display: none !important; }
}