/*
 * Mise en page : conteneur, grille, pile, section. Pas de framework : ces quatre classes,
 * et des réglages locaux (--colonnes, --pile-espace) que chaque section pose dans son CSS.
 * Mobile-first : une section change de colonnes en min-width (576, 768, 992, 1200, 1400).
 *
 *   .dqb-temoignages__liste { --colonnes: 1; }
 *   @media (min-width: 768px) { .dqb-temoignages__liste { --colonnes: 3; } }
 */

.dqb-conteneur {
	width: 100%;
	max-width: var(--conteneur-max);
	margin-inline: auto;
	padding-inline: var(--conteneur-marge);
}

.dqb-conteneur-etroit {
	width: 100%;
	max-width: var(--conteneur-etroit);
	margin-inline: auto;
	padding-inline: var(--conteneur-marge);
}

.dqb-grille {
	display: grid;
	grid-template-columns: repeat(var(--colonnes, 1), minmax(0, 1fr));
	gap: var(--grille-espace);
}

.dqb-pile {
	display: flex;
	flex-direction: column;
	gap: var(--pile-espace, var(--espace-4));
}

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