/* ==========================================================================
   Responsive
   La maquette ne fournit que la version desktop : les règles ci-dessous sont
   des hypothèses documentées, à valider visuellement (README §6).
   Breakpoints alignés sur ceux de Divi : 980px (tablette) et 767px (mobile).
   ========================================================================== */

/* --- Tablette ------------------------------------------------------------- */

@media (max-width: 980px) {
	:root {
		--cb-space-xl: 4rem;
		--cb-grid-gap: 1.5rem;
	}

	/* Deux colonnes : trois cartes deviennent illisibles sous 980px. */
	.cb-posts__grid,
	.cb-prose .wp-block-gallery,
	.cb-prose .gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--cb-space-xl: 3rem;
		--cb-grid-gap: 1.25rem;
	}

	.cb-posts__grid,
	.cb-prose .wp-block-gallery,
	.cb-prose .gallery {
		grid-template-columns: 1fr;
	}

	/* Boutons du footer en pleine largeur : cibles tactiles plus confortables. */
	.cb-button {
		width: 100%;
	}

	.cb-card__body {
		padding: var(--cb-space-sm);
	}
}