.custom-table-wrapper {
    width: 100%;
    margin: 30px 0;
}

/* Conteneur scrollable sur mobile */
.table-responsive-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

.custom-data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-family: inherit;
    min-width: 800px; /* Force l'alignement pour éviter l'écrasement sur petits écrans */
}

/* En-têtes */
.custom-data-table th {
    padding: 18px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #2892d0; /* Bleu caractéristique de votre maquette */
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.custom-data-table th.th-main-title {
    color: #1a1a1a;
}

/* Cellules */
.custom-data-table td {
    padding: 18px 20px;
    font-size: 14px;
    color: #333333;
    border-bottom: 1px solid #edf2f7;
    white-space: nowrap;
}

/* Première colonne fixe (Sticky) pour une ergonomie mobile irréprochable */
.custom-data-table td.row-label,
.custom-data-table th:first-child {
    position: sticky;
    left: 0;
    background-color: #f9fafb;
    z-index: 2;
    font-weight: 600;
    color: #1a1a1a;
    border-right: 1px solid #e2e8f0;
}

.custom-data-table th:first-child {
    z-index: 3;
    background-color: #f4f6f8;
}

/* Lignes de séparation / Groupes (ex: Volutpat quam) */
.custom-data-table tr.table-group-header-row td {
    background-color: #ffffff;
    padding-top: 35px;
    padding-bottom: 15px;
    border-bottom: none;
}

.custom-data-table .group-title-cell {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Effet hover discret sur les lignes */
.custom-data-table tbody tr:not(.table-group-header-row):hover td {
    background-color: #f8fafc;
}

.custom-data-table tbody tr:not(.table-group-header-row):hover td.row-label {
    background-color: #f1f5f9;
}