/* Section « Touchez 80 % de vos revenus » */
.comparatif {
	padding-block: clamp(56px, 7vw, 96px) var(--section-space);
}

.comparatif__grid {
	display: grid;
	gap: 18px;
	align-items: center;
	max-width: 1240px;
	margin: clamp(32px, 4vw, 48px) auto 0;
}

.compare-card {
	position: relative;
	padding: clamp(24px, 2.6vw, 34px);
	border-radius: 20px;
}

.compare-card--light {
	border: 4px solid #efede7;
	background: var(--c-white);
}

.compare-card--dark {
	padding-block: clamp(32px, 3.4vw, 44px);
	background: var(--c-dark);
	color: var(--c-white);
	box-shadow: 0 24px 50px rgba(36, 31, 20, .18);
}

.compare-card__badge {
	position: absolute;
	top: 22px;
	right: 22px;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: var(--c-gold);
	font-size: 0.875rem;
}

.compare-card__title {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--c-line);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}

.compare-card--dark .compare-card__title {
	border-bottom-color: rgba(255, 255, 255, .16);
	color: var(--c-gold);
}

.compare-card__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: #f6e7c7;
	color: var(--c-gold-dark);
}

.compare-card--dark .compare-card__icon {
	background: var(--c-cream);
}

.compare-card__icon .icon {
	width: 20px;
	height: 20px;
}

.compare-card__list {
	display: grid;
	gap: 14px;
	margin-top: 22px;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.compare-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.compare-card__mark {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: #e5484d;
}

.compare-card--dark .compare-card__mark {
	color: var(--c-gold);
}

@media (min-width: 900px) {
	.comparatif__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Encadré « revenu net estimé » en bas des cartes */
.compare-card {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.compare-card__total {
	margin-top: auto;
	padding: 16px;
	border-radius: 8px;
	background: #f6f5f1;
	text-align: center;
	transform: translateY(0);
}

.compare-card__list:has(+ .compare-card__total) {
	margin-bottom: 28px;
}

.compare-card__total-label {
	font-size: 0.875rem;
	color: var(--c-text);
}

.compare-card__total-value {
	margin-top: 4px;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
}

.compare-card__total-note {
	margin-top: 4px;
	font-size: 0.875rem;
	color: #e5484d;
}

.compare-card--dark .compare-card__total {
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .06);
}

.compare-card--dark .compare-card__total-label,
.compare-card--dark .compare-card__total-note {
	color: rgba(255, 255, 255, .8);
}

.compare-card--dark .compare-card__total-value {
	color: #4cc25d;
}

/* Coches vertes et « Objectif » en valeur sur la carte Homelok */
.compare-card--dark .compare-card__mark {
	color: #4cc25d;
}

.compare-card__goal {
	font-style: normal;
	color: #4cc25d;
}

@media (min-width: 900px) {
	.comparatif__grid {
		align-items: stretch;
	}
}