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

.services {
	position: relative;
	padding: 100px 0 110px;
	background:
		linear-gradient(
			180deg,
			#F8F6F2 0%,
			#FFFFFF 100%
		);
	overflow: hidden;
}


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

.services .container {
	width: min(
		calc(100% - 48px),
		1320px
	);
	margin: 0 auto;
}


/* ==========================================================
   HEADER
========================================================== */

.services .section-heading {
	max-width: 850px;
	margin: 0 auto;
	text-align: center;
}

.services .section-subtitle {
	display: block;
	margin-bottom: 15px;
	color: #A86F3D;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.services .section-title {
	margin: 0 0 18px;
	color: #0B0B0B;
	font-family: "Poppins", sans-serif;
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.04em;
}

.services .section-description {
	max-width: 720px;
	margin: 0 auto;
	color: #665D54;
	font-size: 1rem;
	line-height: 1.75;
}


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

.services-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 55px;
}


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

.service-card {
	position: relative;
	overflow: hidden;
	min-height: 365px;
	padding: 34px 30px;
	border: 1px solid rgba(11, 11, 11, .08);
	border-radius: 22px;
	background: #FFFFFF;
	box-shadow:
		0 14px 40px rgba(11, 11, 11, .06);
	transition:
		transform .35s ease,
		border-color .35s ease,
		box-shadow .35s ease;
}

.service-card:hover {
	transform: translateY(-8px);
	border-color: rgba(201, 154, 85, .38);
	box-shadow:
		0 25px 55px rgba(11, 11, 11, .12);
}


/* ==========================================================
   LIGNE OR
========================================================== */

.service-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background:
		linear-gradient(
			90deg,
			#A86F3D,
			#C99A55,
			#E0BB80
		);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s ease;
}

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


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

.service-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 28px;
	border: 1px solid rgba(201, 154, 85, .22);
	border-radius: 18px;
	background:
		linear-gradient(
			145deg,
			#21160F,
			#0B0B0B
		);
	color: #E0BB80;
	font-size: 29px;
	box-shadow:
		0 10px 25px rgba(11, 11, 11, .12);
	transition:
		transform .35s ease,
		background .35s ease,
		color .35s ease;
}

.service-card:hover .service-icon {
	transform:
		translateY(-3px)
		rotate(-5deg);
	background:
		linear-gradient(
			135deg,
			#E0BB80,
			#C99A55
		);
	color: #0B0B0B;
}


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

.service-card h3 {
	margin: 0 0 15px;
	color: #0B0B0B;
	font-family: "Poppins", sans-serif;
	font-size: 1.35rem;
	font-weight: 750;
	line-height: 1.2;
}


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

.service-card p {
	margin: 0 0 27px;
	color: #6B6259;
	font-size: .94rem;
	line-height: 1.75;
}


/* ==========================================================
   LIEN
========================================================== */

.service-card a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #A86F3D;
	font-size: .9rem;
	font-weight: 800;
	transition: color .3s ease;
}

.service-card a::after {
	content: "→";
	display: inline-block;
	transition: transform .3s ease;
}

.service-card:hover a {
	color: #C99A55;
}

.service-card:hover a::after {
	transform: translateX(7px);
}


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

@media (max-width: 1200px) {

	.services {
		padding: 90px 0 100px;
	}

	.services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}
}


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

@media (max-width: 768px) {

	.services {
		padding: 55px 0 75px !important;
	}

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

	.services .section-title {
		font-size: 2.4rem;
	}

	.services-grid {
		grid-template-columns: 1fr;
		margin-top: 40px;
		gap: 18px;
	}

	/*
	 * Cartes compactes sur téléphone.
	 * On supprime toute hauteur imposée et
	 * tout espace vertical automatique.
	 */
	.service-card {
		min-height: 0 !important;
		height: auto !important;
		padding: 26px 26px 25px;
		display: block !important;
	}

	.service-icon {
		width: 68px;
		height: 68px;
		margin-bottom: 22px;
	}

	.service-card h3 {
		margin-bottom: 12px;
	}

	.service-card p {
		margin-bottom: 20px;
		line-height: 1.65;
	}

	.service-card a {
		margin-top: 0;
	}

}


/* ==========================================================
   PETITS ÉCRANS
========================================================== */

@media (max-width: 480px) {

	.services .section-title {
		font-size: 2.15rem;
	}

	.service-card {
		border-radius: 18px;
		padding: 24px 22px 23px;
	}

	.service-icon {
		width: 64px;
		height: 64px;
		margin-bottom: 20px;
		font-size: 27px;
	}

	.service-card h3 {
		font-size: 1.25rem;
	}

	.service-card p {
		font-size: .92rem;
		margin-bottom: 18px;
	}

}


/* ==========================================================
   MOBILE — ESPACEMENT APRÈS "VOIR TOUS NOS BIENS"
========================================================== */

@media (max-width: 700px) {

	.services {
		padding-top: 55px !important;
	}

}