/**
 * Habillage de WooCommerce et des plugins tiers — feuille reprenable telle quelle
 *
 * Contient l'habillage des éléments produits par WooCommerce (boutons, menu de
 * Mon compte, notices, prix, badge promo, cartes des blocs panier/commande) et
 * par les plugins tiers du site : FiboSearch (recherche), BeRocket (filtres),
 * IKS Menu Pro (menu de catégories). Rien d'autre.
 *
 * CRITÈRE D'ADMISSION — une règle vit ici seulement si CHACUN de ses sélecteurs
 * cible un élément de WooCommerce (.woocommerce*, .wc-block*,
 * .wp-block-woocommerce*, ul.products, li.product, .price, span.onsale,
 * select.orderby, .related, .widget_shopping_cart) ou d'un plugin tiers
 * (.dgwt-wcas-*, .bapf_*, .berocket_*, .iksm-*, .woopspro-*), ET ne contient
 * aucune classe ni aucun id du canevas du thème (.cc-*, #cc-*, #cc_*, #primary,
 * #main, #secondary, .entry-*) ni du plugin Caisse-Connect. Un sélecteur qui ne
 * correspond à aucun de ces préfixes (élément nu, classe de contexte WordPress
 * comme .home ou .wp-singular) fait rester la règle dans son fichier d'origine.
 *
 * ⚠️ Cette feuille ne consomme QUE des tokens — aucun nom de classe du canevas,
 * aucune couleur en dur. C'est ce qui la rend recopiable dans un autre thème
 * construit pour Caisse-Connect.
 *
 * Deux règles purement WooCommerce restent volontairement dehors, parce
 * qu'elles font système avec la grille de css/base.css : la normalisation des
 * vignettes (.woocommerce-page ul.products li.product, css/defaut.css) et le
 * padding de .products (style.css).
 *
 * Cascade : chargée en priorité 18 (dépendance cc-base) — après style.css
 * (prio 15), avant css/defaut.css (prio 20). Les règles venues de style.css
 * précèdent celles venues de defaut.css, chacune dans son ordre d'origine ;
 * les familles sont disjointes, le regroupement par origine fonctionnelle ne
 * change donc aucun arbitrage de cascade.
 *
 * @file        css/integrations_tiers.css
 * @package     CC-Origine
 * @subpackage  CSS
 * @since       1.4.0
 * @version     1.4.2
 * @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/cc-origine
 */

/* ============================================================
 * 1. WooCommerce
 * ============================================================ */

.page-title.woocommerce-products-header__title {
    margin-bottom: 0!important;
    font-size: 2em;
}

/* --- Boutons classiques WooCommerce --- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
    background-color: var(--cc-couleur-front-primaire) !important;
    color: var(--cc-couleur-front-primaire-texte);
    border: none;
    border-radius: var(--cc-rayon);
    padding: 10px 20px;
    font-weight: var(--cc-graisse-forte);
    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(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire-texte);
}

/* 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(--cc-couleur-front-primaire), black 15%);
    color: var(--cc-couleur-front-primaire-texte);
    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(--cc-couleur-front-primaire) !important;
    color: var(--cc-couleur-front-primaire-texte) !important;
    border: none !important;
    border-radius: var(--cc-rayon) !important;
    font-weight: var(--cc-graisse-forte);
    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(--cc-couleur-front-primaire), black 15%) !important;
    transform: translateY(-1px);
}

/* Page « Mon compte » : menu latéral WooCommerce en blocs cliquables
   (style « liste pleine + accent gauche », aligné sur le menu de catégories IKSM). */

/* La liste : reset des puces + coins arrondis épousant les blocs */
.woocommerce-MyAccount-navigation ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-radius: var(--cc-rayon-grand);
    overflow: hidden;
    border: 1px solid var(--cc-couleur-front-bordures);
}

/* Chaque item : conteneur neutre, séparateur entre blocs */
.woocommerce-MyAccount-navigation-link {
    border: none !important;
    border-bottom: 1px solid var(--cc-couleur-front-bordures) !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.woocommerce-MyAccount-navigation-link:last-child {
    border-bottom: none !important;
}

/* Le bloc cliquable = le lien (pleine largeur de la colonne) */
.woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 11px 16px;
    border-left: 4px solid transparent;
    background-color: var(--cc-couleur-front-arriere-plan);
    color: var(--cc-couleur-front-texte-principal);
    text-decoration: none;
    line-height: 1.4;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Survol / focus : fond crème, accent gauche et texte en primaire */
.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-navigation-link a:focus {
    background-color: var(--cc-couleur-front-secondaire);
    border-left-color: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire) !important;
}

/* Item courant : accent plein permanent, distinct, non cliquable */
.woocommerce-MyAccount-navigation-link.is-active a {
    background-color: var(--cc-couleur-front-secondaire);
    border-left-color: var(--cc-couleur-front-primaire);
    color: var(--cc-couleur-front-primaire) !important;
    font-weight: var(--cc-graisse-forte);
    pointer-events: none;
    cursor: default;
}

/* Notices WooCommerce (info/message) : liseré et icône en jaune orangé */
.woocommerce-info,
.woocommerce-message {
    border-top-color: var(--cc-couleur-front-primaire) !important;
}
.woocommerce-info::before,
.woocommerce-message::before {
    color: var(--cc-couleur-front-primaire) !important;
}

.woocommerce-products-header .woocommerce-products-header__title {
    padding: 0 10px;
}

/* Sélecteur de tri : même apparence que les étiquettes (pill crème, bordure épaisse, hauteur alignée) */
select.orderby {
        background-color: var(--cc-couleur-front-secondaire) !important;
        border-radius: 50px !important;
        border: 2px solid var(--cc-couleur-front-gris-fonce) !important;
        padding: 3px 16px !important;
        line-height: 1.4 !important;
        height: auto !important;
        margin: 0 !important;
}

/* Image produit : remplit la cellule de la grille. SCOPÉ à la vignette de boucle
   (li.product) — surtout PAS global : le mini-panier du header utilise la même
   classe attachment-woocommerce_thumbnail et serait étiré pleine taille. */
li.product img.attachment-woocommerce_thumbnail {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--cc-rayon);
}

/* Couleur + graisse des prix produits : surcharge les styles natifs WooCommerce
   (woocommerce.css : « ul.products li.product .price » pose color:$highlight —
   $highlight = adjust-hue(darken($primary,18%),150deg) ≈ vert olive — ET
   font-weight:normal). Ce sélecteur WC est très spécifique (0,4,2) → !important
   sur les deux propriétés pour ne pas dépendre de l'ordre de chargement (toléré
   ici). Couvre la boucle (boutique/catégorie/étiquette/produits similaires +
   slider d'accueil WoosPro, tous wrappés .woocommerce) ET la fiche produit. Le
   prix barré (del) et le prix promo (ins) en promotion sont traités juste après. */
.woocommerce ul.products li.product .price,
.woocommerce div.product .price {
    color: var(--cc-couleur-front-prix) !important;
    font-weight: var(--cc-graisse-titre) !important;
}

/* Fiche produit : prix de l'article agrandi, et marge basse réduite pour que le
   prix par unité de mesure (span --single, rendu juste après par le plugin) se
   place immédiatement dessous — sans le grand écart de la marge <p> par défaut. */
.woocommerce div.product p.price {
    font-size: 1.6em;
    line-height: 1.2;
    margin-bottom: 0.15em;
}

/* Prix en PROMOTION (vignette de boucle) : le markup WC est
   « .price > del (prix de base barré) + ins (prix promo) ».
   - <del> : prix de base affiché plus petit et NON gras (il hérite sinon du
     font-size de .cc-product-bottom .price et du font-weight:700 de .price).
   - <ins> : retirer le soulignement posé par défaut par le navigateur sur la
     balise <ins> (le thème ne charge pas la feuille WooCommerce qui le
     neutraliserait), et appliquer la couleur dédiée --cc-couleur-front-prix-promo
     (rouge). La graisse 700 du prix de vente est conservée (héritée de .price).
     Pas de !important : un sélecteur direct sur del/ins l'emporte sur la valeur
     héritée de .price (dont la couleur a un !important porté par .price, pas ins). */
.woocommerce ul.products li.product .price del {
    font-size: 0.7em;
    font-weight: 400;
}
.woocommerce ul.products li.product .price ins {
    color: var(--cc-couleur-front-prix-promo);
    text-decoration: none;
}

/* Titre de vignette en mise en page mobile « liste » (≤768) : décalé à droite de
   l'image clampée. Le calc reprend le clamp porté par .cc-product-thumb-wrap
   (css/defaut.css) — valeur dupliquée, le wrapper appartenant au canevas. */
@media (max-width: 768px) {
    .woocommerce-loop-product__title {
        position: absolute;
        right: .5em;
        /* .5em compense le padding de li.product, +5px de marge */
        left: calc(clamp(100px, 40vw, 400px) + .5em + 5px);
        top: 50px;
        font-size: 1em;
    }
}

/* Badge promo : restylage du badge natif WooCommerce (span.onsale) repris de
   l'ancien .bandeau-promo (plugin). Phase 1 : APPARENCE seule — la POSITION
   native WC (absolute; top:-0.5em; left:-0.5em; z-index:9) est conservée (non
   déclarée). Le repositionnement « sur l'image » de la fiche produit = Phase 2.
   Sélecteurs à spécificité > « .woocommerce span.onsale » (0,2,1) pour ne pas
   dépendre de l'ordre de chargement des feuilles WooCommerce. */
.woocommerce ul.products li.product span.onsale,   /* boucle : 0,4,2 */
.woocommerce div.product span.onsale {              /* fiche  : 0,3,2 */
    min-width: 0;
    min-height: 0;
    line-height: 1.2;
    padding: 4px 10px;
    border-radius: var(--cc-rayon);
    font-size: 12px;
    font-weight: var(--cc-graisse-titre);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--cc-couleur-front-promo);
    color: var(--cc-couleur-front-promo-texte);
    box-shadow: var(--cc-ombre-petite);
}

.wc-block-cart__main .wc-block-cart-items {
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: var(--cc-rayon-grand);
    border: 1px var(--cc-couleur-front-bordures) solid;
    padding: 10px !important;

}

/* Panier mobile : grille de ligne à colonne produit flexible.
   Le cadre des articles est peint sur le tableau, et un tableau ne peut pas être
   plus étroit que le minimum de son contenu. La grille que le bloc panier pose
   sur chaque ligne (image 80px, produit 132px au moins, total selon son contenu)
   a un minimum qui dépend de la largeur du texte : au-delà du conteneur, le
   cadre dépasse celui des totaux, puis la page défile horizontalement.
   Ici la colonne produit absorbe le manque de place : la ligne quantité se
   replie (la poubelle passe sous le sélecteur), un mot trop long du nom se
   coupe, et la colonne total est plafonnée — son contenu passe à la ligne,
   badge promo (« Économisez … ») compris.
   La colonne image fait 64px, largeur de l'image elle-même : le padding droit
   que le bloc pose sur sa cellule doublait la gouttière de la grille. Celui de
   la ligne quantité est retiré aussi, la place revient à la poubelle.
   Le sélecteur de quantité montre deux chiffres (90px au lieu de 107px) : une
   quantité à trois chiffres reste saisissable, affichée tronquée. Son champ
   n'a pas de padding horizontal : celui des champs du socle (css/base.css) ne
   laisserait pas la place d'un chiffre.
   Empilés, le cadre des articles et celui des totaux sont séparés de 16px.
   La requête de conteneur est celle du bloc panier (699px) : au-delà il rend
   les lignes en tableau, où le padding de la cellule image est le seul écart
   entre l'image et le nom.
   ⚠️ Les tr et td des sélecteurs portent la spécificité : sans eux, les règles
   du bloc panier (0,3,1 pour la ligne, 0,4,1 pour les cellules) l'emportent et
   sa grille revient, sans autre signe. */
@container (max-width: 699px) {
    .wc-block-cart table.wc-block-cart-items tr.wc-block-cart-items__row {
        grid-template-columns: 64px minmax(0, 1fr) fit-content(90px);
    }

    .wc-block-cart table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__image {
        padding-right: 0;
    }

    .wc-block-cart table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__product {
        grid-column: 2 / 3;
        min-width: 0;
    }

    .wc-block-cart table.wc-block-cart-items tr.wc-block-cart-items__row td.wc-block-cart-item__total {
        grid-column: 3;
    }

    .wc-block-cart table.wc-block-cart-items tr.wc-block-cart-items__row .wc-block-cart-item__quantity {
        flex-wrap: wrap;
        padding-right: 0;
    }

    .wc-block-cart-items .wc-block-components-quantity-selector {
        width: 90px;
    }

    .wc-block-cart-items .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .wc-block-cart__main table.wc-block-cart-items {
        margin-bottom: 16px;
    }

    .wc-block-cart-items .wc-block-components-product-name {
        overflow-wrap: break-word;
    }

    .wc-block-cart-items .wc-block-components-sale-badge {
        white-space: normal;
    }
}

/* Panier : la description courte du produit n'est pas affichée sous son nom.
   Les autres métadonnées de la ligne (attributs de variation, données
   d'article) restent affichées. */
.wc-block-cart-items .wc-block-components-product-metadata__description {
    display: none;
}

.wc-block-cart .wc-block-components-sidebar {
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: var(--cc-rayon-grand);
    border: 1px var(--cc-couleur-front-bordures) solid;
    padding: 10px !important;

}

.wc-block-checkout__form {
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: var(--cc-rayon-grand);
    border: 1px var(--cc-couleur-front-bordures) solid;
    padding : 10px;
}
.wp-block-woocommerce-checkout-order-summary-block {
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: var(--cc-rayon-grand);
    border: 1px var(--cc-couleur-front-bordures) solid;
}

.woocommerce-order-details {
    padding : 10px;
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: var(--cc-rayon-grand);
    border: 1px var(--cc-couleur-front-bordures) solid;
}

.woocommerce-customer-details {
    padding : 10px;
    background-color: var(--cc-couleur-front-surface-blockwc) !important;
    border-radius: var(--cc-rayon-grand);
    border: 1px var(--cc-couleur-front-bordures) solid;
}

/* ============================================================
 * 2. FiboSearch (recherche)
 * ============================================================ */

/* Recherche FiboSearch (desktop) : barre max 600px, alignée à gauche dans la
   zone centre .cc-header-search. .dgwt-wcas-search-wrapp = classe FiboSearch. */
.dgwt-wcas-search-wrapp {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0; /* indispensable sinon ne s'aligne pas à gauche */
}

/* Style « Pirx » de FiboSearch : fond blanc en dur sur le conteneur de la barre
   (gouttière de 10px autour de la pilule de saisie). Visible comme un cadre blanc
   dès que le header n'est pas blanc — l'input, lui, porte déjà sa propre couleur.
   Borné à .cc-header-search : l'overlay mobile plein écran est rendu hors du header
   et garde son fond propre (.dgwt-wcas-overlay-mobile). */
.cc-header-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
    background: transparent !important;
}

.dgwt-wcas-search-input {
    background-color: var(--cc-couleur-front-arriere-plan) !important;
    border: 1px var(--cc-couleur-front-bordures) solid !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(--cc-couleur-front-primaire) !important;
    }

    a.dgwt-wcas-search-icon svg {
        width: 60% !important;
        height: 60% !important;
        fill: var(--cc-couleur-front-primaire-texte) !important;
    }
}

/* Correction Firefox mobile : icônes ~20% plus grosses que les autres navigateurs */
@supports (-moz-appearance: none) {
    @media (max-width: 768px) {
        a.dgwt-wcas-search-icon {
            width: 26px !important;
            height: 26px !important;
            line-height: 26px !important;
            padding: 3px !important;
        }
    }
}

/* ============================================================
 * 3. BeRocket (filtres de produits)
 * ============================================================ */

/* Filtres */
/* Étiquette non sélectionnée : fond crème + bordure grise pilotée par variable
   (BeRocket impose nativement border-color:#ccc, on la surcharge pour la rendre modifiable).
   La couleur du texte est imposée elle aussi (color:#333 sur
   .berocket_single_filter_widget .bapf-clean-rounded li label, spécificité 0,2,2 contre 0,1,2
   ici) : sans cette surcharge, elle ne suit pas le set de couleurs et le texte reste gris
   foncé sur les sets sombres. */
li.bapf_tax_product_tag label {
    background-color: var(--cc-couleur-front-secondaire);
    border-color: var(--cc-couleur-front-gris-fonce) !important;
    color: var(--cc-couleur-front-texte-corps) !important;
}
/* Survol étiquette non sélectionnée : bordure gris plus foncé et texte renforcé (BeRocket impose
   nativement border-color:#ddd et color:#111).
   Placée avant la règle de l'état sélectionné pour que l'orange l'emporte au survol d'un pill coché. */
li.bapf_tax_product_tag label:hover {
    border-color: var(--cc-couleur-front-gris-plus-fonce) !important;
    color: var(--cc-couleur-front-texte-principal) !important;
}

/* Étiquette sélectionnée : bordure jaune orangé (couleur des boutons), texte gris foncé, au lieu du bleu par défaut BeRocket.
   On cible aussi l'input coché (input:checked) car pendant le chargement AJAX, BeRocket n'a pas encore reposé la classe li.checked. */
.berocket_single_filter_widget .bapf-clean-rounded li.checked label,
.berocket_single_filter_widget .bapf-clean-rounded li input:checked + label {
    border-color: var(--cc-couleur-front-primaire) !important;
    color: var(--cc-couleur-front-texte-principal) !important;
}
.berocket_single_filter_widget .bapf-clean-rounded li.checked label:before,
.berocket_single_filter_widget .bapf-clean-rounded li input:checked + label:before {
    border-color: var(--cc-couleur-front-primaire) !important;
}

.bapf_sfilter {
    margin: 0 !important;
}

h3.bapf_hascolarr {
    font-weight: normal;
}

/* Force l'affichage des filtres BeRocket en tablette et desktop (≥769).
   Seuil 769 (pas 768) : 768px appartient au mobile (cf. base.css / matrice
   responsive), où les filtres restent en accordéon BeRocket. */
@media (min-width: 769px) {
    .bapf_head {
        display:none;
    }
    .bapf_body  {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* ============================================================
 * 4. IKS Menu Pro (menu de catégories de la colonne latérale)
 * ============================================================ */

div.iksm-term__inner {
    border-left: 4px solid var(--cc-couleur-front-primaire) !important;
}

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

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

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

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

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

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