/* ============================================================
   VS08 MOBILE FIXES v4 — 31/03/2026
   Fiche golf : .sv-page-inner / .sv-right-col (plus .sv-inner inexistant)
   ============================================================ */

/* ═══ GLOBAL ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden !important; width: 100% !important; }
body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; }
img { max-width: 100%; height: auto; }

/* ═══ MOBILE ≤ 768px ═══ */
@media (max-width: 768px) {

    /* ── HEADER ── */
    .header .announce { font-size: 11px; padding: 7px 12px; }
    .nav-bar { height: 50px !important; padding: 10px 14px !important; }

    /* ── HERO HOMEPAGE ── */
    .hc-wrap { height: 55vh !important; min-height: 360px !important; max-height: 520px !important; }
    .hc-title { font-size: clamp(22px, 5.5vw, 32px) !important; }
    .hc-sub { font-size: 13px !important; }
    .hc-btns { flex-direction: column; gap: 10px; }
    .hc-btns a { width: 100%; text-align: center; padding: 14px 24px; font-size: 14px; }
    .hc-stats { display: none !important; }
    .hc-dots { left: 20px !important; bottom: 70px !important; }
    .hc-conf { display: none !important; }
    .hc-content { padding: 0 20px !important; }

    /* ── BARRE DE RECHERCHE — comme Booking.com mobile ── */
    .fp-search { margin-top: -30px !important; padding: 0 12px 10px !important; }
    .fp-search-card {
        flex-direction: column !important;
        padding: 18px 16px !important;
        gap: 0 !important;
        border-radius: 16px !important;
    }
    .fp-search-field {
        flex: none !important;
        padding: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid #f0f2f4;
        padding-bottom: 12px !important;
        margin-bottom: 12px;
        width: 100% !important;
    }
    .fp-search-field:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0 !important; }
    .fp-search-field label { font-size: 9px; margin-bottom: 4px; }
    .fp-search-field select, .fp-search-field input {
        font-size: 15px !important;
        height: 42px !important;
        width: 100% !important;
    }
    .fp-search-date-trigger { height: 42px !important; font-size: 14px !important; }
    .fp-btn-search {
        margin: 14px 0 0 0 !important;
        width: 100% !important;
        padding: 14px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
    }

    /* ── SECTION UNIVERS BENTO ── */
    .fp-univers { margin-top: -50px !important; padding-top: 4.5rem !important; }

    /* ── CARDS COUPS DE CŒUR ── */
    .fp-cards-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .scard-featured {
        grid-column: span 1 !important;
        flex-direction: column !important;
    }
    .scard-featured .scard-img { width: 100% !important; height: 200px; }
    .scard-featured .scard-body { padding: 18px !important; }

    /* ── CIRCUIT CARDS (dl-item) — PHOTO AU-DESSUS ── */
    .dl-item {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .dl-item-photo {
        width: 100% !important;
        min-width: 100% !important;
        height: 180px !important;
    }
    .dl-item-body { padding: 14px 16px !important; }
    .dl-half { padding: 20px 16px !important; border-radius: 16px !important; }
    .dl-grid { flex-direction: column !important; gap: 16px !important; }

    /* ── SH-CARDS (section sombre) ── */
    .sh-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

    /* ── SINGLE VOYAGE (golf) — calc / réservation au-dessus du contenu ── */
    .sv-page-inner {
        grid-template-columns: 1fr !important;
        padding: 0 14px !important;
        gap: 0 !important;
    }
    .sv-right-col {
        order: -1 !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .sv-left-col {
        order: 0 !important;
        min-width: 0 !important;
    }
    .sv-hero { height: 45vh !important; min-height: 300px !important; }
    .sv-hero-content { padding: 0 16px 28px !important; }
    .sv-hero-content h1 { font-size: clamp(20px, 5vw, 28px) !important; }
    .sv-calc-card { padding: 20px 16px !important; border-radius: 16px !important; margin-bottom: 14px; }
    .sv-field-row { grid-template-columns: 1fr !important; }
    .sv-field select, .sv-field input { font-size: 16px !important; min-height: 46px; }
    .sv-btn-reserver { font-size: 15px !important; padding: 15px !important; min-height: 50px; border-radius: 12px; }
    .sv-card { padding: 20px 14px !important; border-radius: 14px !important; margin-bottom: 14px !important; }
    /* Galerie = carrousel sur les fiches golf actuelles */
    .sv-carousel-wrap {
        padding: 18px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 14px !important;
    }
    .sv-carousel { border-radius: 10px !important; }
    .sv-carousel-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    /* Lignes d’options (checkbox + libellé + qté + prix) : éviter débordement */
    .sv-option-row { min-width: 0 !important; }
    .sv-option-label { min-width: 0 !important; overflow-wrap: anywhere; }
    .sv-option-price { white-space: normal !important; text-align: right; }

    /* ── SINGLE CIRCUIT — CALC CARD EN HAUT ── */
    .vc-inner {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 14px !important;
    }
    .vc-calc-col {
        order: -1 !important;
        position: static !important;
        width: 100% !important;
    }
    .vc-main {
        order: 1 !important;
        width: 100% !important;
    }
    .vc-calc-card { padding: 20px 16px !important; border-radius: 16px !important; }
    .vc-cta-btn { font-size: 15px !important; min-height: 50px; }
    .vc-page { padding: 28px 0 48px !important; }
    .vc-calc-col { max-height: none !important; overflow-y: visible !important; }
    .vc-field select, .vc-field input { font-size: 16px !important; min-height: 46px; }

    /* ── BOOKING TUNNEL GOLF — recap EN BAS (après l'assurance) ── */
    .bk-inner { padding: 0 12px !important; }
    .bk-main { order: 0 !important; } /* contenu principal + assurance en premier */
    .bk-recap-col { position: static !important; order: 1 !important; margin-top: 14px; } /* recap EN BAS */
    .bk-recap-card { padding: 16px !important; border-radius: 14px !important; }
    .bk-recap-total-val { font-size: 24px !important; }
    .bk-field-row { grid-template-columns: 1fr !important; }
    .bk-field input, .bk-field select { font-size: 16px !important; min-height: 46px; }
    .bk-nav { flex-direction: column; gap: 10px; }
    .bk-btn-next, .bk-btn-prev { width: 100% !important; text-align: center; min-height: 50px; font-size: 15px; }

    /* ── BOOKING CIRCUIT — recap en haut ── */
    /* ── BOOKING CIRCUIT — recap EN BAS (après l'assurance, pas en haut) ── */
    .bkc-inner {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 12px !important;
    }
    .bkc-recap {
        order: 1 !important; /* EN BAS : après le contenu principal + assurance */
        position: static !important;
        width: 100% !important;
        margin-top: 14px;
    }

    /* ── COMBO CARDS (vols) ── */
    .combo-header { flex-direction: column !important; gap: 8px; align-items: flex-start !important; }
    .combo-leg { padding: 10px 12px !important; flex-wrap: wrap; }
    .combo-time { font-size: 15px !important; }
    .combo-price-main { font-size: 17px !important; }

    /* ── DEVIS PAGES ── */
    .vs08-devis-hero, .vs08-da-hero { min-height: 25vh !important; }
    .vs08-devis-card, .vs08-da-card { padding: 20px 14px !important; border-radius: 14px !important; }
    .vs08-devis-row, .vs08-da-row { grid-template-columns: 1fr !important; }
    .vs08-devis-field input, .vs08-devis-field select, .vs08-devis-field textarea,
    .vs08-da-field input, .vs08-da-field select, .vs08-da-field textarea {
        font-size: 16px !important; /* anti-zoom iOS */
        min-height: 46px;
    }
    .vs08-devis-date-trigger, .vs08-da-date-trigger { min-height: 46px; }

    /* ── VS08 CALENDAR POPUP ── */
    .vs-cal {
        max-width: calc(100vw - 20px) !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
    .vs-cal-day { width: 36px; height: 36px; }
    .vs-cal-confirm { min-height: 46px; }

    /* ── CHECKOUT ── */
    .vs08-checkout-page { padding: 10px 10px 28px !important; }

    /* ── FOOTER ── */
    .ft-main { padding: 28px 14px 20px !important; }
    .ft-col a { min-height: 38px; display: flex; align-items: center; }

    /* ── OVERFLOW KILLERS ── */
    .fp-container, .sv-page, .sv-page-inner, .bk-inner, .bkc-inner, .dl-grid, .sh-section,
    .fp-univers .fp-container, .vc-inner, .vc-page {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    .fp-bridge-inner::before, .fp-bridge-inner::after { display: none !important; }

    /* ── SCROLL BEHAVIOR ── */
    html { scroll-behavior: auto !important; }

    /* ── SAFE AREAS iOS ── */
    .bk-nav, .ft-main { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ═══ MOBILE ≤ 480px (petits téléphones) ═══ */
@media (max-width: 480px) {
    .hc-wrap { height: 50vh !important; min-height: 300px !important; }
    .hc-title { font-size: clamp(18px, 5vw, 24px) !important; }
    .sv-hero { height: 40vh !important; min-height: 260px !important; }
    .sv-room-grid { grid-template-columns: 1fr !important; }
    .sv-highlights { grid-template-columns: 1fr !important; }
    .dl-item-photo { height: 150px !important; }
    .bk-step-label { font-size: 8px !important; }
    .combo-time { font-size: 14px !important; }
    .combo-price-main { font-size: 15px !important; }
}

/* ═══ PAYSAGE TÉLÉPHONE ═══ */
@media (max-height: 500px) and (orientation: landscape) {
    .hc-wrap { height: auto !important; min-height: 280px !important; }
    .sv-hero { height: auto !important; min-height: 250px !important; }
    .vc-hero { height: auto !important; min-height: 200px !important; max-height: 50vh !important; }
}