/* Page de Connexion */
body { background: url( '../images/bcg_home3.jpg' ) no-repeat; -webkit-background-size: cover; /* pour Chrome et Safari */ -moz-background-size: cover; /* pour Firefox */ -o-background-size: cover; /* pour Opera */ background-size: cover; display: flex; align-items: center; justify-content: center; }
body:after { content: ''; background-color: #000; opacity: .5; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset,
input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
html, body { font-family: 'Raleway', sans-serif; margin: 0; padding: 0; height: 100.1%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#typed-cursor { opacity: 1; font-weight: 100; -webkit-animation: blink .7s infinite; -moz-animation: blink .7s infinite; -ms-animation: blink .7s infinite; -o-animation: blink .7s infinite; animation: blink .7s infinite; }
@-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 0; }
 100% { opacity: 1; }
}
@-webkit-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 0; }
 100% { opacity: 1; }
}
@-moz-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 0; }
 100% { opacity: 1; }
}
@-ms-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 0; }
 100% { opacity: 1; }
}
@-o-keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 0; }
 100% { opacity: 1; }
}
/* Formulaire */
#wrap { width: 200px; overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
.block__center { display: flex; align-items: center; justify-content: center; }
#connexion { max-width: 430px; padding: 20px; width: 100%; margin: 0 auto; color: #fff; text-align: center; border-radius: 4px; z-index: 1; line-height: 1.5;}
#connexion h1 { font-weight: normal; margin-bottom: 30px; }
#connexion h1 span { font-weight: bold; }
#connexion img { width: 135px; /*border-radius: 50%;
border: 3px solid rgb(255, 255, 255);*/ }
#formulaire span { font-size: 30px; display: block; float: left; text-shadow: 3px 3px 3px #000; }
#imagrond { width: 190px; float: left; text-align: right; margin-right: 10px; }
input[type="text"], input[type="password"] { display: block; border-color: transparent; border-bottom: 1px solid #fff; color: #fff; font-size: 23px; font-family: 'Lato', Helvetica, Arial, sans-serif; width: 300px; margin-bottom: 20px; height: 30px; margin-top: 2px; background: none; padding: 3px; box-shadow: none; }
input[type="text"]:focus, input[type="password"]:focus { outline-style: none; box-shadow: none; }
input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder { color: rgba( 255, 255, 255, 1 ); }
input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder {/* FF 4-18 */ color: rgba( 255, 255, 255, 1 ); }
input[type="text"]::-moz-placeholder, input[type="password"]::-moz-placeholder {/* FF 19+ */ color: rgba( 255, 255, 255, 1 ); }
input[type="text"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder {/* IE 10+ */ color: rgba( 255, 255, 255, 1 ); }
#modif { margin-top: 10px; border-top-left-radius: 4px 2px; border-top-right-radius: 4px 2px; }
/*#mdp::invalid{
  border-bottom: 1px solid red;
  outline: none;
}*/
input[type="submit"] { display: none; cursor: pointer; width: 100%; border: medium none transparent; background: rgba( 255, 255, 255, .8 ); font-size: 23px; /* width: 45px; */ padding: 5px 0; color: #000; margin-top: 2px; /* height: 40px; */ font-weight: bold; letter-spacing: 0; border-radius: 2px; }
/* Pop Up */
#fade {/*--Masque opaque noir de fond--*/ display: block; /*--masqué par défaut--*/ background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .5; z-index: 9999; }
.popup_block { display: block; /*--masqué par défaut--*/ background: #fff; padding: 20px; text-align: center; border: 20px solid #fff; float: left; font-size: 1.2em; position: fixed; top: 50%; left: 50%; z-index: 99999; -webkit-box-shadow: 0 0 20px #000; -moz-box-shadow: 0 0 20px #000; box-shadow: 0 0 20px #000; border-radius: 3px; }
img.btn_close { float: right; margin: -55px -55px 0 0; width: 40px; }
/*--Gérer la position fixed pour IE6--*/
*html #fade { position: absolute; }
*html .popup_block { position: absolute; }
#giveup { cursor: pointer; width: 100%; border: medium none transparent; font-size: 17px; width: 210px; background: none repeat scroll 0% 0% rgba( 40, 40, 40, 1 ); color: rgb( 255, 255, 255 ); height: 40px; font-weight: bold; letter-spacing: 1px; padding: 7px 15px; text-decoration: none; border-radius: 3px; }
@media all and (max-width: 768px) {
 input[type="submit"] { display: block; }
}
@media all and (max-width: 480px) {
 #connexion { width: 100% !important; }
 #imagrond { width: 100% !important; float: none !important; margin-right: 0 !important; text-align: center !important; }
 #formulaire { margin: 22px auto !important; overflow: hidden !important; width: 235px !important; float: none !important; }
 input[type="submit"]:active { transform: translateY( 2px ); }
 input[type="submit"]:hover { background: rgba( 255, 255, 255, 1 ); }
 @media screen and (max-width:414px) {
 body { background: url( '../images/bcg-mobile.gif' ) no-repeat; -webkit-background-size: cover; /* pour Chrome et Safari */ -moz-background-size: cover; /* pour Firefox */ -o-background-size: cover; /* pour Opera */ background-size: cover; }
  body:hover { background: url( '../images/bcg-mobile.gif' ) no-repeat; -webkit-background-size: cover; /* pour Chrome et Safari */ -moz-background-size: cover; /* pour Firefox */ -o-background-size: cover; /* pour Opera */ background-size: cover; }/*#connexion  {margin-top: -170px !important;*/
  .popup_block { width: 260px !important; }
 }
}