* {margin:0px; padding:0px;}




/*BUREAU*/
/*@media screen and (min-width:1000px)*/
@media screen and (min-width:1000px)
{
	.contenu_bureau {width:auto; height:100%; margin:auto; clear:both;}
	.contenu_mobile {display:none;}

	body {background:#FFFFFF; width:100%;}
	header {position:absolute; left:15%; width:85%; height:80px; background:#000000; font-family: helvetica; color:#FFFFFF;}
	header h1 {padding-top:2.3%;}
	#titre_header {height:100%; width:85%; text-align:center;}
	#infos {position:absolute; width:15%; height:100%; top:0%; right:0%; overflow-y:scroll; background-color:#000000; border-left:1px solid #FFFFFF; font-size:10px; font-family:courier new;}
 	#infos p {width:100%; border-bottom:1px solid #FFFFFF; background-color:#000000;}
	#infos p:hover {font-weight:bold;}

	/*MENU*/
	#menu {width:15%; height:100%; position:absolute; background-color:#000000;}
	#menu nav{position:absolute; top:80px; width:100%; border-top:1px solid #FFFFFF;}
	#menu nav ul li {display:block; border-bottom:1px solid #FFFFFF; width:100%; background-color:#000000; font-size:14px; height:40px; text-align:center;}
	#menu nav ul li:hover {background:#FFFFFF;}
	#menu nav ul li:hover a {color:#000000; font-weight:bold;}
	#menu nav ul li a {position:relative; top:25%; vertical-align:middle; color:#FFFFFF; font-family:helvetica; text-decoration:none;}
	#footer_menu {position:absolute; bottom:0px; width:100%; height:10%; background-color:#000000;}
	#phrase {position:relative; bottom:0%; width:100%; text-align:center; font-family: helvetica; color:#FFFFFF; font-size: 10px; font-weight:bold;}
	#img_fb {position:absolute; bottom:10%; max-height:55%; max-width:20%; margin-left:6%; border-radius: 50px;} #img_fb:hover {border:1px solid white}
	#img_tw {position:absolute; bottom:10%; max-height:55%; max-width:20%; margin-left:29%; border-radius: 50px;} #img_tw:hover {border:1px solid white}
	#img_lk {position:absolute; bottom:10%; max-height:55%; max-width:20%; margin-left:52%; border-radius: 50px;} #img_lk:hover {border:1px solid white}
	#img_ig {position:absolute; bottom:10%; max-height:55%; max-width:20%; margin-left:75%; border-radius: 50px;} #img_ig:hover {border:1px solid white}

	#grille {
		width:auto;
		margin-left:10%;
		margin-right:10%;
		display:flex;
		flex-flow:row wrap;
		justify-content:flex-start;
		align-items:flex-start;
		background-color:white;
		font-family:helvetica;
		text-align:center;
	}
}




/*MOBILE*/
/*@media screen and (max-width:999px)*/
@media screen and (max-width:999px)
{
	.contenu_mobile {width:100%; margin:auto; clear:both;}
	.contenu_bureau {display:none;}

	body {background:#FFFFFF;}
	header {position:fixed; z-index:1; top:0px; width:100%; height:100px; background:#000000; box-shadow:0 0 0.3em grey; font-size:45px; font-family: helvetica; color:#FFFFFF;}
	#titre_header {left:0%; width:85%; height:100%; display:flex; justify-content:center; align-items:center;}
	#infos {position:absolute; width:15%; height:100%; top:0%; right:0%; overflow-y:scroll; background-color:#000000; border-left:1px solid #FFFFFF; font-size:10px; font-family:courier new;}
 	#infos p {width:100%; border-bottom:1px solid #FFFFFF; background-color:#000000;}
	#infos p:hover {font-weight:bold;}

	/*MENU*/
	nav {position:absolute; top:140px; height:100%; width:100%; background-color:#000000;}
	nav ul li {display:block; border-bottom:1px solid #000000; width:100%; background-color:#FFFFFF; font-size:40px; height:100px; text-align:center;}
	nav ul li:hover {background:#000000; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF;}
	nav ul li:hover a {color:#FFFFFF; font-weight:bold;}
	nav ul li a {position:relative; top:25%; vertical-align:middle; color:#000000; font-family:helvetica; text-decoration:none;}

	footer {position:absolute; bottom:0px; width:100%; height:10%; background-color:#000000;}
	#phrase {position:relative; bottom:0%; width:100%; text-align:center; font-family: helvetica; color:#FFFFFF; font-size: 20px; font-weight:bold;}
	#img_fb {position:absolute; bottom:10%; max-height:55%; max-width:20%; margin-left:6%; border-radius: 50px;} #img_fb:hover {border:1px solid white}
	#img_tw {position:absolute; bottom:10%; max-height:55%; max-width:20%; margin-left:29%; border-radius: 50px;} #img_tw:hover {border:1px solid white}
	#img_lk {position:absolute; bottom:10%; max-height:55%; max-width:20%; margin-left:52%; border-radius: 50px;} #img_lk:hover {border:1px solid white}
	#img_ig {position:absolute; bottom:10%; max-height:55%; max-width:20%; margin-left:75%; border-radius: 50px;} #img_ig:hover {border:1px solid white}

	/*#grille {width:100%; font-family:helvetica; text-align:center; background-color:white; display:inline-grid; grid-template-rows:repeat(8, 100px);}
	input[type="range"] {margin:200px 200px;}
	input[type="range"] {width: 90%; height:200px; margin:auto; background: white; -webkit-appearance: none; border-radius: 50px; border:solid black; padding: 5px; transition: opacity 0.5s; position: relative;}
	input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; border-radius: 100px; background: white; border:solid grey; z-index: 1; width: 200px; position: relative; height: 200px;}
	input[type="range"]:before {content: "déverrouiller"; color: #8a8a8a; font-size: 50px; position: absolute; left: 40%; top: 40%; z-index: 1; font-size: 32px;}*/

}