.search-form {
  max-width: 400px;
  padding: 0;
  /*   border: 1px solid pink; */
}

.search-form .input-group {
  border: 1px solid var(--sna-orange-8) !important;
  overflow: hidden;
}

.search-form i {
  font-size: 24px;
  color: white !important;
}

.search-form input {
  background-color: transparent !important;
  /* caret-color: transparent; */
}

.search-form .btn {
  background-color: var(--sna-orange-8) !important;
  color: white
}

.search-form .btn:hover {
  filter: brightness(0.9);
}

.search-form input::placeholder {
  color: #aaa;
  /* Remplace cette couleur par celle que tu souhaites */
  font-size: 0.85rem;
}

header .search-form {
  max-width: 400px;

  /*   border: 1px solid pink; */
}

header .search-form .input-group {
  border: 1px solid var(--sna-orange-8) !important;
  overflow: hidden;
  position: relative;
  padding-left: 0;
  width: 52px;
}

header .search-form:hover .input-group {
  width: 300px;
  max-width: 100%;
  padding-left: 15px;
}

header .search-form input {
  background-color: transparent !important;
  opacity: 0;
  max-width: calc(100% - 55px);
}

header .search-form:hover input {
  opacity: 1;
}

header .search-form .btn {
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}