/* =====================================================================
   Fana'Briques — Adaptation mobile globale (layout_modern)
   Chargée après les styles spécifiques des pages.
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

/* ── Barre mobile ─────────────────────────────────────────────────── */
.fana-mobile-bar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
.fana-mobile-logo img { max-height: 40px; width: auto; }
.fana-burger {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #2c3e50; color: #fff;
    border: 0; border-radius: 10px;
    font-size: 1.6rem; line-height: 1;
}
.fana-burger:active { transform: scale(.95); }

.fana-offcanvas { width: 85vw !important; max-width: 340px; }
.fana-offcanvas .offcanvas-header {
    background: linear-gradient(135deg, #2c3e50 0%, #3d5a80 100%);
    color: #fff;
}
.fana-menu-section {
    padding: 14px 20px 4px;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: #6c757d;
}
.fana-menu-item {
    display: flex; align-items: center; gap: 14px;
    min-height: 52px; padding: 0 20px;
    color: #212529; text-decoration: none;
    font-size: 1.05rem; font-weight: 500;
    border-left: 4px solid transparent;
}
.fana-menu-item i { font-size: 1.25rem; width: 24px; text-align: center; color: #3d5a80; }
.fana-menu-item.text-danger i { color: inherit; }
.fana-menu-item:active, .fana-menu-item:hover { background: #f1f3f5; }
.fana-menu-item.active { background: #e7f1ff; border-left-color: var(--fana-primary, #337ab7); color: var(--fana-primary, #337ab7); font-weight: 700; }
.fana-lang {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 8px;
    text-decoration: none; color: #495057; font-weight: 600;
    border: 1px solid #dee2e6;
}
.fana-lang.active { background: #e7f1ff; border-color: var(--fana-primary, #337ab7); color: var(--fana-primary, #337ab7); }

/* ── Tablettes et téléphones (< 768px) ───────────────────────────── */
@media (max-width: 767.98px) {

    /* Conteneurs : marges réduites */
    #modern-wrapper .container,
    #modern-wrapper .container-fluid,
    #modern-wrapper .container-xxl,
    #modern-wrapper .container-xl,
    #modern-wrapper .container-lg { padding-left: 10px !important; padding-right: 10px !important; }
    #modern-wrapper .row { --bs-gutter-x: .75rem; }
    .px-4, .px-5 { padding-left: .75rem !important; padding-right: .75rem !important; }
    .p-4, .p-5 { padding: 1rem !important; }

    /* Titres */
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }
    .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-size: 1.75rem; }

    /* Cartes */
    .card { margin-bottom: 1rem; border-radius: .75rem; }
    .card-body { padding: .85rem; }
    .card-header, .card-footer { padding: .65rem .85rem; }
    .card-header.d-flex, .card-header .d-flex { flex-wrap: wrap; gap: .5rem; }

    /* Largeurs fixes inline neutralisées */
    [style*="width:"]:not(img):not(.progress-bar):not(.position-absolute):not(td):not(th):not(.rounded-circle) { max-width: 100%; }
    [style*="min-width"]:not(.table-responsive *):not(.dataTables_wrapper *) { min-width: 0 !important; }

    /* Formulaires : 16px empêche le zoom auto d'iOS, cibles tactiles */
    input.form-control, select.form-select, select.form-control, textarea.form-control,
    .form-control, .form-select, .dataTables_filter input, .dataTables_length select {
        font-size: 16px !important;
        min-height: 44px;
    }
    .form-control-sm, .form-select-sm { min-height: 38px; }
    .form-check-input { width: 1.25em; height: 1.25em; }
    .form-check { min-height: 1.75rem; }
    .input-group { flex-wrap: nowrap; }
    .row > [class*="col-"] > .form-label, label { margin-bottom: .25rem; }

    /* Boutons */
    .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
    .btn-sm { min-height: 34px; }
    .btn-group { flex-wrap: wrap; }
    .btn-toolbar, .d-flex.gap-1, .d-flex.gap-2 { flex-wrap: wrap; }

    /* Onglets / pills : défilement horizontal au lieu de casser la mise en page */
    .nav-tabs, .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }

    /* Fil d'Ariane compact */
    .breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; font-size: .85rem; }

    /* Tableaux : défilement horizontal fluide */
    .table-responsive, .fana-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: 0; margin-right: 0;
    }
    .table { font-size: .875rem; }
    .table > :not(caption) > * > * { padding: .45rem .5rem; }

    /* DataTables */
    .dataTables_wrapper .row { margin: 0; }
    .dataTables_wrapper .row > div { padding: 0; }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate { text-align: left !important; float: none !important; margin-bottom: .5rem; }
    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label { display: flex; align-items: center; gap: .5rem; width: 100%; }
    .dataTables_wrapper .dataTables_filter input { flex: 1; margin-left: 0 !important; width: 100% !important; }
    .dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: center; }
    .dataTables_wrapper .dataTables_paginate .page-link { min-width: 40px; text-align: center; }

    /* Modales : plein écran sur téléphone */
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: none !important;
        width: auto !important;
        margin: 0 !important;
        min-height: 100%;
    }
    .modal-dialog:not(.modal-sm) { height: 100%; }
    .modal-dialog:not(.modal-sm) .modal-content {
        min-height: 100%;
        border-radius: 0 !important;
    }
    #modalGlobal .modal-header { border-radius: 0 !important; position: sticky; top: 0; z-index: 2; }
    .modal-dialog.modal-sm { margin: auto 1rem !important; display: flex; align-items: center; }
    .modal-body { padding: 1rem !important; }
    .modal-footer { position: sticky; bottom: 0; background: #f8f9fa; z-index: 2; }
    .modal-footer > .btn { flex: 1 1 auto; }

    /* Alertes / toasts */
    .alert.position-fixed { left: .75rem !important; right: .75rem !important; min-width: 0 !important; }

    /* Accordéons */
    .accordion-button { padding: .85rem 1rem; font-size: .95rem; }

    /* Pied de page */
    #modern-footer p { font-size: .72rem !important; padding: 0 .5rem; }

    /* Aperçu d'image au survol : inutile au doigt */
    #image-preview-tooltip { display: none !important; }

    /* Select2 / Tagify */
    .select2-container { width: 100% !important; }
    .tagify { min-height: 44px; }
}

/* ── Petits téléphones (< 400px) ─────────────────────────────────── */
@media (max-width: 399.98px) {
    .table { font-size: .8rem; }
    .btn { padding-left: .6rem; padding-right: .6rem; }
    .badge { white-space: normal; }
}

/* Appareils tactiles : pas d'effets de survol collants */
@media (hover: none) {
    .img-hover-preview { cursor: default; }
}


/* ── Boutons icône seule sur téléphone ───────────────────────────────
   .btn-icon-m  : action secondaire → icône seule (libellé en title/aria-label)
   .btn-main-m  : action principale → pleine largeur, libellé conservé
   ------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .btn-icon-m {
        width: 64px;
        min-height: 56px;
        padding: 6px 2px 4px !important;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        border-radius: 12px;
    }
    .btn-icon-m > i { margin: 0 !important; font-size: 1.3rem; line-height: 1; }
    .btn-icon-m .btn-label {
        display: block;
        max-width: 100%;
        font-size: 10px;
        line-height: 1.1;
        font-weight: 500;
        overflow: hidden;
        white-space: normal;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .btn-main-m {
        order: -1;              /* toujours en tête, seul sur sa ligne */
        flex: 1 1 100%;
        min-height: 44px;
        font-weight: 600;
    }
}

/* ── Onglets icône + compteur, boutons icône seule (page récap) ── */
@media (max-width: 575.98px) {
    .nav-tabs-icons-m { flex-wrap: nowrap; }
    .nav-tabs-icons-m .nav-item { flex: 1 1 0; }
    .nav-tabs-icons-m .nav-link {
        width: 100%;
        display: flex; align-items: center; justify-content: center; gap: 3px;
        padding: .6rem .25rem;
        font-size: 1.2rem;
    }
    .nav-tabs-icons-m .nav-link > i { margin: 0 !important; }
    .nav-tabs-icons-m .tab-label { display: none; }
    .nav-tabs-icons-m .badge { font-size: .65rem; margin-left: 0 !important; padding: .2em .45em; }

    .btn-icon-only-m { width: 44px; height: 44px; padding: 0 !important; font-size: 1.2rem; }
    .btn-icon-only-m > i { margin: 0 !important; }
    .btn-icon-only-m .btn-text { display: none; }
}