/* ============================================================================
   Témoignages soignants — section .testimonials-caregivers

   Deux choses vivent ici : le carrousel (pistes qui glissent au scroll, ou qui
   se balaient au doigt sur téléphone) et les cartes elles-mêmes.

   Le carrousel remplace l'interaction Webflow IX2 « a-205 / moving testi »,
   partie avec webflow.js le 2026-08-06 : IX2 n'est plus chargé, la classe
   w-mod-ix3 n'est plus posée, l'animation ne se jouait plus.

   Les cartes, elles, ne sont plus du balisage Webflow : le balisage est produit
   par scripts/temoignages-soignants.py. Les visuels étaient des images de fond
   déclarées dans les trois feuilles (`.picture-testi-1` … `-10`), donc
   invisibles au dépôt et impossibles à changer sans toucher aux trois. Ce sont
   maintenant de vraies <img>, et aucune règle de ce fichier ne dépend plus des
   feuilles Webflow — il est simplement chargé après celle de la page.

   Comportement JS associé : /js/testimonials-scroll.js
   ========================================================================== */

/* --- Le cadre et les pistes ---------------------------------------------- */

.testimonials-caregivers {
  overflow: hidden;
  /* Deux réglages lus par le script :
     --tscroll-mode     glisse   la piste boucle, poussée par le scroll vertical
                        balayage la piste se parcourt au doigt, avec accroche
     --tscroll-vitesse  px de translation pour 1 px de scroll, en mode glisse */
  --tscroll-mode: glisse;
  --tscroll-vitesse: .42;
}

.testimonials-caregivers .div-block-1769 {
  width: 100%;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  /* flex-start, et pas center : une piste plus large que l'écran serait centrée,
     son bord gauche partirait en négatif, et le repli d'un groupe calculé par le
     script laisserait un trou à droite */
  align-items: flex-start;
  /* les cartes s'effacent aux deux bords au lieu d'être coupées net */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.testimonials-caregivers .home-one-about-line-copy,
.testimonials-caregivers .home-one-about-line-copy-copy {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex: none;
  align-self: flex-start;
  width: -webkit-max-content;
  width: max-content;
  max-width: none;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;
  height: auto; /* la rangée prend la hauteur de sa plus grande carte, et le
                   script aligne les trois rangées sur la plus haute : aucune
                   citation n'est coupée, et le bloc reste régulier */
  margin: 0;
  padding: 0;
  display: flex;
  overflow: visible;
}

.testimonials-caregivers .tscroll-track {
  will-change: transform;
}

/* Un groupe = le jeu complet de cartes d'une rangée. Le script en clone assez
   pour que la piste fasse toujours plus large que l'écran, et la ramène d'un
   groupe en arrière quand elle a trop avancé : la boucle est invisible.
   Chaque rangée compte autant de cartes texte que de cartes vidéo, donc
   l'alternance tient aussi à la couture entre deux groupes. */
.testimonials-caregivers .tscroll-group {
  flex: none;
  display: flex;
  align-items: stretch;
  column-gap: inherit;
  row-gap: inherit;
}

/* --- Les cartes ----------------------------------------------------------- */

.testimonials-caregivers .tcard {
  flex: none;
  border: 1px solid #ffffff1f;
  border-radius: 20px;
  transition: transform .25s ease, border-color .25s ease;
}

/* la citation */
.testimonials-caregivers .tcard--quote {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  background-color: #ffffff0d;
  background-image: linear-gradient(45deg, #ffffff1a, #fff0 70%);
  width: 430px;
  margin: 0;
  padding: 24px;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.testimonials-caregivers .tcard__quote {
  color: #fff;
  letter-spacing: -.32px;
  margin: 0 0 12px;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}

.testimonials-caregivers .tcard__foot {
  grid-column-gap: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0;
}

.testimonials-caregivers .tcard__who {
  color: #afaec6;
  font-size: 14px;
  line-height: 150%;
}

/* Les logos arrivent en couleur — ils ont été rassemblés pour la home 2026, qui
   les pose sur un bandeau clair. Ici le fond est presque noir : détourage en
   blanc, et la couleur ne reviendrait qu'au prix d'un second jeu de fichiers.
   Le détourage suppose un logo d'un seul ton : un logo en deux tons y perd ses
   contrastes internes et devient une tache (cf. Les Bluets, traité à part dans
   scripts/temoignages-soignants.py). À vérifier avant d'ajouter un logo ici. */
.testimonials-caregivers .tcard__logo {
  flex: none;
  width: auto;
  height: 34px;
  max-width: 120px;
  object-fit: contain;
  object-position: right center;
  opacity: .78;
  filter: brightness(0) invert(1);
  transition: opacity .25s ease;
}

.testimonials-caregivers .tcard--quote:hover .tcard__logo {
  opacity: 1;
}

/* Un symbole carré à 34 px de haut ne fait que 30 px de large, contre 130 pour
   un bloc-marque : il disparaît à côté des autres. On lui donne sa hauteur. */
.testimonials-caregivers .tcard__logo--marque {
  height: 46px;
  max-width: 52px;
}

/* la vignette vidéo */
.testimonials-caregivers .tcard--video {
  width: 320px;
  position: relative;
  overflow: hidden;
  display: block;
  background-color: #12172e;
  text-decoration: none;
}

.testimonials-caregivers .tcard__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform .5s ease, opacity .3s ease;
}

.testimonials-caregivers .tcard--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#3a82f333, #3a82f38c);
  transition: opacity .3s ease;
  pointer-events: none;
}

.testimonials-caregivers .tcard__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0b0e1fb3;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid #ffffff59;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, background-color .25s ease, opacity .3s ease;
}

.testimonials-caregivers .tcard__play svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  /* Pas de rattrapage ici : le tracé est déjà posé de 8 à 19 dans un viewBox de
     24, soit 6 % à droite du centre — c'est le décalage optique qu'un triangle
     pointant à droite réclame. Un margin en plus le décalait deux fois. */
}

.testimonials-caregivers .tcard--video:hover {
  border-color: #ffffff4d;
}

.testimonials-caregivers .tcard--video:hover .tcard__poster {
  transform: scale(1.04);
}

.testimonials-caregivers .tcard--video:hover .tcard__play {
  transform: scale(1.08);
  background: #0b0e1fe6;
}

.testimonials-caregivers .tcard--video:focus-visible {
  outline: 2px solid #55b5f3;
  outline-offset: 3px;
}

/* L'aperçu au survol : le script pose une iframe YouTube muette par-dessus
   l'image. La boîte est plus haute que du 16/9, donc l'iframe est dimensionnée
   par sa hauteur et débordera en largeur — c'est un `cover`, pas un `contain`. */
.testimonials-caregivers .tcard__live {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  min-width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}

.testimonials-caregivers .tcard__live.est-vu {
  opacity: 1;
}

.testimonials-caregivers .tcard--video.joue .tcard__play {
  opacity: 0;
}

.testimonials-caregivers .tcard--video.joue::after {
  opacity: .35;
}

/* --- Le bandeau des établissements ---------------------------------------- */

.testimonials-caregivers .tlogos {
  margin: 44px auto 0;
  padding: 0 24px;
  max-width: 1100px;
}

.testimonials-caregivers .tlogos__piste {
  grid-column-gap: 40px;
  grid-row-gap: 26px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.testimonials-caregivers .tlogos img {
  height: 30px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  opacity: .5;
  filter: brightness(0) invert(1);
  transition: opacity .25s ease;
}

.testimonials-caregivers .tlogos img.marque {
  height: 42px;
  max-width: 48px;
}

.testimonials-caregivers .tlogos img:hover {
  opacity: .95;
}

/* --- La lightbox ---------------------------------------------------------- */

.tvid-ov {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #04060cd6;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tvid-ov.est-ouverte {
  display: flex;
}

.tvid-ov__cadre {
  width: min(1100px, 100%);
  display: flex;
  flex-flow: column;
  gap: 14px;
}

.tvid-ov__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 30px 80px #0009;
}

.tvid-ov__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.tvid-ov__yt,
.tvid-ov__fermer {
  color: #cfd3e6;
  background: #ffffff14;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.tvid-ov__yt:hover,
.tvid-ov__fermer:hover {
  background: #ffffff26;
  color: #fff;
}

/* --- Tablette (≤991 px) ---------------------------------------------------- */

@media screen and (max-width: 991px) {
  .testimonials-caregivers {
    --tscroll-vitesse: .28;
  }

  .testimonials-caregivers .tcard--quote {
    width: 360px;
    padding: 22px;
  }

  /* palier intermédiaire entre le 18/30 du bureau et le 16/26 du téléphone :
     sans lui la rangée passait à plus de 310 px de haut sur une tablette */
  .testimonials-caregivers .tcard__quote {
    font-size: 16px;
    line-height: 26px;
  }

  .testimonials-caregivers .tcard__who {
    font-size: 13px;
  }

  .testimonials-caregivers .tcard--video {
    width: 280px;
  }
}

/* --- Téléphone (≤767 px) --------------------------------------------------- */
/* Avant : les rangées 1 et 3 étaient en display:none, la rangée 2 s'empilait en
   colonne, plusieurs cartes disparaissaient — il ne restait qu'une liste
   verticale tronquée.

   Ici on ne reprend pas la dérive du bureau : elle est géométriquement
   incompatible avec la lecture sur un petit écran. Une piste qui glisse ne
   montre une carte en entier que pendant (largeur écran − largeur carte) px de
   course ; sur 375 px de large, une citation de 250 signes n'est jamais posée
   assez longtemps. La bande se parcourt donc au doigt, avec accroche : une
   citation par écran, entière, et on passe à la suivante quand on a fini. */

@media screen and (max-width: 767px) {
  .testimonials-caregivers {
    --tscroll-mode: balayage;
  }

  .testimonials-caregivers .div-block-1769 {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }

  .testimonials-caregivers .home-one-about-line-copy,
  .testimonials-caregivers .home-one-about-line-copy-copy {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }

  /* la piste devient son propre cadre de défilement horizontal */
  .testimonials-caregivers .tscroll-track {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    transform: none !important;
    will-change: auto;
  }

  .testimonials-caregivers .tscroll-track::-webkit-scrollbar {
    display: none;
  }

  /* une marge en début et en fin de bande, sinon la première et la dernière
     carte collent au bord de l'écran */
  .testimonials-caregivers .tscroll-group {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* chaque carte est un point d'accroche : le doigt la pose au centre */
  .testimonials-caregivers .tscroll-group > * {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* L'accroche garantit que la carte posée est entière : elle peut donc
     prendre presque toute la largeur, et la citation tient sur moins de lignes. */
  .testimonials-caregivers .tcard--quote {
    width: 84vw;
    max-width: 340px;
    padding: 20px;
    border-radius: 16px;
  }

  .testimonials-caregivers .tcard__quote {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 26px;
  }

  .testimonials-caregivers .tcard__who {
    font-size: 12px;
  }

  .testimonials-caregivers .tcard__logo {
    height: 28px;
    max-width: 96px;
  }

  .testimonials-caregivers .tcard__logo--marque {
    height: 38px;
    max-width: 42px;
  }

  .testimonials-caregivers .tcard--video {
    width: 56vw;
    max-width: 230px;
    border-radius: 16px;
  }

  .testimonials-caregivers .tcard__play {
    width: 46px;
    height: 46px;
  }

  .testimonials-caregivers .tcard__play svg {
    width: 18px;
    height: 18px;
  }

  .testimonials-caregivers .tlogos {
    margin-top: 32px;
    padding: 0 16px;
  }

  .testimonials-caregivers .tlogos__piste {
    grid-column-gap: 26px;
    grid-row-gap: 20px;
  }

  .testimonials-caregivers .tlogos img {
    height: 24px;
    max-width: 104px;
  }

  .testimonials-caregivers .tlogos img.marque {
    height: 34px;
    max-width: 38px;
  }

  .tvid-ov {
    padding: 16px;
  }
}

@media screen and (max-width: 479px) {
  .testimonials-caregivers .tcard--quote {
    width: 86vw;
  }

  .testimonials-caregivers .tcard--video {
    width: 60vw;
  }
}

/* --- Mouvement réduit ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .testimonials-caregivers .tscroll-track {
    transform: none !important;
  }

  .testimonials-caregivers .tcard--video:hover .tcard__poster,
  .testimonials-caregivers .tcard--video:hover .tcard__play {
    transform: none;
  }
}