/* ═══ VS08 PARCS — Front CSS ═══ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;800&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ═══ HERO ═══ */
.vp-hero { position:relative; height:60vh; min-height:450px; background-size:cover; background-position:center; display:flex; align-items:flex-end; }
.vp-hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,39,68,.1) 0%, rgba(26,39,68,.85) 100%); }
.vp-hero-content { position:relative; z-index:2; padding:0 60px 50px; max-width:1300px; width:100%; }
.vp-hero-parc { font-size:14px; font-weight:600; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:2px; font-family:'Outfit',sans-serif; margin-bottom:10px; }
.vp-hero-title { font-family:'Playfair Display',serif; font-size:clamp(28px,5vw,48px); font-weight:800; color:#fff; margin:0 0 16px; line-height:1.15; }
.vp-hero-meta { display:flex; flex-wrap:wrap; gap:8px; }
.vp-meta-chip { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.15); backdrop-filter:blur(8px); color:#fff; font-family:'Outfit',sans-serif; font-size:13px; font-weight:500; padding:8px 16px; border-radius:100px; border:1px solid rgba(255,255,255,.12); }
.vp-chip-price { background:linear-gradient(135deg,#59b7b7,#3d9a9a); border-color:#59b7b7; font-weight:700; }
.vp-badge { position:absolute; top:24px; left:24px; z-index:3; background:#59b7b7; color:#fff; font-family:'Outfit',sans-serif; font-weight:700; font-size:13px; padding:8px 18px; border-radius:100px; }

/* ═══ HERO VIDEO (YouTube) ═══ */
.vp-hero-video { position:relative; height:65vh; min-height:480px; overflow:hidden; }
.vp-hero-video-wrap { position:absolute; inset:0; z-index:0; pointer-events:none; }
.vp-hero-video-wrap iframe {
    position:absolute;
    top:50%; left:50%;
    width:calc(100vh * 1.78); /* 16:9 aspect */
    height:calc(100vw / 1.78);
    min-width:100%; min-height:100%;
    transform:translate(-50%,-50%);
    border:0;
}
.vp-hero-video .vp-hero-overlay {
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(26,39,68,.25) 0%, rgba(26,39,68,.8) 100%);
}
.vp-hero-video .vp-hero-content { z-index:2; }
.vp-hero-video .vp-badge { z-index:3; }

/* ═══ LAYOUT ═══ */
.vp-container { background:#f9f6f0; }
.vp-inner { max-width:1440px; margin:0 auto; padding:40px 40px 80px; display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:start; }
.vp-main { min-width:0; }

/* ═══ GALLERY ═══ */
.vp-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:28px; border-radius:16px; overflow:hidden; }
.vp-gal-item { overflow:hidden; aspect-ratio:4/3; }
.vp-gal-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s; cursor:pointer; }
.vp-gal-item img:hover { transform:scale(1.06); }

/* ═══ SECTIONS ═══ */
.vp-section { background:#fff; border-radius:20px; padding:28px; margin-bottom:20px; box-shadow:0 2px 16px rgba(0,0,0,.04); }
.vp-section-title { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:#1a2744; margin:0 0 14px; }
.vp-subtitle { font-size:15px; color:#59b7b7; font-weight:600; font-family:'Outfit',sans-serif; margin:0 0 14px; }
.vp-content { font-size:14px; line-height:1.7; color:#4a5568; font-family:'Outfit',sans-serif; }
.vp-conditions { font-size:12px; color:#6b7280; }

/* ═══ CALENDRIER MULTI-MOIS (dans the_content) ═══ */
/* Le calendrier des périodes de validité est saisi comme contenu HTML
   dans l'éditeur WP — souvent une grille 3 colonnes de tableaux mensuels.
   On force la responsivité ici. */
.vp-content table { width:100%; border-collapse:collapse; table-layout:fixed; }
.vp-content table td, .vp-content table th { padding:6px 4px; text-align:center; font-size:13px; overflow:hidden; }
/* Conteneur grille multi-mois (div flex/grid parent des tableaux) */
.vp-content > div[style*="grid"], .vp-content > div[style*="flex"],
.vp-content .wp-block-columns, .vp-content .wp-block-group {
    overflow-x: auto;
}

/* ═══ HOTEL CARD ═══ */
.vp-hotel-card { background:linear-gradient(135deg,#f0f4f8,#e8edf2); border-radius:16px; padding:22px; }
.vp-hotel-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.vp-hotel-name { font-family:'Playfair Display',serif; font-size:18px; font-weight:700; color:#1a2744; }
.vp-hotel-stars { color:#59b7b7; font-size:16px; margin-top:2px; }
.vp-hotel-badges { display:flex; flex-wrap:wrap; gap:6px; }
.vp-hotel-badges span { font-size:11px; background:#fff; color:#4a5568; padding:4px 10px; border-radius:100px; font-family:'Outfit',sans-serif; }
.vp-hotel-desc { font-size:13px; line-height:1.6; color:#4a5568; font-family:'Outfit',sans-serif; }

/* ═══ OPTIONS ═══ */
.vp-options-grid { display:flex; flex-direction:column; gap:10px; }
.vp-option-card { display:flex; align-items:center; gap:14px; background:#fff; border:1.5px solid #e5e7eb; border-radius:14px; padding:16px 18px; transition:all .3s; }
.vp-option-card:hover { border-color:#b7dfdf; box-shadow:0 2px 12px rgba(232,114,74,.08); }
.vp-option-card.selected { border-color:#59b7b7; background:#edf8f8; }
.vp-option-icon { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#edf8f8,#d4f0f0); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.vp-option-card.selected .vp-option-icon { background:linear-gradient(135deg,#59b7b7,#3d9a9a); }
.vp-option-info { flex:1; }
.vp-option-name { font-size:14px; font-weight:700; color:#1a2744; font-family:'Outfit',sans-serif; }
.vp-option-price { font-size:12px; color:#59b7b7; font-weight:600; font-family:'Outfit',sans-serif; margin-top:2px; }
.vp-option-toggle { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; cursor:pointer; }
.vp-option-toggle input { opacity:0; width:0; height:0; }
.vp-option-slider { position:absolute; inset:0; background:#e0e0e0; border-radius:24px; transition:all .3s; }
.vp-option-slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:all .3s; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.vp-option-toggle input:checked + .vp-option-slider { background:linear-gradient(135deg,#59b7b7,#3d9a9a); }
.vp-option-toggle input:checked + .vp-option-slider::before { transform:translateX(20px); }

/* ═══ FAQ ═══ */
.vp-faq-item { border:1.5px solid #e5e7eb; border-radius:12px; margin-bottom:8px; overflow:hidden; }
.vp-faq-q { padding:14px 18px; font-size:14px; font-weight:600; color:#1a2744; font-family:'Outfit',sans-serif; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:background .2s; }
.vp-faq-q:hover { background:#f9f6f0; }
.vp-faq-arrow { font-size:18px; color:#9ca3af; transition:transform .3s; }
.vp-faq-item.open .vp-faq-arrow { transform:rotate(90deg); color:#59b7b7; }
.vp-faq-a { display:none; padding:0 18px 14px; font-size:13px; line-height:1.6; color:#6b7280; font-family:'Outfit',sans-serif; }
.vp-faq-item.open .vp-faq-a { display:block; }

/* ═══ SIDEBAR CALC ═══ */
/* ═══ Calc card sticky — refonte 2026 ═══
   Avant : max-height + overflow-y:auto → scroll interne énervant.
   Maintenant : pas de cap de hauteur, la card est aussi grande qu'elle
   en a besoin et la sticky position la garde visible au scroll page. */
.vp-calc-col { position:sticky; top:90px; display:flex; flex-direction:column; gap:16px; align-self:start; }

/* ═══ Voyageurs ad/enf/beb sur 1 ligne ═══ */
.vp-pax-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px; }
.vp-pax-field label { display:block; font-size:11px; font-weight:700; color:#1a2744; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; font-family:'Outfit',sans-serif; }
.vp-pax-field select { width:100%; padding:10px 8px; border:1px solid #d1d5db; border-radius:8px; background:#fff; font-size:14px; font-family:'Outfit',sans-serif; cursor:pointer; }
.vp-pax-field select:focus { border-color:#59b7b7; outline:none; box-shadow:0 0 0 3px rgba(89,183,183,.15); }
.vp-calc-card { background:#fff; border-radius:22px; padding:28px; box-shadow:0 8px 40px rgba(0,0,0,.1); }
.vp-calc-title { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:#1a2744; margin:0 0 4px; }
.vp-calc-sub { font-size:12px; color:#6b7280; margin:0 0 18px; font-family:'Outfit',sans-serif; line-height:1.4; }
.vp-prix-barre { font-size:14px; font-family:'Outfit',sans-serif; margin-bottom:16px; color:#6b7280; }
.vp-prix-barre del { color:#dc2626; }
.vp-prix-barre strong { color:#59b7b7; font-size:18px; }
.vp-field { margin-bottom:16px; }
.vp-field label { display:block; font-size:11px; font-weight:700; color:#1a2744; text-transform:uppercase; letter-spacing:.8px; margin-bottom:6px; font-family:'Outfit',sans-serif; }

/* ═══ BÉBÉ NOTE ═══ */
.vp-bebe-note { font-size:12px; color:#6b7280; font-family:'Outfit',sans-serif; padding:8px 12px; background:#f0fafa; border-radius:8px; margin-bottom:16px; }
.vp-bebe-note strong { color:#59b7b7; }

/* ═══ OPTIONS IN CALC CARD ═══ */
.vp-calc-options { border-top:1.5px dashed #e5e7eb; padding-top:14px; margin-bottom:16px; }
.vp-calc-options-title { font-size:11px; font-weight:700; color:#1a2744; text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px; font-family:'Outfit',sans-serif; }
.vp-calc-opt-row {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    border:1.5px solid #e5e7eb; border-radius:10px; margin-bottom:6px;
    cursor:pointer; transition:all .2s; font-family:'Outfit',sans-serif;
}
.vp-calc-opt-row:hover { border-color:#b7dfdf; background:#fafffe; }
.vp-calc-opt-row:has(input:checked) { border-color:#59b7b7; background:#edf8f8; }
.vp-calc-opt-row input[type="checkbox"] { width:16px; height:16px; accent-color:#59b7b7; flex-shrink:0; cursor:pointer; }
.vp-calc-opt-label { flex:1; font-size:13px; font-weight:600; color:#1a2744; }
.vp-calc-opt-price { font-size:12px; font-weight:700; color:#59b7b7; white-space:nowrap; }

/* ═══ QTY BUTTONS ═══ */
.vp-qty-row { display:flex; align-items:center; gap:0; border:1.5px solid #e5e7eb; border-radius:12px; overflow:hidden; }
.vp-qty-btn { width:44px; height:44px; border:none; background:#f9f6f0; font-size:18px; font-weight:700; color:#1a2744; cursor:pointer; transition:background .2s; font-family:'Outfit',sans-serif; }
.vp-qty-btn:hover { background:#59b7b7; color:#fff; }
.vp-qty-val { flex:1; text-align:center; font-size:17px; font-weight:700; color:#1a2744; font-family:'Playfair Display',serif; }

/* ═══ PRICE RESULT ═══ */
.vp-price-result { border-top:1.5px solid #e5e7eb; padding-top:16px; margin-top:8px; }
.vp-price-lines { margin-bottom:12px; }
.vp-price-line { display:flex; justify-content:space-between; padding:5px 0; font-size:12px; font-family:'Outfit',sans-serif; color:#4a5568; }
.vp-price-total { display:flex; justify-content:space-between; align-items:baseline; padding:10px 0 0; border-top:2px solid #1a2744; }
.vp-price-total-label { font-size:11px; color:#6b7280; text-transform:uppercase; font-family:'Outfit',sans-serif; }
.vp-price-total-val { font-family:'Playfair Display',serif; font-size:28px; font-weight:700; color:#59b7b7; }
.vp-price-note { font-size:11px; color:#6b7280; text-align:center; margin-top:8px; font-family:'Outfit',sans-serif; }

/* ═══ CTA ═══ */
.vp-cta-btn { display:block; width:100%; padding:17px; background:linear-gradient(135deg,#59b7b7,#3d9a9a); color:#fff; border:none; border-radius:14px; font-family:'Outfit',sans-serif; font-size:16px; font-weight:700; cursor:pointer; margin-top:16px; transition:all .3s; letter-spacing:.3px; }
.vp-cta-btn:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(232,114,74,.3); }
.vp-cta-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* ═══ REASSURANCE ═══ */
.vp-reassurance { margin-top:18px; display:flex; flex-direction:column; gap:6px; }
.vp-reass-item { font-size:12px; color:#6b7280; font-family:'Outfit',sans-serif; }

/* ═══ LIGHTBOX ═══ */
.vp-lightbox { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; }
.vp-lightbox.active { display:flex; }
.vp-lightbox img { max-width:90vw; max-height:85vh; border-radius:12px; }
.vp-lightbox-close { position:absolute; top:20px; right:24px; color:#fff; font-size:32px; cursor:pointer; background:none; border:none; }
.vp-lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:40px; cursor:pointer; background:rgba(255,255,255,.1); border:none; border-radius:50%; width:50px; height:50px; display:flex; align-items:center; justify-content:center; }
.vp-lightbox-prev { left:20px; }
.vp-lightbox-next { right:20px; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:1024px) {
    /* Layout: 1 colonne, CALC EN HAUT */
    .vp-inner {
        grid-template-columns:1fr;
        padding:0 20px 60px;
    }
    .vp-calc-col {
        order:-1; /* Remonte au-dessus de vp-main */
        position:static;
        max-height:none;
        overflow-y:visible;
    }
    .vp-hero-content { padding:0 24px 40px; }
    .vp-gallery { grid-template-columns:1fr 1fr; }
    .vp-hotel-header { flex-direction:column; gap:10px; }

    /* Calendrier multi-mois: 1 colonne */
    .vp-content div[style*="grid-template-columns"],
    .vp-content div[style*="display:grid"],
    .vp-content div[style*="display: grid"],
    .vp-content div[style*="display:flex"],
    .vp-content div[style*="display: flex"] {
        display:block !important;
    }
    .vp-content div[style*="grid-template-columns"] > *,
    .vp-content div[style*="display:grid"] > *,
    .vp-content div[style*="display: grid"] > *,
    .vp-content div[style*="display:flex"] > *,
    .vp-content div[style*="display: flex"] > * {
        width:100% !important;
        max-width:100% !important;
        flex:none !important;
        margin-bottom:16px !important;
    }
}
@media (max-width:640px) {
    /* ═══ HERO MOBILE ═══ */
    .vp-hero { height:40vh; min-height:260px; }
    .vp-hero-video { height:40vh; min-height:260px; }
    .vp-hero-content { padding:0 16px 20px; }
    .vp-hero-parc { font-size:11px; letter-spacing:1px; margin-bottom:6px; }
    .vp-hero-title { margin-bottom:10px !important; }
    .vp-hero-meta { gap:5px; }
    .vp-meta-chip { font-size:10px; padding:5px 9px; }
    .vp-badge { top:12px; left:12px; font-size:10px; padding:5px 10px; }

    /* ═══ LAYOUT MOBILE ═══ */
    .vp-container { padding-top:0; }
    .vp-inner { padding:0 12px 32px; gap:14px; }

    /* ═══ CALC CARD MOBILE (en haut, compact) ═══ */
    .vp-calc-card {
        padding:18px;
        border-radius:16px;
        box-shadow:0 4px 20px rgba(0,0,0,.08);
    }
    .vp-calc-title { font-size:17px; margin-bottom:14px; }
    .vp-prix-barre { font-size:13px; margin-bottom:12px; }
    .vp-field { margin-bottom:12px; }
    .vp-field label { font-size:10px; margin-bottom:4px; }
    .vp-qty-row { border-radius:10px; }
    .vp-qty-btn { width:38px; height:38px; font-size:16px; }
    .vp-qty-val { font-size:15px; }
    .vp-bebe-note { padding:6px 10px; font-size:11px; margin-bottom:12px; }
    .vp-calc-options { padding-top:12px; margin-bottom:12px; }
    .vp-calc-options-title { font-size:10px; margin-bottom:8px; }
    .vp-calc-opt-row { padding:8px 10px; gap:8px; border-radius:8px; margin-bottom:4px; }
    .vp-calc-opt-label { font-size:12px; }
    .vp-calc-opt-price { font-size:11px; }
    .vp-price-result { padding-top:12px; margin-top:6px; }
    .vp-price-line { font-size:11px; }
    .vp-price-total { padding-top:8px; }
    .vp-price-total-label { font-size:10px; }
    .vp-price-total-val { font-size:22px; }
    .vp-price-note { font-size:10px; margin-top:6px; }
    .vp-cta-btn { font-size:14px; padding:14px; border-radius:12px; margin-top:12px; }
    .vp-reassurance { margin-top:12px; gap:4px; }
    .vp-reass-item { font-size:11px; }

    /* ═══ SECTIONS CONTENU MOBILE ═══ */
    .vp-section {
        padding:16px;
        border-radius:14px;
        margin-bottom:12px;
        box-shadow:0 2px 8px rgba(0,0,0,.03);
    }
    .vp-section-title { font-size:16px; margin-bottom:10px; }
    .vp-subtitle { font-size:13px; margin-bottom:10px; }
    .vp-content { font-size:13px; line-height:1.6; }
    .vp-gallery { grid-template-columns:1fr; gap:6px; border-radius:12px; }
    .vp-gal-item { aspect-ratio:16/9; }

    /* ═══ HOTEL CARD MOBILE ═══ */
    .vp-hotel-card { padding:16px; border-radius:12px; }
    .vp-hotel-name { font-size:16px; }
    .vp-hotel-stars { font-size:14px; }
    .vp-hotel-badges { gap:4px; }
    .vp-hotel-badges span { font-size:10px; padding:3px 8px; }
    .vp-hotel-desc { font-size:12px; }

    /* ═══ FAQ MOBILE ═══ */
    .vp-faq-item { border-radius:10px; margin-bottom:6px; }
    .vp-faq-q { padding:12px 14px; font-size:13px; }
    .vp-faq-a { padding:0 14px 12px; font-size:12px; }

    /* ═══ LIGHTBOX MOBILE ═══ */
    .vp-lightbox-nav { width:32px; height:32px; font-size:24px; }
    .vp-lightbox-prev { left:8px; }
    .vp-lightbox-next { right:8px; }
    .vp-lightbox img { max-width:96vw; border-radius:6px; }
    .vp-lightbox-close { top:12px; right:14px; font-size:28px; }

    /* ═══ CALENDRIER MULTI-MOIS MOBILE ═══ */
    .vp-content div[style*="grid-template-columns"],
    .vp-content div[style*="display:grid"],
    .vp-content div[style*="display: grid"],
    .vp-content div[style*="display:flex"],
    .vp-content div[style*="display: flex"],
    .vp-content .wp-block-columns {
        display:block !important;
        grid-template-columns:1fr !important;
    }
    .vp-content div[style*="grid-template-columns"] > *,
    .vp-content div[style*="display:grid"] > *,
    .vp-content div[style*="display: grid"] > *,
    .vp-content div[style*="display:flex"] > *,
    .vp-content div[style*="display: flex"] > * {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        flex:none !important;
        margin-bottom:12px !important;
    }
    .vp-content table {
        font-size:13px !important;
        min-width:0 !important;
        width:100% !important;
        table-layout:fixed !important;
    }
    .vp-content table td,
    .vp-content table th {
        padding:7px 2px !important;
        font-size:13px !important;
        line-height:1.2 !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }
    .vp-content table td span,
    .vp-content table td a {
        font-size:12px !important;
        padding:2px 4px !important;
    }
}

/* ═══ Mode Formule week-end : pas de carte billetterie → contenu pleine largeur ═══ */
.vp-inner--weekend { grid-template-columns:1fr; }

/* ═══ Sticky fit : quand la calc card est plus haute que l'écran, le JS ajuste
   top en négatif pour qu'en scrollant vers le bas on atteigne le BAS de la
   card (elle se cale alors sur le bas du viewport). ═══ */
.vp-calc-col { transition:none; }