html {
  height: 100%;
}

body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	padding-top: 58px; /* Assurez-vous que le contenu principal n'est pas masqué par le menu */
	background-color: #f5f5f5;
}
		
h1 {
	font-size: 2.5em; /* Vous pouvez ajuster cette valeur selon vos préférences */
	margin: 0;
	padding: 0;
}

header {
	display: flex;
	background-color: #2b3637;
	color: white;
	text-align: center;
	padding: 1em;
	justify-content: space-between; /* Ajout pour aligner les éléments à l'extrémité du header */
	align-items: center; /* Ajout pour aligner les éléments au centre verticalement */

}

header > div:last-child {
	flex-grow: 1;
	flex-shrink: 1;
	margin-left: 20px; /* Vous pouvez ajuster cette valeur selon vos préférences */
}

/* Style commun pour le menu */
nav {
	width: 100%;
	display: flex;
	justify-content: space-around;
	padding: 10px;
	position: fixed;
	top: 0;
	background-color: #333;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

nav a {
	text-decoration: none;
	color: white;
	padding: 10px;
}

nav a:hover {
        text-decoration: underline; /* Souligner le texte lors du survol */
}

main {
	padding: 1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

section {
	flex: 1 1 calc(100% - 2em);
	margin: 1em;
	border: 2px solid #ddd; /* Ajout d'une bordure grise */
	background-color: #f9f9f9; /* Couleur de fond pour les sections */
	box-sizing: border-box; /* Ajustement de la boîte pour inclure la bordure */
	padding: 1em;
}

#general {
}

#menu1 {
	flex: 0 1 calc(30% - 2em);
}
#menu2 {
	flex: 0 1 calc(70% - 2em);
}

#musique,
#dessin,
#theatre,
#yoga		{
	flex: 0 1 calc(50% - 2em);
}

footer {
	background-color: #333;
	color: white;
	text-align: center;
	padding: 1em;
}

#logo {
	height: 183px;
	width: 221px;
}

#logoImg {
	height: 183px;
	width: 221px;
}


/* Ajout de media queries pour une meilleure responsivité sur les petits écrans */

@media screen and (max-width: 991px) {
	header {
		align-items: flex-start;
	}

	section {
		flex-direction: column;
	}

	#menu1,
	#menu2,
	#musique,
	#dessin,
	#theatre,
	#yoga	
	{
		flex: 1 1 calc(100% - 2em);
	}

	
	h1 {
		font-size: 1.5em; /* Vous pouvez ajuster cette valeur selon vos préférences */
	}


	main {
		padding: 0.5em;
	}

	#logo {
		height: 91px;
		width: 100px;
	}
		
	#logoImg {
		height: 91px;
		width: 110px;
	}
}