/***** GENERIQUE *****/
*, *:after, *::before { box-sizing:inherit; }
html { -webkit-box-sizing:border-box; box-sizing:border-box; padding: env(safe-area-inset);  }
body { height:100%; font-family:Arial, sans-serif; font-weight:normal; color:#000000; margin:0; padding:0; }

ul, ol, li, dl, dt, dd { padding:0; margin:0; list-style:none; }
form { margin:0px; }
input { -webkit-appearance: none; -webkit-border-radius: none;}

/* LOGIN */
#page-login { width:100%; height:100%; background:url("/images/bg/login.jpg") no-repeat center center fixed; background-size:cover;}
#page-login > body { min-width:100%;  min-height:100%; position:relative; color:#fff; }
#page-login > body > div { margin:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; }
#page-login > body > div > h1 { margin:0 0 20px 0; font-size:47px; }
#page-login > body > div > h2 { margin:0 0 60px 0; font-size:22px; font-weight:normal; }
#page-login > body > div > form { width:420px; margin:0 auto; }
#page-login > body > div > form ul > li:first-child { margin-bottom: 30px; }
#page-login > body > div > form ul > li:last-child { margin-top:60px; }
#page-login > body > div > form input{ width:100%; height:62px; line-height:62px; border:none; border-radius:10px; box-shadow: 0px -5px 40px 0px rgba(8, 16, 120, 0.4);  }
#page-login > body > div > form input.input {padding:0 20px 0 80px; font-size:19px; color:#081078; }
#page-login > body > div > form input#login { background:url("/images/icons/login-login.svg") #e7efff no-repeat 27px 19px ; }
#page-login > body > div > form input#login:focus { background:url("/images/icons/login-login.svg") #fff no-repeat 27px 19px ; }
#page-login > body > div > form input#pwd { background:url("/images/icons/login-password.svg") #e7efff no-repeat 29px 18px ; }
#page-login > body > div > form input#pwd:focus { background:url("/images/icons/login-password.svg") #fff no-repeat 29px 18px ; }
#page-login > body > div > form input.input:focus { outline:none; box-shadow: 0px -5px 40px 0px rgba(8, 16, 120, 0.8);}
#page-login > body > div > form input.input::placeholder { color:#081078; opacity: 1;  }
#page-login > body > div > form input.input::-ms-input-placeholder { color:#081078; }
#page-login > body > div > form input.button { padding:0 20px; background-color:#081078; color:#fff; font-size:20px; cursor: pointer; }
#page-login > body > div > form input.button:hover { background-color:#020753; }
#page-login > body > div > form .erreur { padding:21px 25px; margin-bottom:30px; color:#e62828; border:1px solid #e62828; border-radius:10px; background-color:#fff;  }
#page-login > body > div > form .copyright { margin-top:25px;  font-size:13px; }
#page-login > body > div > form .copyright a { color:#fff; }
#page-login > body > div > form .copyright a:hover { text-decoration:none; }

@media only screen and (min-width :0px) and (max-width:450px) {
	#page-login > body > div > form { width:310px; }
}


/* ERREUR */
#page-error { width:100%; height:100%; background-color:#f9f8f8; }
#page-error > body { min-width:100%;  min-height:100%; position:relative; color:#fff; }
#page-error > body > div { margin:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; }
#page-error > body > div > h1 { margin:40px 0 30px 0; font-size:47px; color:#4e4e58; } 
#page-error > body > div > p { color:#828282; font-size:20px; }
#page-error > body > div > p a { color:#828282; }
#page-error > body > div > p a:hover { text-decoration:none; }
#page-error > body > div .button { display:inline-block; width:90%; max-width:420px; margin-top:30px; line-height:62px; border-radius:10px; color:#fff; background-color:#4e4e58; font-size:20px; text-decoration:none; }
#page-error > body > div .button:hover { background-color:#27282d; }
#page-error > body > div > .copyright { margin-top:40px;  font-size:15px; color:#959595; }
#page-error > body > div > .copyright a { color:#959595; }
#page-error > body > div > .copyright a:hover { text-decoration:none; }

@media only screen and (min-width :0px) and (max-width:450px) {
	#page-error > body > div { width:95%; }
	#page-error > body > div > h1 { font-size:44px; }
	#page-error > body > div > p { font-size:18px; }
}