/*
 * Le carrousel de témoignages.
 *
 * Une bande qui défile toute seule, en boucle : la piste contient deux fois
 * les mêmes cartes et se translate de la moitié de sa largeur, si bien que le
 * raccord ne se voit pas. Le survol met la pause, et le masque en dégradé fait
 * disparaître les cartes sur les bords plutôt que de les couper net.
 *
 * Ces règles vivaient à l'identique dans trois pages, en style en ligne : la
 * vidéothèque, le formulaire prothésiste et la page produit. Elles sont ici
 * pour qu'un changement s'applique aux trois, et non à celle qu'on a sous les
 * yeux ce jour-là.
 *
 * Les variables (--white, --line, --cyan, --navy, --muted, --r) viennent de la
 * feuille de la page qui charge celle-ci.
 */

.testi-carousel {
  overflow: hidden;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  position: relative;
  z-index: 0;
  isolation: isolate;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.testi-track { display: flex; width: max-content; animation: testi-scroll 45s linear infinite; }
.testi-carousel:hover .testi-track { animation-play-state: paused; }
.testi-group { display: flex; gap: 1.2rem; padding-right: 1.2rem; }

@keyframes testi-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.t-card {
  flex: 0 0 min(360px, 82vw);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.4rem 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  min-height: 100%;
}

.t-card .mk { color: var(--cyan); font-size: 2rem; line-height: .8; font-weight: 800; }
.t-card blockquote,
.t-card p { font-weight: 700; font-size: 1rem; line-height: 1.35; margin: 0; }
.t-card cite { margin-top: auto; font-style: normal; color: var(--muted); font-size: .86rem; }
.t-card cite b { color: var(--navy); }

.testi-video-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .45rem;
  padding: .32rem .62rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
  font-family: inherit;
  text-decoration: none;
}

.testi-video-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.testi-video-btn:hover,
.testi-video-btn:focus-visible {
  color: var(--navy);
  border-color: var(--cyan);
  background: rgba(26, 205, 216, .08);
  outline: none;
}

/*
 * Tant qu'une vidéo n'est pas en ligne, le bouton reste là mais inerte.
 *
 * L'écart était de 25 % d'opacité : à l'œil, un bouton cliquable et un bouton
 * mort se ressemblaient. Le trait devient pointillé et le texte s'efface pour
 * de bon — on doit voir d'un coup lesquels mènent quelque part.
 */
.testi-video-btn--pending {
  cursor: default;
  opacity: .5;
  border-style: dashed;
}
.testi-video-btn--pending:hover,
.testi-video-btn--pending:focus-visible {
  color: var(--muted);
  border-color: var(--line);
  background: transparent;
}

.testi-cta { display: flex; justify-content: center; margin-top: clamp(1.8rem, 3vw, 2.4rem); }
.testi-cta .btn { white-space: normal; text-align: center; line-height: 1.25; max-width: min(100%, 40rem); }

/*
 * Au doigt, le défilement continu ne tient pas. À 390 px on ne voit jamais une
 * carte entière : le texte entre par un bord et sort par l'autre au milieu
 * d'une phrase, et il n'y a pas de survol pour l'arrêter — WCAG 2.2.2 demande
 * pourtant un moyen de mettre en pause un mouvement qui démarre seul. On rend
 * la main : défilement horizontal, une carte par point d'ancrage, la suivante
 * qui dépasse d'un doigt pour dire qu'il y en a d'autres.
 */
@media (max-width: 640px), (hover: none) {
  .testi-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    mask-image: none;
    -webkit-mask-image: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .testi-carousel::-webkit-scrollbar { display: none; }
  .testi-track { animation: none; }
  /* La seconde série ne servait qu'à boucler l'animation : sans elle, chaque
     témoignage passerait deux fois sous le pouce. */
  .testi-group[aria-hidden="true"] { display: none; }
  .testi-group { padding-right: 0; }

  /* 5rem = les deux gouttières de 20 px, plus 40 px pour laisser voir
     la carte suivante. */
  .t-card { flex: 0 0 min(320px, calc(100vw - 5rem)); scroll-snap-align: center; }
  .t-card blockquote { font-size: 1rem; }
}

/* Sans animation, la boucle n'a plus de sens : les cartes s'empilent, et le
   double exemplaire disparaît pour ne pas tout afficher deux fois. */
@media (prefers-reduced-motion: reduce) {
  .testi-track { flex-wrap: wrap; width: auto; animation: none; }
  .testi-carousel { mask-image: none; -webkit-mask-image: none; overflow: visible; }
  .testi-group:last-child { display: none; }
}