.login-form{
position: fixed;
right:0; top:0;
width:100%; height: 100%;
max-width:500px;
background-color: var(--noir);
color: var(--blanc);
z-index:999;
transform: translateX(100%);
transition: all 0.5s ease-out;
padding:0 5%;
}
.login-form.opened{
transform: translateX(0);
}
.login-form .close{
width: 50px; height:50px;
border: 2px solid var(--blanc);
border-radius: 50%;
cursor: pointer;
background: url(//www.barreau-saintnazaire.fr/wp-content/themes/barreau-saint-nazaire/img/close.svg) no-repeat center / contain;
}
.login-form form label{
display: block;
padding:0.25rem 0;
font-size:0.85rem;
}
.login-form form{
display: flex;
flex-direction: column;
align-items: stretch;
gap:0.5rem;
text-align:left;
}
.login-form form input[type=text], .login-form form input[type=password]{
width:100%;
background-color: var(--grisplus);
border: none;
padding:0.25rem;
}
.login-form form input[type=submit]{
border: none;
border-radius: 0;
background: var(--rouge);
color: var(--blanc);
padding:0.5rem 1rem;
text-transform: uppercase;
}
.login-form a{
color: var(--blanc);
}
.login-form a:hover{
color: var(--grisplus);
} .connexion{
width:80%;
max-width: 400px;
margin: 3rem auto;
}
.connexion form label{
display: block;
padding: 0.25rem 0;
font-size:0.85rem;
}
.connexion form input[type=text], .connexion form input[type=password]{
width:100%;
padding:0.5rem;
}
.connexion form input[type=submit]{
background-color: var(--rouge);
color: var(--blanc);
padding: 0.5rem 1rem;
text-transform: uppercase;
border:1px solid var(--rouge);
margin:1rem 0;
}
.connexion form input[type=submit]:hover{
background-color: var(--grisfonce);
}
form select{
font-family: 'Open Sans', sans-serif;
}
.recherche input, .recherche select{
width: 100%;
border-radius:0;
padding:0.5rem;
border: 1px solid var(--grisplus);
}
.recherche input[type=submit]{
background-color: var(--rouge);
color: var(--blanc);
padding:0.5rem 1rem;
border:1px solid var(--rouge)
}
.recherche input[type=submit]:hover{
background-color: var(--grisfonce);
border-color: var(--grisfonce)
}