.cf7-dnd-row {
	display: grid;
	grid-template-columns: repeat( var( --cf7-dnd-columns, 1 ), minmax( 0, 1fr ) );
	gap: var( --cf7-dnd-column-gap, 20px );
	align-items: start;
	margin-bottom: 1em;
}

.cf7-dnd-column {
	min-width: 0;
}

.cf7-dnd-row--columns-2 { --cf7-dnd-columns: 2; }
.cf7-dnd-row--columns-3 { --cf7-dnd-columns: 3; }
.cf7-dnd-row--columns-4 { --cf7-dnd-columns: 4; }
.cf7-dnd-row--columns-5 { --cf7-dnd-columns: 5; }
.cf7-dnd-row--columns-6 { --cf7-dnd-columns: 6; }

.cf7-dnd-column > :first-child {
	margin-top: 0;
}

.cf7-dnd-column > :last-child {
	margin-bottom: 0;
}

.cf7-dnd-row--gap-0 { --cf7-dnd-column-gap: 0; }
.cf7-dnd-row--gap-8 { --cf7-dnd-column-gap: 8px; }
.cf7-dnd-row--gap-16 { --cf7-dnd-column-gap: 16px; }
.cf7-dnd-row--gap-24 { --cf7-dnd-column-gap: 24px; }
.cf7-dnd-row--gap-32 { --cf7-dnd-column-gap: 32px; }
.cf7-dnd-row--gap-48 { --cf7-dnd-column-gap: 48px; }
.cf7-dnd-row--spacing-0 { margin-bottom: 0; }
.cf7-dnd-row--spacing-8 { margin-bottom: 8px; }
.cf7-dnd-row--spacing-16 { margin-bottom: 16px; }
.cf7-dnd-row--spacing-24 { margin-bottom: 24px; }
.cf7-dnd-row--spacing-32 { margin-bottom: 32px; }
.cf7-dnd-row--spacing-48 { margin-bottom: 48px; }
.cf7-dnd-row--align-center { align-items: center; }
.cf7-dnd-row--align-end { align-items: end; }
.cf7-dnd-row--align-stretch { align-items: stretch; }

.cf7-dnd-step-progress {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 1.5em;
}

.cf7-dnd-step-markers {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 5px;
}

.cf7-dnd-step-marker {
	display: flex;
	flex: 1 0 120px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px;
	border-bottom: 3px solid #dcdcde;
	text-align: center;
}

/* !important : le thème donne display:flex aux boutons et aux pastilles,
   l'attribut hidden doit toujours l'emporter. */
.cf7-dnd-step[hidden],
.cf7-dnd-step-marker[hidden],
.cf7-dnd-step-navigation button[hidden] {
	display: none !important;
}

.cf7-dnd-step-marker__number {
	display: inline-grid;
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	place-items: center;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: .82em;
	font-weight: 700;
}

.cf7-dnd-step-marker.is-active,
.cf7-dnd-step-marker.is-complete {
	border-color: currentColor;
}

.cf7-dnd-pagination-progress {
	display: grid;
	gap: 6px;
}

.cf7-dnd-progress-label {
	font-size: .875em;
	font-weight: 700;
	text-align: right;
}

.cf7-dnd-progress-bar {
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: #e5e7eb;
}

.cf7-dnd-progress-bar span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: currentColor;
	transition: width .25s ease;
}

.cf7-dnd-step-navigation {
	display: flex;
	flex-wrap: wrap; /* évite le débordement des deux boutons sur petit écran */
	justify-content: space-between;
	gap: 12px;
	margin-top: 1.5em;
}

.cf7-dnd-step-next {
	margin-left: auto;
}

@media ( max-width: 782px ) {
	.cf7-dnd-row--stack-tablet {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 600px ) {
	.cf7-dnd-row--stack-mobile {
		grid-template-columns: 1fr;
	}

	.cf7-dnd-step-marker {
		flex-basis: 105px;
		font-size: .9em;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cf7-dnd-progress-bar span {
		transition: none;
	}
}

/* ── Conditional rows ────────────────────────────────────────────────
   .cf7-dnd-row sets display:grid, which would win over the browser's
   [hidden] rule, so the hidden state has to be restated here. */
.cf7-dnd-conditional[hidden],
.cf7-dnd-row[hidden] {
	display: none !important;
}