/* ==========================================================================
   Carousel Produits – styles mécaniques uniquement.
   Le thème Woostify gère déjà le style de .product-loop-wrapper et enfants.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper + titre de section
   -------------------------------------------------------------------------- */
.cp-carousel-wrapper {
    position: relative;
    margin: 2em 0;
}

.cp-carousel-heading {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: .75em;
    color: inherit;
}

/* --------------------------------------------------------------------------
   Conteneur flèches + fenêtre
   -------------------------------------------------------------------------- */
.cp-carousel-container {
    display: flex;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Fenêtre (masque le débordement)
   -------------------------------------------------------------------------- */
.cp-carousel-track-wrap {
    overflow: hidden;
    flex: 1 1 0%;
    min-width: 0;
    /* Autorise le scroll vertical natif, bloque le scroll horizontal
       (le swipe horizontal est géré par le JS) */
    touch-action: pan-y;
    /* Empêche la sélection de texte pendant le drag */
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.cp-carousel-track-wrap:active {
    cursor: grabbing;
}

/* --------------------------------------------------------------------------
   Rail (flex horizontal, animé)
   align-items: stretch → toutes les slides à la même hauteur
   -------------------------------------------------------------------------- */
.cp-carousel-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important; /* hauteur égale entre les slides */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform .4s cubic-bezier(.25, .46, .45, .94);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   Slide – largeur calculée par JS, hauteur égale (stretch), bouton aligné
   en bas (même structure que la boucle WooCommerce native du thème : un
   seul <a> pour l'image + le titre, suivi du bouton).
   -------------------------------------------------------------------------- */
.cp-carousel-item {
    flex: 0 0 auto !important;
    width: auto;
    box-sizing: border-box;
    padding: 0 8px;
    float: none !important;
    clear: none !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

.cp-carousel-item > a {
    display: block;
    overflow: hidden;
}

/* Zone image : ratio portrait 3/4 fixe → toutes les vignettes ont
   exactement la même hauteur, que ce soit une image ou une vidéo WVC. */
.cp-carousel-item > a img,
.cp-carousel-item > a video {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    display: block;
    margin: 0 0 20px;
    transition: transform .5s ease;
}

.cp-carousel-item:hover > a img,
.cp-carousel-item:hover > a video {
    transform: scale(1.04);
}

/* Titre du produit */
.cp-carousel-item .woocommerce-loop-product__title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

/* Note (étoiles), si affichée */
.cp-carousel-item .star-rating {
    margin: 0 auto 10px;
}

/* Prix, si affiché */
.cp-carousel-item .price {
    display: block;
    font-size: 14px;
    margin-bottom: 16px;
    opacity: .8;
}

/* Bouton (Ajouter au panier / Lire la suite), aligné en bas de carte même
   si les titres ont des hauteurs différentes. */
.cp-carousel-item a.button,
.cp-carousel-item button.button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    padding: 13px 20px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* --------------------------------------------------------------------------
   Reset des marges WooCommerce sur les items produit dans le carousel
   -------------------------------------------------------------------------- */
.cp-carousel-track.products .product,
.cp-carousel-track .product {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Flèches de navigation
   -------------------------------------------------------------------------- */
.cp-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}

.cp-arrow:hover:not(:disabled) {
    background: #333;
    border-color: #333;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
}

.cp-arrow:disabled {
    opacity: .3;
    cursor: default;
}

.cp-arrow-prev { margin-right: 8px; }
.cp-arrow-next { margin-left:  8px; }

@media (max-width: 768px) {
    .cp-arrow          { width: 32px; height: 32px; }
    .cp-arrow svg      { width: 16px; height: 16px; }
    .cp-arrow-prev     { margin-right: 4px; }
    .cp-arrow-next     { margin-left:  4px; }
}

/* --------------------------------------------------------------------------
   Dots
   -------------------------------------------------------------------------- */
.cp-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.cp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.cp-dot.is-active {
    background: #333;
    transform: scale(1.4);
}

/* ==========================================================================
   Habillage des cartes produit — aligné sur la grille catégorie WooCommerce
   du thème Inspiro (le thème actif). Ce fichier disait à l'origine que
   "le thème Woostify gère déjà le style de .product-loop-wrapper et
   enfants" : ce n'est pas le thème présent sur ce site, d'où le rendu
   générique sans ce qui suit.

   Non préfixé par .woocommerce/.woocommerce-page à dessein : le carousel
   peut être inséré (shortcode) sur une page classique qui n'a pas ces
   classes de <body> (réservées par WooCommerce aux pages boutique/produit).
   ========================================================================== */

/* ---------- Alignement du contenu (centré, comme la grille standard) ---------- */

.cp-carousel-item .product-loop-content {
    text-align: center;
}

.cp-carousel-item .cp-title-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cp-carousel-item .cp-title-row .woocommerce-loop-product__title {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
}

/*
 * Bouton wishlist (cœur) : absent de la grille catégorie standard du site,
 * masqué pour rester cohérent avec elle.
 */
.cp-carousel-item .ict-wishlist-btn {
    display: none;
}

/* ---------- Image : conteneur positionné (corrige le hover-image) ---------- */

/*
 * .product-loop-hover-image est en position:absolute (voir plus haut dans ce
 * fichier) mais son parent .product-loop-image-wrapper n'avait jamais de
 * position:relative déclarée — sans ça, l'image de survol se positionne par
 * rapport au premier ancêtre positionné trouvé plus haut dans la page
 * (imprévisible). Corrigé ici.
 */
.cp-carousel-item .product-loop-image-wrapper {
    position: relative;
    background-color: #f2f2f2;
}

/* ---------- Titre produit ---------- */

.cp-carousel-item .woocommerce-loop-product__title {
    margin: 18px 0 10px;
    font-size: 15px;
    letter-spacing: 0.04em;
}

/* ---------- Bouton (Ajouter au panier / Lire la suite) ---------- */

/*
 * Valeurs reprises du thème Inspiro (.woocommerce a.button) pour un rendu
 * identique à la grille catégorie, sans dépendre de la présence de la
 * classe .woocommerce sur le <body> (voir note en tête de section).
 */
.cp-carousel-item .product-loop-meta,
.cp-carousel-item .animated-meta {
    display: flex;
    justify-content: center;
}

.cp-carousel-item a.button,
.cp-carousel-item button.button {
    display: inline-block;
    font-family: "Onest", sans-serif;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 11px 25px;
    color: #444;
    border: 2px solid #444;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.cp-carousel-item a.button:hover,
.cp-carousel-item button.button:hover {
    color: var(--inspiro-primary-color, #0bb4aa);
    border-color: var(--inspiro-primary-color, #0bb4aa);
    background: rgba(11, 180, 170, .05);
}

/* ---------- Prix (si affiché) ---------- */

.cp-carousel-item .price {
    display: block;
    margin: 0 0 10px;
    font-family: "Onest", sans-serif;
    color: var(--inspiro-primary-color, #0bb4aa);
}

/* ---------- Espacement entre les cartes (aligné sur la grille catégorie) ---------- */

.cp-carousel-item {
    padding: 0 15px;
}