/* =============================================================================
   search.css — Overlay de recherche
   =============================================================================
   Activé au clic sur le bouton "🔍 Rechercher" du header.
   Le JS (search.js) gère l'ouverture/fermeture et le filtrage des tuiles.
   ============================================================================= */

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 22, 32, 0.85);
  backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 18vh;
  animation: search-fade-in 0.2s ease;
}

.search-overlay[hidden] { display: none; }

@keyframes search-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.search-box {
  width: min(720px, 90%);
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 28px;
  font-family: inherit;
  font-weight: 300;
  padding: 18px 60px 18px 0;
  outline: none;
  caret-color: var(--bg-tile-blue);
  letter-spacing: 0.5px;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
}

.search-input:focus {
  border-bottom-color: var(--bg-tile-blue);
}

.search-close {
  position: absolute;
  right: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 40px;
  cursor: pointer;
  line-height: 1;
  padding: 8px;
  font-family: inherit;
  transition: color 0.2s ease;
}

.search-close:hover {
  color: #fff;
}

.search-hint {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  letter-spacing: 0.5px;
}

.search-hint kbd {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* =============================================================================
   ZONE DE RÉSULTATS — grille auto-fill des tuiles clonées
   ============================================================================= */
.search-results {
  margin-top: 40px;
  width: min(1200px, 90%);
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tile-size));
  gap: var(--tile-gap);
  justify-content: center;
  min-height: 160px;
}

/* Les tuiles clonées dans les résultats : on les force toutes en 1x1
   et on ajoute une animation d'apparition */
.search-result-tile {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
  animation: search-tile-appear 0.35s cubic-bezier(.22, 1, .36, 1) backwards;
}

.search-result-tile:nth-child(1)  { animation-delay: 0.00s; }
.search-result-tile:nth-child(2)  { animation-delay: 0.04s; }
.search-result-tile:nth-child(3)  { animation-delay: 0.08s; }
.search-result-tile:nth-child(4)  { animation-delay: 0.12s; }
.search-result-tile:nth-child(5)  { animation-delay: 0.16s; }
.search-result-tile:nth-child(6)  { animation-delay: 0.20s; }
.search-result-tile:nth-child(7)  { animation-delay: 0.24s; }
.search-result-tile:nth-child(n+8) { animation-delay: 0.28s; }

@keyframes search-tile-appear {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Message "aucun résultat" */
.search-no-results {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  font-size: 16px;
  padding: 40px;
  font-style: italic;
}

@media (max-width: 640px) {
  .search-overlay { padding-top: 12vh; }
  .search-input   { font-size: 20px; padding-right: 50px; }
  .search-close   { font-size: 32px; }
}