/* ==========================================================================
   ML Voyages — Menu Jukebox
   Christophe Delire
   Version : 1.4.6 (2025-11-23)
   Option A — Version consolidée, propre, unifiée
   ========================================================================== */

/* 1) SIDEBAR — BASE */
.bart-jukebox-sidebar {
    width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    background: #f4f4f4;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-bottom: 200px !important;
}
.bart-jukebox-sidebar::-webkit-scrollbar { width: 6px; }
.bart-jukebox-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.2);
    border-radius: 3px;
}

/* 2) GROUPES */
.bart-jukebox-group { margin-bottom: 1.2rem; }
.bart-jukebox-sous-group { padding: 0 1rem; }
.bart-jukebox-sous-group .mlv-btn { margin: .35rem 0; width:100%; }

/* 3) BOUTONS CLASSIQUES */
.bart-jukebox-sidebar button,
.mlv-btn {
    display: block;
    width: 100%;
    padding: 14px 16px;
    margin: 6px 0;
    border-radius: 12px;
    border: none;
    background: #1e2f97;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align:center;
    cursor: pointer;
    transition: background .25s ease;
}
.bart-jukebox-sidebar button:hover { background:#0a1e6a; }

/* 4) COULEURS CATÉGORIES */
.mlv-btn-autocar      { background:#97d626 !important; }
.mlv-btn-avion        { background:#018942 !important; }
.mlv-btn-jour         { background:#fe7700 !important; }
.mlv-btn-spectacle    { background:#910791 !important; }
.mlv-btn-suggestion   { background:#ef011d !important; }

/* 5) BOUTONS INFOS — BLEUS sobres */
.mobile-page-2 .mlv-btn,
.mobile-page-2 .mlv-btn-child,
.mobile-page-2 .mlv-btn-parent {
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    padding:14px 16px;
    margin:6px 0;
    font-size:16px;
    font-weight:600;
    text-align:center;
    background:#1e2f97 !important;
    color:#fff !important;
    border:none !important;
    border-radius:12px !important;
}
.mobile-page-2 .mlv-btn:hover,
.mobile-page-2 .mlv-btn-child:hover,
.mobile-page-2 .mlv-btn-parent:hover {
    background:#0a1e6a !important;
}

/* 6) BACKGROUND */
.bart-jukebox-background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    opacity: .4;
    filter: blur(1px) brightness(.9);
    z-index: 0;
    pointer-events: none;
}

/* 7) CONTAINER */
.bart-jukebox-container {
    display:flex;
    flex-direction:row;
    gap:1.5rem;
    position:relative;
    z-index:1;
}

/* 8) DESKTOP */
@media(min-width:769px){
    .bart-jukebox-sidebar {
        position:fixed;
        top:167px;
        left:0;
        height:calc(100vh - 167px);
        overflow-y:auto;
    }
    .bart-jukebox-player {
        margin-left:300px;
        width:calc(100% - 300px);
    }
    .bart-sidebar-collapsed .bart-jukebox-sidebar {
        transform:translateX(-100%);
        opacity:0;
    }
    .bart-sidebar-collapsed .bart-jukebox-player {
        margin-left:0;
        width:100%;
    }
}

/* 9) MOBILE */
@media(max-width:768px){
    .bart-jukebox-sidebar {
        position:fixed !important;
        top:120px !important;
        left:0!important;
        width:100vw;
        bottom:0;
        height:auto!important;
        padding:10px 15px 200px!important;
        background:rgba(255,255,255,0.1);
        backdrop-filter:blur(12px);
        overflow-y:auto!important;
        overflow-x:hidden;
        z-index:99999!important;
    }
    body.bart-sidebar-hidden .bart-jukebox-sidebar {
        transform:translateX(-100vw);
    }
}

/* 10) ONGLETS STICKY */
.mobile-menu-tabs {
    position:sticky;
    top:0;
    z-index:100000;
    display:flex;
    justify-content:center;
    gap:10px;
    background:rgba(255,255,255,0.45);
    backdrop-filter:blur(8px);
    padding:12px 0;
    margin-bottom:14px;
    border-bottom:1px solid #c3d4e4;
}
.mobile-menu-tabs .mlv-btn-tab {
    flex:1 1 50%;
    padding:8px 14px;
    background:#e9f1f8;
    border:1px solid #b0c8dc;
    border-radius:20px;
    font-weight:600;
    cursor:pointer;
    text-transform:uppercase;
    color:#003366 !important;
    text-align:center;
}
.mobile-menu-tabs .mlv-btn-tab.active {
    background:#003366 !important;
    color:#fff !important;
    border-color:#003366 !important;
}

/* 11) TITRES PANNEAUX — BANDEAU BLEU */
.bart-jukebox-sidebar .toptitre,
.bart-jukebox-sidebar .toptitre a {
    display:block;
    width:100%;
    background:#003366;
    color:#fff !important;
    padding:12px 16px;
    margin:0 0 14px 0;
    font-size:16px;
    font-weight:700;
    text-transform:uppercase;
    text-decoration:none;
    border-radius:10px;
}

/* 12) TOGGLE */
#toggleSidebar {
    position:fixed !important;
    top:110px !important;
    left:12px !important;
    z-index:100001;
    width:42px;
    height:42px;
    background:rgba(0,0,0,0.55);
    color:#fff;
    font-size:22px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    backdrop-filter:blur(6px);
    transition:.2s ease-in-out;
}
#toggleSidebar:hover { background:rgba(0,0,0,0.75); }
body.bart-sidebar-hidden #toggleSidebar { left:12px!important; }

/* =====================================================================
   MLV — Nettoyage + harmonisation des boutons INFOS
   Christophe Delire — 2025-11-23
   ===================================================================== */

/* Boutons INFOS : taille réduite, centrés, élégants */
.mobile-page-2 .bart-jukebox-group button,
.mobile-page-2 .bart-jukebox-sous-group button {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    padding: 10px 14px !important;

    background: #ffffff !important;
    border: 2px solid #1e2f97 !important;
    border-radius: 12px !important;

    color: #1e2f97 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;

    margin: 8px 0 !important;
    box-sizing: border-box !important;
}

/* Hover plus discret */
.mobile-page-2 .bart-jukebox-group button:hover {
    background: #1e2f97 !important;
    color: #fff !important;
}

/* Correction du léger décalage horizontal */
.mobile-page-2 .bart-jukebox-group,
.mobile-page-2 .bart-jukebox-sous-group {
    padding: 0 !important;
    margin: 0 !important;
}

/* Correction de l’alignement interne */
.mobile-page-2 .bart-jukebox-sous-group button {
    padding-left: 14px !important;
}