.agence-valeurs {
position: relative;
z-index: 4;
background-color: var(--color-black);
padding: var(--space-4xl) var(--space-xl);
margin-top: calc(-1 * 62.5 * var(--vp-unit));
}
.agence-valeurs__sticky {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3xl);
max-width: 1344px;
margin-inline: auto;
text-align: center;
}
.agence-valeurs__stage {
position: relative;
width: 100%;
display: flex;
justify-content: center;
}
.agence-valeurs__mots {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
font-family: var(--font-display);
font-weight: var(--font-weight-book);
font-size: clamp(3rem, 12vw, 130px);
line-height: 0.95;
letter-spacing: 1px;
color: var(--color-white);
}
.agence-valeurs__mot {
display: block;
}
.agence-valeurs__img {
display: none;
margin: 0;
}
.agence-valeurs__img-el {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-md);
}
.agence-valeurs--sequence {
--valeurs-img-w: min(560px, 56vw);
--valeurs-img-h: calc(var(--valeurs-img-w) * 9 / 16);
--valeurs-course: calc(170 * var(--vp-unit));
}
.agence-valeurs--anim {
height: calc(100 * var(--vp-unit) + var(--valeurs-course));
padding: 0 var(--space-xl);
}
.agence-valeurs--anim .agence-valeurs__sticky {
position: sticky;
top: 0;
height: calc(100 * var(--vp-unit));
justify-content: flex-start;
padding-top: calc(4 * var(--vp-unit));
gap: var(--space-2xl);
}
.agence-valeurs--anim .agence-valeurs__stage {
padding-block: calc(var(--valeurs-img-h) / 2);
}
.agence-valeurs--anim .agence-valeurs__mot {
will-change: transform;
color: color-mix(in srgb, var(--color-white) calc(var(--mot-white, 0) * 100%), var(--color-gray-500));
}
.agence-valeurs--anim .agence-valeurs__img {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: var(--valeurs-img-w);
height: var(--valeurs-img-h);
transform: translate(-50%, -50%);
clip-path: inset(50% 0 round var(--radius-md));
will-change: clip-path, transform, opacity;
}
@media (max-width: 767px) {
.agence-valeurs {
padding: var(--space-2xl) var(--space-md);
}
.agence-valeurs__sticky {
gap: var(--space-xl);
}
.agence-valeurs--sequence {
--valeurs-img-w: 84vw;
}
.agence-valeurs--anim .agence-valeurs__sticky {
justify-content: center;
padding-top: 0;
}
}