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

.cd-home-hero {
	position: relative;

	min-height: 670px;

	display: flex;
	align-items: center;

	overflow: hidden;

	background:
		linear-gradient(
			90deg,
			#faf8f4 0%,
			#fbfaf7 43%,
			#eef1f3 100%
		);
}

.cd-home-hero__grid {
	display: grid;

	grid-template-columns:
		minmax(0, 0.85fr)
		minmax(0, 1.15fr);

	align-items: center;

	min-height: 670px;

	gap: 24px;
}

.cd-home-hero__content {
	position: relative;
	z-index: 4;

	max-width: 590px;

	padding: 72px 0;
}

.cd-home-hero__eyebrow {
	margin: 0 0 20px;

	color: #b99047;

	font-size: 0.78rem;
	font-weight: 800;

	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cd-home-hero h1 {
	margin: 0;

	color: #10233f;

	font-size: clamp(
		3.4rem,
		6vw,
		5.7rem
	);

	line-height: 0.98;
	letter-spacing: -0.055em;
}

.cd-home-hero__text {
	max-width: 520px;

	margin: 26px 0 0;

	color: #475467;

	font-size: 1.08rem;
	line-height: 1.7;
}

.cd-home-hero__actions {
	display: flex;
	flex-wrap: wrap;

	gap: 12px;

	margin-top: 34px;
}


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

.cd-home-button {
	display: inline-flex;

	min-height: 50px;

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

	padding: 11px 24px;

	border-radius: 999px;

	font-size: 0.9rem;
	font-weight: 750;

	text-decoration: none;

	transition:
		transform 160ms ease,
		box-shadow 160ms ease,
		background 160ms ease;
}

.cd-home-button:hover {
	transform: translateY(-2px);
}

.cd-home-button--primary {
	background: #b99047;
	color: #ffffff;

	box-shadow:
		0 8px 22px
		rgba(185, 144, 71, 0.22);
}

.cd-home-button--primary:hover {
	background: #a87f3e;
}

.cd-home-button--secondary {
	border: 1px solid #98a2b3;

	background:
		rgba(255, 255, 255, 0.48);

	color: #10233f;
}


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

.cd-home-hero__visual {
	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;

	width: 59%;

	overflow: hidden;
}

.cd-home-hero__image {
	position: absolute;

	top: -3%;
	right: -5%;

	width: 108%;
	height: 108%;

	object-fit: cover;
	object-position: center;

	transform:
		translate3d(0, 0, 0)
		scale(1);

	will-change: transform;

	transition:
		transform 80ms linear;
}

.cd-home-hero__visual::before {
	position: absolute;
	z-index: 2;

	top: 0;
	bottom: 0;
	left: 0;

	width: 39%;

	background:
	linear-gradient(
		90deg,
		#faf8f4 0%,
		rgba(250, 248, 244, 0.98) 20%,
		rgba(250, 248, 244, 0.68) 55%,
		rgba(250, 248, 244, 0) 100%
	);
	content: "";

	pointer-events: none;
}

.cd-home-hero__visual::after {
	position: absolute;
	z-index: 2;

	right: 0;
	bottom: 0;
	left: 0;

	height: 20%;

	background:
		linear-gradient(
			0deg,
			rgba(16, 35, 63, 0.12),
			transparent
		);

	content: "";

	pointer-events: none;
}


/* =========================================================
   BANDEAU DE RÉASSURANCE
   ========================================================= */

.cd-home-trust {
	position: relative;
	z-index: 5;

	background: #ffffff;

	border-bottom:
		1px solid #eaecf0;

	box-shadow:
		0 10px 28px
		rgba(16, 24, 40, 0.035);
}

.cd-home-trust__grid {
	display: grid;

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

.cd-home-trust__item {
	display: flex;

	align-items: center;

	gap: 13px;

	min-height: 92px;

	padding: 20px 24px;

	border-right:
		1px solid #eaecf0;
}

.cd-home-trust__item:last-child {
	border-right: 0;
}

.cd-home-trust__icon {
	display: flex;

	flex: 0 0 auto;

	width: 42px;
	height: 42px;

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

	border-radius: 50%;

	background: #f8f4eb;

	color: #10233f;
}

.cd-home-trust__icon svg {
	width: 22px;
	height: 22px;
}

.cd-home-trust__item strong {
	display: block;

	margin-bottom: 4px;

	color: #10233f;

	font-size: 0.76rem;
	font-weight: 800;

	text-transform: uppercase;
}

.cd-home-trust__item span {
	display: block;

	color: #667085;

	font-size: 0.76rem;
	line-height: 1.4;
}


/* =========================================================
   TITRES DES SECTIONS
   ========================================================= */

.cd-home-section-heading {
	max-width: 720px;

	margin: 0 auto 42px;

	text-align: center;
}

.cd-home-section-heading__eyebrow {
	margin: 0 0 10px;

	color: #b99047;

	font-size: 0.76rem;
	font-weight: 800;

	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.cd-home-section-heading h2 {
	margin: 0;

	color: #10233f;

	font-size:
		clamp(
			2rem,
			4vw,
			3.1rem
		);

	line-height: 1.08;

	letter-spacing: -0.035em;
}

.cd-home-section-heading__line {
	display: block;

	width: 36px;
	height: 2px;

	margin: 18px auto 0;

	background: #b99047;
}


/* =========================================================
   VÉHICULES MIS EN AVANT
   ========================================================= */

.cd-home-featured {
	padding: 92px 0 88px;

	background: #fafafa;
}

.cd-home-featured__footer {
	display: flex;

	justify-content: center;

	margin-top: 38px;
}

.cd-home-catalogue-button {
	display: inline-flex;

	min-width: 250px;
	min-height: 46px;

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

	padding: 10px 24px;

	border-radius: 999px;

	background: #10233f;
	color: #ffffff;

	font-size: 0.86rem;
	font-weight: 750;

	text-decoration: none;

	transition:
		background 160ms ease,
		transform 160ms ease;
}

.cd-home-catalogue-button:hover {
	background: #17375f;

	transform:
		translateY(-2px);
}

.cd-home-empty {
	text-align: center;

	color: #667085;
}

.cd-home-featured .cd-vehicle-card {
	transition:
		transform 180ms ease,
		box-shadow 180ms ease;
}

.cd-home-featured .cd-vehicle-card:hover {
	transform: translateY(-5px);

	box-shadow:
		0 18px 38px
		rgba(16, 24, 40, 0.09);
}

/* =========================================================
   COMMENT ÇA MARCHE
   ========================================================= */

.cd-home-process {
	padding: 84px 0 92px;

	background: #ffffff;
}

.cd-home-process__grid {
	display: grid;

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

	gap: 42px;
}

.cd-home-process__step {
	position: relative;

	display: flex;

	align-items: flex-start;

	gap: 18px;

	padding-right: 24px;
}

.cd-home-process__badge {
	position: absolute;

	top: 36px;
	left: 37px;

	display: inline-flex;

	width: 27px;
	height: 27px;

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

	border:
		1px solid #d5b776;

	border-radius: 50%;

	background: #ffffff;

	color: #b99047;

	font-size: 0.67rem;
	font-weight: 850;

	box-shadow:
		0 3px 9px
		rgba(16, 24, 40, 0.07);
}

.cd-home-process__step:not(:last-child)::after {
	position: absolute;

	top: 22px;
	right: -20px;

	width: 40px;
	height: 1px;

	background: #d5b776;

	content: "";
}

.cd-home-process__icon {
	display: flex;

	flex: 0 0 auto;

	width: 58px;
	height: 58px;

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

	border:
		1px solid #d5b776;

	border-radius: 50%;

	background: #ffffff;

	color: #10233f;
}

.cd-home-process__icon svg {
	width: 28px;
	height: 28px;
}

.cd-home-process__content h3 {
	margin: 4px 0 9px;

	color: #10233f;

	font-size: 1rem;
}

.cd-home-process__content p {
	margin: 0;

	color: #667085;

	font-size: 0.9rem;
	line-height: 1.65;
}


/* =========================================================
   CTA FINAL
   ========================================================= */

.cd-home-final-cta {
	position: relative;

	min-height: 390px;

	display: flex;

	align-items: center;

	overflow: hidden;

	background: #0c1c32;

	color: #ffffff;
}

.cd-home-final-cta__background {
	position: absolute;

	top: 0;
	right: 0;
	bottom: 0;

	width: 58%;

	background-position: center;
	background-size: cover;

	opacity: 0.52;
}

.cd-home-final-cta::before {
	position: absolute;
	z-index: 1;

	inset: 0;

	background:
		linear-gradient(
			90deg,
			#0c1c32 0%,
			#0c1c32 43%,
			rgba(12, 28, 50, 0.82) 58%,
			rgba(12, 28, 50, 0.12) 100%
		);

	content: "";

	pointer-events: none;
}

.cd-home-final-cta .cd-container {
	position: relative;
	z-index: 2;

}

.cd-home-final-cta__content {
	max-width: 540px;

	padding: 72px 0;
}

.cd-home-final-cta__eyebrow {
	margin: 0 0 12px;

	color: #d5b776;

	font-size: 0.76rem;
	font-weight: 800;

	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cd-home-final-cta h2 {
	margin: 0;

	font-size:
		clamp(
			2rem,
			4vw,
			3.2rem
		);

	line-height: 1.07;

	letter-spacing: -0.035em;
}

.cd-home-final-cta__content > p:not(
	.cd-home-final-cta__eyebrow
) {
	max-width: 480px;

	margin: 19px 0 0;

	color:
		rgba(
			255,
			255,
			255,
			0.72
		);

	line-height: 1.7;
}

.cd-home-final-cta__actions {
	display: flex;
	flex-wrap: wrap;

	gap: 12px;

	margin-top: 28px;
}

.cd-home-final-cta__secondary {
	border:
		1px solid
		rgba(
			255,
			255,
			255,
			0.42
		);

	color: #ffffff;

	background:
		rgba(
			255,
			255,
			255,
			0.04
		);
}


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

@media (max-width: 1050px) {

	.cd-home-trust__grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}

	.cd-home-trust__item:nth-child(2) {
		border-right: 0;
	}

	.cd-home-trust__item:nth-child(-n+2) {
		border-bottom:
			1px solid #eaecf0;
	}
}


@media (max-width: 900px) {

	/* =====================================================
	   HERO TABLETTE / MOBILE
	   ===================================================== */

	.cd-home-hero {
		min-height: auto;
	}

	.cd-home-hero__grid {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.cd-home-hero__content {
		width: 100%;
		max-width: 680px;

		margin: 0 auto;

		padding:
			70px 0
			440px;

		text-align: center;
	}

	.cd-home-hero__text {
		margin:
			26px auto
			0;
	}

	.cd-home-hero__actions {
		align-items: center;
		justify-content: center;
	}

	.cd-home-hero__visual {
		top: auto;

		width: 100%;
		height: 420px;
	}

	.cd-home-hero__image {
		top: 0;
		right: 0;

		width: 100%;
		height: 100%;

		object-position: center center;
	}

	.cd-home-hero__visual::before {
		top: 0;
		right: 0;
		bottom: auto;
		left: 0;

		width: auto;
		height: 35%;

		background:
			linear-gradient(
				180deg,
				#faf8f4,
				rgba(
					250,
					248,
					244,
					0
				)
			);
	}


	/* =====================================================
	   COMMENT ÇA MARCHE
	   ===================================================== */

	.cd-home-process__grid {
		grid-template-columns: 1fr;

		gap: 28px;
	}

	.cd-home-process__step {
		padding-right: 0;
	}

	.cd-home-process__step::after {
		display: none;
	}


	/* =====================================================
	   CTA FINAL
	   ===================================================== */

	.cd-home-final-cta__background {
		width: 70%;
	}

	.cd-home-final-cta::before {
		background:
			linear-gradient(
				90deg,
				#0c1c32 0%,
				#0c1c32 50%,
				rgba(
					12,
					28,
					50,
					0.55
				)
				100%
			);
	}
}

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

@media (max-width: 600px) {

	.cd-home-hero__content {
		padding:
			52px 0
			330px;
	}

	.cd-home-hero__visual {
		height: 320px;
	}

	.cd-home-hero h1 {
		font-size:
			clamp(
				2.7rem,
				13vw,
				4rem
			);
	}

	.cd-home-hero__actions {
		flex-direction: column;
	}

	.cd-home-button {
		width: 100%;

		box-sizing: border-box;
	}


	.cd-home-trust__grid {
		grid-template-columns: 1fr;
	}

	.cd-home-trust__item {
		border-right: 0;

		border-bottom:
			1px solid #eaecf0;
	}

	.cd-home-trust__item:last-child {
		border-bottom: 0;
	}


	.cd-home-featured {
		padding: 68px 0;
	}


	.cd-home-process {
		padding: 68px 0;
	}


	.cd-home-final-cta {
		min-height: 550px;

		align-items: flex-start;
	}

	.cd-home-final-cta__background {
		top: auto;

		width: 100%;
		height: 55%;
	}

	.cd-home-final-cta::before {
		background:
			linear-gradient(
				180deg,
				#0c1c32 0%,
				#0c1c32 48%,
				rgba(
					12,
					28,
					50,
					0.82
				)
				67%,
				rgba(
					12,
					28,
					50,
					0.18
				)
				100%
			);
	}

	.cd-home-final-cta__content {
		padding: 58px 0;
	}

	.cd-home-final-cta__actions {
		flex-direction: column;
	}
	
}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.cd-home-hero__image {
		transform: none !important;
		transition: none;
	}

	.cd-home-button,
	.cd-home-catalogue-button {
		transition: none;
	}
}