/**
 * ==========================================================
 * MetrYMMO V2
 * Hero Premium
 * ==========================================================
 */

.hero {

	position: relative;
	overflow: hidden;

	min-height: 92vh;

	display: flex;
	align-items: flex-start;

	background:
		linear-gradient(
			135deg,
			rgba(10,10,10,.96),
			rgba(35,35,35,.85)
		);

}


/* ==========================================================
   OVERLAY
========================================================== */

.hero-overlay {

	position: absolute;
	inset: 0;

	background:
		radial-gradient(
			circle at top right,
			rgba(200,169,106,.25),
			transparent 45%
		);

	pointer-events: none;

}


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

.hero-container {

	position: relative;
	z-index: 2;

	width: 100%;
	max-width: 1300px;

	margin: 0 auto;

	box-sizing: border-box;

	padding: 160px 40px 80px;

}


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

.hero-content {

	position: relative;
	z-index: 2;
	max-width: 600px;

}


/* ==========================================================
   SOUS-TITRE
========================================================== */

.hero-subtitle {

	display: block;

	color: var(--gold);

	font-size: .95rem;
	font-weight: 700;

	letter-spacing: .08em;
	text-transform: uppercase;

	margin-bottom: 30px;

}


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

.hero-title {

	color: #fff;

	font-size: clamp(3rem,5vw,5rem);

	line-height: 1.05;
	font-weight: 800;

	margin: 0 0 30px;

}


/* ==========================================================
   DESCRIPTION
========================================================== */

.hero-description {

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

	font-size: 1.15rem;
	line-height: 1.8;

	margin-bottom: 40px;

	max-width: 650px;

}


/* ==========================================================
   BOUTONS
========================================================== */

.hero-buttons {

	display: flex;
	gap: 20px;

	margin-bottom: 50px;

}


.hero-button {

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 16px 35px;

	border-radius: 50px;

	font-weight: 700;
	text-decoration: none;

	transition: .3s ease;

	box-sizing: border-box;

}


.hero-button-primary {

	background: var(--gold, #C99A55);
	color: #0B0B0B !important;

}


.hero-button-primary:hover {

	background: #C99A55;

	transform: translateY(-3px);

}


.hero-button-secondary {

	background: transparent;

	border: 2px solid rgba(255,255,255,.30);

	color: #fff;

}


.hero-button-secondary:hover {

	border-color: var(--gold);

	color: var(--gold);

}


/* ==========================================================
   RECHERCHE
========================================================== */

.hero-search {

	margin: 45px 0;

}


/* ==========================================================
   STATISTIQUES
========================================================== */

.hero-stats {

	display: grid;

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

	gap: 20px;

	margin-top: 40px;

}


.hero-stat {

	padding: 25px;

	border-radius: 18px;

	background: rgba(255,255,255,.08);

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

	backdrop-filter: blur(10px);

	box-sizing: border-box;

}


.hero-stat h3 {

	margin: 0;

	font-size: 2rem;

	color: var(--gold);

}


.hero-stat p {

	margin-top: 10px;

	color: #fff;

}


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

.hero-image {

	position: absolute;

	top: 0;
	right: 5%;

	width: min(40%, 510px);
	height: clamp(300px, 34vw, 470px);
	margin-top: 8%;
	border: 1px solid rgba(240, 215, 174, .22);
	border-radius: 30px;
	box-shadow: 0 28px 70px rgba(0, 0, 0, .35);
	overflow: hidden;
	z-index: 1;

}


.hero-image img {

	width: 100%;
	height: 100%;

	object-fit: cover;

	border-radius: inherit;

}

.hero-image picture { display: block; width: 100%; height: 100%; }

.hero-image-caption {
	position: absolute;
	right: 14px;
	bottom: 12px;
	left: 14px;
	padding: 8px 11px;
	border-radius: 8px;
	background: rgba(11, 11, 11, .72);
	color: #fff;
	font-size: .75rem;
	line-height: 1.4;
}


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

@media (max-width: 992px) {

	.hero {

		min-height: auto;

	}


	.hero-image {

		position: relative;
		top: auto;
		right: auto;
		display: block;
		width: 100%;
		height: clamp(220px, 55vw, 380px);
		margin: 2rem 0 0;

	}


	.hero-container {

		width: 100%;

		padding: 140px 30px 70px;

	}


	.hero-stats {

		grid-template-columns: repeat(2,1fr);

	}

}


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

@media (max-width: 600px) {

	.hero {

		width: 100%;

		min-width: 0;

	}


	.hero-container {

		width: 100%;

		max-width: 100%;

		margin: 0 auto;

		padding: 120px 20px 60px;

		box-sizing: border-box;

		overflow: hidden;

	}


	.hero-content {

		width: 100%;

		max-width: 100%;

		margin: 0 auto;

		text-align: center;

	}


	.hero-subtitle {

		text-align: center;

		margin-bottom: 24px;

	}


	.hero-title {

		width: 100%;

		margin-left: auto;
		margin-right: auto;

		font-size: 2.5rem;

		line-height: 1.08;

		text-align: center;

	}


	.hero-description {

		width: 100%;

		max-width: 100%;

		margin-left: auto;
		margin-right: auto;

		font-size: 1rem;

		line-height: 1.75;

		text-align: center;

	}


	.hero-buttons {

		width: 100%;

		max-width: 100%;

		margin-left: auto;
		margin-right: auto;

		display: flex;

		flex-direction: column;

		align-items: stretch;

		gap: 14px;

	}


	.hero-button {

		width: 100%;

		max-width: 100%;

		box-sizing: border-box;

	}


	.hero-search {

		width: 100%;

		max-width: 100%;

		margin-left: auto;
		margin-right: auto;

	}


	.hero-stats {

		width: 100%;

		max-width: 100%;

		grid-template-columns: 1fr;

	}


	.hero-stat {

		width: 100%;

		max-width: 100%;

	}

}


/* ==========================================================
   TRÈS PETITS ÉCRANS
========================================================== */

@media (max-width: 400px) {

	.hero-container {

		padding-left: 16px;
		padding-right: 16px;

	}


	.hero-title {

		font-size: 2.25rem;

	}


	.hero-description {

		font-size: .95rem;

	}


	.hero-button {

		padding-left: 22px;
		padding-right: 22px;

	}

}