.section-equipe {
background-color: var(--color-gray-100);
padding: 0 48px 96px;
display: flex;
flex-direction: column;
align-items: center;
gap: 96px;
overflow-x: clip;
}
.home .section-equipe {
position: relative;
z-index: 3;
--escalier-equipe-remontee: calc(62.5 * var(--vp-unit));
--equipe-gap: calc(8 * var(--vp-unit));
margin-top: calc(-1 * var(--escalier-equipe-remontee));
will-change: transform;
}
.escalier-k-active .home .section-equipe {
margin-top: calc(60 * var(--vp-unit) + var(--equipe-gap) - 100 * var(--vp-unit));
transform: translateY(calc(var(--rise-y) * var(--vp-unit)));
}
.page-agence .section-equipe {
position: relative;
z-index: 7;
--equipe-gap: calc(8 * var(--vp-unit));
margin-top: calc(-1 * 62.5 * var(--vp-unit));
will-change: transform;
}
.escalier-k-active .page-agence .section-equipe {
margin-top: calc(60 * var(--vp-unit) + var(--equipe-gap) - 100 * var(--vp-unit));
transform: translateY(calc(var(--rise-y) * var(--vp-unit)));
}
.section-equipe__header {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
max-width: 1344px;
}
.section-equipe__pretitle-wrap {
display: flex;
align-items: center;
gap: 32px;
width: 100%;
}
.section-equipe__pretitle {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: 6px;
padding: 8px;
border-radius: var(--radius-sm);
}
.section-equipe__pretitle-dot {
flex-shrink: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--color-primary);
}
.section-equipe__pretitle-text {
font-family: var(--font-body);
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--color-black);
}
.section-equipe__separator {
flex: 1 1 0;
min-width: 0;
height: 1px;
background-color: color-mix(in srgb, var(--color-black) 15%, transparent);
}
.section-equipe__title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
width: 100%;
}
.section-equipe__titre {
flex: 0 0 auto;
width: 660px;
font-family: var(--font-display);
font-weight: var(--font-weight-book);
font-size: 56px;
line-height: 1;
letter-spacing: 1.12px;
color: var(--color-black);
margin: 0;
}
.section-equipe__paragraphe {
flex: 0 0 auto;
width: 432px;
font-family: var(--font-body);
font-weight: var(--font-weight-medium);
font-size: 14px;
line-height: 1.6;
color: var(--color-black);
margin: 0;
}
.section-equipe__slider {
align-self: flex-start;
width: 100vw;
margin-left: -48px;
overflow: hidden;
cursor: grab;
}
.section-equipe__slider--active {
cursor: grabbing;
}
.section-equipe__slider-track {
display: flex;
gap: 16px;
width: max-content;
will-change: transform;
}
.section-equipe__carte {
flex: 0 0 318px;
display: flex;
flex-direction: column;
gap: 16px;
background: transparent;
border: none;
padding: 0;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.section-equipe__carte:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
:root[data-input="mouse"] .section-equipe__carte:focus-visible {
outline: none;
}
.section-equipe__carte-photo {
aspect-ratio: 318 / 405;
width: 100%;
overflow: hidden;
border-radius: var(--radius-md);
background-color: var(--color-gray-200);
position: relative;
transition: border-radius 400ms var(--easing-default);
}
.section-equipe__carte.is-hovered .section-equipe__carte-photo,
.section-equipe__carte:focus-visible .section-equipe__carte-photo {
border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
.section-equipe__carte-photo {
transition: none;
}
}
.section-equipe__carte-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
}
.section-equipe__carte-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.section-equipe__carte-placeholder-text {
font-family: var(--font-display);
font-weight: var(--font-weight-book);
font-size: 32px;
color: var(--color-black);
opacity: 0.15;
}
.section-equipe__carte-prenom {
font-family: var(--font-display);
font-weight: var(--font-weight-book);
font-size: 32px;
line-height: 1;
letter-spacing: 1.92px;
color: var(--color-black);
margin: 0;
}
.section-equipe__carte-role {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 6px;
padding: 8px;
border-radius: var(--radius-sm);
background-color: var(--color-gray-100);
}
.section-equipe__carte-role-dot {
flex-shrink: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--color-primary);
}
.section-equipe__carte-role-text {
font-family: var(--font-body);
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--color-black);
}
.section-equipe__bouton {
display: inline-flex;
align-items: center;
gap: 4px;
height: 52px;
padding: 12px;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-black);
text-decoration: none;
font-family: var(--font-body);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
transition: opacity var(--duration-fast) var(--easing-default);
}
.section-equipe__bouton:hover {
opacity: 0.7;
}
.section-equipe__bouton:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
.section-equipe__bouton-icon {
display: inline-flex;
width: 20px;
height: 20px;
}
.section-equipe__bouton-icon svg {
display: block;
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
}
.section-equipe__data-sources {
display: none;
}
.section-equipe__modale {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 250ms var(--easing-default), visibility 0ms 250ms;
}
.section-equipe__modale.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 250ms var(--easing-default), visibility 0ms 0ms;
}
.section-equipe__modale-overlay {
position: absolute;
inset: 0;
background-color: color-mix(in srgb, var(--color-black) 70%, transparent);
cursor: pointer;
}
.section-equipe__modale-panel {
position: relative;
background-color: var(--color-black);
border-radius: 24px;
width: min(1440px, calc(100vw - 48px));
height: min(832px, calc(100svh - 48px));
overflow: hidden;
display: flex;
align-items: stretch;
}
.section-equipe__modale-close {
position: absolute;
top: 32px;
right: 32px;
width: 48px;
height: 48px;
background: transparent;
border: none;
color: var(--color-white);
cursor: pointer;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: opacity var(--duration-fast) var(--easing-default);
}
.section-equipe__modale-close:hover {
opacity: 0.7;
}
.section-equipe__modale-close:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
.section-equipe__modale-close svg {
display: block;
width: 24px;
height: 24px;
}
.section-equipe__modale-photo-wrap {
flex: 0 0 594px;
padding: 16px;
position: relative;
}
.section-equipe__modale-photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
border-radius: 16px;
}
.section-equipe__modale-content {
flex: 1 1 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px 96px 48px 72px;
gap: 24px;
color: var(--color-white);
overflow-y: auto;
}
.section-equipe__modale-name {
font-family: var(--font-display);
font-weight: var(--font-weight-book);
font-size: 56px;
line-height: 1.05;
letter-spacing: 3.36px;
color: var(--color-white);
margin: 0;
}
.section-equipe__modale-role {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 6px;
padding: 8px;
border-radius: var(--radius-sm);
}
.section-equipe__modale-role-dot {
flex-shrink: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--color-primary);
}
.section-equipe__modale-role-text {
font-family: var(--font-body);
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
color: var(--color-gray-100);
}
.section-equipe__modale-bio {
font-family: var(--font-body);
font-weight: var(--font-weight-medium);
font-size: 16px;
line-height: 1.6;
color: var(--color-white);
}
.section-equipe__modale-bio p {
margin: 0 0 12px;
}
.section-equipe__modale-bio p:last-child {
margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
.section-equipe__modale,
.section-equipe__modale.is-open {
transition: none;
}
}
@media (hover: none) {
.section-equipe__slider {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-inline-start: 48px;
overscroll-behavior-x: contain;
touch-action: pan-x pan-y;
cursor: auto;
scrollbar-width: none;
}
.section-equipe__slider::-webkit-scrollbar {
display: none;
}
.section-equipe__slider-track {
will-change: auto;
padding-inline: 48px;
}
.section-equipe__carte {
scroll-snap-align: start;
}
}
@media (max-width: 1235px) {
.section-equipe__title-row {
flex-direction: column;
align-items: flex-start;
gap: var(--space-lg);
}
.section-equipe__titre,
.section-equipe__paragraphe {
width: 100%;
}
}
@media (max-width: 767px) {
.section-equipe__pretitle-text {
font-size: var(--text-sm);
}
.section-equipe__pretitle-dot {
width: 5px;
height: 5px;
}
.section-equipe {
padding-inline: var(--space-sm);
gap: var(--space-2xl);
}
.section-equipe__titre {
font-size: 40px;
letter-spacing: 0.02em;
}
.section-equipe__slider {
margin-left: calc(-1 * var(--space-sm));
scroll-padding-inline-start: var(--space-sm);
}
.section-equipe__slider-track {
padding-inline: var(--space-sm);
}
.section-equipe__modale {
padding:
max(var(--space-sm), env(safe-area-inset-top))
max(var(--space-sm), env(safe-area-inset-right))
max(var(--space-sm), env(safe-area-inset-bottom))
max(var(--space-sm), env(safe-area-inset-left));
}
.section-equipe__modale-panel {
width: 100%;
height: 100%;
flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
}
.section-equipe__modale-photo-wrap {
flex: none;
padding: var(--space-sm) var(--space-sm) 0;
}
.section-equipe__modale-photo {
height: auto;
aspect-ratio: 1;
}
.section-equipe__modale-close {
top: var(--space-sm);
right: var(--space-sm);
width: 96px;
height: 96px;
color: var(--color-black);
}
.section-equipe__modale-close svg {
width: 54px;
height: 54px;
stroke-width: 0.9;
}
.section-equipe__modale-content {
flex: none;
justify-content: flex-start;
padding: var(--space-lg) var(--space-sm);
gap: var(--space-sm);
overflow-y: visible;
}
.section-equipe__modale-name.u-no-uppercase {
font-size: 32px;
line-height: 1.2;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.section-equipe__modale-role {
padding: 0;
}
.section-equipe__modale-bio p {
margin-bottom: var(--space-xs);
}
}