/**
 * Spliff Emojis - Styles natifs
 *
 * Force le navigateur à utiliser la police emoji native de l'OS :
 * → Apple Color Emoji  sur iOS / macOS
 * → Segoe UI Emoji     sur Windows
 * → Noto Color Emoji   sur Android / Linux
 *
 * + Corrections d'alignement pour Astra, Elementor, WooCommerce, FunnelKit.
 */

/* ═══════════════════════════════════════
   FONT STACK EMOJI NATIF
   ═══════════════════════════════════════
   On injecte les polices emoji en PREMIER dans le font-family
   de tout le site. Ça garantit que le navigateur choisit la
   police emoji de l'OS avant toute autre police.
   ═══════════════════════════════════════ */

body,
body *:not(code):not(pre):not(kbd):not(samp) {
    font-family:
        /* Polices emoji natives (priorité) */
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji",
        /* Hérite du reste défini par Astra / Elementor */
        inherit;
}


/* ═══════════════════════════════════════
   ASTRA - PRÉSERVE LES FONT-FAMILY DU THÈME
   ═══════════════════════════════════════
   Astra définit ses propres font-family via CSS custom properties.
   On ajoute les polices emoji APRÈS les polices du thème
   pour ne pas les écraser.
   ═══════════════════════════════════════ */

/* Body principal Astra */
body.flavor-flavor,
body.flavor-flavor *,
.ast-container,
.ast-container * {
    --spliff-emoji-fonts: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Headings Astra */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.ast-archive-title,
.product_title,
.woocommerce-loop-product__title {
    font-family:
        var(--ast-font-family-h1, inherit),
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji";
}


/* ═══════════════════════════════════════
   TAILLE & ALIGNEMENT DES EMOJIS
   ═══════════════════════════════════════
   Les emojis natifs sont des glyphes de la police,
   pas des images. Mais certains contextes CSS (line-height,
   overflow, flexbox) peuvent les couper ou mal les aligner.
   ═══════════════════════════════════════ */

/* Fix générique : les emojis inline ne doivent pas être coupés */
.spliff-emoji-wrap {
    display: inline;
    line-height: inherit;
    font-style: normal;
    font-weight: normal;
}


/* ═══════════════════════════════════════
   BOUTONS & CTA
   ═══════════════════════════════════════ */
.button,
button,
.elementor-button,
.elementor-button span,
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.single_add_to_cart_button,
.checkout-button,
.fkcart-btn,
.fkcart-checkout-btn {
    overflow: visible;
    line-height: normal;
}


/* ═══════════════════════════════════════
   NAVIGATION & MENUS (ASTRA)
   ═══════════════════════════════════════ */
.menu-item a,
.nav-menu a,
.ast-header-sections-navigation a,
.ast-above-header-navigation a,
.ast-below-header-navigation a,
.ast-mobile-popup-drawer a,
.elementor-nav-menu a,
.elementor-nav-menu--main a {
    overflow: visible;
}


/* ═══════════════════════════════════════
   WOOCOMMERCE - FICHES PRODUIT
   ═══════════════════════════════════════ */
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel,
.woocommerce-Tabs-panel--description,
.product_title,
.woocommerce-loop-product__title,
.woocommerce-cart-form,
.cart_item,
.woocommerce-checkout,
.woocommerce-thankyou-order-received {
    overflow: visible;
}

/* Notices WooCommerce (souvent avec emojis) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper {
    overflow: visible;
    line-height: 1.6;
}

/* Prix / Badges */
.price,
.amount,
.onsale,
.product-category {
    overflow: visible;
}

/* Variation Swatches */
.variation-swatches,
.cfvsw-swatches-container {
    overflow: visible;
}


/* ═══════════════════════════════════════
   ELEMENTOR
   ═══════════════════════════════════════ */
.elementor-widget,
.elementor-widget-container,
.elementor-heading-title,
.elementor-text-editor,
.elementor-text-editor p,
.elementor-tab-title,
.elementor-tab-content,
.elementor-accordion-title,
.elementor-accordion-content,
.elementor-icon-list-text,
.elementor-toggle-title,
.elementor-alert,
.elementor-price-table,
.elementor-post__excerpt,
.elementor-post__title {
    overflow: visible;
}


/* ═══════════════════════════════════════
   FUNNELKIT
   ═══════════════════════════════════════ */
.fkcart-panel,
.fkcart-item,
.fkcart-item__title,
.fkcart-checkout-wrap,
.fkcart-notice,
.wfob-bump-wrapper,
.wfob-bump-wrapper p,
.wfacp_main_form,
.wfacp_main_form p {
    overflow: visible;
}


/* ═══════════════════════════════════════
   WPLOYALTY
   ═══════════════════════════════════════ */
.wlr-points-reward,
.wlr-myaccount-page,
.wlr-user-reward {
    overflow: visible;
}


/* ═══════════════════════════════════════
   KLAVIYO FORMS (POPUPS)
   ═══════════════════════════════════════ */
.klaviyo-form,
.klaviyo-form * {
    overflow: visible;
}


/* ═══════════════════════════════════════
   FIX FLEXBOX / GRID QUI COUPE LES EMOJIS
   ═══════════════════════════════════════
   Certains layouts flex/grid avec overflow:hidden
   coupent les emojis qui dépassent la line-height.
   ═══════════════════════════════════════ */
.elementor-widget-container > *,
.ast-woo-product-category > *,
.woocommerce ul.products li.product > * {
    overflow: visible;
}


/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    /* Sur mobile, les emojis natifs sont généralement
       bien gérés. On s'assure juste que rien ne les coupe. */
    .ast-mobile-popup-drawer,
    .ast-mobile-popup-drawer * {
        overflow: visible;
    }
}