/* -- BARRE de COMMANDES  before-header -------------------------------------------------------------- */

#wpm-before-header {
	/*position: fixed;*/
	min-height:35px;
	position:relative; top:0; left:0; z-index:2000;
	width:100%; padding:3px 20px;
	background: var(--color-contrast); color: var(--color-base);
	text-align:center;
	border-bottom:var(--color-primary) 2px solid; 
}
#wpm-before-header .container {width:100%; margin:0 auto;}
#wpm-before-header .commande {
	padding: 3px 5px 2px 5px; margin:0 2px ;
	border-right: #dedede 1px solid; border-bottom: #dedede 1px solid;  
	text-align:center;
}
#wpm-before {min-height:30px;}

/* -- login -------------------------------------------------------------- */

#identification {
	display:inline-block;
	background: var(--color-contrast); color: var(--color-base);	
	text-align:right; 
	width:100%;padding:3px;	
	min-height:25px;
}
#identification .utilisateur {padding:3px; margin:5px;}
#identification .menu-item {background-color:var(--btn-bgcolor); color:var(--btn-color); border:var(--btn-border-color) 1px solid; padding:3px 5px 3px 5px ; margin:3px;}
#identification a {text-decoration:none;}
#identification a:hover, #identification a:active {color:var(--btn-hover-color);}

@media (max-width: 700px) {
	#identification .menu-item {display:inline; float:none;}
	#identification .menu-item a {border:0 ;}
	#identification .utilisateur {display:none;}
}

.button, .bouton {background:var(--btn-bgcolor); color:var(--btn-color); border:var(--btn-border-color) 0px solid; margin:1px; padding: 3px; text-align:center; text-transform: none; }

/* --- la popup de login ----------------------------------------------------- */
	
.popup, .interactive {
    /*position: fixed;*/
	position:fixed;z-index:2001;top:140px; left:calc(50% - 200px);
	display:none;
	background:var(--color-contrast);color:var(--color-base);border:var(--color-primary) 2px solid;
	border-radius:12px; box-shadow: 5px 5px 5px #555; -webkit-border-radius:10px; 
	width:400px; height:500px;padding:10px;	
	text-align:center; 
	font-weight:600;
}

.popup .esc, .interactive .esc {
    position:absolute;top:5px; right:5px; width:15px; height:16px; z-index:2002;
    border:var(--color-secondary) 0px solid; background-color: var(--color-contrast); color:var(--color-primary);
	font-family: Arial; font-size: 14px; text-align:center;
}

.popup .alerte, .interactive .alerte { font-family: Arial Narrow ; font-size:1rem; color:red; 
 /*padding:5px; border-top:1px solid var(--color-primary); border-bottom:1px solid var(--color-primary); */
 }

.loginform { display:inline-block; position:relative; width:100%;}
.loginform .oeil {position:absolute; z-index:10000; top:78px; right:85px;}

.loginform .button a, .button a  {color:var(--btn-color);}

.loginform input, .loginform .input {border:var(--color-primary) 1px solid; background-color: var(--color-contrast); color:var(--color-main);}

.loginform input[type="submit"], .loginform .button {
	width:auto; padding: 0.84375em 0.875em 0.78125em; margin:1px auto;
    background-color:var(--btn-bgcolor); color: var(--btn-color); border-color: var(--btn-border-color); border-radius:5px;
	font-weight:700; text-transform: none; letter-spacing: 0.046875em; line-height: 1;	
}


input::placeholder {
  color:var(--gris);
  font-style:italic;
}