/**
 * Styles pour CP Tables
 *
 */


/* =============================================================================
   Styles CSS pour CP Tables (Simple & Complex)
   ============================================================================= */
.custom-cp-table,
.custom-cp-complex-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    background-color: #ffffff;
    overflow: hidden;
}

/* =============================================================================
   Styles des cellules (th et td)
   ============================================================================= */
.custom-cp-table th,
.custom-cp-table td,
.custom-cp-complex-table th,
.custom-cp-complex-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}

/* =============================================================================
   Styles des en-têtes (thead)
   ============================================================================= */
.custom-cp-table th,
.custom-cp-complex-table th {
    font-weight: 600;
    text-align: center;
    color: var(--text-color);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
    background-color: #f8f9fa;
}

/* Premier niveau d'en-tête - Complex Table */
.custom-cp-complex-table thead tr:first-child th {
    background: var(--grey-color);
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2.875rem;
    padding: 1rem;
}

.custom-cp-complex-table thead tr:first-child th:not(:last-child) {
    border-right: 2px solid #fff;
}

.custom-cp-complex-table thead tr:last-child th:not(:last-child) {
    border-right: 2px solid var(--grey-color);
}

.custom-cp-complex-table thead tr th {
    text-align: center;
}

.custom-cp-complex-table thead tr:last-child th {
    background: inherit;
    text-transform: capitalize;
}

/* Deuxième niveau d'en-tête - Complex Table */
.custom-cp-complex-table thead tr:not(:first-child) th {
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 2.875rem;
    padding: 0.75rem 1rem;
}

/* =============================================================================
   Styles du corps du tableau (tbody)
   ============================================================================= */
.custom-cp-table tbody tr:nth-child(even),
.custom-cp-complex-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.custom-cp-table tbody tr,
.custom-cp-complex-table tbody tr {
    transition: background-color 0.2s ease;
    border-bottom: inherit !important;
}

.custom-cp-complex-table tbody td {
    color: #212529;
    font-size: 1rem;
    font-weight: 400;
    line-height: 2.875rem;
    text-align: center;
}

.custom-cp-complex-table tbody td:not(:last-child) {
    border-right: 2px solid var(--grey-color);
}

/* =============================================================================
   Classes utilitaires
   ============================================================================= */
.custom-cp-table .text-center,
.custom-cp-complex-table .text-center {
    text-align: center;
}

.custom-cp-table .text-right,
.custom-cp-complex-table .text-right {
    text-align: right;
}

.custom-cp-table .numeric,
.custom-cp-complex-table .numeric {
    text-align: right;
    font-family: "Monaco", "Consolas", monospace;
    font-weight: 500;
}

/* =============================================================================
   Styles responsives — Tableau simple (défilement horizontal)
   ============================================================================= */
@media (max-width: 1024px) {
    .custom-cp-table,
    .custom-cp-complex-table {
        font-size: 0.8125rem;
        margin: 0.9375rem 0;
    }

    .custom-cp-table th,
    .custom-cp-table td,
    .custom-cp-complex-table th,
    .custom-cp-complex-table td {
        padding: 0.625rem 0.75rem;
    }

    .custom-cp-complex-table thead tr:first-child th {
        padding: 0.875rem 0.75rem;
        font-size: 0.9375rem;
    }
}

@media (max-width: 768px) {
    .custom-cp-table {
        font-size: 0.75rem;
        margin: 0.625rem 0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        display: block;
    }

    .custom-cp-table th,
    .custom-cp-table td {
        padding: 0.5rem 0.625rem;
    }

    .custom-cp-table thead,
    .custom-cp-table tbody,
    .custom-cp-table tr {
        display: table;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .custom-cp-table {
        font-size: 0.6875rem;
    }

    .custom-cp-table th,
    .custom-cp-table td {
        padding: 0.375rem 0.5rem;
    }
}

/* =============================================================================
   Styles responsives — Tableau complexe avec data-label
   --------------------------------------------------------------------------
   Technique : en dessous de 768px, chaque <tr> devient une "carte" et chaque
   <td> une ligne label/valeur. Le label est lu depuis l'attribut data-label
   généré automatiquement côté PHP — aucun JavaScript requis.

   Rendu mobile attendu :
   ┌──────────────────────────────────┐
   │  GROUPE A – COL 1   │  Valeur   │
   │  GROUPE A – COL 2   │  Valeur   │
   │  GROUPE B – COL 4   │  Valeur   │
   └──────────────────────────────────┘
   ============================================================================= */
@media (max-width: 768px) {
    /* Masque les en-têtes — les data-label des <td> prennent le relais */
    .custom-cp-complex-table thead {
        display: none;
    }

    /* Chaque ligne devient une carte indépendante */
    .custom-cp-complex-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--grey-color, #dee2e6);
        border-radius: 4px;
        overflow: hidden;
    }

    /* Alternance conservée au niveau de la carte */
    .custom-cp-complex-table tbody tr:nth-child(even) {
        background-color: #f8f9fa;
    }

    /* Chaque cellule devient une ligne label | valeur */
    .custom-cp-complex-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.625rem 1rem;
        text-align: right;
        line-height: 1.5;
        border-right: none !important;
        border-bottom: 1px solid var(--grey-color, #dee2e6);
    }

    .custom-cp-complex-table tbody td:last-child {
        border-bottom: none;
    }

    /*
     * Affichage du label via content: attr(data-label).
     * Le data-label est généré par build_data_labels() en PHP.
     * Supporté par tous les navigateurs modernes.
     * Fallback naturel si data-label est absent : ::before n'affiche rien.
     */
    .custom-cp-complex-table tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        max-width: 55%;
        font-weight: 800;
        font-size: 0.8125rem;
        color: var(--text-color, #212529);
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.03125rem;
        line-height: 1.4;
    }

    /* Cellule sans data-label : affichage centré simple, pas de ::before */
    .custom-cp-complex-table tbody td:not([data-label]) {
        justify-content: center;
        text-align: center;
    }

    .custom-cp-complex-table tbody td:not([data-label])::before {
        display: none;
    }
}

/* Très petit écran : labels et valeurs empilés verticalement */
@media (max-width: 480px) {
    .custom-cp-complex-table tbody td {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 0.25rem;
    }

    .custom-cp-complex-table tbody td::before {
        max-width: 100%;
    }
}

/* =============================================================================
   Conteneur pour tableaux Divi (Complex & Tabbed)
   ============================================================================= */
.cp-table-wrapper {
    max-width: 1366px;
    width: 100%;
    margin: auto;
}

.et-db.single-modules_comp #page-container #et-boc #et-main-area #main-content .et_pb_section.custom-cp-table:has(.custom-cp-tabbed-table){
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 0;
}

.et-db.single-modules_comp #page-container #et-boc #et-main-area #main-content .et_pb_section.custom-cp-table:has(.custom-cp-tabbed-table) .custom-cp-tabbed-table{
    margin-bottom: 0;
}

.et-db.single-modules_comp #page-container #et-boc #et-main-area #main-content .et_pb_section.custom-cp-table:has(.custom-cp-tabbed-table) .custom-cp-tabbed-table tr{
    display: flex;
    gap: 10%;
}

.et-db.single-modules_comp #page-container #et-boc #et-main-area #main-content .et_pb_section.custom-cp-table:has(.custom-cp-tabbed-table) .custom-cp-tabbed-table tr td{
    min-width: 8rem;
}

.et-db.single-modules_comp #page-container #et-boc #et-main-area #main-content .et_pb_section.custom-cp-table .et_pb_row:has(.custom-cp-tabbed-table),
.et-db.single #page-container #et-boc .et-l:not(.et-l--header) .et-l--post .et_pb_row.produit-tableau:has(.custom-cp-tabbed-table) {
    max-width: inherit !important;
    width: 100vw;
}

.et-db.single-modules_comp #page-container #et-boc #et-main-area #main-content .et_pb_section.custom-cp-table .et_pb_row:has(.custom-cp-tabbed-table) .et_pb_module:has(h2) {
    max-width: 1366px;
    width: 100vw;
    margin: auto;
}

.et-db.single-modules_comp #page-container #et-boc #et-main-area #main-content .et_pb_section.custom-cp-table .et_pb_row:has(.custom-cp-tabbed-table) .et_pb_module.et_pb_code .cp-tabs-nav {
    max-width: 1366px;
    width: 90%;
    margin: auto;
}

.et-db.single-modules_comp #page-container #et-boc #et-main-area #main-content .et_pb_section.custom-cp-table .et_pb_row:has(.custom-cp-tabbed-table) .et_pb_module.et_pb_code .cp-tab-panel {
    max-width: 1366px;
    width: 90%;
    margin: auto;
    padding: 5rem 0;
}

/* =============================================================================
   Tableaux à onglets
   ============================================================================= */
.custom-cp-tabbed-table {
    margin: 2rem 0;
    background-color: #fff;
}

.custom-cp-tabbed-table .cp-tabs-nav {
    display: flex;
    gap: 2rem;
}

.custom-cp-tabbed-table .cp-tab-button {
    background: inherit;
    border: none;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 24px;
    border-bottom: 3px solid var(--light-grey-color);
    color: var(--light-grey-color);
}

.custom-cp-tabbed-table .cp-tab-button.cp-tab-active {
    border-bottom: 3px solid var(--text-color);
    color: var(--text-color);
}

.custom-cp-tabbed-table .cp-tab-button:hover {
    cursor: pointer;
}

.cp-tabs-content {
    padding: 0;
    background-color: var(--grey-color);
}

.cp-tab-panel {
    padding: 1.25rem;
    display: none !important;
}

.cp-tab-panel.cp-tab-panel-active {
    display: block !important;
}

.cp-tab-panel[hidden] {
    display: none !important;
}

/* Tableaux internes */
.cp-inner-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.cp-inner-table th,
.cp-inner-table td {
    padding: 0.75rem 0.9375rem;
    text-align: left;
}

.cp-inner-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
}

.cp-inner-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.cp-no-data {
    padding: 1.25rem;
    text-align: center;
    color: #999;
    font-style: italic;
}

/* =============================================================================
   Responsive — Tableaux à onglets
   ============================================================================= */
@media (max-width: 400px) {
    .et-db.single-modules_comp #page-container #et-boc #et-main-area #main-content .et_pb_section.custom-cp-table .et_pb_row:has(.custom-cp-tabbed-table) .et_pb_module.et_pb_code .cp-tabs-nav {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 980px) {
    .et-db.single-modules_comp #page-container #et-boc #et-main-area #main-content .et_pb_section.custom-cp-table .et_pb_row:has(.custom-cp-tabbed-table),
    .et-db.single #page-container #et-boc .et-l:not(.et-l--header) .et-l--post .et_pb_row.produit-tableau:has(.custom-cp-tabbed-table) {
        max-width: inherit;
        width: 90%;
    }
}

@media screen and (max-width: 768px) {
    .cp-tab-panel {
        padding: 0.9375rem;
    }
}

@media screen and (max-width: 480px) {
    .custom-cp-table,
    .cp-inner-table {
        font-size: 1em;
    }
}