/* ============================================================
   RESPONSIVE READER — Mobile & Tablette
   Commun à toutes les pages lecteur du site LAHALEX
   Patterns couverts :
     1. Grille Bootstrap 3 colonnes  (fiches-de-methode, fiches-de-synthese)
     2. Flexbox + sidenav glissante  (décisions, doctrine, veille, docs)
     3. Lecteur documents (documents-articles/reader)
   ============================================================ */

/* =========================
   TABLETTE (768px – 991px)
   ========================= */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* ── Grille Bootstrap ── */
    .scrollable-container {
        height: calc(100vh - 160px) !important;
        overflow: hidden !important;
    }

    /* Sidebar gauche réduite — la droite est en mode icône (voir bloc tablette en bas) */
    .col-md-3.sidebar-left {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    /* ── Sidenav flexbox ── */
    .scrollable-container.d-flex,
    .scrollable-container {
        height: calc(100vh - 140px) !important;
    }

    /* Réduction du padding sur tablette */
    .article-content p,
    .decision-content p {
        font-size: 0.93rem;
    }

    /* Document reader */
    .col-md-7.vh-100 {
        height: calc(100vh - 140px) !important;
    }

    /* ── Jurisprudences : mobile-bottom-nav visible aussi sur tablette ── */
    /* Bootstrap .d-md-none masque à partir de 768px — on force la visibilité */
    .mobile-bottom-nav {
        display: flex !important;
    }

    /* Les outils internes de la sidenav jurisprudences (masqués sur desktop) */
    .sidenav .d-md-none {
        display: block !important;
    }
}

/* =========================
   MOBILE (≤ 767px)
   ========================= */
@media (max-width: 767.98px) {

    /* ──────────────────────────────────────────────
       1. CONTENEUR — désactive la hauteur fixe
       ────────────────────────────────────────────── */
    .scrollable-container {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        display: block !important;
        padding-bottom: 70px; /* espace pour la barre de navigation basse */
    }

    .scrollable-container .row,
    .scrollable-container > .row {
        height: auto !important;
    }

    /* ──────────────────────────────────────────────
       2. COLONNES — masque les sidebars, pleine largeur pour le contenu
       ────────────────────────────────────────────── */

    /* Cache les sidebars gauche et droite */
    .col-md-3.sidebar-left,
    .col-md-2.sidebar-right,
    #rightSidebar {
        display: none !important;
    }

    /* Le contenu prend 100% de la largeur */
    .col-md-7.scrollable-sequences,
    .col-md-7.scrollable-results,
    .col-md-7.scrollable-sequences.scrollable-results {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 1.75rem 0.75rem 80px !important; /* top augmenté pour descendre le titre */
    }

    /* ──────────────────────────────────────────────
       3. SIDENAV (pattern décisions / doctrine / veille)
       ────────────────────────────────────────────── */

    /* Sidebar glissante masquée par défaut */
    .sidenav,
    .scrollable-sidebar.sidenav {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 82vw !important;
        max-width: 310px !important;
        height: 100vh !important;
        z-index: 1050 !important;
        overflow-y: auto !important;
        transition: left 0.3s ease !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.18) !important;
        padding-top: 65px !important;
        background-color: #FAF5EF !important;
    }

    .sidenav.active,
    .scrollable-sidebar.sidenav.active {
        left: 0 !important;
    }

    /* Contenu principal sans décalage */
    .with-sidebar,
    #mainContent.with-sidebar {
        margin-left: 0 !important;
        padding-bottom: 80px !important;
    }

    /* Conteneur flexbox → colonne simple */
    .scrollable-container.d-flex {
        flex-direction: column !important;
        height: auto !important;
    }

    .scrollable-column,
    .scrollable-sidebar.flex-grow-1 {
        height: auto !important;
        overflow: visible !important;
        flex: none !important;
    }

    /* ──────────────────────────────────────────────
       4. OVERLAY (fond sombre quand sidebar ouverte)
       ────────────────────────────────────────────── */
    #sidebarOverlay,
    .rl-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.48);
        z-index: 1049;
    }

    #sidebarOverlay.active,
    .rl-sidebar-overlay.active {
        display: block;
    }

    /* ──────────────────────────────────────────────
       5. DRAWER SOMMAIRE (grille Bootstrap)
       ────────────────────────────────────────────── */
    .rl-drawer {
        position: fixed;
        top: 0;
        left: -100%;
        width: 82vw;
        max-width: 320px;
        height: 100vh;
        background-color: #FAF5EF;
        z-index: 2147483647; /* Always on top, covering bottom nav */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
        transition: left 0.3s ease;
        padding: 1rem;
        padding-top: 65px;
        padding-bottom: 85px; /* Space above the bottom nav bar (60px + margin) */
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.18);
    }

    .rl-drawer.active {
        left: 0;
    }

    .rl-drawer-right {
        left: auto;
        right: -100%;
        transition: right 0.3s ease;
    }

    .rl-drawer-right.active {
        left: auto;
        right: 0;
    }

    /* ──────────────────────────────────────────────
       6. BARRE DE NAVIGATION BASSE (mobile tab bar)
       ────────────────────────────────────────────── */
    .rl-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        min-height: 60px;
        background: #ffffff;
        border-top: 2px solid #e5e5e5;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
        z-index: 2147483647 !important; /* Above debugbar and all overlays */
        display: flex !important;
        align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .rl-bottom-nav .rl-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.68rem;
        color: #777;
        cursor: pointer;
        border: none;
        background: none;
        gap: 2px;
        transition: color 0.2s, background 0.2s;
        -webkit-tap-highlight-color: transparent;
    }

    .rl-bottom-nav .rl-tab i {
        font-size: 1.1rem;
    }

    .rl-bottom-nav .rl-tab.active,
    .rl-bottom-nav .rl-tab:focus {
        color: #A7840F;
        background: #fff9ee;
    }

    .rl-bottom-nav .rl-tab span {
        line-height: 1;
    }

    /* ──────────────────────────────────────────────
       7. DOCUMENT READER (documents-articles)
       ────────────────────────────────────────────── */

    /* Cache la sidebar gauche articles */
    .col-md-3:has(#article-sidebar),
    #article-sidebar,
    .col-md-3.border-end {
        display: none !important;
    }

    /* Contenu pleine largeur */
    .col-md-7.vh-100,
    .col-md-7.overflow-auto {
        height: auto !important;
        overflow: visible !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-bottom: 80px !important;
    }

    /* ──────────────────────────────────────────────
       8. TYPOGRAPHIE & CONTENU
       ────────────────────────────────────────────── */

    .article-content p,
    .decision-content p,
    .prose-sm p {
        font-size: 0.92rem !important;
        line-height: 1.65;
    }

    .article-content h1,
    .decision-content h1 { font-size: 1.3rem !important; }
    .article-content h2,
    .decision-content h2 { font-size: 1.15rem !important; }
    .article-content h3,
    .decision-content h3 { font-size: 1rem !important; }

    h3.fw-bold.text-primary { font-size: 1.1rem !important; }

    /* Tables scrollables horizontalement */
    .article-content table,
    .decision-content table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Breadcrumb tronqué */
    .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .breadcrumb::-webkit-scrollbar { display: none; }
    .breadcrumb-item { flex-shrink: 0; }

    /* Bouton retour */
    .d-flex.align-items-center.gap-3.mt-4 {
        padding-bottom: 0.5rem;
    }

    /* ──────────────────────────────────────────────
       9. PAGES INDEX / RECHERCHE
       ────────────────────────────────────────────── */

    /* Sidebar de filtres → masquée + accessible via bouton */
    .filter-sidebar-col {
        display: none !important;
    }

    .filter-sidebar-col.mobile-open {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 85vw;
        max-width: 320px;
        height: 100vh;
        background: white;
        z-index: 1050;
        overflow-y: auto;
        padding: 1rem;
        padding-top: 65px;
        box-shadow: 4px 0 20px rgba(0,0,0,0.2);
    }

    /* Cartes résultats : pleine largeur */
    .result-card,
    .col-md-4,
    .col-md-6 {
        margin-bottom: 0.75rem;
    }

    /* Barre de recherche pleine largeur */
    .search-bar-container {
        width: 100% !important;
    }

    /* Input groups empilés */
    .input-group {
        margin-bottom: 0.5rem;
    }

    /* ──────────────────────────────────────────────
       10. CORRECTIFS GÉNÉRAUX
       ────────────────────────────────────────────── */

    /* Évite les débordements horizontaux */
    body { overflow-x: hidden; }

    /* Images responsive */
    img { max-width: 100%; height: auto; }

    /* Padding réduit sur les conteneurs */
    .px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

    /* Masquer le texte des boutons d'action longs */
    .d-flex.gap-3 .btn span.d-none-mobile { display: none !important; }

    /* Modal pleine largeur */
    .modal-dialog { margin: 0.5rem !important; }
    .modal-dialog.modal-dialog-centered { align-items: flex-end; margin: 0 !important; }
    .modal-content { border-radius: 12px 12px 0 0 !important; }
}

/* =========================
   CORRECTIONS COMMUNES (mobile + tablette)
   ========================= */

/* Scrollbars fines sur petits écrans */
@media (max-width: 991.98px) {
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius: 4px; }

    /* Titre de fiche / décision adaptatif */
    h3.fw-bold.mb-3.text-primary {
        font-size: 1.1rem;
        line-height: 1.35;
    }

    /* Accordéons moins larges */
    .accordion-button {
        font-size: 0.9rem;
        padding: 0.6rem 0.8rem;
    }
}

/* Bottom-nav et drawers masqués uniquement au-dessus de 991px (desktop) */
@media (min-width: 992px) {
    .rl-bottom-nav { display: none !important; }
    .rl-drawer     { display: none !important; }
    .rl-sidebar-overlay { display: none !important; }
}

/* ===================================================
   TABLETTE (768px – 991px) — Sidebar compacte + Drawers
   =================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Afficher la bottom-nav sur tablette aussi */
    .rl-bottom-nav {
        display: flex !important;
        height: 60px;
        z-index: 2147483647 !important;
    }

    /* Autoriser les drawers à s'afficher quand .active */
    .rl-drawer {
        display: block !important;
    }

    /* Sidebar droite annotations : compacte (icônes seules) */
    .col-md-2.sidebar-right {
        display: flex !important;
        flex: 0 0 56px !important;
        max-width: 56px !important;
        padding: 0 4px !important;
        overflow: hidden;
    }

    /* Masquer les labels/textes dans la sidebar droite compacte */
    .col-md-2.sidebar-right h6,
    .col-md-2.sidebar-right .position-relative,
    .col-md-2.sidebar-right .btn span {
        display: none !important;
    }

    /* Boutons ronds icône-only dans la sidebar droite compacte */
    .col-md-2.sidebar-right .btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        margin-bottom: 8px !important;
        font-size: 0.9rem !important;
    }

    /* Container interne de la sidebar droite en colonne centrée */
    .col-md-2.sidebar-right .scrollable-sidebar-right,
    .col-md-2.sidebar-right .d-flex {
        align-items: center !important;
        padding-top: 0.5rem !important;
    }

    /* Ajuster la répartition des colonnes sur tablette avec sidebar droite compacte */
    .col-md-3.sidebar-left {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .col-md-7.scrollable-sequences,
    .col-md-7.scrollable-results,
    .col-md-7.scrollable-sequences.scrollable-results {
        flex: 0 0 calc(75% - 56px) !important;
        max-width: calc(75% - 56px) !important;
        width: calc(75% - 56px) !important;
    }

    /* Padding pour laisser place à la bottom-nav tablette */
    .col-md-7.scrollable-sequences,
    .col-md-7.scrollable-results {
        padding-bottom: 64px !important;
    }
}

/* ==========================================================================
   PAGES SANS SOMMAIRE (JURISPRUDENCES & DOCTRINES EN DÉTAIL)
   ========================================================================== */

/* Masquer la sidebar gauche, les boutons de toggle et la bottom-nav */
body.no-sommaire-page #sidenav,
body.no-sommaire-page .sidenav,
body.no-sommaire-page #btnSommaire,
body.no-sommaire-page #toggleSidebarBtn,
body.no-sommaire-page #sidebarToggleMobile,
body.no-sommaire-page .sidebarToggleMobile,
body.no-sommaire-page #sidebarToggle,
body.no-sommaire-page .sidebarToggle,
body.no-sommaire-page .mobile-bottom-nav,
body.no-sommaire-page .rl-bottom-nav,
body.no-sommaire-page .rl-drawer,
body.no-sommaire-page .rl-sidebar-overlay,
body.no-sommaire-page #mobileOverlay,
body.no-sommaire-page .mobile-overlay {
    display: none !important;
}

/* Règle séparée pour éviter que l'absence de support de :has() n'annule tout le bloc */
body.no-sommaire-page .py-1:has(#toggleSidebarBtn) {
    display: none !important;
}

/* Supprimer le padding-bottom sur le body et les colonnes de contenu car il n'y a plus de bottom-nav */
body.no-sommaire-page,
body.no-sommaire-page .col-md-7.scrollable-sequences,
body.no-sommaire-page .col-md-7.scrollable-results,
body.no-sommaire-page #mainContent,
body.no-sommaire-page .with-sidebar,
body.no-sommaire-page .scrollable-content {
    padding-bottom: 0 !important;
}

/* Forcer le contenu à prendre toute la largeur disponible */
body.no-sommaire-page .with-sidebar,
body.no-sommaire-page #mainContent.with-sidebar {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

/* Sur tablette (768px - 991.98px), recalculez la grille sans sidebar gauche */
@media (min-width: 768px) and (max-width: 991.98px) {
    body.no-sommaire-page .col-md-7.scrollable-sequences,
    body.no-sommaire-page .col-md-7.scrollable-results,
    body.no-sommaire-page .col-md-7.scrollable-sequences.scrollable-results {
        flex: 0 0 calc(100% - 56px) !important;
        max-width: calc(100% - 56px) !important;
        width: calc(100% - 56px) !important;
    }
}