.temoignages{
width: 100%;
background: var(--color-blanc);
padding: 44px 0 36px; }
.temoignages__container{ margin: 0 auto; text-align: center;
} .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;
} .temoignages__slider{ width: 100%; position:relative;}
.tm-viewport{
overflow: hidden; 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;
} .tm-quote{
display: inline-block;
font-size: 70px;
font-weight: 400;
line-height: .85; margin-top: -6px; 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; align-items: flex-start; gap: 10px; text-align: center; }
.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;
} .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;
} @media (max-width: 980px){
.tm-slide{ width: 460px; }
.tm-track{ gap: 44px; }
}
@media (max-width: 680px){
.temoignages{ padding: 34px 0 28px; } .tm-track{ gap: 0; }
.tm-slide{
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.tm-card{ max-width: 100%; }
.temoignages__nav{
bottom: -46px;
}
}