:root {
  /* Backgrounds principaux */
  --first-background-color: rgba(247, 246, 242, 1);
  --seconde-background-color: rgba(250, 226, 226, 1);

  /* Composants */
  --background-color-cards: rgba(232, 187, 196, 1);
  --background-color-btn: rgba(224, 120, 143, 1);
  --background-nav: rgba(235, 223, 217, 1);
  --background-footer: rgba(205, 193, 187, 1);

  /* États / interactions */
  --hover: rgba(224, 120, 143, 1);

  /* Textes */
  --Texte-Color: rgba(66, 66, 66, 1);
  --titre-Color: rgba(46, 46, 46, 1);
  --li-color: rgba(252, 244, 242, 1);
  --logo-dark: #3a3a3a;
--logo-pink: #d93a7c;

  /* Icônes / accents */
  --icon-Color: rgba(223, 53, 127, 1);
}
.site-search {
  position: relative;
  max-width: 300px;
}

.site-search input {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border-radius: 12px;
  border: none;
  background: var(--background-nav);
  color: var(--Texte-Color);
  font-size: 14px;
}

.site-search i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--icon-Color);
  pointer-events: none;
}

.search-results {
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  background: var(--seconde-background-color);
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  display: none;
  z-index: 999;
}

.search-results a {
  display: block;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--Texte-Color);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.search-results a:hover {
  background: var(--background-color-btn);
  color: var(--li-color);
}