html.dark body {
    background: red !important;
}

.page-wrapper {
    display: flex;
    height: 100vh; /* au lieu de height */
    overflow: hidden;  /* tu peux garder ou supprimer */
}


/* Panneau mobile à gauche */
.mobile-panel {
    width: 520px;
    max-width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #ddd;
    flex-shrink: 0;
}

/* Navbar interne (simple, propre) */
.mobile-navbar {
    padding: 10px 15px;
    background: #fff;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

/* Contenu scrollable */
.mobile-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

/* Footer interne */
.mobile-footer {
    padding: 10px 15px;
    background: #fff;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

/* Panneau droit (desktop) */
.page-content {
    flex: 1;
    overflow-y: auto;
    background: #f5f5f5;
}

/* Mobile : panneau droit caché */
@media (max-width: 768px) {
    .page-wrapper {
        display: block;
        height: auto;
    }

    .mobile-panel {
        width: 100% !important;
        height: auto;
        border-right: none;
    }

    .page-content {
        display: none;
    }
}


@media (max-width: 768px) {
    .mobile-panel {
        position: relative;
        padding-bottom: 70px; /* hauteur du footer */
    }

    .mobile-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 20;
    }
}

/* Uniquement pour le panneau droit de show_ajax */
.event-detail-panel {
    width: 420px;
    max-width: 420px;
    flex: none;
}

/* Desktop : panneau gauche fixe et non compressible */
@media (min-width: 992px) {

    .page-wrapper {
        display: flex;
        align-items: stretch;
    }

    .mobile-panel {
        width: 520px !important;
        max-width: 520px !important;
        flex: 0 0 520px !important; /* 🔥 clé absolue */
        overflow-y: auto;
        height: 100vh;
    }

    .page-content {
        flex: 1 1 auto !important;
        min-width: 0 !important; /* 🔥 indispensable */
        overflow-y: auto;
    }
}

/* MODE SOMBRE GLOBAL */
html.dark {
    background-color: #0f0f0f;
    color: #e5e5e5;
}

/* Cartes */
html.dark .form-card {
    background: #1a1a1a;
    box-shadow: none;
}

/* Inputs */
html.dark .form-control,
html.dark .form-select {
    background: #2a2a2a;
    border-color: #444;
    color: #e5e5e5;
}

html.dark .form-control::placeholder {
    color: #888;
}

/* Titres */
html.dark .section-title {
    color: #fff;
}

/* Navbar iOS */
html.dark .ios-footer {
    background: #1a1a1a;
    border-top-color: #333;
}

html.dark .ios-icon i {
    color: #e5e5e5;
}

/* Avatar navbar */
html.dark .avatar-img {
    border-color: #2563eb;
}

/* Tags (langues & intérêts) */
html.dark .tag-btn {
    background: #2a2a2a;
    border-color: #444;
    color: #ddd;
}

html.dark .tag-btn.selected {
    background: #2563eb;
    border-color: #1d4ed8;
    color: white;
}

/* Bouton submit */
html.dark .btn-submit {
    background: #2563eb;
    color: white;
}