/* ═══════════════════════════════════════════════════════
   LAYOUT — Two-column : main ~62% + sidebar sticky ~35%
   ═══════════════════════════════════════════════════════ */

.vp-layout {
    display: flex;
    align-items: flex-start;
    gap: 5rem;
    max-width: 1180px;
    margin: 0 auto;
    /* padding: 2.5rem 2rem 5rem; */
}

/* ── Colonne principale ─────────────────────────────── */
.vp-main {
    flex: 1 1 0;
    min-width: 0;
}

/* ── Section ────────────────────────────────────────── */
/* .vp-section {
    padding: 2.5rem 0;
} */

/* ── Sidebar ────────────────────────────────────────── */
.vp-sidebar {
    flex: 0 0 380px;
    width: 380px;
    padding-top: 0.5rem;
}

.vp-sidebar__sticky {
    /* position gérée par GSAP ScrollTrigger (sidebar-scroll.js) */
}

/* ── Responsive ─────────────────────────────────────── */
@media (min-width: 1280px) {
    .vp-layout {
        max-width: 1212px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 1080px) {
    /* Pas de barre/modale de réservation mobile portée pour l'instant :
       on garde le formulaire visible en le faisant passer sous le contenu
       principal plutôt que de le masquer complètement. */
    .vp-layout   { flex-direction: column; gap: 0; padding: 2rem 1.5rem 6rem; }
    .vp-sidebar  { width: 100%; flex: 1 1 auto; padding-top: 2rem; }
}

@media (max-width: 768px) {
    .vp-layout  { padding: 1.5rem 1.25rem 6rem; }
    .vp-section { padding: 2rem 0; }
}