/* StudioJAE Core Plugin Styles */

/* Variables spécifiques au plugin */
:root {

}

/* Styles des icônes du plugin */
.oh-emoji,
.heart,
.heart-smiley,
.frenchflag,
.frenchoctogone,
.french,
.studiojae {
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 .1em 0 6px;
    transform: translateY(.1em);
}

.heart { background-image: url(../img/icons/heart.svg); }
.heart-smiley { background-image: url(../img/icons/emoji-heart.svg); }
.frenchflag { background-image: url(../img/icons/france-flag.svg); }
.frenchoctogone { background-image: url(../img/icons/france-flag.svg); }
.french { background-image: url(../img/icons/france.svg); }
.studiojae { background-image: url(../img/logos/studiojae.svg); }

/* Styles des widgets Elementor personnalisés */
.studiojae-widget {
    margin-bottom: 20px;
}

.studiojae-widget-title {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: var(--color-green);
}

/* Styles des boutons du plugin */
.studiojae-button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.studiojae-button-primary {
    background-color: var(--color-violet);
    color: white;
}

.studiojae-button-primary:hover {
    background-color: var(--color-violet-hover);
}

.studiojae-button-secondary {
    background-color: var(--color-green);
    color: white;
}

.studiojae-button-secondary:hover {
    background-color: var(--color-green-hover);
}