.recherche-archives {
  width: 100%;
}

.recherche-archives *,
.recherche-archives *::before,
.recherche-archives *::after {
  box-sizing: border-box;
}

.recherche-archives__form {
  width: 100%;
}

.recherche-archives__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, var(--wp--preset--spacing--30, 1rem));
  width: 100%;
  max-width: var(--layout-content-size);
  border: solid 2px #efefef;
  border-radius: var(--border-radius);
  padding: 6px;
}

.recherche-archives__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--spacing-sm, var(--wp--preset--spacing--30, 1rem));
  border: 0;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body, 400);
  line-height: var(--line-height-body);
  outline: none;
}

.recherche-archives__input::placeholder {
  color: var(--color-text);
  opacity: 0.7;
}

.recherche-archives__input:focus {
  border-color: var(--color-secondary);
}

.recherche-archives__button {
  appearance: none;
  border: none;
  border-radius: var(--border-radius);
  background: var(--color-secondary);
  color: var(--color-black);
  min-height: 48px;
  padding: 0 var(--spacing-sm, var(--wp--preset--spacing--30, 1rem));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs, var(--wp--preset--spacing--20, 0.5rem));
  cursor: pointer;
  font-family: var(--font-family-button);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
  transition: all 0.4s ease;
}

.recherche-archives__button:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.recherche-archives__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
}

.recherche-archives__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.recherche-archives__label {
  white-space: nowrap;
}

.recherche-archives__button--icon-only {
  width: 48px;
  min-width: 48px;
  padding: 0;
}

@media (max-width: 640px) {
  .recherche-archives__button--icon-only {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .recherche-archives__inner {
    flex-wrap: nowrap;
    gap: var(--spacing-xs, var(--wp--preset--spacing--20, 0.5rem));
    padding: 5px;
  }

  .recherche-archives__input {
    min-height: 44px;
    padding: 0 var(--spacing-sm, var(--wp--preset--spacing--30, 1rem));
  }

  .recherche-archives__button {
    min-height: 44px;
    padding-right: var(--spacing-sm, var(--wp--preset--spacing--30, 1rem));
    padding-left: var(--spacing-sm, var(--wp--preset--spacing--30, 1rem));
  }

  .recherche-archives__label {
    display: none;
  }
}