/*
 * woocommerce.css
 * Effet hover "pro" : crossfade chevauché + léger blur/brightness/contrast
 * + styles archive (titre/catégorie/price/badge)
 */

/* ===== Variables fines d'animation & rendu ===== */
:root{
  --swap-out: 0.46s;   /* fade-out image 1 */
  --swap-in:  0.54s;   /* fade-in  image 2 */
  --overlap:  0.22s;   /* chevauchement (2 démarre avant la fin de 1) */
  --scale:    1.006;   /* zoom quasi neutre pour lisser la perception */
  --blur:     0.6px;   /* flou très léger (gardez < 1px pour rester chic) */
  --dim:      0.96;    /* assombrissement subtil de l'image qui disparaît */
  --lift:     1.02;    /* micro-boost contraste/saturation */
}

/* ===== Carte produit (archive) ===== */
ul.products li.product{
  text-align:center;
  position:relative; /* pour .onsale */
}

/* Lien autour de la vignette */
ul.products li.product a.woocommerce-LoopProduct-link{ display:block; }

/* ===== Vignette : double image pour le swap ===== */
ul.products li.product .product-thumb.swap-on-hover{
  position:relative;
  overflow:hidden;
  line-height:0;
  contain: layout paint; /* perf : isole le paint */
}

/* Base images */
ul.products li.product .product-thumb img{
  display:block;
  width:100%;
  height:auto;
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}

/* Image principale (visible par défaut) */
ul.products li.product .product-thumb .thumb-primary{
  position:relative;
  z-index:1;
  opacity:1;
  transform:translateZ(0);
  filter:none;
  transition:
    opacity  var(--swap-out) cubic-bezier(.2,.7,.2,1),
    transform var(--swap-out) cubic-bezier(.2,.7,.2,1),
    filter   var(--swap-out) cubic-bezier(.2,.7,.2,1);
  transition-delay:0s;
}

/* Image secondaire (au-dessus, masquée) */
ul.products li.product .product-thumb .thumb-secondary{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  transform:translateZ(0);
  /* elle débute très légèrement "soft" pour éviter tout pop */
  filter: blur(var(--blur)) brightness(calc(1 / var(--dim))) contrast(var(--lift));
  transition:
    opacity  var(--swap-in)  cubic-bezier(.2,.7,.2,1),
    transform var(--swap-in) cubic-bezier(.2,.7,.2,1),
    filter   var(--swap-in)  cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(max(0s, var(--swap-out) - var(--overlap)));
}

/* Survol : crossfade chevauché + micro zoom + grading subtil */
ul.products li.product:hover .product-thumb .thumb-primary{
  opacity:0;
  transform:scale(var(--scale));
  filter: blur(var(--blur)) brightness(var(--dim)) contrast(var(--lift));
  transition-delay:0s;
}
ul.products li.product:hover .product-thumb .thumb-secondary{
  opacity:1;
  transform:scale(var(--scale));
  /* revient vers un rendu net et "clair" en fin d'anim */
  filter:none;
  transition-delay: calc(max(0s, var(--swap-out) - var(--overlap)));
}

/* Accessibilité : réduit/désactive les effets si demandé */
@media (prefers-reduced-motion: reduce){
  ul.products li.product .product-thumb .thumb-primary,
  ul.products li.product .product-thumb .thumb-secondary{
    transition:none;
    filter:none;
    transform:none;
  }
}

/* ===== Catégorie principale ===== */
ul.products li.product .product-primary-category{
  margin:10px 0 6px 0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#000;
  opacity:.9;
}
ul.products li.product .product-primary-category__link,
ul.products li.product .product-primary-category a{
  color:#000 !important;
  text-decoration:none;
}
ul.products li.product .product-primary-category__link:hover,
ul.products li.product .product-primary-category a:hover{
  text-decoration:underline;
}

/* ===== Titre ===== */
ul.products li.product .woocommerce-loop-product__title{
  font-size:16px;
  font-weight:500;
  color:#000;
  margin:6px 0 8px 0;
  text-align:center;
}

/* ===== Prix ===== */
ul.products li.product .price,
ul.products li.product .price .woocommerce-Price-amount{
  display:block;
  text-align:center;
  color:#000;
  font-weight:700;
}

/* ===== Badge promo typographique rouge ===== */
ul.products li.product .onsale{
  position:absolute;
  top:12px; left:12px;
  background:none;
  color:#d91c1c;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:0;
  border:none;
  box-shadow:none;
  opacity:.9;
}
ul.products li.product:hover .onsale{
  color:#b30000;
  opacity:1;
}
/* Aligne visuellement le titre "Boutique" et le fil d’Ariane */
.woocommerce-shop-header,
.woocommerce-breadcrumb {
  max-width: 1200px; /* même largeur que le container principal */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Supprime toute marge ou indentation entre les deux */
.woocommerce-shop-title {
  margin-left: 0;
  padding-left: 0;
}

.woocommerce-breadcrumb {
  margin-left: 0;
  padding-left: 0;
  margin-top: 0.25rem; /* petit espace propre sous le titre */
}
.woocommerce-shop-header,
.woocommerce-breadcrumb {
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--bs-gutter-x, 1rem); /* si Bootstrap est utilisé */
  padding-right: var(--bs-gutter-x, 1rem);
}