html {
scrollbar-width: thin;
scrollbar-color: gray white;
}

html::-webkit-scrollbar {
width: 0.5rem;
border-radius: 20px;
background-color: white;
}

html::-webkit-scrollbar-thumb {
background-color: gray;
}

body{
margin: 0px;
padding: 0px;
background-color: #006800;
background-image: url('../imgconfig/map-image.png');
background-size: cover;
background-attachment: fixed;
background-position: center;
}

*:focus {
outline: none;
}

#spiner {
background-color: transparent;
position: fixed;
z-index: 9;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/****************************************************************/

.formulaire {
text-align: center;
margin: 0px 25% auto;
border-radius: 4px;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  nav {
  display: none;
  }

  .formulaire {
  margin: 0px 0% auto;
  }
}

.formulaire .close {
width: 100%;
text-align: center;
margin-top: 2px;
animation: close 1.5s;
}

.formulaire .close .avantlogo .fas {
font-size: 70px;
border: 2px double white;
padding: 4px;
color: white;
margin-top: 20px;
border-radius: 100%;
}

.formulaire .close .avantlogo li {
color: white;
list-style-type: none;
font-size: 17px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px black;
}

.formulaire .close a  {
text-decoration: none;
display: inline-block;
width: 100%;
margin-top: 20px;
}

.formulaire .close a span {
display: block;
padding: 3px;
}

.formulaire .close a span img {
width: 50%;
display: inline-block;
background-color: white;
border-radius: 4px;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .formulaire .close a span img {
  width: 70%;
  }
}

.close {
  -webkit-animation: close;
}

@-webkit-keyframes close {
  from {-webkit-transform: translateY(-220%)} to {transform: translateY(0%)}
}


.formulaire form {
margin-top: 30px;
}

.formulaire .extfil {
padding: 4px;
background-color: white;
margin: 10px;
border-radius: 4px;
}

.formulaire form fieldset {
margin: 10px;
border: 1px solid gray;
border-radius: 4px;
background-color: white;
text-align: left;
}

.formulaire form fieldset legend {
font-family:  sans-serif;
color: #555555;
font-size: 16px;
font-weight: bold;
}

.formulaire form fieldset input {
padding: 10px;
width: 90%;
border: none;
color: black;
font-size: 15px;
}

.formulaire form fieldset #cachepass {
padding: 5px;
border: 1px solid lightgray;
border-radius: 4px;
cursor: pointer;
}

.formulaire form fieldset .validationnote {
display: block;
font-size: 11px;
padding: 2%;
font-family: sans-serif;
width: 96%;
}

.formulaire form fieldset input:invalid ~ span {
background-color: ;
color: red;
}

.formulaire form fieldset input:valid ~ span {
background-color: ;
color: darkgreen;
}

.formulaire form .lesnotes .noteforgetpass {
font-family: sans-serif;
color: white;
list-style-type: none;
font-size: 15px;
text-align: right;
margin: 0px 20px auto;
}

.formulaire form .lesnotes .noteforgetpass a {
color: orange;
font-size: 15px;
text-decoration: none;
font-style: italic;
font-weight: bold;
}

.formulaire form .lesnotes .notevisiteur {
font-family: sans-serif;
list-style-type: none;
font-size: 13px;
margin: 8px 20px auto;
text-align: left;
color: white;
width: 90%;
}

.formulaire form .lesnotes .notevisiteur a {
color: gold;
font-style: italic;
font-weight: bold;
}

.formulaire form .lesnotes .notevisiteur a span {
font-size: 16px;
}

.formulaire form .btn {
margin-top: 30px;
width: 100%;
text-align: center;
}

.formulaire form .btn input {
width: 150px;
font-size: 20px;
border: 2px solid white;
background-color: transparent;
padding: 5px;
border-radius: 7px 0px 7px 0px;
margin: 3px;
display: inline-block;
color: white;
}

.formulaire form  .btn input:hover {
background-color: #0E539A;
color: white;
cursor: pointer;
transition: ease .5s;
}

.formulaire form .info {
margin-top: 30px;
}

.formulaire form  .info li {
color: lightgray;
font-family: sans-serif;
font-weight: bold;
list-style-type: none;
}

.formulaire form .info li a {
color: orange;
font-style: italic;
font-weight: bold;
}

#laremarque {
display: none;
}

#remarque {
display: none;
}