*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	min-height: 100vh;
	background-color: #c5d9c8;
	background-image: url(../images/fond1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: scroll;
}

header {
	padding: 1.5rem 1rem 0;
}

.innerheader {
	max-width: 40rem;
	margin: 0 auto;
}

h1 {
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: clamp(1.75rem, 5vw + 1rem, 3.75rem);
	font-weight: 700;
	text-align: center;
	margin: 1em 0 0;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

p {
	color: #fff;
	font-size: clamp(1.5rem, 4vw + 0.75rem, 3.4rem);
	font-family: 'Poiret One', cursive;
	font-weight: 700;
	text-align: center;
	margin-top: 2px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.commune {
	color: #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	text-align: center;
	margin-top: 25em;
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.commune a {
	text-decoration: none;
}

.logo {
	height: 90px;
	width: 370px;
	max-width: 100%;
	height: auto;
}

span {
	color: #fff;
	text-decoration: none;
}

/* Tablette / petit desktop : recentrage un peu plus bas pour garder le village */
@media (max-width: 900px) {
	body {
		background-position: center 40%;
	}
}

/* Mobile : cadrage sur le village, titre plus compact */
@media (max-width: 600px) {
	body {
		background-position: center 35%;
	}

	header {
		padding: 1.25rem 0.75rem 0;
	}

	h1 {
		margin-top: 0.75em;
	}
}