/**
 * Styles principaux — Styles pour les vignettes, icones, badges et page produit
 *
 * Styles front-end du theme : grille produits, icone panier, bandeau promo,
 * logo bio, barre de tri et mise en page des vignettes WooCommerce.
 *
 * @file        defaut.css
 * @package     Astra-Caisse-Connect
 * @subpackage  CSS
 * @since       0.91
 * @version     0.99.5
 * @author      Microlibre <contact@microlibre.net>
 * @copyright   2026 Microlibre
 * @license     GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 * @link        https://github.com/jf34000/astra-cc
 */


body,
p,
li,
td,
th,
input,
select,
textarea,
button {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}



:root {

    --couleur-primaire:#e6b23c;
    --couleur-secondaire:#fff6e6;
    --couleur-arriere-plan:#fff9f2;
    --couleur-bordures:#00000014;
    --couleur-vignette:white;
    --couleur-texte-principal: black;
    --couleur-forte: #2A8C7A;


    /* Liens */
    --couleur-liens: black;

    /* Boutons */
    --couleur-boutons: #6098ece6;
    --couleur-gris-fonce: #CCC;

    /* Barre du haut boutique */
    --couleur-entete-foncee: rgb(230, 193, 125);
    --couleur-entete-claire: rgb(245, 225, 188);

    /* Vignettes produits */
    --couleur-fond-vignette: white;
    --couleur-bordure-vignette: rgb(245, 225, 188);

    /* Bandeau promo */
    --couleur-promo: #d32f2f;
    --couleur-promo-hover: #b71c1c;
    --couleur-promo-texte: #ffffff;
    --couleur-promo-pourcentage: #ffff00;

    /* Ombres */
    --couleur-ombre-legere: rgba(0, 0, 0, 0.2);
    --couleur-ombre-standard: rgba(0, 0, 0, 0.3);
    --couleur-ombre-moyenne: rgba(0, 0, 0, 0.4);

    /* Logo bio */
    --couleur-fond-bio: rgba(255, 255, 255, 0.9);
    --couleur-bio: #8bc34a;

    /* Breakpoints de référence (non utilisables en var() dans @media)
       - Mobile : < 768px
       - Tablette : 768px – 1199px
       - Desktop : 1200px – 1599px
       - Grand écran : 1600px – 1919px
       - Très grand écran : ≥ 1920px
       Les breakpoints Astra sont alignés via filtres PHP dans functions.php.
    */
}



/* ****************************************
/*  Global
*******************************************/

#primary {
    background-color: var(--couleur-arriere-plan);   
}

#main {
    padding: 10px !important;
}

.entry-content[data-ast-blocks-layout] > .alignwide {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.home .entry-content {
    padding: 10px 0 !important;
}
.home #main {
    padding: 0px !important;
}

@media (max-width: 1199px) {
    #main {
        padding: 5px !important;
    }  
}

a {
    color: var(--couleur-liens);
}

/* ****************************************
/*  Boutons WooCommerce
*******************************************/

/* --- Boutons classiques WooCommerce --- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
    background-color: var(--couleur-primaire) !important;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    line-height: 1.4;
}

/* Boutons d'action principale (alt) */
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
    background-color: var(--couleur-primaire);
    color: white;
}

/* Hover / focus */
.woocommerce .button:hover,
.woocommerce .button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus {
    background-color: color-mix(in srgb, var(--couleur-primaire), black 15%);
    color: white;
    transform: translateY(-1px);
}

/* Bouton désactivé */
.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* --- Boutons WC Blocks (panier/checkout modernes) --- */
.wc-block-components-button {
    background-color: var(--couleur-primaire) !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.wc-block-components-button:hover,
.wc-block-components-button:focus {
    background-color: color-mix(in srgb, var(--couleur-primaire), black 15%) !important;
    transform: translateY(-1px);
}

.button:not(.checkout) {
    border-color: var(--couleur-primaire) !important;
    
}

.widget_shopping_cart .buttons .button.wc-forward {
    color: white !important;
}


/******************************************
*
* Menu latéral
*
*******************************************/
div.iksm-term__inner {
    border-left: 4px solid var(--couleur-primaire) !important;
}

div.iksm-term__inner {
    background-color: var(--couleur-arriere-plan) !important;
}

div.iksm-term__inner:hover {
    background-color: var(--couleur-secondaire) !important;
}

div.iksm-term--current > .iksm-term__inner{
    background-color: var(--couleur-secondaire) !important;
}

span.iksm-term__text {
    word-break: normal !important;
}

.iksm-container .iksm-terms:first-child {
    padding-top: 0px;
}

/* ****************************************
/*  Entete
*******************************************/

svg.ast-mobile-svg.ast-menu-svg {
    fill: var(--couleur-primaire) !important;
    width: 30px !important;
    height: 30px !important;
}

.dgwt-wcas-search-input {
    background-color: var(--couleur-arriere-plan) !important;
    border: 1px var(--couleur-bordures) solid !important;
}


/* Icône panier custom dans le header — remplace le SVG Astra */
.astra-icon[class*="ast-icon-shopping-"] svg {
    display: none;
}

div.ast-addon-cart-wrap {
    border: none !important;
}

.astra-icon[class*="ast-icon-shopping-"] {
    display: inline-block;
    vertical-align: middle !important;
    background: var(--couleur-primaire) url('../images/shopping-bag.webp') center / 60% no-repeat;
}

.ast-cart-menu-wrap .count {
    background-color: var(--couleur-secondaire) !important;
}

i.astra-icon.ast-icon-shopping-bag::after {
    background-color: var(--couleur-secondaire) !important;
    color: var(--couleur-texte-principal) !important;  
}

/* Icône Mon compte custom dans le header — remplace le SVG Astra */
.ast-header-account-type-icon .ahfb-svg-iconset svg {
    display: none;
}

.ast-header-account-type-icon .ahfb-svg-iconset {
    display: inline-block;
    background: var(--couleur-primaire) url('../images/moncompte_blanc.webp') center / 60% no-repeat;
}

/* Taille et forme communes aux icônes header custom */
.astra-icon[class*="ast-icon-shopping-"],
.ast-header-account-type-icon .ahfb-svg-iconset {
    box-sizing: content-box;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 0 !important;
    border-radius: 50%;
    padding: 4px !important;
}

/* Icône recherche FiboSearch custom dans le header — même style que les autres icônes (mobile uniquement) */
@media (max-width: 1199px) {
    a.dgwt-wcas-search-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: content-box;
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 0 !important;
        border-radius: 50%;
        padding: 4px !important;
        background: var(--couleur-primaire) !important;
    }

    a.dgwt-wcas-search-icon svg {
        width: 60% !important;
        height: 60% !important;
        fill: #fff !important;
    }
}

/* Correction Firefox mobile : icônes ~20% plus grosses que les autres navigateurs */
@supports (-moz-appearance: none) {
    @media (max-width: 768px) {
        .astra-icon[class*="ast-icon-shopping-"],
        .ast-header-account-type-icon .ahfb-svg-iconset {
            width: 26px !important;
            height: 26px !important;
            line-height: 26px !important;
            padding: 3px !important;
        }

        a.dgwt-wcas-search-icon {
            width: 26px !important;
            height: 26px !important;
            line-height: 26px !important;
            padding: 3px !important;
        }

        .icone-panier-wrap {
            width: clamp(28px, 20vw, 36px);
            height: clamp(28px, 20vw, 36px);
        }
    }
}

span.iksm-term__text {
    color: var(--couleur-texte-principal);
}

/* Menu contextuel Mon compte */
.account-woo-navigation {
    background-color: var(--couleur-arriere-plan) !important;
}

.ast-account-nav-menu {
    background-color: var(--couleur-arriere-plan) !important;
}

/* ****************************************
/*  Pied de page
*******************************************/
.site-footer {
    background-color: var(--couleur-arriere-plan);
}
.site-below-footer-wrap {
    background-color: var(--couleur-arriere-plan) !important;
}



/* ****************************************
/*  Page accueil
*******************************************/

.titre_page_accueil {
    text-align: center;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 600;
    color: var(--couleur-forte);
    padding: 15px 5px 25px 5px;
}

.slide-accueil {
    background-color: var(--couleur-primaire);
}


/* ****************************************
/*  Page boutique
*******************************************/


/* Barre du haut */
#cc_entete_boutique {


}

#cc_entete_boutique > .woocommerce-breadcrumb {
    padding: 0 10px;
    margin: 0;
}
.woocommerce-products-header .woocommerce-products-header__title {
    padding: 0 10px;
}
.ast-shop-toolbar-container {
    background-color: white;
    border: 1px var(--couleur-bordures) solid !important;
    border-radius: 5px;
    padding: 10px !important;
    margin: 0 10px;
}

@media (max-width: 768px) {
    .ast-shop-toolbar-container {
      margin: 0 !important;
    }
}

/* Barre d'outils boutique : désactiver le flottant Astra sur mobile */
@media (max-width: 768px) {
    .ast-header-break-point .ast-shop-toolbar-container {
        position: static;
        z-index: auto;

    }
    .ast-sticky-shop-filters {
        margin: 0;
        border: 0;
        border-width: 0;
        box-shadow: none;
        background: transparent;
        padding: 0;
    }
}

/* Filtres */
li.bapf_tax_product_tag label {
    background-color: var(--couleur-secondaire);
}

.bapf_sfilter {
    margin: 0 !important;
}

h3.bapf_hascolarr {
    font-weight: normal;
}

/* Force l'affichage des filtres BeRocket sur desktop */
@media (min-width: 768px) {
    .bapf_head {
        display:none;
    }
    .bapf_body  {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    .berocket_single_filter_widget .bapf-clean-rounded li.checked label {
        border-color: var(--couleur-primaire);
        color: var(--couleur-texte-principal);
    }
    .berocket_single_filter_widget .bapf-clean-rounded li.checked label:before {
        border-color: var(--couleur-forte);
    }
}

select.orderby {
        background-color: var(--couleur-secondaire) !important;
        border-radius: 15px !important;
        border: 2px var(--couleur-bordures) solid !important;
        padding: 5px !important;
        margin: 0 !important;
}




/* ****************************************
/*  Vignettes
*******************************************/

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-page ul.products li.product {
    position: relative;
    padding: .5em;
    margin-bottom: 0.1em;
    border-radius: 5px;
    background-color: var(--couleur-vignette);
    border: 1px var(--couleur-bordures) solid;
}

/* S'assurer que le conteneur d'image est bien en position relative (Astra) */
/* Pas de overflow: hidden ici, sinon les tooltips CC sont tronqués */
/* TODO : duplication, to check */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap {
    position: relative;
}

/* Assure que le conteneur parent utilise flexbox */
.astra-shop-summary-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0px;
    padding: 0 !important;
}

.astra-shop-summary-wrap .ast-loop-product__link {
    flex: 0 0 100%;
}

.astra-shop-summary-wrap .price {
    flex: 1;
    font-size: 1.3em !important;
    margin-bottom: 0 !important;

}

.astra-shop-thumbnail-wrap {
    border: 0px !important;
}

img.attachment-woocommerce_thumbnail {
    border-radius: 5px;
}

/****************** Icone panier ***********************/
.icone-panier-wrap {
    background: var(--couleur-primaire);
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: clamp(10px, 2vw, 40px);
    height: clamp(10px, 2vw, 40px);
    vertical-align: top;
    margin-left: 10px;
}

.icone-panier {
    width: 90%;
    height: 90% !important;
    object-fit: contain;
}

.astra-shop-summary-wrap .icone-panier-wrap {
    margin-left: auto;
}

/* Sur mobile */
@media (max-width: 768px) {
    .icone-panier-wrap {
        width: clamp(35px, 25vw, 45px);
        height: clamp(35px, 25vw, 45px);
    }

}

.icone-panier-wrap.adding-to-cart {
    animation: pulse 1s ease-in-out;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }
}

/* On masque l'icone Panier de Astra */
.ast-on-card-button {
    display: none !important;
}


/****************** Icone promo ***********************/

.bandeau-promo {
    position: absolute;
    top: 0px;
    left: 0px;
    background: var(--couleur-promo);
    color: var(--couleur-promo-texte);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    z-index: 10;
    pointer-events: none;
    /* Ne pas intercepter les clics sur l'image produit */
    box-shadow: 0 2px 5px var(--couleur-ombre-legere);
    letter-spacing: 0.5px;
}

.bandeau-promo span {
    color: var(--couleur-promo-pourcentage);
    text-shadow: 1px 1px 1px var(--couleur-ombre-moyenne);
}



/* Optionnel : petit effet au survol */
.bandeau-promo:hover {
    background: var(--couleur-promo-hover);
    transform: scale(1.05);
    transition: all 0.2s ease;
}

/****************** Icone Bio ***********************/
.logo-bio-produit {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 10;
    pointer-events: none;
    /* pour ne pas gêner le clic sur le produit */
    animation: fadeIn 0.4s ease-out;
}

.logo-bio-produit img {
    width: 40px !important;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px var(--couleur-ombre-standard));
    background: var(--couleur-fond-bio);
    padding: 4px;
    border-radius: 50%;
    border: 2px solid var(--couleur-bio);
}

/* Petite animation d'apparition */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optionnel : léger effet au survol du produit */
.woocommerce ul.products li.product:hover .logo-bio-produit img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}


/* ****************************************
/*  Page produit individuelle — overlays sur l'image
*******************************************/

/* Contexte de positionnement pour les overlays (bandeau promo, logo bio, icône édition) */
.woocommerce-product-gallery {
    position: relative;
}

/* Logo bio plus grand sur la page produit */
.single-product .logo-bio-produit img {
    width: 60px !important;
    height: 60px;
}

body.wp-singular  .related {
    padding: 20px !important;
    margin: 30px 0;
    background-color: white;
    border-radius: 10px;
}
/* ****************************************
/*  Page panier
*******************************************/
.wc-block-cart__main .wc-block-cart-items {
    background-color: white !important;
    border-radius: 10px;
    border: 1px var(--couleur-bordures) solid;

}

.wc-block-cart .wc-block-components-sidebar {
    background-color: white !important;
    border-radius: 10px;
    border: 1px var(--couleur-bordures) solid;
    padding: 10px !important;

}

/* ****************************************
/*  Page commande
*******************************************/
.wc-block-checkout__form {
    background-color: white !important;
    border-radius: 10px;
    border: 1px var(--couleur-bordures) solid;
    padding : 10px;
}
.wp-block-woocommerce-checkout-order-summary-block {
    background-color: white !important;
    border-radius: 10px;
    border: 1px var(--couleur-bordures) solid;
}


/* ****************************************
/*  Pages paiement
*******************************************/
.woocommerce-order-details {
    padding : 10px;
    background-color: white !important;
    border-radius: 10px;
    border: 1px var(--couleur-bordures) solid;
}

.woocommerce-customer-details {
    padding : 10px;
    background-color: white !important;
    border-radius: 10px;
    border: 1px var(--couleur-bordures) solid;
}

/* ****************************************
/*  Pages mon-compte
*******************************************/
body.woocommerce-account #main .woocommerce {
    padding : 10px;
    background-color: white !important;
    border-radius: 10px;
    border: 1px var(--couleur-bordures) solid;
}

/* ****************************************
/*  Pages d'informations légales (mentions légales, CGV, etc.)
/*  Classe body cc-page-legale ajoutée par le plugin Caisse-Connect
/*  via filtre body_class.
*******************************************/

/* Masquer le titre auto WP : le titre est déjà dans le contenu Markdown (h1) */
body.cc-page-legale .entry-title {
    display: none;
}

/* Marges latérales sur desktop (≥ 1200px), aligné sur astra_tablet_breakpoint */
@media (min-width: 1200px) {
    body.cc-page-legale .entry-content {
        padding-left: 10em;
        padding-right: 10em;
    }
}