/**
* Boutons woocommerce 
*/
/* taille et position pour front-page et product-mini */
.woocommerce div.product-item-add form.cart::after, 
.woocommerce div.product-item-add form.cart::before,
.woocommerce div.product-item-add div.cart::before,
.woocommerce div.product-item-add div.cart::after {
  content: " ";
  display: table;
}
.woocommerce div.product-item-add form.cart::after,
.woocommerce div.product-item-add div.cart::after {
  clear: both;
}
.woocommerce div.product-item-add form.cart, 
.woocommerce div.product-item-add div.cart,
.woocommerce div.product div.cart {
  margin-bottom: 2em;
}
/* On force le bouton 'ajouter au panier' à se placer en dessous dans single-product */
.single-product form.cart .single_add_to_cart_button {
    display: inline-block !important;
    clear: both !important; /* Casse les flottants */
    margin-left: 0 !important;
}

/* Change l'aspect de tous les boutons d'action principaux de WooCommerce */
.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt {
    background-color: var(--bs-primary) !important; /* Votre couleur */
    color: var(--bs-white) !important; /* Couleur du texte */
    transition: 0.5s;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    text-transform: initial;
    border: 1px solid var(--bs-secondary) !important;
}
/* État au survol (hover) */
.woocommerce #respond input#submit.alt:hover, 
.woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover {
    background-color: var(--bs-secondary) !important;
}

/**
* Boutons de la quantité dans single-product
*/
/* On force le bloc quantité à être seul sur sa ligne */
.single-product form.cart .quantity {
    display: flex !important;
    /* width: 100% !important; Prend toute la place */
    margin-bottom: 25px !important; /* Espace avant le bouton */
    float: none !important; 
}

/**
* product-mini
*/
/* On force le bloc a une hauteur pour le front page*/
#front-page .products-mini-content .h4 {
    min-height: 5.4rem;
}

/**
* Masquer l'affichage du stock natif de WooCommerce sur la page produit
*/
.single-product .stock, 
.single-product .woocommerce-variation-availability,
.single-product .single_variation .woocommerce-variation-availability {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/**
* Style du prix de la variation et produits groupés sur la page produit
*/
.woocommerce-variation-price .price,
.woocommerce-grouped-product-list-item__price .price  {
    /*font-size: 1.25rem;  Correspond au h5 */
    font-weight: 700 !important;/*  fw-bold */
    color: var(--bs-primary) !important; /* text-primary */
    display: block;
}
.woocommerce-grouped-product-list-item__price .price  {
    font-size: initial !important;
    padding: 0;
}
.woocommerce-variation-price .price {
    font-weight: 700 !important; /* fw-bold */
    margin-bottom: 1rem; /* mb-3 */
}
.woocommerce-variation-price del,
.woocommerce-grouped-product-list-item__price del {
    color: #6c757d; /* Gris pour le prix barré */
    font-size: 0.9em;
    margin-right: 10px;
}
.woocommerce-variation-price ins,
.woocommerce-grouped-product-list-item__price ins {
    text-decoration: none;
}
/* Alignement et style des prix dans le tableau groupé */
.woocommerce-grouped-product-list-item__price {
    vertical-align: top;
}

/**
* Badges promo et récent sur le caroussel single-product
*/
.product .cab-badges-container {
    min-width: 5rem;
    top: 45px;
    left: 25px;
    z-index: 10;
}
.product .product-sale,
.product .product-new {
    color: var(--bs-white);
    /* position: absolute; */
    width: 60px;
    height: 60px;
    border-radius: 60px;
    top: 45px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 20px;
}
.product .product-new {
    background: var(--bs-primary);
}
.product .product-sale {
    background: var(--bs-secondary);

}


.related-product .related-carousel .related-item .related-item-inner .related-item-inner-item .related-details a i {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-primary);
  color: var(--bs-white);
  transition: 0.5s;
}


/**
* WPC Smart Comparer pour WooCommerce
*/
/* 1. On transforme le bouton natif en ton cercle Bootstrap */
.cab-compare-wrapper .woosc-btn {
    font-size: 0 !important; /* On cache le texte "Compare" du plugin */
}

/* 2. On injecte l'icône fa-random (v5.15.4) */
.cab-compare-wrapper .woosc-btn::before {
    content: "\f074"; /* Code hex de fa-random */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1rem !important;
}

/* 3. État au survol */
.cab-compare-wrapper .woosc-btn:hover {
    background-color: #f8f9fa !important;
}

/* 4. État "Ajouté" : */
.cab-compare-wrapper .woosc-btn.woosc-added {
    background-color:  var(--bs-primary) !important;
    color: #ffffff !important;
    font-weight: 900;
    font-size: 1rem !important;
}

/**
 * Notices WooCommerce - Design Unifié Bootstrap 5 & Font Awesome 5
 */

/* 1. Structure de base commune */
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
    display: flex !important;
    align-items: center !important;
    padding: 15px 25px !important;
    margin-bottom: 2rem !important;
    border-radius: 10px !important;
    border: 1px solid #dee2e6 !important;
    list-style: none !important;
    position: relative !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    outline: none !important;
    min-height: 60px;
    width: 100%;
}

/* 2. Style spécifique par type (Couleurs) */
.woocommerce-message {
    border-left: 5px solid #198754 !important; /* Vert */
    background-color: #f8fff9 !important;
    color: #198754 !important;
}

.woocommerce-error {
    border-left: 5px solid #dc3545 !important; /* Rouge */
    background-color: #fff8f8 !important;
    color: #a42732 !important;
}

.woocommerce-info {
    border-left: 5px solid #0dcaf0 !important; /* Bleu */
    background-color: #f8fdff !important;
    
}

/* 3. Configuration des Icônes (On utilise UNIQUEMENT le ::before) */
.woocommerce-message::before, 
.woocommerce-error::before, 
.woocommerce-info::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 15px !important;
    font-size: 20px !important;
    display: inline-block !important;
    position: static !important; /* On annule le position absolute de WC */
    content: "" !important; /* On réinitialise */
}

/* Icône Succès (Check) */
.woocommerce-message::before {
    content: "\f00c" !important; 
}

/* Icône Erreur (Exclamation) */
.woocommerce-error::before {
    content: "\f06a" !important;
}

/* Icône Info (Info-circle) */
.woocommerce-info::before {
    content: "\f05a" !important;
}

/* 4. Ajustement des éléments internes (Boutons et Liens) */
.woocommerce-message .button, 
.woocommerce-info .button {
    margin-left: auto !important; /* Pousse le bouton à droite */
    border-radius: 50px !important;  
}

.woocommerce-info a, 
.woocommerce-error a, 
.woocommerce-message a {
    font-weight: bold !important;
    padding-left: 5px;
}

/* Suppression du ::after qui créait des doublons dans ton ancien code */
.woocommerce-info::after {
    content: none !important;
}

/**
* Panier (cart.php) WooCommerce
*/
.woocommerce table.shop_table {
  border: 1px solid rgba(0,0,0,0);
}
/* Couleur du titre */
.woocommerce table a.text-dark {
  color: var(--bs-table-striped-color) !important;
}
/* taille de l'image */
#add_payment_method table.cart img, 
.woocommerce-cart table.cart img, 
.woocommerce-checkout table.cart img {
  width: 70px !important;
}
/* Bouton supprimer du panier */
.woocommerce a.remove {
  font-size: 1em;
  height: 2.3em;
  width: 2.3em;
  line-height: 1.4;
}

/**
* template cart-empty.php
*/
/* Style de l'icône tête qui grimace */
.cab-sad-face-icon::before {
    font-family: "dashicons" !important;
    content: "\f338"; /* Code de la tête triste (frown) */
    font-size: 100px;  /* Bien visible */
    line-height: 1;
    display: inline-block;
    color: #e9ecef;   /* Un gris très doux */
    margin-bottom: 20px;
    -webkit-font-smoothing: antialiased;
}
/* On nettoie le message "Votre panier est vide" pour qu'il soit bien centré en dessous */
.cart-empty.woocommerce-info {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 1.25rem !important;
    color: #adb5bd !important;
    display: block !important;
    text-align: center !important;
}
/* Cache l'icône bleue par défaut de WooCommerce info */
.cart-empty.woocommerce-info::before {
    display: none !important;
}

/**
* Widget filtre par prix
*/
.price_slider_wrapper .ui-slider { 
    background: #e9ecef !important; 
    border: none; 
    height: 6px; 
    position: relative; 
    border-radius: 10px;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; 
}

.price_slider_wrapper .ui-slider-range { 
    background: var(--bs-primary) !important; 
    position: absolute; 
    border-radius: 10px; 
}

.price_slider_wrapper .ui-slider-handle { 
    background: var(--bs-primary) !important; 
    border: 2px solid #fff !important; 
    border-radius: 50% !important; /* Force la forme ronde */
    width: 18px !important;       /* Taille de la puce */
    height: 18px !important;      /* Taille de la puce */
    top: -6px !important;         /* Centre la puce sur la barre (barre 6px, puce 18px -> (6-18)/2 = -6) */
    position: absolute !important;
    z-index: 2 !important;
    outline: none !important;     /* Enlève le contour bleu au clic sur certains navigateurs */
    cursor: pointer;
}

/* 1. État au survol (Mouse over) */
.price_slider_wrapper .ui-slider-handle:hover {
    transform: scale(1.1); 
    box-shadow: 0 0 8px var(--bs-primary); 
    transition: all 0.2s ease; 
}

/* 2. État quand on clique/glisse (Active) */
.price_slider_wrapper .ui-slider-handle.ui-state-active,
.price_slider_wrapper .ui-slider-handle:active {
    transform: scale(1.2); 
    cursor: grabbing !important;
}

/* On cible le symbole monétaire à l'intérieur des labels de prix */
.price_slider_wrapper .price_slider_amount .price_label .from, 
.price_slider_wrapper .price_slider_amount .price_label .to {
    color: #808080 !important; /* Gris clair (text-secondary) */
}

/**
* Etoiles "Star-rating"
*/
#cab_featured_rating .woocommerce-review-link {
    display: none !important;
}

.woocommerce .star-rating {
  font-weight: 900;
}
.woocommerce .star-rating::before {
  content: "sssss";
  color: var(--bs-secondary);
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  font-weight: 900;
  
}
.cab-rating-display .star-rating span::before {
    color: var(--bs-primary) !important;
}
/* Optionnel : couleur des étoiles vides pour qu'elles soient visibles mais discrètes */
.cab-rating-display .far.fa-star,
.cab-rating-display .star-rating::before {
    color: var(--bs-secondary) !important;
}

/**
* Template "My-Account"
*/
/* Désactive les styles flottants natifs de WooCommerce dans Mon Compte */
.woocommerce-account .woocommerce-MyAccount-navigation {
    display: none; /* Cache la navigation par défaut car on a fait la nôtre */
}

.woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important; /* Force le contenu à prendre tout le col-lg-9 */
    float: none !important;
    padding: 0;
}

/* Correction pour les formulaires Mon Compte (Adresses/Détails) */
.woocommerce-MyAccount-content form .form-row {
    width: 100%;
}

/**
* Template-parts "ad-banner"
*/
#promo_banner img {
    height: 250px; 
    min-height: 250px;
    object-fit: cover;
}
#promo_banner .promo-banner {
    width: 100%; 
    height: 250px; 
    top: 0; 
    left: 0; 
    background: rgba(var(--bs-primary-rgb), 0.2);
}

/**
* Template-parts "cart-shipping"
*/
/* Forcer l'affichage des boutons radio de livraison stylisés Bootstrap */
.woocommerce-shipping-methods .form-check-input {
    border-radius: .25em;
}

.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
  border: var(--wc-form-border-width) solid #ced4da;
}
.select2-container .select2-dropdown, .select2-container .select2-selection {
  border: var(--wc-form-border-width,1px) solid #ced4da;
}

/* --- Forcer les couleurs WooCommerce (écrase le inline) --- */

/* Bouton principal (Ajouter au panier, Commander) */
.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt,
/* Boutons standards */
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
    border-color: var(--bs-primary) !important;
    text-shadow: none !important; /* Enlève l'ombre au texte souvent présente */
    box-shadow: none !important;
}

/* État Survol (Hover) */
.woocommerce #respond input#submit.alt:hover, 
.woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover, 
.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover {
    background-color: var(--cab-primary-light) !important;
    border-color: var(--cab-primary-light) !important;
    color: #ffffff !important;
}

/* État Clic (Active) + Le fameux Halo Foncé que tu voulais */
.woocommerce #respond input#submit.alt:active, 
.woocommerce a.button.alt:active, 
.woocommerce button.button.alt:active, 
.woocommerce input.button.alt:active {
    background-color: var(--bs-primary) !important;
    filter: brightness(0.85); /* Assombrit la couleur primaire */
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.45) !important;
}

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  border-radius: 50px;
}


/**
* Tabs de single-product Start
*/

.tab-content h2 {
    font-size: 1px;
    color: transparent; /* Titre principal en couleur Primary */
}

.tab-content h3,.tab-content h4, .tab-content h5, .tab-content h6 {
    color: color-mix(in srgb, var(--bs-primary), black 20%);
}

.tab-content h3 {
    font-size:calc(1.275rem + 0.3vw);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
@media(min-width: 1200px) {
    .tab-content h3 {
        font-size:1.5rem
    }
}
.tab-content h4 {
    font-size:1.25rem
}
.tab-content h5 {
    font-size:1rem
}
.tab-content h6 {
    font-size:0.80rem
}
.tab-content ul {
    padding-left: 1.2rem;
    list-style-type: none;
}
.tab-content ul li::before {
    content: "•";
    color: var(--bs-primary);
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}

/* Style du contenu des onglets */
.tab-content .tab-pane {
    line-height: 1.7;
    color: var(--bs-body-color);
}

.tab-content h2 {
    font-size: 1px;
    color: transparent; /* Titre principal en couleur Primary */
}

.tab-content h3 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: color-mix(in srgb, var(--bs-primary), black 20%); /* Version foncée pour les sous-titres */
    font-weight: 600;
}

.tab-content ul {
    padding-left: 1.2rem;
    list-style-type: none;
}

/* Alignement propre des puces dans les onglets */
.tab-content ul li {
    display: flex;             /* Aligne la puce et le texte sur la même ligne */
    align-items: flex-start;   /* Aligne la puce en haut si le texte fait plusieurs lignes */
    margin-bottom: 8px;        /* Espacement entre les points de la liste */
}

.tab-content ul li::before {
    content: "•";
    color: var(--bs-primary);
    font-weight: bold;
    display: inline-block;
    width: 1.5em;              /* Espace réservé pour la puce */
    flex-shrink: 0;            /* Empêche la puce de s'écraser */
}

/* Supprime la marge forcée du paragraphe interne qui crée le décalage */
.tab-content ul li p {
    margin: 0 !important;      /* Force le texte à rester collé à la puce */
    display: inline;           /* Transforme le bloc en texte simple */
}

/* Informations complémentaires */
/* Transformation du tableau WooCommerce */
.shop_attributes {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.shop_attributes th {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    color: var(--bs-primary);
    font-weight: 600;
    padding: 12px 20px;
    width: 30%;
    border-bottom: 1px solid #fff; /* Séparation légère */
}

.shop_attributes td {
    padding-left: 10px !important;
    font-style: normal !important;
}

.shop_attributes tr:last-child th, 
.shop_attributes tr:last-child td {
    border-bottom: none;
}

/* Avis */
/* Style des étoiles WooCommerce */
.star-rating span {
    color: var(--bs-primary) !important;
}

.comment-respond {
    background: rgba(var(--bs-primary-rgb), 0.02);
    padding: 2rem;
    border-radius: 20px;
    border: 1px dashed rgba(var(--bs-primary-rgb), 0.2);
}

#reply-title {
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 1.5rem;
    display: block;
}

/*** woocommerce-pagination ***/
/* Conteneur principal */
.woocommerce-pagination {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.woocommerce-pagination .page-numbers {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    margin: 0 5px !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    
    /* DESIGN REVISITÉ */
    background-color: #ffffff !important;   /* Fond blanc */
    border: 1px solid var(--bs-secondary) !important;    /* Cadre rouge fin (secondary) */
    color: #6c757d !important;              /* Numéros en GRIS (Bootstrap text-muted/secondary) */
    
    border-radius: 8px !important;           /* Coins arrondis */
    font-weight: 500;
}

/* État : SÉLECTIONNÉ (.current) */
.woocommerce-pagination .page-numbers.current {
    background-color: var(--bs-primary) !important;    /* Fond Orange (primary) */
    border-color: var(--bs-primary) !important;        /* Bordure Orange */
    color: #ffffff !important;               /* Texte Blanc */
}

/* État : SURVOL (Hover) */
.woocommerce-pagination .page-numbers:hover:not(.current) {
    background-color: var(--bs-primary) !important;    /* Fond Orange (primary) */
    border-color: var(--bs-primary) !important;        /* Bordure Orange */
    color: #ffffff !important;               /* Texte Blanc */
}

/**
* Déplacement visuel des messages PayPal en bas sans casser le PHP
*/
.wc-proceed-to-checkout {
    display: flex !important;
    flex-direction: column !important;
}
/* 1. Bouton valider en haut */
.wc-proceed-to-checkout .checkout-button {
    order: 1 !important;
}
/* 2. Boutons de paiement express au milieu */
.wc-proceed-to-checkout .ppc-button-wrapper {
    order: 2 !important;
    margin-top: 10px !important;
}
/* 3. Message de financement en dernier */
.wc-proceed-to-checkout .ppcp-messages {
    order: 3 !important;
    margin-top: 15px !important;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/*** Shop Page Start ***/
.shop .product-categories .categories-item a {
    transition: 0.5s;
}

.shop .product-categories .categories-item a:hover {
    color: var(--bs-primary) !important;
}

.shop .product-color .product-color-item {
    display: flex;
    padding: 10px 0;
}

.shop .product-color .product-color-item a {
    transition: 0.5s;
}

.shop .product-color .product-color-item a:hover {
    color: var(--bs-secondary);
}

.shop .price {
    padding: 10px 0;
}

.shop .additional-product .additional-product-item {
    padding: 10px 0;
}

.shop .featured-product .featured-product-item {
    display: flex;
    align-items: center;
    justify-content: start;
}

.shop .product-tags .product-tags-items a {
    display: inline-block !important;
    background: var(--bs-white);
    color: var(--bs-dark);
    transition: 0.5;
}

.shop .product-tags .product-tags-items a:hover {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}
/*** Products Start ***/
.product .product-item {
    width: 100%;
    height: 100%;
    position: relative;
}

.product .product-item .product-item-add {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: 0.5s;
    z-index: 1;
}

.product .product-item:hover .product-item-add {
    background: var(--bs-white);
    margin-bottom: -122px;
    opacity: 1;
}
.product .product-item:hover .product-item-inner {
    border-bottom: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.product .product-item .product-item-inner .product-item-inner-item .product-new,
.product .product-item .product-item-inner .product-item-inner-item .product-sale {
    position: absolute;
    width: 60px; 
    height: 60px;
    border-radius: 60px; 
    top: 20px; 
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center; 
}

.product .product-item .product-item-inner .product-item-inner-item .product-new {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.product .product-item .product-item-inner .product-item-inner-item .product-sale {
    background: var(--bs-secondary);
    color: var(--bs-white);
}

.product .product-item:hover .product-item-inner img {
    transform: scale(1.1);
}

.product .product-item:hover .product-item-inner .product-item-inner-item .product-details a i:hover {
    background: var(--bs-secondary);
    color: var(--bs-white);
}

.product .product-item:hover .product-item-inner .product-details {
    opacity: 1 !important;
}

.product .tab-class .nav .nav-item a.active,
.blog .tab-class .nav .nav-item a.active {
    background: var(--bs-primary) !important;
}

.product .tab-class .nav .nav-item a.active span,
.blog .tab-class .nav .nav-item a.active span {
    color: var(--bs-white) !important;
}
/*** Product End ***/
/**
* Carte Produit Start
*/
.product-card {
    transition: all 0.3s ease;
    background: #fff;
    border: 1px solid #eee !important;
}

.product-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transform: translateY(-5px);
    border-color: var(--bs-primary) !important;
}

.product .product-item .product-item-inner {
    height: 100%;
}

.product .product-item .product-item-inner .product-item-inner-item {
    position: relative;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden;
}
.product .product-item .product-item-inner img {
    transition: 0.5s;
}
.product .product-item .product-item-inner .product-item-inner-item .product-details {
    position: absolute;
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: rgba(255, 255, 255, 0.2);
    transition: 0.5s;
}
.product .product-item .product-item-inner .product-item-inner-item .product-details a i {
    width: 50px; 
    height: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: var(--bs-white);
    transition: 0.5s;
}

/* Image zoom au survol */
.product-img-wrapper img {
    transition: transform 0.5s ease;
}

.product-card:hover .product-img-wrapper img {
    transform: scale(1.1);
}

/* Bouton Ajouter au panier custom */
.product-card .add_to_cart_button, 
.product-card .product_type_variable {
    background-color: transparent !important;
    color: var(--bs-primary) !important;
    border: 2px solid var(--bs-primary) !important;
}

.product-card .add_to_cart_button:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* Alignement des prix */
.product-price del {
    text-decoration: line-through;
    opacity: 0.6;
}

/* ANIMATION YOU PRODUCTS */
.tab-content .tab-pane.active .product-item {
    animation: fadeInUp 0.5s ease backwards;
}
.tab-content .tab-pane.active .col-md-6:nth-child(1) .product-item { animation-delay: 0.1s; }
.tab-content .tab-pane.active .col-md-6:nth-child(2) .product-item { animation-delay: 0.2s; }
.tab-content .tab-pane.active .col-md-6:nth-child(3) .product-item { animation-delay: 0.3s; }
.tab-content .tab-pane.active .col-md-6:nth-child(4) .product-item { animation-delay: 0.4s; }

/*** Single Products Start ***/
.single-product .owl-nav .owl-prev,
.single-product .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -13%;
    font-size: 22px;
    color: var(--bs-primary);
}

.single-product .owl-nav .owl-prev {
    left: 0;
}

.single-product .owl-nav .owl-next {
    right: 0 !important;
}


.single-product .single-carousel .owl-dots {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    transition: 0.5s;
    flex-wrap: wrap;
    gap: 5px;
}

.single-product .single-carousel .owl-dots .owl-dot img {
    width: 50px;
    height: 50px;
    border-radius: 30px;
    margin-right: 5px;
    border: 2px solid var(--bs-primary);
    transition: 0.5s;
    object-fit: cover;
    opacity: 0.6;
}

.single-product .single-carousel .owl-dots .owl-dot.active img {
    width: 65px;
    height: 65px;
    border-radius: 40px;
    border: 4px solid var(--bs-secondary);
    opacity: 1;
}

.related-product .related-carousel .related-item {
    width: 100%;
    height: 100%;
    position: relative;
    margin-bottom: 125px;
    transition: 0.5s;
}

.related-product .related-carousel .related-item .related-item-add {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: 0.5s;
    z-index: 99;
}

.related-product .related-carousel .related-item:hover .related-item-add {
    background: var(--bs-white);
    margin-bottom: -110px;
    opacity: 1;
}

.related-product .related-carousel .related-item:hover .related-item-inner {
    border-bottom: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.related-product .related-carousel .related-item .related-item-inner .related-item-inner-item {
    position: relative;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden;
}

.related-product .related-carousel .related-item .related-item-inner .related-item-inner-item .related-new,
.related-product .related-carousel .related-item .related-item-inner .related-item-inner-item .related-sale {
    position: absolute;
    width: 60px; 
    height: 60px;
    border-radius: 60px; 
    top: 20px; 
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center; 
    z-index: 5;
}

.related-product .related-carousel .related-item .related-item-inner .related-item-inner-item .related-new {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.related-product .related-carousel .related-item .related-item-inner .related-item-inner-item .related-sale {
    background: var(--bs-secondary);
    color: var(--bs-white);
}

.related-product .related-carousel .related-item .related-item-inner img {
    transition: 0.5s;
}

.related-product .related-carousel .related-item:hover .related-item-inner img {
    transform: scale(1.1);
}

.related-product .related-carousel .related-item .related-item-inner .related-item-inner-item .related-details {
    position: absolute;
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: rgba(255, 255, 255, 0.2);
    transition: 0.5s;
}

.related-product .related-carousel .related-item .related-item-inner .related-item-inner-item .related-details a i {
    width: 50px; 
    height: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: var(--bs-white);
    transition: 0.5s;
}

.related-product .related-carousel .related-item:hover .related-item-inner .related-item-inner-item .related-details a i:hover {
    background: var(--bs-secondary);
    color: var(--bs-white);
}

.related-product .related-carousel .related-item:hover .related-item-inner .related-details {
    opacity: 1;
}


.related-product .owl-nav .owl-prev,
.related-product .owl-nav .owl-next {
    position: absolute;
    top: -40px;
    padding: 5px 40px;
    border-radius: 30px;
    background: var(--bs-primary);
    color: var(--bs-white);
    transition: 0.5s;
}

.related-product .owl-nav .owl-prev {
    left: 0;
}

.related-product .owl-nav .owl-next {
    right: 0;
}

.related-product .owl-nav .owl-prev:hover,
.related-product .owl-nav .owl-next:hover {
    background: var(--bs-secondary) !important;
}
/*** Single Products End ***/

.woocommerce .woosc_table .col {
    padding: 15px 15px 15px 0;
    vertical-align: top;
}
.woosc-area .woosc-inner .woosc-bar .woosc-bar-btn {
    background-color: var(--bs-primary) !important;
}

/* START Make the WooCommerce Cart Table Responsive  for Mobile */

@media (max-width: 767px) {
    /* On garde la structure en carte */
    .shop_table.cart tr.cart_item {
        display: block !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 10px !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
        background: #fff !important;
        position: relative !important;
    }

    /* Alignement de base pour toutes les lignes */
    .shop_table.cart tr.cart_item td, 
    .shop_table.cart tr.cart_item th {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border: none !important;
        padding: 8px 0 !important;
        width: 100% !important;
    }

    /* --- 1. IMAGE (1er enfant) --- */
    .shop_table.cart tr.cart_item > td:nth-child(1) {
        justify-content: center !important; /* On centre l'image */
        border-bottom: 1px solid #f8f9fa !important;
        margin-bottom: 10px;
    }
    .shop_table.cart tr.cart_item > td:nth-child(1)::before {
        content: none !important; /* Pas de ":" sur l'image */
    }

    /* --- 2. TITRE (2ème enfant) --- */
    .shop_table.cart tr.cart_item > th:nth-child(2) {
        justify-content: center !important;
        font-weight: bold;
    }

    /* --- 3. PRIX (3ème enfant) --- */
    .shop_table.cart tr.cart_item > td:nth-child(3)::before {
        content: "Prix :" !important;
        font-weight: bold;
    }

    /* --- 4. QUANTITÉ (4ème enfant) --- */
    .shop_table.cart tr.cart_item > td:nth-child(4)::before {
        content: "Quantité :" !important;
        font-weight: bold;
    }

    /* --- 5. TOTAL (5ème enfant) --- */
    .shop_table.cart tr.cart_item > td:nth-child(5)::before {
        content: "Total :" !important;
        font-weight: bold;
    }

    /* --- 6. SUPPRIMER (6ème enfant) --- */
    .shop_table.cart tr.cart_item > td:nth-child(6) {
        position: absolute !important;
        top: 10px;
        right: 10px;
        width: auto !important;
    }
    .shop_table.cart tr.cart_item > td:nth-child(6)::before {
        content: none !important;
    }

    /* Nettoyage des espacements internes */
    .shop_table.cart td p, 
    .shop_table.cart td div {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Taille du bloc quantité */
    .input-group.quantity {
        width: 110px !important;
    }

    .woocommerce table.shop_table_responsive tr td, .woocommerce-page table.shop_table_responsive tr td {
        text-align: center !important;
    }

    .woocommerce table.shop_table td {
    border-top: 0px;
    }
    .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
    .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
        background-color: transparent;
    }
    .woocommerce table.shop_table_responsive .mt-3 {
    margin-top: 0rem !important;
    }

    /* 1. On force le parent à passer en colonne (le titre au-dessus, les options dessous) */
    .d-flex.justify-content-between.mb-4 {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* 2. On dit au bloc de droite de prendre toute la largeur */
    .text-end {
        text-align: left !important; /* On réaligne le texte à gauche pour le mobile */
        width: 100% !important;
    }

    /* 3. On s'assure que le conteneur de livraison occupe tout l'espace */
    #shipping_method {
        width: 100% !important;
        display: block !important;
    }

    /* 4. On rend chaque option large et cliquable */
    #shipping_method .form-check {
        width: 100% !important;
        background: #f9f9f9; /* Optionnel : fond léger pour voir la zone */
        padding: 10px 10px 10px 35px;
        border: 1px solid #eee;
        border-radius: 4px;
        margin-bottom: 5px;
    }

    /* On cible précisément le bloc Total pour forcer la ligne unique */
    .py-4.mb-4.border-top.border-bottom.d-flex {
        display: flex !important; /* Force le mode Flex */
        flex-direction: row !important; /* Interdit le passage à la ligne (colonne) */
        flex-wrap: nowrap !important; /* Empêche le saut de ligne */
        justify-content: space-between !important; /* Pousse aux extrémités */
        align-items: center !important; /* Aligne verticalement */
        width: 100% !important;
    }

    /* On s'assure que le titre ne prend pas toute la place */
    .py-4.mb-4.border-top.border-bottom.d-flex h5 {
        margin-bottom: 0 !important;
        white-space: nowrap !important; /* Empêche le mot "Total" de se couper */
    }

    /* On s'assure que le prix reste à droite */
    .py-4.mb-4.border-top.border-bottom.d-flex p {
        margin-bottom: 0 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

}
@media (max-width: 767px) {
    /* 1. Masquer l'en-tête du tableau qui prend trop de place */
    .woocommerce-checkout-review-order-table thead {
        display: none;
    }

    /* 2. Transformer chaque ligne en bloc indépendant */
    .woocommerce-checkout-review-order-table tr {
        display: block;
        width: 100% !important;
        border-bottom: 2px solid #eee;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    /* 3. Transformer chaque cellule en bloc 100% */
    .woocommerce-checkout-review-order-table td, 
    .woocommerce-checkout-review-order-table th {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 5px 0 !important;
        border: none !important;
    }

    /* 4. Cas spécifique des méthodes d'expédition */
    .woocommerce-shipping-totals td[colspan="3"] {
        width: 100% !important;
    }

    #shipping_method {
        width: 100% !important;
    }

    #shipping_method .form-check {
        padding: 12px;
        background: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 6px;
        margin-bottom: 8px;
    }

    /* 5. Aligner le Total à droite ou le faire ressortir */
    .order-total td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        background: #fff;
    }

    /* Cacher les cellules vides (th scope="row" vides) */
    .woocommerce-checkout-review-order-table th[scope="row"]:empty {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /* 1. On nettoie le tableau pour qu'il ne ressemble plus à un tableau */
    .woocommerce-checkout-review-order-table {
        display: block !important;
        border: none !important;
    }

    .woocommerce-checkout-review-order-table thead {
        display: none; /* Cache les colonnes Nom, Modèle, etc. */
    }

    .woocommerce-checkout-review-order-table tbody {
        display: block !important;
        width: 100%;
    }

    /* 2. On transforme chaque produit en CARTE */
    .cart_item {
        display: flex !important;
        flex-direction: column !important;
        background: #fff;
        border: 1px solid #eee !important;
        border-radius: 10px;
        padding: 15px !important;
        margin-bottom: 15px;
        position: relative;
    }

    /* 3. Nom du produit */
    .cart_item th[scope="row"] {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
        font-size: 1rem !important;
        font-weight: bold;
    }

    /* 4. Les variations (Couleurs, etc.) */
    .cart_item .variation {
        margin-top: 8px !important;
        font-size: 0.85rem;
        color: #666;
    }

    /* 5. On cache les colonnes inutiles (Modèle et Prix unitaire) */
    .cart_item td:nth-of-type(1), /* Modèle */
    .cart_item td:nth-of-type(2)  /* Prix unit */ {
        display: none !important;
    }

    /* 6. LA BARRE DE PRIX (Quantité et Total) */
    /* On utilise Flexbox pour mettre Qté à gauche et Total à droite */
    .cart_item td:nth-of-type(3), /* Quantité */
    .cart_item td:nth-of-type(4)  /* Total ligne */ {
        display: inline-flex !important;
        padding: 0 !important;
        border: none !important;
        margin-top: 15px;
        align-items: center;
    }

    /* Conteneur pour forcer l'alignement gauche/droite */
    .cart_item {
        display: grid !important;
        grid-template-areas: 
            "titre titre"
            "variations variations"
            "qte total";
    }

    .cart_item th[scope="row"] { grid-area: titre; }
    .cart_item .variation { grid-area: variations; }
    
    /* Quantité à gauche */
    .cart_item td:nth-of-type(3) { 
        grid-area: qte; 
        justify-content: flex-start;
        font-size: 0.9rem;
    }
    .cart_item td:nth-of-type(3):before { content: "Qté : "; margin-right: 5px; color: #999; }

    /* Total à droite */
    .cart_item td:nth-of-type(4) { 
        grid-area: total; 
        justify-content: flex-end;
        text-align: right !important;
        font-weight: bold;
        font-size: 1.1rem;
        color: #000;
    }

    /* 1. On force la ligne d'expédition à se comporter comme un bloc seul */
    tr.woocommerce-shipping-totals {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    /* 2. On force la cellule (td) à prendre 100% de la largeur du téléphone */
    tr.woocommerce-shipping-totals td[colspan="3"], 
    tr.woocommerce-shipping-totals td {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 !important;
        text-align: left !important;
    }

    /* 3. On stylise le conteneur des méthodes pour qu'il soit aéré */
    #shipping_method {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* 4. On transforme chaque option en "bouton" large */
    #shipping_method .form-check {
        display: flex !important;
        align-items: center;
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 15px 15px 15px 45px !important; /* Espace pour le bouton radio */
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 8px;
        position: relative;
    }

    /* 5. On positionne correctement le bouton radio à l'intérieur du bouton */
    #shipping_method .form-check-input {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 !important;
    }

    /* 6. On s'assure que le label prend toute la place pour être cliquable */
    #shipping_method .form-check-label {
        width: 100%;
        display: flex;
        justify-content: space-between; /* Texte à gauche, Prix à droite */
        font-weight: 500;
        cursor: pointer;
    }

    /* 1. On force la ligne Total à devenir un bloc flexible */
    tr.order-total {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 100% !important;
        padding: 20px 0 !important;
        border-top: 2px solid #333 !important; /* Ligne plus marquée pour le total */
    }

    /* 2. On cache les cellules vides qui créent des décalages */
    tr.order-total th,
    tr.order-total td:nth-of-type(2),
    tr.order-total td:nth-of-type(3) {
        display: none !important;
    }

    /* 3. On gère le libellé "TOTAL" (la cellule qui contient le <p>) */
    tr.order-total td.align-middle {
        display: block !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* 4. On gère le bloc du PRIX */
    tr.order-total td:last-of-type {
        display: block !important;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Nettoyage du petit bandeau gris (bg-light) autour du prix */
    tr.order-total .bg-light {
        background-color: transparent !important;
        border: none !important;
        padding: 0 !important;
    }

    /* Style du prix final */
    tr.order-total .h5 {
        font-size: 1.4rem !important; /* On le rend plus gros pour le distinguer */
        margin: 0 !important;
        color: #000 !important;
    }
}

@media (max-width: 767px) {
    /* On force les conteneurs de ligne à prendre toute la largeur */
    #wc-ppcp-credit-card-gateway-cc-form .form-row-first, 
    #wc-ppcp-credit-card-gateway-cc-form .form-row-last {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important; /* Ajoute un espace entre les deux */
        display: block !important;
    }

    /* On s'assure que les conteneurs d'iframes PayPal prennent aussi 100% */
    #wc-ppcp-credit-card-gateway-cc-form div[id^="zoid-paypal-card-"] {
        width: 100% !important;
    }
}

@media (max-width: 991px) {
    /* Rangee de mise en page dont la barre laterale precede le contenu :
       on inverse pour remonter <main> au-dessus de <aside> sur mobile.
       Ne JAMAIS elargir ce selecteur a « .row.g-4 » : il attraperait aussi la
       grille de produits (ordre inverse a lecran) et la barre de recherche. */
    .cab-layout-sidebar {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* On s'assure que le contenu principal et la sidebar prennent toute la largeur */
    .cab-layout-sidebar > main,
    .cab-layout-sidebar > aside {
        width: 100% !important;
    }
    .cab-layout-sidebar > aside {
        padding: 0 !important;
    }

    /* On s'assure que le conteneur de l'image est bien le point de référence */
    .product .row .col-xl-6:first-child {
        position: relative !important;
        display: block !important; /* On sort du flex pour ce bloc spécifique */
    }

    /* Ajustement du badge pour qu'il ne s'échappe pas */
    .cab-badges-container {
        position: absolute !important;
        top: 15px !important;
        left: 25px !important; /* Ajuste selon ton goût */
        z-index: 10 !important;
    }

    .breadcrumb {
        justify-content: center !important;
    }
    .shop .product p.h4 {
        display:none;
    }

    .shop {
        padding-top: 0 !important;
    }
}

/* On restaure l'ordre normal pour le format desktop */
@media (min-width: 992px) {
    .cab-layout-sidebar {
        flex-direction: row !important;
    }
}
/* ==========================================================================
   Onglet « Informations complémentaires » : valeur de variation retenue
   Voir js/variation-info.js. Les lignes d'attribut conservent TOUTES les
   valeurs, celle qui est choisie étant mise en évidence.
   ========================================================================== */

.cab-attr-value {
    opacity: 0.55;
    transition: opacity 0.18s ease;
}

.cab-attr-value--active {
    opacity: 1;
    font-weight: 600;
    /* La couleur du texte reste héritée : --bs-primary (#c7afdd) est trop clair
       pour du texte sur fond blanc. Le soulignement porte la couleur, la graisse
       et l'opacité portent la distinction — elle ne repose donc pas sur la seule
       teinte. Le script ajoute en outre une mention réservée aux lecteurs d'écran. */
    border-bottom: 2px solid var(--bs-primary, #c7afdd);
    padding-bottom: 0.1em;
}

.cab-attr-sep {
    opacity: 0.55;
}

/* ==========================================================================
   Widget « Catégories de produits » : hiérarchie
   Voir Cab_Categories_Walker dans inc/woocommerce/widgets.php.
   ========================================================================== */

/* Décalage des sous-catégories. Le retrait seul porte la hiérarchie ;
   l'imbrication réelle des <ul> la restitue aux lecteurs d'écran. */
.product-categories .cab-cat-enfants {
    margin-left: 1.35rem;
    padding-left: 0.85rem;
}

/* Gouttière de bascule, à gauche du nom. Largeur fixe et identique pour le
   bouton et la cale : les noms restent alignés qu'il y ait un chevron ou non. */
.product-categories .cab-cat-bascule,
.product-categories .cab-cat-cale {
    flex: 0 0 1.15rem;
    width: 1.15rem;
}

.product-categories .cab-cat-cale {
    display: inline-block;
}

/* Bascule de dépliage. Un <button> dépouillé de ses styles natifs : il ne doit
   pas ressembler à un bouton, seulement à un chevron cliquable. */
.product-categories .cab-cat-bascule {
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    line-height: 1;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.product-categories .cab-cat-bascule:hover,
.product-categories .cab-cat-bascule:focus-visible {
    opacity: 1;
    color: var(--bs-primary);
}

/* Le chevron pivote pour indiquer l'état, en complément d'aria-expanded. */
.product-categories .cab-cat-bascule i {
    display: inline-block;
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.product-categories .cab-cat-bascule[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Catégorie actuellement consultée.
   La couleur du texte reste héritée : --bs-primary (#c7afdd) donne un contraste
   d'environ 2:1 sur fond blanc, très en deçà des 4,5:1 requis pour du texte.
   La distinction passe donc par la graisse et par un repère à gauche — et le
   Walker pose en outre aria-current="page" pour les lecteurs d'écran. */
.product-categories .cab-cat--actuelle > .categories-item a[aria-current] {
    font-weight: 600;
}

.product-categories .cab-cat--actuelle > .categories-item {
    border-left: 3px solid var(--bs-primary);
    margin-left: -0.75rem;
    padding-left: 0.5rem;
}

/* ==========================================================================
   Bandeau d'archive : description de la catégorie, sous le titre
   Voir template-parts/page-header.php.
   ========================================================================== */

.page-header .cab-header-description {
    max-width: 46rem;
    margin: 0.75rem auto 0;
}

/* WooCommerce enveloppe la description dans .term-description, lequel contient
   des <p>. On neutralise leur marge basse pour ne pas déséquilibrer le bandeau. */
.page-header .cab-header-description .term-description p:last-child {
    margin-bottom: 0;
}

.page-header .cab-header-description a {
    color: #fff;
    text-decoration: underline;
}

/* ==========================================================================
   Barre d'outils de la boutique (recherche / tri / grille-liste)
   ==========================================================================
   Sous le point de rupture « xl » les trois colonnes s'empilent et la
   derniere (le selecteur grille/liste) se retrouve directement au-dessus de
   la grille de produits, sans aucune respiration : les cartes touchaient la
   barre. On redonne l'espacement vertical que les gouttieres « g-4 » ne
   fournissent qu'ENTRE les colonnes, jamais apres la derniere.
   ========================================================================== */
@media (max-width: 1199.98px) {
    .cab-barre-outils {
        margin-bottom: 1.5rem;
    }
}