/* ─── TABLEAU COMPARATIF SKURIA ─── */

/* Wrapper et conteneur du plugin */
.sk-table-styled .ert-responsive-table-wrapper {
    border-radius: var(--sk-r, 1.25rem);
    overflow: hidden;
    border: 1px solid var(--sk-bd);
    box-shadow: 0 4px 24px rgba(26,37,64,.07);
    margin: 2rem 0;
}

/* En-têtes (Thead) */
.sk-table-styled .ert-table thead .ert-title-row th {
    background-color: var(--sk-ow) !important;
    color: var(--sk-nv) !important;
    padding: 1.1rem 1.4rem !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--sk-bd) !important;
}

/* Mise en avant de la dernière colonne (Skuria) */
.sk-table-styled .ert-table thead .ert-title-row th:last-child {
    background: linear-gradient(135deg, var(--sk-nv), var(--sk-nv-l)) !important;
    color: white !important;
}

/* Cellules du corps */
.sk-table-styled .ert-table tbody tr td, 
.sk-table-styled .ert-table tbody tr th {
    padding: 1rem 1.4rem !important;
    font-size: 0.88rem !important;
    border-bottom: 1px solid var(--sk-bd) !important;
    background: transparent !important;
    color: var(--sk-nv);
}

/* Style de la première colonne (Critères) */
.sk-table-styled .ert-table tbody tr th[scope="row"] {   
    font-weight: 600 !important;
    width: 34%;
}

/* Style de la dernière colonne (Skuria) */
.sk-table-styled .ert-table tbody tr td:last-child {
    background-color: var(--sk-pk-a) !important;
    font-weight: 500 !important;
}

/* Éléments internes au texte */
.sk-table-styled small {
    display: block;
    color: var(--sk-mu);
    font-size: 0.75rem;
    font-weight: 400;
    margin-top: 4px;
}

/* Badge Recommandé (à insérer en HTML dans l'en-tête) */
.th-badge {
    background: var(--sk-pk);
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    text-transform: uppercase;
}

/* ─── RESPONSIVE MOBILE ─── */
@media (max-width: 768px) {
    .sk-table-styled .ert-table tr {
        border: 2px solid var(--sk-pk) !important;
        margin-bottom: 25px !important;
        display: block;
        border-radius: var(--sk-r);
        overflow: hidden;
    }

    .sk-table-styled .ert-table td, 
    .sk-table-styled .ert-table th[scope="row"] {
        display: block !important;
        text-align: right !important;
        padding-left: 45% !important;
        position: relative;
        width: 100% !important;
    }

    .sk-table-styled .ert-table td::before, 
    .sk-table-styled .ert-table th[scope="row"]::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        font-weight: bold;
        color: var(--sk-pk);
        font-size: 0.75rem;
        text-transform: uppercase;
    }

    /* Critère en tête de carte sur mobile */
    .sk-table-styled .ert-table th[scope="row"] {
        background-color: var(--sk-nv) !important;
        color: white !important;
        text-align: center !important;
        padding: 12px !important;
    }
    .sk-table-styled .ert-table th[scope="row"]::before { display: none !important; }
}

/* --- Style de la dernière ligne du tableau --- */

/* On cible la dernière ligne (tr) du corps du tableau (tbody) */
.sk-table-styled .ert-table tbody tr:last-child {
    background-color: var(--sk-nv) !important; /* Fond bleu nuit Skuria */
    color: white !important; /* Texte en blanc pour le contraste */
}

/* On s'assure que toutes les cellules de cette ligne héritent du style */
.sk-table-styled .ert-table tbody tr:last-child td,
.sk-table-styled .ert-table tbody tr:last-child th {
    color: white !important;
    font-weight: 600;
    border-bottom: none !important; /* Retire la bordure finale */
}

/* Optionnel : arrondir les coins du bas si nécessaire */
.sk-table-styled .ert-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--sk-r);
}
.sk-table-styled .ert-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--sk-r);
}

/* --- Cas particulier Mobile --- */
@media (max-width: 768px) {
    .sk-table-styled .ert-table tr:last-child {
        border: 2px solid var(--sk-nv) !important; /* Bordure plus épaisse pour marquer la fin */
    }
}