/* Eye Five 2026 — recherche du site (25/09/2026, maquette 47-moteur-recherche, présentation B
   « Bandeau » retenue par Maxime) : loupe de l'en-tête, panneau (assets/js/recherche.js) et page
   « tous les résultats » (search.php). */

/* ---- Loupe de l'en-tête -------------------------------------------------------------------- */

.entete__recherche {
  display: inline-grid; place-items: center; flex: none;
  width: 2.6rem; height: 2.6rem; margin-right: -0.4rem;
  color: var(--bordeaux); border-radius: 999px;
  transition: background-color 0.4s var(--courbe);
}
.entete__recherche svg, .recherche__icone {
  width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square;
}
.entete__recherche:hover, .entete__recherche:focus-visible, .entete__recherche[aria-expanded="true"] { background: var(--creme); }
html:not(.js) .entete__recherche { display: none; }

/* ---- Panneau --------------------------------------------------------------------------------- */

html.recherche-ouverte { overflow: hidden; }
/* Racine : .recherche-fenetre (la classe .recherche a longtemps désigné le filtre des revendeurs). */
.recherche-fenetre {
  position: fixed; inset: 0; z-index: 70;
  top: var(--wp-admin--admin-bar--height, 0px);
  display: flex; flex-direction: column;
  color: var(--charbon); font-family: var(--font-texte);
}
.recherche-fenetre[hidden] { display: none; }
:where(.recherche-fenetre) a:where(:not(.bouton)) { color: inherit; text-decoration: none; }
.recherche-fenetre mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.recherche-fenetre input[type="search"] { -webkit-appearance: none; appearance: none; border-radius: 0; }
.recherche-fenetre input::-webkit-search-cancel-button { display: none; }

.recherche__voile { position: absolute; inset: 0; background: rgba(25, 22, 24, 0.42); animation: recherche-fondu 0.4s ease both; }
@keyframes recherche-fondu { from { opacity: 0; } }

/* L'en-tête devient le champ : même hauteur, même logo à la même place. */
.recherche__barre { position: relative; flex: none; background: var(--blanc); border-bottom: var(--trait); }
.recherche__barre .conteneur { display: flex; align-items: center; gap: 2rem; min-height: 4.75rem; }
.recherche__barre .entete__logo { flex: none; }
.recherche__champ { position: relative; flex: 1; max-width: 46rem; margin-left: auto; animation: recherche-champ 0.6s var(--courbe) both; }
@keyframes recherche-champ { from { opacity: 0; transform: translateX(1.5rem); } }
.recherche__champ .recherche__icone { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--bordeaux); }
.recherche__input {
  width: 100%; font: inherit; font-size: var(--t-18); color: var(--charbon);
  padding: 0.7rem 4.5rem 0.7rem 2.1rem;
  background: transparent; border: 0; border-bottom: 1px solid var(--charbon); outline: none; caret-color: var(--bordeaux);
}
.recherche__input::placeholder { color: #8E878A; opacity: 1; }
.recherche__input:focus-visible { border-bottom-color: var(--bordeaux); box-shadow: 0 1px 0 var(--bordeaux); }
.recherche__touche { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 0.6875rem; letter-spacing: 0.06em; padding: 0.15rem 0.4rem; border: 1px solid currentColor; border-radius: 3px; opacity: 0.6; }
.recherche__fermer { flex: none; display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--t-12); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.5rem 0; }
.recherche__fermer svg { width: 0.9rem; height: 0.9rem; stroke: currentColor; stroke-width: 1.4; fill: none; }

.recherche__panneau {
  position: relative; display: grid; grid-template-columns: minmax(19rem, 31rem) minmax(0, 1fr);
  height: min(76vh, 44rem); background: var(--blanc); border-bottom: var(--trait);
  animation: recherche-rideau 0.55s var(--courbe) both;
}
@keyframes recherche-rideau { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Liste */
.recherche__liste { overflow: auto; overscroll-behavior: contain; padding: 1.25rem 0 2rem; border-right: 1px solid #E4E0D2; }
.recherche__groupe + .recherche__groupe { margin-top: 1.1rem; }
.recherche__etiquette { display: flex; justify-content: space-between; margin: 0; padding: 0.35rem var(--gouttiere) 0.45rem; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: #6E676A; }
.recherche__ligne { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 0.5rem var(--gouttiere); transition: background-color 0.25s ease; }
.recherche__ligne--texte { grid-template-columns: minmax(0, 1fr) auto; }
.recherche__ligne.est-actif { background: var(--creme); }
.recherche__ligne:focus-visible { outline-offset: -2px; }
.recherche__vignette { display: grid; place-items: center; width: 4.4rem; aspect-ratio: 16 / 10; background: #F1F1F1; overflow: hidden; }
.recherche__vignette img { width: 92%; height: auto; }
.recherche__vignette .recherche-signe { width: 100%; height: 2.75rem; color: var(--bordeaux); }
.recherche__nom { display: block; font-size: 1rem; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recherche__meta { display: block; margin-top: 0.15rem; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: #6E676A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recherche__prix { font-size: var(--t-14); white-space: nowrap; }
.recherche__fleche { font-size: var(--t-14); color: var(--bordeaux); opacity: 0; transition: opacity 0.25s ease; }
.recherche__ligne.est-actif .recherche__fleche { opacity: 1; }
.recherche__pied, .recherche__vide { padding: 1rem var(--gouttiere) 0; }
.recherche__vide { padding-top: 0; }
.recherche__vide .sur-titre { margin-top: 0.5rem; }
.recherche__etat { margin: 0 0 0.35rem; font-size: var(--t-12); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; }
.recherche__note { margin: 0 0 0.5rem; font-size: var(--t-14); color: #6E676A; }
.recherche__tous { display: inline-flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid currentColor; font-size: var(--t-12); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; }
.recherche__puces { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.recherche-puce { display: inline-block; font-size: var(--t-14); line-height: 1.3; padding: 0.45rem 0.95rem; border: 1px solid currentColor; border-radius: 999px; color: inherit; text-decoration: none; transition: background-color 0.35s var(--courbe), color 0.35s var(--courbe), border-color 0.35s var(--courbe); }
.recherche-puce:hover, .recherche-puce:focus-visible { background: var(--charbon); border-color: var(--charbon); color: var(--blanc); }

/* Signe d'un symbole (SVG noir du symbole en masque, teinté par la couleur du texte). */
.recherche-signe { flex: none; display: block; width: 2.6rem; height: 2.6rem; background: currentColor; -webkit-mask: var(--signe) center / contain no-repeat; mask: var(--signe) center / contain no-repeat; }

.recherche-nouveau { animation: recherche-entree 0.55s var(--courbe) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes recherche-entree { from { opacity: 0; transform: translateY(10px); } }

/* Aperçu */
.recherche__apercu { overflow: auto; display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 4vw, 4rem); }
.recherche__apercu:empty { display: none; }
.recherche__scene { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; max-height: 52%; background: linear-gradient(180deg, var(--gris-carte) 0%, var(--blanc) 50%, var(--gris-carte) 100%); overflow: hidden; }
.recherche__scene img { width: 84%; height: auto; filter: drop-shadow(0 16px 12px rgba(25, 22, 24, 0.12)); animation: recherche-apercu 0.6s var(--courbe) both; }
.recherche__scene .recherche-signe { width: 42%; height: 70%; color: var(--bordeaux); animation: recherche-apercu 0.6s var(--courbe) both; }
@keyframes recherche-apercu { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.recherche__titre { margin: 1.4rem 0 0.4rem; font-family: var(--font-titre); font-size: var(--t-36); line-height: 1; text-transform: uppercase; }
.recherche__sous { margin: 0; font-size: var(--t-12); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: #6E676A; }
.recherche__texte { max-width: 38rem; margin: 1rem 0 0; font-size: var(--t-14); }
.recherche__tablette { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }
.recherche__tablette > * { display: grid; place-items: center; width: 4.2rem; aspect-ratio: 16 / 10; background: #F1F1F1; border: 1px solid transparent; }
.recherche__tablette [aria-pressed="true"] { border-color: var(--charbon); }
.recherche__tablette img { width: 92%; }
.recherche__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: auto; padding-top: 1.5rem; }
.recherche__actions .bouton + .lien-fleche { margin-left: 0; }
.recherche__prix-grand { font-size: var(--t-24); }

@media (max-width: 899px) {
  .recherche__barre .entete__logo { display: none; }
  .recherche__barre .conteneur { gap: 1rem; }
  .recherche__champ { max-width: none; margin-left: 0; }
  .recherche__touche { display: none; }
  .recherche__input { padding-right: 0; }
  .recherche__panneau { grid-template-columns: 1fr; height: auto; flex: 1; min-height: 0; }
  .recherche__liste { border-right: 0; }
  .recherche__apercu { display: none; }
  .recherche__ligne:not(.recherche__ligne--texte) { grid-template-columns: 5.2rem minmax(0, 1fr) auto; }
  .recherche__vignette { width: 5.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .recherche-fenetre *, .recherche-fenetre { animation: none !important; transition: none !important; }
}

/* ---- Page « tous les résultats » (search.php) ---------------------------------------------- */

/* La requête en titre : plus petite que le titre d'une collection, coupée au besoin. */
.resultats__requete { font-size: clamp(2.25rem, 1rem + 4.2vw, 4.75rem); overflow-wrap: anywhere; }
.resultats__champ { display: flex; gap: 0.75rem; width: min(100%, 36rem); margin-top: 1.5rem; }
.resultats__champ input { flex: 1; min-width: 0; font: inherit; padding: 0.9rem 1rem; background: var(--blanc); color: var(--charbon); border: var(--trait); border-radius: 0; }
.resultats__champ .bouton { flex: none; }
.resultats__note { margin: 1rem 0 0; font-size: var(--t-14); color: #6E676A; }
.resultats__suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 3rem; }
.resultats__section { margin-top: clamp(3rem, 6vw, 5rem); }
.resultats__titre { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: var(--trait); font-size: var(--t-36); }
.resultats__titre small { font-family: var(--font-texte); font-size: var(--t-12); letter-spacing: 0.12em; }
.resultats__symboles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.resultats__symbole { display: flex; align-items: center; gap: 1rem; height: 100%; padding: 1.1rem 1.25rem; background: var(--panneau); text-decoration: none; }
.resultats__symbole .recherche-signe { width: 3.4rem; height: 3.4rem; color: var(--bordeaux); }
.resultats__symbole:hover .resultats__nom { text-decoration: underline; text-underline-offset: 0.16em; }
.resultats__nom { display: block; font-family: var(--font-titre); font-size: var(--t-18); line-height: 1.1; text-transform: uppercase; }
.resultats__sous { display: block; margin-top: 0.3rem; font-size: var(--t-14); color: #6E676A; }
.resultats__itineraire { display: inline-block; margin-top: 0.4rem; font-size: var(--t-12); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; }
.resultats__pages li + li { margin-top: 1.25rem; }
.resultats__pages a { display: block; text-decoration: none; }
.resultats__pages a:hover .resultats__nom { color: var(--bordeaux); }
.resultats mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
@media (max-width: 599px) {
  .resultats__champ { flex-direction: column; }
}