/* =========================================================

   BLOCK — Témoignages

   - Full width background: --color-blanc

   - Centré

========================================================= */



.temoignages{

  width: 100%;

  background: var(--color-blanc);

  padding: 44px 0 36px;

  /* overflow: hidden; */

}



.temoignages__container{

  /* max-width: var(--layout-wide-size); */

  margin: 0 auto;

  /* padding: 0 20px; */

  text-align: center;

}



/* =========================================================

   TITLES

========================================================= */



.temoignages__title{

  margin: 0 0 10px;

  font-size: var(--font-size-xxl, 40px);

  font-weight: 500;

  line-height: 1.1;

  color: var(--color-noir);

}



.temoignages__sub{

  margin: 0 auto 26px;

  font-size: var(--font-size-m, 18px);

  font-weight: 400;

  line-height: 1.35;

  color: var(--color-noir);

  max-width: 80ch;

}



/* =========================================================

   SLIDER

========================================================= */



.temoignages__slider{ width: 100%; position:relative;}



.tm-viewport{

  overflow: hidden;

  /* swipe vertical ok */

  touch-action: pan-y;

}



.tm-track{

  display: flex;

  align-items: stretch;

  gap: 60px;

  will-change: transform;

  transition: transform .45s ease;

  padding: 8px 0 0;

}



.tm-slide{

  flex: 0 0 auto;

  width: 520px;

  opacity: .4;

  transition: opacity .45s ease;

}



.tm-slide.is-active{

  opacity: 1;

}



.tm-card{

  position: relative;

  margin: 0 auto;

  max-width: 520px;

}



/* Apostrophe: seulement sur la slide active (anim) */

.tm-quote{

  display: inline-block;

  font-size: 70px;

  font-weight: 400;

  line-height: .85;           /* <- évite qu’elle “pousse” la ligne */

  margin-top: -6px;           /* <- micro-ajustement (à régler à l’œil) */



  color: var(--page-accent);

  opacity: 0;

  transform: translateY(30px);

  transform: translateX(10px);

  transition: opacity .4s ease, transform .4s ease;

  flex: 0 0 auto;


}



.tm-slide.is-active .tm-quote{

  opacity: 1;

  transform: translateY(0);

}



.tm-text{

   font-size: var(--font-size-m, 18px);

  font-weight: 400;

  line-height: 1.35;

  color: var(--color-noir);

  margin: 0 auto 14px;



  display: inline-flex;      /* <- clé */

  align-items: flex-start;    /* <- la quote “colle” au haut de la 1ère ligne */

  gap: 10px;                  /* espace entre “ et le texte */

  text-align: center;           /* optionnel: meilleur rendu de la phrase */

}



.tm-meta{

  margin-top: 6px;
  padding-left:40px;

}



.tm-author{

  font-size: var(--font-size-s, 15px);

  font-weight: 400;

  color: var(--color-noir);

}



.tm-role{

  font-size: var(--font-size-xs, 12px);

  font-weight: 400;

  color: var(--color-noir);

  opacity: .75;

}



/* =========================================================

   NAV (arrows centered)

========================================================= */



.temoignages__nav{

  margin-top: 18px;

  display: inline-flex;

  gap: 10px;

  align-items: center;

  justify-content: center;

  position: absolute;

  bottom: -54px;

  left: calc(50% - 39px);

}



.tm-arrow{

  width: 34px;

  height: 34px;

  border-radius: 999px;



  background: transparent;

  border: 1px solid var(--color-noir);

  color: var(--color-blanc);

  background: var(--color-noir);



  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding-top: 8px;



  cursor: pointer;

  line-height: 1;



  transition: opacity .25s ease;

}



.tm-arrow:hover{

  opacity: .7;

}



/* =========================================================

   RESPONSIVE

========================================================= */



@media (max-width: 980px){

  .tm-slide{ width: 460px; }

  .tm-track{ gap: 44px; }

}



@media (max-width: 680px){

  .temoignages{ padding: 34px 0 28px; }



  /* 1 slide visible */

  .tm-track{ gap: 0; }

  .tm-slide{

    width: 100%;

    padding: 0 20px;

    box-sizing: border-box;

  }

  .tm-card{ max-width: 100%; }



  .temoignages__nav{

    bottom: -46px;

  }

}