.search-page {
  background:#06112b;
  color:#f8f3f6
}

.search-main {
  min-height:calc(100vh - 180px);
  padding:150px max(4%,24px) 70px;
  background:radial-gradient(circle at 75% 10%,#6e1f694d,transparent 36%),#06112b
}

.search-kicker {
  margin:0;
  color:#ff72b5;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase
}

.search-main h1 {
  margin:10px 0 30px;
  font:700 clamp(2.8rem,6vw,5.5rem)/1 "Playfair Display",Georgia,serif
}

.search-main h1 em {
  display:block;
  color:#ff65ad;
  font-weight:500
}

.search-form {
  display:grid;
  gap:10px;
  width:min(850px,100%)
}

.search-form label {
  color:#efc774
}

.search-form>div {
  display:flex;
  gap:10px
}

.search-form input {
  flex:1;
  min-width:0;
  padding:16px 20px;
  border:1px solid #b55b91;
  border-radius:999px;
  background:#101a3d;
  color:#fff;
  font:inherit
}

.search-form button {
  padding:14px 24px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#ed3e8d,#8e4ff0);
  color:#fff;
  font-weight:700;
  cursor:pointer
}

.search-status {
  margin:32px 0 18px;
  color:#efc774
}

.search-results {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}

.search-result {
  padding:24px;
  border:1px solid #dc8bbb57;
  border-radius:20px;
  background:linear-gradient(145deg,#212b55f5,#191440f5);
  box-shadow:0 14px 35px #0004
}

.search-result small {
  color:#ff82be;
  text-transform:uppercase;
  letter-spacing:.1em
}

.search-result h2 {
  margin:10px 0;
  font:700 1.45rem/1.25 "Playfair Display",Georgia,serif
}

.search-result p {
  color:#dfe3ef;
  line-height:1.55
}

.search-result a {
  color:#efc774;
  font-weight:700
}

.search-empty {
  grid-column:1/-1;
  padding:35px;
  border:1px dashed #b55b91;
  border-radius:18px;
  text-align:center
}

@media(max-width:900px) {
  .search-results {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}

@media(max-width:600px) {
  .search-main {
    padding:145px 18px 50px
  }

  .search-main h1 {
    font-size:2.7rem
  }

  .search-form>div {
    align-items:stretch
  }

  .search-form button {
    padding:12px 16px
  }

  .search-results {
    grid-template-columns:1fr
  }

  .search-result {
    padding:20px
  }

}

/* Sur les petits écrans, aucun élément du formulaire ne peut déborder. */ @media (max-width: 600px) {
  .search-main {
    padding-top: calc(67px + var(--mobile-hero-text-offset, 80px));
  }

  .search-form, .search-form > div, .search-form input, .search-form button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .search-form > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .search-form button {
    min-height: 52px;
  }

}