/* Section « Exemple concret » : carte de calcul */
.exemple {
	padding-block: var(--section-space);
}

.exemple__card {
	max-width: 620px;
	margin: clamp(28px, 3.5vw, 40px) auto 0;
	padding: clamp(22px, 3vw, 36px);
	border-radius: 16px;
	background: var(--c-dark);
	box-shadow: 0 24px 60px rgba(36, 31, 20, .18);
	color: var(--c-white);
}

.exemple__card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	font-size: 1.0625rem;
	color: var(--c-gold);
}

.exemple__card-title .icon {
	width: 20px;
	height: 20px;
}

.exemple__rows {
	margin: 0;
}

.exemple__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-block: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	font-size: 1rem;
}

.exemple__row dt {
	color: rgba(255, 255, 255, .78);
}

.exemple__row dd {
	margin: 0;
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

/* Résultat : la récompense de l'ambassadeur */
.exemple__row--result {
	margin-top: 10px;
	padding: 18px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--c-gold);
	color: var(--c-dark);
}

.exemple__row--result dt {
	font-weight: 500;
	color: var(--c-dark);
}

.exemple__row--result dd {
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
	font-weight: 600;
}

.exemple__note {
	margin-top: 16px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .7);
}