/* FIX CRITIQUE - pointer-events sur barre */
.cmu-filters-bar,
.cmu-filters-bar * {
    pointer-events: auto !important;
}

/* =========================================================
   CMU – HERO ARCHIVE BOUTIQUE / CATÉGORIES / ATTRIBUTS
   (H3 + H1 + H2)
   ========================================================= */

/* Bloc cuivre global – boutique + catégories + attributs */
body.post-type-archive-product .cmu-archive-v2__hero,
body.tax-product_cat .cmu-archive-v2__hero,
body[class*="tax-pa_"] .cmu-archive-v2__hero {
  background-color: #C07C4A;
  color: #FAF8F6;
  text-align: center;
  margin: 0 !important;
  padding: 2.4rem 1.4rem 2rem;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  box-sizing: border-box;
}

/* Sur-titre – “ACCESSOIRES CHEVEUX & BIJOUX CRÉATEURS” */
body.post-type-archive-product .cmu-archive-surtitle .elementor-heading-title,
body.tax-product_cat .cmu-archive-surtitle .elementor-heading-title,
body[class*="tax-pa_"] .cmu-archive-surtitle .elementor-heading-title {
  color: #FAF8F6;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 0.6rem;
}

/* H1 dynamique – “BOUTIQUE” / nom de catégorie / nom d’attribut : NOIR */
body.post-type-archive-product .cmu-archive-title .elementor-heading-title,
body.tax-product_cat .cmu-archive-title .elementor-heading-title,
body[class*="tax-pa_"] .cmu-archive-title .elementor-heading-title {
  color: #1A1A1A; /* noir */
  font-size: 1.6rem !important;
  line-height: 1.25;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 0.8rem;
}

/* Texte d’intro – H2 SEO */
body.post-type-archive-product .cmu-archive-intro,
body.post-type-archive-product .cmu-archive-intro .elementor-heading-title,
body.tax-product_cat .cmu-archive-intro,
body.tax-product_cat .cmu-archive-intro .elementor-heading-title,
body[class*="tax-pa_"] .cmu-archive-intro,
body[class*="tax-pa_"] .cmu-archive-intro .elementor-heading-title {
  color: #FAF8F6; /* blanc */
  max-width: 46rem;
  margin: 0.4rem auto 0;
  font-size: 1.05rem !important;
  line-height: 1.45;
  font-weight: 500;
}

/* ==========================
   TABLETTE / DESKTOP (≥ 768px)
   ========================== */

@media (min-width: 768px) {

  body.post-type-archive-product .cmu-archive-v2__hero,
  body.tax-product_cat .cmu-archive-v2__hero,
  body[class*="tax-pa_"] .cmu-archive-v2__hero {
    padding: 2.8rem 2rem 2.6rem;
    max-width: 100% !important;
    width: 100% !important;
    margin: 2rem 0 2.4rem 0 !important;
    border-radius: 0 !important;
  }

  body.post-type-archive-product .cmu-archive-title .elementor-heading-title,
  body.tax-product_cat .cmu-archive-title .elementor-heading-title,
  body[class*="tax-pa_"] .cmu-archive-title .elementor-heading-title {
    font-size: 1.8rem !important;
  }

  body.post-type-archive-product .cmu-archive-intro,
  body.post-type-archive-product .cmu-archive-intro .elementor-heading-title,
  body.tax-product_cat .cmu-archive-intro,
  body.tax-product_cat .cmu-archive-intro .elementor-heading-title,
  body[class*="tax-pa_"] .cmu-archive-intro,
  body[class*="tax-pa_"] .cmu-archive-intro .elementor-heading-title {
    font-size: 1.1rem !important;
  }
}

/* ==========================
   MOBILE (< 768px)
   ========================== */

@media (max-width: 767px) {

  body.post-type-archive-product .cmu-archive-v2__hero,
  body.tax-product_cat .cmu-archive-v2__hero,
  body[class*="tax-pa_"] .cmu-archive-v2__hero {
    padding: 2.1rem 1.2rem 1.5rem;
  }

  /* sur-titre mobile */
  body.post-type-archive-product .cmu-archive-surtitle .elementor-heading-title,
  body.tax-product_cat .cmu-archive-surtitle .elementor-heading-title,
  body[class*="tax-pa_"] .cmu-archive-surtitle .elementor-heading-title {
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.4rem;
  }

  /* H1 mobile */
  body.post-type-archive-product .cmu-archive-title .elementor-heading-title,
  body.tax-product_cat .cmu-archive-title .elementor-heading-title,
  body[class*="tax-pa_"] .cmu-archive-title .elementor-heading-title {
    font-size: 1.3rem !important;
    line-height: 1.25;
    margin-bottom: 0.5rem;
  }

  /* Intro mobile */
  body.post-type-archive-product .cmu-archive-intro,
  body.post-type-archive-product .cmu-archive-intro .elementor-heading-title,
  body.tax-product_cat .cmu-archive-intro,
  body.tax-product_cat .cmu-archive-intro .elementor-heading-title,
  body[class*="tax-pa_"] .cmu-archive-intro,
  body[class*="tax-pa_"] .cmu-archive-intro .elementor-heading-title {
    font-size: 0.9rem !important;
    line-height: 1.4;
    margin-top: 0.3rem;
    max-width: 90%;
  }
}



/* ========== ⚠️ ANCIENNE GRILLE WOO (DÉSACTIVÉE) ========== */
/* Tout ce qui suit était prévu pour:
   .cmu-archive-grid ul.products li.product etc.

   On le laisse en commentaire pour mémoire,
   afin qu'il n’impacte plus le Loop Grid Elementor.
*/

/*
body .cmu-archive-v2 .cmu-archive-grid ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.4rem;
    row-gap: 2rem;
    padding: 0 1.2rem 2.4rem;
    margin: 0 auto !important;
    list-style: none;
    box-sizing: border-box;
}

body .cmu-archive-v2 .cmu-archive-grid ul.products li.product { ... }
body .cmu-archive-v2 .cmu-archive-grid ul.products li.product a.woocommerce-LoopProduct-link img { ... }
body .cmu-archive-v2 .cmu-archive-grid ul.products li.product .woocommerce-loop-product__title { ... }
body .cmu-archive-v2 .cmu-archive-grid ul.products li.product .price { ... }
body .cmu-archive-v2 .cmu-archive-grid ul.products li.product span.onsale { ... }
body .cmu-archive-v2 .cmu-archive-grid ul.products { margin: 0 !important; }

@media (max-width: 767px) {
    html, body { overflow-x: hidden !important; }
}
*/

/* On garde les 2 lignes suivantes :
   elles serviront aussi bien au Loop Grid.
*/

/* ClawMeUp – forcer l'affichage visuel des étoiles */
.cmu-archive-grid .star-rating {
    display: inline-block !important;
    margin-top: 0.2rem;
}

/* Centrer le bloc note + prix dans la carte */
.cmu-archive-grid .star-rating,
.cmu-archive-grid .price {
    text-align: center;
    width: 100%;
}

/* =========================================================
   CMU – LOOP GRID – GRILLE PRODUITS (MATCH ANCIEN MOBILE)
   ========================================================*/

/* Fond beige global de la zone boutique */
.cmu-archive-v2 {
    background: #FDF5EF;
}

/* ---------- GRILLE ---------- */

/* Desktop / tablette : base 3 colonnes, mobile : override plus bas */
.cmu-archive-v2 .cmu-archive-grid .elementor-loop-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 2rem;
    padding: 0 0.8rem 2.4rem;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .cmu-archive-v2 .cmu-archive-grid .elementor-loop-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.8rem;
        row-gap: 1.8rem;
        padding: 0 0.6rem 2.2rem;
    }
}

/* ---------- CARTE PRODUIT ---------- */

/* Container racine de la carte */
.cmu-archive-card {
    position: relative;
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Certains thèmes ajoutent un inner wrapper (.e-con-inner) */
.cmu-archive-card > .e-con-inner {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---------- IMAGE (base) ---------- */

.cmu-archive-card__thumb {
    position: relative;
    margin: 0 0 0.6rem;
}

.cmu-archive-card__thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;           /* comme ta grille d’avant */
    object-fit: cover;
    border-radius: 1rem;
}

/* ---------- TITRE ---------- */

.cmu-archive-card__title .elementor-heading-title {
    font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem !important;
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.2rem 0 0.15rem !important;
    text-align: center;

    /* Clamp pour éviter l’effet spaghetti */
    display: -webkit-box;
    -webkit-line-clamp: 2;              /* 2 lignes max + … */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmu-archive-card__title a {
    color: #3A2A21;
    text-decoration: none;
}

/* ---------- AVIS (widgets Woo ou Elementor) ---------- */

.cmu-archive-card__rating {
    margin: 0 0 0.1rem;
    text-align: center;
}

/* on garde aussi les règles globales déjà en place :
   .cmu-archive-grid .star-rating { display:inline-block; etc. }
*/

/* =========================================================
   CMU – PRIX HARMONISÉS (PROMO & NORMAL)
   ========================================================*/

.cmu-archive-card__price .price {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0.15rem 0 0.45rem !important;

    font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: #C07C4A !important; /* cuivre pour le prix courant */
}

/* Cas promo : ancien prix barré */
.cmu-archive-card__price .price del {
    display: inline-block !important;
    margin-right: 0.3rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: rgba(58, 42, 33, 0.6) !important; /* texte brun adouci */
    text-decoration: line-through !important;
    vertical-align: baseline;
}

/* Cas promo : nouveau prix */
.cmu-archive-card__price .price ins {
    display: inline-block !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: #C07C4A !important;
}

/* Cas sans promo : montant simple */
.cmu-archive-card__price .price .woocommerce-Price-amount {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

/* ---------- BADGE PROMO ---------- */

.cmu-archive-card .onsale {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    left: auto !important;
    min-width: auto !important;
    height: auto !important;

    padding: 0.15rem 0.55rem;
    font-size: 0.7rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;

    background-color: rgba(192, 124, 74, 0.8) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    line-height: 1.2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* =========================================================
   CMU – FIX TITRE PRODUIT LOOP (ANTI-SPAGHETTI)
   ========================================================*/

/* On cible à la fois le wrapper du widget et le H3 interne */
.cmu-archive-card__title,
.cmu-archive-card__title .elementor-heading-title {
    font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem !important;          /* un poil plus petit pour 2 lignes max */
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.2rem 0 0.15rem !important;
    text-align: center;

    /* Clamp fort, avec !important pour écraser Elementor */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;       /* 2 lignes max */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Couleur du lien dans tous les cas */
.cmu-archive-card__title a {
    color: #3A2A21 !important;
    text-decoration: none !important;
}

/* =========================================================
   PATCH 1 – IMAGES PLEINE CARTE, PAS DE CARTE DESSINÉE
   ========================================================*/

/* Grille : gouttières minimum sur mobile */
.cmu-archive-v2 .cmu-archive-grid .elementor-loop-container {
    column-gap: 0.5rem !important;
    row-gap: 1.6rem !important;
    padding: 0 0.35rem 2rem !important;
}

/* On neutralise tout fond / bordure éventuel autour de la carte */
.cmu-archive-grid .e-loop-item,
.cmu-archive-grid .e-loop-item > .e-con,
.cmu-archive-grid .e-loop-item > article {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Image : pas de bord arrondi, pas de recadrage forcé */
.cmu-archive-card__thumb {
    margin: 0 0 0.5rem !important;
}

.cmu-archive-card__thumb img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;     /* on laisse le ratio naturel */
    object-fit: contain !important;    /* aucune partie de l’image coupée */
    border-radius: 0 !important;       /* plus de coins arrondis */
}

/* =========================================================
   PATCH 2 – TITRE PRODUIT 3 LIGNES MAX
   ========================================================*/

.cmu-archive-card__title,
.cmu-archive-card__title .elementor-heading-title {
    font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.80rem !important;      /* un cran plus petit */
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.15rem 0 0.15rem !important;
    text-align: center;

    /* Clamp 3 lignes, largeur totale */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cmu-archive-card__title a {
    color: #3A2A21 !important;
    text-decoration: none !important;
}

/* =========================================================
   PATCH 3 – BLOC AVIS ⭐
   ========================================================*/

.cmu-archive-card__rating .woocommerce-product-rating {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}

.cmu-archive-card__rating .star-rating {
    font-size: 0.75rem !important;
    margin: 0 !important;
    color: #C07C4A !important;
}

.cmu-archive-card__rating .woocommerce-review-link {
    display: none !important;   /* on cache le lien "X avis" pour garder un visuel propre */
}

/* =========================================================
   CMU – PATCH FINAL GRILLE MOBILE (STYLE TYPE OZAELLE)
   ========================================================*/

/* Mobile : 2 colonnes très serrées, quasi full-bleed */
@media (max-width: 767px) {
    .cmu-archive-v2 .cmu-archive-grid .elementor-loop-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.4rem !important;
        row-gap: 1.4rem !important;
        padding: 0 0.25rem 1.8rem !important;
    }
}

/* Suppression TOTALE de la “carte” blanche autour des produits */
.cmu-archive-v2 .elementor-widget-loop-grid.cmu-archive-grid .e-loop-item,
.cmu-archive-v2 .elementor-widget-loop-grid.cmu-archive-grid .e-loop-item > *,
.cmu-archive-v2 .cmu-archive-grid .cmu-archive-card,
.cmu-archive-v2 .cmu-archive-grid .cmu-archive-card > .e-con-inner {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Bloc image : juste un petit espace avant le titre */
.cmu-archive-card__thumb {
    margin: 0 0 0.45rem !important;
}

/* IMAGE PRODUIT : carré 1/1, pleine largeur, sans bord arrondi */
.cmu-archive-card__thumb img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;   /* carré */
    object-fit: cover !important;     /* on remplit le carré au max */
    height: auto;
    border-radius: 0 !important;
}

/* =========================================================
   CLAWMEUP — RATING SHORTCODE DANS LA CARTE (MOBILE FIRST)
   ======================================================== */

/* Wrapper du shortcode dans la carte */
.cmu-archive-card__rating {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;

    margin: 0.12rem 0 0.32rem !important;
    padding: 0 !important;
    width: 100%;
    text-align: center !important;

    font-family: Montserrat, system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
}

/* Cas général : tout le contenu est sur UNE ligne compacte */
.cmu-archive-card__rating * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
}

/* Si le shortcode utilise des <span> ou <strong>, on les aligne bien */
.cmu-archive-card__rating span,
.cmu-archive-card__rating strong {
    display: inline-block;
}

/* Couleur par défaut : brun CMU pour le texte */
.cmu-archive-card__rating {
    color: #3A2A21 !important;
}

/* Span pour les étoiles → cuivre */
.cmu-archive-card__rating .cmu-stars,
.cmu-archive-card__rating .stars,
.cmu-archive-card__rating span[aria-hidden="true"] {
    color: #C07C4A !important;   /* cuivre */
}

/* Texte "5,0/5 (1 avis)" */
.cmu-archive-card__rating .cmu-rating-text,
.cmu-archive-card__rating small {
    color: #3A2A21 !important;
    font-weight: 500;
    opacity: 0.95;
}

/* ---------- MOBILE : ultra compact ---------- */
@media (max-width: 767px) {
    .cmu-archive-card__rating {
        font-size: 0.75rem !important;
        margin-top: 0.08rem !important;
        margin-bottom: 0.28rem !important;
    }
}

/* ---------- DESKTOP : un peu plus respirant ---------- */
@media (min-width: 768px) {
    .cmu-archive-card__rating {
        font-size: 0.82rem !important;
        margin-bottom: 0.4rem !important;
    }
}

/* =========================================================
   PATCH 6 – MOBILE – GRID FULL-BLEED & IMAGES + GRANDES
   ========================================================*/

@media (max-width: 767px) {

    /* On enlève toute marge/padding du container produits */
    .cmu-archive-v2 .cmu-archive-v2__products {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Grille Loop Grid : full viewport width, centrée */
    .cmu-archive-v2 .cmu-archive-grid .elementor-loop-container {
        width: 100vw !important;
        max-width: 100vw !important;

        position: relative;
        left: 50%;
        transform: translateX(-50%);

        margin: 0 !important;
        padding: 0 0.05rem 1.6rem !important;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.15rem !important;   /* gouttière ultra fine */
        row-gap: 1.4rem !important;
        box-sizing: border-box;
    }

    /* Image dominante */
    .cmu-archive-card__thumb {
        margin: 0 0 0.30rem !important;
    }

    .cmu-archive-card__thumb img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;   /* carré */
        object-fit: cover !important;
    }

    /* Titre compact pour laisser respirer l’image */
    .cmu-archive-card__title,
    .cmu-archive-card__title .elementor-heading-title {
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
        margin-top: 0.10rem !important;
        margin-bottom: 0.12rem !important;
    }

    /* Sécurité : pas de scroll horizontal parasite */
    html, body {
        overflow-x: hidden !important;
    }
}

/* =========================================================
   CMU – GRILLE DESKTOP / TABLETTE
   (override final des colonnes)
   ========================================================*/

/* Tablette : 3 colonnes équilibrées */
@media (min-width: 768px) and (max-width: 1199px) {
    .cmu-archive-v2 .cmu-archive-grid .elementor-loop-container {
        max-width: 1100px;
        margin: 0 auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 1.2rem !important;
        row-gap: 2.2rem !important;
        padding: 0 1rem 3rem !important;
    }
}

/* Laptop + desktop : 4 colonnes, grille un peu plus large */
@media (min-width: 1200px) {
    .cmu-archive-v2 .cmu-archive-grid .elementor-loop-container {
        max-width: 1360px; /* contenu plus large */
        margin: 0 auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 1.4rem !important;
        row-gap: 2.4rem !important;
        padding: 0 0.75rem 3.2rem !important; /* padding latéral réduit */
    }

    .cmu-archive-card__title,
    .cmu-archive-card__title .elementor-heading-title {
        font-size: 0.85rem !important;
    }
}

/* =========================================================
   CMU – SLIDER IMAGE MOBILE + HOVER BACK IMAGE DESKTOP
   ========================================================*/

/* --- Bullets cachées par défaut (desktop) --- */
.cmu-archive-card__thumb .cmu-thumb-bullets {
    display: none;
}

/* ---------- SLIDER + BULLETS : MOBILE UNIQUEMENT ---------- */

@media (max-width: 767px) {

    /* Track du slider : bande horizontale scrollable */
    .cmu-archive-card__thumb .cmu-thumb-track {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;

        margin: 0;
        padding: 0;
    }

    /* Masquer la barre de scroll sur mobile */
    .cmu-archive-card__thumb .cmu-thumb-track::-webkit-scrollbar {
        display: none;
    }
    .cmu-archive-card__thumb .cmu-thumb-track {
        -ms-overflow-style: none;  /* IE/Edge */
        scrollbar-width: none;     /* Firefox */
    }

    /* Chaque slide = 100% de la largeur de la carte, en ligne */
    .cmu-archive-card__thumb .cmu-thumb-slide {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
        margin: 0;
        padding: 0;
    }

    /* Images dans les slides : carré, plein cadre */
    .cmu-archive-card__thumb .cmu-thumb-slide img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    /* Zone des bullets */
    .cmu-archive-card__thumb .cmu-thumb-bullets {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;

        margin: 0;
        padding: 0.28rem 0 0.1rem;
    }

    /* Style des bullets cuivrées */
    .cmu-archive-card__thumb .cmu-thumb-bullet {
        width: 0.35rem;
        height: 0.35rem;
        border-radius: 999px;
        background-color: rgba(192, 124, 74, 0.30); /* cuivre clair */
    }

    .cmu-archive-card__thumb .cmu-thumb-bullet--active {
        background-color: #C07C4A;  /* cuivre plein */
    }

    .cmu-archive-card__thumb {
        margin-bottom: 0.3rem !important;
    }
}

/* ---------- HOVER BACK IMAGE : TABLETTE + DESKTOP ---------- */

@media (min-width: 768px) {

    /* Le track n'est plus un slider en tablette/desktop */
    .cmu-archive-card__thumb .cmu-thumb-track {
        display: block !important;
        position: relative;
        overflow: hidden !important;

        overflow-x: hidden !important;
        scroll-snap-type: none !important;
        -webkit-overflow-scrolling: auto;
    }

    /* Bullets masquées au-dessus de 768px */
    .cmu-archive-card__thumb .cmu-thumb-bullets {
        display: none !important;
    }

    /* Slide 1 : image de base (packshot) */
    .cmu-archive-card__thumb .cmu-thumb-slide:first-child {
        position: relative;
        z-index: 1;
    }

    /* Slide 2 : BACK IMAGE ACF, posée par-dessus */
    .cmu-archive-card__thumb .cmu-thumb-slide:nth-child(2) {
        position: absolute;
        inset: 0;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.25s ease-out;
    }

    /* Images : carré, plein cadre */
    .cmu-archive-card__thumb .cmu-thumb-slide img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    /* Effet hover : on révèle la BACK IMAGE si elle existe */
    .cmu-archive-card__thumb:hover .cmu-thumb-slide:nth-child(2) {
        opacity: 1;
    }
}
/* =========================================================
   HOTFIX BULLETS MOBILE – ALIGNEMENT HORIZONTAL FORCÉ
   ========================================================*/
@media (max-width: 767px) {

    /* Ligne de bullets, toujours horizontales */
    .cmu-archive-card__thumb .cmu-thumb-bullets {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }

    /* Chaque bullet reste un petit rond, côte à côte */
    .cmu-archive-card__thumb .cmu-thumb-bullet {
        display: inline-block !important;
        width: 0.35rem;
        height: 0.35rem;
        border-radius: 999px;
    }
}

/* =========================================================
   CMU – BARRE FILTRES MOBILE (FAÇON OZAELLE)
   ========================================================*/

.cmu-filters-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;

    padding: 0.45rem 0.9rem 0.6rem;
    background: #FDF5EF;
    border-bottom: 1px solid #E3D1C1;

    font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Boutons Filtrer / Trier */
.cmu-filters-bar .cmu-filters-toggle,
.cmu-filters-bar .cmu-sort-toggle {
    flex: 1 1 auto;
    max-width: 40%;

    padding: 0.45rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #D8C3B4;
    background: #FFFFFF;

    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3A2A21;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Groupe vue 2 / vue 1 */
.cmu-filters-bar .cmu-view-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cmu-view-toggle {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid #D8C3B4;
    background: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3A2A21;
}

.cmu-view-toggle[aria-pressed="true"] {
    background: #C07C4A;
    color: #FFFFFF;
    border-color: #C07C4A;
}

/* Mobile only pour la barre (on masquera desktop + tablette) */
@media (min-width: 768px) {
    .cmu-filters-bar {
        display: none;
    }
}

/* =========================================================
   CMU – PANNEAU FILTRES (OVERLAY)
   ========================================================*/

.cmu-filter-panel,
.cmu-sort-panel {
    position: fixed;
    inset: 0;
    z-index: 999;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    pointer-events: none;
    opacity: 0;
    transform: translateY(100%);

    transition:
        opacity 0.25s ease-out,
        transform 0.25s ease-out;
}

/* Etat ouvert (classe ajoutée par le JS: .is-open) */
.cmu-filter-panel.is-open,
.cmu-sort-panel.is-open {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

/* Contenu interne du panneau */
.cmu-filter-panel__inner,
.cmu-sort-panel__inner {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;

    background: #FDF5EF;
    border-radius: 1.4rem 1.4rem 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);

    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* Header */
.cmu-filter-panel__header,
.cmu-sort-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem 0.6rem;
}

.cmu-filter-panel__title,
.cmu-sort-panel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3A2A21;
}

.cmu-filter-panel__close,
.cmu-sort-panel__close {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid #D8C3B4;
    background: #FFFFFF;
    font-size: 1.2rem;
    line-height: 1;
    color: #3A2A21;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Corps */
.cmu-filter-panel__body,
.cmu-sort-panel__body {
    padding: 0.2rem 1.2rem 1rem;
    overflow-y: auto;
}

/* Accordéon Elementor dans les filtres */
.cmu-filter-panel__accordion .elementor-accordion-item {
    border: none;
    border-bottom: 1px solid #E3D1C1;
}

.cmu-filter-panel__accordion .elementor-tab-title {
    padding: 0.8rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #3A2A21;
}

.cmu-filter-panel__accordion .elementor-tab-content {
    padding: 0.4rem 0 0.8rem;
    font-size: 0.85rem;
}

/* Footer filtres */
.cmu-filter-panel__footer {
    display: flex;
    gap: 0.6rem;
    padding: 0.8rem 1.2rem 1.1rem;
    border-top: 1px solid #E3D1C1;
    background: #FDF5EF;
}

.cmu-filter-panel__reset,
.cmu-filter-panel__apply {
    flex: 1 1 50%;
    border-radius: 999px;
    padding: 0.65rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Style boutons Réinitialiser / Appliquer */
.cmu-filter-panel__reset {
    border: 1px solid #D8C3B4;
    background: #FFFFFF;
    color: #3A2A21;
}

.cmu-filter-panel__apply {
    border: 1px solid #C07C4A;
    background: #C07C4A;
    color: #FFFFFF;
}

/* Options de tri (liste simple) */
.cmu-sort-panel__options ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cmu-sort-panel__options li {
    padding: 0.6rem 0;
    border-bottom: 1px solid #E3D1C1;
    font-size: 0.9rem;
    color: #3A2A21;
}

/* Bloquer le scroll du body quand un panneau est ouvert */
body.cmu-no-scroll {
    overflow: hidden;
    touch-action: none;
}

/* On réserve ça à la vue mobile pour l’instant */
@media (min-width: 768px) {
    .cmu-filter-panel,
    .cmu-sort-panel {
        display: none;
    }
}

body.cmu-no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
}


/* =========================================================
   CMU - CSS ADDITIONNEL POUR BASCULE VUE + TRI
   À ajouter à la fin de ton fichier CSS_page_boutique.txt
   ========================================================= */

/* =========================================================
   BASCULE VUE 2 COLONNES / 1 COLONNE (MOBILE)
   ========================================================= */

/* Vue 1 colonne sur mobile */
@media (max-width: 767px) {
    .cmu-archive-grid .elementor-loop-container.cmu-grid--single-column {
        grid-template-columns: 1fr !important;
        column-gap: 0;
        row-gap: 2.5rem;
        padding: 0 1.5rem 2.5rem;
    }

    /* Cartes produits plus grandes en vue 1 colonne */
    .cmu-grid--single-column .cmu-archive-card {
        max-width: 100%;
    }

    /* Images plus grandes en vue 1 colonne */
    .cmu-grid--single-column .cmu-archive-card__thumb img {
        aspect-ratio: 3 / 4; /* Plus vertical */
    }
}

/* État actif des boutons de vue */
.cmu-view-toggle.is-active,
.cmu-view-toggle[aria-pressed="true"] {
    background: #C07C4A !important;
    color: #FFFFFF !important;
    border-color: #C07C4A !important;
}

/* =========================================================
   OPTIONS DE TRI CLIQUABLES (PANNEAU TRI)
   ========================================================= */

.cmu-sort-options-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cmu-sort-option {
    width: 100%;
    padding: 1rem 0;
    border: none;
    border-bottom: 1px solid #E3D1C1;
    background: transparent;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 400;
    color: #3A2A21;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
}

.cmu-sort-option:hover {
    background: rgba(192, 124, 74, 0.05);
    padding-left: 0.5rem;
    color: #C07C4A;
    font-weight: 500;
}

.cmu-sort-option:active {
    background: rgba(192, 124, 74, 0.1);
}

/* Option actuellement sélectionnée */
.cmu-sort-option.is-active {
    color: #C07C4A;
    font-weight: 600;
    background: rgba(192, 124, 74, 0.08);
}

/* =========================================================
   FILTRES CHECKBOXES (PANNEAU FILTRES)
   ========================================================= */

.cmu-filter-option {
    padding: 0.4rem 0;
}

.cmu-filter-option label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: #3A2A21;
    cursor: pointer;
    transition: color 0.2s ease;
}

.cmu-filter-option label:hover {
    color: #C07C4A;
}

.cmu-filter-option input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;
    border: 2px solid #D8C3B4;
    border-radius: 0.3rem;
    cursor: pointer;
    accent-color: #C07C4A;
}

.cmu-filter-option input[type="checkbox"]:checked {
    background: #C07C4A;
    border-color: #C07C4A;
}

/* =========================================================
   SLIDER DE PRIX (PANNEAU FILTRES)
   ========================================================= */

.cmu-filter-price {
    padding: 0.5rem 0;
}

.cmu-price-slider {
    width: 100%;
    margin: 0.5rem 0;
    accent-color: #C07C4A;
}

.cmu-price-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #C07C4A;
}

/* =========================================================
   BOUTONS FOOTER FILTRES
   ========================================================= */

.cmu-filter-reset-btn,
.cmu-filter-apply-btn {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Montserrat', sans-serif;
}

.cmu-filter-reset-btn {
    border: 1px solid #D8C3B4;
    background: #FFFFFF;
    color: #3A2A21;
}

.cmu-filter-reset-btn:hover {
    border-color: #C07C4A;
    color: #C07C4A;
}

.cmu-filter-apply-btn {
    border: 1px solid #C07C4A;
    background: #C07C4A;
    color: #FFFFFF;
}

.cmu-filter-apply-btn:hover {
    background: #B86E51;
    border-color: #B86E51;
}

/* =========================================================
   BOUTONS DE FERMETURE (×)
   ========================================================= */

.cmu-panel-close-btn {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid #D8C3B4;
    background: #FFFFFF;
    font-size: 1.4rem;
    line-height: 1;
    color: #3A2A21;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cmu-panel-close-btn:hover {
    background: #C07C4A;
    color: #FFFFFF;
    border-color: #C07C4A;
}

/* =========================================================
   ANIMATIONS SMOOTH
   ========================================================= */

.cmu-archive-grid .elementor-loop-container {
    transition: grid-template-columns 0.3s ease;
}

.cmu-view-toggle {
    transition: all 0.2s ease;
}

/* =========================================================
   FIX RESPONSIVE TABLETTE/DESKTOP
   ========================================================= */

@media (min-width: 768px) {
    /* Bascule vue désactivée sur tablette/desktop */
    .cmu-view-toggle-group {
        display: none;
    }
}

