.tablesorter-bootstrap td {
    vertical-align:middle !important;
    text-align: center;
  }
  .tablesorter-bootstrap th {
    text-align: center;
    position: relative;
    padding-right: 30px;
    white-space: nowrap;
  }
  .tablesorter-bootstrap th::after {
    content: "▲▼";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    font-size: 12px;
    letter-spacing: 2px;
  }
    .tablesorter-bootstrap th.sorter-false::after {
      content: none;
    }    
  
  .tablesorter-bootstrap th.tablesorter-headerAsc::after {
    content: "▲▼";
    color: #333;
    background: linear-gradient(to right, #333 0%, #333 50%, #ccc 50%, #ccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .tablesorter-bootstrap th.tablesorter-headerDesc::after {
    content: "▲▼";
    color: #333;
    background: linear-gradient(to right, #ccc 0%, #ccc 50%, #333 50%, #333 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  /* Fallback pour navigateurs qui ne supportent pas background-clip */
  @supports not (-webkit-background-clip: text) {
    .tablesorter-bootstrap th.tablesorter-headerAsc::after {
      content: "▲";
      color: #333;
    }
    .tablesorter-bootstrap th.tablesorter-headerAsc::before {
      content: "▼";
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #ccc;
      font-size: 12px;
    }
    .tablesorter-bootstrap th.tablesorter-headerDesc::after {
      content: "▼";
      color: #333;
    }
    .tablesorter-bootstrap th.tablesorter-headerDesc::before {
      content: "▲";
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #ccc;
      font-size: 12px;
    }
  }

        /* Responsive table */
        .table-responsive {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        /* Mobile responsive adaptations */
        @media (max-width: 768px) {
            .table-responsive {
                font-size: 14px;
            }
            
            .table th,
            .table td {
                padding: 8px 4px;
                white-space: nowrap;
            }
            
            /* Ajuster les boutons de niveau pour mobile */
            .level-button {
                font-size: 10px;
                padding: 2px 8px;
            }
            
            /* Masquer certaines colonnes sur très petits écrans */
            .table .d-none-xs {
                display: none;
            }
        }
        
        @media (max-width: 576px) {
            /* Sur très petits écrans, réduire encore plus */
            .table {
                font-size: 12px;
            }
            
            .table th,
            .table td {
                padding: 6px 2px;
            }
            
            /* Réduire la largeur des flèches de tri */
            .tablesorter-bootstrap th {
                padding-right: 20px;
            }
            
            .tablesorter-bootstrap th::before {
                right: 12px;
                font-size: 10px;
            }
            
            .tablesorter-bootstrap th::after {
                right: 4px;
                font-size: 10px;
            }
        }