/* ============================================
   BARRE DE RECHERCHE — templates/components/recherche.html
   Barre desktop à segments (Ville ou code postal | Type de bien | Dates | Voyageurs) et bouton
   loupe orange accolé, panneaux déroulants, suggestions de destination, types de bien,
   compteurs de voyageurs. Accueil (variante entete) et listing (compacte).
   Le calendrier est dans calendrier_voyageur.css, la pilule et la modale mobile dans
   recherche_modale.css.
   ============================================ */

.recherche {
    position: relative;
    z-index: 30;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    color: var(--color-text);
    font-family: var(--font-main);
}

.recherche__form {
    position: relative;
}

/* --- BARRE --- */

/* Rognée en pilule : le bouton loupe, carré, prend l'arrondi droit de la barre */
.recherche__barre {
    display: flex;
    align-items: center;
    height: 54px;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.recherche--active .recherche__barre {
    background: var(--color-surface-2);
}

.recherche__segment {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: var(--radius-pill);
    transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.recherche__segment--destination {
    flex-grow: 1.5;
}

/* Voyageurs sur fond gris, comme dans la maquette */
.recherche__segment--voyageurs {
    border-radius: 0;
    background: var(--color-surface-cool);
}

.recherche__segment:hover {
    background: var(--color-surface-2);
}

.recherche--active .recherche__segment:hover {
    background: var(--color-surface-3);
}

.recherche__segment.recherche__segment--actif,
.recherche--active .recherche__segment.recherche__segment--actif:hover {
    background: var(--color-bg);
    box-shadow: inset 0 0 0 2px var(--color-dark);
}

.recherche__declencheur {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px 0 20px;
    background: none;
    border: 0;
    border-radius: var(--radius-pill);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.recherche__segment--destination .recherche__declencheur {
    padding-left: 26px;
}

.recherche__declencheur:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: -2px;
}

.recherche__valeur,
.recherche__saisie {
    display: block;
    width: 100%;
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 20px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recherche__valeur--vide {
    font-weight: 400;
}

.recherche__saisie {
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
}

.recherche__saisie::placeholder {
    font-weight: 400;
    color: var(--color-text);
    opacity: 1;
}

/* Séparateurs : masqués de part et d'autre du segment survolé ou actif */
.recherche__sep {
    flex: 0 0 1px;
    height: 32px;
    background: var(--color-border);
    transition: opacity 0.2s var(--ease);
}

.recherche__segment:hover + .recherche__sep,
.recherche__sep:has(+ .recherche__segment:hover),
.recherche__segment--actif + .recherche__sep,
.recherche__sep:has(+ .recherche__segment--actif) {
    opacity: 0;
}

/* Effacer : sur le segment actif qui a une valeur */
.recherche__effacer {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface-2);
    color: var(--color-text);
    cursor: pointer;
}

.recherche__effacer:hover {
    background: var(--color-surface-3);
}

.recherche__effacer:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

.recherche__segment--actif .recherche__effacer:not([hidden]) {
    display: inline-flex;
}

/* Bouton loupe : carré orange accolé à droite (l'arrondi vient de la barre rognée) */
.recherche__bouton {
    flex: 0 0 72px;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--color-primary-strong);
    color: var(--color-on-primary);
    cursor: pointer;
    transition: background-color 0.2s var(--ease);
}

.recherche__bouton:hover {
    background: var(--color-primary-hover);
}

.recherche__bouton:focus-visible {
    outline: 3px solid var(--color-dark);
    outline-offset: -5px;
}

/* --- PANNEAUX --- */

.recherche__panneau {
    position: absolute;
    top: calc(100% + 12px);
    z-index: var(--z-popover);
    background: var(--color-bg);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-float);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
}

.recherche__panneau--ouvert {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.recherche__panneau--destination {
    left: 0;
    width: min(425px, 100%);
    max-height: min(520px, 70vh);
    overflow-y: auto;
    padding: 24px 0 16px;
}

.recherche__panneau--dates {
    left: 0;
    right: 0;
    padding: 28px 32px 32px;
}

.recherche__panneau--voyageurs {
    right: 0;
    width: min(400px, 100%);
    padding: 16px 32px;
}

.recherche__panneau--type {
    left: 22%;
    width: min(380px, 100%);
    padding: 22px 24px 24px;
}

.recherche__panneau--type .recherche__panneau-titre {
    padding: 0 0 12px;
}

/* Types de bien : pastilles (panneau desktop et carte « Quel logement ? » de la modale) */
.recherche-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- SUGGESTIONS DE DESTINATION --- */

.recherche__panneau-titre {
    margin: 0;
    padding: 0 32px 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-light);
}

.recherche-villes {
    list-style: none;
    margin: 0;
    padding: 0 16px;
}

.recherche-ville {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color 0.15s;
}

.recherche-ville:hover,
.recherche-ville--active {
    background: var(--color-surface);
}

.recherche-ville__tuile {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--color-primary-light);
    color: var(--color-text);
}

.recherche-ville__textes {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recherche-ville__nom {
    font-size: var(--font-size-md);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* En frappe : le nom en normal, la partie trouvée en gras */
.recherche-villes--filtre .recherche-ville__nom {
    font-weight: 500;
}

.recherche-ville__nom strong {
    font-weight: 800;
}

.recherche-ville__nombre {
    font-size: 13px;
    color: var(--color-text-light);
}

/* --- COMPTEURS DE VOYAGEURS --- */

.compteur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-surface-2);
}

.compteur:last-child {
    border-bottom: 0;
}

.compteur__textes {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.compteur__titre {
    font-size: var(--font-size-base);
    font-weight: 700;
}

.compteur__controles {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.compteur__valeur {
    min-width: 20px;
    font-size: var(--font-size-base);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .recherche * {
        transition-duration: 0s !important;
    }
}

/* Focus clavier rendu après Échap : le segment n'est plus actif, on montre quand même où l'on est */
.recherche:not(.recherche--active) .recherche__segment:focus-within {
    outline: 2px solid var(--color-text);
    outline-offset: -2px;
    border-radius: var(--radius-pill);
}