/* ============================================
   Carrousel Témoignages — bc-tc
   Effet 3D rotatif, infini
============================================ */

.bc-tc {
  --tc-img     : clamp(170px, 17vw, 260px);
  --tc-off-1   : clamp(205px, 20vw, 300px);
  --tc-off-2   : clamp(370px, 36vw, 530px);
  --tc-off-3   : clamp(510px, 50vw, 720px);
  --tc-duration: 0.44s;

  width: 100%;
  margin: clamp(2rem, 5vw, 4rem) auto;
  overflow: hidden;
}

/* ---- Stage (track + flèches) ---- */
.bc-tc__stage {
  position: relative;
}

/* ---- Track ---- */
.bc-tc__track {
  position: relative;
  width: 100%;
  height: clamp(300px, 34vw, 440px);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;
}

.bc-tc__track.is-dragging { cursor: grabbing; }

/* ---- Items : absolus, centrés dans le track ---- */
.bc-tc__item {
  position: absolute;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 26px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--tc-duration) cubic-bezier(0.33, 1, 0.68, 1),
    opacity   var(--tc-duration) ease,
    filter    var(--tc-duration) ease;
  will-change: transform, opacity;
}

.bc-tc__img {
  width: var(--tc-img);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 26px;
  pointer-events: none;
}

/* ---- Positions (data-pos = distance au centre) ---- */

/* Centre : le plus grand, z-index max */
.bc-tc__item[data-pos="0"] {
  transform: translateX(0) scale(1);
  z-index: 5;
  opacity: 1;
  filter: none;
  cursor: default;
}

/* ±1 : légèrement réduits */
.bc-tc__item[data-pos="1"] {
  transform: translateX(var(--tc-off-1)) scale(0.80);
  z-index: 4; opacity: 0.88; filter: none;
}
.bc-tc__item[data-pos="-1"] {
  transform: translateX(calc(-1 * var(--tc-off-1))) scale(0.80);
  z-index: 4; opacity: 0.88; filter: none;
}

/* ±2 : encore plus petits, légère désaturation */
.bc-tc__item[data-pos="2"] {
  transform: translateX(var(--tc-off-2)) scale(0.62);
  z-index: 3; opacity: 0.60; filter: grayscale(0.15);
}
.bc-tc__item[data-pos="-2"] {
  transform: translateX(calc(-1 * var(--tc-off-2))) scale(0.62);
  z-index: 3; opacity: 0.60; filter: grayscale(0.15);
}

/* ±3 : invisible (transition entrée/sortie) */
.bc-tc__item[data-pos="3"] {
  transform: translateX(var(--tc-off-3)) scale(0.48);
  z-index: 1; opacity: 0; filter: grayscale(0.3); pointer-events: none;
}
.bc-tc__item[data-pos="-3"] {
  transform: translateX(calc(-1 * var(--tc-off-3))) scale(0.48);
  z-index: 1; opacity: 0; filter: grayscale(0.3); pointer-events: none;
}

/* ---- Flèches ---- */
.bc-tc__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: white;
  border: 2px solid var(--color-muted, #e9e2d8);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-primary, #4678B9);
  transition: background 140ms, border-color 140ms;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.bc-tc__arrow:hover {
  background: var(--color-muted, #e9e2d8);
  border-color: var(--color-primary, #4678B9);
}

.bc-tc__arrow--prev { left:  0.75rem; }
.bc-tc__arrow--next { right: 0.75rem; }

/* ---- Texte ---- */
.bc-tc__content {
  text-align: center;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  padding: 0 clamp(2rem, 8vw, 8rem);
  transition: opacity 0.22s ease;
}

.bc-tc__content.is-fading { opacity: 0; }

.bc-tc__quote {
  font-size: clamp(0.85rem, 1vw, 1.05rem);
  line-height: 1.75;
  opacity: 0.80;
  margin: 0 0 0.75rem;
  font-style: italic;
}

.bc-tc__who {
  font-family: "Loos_bold", sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  margin: 0;
  color: var(--color-primary, #4678B9);
}

/* ---- Mobile ---- */
@media (max-width: 700px) {
  .bc-tc {
    --tc-img  : clamp(100px, 26vw, 145px);
    --tc-off-1: clamp(115px, 24vw, 165px);
    --tc-off-2: clamp(210px, 43vw, 290px);
    --tc-off-3: clamp(290px, 58vw, 390px);
  }

  .bc-tc__track {
    height: clamp(190px, 52vw, 270px);
  }

  .bc-tc__img { border-radius: 20px; }
  .bc-tc__item { border-radius: 20px; }

  .bc-tc__arrow {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }

  .bc-tc__content {
    padding: 0 1rem;
  }
}