#search-parent{
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    position: relative;
    left: 62%;
    top: 20px;
    row-gap: 5px;
}

#searchResults{
    display: none;
    width:100%;
    /* position: fixed; */
    left: 100px;
    /* top: 200px; */
    transition: all 2s;
    background-color: white;
    z-index: 1500;
    border-radius: 2px;
    max-height: 300px;
    /* height: 100px; */
    overflow: scroll;
    
}
#searchResults ul{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    padding: 10px;
}
#searchResults li a{
    color:#01257D;
    text-decoration: none;
    transition: all .3s;
}

#searchResults li a:hover{
    /* color: #00FFFF; */
    color: black;
}
/* Style de base pour le champ de recherche */
.search-container {
    background-color: white;
    border-radius: 5px;
    width: 100%;
    border: none;
  }
  
  #searchInput {
    width: 350px;
    padding: 10px 40px 10px 10px;
    border: none;
    border-radius: 5px;
    outline: none;
    /* background-color: #01257D;
    color:#00FFFF; */
  }
  
  /* Style pour le bouton de recherche */
  .search-btn {
    position: absolute;
    top: 50%;
    /* right: 10px; */
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    height: 30px;
  }
  
  .search-btn img {
    width: 30px;
    height: 30px;
  }
  





@media (max-width:1050px){
    #search-parent {
        position: relative;
        left: 55%;
    }
}

@media (max-width:900px){
    #search-parent {
        position: relative;
        left: 45%;
      }
}


@media (max-width:800px){
    #search-parent {
        position: relative;
        left: 40%;
        /* top: 20px;
        background-color: white;
        border-radius: 20px;*/
        width: 350px;
         
      }
      #searchInput {
        width: 300px;
        padding: 10px 40px 10px 10px; 
        outline: none;
      }
      
}

@media (max-width: 650px){
    
    #search-parent {
        position: relative;
        left: 42%;
        width: 300px;
         
      }
      #searchInput {
        width: 250px;
        outline: none;
      }
   

}

@media (max-width: 530px){
    
    #search-parent {
        left: 40%;
        width: 250px;
         
      }
      #searchInput {
        width: 200px;
        height: 30px;
      }

}


@media (max-width: 430px){
    #search-parent {
        left: 30%;
        width: 250px;
         
      }
      #searchInput {
        width: 200px;
        height: 30px;
      }
}


@media (max-width: 370px){
    #search-parent {
        position: relative;
        left: 39%;
        width: 210px;
         
      }
      #searchInput {
        width: 160px;
        height: 30px;
      }
      .search-btn img {
        width: 20px;
        height: 20px;
      }
}

@media (max-width: 360px){
  #search-parent {
      position: relative;
      left: 35%;
      width: 210px;
       
    }
}