@charset "UTF-8";

.dr-search.is-hero{width:100%;max-width:860px} /* width-ok: the search form's fields, not a page column */
.dr-search:is(.is-hero,.is-bar) .dr-search-shell{padding:0;border:0;background:none;border-radius:0}
.dr-search:is(.is-hero,.is-bar) .dr-search-core{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:0;padding:6px;
  background:var(--surface,#fff);color:var(--text);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 2px 4px rgba(19,34,36,.03),0 18px 40px -22px rgba(8,128,122,.28);transition:box-shadow .15s ease,border-color .15s ease}
.dr-search:is(.is-hero,.is-bar) .dr-search-core:focus-within{border-color:#9fd3cd;box-shadow:0 0 0 3px rgba(8,128,122,.16),0 18px 40px -22px rgba(8,128,122,.28)}
.dr-search:is(.is-hero,.is-bar) .dr-field{position:relative;display:flex;flex-direction:row;align-items:center;gap:10px;height:52px;min-height:0;
  padding:0 14px;border-radius:12px;min-width:0}
.dr-search:is(.is-hero,.is-bar) .dr-field + .dr-field{border:0}
.dr-search:is(.is-hero,.is-bar) .dr-field + .dr-field::before{content:"";position:absolute;left:0;top:50%;width:1px;height:26px;margin-top:-13px;
  background:var(--line);transition:opacity .15s ease}
.dr-search:is(.is-hero,.is-bar) .dr-field{transition:background-color .15s ease}
.dr-search:is(.is-hero,.is-bar) .dr-field:hover{background:#F7FAFA}
.dr-search:is(.is-hero,.is-bar) .dr-field:focus-within{background:#F1F7F6;box-shadow:none}
.dr-search:is(.is-hero,.is-bar) .dr-field:is(:hover,:focus-within)::before,.dr-search:is(.is-hero,.is-bar) .dr-field:is(:hover,:focus-within) + .dr-field::before{opacity:0}
.dr-search:is(.is-hero,.is-bar) .dr-field > svg{position:static;flex:none;width:18px;height:18px;transform:none;color:var(--teal-ink)}
.dr-search:is(.is-hero,.is-bar) .dr-field .ui-input{flex:1;min-width:0;height:100%;font-size:15.5px;color:var(--text)}
.dr-search:is(.is-hero,.is-bar) .dr-field .ui-input::placeholder{color:#6d7f82}
.dr-search:is(.is-hero,.is-bar) .dr-field:has([aria-invalid="true"]){box-shadow:inset 0 0 0 2px var(--bad);border-radius:12px}
.dr-search:is(.is-hero,.is-bar) .dr-field-where{padding-right:8px}
.dr-search:is(.is-hero,.is-bar) .dr-near{position:static;flex:none;border-color:transparent;background:var(--teal-dim);color:var(--teal-ink);
  font-weight:500;white-space:nowrap;gap:6px;--h:34px} /* size sm from the button component, 34px inside the 52px field (component variable) */
.dr-search:is(.is-hero,.is-bar) .dr-near:hover{background:color-mix(in srgb,var(--teal) 14%,#fff)}
.dr-search:is(.is-hero,.is-bar) .dr-near[hidden]{display:none}
/* No position (refused or unavailable): the chip says so and steps back; « Où? » takes the city instead. */
.dr-search:is(.is-hero,.is-bar) .dr-near:disabled{background:transparent;color:var(--muted);opacity:1;cursor:default}
.dr-search:is(.is-hero,.is-bar) .dr-nearword{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.dr-search:is(.is-hero,.is-bar) .dr-submit{display:flex;padding:0 0 0 6px}
/* « Rechercher »: the same md button (44px) as on the results page, square icon-only here. */
.dr-search:is(.is-hero,.is-bar) .dr-go-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:640px){
  .dr-search:is(.is-hero,.is-bar) .dr-search-core{grid-template-columns:1fr}
  .dr-search:is(.is-hero,.is-bar) .dr-field{height:50px}
  .dr-search:is(.is-hero,.is-bar) .dr-field + .dr-field::before{left:14px;right:14px;top:0;width:auto;height:1px;margin-top:0}
  .dr-search:is(.is-hero,.is-bar) .dr-submit{padding:6px 0 0}
  .dr-search:is(.is-hero,.is-bar) .dr-submit .ui-btn{width:100%} /* md height like everywhere; full width, so no padding needed */
  .dr-search:is(.is-hero,.is-bar) .dr-go-label{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}