/* ================== BOOKING HÔTEL — formulaire conversationnel 2026 ==================
   Scope #ehb + !important → indépendant de Bootstrap / thème
   --ehb-top : décalage du mode sticky si tu as une navbar fixe (ex: 72px)
   ==================================================================================== */

#ehb,
#ehb *,
#ehb *::before,
#ehb *::after {
    box-sizing: border-box !important;
}

#ehb {
    --navy: #073b4c;
    --navy-2: #0b5168;
    --copper: #c69e85;
    --copper-d: #a97f65;
    --sable: #f6efe8;
    --line: rgba(7, 59, 76, .10);
    --muted: #6b7f86;
    --ehb-top: 0px;
    display: block !important;
    width: 100% !important;
    max-width: 1312px !important; /* 1280 + gouttières */
    margin: -32px auto 40px !important;
    padding: 0 16px !important;
    position: relative !important;
    z-index: 2 !important;
    font-family: 'Poppins', var(--font-primary), system-ui, sans-serif !important;
}

#ehb p, #ehb span, #ehb b, #ehb small, #ehb li, #ehb button {
    text-indent: 0 !important;
}

#ehb .ehb-card {
    display: block !important;
    margin: 0 !important;
    padding: 18px 16px 14px !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 70px -30px rgba(7, 59, 76, .35), 0 1px 2px rgba(7, 59, 76, .05) !important;
    position: relative !important;
}

/* ---------- Top ---------- */
#ehb .ehb-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
}

#ehb .ehb-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    background: var(--sable) !important;
    color: var(--navy) !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

#ehb .ehb-dot {
    display: block !important;
    flex: 0 0 7px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #2bb673 !important;
    box-shadow: 0 0 0 3px rgba(43, 182, 115, .2) !important;
}

#ehb .ehb-step {
    font-size: .75rem !important;
    color: var(--muted) !important;
    font-variant-numeric: tabular-nums !important;
}

#ehb .ehb-step b { color: var(--navy) !important; font-weight: 700 !important; }

/* ---------- Form ---------- */
#ehb form {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}

#ehb .ehb-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------- Phrase ---------- */
#ehb .ehb-sentence {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    line-height: 2.2 !important;
    color: var(--navy) !important;
    text-align: left !important;
}

/* ---------- Pills ---------- */
#ehb .ehb-sentence > .ehb-pill {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    margin: 0 2px !important;
    padding: 0 14px !important;
    vertical-align: middle !important;
    border: 1.5px dashed var(--copper) !important;
    border-radius: 999px !important;
    background: var(--sable) !important;
    color: var(--copper-d) !important;
    font-family: 'Poppins', var(--font-primary), system-ui, sans-serif !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: background .2s, color .2s, border-color .2s, transform .15s !important;
}

#ehb .ehb-pill > span,
#ehb .ehb-pill > i {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    color: inherit !important;
    text-align: left !important;
}

#ehb .ehb-pill > i { font-size: .8rem !important; }

#ehb .ehb-sentence > .ehb-pill:hover {
    border-style: solid !important;
    transform: translateY(-1px) !important;
}

#ehb .ehb-pill:focus-visible,
#ehb .ehb-pill--date:focus-within {
    outline: 3px solid rgba(198, 158, 133, .45) !important;
    outline-offset: 2px !important;
}

#ehb .ehb-sentence > .ehb-pill[aria-expanded="true"] {
    border-style: solid !important;
    border-color: var(--navy) !important;
    background: #fff !important;
    color: var(--navy) !important;
}

#ehb .ehb-sentence > .ehb-pill.is-set {
    border: 1.5px solid var(--navy) !important;
    background: var(--navy) !important;
    color: #fff !important;
}

#ehb .ehb-sentence > .ehb-pill.is-error {
    border-color: #e0605a !important;
    background: #fdf0ef !important;
    color: #c4443e !important;
    animation: ehbShake .4s ease !important;
}

@keyframes ehbShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Date : input natif posé sur la pill */
#ehb .ehb-date {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

#ehb .ehb-date::-webkit-calendar-picker-indicator {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
}

/* ---------- Tiroirs ---------- */
#ehb .ehb-tray {
    margin: 14px 0 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: var(--sable) !important;
    animation: ehbIn .25s ease !important;
}

#ehb .ehb-tray[hidden] { display: none !important; }

@keyframes ehbIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

#ehb .ehb-tray-title {
    margin: 0 0 10px !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--muted) !important;
}

#ehb .ehb-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

#ehb .ehb-chips--3 { grid-template-columns: minmax(0, 1fr) !important; }

#ehb .ehb-chip {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 1.5px solid transparent !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--navy) !important;
    text-align: left !important;
    font-family: 'Poppins', var(--font-primary), system-ui, sans-serif !important;
    box-shadow: 0 1px 2px rgba(7, 59, 76, .06) !important;
    cursor: pointer !important;
    transition: border-color .2s, transform .15s, box-shadow .2s !important;
}

#ehb .ehb-chip:hover {
    border-color: var(--copper) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px -12px rgba(7, 59, 76, .35) !important;
}

#ehb .ehb-chip.is-active {
    border-color: var(--navy) !important;
    box-shadow: 0 0 0 3px rgba(7, 59, 76, .08) !important;
}

#ehb .ehb-chip-big {
    flex: 0 0 auto !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--copper) !important;
}

#ehb .ehb-chip-ico {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 12px !important;
    background: rgba(198, 158, 133, .18) !important;
    color: var(--navy) !important;
    font-size: .9rem !important;
}

#ehb .ehb-chip.is-active .ehb-chip-ico {
    background: var(--navy) !important;
    color: #fff !important;
}

#ehb .ehb-chip-txt {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

#ehb .ehb-chip-txt b {
    font-size: .9rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--navy) !important;
}

#ehb .ehb-chip-txt small {
    font-size: .72rem !important;
    line-height: 1.3 !important;
    color: var(--muted) !important;
}

/* ---------- Pied ---------- */
#ehb .ehb-foot {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 12px !important;
    margin: 16px 0 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid var(--line) !important;
}

#ehb .ehb-progress {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
}

#ehb .ehb-progress span {
    display: block !important;
    height: 4px !important;
    border-radius: 4px !important;
    background: var(--line) !important;
    transition: background .3s !important;
}

#ehb .ehb-progress span.is-on { background: var(--copper) !important; }

#ehb .ehb-cta {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 6px 0 20px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%) !important;
    color: #fff !important;
    font-family: 'Poppins', var(--font-primary), system-ui, sans-serif !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-shadow: 0 12px 26px -14px rgba(7, 59, 76, .8) !important;
    cursor: pointer !important;
    transition: filter .2s !important;
}

#ehb .ehb-cta:hover { filter: brightness(1.1) !important; }

#ehb .ehb-cta:focus-visible {
    outline: 3px solid var(--copper) !important;
    outline-offset: 3px !important;
}

#ehb .ehb-cta-arrow {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: var(--copper) !important;
}

#ehb .ehb-cta-arrow img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    position: static !important;
    transition: transform .5s ease !important;
}

#ehb .ehb-cta:hover .ehb-cta-arrow img { transform: rotate(360deg) !important; }

/* ---------- Réassurance ---------- */
#ehb .ehb-trust {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 16px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#ehb .ehb-trust li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .72rem !important;
    color: var(--muted) !important;
}

#ehb .ehb-trust li::before { content: none !important; }
#ehb .ehb-trust i { color: var(--copper) !important; font-size: .68rem !important; }

/* ================== RESPONSIVE ================== */
@media (max-width: 380px) {
    #ehb { padding: 0 10px !important; margin-top: -24px !important; }
    #ehb .ehb-card { padding: 16px 12px 12px !important; border-radius: 20px !important; }
    #ehb .ehb-sentence { font-size: 1.05rem !important; }
    #ehb .ehb-sentence > .ehb-pill { height: 36px !important; padding: 0 11px !important; font-size: .8rem !important; }
    #ehb .ehb-chips { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (min-width: 640px) {
    #ehb { margin: -56px auto 48px !important; }
    #ehb .ehb-card { padding: 22px 26px 16px !important; }
    #ehb .ehb-sentence { font-size: 1.3rem !important; }
    #ehb .ehb-chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

    #ehb .ehb-foot {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #ehb .ehb-progress { width: 160px !important; }
    #ehb .ehb-cta { width: auto !important; }
}

/* Desktop : phrase + CTA sur une ligne */
@media (min-width: 1024px) {
    #ehb { margin: -80px auto 64px !important; }
    #ehb .ehb-card { padding: 20px 28px 14px !important; }

    #ehb form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        column-gap: 24px !important;
    }

    #ehb .ehb-sentence {
        grid-column: 1 !important;
        grid-row: 1 !important;
        font-size: 1.3rem !important;
        line-height: 1.9 !important;
    }

    #ehb .ehb-foot {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    #ehb .ehb-progress { display: none !important; }
    #ehb .ehb-tray { grid-column: 1 / -1 !important; }
}

@media (min-width: 1312px) {
    #ehb { padding: 0 !important; max-width: 1280px !important; }
}

/* ================== MODE STICKY (au scroll) ================== */
#ehb.is-stuck {
    position: fixed !important;
    top: var(--ehb-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1020 !important;
}

#ehb.is-stuck .ehb-card {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 10px 30px -18px rgba(7, 59, 76, .45) !important;
    animation: ehbDrop .3s ease !important;
}

@keyframes ehbDrop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

#ehb.is-stuck .ehb-top,
#ehb.is-stuck .ehb-trust,
#ehb.is-stuck .ehb-progress { display: none !important; }

#ehb.is-stuck form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
}

#ehb.is-stuck .ehb-sentence { grid-column: 1 !important; grid-row: 1 !important; }

#ehb.is-stuck .ehb-foot {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#ehb.is-stuck .ehb-tray {
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
    padding: 10px !important;
}

#ehb.is-stuck .ehb-chip { min-height: 48px !important; padding: 8px 12px !important; }

/* Sticky mobile/tablette : uniquement les pills + bouton rond */
@media (max-width: 1023px) {
    #ehb.is-stuck .ehb-sentence {
        display: flex !important;
        gap: 6px !important;
        font-size: 0 !important;
        line-height: 1 !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        padding: 2px 0 !important;
    }

    #ehb.is-stuck .ehb-sentence::-webkit-scrollbar { display: none !important; }

    #ehb.is-stuck .ehb-sentence > .ehb-pill {
        flex: 0 0 auto !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        font-size: .8rem !important;
    }

    #ehb.is-stuck .ehb-cta {
        width: 46px !important;
        height: 46px !important;
        padding: 4px !important;
        justify-content: center !important;
    }

    #ehb.is-stuck .ehb-cta-txt { display: none !important; }
    #ehb.is-stuck .ehb-chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    #ehb.is-stuck .ehb-chips--3 .ehb-chip { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
    #ehb.is-stuck .ehb-chip-txt small { display: none !important; }
}

/* Sticky desktop : phrase compacte sur une ligne */
@media (min-width: 1024px) {
    #ehb.is-stuck .ehb-card { padding: 8px 28px !important; }
    #ehb.is-stuck .ehb-sentence { font-size: 1.05rem !important; line-height: 1.6 !important; white-space: nowrap !important; }
    #ehb.is-stuck .ehb-sentence > .ehb-pill { height: 34px !important; font-size: .8rem !important; padding: 0 12px !important; }
    #ehb.is-stuck .ehb-cta { height: 42px !important; font-size: .85rem !important; }
    #ehb.is-stuck .ehb-cta-arrow { flex-basis: 32px !important; width: 32px !important; height: 32px !important; }
}

@media (prefers-reduced-motion: reduce) {
    #ehb * { animation: none !important; transition: none !important; }
}