* 
{
	margin:0;
	padding:0;
	box-sizing: border-box;
}

html,body
{
	width:100%;
	min-height: 100vh;
	background-color:white;
	overflow-x:hidden;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/* ===== HEADER ===== */
header#haut
{
	width:90vw;
	min-height:15vh;
	background-color:white;
	margin:auto;
	display:grid;
	grid-template-columns: calc(min(9vw,15vh)) 1fr;
	align-items: center;
}

/* LOGO */
div#logo
{
	width:calc(min(9vw,15vh));
	height:calc(min(9vw,15vh));
	background-color:white;
	display:flex;
	justify-content:center;
	align-items:center;
}

/* Image du logo (cz5.png) */
div#logo img
{
	max-width:100%;
	max-height:100%;
	display:block;
}

/* TITRE */
div#titre
{
	width:100%;
	min-height:15vh;
	background-color:white;
	justify-self:start;
	font-size:7vmin;
	padding:3vmin;
	display:flex;
	justify-content:center;
	align-items:center;
	text-align:center;
}

/* Corrige le h1 dans #titre */
div#titre h1
{
	font-size:7vmin;
	font-weight:700;
}

/* ===== IMAGE CENTRÉE SOUS LE HEADER ===== */
img
{
	max-width:100%;
	height:auto;
	display:block;
}

/* ===== MENU ===== */
nav#menuHaut
{
	width:90vw;
	min-height:8vh;
	background-color:white;
	margin:auto;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
}

nav#menuHaut ul
{
	width:100%;
	min-height:8vh;
	list-style:none;
	display:flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap:wrap;
	gap:1vh;
	padding:1vh 0;
}

nav#menuHaut a
{
	display:block;
	text-decoration:none;
	color:#111;
	font-size:3vmin;
	padding:1vh 2vw;
	border-radius:8px;
}

nav#menuHaut a:hover
{
	background-color:#f2f2f2;
}

/* ===== MAIN ===== */
main
{
	width:90vw;
	min-height:60vh;
	background-color:white;
	margin:auto;
	margin-top:2vh;

	display:grid;
	grid-template-columns: repeat(4,1fr);
	grid-auto-rows: minmax(80px, 1fr);
	gap:1vh;
}

/* Sections */
section
{
	background-color:white;
	color:#111;
	border:1px solid #e5e5e5;
	border-radius:10px;
	min-height:80px;
}

/* ===== FOOTER ===== */
footer
{
	width:90vw;
	min-height:10vh;
	background-color:white;
	margin:auto;
	border-top:1px solid #ddd;
	padding:2vh 2vw;
	font-size:3vmin;
	text-align:center;
}

/* ===== RESPONSIVE (mobile) ===== */
@media (max-width: 768px)
{
	header#haut
	{
		grid-template-columns: 1fr;
		justify-items:center;
		gap:1vh;
	}

	div#titre
	{
		min-height:auto;
		padding:2vh 2vw;
	}

	main
	{
		grid-template-columns: repeat(2,1fr);
	}

	nav#menuHaut a
	{
		font-size:4vmin;
	}
}

@media (max-width: 480px)
{
	main
	{
		grid-template-columns: 1fr;
	}

	div#titre h1
	{
		font-size:8vmin;
	}
}