@media screen and (max-width: 800px){
	
	body{
	background-image: url(web_images/fond_tel.jpg);
	background-repeat: no-repeat;
	background-size: 120%
 }

	.att{
	position: absolute;
	top: 80%;
	left: 33%;
	width: 150px;
	height: 110px;
}

.titre{
	background-color: #0AB9BC;
	text-align: center;
	width: auto;
	height: auto;
	border: solid 5px #0AB9BC;
	font-family: comic-sans-ms;
}
.connexion{
	background-color: rgba(160,160,160,0.5);
	width: auto;
	height: auto;
	border: solid 20px rgba(160,160,160,0.3);
	text-align: center;
	font-size: 100%;
	
	position: absolute;
	left: 25%;
	top: 40%;
}
input[type=text],input[type=password]{
	border: solid 2px black;
	padding: 3px;
	border-radius: 7px;
	height: 15px;
	font-size: 90%;
}
#valide{
	background-color: #1E4EB5;
	color: black;
	height: 25px;
	width: 80px;
}

#valide:hover{
	background-color: #181AA0;
}

#message{
	color: red;
}
}


@media screen and (min-width: 800px) and (max-width: 1000px){
body{
	background-image: url(web_images/fond_tel.jpg);
	background-repeat: no-repeat;
	background-size: 120%
 }

.att{
	position: absolute;
	top: 40%;
	left: 10%;
	width: 230px;
	height: 190px;
}

.titre{
	background-color: #0AB9BC;
	text-align: center;
	width: auto;
	height: auto;
	border: solid 5px #0AB9BC;
	font-family: comic-sans-ms;
}
.connexion{
	background-color: rgba(160,160,160,0.5);
	width: auto;
	height: auto;
	border: solid 20px rgba(160,160,160,0.3);;
	text-align: center;
	font-size: 110%;
	
	position: absolute;
	left: 45%;
	top: 40%;
}
input[type=text],input[type=password]{
	border: solid 2px black;
	padding: 3px;
	border-radius: 7px;
	height: 15px;
	font-size: 90%;
}
#valide{
	background-color: #1E4EB5;
	color: black;
	height: 25px;
	width: 80px;
}

#valide:hover{
	background-color: #181AA0;
}
#message{
	color: red;
}
}


@media screen and (min-width: 1000px){
body{
	background-image: url(web_images/fond_index.jpg);
	background-repeat: no-repeat;
	background-size: 100%
}

.titre{
	background-color: #0AB9BC;
	text-align: center;
	width: auto;
	height: auto;
	border: solid 5px #0AB9BC;
	font-family: comic-sans-ms;
}

.connexion{
	background-color: rgba(160,160,160,0.5);
	width: auto;
	height: auto;
	border: solid 20px rgba(160,160,160,0.3);;
	text-align: center;
	font-size: 120%;
	
	position: absolute;
	left: 42%;
	top: 42%;
}

input[type=text],input[type=password],input[type=button]{
	border: solid 2px black;
	padding: 3px;
	border-radius: 7px;
	height: 25px;
	font-size: 110%;
}

input[type=text]:hover,input[type=password]:hover,input[type=button]:hover{
	background-color: gray;
}

#valide{
	background-color: #0AA4FC;
	border-radius: 7px;
	color: black;
	cursor: pointer;
	font-size: 15px;
	
	height: 40px;
	width: 110px;
}

#valide:hover{
	background-color: #181AA0;
}

.att{
	position: absolute;
	top: 40%;
	left: 15%;
	width: 320px;
	height: 240px;
	
	transform: scale(1);
	transition: transform 500ms;
}
.att:hover{
	transform: scale(1.15);
}

#message{
	color: red;
}

}