/* =====================================================================
   MB TECH — Interface TÉLÉPHONE / PLIABLE (couche chargée EN DERNIER)
   Ne s'applique qu'aux écrans étroits : l'affichage ordinateur n'est pas modifié.
   Échelle unique pour tout le site (pas de tailles « au hasard ») :
     texte 16 px · contrôles 48 px · coins 14 px · espacements 8 / 12 / 16 px
   Écrans visés :
     ≤ 699 px  téléphones (Z Fold fermé 344 px, iPhone, Pixel…) : barre du bas + cartes
     700–1100  pliables ouverts, tablettes : menu du haut conservé, tableaux en grand
     écran double (Surface Duo, pliables à charnière) : contenu aligné de part et d'autre de la charnière
   ===================================================================== */

:root {
    --m-haut: 56px;                 /* hauteur de la barre du haut */
    --m-bas: 64px;                  /* hauteur de la barre du bas */
    --m-ctrl: 48px;                 /* hauteur de tout bouton / champ */
    --m-coin: 14px;
    --m-bleu: var(--primary-color, #1e40af);
    --m-fond: #f3f5f9;
    --m-trait: #e3e7ef;
    --m-texte: #111827;
    --m-doux: #6b7280;
    --m-ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06);
    --m-bas-reel: calc(var(--m-bas) + env(safe-area-inset-bottom, 0px));
}

/* Éléments créés par mobile.js : invisibles sur grand écran */
#mBarreBas, #mFeuille, #mVoile, #mTitre, #mFullBar, #mConseilRotation { display: none; }

/* ============================================================
   1) TÉLÉPHONES (≤ 699 px)
   ============================================================ */
@media (max-width: 699px) {
    html { -webkit-text-size-adjust: 100%; }
    body { background: var(--m-fond); font-size: 16px; overscroll-behavior-y: none; padding: 0 !important; }
    * { -webkit-tap-highlight-color: transparent; }
    button, a, select, input, textarea, label { touch-action: manipulation; }

    /* ---------- Barre du haut : logo + nom de la page ---------- */
    .sticky-header-group { position: sticky; top: 0; z-index: 900; }
    .header {
        flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important;
        gap: 12px !important; min-height: var(--m-haut); height: calc(var(--m-haut) + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)) !important;
        border-bottom: 1px solid var(--m-trait) !important; box-shadow: none !important; background: #fff !important;
    }
    .header > a { flex: none !important; display: block; }
    .header .logo { height: 32px !important; width: auto !important; max-width: none !important; display: block; flex: none; }
    .header-content { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: 0 !important; }
    .header-content h1, .nav-tabs, .header-buttons, .mobile-nav-toggle, .mobile-nav-install { display: none !important; }
    #mTitre {
        display: block; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; font-weight: 800; color: var(--m-texte);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* ---------- Contenu ---------- */
    .container { padding: 0 !important; max-width: none !important; }
    .tab-content {
        padding: 14px max(14px, env(safe-area-inset-right, 0px)) calc(var(--m-bas-reel) + 84px) max(14px, env(safe-area-inset-left, 0px)) !important;
    }
    .section-header { margin: 0 0 12px !important; padding: 0 !important; display: block !important; }
    .section-header h2 { font-size: 22px !important; margin: 0 0 12px !important; }

    /* ---------- Barre du bas (créée par mobile.js) ---------- */
    #mBarreBas {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
        height: var(--m-bas-reel); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        background: #fff; border-top: 1px solid var(--m-trait); box-shadow: 0 -4px 16px rgba(16, 24, 40, .06);
    }
    #mBarreBas button {
        flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        background: none; border: 0; padding: 6px 2px; color: var(--m-doux); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; position: relative;
    }
    #mBarreBas .m-ico { font-size: 22px; line-height: 1; }
    #mBarreBas button.actif { color: var(--m-bleu); font-weight: 800; }
    #mBarreBas button.actif::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--m-bleu); }
    #mBarreBas .badge-conges { position: absolute; top: 6px; right: 22%; margin: 0; }

    /* ---------- Menu « Plus » = feuille qui monte du bas ---------- */
    #mVoile { display: block; position: fixed; inset: 0; z-index: 1090; background: rgba(15, 23, 42, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
    body.m-menu-ouvert #mVoile { opacity: 1; pointer-events: auto; }
    .mobile-nav-dropdown { position: static !important; width: 0 !important; height: 0; overflow: visible; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
    .mobile-nav-list {
        display: block !important; position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; z-index: 1100; width: auto !important;
        max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
        background: #fff; border: 0 !important; border-radius: 22px 22px 0 0 !important; box-shadow: 0 -10px 40px rgba(15, 23, 42, .25) !important;
        transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s;
        display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    }
    body.m-menu-ouvert .mobile-nav-list { transform: none; visibility: visible; transition: transform .25s ease; }
    .mobile-nav-list::before { content: ''; grid-column: 1 / -1; width: 44px; height: 5px; border-radius: 3px; background: #d4d9e3; margin: 2px auto 6px; }
    .mobile-nav-list .m-groupe { grid-column: 1 / -1; margin: 10px 2px 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--m-doux); }
    .mobile-nav-item {
        display: flex !important; align-items: center; gap: 10px; min-height: var(--m-ctrl); height: auto; padding: 10px 12px !important;
        border: 1px solid var(--m-trait) !important; border-radius: var(--m-coin) !important; background: #f8fafc !important; color: var(--m-texte) !important;
        font-size: 15px !important; font-weight: 600 !important; text-align: left; line-height: 1.25; white-space: normal; position: relative;
    }
    .mobile-nav-item.active { background: #e8eefc !important; border-color: #b9c9f5 !important; color: var(--m-bleu) !important; font-weight: 800 !important; }
    .mobile-nav-item:active { background: #dfe6f8 !important; }
    .mobile-nav-item.mobile-nav-compte { grid-column: 1 / -1; justify-content: center; margin-top: 8px; color: #b91c1c !important; background: #fff5f5 !important; border-color: #fbd0d0 !important; }
    .mobile-nav-item .badge-conges { position: absolute; top: 4px; right: 6px; margin: 0; }

    /* ---------- Boutons, champs : une seule taille partout ---------- */
    .btn { min-height: var(--m-ctrl) !important; font-size: 16px !important; border-radius: var(--m-coin) !important; padding: 10px 18px !important; justify-content: center; }
    .btn-sm { min-height: 44px !important; font-size: 15px !important; padding: 8px 14px !important; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea {
        font-size: 16px !important; min-height: var(--m-ctrl); border-radius: 12px !important; padding: 10px 14px; box-sizing: border-box; max-width: 100%;
    }
    textarea { min-height: 96px; }
    input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; }

    /* ---------- Boutons « Nouveau… » = bouton flottant ---------- */
    .filters > .btn-primary:first-child, .section-header > .btn-primary, .section-header .filters > #addFacturationBtn {
        position: fixed !important; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(var(--m-bas-reel) + 14px); z-index: 950;
        width: max-content !important; left: auto !important; flex: none !important; min-width: 0 !important; max-width: calc(100vw - 32px) !important; white-space: nowrap; margin: 0 !important; min-height: 54px !important; padding: 0 22px !important; border-radius: 27px !important;
        box-shadow: 0 6px 18px rgba(30, 64, 175, .4) !important; font-weight: 800 !important;
    }
    .filters > .btn-primary:first-child::before { content: '＋'; font-size: 22px; line-height: 1; margin-right: 8px; font-weight: 400; }

    /* ---------- Recherche + filtres repliables ---------- */
    .filters { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
    .filters > *:not(.btn-primary:first-child) { margin-left: 0 !important; width: 100% !important; max-width: none !important; }
    .m-ligne-recherche { display: flex !important; gap: 8px; align-items: stretch; width: 100%; }
    .m-ligne-recherche > .search-input, .m-ligne-recherche > input, .m-ligne-recherche > div { flex: 1 1 auto; width: auto !important; min-width: 0; }
    .m-ligne-recherche input { width: 100% !important; height: var(--m-ctrl); }
    .m-bouton-filtres {
        flex: none; position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--m-ctrl); padding: 0 14px;
        border: 1.5px solid var(--m-trait); border-radius: 12px; background: #fff; color: var(--m-texte); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    }
    .m-bouton-filtres[aria-expanded="true"] { background: #e8eefc; border-color: #b9c9f5; color: var(--m-bleu); }
    .m-bouton-filtres .m-nb { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--m-bleu); color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; }
    .m-filtres-plus { display: none; flex-direction: column; gap: 10px; width: 100%; padding: 12px; background: #fff; border: 1px solid var(--m-trait); border-radius: var(--m-coin); }
    .m-filtres-plus.ouvert { display: flex; }
    .m-filtres-plus > * { width: 100% !important; margin: 0 !important; max-width: none !important; }

    /* ---------- Cartes (listes) ---------- */
    .mobile-card-list, #affaires .mobile-card-list, #lieux .mobile-card-list { gap: 12px !important; }
    .mobile-card, .affaire-card {
        padding: 14px 16px !important; border: 1px solid var(--m-trait) !important; border-radius: 16px !important; background: #fff !important; box-shadow: var(--m-ombre) !important;
    }
    .mobile-card-header, .affaire-card-header { margin-bottom: 8px !important; padding-bottom: 10px !important; border-bottom: 1px solid #eef1f6 !important; align-items: flex-start !important; }
    .mobile-card-title, .affaire-card-title { font-size: 18px !important; font-weight: 800 !important; line-height: 1.25; word-break: break-word; }
    .mobile-card-row, .affaire-card-row { font-size: 15px !important; padding: 5px 0 !important; align-items: baseline; }
    .mobile-card-row .label, .affaire-card-row .label { font-size: 13px !important; color: var(--m-doux) !important; font-weight: 500; }
    .mobile-card-row .value, .affaire-card-row .value { color: var(--m-texte) !important; font-weight: 600 !important; min-width: 0; flex: 1 1 auto; text-align: right; white-space: normal !important; overflow-wrap: anywhere; }
    .mobile-card-row, .affaire-card-row { flex-wrap: wrap; }
    .mobile-card-row .value *, .affaire-card-row .value * { white-space: normal !important; }
    .mobile-card-row .value .inter-a-facturer, .affaire-card-row .value .inter-a-facturer, .affaire-card-row .value .inter-a-regler { display: block; }
    .mobile-card-row .value.wrap { max-width: 68% !important; }
    .mobile-card-actions, .affaire-card-actions { margin-top: 12px !important; gap: 8px !important; }
    .mobile-card-actions .btn, .affaire-card-actions .btn { flex: 1 1 0; min-width: 0 !important; }
    a.lien-tel { display: inline-flex; align-items: center; min-height: 40px; }

    .affaire-card:not(.m-deplie) .m-secondaire, .mobile-card:not(.m-deplie) .m-secondaire { display: none !important; }
    .m-voir-plus {
        display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 6px 0 0; border: 0; border-radius: 12px;
        background: #eef2fb; color: var(--m-bleu); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
    }
    .filters { margin: 0 !important; }
    #mTitre { text-align: left; width: 100%; }
    .header-content { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; }

    /* ---------- Tableau de bord ---------- */
    .dashboard-card { padding: 16px !important; border-radius: 16px !important; box-shadow: var(--m-ombre) !important; }
    .dashboard-pending-row { gap: 12px; padding: 12px 0 !important; align-items: baseline !important; }
    .dashboard-pending-label { font-size: 16px !important; font-weight: 700; flex: 1 1 auto; min-width: 0; }
    .dashboard-pending-value { font-size: 26px !important; line-height: 1.15; white-space: nowrap; text-align: right; flex: none; }
    .dashboard-pending-sub { font-size: 14px !important; }
    .dashboard-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* ---------- Fenêtres (modales) = feuilles du bas ---------- */
    .modal.active { align-items: flex-end !important; }
    .modal-content {
        width: 100% !important; max-width: none !important; max-height: 92dvh; overflow-y: auto; margin: 0 !important; box-sizing: border-box;
        padding: 20px max(16px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) !important;
        border-radius: 22px 22px 0 0 !important;
    }
    .modal-actions { flex-direction: column-reverse !important; gap: 10px !important; }
    .modal-actions .btn { width: 100%; }

    /* ---------- Formulaires (pages « Nouvelle … ») ---------- */
    .page-form-wrap { padding: 14px max(14px, env(safe-area-inset-right, 0px)) calc(110px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)) !important; }
    .form-grid, .pg-form-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .form-grid > .form-group, .pg-form-grid > .form-group, .pg-form-grid > .form-group.pg-tiers { grid-column: 1 / -1 !important; }
    .form-group label { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
    .form-actions {
        position: sticky; bottom: 0; z-index: 20; margin: 18px calc(-1 * max(14px, env(safe-area-inset-right, 0px))) 0 !important; padding: 12px max(14px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        background: rgba(255, 255, 255, .96); border-top: 1px solid var(--m-trait); box-shadow: 0 -4px 14px rgba(16, 24, 40, .06); backdrop-filter: blur(6px);
        display: grid !important; grid-template-columns: 1fr; gap: 10px;
    }
    .form-actions .btn { width: 100% !important; min-width: 0 !important; height: var(--m-ctrl) !important; }
    .page-form-wrap .header-buttons .btn span { display: none; }
    /* En-tête des pages de saisie : le titre reste, les boutons deviennent des icônes */
    body:not(:has(#mainContent)) .header { gap: 8px !important; }
    body:not(:has(#mainContent)) .header-buttons { display: flex !important; gap: 8px; margin-left: auto; }
    body:not(:has(#mainContent)) .header-buttons .btn { width: var(--m-ctrl); padding: 0 !important; }
    body:not(:has(#mainContent)) .header-buttons .btn span { display: none; }
    body:not(:has(#mainContent)) .header-content h1 { display: block !important; font-size: 17px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body:not(:has(#mainContent)) .header-content { flex: 1 1 auto; }
}

/* ============================================================
   2) TABLEAUX : visionneuse (téléphones, pliables, tablettes)
   ============================================================ */
@media (max-width: 1100px) {
    .m-barre-vue { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
    .m-bascule { display: inline-flex; padding: 3px; border-radius: 12px; background: #e6eaf2; gap: 2px; }
    .m-bascule button { border: 0; background: transparent; height: 40px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 700; color: var(--m-doux); cursor: pointer; }
    .m-bascule button.actif { background: #fff; color: var(--m-bleu); box-shadow: 0 1px 3px rgba(16, 24, 40, .15); }
    .m-barre-vue .m-plein { margin-left: auto; height: 40px; padding: 0 14px; border: 1.5px solid var(--m-trait); border-radius: 12px; background: #fff; font: inherit; font-size: 15px; font-weight: 700; color: var(--m-texte); cursor: pointer; }

    /* Mode « Cartes » / « Tableau » (le choix est mémorisé) */
    section.tab-content[data-vue="cartes"] .table-wrapper { display: none !important; }
    section.tab-content[data-vue="cartes"] .mobile-card-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
    section.tab-content[data-vue="table"] .mobile-card-list { display: none !important; }
    section.tab-content[data-vue="table"] .table-wrapper { display: block !important; }

    /* Le tableau : en-tête et 1re colonne figées, défilement fluide dans les deux sens */
    .table-wrapper.m-tbl {
        max-height: calc(100dvh - var(--m-haut) - 190px); min-height: 220px; overflow: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        border: 1px solid var(--m-trait); border-radius: var(--m-coin) !important; background: #fff; box-shadow: var(--m-ombre); margin-bottom: 16px;
    }
    .m-tbl .data-table { font-size: calc(14.5px * var(--m-echelle, 1)); width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
    .m-tbl .data-table th, .m-tbl .data-table td { padding: 12px 14px !important; white-space: nowrap; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
    .m-tbl .data-table td { white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; color: var(--m-texte); }
    .m-tbl .data-table td.wrap, .m-tbl .data-table td:has(.fact-sub) { white-space: normal; }
    .m-tbl .data-table thead th { position: sticky; top: 0; z-index: 4; background: #f1f4fa !important; color: #1f2937; font-weight: 800; box-shadow: 0 1px 0 var(--m-trait); }
    .m-tbl .data-table tbody tr:nth-child(even) td { background: #fbfcfe; }
    .m-tbl .data-table tbody tr:active td { background: #eef3ff; }
    .m-tbl .data-table tfoot:empty { display: none; }
    .m-tbl .data-table tfoot td { position: sticky; bottom: 0; z-index: 3; background: #f1f4fa; font-weight: 800; box-shadow: 0 -1px 0 var(--m-trait); }
    .m-tbl .data-table .btn, .m-tbl .data-table .btn-sm { min-height: 40px !important; min-width: 44px; padding: 6px 12px !important; }
    /* colonne figée (index posé par mobile.js : m-fige-1 … m-fige-4) */
    .m-fige-1 :is(th, td):nth-child(1), .m-fige-2 :is(th, td):nth-child(2), .m-fige-3 :is(th, td):nth-child(3), .m-fige-4 :is(th, td):nth-child(4) {
        position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 2px 0 0 var(--m-trait);
    }
    .m-fige-1 thead th:nth-child(1), .m-fige-2 thead th:nth-child(2), .m-fige-3 thead th:nth-child(3), .m-fige-4 thead th:nth-child(4) { z-index: 5; background: #f1f4fa !important; }
    .m-fige-1 tbody tr:nth-child(even) td:nth-child(1), .m-fige-2 tbody tr:nth-child(even) td:nth-child(2), .m-fige-3 tbody tr:nth-child(even) td:nth-child(3), .m-fige-4 tbody tr:nth-child(even) td:nth-child(4) { background: #fbfcfe; }

    /* ---------- Plein écran (tout l'écran pour le tableau) ---------- */
    body.m-tableau-plein { overflow: hidden; }
    body.m-tableau-plein #mBarreBas, body.m-tableau-plein .filters > .btn-primary:first-child { display: none !important; }
    #mFullBar {
        position: fixed; left: 0; right: 0; top: 0; z-index: 3100; height: calc(54px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
        align-items: center; gap: 8px; background: #fff; border-bottom: 1px solid var(--m-trait);
    }
    body.m-tableau-plein #mFullBar { display: flex; }
    #mFullBar .m-plein-titre { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #mFullBar button { height: 44px; min-width: 44px; padding: 0 12px; border: 1.5px solid var(--m-trait); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; font-weight: 800; color: var(--m-texte); cursor: pointer; }
    #mFullBar .m-fermer { background: var(--m-bleu); border-color: var(--m-bleu); color: #fff; }
    body.m-tableau-plein #mConseilRotation:not([hidden]) {
        display: block; position: fixed; z-index: 3200; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 12px 14px;
        border-radius: var(--m-coin); background: #1f2937; color: #fff; font-size: 14px; line-height: 1.4; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    }
    .table-wrapper.m-tbl.m-plein-actif {
        position: fixed !important; z-index: 3000; inset: calc(54px + env(safe-area-inset-top, 0px)) 0 0 0; max-height: none !important; height: auto; margin: 0 !important;
        border: 0; border-radius: 0 !important; box-shadow: none; padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ============================================================
   3) PLIABLES OUVERTS / TABLETTES (700–1100 px)
   ============================================================ */
@media (min-width: 700px) and (max-width: 1100px) {
    body { font-size: 16px; }
    .header { padding-left: max(20px, env(safe-area-inset-left, 0px)) !important; padding-right: max(20px, env(safe-area-inset-right, 0px)) !important; }
    .sticky-header-group { position: sticky; top: 0; z-index: 900; }
    .header { flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; min-height: 64px; padding-top: max(8px, env(safe-area-inset-top, 0px)) !important; padding-bottom: 8px !important; }
    .header > a { flex: none; }
    .header .logo { height: 30px !important; width: auto !important; max-width: none !important; }
    .header-content { flex: 1 1 auto !important; min-width: 0; display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap; gap: 0 8px; }
    .header-content h1 { display: none; }
    .nav-tabs { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 2px; margin: 0 !important; }
    .nav-tab { min-height: 44px; font-size: 13.5px; padding: 8px 5px; white-space: nowrap; }
    .header-buttons { flex: none; gap: 8px; order: 5 !important; margin-left: auto !important; }
    .nav-tabs { order: 2 !important; }
    #currentUserName, #syncBtn, #exportBtn, [data-installer] { display: none !important; }
    .header-buttons .logout-btn { width: 44px; min-width: 44px; padding: 0 !important; justify-content: center; }
    .header-buttons .logout-btn span { display: none; }
    .tab-content { padding: 20px max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px)) !important; }
    .btn { min-height: 46px; font-size: 16px; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), select { min-height: 46px; font-size: 16px; }
    .table-wrapper.m-tbl { max-height: calc(100dvh - 300px); }
    .filters { flex-wrap: wrap; gap: 10px; }
    .mobile-card, .affaire-card { border-radius: 16px; padding: 16px 18px; }
    .m-ligne-recherche { display: contents; }
    .m-bouton-filtres { display: none; }
    .m-filtres-plus { display: contents; }
}

/* ============================================================
   4) ÉCRAN DOUBLE (Surface Duo, pliables à charnière) : rien sous la charnière
   ============================================================ */
@media (horizontal-viewport-segments: 2) {
    .tab-content, .page-form-wrap { padding-left: 16px !important; padding-right: 16px !important; }
    section.tab-content[data-vue="cartes"] .mobile-card-list, .mobile-card-list {
        grid-template-columns: env(viewport-segment-width 0 0, 50%) env(viewport-segment-width 1 0, 50%) !important;
        column-gap: calc(env(viewport-segment-left 1 0, 100%) - env(viewport-segment-right 0 0, 100%)) !important;
        margin-left: -16px; margin-right: -16px; padding: 0 12px; box-sizing: border-box;
    }
    .mobile-card, .affaire-card { min-width: 0; }
}

/* Paysage sur téléphone : en-tête réduit au minimum, plus de place pour le contenu */
@media (max-width: 899px) and (max-height: 480px) and (orientation: landscape) {
    :root { --m-bas: 52px; --m-haut: 48px; }
    #mBarreBas button { flex-direction: row; gap: 8px; font-size: 14px; }
    #mBarreBas .m-ico { font-size: 19px; }
    .table-wrapper.m-tbl { max-height: calc(100dvh - 130px); }
}
@media (min-width: 700px) and (max-height: 520px) and (orientation: landscape) {
    .header { min-height: 52px; padding-top: max(4px, env(safe-area-inset-top, 0px)) !important; padding-bottom: 4px !important; }
    .header .logo { height: 32px !important; }
    .nav-tab { min-height: 40px; padding: 6px 8px; }
    .tab-content { padding-top: 12px !important; }
    .m-ligne-recherche { display: flex; flex: 1 1 260px; gap: 8px; }
    .m-ligne-recherche input { width: 100% !important; }
    .m-bouton-filtres { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 1.5px solid var(--m-trait); border-radius: 12px; background: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
    .m-bouton-filtres .m-nb { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--m-bleu); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
    .m-filtres-plus { display: none; }
    .m-filtres-plus.ouvert { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 100%; }
    .table-wrapper.m-tbl { max-height: calc(100dvh - 150px); }
}