/* ==========================================================================
   PCR — CAROUSEL UNIVERSEL (PRO) — FIX MOBILE 1 + 1/3 + DOTS CARRÉS
   Fichier : assets/css/carousel.css
   Dépend : variables.css + main.css (tokens)
   Objectifs :
   - Desktop/tablette: perView via data-perview
   - Mobile: 1 slide pleine + 1/3 visible (peek garanti)
   - Snap doux + scroll natif fluide
   - Dots carrés (radius sm) avec tokens
   ========================================================================== */

.pcr-carousel{
  --pcr-car-gap: 16px;
  --pcr-car-perview: 3;

  /* largeur réelle d’un item (desktop/tablette) */
  --pcr-car-item-w: calc(
    (100% - (var(--pcr-car-gap) * (var(--pcr-car-perview) - 1)))
    / var(--pcr-car-perview)
  );

  width: 100%;
}

/* -----------------------------
   data-gap
-------------------------------- */
.pcr-carousel[data-gap="0"]  { --pcr-car-gap: 0px; }
.pcr-carousel[data-gap="8"]  { --pcr-car-gap: 8px; }
.pcr-carousel[data-gap="10"] { --pcr-car-gap: 10px; }
.pcr-carousel[data-gap="12"] { --pcr-car-gap: 12px; }
.pcr-carousel[data-gap="14"] { --pcr-car-gap: 14px; }
.pcr-carousel[data-gap="16"] { --pcr-car-gap: 16px; }
.pcr-carousel[data-gap="18"] { --pcr-car-gap: 18px; }
.pcr-carousel[data-gap="20"] { --pcr-car-gap: 20px; }
.pcr-carousel[data-gap="24"] { --pcr-car-gap: 24px; }

/* -----------------------------
   data-perview (desktop)
-------------------------------- */
.pcr-carousel[data-perview="1"] { --pcr-car-perview: 1; }
.pcr-carousel[data-perview="2"] { --pcr-car-perview: 2; }
.pcr-carousel[data-perview="3"] { --pcr-car-perview: 3; }
.pcr-carousel[data-perview="4"] { --pcr-car-perview: 4; }
.pcr-carousel[data-perview="5"] { --pcr-car-perview: 5; }
.pcr-carousel[data-perview="6"] { --pcr-car-perview: 6; }

/* =========================================================
   HEADER
   ========================================================= */
.pcr-carousel__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: var(--pcr-space-3, 12px);
  margin-bottom: var(--pcr-space-4, 16px);
}

.pcr-carousel__title{
  margin: 0;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.pcr-carousel__nav{
  display:flex;
  gap: 10px;
  align-items:center;
}

/* hide arrows if data-arrows="0" */
.pcr-carousel[data-arrows="0"] .pcr-carousel__nav{
  display:none !important;
}

.pcr-carousel__btn{
  width: 40px;
  height: 40px;
  border-radius: var(--pcr-radius-pill, 999px);
  border: 1px solid var(--pcr-color-border, rgba(255,255,255,.14));
  background: color-mix(in srgb, var(--pcr-color-surface, rgba(255,255,255,.06)) 90%, transparent);
  color: var(--pcr-color-text, #e8edf6);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  transition: transform var(--pcr-dur-fast, .18s) var(--pcr-ease, ease),
              background-color var(--pcr-dur-fast, .18s) var(--pcr-ease, ease),
              border-color var(--pcr-dur-fast, .18s) var(--pcr-ease, ease),
              opacity var(--pcr-dur-fast, .18s) var(--pcr-ease, ease);
}

.pcr-carousel__btn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--pcr-color-border, rgba(255,255,255,.14)) 60%, #fff 40%);
}

.pcr-carousel__btn:active{
  transform: translateY(0);
}

.pcr-carousel__btn:focus-visible{
  outline: none;
  box-shadow: var(--pcr-focus-ring, 0 0 0 3px rgba(64,196,255,.28));
}

.pcr-carousel__btn[disabled]{
  opacity:.45;
  cursor:default;
  transform:none;
}

.pcr-carousel__btnIcon{
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

/* =========================================================
   VIEWPORT
   ========================================================= */
.pcr-carousel__viewport{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;

  /* snap doux */
  scroll-snap-type: x proximity;

  overscroll-behavior-x: contain;

  scrollbar-width:none;
  outline:none;
}
.pcr-carousel__viewport::-webkit-scrollbar{ display:none; }

/* =========================================================
   TRACK
   ========================================================= */
.pcr-carousel__track{
  display:flex;
  gap: var(--pcr-car-gap);
  padding: 0;
  margin: 0;
  list-style:none;

  /* le JS gère le scroll, on laisse le CSS neutre */
  padding-right: 0;
}

/* Peek visuel global si class is-peek */
.pcr-carousel.is-peek .pcr-carousel__track{
  padding-right: clamp(18px, 8vw, 72px);
}

/* =========================================================
   ITEM
   ========================================================= */
.pcr-carousel__item{
  flex: 0 0 var(--pcr-car-item-w);
  scroll-snap-align:start;
  min-width:0;
}

.pcr-carousel__item img{
  display:block;
  width:100%;
  height:auto;
  border-radius: var(--pcr-radius-md, 12px);
}

/* =========================================================
   DRAG STATE (desktop)
   - Ne pas couper les clics (lightbox)
   ========================================================= */
@media (hover:hover){
  .pcr-carousel.is-dragging{
    cursor: grabbing;
  }
  .pcr-carousel.is-dragging .pcr-carousel__viewport,
  .pcr-carousel.is-dragging .pcr-carousel__track{
    user-select: none;
    -webkit-user-select: none;
    cursor: grabbing;
  }
  /* Important: on NE met PAS pointer-events:none */
}


/* =========================================================
   DOTS (CARRÉS radius-sm)
   ========================================================= */
.pcr-carousel__dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  margin-top: var(--pcr-space-4, 16px);
}

/* hide dots if data-dots="0" */
.pcr-carousel[data-dots="0"] .pcr-carousel__dots{
  display:none !important;
}

.pcr-carousel__dot{
  appearance:none;
  border: 1px solid color-mix(in srgb, var(--pcr-color-border, rgba(255,255,255,.14)) 70%, transparent);
  background: color-mix(in srgb, var(--pcr-color-text, #e8edf6) 14%, transparent);

  /* ✅ carrés */
  width: 10px;
  height: 10px;
  border-radius: calc(var(--pcr-radius-sm, 10px) - 6px);

  cursor:pointer;

  transition: transform var(--pcr-dur-fast, .18s) var(--pcr-ease, ease),
              background-color var(--pcr-dur-fast, .18s) var(--pcr-ease, ease),
              border-color var(--pcr-dur-fast, .18s) var(--pcr-ease, ease),
              opacity var(--pcr-dur-fast, .18s) var(--pcr-ease, ease);
}

.pcr-carousel__dot:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--pcr-color-primary-soft, rgba(64,196,255,.14)) 80%, transparent);
  border-color: color-mix(in srgb, var(--pcr-color-primary, #40c4ff) 55%, var(--pcr-color-border, rgba(255,255,255,.14)) 45%);
}

.pcr-carousel__dot:focus-visible{
  outline:none;
  box-shadow: var(--pcr-focus-ring, 0 0 0 3px rgba(64,196,255,.28));
}

.pcr-carousel__dot[aria-current="true"]{
  transform: scale(1.12);
  background: color-mix(in srgb, var(--pcr-color-primary, #40c4ff) 78%, #fff 22%);
  border-color: color-mix(in srgb, var(--pcr-color-primary, #40c4ff) 78%, transparent);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* tablette */
@media (max-width: 900px){
  .pcr-carousel{ --pcr-car-perview: 2; }
}

/* MOBILE → 1 slide pleine + 1/3 visible (garanti) */
@media (max-width: 640px){

  .pcr-carousel{
    --pcr-car-gap: 12px;
    --pcr-car-peek: clamp(44px, 18vw, 84px);
  }

  /* force une slide “presque pleine” */
  .pcr-carousel__item{
    flex: 0 0 calc(100% - var(--pcr-car-peek));
  }

  /* peek garanti : padding-right = peek */
  .pcr-carousel__track{
    padding-right: var(--pcr-car-peek);
  }

  /* flèches inutiles sur mobile */
  .pcr-carousel__btn{ display:none; }

  /* dots un peu plus confort */
  .pcr-carousel__dots{
    margin-top: 14px;
    gap: 9px;
  }
  .pcr-carousel__dot{
    width: 11px;
    height: 11px;
    border-radius: calc(var(--pcr-radius-sm, 10px) - 5px);
  }
}