body.page-services {
background-color: var(--color-white);
}
.services-hero {
padding: calc(var(--space-4xl) + var(--space-lg)) var(--container-padding) var(--space-2xl);
text-align: center;
}
.services-hero__pretitle {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin: 0 0 var(--space-lg);
}
.services-hero__pretitle-icon {
display: inline-flex;
width: 24px;
height: 24px;
color: var(--color-primary);
}
.services-hero__pretitle-icon svg {
width: 100%;
height: 100%;
}
.services-hero__pretitle-text {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--font-weight-medium);
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-black);
}
.services-hero__title {
max-width: min(100%, 70rem);
margin: 0 auto;
font-size: var(--text-4xl);
color: var(--color-black);
}
.services-marquee {
--services-marquee-h: 460px;
--services-marquee-lift: 30px;
position: relative;
top: calc(-1 * var(--services-marquee-lift));
height: var(--services-marquee-h);
margin-block: var(--space-2xl);
overflow: hidden;
}
.services-marquee__plane {
position: absolute;
inset: 0;
overflow: hidden;
}
.services-marquee__plane--arriere {
z-index: 1;
--services-marquee-gap: 220px;
}
.services-marquee__plane--avant {
z-index: 2;
--services-marquee-gap: 260px;
}
.services-marquee__track {
display: flex;
align-items: center;
width: max-content;
height: 100%;
will-change: transform;
}
.services-marquee__item {
flex: 0 0 auto;
margin-left: var(--services-marquee-gap);
height: var(--mq-h);
aspect-ratio: var(--mq-ar);
border-radius: var(--radius-md);
overflow: hidden;
}
.services-marquee__item--big {
height: 100%;
aspect-ratio: 4 / 5;
}
.services-marquee__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.services-subnav {
display: flex;
justify-content: center;
padding: var(--space-lg) var(--container-padding);
}
.services-subnav--docked {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 140;
padding: var(--space-sm) var(--container-padding);
transform: translateY(100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform var(--duration-base) var(--easing-default),
opacity var(--duration-base) var(--easing-default),
visibility 0s linear var(--duration-base);
}
.services-subnav--docked.is-visible {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: transform var(--duration-base) var(--easing-default),
opacity var(--duration-base) var(--easing-default),
visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
.services-subnav--docked {
transition: none;
transform: none;
}
}
html:has(.services-subnav--docked) {
scroll-padding-bottom: 100px;
}
.services-subnav__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-xs);
background-color: var(--color-white);
border-radius: var(--radius-full);
box-shadow: var(--glass-shadow);
}
.services-subnav__link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
background-color: var(--color-gray-100);
color: var(--color-black);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
transition: background-color 150ms ease, color 150ms ease;
}
.services-subnav__link:hover,
.services-subnav__link:focus-visible {
background-color: var(--color-gray-200);
}
.services-subnav__link.is-active {
background-color: var(--color-primary);
color: var(--color-white);
}
.services-subnav__link-icon {
display: inline-flex;
width: 16px;
height: 16px;
}
.services-subnav__link-icon svg {
width: 100%;
height: 100%;
}
.services-blocs {
--services-head-h: 56px;
--services-lisere: 28px;
--services-stick-top: calc(var(--header-height) + 32px + var(--space-sm));
--services-course: 48px;
--services-media-w: 426px;
}
.services-blocs__course {
height: var(--services-course);
}
.page-services .services-blocs + .home-escalier {
--escalier-overlap: calc(100 * var(--vp-unit) - 120px);
}
.services-bloc {
position: sticky;
top: calc(var(--services-stick-top) + var(--bloc-i, 0) * var(--services-lisere));
z-index: var(--bloc-z, 1);
}
.services-bloc + .services-bloc {
margin-top: var(--space-2xl);
}
.services-bloc__inner {
position: relative;
display: grid;
grid-template-columns: 1fr var(--services-media-w);
gap: var(--space-2xl);
align-items: start;
width: calc(100% - 2 * var(--header-padding-x));
max-width: calc(var(--container-max) - 2 * var(--header-padding-x));
margin-inline: auto;
padding: var(--space-md);
background-color: var(--color-white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-card);
transform-origin: top center;
will-change: transform;
}
.services-bloc__inner::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background-color: var(--color-gray-200);
opacity: var(--cover, 0);
pointer-events: none;
}
.services-bloc__col-left {
padding-top: var(--space-md);
padding-left: var(--space-md);
}
.services-bloc__head {
display: flex;
align-items: center;
gap: var(--space-md);
height: var(--services-head-h);
}
.services-bloc__asterisk {
display: inline-flex;
flex: 0 0 auto;
width: var(--services-head-h);
height: var(--services-head-h);
color: var(--color-primary);
}
.services-bloc__asterisk svg {
width: 100%;
height: 100%;
}
.services-bloc__title {
margin: 0;
font-size: var(--text-3xl);
color: var(--color-black);
}
.services-bloc__body {
display: flex;
flex-direction: column;
gap: var(--space-md);
padding-top: var(--space-lg);
}
.services-bloc__body {
margin-top: var(--space-lg);
border-top: var(--border-thin);
}
.services-bloc__tablist {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-xs);
}
.services-subservice {
display: inline-flex;
align-items: center;
padding: var(--space-xs);
border: 0;
border-radius: var(--radius-sm);
background-color: var(--color-gray-100);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.02em;
text-align: left;
color: var(--color-gray-600);
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease;
}
.services-subservice::before {
content: "";
flex: 0 0 auto;
width: 4px;
height: 4px;
margin-right: 6px;
border-radius: var(--radius-full);
background-color: var(--color-primary);
}
.services-subservice.is-active::before {
background-color: var(--color-white);
}
.services-subservice__label {
line-height: var(--leading-snug);
}
.services-subservice:not(.is-active):hover,
.services-subservice:not(.is-active):focus-visible {
color: var(--color-black);
}
.services-subservice.is-active {
background-color: var(--color-primary);
color: var(--color-white);
}
.services-subservice:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.services-bloc__panels {
min-width: 0;
}
.services-subservice__panel {
max-width: 44ch;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-black);
}
.services-subservice__panel[hidden] {
display: none;
}
.services-bloc__media {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
}
.services-bloc__figure {
position: absolute;
inset: var(--space-sm);
margin: 0;
z-index: var(--fig-z, 1);
transform: rotate(var(--rot, 0deg));
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 4px 16px color-mix(in srgb, var(--color-black) 18%, transparent);
}
.services-bloc__figure.is-active {
z-index: 50;
}
.services-bloc__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.services-bloc__label {
position: absolute;
left: var(--space-md);
bottom: var(--space-md);
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-full);
background-color: color-mix(in srgb, var(--color-black) 70%, transparent);
color: var(--color-white);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
letter-spacing: 0.02em;
text-transform: uppercase;
backdrop-filter: var(--glass-blur);
}
.services-bloc__label-icon {
display: inline-flex;
width: 16px;
height: 16px;
}
.services-bloc__label-icon svg {
width: 100%;
height: 100%;
}
.services-temoignages {
position: relative;
z-index: 6;
background-color: var(--color-gray-100);
padding-top: var(--space-2xl);
padding-bottom: var(--space-4xl);
--temoignages-gap: calc(8 * var(--vp-unit));
margin-top: calc(-1 * 62.5 * var(--vp-unit));
}
.escalier-k-active .services-temoignages {
margin-top: calc(60 * var(--vp-unit) + var(--temoignages-gap) - 100 * var(--vp-unit));
transform: translateY(calc(var(--rise-y) * var(--vp-unit)));
}
.services-temoignages__header {
max-width: var(--container-max);
margin: 0 auto var(--space-2xl);
padding-inline: var(--header-padding-x);
}
.services-temoignages__pretitle {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin: 0 0 var(--space-lg);
}
.services-temoignages__pretitle-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background-color: var(--color-primary);
}
.services-temoignages__pretitle-text {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--font-weight-medium);
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-black);
}
.services-temoignages__head-row {
display: grid;
grid-template-columns: 1fr minmax(0, 40ch);
gap: var(--space-2xl);
align-items: start;
}
.services-temoignages__titre {
margin: 0;
max-width: min(100%, 70rem);
font-size: var(--text-4xl);
color: var(--color-black);
}
.services-temoignages__intro {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-black);
}
.services-temoignages__slider {
--temoignages-overlap: 24px;
overflow: hidden;
padding-block: var(--space-md);
}
.services-temoignages__track {
display: flex;
align-items: center;
width: max-content;
padding-left: calc(var(--header-padding-x) + var(--temoignages-overlap));
padding-right: var(--header-padding-x);
}
.services-temoignages__slider.is-marquee .services-temoignages__track {
padding-left: 0;
padding-right: 0;
}
.services-temoignages__carte {
flex: 0 0 auto;
display: flex;
flex-direction: column;
width: 420px;
min-height: 280px;
margin-left: calc(-1 * var(--temoignages-overlap));
position: relative;
z-index: var(--card-i, 1);
transform: rotate(var(--card-rot, 0deg));
padding: var(--space-lg);
background-color: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--glass-shadow);
}
.services-temoignages__citation {
margin: 0 0 var(--space-lg);
font-family: var(--font-body);
font-size: var(--text-base);
font-style: italic;
line-height: var(--leading-normal);
color: var(--color-black);
}
.services-temoignages__auteur {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-sm);
margin-top: auto;
}
.services-temoignages__avatar {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: var(--radius-full);
overflow: hidden;
background-color: var(--color-gray-200);
}
.services-temoignages__avatar-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.services-temoignages__meta {
display: flex;
flex-direction: column;
}
.services-temoignages__nom {
font-family: var(--font-body);
font-weight: var(--font-weight-medium);
font-size: var(--text-base);
color: var(--color-black);
}
.services-temoignages__poste {
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--color-gray-600);
}
.services-temoignages__quote {
align-self: end;
font-family: var(--font-display);
font-size: 88px;
line-height: 0.4;
color: var(--color-primary);
transform: translateX(-0.5rem);
}
@media (max-width: 1143px) {
.services-temoignages__head-row {
grid-template-columns: 1fr;
gap: var(--space-md);
}
}
@media (max-width: 1016px) {
.services-blocs {
--services-card-h: calc(100svh - var(--services-stick-top) - (var(--bloc-n, 4) - 1) * var(--services-lisere) - 16px);
}
.services-bloc__inner {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
height: var(--services-card-h);
min-height: min-content;
gap: var(--space-sm);
}
.services-bloc__col-left {
padding-top: 0;
padding-left: 0;
}
.services-bloc__col-right {
align-self: end;
}
.services-bloc__media {
aspect-ratio: 16 / 9;
min-width: 0;
width: min(100%, calc(35svh * 16 / 9));
}
.services-bloc__figure {
display: none;
}
.services-bloc__figure.is-active {
display: block;
inset: 0;
transform: none;
}
.services-subnav {
display: none;
}
}
@media (max-width: 767px) {
.services-bloc__inner {
width: calc(100% - 2 * var(--space-sm));
padding: var(--space-md);
}
.services-bloc__media {
width: 100%;
}
.services-blocs {
--services-head-h: 32px;
--services-lisere: 12px;
--services-stick-top: calc(var(--header-clearance) - 8px);
}
.services-bloc__head {
gap: 4px;
}
.services-bloc__title {
font-size: 32px;
line-height: 1;
letter-spacing: 0.64px;
}
.services-bloc__tablist {
gap: 4px;
}
.services-subservice {
letter-spacing: 0;
}
.services-subservice__label {
line-height: 1;
}
.services-bloc__body {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
gap: var(--space-sm);
}
.services-subservice__panel {
font-weight: var(--font-weight-medium);
line-height: 1.6;
}
.services-temoignages__track {
padding-left: calc(var(--space-md) + var(--temoignages-overlap));
padding-right: var(--space-md);
}
.services-temoignages__carte {
min-height: 0;
}
.services-temoignages__header {
padding-inline: var(--space-md);
}
.services-temoignages__titre {
font-size: 40px;
line-height: 1;
letter-spacing: 0.8px;
}
.services-temoignages__pretitle-text {
font-size: var(--text-sm);
}
.services-temoignages__pretitle-dot {
width: 5px;
height: 5px;
}
.services-temoignages__intro {
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
line-height: 1.6;
}
.services-temoignages__carte {
border-radius: var(--radius-md);
}
.services-temoignages__citation {
font-size: var(--text-sm);
line-height: 1.4;
}
.services-temoignages__nom {
font-size: var(--text-sm);
font-weight: var(--font-weight-bold);
}
.services-temoignages__poste {
font-size: var(--text-xs);
}
}