/* ========================================
   TABLEAU CLIENTS - MULTI VUES RESPONSIVES
======================================== */

/* ========================================
   CONFIGURATION RESPONSIVE COLONNES
   
   Format: Colonne | PC (≥1025px) | Tablette (769-1024px) | Mobile (≤768px)
   -------------------------------------------------------------------------
   1. TYPE          | 50px         | MASQUÉ               | MASQUÉ
   2. MARQUE    | 80px         | MASQUÉ               | MASQUÉ
   3. CONFIGURATION         | 150px        | 200px                | 40%
   4. DATE       | 180px        | 200px                | MASQUÉ

======================================== */

/* VERSION PC (≥1025px) */
.clients-table th:nth-child(1) { width: 80px; }
.clients-table th:nth-child(2) { width: 80px; }
.clients-table th:nth-child(3) { width: 150px; }
.clients-table th:nth-child(4) { width: 80px; }

/* VERSION TABLETTE PAYSAGE (1025px - 1185px) */
@media (min-width: 1025px) and (max-width: 1185px) {
    .clients-table th:nth-child(1), .clients-table td:nth-child(1) { width: 150px; }
    .clients-table th:nth-child(2), .clients-table td:nth-child(2) { width: 150px; }
    .clients-table th:nth-child(3), .clients-table td:nth-child(3) { width: 180px; }
    .clients-table th:nth-child(4), .clients-table td:nth-child(4) { width: 130px; }
}

/* VERSION TABLETTE PORTRAIT (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .clients-table th:nth-child(1), .clients-table td:nth-child(1) { width: 120px; }
    .clients-table th:nth-child(2), .clients-table td:nth-child(2) { width: 100px; }
    .clients-table th:nth-child(3), .clients-table td:nth-child(3) { width: 150px; }
    .clients-table th:nth-child(4), .clients-table td:nth-child(4) { width: 100px; }
}

/* VERSION MOBILE (≤768px) */
@media (max-width: 768px) {
    .table-wrapper {
        overflow-x: hidden;
    }

    .clients-table {
        table-layout: auto;
        font-size: 0.9rem;
    }

    .clients-table th:nth-child(1), .clients-table td:nth-child(1) { width: 10%; }
    .clients-table th:nth-child(2), .clients-table td:nth-child(2) { width: 10%; }
    .clients-table th:nth-child(3), .clients-table td:nth-child(3) { width: 10%; }
    .clients-table th:nth-child(4), .clients-table td:nth-child(4) { width: 10%; }
}