/**
 * Renov About History Hero
 * --------------------------------------------------------------
 * Section "Qui sommes-nous"
 *
 * Structure:
 * - Background toujours full-width
 * - Contenu configurable:
 *   - .is-container = largeur max
 *   - .is-fluid     = largeur 100%
 *
 * Desktop:
 * - contenu gauche
 * - composition photo droite
 * - badge expérience
 * - image secondaire superposée
 * - notes décoratives
 *
 * Tablet/mobile:
 * - contenu puis visuels
 */

.renov-el-about-history-hero {
	--renov-about-dark: #1A1D3E;
	--renov-about-accent: #FF7246;
	--renov-about-bg: #FFFDFC;
	--renov-about-text: #62697A;
	--renov-about-line: rgba(26, 29, 62, 0.12);
	--renov-about-soft: rgba(255, 114, 70, 0.08);

	position: relative;
	width: 100%;
	min-width: 0;
	overflow: hidden;

	background: var(--renov-about-bg);
}

.renov-el-about-history-hero,
.renov-el-about-history-hero * {
	box-sizing: border-box;
}

/* =========================================================
   FULL-WIDTH BACKGROUND
   ========================================================= */

.renov-el-about-history-hero__background {
	position: absolute;
	inset: 0;

	z-index: 0;

	width: 100%;
	height: 100%;

	overflow: hidden;
	pointer-events: none;
}

.renov-el-about-history-hero__background-image {
	position: absolute;
	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

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

	opacity: 0.13;

	filter: saturate(0.7);

	pointer-events: none;
}

/* légère protection pour la lisibilité */

.renov-el-about-history-hero::after {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 1;

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba(255, 253, 252, 0.18) 0%,
			rgba(255, 253, 252, 0.04) 52%,
			rgba(255, 253, 252, 0.10) 100%
		);
}

/* =========================================================
   INNER
   Container / Fluid
   ========================================================= */

.renov-el-about-history-hero__inner {
	position: relative;
	z-index: 2;

	width: 100%;
	min-width: 0;
	min-height: 780px;

	margin-inline: auto;
}

/* mode Container */
.renov-el-about-history-hero__inner.is-container {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
}

/* mode Fluide */
.renov-el-about-history-hero__inner.is-fluid {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* soft atmosphere */

.renov-el-about-history-hero__inner::before {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 0;

	pointer-events: none;

}

/* =========================================================
   LAYOUT
   ========================================================= */

.renov-el-about-history-hero__layout {
	position: relative;
	z-index: 3;

	display: grid;
	grid-template-columns:
		minmax(420px, 0.88fr)
		minmax(0, 1.12fr);

	align-items: center;

	gap: clamp(45px, 5vw, 90px);

	width: 100%;
	min-width: 0;
}

/* =========================================================
   LEFT CONTENT
   ========================================================= */

.renov-el-about-history-hero__content {
	position: relative;

	width: 100%;
	min-width: 0;
}

/* =========================================================
   BREADCRUMB
   ========================================================= */

.renov-el-about-history-hero__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 11px;

	margin-bottom: 34px;

	color: #71788A;

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

.renov-el-about-history-hero__breadcrumb a {
	display: inline-flex;
	align-items: center;

	gap: 8px;

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

	transition: color 180ms ease;
}

.renov-el-about-history-hero__breadcrumb a:hover {
	color: var(--renov-about-accent);
}

.renov-el-about-history-hero__breadcrumb-home {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 16px;
	height: 16px;

	color: var(--renov-about-dark);
}

.renov-el-about-history-hero__breadcrumb-home i {
	font-size: 13px;
}

.renov-el-about-history-hero__breadcrumb-home svg {
	display: block;

	width: 13px;
	height: 13px;

	fill: currentColor;
}

.renov-el-about-history-hero__breadcrumb-separator {
	color: #9AA0AE;

	font-size: 20px;
	font-weight: 300;
	line-height: 1;
}

/* =========================================================
   COPY
   ========================================================= */

.renov-el-about-history-hero__copy {
	width: 100%;
	max-width: 660px;
}

/* kicker */

.renov-el-about-history-hero__kicker {
	margin: 0;

	color: var(--renov-about-accent);

	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* title */

.renov-el-about-history-hero__title {
	margin: 12px 0 0;

	color: var(--renov-about-dark) !important;

	font-size: clamp(3rem, 4vw, 4rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.05em;
}

/* underline */

.renov-el-about-history-hero__title-line {
	display: block;

	width: 310px;
	max-width: 62%;
	height: 5px;

	margin-top: 18px;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			var(--renov-about-accent) 0%,
			#ff865f 60%,
			transparent 100%
		);

	transform: rotate(-2deg);
	transform-origin: left center;
}

/* intro */

.renov-el-about-history-hero__intro {
	max-width: 640px;

	margin: 30px 0 0;

	color: var(--renov-about-dark);

	font-size: clamp(1.35rem, 2vw, 1.5rem);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.02em;
}

/* paragraphs */

.renov-el-about-history-hero__paragraph {
	max-width: 650px;

	margin: 24px 0 0;

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

	font-size: 16px;
	font-weight: 400;
	line-height: 1.72;
}

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

.renov-el-about-history-hero__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 18px;

	min-width: 320px;
	min-height: 64px;

	margin-top: 32px;
	padding: 15px 22px;

	border: 1px solid var(--renov-about-accent);
	border-radius: 8px;

	background:
		linear-gradient(
			135deg,
			#ff865f 0%,
			var(--renov-about-accent) 100%
		);

	color: #ffffff;

	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;

	box-shadow:
		0 12px 28px rgba(255, 114, 70, 0.18);

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

.renov-el-about-history-hero__button:hover {
	transform: translateY(-2px);

	color: #ffffff;

	filter: brightness(1.03);

	box-shadow:
		0 16px 34px rgba(255, 114, 70, 0.26);
}

.renov-el-about-history-hero__button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	transition: transform 180ms ease;
}

.renov-el-about-history-hero__button-icon i {
	font-size: 18px;
}

.renov-el-about-history-hero__button-icon svg {
	display: block;

	width: 19px;
	height: 19px;

	fill: currentColor;
}

.renov-el-about-history-hero__button:hover
.renov-el-about-history-hero__button-icon {
	transform: translateX(4px);
}

/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.renov-el-about-history-hero__visual {
	position: relative;

	width: 100%;
	min-width: 0;
	min-height: 670px;

	padding:
		85px
		100px
		40px
		30px;
}

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

.renov-el-about-history-hero__main-image-wrap {
	position: relative;
	z-index: 3;

	width: 72%;
	min-height: 540px;

	overflow: hidden;

	border: 7px solid #ffffff;
	border-radius: 7px;

	background: #efefef;

	box-shadow:
		0 24px 55px rgba(26, 29, 62, 0.15),
		0 7px 20px rgba(26, 29, 62, 0.08);

	transform: rotate(1.5deg);
	transform-origin: center;

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

.renov-el-about-history-hero__visual:hover
.renov-el-about-history-hero__main-image-wrap {
	transform:
		rotate(0.5deg)
		translateY(-3px);

	box-shadow:
		0 30px 65px rgba(26, 29, 62, 0.18),
		0 9px 22px rgba(26, 29, 62, 0.09);
}

.renov-el-about-history-hero__main-image {
	display: block;

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

	object-fit: cover;
}

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

.renov-el-about-history-hero__secondary-image-wrap {
	position: absolute;

	right: 5px;
	bottom: 55px;

	z-index: 5;

	width: 53%;

	overflow: hidden;

	border: 7px solid #ffffff;
	border-radius: 7px;

	background: #efefef;

	box-shadow:
		0 18px 42px rgba(26, 29, 62, 0.14);

	transform: rotate(-4deg);

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

.renov-el-about-history-hero__visual:hover
.renov-el-about-history-hero__secondary-image-wrap {
	transform:
		rotate(-2deg)
		translateY(-2px);

	box-shadow:
		0 24px 50px rgba(26, 29, 62, 0.17);
}

.renov-el-about-history-hero__secondary-image {
	display: block;

	width: 100%;
	height: 100%;

	aspect-ratio: 1.42 / 1;

	object-fit: cover;
}

/* =========================================================
   PLAY BUTTON
   ========================================================= */

.renov-el-about-history-hero__play {
	position: absolute;

	top: 50%;
	left: 50%;

	z-index: 7;

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

	width: 86px;
	height: 86px;

	padding: 0;

	border: 0;
	border-radius: 50%;

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

	color: #ffffff;

	cursor: pointer;

	box-shadow:
		0 10px 28px rgba(255, 114, 70, 0.32);

	transform: translate(-50%, -50%);

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

.renov-el-about-history-hero__play::before {
	content: "";

	position: absolute;
	inset: -9px;

	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;
}

.renov-el-about-history-hero__play:hover {
	transform:
		translate(-50%, -50%)
		scale(1.07);

	box-shadow:
		0 15px 34px rgba(255, 114, 70, 0.40);
}

.renov-el-about-history-hero__play i {
	margin-left: 4px;
	font-size: 30px;
}

.renov-el-about-history-hero__play svg {
	width: 30px;
	height: 30px;

	margin-left: 4px;

	fill: currentColor;
}

/* =========================================================
   VIDEO CAPTION
   ========================================================= */

.renov-el-about-history-hero__video-caption {
	position: absolute;

	left: 30px;
	bottom: 24px;

	z-index: 6;

	color: #ffffff;

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

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

	text-shadow:
		0 3px 8px rgba(0, 0, 0, 0.28);
}

/* =========================================================
   BADGE
   ========================================================= */

.renov-el-about-history-hero__badge {
	position: absolute;

	top: 5px;
	left: 54%;

	z-index: 8;

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

	width: 142px;
	height: 142px;

	border: 5px solid #ffffff;
	border-radius: 50%;

	background: #ffffff;

	color: var(--renov-about-dark);

	text-align: center;

	box-shadow:
		0 10px 30px rgba(26, 29, 62, 0.14);

	transform: rotate(-4deg);
}

.renov-el-about-history-hero__badge::before {
	content: "";

	position: absolute;
	inset: 7px;

	border: 2px solid var(--renov-about-dark);
	border-radius: 50%;
}

.renov-el-about-history-hero__badge strong,
.renov-el-about-history-hero__badge span,
.renov-el-about-history-hero__badge i {
	position: relative;
	z-index: 2;
}

.renov-el-about-history-hero__badge strong {
	color: var(--renov-about-accent);

	font-size: 38px;
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.03em;
}

.renov-el-about-history-hero__badge span {
	margin-top: 5px;

	font-size: 14px;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
}

.renov-el-about-history-hero__badge i {
	display: block;

	width: 42px;
	height: 3px;

	margin-top: 7px;

	background:
		linear-gradient(
			90deg,
			#1A1D3E 0 45%,
			#ffffff 45% 55%,
			#FF7246 55% 100%
		);
}

/* =========================================================
   MODELS TEXT
   ========================================================= */

.renov-el-about-history-hero__models {
	position: absolute;

	top: 75px;
	right: 8px;

	z-index: 2;

	color: #676C79;

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

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

	transform: rotate(5deg);
}

/* =========================================================
   NOTES
   ========================================================= */

.renov-el-about-history-hero__note {
	position: absolute;
	z-index: 4;

	color: #667087;

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

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

	pointer-events: none;
}

.renov-el-about-history-hero__note--left {
	left: 22%;
	bottom: 44px;

	transform: rotate(-8deg);
}

.renov-el-about-history-hero__note--right {
	right: 24px;
	bottom: 40px;

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

	color: var(--renov-about-dark);

	font-size: 19px;

	text-align: right;

	transform: rotate(-5deg);
}

.renov-el-about-history-hero__note--right i {
	display: block;

	width: 125px;
	height: 3px;

	margin-top: 8px;

	border-radius: 999px;

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

/* =========================================================
   MODAL
   ========================================================= */

.renov-el-about-history-hero__modal[hidden] {
	display: none;
}

.renov-el-about-history-hero__modal {
	position: fixed;
	inset: 0;

	z-index: 999999;

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

	padding: 28px;
}

.renov-el-about-history-hero__modal-backdrop {
	position: absolute;
	inset: 0;

	background: rgba(7, 12, 27, 0.86);

	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}

.renov-el-about-history-hero__modal-dialog {
	position: relative;
	z-index: 2;

	width: min(1050px, 92vw);

	border-radius: 14px;

	background: #000000;

	box-shadow:
		0 30px 80px rgba(0, 0, 0, 0.42);

	animation:
		renov-about-modal-in
		240ms ease both;
}

.renov-el-about-history-hero__video {
	position: relative;

	width: 100%;

	overflow: hidden;

	aspect-ratio: 16 / 9;

	border-radius: inherit;
}

.renov-el-about-history-hero__video iframe {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	border: 0;
}

.renov-el-about-history-hero__modal-close {
	position: absolute;

	top: -46px;
	right: 0;

	z-index: 3;

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

	width: 42px;
	height: 42px;

	padding: 0;

	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;

	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;

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

	cursor: pointer;
}

@keyframes renov-about-modal-in {

	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

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

.renov-el-about-history-hero__breadcrumb a:focus-visible,
.renov-el-about-history-hero__button:focus-visible,
.renov-el-about-history-hero__play:focus-visible,
.renov-el-about-history-hero__modal-close:focus-visible {
	outline: 3px solid rgba(255, 114, 70, 0.35);
	outline-offset: 4px;
}

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

@media (max-width: 1250px) {

	.renov-el-about-history-hero__inner {
		min-height: 720px;
	}

	.renov-el-about-history-hero__layout {
		grid-template-columns:
			minmax(370px, 0.9fr)
			minmax(0, 1.1fr);

		gap: 42px;
	}

	.renov-el-about-history-hero__title {
		font-size: clamp(2.8rem, 4.6vw, 4.4rem);
	}

	.renov-el-about-history-hero__intro {
		margin-top: 38px;
		font-size: 1.5rem;
	}

	.renov-el-about-history-hero__paragraph {
		font-size: 15px;
	}

	.renov-el-about-history-hero__visual {
		min-height: 610px;
		padding-right: 70px;
	}

	.renov-el-about-history-hero__main-image-wrap,
	.renov-el-about-history-hero__main-image {
		min-height: 490px;
	}

	.renov-el-about-history-hero__badge {
		width: 122px;
		height: 122px;
	}

	.renov-el-about-history-hero__badge strong {
		font-size: 32px;
	}

	.renov-el-about-history-hero__badge span {
		font-size: 12px;
	}

	.renov-el-about-history-hero__models {
		right: 0;
		font-size: 15px;
	}
}

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

@media (max-width: 991px) {

	.renov-el-about-history-hero__inner {
		min-height: 0;
	}

	.renov-el-about-history-hero__inner.is-container {
		max-width: 800px;
	}

	.renov-el-about-history-hero__layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.renov-el-about-history-hero__copy {
		max-width: 760px;
	}

	.renov-el-about-history-hero__title {
		font-size: clamp(3rem, 7vw, 4.7rem);
	}

	.renov-el-about-history-hero__intro {
		max-width: 700px;
		margin-top: 36px;
	}

	.renov-el-about-history-hero__paragraph {
		max-width: 740px;
	}

	.renov-el-about-history-hero__visual {
		width: 100%;
		max-width: 850px;
		min-height: 620px;

		margin-inline: auto;

		padding:
			70px
			85px
			40px
			20px;
	}

	.renov-el-about-history-hero__main-image-wrap {
		width: 74%;
	}

	.renov-el-about-history-hero__secondary-image-wrap {
		right: 10px;
	}

	.renov-el-about-history-hero__note--left {
		display: none;
	}

	.renov-el-about-history-hero__note--right {
		right: 30px;
		bottom: 20px;
	}
}

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

@media (max-width: 700px) {

	.renov-el-about-history-hero__breadcrumb {
		gap: 8px;
		margin-bottom: 28px;

		font-size: 12px;
	}

	.renov-el-about-history-hero__kicker {
		font-size: 11px;
	}

	.renov-el-about-history-hero__title {
		font-size: clamp(2.5rem, 11vw, 3.7rem);
	}

	.renov-el-about-history-hero__title-line {
		max-width: 180px;
		height: 4px;

		margin-top: 13px;
	}

	.renov-el-about-history-hero__intro {
		margin-top: 30px;
		font-size: 1.35rem;
	}

	.renov-el-about-history-hero__paragraph {
		margin-top: 18px;

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

	.renov-el-about-history-hero__button {
		width: 100%;
		max-width: 340px;

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

		margin-top: 25px;

		font-size: 15px;
	}

	.renov-el-about-history-hero__visual {
		min-height: 510px;

		padding:
			55px
			22px
			20px;
	}

	.renov-el-about-history-hero__main-image-wrap {
		width: 82%;
		min-height: 390px;

		border-width: 5px;
	}

	.renov-el-about-history-hero__main-image {
		min-height: 390px;
	}

	.renov-el-about-history-hero__secondary-image-wrap {
		right: 0;
		bottom: 40px;

		width: 54%;

		border-width: 5px;
	}

	.renov-el-about-history-hero__badge {
		top: 2px;
		left: auto;
		right: 14px;

		width: 96px;
		height: 96px;

		border-width: 4px;
	}

	.renov-el-about-history-hero__badge::before {
		inset: 5px;
	}

	.renov-el-about-history-hero__badge strong {
		font-size: 25px;
	}

	.renov-el-about-history-hero__badge span {
		font-size: 9px;
	}

	.renov-el-about-history-hero__badge i {
		width: 30px;
	}

	.renov-el-about-history-hero__models,
	.renov-el-about-history-hero__note {
		display: none;
	}

	.renov-el-about-history-hero__play {
		width: 68px;
		height: 68px;
	}

	.renov-el-about-history-hero__play i {
		font-size: 24px;
	}

	.renov-el-about-history-hero__play svg {
		width: 24px;
		height: 24px;
	}

	.renov-el-about-history-hero__video-caption {
		left: 18px;
		bottom: 18px;

		font-size: 14px;
	}
}

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

@media (max-width: 420px) {

	.renov-el-about-history-hero__title {
		font-size: clamp(2.25rem, 11vw, 3rem);
	}

	.renov-el-about-history-hero__intro {
		font-size: 1.2rem;
	}

	.renov-el-about-history-hero__visual {
		min-height: 440px;
		padding-top: 45px;
	}

	.renov-el-about-history-hero__main-image-wrap {
		width: 88%;
		min-height: 330px;
	}

	.renov-el-about-history-hero__main-image {
		min-height: 330px;
	}

	.renov-el-about-history-hero__secondary-image-wrap {
		width: 58%;
	}

	.renov-el-about-history-hero__badge {
		right: 5px;

		width: 84px;
		height: 84px;
	}

	.renov-el-about-history-hero__badge strong {
		font-size: 21px;
	}

	.renov-el-about-history-hero__badge span {
		font-size: 8px;
	}

	.renov-el-about-history-hero__play {
		width: 60px;
		height: 60px;
	}
}

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

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

	.renov-el-about-history-hero__button,
	.renov-el-about-history-hero__button-icon,
	.renov-el-about-history-hero__main-image-wrap,
	.renov-el-about-history-hero__secondary-image-wrap,
	.renov-el-about-history-hero__play {
		transition: none !important;
	}

	.renov-el-about-history-hero__button:hover,
	.renov-el-about-history-hero__visual:hover
	.renov-el-about-history-hero__main-image-wrap,
	.renov-el-about-history-hero__visual:hover
	.renov-el-about-history-hero__secondary-image-wrap,
	.renov-el-about-history-hero__play:hover {
		transform: none;
	}

	.renov-el-about-history-hero__modal-dialog {
		animation: none;
	}
}