/* =========================================================
   MLT COMPARATIF — cartes blanches côte à côte sur fond crème,
   pastille « ou » entre elles. Mobile : cartes empilées ;
   ≥ 768 px : 2 colonnes, pastille au centre. Dépend de mlt-tokens.
   ========================================================= */

.mlt-comparatif {
	background: var(--mlt-color-fond);
}

.mlt-comparatif__entete {
	max-width: 760px;
	margin-bottom: var(--mlt-space-48);
}

.mlt-comparatif__grille {
	display: grid;
	gap: var(--mlt-space-16);
}

.mlt-comparatif__carte {
	padding: var(--mlt-space-32) var(--mlt-space-24);
	border-radius: var(--mlt-radius-panel);
	background: var(--mlt-color-blanc);
}

/* Pastille cerclée d'ocre, comme les numéros des frises */
.mlt-comparatif__ou {
	display: grid;
	place-items: center;
	justify-self: center;
	width: 56px;
	height: 56px;
	border: 2px solid var(--mlt-color-ocre);
	border-radius: 50%;
	background: var(--mlt-color-fond);
	color: var(--mlt-color-olive);
	font-size: var(--mlt-fs-body);
	font-weight: 700;
}

.mlt-page .mlt-comparatif__nom {
	margin: 0;
	color: var(--mlt-color-olive);
	font-size: var(--mlt-fs-h2);
	font-weight: 500;
	line-height: var(--mlt-lh-title);
	letter-spacing: -0.03em;
}

.mlt-comparatif__accroche {
	margin: var(--mlt-space-8) 0 0;
	color: var(--mlt-color-texte-doux);
	font-size: var(--mlt-fs-lead);
}

/* Jauge : 5 crans, pleins en olive */
.mlt-comparatif__intensite {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mlt-space-8) var(--mlt-space-16);
	margin-top: var(--mlt-space-24);
}

.mlt-comparatif__intensite-libelle {
	color: var(--mlt-color-texte);
	font-size: var(--mlt-fs-small);
	font-weight: 700;
}

.mlt-comparatif__jauge {
	display: inline-flex;
	gap: var(--mlt-space-4);
}

.mlt-comparatif__cran {
	width: 28px;
	height: 8px;
	border-radius: var(--mlt-radius-pill);
	background: var(--mlt-color-ligne);
}

.mlt-comparatif__cran.is-plein {
	background: var(--mlt-color-olive);
}

.mlt-comparatif__liste {
	margin: var(--mlt-space-32) 0 0;
}

.mlt-comparatif__ligne {
	padding: var(--mlt-space-16) 0;
	border-top: 1px solid var(--mlt-color-ligne);
}

.mlt-comparatif__ligne:last-child {
	padding-bottom: 0;
}

.mlt-comparatif__ligne dt {
	margin: 0 0 var(--mlt-space-4);
	color: var(--mlt-color-texte-doux);
	font-size: var(--mlt-fs-small);
	font-weight: 700;
}

.mlt-comparatif__ligne dd {
	margin: 0;
	color: var(--mlt-color-texte);
	font-size: var(--mlt-fs-body);
	line-height: var(--mlt-lh-body);
}

.mlt-comparatif__pied {
	margin: var(--mlt-space-32) 0 0;
	text-align: center;
}

@media (min-width: 768px) {
	/* Les cartes se touchent presque ; la pastille chevauche leur bord commun */
	.mlt-comparatif__grille {
		position: relative;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mlt-space-24);
	}

	.mlt-comparatif__ou {
		position: absolute;
		top: var(--mlt-space-48);
		left: calc(50% - 28px);
		z-index: 1;
	}

	.mlt-comparatif__carte {
		padding: var(--mlt-space-48) var(--mlt-space-48) var(--mlt-space-32);
	}
}