/**
 * LOCE Elementor Kit — Styles globaux
 *
 * Le fond du badge utilise des variables CSS pour permettre
 * l'opacité sur la couleur primaire du thème Elementor.
 *
 * Technique : on stocke la couleur dans --loce-badge-bg-custom
 * et l'opacité dans --loce-badge-bg-opacity, puis on compose
 * avec color-mix() pour le support natif, et un fallback rgba.
 */

/* ── Badge ──────────────────────────────────────────────────────────────── */

.loce-badge {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    font-family: inherit; /* hérite de la typo du thème */

    /*
     * Fond : couleur primaire Elementor à 15% d'opacité par défaut.
     * --loce-badge-bg-custom est injecté par le contrôle Elementor si l'utilisateur choisit une couleur.
     * --loce-badge-bg-opacity est injecté par le slider (défaut 0.15).
     * Fallback sur var(--e-global-color-primary) si rien n'est défini.
     */
    --loce-badge-bg-opacity: 0.15;
    --loce-badge-bg-custom: var(--e-global-color-primary, #2B2E5F);

    background-color: color-mix(
        in srgb,
        var(--loce-badge-bg-custom) calc(var(--loce-badge-bg-opacity) * 100%),
        transparent
    );
}

/* Fallback pour navigateurs sans support color-mix (< Safari 16.2, < Chrome 111) */
@supports not (background-color: color-mix(in srgb, red 50%, transparent)) {
    .loce-badge {
        /* On applique directement avec opacity sur un pseudo-element */
        position: relative;
        isolation: isolate;
    }
    .loce-badge::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-color: var(--loce-badge-bg-custom);
        opacity: var(--loce-badge-bg-opacity);
        z-index: -1;
    }
}

/* Lien wrappant le badge : reset des styles de lien */
a:has(.loce-badge) {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

a:has(.loce-badge):hover .loce-badge {
    filter: brightness(0.9);
    transition: filter 0.2s ease;
}

/* Wrapper Elementor : empêche le badge de s'étirer sur toute la colonne */
.elementor-widget-loce_badge .elementor-widget-container {
    width: fit-content;
}