/* Grilles & espacements globaux
   Référence maquette : 12 colonnes, gouttière 20px, marges latérales 45px,
   largeur utile max. 1512px — variables : --grid-columns, --grid-gutter,
   --grid-margin-inline, --grid-max-width (tokens-fonts.css). */

/* ---------------------------------------------------------------------------
   Desktop & tablette (défaut) — grille 2 colonnes, etc.
   --------------------------------------------------------------------------- */

/* Même logique que hero / prestations / footer : marges latérales = --grid-margin-inline (45px au plafond desktop) */
.container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--grid-max-width);
	margin-inline: auto;
	padding-left: max(env(safe-area-inset-left), clamp(1rem, 4vw, var(--grid-margin-inline)));
	padding-right: max(env(safe-area-inset-right), clamp(1rem, 4vw, var(--grid-margin-inline)));
}

.section {
	padding-block: var(--space-section);
}

.section--tight {
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

/* ---------------------------------------------------------------------------
   Mobile & tablette étroite — max-width 800px
   --------------------------------------------------------------------------- */

@media (max-width: 800px) {
	.two-col {
		grid-template-columns: 1fr;
	}
}