/**
 * Renov Pro Process
 * --------------------------------------------------------------
 * Section "Comment l’obtenir ?"
 *
 * Desktop:
 * - intro à gauche
 * - 3 étapes à droite
 * - bandeau d'information sous les étapes
 *
 * Tablet:
 * - intro au-dessus
 * - étapes en 3 colonnes
 *
 * Mobile:
 * - tout en colonne
 */

.renov-el-pro-process {
	--renov-process-bg: #fffaf7;
	--renov-process-accent: #ff4b16;
	--renov-process-dark: #1A1D3E !important;
	--renov-process-card: #ffffff;
	--renov-process-line: #f2ded4;
	--renov-process-text: #283447;
	--renov-process-muted: #5f6773;
	--renov-process-notice: #edf8f1;
	--renov-process-success: #2f9a58;

	position: relative;
	width: 100%;

	padding: 26px 20px 34px;

	background: #ffffff;
}

.renov-el-pro-process,
.renov-el-pro-process * {
	box-sizing: border-box;
}

/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.renov-el-pro-process__inner {
	position: relative;

	display: grid;
	grid-template-columns: minmax(300px, 30%) minmax(0, 70%);
	gap: 32px;

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

	margin-inline: auto;
	padding: 32px;

	overflow: hidden;

	border: 1px solid rgba(242, 222, 212, 0.72);
	border-radius: 18px;

	background:
		linear-gradient(
			135deg,
			#fffdfb 0%,
			var(--renov-process-bg) 100%
		);

	box-shadow:
		0 14px 34px rgba(17, 26, 43, 0.055),
		0 3px 10px rgba(17, 26, 43, 0.025);
}

/* subtle warm atmosphere */

.renov-el-pro-process__inner::before {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 0;

	pointer-events: none;

	background:
		radial-gradient(
			circle at 10% 70%,
			rgba(255, 75, 22, 0.035) 0%,
			rgba(255, 75, 22, 0) 35%
		),
		radial-gradient(
			circle at 80% 10%,
			rgba(255, 75, 22, 0.018) 0%,
			rgba(255, 75, 22, 0) 35%
		);
}

.renov-el-pro-process__intro,
.renov-el-pro-process__process {
	position: relative;
	z-index: 2;
}

/* =========================================================
   INTRO
   ========================================================= */

.renov-el-pro-process__intro {
	display: flex;
	flex-direction: column;

	min-width: 0;
}

/* Title */

.renov-el-pro-process__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	margin: 0;

	font-size: clamp(2rem, 2.7vw, 3rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.renov-el-pro-process__title-dark {
	color: var(--renov-process-dark);
}

.renov-el-pro-process__title-accent {
	color: var(--renov-process-accent);
}

/* title underline */

.renov-el-pro-process__title-line {
	display: block;

	width: 52px;
	height: 3px;

	margin-top: 14px;

	border-radius: 999px;

	background: var(--renov-process-accent);
}

/* description */

.renov-el-pro-process__description {
	max-width: 360px;

	margin: 14px 0 0;

	color: var(--renov-process-text);

	font-size: 15px;
	font-weight: 400;
	line-height: 1.52;
}

/* =========================================================
   INTRO BOTTOM / DECORATION
   ========================================================= */

.renov-el-pro-process__intro-bottom {
	position: relative;

	display: flex;
	align-items: flex-end;

	min-height: 135px;

	margin-top: auto;
	padding-top: 18px;
}

/* 2CV decorative image */

.renov-el-pro-process__car {
	position: relative;
	z-index: 1;

	flex: 0 0 auto;

	width: min(235px, 62%);

	opacity: 0.38;

	pointer-events: none;
}

.renov-el-pro-process__car-image {
	display: block;

	width: 100%;
	height: auto;

	object-fit: contain;

	filter:
		sepia(0.25)
		saturate(1.2);
}

/* handwriting */

.renov-el-pro-process__handwriting {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;
	align-items: center;

	margin:
		0
		0
		10px
		-16px;

	color: #29425a;

	font-family:
		"Segoe Print",
		"Bradley Hand",
		"Comic Sans MS",
		cursive;

	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;

	transform: rotate(-5deg);
}

.renov-el-pro-process__handwriting-line {
	display: block;

	width: 105px;
	height: 2px;

	margin-top: 7px;

	border-radius: 999px;

	background: var(--renov-process-accent);

	transform: rotate(-7deg);
}

/* =========================================================
   PROCESS AREA
   ========================================================= */

.renov-el-pro-process__process {
	display: flex;
	flex-direction: column;

	min-width: 0;
}

/* =========================================================
   STEPS GRID
   ========================================================= */

.renov-el-pro-process__steps {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		50px
		minmax(0, 1fr)
		50px
		minmax(0, 1fr);

	align-items: center;

	gap: 8px;
}

/* =========================================================
   STEP CARD
   ========================================================= */

.renov-el-pro-process__step {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;

	min-width: 0;
	min-height: 185px;

	padding: 34px 20px 20px;

	border: 1px solid rgba(232, 232, 232, 0.75);
	border-radius: 14px;

	background: var(--renov-process-card);

	color: inherit;
	text-align: center;
	text-decoration: none;

	box-shadow:
		0 9px 24px rgba(17, 29, 48, 0.04);

	transition:
		transform 220ms ease,
		box-shadow 220ms ease,
		border-color 220ms ease;
}

.renov-el-pro-process__step.is-linked {
	cursor: pointer;
}

.renov-el-pro-process__step:hover {
	transform: translateY(-4px);

	border-color: rgba(255, 75, 22, 0.20);

	box-shadow:
		0 16px 32px rgba(17, 29, 48, 0.075);
}

/* =========================================================
   NUMBER
   ========================================================= */

.renov-el-pro-process__step-number {
	position: absolute;

	top: -24px;
	left: 50%;

	z-index: 3;

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

	width: 48px;
	height: 48px;

	border: 4px solid #fffaf7;
	border-radius: 50%;

	background:
		linear-gradient(
			145deg,
			#ff6334 0%,
			var(--renov-process-accent) 100%
		);

	color: #ffffff;

	font-size: 17px;
	font-weight: 800;
	line-height: 1;

	transform: translateX(-50%);

	box-shadow:
		0 6px 16px rgba(255, 75, 22, 0.17);
}

/* =========================================================
   ICON
   ========================================================= */

.renov-el-pro-process__step-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 70px;
	height: 70px;

	margin-bottom: 8px;

	border-radius: 50%;

	background: rgba(255, 255, 255, 0.78);
	color: var(--renov-process-accent);
}

.renov-el-pro-process__step-icon i {
	font-size: 42px;
	line-height: 1;
}

.renov-el-pro-process__step-icon svg {
	display: block;

	width: 42px;
	height: 42px;

	fill: currentColor;
	color: currentColor;
}

/* =========================================================
   STEP CONTENT
   ========================================================= */

.renov-el-pro-process__step-copy {
	width: 100%;
}

.renov-el-pro-process__step-copy h3 {
	margin: 0;

	color: #1A1D3E !important;

	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
}

.renov-el-pro-process__step-copy p {
	margin: 7px 0 0;

	color: var(--renov-process-text);

	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

/* =========================================================
   CONNECTOR
   ========================================================= */

.renov-el-pro-process__connector {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
}

.renov-el-pro-process__connector-line {
	width: 27px;
	height: 1px;

	border-top: 2px dashed var(--renov-process-accent);
}

.renov-el-pro-process__connector svg {
	flex: 0 0 auto;

	width: 12px;
	height: 12px;

	margin-left: -1px;

	stroke: var(--renov-process-accent);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* =========================================================
   NOTICE
   ========================================================= */

.renov-el-pro-process__notice {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 24px;

	width: 100%;
	min-height: 62px;

	margin-top: 20px;
	padding: 10px 20px;

	border: 1px solid rgba(47, 154, 88, 0.07);
	border-radius: 10px;

	background:
		linear-gradient(
			90deg,
			var(--renov-process-notice) 0%,
			#f2fbf5 100%
		);

	color: var(--renov-process-dark);
	text-decoration: none;

	transition:
		transform 180ms ease,
		box-shadow 180ms ease;
}

.renov-el-pro-process__notice.is-linked:hover {
	transform: translateY(-2px);

	box-shadow:
		0 10px 22px rgba(25, 80, 49, 0.06);
}

/* notice content */

.renov-el-pro-process__notice-main {
	display: flex;
	align-items: center;

	gap: 12px;

	min-width: 0;
}

.renov-el-pro-process__notice-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 24px;

	width: 24px;
	height: 24px;

	color: var(--renov-process-success);
}

.renov-el-pro-process__notice-icon i {
	font-size: 20px;
}

.renov-el-pro-process__notice-icon svg {
	display: block;

	width: 20px;
	height: 20px;

	fill: currentColor;
	color: currentColor;
}

.renov-el-pro-process__notice-main p {
	margin: 0;

	color: #234038;

	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}

/* right handwriting */

.renov-el-pro-process__notice-handwriting {
	display: flex;
	flex-direction: column;
	align-items: center;

	flex: 0 0 auto;

	margin-right: 4px;

	color: #1e8d4a;

	font-family:
		"Segoe Print",
		"Bradley Hand",
		"Comic Sans MS",
		cursive;

	font-size: 18px;
	font-weight: 500;
	line-height: 1.15;

	transform: rotate(-4deg);
}

.renov-el-pro-process__notice-line {
	display: block;

	width: 125px;
	height: 2px;

	margin-top: 5px;

	border-radius: 999px;

	background: var(--renov-process-success);

	transform: rotate(-4deg);
}

/* =========================================================
   FOCUS
   ========================================================= */

.renov-el-pro-process a:focus-visible {
	outline: 3px solid rgba(255, 75, 22, 0.32);
	outline-offset: 4px;
}

/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

	.renov-el-pro-process__inner {
		grid-template-columns: minmax(320px, 29%) minmax(0, 71%);
		gap: 38px;
	}

	.renov-el-pro-process__step {
		min-height: 190px;
	}

	.renov-el-pro-process__description {
		font-size: 15.5px;
	}

	.renov-el-pro-process__step-copy h3 {
		font-size: 15.5px;
	}

	.renov-el-pro-process__step-copy p {
		font-size: 13.5px;
	}
}

/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1180px) {

	.renov-el-pro-process__inner {
		grid-template-columns: minmax(260px, 29%) minmax(0, 71%);

		gap: 24px;

		padding: 28px 24px;
	}

	.renov-el-pro-process__steps {
		grid-template-columns:
			minmax(0, 1fr)
			32px
			minmax(0, 1fr)
			32px
			minmax(0, 1fr);

		gap: 6px;
	}

	.renov-el-pro-process__step {
		padding-inline: 14px;
	}

	.renov-el-pro-process__connector-line {
		width: 20px;
	}

	.renov-el-pro-process__handwriting {
		font-size: 17px;
	}
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

	.renov-el-pro-process {
		padding: 22px 18px 30px;
	}

	.renov-el-pro-process__inner {
		display: block;

		padding: 28px 24px;
	}

	.renov-el-pro-process__intro {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(250px, 40%);
		column-gap: 26px;
	}

	.renov-el-pro-process__title,
	.renov-el-pro-process__title-line,
	.renov-el-pro-process__description {
		grid-column: 1;
	}

	.renov-el-pro-process__description {
		max-width: 520px;
	}

	.renov-el-pro-process__intro-bottom {
		grid-column: 2;
		grid-row: 1 / span 4;

		align-self: center;

		min-height: 150px;

		margin-top: 0;
		padding-top: 0;
	}

	.renov-el-pro-process__car {
		width: 180px;
	}

	.renov-el-pro-process__handwriting {
		font-size: 16px;
	}

	.renov-el-pro-process__process {
		margin-top: 34px;
	}

	.renov-el-pro-process__steps {
		grid-template-columns:
			minmax(0, 1fr)
			36px
			minmax(0, 1fr)
			36px
			minmax(0, 1fr);
	}

	.renov-el-pro-process__step {
		min-height: 180px;
	}

	.renov-el-pro-process__notice {
		margin-top: 22px;
	}
}

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

@media (max-width: 699px) {

	.renov-el-pro-process {
		padding: 18px 14px 26px;
	}

	.renov-el-pro-process__inner {
		padding: 24px 18px;

		border-radius: 16px;
	}

	.renov-el-pro-process__intro {
		display: block;
	}

	.renov-el-pro-process__title {
		font-size: clamp(1.9rem, 9vw, 2.5rem);
	}

	.renov-el-pro-process__description {
		max-width: 100%;

		font-size: 14px;
	}

	.renov-el-pro-process__intro-bottom {
		min-height: 125px;

		margin-top: 14px;
	}

	.renov-el-pro-process__car {
		width: min(210px, 58%);
	}

	.renov-el-pro-process__handwriting {
		margin-left: -10px;

		font-size: 16px;
	}

	/* vertical flow */

	.renov-el-pro-process__steps {
		display: flex;
		flex-direction: column;

		gap: 24px;
	}

	.renov-el-pro-process__step {
		width: 100%;
		min-height: 0;

		padding:
			32px
			20px
			20px;
	}

	.renov-el-pro-process__connector {
		width: 40px;
		height: 32px;

		transform: rotate(90deg);
	}

	.renov-el-pro-process__connector-line {
		width: 23px;
	}

	/* notice */

	.renov-el-pro-process__notice {
		align-items: flex-start;

		gap: 14px;

		margin-top: 26px;
		padding: 15px 16px;
	}

	.renov-el-pro-process__notice-main {
		align-items: flex-start;
	}

	.renov-el-pro-process__notice-main p {
		font-size: 12px;
	}

	.renov-el-pro-process__notice-handwriting {
		display: none;
	}
}

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

@media (max-width: 420px) {

	.renov-el-pro-process {
		padding-inline: 10px;
	}

	.renov-el-pro-process__inner {
		padding-inline: 15px;
	}

	.renov-el-pro-process__intro-bottom {
		min-height: 115px;
	}

	.renov-el-pro-process__car {
		width: 175px;
	}

	.renov-el-pro-process__handwriting {
		font-size: 14px;
	}

	.renov-el-pro-process__handwriting-line {
		width: 80px;
	}

	.renov-el-pro-process__step-number {
		width: 44px;
		height: 44px;

		top: -22px;

		font-size: 16px;
	}

	.renov-el-pro-process__step-icon {
		width: 62px;
		height: 62px;
	}

	.renov-el-pro-process__step-icon i {
		font-size: 35px;
	}

	.renov-el-pro-process__step-icon svg {
		width: 35px;
		height: 35px;
	}

	.renov-el-pro-process__step-copy h3 {
		font-size: 14px;
	}

	.renov-el-pro-process__step-copy p {
		font-size: 12px;
	}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

	.renov-el-pro-process__step,
	.renov-el-pro-process__notice {
		transition: none !important;
	}

	.renov-el-pro-process__step:hover,
	.renov-el-pro-process__notice.is-linked:hover {
		transform: none;
	}
}