/* ==========================================================================
   Section « Combien peut rapporter votre bien ? »
   ========================================================================== */
.combien {
	--media-w: min(660px, 100%);
	--media-h: clamp(220px, 28vw, 405px);
}

.combien__carousel {
	position: relative;
	margin-top: clamp(32px, 4vw, 56px);
}

.combien__track {
	display: grid;
	justify-items: center;
}

.combien__item {
	grid-area: 1 / 1;
	width: var(--media-w);
	transform-origin: 50% calc(var(--media-h) / 2);
	transition: transform .6s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
	opacity: 0;
	visibility: hidden;
}

.combien__item.is-active {
	z-index: 2;
	opacity: 1;
	visibility: visible;
}

.combien__media {
	height: var(--media-h);
	overflow: hidden;
	border-radius: 12px;
	background: var(--c-dark-3);
}

.combien__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.combien__info {
	margin-top: 18px;
	transition: opacity .4s var(--ease);
}

.combien__item:not(.is-active) .combien__info {
	opacity: 0;
}

.combien__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.combien__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .12);
}

.combien__icon .icon {
	width: 18px;
	height: 18px;
}

.combien__type {
	font-size: 1.25rem;
	line-height: 1.15;
}

.combien__size {
	font-size: 0.8125rem;
	color: #a8a397;
}

.combien__revenue {
	margin-left: auto;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
	font-weight: 300;
	white-space: nowrap;
}

.combien__revenue strong {
	font-weight: 600;
}

.combien__stats {
	display: grid;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 0.9375rem;
}

.combien__stats div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.combien__stats dd {
	margin: 0;
	font-weight: 600;
}

/* Flèches placées sur les bords de la photo active */
.combien__carousel .carousel-arrow {
	position: absolute;
	top: calc(var(--media-h) / 2 - 28px);
	z-index: 3;
}

.combien__carousel .carousel-arrow--prev { left: calc(50% - var(--media-w) / 2 - 28px); }
.combien__carousel .carousel-arrow--next { right: calc(50% - var(--media-w) / 2 - 28px); }

/* Atouts */
.combien__features {
	display: grid;
	gap: 16px;
	margin-top: clamp(48px, 6vw, 90px);
	padding: clamp(40px, 5vw, 88px) 0 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	list-style: none;
}

.combien__feature {
	padding: 18px 20px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 8px;
	background: rgba(255, 255, 255, .07);
	text-align: center;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--c-on-dark);
}

.combien__feature-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 8px;
	font-size: 1rem;
	color: var(--c-white);
}

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

/* Bureau : photos voisines visibles de chaque côté */
@media (min-width: 1180px) {
	.combien__item.is-prev,
	.combien__item.is-next {
		z-index: 1;
		visibility: visible;
		opacity: .45;
		filter: saturate(.6) brightness(.7);
	}

	.combien__item.is-prev { transform: translateX(-74%) scale(.56); }
	.combien__item.is-next { transform: translateX(74%) scale(.56); }

	.combien__features {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1179px) {
	.combien__carousel .carousel-arrow {
		width: 46px;
		height: 46px;
		top: calc(var(--media-h) / 2 - 23px);
	}

	.combien__carousel .carousel-arrow--prev { left: 10px; }
	.combien__carousel .carousel-arrow--next { right: 10px; }
}

@media (max-width: 767px) {
	.combien {
		--media-h: 240px;
	}

	.combien__head {
		flex-wrap: wrap;
	}

	.combien__revenue {
		width: 100%;
		margin-left: 0;
	}
}