/*div de la nav jusqu au footer*/
#gd{
    padding-bottom: 8%;
    padding-top:2%;
    background: rgb(64,99,70);
background: linear-gradient(90deg, rgba(64, 99, 70, 0.5) 0%, rgba(255,255,255,1) 50%, rgba(64, 99, 70, 0.5) 100%);
}
/*texte page déconnexion*/
/* .paragraphe{
    font-family: inter;
    font-size: 1em;
    color:#406346;
    margin-bottom:4%;
} */
h1{
    text-align: center;
    color: #406346;
    padding-bottom:2%;
    font-family: inter;
 
}
#div-form{
    display:flex;
    justify-content: center;
    align-items: center;
}
form{  
    
    width:40%;
    box-shadow: rgb(0 0 0 / 20%) 0px 60px 40px -7px;  
    background-color: #B9CCA6;
    border-radius: 8px;
    padding:3% 0 1% 0;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

label{
    color: #406346;
    font-weight: 600;
    text-align: center;
    font-family: inter;
}
input{
    width: 40%;
    padding: 15px;
    border:1px solid black;
    outline: none;
    border-radius: 4px;    
}


/*eye for password */

#eyeshow  {
    float: right;
    margin-left: 32%;
    margin-top: -32px;
    margin-bottom: 2.7%;
    position: relative;
    z-index: 2;
    font-size:1em;
  }
  #eyeshow:hover{
    text-shadow: none;
  }
  .toggle-password {
    cursor: pointer;
  }

  #eyehide  {
    float: right;
    margin-left: 32%;
    margin-top: -32px;
    margin-bottom: 2.7%;
    position: relative;
    z-index: 2;
    font-size:1em;
  }
  #eyehide:hover{
    text-shadow: none;
  }
button{
    color: white;
    background-color: #406346;
    margin-top:30px;
    font-size: 1em;
    border-radius:15px;
    /* font-weight: 600; */
    width:30%;
    padding:11px 5px 11px 5px;
    border: #406346;
    }
 button:hover{
    background-color:#D2B876;
    box-shadow: rgb(0, 0, 0) 0px 10px 20px -7px;
    border: #D2B876;
 }
 /*lien à mettre en place dans le futur*/
.mdp-oublier{
    font-size: 0.5em;
    color: #406346;
    font-family: inter;
    margin:25% 0 19% 0;
}
.mdp-oublier:hover{
    text-decoration: underline;
}
    #bouton-envoyer{
        text-align: center;
        width: 100%;
        margin-top:2%;
    }
    #btn{
        display: flex;
        justify-content: space-between;
        width:90%;
        margin-top:6.5%;
    }
    .texte-inscription{
        color: #406346;
        font-size: 0.65em;
        font-family: inter;
         text-align: center;   
         margin-bottom:1%;  
         margin-top:1%;
    }
    .texte-inscription:hover{
        text-decoration: underline;
    }



  /*Media Queries*/
  
  
  @media (max-width:900px) {   

  form{
    width:60%;
  }
  input{
    width: 60%;
    padding: 10px;
  
  }
  #btn{
    margin-top:13%;
  
  }
  button{
    width:40%;
  }
  #eyehide  {
    margin-top: -26px;
      margin-left: 52%;
      margin-bottom:2.4%;
    }
    #eyeshow  {
      margin-top: -26px;
      margin-left: 52%;
      margin-bottom:2.4%;
    } 
  }
 
 
  
  
  @media (max-width:665px){
    
  
   #gd{
    padding-bottom: 20%;
    padding-top:7%;
  } 
  h1{ 
    font-size: 1.5em;
    padding-bottom: 7%;
  }
  #eyehide  {
    margin-top: -26px;
      margin-left: 60%;
      margin-bottom:2.4%;
    }
    #eyeshow  {
      margin-top: -26px;
      margin-left: 60%;
      margin-bottom:2.4%;
    }
 
  form{
    width:90%;
    padding-top: 7%;
  }
  input{
    width: 70%;
    padding: 10px;
  }
  #btn{
    margin-top:18%;
  }
  button{
    width:40%;
  }
  .texte-footer-22{   
    display:none;
    padding:0;
    margin:0;      
  }
  .texte-footer-2{
  width:99%;
  margin-top:1%;    
  }
  }
  
  
  
  @media(max-width:391px){
    
    .background{
      padding-bottom:15%;
    }
  
     .phrase-connexion{
      font-size:0.7em;
     }
     #eyehide  {
  
        margin-bottom:3%;
      }
      #eyeshow  {
        
        margin-bottom:3%;
      }
  }
 
 
 /*hauteur*/
    
  
  @media (max-height:391px){
    #eyehide  {
    margin-top: -26px;
      margin-left: 60%;
      margin-bottom:2.4%;
    }
    #eyeshow  {
      margin-top: -26px;
      margin-left: 60%;
      margin-bottom:2.4%;
    }
  }
  
  
  @media(max-height:321px){
    
   
  }
  @media(max-height:310px){
     #eyehide  {
    margin-top: -26px;
      margin-left: 50%;
      margin-bottom:2.4%;
    }
    #eyeshow  {
      margin-top: -26px;
      margin-left: 50%;
      margin-bottom:2.4%;
    }
    
   
  }