body {
	background-color : #c8e1d5;
}
h1 {
	font-size: 1.5em;
	color : #9d7c78;
}

h2 {
	font-size: 2.2em;
	color : #9d7c78;
}

.présentation {
	background-color :  #82c7c2;
	margin : 10px;
}

.content {
	background-color :  #82c7c2;
	padding: 10px;
	display : flex;
	flex-direction: column ;
	margin : 10px;
}

.élements {
	margin : 10px;
	padding : 10px;
	display : flex;
	flex-direction: row ;
	background-color: #beddd5;
	justify-content: space-around;
}



/* Code général du menu */


*{
	margin: 0px;
	padding: 0px;
	font-family:Avenir, sans-serif;
}

nav{
	width: 100%;
	margin: 0 auto;
	background-color:white;
	position: sticky;
	top:0px;
}

nav ul{
	list-style-type: none;
}

nav ul li{
	float: left;
	width: 25%;
	text-align: center;
	position: relative;
}

nav ul::after{
	content:"";
	display:table;
	clear: both;
}

nav a{
	display: block;
	text-decoration: none;
	color: black;
	border-bottom: 2px solid transparent;
	padding: 10px 0px;
}

nav a:hover{
	color: #62f1f5;
	border-bottom: 2px solid #62f1f5;
}

/* On passe à la partie "déroulant" */
.sous{
	display: none;
	box-shadow:0px 1px 2px #CCC;
	background-color: white;
	position: absolute;
	width: 100%;
	z-index:1000;
}

nav > ul li:hover .sous{
	display: block;
}

.sous li{
	float: none;
	width: 100%;
	text-align: left;
}

.sous a{
	padding: 10px;
	border-bottom:none;
}

.sous a:hover{
	border-bottom: none;
	background-color: RGBa(200,200,200,0.1);
}

.deroulant > a::after{
    content:" ▼";
    font-size: 12px;
}

/* Le lien vers le js, écrit par mathieu*/

.js li {
	list-style-type: none ;
	 }
	 
.js {
    display: flex;              /* Transformation en flexbox */
    padding:0;                  /* Suppression des marges internes */
    background-color: transparent;     /* Ajout de la couleur d'arrière-plan */
    justify-content: center;     /* Alignements des liens dans le menu */
}

.js a:hover {
  background-color: #b54242;
  color: #ffffff;
  border-color: #c9baba;
}

.js a {
    display:block;                /* Transformation en block */
    min-width: 120px;             /* Largeur minimale des liens */   
    
    margin: 0.5rem;               /* Marges externes (1 valeurs = 4 directions) */
    padding: 0.4rem 0;            /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
    text-align: center;           /* Centrage du texte */   
    background-color: #bb96b9;    /* Arrière-plan */
    color: #fff;                  /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    border: 1px solid #fff;       /* Ajout d'une bordure */
    border-radius: 4px;           /* Arrondis des bordures */

    transition: all 1s ;          /* Ajout des effets de transition */
	
	padding:5px;
}