html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: sans-serif;
	color: white;
	background: url('../images/chalet_fond.jpg') no-repeat center center fixed;
	background-size: cover;
}

h1 {
	font-size: 4.5vh;
	/* ✅ Titre principal lisible et responsive */
	margin-bottom: 2vh;
}

.overlay p {
	font-size: 3.25vh;
	/* ✅ Texte sous le titre, confortable à lire */
	margin: 0 0 3vh 0;
	/* T, B, L, R */
}

.overlay {
	background-color: rgba(0, 0, 0, 0.5);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 2vh;
}

.social-links {
	margin-top: 3vh;
	display: flex;
	gap: 3vw;
}

.social-links a {
	width: 4vw;
	height: 4vw;
	max-width: 10vw;
	max-height: 10vw;
	border-radius: 50%;
	overflow: hidden;
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.2);
	transition: transform 0.3s, background-color 0.3s;
}

.social-links a:hover {
	background-color: rgba(255, 255, 255, 0.4);
	transform: scale(1.1);
}

.social-links img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
	transition: opacity 0.3s;
}

.social-links a:hover img {
	opacity: 1;
}

/* ✅ Logo responsive */
#logo-chalet {
	position: absolute;
	top: 1%;
	left: 1%;
	width: 8vw;
	z-index: 10;
}

/* Bloc SEO visible, discret */
.seo-bloc {
	margin-top: 10vh;
	max-width: 85vw;
	font-size: 2.75vh;
	/* ✅ Texte long lisible, mais discret */
	color: #dddddd;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 2vh 3vw;
	border-radius: 2vw;
	line-height: 1.5;
	text-align: left;
}

@media (max-width: 768px) {
	#logo-chalet {
		width: 17vw;
	}

	h1 {
		/* +~25% en paysage (horizontal) */
		font-size: clamp(1.45rem, 6.5vmin, 2.45rem);

		line-height: 1.1;
		margin: 0 0 2vmin 0;
	}

	.overlay {
		justify-content: flex-start;
		padding: 2vmin 3vmin;
		padding-top: calc(2.5vh + env(safe-area-inset-top));
		height: auto;
		min-height: 100vh;
		min-height: 100svh;
		overflow-y: auto;

		/* petit espace en haut (safe-area + respirer) */
		padding-top: calc(2vh + env(safe-area-inset-top));
	}

	.overlay p {
		font-size: clamp(1.05rem, 4.4vmin, 1.7rem);
		margin-top: 6vmin; /* un peu moins que 10vh */
	}

	.seo-bloc {
		/* taille stable portrait/paysage */
		font-size: clamp(0.95rem, 4.25vmin, 1.25rem);

		/* bonus: un peu moins “gros” visuellement */
		margin-top: 6vmin;          /* au lieu d’un gros 10vh/8vh */
		padding: 1.8vmin 3vmin;     /* léger, propre */
		max-width: 75vw;
	}

	.social-links a {
		width: 6vw;
		height: 6vw;
		max-width: 12vw;
		max-height: 12vw;
	}

	/* .social-links img {
		width: 150%;
		height: 150%;
	} */
}