* {
  			font-family : 'poppins', sans-serif;
  			margin : 0; 
  			padding : 0;
  			box-sizing : border-box;
		}

  		body {
			display : flex ;
			justify-content : center ;
			align-items : center;
			height : 100vh;
			background : #f8f9fa;
			background-size: cover;
		}

		body #FormConnexion{
			display: grid;
			box-shadow: /*OX*/0px /*OY*/0px /*Epaisseur du brouillard*/5px /*Couleur du brouillard*/rgb(0,0,0);
			border-radius: 8px;
			justify-content: center;
			align-items: center;
			color: white;
			height: 300px;
			background: #007bff;
		}

		@media screen and (max-width: 400px){
			body #FormConnexion{
		    	width: 300px;
			}
		}

		@media screen and (min-width: 401px){
			body #FormConnexion{
		    	width: 400px;
			}
		}

		body #FormConnexion label{
			font-weight: bold;
		}

		body #FormConnexion input{
			border: none;
			border-radius: 10px;
			outline: none;
		}

		body #FormConnexion p{
			border: 1px solid red;
			background: red;
			height: 45px;
			display: flex;
			justify-content: center;
			padding: 4px;
			align-items: center;
			color: white;
			text-align: center;
			width: 300px;
		}

		@media screen and (max-width : 401px){
			body #FormConnexion p{
		    	max-width: 280px;
			}
		}

		body #FormConnexion #BoxBtnConnexion{
			display: flex;
			justify-content: center;
		}

		body #FormConnexion input[type=text],
		body #FormConnexion input[type=password]{
			height: 30px;
			padding-left: 20px;
		}

		@media screen and (min-width: 401px){
			body #FormConnexion input[type=text],
			body #FormConnexion input[type=password]{
				min-width: 280px;
			}
		}

		body #FormConnexion input[type=text]:focus,
		body #FormConnexion input[type=password]:focus{
			border-bottom: 4px solid gray;
		}

		body #FormConnexion input[type=submit]{
			font-size: large;
			background: #ddd;
			height: 50px;
			width: 150px;
			color: #007bff;
			font-weight: bolder;
		}

		body #FormConnexion input[type=submit]:hover{
			transition: 2s;
			border: 2px solid white;
			background: #007bff;
			color: white;
		}

		body #box_msg_confirmation{
			width: 100%;
			display: grid;
			height: 200px;
			justify-content: center;
			align-items: center;
			position: absolute;
			visibility: hidden;
		}

		body #box_msg_confirmation #msg_confirmation{
			border-left: 20px solid lightgreen;
			border-right: 20px solid white;
			border-top: 20px solid white;
			border-bottom: 20px solid white;
			height: 150px;
			width: 150px;
			border-radius: 50%;
			animation: chargement 3s ease infinite;
		}

		@keyframes chargement{
			0%{
		    	transform: rotate(0deg);
		    	box-shadow: 5px 0px 4px rgb(255, 255, 255);
			}
			50%{
		    	transform: rotate(180deg);
		    	box-shadow: 0px 5px 4px rgb(255, 255, 255);
			}
			100%{
		    	transform: rotate(360deg);
		    	box-shadow: 5px 0px 4px black;
			}
		}