//* Empêche le décalage du bloc principal sur mobile (pull-*) */
@media (max-width: 768px) {
  .pull-md-right { float: none !important; }
  .main-content { width: 100% !important; max-width: 100% !important; }
}

/* Scroll horizontal uniquement pour la zone DataTables */
#tableServicesList_wrapper .listtable {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Force le tableau à rester “normal” */
#tableServicesList {
  width: 100% !important;
  max-width: 100% !important;
}
* ================================
   FIX DATATABLES MOBILE (width:0px / débordements)
   ================================ */

/* Empêche les débordements horizontaux */
html, body { overflow-x: hidden; }

/* Le conteneur DataTables ne doit jamais dépasser */
.table-container,
.dataTables_wrapper,
.listtable {
  max-width: 100% !important;
  width: 100% !important;
}

/* Le "listtable" (dom DataTables) doit scroller si besoin */
.listtable {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Corrige le bug du width: 0px injecté par DataTables */
table.dataTable {
  width: 100% !important;
  max-width: 100% !important;
}

/* Annule les largeurs inline cassées sur TH/TD (width: 0px) */
table.dataTable thead th,
table.dataTable tbody td {
  width: auto !important;
}

/* Évite que DataTables “rétrécisse” trop */
table.dataTable {
  table-layout: auto !important;
}

/* Coupe les liens / textes longs */
table.dataTable th,
table.dataTable td {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Mobile : on force un min-width pour que le scroll soit propre */
@media (max-width: 768px) {
  .listtable table.dataTable {
    min-width: 650px; /* ajuste 600-800 selon ton rendu */
  }

  /* Les boutons dans la dernière colonne restent lisibles */
  table.dataTable .btn {
    white-space: normal;
    max-width: 220px;
  }
}