/* =====================================================================
   CE Widget — Widget « Carrousel produits premium »
   Chargé uniquement si le widget est rendu (getStyleDepends).
   Sans JS : la 1re page de produits s'affiche (effet Classique / Cartes).
   Animations en transform / opacity uniquement.
   ===================================================================== */

.cew-pc {
  --pc-pv: 4;
  --pc-gap: 24px;
  --pc-peek: 0px;
  --pc-pad-y: 0px;
  --pc-speed: 650ms;
  --pc-ease: cubic-bezier(.22, 1, .36, 1);
  --pc-delay: 4500ms;
  --pc-card-w: 78%;
  --pc-card-bg: #fff;
  --pc-card-shadow: 0 12px 32px rgba(17, 17, 17, .14);
  --pc-radius: 0px;
  /* Flèches */
  --pc-a-size: 46px;
  --pc-a-icon: 18px;
  --pc-a-bg: #fff;
  --pc-a-color: #111;
  --pc-a-bg-h: #111;
  --pc-a-color-h: #fff;
  --pc-a-bw: 1px;
  --pc-a-bc: rgba(17, 17, 17, .12);
  --pc-a-radius: 999px;
  --pc-a-shadow: 0 6px 20px rgba(17, 17, 17, .12);
  --pc-a-x: 12px;
  --pc-a-off: .35;
  --pc-bar-gap: 12px;
  /* Pagination */
  --pc-d-size: 8px;
  --pc-d-active-w: 28px;
  --pc-d-bar-w: 32px;
  --pc-d-gap: 8px;
  --pc-d-bg: rgba(17, 17, 17, .2);
  --pc-d-bg-a: #111;
  --pc-d-radius: 999px;
  --pc-d-space: 20px;
  --pc-progress-w: 100%;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pc-d-space);
  min-width: 0;
}

/* ─────────────────────────────── Scène / piste ─────────────────────── */

.cew-pc__stage {
  position: relative;
  min-width: 0;
}

.cew-pc__viewport {
  position: relative;
  /* Coupe à gauche / à droite seulement : ombres, 3D et pile de cartes
     peuvent déborder en hauteur (repli « hidden » pour les vieux Safari). */
  overflow: hidden;
  overflow: clip visible;
  padding: var(--pc-pad-y) var(--pc-peek);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.cew-pc__track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--pc-gap);
  transform: translate3d(0, 0, 0);
  transition: transform var(--pc-speed) var(--pc-ease);
  will-change: transform;
}

.cew-pc__slide {
  position: relative;
  flex: 0 0 calc((100% - (var(--pc-pv) - 1) * var(--pc-gap)) / var(--pc-pv));
  min-width: 0;
  border-radius: var(--pc-radius);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

/* La miniature du thème occupe toute la diapositive. */
.cew-pc__slide > * {
  width: 100%;
  max-width: none;
  margin: 0;
  float: none;
}

.cew-pc-eq-yes .cew-pc__track { align-items: stretch; }
.cew-pc-eq-yes .cew-pc__slide { display: flex; }
.cew-pc-eq-yes .cew-pc__slide > * { flex: 1 1 auto; }

.cew-pc__slide img { -webkit-user-drag: none; }

.cew-pc.is-dragging .cew-pc__viewport { cursor: grabbing; }
.cew-pc.is-dragging .cew-pc__slide a { pointer-events: none; }

/* Pas de transition : glisser, saut de boucle, changement d'effet. */
.cew-pc.is-dragging .cew-pc__track,
.cew-pc.is-dragging .cew-pc__slide,
.cew-pc.is-jump .cew-pc__track,
.cew-pc.is-jump .cew-pc__slide {
  transition: none !important;
}

/* Rebond en bout de course (sans boucle). */
.cew-pc__viewport.is-bump-next { animation: cew-pc-bump-next .45s var(--pc-ease); }
.cew-pc__viewport.is-bump-prev { animation: cew-pc-bump-prev .45s var(--pc-ease); }
@keyframes cew-pc-bump-next { 40% { transform: translateX(-14px); } }
@keyframes cew-pc-bump-prev { 40% { transform: translateX(14px); } }

/* ───────────────────────── Focus central / Coverflow ───────────────── */

.cew-pc[data-fx="center"] .cew-pc__slide,
.cew-pc[data-fx="coverflow"] .cew-pc__slide {
  transition: transform var(--pc-speed) var(--pc-ease), opacity var(--pc-speed) var(--pc-ease);
  will-change: transform, opacity;
}

.cew-pc[data-fx="coverflow"] .cew-pc__viewport { perspective: 1200px; }
.cew-pc[data-fx="coverflow"] .cew-pc__track { transform-style: preserve-3d; }

/* Avant le JS, ces effets ne sont pas encore centrés : on évite le saut
   (révélation forcée après 1,5 s si le script ne se charge pas). */
.cew-pc[data-fx="center"]:not(.is-ready) .cew-pc__viewport,
.cew-pc[data-fx="coverflow"]:not(.is-ready) .cew-pc__viewport {
  opacity: 0;
  animation: cew-pc-reveal 0s 1.5s forwards;
}
@keyframes cew-pc-reveal { to { opacity: 1; } }

/* ─────────────────────────────── Cartes empilées ───────────────────── */

.cew-pc[data-fx="cards"] .cew-pc__track {
  display: grid;
  grid-template-columns: var(--pc-card-w);
  justify-content: center;
  gap: 0;
  transform: none !important;
  transition: none;
}

.cew-pc[data-fx="cards"] .cew-pc__slide {
  grid-area: 1 / 1;
  width: 100%;
  background: var(--pc-card-bg);
  box-shadow: var(--pc-card-shadow);
  overflow: hidden;
  transition: transform var(--pc-speed) var(--pc-ease), opacity var(--pc-speed) var(--pc-ease);
  will-change: transform, opacity;
}

/* Pile approximative avant le JS. */
.cew-pc[data-fx="cards"]:not(.is-ready) .cew-pc__slide { opacity: 0; }
.cew-pc[data-fx="cards"]:not(.is-ready) .cew-pc__slide:nth-child(1) { opacity: 1; z-index: 3; }
.cew-pc[data-fx="cards"]:not(.is-ready) .cew-pc__slide:nth-child(2) { opacity: 1; z-index: 2; transform: translateX(18px) scale(.94) rotate(3deg); }
.cew-pc[data-fx="cards"]:not(.is-ready) .cew-pc__slide:nth-child(3) { opacity: 1; z-index: 1; transform: translateX(36px) scale(.88) rotate(6deg); }

/* ─────────────────────────────────── Flèches ───────────────────────── */

.cew-pc__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--pc-a-size);
  height: var(--pc-a-size);
  padding: 0;
  margin: 0;
  border: var(--pc-a-bw) solid var(--pc-a-bc);
  border-radius: var(--pc-a-radius);
  background: var(--pc-a-bg);
  color: var(--pc-a-color);
  box-shadow: var(--pc-a-shadow);
  font-size: var(--pc-a-icon);
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease, scale .2s ease, box-shadow .25s ease;
}

.cew-pc__arrow svg {
  width: var(--pc-a-icon);
  height: var(--pc-a-icon);
  pointer-events: none;
}

.cew-pc__arrow:hover,
.cew-pc__arrow:focus-visible {
  background: var(--pc-a-bg-h);
  color: var(--pc-a-color-h);
}

.cew-pc__arrow:focus-visible {
  outline: 2px solid var(--pc-a-bg-h);
  outline-offset: 3px;
}

.cew-pc__arrow:active { scale: .92; }

.cew-pc__arrow.is-disabled {
  opacity: var(--pc-a-off);
  cursor: default;
  pointer-events: none;
}

.cew-pc.is-static .cew-pc__arrow,
.cew-pc.is-static .cew-pc__dots { display: none !important; }

/* De chaque côté */
.cew-pc__stage > .cew-pc__arrow {
  position: absolute;
  top: 50%;
  z-index: 600;
  translate: 0 -50%;
}
.cew-pc__stage > .cew-pc__arrow--prev { left: var(--pc-a-x); }
.cew-pc__stage > .cew-pc__arrow--next { right: var(--pc-a-x); }

/* Barres au-dessus / en dessous */
.cew-pc__bar {
  display: flex;
  align-items: center;
  gap: var(--pc-bar-gap);
  min-width: 0;
}
.cew-pc__bar > .cew-pc__pager { flex: 1 1 auto; }
.cew-pc__bar--combo > .cew-pc__pager { flex: 0 1 auto; }
.cew-pc__nav {
  display: flex;
  gap: var(--pc-bar-gap);
  margin-inline-start: auto;
}
.cew-pc__bar--combo .cew-pc__arrow,
.cew-pc__nav .cew-pc__arrow { box-shadow: var(--pc-a-shadow); }

/* ─────────────────────────────────── Pagination ────────────────────── */

.cew-pc__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.cew-pc__pager--overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--pc-d-space);
  z-index: 600;
  pointer-events: none;
}
.cew-pc__pager--overlay > * { pointer-events: auto; }

.cew-pc__dots {
  display: flex;
  align-items: center;
  gap: var(--pc-d-gap);
  min-width: 0;
}
.cew-pc__dots[hidden] { display: none !important; }

.cew-pc__dot {
  position: relative;
  flex: 0 0 auto;
  width: var(--pc-d-size);
  height: var(--pc-d-size);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--pc-d-radius);
  background: var(--pc-d-bg);
  overflow: hidden;
  cursor: pointer;
  transition: width .4s var(--pc-ease), background-color .3s ease, transform .3s ease, opacity .3s ease, margin .3s ease;
}
.cew-pc__dot::before {
  /* zone de clic confortable (≥ 24 px) sans grossir le point */
  content: "";
  position: absolute;
  inset: -8px;
}
.cew-pc__dot.is-active { background: var(--pc-d-bg-a); }
.cew-pc__dot:focus-visible { outline: 2px solid var(--pc-d-bg-a); outline-offset: 3px; }

/* Pastilles */
.cew-pc__dots[data-type="pill"] .cew-pc__dot.is-active { width: var(--pc-d-active-w); }

/* Barres / segments */
.cew-pc__dots[data-type="bar"] .cew-pc__dot,
.cew-pc__dots[data-type="line"] .cew-pc__dot {
  width: var(--pc-d-bar-w);
  height: max(2px, calc(var(--pc-d-size) / 2));
}

/* Segments « stories » : remplis au rythme de l'autoplay. */
.cew-pc__dots[data-type="line"] { flex: 1 1 auto; }
.cew-pc__dots[data-type="line"] .cew-pc__dot { flex: 1 1 0; min-width: 8px; max-width: var(--pc-d-bar-w); background: var(--pc-d-bg); }
.cew-pc__dots[data-type="line"] .cew-pc__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pc-d-bg-a);
  transform: scaleX(0);
  transform-origin: left center;
}
.cew-pc__dots[data-type="line"] .cew-pc__dot.is-done::after,
.cew-pc__dots[data-type="line"] .cew-pc__dot.is-active::after { transform: scaleX(1); }
.cew-pc__dots.is-autoplay[data-type="line"] .cew-pc__dot.is-active::after { transform: scaleX(0); }
.cew-pc__dots[data-type="line"] .cew-pc__dot.is-run::after { animation: cew-pc-fill var(--pc-delay) linear forwards; }
.cew-pc__dots[data-type="line"].is-paused .cew-pc__dot.is-run::after { animation-play-state: paused; }
@keyframes cew-pc-fill { to { transform: scaleX(1); } }

/* Numéros */
.cew-pc__dots[data-type="number"] .cew-pc__dot {
  width: auto;
  height: auto;
  min-width: 2em;
  padding: .3em .5em;
  background: transparent;
  color: var(--pc-d-bg);
  font-size: 14px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.cew-pc__dots[data-type="number"] .cew-pc__dot.is-active {
  background: transparent;
  color: var(--pc-d-bg-a);
  font-weight: 700;
}

/* Points dynamiques (fenêtre glissante) */
.cew-pc__dot.is-off {
  width: 0 !important;
  margin-inline-end: calc(var(--pc-d-gap) * -1);
  opacity: 0;
  pointer-events: none;
}
.cew-pc__dot.is-edge { transform: scale(.6); }

/* Fraction */
.cew-pc__frac {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.cew-pc__frac-cur { color: var(--pc-d-bg-a); font-weight: 700; }
.cew-pc__frac-sep,
.cew-pc__frac-total { opacity: .55; }

/* Barre de progression */
.cew-pc__dots[data-type="progress"] {
  flex: 0 1 var(--pc-progress-w);
  width: var(--pc-progress-w);
}
.cew-pc__progress {
  position: relative;
  display: block;
  width: 100%;
  height: max(2px, calc(var(--pc-d-size) / 2));
  border-radius: var(--pc-d-radius);
  background: var(--pc-d-bg);
  overflow: hidden;
  cursor: pointer;
}
.cew-pc__progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pc-d-bg-a);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--pc-speed) var(--pc-ease);
}

/* ───────────────────────── Boutons externes (déportés) ─────────────── */

.cew-pc-ext-disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}
.cew-pc-ext-hidden { display: none !important; }

/* ─────────────────────────────── Accessibilité ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cew-pc__track,
  .cew-pc__slide,
  .cew-pc__progress-fill,
  .cew-pc__dot {
    transition-duration: 1ms !important;
  }
  .cew-pc__viewport.is-bump-next,
  .cew-pc__viewport.is-bump-prev { animation: none; }
}