/* doc-project | assets/css/problems.css | Habille le comparatif sémantique Avant CNOC / Avec CNOC avec deux colonnes lisibles, lignes appariées, bénéfices mis en avant et adaptation mobile. | Expose: aucun | Dépend de: index.php, assets/css/base.css | Impacte: compréhension du comparatif, hiérarchie visuelle, accessibilité du tableau et responsive | Tables: transformation-table */
.transformation-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: var(--shadow);
}

.transformation-table {
    width: 100%;
    min-width: 620px;
    table-layout: fixed;
    border-collapse: collapse;
}

.transformation-table th,
.transformation-table td {
    width: 50%;
    padding: 1.15rem 1.25rem;
    text-align: left;
    vertical-align: middle;
}

.transformation-table thead th {
    color: var(--text);
    background: rgba(255, 255, 255, 0.055);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.transformation-table thead th:last-child {
    color: var(--success);
    background: rgba(143, 247, 202, 0.08);
}

.transformation-table th + th,
.transformation-table td + td {
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.transformation-table tbody tr + tr td {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.transformation-table__before {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.018);
}

.transformation-table__after {
    color: var(--muted-strong);
    background: rgba(143, 247, 202, 0.035);
    font-weight: 650;
}

.transformation-table__benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.transformation-table__check {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    margin-top: 0.05rem;
    border: 1px solid rgba(143, 247, 202, 0.28);
    border-radius: 999px;
    color: var(--success);
    background: rgba(143, 247, 202, 0.09);
}

.transformation-table__check .icon {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 720px) {
    .transformation-table {
        min-width: 540px;
    }

    .transformation-table th,
    .transformation-table td {
        padding: 0.9rem;
        font-size: 0.92rem;
    }

    .transformation-table thead th {
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }
}