/*------------------------------------
 * BORGAR - RESPONSIVE MOBILE
 * A ajouter à la FIN de borgar.css
 * (et de borgar1.css à borgar9.css)
 *------------------------------------*/

html {
    overflow-x: hidden;
}

@media screen and (max-width: 768px) {

    /* ===== RESET GLOBAL ===== */

    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    #page {
        min-width: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 100dvh;
        overflow-x: hidden !important;
    }

    /* ===== ORDRE D'AFFICHAGE ===== */

    #menuhaut2 {
        order: 0 !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        height: auto !important;
        padding: 4px 0;
        flex-shrink: 0;
    }

    #menuhaut {
        order: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 60px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        flex-shrink: 0;
        -webkit-overflow-scrolling: touch;
        padding: 4px 0;
        float: none !important;
        clear: both !important;
    }

    #menuhaut3 {
        order: 1 !important;
        width: 100% !important;
        height: auto !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0;
        float: none !important;
        clear: both !important;
    }

    #central {
        order: 2 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        float: none !important;
        clear: both !important;
    }

    #central2 {
        order: 2 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        float: none !important;
        clear: both !important;
    }

    #mobile-nav {
        order: 3 !important;
    }

    /* Colonnes masquées sur mobile */
    #leftblock,
    #rightblock {
        display: none !important;
        order: 99 !important;
        float: none !important;
    }

    /* ===== TITRE PAGE ACCUEIL ===== */

    center font, center > font {
        font-size: 18px !important;
        display: block !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }

    /* ===== TABLES ET IMAGES ===== */

    table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    td, th {
        word-break: break-word !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    div#carte {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .scrollbox,
    .scrollbox_nuit {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    #menuhaut .scrollbox,
    #menuhaut .scrollbox_nuit {
        width: auto !important;
        overflow: visible !important;
        display: inline-flex;
        align-items: center;
    }

    /* ===== BARRE DE NAVIGATION FIXE EN BAS ===== */

    #mobile-nav {
        display: flex !important;
        flex-shrink: 0;
        width: 100%;
        height: 56px;
        background-color: #173046;
        border-top: 2px solid #3D81EE;
        position: sticky;
        bottom: 0;
        z-index: 1000;
    }

    .mobile-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #ABCDFF;
        font-family: 'stanberry';
        font-size: 11px;
        text-decoration: none;
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 4px 2px;
        gap: 2px;
    }

    .mobile-nav-btn:active,
    .mobile-nav-btn.active {
        background-color: #0d2035;
        color: white;
    }

    .mobile-nav-btn .nav-icon {
        font-size: 20px;
        line-height: 1;
    }

    .mobile-nav-btn .nav-label {
        font-size: 10px;
        white-space: nowrap;
    }

    /* ===== OVERLAY ===== */

    .mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 998;
    }

    .mobile-overlay.open {
        display: block;
    }

    /* ===== PANNEAU GAUCHE (Inscription) ===== */

    #leftblock.mobile-open {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 85vw !important;
        max-width: 320px !important;
        height: calc(100dvh - 56px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 999 !important;
        float: none !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    /* ===== PANNEAU DROIT (Cartes & Infos) ===== */

    #rightblock.mobile-open {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 85vw !important;
        max-width: 320px !important;
        height: calc(100dvh - 56px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 999 !important;
        float: none !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    /* Contenu dans les panneaux */
    #leftblock.mobile-open *,
    #rightblock.mobile-open * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    #leftblock.mobile-open img,
    #rightblock.mobile-open img {
        max-width: 100% !important;
        height: auto !important;
    }

    #leftblock.mobile-open table,
    #rightblock.mobile-open table {
        width: 100% !important;
        table-layout: fixed !important;
    }

    /* Entrelacs header/footer = bouton fermer sur mobile */
    #leftblock_header,
    #leftblock_footer,
    #rightblock_header,
    #rightblock_footer {
        cursor: pointer !important;
        width: 100% !important;
    }

    /* Indication visuelle que c'est cliquable */
    #leftblock_header::after,
    #rightblock_header::after {
        content: ' ✕';
        color: #ABCDFF;
        font-size: 12px;
        float: right;
        margin-right: 8px;
    }

    /* Modal dhtmlwindow plein écran */
    .dhtmlwindow {
        width: 95vw !important;
        left: 2.5vw !important;
        max-height: 80vh !important;
    }

}

/* ===== TOUJOURS MASQUÉ SUR PC ===== */
#mobile-nav {
    display: none;
}

.mobile-overlay {
    display: none;
}