* {font-family: "Montserrat", sans-serif;}
/* ajout */
.modal {
  background-color: var(--color-blue-medium-opacity-3);
  transition: opacity 0.3s;
  position: fixed;
  top: -80px; /* 0 */
  left: 0;
  right: 0;
  bottom: 0;
  width: 500vh; /* 100% */
  height: 500vh; /* 100% */
  z-index: 20; /* 10 */
  opacity: 0;
}
.is-visible {
  opacity: 1;
  transition: all 0.3s ease-in;
}
/* fin ajout */
#main_search_element {
  display: flex;
  align-items: center;
  justify-content: center;
}
#main_search_element #search_icon_circle {
  width: 100px;
  position: absolute;
  top: -20px; /* ajout -17px */ /* -25px */
  right: -55px; /* -40px */
  border-radius: 100px / 100px;
  transition: all 0.3s ease-in;
}
#main_search_element.expand #search_icon_circle {
  width: 500px;
  border-radius: 30px;
  right: 15px; /* ajout -40px / 0 */
  z-index: 20;
}
#main_search_element #search_icon_circle #search_icon_background {
  width: 40px; /* 50px */
  height: 40px; /* 50px */
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px / 100px;
  cursor: pointer;
  transition: all 0.3s ease-in;
}
#main_search_element #search_icon_circle:hover #search_icon_background {
  /* box-shadow: 0 0 20px 6px rgba(0,46,59,0.05);
  -webkit-box-shadow: 0 0 20px 6px rgba(0,46,59,0.05);
  -moz-box-shadow: 0 0 20px 6px rgba(0,46,59,0.05); */
  box-shadow: 0 0 25px rgba(0,46,59,.06);
  -webkit-box-shadow: 0 0 25px rgba(0,46,59,.06);
  -moz-box-shadow: 0 0 25px rgba(0,46,59,.06);
}
#main_search_element.expand #search_icon_circle #search_icon_background {
  width: 460px;
  border-radius: 7px; /* 50px */
  padding: 0 25px;

  /* box-shadow: 0 9px 10px rgba(0,46,59,.02);
  -webkit-box-shadow: 0 9px 10px rgba(0,46,59,.02);
  -moz-box-shadow: 0 9px 10px rgba(0,46,59,.02); */

  /* ajout */
  /* border: 1px solid var(--color-blue-medium-opacity-3); /* var(--color-blue-dark-opacity-2) */
  background-color: var( --color-white);
  /* fin ajout */
}
#main_search_element #search_icon_circle #search_icon_background .feather-search {
  height: 18px; /* 20px */
  width: 18px; /* 20px */
  position: relative;
  color: var(--color-blue-dark); /* décommté le 12/08/21 */
  opacity: 0.9;
  /* padding: .5rem; */ /* 1em */
}
#main_search_element.expand #search_icon_circle #search_icon_background .feather-search {
  height: 18px; /* ajout */ /* 20px */
  width: 18px; /* ajout */ /* 20px */
  padding: 0;
}
#main_search_element.expand #search_icon_circle #search_icon_background .feather-search {
  /*color: var(--color-blue-dark); */
  opacity: 0.9;
}
#main_search_element #search_icon_circle #search_icon_background .feather-x {
  display: none;
}
#main_search_element.expand #search_icon_circle #search_icon_background .feather-x {
  height: 14px;
  width: 14px;
  display: block;
  /* color: var(--color-blue-dark-opacity-2); */
  opacity: 0.5;
  transition: all 0.3s;
  transform: scale(1);
}
#main_search_element.expand #search_icon_circle #search_icon_background .feather-x:hover {
  /* color: var(--color-blue-dark); */
  opacity: 0.9;
  transition: all 0.3s ease-in;
  transform: scale(1.2);
}
#main_search_element #search_icon_circle #search_icon_background input {
  width: 0;
  background-color: transparent;
  color: var(--color-blue-dark);
  opacity: 0;
  font-size: .875em;
  font-weight: 500;
  transition: all 0.3s ease-in;
  border: none;
  outline: none;
  padding: 0;
}
#main_search_element.expand #search_icon_circle #search_icon_background input {
  width: 420px;
  opacity: 1;
  padding-left: 10px;
  outline: none;
  border: none;
}
::placeholder{
  color: var(--color-blue-dark-opacity);
}

/* After Tablet styles */
@media (max-width: 1300px) and (min-width: 990px) {
  #main_search_element #search_icon_circle {
    top: -20px; /* ajout -12px / -20px */
    right: -55px;
  }
  #main_search_element.expand #search_icon_circle {
    right: 20px; /* -30px */
  }
  #main_search_element #search_icon_circle #search_icon_background { /* re-ajout */
    height: 40px; /* 40px */
    width: 40px; /* 40px */
  }
  #main_search_element #search_icon_circle #search_icon_background .feather-search {
    height: 16px; /* 20px */
    width: 16px; /* 20px */
    padding: 0; /* ajout */
  }
  #main_search_element.expand #search_icon_circle #search_icon_background .feather-search {
    height: 15px; /* ajout 20px */
    width: 15px; /* ajout 20px */
  }
}

/* Tablet styles */
@media (max-width: 990px) and (min-width: 767px) { /* à la base = max-width: 1150px / en suite max-width: 1300px */
  /* ajout */
  .modal {
    background-color: inherit;
    transition: none;
    position: inherit;
    width: inherit;
    height: inherit;
    z-index: inherit;
    opacity: inherit;
  }
  .is-visible {
    opacity: inherit;
    transition: none;
  }
  /* fin ajout */
  #main_search_element {
    justify-content: flex-start;
    width: 100%; /* ajout */
  }
  #main_search_element #search_icon_circle {
    position: initial;
    display: flex; /* ajout */
    width: 100%; /* ajout */
  }
  /* #main_search_element #search_icon_circle #search_icon_background {
    height: 40px;
    width: 40px;
  } */
  #main_search_element.expand #search_icon_circle #search_icon_background {
    height: 50px;
    border: 1px solid rgba(3,88,103,0.1);
  }
  #main_search_element.expand #search_icon_circle,
  #main_search_element.expand #search_icon_circle #search_icon_background,
  #main_search_element.expand #search_icon_circle #search_icon_background input {
    width: 100%;
  }
  #main_search_element #search_icon_circle #search_icon_background .feather-search {
    height: 20px; /* 20px */
    width: 20px; /* 20px */
    padding: 0; /* ajout */
  }
  #main_search_element.expand #search_icon_circle #search_icon_background .feather-search {
    height: 20px; /* ajout */
    width: 20px; /* ajout */
  }
  #main_search_element.expand #search_icon_circle #search_icon_background .feather-x {
    display: none;
  }
}
/* Mobile tiny styles */
@media (max-width: 300px) {
  #main_search_element #search_icon_circle #search_icon_background input {
    font-size: .75em;
  }
}
/* Mobile styles */
@media (max-width: 767px) {
  /* ajout */
  .modal {
    background-color: inherit;
    transition: none;
    position: inherit;
    width: inherit;
    height: inherit;
    z-index: inherit;
    opacity: inherit;
  }
  .is-visible {
    opacity: inherit;
    transition: none;
  }
  /* fin ajout */
  #main_search_element {
    justify-content: flex-start;
    width: 100%; /* ajout */
  }
  #main_search_element #search_icon_circle {
    position: initial;
    display: flex; /* ajout */
    width: 100%; /* ajout */
  }
  #main_search_element #search_icon_circle #search_icon_background {
    height: 40px;
    width: 40px;
  }
  #main_search_element.expand #search_icon_circle #search_icon_background {
    height: 50px;
    border: 1px solid rgba(3,88,103,0.1);
  }
  #main_search_element.expand #search_icon_circle,
  #main_search_element.expand #search_icon_circle #search_icon_background,
  #main_search_element.expand #search_icon_circle #search_icon_background input {
    width: 100%;
  }
  #main_search_element #search_icon_circle #search_icon_background .feather-search {
    height: 20px; /* 20px */
    width: 20px; /* 20px */
    padding: 0; /* ajout */
  }
  #main_search_element.expand #search_icon_circle #search_icon_background .feather-search {
    height: 20px; /* ajout */
    width: 20px; /* ajout */
  }
  #main_search_element.expand #search_icon_circle #search_icon_background .feather-x {
    display: none;
  }
}
/* essaie tablette ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape) {
  .form-searchbar {
    max-width: 100%;
  }
  /* ajout */
  .modal {
    background-color: inherit;
    transition: none;
    position: inherit;
    width: inherit;
    height: inherit;
    z-index: inherit;
    opacity: inherit;
  }
  .is-visible {
    opacity: inherit;
    transition: none;
  }
  /* fin ajout */
  #main_search_element {
    justify-content: flex-start;
    width: 100%; /* ajout */
  }
  #main_search_element #search_icon_circle {
    position: initial;
    display: flex; /* ajout */
    width: 100%; /* ajout */
  }
  /* #main_search_element #search_icon_circle #search_icon_background {
    height: 40px;
    width: 40px;
  } */
  #main_search_element.expand #search_icon_circle #search_icon_background {
    height: 50px;
    border: 1px solid rgba(3,88,103,0.1);
  }
  #main_search_element.expand #search_icon_circle,
  #main_search_element.expand #search_icon_circle #search_icon_background,
  #main_search_element.expand #search_icon_circle #search_icon_background input {
    width: 100%;
  }
  #main_search_element #search_icon_circle #search_icon_background .feather-search {
    height: 20px; /* 20px */
    width: 20px; /* 20px */
    padding: 0; /* ajout */
  }
  #main_search_element.expand #search_icon_circle #search_icon_background .feather-search {
    height: 20px; /* ajout */
    width: 20px; /* ajout */
  }
  #main_search_element.expand #search_icon_circle #search_icon_background .feather-x {
    display: none;
  }
}
/* essaie tablette ipad */

/* essaie tablette ipadPro landscape and portrait */ /*
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) {
  .form-searchbar {
    max-width: 100%;
  }
  /* ajout */ /*
  .modal {
    background-color: inherit;
    transition: none;
    position: inherit;
    width: inherit;
    height: inherit;
    z-index: inherit;
    opacity: inherit;
  }
  .is-visible {
    opacity: inherit;
    transition: none;
  }
  /* fin ajout */ /*
  #main_search_element {
    justify-content: flex-start;
    width: 100%; /* ajout */ /*
  }
  #main_search_element #search_icon_circle {
    position: initial;
    display: flex; /* ajout */ /*
    width: 100%; /* ajout */ /*
  }
  /* #main_search_element #search_icon_circle #search_icon_background {
    height: 40px;
    width: 40px;
  } */ /*
  #main_search_element.expand #search_icon_circle #search_icon_background {
    height: 50px;
    border: 1px solid rgba(3,88,103,0.1);
  }
  #main_search_element.expand #search_icon_circle,
  #main_search_element.expand #search_icon_circle #search_icon_background,
  #main_search_element.expand #search_icon_circle #search_icon_background input {
    width: 100%;
  }
  #main_search_element #search_icon_circle #search_icon_background .feather-search {
    height: 20px; /* 20px */ /*
    width: 20px; /* 20px */ /*
    padding: 0; /* ajout */ /*
  }
  #main_search_element.expand #search_icon_circle #search_icon_background .feather-search {
    height: 20px; /* ajout */ /*
    width: 20px; /* ajout */ /*
  }
  #main_search_element.expand #search_icon_circle #search_icon_background .feather-x {
    display: none;
  }
} */
/* essaie tablette ipadPro landscape and portrait */