/*
Theme Name: Flatsome Child
Author: Bruno Bandelier
Template: flatsome
Version: 1.1.0.2
Text Domain: flatsome
*/

/* ==========================================================================
   1. TOUS LES ÉCRANS (PC, Tablette, Mobile)
   ========================================================================== */

/* --- 1. DESIGN GLOBAL & COULEURS --- */
div#masthead { background-color: #262f3d; }
a { color: #0066c0; }
.woocommerce-Price-amount.amount, .price { color: #b12805; }
.pourcentage { background-color: #D9534F; display: block; width: 25%; margin: auto; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; color: #fff; text-align: center; border-radius: .25em; }
.ux-search-submit.submit-button.secondary.button.icon.mb-0 { background-color: #F5BF76; }
.icon-search { color: #333333; }

/* --- 2. HEADER --- */
.header-main .header-inner, .header-main .flex-col, .header-main .header-block, .header-main .searchform-wrapper, .header-main .account-item, .header-main .cart-item, .header-main .header-button, .header-main .nav-top-link { display: flex; align-items: center; }
.header-main .header-block, .header-main .searchform-wrapper, .header-main .account-item, .header-main .cart-item, .header-main .header-button, .header-main .nav-top-link { height: 100%; }
.header-main .logo img { max-height: 80%; height: auto; }
.header-main i, .header-main svg { vertical-align: middle; }
.header-main .cart-item .badge, .header-main .cart-item strong { top: 6px; }
.header-main .flex-col.icon, .header-main .flex-col.mobile-nav { justify-content: center; }
.header-main .nav-top-link, .header-main .wpml-ls-link { justify-content: flex-start; }
/* FIX mini panier Flatsome */
.header .nav-dropdown { position: absolute !important; top: calc(100% + 10px) !important; transform: none !important; }

/* --- 3. PAGES PRODUITS (Mode condensé "Amazon") --- */
.product-info.summary.col-fit.col.entry-summary.product-summary.text-left { text-indent: 0px; letter-spacing: 0px; word-spacing: 0px; }
.product-main { word-spacing: 0px; letter-spacing: 0px; font-size: 15px; position: relative; }
.product-title { font-weight: normal; font-size: 15px; color: #0066c0; }
.product-title.entry-title { word-spacing: 0px; color: #000000; font-size: 17px; }
.product--description { font-size: 13px; line-height: 19px; font-weight: 500; }
.product-info p.stock { font-size: 14.4px; }

/* --- 4. VARIATIONS DE PRODUITS --- */
.kgi-variation { margin-top: 10px; display: inline-block; font-size: 80%; }
.kgi-variation li { margin: 0 0 5px 0 !important; padding: 0 !important; min-height: inherit !important; border: none !important; }
.kgi-variation-title, .kgi-variation-data { display: inline-block; }
div.kgi-variation-title { font-weight: bold; color: #111111; text-transform: uppercase; }
.kgi-variation-data span.wcpa_cart_price { font-style: italic; color: #b12805; }

/* --- 5. STATUTS DE STOCK --- */
.product-info p.stock.out-of-stock, .woocommerce p.stock.out-of-stock { color: #bd7a00 !important; }
.product-info p.stock.available-on-backorder, .woocommerce p.stock.available-on-backorder { color: #f0a500 !important; }
.kgi-stock-hs { color: #d9534f; font-weight: bold; }
.kgi-stock-es { color: #28a745; font-weight: bold; }
.product-info p.stock.stock-hs { color: orange !important; }
.product-info p.stock.stock-es { color: green !important; }

/* --- 6. PAGE PAIEMENT (order-pay) --- */
body.woocommerce-order-pay .woocommerce { max-width: 1200px; margin: 0 auto; padding: 0 10px; }
body.woocommerce-order-pay .order-pay-header { text-align: center; margin-bottom: 30px; font-size: 1.1em; }
@media (min-width: 1024px) { body.woocommerce-order-pay .order-pay-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: start; } body.woocommerce-order-pay .order-pay-right { position: sticky; top: 120px; } }
body.woocommerce-order-pay table.shop_table { width: 100%; }
body.woocommerce-order-pay .shop_table th, body.woocommerce-order-pay .shop_table td { vertical-align: top; }
body.woocommerce-order-pay .product-name { width: 65%; }
body.woocommerce-order-pay .product-total { width: 25%; text-align: right; }
body.woocommerce-order-pay .wc-item-meta { margin-top: 0.5em; font-size: 0.9em; color: #555; }
body.woocommerce-order-pay .wc-item-meta li { display: flex; align-items: baseline; gap: 6px; line-height: 1.4; color: #555; }
body.woocommerce-order-pay .wc-item-meta li p, body.woocommerce-order-pay .wc-item-meta li span { display: inline; margin: 0; }
body.woocommerce-order-pay .wc-item-meta-label { color: #444; font-weight: 600; white-space: nowrap; }
body.woocommerce-order-pay .shop_table tfoot th { color: #444; font-weight: 600; }
body.woocommerce-order-pay .shop_table tfoot td.product-total { color: #b23a1c; font-weight: 600; }
body.woocommerce-order-pay .shop_table tfoot .order-total-extra { font-weight: 400; color: #666; margin-left: 6px; white-space: nowrap; }
body.woocommerce-order-pay .shop_table tfoot tr:last-child th, body.woocommerce-order-pay .shop_table tfoot tr:last-child td { font-weight: 700; }
body.woocommerce-order-pay .order-pay-addresses { display: flex; gap: 40px; margin-top: 30px; }
body.woocommerce-order-pay .order-pay-addresses address { font-style: normal; line-height: 1.6; }
body.woocommerce-order-pay .order-pay-total-due { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; margin-bottom: 10px; border-bottom: 1px solid #e5e5e5; }
body.woocommerce-order-pay .order-pay-total-due .label { color: #333; font-weight: 600; white-space: nowrap; }
body.woocommerce-order-pay .order-pay-total-due .value { color: #b23a1c; font-weight: 700; font-size: 1.15em; white-space: nowrap; }
body.woocommerce-order-pay .order-pay-right-title { font-weight: 700; color: #333; margin: 10px 0 15px 0; }
body.woocommerce-order-pay #payment { margin-top: 15px; }
body.woocommerce-order-pay .wc_payment_methods li, body.woocommerce-order-pay .wc_payment_methods margin { padding: 2px 0; margin: 2px 0; }
body.woocommerce-order-pay .wc_payment_methods label { line-height: 1.2; font-size: 0.95em; color: #444; }
body.woocommerce-order-pay .form-row { margin-top: 10px; }
body.woocommerce-order-pay #place_order { font-weight: 700; font-size: 1.05em; }
body.woocommerce-order-pay .order-pay-colon { display: inline !important; visibility: visible !important; opacity: 1 !important; color: red !important; font-weight: 900 !important; }

/* --- 7. FUNNELKIT (Cache statuts) --- */
.fkcart-attr-key[data-attr-key="variation-hs"], .fkcart-attr-key[data-attr-key="variation-es"], .fkcart-attr-key[data-attr-key="variation-hs"] + .fkcart-attr-value, .fkcart-attr-key[data-attr-key="variation-es"] + .fkcart-attr-value, .fkcart-attr-wrap:has(.fkcart-attr-key[data-attr-key="variation-hs"]), .fkcart-attr-wrap:has(.fkcart-attr-key[data-attr-key="variation-es"]), .fkcart-product-form-field tr:has(select[name="attribute_pa_es"]), .fkcart-product-form-field tr:has(select[name="attribute_pa_hs"]), select[name="attribute_pa_es"], select[name="attribute_pa_hs"] { display: none !important; }

/* --- 8. CORRECTION ALIGNEMENT WIDGETS --- */
.widget_recently_viewed_products ul.product_list_widget { margin-left: 0 !important; padding-left: 0 !important; }

/* --- 9. AJUSTEMENT FULLWIDTH (Restauré) --- */
.kgi-full-width .products.row.row-small, .woocommerce .full-width .products.row.row-small, .kgi-full-width .container-width, .kgi-full-width .full-width .ubermenu-nav, .kgi-full-width .container, .kgi-full-width .row, .woocommerce:not(.woocommerce-wishlist) .container-width, .woocommerce:not(.woocommerce-wishlist) .full-width .ubermenu-nav, .woocommerce:not(.woocommerce-wishlist) .container, .woocommerce:not(.woocommerce-wishlist) .row, .woocommerce-cart .row, .woocommerce-checkout .row, .footer-1 .row { max-width: 100%; }
.kgi-full-width .container-width, .kgi-full-width .full-width .ubermenu-nav, .kgi-full-width .container, .kgi-full-width .row, .woocommerce:not(.woocommerce-wishlist) .container-width, .woocommerce:not(.woocommerce-wishlist) .full-width .ubermenu-nav, .woocommerce:not(.woocommerce-wishlist) .container, .woocommerce:not(.woocommerce-wishlist) .row, .woocommerce-cart .row, .woocommerce-checkout .row, .footer-1 .row { padding-left: 2%; padding-right: 2%; }
.kgi-full-width .row-small > .flickity-viewport > .flickity-slider > .col, .kgi-full-width .row-small > .col, .woocommerce .full-width .row-small > .flickity-viewport > .flickity-slider > .col { padding: 19.6px 9.8px 19.6px; margin-bottom: 0; }
.footer-2 .row, .absolute-footer .footer-primary pull-left { max-width: 100%; padding-left: inherit; padding-right: inherit; }
.kgi-full-width .footer-1 .widget, .woocommerce .footer-1 .widget { max-width: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; }

/* --- 10. CORRECTION BANNIERE ACCUEIL --- */
.banner-layers { max-height: 100%; height: 100%; position: relative; padding-left: 0 !important; padding-right: 0 !important; }
.banner .is-border { border-width: 0 !important; }

/* --- SIDEBAR STICKY --- */
.kgi-sidebar-buy-box {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    background: #f9f9f9;
    
    /* Ces 3 lignes permettent de rester visible au scroll */
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* Ajuste selon la hauteur de ton menu Flatsome */
    z-index: 99;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}


/* ==========================================================================
   2. TABLETTES ET MOINS (Écrans <= 849px)
   ========================================================================== */
@media screen and (max-width: 849px) {
    /* --- CSS FLATSOME EXISTANT --- */
    .header-main li.html.custom { display: inline-block; }
    .kgi-full-width .footer-1 .widget, .woocommerce .footer-1 .widget { max-width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; }
    .woocommerce-cart .row, .woocommerce-checkout .row { padding-left: inherit; padding-right: inherit; }
    .woocommerce-cart .row-divided, .woocommerce-checkout .row.pt-0 { margin-left: inherit !important; margin-right: inherit !important; }
    
    /* Correction Modal PackLink */
    .lp-content { position: relative; left: inherit !important; width: inherit !important; border-width: inherit !important; border-style: inherit !important; border-color: inherit !important; }
    #pl-picker-modal > location-picker > div.lp-content { left: 0% !important; width: 100% !important; }

    .product-quantity { text-align: center; }
}


/* ==========================================================================
   3. MOBILE UNIQUEMENT (Écrans <= 549px)
   ========================================================================== */
@media screen and (max-width: 549px) {
    /* --- 1. MENU CATÉGORIES SCROLLABLE (Swipe Menu) --- */
    .main-navigation { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .main-navigation ul { display: flex; flex-wrap: nowrap; width: max-content; }
    .main-navigation li { white-space: nowrap; flex: 0 0 auto; }
    
    /* Cacher la scrollbar sur le menu mobile */
    .main-navigation::-webkit-scrollbar { display: none; }
}