/* Barre de recherche de l'accueil : grille, champs villa et voyageurs habillés dans la DA. Champs de date : champ-date.css. Spec : 02-CORRECTIONS-SPEC.md section 2. */

.recherche {
  --decalage-bouton: calc(var(--t-corps) * var(--lh-corps) + var(--e2)); /* sous l'étiquette : une ligne + marge */
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.8fr) auto;
  gap: var(--e3) var(--e4); /* colonnes plus aérées : « 7 nuits » ne colle pas au libellé Voyageurs */
  align-items: start;
  padding: var(--e4);
  background: var(--surface);
  border-radius: var(--rayon-m);
  box-shadow: var(--ombre-carte);
}
.recherche .btn { min-block-size: 56px; margin-block-start: var(--decalage-bouton); }

/* Menu de la villa : liste native, flèche dessinée */
.champ__menu { position: relative; }
.champ__menu select { -webkit-appearance: none; appearance: none; padding-inline-end: calc(var(--e3) + 20px + var(--e2)); cursor: pointer; }
.champ__fleche {
  position: absolute;
  inset-inline-end: var(--e3);
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 20px;
  block-size: 20px;
  color: var(--dominante);
  pointer-events: none;
}

/* Voyageurs : sans les boutons natifs */
.champ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.champ input[type="number"]::-webkit-inner-spin-button,
.champ input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.champ select, .champ input[type="number"] { transition: border-color var(--d-micro) linear, background-color var(--d-micro) linear; }
.champ select:hover, .champ input[type="number"]:hover { border-color: var(--dominante); background-color: var(--dominante-douce); }

/* Intermédiaire : deux colonnes, villa sur les deux ; arrivée | départ ; voyageurs | bouton */
@media (max-width: 1099px) {
  .recherche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recherche .champ--large { grid-column: 1 / -1; }
}

/* Téléphone : villa, voyageurs et bouton en pleine largeur, dates en demi-largeur */
@media (max-width: 759px) {
  .recherche { padding: var(--e3); }
  .recherche .champ { min-inline-size: 0; }
  .recherche .champ--voyageurs { grid-column: 1 / -1; }
  .recherche .champ select, .recherche .champ input[type="number"] { block-size: 48px; }
  .recherche .btn { grid-column: 1 / -1; min-block-size: 48px; margin-block-start: 0; }
}
/* Sous 540 px, « ven. 23 oct. 2026 » et son icône ne tiennent plus dans une demi-largeur */
@media (max-width: 539px) {
  .recherche .champ--date { grid-column: 1 / -1; }
}