/* ============================================
   BARRE DE RECHERCHE — façon Airbnb (templates/components/recherche.html)
   Barre desktop à segments, panneaux déroulants, suggestions de destination, compteurs
   de voyageurs. Accueil (variante hero) 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: 920px;
    color: var(--color-text);
    font-family: var(--font-main);
}

.recherche--compacte {
    margin: 0 auto;
}

.recherche__form {
    position: relative;
}

/* --- BARRE --- */

.recherche__barre {
    display: flex;
    align-items: center;
    height: 66px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-bar);
    transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.recherche--hero .recherche__barre {
    border-color: transparent;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.recherche--compacte .recherche__barre {
    height: 62px;
}

.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.4;
}

/* Les dates tiennent en « 30 oct. » ; Voyageurs loge aussi le bouton, qui s'élargit en
   « Rechercher » quand la barre est active : c'est lui qui prend la place */
.recherche__segment--arrivee,
.recherche__segment--depart {
    flex-grow: 0.9;
}

/* Sa taille vient de la barre, jamais de son contenu : le contenir isole le recalcul de
   mise en page que l'élargissement animé du bouton relance à chaque image */
.recherche__segment--voyageurs {
    flex-grow: 2.2;
    contain: size layout;
}

.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: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.recherche__declencheur {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 12px 0 24px;
    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: 32px;
}

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

.recherche__label {
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: 0.01em;
}

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

.recherche__valeur--vide {
    font-weight: 400;
    color: var(--color-text-light);
}

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

.recherche__saisie::placeholder {
    font-weight: 400;
    color: var(--color-text-light);
    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 rond, qui s'élargit en « Rechercher » quand la barre est active */
.recherche__bouton {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 48px;
    min-width: 48px;
    margin-right: 8px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-md);
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s, gap 0.3s var(--ease), padding 0.3s var(--ease);
}

.recherche__bouton svg {
    flex: 0 0 auto;
}

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

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

.recherche__bouton-texte {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.3s var(--ease), opacity 0.2s var(--ease);
}

.recherche--active .recherche__bouton {
    gap: 8px;
    padding: 0 20px 0 18px;
}

.recherche--active .recherche__bouton-texte {
    max-width: 160px;
    opacity: 1;
}

/* --- 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;
}

/* --- 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);
}