/* =============================================================================
   portal-mobile.css · correctifs téléphone du portail LogiDrink
   -----------------------------------------------------------------------------
   RÈGLE ABSOLUE : ce fichier ne contient AUCUNE règle hors du @media ci-dessous.
   Palier 767.98px : aucune autre feuille ne l'utilise (elles emploient 560, 640,
   700, 720, 900, 980, 1100 et min-width:768px pour le portail livreur).
   Le rendu PC et tablette (>= 768px) est donc strictement inchangé.

   Chargé en dernier, dans @layer base : voir la note juste en dessous, l'ordre
   des couches s'inverse pour les déclarations !important.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Pourquoi @layer base : avec !important, l'ordre des couches est INVERSÉ · une
   déclaration importante dans la première couche bat une déclaration importante
   non layée. portal-unified.css déclare « @layer base, components, utilities » et
   portal-theme-fix.css pose ses !important dans @layer base. Sans cette couche,
   la moitié des règles ci-dessous perdaient silencieusement (mesuré : boutons à
   36px au lieu de 44, panneau de notifications hors écran, thead toujours visible).
   Chargé en dernier, donc dernier dans la couche : ces règles gagnent.
   ----------------------------------------------------------------------------- */
@layer base {
@media (max-width: 767.98px) {

  :root {
    --ldm-gutter: 14px;
    --ldm-radius: 12px;
    --ldm-tap: 44px;
    --ldm-line: rgba(16, 24, 40, .10);
    --ldm-label: #6b7686;
    --ldm-card: var(--card, #fff);
  }

  /* ==========================================================================
     1. Largeur utile · on récupérait 49px de marge de chaque côté
        (#view 28 + .card-body 16 + .table-wrap 4), soit 23% de l'écran.
     ========================================================================== */
  #view,
  #view.content {
    padding-left: var(--ldm-gutter) !important;
    padding-right: var(--ldm-gutter) !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }
  #view .card-body { padding: 12px !important; }
  #view .table-wrap,
  #view .ld-hscroll { padding: 0 !important; }
  #view .card { border-radius: var(--ldm-radius) !important; }

  /* ==========================================================================
     2. Hauteurs dynamiques et zones sûres (barre d'URL Safari, encoche)
     ========================================================================== */
  #app { min-height: 100dvh !important; }
  #sidebar { height: 100dvh !important; }
  header.topbar { padding-top: env(safe-area-inset-top) !important; }

  /* ==========================================================================
     3. Champs à 16px · en dessous, Safari iOS zoome à chaque prise de focus.
        Relevé avant correctif : 203 champs à 14,5px, filtres Statistiques à 11px.
     ========================================================================== */
  input, select, textarea,
  .ts-control, .ts-control input,
  select.lm-select-native,
  #view input, #view select, #view textarea,
  .overlay input, .overlay select, .overlay textarea {
    font-size: 16px !important;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea, .ts-control {
    min-height: var(--ldm-tap) !important;
  }
  select.lm-select-native { background-position: right 10px center !important; }
  /* Selects maison : l'enveloppe tombait à 26px de large, le libellé
     « Toutes catégories » était illisible. On la laisse prendre toute la ligne. */
  html body #view .lm-select,
  html body #view .ld-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    display: block !important;
  }
  html body #view .lm-select-btn,
  html body #view .ld-select-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: var(--ldm-tap) !important;
    justify-content: space-between !important;
    text-align: left !important;
    font-size: 15px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body #view .lm-select select,
  html body #view .ld-select select { width: 100% !important; }
  /* barres de filtres : on passe à la ligne plutôt que d'écraser les champs */
  html body #view .filter-bar,
  html body #view .filters,
  html body #view .ld-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  html body #view .filter-bar > *,
  html body #view .filters > *,
  html body #view .ld-filters > * { flex: 1 1 100% !important; min-width: 0 !important; }

  /* ==========================================================================
     4. Tiroir de navigation · #portalSwitch avait 194px alloués pour 610px de
        contenu en overflow visible : les hubs se dessinaient par-dessus la
        sous-navigation et les alertes. Un seul conteneur défile : le tiroir.
     ========================================================================== */
  #sidebar {
    width: min(86vw, 330px) !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  #sidebar > * { flex: 0 0 auto !important; min-height: 0 !important; }
  #portalSwitch, #nav, #sidebarOpsAlerts, #sidebarRecent, #sidebarMonitor {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .sidebar-foot, .ld-side-foot {
    position: static !important;
    margin-top: auto !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  #sidebar .portal-pill,
  #sidebar .nav-item,
  #sidebar .nav-grp-btn {
    min-height: var(--ldm-tap) !important;
    display: flex !important;
    align-items: center !important;
  }
  #sidebarCloseMobile,
  #sidebarToggle {
    min-width: var(--ldm-tap) !important;
    min-height: var(--ldm-tap) !important;
  }
  #sidebarBackdrop {
    background: rgba(8, 12, 20, .55) !important;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
  }
  #sidebarRailBtn { display: none !important; }
  .sidebar-ops-all {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ==========================================================================
     5. Notifications · le panneau démarrait à x=523 pour un écran de 500px,
        entièrement hors champ. Il devient une feuille basse pleine largeur.
     ========================================================================== */
  html body aside#notifPanel,
  html body aside#notifPanel.notif-panel,
  html body aside#notifPanel.notif-panel.open,
  html body .notif-panel,
  html body .notif-panel.open {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 82dvh !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -12px 40px rgba(8, 12, 20, .22) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    z-index: 1200 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html body aside#notifPanel #notifList,
  html body .notif-panel .notif-list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html body .notif-panel .notif-tab { min-height: var(--ldm-tap) !important; flex: 1 1 0 !important; }
  html body .notif-panel .notif-x {
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #notifBackdrop { background: rgba(8, 12, 20, .45) !important; }

  /* Menu de création rapide : bordé à l'écran par sécurité */
  #ldQuickMenu {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* ==========================================================================
     6. Listes · portal-unified.css force min-width:640px sous 980px, dans un
        .table-wrap en overflow-x:hidden : les colonnes Statut, Peppol et
        Total TTC étaient purement inaccessibles. Rendu en cartes.
        Une table réellement matricielle peut être exclue avec .ldm-keep-table.
     ========================================================================== */
  #view .table-wrap:not(.ldm-keep-table),
  #view .ld-hscroll:not(.ldm-keep-table) {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #view table.data-table:not(.ldm-keep-table),
  #view table.table:not(.ldm-keep-table),
  #view .table-wrap:not(.ldm-keep-table) > table:not(.ldm-keep-table),
  #view .ld-hscroll:not(.ldm-keep-table) > table:not(.ldm-keep-table) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  #view table.data-table:not(.ldm-keep-table) > thead,
  #view table.table:not(.ldm-keep-table) > thead,
  #view .table-wrap:not(.ldm-keep-table) > table > thead,
  #view .ld-hscroll:not(.ldm-keep-table) > table > thead { display: none !important; }
  #view table.data-table:not(.ldm-keep-table) > tbody,
  #view table.table:not(.ldm-keep-table) > tbody,
  #view .table-wrap:not(.ldm-keep-table) > table > tbody,
  #view .ld-hscroll:not(.ldm-keep-table) > table > tbody {
    display: block !important;
    width: 100% !important;
  }

  #view table.data-table:not(.ldm-keep-table) > tbody > tr,
  #view table.table:not(.ldm-keep-table) > tbody > tr,
  #view .table-wrap:not(.ldm-keep-table) > table > tbody > tr,
  #view .ld-hscroll:not(.ldm-keep-table) > table > tbody > tr {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    border: 1px solid var(--ldm-line) !important;
    border-radius: var(--ldm-radius) !important;
    background: var(--card, #fff) !important;
    padding: 10px 12px !important;
    margin: 0 0 8px 0 !important;
  }
  #view table.data-table:not(.ldm-keep-table) > tbody > tr > td,
  #view table.table:not(.ldm-keep-table) > tbody > tr > td,
  #view .table-wrap:not(.ldm-keep-table) > table > tbody > tr > td,
  #view .ld-hscroll:not(.ldm-keep-table) > table > tbody > tr > td {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: auto !important;
    max-width: none !important;
    border: 0 !important;
    padding: 4px 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
  }
  #view table.data-table:not(.ldm-keep-table) > tbody > tr > td::before,
  #view table.table:not(.ldm-keep-table) > tbody > tr > td::before,
  #view .table-wrap:not(.ldm-keep-table) > table > tbody > tr > td::before,
  #view .ld-hscroll:not(.ldm-keep-table) > table > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--ldm-label);
    white-space: nowrap;
  }

  /* titre de la carte : première cellule porteuse de sens, sans libellé */
  #view table > tbody > tr > td.ldm-cell-title {
    display: block !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    padding: 0 44px 6px 0 !important;
  }
  #view table > tbody > tr > td.ldm-cell-title::before {
    content: none !important;
  }

  /* case à cocher : épinglée en haut à droite */
  #view table > tbody > tr > td.ldm-cell-check {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    padding: 0 !important;
    display: block !important;
  }
  #view table > tbody > tr > td.ldm-cell-check::before { content: none !important; }
  #view table > tbody > tr > td.ldm-cell-check input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
  }

  /* actions : rangée pleine largeur en pied de carte */
  #view table > tbody > tr > td.ldm-cell-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-top: 10px !important;
    margin-top: 6px !important;
    border-top: 1px solid var(--ldm-line) !important;
  }
  #view table > tbody > tr > td.ldm-cell-actions::before { content: none !important; }
  #view table > tbody > tr > td.ldm-cell-actions .btn,
  #view table > tbody > tr > td.ldm-cell-actions .icon-btn,
  #view table > tbody > tr > td.ldm-cell-actions .ld-row-menu-btn {
    flex: 1 1 auto !important;
    min-height: var(--ldm-tap) !important;
    justify-content: center !important;
  }
  /* la cellule d'actions ne doit pas laisser un vide au-dessus des boutons */
  html body #view table > tbody > tr > td.ldm-cell-actions {
    min-height: 0 !important;
    height: auto !important;
    align-items: center !important;
  }
  #view table > tbody > tr > td.ldm-cell-actions .row-act {
    display: flex !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
  }

  /* valeur longue (e-mail, adresse) : libellé au-dessus, valeur sur toute la largeur */
  html body #view table > tbody > tr > td.ldm-cell-long {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    overflow-wrap: anywhere !important;
  }

  /* cellule vide : masquée plutôt que d'imprimer une ligne fantôme */
  #view table > tbody > tr > td.ldm-cell-empty { display: none !important; }

  /* nombres, dates, références : jamais coupés en plusieurs morceaux */
  #view table > tbody > tr > td.num,
  #view table > tbody > tr > td.ldm-cell-nowrap {
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums;
  }
  #view table > tbody > tr > td b,
  #view table > tbody > tr > td strong {
    word-break: keep-all !important;
  }
  /* ligne vide « aucun résultat » : pas de carte autour */
  #view table > tbody > tr > td[colspan] {
    display: block !important;
    text-align: center !important;
  }
  #view table > tbody > tr > td[colspan]::before { content: none !important; }

  /* table conservée en mode matriciel : au moins la rendre défilable */
  #view .table-wrap.ldm-keep-table,
  #view .ld-hscroll.ldm-keep-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
  }

  /* ==========================================================================
     7. Lignes de document dans les modales · la table faisait 472px dans un
        conteneur de 377px en overflow-x:hidden : la colonne « Supprimer » était
        hors écran. Le bloc @media 720px prévu pour ça existe mais ne s'applique
        pas au runtime (thead reste table-header-group) ; on le reprend ici.
     ========================================================================== */
  .ld-doc-lines-wrap, .doc-lines-wrap {
    overflow-x: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .overlay .modal table.lines,
  .overlay .modal table.ld-doc-lines,
  .overlay .modal table.doc-lines {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  .overlay .modal table.ld-doc-lines > colgroup,
  .overlay .modal table.lines > colgroup { display: none !important; }
  .overlay .modal table.ld-doc-lines > thead,
  .overlay .modal table.lines > thead { display: none !important; }
  .overlay .modal table.ld-doc-lines > tbody,
  .overlay .modal table.lines > tbody { display: block !important; width: 100% !important; }

  .overlay .modal table.ld-doc-lines > tbody > tr,
  .overlay .modal table.lines > tbody > tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px !important;
    margin: 0 0 10px 0 !important;
    border: 1px solid var(--ldm-line) !important;
    border-radius: var(--ldm-radius) !important;
    background: var(--card, #fff) !important;
  }
  .overlay .modal table.ld-doc-lines > tbody > tr > td,
  .overlay .modal table.lines > tbody > tr > td {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
  }
  .overlay .modal table.ld-doc-lines > tbody > tr > td[data-label]::before,
  .overlay .modal table.lines > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--ldm-label);
    margin-bottom: 4px;
  }
  .overlay .modal table.ld-doc-lines td.ld-col-prod { grid-column: 1 / -1 !important; }
  .overlay .modal table.ld-doc-lines td.ld-col-tot {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--ldm-line) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
  }
  .overlay .modal table.ld-doc-lines td.ld-col-tot::before { margin: 0 !important; }
  .overlay .modal table.ld-doc-lines td.ld-col-del { grid-column: 1 / -1 !important; }
  .overlay .modal table.ld-doc-lines td.ld-col-del::before { content: none !important; }
  .overlay .modal table.ld-doc-lines td.ld-col-del button,
  .overlay .modal table.ld-doc-lines td.ld-col-del .btn,
  .overlay .modal table.ld-doc-lines td.ld-col-del .icon-btn {
    width: 100% !important;
    min-height: var(--ldm-tap) !important;
    justify-content: center !important;
  }
  .overlay .modal table.ld-doc-lines input,
  .overlay .modal table.ld-doc-lines select,
  .overlay .modal table.lines input,
  .overlay .modal table.lines select {
    width: 100% !important;
    min-height: var(--ldm-tap) !important;
  }
  #addLine, .ld-add-line {
    width: 100% !important;
    min-height: var(--ldm-tap) !important;
    justify-content: center !important;
  }

  /* ==========================================================================
     8. Modales · largeur, zone sûre, bouton de fermeture injecté par le JS
     ========================================================================== */
  .overlay .modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 16px !important;
  }
  .overlay .modal .modal-foot,
  .overlay .modal .modal-actions,
  .overlay .modal footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
  }
  .overlay .modal .modal-foot .btn { flex: 1 1 auto !important; min-height: var(--ldm-tap) !important; }
  .overlay .modal .modal-head,
  .overlay .modal > header {
    position: relative !important;
    padding-right: 52px !important;
  }
  .overlay .modal .grid2 { grid-template-columns: 1fr !important; }
  .ldm-modal-close {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 26px !important;
    line-height: 1 !important;
    color: #64748b !important;
    cursor: pointer !important;
  }

  /* ==========================================================================
     9. Texte cassé, coupé ou trop petit
     ========================================================================== */
  /* 9.1 KPI : « 563 886,43 € » doit s'afficher en entier, € compris */
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .kpi-grid > * { min-width: 0 !important; }
  .kpi-card, .kpi { padding: 12px !important; }
  .kpi-val {
    font-size: clamp(15px, 4.4vw, 23px) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    letter-spacing: -.02em !important;
    font-variant-numeric: tabular-nums;
  }
  /* plancher de lisibilité : plus aucun libellé sous 12px */
  html body #view .kpi-label,
  html body #view .kpi-lbl,
  html body #view .kpi-sub,
  html body #view .stat-lbl,
  html body #view .stat-sub,
  html body #view .ld-tms-kpi span,
  html body #view .text-danger,
  html body #view .text-muted,
  html body #view [class$="-lbl"],
  html body #view [class$="-label"] { font-size: 12px !important; }

  /* 9.2 noms longs : deux lignes plutôt qu'une troncature */
  .topname {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25 !important;
  }

  /* 9.3 barre de favoris : une seule ligne qui défile, au lieu de 3 rangées */
  #ldFavBar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding: 8px var(--ldm-gutter) !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  #ldFavBar::-webkit-scrollbar { display: none; }
  #ldFavBar > * { flex: 0 0 auto !important; scroll-snap-align: start; }
  .ld-fav-chip { min-height: 36px !important; font-size: 13px !important; }

  /* 9.4 actions de page : grille régulière, plus de bouton orphelin */
  .page-head { display: block !important; }
  .page-head-actions,
  .ld-page-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 10px !important;
    overflow: visible !important;
    height: auto !important;
  }
  .page-head-actions > *,
  .ld-page-actions > * { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; }
  .page-head-actions .btn,
  .ld-page-actions .btn { width: 100% !important; justify-content: center !important; }
  .page-head-actions .btn-primary,
  .ld-page-export-wrap { flex: 1 1 100% !important; }
  .ld-page-export-wrap .btn { width: 100% !important; }

  /* 9.5 filtres Statistiques / Analyses : 2 colonnes au lieu de 318px de haut */
  .st-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
  }
  .st-filter-bar > label {
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .st-filter-bar select,
  .st-filter-bar input { width: 100% !important; }
  .st-filter-bar > label:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }

  /* 9.6 lisibilité minimale : plus rien sous 12px */
  #view th, #view td { font-size: 14px !important; }
  #view .muted, #view small, #view .hint, #view .sub,
  #view .sc-meta, #view .sc-lbl { font-size: 12.5px !important; }
  #view h1, .page-head h1 { font-size: 24px !important; line-height: 1.2 !important; }
  #view h2 { font-size: 19px !important; }
  #view h3, #view .card-head h3 { font-size: 16px !important; }
  html body #view .badge,
  html body #view .ld-client-cc,
  html body #view time,
  html body #view .chip,
  html body #view .tag { font-size: 12px !important; }
  html body #sidebar .sidebar-recent-title,
  html body #sidebar .sidebar-monitor-title,
  html body #sidebar .sidebar-ops-title,
  html body #sidebar .sidebar-ops-all,
  html body #sidebar .sidebar-ops-more,
  html body #sidebar .sidebar-monitor-live,
  html body .badge-dot,
  html body #view time,
  html body #view .sm-row > span,
  html body #view .sm-row > b,
  html body #view .full > span,
  html body #view .full > b,
  html body #view .ld-ws-meta span,
  html body #sidebar .sidebar-monitor-maint span,
  html body #sidebar .ld-ws-meta,
  html body #sidebar .ld-ws-meta span,
  html body #sidebar .sidebar-monitor-metrics span,
  html body #sidebar .sidebar-monitor-metrics b,
  html body #sidebar .sidebar-monitor-extra span,
  html body #sidebar .sidebar-monitor-extra b,
  html body #sidebar .sidebar-monitor-extra div,
  html body .userbox span,
  html body .userbox small { font-size: 12px !important; }
  /* les libellés imbriqués dans les cellules héritent des 14px de la cellule */
  html body #view td > span:not([class]),
  html body #view td > b:not([class]),
  html body #view td > time,
  html body #view td > small,
  html body #view td div:not([class]) { font-size: inherit !important; }

  /* 9.7 graphiques : hauteur exploitable au lieu de 140px */
  #view canvas { min-height: 210px !important; width: 100% !important; }

  /* 9.8 blocs de synthèse en colonne unique quand ils se marchent dessus */
  .summary-chips { grid-template-columns: 1fr !important; display: grid !important; gap: 8px !important; }

  /* ==========================================================================
     10. Cibles tactiles · relevé avant correctif : ~110 éléments sous 44px
         par écran, dont 44 boutons .btn-ghost à 36px.
     ========================================================================== */
  html body #app .btn,
  html body #app .btn-sm,
  html body .overlay .btn,
  html body #view .btn,
  html body .btn,
  html body .btn-sm,
  html body .btn-ghost,
  html body .btn-primary,
  html body .nav-item,
  html body .portal-pill,
  html body .icon-btn,
  html body .ld-row-menu-btn,
  html body .ld-fav-chip,
  html body .topbar-notif,
  html body .notif-tab,
  html body #view .row-act .icon-btn,
  html body #view .row-act > * {
    min-height: var(--ldm-tap) !important;
  }
  html body .icon-btn,
  html body .ld-row-menu-btn,
  html body .topbar-notif,
  html body .ld-quick-plus,
  html body #app .ld-asst-fab,
  html body #app .ld-quick-plus,
  html body .ld-asst-fab,
  html body #sidebarToggle,
  html body #gotoSettings,
  html body #gotoLivreur,
  html body #view .row-act .icon-btn {
    min-width: var(--ldm-tap) !important;
  }
  html body .btn { padding-left: 14px !important; padding-right: 14px !important; }

  /* cases à cocher de ligne : 18px était intenable au doigt */
  html body input.row-check,
  html body #view input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
  }

  /* ==========================================================================
     11. Affordances de défilement horizontal · sans indice visuel, l'utilisateur
         ne sait pas qu'il reste des onglets à droite (barre invisible sur iOS).
     ========================================================================== */
  .xf-tabs, .ld-hscroll-inline, #view .tabs, .card-head > .xf-tabs {
    position: relative !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  /* fondu uniquement quand il reste des éléments à droite (classe posée par
     portal-mobile-shell.js) : sinon le dernier élément paraissait coupé */
  .xf-tabs, #view .tabs, .card-head > .xf-tabs, .ld-hscroll-inline.ld-has-more {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  .xf-tabs::-webkit-scrollbar,
  .ld-hscroll-inline::-webkit-scrollbar { display: none; }
  .xf-tabs > *, #view .tabs > * { flex: 0 0 auto !important; }

  /* ==========================================================================
     12. Barre d'actions groupées collante · sinon il faut remonter toute la
         liste pour agir sur une sélection.
     ========================================================================== */
  #bulkBar.is-on {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20 !important;
    background: var(--card, #fff) !important;
    border-top: 1px solid var(--ldm-line) !important;
    box-shadow: 0 -8px 24px rgba(8, 12, 20, .10) !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    margin-left: calc(var(--ldm-gutter) * -1) !important;
    margin-right: calc(var(--ldm-gutter) * -1) !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #bulkBar.is-on .btn { flex: 1 1 auto !important; min-height: var(--ldm-tap) !important; }

  /* ==========================================================================
     13. Vue Comptabilité · 203 779px de hauteur et 493 mini-tables.
         Le JS n'affiche que les premiers blocs ; ce bouton révèle la suite.
     ========================================================================== */
  #view .ldm-more-wrap {
    display: block !important;
    margin: 12px 0 4px !important;
  }
  #view .ldm-more-btn {
    width: 100% !important;
    min-height: var(--ldm-tap) !important;
    justify-content: center !important;
  }
  html body #view .table-wrap > table > tbody > tr.ldm-hidden-block,
  html body #view .ld-hscroll > table > tbody > tr.ldm-hidden-block,
  html body #view table.data-table > tbody > tr.ldm-hidden-block,
  html body #view table.table > tbody > tr.ldm-hidden-block,
  html body #view .card.ldm-hidden-block,
  html body #view .table-wrap.ldm-hidden-block,
  html body #view .ldm-hidden-block { display: none !important; }
}
} /* fin @layer base */