/* LH Color — Tableaux caractéristiques.
   Centre de style : toutes les couleurs/formes en variables (surchargées par
   les contrôles Elementor via selectors). Reprend le "centre de style" du snippet. */

.lh-carac, .lh-comp, .lh-tabs {
    /* Couleurs */
    --lh-marque:       var(--primaire-accent, #e2001a); /* rouge de marque : en-têtes, onglet actif, bordures */
    --lh-blanc:        var(--neutres-0, #ffffff);
    --lh-titre:        var(--neutres-900, #1a1a1a);
    --lh-valeur:       var(--neutres-700, #333333);

    /* Fonds */
    --lh-fond-zebre:   var(--neutres-50, #f7f7f7);
    --lh-fond-charac:  var(--neutres-100, #eef0f2);
    --lh-fond-coin:    var(--neutres-100, #eef2f6);
    --lh-fond-onglet:  var(--neutres-100, #f0f0f0);
    --lh-onglet-hover: var(--neutres-300, #e2e2e2);
    --lh-separateur:   var(--neutres-300, #e3e3e3);

    /* Forme */
    --lh-radius:        0px;
    --lh-radius-onglet: 0px;

    /* Espacements */
    --lh-pad-entete:  16px 20px;
    --lh-pad-ligne:   12px 20px;
    --lh-pad-cellule: 12px 16px;
    --lh-marge-bas:   1.5rem;

    /* Tailles */
    --lh-largeur-max:      520px;
    --lh-largeur-min-comp: 520px;
    --lh-image-max:        140px;
    --lh-largeur-label:    45%;

    /* Typographie */
    --lh-titre-taille: 1.1em;
    --lh-titre-poids:  800;
    --lh-label-poids:  700;
}

/* --- Tableau individuel --- */
.lh-carac {
    border: 0px solid var(--lh-marque);
    border-radius: var(--lh-radius);
    overflow: hidden;
    font-family: inherit;
    max-width: var(--lh-largeur-max);
    margin: 0 0 var(--lh-marge-bas);
}
.lh-carac__head {
    background: var(--lh-marque);
    color: var(--lh-blanc);
    font-weight: var(--lh-titre-poids);
    font-size: var(--lh-titre-taille);
    line-height: 1;
    padding: var(--lh-pad-entete);
}
.lh-carac__body { display: block; }
.lh-carac__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--lh-pad-ligne);
    border-bottom: 0 solid var(--lh-separateur);
}
.lh-carac__row:last-child { border-bottom: 0; }
.lh-carac__row:nth-child(even) { background: var(--lh-fond-zebre); }
.lh-carac__label { flex: 0 0 var(--lh-largeur-label); font-weight: var(--lh-label-poids); color: var(--lh-titre); }
.lh-carac__value { flex: 1; font-style: italic; color: var(--lh-valeur); }
@media (max-width: 480px) { .lh-carac__label { flex: 0 0 50%; } }

/* --- Tableau comparatif --- */
.elementor-element:has(.lh-comp) { min-width: 0; max-width: 100%; }
.lh-comp { font-family: inherit; margin: 0 0 var(--lh-marge-bas); width: 100%; max-width: 100%; min-width: 0; }
.lh-comp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; border: 0; border-radius: var(--lh-radius); }
.lh-comp__table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: var(--lh-largeur-min-comp); border: 0; }
.lh-comp__table thead, .lh-comp__table tbody, .lh-comp__table tr { border: 0 !important; }
.lh-comp__table th, .lh-comp__table td { padding: var(--lh-pad-cellule); text-align: center; vertical-align: middle; border: 0 solid var(--lh-separateur); }
.lh-comp__table th, .lh-comp__table td { border-block-start: 0 !important; }
.lh-comp__table tbody tr:last-child th, .lh-comp__table tbody tr:last-child td { border-bottom: 0; }
.lh-comp__corner { position: sticky; left: 0; z-index: 3; background: var(--lh-fond-coin); }
.lh-comp__prod { background: var(--lh-marque); color: var(--lh-blanc); font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.lh-comp__img { display: block; margin: 0 auto; max-width: var(--lh-image-max); height: auto; }
.lh-comp__imgcell { background: var(--lh-blanc); text-align: center; vertical-align: bottom; }
.lh-comp__name { display: block; }
.lh-comp__sku { display: block; font-weight: 500; font-size: .8rem; opacity: .85; margin-top: 2px; }
.lh-comp__link { display: inline-block; margin-top: 8px; font-size: .8rem; font-weight: 500; text-decoration: underline; color: inherit; opacity: .95; transition: color .2s ease, opacity .2s ease, text-decoration-color .2s ease; }
.lh-comp__link:hover { opacity: 1; }
.lh-comp__charac { text-align: left; font-weight: var(--lh-label-poids); color: var(--lh-titre); position: sticky; left: 0; z-index: 2; white-space: nowrap; background: var(--lh-fond-zebre); }
.lh-comp__table tbody tr:nth-child(even) td { background: var(--lh-fond-zebre); }
.lh-comp__table tbody tr:nth-child(even) .lh-comp__charac { background: var(--lh-fond-charac); }
.lh-comp__val { font-style: italic; color: var(--lh-valeur); }
.lh-comp__title { font-weight: 800; font-size: 1.4rem; margin: 0 0 .6rem; color: var(--lh-titre); }

/* --- Onglets --- */
.lh-tabs { margin: 0 0 var(--lh-marge-bas); }
.lh-tabs__nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.lh-tabs__label { cursor: pointer; padding: 10px 18px; border: 0; border-radius: var(--lh-radius-onglet); background: var(--lh-fond-onglet); color: var(--lh-titre); font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; user-select: none; transition: background .2s ease, color .2s ease; }
.lh-tabs__label:hover { background: var(--lh-onglet-hover); }
.lh-tabs__label.is-active { background: var(--lh-marque); color: var(--lh-blanc); }
.lh-tabs__panel { display: none; }
.lh-tabs__panel.is-active { display: block; }

/* --- Détails spécifiques (le registre CercleKit) : types visuels --- */
.ckwc-det-img { display: block; max-width: 72px; height: auto; border-radius: 4px; }
.ckwc-det-color { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); vertical-align: -3px; }
.ckwc-det-fichier, .ckwc-det-lien { color: inherit; text-decoration: underline; }