.contact-hero,
.contact-main {
background-color: var(--color-white);
}
.contact-hero {
padding: calc(var(--space-4xl) + var(--space-lg)) var(--container-padding) var(--space-2xl);
text-align: center;
}
.contact-hero__pretitle {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin: 0 0 var(--space-lg);
}
.contact-hero__pretitle-icon {
display: inline-flex;
width: 24px;
height: 24px;
color: var(--color-primary);
}
.contact-hero__pretitle-icon svg {
width: 100%;
height: 100%;
}
.contact-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);
}
.contact-hero__title {
max-width: min(100%, 70rem);
margin: 0 auto;
font-size: var(--text-4xl);
color: var(--color-black);
}
.contact-hero-marquee {
--contact-arc-amplitude: 200;
--contact-arc-halfwidth-ref: 704;
--contact-vignette-w: 120px;
--contact-vignette-h: 150px;
--contact-vignette-gap: 36px;
--contact-marquee-speed: 40;
--contact-arc-spread: 0.6;
position: relative;
width: 100%;
margin-top: var(--space-md);
margin-bottom: calc(var(--space-2xl) + var(--space-xs));
overflow: hidden;
min-height: calc(var(--contact-vignette-h) + var(--contact-arc-amplitude) * 1px + var(--space-lg));
display: flex;
align-items: flex-start;
}
.contact-hero-marquee__track {
position: relative;
display: flex;
flex-wrap: nowrap;
gap: var(--contact-vignette-gap);
width: max-content;
padding-top: calc(var(--contact-arc-amplitude) * 1px + var(--space-sm));
}
.contact-hero-marquee__item {
flex: 0 0 auto;
width: var(--contact-vignette-w);
transform-origin: center center;
--contact-u: calc((2 * var(--contact-i) / max(1, calc(var(--contact-n) - 1))) - 1);
--contact-rho: calc(var(--contact-arc-amplitude) / var(--contact-arc-halfwidth-ref));
--contact-sinmax: calc(2 * var(--contact-rho) / (1 + var(--contact-rho) * var(--contact-rho)));
--contact-theta: asin(calc(var(--contact-u) * var(--contact-sinmax)));
--contact-thetamax: asin(var(--contact-sinmax));
--contact-offset: calc(var(--contact-arc-amplitude) * (1 - cos(var(--contact-theta))) / (1 - cos(var(--contact-thetamax))));
transform:
translateY(calc(-1 * var(--contact-offset) * 1px))
rotate(var(--contact-theta));
}
.contact-hero-marquee__img {
display: block;
width: 100%;
height: var(--contact-vignette-h);
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--radius-md);
}
.contact-main {
padding-block: var(--space-3xl);
}
.contact-main__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--header-padding-x);
display: grid;
grid-template-columns: 1fr 522px;
gap: var(--space-3xl);
align-items: start;
}
.contact-hero__button {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin-top: var(--space-lg);
padding: var(--space-xs) 0;
background: transparent;
color: var(--color-black);
text-decoration: none;
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--font-weight-medium);
line-height: 1;
text-transform: uppercase;
transition: opacity var(--duration-fast) var(--easing-default);
}
.contact-hero__button:hover {
opacity: 0.7;
}
.contact-hero__button:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
.contact-hero__button-icon {
display: inline-flex;
width: 20px;
height: 20px;
}
.contact-hero__button-icon svg {
display: block;
width: 100%;
height: 100%;
stroke: currentColor;
}
.contact-main:focus {
outline: none;
}
.contact-coords {
display: flex;
flex-direction: column;
background-color: var(--color-black);
border-radius: var(--radius-lg);
padding: var(--space-xl);
}
.contact-coords__titre {
margin: 0 0 var(--space-md);
font-family: var(--font-display);
font-size: var(--text-2xl);
line-height: var(--leading-tight);
color: var(--color-white);
}
.contact-coords__item {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-lg) 0;
border-top: 1px solid color-mix(in srgb, var(--color-white) 15%, transparent);
}
.contact-coords__label {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-gray-300);
}
.contact-coords__value {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-md);
line-height: var(--leading-snug);
color: var(--color-white);
}
.contact-coords__link {
color: var(--color-white);
text-decoration: none;
transition: color var(--duration-fast) var(--easing-default);
}
.contact-coords__link:hover,
.contact-coords__link:focus-visible {
color: var(--color-primary-on-dark);
}
.contact-coords__link:focus-visible {
outline: 2px solid var(--color-primary-on-dark);
outline-offset: 3px;
}
.contact-coords__email-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
}
.contact-coords__copy {
display: inline-flex;
align-items: center;
padding: var(--space-xs) var(--space-md);
border: 1px solid color-mix(in srgb, var(--color-white) 30%, transparent);
border-radius: var(--radius-full);
background-color: transparent;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-white);
cursor: pointer;
transition: background-color var(--duration-fast) var(--easing-default),
border-color var(--duration-fast) var(--easing-default),
color var(--duration-fast) var(--easing-default);
}
.contact-coords__copy:hover {
background-color: color-mix(in srgb, var(--color-white) 12%, transparent);
}
.contact-coords__copy:focus-visible {
outline: 2px solid var(--color-primary-on-dark);
outline-offset: 2px;
}
.contact-coords__copy.is-copied {
border-color: var(--color-primary-on-dark);
color: var(--color-primary-on-dark);
}
.contact-coords__socials {
display: flex;
align-items: center;
gap: var(--space-md);
margin-top: var(--space-xs);
}
.contact-coords__social {
display: inline-flex;
width: 24px;
height: 24px;
color: var(--color-white);
transition: color var(--duration-fast) var(--easing-default);
}
.contact-coords__social:hover {
color: var(--color-primary-on-dark);
}
.contact-coords__social:focus-visible {
outline: 2px solid var(--color-primary-on-dark);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
.contact-coords__social svg {
width: 100%;
height: 100%;
}
@media (max-width: 978px) {
.contact-main__inner {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
}
@media (max-width: 767px) {
.contact-hero-marquee {
width: auto;
margin-inline: calc(-1 * var(--container-padding));
--contact-arc-amplitude: 16;
--contact-arc-halfwidth-ref: 195;
--contact-vignette-gap: 20px;
margin-bottom: 0;
}
.contact-main {
padding-block: var(--space-2xl);
}
.contact-main__inner {
padding-inline: var(--space-sm);
grid-template-columns: minmax(0, 1fr);
}
}