/**
 * Styles pour le widget Tableau de Spécifications
 * Formatage selon l'image de référence : deux colonnes, gauche en gras, droite normale, sans bordures
 *
 * @package sway-child
 */

/* Container principal du tableau */
.kd-table-specifications {
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Bloc blanc qui contient le titre et le tableau */
.kd-table-white-block {
    background-color: white;
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Titre du tableau */
.kd-table-title {
    margin-bottom: 20px;
    font-weight: 600;
    color: #333;
    text-align: center;
    width: 100%;
}

/* Titre dans le bloc blanc */
.kd-table-white-block .kd-table-title {
    margin-bottom: 20px;
    margin-top: 0;
}

/* Container du tableau */
.kd-table-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: auto;
    max-width: 600px;
    margin: 0 auto;
}

/* Container du tableau dans le bloc blanc */
.kd-table-white-block .kd-table-container {
    margin: 0;
    align-items: flex-start;
}

/* Ligne du tableau */
.kd-table-row {
    display: flex;
    width: auto;
    max-width: 100%;
    align-items: center;
    padding: 4px 0;
}

/* Colonne caractéristique (gauche) */
.kd-table-characteristic {
    font-weight: bold;
    color: #333;
    flex: 0 0 auto;
    min-width: 250px;
    padding-right: 30px;
    text-align: left;
}

/* Colonne valeur (droite) */
.kd-table-value {
    font-weight: normal;
    color: #666;
    flex: 1;
    padding-left: 0;
    text-align: left;
}

/* Responsive design */
@media (max-width: 768px) {

    .kd-table-container {
        max-width: 100%;
        width: auto;
    }
    
    .kd-table-white-block {
        padding: 20px 25px;
        margin: 0 15px;
    }
    
    /* Conserver le format tableau sur mobile */
    .kd-table-row {
        flex-direction: row;
        align-items: center;
        gap: 0;
        flex-wrap: nowrap;
    }
    
    .kd-table-characteristic {
        min-width: 180px;
        max-width: 180px;
        padding-right: 15px;
        text-align: left;
        font-size: 14px;
    }
    
    .kd-table-value {
        padding-left: 0;
        padding-top: 0;
        text-align: left;
        font-size: 14px;
        flex: 1;
    }
}

/* Ajustements pour les petits écrans */
@media (max-width: 480px) {
    .kd-table-white-block {
        padding: 15px 20px;
        margin: 0 10px;
    }
    
    .kd-table-characteristic {
        min-width: 150px;
        max-width: 150px;
        font-size: 13px;
        padding-right: 10px;
    }
    
    .kd-table-value {
        font-size: 13px;
    }
}

/* Styles pour l'éditeur WPBakery */
.vc_shortcode-param .kd-table-specifications {
    pointer-events: none;
}

/* Suppression de toutes les bordures possibles */
.kd-table-specifications,
.kd-table-container,
.kd-table-row,
.kd-table-characteristic,
.kd-table-value {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Espacement uniforme entre les lignes */
.kd-table-row:not(:last-child) {
    margin-bottom: 2px;
}

/* Centrage spécifique pour les sections WPBakery */
.wpb_wrapper .kd-table-specifications,
.vc_row .kd-table-specifications,
.wpb_column .kd-table-specifications {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* Assurer que le titre reste centré */
.wpb_wrapper .kd-table-title,
.vc_row .kd-table-title,
.wpb_column .kd-table-title {
    text-align: center !important;
    width: 100% !important;
}

/* Assurer que le conteneur du tableau reste centré */
.wpb_wrapper .kd-table-container,
.vc_row .kd-table-container,
.wpb_column .kd-table-container {
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}