/**
 * 3SAFE QCM Library — Correctif 4 colonnes
 * Les règles sont volontairement inactives tant que le script n'a pas ajouté
 * les classes s3qcm-four-columns-root et s3qcm-four-columns-grid.
 */

/* Le sélecteur :is() ajoute une spécificité suffisante pour neutraliser
 * les anciennes règles pleine largeur, même lorsqu’elles utilisent un identifiant. */
:is(#s3qcm-four-columns-specificity, .s3qcm-four-columns-root) .s3qcm-four-columns-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: clamp(14px, 1.35vw, 22px) !important;
	align-items: start !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
}

:is(#s3qcm-four-columns-specificity, .s3qcm-four-columns-root) .s3qcm-four-columns-grid > .s3qcm-four-columns-item {
	min-width: 0 !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	grid-column: auto !important;
	grid-row: auto !important;
	float: none !important;
	clear: none !important;
	box-sizing: border-box !important;
}

:is(#s3qcm-four-columns-specificity, .s3qcm-four-columns-root) .s3qcm-four-columns-grid > .s3qcm-four-columns-item > summary,
:is(#s3qcm-four-columns-specificity, .s3qcm-four-columns-root) .s3qcm-four-columns-grid > .s3qcm-four-columns-item > button[aria-expanded] {
	width: 100% !important;
	box-sizing: border-box !important;
}

:is(#s3qcm-four-columns-specificity, .s3qcm-four-columns-root) .s3qcm-four-columns-grid > .s3qcm-four-columns-item img,
:is(#s3qcm-four-columns-specificity, .s3qcm-four-columns-root) .s3qcm-four-columns-grid > .s3qcm-four-columns-item iframe,
:is(#s3qcm-four-columns-specificity, .s3qcm-four-columns-root) .s3qcm-four-columns-grid > .s3qcm-four-columns-item video {
	max-width: 100% !important;
}

/* Tablette : deux colonnes pour préserver la lisibilité des libellés. */
@media (max-width: 1024px) {
	/* Le sélecteur :is() ajoute une spécificité suffisante pour neutraliser
 * les anciennes règles pleine largeur, même lorsqu’elles utilisent un identifiant. */
:is(#s3qcm-four-columns-specificity, .s3qcm-four-columns-root) .s3qcm-four-columns-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Téléphone : une seule colonne, sans débordement horizontal. */
@media (max-width: 680px) {
	/* Le sélecteur :is() ajoute une spécificité suffisante pour neutraliser
 * les anciennes règles pleine largeur, même lorsqu’elles utilisent un identifiant. */
:is(#s3qcm-four-columns-specificity, .s3qcm-four-columns-root) .s3qcm-four-columns-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 12px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(#s3qcm-four-columns-specificity, .s3qcm-four-columns-root) .s3qcm-four-columns-grid,
	:is(#s3qcm-four-columns-specificity, .s3qcm-four-columns-root) .s3qcm-four-columns-grid * {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}