/**
 * Valeurs par défaut.
 *
 * Les valeurs de repli permettent au système de fonctionner
 * même si les variables provenant de theme.json ne sont pas chargées.
 */

.wp-block-group.is-style-ccma-width-large {
	--ccma-composition-width:
		var(
			--wp--custom--ccma--composition-width--large,
			84vw
		);
}

.wp-block-group.is-style-ccma-width-medium {
	--ccma-composition-width:
		var(
			--wp--custom--ccma--composition-width--medium,
			72vw
		);
}

.wp-block-group.is-style-ccma-width-small {
	--ccma-composition-width:
		var(
			--wp--custom--ccma--composition-width--small,
			47vw
		);
}

/**
 * Règle commune.
 *
 * Ne pas utiliser :where() ici, afin que la règle conserve
 * une spécificité suffisante face aux styles Gutenberg.
 */
.wp-block-group.is-style-ccma-width-large,
.wp-block-group.is-style-ccma-width-medium,
.wp-block-group.is-style-ccma-width-small {
	box-sizing: border-box;

	width: var(--ccma-composition-width) !important;
	max-width: var(--ccma-composition-width) !important;

	margin-left: auto !important;
	margin-right: auto !important;
}

/**
 * Largeur commune sur tablette et mobile.
 */
@media (max-width: 781px) {
	.wp-block-group.is-style-ccma-width-large,
	.wp-block-group.is-style-ccma-width-medium,
	.wp-block-group.is-style-ccma-width-small {
		--ccma-composition-width:
			var(
				--wp--custom--ccma--composition-width--mobile,
				90vw
			);
	}
}