/* ========================================================================== */
/* EMOJI PLUS - CSS UNIFIÉ POUR WPFORO ET TINYMCE + MODAL IMAGE + VIDÉO + AUDIO + LIENS */
/* Basé sur le style emoji-plugin.css qui fonctionne parfaitement */
/* ========================================================================== */

/* Variables globales */
:root {
    --emoji-primary-color: #A76635;
    --emoji-secondary-color: #424242;
    --emoji-border-color: #eeeeee;
    --emoji-background: #eff1f1;
    --emoji-border-bottom: #dcdcde;
    --emoji-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --emoji-overlay-bg: rgba(0, 0, 0, 0.5);
}

/* Reset pour éviter les conflits */
#emoji-overlay *,
#emoji-container *,
#image-insert-overlay *,
#image-insert-container *,
#video-insert-overlay *,
#video-insert-container *,
#audio-insert-overlay *,
#audio-insert-container *,
#link-insert-overlay *,
#link-insert-container *,
.emoji-modal-overlay *,
.image-modal-overlay *,
.video-modal-overlay *,
.audio-modal-overlay *,
.link-modal-overlay * {
    box-sizing: border-box;
    font-family: inherit;
    line-height: normal;
}

/* ========================================================================== */
/* ICÔNES BOUTONS EMOJI, IMAGE, VIDÉO, AUDIO ET LIENS UNIFIÉES */
/* ========================================================================== */

/* Classe commune pour tous les boutons (emoji ET image ET vidéo ET audio ET liens) */
.emoji-plus-icon-btn,
.image-plus-icon-btn,
.video-plus-icon-btn,
.audio-plus-icon-btn,
.link-plus-icon-btn {
    background: #f0f0f0 !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    margin: 2px !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 25px !important;
    height: 25px !important;
}

/* Icône par défaut commune pour tous les boutons */
.emoji-plus-icon-btn::before,
.image-plus-icon-btn::before,
.video-plus-icon-btn::before,
.audio-plus-icon-btn::before,
.link-plus-icon-btn::before {
    content: "";
    display: block;
    width: 25px !important;
    height: 25px !important;
    background-size: 20px 20px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: filter 0.2s ease !important;
}

/* Icône spécifique pour le bouton emoji */
.emoji-plus-icon-btn::before {
    background-image: url('../../assets/images/add-emoji.png') !important;
}

/* Icône spécifique pour le bouton image */
.image-plus-icon-btn::before {
    background-image: url('../../assets/images/add-img.png') !important;
}

/* Icône spécifique pour le bouton vidéo */
.video-plus-icon-btn::before {
    background-image: url('../../assets/images/add-video.png') !important;
}

/* Icône spécifique pour le bouton audio */
.audio-plus-icon-btn::before {
    background-image: url('../../assets/images/add-audio.png') !important;
}

/* Icône spécifique pour le bouton lien */
.link-plus-icon-btn::before {
    background-image: url('../../assets/images/add-link.png') !important;
}

/* Effet hover commun pour tous les boutons */
.emoji-plus-icon-btn:hover::before,
.image-plus-icon-btn:hover::before,
.video-plus-icon-btn:hover::before,
.audio-plus-icon-btn:hover::before,
.link-plus-icon-btn:hover::before {
    filter: grayscale(100%) !important;
}

/* ========================================================================== */
/* OVERLAY ET CONTAINERS DES MODALS (Emoji + Image + Vidéo + Audio + Liens) */
/* ========================================================================== */

#emoji-overlay,
#image-insert-overlay,
#video-insert-overlay,
#audio-insert-overlay,
#link-insert-overlay,
.emoji-modal-overlay,
.image-modal-overlay,
.video-modal-overlay,
.audio-modal-overlay,
.link-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--emoji-overlay-bg) !important;
    z-index: 9999999 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
}

/* ========================================================================== */
/* CONTAINER PRINCIPAL DE LA MODAL EMOJI */
/* ========================================================================== */

#emoji-container {
    width: 475px !important;
    max-width: 90% !important;
    padding: 0 !important;
    background-color: white !important;
    border: 2px solid var(--emoji-border-color) !important;
    box-shadow: var(--emoji-shadow) !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
    position: relative !important;
    margin: 0 auto !important;
    border-radius: 5px !important;
}

/* ========================================================================== */
/* CONTAINER PRINCIPAL DE LA MODAL IMAGE */
/* ========================================================================== */

#image-insert-container {
    width: 450px !important;
    max-width: 90% !important;
    padding: 0 !important;
    background-color: white !important;
    border: 2px solid var(--emoji-border-color) !important;
    box-shadow: var(--emoji-shadow) !important;
    z-index: 999999 !important;
    position: relative !important;
    margin: 0 auto !important;
    border-radius: 5px !important;
}

/* ========================================================================== */
/* CONTAINER PRINCIPAL DE LA MODAL VIDÉO */
/* ========================================================================== */

#video-insert-container {
    width: 450px !important;
    max-width: 90% !important;
    padding: 0 !important;
    background-color: white !important;
    border: 2px solid var(--emoji-border-color) !important;
    box-shadow: var(--emoji-shadow) !important;
    z-index: 999999 !important;
    position: relative !important;
    margin: 0 auto !important;
    border-radius: 5px !important;
}

/* ========================================================================== */
/* CONTAINER PRINCIPAL DE LA MODAL AUDIO */
/* ========================================================================== */

#audio-insert-container {
    width: 450px !important;
    max-width: 90% !important;
    padding: 0 !important;
    background-color: white !important;
    border: 2px solid var(--emoji-border-color) !important;
    box-shadow: var(--emoji-shadow) !important;
    z-index: 999999 !important;
    position: relative !important;
    margin: 0 auto !important;
    border-radius: 5px !important;
}

/* ========================================================================== */
/* CONTAINER PRINCIPAL DE LA MODAL LIENS */
/* ========================================================================== */

#link-insert-container {
    width: 450px !important;
    max-width: 90% !important;
    padding: 0 !important;
    background-color: white !important;
    border: 2px solid var(--emoji-border-color) !important;
    box-shadow: var(--emoji-shadow) !important;
    z-index: 999999 !important;
    position: relative !important;
    margin: 0 auto !important;
    border-radius: 5px !important;
}

#image-insert-header,
#video-insert-header,
#audio-insert-header,
#link-insert-header {
    padding: 15px 20px !important;
    background-color: var(--emoji-background) !important;
    border-bottom: 1px solid var(--emoji-border-color) !important;
}

#image-insert-header h3,
#video-insert-header h3,
#audio-insert-header h3,
#link-insert-header h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: var(--emoji-secondary-color) !important;
}

#image-insert-content,
#video-insert-content,
#audio-insert-content,
#link-insert-content {
    padding: 20px !important;
}
/* Agrandir la hauteur du menu déroulant des icônes */
.link-insert-field select {
    width: 100% !important;
    padding: 12px 12px !important; /* Augmenté de 8px à 12px */
    border: 1px solid var(--emoji-border-color) !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
    height: 45px !important; /* Hauteur fixe plus grande */
}

/* ========================================================================== */
/* STYLES POUR LES CHAMPS DES MODALS IMAGE, VIDÉO, AUDIO ET LIENS */
/* ========================================================================== */

.image-insert-field,
.video-insert-field,
.audio-insert-field,
.link-insert-field {
    margin-bottom: 15px !important;
}

.image-insert-field label,
.video-insert-field label,
.audio-insert-field label,
.link-insert-field label {
    display: block !important;
    margin-bottom: 5px !important;
    font-weight: bold !important;
    color: var(--emoji-secondary-color) !important;
    font-size: 14px !important;
}

.image-insert-field input[type="url"],
.image-insert-field input[type="text"],
.image-insert-field input[type="number"],
.video-insert-field input[type="url"],
.video-insert-field input[type="text"],
.video-insert-field input[type="number"],
.audio-insert-field input[type="url"],
.audio-insert-field input[type="text"],
.link-insert-field input[type="url"],
.link-insert-field input[type="text"],
.link-insert-field select {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid var(--emoji-border-color) !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

.image-insert-field input[type="url"]:focus,
.image-insert-field input[type="text"]:focus,
.image-insert-field input[type="number"]:focus,
.video-insert-field input[type="url"]:focus,
.video-insert-field input[type="text"]:focus,
.video-insert-field input[type="number"]:focus,
.audio-insert-field input[type="url"]:focus,
.audio-insert-field input[type="text"]:focus,
.link-insert-field input[type="url"]:focus,
.link-insert-field input[type="text"]:focus,
.link-insert-field select:focus {
    outline: none !important;
    border-color: var(--emoji-primary-color) !important;
    box-shadow: 0 0 0 2px rgba(167, 102, 53, 0.2) !important;
}

.size-help-text {
    font-size: 11px !important;
    color: #888 !important;
    font-style: italic !important;
    display: block !important;
    margin-top: 5px !important;
}

/* ========================================================================== */
/* APERÇU DE L'IMAGE, VIDÉO, AUDIO ET LIENS */
/* ========================================================================== */

.image-insert-preview,
.video-insert-preview,
.audio-insert-preview,
.link-insert-preview {
    margin: 15px 0 !important;
    text-align: center !important;
    padding: 10px !important;
    border: 1px dashed var(--emoji-border-color) !important;
    border-radius: 4px !important;
    background-color: #fafafa !important;
}

.link-insert-preview {
    text-align: left !important;
}

.image-insert-preview img,
.video-insert-preview img {
    max-width: 100% !important;
    max-height: 200px !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

#video-title {
    margin-top: 10px !important;
    font-weight: bold !important;
    color: var(--emoji-secondary-color) !important;
    font-size: 14px !important;
}

/* ========================================================================== */
/* BOUTONS D'ACTIONS DES MODALS IMAGE, VIDÉO, AUDIO ET LIENS */
/* ========================================================================== */

.image-insert-actions,
.video-insert-actions,
.audio-insert-actions,
.link-insert-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    margin-top: 20px !important;
}

.image-btn-primary,
.image-btn-secondary,
.video-btn-primary,
.video-btn-secondary,
.audio-btn-primary,
.audio-btn-secondary,
.link-btn-primary,
.link-btn-secondary {
    padding: 8px 16px !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.image-btn-primary,
.video-btn-primary,
.audio-btn-primary,
.link-btn-primary {
    background-color: var(--emoji-primary-color) !important;
    color: white !important;
}

.image-btn-primary:hover,
.video-btn-primary:hover,
.audio-btn-primary:hover,
.link-btn-primary:hover {
    background-color: #8d5429 !important;
}

.image-btn-secondary,
.video-btn-secondary,
.audio-btn-secondary,
.link-btn-secondary {
    background-color: var(--emoji-secondary-color) !important;
    color: white !important;
}

.image-btn-secondary:hover,
.video-btn-secondary:hover,
.audio-btn-secondary:hover,
.link-btn-secondary:hover {
    background-color: #333333 !important;
}

/* ========================================================================== */
/* ZONE DES ONGLETS */
/* ========================================================================== */

#emoji-tabs {
    display: flex !important;
    gap: 5px !important;
    overflow-x: auto !important;
    padding: 10px !important;
    flex-wrap: wrap !important;
    position: sticky !important;
    top: 0 !important;
    background-color: var(--emoji-background) !important;
    z-index: 999990 !important;
    color: white !important;
    border-bottom: var(--emoji-border-bottom) 3px solid !important;
}

/* Boutons d'onglets */
.emoji-tab {
    border: none !important;
    padding: 4px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    border-radius: 5px !important;
    background: var(--emoji-secondary-color) !important;
    color: white !important;
    transition: background-color 0.2s ease !important;
    margin: 2px !important;
}

/* Onglet actif */
.emoji-tab.active {
    background-color: var(--emoji-primary-color) !important;
    color: white !important;
    font-weight: bold !important;
}

/* ========================================================================== */
/* ZONE DE CONTENU DES EMOJIS */
/* ========================================================================== */

#emoji-content {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 10px !important;
    justify-content: center !important;
    
}

/* ========================================================================== */
/* ÉLÉMENTS EMOJI INDIVIDUELS */
/* ========================================================================== */

/* Container de chaque emoji */
.emoji-item-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 5px !important;
    cursor: pointer !important;
    padding: 3px !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
}

/* Styles communs pour tous les emojis */
.emoji-text,
.emoji-image,
.emoji-image-large {
    transition: opacity 0.2s ease, filter 0.2s ease !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Effet hover */
.emoji-text:hover,
.emoji-image:hover,
.emoji-image-large:hover {
    opacity: 0.7 !important;
    filter: saturate(0) !important;
}

/* Emojis texte (Unicode) */
.emoji-text {
    font-size: 24px !important;
    line-height: 1.2 !important;
    user-select: none !important;
}

/* Images d'emojis normales */
.emoji-image {
    width: 50px !important;
    height: auto !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

/* Images d'emojis grandes (Annimer et Clavier) */
.emoji-image-large {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}

/* ========================================================================== */
/* TITRES DES EMOJIS */
/* ========================================================================== */

.emoji-title {
    font-size: 12px !important;
    font-weight: bold !important;
    color: black !important;
    margin-top: 5px !important;
    text-align: center !important;
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Titre spécial pour les claviers */
.emoji-title-keyboard {
    margin-top: -10px !important;
}

/* ========================================================================== */
/* STYLES SPÉCIFIQUES WPFORO UNIFIÉS */
/* ========================================================================== */

/* Boutons emoji ET image ET vidéo ET audio ET liens dans la barre d'outils wpForo */
.emoji-plus-btn,
.image-plus-btn,
.video-plus-btn,
.audio-plus-btn,
.link-plus-btn,
[class*="emoji-plus-btn-"],
[class*="image-plus-btn-"],
[class*="video-plus-btn-"],
[class*="audio-plus-btn-"],
[class*="link-plus-btn-"],
.wpforo-emoji-btn,
.wpforo-image-btn,
.wpforo-video-btn,
.wpforo-audio-btn,
.wpforo-link-btn,
[class*="wpforo-emoji-btn-"],
[class*="wpforo-image-btn-"],
[class*="wpforo-video-btn-"],
[class*="wpforo-audio-btn-"],
[class*="wpforo-link-btn-"] {
    background: transparent !important;
    border: none !important;
    padding: 6px !important;
    margin: 2px !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* Images des boutons emoji ET image ET vidéo ET audio ET liens */
.emoji-plus-btn img,
.image-plus-btn img,
.video-plus-btn img,
.audio-plus-btn img,
.link-plus-btn img,
.wpforo-emoji-btn img,
.wpforo-image-btn img,
.wpforo-video-btn img,
.wpforo-audio-btn img,
.wpforo-link-btn img {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    border: none !important;
    background: transparent !important;
    transition: filter 0.2s ease !important;
}

/* Effet hover sur les boutons */
.emoji-plus-btn:hover img,
.image-plus-btn:hover img,
.video-plus-btn:hover img,
.audio-plus-btn:hover img,
.link-plus-btn:hover img,
.wpforo-emoji-btn:hover img,
.wpforo-image-btn:hover img,
.wpforo-video-btn:hover img,
.wpforo-audio-btn:hover img,
.wpforo-link-btn:hover img {
    filter: grayscale(100%) !important;
}

/* Container de barre d'outils personnalisée */
.emoji-plus-custom-toolbar,
.wpforo-emoji-custom-toolbar {
    padding: 5px !important;
    border-bottom: 1px solid #ddd !important;
    background: #f9f9f9 !important;
    margin-bottom: 5px !important;
}

/* ========================================================================== */
/* COMPATIBILITÉ WOOCOMMERCE (Emoji + Image + Vidéo + Audio + Liens) */
/* ========================================================================== */

body.post-type-product #emoji-overlay,
body.post-type-product #image-insert-overlay,
body.post-type-product #video-insert-overlay,
body.post-type-product #audio-insert-overlay,
body.post-type-product #link-insert-overlay,
body.post-type-product .emoji-modal-overlay,
body.post-type-product .image-modal-overlay,
body.post-type-product .video-modal-overlay,
body.post-type-product .audio-modal-overlay,
body.post-type-product .link-modal-overlay,
body.woocommerce-page #emoji-overlay,
body.woocommerce-page #image-insert-overlay,
body.woocommerce-page #video-insert-overlay,
body.woocommerce-page #audio-insert-overlay,
body.woocommerce-page #link-insert-overlay,
body.woocommerce-page .emoji-modal-overlay,
body.woocommerce-page .image-modal-overlay,
body.woocommerce-page .video-modal-overlay,
body.woocommerce-page .audio-modal-overlay,
body.woocommerce-page .link-modal-overlay,
body.wp-admin.post-type-product #emoji-overlay,
body.wp-admin.post-type-product #image-insert-overlay,
body.wp-admin.post-type-product #video-insert-overlay,
body.wp-admin.post-type-product #audio-insert-overlay,
body.wp-admin.post-type-product #link-insert-overlay,
body.wp-admin.post-type-product .emoji-modal-overlay,
body.wp-admin.post-type-product .image-modal-overlay,
body.wp-admin.post-type-product .video-modal-overlay,
body.wp-admin.post-type-product .audio-modal-overlay,
body.wp-admin.post-type-product .link-modal-overlay {
    z-index: 10000000 !important;
}

body.post-type-product #emoji-container,
body.post-type-product #image-insert-container,
body.post-type-product #video-insert-container,
body.post-type-product #audio-insert-container,
body.post-type-product #link-insert-container,
body.woocommerce-page #emoji-container,
body.woocommerce-page #image-insert-container,
body.woocommerce-page #video-insert-container,
body.woocommerce-page #audio-insert-container,
body.woocommerce-page #link-insert-container,
body.wp-admin.post-type-product #emoji-container,
body.wp-admin.post-type-product #image-insert-container,
body.wp-admin.post-type-product #video-insert-container,
body.wp-admin.post-type-product #audio-insert-container,
body.wp-admin.post-type-product #link-insert-container {
    z-index: 10000001 !important;
}

/* ========================================================================== */
/* SUPPRESSION DES BORDURES IMAGES EMOJI */
/* ========================================================================== */

/* wpForo spécifique */
#wpforo #wpforo-wrap .wpforo-post .wpforo-post-content img,
#wpforo #wpforo-wrap .wpforo-revision-body img {
    border: none !important;
    background: transparent !important;
}

.wpforo-post-content img, 
.wpforo-post img,
.wpf-post-content img {
    border: none !important;
}

/* Images emoji générales - SEULEMENT les emojis animés */
img[src*="/images/emojis/"],
img[src*="emoji-plus"] {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    max-width: 90px !important;
    height: auto !important;
}

/* Images de claviers - taille normale dans la modal */
#emoji-container img[src*="/images/claviers/"],
.emoji-modal-overlay img[src*="/images/claviers/"] {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 300px !important;
    height: auto !important;
    padding-bottom: 5px !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Images de claviers - taille FIXE dans les messages wpForo */
#wpforo img[src*="/images/claviers/"],
.wpforo-post-content img[src*="/images/claviers/"],
.wpforo-post img[src*="/images/claviers/"],
.wpf-post-content img[src*="/images/claviers/"] {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 300px !important;
    height: auto !important;
}

/* ========================================================================== */
/* STYLES RESPONSIVE POUR LES CINQ MODALS */
/* ========================================================================== */

@media (max-width: 768px) {
    #emoji-container,
    #image-insert-container,
    #video-insert-container,
    #audio-insert-container,
    #link-insert-container {
        width: 95% !important;
        max-height: 85vh !important;
    }
    
    .emoji-tab {
        padding: 3px !important;
        font-size: 11px !important;
    }
    
    .emoji-text {
        font-size: 20px !important;
    }
    
    .emoji-image {
        width: 40px !important;
        max-height: 40px !important;
    }
    
    /* Modal image, vidéo, audio et liens responsive */
    #image-insert-content,
    #video-insert-content,
    #audio-insert-content,
    #link-insert-content {
        padding: 15px !important;
    }
    
    .image-insert-actions,
    .video-insert-actions,
    .audio-insert-actions,
    .link-insert-actions {
        flex-direction: column !important;
    }
    
    .image-btn-primary,
    .image-btn-secondary,
    .video-btn-primary,
    .video-btn-secondary,
    .audio-btn-primary,
    .audio-btn-secondary,
    .link-btn-primary,
    .link-btn-secondary {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    #emoji-tabs {
        padding: 8px !important;
        gap: 3px !important;
    }
    
    #emoji-content {
        padding: 8px !important;
       
      
    }
    
    .emoji-item-container {
        margin: 3px !important;
        padding: 2px !important;
    }
    
    .emoji-tab {
        padding: 2px !important;
        font-size: 10px !important;
    }
    
    /* Modal image, vidéo, audio et liens très petit écran */
    #image-insert-header,
    #video-insert-header,
    #audio-insert-header,
    #link-insert-header {
        padding: 10px 15px !important;
    }
    
    #image-insert-content,
    #video-insert-content,
    #audio-insert-content,
    #link-insert-content {
        padding: 10px !important;
    }
    
    .image-insert-field input[type="url"],
    .image-insert-field input[type="text"],
    .image-insert-field input[type="number"],
    .video-insert-field input[type="url"],
    .video-insert-field input[type="text"],
    .video-insert-field input[type="number"],
    .audio-insert-field input[type="url"],
    .audio-insert-field input[type="text"],
    .link-insert-field input[type="url"],
    .link-insert-field input[type="text"],
    .link-insert-field select {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
}

/* ========================================================================== */
/* STYLES SPÉCIFIQUES TINYMCE - Images dans l'éditeur */
/* ========================================================================== */

/* Cibler les iframes TinyMCE */
iframe[id*="_ifr"] img[src*="/images/claviers/"] {
    width: 300px !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    max-width: none !important;
}

iframe[id*="_ifr"] img[src*="/images/emojis/"] {
    max-width: 90px !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
}

/* Alternative pour les éditeurs TinyMCE dans le DOM */
.mce-content-body img[src*="/images/claviers/"] {
    width: 300px !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    max-width: none !important;
}

.mce-content-body img[src*="/images/emojis/"] {
    max-width: 90px !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
}