body {
	background-color: #d3e7cb; /* Couleur de fond vert doux */
	font-family: Arial, sans-serif;
	color: #333; /* Couleur de texte sombre */
	display:flex;
	background-size: auto;
	flex-direction:column;
	justify-content:center;
	align-items: center;
	overflow-wrap: break-word;
}

#entete {
	width:100%;
	color:#000000;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: stretch;
}

#nom {
    display: flex;
    flex-direction: column;
    align-content: space-around;
	align-items: start;
}

#logo {
	width: 5%;
	height:5%;
}

#navigation{
	width:60%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: rgba(11,11,11, 0.25);
	border-radius: 10px;
	box-sizing: border-box;
}

#contenu{
	width:80%;
	justify-content:center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

#important{
	color:red;
	font-weight:bold;
	font-size:13pt;
}

.Important{
	color:red;
	font-weight:bold;
	font-size:13pt;
}

#Pied {
	width:60%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
	background-color: rgba(11,11,11, 0.25);
	border-radius: 10px;
	box-sizing: border-box;
	margin-top: 1%;
}

.paragraphe {
	background-color: rgba(11,11,11, 0.25);
	border-radius: 10px;
	padding: 5px;
}

.liste-horizontale, .paragraphe {
	font-size: 16px;
}


#img {
	display: flex;
	flex-direction:row;
	align-items: center;
	justify-content: space-around;
}

ul {
	display: flex;
	flex-direction: row;
	list-style-type: none;
}

ol {
	list-style-type: none;
}

li{
	padding:10pt;
}

img{
	width:400px;
	height: 400px;
	padding: 5px;
}

p{
	text-align:justify;
	opacity: 1.0;
	padding: 5px;
}

h1 {
	font-size: 36px;
	font-weight: bold;
	color: #5c936b; /* Couleur verte vive en harmonie avec le fond */
	margin-bottom: 20px;
	text-transform: uppercase; /* Mettre en majuscules pour un style accrocheur */
	letter-spacing: 2px; /* Espacement des lettres pour plus d'impact */
	text-align:center;
}

h2 {
	text-align:center;
	font-weight:bold;
	color: #5c936b;
	font-size:25pt;
}

.liste-horizontale {
	background-color: rgba(11,11,11, 0.25);
	border-radius: 10px;
	padding: 5px;
  display: flex;
  flex-wrap: wrap; /* Permet le passage à la ligne si nécessaire */
  padding: 10px; /* Ajoutez le padding souhaité */
  border: 1px solid #ccc; /* Ajoutez une bordure si nécessaire */
  max-width: 100%; /* Ajoutez la largeur maximale souhaitée pour la div */
}

.liste-horizontale ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.liste-horizontale li {
  margin-right: 10px; /* Espacement entre les éléments */
  white-space: nowrap; /* Empêche le passage à la ligne dans chaque élément <li> */
}


a:hover{
	background-color:black;
	color:white;
}

#a_entete:hover{
    background-color:rgba(200,200,200,0.1);
	color:black;
}

a{
	color:#201020	
}

ol a {
	color:white;
}

@media screen and (max-width: 767px) {
    #logo {
	    width: 15%;
	    height:15%;
    }

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

	li {
		display: inline-block;
		vertical-align: top;
	}
	#contenu{
		width:100%;
	}
	#Pied{
		width: 90%;
	}
	.paragraphe, .liste-horizontale{
		margin: 2px;
		font-size: 22px;
	}
	p {
		padding: 2px;
	}
	.dispensable {
		display: none;
	}
	img {
		width: 200px;
		height: 200px;
	}
}