* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	width: 100%;
	min-height: 100%;
}

body {
	background: #f7f2e9;
	color: #62685f;
	font-family: Arial, sans-serif;
	overflow-x: hidden;
}


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

.hero {
	height: calc(100dvh - 92px);
	min-height: 0;

	display: grid;
	grid-template-columns:
		minmax(0, 52%)
		minmax(0, 48%);

	overflow: hidden;

	background:
		linear-gradient(
			90deg,
			#fbf8f3,
			#f6f1e8
		);
}


/* =========================
   PARTIE GAUCHE
========================= */

.copy {
	min-width: 0;
	min-height: 0;

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

	text-align: center;

	padding:
		clamp(18px, 3vh, 38px)
		40px;

	overflow: hidden;
}


/* =========================
   LOGO
========================= */

.logo {
	display: block;

	width: min(500px, 78%);
	max-height: 27vh;

	height: auto;

	object-fit: contain;

	margin:
		0
		auto
		clamp(18px, 3vh, 34px);
}


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

h1 {
	margin: 0;

	color: #676d63;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size:
		clamp(
			40px,
			4vw,
			64px
		);

	font-weight: 400;
	line-height: 1.05;
}


/* =========================
   SÉPARATEUR
========================= */

.sep {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 7px;

	margin:
		clamp(16px, 2.5vh, 27px)
		0;
}

.sep span {
	width: 42px;
	height: 1px;

	background: #b68a58;
}

.sep i {
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: #b68a58;
}


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

.intro {
	margin: 0;

	max-width: 560px;

	font-size:
		clamp(
			15px,
			1.25vw,
			19px
		);

	line-height: 1.55;
}


/* =========================
   MERCI
========================= */

.thanks {
	margin:
		clamp(18px, 3vh, 30px)
		0
		3px;

	color: #ad7e4d;

	font-family:
		"Brush Script MT",
		"Segoe Script",
		cursive;

	font-size:
		clamp(
			28px,
			2.6vw,
			41px
		);

	line-height: 1.1;
}


/* =========================
   COEUR
========================= */

.heart {
	color: #b68a58;

	font-family: Georgia, serif;

	font-size:
		clamp(
			32px,
			3vh,
			42px
		);

	line-height: 1;
}


/* =========================
   PARTIE DROITE
========================= */

.empty-visual {
	min-width: 0;
	min-height: 0;

	position: relative;

	display: flex;
	justify-content: flex-end;
	align-items: stretch;

	padding:
		12px
		0
		0
		12px;

	overflow: hidden;
}


/* =========================
   ARCADE
========================= */

.arcade {
	position: relative;

	height: 100%;
	width: auto;

	aspect-ratio: 2 / 3;

	max-width: 100%;

	margin-left: auto;

	overflow: hidden;

	background: #f4eee5;

	border:
		1px solid
		rgba(181, 138, 88, 0.43);

	border-right: 0;
	border-bottom: 0;

	/*
	 * Arrondi uniquement en haut à gauche
	 * côté droit parfaitement droit
	 */
	border-radius:
		48% 0 0 0 /
		24% 0 0 0;
}


/* =========================
   IMAGE DANS L'ARCADE
========================= */

.arcade-image {
	position: absolute;

	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;
	object-position: center bottom;

	filter:
		brightness(1.03)
		saturate(0.93);
}


/* =========================
   DEUXIÈME TRAIT
========================= */

.arcade::before {
	content: "";

	position: absolute;

	z-index: 3;

	top: 12px;
	left: 14px;
	right: 0;
	bottom: -10px;

	pointer-events: none;

	border:
		1px solid
		rgba(181, 138, 88, 0.18);

	border-right: 0;
	border-bottom: 0;

	border-radius:
		48% 0 0 0 /
		24% 0 0 0;
}


/* =========================
   VOILE TRÈS LÉGER
========================= */

.arcade::after {
	content: "";

	position: absolute;

	z-index: 2;

	inset: 0;

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba(247, 242, 233, 0.08),
			transparent 22%
		);
}


/* =========================
   FOOTER DESKTOP
========================= */

footer {
	height: 92px;
	min-height: 92px;

	display: grid;

	grid-template-columns:
		1fr
		1.45fr
		1.25fr
		.55fr;

	align-items: center;

	padding: 0 10%;

	background: #73796a;

	color: #fff;

	font-size: 14px;
}

footer > div {
	text-align: center;
}

footer > div + div {
	border-left:
		1px solid
		rgba(255, 255, 255, .25);
}

.social {
	display: flex;
	justify-content: center;

	gap: 20px;
}

.social a {
	width: 42px;
	height: 42px;

	display: grid;
	place-items: center;

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

	border-radius: 50%;

	color: #fff;

	text-decoration: none;

	font-size: 20px;
}

.flower {
	color: #d2a06d;
	font-size: 32px;
}


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

@media (max-width: 1000px) {

	.hero {
		grid-template-columns:
			minmax(0, 48%)
			minmax(0, 52%);
	}

	.copy {
		padding:
			28px
			24px;
	}

	.logo {
		width: min(420px, 88%);
		max-height: 24vh;

		margin-bottom: 24px;
	}

	h1 {
		font-size:
			clamp(
				38px,
				5.2vw,
				56px
			);
	}

	.intro {
		font-size: 15px;
	}

	.thanks {
		font-size:
			clamp(
				27px,
				3.2vw,
				37px
			);
	}

	footer {
		padding:
			0
			6%;
	}
}


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

@media (max-width: 820px) {

	body {
		overflow-x: hidden;
	}

	.hero {
		height: auto;
		min-height: auto;

		display: flex;
		flex-direction: column;

		overflow: visible;
	}

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

	.copy {
		width: 100%;

		min-height: auto;

		padding:
			max(
				28px,
				env(safe-area-inset-top)
			)
			20px
			36px;

		overflow: visible;
	}

	.logo {
		width: min(340px, 82%);
		max-height: none;

		margin:
			0
			auto
			24px;
	}

	h1 {
		max-width: 100%;

		font-size:
			clamp(
				36px,
				10vw,
				49px
			);

		line-height: 1.08;
	}

	.sep {
		margin:
			22px
			0;
	}

	.intro {
		max-width: 360px;

		font-size: 15px;
		line-height: 1.55;
	}

	.intro br {
		display: none;
	}

	.thanks {
		margin-top: 24px;

		font-size:
			clamp(
				29px,
				8vw,
				38px
			);
	}

	.heart {
		font-size: 39px;
	}


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

	.empty-visual {
		width: 100%;

		height: auto;

		display: flex;
		justify-content: flex-end;

		padding:
			0
			0
			0
			32px;

		overflow: hidden;
	}

	.arcade {
		width: min(100%, 520px);
		height: auto;

		aspect-ratio: 2 / 3;

		margin-left: auto;

		border-radius:
			42% 0 0 0 /
			18% 0 0 0;
	}

	.arcade-image {
		width: 100%;
		height: 100%;

		object-fit: contain;
		object-position: center bottom;
	}

	.arcade::before {
		top: 10px;
		left: 12px;
		right: 0;
		bottom: -8px;

		border-radius:
			42% 0 0 0 /
			18% 0 0 0;
	}


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

	footer {
		height: auto;
		min-height: auto;

		grid-template-columns:
			1fr
			1fr;

		gap:
			18px
			10px;

		padding:
			22px
			20px
			calc(
				22px +
				env(safe-area-inset-bottom)
			);

		font-size: 13px;
	}

	footer > div {
		width: 100%;
	}

	footer > div + div {
		border-left: 0;
	}

	.social {
		gap: 16px;
	}

	.social a {
		width: 42px;
		height: 42px;
	}
}


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

@media (max-width: 520px) {

	.copy {
		padding-left: 16px;
		padding-right: 16px;
	}

	.logo {
		width: 82%;
		max-width: 300px;
	}

	h1 {
		font-size:
			clamp(
				34px,
				10.5vw,
				43px
			);
	}

	.intro {
		max-width: 310px;
		font-size: 14px;
	}

	.thanks {
		max-width: 320px;

		font-size:
			clamp(
				28px,
				9vw,
				35px
			);
	}

	.empty-visual {
		padding-left: 24px;
	}

	.arcade {
		width: 100%;
	}

	footer {
		grid-template-columns: 1fr;

		gap: 14px;

		padding:
			22px
			18px
			calc(
				22px +
				env(safe-area-inset-bottom)
			);
	}

	.social {
		justify-content: center;
	}
}


/* =========================================================
   TRÈS PETIT MOBILE
========================================================= */

@media (max-width: 360px) {

	.logo {
		width: 88%;
	}

	h1 {
		font-size: 32px;
	}

	.intro {
		font-size: 13px;
	}

	.thanks {
		font-size: 27px;
	}

	.empty-visual {
		padding-left: 18px;
	}
}