.search-overlay {
  position: fixed; inset: 0;
  background: rgba(10,18,36,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  visibility: hidden; opacity: 0;
  transform: none !important;
  transition: opacity .24s ease, visibility .24s ease;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(60px, 10vh, 120px);
  padding-left: 16px; padding-right: 16px;
}
.search-overlay.active { visibility: visible; opacity: 1; transform: none !important; }
.search-overlay.active .srch-panel { transform: translateY(0); opacity: 1; }

/* Reset des styles legacy de style.css */
.search-overlay .search-overlay__inner {
  width: auto; height: auto;
  background: transparent;
  display: block;
  align-items: unset; justify-content: unset;
  overflow-y: visible;
  transition: none;
}

/* ── Panel ── */
.srch-panel {
  width: 100%; max-width: 860px;
  max-height: calc(100dvh - 140px);
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid rgba(37,99,235,.22);
  box-shadow:
    0 0 0 5px rgba(37,99,235,.06),
    0 32px 80px rgba(10,18,36,.28),
    0 4px 16px rgba(10,18,36,.12);
  overflow-y: auto;
  transform: translateY(-14px); opacity: 0;
  transition: transform .24s cubic-bezier(.22,1,.36,1), opacity .24s ease;
}

/* ── Header ── */
.srch-head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f4ff 40%, #fff 100%);
  border-bottom: 1.5px solid #dbeafe;
  transition: border-color .2s;
}
.srch-head:focus-within { border-bottom-color: #93c5fd; }
/* Bouton de validation (loupe cliquable) : mêmes proportions et même dégradé que l'ancienne icône
   décorative, mais fonctionnel — clic = valide la recherche (voir includes/search-overlay.php). */
.srch-submit {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 0; background: transparent; padding: 4px;
  border-radius: 8px; cursor: pointer; transition: background .15s, transform .15s;
}
.srch-submit:hover { background: #dbeafe; transform: scale(1.05); }
.srch-submit i {
  font-size: 17px;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.srch-input {
  flex: 1; border: 0; outline: none;
  font-size: 1rem; font-weight: 500; color: #0f172a;
  background: transparent; line-height: 1.4;
}
.srch-input::placeholder { color: #637896; font-weight: 400; }
/* Tâche 46 (WCAG 1.4.11) : le champ n'avait aucun contour (bande dégradée seule, bordure du panneau à 1,2:1). Filet inférieur de 2 px, 3,02:1 sur
   le fond de la bande (#eff6ff), plus épais et plus foncé au focus (5,9:1) ; le remplissage vertical de 3 px compense le filet : la bande
   garde sa hauteur (le bouton de fermeture, 30 px, est l'élément le plus haut). */
.srch-input { padding: 3px 0; box-shadow: inset 0 -2px 0 #3c8dfa; }
.srch-input:focus { box-shadow: inset 0 -3px 0 #1d4ed8; }
.srch-close {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  background: #dbeafe; border: 0; border-radius: 8px;
  cursor: pointer; color: #2563eb;
  transition: background .15s, color .15s, transform .15s;
}
.srch-close:hover { background: #bfdbfe; color: #1d4ed8; transform: scale(1.08); }
.srch-close i { font-size: 11px; }

/* ── Aide (remplace l'ancien aperçu en direct + pied de page : plus de résultats à annoncer ni à compter,
   voir includes/search-overlay.php) ── */
.srch-hint {
  margin: 0; padding: 16px 18px 20px;
  text-align: center; font-size: .8rem; color: #64748b;
}
.srch-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #dbeafe; border-radius: 5px;
  padding: 1px 5px; font-size: .72rem; color: #1167f4;
  background: #eff6ff; font-family: inherit; line-height: 1.5;
}

@media (max-width: 575px) {
  .srch-panel { border-radius: 16px; max-height: calc(100dvh - 80px); }
  .srch-input { font-size: .95rem; }
  .search-overlay { padding-top: 40px; }
}
