/* dtestimonials — thème sombre par défaut, tout est surchargeable via les variables */
.dtesti {
  --dt-bg: #0a0a0a;
  --dt-card-bg: linear-gradient(180deg, #161616 0%, #0f0f0f 100%);
  --dt-card-border: rgba(255, 255, 255, .09);
  --dt-text: #f2f2f2;
  --dt-muted: rgba(255, 255, 255, .55);
  --dt-star: #e0b84a;
  --dt-star-off: rgba(255, 255, 255, .15);
  --dt-avatar-bg: linear-gradient(135deg, #f1d57a 0%, #b88a1f 100%);
  --dt-avatar-fg: #1a1405;
  --dt-card-w: 400px;
  --dt-gap: 18px;
  --dt-radius: 18px;
  --dt-fade: 7%;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dt-gap);
  padding: 24px 0;
  overflow: hidden;
  background: var(--dt-bg);
  color: var(--dt-text);
}

.dtesti__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--dt-fade), #000 calc(100% - var(--dt-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--dt-fade), #000 calc(100% - var(--dt-fade)), transparent 100%);
}

.dtesti__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  backface-visibility: hidden;
}

/* L'animation ne démarre que quand le JS a mesuré la bande (évite tout saut). */
.dtesti.is-ready .dtesti__track {
  animation: dtesti-left var(--dt-dur, 60s) linear infinite;
}
.dtesti.is-ready .dtesti__track--reverse {
  animation-name: dtesti-right;
}
.dtesti[data-pause="1"].is-ready .dtesti__viewport:hover .dtesti__track,
.dtesti.is-offscreen .dtesti__track {
  animation-play-state: paused;
}

@keyframes dtesti-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--dt-dist, 0px) * -1), 0, 0); }
}
@keyframes dtesti-right {
  from { transform: translate3d(calc(var(--dt-dist, 0px) * -1), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* margin-right (et non gap) : la largeur d'un « set » est ainsi exacte. */
.dtesti__card {
  flex: 0 0 var(--dt-card-w);
  width: var(--dt-card-w);
  margin: 0 var(--dt-gap) 0 0;
  box-sizing: border-box;
}
.dtesti__card figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 20px 22px;
  box-sizing: border-box;
  background: var(--dt-card-bg);
  border: 1px solid var(--dt-card-border);
  border-radius: var(--dt-radius);
}

.dtesti__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dtesti__stars { display: inline-flex; gap: 2px; }
.dtesti__star { width: 16px; height: 16px; fill: var(--dt-star); }
.dtesti__star.is-off { fill: var(--dt-star-off); }

.dtesti__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dt-muted);
}
.dtesti__source svg { width: 12px; height: 12px; fill: currentColor; }

.dtesti__text { flex: 1 1 auto; margin: 0 0 18px; padding: 0; border: 0; font-size: 14.5px; line-height: 1.55; color: var(--dt-text); }
.dtesti__text p { margin: 0 0 .8em; }
.dtesti__text p:last-child { margin-bottom: 0; }

.dtesti__author { display: flex; align-items: center; gap: 12px; }
.dtesti__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--dt-avatar-bg);
  color: var(--dt-avatar-fg);
  font-weight: 700;
  font-size: 15px;
}
.dtesti__author > span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dtesti__author strong { font-size: 14px; font-weight: 700; }
.dtesti__author span span { font-size: 12px; color: var(--dt-muted); }

@media (max-width: 767px) {
  .dtesti { --dt-card-w: min(300px, 82vw); --dt-gap: 14px; --dt-fade: 4%; }
  .dtesti__card figure { padding: 16px 18px; }
  .dtesti__text { font-size: 14px; }
}

/* Accessibilité : pas d'animation, défilement manuel à la place. */
@media (prefers-reduced-motion: reduce) {
  .dtesti.is-ready .dtesti__track { animation: none; }
  .dtesti__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .dtesti__track [data-clone] { display: none; }
}