/* Styles globaux */
body
{
	margin: 0;
	padding: 0;
	background: linear-gradient(135deg, #a0cfcf 20%, #4fbfbf 60%, #2aa7a7 100%);
	color: #333;
	font-size: 25px;
}

/* HEADER */
header
{
	display: flex;
	align-items: center; /* Centre verticalement le contenu */
	justify-content: space-between; /* Espace entre le logo et la navigation */
	padding: 10px 20px;
	font-size: 20px;
	background-color: rgba(0, 70, 70, 0.6);
}

header nav
{
	flex: 1; /* Prend tout l'espace disponible */
	text-align: center; /* Centre la navigation horizontalement */
}

header nav ul
{
	list-style: none;
	display: inline-flex; /* Affiche les éléments en ligne */
	gap: 30px; /* Espacement entre les éléments */
	padding: 0;
	margin: 0;
}

header nav ul li
{
	margin: 0;
}

/* Logo du site */
.site-logo
{
	height: 50px; /* Ajustez la taille du logo */
	margin-right: 20px;
	vertical-align: middle; /* Aligne le logo avec le texte */
}

/* Liens de navigation */
nav ul li a
{
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	padding: 10px 15px;
	border-radius: 8px;
	background-color: rgba(0, 60, 60, 0.2);
	transition: background 0.4s, color 0.4s;
}

nav ul li a:hover
{
	background: linear-gradient(90deg, #2aa7a7, #66ffff);
	color: #003333;
}

/* Contenu principal */
main
{
	padding: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

p
{
	padding: 4px;
	padding-left: 20px;
}

main h2
{
	color: #222;
	border-bottom: 2px solid #00bcd4;
	padding-bottom: 5px;
	margin-bottom: 15px;
}

main p, main ul
{
	line-height: 1.6;
	margin-bottom: 20px;
}

main ul
{
	padding-left: 20px;
}

main ul li
{
	margin-bottom: 10px;
}

/* Pied de page */
footer
{
	text-align: center;
	padding: 10px 0;
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 0.9em;
}

/* Responsive Design */
@media (max-width: 768px)
{
	header nav ul
	{
		flex-direction: column;
		align-items: center;
	}

	header nav ul li
	{
		margin: 10px 0;
	}

	main
	{
		padding: 10px;
	}
}