/* =========================================================
   SLIDER DE PRODUITS RÉUTILISABLE ([pdvi_slider_produits])
   -----------------------------------------------------------
   Ce fichier est chargé automatiquement par le plugin sur TOUTES les
   pages (comme le JS) — il n'y a plus rien à coller dans Divi > CSS
   personnalisé pour cette fonctionnalité. C'est voulu : le style et le
   comportement du slider dépendaient auparavant d'un bloc collé à la
   main dans un très gros fichier CSS partagé avec le reste du site,
   ce qui a causé plusieurs confusions (mauvaise version collée,
   conflits avec d'anciennes règles). En le faisant vivre directement
   dans le plugin, avec son propre fichier, il ne peut plus y avoir de
   décalage entre "ce qui a été testé" et "ce qui est réellement en
   ligne" — mettre à jour le plugin suffit.

   Même style de carte que la boutique, mais en slider : 4 produits
   visibles en desktop, 2 en tablette, 1 en mobile, défilement
   automatique + flèches + glisser-déposer (voir pyramiddivi-custom.js).
   Un seul bloc de style, réutilisé partout où le shortcode est posé
   (accueil, fiche produit, boutique, panier…) quelle que soit la
   section Divi (classique ou "flexible") dans laquelle il est posé.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* Comme pour les cartes plus bas, ces règles de STRUCTURE (le cadre du
   slider, la bande qui défile, chaque case) sont maintenant protégées
   par !important + largeurs explicites : sans ça, selon la page où le
   shortcode est posé (ex : à l'intérieur d'un module Divi "Texte" en
   mise en page flexible — "et_flex_module"), le "display:flex" de la
   bande peut se faire écraser par le CSS de Divi. Sans lui, chaque
   fiche redevient un simple bloc plein largeur empilé sous le
   précédent au lieu de défiler côte à côte — d'où l'effet "énorme, ça
   décale tout le contenu" en dessous, surtout visible en mobile avec
   12 fiches empilées à la suite. */
/* Divi pose parfois ce module dans une colonne/ligne "flexible" (Divi 5,
   système "et_flex_module") : un enfant flex refuse par défaut de
   descendre en dessous de la largeur naturelle de SON contenu
   ("min-width:auto"). Sans ce verrou, LA COLONNE DIVI qui contient le
   slider — et donc tout ce qui est à côté d'elle, comme un titre
   au-dessus — peut s'élargir bien au-delà de l'écran pour "faire de la
   place" au slider, même avec le slider lui-même correctement limité à
   100%.
   Premier essai (versions précédentes) : cibler explicitement les
   classes Divi habituelles (.et_pb_column, .et_pb_row…) avec :has().
   Insuffisant en pratique — Divi imbrique parfois plusieurs niveaux
   flexibles (ligne > ligne interne > colonne > colonne interne…) avec
   des classes qu'on ne peut pas deviner à l'avance. Version suivante,
   universelle : ":has(.pdvi-product-slider)" SANS restreindre à une
   classe précise cible TOUS les ancêtres du slider, à n'importe quelle
   profondeur, quelle que soit la structure Divi utilisée — sans
   dépendre du nom exact des classes de la ligne/colonne/module.

   Deuxième cause, différente, trouvée ensuite : certains modules Divi
   (ex : ".et_pb_text_inner", le conteneur interne d'un module Texte)
   se voient parfois attribuer par Divi lui-même une largeur FIXE en
   pixels calculée pour le format ordinateur (ex : "width:810px" en
   dur), qui n'est pas toujours correctement réécrite au format mobile.
   Ce n'est PAS le même bug que le "min-width:auto" ci-dessus (qui ne
   concerne que la largeur minimale AUTOMATIQUE d'un enfant flex) : ici
   c'est une largeur EXPLICITE qui dépasse l'écran. "min-width:0" seul
   ne corrige pas ce cas. D'où le "max-width:100% !important" ajouté
   ci-dessous, sur les mêmes ancêtres — un simple plafond qui empêche
   tout ancêtre du slider de dépasser la largeur de SON PROPRE parent,
   quelle que soit la largeur fixe qui lui a été posée par ailleurs.
   Volontairement on ne force PAS "width:auto" (qui casserait des
   largeurs de ligne Divi volontairement plus étroites, ex : une ligne
   centrée à 80% / max-width:1080px sur d'autres sections) : on plafonne
   seulement, sans jamais élargir ni forcer une largeur différente de
   celle voulue par Divi quand elle est déjà correcte. */
*:has(.pdvi-product-slider) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.pdvi-product-slider {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    margin: 24px 0 !important;
    /* Espace réservé aux flèches, en dehors des fiches (au moins 15px
       d'écart réel entre le dessin de la flèche et la fiche la plus proche) */
    padding: 0 44px !important;
    box-sizing: border-box !important;
}

.pdvi-product-slider__track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* border-box : sans ça, le padding gauche/droite s'ajoutait EN PLUS
       des 100% de largeur au lieu d'être inclus dedans — la bande
       débordait alors de quelques pixels à droite du cadre (visible
       surtout en mobile, sans place à perdre). */
    box-sizing: border-box !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    padding: 4px 2px 8px !important;
    margin: 0 !important;
    list-style: none !important;
}
.pdvi-product-slider__track::-webkit-scrollbar {
    display: none;
}
.pdvi-product-slider__track.pdvi-dragging {
    cursor: grabbing;
    user-select: none;
}

.pdvi-product-slider__slide {
    flex: 0 0 calc((100% - 3 * 24px) / 4) !important; /* 4 colonnes desktop */
    max-width: calc((100% - 3 * 24px) / 4) !important;
    /* Même précaution "min-width:auto" que sur les ancêtres plus haut,
       mais posée ici sur la fiche elle-même : sans ce verrou, une fiche
       dont le CONTENU refuse de rétrécir (ex : un titre de produit très
       long ou un seul "mot" sans espace, un prix en promo plus large que
       d'habitude) peut s'imposer plus large que le max-width ci-dessus —
       ce n'est pas systématique, donc ça n'apparaît qu'avec CERTAINS
       produits (ex : la liste change selon qu'on limite ou non le nombre
       de produits affichés), d'où un bug qui semblait aléatoire. */
    min-width: 0 !important;
    scroll-snap-align: start;
    box-sizing: border-box !important;
}

/* NOTE SPÉCIFICITÉ : le shortcode peut être posé dans une page qui a
   elle-même d'anciennes règles sur ces mêmes classes (.onsale, li.product,
   .price…) issues d'autres sections de ce fichier (ex : une ancienne
   section Divi encore présente autour). Pour que le style du slider
   gagne TOUJOURS, quel que soit l'endroit où le shortcode est posé, le
   sélecteur du wrapper est doublé (.pdvi-product-slider.pdvi-product-slider)
   — ça ajoute un cran de spécificité sans rien changer d'autre. */
.pdvi-product-slider.pdvi-product-slider li.product {
    display: flex !important; /* colonne : permet d'aligner prix + bouton en bas (voir .price) */
    flex-direction: column !important;
    float: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 18px !important; /* un peu plus compact qu'en boutique : 4 colonnes, pas 3 */
    border: 2px solid #F5E9E1 !important;
    border-radius: 20px !important;
    background: #FDFBF9 !important;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
    list-style: none;
}
.pdvi-product-slider.pdvi-product-slider li.product:hover {
    border-color: #F0AB74 !important;
    box-shadow: 0 6px 18px rgba(240, 171, 116, 0.16);
}

/* Le carré prix + bouton "Voir le produit" doit rester collé en bas
   de la fiche même quand le titre fait 1 ou 2 lignes. Le "margin-top:
   auto" posé sur .price (plus bas) ne fonctionne QUE si son parent
   direct — le lien <a> qui enveloppe tout le contenu de la fiche —
   est lui-même en colonne flex sur toute la hauteur ; sans cette
   règle .price se comporte comme un bloc normal et l'astuce ne fait
   rien (c'est ce qui causait le désalignement du bouton). */
.pdvi-product-slider.pdvi-product-slider a.woocommerce-loop-product__link {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    text-decoration: none !important;
}

.pdvi-product-slider.pdvi-product-slider .et_shop_image {
    position: relative !important;
    display: block !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    background: #F4F2EE !important;
    overflow: hidden !important;
    margin: 0 0 16px !important;
}
.pdvi-product-slider.pdvi-product-slider .et_shop_image img {
    display: block !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* Badges (mêmes réglages que le reste du site — top calculé via
   --pdvi-badge-index pour l'empilement, voir section 5) */
.pdvi-product-slider.pdvi-product-slider .onsale,
.pdvi-product-slider.pdvi-product-slider .pdvi-badge-tag {
    display: inline-block !important;
    position: absolute !important;
    top: calc(39px + var(--pdvi-badge-index, 0) * 35px) !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 5px 12px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 8px !important;
    border: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: none !important;
    text-align: center !important;
    color: #fff !important;
    z-index: 5 !important;
}
.pdvi-product-slider.pdvi-product-slider .onsale {
    background: #52ABBC !important;
}

.pdvi-product-slider.pdvi-product-slider .pdvi-wishlist-btn {
    display: flex !important;
    position: absolute !important;
    top: 36px !important;
    right: 36px !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    align-items: center;
    justify-content: center;
    z-index: 6 !important;
}
.pdvi-product-slider.pdvi-product-slider .pdvi-wishlist-btn svg path {
    stroke: #1A1A1A !important;
    fill: none !important;
    transition: fill .2s ease, stroke .2s ease;
}
.pdvi-product-slider.pdvi-product-slider .pdvi-wishlist-btn.favorite-this-added svg path {
    fill: #E8935A !important;
    stroke: #E8935A !important;
}

.pdvi-product-slider.pdvi-product-slider .pdvi-product-cat {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #2C6FBB !important;
    text-transform: none !important;
    margin: 0 0 4px !important;
}

.pdvi-product-slider.pdvi-product-slider .woocommerce-loop-product__title {
    margin: 0 0 2px !important;
    padding: 0 !important;
    padding-top: .2em !important;
    font-size: 13px !important; /* titre réduit */
    font-weight: 700 !important;
    color: #1A1A1A !important;
    line-height: 1.25 !important; /* espace entre les 2 lignes du titre bien réduit */
}

.pdvi-product-slider.pdvi-product-slider .price {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 6px !important;
    line-height: 1.2 !important;
    /* margin-top: auto pousse le prix (et le bouton juste après) tout en
       bas de la fiche, quel que soit le nombre de lignes du titre
       au-dessus — prix et bouton restent ainsi alignés d'une fiche
       à l'autre même quand un titre est plus long qu'un autre. */
    margin: auto 0 10px !important;
    padding: 0 !important;
}
.pdvi-product-slider.pdvi-product-slider .price,
.pdvi-product-slider.pdvi-product-slider .price .woocommerce-Price-amount,
.pdvi-product-slider.pdvi-product-slider .price .amount,
.pdvi-product-slider.pdvi-product-slider .price bdi,
.pdvi-product-slider.pdvi-product-slider .price ins {
    color: #E8935A !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.pdvi-product-slider.pdvi-product-slider .price del,
.pdvi-product-slider.pdvi-product-slider .price del .woocommerce-Price-amount,
.pdvi-product-slider.pdvi-product-slider .price del .amount,
.pdvi-product-slider.pdvi-product-slider .price del bdi {
    color: #9a9a9a !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
.pdvi-product-slider.pdvi-product-slider .price del {
    text-decoration: line-through !important;
}

.pdvi-product-slider.pdvi-product-slider .pdvi-view-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 44px !important;
    box-sizing: border-box !important;
    border-radius: 24px !important;
    background: #E8935A !important;
    color: #1C1818 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-align: center !important;
}

/* Flèches précédent/suivant — dessinées en SVG (voir PHP) pour un tracé
   fin et précis, positionnées À L'INTÉRIEUR du slider (au moins 15px
   d'espace par rapport au bord de la grille : pas d'offset négatif qui
   risquerait d'être coupé par un conteneur Divi avec overflow caché). */
.pdvi-product-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 8;
}
.pdvi-product-slider__arrow svg {
    display: block;
    width: 10px;
    height: 18px;
}
.pdvi-product-slider__arrow--prev { left: 4px; }
.pdvi-product-slider__arrow--next { right: 4px; }
.pdvi-product-slider--static .pdvi-product-slider__arrow {
    display: none;
}

@media (max-width: 980px) {
    .pdvi-product-slider__slide {
        flex-basis: calc((100% - 24px) / 2) !important; /* 2 colonnes tablette */
        max-width: calc((100% - 24px) / 2) !important;
    }
}

@media (max-width: 600px) {
    .pdvi-product-slider {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important; /* pas besoin de la réserve pour les flèches : masquées ici */
    }
    .pdvi-product-slider__track {
        gap: 12px !important;
    }
    .pdvi-product-slider__slide {
        flex-basis: 100% !important; /* 1 colonne mobile */
        max-width: 100% !important;
    }
    .pdvi-product-slider.pdvi-product-slider li.product {
        padding: 16px !important;
        border-radius: 18px !important;
    }
    .pdvi-product-slider.pdvi-product-slider .onsale,
    .pdvi-product-slider.pdvi-product-slider .pdvi-badge-tag {
        top: calc(32px + var(--pdvi-badge-index, 0) * 26px) !important;
        left: 8px !important;
        font-size: 13px !important;
        padding: 4px 10px !important;
    }
    .pdvi-product-slider.pdvi-product-slider .pdvi-wishlist-btn {
        top: 28px !important;
        right: 28px !important;
        width: 28px !important;
        height: 28px !important;
    }
    .pdvi-product-slider.pdvi-product-slider .pdvi-product-cat,
    .pdvi-product-slider.pdvi-product-slider .woocommerce-loop-product__title {
        font-size: 13px !important;
    }
    .pdvi-product-slider.pdvi-product-slider .price,
    .pdvi-product-slider.pdvi-product-slider .price .woocommerce-Price-amount,
    .pdvi-product-slider.pdvi-product-slider .price .amount,
    .pdvi-product-slider.pdvi-product-slider .price bdi,
    .pdvi-product-slider.pdvi-product-slider .price ins {
        font-size: 14px !important;
    }
    .pdvi-product-slider.pdvi-product-slider .pdvi-view-btn {
        height: 40px !important;
        font-size: 14px !important;
    }
    .pdvi-product-slider__arrow {
        display: none; /* le glissement tactile suffit sur mobile */
    }
}