/**
 * ==========================================================
 * MetrYMMO V2
 * POURQUOI METRYMMO
 * ==========================================================
 *
 * Direction artistique :
 * Brun profond / Noir / Crème / Or
 *
 * ==========================================================
 */


/* ==========================================================
   SECTION
   ========================================================== */

.why-us {
	position: relative;
	padding: 110px 0;
	background:
		radial-gradient(
			circle at 85% 20%,
			rgba(201, 154, 85, 0.08) 0%,
			rgba(201, 154, 85, 0) 34%
		),
		linear-gradient(
			135deg,
			#17100C 0%,
			#21160F 48%,
			#120D0A 100%
		);
	color: #FFFFFF;
	overflow: hidden;
}


/* ==========================================================
   GRAND M EN FILIGRANE
   ========================================================== */

.why-us::after {
	content: "M";

	position: absolute;

	right: -30px;
	top: 50%;

	transform: translateY(-50%);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: min(52vw, 720px);
	font-weight: 700;
	line-height: .7;

	color: transparent;

	-webkit-text-stroke:
		1px
		rgba(224, 187, 128, 0.075);

	text-shadow:
		0 0 80px
		rgba(201, 154, 85, 0.035);

	pointer-events: none;

	z-index: 0;
}


/* ==========================================================
   LÉGER ÉLÉMENT DÉCORATIF
   ========================================================== */

.why-us::before {
	content: "";

	position: absolute;

	left: -180px;
	bottom: -260px;

	width: 520px;
	height: 520px;

	border-radius: 50%;

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

	box-shadow:
		0 0 0 70px
		rgba(201, 154, 85, 0.018),
		0 0 0 140px
		rgba(201, 154, 85, 0.012);

	pointer-events: none;

	z-index: 0;
}


/* ==========================================================
   CONTAINER
   ========================================================== */

.why-us .container {
	position: relative;
	z-index: 2;

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

	margin: 0 auto;
}


/* ==========================================================
   HEADING
   ========================================================== */

.why-us .section-heading {
	max-width: 820px;
	margin: 0 0 62px;
}

.why-us .section-subtitle {
	display: block;

	margin-bottom: 16px;

	color: #C99A55;

	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;

	letter-spacing: .19em;

	text-transform: uppercase;
}

.why-us .section-title {
	margin: 0;

	color: #FFFFFF;

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

	font-size:
		clamp(
			42px,
			5vw,
			68px
		);

	font-weight: 700;
	line-height: 1.02;

	letter-spacing: -.045em;
}

.why-us .section-description {
	max-width: 760px;

	margin:
		22px 0 0;

	color:
		rgba(
			255,
			255,
			255,
			.66
		);

	font-size: 16px;
	line-height: 1.75;
}


/* ==========================================================
   GRILLE
   ========================================================== */

.why-us-grid {
	display: grid;

	grid-template-columns:
		repeat(
			4,
			minmax(0, 1fr)
		);

	gap: 16px;
}


/* ==========================================================
   CARTE
   ========================================================== */

.why-card {
	position: relative;

	min-height: 265px;

	padding:
		30px 27px
		28px;

	border:
		1px solid
		rgba(
			255,
			255,
			255,
			.10
		);

	border-radius: 16px;

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, .055),
			rgba(255, 255, 255, .018)
		);

	box-shadow:
		0 20px 50px
		rgba(
			0,
			0,
			0,
			.20
		);

	overflow: hidden;

	transition:
		transform .3s ease,
		border-color .3s ease,
		background .3s ease,
		box-shadow .3s ease;
}


/* Ligne dorée supérieure */

.why-card::before {
	content: "";

	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 2px;

	background:
		linear-gradient(
			90deg,
			#A86F3D,
			#E0BB80,
			#A86F3D
		);

	transform:
		scaleX(0);

	transform-origin:
		left center;

	transition:
		transform .35s ease;
}

.why-card:hover {
	transform:
		translateY(-7px);

	border-color:
		rgba(
			201,
			154,
			85,
			.28
		);

	background:
		linear-gradient(
			145deg,
			rgba(255, 255, 255, .075),
			rgba(255, 255, 255, .025)
		);

	box-shadow:
		0 28px 60px
		rgba(
			0,
			0,
			0,
			.28
		);
}

.why-card:hover::before {
	transform:
		scaleX(1);
}


/* ==========================================================
   ICÔNE
   ========================================================== */

.why-icon {
	display: flex;

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

	width: 52px;
	height: 52px;

	margin-bottom: 25px;

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

	border-radius: 13px;

	background:
		linear-gradient(
			145deg,
			rgba(201, 154, 85, .18),
			rgba(201, 154, 85, .055)
		);

	color: #E0BB80;

	font-size: 20px;
	line-height: 1;

	box-shadow:
		inset 0 1px 0
		rgba(
			255,
			255,
			255,
			.06
		);
}


/* ==========================================================
   TITRE CARTE
   ========================================================== */

.why-card h3 {
	margin:
		0 0 12px;

	color: #FFFFFF;

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

	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;

	letter-spacing: -.015em;
}


/* ==========================================================
   TEXTE CARTE
   ========================================================== */

.why-card p {
	margin: 0;

	color:
		rgba(
			255,
			255,
			255,
			.58
		);

	font-size: 14px;
	line-height: 1.75;
}


/* ==========================================================
   PETIT ACCENT
   ========================================================== */

.why-card__number {
	display: block;

	margin-top: 24px;

	color:
		rgba(
			224,
			187,
			128,
			.42
		);

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: 12px;
	font-weight: 700;

	letter-spacing: .12em;
}


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

@media (max-width: 1050px) {

	.why-us {
		padding: 90px 0;
	}

	.why-us-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}

	.why-card {
		min-height: 240px;
	}

	.why-us::after {
		right: -120px;
		font-size: 560px;
	}

}


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

@media (max-width: 700px) {

	.why-us {
		padding: 76px 0;
	}

	.why-us .container {
		width:
			calc(100% - 36px);
	}

	.why-us .section-heading {
		margin-bottom: 38px;
	}

	.why-us .section-subtitle {
		font-size: 10px;
	}

	.why-us .section-title {
		font-size: 40px;
		line-height: 1.03;
	}

	.why-us .section-description {
		margin-top: 18px;
		font-size: 15px;
		line-height: 1.7;
	}

	.why-us-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.why-card {
		min-height: auto;
		padding: 27px 23px;
	}

	.why-icon {
		width: 48px;
		height: 48px;
		margin-bottom: 20px;
	}

	.why-card h3 {
		font-size: 17px;
	}

	.why-card p {
		font-size: 14px;
	}

	.why-us::after {
		right: -100px;
		top: 58%;
		font-size: 390px;

		-webkit-text-stroke:
			1px
			rgba(224, 187, 128, 0.055);
	}

}


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

@media (max-width: 430px) {

	.why-us {
		padding: 64px 0;
	}

	.why-us .section-title {
		font-size: 35px;
	}

	.why-us .section-description {
		font-size: 14px;
	}

	.why-card {
		padding: 24px 20px;
	}

}