html
{
	background: url(images/bg.png) center center;
	background-attachment: fixed; /* Le fond restera fixe */
	background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
	text-align: center;
	margin: auto; /* Pour centrer notre page */
    height: 100%;
	
}

body {
   margin:auto;
}

#en_tete
{
	/*display: flex;*/
	justify-content: center;
	flex-direction: column;
}

.element
{
    margin: auto;
}

.menu
{
	margin: auto;
	font-size: xx-large;
}

.left
{
	float: left;
}

.menu_deroulant
{
	margin: 0;
	padding: 0;
	z-index: 1;
	position: absolute;
}

.menu_deroulant .titre
{
	margin: 0px;
	display: inline-block;
	float: left;
	position: absolute;
	padding: 10px 20px;
	transition: 0.5s;
}

.menu_deroulant .titre a
{
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	font-size:35px;
}

.menu_deroulant .titre:hover
{
	background-color: #2980b9;
}

.menu_deroulant .sous_menu
{
	display: block;
	position: absolute;
	visibility: hidden;
	left: 0;
	transform: scaleY(0);
	transform-origin: 50% 0;
	transition:transform 1s ease;
	background-color: #fff;
	box-shadow: 0 2px 3px rgba(34,36,38,.15);
	border: 1px solid rgba(34,36,38,.15);
	border-radius: 0 0 5px 5px;
}

.menu_deroulant .titre:hover .sous_menu
{
	visibility: visible;
	height: auto;
	transform: scaleY(1);
}

.menu_deroulant .sous_menu li
{
	padding: 0;
	display: inline-block;
	color: #000;
	float: left;
	width: 250px;
	margin-left: -45px;
	padding: 5px;
	transition: 0,2s;
	text-align:left;
}

.sous_menu li:hover 
{
	background-color: #2980b9;
}

.menu_deroulant .sous_menu li a
{
	text-transform: none;
	color : #242424;
	padding: 0 0 0 5px;
	font-weight: normal;
	font-size: 25px;
}

.menu_deroulant .sous_menu li:hover
{
	background-color: #f9f9f9;
	border-left: 3px solid #3498db;
}

.message
{
	display: center;
	font-size: x-large;
}

#picture
{
	display: flex;
	display_align:right;
	/*float:right;
	margin-right: 1%;
	width: 50px;*/
}

img
{
	margin: auto;
	text-align: center;
	text-decoration: none;
	border:0px;
	cursor: pointer;
	width: 100px;
	height: auto;
}

.authentification
{
    display: flex;
	justify-content: center;
}

.formulaire
{
	height: 25px;
}


.icone
{
	margin: auto;
	text-align: center;
	text-decoration: none;
	border:0px;
	cursor: pointer;
	width: 30px;
	height: auto;
}


li,lu
{
	/*list-style-type: none;
	list-style-position: none;
	list-style-image: none;
	list-style: none;*/
}

.tableauphp
{
	width: 150px;
}

.container
{
	/*width: 150px;*/
}

.Graphique
{
	position:relative;
	z-index:10;
}

#alarm
{
	color: red; /* Le texte sera écrit en rouge */
	font-size: 65px;
}

.rouge
{
	color: FireBrick; /* Le texte sera écrit en rouge */
	font-weight : bold;
}

.blanc
{
	color: white;
}

.encadrement
{
	border: 1px solid #c1c1c1;
	padding: 10px;
	margin-bottom: 10px;
	background-color: SteelBlue;
	width: 200px;
}

/*------------------------------------------------------------------------------------------------------------ Lien --------------------------------------------------------------------------------------------------------------*/

a
{
	text-decoration: none;
	color: maroon;
}


a:hover /* Quand le visiteur pointe sur le lien */
{
	color: green; /* Le lien sera écrit en vert quand on pointera dessus */
}


a:active /* Quand le visiteur clique sur le lien */
{
	color: green; /* Le lien sera écrit en vert quand on cliquera dessus */
}


a:focus /* Quand le visiteur sélectionne le lien */
{
	color: green; /* Le lien sera écrit en vert quand on cliquera dessus */
}

/*------------------------------------------------------------------------------------------------------------ Titre --------------------------------------------------------------------------------------------------------------*/

h2
{
	vertical-align: middle;
}


/*---------------------------------------------------------------------------------------------------------- Tableau ------------------------------------------------------------------------------------------------------------*/

table
{
	margin: auto; /* Centre le tableau */
	border: 4px outset rgb(180,220,255);
	width: 350px;/* normalement 450px*/
}

td,th
{
	text-align: center;
	font-size: 25px;/* 30 px normalement*/
	vertical-align: middle;
	font-weight : bold;
}


@media all and (max-device-width: 480px)
{
	#en_tete
	{
		font-size: 1.1em;
	}
	
	h2
	{
		vertical-align: middle;
	}

	h3
	{
		color: maroon;
		font-weight: bold;
	}

	
	.authentification
	{
		width: auto;
	}
	
}