/* A quiet champagne / sea-glass highlight, scoped to the directory search. */
@property --accomp-search-angle {
  syntax: "<angle>";
  initial-value: 35deg;
  inherits: false;
}

.accomp-search-row .search-field {
  min-width: 0;
  gap: 12px;
}

.accomp-search-row .accomp-search-input-wrap {
  position: relative;
  display: block;
  isolation: isolate;
  min-width: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(144, 113, 53, 0.08);
}

.accomp-search-input-wrap::before,
.accomp-search-input-wrap::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--accomp-search-angle),
    #d6c39b 0%,
    #f4e7c8 14%,
    #b8995f 25%,
    #d9e7e2 42%,
    #8fbdbb 54%,
    #e8ede7 68%,
    #c2a46b 84%,
    #d6c39b 100%
  );
  animation: accomp-search-light 12s linear infinite;
}

.accomp-search-input-wrap::after {
  inset: -4px;
  z-index: -2;
  filter: blur(10px);
  opacity: 0.38;
  transition: opacity 220ms ease;
}

.accomp-search-input-wrap .accomp-search-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 19px;
  width: 21px;
  height: 21px;
  transform: translateY(-50%);
  fill: none;
  stroke: #9b7a3e;
  stroke-width: 1.7;
  stroke-linecap: round;
  pointer-events: none;
}

main.light-content .accomp-search-input-wrap #accomp-search {
  position: relative;
  display: block;
  width: 100%;
  min-height: 60px;
  padding-left: 54px;
  border: 1px solid rgba(191, 163, 107, 0.32);
  border-radius: inherit;
  background: linear-gradient(110deg, #fffdf8, #fff 58%);
  box-shadow: inset 0 1px 0 #fff;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.accomp-search-input-wrap:hover::after {
  opacity: 0.55;
}

.accomp-search-input-wrap:focus-within::before,
.accomp-search-input-wrap:focus-within::after {
  animation-play-state: paused;
}

.accomp-search-input-wrap:focus-within::after {
  opacity: 0.28;
}

main.light-content .accomp-search-input-wrap #accomp-search:focus-visible {
  outline: 2px solid #9b7a3e;
  outline-offset: 3px;
  border-color: #b89b62;
  box-shadow: 0 0 0 5px rgba(217, 192, 140, 0.12);
}

@keyframes accomp-search-light {
  to { --accomp-search-angle: 395deg; }
}

@media (max-width: 600px) {
  .accomp-search-input-wrap .accomp-search-icon {
    left: 15px;
    width: 19px;
    height: 19px;
  }

  main.light-content .accomp-search-input-wrap #accomp-search {
    min-height: 58px;
    padding-left: 44px;
  }
}

/* Soft, generously spaced filter panels beneath the highlighted search. */
#trouver-rapidement .category-filter-panel,
#trouver-rapidement .quick-filter-panel {
  gap: 18px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(183, 204, 225, 0.4);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 0 0, rgba(205, 224, 237, 0.1), transparent 65%),
    linear-gradient(125deg, #3b5571, #304862 58%, #2c415b);
  color: #edf2f8;
  box-shadow: 0 10px 28px rgba(40, 62, 87, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

#trouver-rapidement .category-filter-panel {
  margin-top: 8px;
}

#trouver-rapidement .quick-filter-panel {
  margin-top: -4px;
}

#trouver-rapidement :is(.category-filter-panel, .quick-filter-panel) > p {
  margin: 0;
  color: #ead8b1;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.075em;
  line-height: 1.5;
  text-transform: uppercase;
}

#trouver-rapidement .category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#trouver-rapidement .filter-tags {
  gap: 10px;
}

#trouver-rapidement .category-filter-panel .category-tab,
#trouver-rapidement .quick-filter-panel .filter-tag {
  border: 1px solid rgba(220, 231, 243, 0.24);
  background: rgba(255, 255, 255, 0.055);
  color: #edf2f8;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: none;
  transform: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

#trouver-rapidement .category-filter-panel .category-tab {
  flex: 1 1 170px;
  min-width: 0;
  min-height: 66px;
  padding: 14px 18px;
  border-radius: 20px;
  text-wrap: balance;
}

#trouver-rapidement .quick-filter-panel .filter-tag {
  min-height: 44px;
  padding: 10px 17px;
  border-radius: 999px;
}

#trouver-rapidement .category-filter-panel .category-tab:hover,
#trouver-rapidement .quick-filter-panel .filter-tag:hover {
  border-color: rgba(230, 207, 160, 0.6);
  background: rgba(255, 255, 255, 0.095);
  color: #fffaf1;
}

#trouver-rapidement .category-filter-panel .category-tab.is-active,
#trouver-rapidement .quick-filter-panel .filter-tag.is-active {
  border-color: rgba(232, 206, 151, 0.75);
  background: linear-gradient(135deg, rgba(227, 203, 155, 0.24), rgba(227, 203, 155, 0.13));
  color: #fff0cf;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(244, 229, 195, 0.14);
}

#trouver-rapidement .category-filter-panel .category-tab:focus-visible,
#trouver-rapidement .quick-filter-panel .filter-tag:focus-visible {
  outline: 2px solid #e4c98f;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .accomp-search-input-wrap::before,
  .accomp-search-input-wrap::after {
    animation: none;
    transition: none;
  }

  main.light-content .accomp-search-input-wrap #accomp-search {
    transition: none;
  }

  #trouver-rapidement .category-filter-panel .category-tab,
  #trouver-rapidement .quick-filter-panel .filter-tag {
    transition: none;
  }
}

@media (forced-colors: active) {
  .accomp-search-input-wrap::before,
  .accomp-search-input-wrap::after {
    display: none;
  }

  .accomp-search-input-wrap .accomp-search-icon {
    stroke: CanvasText;
  }
}