body {
       margin: 0;
       padding: 0;
	   background: url("../images/background.png");
    }
    html, body {  
		width: 100%;
		height: 100%;
    }
	p {
		text-indent: 2em;
		font-size: 18px;
		font-family: "Lato", sans-serif;
		margin-block-start: 0.5em;
		margin-block-end: 0.5em;
		text-align: justify;
	}
	h3 {
		text-indent: 2em;
		font-size: 22px;
		font-family: "Lato", sans-serif;
		margin-block-start: 1em;
		margin-block-end: 0.5em;
		font-style: italic;
		text-align: justify;		
	}
	figure {
		margin-block-end: 0.2em;
	}
	.small {
		font-size: 14px;
		font-family: "Lato", sans-serif;		
	}
	p > a:link {
		color: #518b96;
		text-decoration: underline;
	}
	p > a:visited {
		color: #aa5fa6;
		text-decoration: none;
	}
	a:link {
		color: #3d3e32;
		text-decoration: none;
	}

	a:visited {
		color: #3d3e32;
		text-decoration: none;
	}
	
	a:hover {
		color: #000000;
		font-weight: bolder;
	}

	a:active {
		color: blue;
		text-decoration: none;
	}
	#nom {
		background: #e8e9d1;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		align-content: stretch;
		border-bottom: 7px solid #292624;
	}
	.visage {
		width: 7%;
		height: 7%;
	}
	.Maxencejeanjean {
		width: 18%;
		height: 18%;
	}
	.MJlogo {
		width: 4.5%;
		height: 4.5%;
		border-left: solid #292624 7px;
	}
	#bienvenue {
		border-top: solid #292624 7px;
		display: none;
		justify-content: center;
	}
	.boutons {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		flex: auto;
		border-bottom: solid #292624 3px;
		border-right: solid #292624 3px;
		border-left: solid #292624 3px;
		border-bottom-right-radius: 15px;
		border-bottom-left-radius: 15px;
		text-align: center;
		transition: height 0.3s, padding 0.3s;
	}
	.boutons.secondaire:hover {
	    height: 6vw;
		padding-top: 25px;
	}
	.primaire {
		background: #e8e9d1;
		padding: 25px;
		height: 4vw;
		margin: 0px;
		font-size: 2vw;
		font-weight: 900;
		font-family: "Open Sans", sans-serif;
	}
	.secondaire {
		background: #e8e9d1;
		padding-top: 5px;
		height: 3vw;
		vertical-align: middle;
		font-size: 1.5vw;
		font-weight: 500;
		font-family: "Open Sans", sans-serif;
	}
	#about {
		background: #000000;
		padding: 100px;
		display: flex;
		justify-content: center;
		color: white;
		margin-top: auto;
	}
	#description {
		flex-wrap: nowrap;
		border-left: solid 20vw #cacbb8;
		border-right: solid 20vw #cacbb8;
		line-height: 1.3;	
	}

/* Écran ordi */
@media only screen and (min-width:1000px) {
		#experience-telephone {
			display: none;
		}
		#titre-section-legende {
			font-size : 22px;
			border-bottom: 2px solid #000000;
			border-bottom: 2px solid #000000;
			padding-left: 0.5vw;
			padding-bottom: 0.5vw;
		}
		.légende-données {
			font-size: 17px;
			text-indent: 0.5vw;
		}
		.légende-logo {
			width: 20%;
			height: 20%;
		}
		#titre-gauche {
			background: #e8e9d1;
			display: block;
			padding: 50px;
			margin: 0px;
			border-top: solid 5px;
			border-bottom: solid 5px;	
			font-size: 50px;
		}
		#titre-droite {
			background: #ffffff;
			display: block;
			padding: 50px;
			margin: 0px;
			border-top: solid 5px;
			border-bottom: solid 5px;	
			font-size: 50px;
		}
		#citation {
			background: #ffffff;
			display: block;
			font-family: "Lato","sans-serif";
			padding-top: 50px;
			padding-bottom: 50px;
			padding-left: 15vw;
			padding-right: 15vw;
			border-top: solid 5px;
			margin: 0px;
			font-size: 20px;
		}
		#boite-image-gauche {
			margin-top: 0.5em;
			margin-right: 1em;
			margin-left: 1em;
			float: right;
			width: 50%;
		}
		#boite-image-droite {
			margin-top: 0.5em;
			margin-right: 1em;
			margin-left: 1em;
			float: left;
			width: 50%;
		}
		.gauche-image {
			width: 75%;
			height: 75%;
			border: solid 5px;
			transition: height 0.3s, width 0.3s;
		}
		.droite-image {
			width: 75%;
			height: 75%;
			border: solid 5px;
			transition: height 0.3s, width 0.3s;
		}
	/* CARTE */
		#cadre-map {
			max-width: 85vw;
			margin: auto;
			margin-top: 50px;
			margin-bottom: 50px;
			background: #e8e9d1;
		}
		#carte-et-legende {
			display: flex;
			flex-direction: row;	
		}
		#legende-et-titre {
			display: block;
			max-width : 15vw;
		}
		#map {
			border: 5px solid #000000;
			height: auto;
		}
		.mapLegend {
			max-width: auto;
			height: 60vh;
			border-left: 5px solid;
			border-bottom: 5px solid;
			overflow-y: scroll;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.mapLegend-title {
			border-bottom : 5px solid;
			border-left : 5px solid;
			border-top : 5px solid;
			font: 2vw bold;
			padding: 1vw;	
		}
		.mapLegend-scroll {
			padding-left : 1vw;
		}
		#titre-section-legende {
			font-size : 22px;
			border-bottom: 2px solid #000000;
			border-bottom: 2px solid #000000;
			padding-left: 0.5vw;
			padding-bottom: 0.5vw;
			text-indent: 0px;
		}
		.mapCanvas { 
			width: 70vw;
		}
		#titre-carte {
			display: flex;
			align-items: center;
			flex-direction: column;
			padding-bottom: 1px;
			background: #e8e9d1;
			border-top: solid 5px;
			border-left: solid 5px;
			border-right: solid 5px;
		}
		.gros-titre-carte {
			font-size: 46px;
			margin-top: 10px;
			margin-bottom: 5px;
			text-indent: 0px;;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.sous-titre-carte {
			font-size: 22px;
			margin-top: 5px;
			margin-bottom: 10px;
			padding-left: 15%;
			padding-right: 15%;
			text-indent: 0px;;
			font-family: "Lato", "sans-serif";
		}
		#titre-tableau {
			font-size : 18px;
			border-bottom: 2px solid #000000;
			padding-bottom: 5px;
		}
		#sous-titre-tableau {
			font-size : 16px;
			border-bottom: 1px solid #000000;
			padding-bottom: 3px;		
		}
		#titre-tableau {
			font-size : 18px;
			border-bottom: 2px solid #000000;
			padding-bottom: 5px;
		}
		#sous-titre-tableau {
			font-size : 16px;
			border-bottom: 1px solid #000000;
			padding-bottom: 3px;		
		}
		.tableau-données {
			border-bottom: 1px solid #ddd;
			padding-bottom: 2px;
			min-width : 175px;
		}
	}

/* Écran réduit */
@media only screen and (max-width:1500px) {
		#description {
			flex-wrap: nowrap;
			border-left: solid 10vw #cacbb8;
			border-right: solid 10vw #cacbb8;
			line-height: 1.3;				
		}
}	

/* Écran téléphone */
@media only screen and (max-width:1000px) {
		#description {
			flex-wrap: nowrap;
			border-left: solid 0vw #cacbb8;
			border-right: solid 0vw #cacbb8;
			line-height: 1.3;	
		}
		p {
			font-size: 17px;
		}
		#titre-section-legende {
			font-size : 16px;
			border-bottom: 2px solid #000000;
			border-bottom: 2px solid #000000;
			padding-left: 0.5vw;
			padding-bottom: 0.5vw;
			text-indent: 0px;
		}
		.légende-données {
			font-size: 14px;
			text-indent: 1vw;
		}
		.légende-logo {
			width: 20px;
			height: 20px;
		}
		#titre-droite {
			background: #ffffff;
			display: block;
			padding: 30px;
			margin: 0px;
			border-top: solid 5px;
			border-bottom: solid 5px;	
			font-size: 30px;
		}
		#citation {
			background: #ffffff;
			display: block;
			font-family: "Lato","sans-serif";
			padding-top: 30px;
			padding-bottom: 30px;
			padding-left: 30px;
			padding-right: 30px;
			margin: 0px;
			font-size: 18px;
		}
		#titre-gauche {
			background: #e8e9d1;
			display: block;
			padding: 30px;
			margin: 0px;
			border-top: solid 5px;
			border-bottom: solid 5px;	
			font-size: 30px;		
		}
		#carte-et-legende {
			display: flex;
			flex-direction: column;		
		}
		.visage {
			width: 5%;
			height: 5%;
		}
		.Maxencejeanjean {
			width: 20%;
			height: 20%;
		}
		.MJlogo {
			width: 6%;
			height: 6%;
			border-left: solid #292624 7px;
		}
		#boite-image-gauche {
			margin-top: 0.5em;
			margin-right: 1em;
			margin-left: 1em;
		}
		#boite-image-droite {
			margin-top: 0.5em;
			margin-right: 1em;
			margin-left: 1em;
		}
		.gauche-image {
			width: 75%;
			height: 75%;
			border: solid 5px;
			transition: height 0.3s, width 0.3s;
		}
		.droite-image {
			width: 75%;
			height: 75%;
			border: solid 5px;
			transition: height 0.3s, width 0.3s;
		}
	/* CARTE */
		#cadre-map {
			max-width: 85vw;
			margin: auto;
			margin-top: 50px;
			margin-bottom: 50px;
			background: #e8e9d1;
		}
		#carte-et-legende {
			display: flex;
			flex-direction: row;		
		}
		#legende-et-titre {
			display: block;
			max-width : 25vw;
		}
		#map {
			border: 5px solid #000000;
			height: auto;
		}
		.mapLegend {
			max-width: auto;
			height: 60vh;
			border-left: 5px solid;
			border-bottom: 5px solid;
			overflow-y: scroll;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.mapLegend-title {
			border-bottom : 5px solid;
			border-left : 5px solid;
			border-top : 5px solid;
			font: 16px bold;
			padding: 1vw;	
		}
		.mapLegend-scroll {
			padding-left : 1vw;
		}
		.mapCanvas { 
			width: 74vw;
		}
		#titre-carte {
			display: flex;
			align-items: center;
			flex-direction: column;
			padding-bottom: 1px;
			background: #e8e9d1;
			border-top: solid 5px;
			border-left: solid 5px;
			border-right: solid 5px;
		}
		.gros-titre-carte {
			font: 26px bold;
			margin-top: 10px;
			margin-bottom: 5px;
			margin-left: 25px;
			margin-right: 25px;
			text-indent: 0px;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.sous-titre-carte {
			font: 15px bold;
			margin-top: 5px;
			margin-bottom: 10px;
			margin-left: 15px;
			margin-right: 15px;
			text-indent: 0px;;
		}
		#titre-tableau {
			font-size : 14px;
			border-bottom: 2px solid #000000;
			padding-bottom: 5px;
		}
		#sous-titre-tableau {
			font-size : 12px;
			border-bottom: 1px solid #000000;
			padding-bottom: 3px;		
		}
		.tableau-données {
			border-bottom: 1px solid #ddd;
			padding-bottom: 2px;
			min-width : 75px;
			max-width: 80px;
		}
	}
/* Téléphone droit*/	
@media only screen and (max-width:500px) {
	#experience-telephone {
		display: flex;
		border-left: solid #000000 5px;
		border-right: solid #000000 5px;
		border-top: solid #000000 5px;
		align-items: center;
		justify-content: space-between;
		padding: 1%;
	}
}
/* Téléphone tourné*/
@media only screen and (min-width:500px) {
	#experience-telephone {
		display: none;
	}
	#boite-image-gauche {
		margin-top: 0.5em;
		margin-right: 1em;
		margin-left: 1em;
		float: right;
		width: 50%;
	}
	#boite-image-droite {
		margin-top: 0.5em;
		margin-right: 1em;
		margin-left: 1em;
		float: left;
		width: 50%;
	}
}
/* AUTRES */
	#boite-texte {
		max-width: 50%;
	}
	#gauche {
		background: #e8e9d1;
		padding-bottom: 5vh;
		padding-top: 3vh;
		padding-left: 5vw;
		padding-right: 5vw;
	}
	#gauche-texte {
		margin-left: 1vw;
		margin-right: 1vw;
	}
	#droite-texte {
		margin-right: 1vw;
		margin-left: 1vw;
	}
	#droite {
		background: #ffffff;
		padding-bottom: 5vh;
		padding-top: 5vh;
		padding-left: 5vw;
		padding-right: 5vw;
		text-align: justify;
		text-justify: inter-word;
	}
	#droite-texte-div {
		max-width: 50%;
	}
	#Glossaire {
		background: #ffffff;		
	}
	.popup-img {
		width : 50%;
		height : 50%;
		border : 5px solid #000000;
		margin : 15px 0px 15px 0px;
	}
	.gauche-image:hover {
		width: 95%;
		height: 95%;
		transition: height 0.3s, width 0.3s;
	}
	.droite-image:hover {
		width: 95%;
		height: 95%;
		transition: height 0.3s, width 0.3s;
	}
	#légende-ligne {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ddd;
		min-height: 2.5vw;
		padding-left: 1vw;
		padding-right: 1vw;
	}
	.layer-control-titre {
		text-indent: 0px;
		border-bottom: 1px solid #ddd;
	}