/**
 * ==========================================================
 * ESTIMATION SECTION
 * MetrYMMO V2
 * Identité premium — Noir / Brun / Bronze / Or
 * ==========================================================
 */

.estimation {
	position: relative;

	padding: 105px 0;

	background:
		radial-gradient(
			circle at 15% 50%,
			rgba(201, 154, 85, .10),
			transparent 32rem
		),
		linear-gradient(
			135deg,
			#0B0B0B 0%,
			#15100C 100%
		);

	overflow: hidden;
}


/* ==========================================================
   DÉCORATION
========================================================== */

.estimation::before {
	content: "";

	position: absolute;

	width: 520px;
	height: 520px;

	left: -300px;
	top: 50%;

	transform: translateY(-50%);

	border-radius: 50%;

	border: 1px solid rgba(
		201,
		154,
		85,
		.10
	);

	pointer-events: none;
}

.estimation::after {
	content: "";

	position: absolute;

	width: 360px;
	height: 360px;

	right: -190px;
	bottom: -200px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(
				201,
				154,
				85,
				.13
			),
			transparent 70%
		);

	pointer-events: none;
}


/* ==========================================================
   STRUCTURE
========================================================== */

.estimation .container {
	position: relative;

	z-index: 2;

	width: min(
		calc(100% - 48px),
		1320px
	);

	margin: 0 auto;
}

.estimation-wrapper {
	display: grid;

	grid-template-columns:
		minmax(0, 1.12fr)
		minmax(0, .88fr);

	align-items: center;

	gap: 85px;
}


/* ==========================================================
   CONTENU
========================================================== */

.estimation-content {
	max-width: 620px;
}

.estimation-content .section-subtitle {
	display: block;

	margin-bottom: 17px;

	color: #E0BB80;

	font-size: .78rem;

	font-weight: 800;

	letter-spacing: .16em;

	line-height: 1.4;

	text-transform: uppercase;
}

.estimation-content .section-title {
	margin: 0 0 24px;

	color: #F5EEE3;

	font-family:
		"Poppins",
		sans-serif;

	font-size:
		clamp(
			2.6rem,
			4.5vw,
			4.5rem
		);

	font-weight: 800;

	line-height: 1.02;

	letter-spacing: -.04em;
}

.estimation-content .section-description {
	max-width: 600px;

	margin: 0 0 34px;

	color: rgba(
		245,
		238,
		227,
		.72
	);

	font-size: 1rem;

	line-height: 1.8;
}


/* ==========================================================
   LISTE
========================================================== */

.estimation-list {
	display: flex;

	flex-direction: column;

	gap: 13px;

	margin: 0 0 38px;

	padding: 0;

	list-style: none;
}

.estimation-list li {
	display: flex;

	align-items: center;

	gap: 11px;

	color: #F5EEE3;

	font-size: .98rem;

	font-weight: 500;
}

.estimation-list li::first-letter {
	color: #E0BB80;
}


/* ==========================================================
   IMAGE
========================================================== */

.estimation-image {
	position: relative;

	min-width: 0;
	width: min(100%, 520px);
	margin: 0 auto;
}

.estimation-image::before {
	content: "";

	position: absolute;

	z-index: 0;

	top: -22px;
	right: -22px;

	width: 135px;
	height: 135px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			#E0BB80 0%,
			#C99A55 38%,
			transparent 70%
		);

	opacity: .35;

	pointer-events: none;
}

.estimation-image::after {
	content: "";

	position: absolute;

	z-index: 0;

	left: -18px;
	bottom: -18px;

	width: 120px;
	height: 120px;

	border:
		1px solid
		rgba(
			201,
			154,
			85,
			.35
		);

	border-radius: 50%;

	pointer-events: none;
}

.estimation-image img {
	position: relative;

	z-index: 1;

	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;

	object-fit: cover;

	object-position: center top;

	border:
		1px solid
		rgba(
			201,
			154,
			85,
			.25
		);

	border-radius: 28px;

	box-shadow:
		0 35px 90px
		rgba(
			0,
			0,
			0,
			.42
		);

	transition:
		transform .55s ease,
		border-color .35s ease;
}

.estimation-image:hover img {
	transform: translateY(-5px);

	border-color:
		rgba(
			224,
			187,
			128,
			.48
		);
}


/* ==========================================================
   BOUTON
========================================================== */

.estimation .hero-button {
	position: relative;

	z-index: 3;

	box-sizing: border-box;

	max-width: 100%;
}


/* ==========================================================
   TABLETTE
========================================================== */

@media (max-width: 1100px) {

	.estimation {
		padding:
			90px 0;
	}

	.estimation-wrapper {
		gap: 55px;
	}

	.estimation-content .section-title {
		font-size: 3.3rem;
	}

	.estimation-image img {
		height: auto;
	}
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 991px) {

	.estimation {
		padding:
			80px 0;
	}

	.estimation-wrapper {
		grid-template-columns: 1fr;

		gap: 55px;
	}

	.estimation-content {
		max-width: 760px;

		margin: 0 auto;

		text-align: center;
	}

	.estimation-content .section-description {
		margin-left: auto;
		margin-right: auto;
	}

	.estimation-list {
		align-items: center;
	}

	.estimation-image {
		width: min(
			100%,
			520px
		);

		margin: 0 auto;
	}

	.estimation-image img {
		height: auto;
	}
}


/* ==========================================================
   PETIT MOBILE
========================================================== */

@media (max-width: 576px) {

	.estimation {
		padding:
			65px 0
			70px;
	}

	.estimation .container {
		width:
			min(
				calc(100% - 36px),
				1320px
			);
	}

	.estimation-content .section-title {
		font-size: 2.45rem;
	}

	.estimation-content .section-description {
		font-size: .94rem;

		line-height: 1.7;
	}

	.estimation-list {
		align-items: flex-start;

		text-align: left;
	}

	.estimation-list li {
		font-size: .92rem;
	}

	.estimation-image::before {
		width: 90px;
		height: 90px;

		top: -15px;
		right: -10px;
	}

	.estimation-image::after {
		width: 80px;
		height: 80px;

		left: -10px;
		bottom: -10px;
	}

	.estimation-image img {
		height: auto;

		border-radius: 20px;
	}


	/* ======================================================
	   BOUTON — CORRECTION DÉBORDEMENT MOBILE
	====================================================== */

	.estimation .hero-button {
		display: flex;

		align-items: center;
		justify-content: center;

		width: 100%;
		max-width: 100%;

		margin-left: 0;
		margin-right: 0;

		box-sizing: border-box;
	}
}