/*
 Theme Name:   ColorMag Child
 Theme URI:    ...
 Description:  ...
 Author:       ...
 Author URI:   ...
 Template:     colormag
 Version:      1.0.0
 Text Domain:  colormag-child
 Domain Path:  /languages
*/

@import url('../colormag/style.css');

.ai-device-single .entry-header {
    margin-bottom: 2em;
    text-align: center;
}

.ai-device-single .device-main-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 1em;
}

.spec-group {
    margin-bottom: 2.5em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #eee;
}

.spec-group h2 {
    font-size: 1.8em;
    margin-bottom: 1em;
    color: #333;
}

.spec-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.spec-list li {
    padding: 10px 5px;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
}

.spec-list li:last-child {
    border-bottom: none;
}

.spec-list li strong {
    flex: 0 0 200px; /* Adjust width of the label column */
    color: #555;
}

/*
 * Styles for AI Device Comparison Table
 * -------------------------------------------------- */
.device-comparison-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 2em 0;
    overflow-x: auto; /* Pour la lisibilité sur mobile */
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.comparison-table th,
.comparison-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

/* --- Table Header --- */
.comparison-table thead th {
    background-color: #f9f9f9;
    vertical-align: top;
    text-align: center;
    border-bottom: 2px solid #0073aa; /* Couleur WordPress */
}

.comparison-table th.spec-label-col {
    text-align: left;
    background: #fff;
    font-size: 1.2em;
}

.comparison-table th .device-title {
    display: block;
    margin-top: 10px;
    font-size: 1.1em;
    color: #23282d;
    font-weight: 600;
}

.comparison-table th a {
    text-decoration: none;
    color: inherit;
}

.comparison-table th img {
    max-width: 150px;
    height: auto;
    border-radius: 8px;
}

/* --- Table Body --- */
.comparison-table tbody td {
    vertical-align: middle;
}

/* Ligne de titre de groupe (ex: Hardware) */
.comparison-table tr.group-header td {
    background-color: #f5f5f5;
    font-weight: bold;
    color: #444;
    font-size: 1.1em;
    text-align: center;
}

/* Lignes de spécifications */
.comparison-table tbody tr:nth-child(even):not(.group-header) {
    background-color: #fdfdfd;
}

.comparison-table tbody td:first-child {
    font-weight: 600;
    color: #555;
    width: 25%; /* Ajustez si besoin */
}

.comparison-table tbody td:not(:first-child) {
    text-align: center;
    font-size: 1.1em;
    color: #333;
}

/* Pour mettre en surbrillance une colonne (par ex. le gagnant) */
.comparison-table .highlight {
    background-color: #e8f5e9 !important; /* Vert clair */
    border: 2px solid #4CAF50;
}

/*
 * Rendre l'en-tête du tableau de comparaison "sticky" (Version plus spécifique)
 * -------------------------------------------------- */
.entry-content .comparison-table thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0; 
    z-index: 10;
    background-color: #f9f9f9;
}

.entry-content .comparison-table thead th.spec-label-col {
    background-color: #fff;
}