/* Moteur de recherche de vols (home) — complète app.css (Tailwind) */
[x-cloak] { display: none !important; }

.bk-wrap { background: #232357; padding: 16px; }
@media (min-width: 1024px) {
    .bk-wrap { position: absolute; top: 24px; left: 0; right: 0; z-index: 20; background: transparent; padding: 0 24px; }
}

.bk { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-family: "Open Sans", sans-serif; font-size: 15px; color: #000; }

/* Type de trajet */
.bk__types { display: flex; gap: 4px; padding: 10px 10px 0; }
.bk__type { flex: 1; padding: 10px 6px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: #3F3F7F; cursor: pointer; white-space: nowrap; }
.bk__type:hover { background: #EDEDED; }
.bk__type[aria-pressed="true"] { background: #3F3F7F; color: #fff; }
@media (max-width: 639px) {
    .bk__type { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 13px; line-height: 1.15; white-space: normal; }
}
@media (min-width: 1024px) {
    .bk__types { display: inline-flex; gap: 0; padding: 0; margin: 12px 24px 0; background: #EDEDED; border-radius: 999px; }
    .bk__type { flex: none; padding: 8px 18px; border-radius: 999px; }
    .bk__type:hover { background: #e2e2e2; }
    .bk__type[aria-pressed="true"] { background: #3F3F7F; }
}

.bk__form { padding: 10px; }
@media (min-width: 1024px) { .bk__form { padding: 12px 24px 16px; } }

/* Rangées de champs */
.bk__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk__row + .bk__row { margin-top: 8px; }
.bk__row--main > .bk__field--wide, .bk__row--main > .bk__submit { grid-column: 1 / -1; }
@media (min-width: 768px) and (max-width: 1023px) {
    .bk__row { grid-template-columns: repeat(4, 1fr); }
    .bk__row--main > .bk__field--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
    .bk__row--main, .bk__row--multi { display: flex; gap: 8px; }
    .bk__row--main > .bk__field--wide, .bk__row--multi > .bk__field--wide { flex: 1 1 170px; min-width: 0; }
    .bk__row--main > .bk__field--date, .bk__row--multi > .bk__field--date { flex: 0 0 176px; }
    .bk__row--main > .bk__field--pax { flex: 0 0 170px; }
    .bk__row--main > .bk__submit { flex: none; }
}

/* Champ */
.bk__field { position: relative; min-width: 0; min-height: 56px; }
.bk__control { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 100%; min-width: 0; min-height: 56px; padding: 8px 12px; border: 1px solid #c3c3c3; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.bk__control:hover { border-color: #3F3F7F; }
.bk__control:focus, .bk__control:focus-within { outline: none; border-color: #3F3F7F; box-shadow: 0 0 0 3px rgba(63, 63, 127, .15); }
.bk__field--error .bk__control { border-color: #E50002; }
.bk__icon { flex: none; font-size: 22px; line-height: 1; color: #3F3F7F; }
.bk__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bk__label { font-size: 12px; line-height: 1.2; color: #707070; }
.bk__value { font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk__value--empty { font-weight: 500; color: #707070; }
.bk__chevron { flex: none; font-size: 14px; color: #707070; }
.bk__error { display: block; margin: 4px 2px 0; font-size: 12px; color: #E50002; }

.bk__control input[type="date"] { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; line-height: 1.3; color: inherit; outline: none; }
.bk__control input[type="date"]:invalid, .bk__control input[type="date"]:not(:valid) { color: #707070; font-weight: 500; }
.bk__control input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
.bk__control select, .bk__control input[type="text"] { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; color: inherit; outline: none; }

.bk__badge { display: inline-block; width: fit-content; margin-top: 2px; padding: 2px 8px; border: 1px solid #3F3F7F; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; color: #3F3F7F; white-space: nowrap; }

/* Bouton */
.bk__submit { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 22px; border: 0; border-bottom: 4px solid #E50002; border-radius: 8px; background: #3F3F7F; font: inherit; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer; transition: background .15s; }
.bk__submit:hover { background: #232357; }
.bk__submit i { font-size: 20px; }

/* Options secondaires (devise, code promo) */
.bk__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 0; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: #3F3F7F; cursor: pointer; }
.bk__more i { transition: transform .15s; }
.bk__more[aria-expanded="true"] i { transform: rotate(180deg); }
.bk__row--options { margin-top: 8px; }
@media (min-width: 1024px) { .bk__row--options { grid-template-columns: 180px 220px; } }

/* Panneaux (listes, passagers) : plein écran sur mobile, menu déroulant sur desktop */
.bk__panel { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #fff; }
.bk__panel-head { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 14px 16px; border-bottom: 1px solid #EDEDED; font-weight: 700; }
.bk__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: #EDEDED; font-size: 20px; color: #232357; cursor: pointer; }
.bk__list { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.bk__item { display: block; width: 100%; padding: 14px 20px; border: 0; border-bottom: 1px solid #EDEDED; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.bk__item:hover, .bk__item:focus { background: #EDEDED; outline: none; }
.bk__item b { display: block; font-size: 15px; }
.bk__item .bk__badge { margin-top: 4px; }
.bk__item small { display: block; margin-top: 2px; font-size: 12px; color: #707070; }
.bk__separator { margin: 0 20px; border-top: 1px solid #c3c3c3; }
@media (min-width: 1024px) {
    .bk__panel { position: absolute; top: calc(100% + 8px); left: 0; right: auto; bottom: auto; z-index: 40; min-width: 100%; width: max-content; max-width: 420px; max-height: 60vh; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); overflow: hidden; }
    .bk__panel--right { left: auto; right: 0; }
    .bk__panel-head { display: none; }
    .bk__list { max-height: 60vh; }
    .bk__item { padding: 12px 20px; }
    .bk__item:last-child { border-bottom: 0; }
}

/* Passagers */
.bk__pax { flex: 1; padding: 8px 20px; }
.bk__pax-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #EDEDED; }
.bk__pax-row:last-child { border-bottom: 0; }
.bk__pax-row b { display: block; }
.bk__pax-row small { display: block; font-size: 12px; color: #707070; }
.bk__counter { display: flex; align-items: center; gap: 10px; }
.bk__counter button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #3F3F7F; border-radius: 999px; background: #fff; font-size: 18px; color: #3F3F7F; cursor: pointer; }
.bk__counter button:hover { background: #3F3F7F; color: #fff; }
.bk__counter output { min-width: 20px; text-align: center; font-weight: 700; }
.bk__pax-foot { flex: none; padding: 12px 20px 20px; }
.bk__pax-foot .bk__submit { width: 100%; }
@media (min-width: 1024px) {
    .bk__pax-foot { padding: 4px 20px 16px; }
    .bk__pax-foot .bk__submit { min-height: 44px; font-size: 14px; }
}

/* Les classes utilitaires de masquage (jQuery / Alpine) priment sur les styles du moteur */
.bk .hidden { display: none !important; }

/* Slider de la home : titres lisibles sur petit écran */
@media (max-width: 639px) {
    .splide__slide h2 { font-size: 1.5rem; line-height: 1.2; padding: 0 12px; }
    .splide__slide h2 + span { font-size: 1rem; padding: 0 12px; }
}