/* Moteur de recherche compact, dans l'en-tête de la page de recherche (templates/blocs/recherche-moteur.php) : mêmes champs et même script (recherche.js) que le moteur
   de l'accueil ; seule la page de recherche charge cette feuille. */
.recherche-compacte {
  margin-top: 0; z-index: 41;
  .recherche-champs { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, .8fr) auto; gap: 0; align-items: center; padding: 0; background: var(--blanc); box-shadow: 0 2px 8px rgba(8, 36, 66, .22); border-radius: 14px; }
  .champ {
    min-height: 46px; gap: 8px; padding: 0 10px; border: 0; border-radius: 0; background: none;
    &:hover { background: var(--fond-clair); }
    &.actif { background: var(--bleu-pale); box-shadow: none; }
  }
  .champ-ou { border-radius: 14px 0 0 14px; }
  .champ-ou, .champ-dates, .champ-dates-court { grid-column: auto; }
  .champ + .champ, .champ-dates-court + .champ { border-left: 1px solid var(--bord); }
  .champ .ico { width: 18px; height: 18px; color: var(--bleu-fonce); }
  .champ-lib { display: none; }
  .champ-val { font-size: 14px; font-weight: 500; }
  .champ-val-court { display: inline; }
  .champ-voyageurs [data-affiche="voyageurs"] { display: none; }
  .champ-voyageurs .ico, .champ-dates-court .ico { display: none; }
  .champ-dates { display: none; }
  .champ-dates-court { display: flex; }
  .bouton-rechercher { min-height: 38px; width: 38px; margin: 0 4px 0 2px; padding: 0; border-radius: 11px; }
  .bouton-rechercher .ico { width: 18px; height: 18px; }
  .bouton-rechercher-texte { display: none; }
}

/* Ordinateur : même carte blanche arrondie que sur mobile, sur une ligne : destination, dates en un seul champ, nombre de voyageurs seul (dates et voyageurs
   de même largeur), loupe */
@media (min-width: 960px) {
  .recherche-compacte {
    .recherche-champs { grid-template-columns: minmax(80px, 1fr) minmax(0, 175px) minmax(0, 175px) auto; }   /* 175 px : « 29 janv. – 26 févr. » en entier */
    .champ { min-height: 42px; padding: 0 14px; }
    .champ .ico { position: relative; top: -1px; }   /* le texte paraît plus haut que le centre de sa ligne : on remonte l'icône d'un pixel */
    .champ-dates-court { border-left: 1px solid var(--bord); }
    .champ-dates-court .ico, .champ-voyageurs .ico { display: block; }
    .champ-val { line-height: 1.2; }
    .bouton-rechercher { min-height: 34px; width: 34px; border-radius: 10px; }
    .bouton-rechercher .ico { width: 17px; height: 17px; }
  }
  /* 960 à 1199 px : dates et voyageurs sans icône, pour que les dates restent lisibles en entier */
  @media (max-width: 1199px) {
    .recherche-compacte :is(.champ-dates-court, .champ-voyageurs) { padding: 0 12px; .ico { display: none; } }
  }
  /* Menus déroulants calés sous le moteur */
  .recherche-compacte .panneau { inset: calc(100% + 12px) auto auto 0; }
  .recherche-compacte .panneau-voyageurs { left: auto; right: 0; }
}

/* ---------- PAGE DE RECHERCHE, MOBILE : moteur compact sur 2 lignes ----------
   1) destination ; 2) dates du séjour et voyageurs (50 / 50). Pas de bouton : la recherche se relance quand on ferme un panneau modifié (recherche-page.js).
   Les filtres, la carte et le tri sont dessous (recherche-barre.php). */
@media (max-width: 959px) {
  .entete-recherche .recherche-compacte .recherche-champs {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 16px; overflow: hidden;
    .champ { min-height: 42px; padding: 0 14px; gap: 6px; }
    .champ .ico { position: relative; top: -1px; }   /* le texte paraît plus haut que le centre de sa ligne : on remonte l'icône d'un pixel */
    .champ-ou { grid-column: 1 / 3; grid-row: 1; border-radius: 0; }
    .bouton-rechercher { display: none; }
    .champ-dates-court { grid-column: 1; grid-row: 2; display: flex; border-top: 1px solid var(--bord); }
    .champ-voyageurs { grid-column: 2; grid-row: 2; border-top: 1px solid var(--bord); border-left: 1px solid var(--bord); }
    .champ-dates { display: none; }
    .champ-dates-court .ico, .champ-voyageurs .ico { display: block; }
  }
}