/*
 * compare/duo — deux cartes de listes. La teinte d'une carte vient de sa
 * ligne (card_tone) ; sans teinte, la surface du site.
 */

.ivy-compare--duo {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding: clamp( 88px, 12vw, 160px ) clamp( 20px, 4vw, 40px );
	color: var( --ivy-ink, rgb( 17 17 17 ) );
}

.ivy-compare--duo .ivy-compare__header {
	display: grid;
	grid-template-columns: minmax( 0, 7fr ) minmax( 0, 5fr );
	align-items: end;
	gap: 18px clamp( 32px, 5vw, 80px );
	margin-bottom: 40px;
}

.ivy-compare--duo .ivy-compare__heading { display: grid; gap: 18px; }

.ivy-compare--duo .ivy-compare__eyebrow {
	margin: 0;
	color: var( --ivy-eyebrow-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ivy-compare--duo .ivy-compare__title { margin: 0; color: var( --ivy-title-color, var( --ivy-ink, rgb( 17 17 17 ) ) ); }
.ivy-compare--duo .ivy-compare__text { padding-bottom: 6px; color: var( --ivy-text-color, var( --ivy-muted, rgb( 82 82 82 ) ) ); }
.ivy-compare--duo .ivy-compare__text > :first-child { margin-top: 0; }
.ivy-compare--duo .ivy-compare__text > :last-child { margin-bottom: 0; }

.ivy-compare--duo .ivy-compare__columns { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 16px; }
.ivy-compare--duo .ivy-compare__cell { display: grid; }

.ivy-compare--duo .ivy-compare__column {
	display: grid;
	align-content: start;
	gap: 18px;
	padding: clamp( 24px, 3vw, 36px );
	border-radius: var( --ivy-radius-surface, 0 );
	background: var( --ivy-tone, var( --ivy-surface, rgb( 255 255 255 ) ) );
}

.ivy-compare--duo .ivy-compare__column-label {
	margin: 0;
	color: var( --ivy-item_label-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font-size: var( --ivy-font-label );
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ivy-compare--duo .ivy-compare__lines { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.ivy-compare--duo .ivy-compare__line {
	color: var( --ivy-item_include-color, var( --ivy-ink, rgb( 17 17 17 ) ) );
	font-family: var( --e-global-typography-primary-font-family, inherit );
	font-size: var( --ivy-font-lead );
}

.ivy-compare--duo .ivy-compare__line--detail {
	display: grid;
	gap: 4px;
	padding-bottom: 14px;
	border-bottom: 1px solid var( --ivy-line, rgb( 205 205 201 ) );
	font-family: inherit;
	font-size: var( --ivy-font-body );
}

.ivy-compare--duo .ivy-compare__line--detail strong { font-family: var( --e-global-typography-primary-font-family, inherit ); font-size: var( --ivy-font-lead ); font-weight: 480; }
.ivy-compare--duo .ivy-compare__line--detail span { color: var( --ivy-muted, rgb( 82 82 82 ) ); }

@media ( max-width: 900px ) {
	.ivy-compare--duo .ivy-compare__header,
	.ivy-compare--duo .ivy-compare__columns { grid-template-columns: minmax( 0, 1fr ); }
}