:root {
--projets-hero-runway: calc(66 * var(--vp-unit));
--projets-hero-grid-overlap: calc(33 * var(--vp-unit));
}
.projets-hero {
position: relative;
height: calc(100 * var(--vp-unit));
overflow: hidden;
}
.projets-hero__medias {
position: absolute;
inset: 0;
z-index: 1;
}
.projets-hero__title-layer {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.projets-hero--anim {
height: calc(100 * var(--vp-unit) + var(--projets-hero-runway));
overflow: visible;
}
.projets-hero--anim .projets-hero__medias {
position: sticky;
inset: auto;
top: 0;
height: calc(100 * var(--vp-unit));
overflow: hidden;
}
.projets-hero--anim .projets-hero__title-layer {
position: sticky;
inset: auto;
top: 0;
height: calc(100 * var(--vp-unit));
margin-top: calc(-100 * var(--vp-unit));
}
.projets-hero--anim ~ .archive-projets {
position: relative;
z-index: 2;
margin-top: calc(-1 * var(--projets-hero-grid-overlap));
}
.projets-hero__title-block {
pointer-events: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
max-width: 61.67vw;
padding-inline: var(--header-padding-x);
box-sizing: border-box;
text-align: center;
}
.projets-hero__pretitle {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.projets-hero__pretitle-icon {
display: inline-flex;
width: 24px;
height: 24px;
color: var(--color-primary);
}
.projets-hero__pretitle-icon svg {
width: 100%;
height: 100%;
}
.projets-hero__pretitle-text {
font-family: var(--font-body);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-black);
}
.projets-hero__title {
font-family: var(--font-display), var(--font-body), sans-serif;
font-size: 56px;
font-weight: var(--font-weight-book);
line-height: 1;
letter-spacing: 2px;
color: var(--color-black);
margin: 0;
}
.projets-hero__medias {
position: absolute;
inset: 0;
z-index: 1;
}
.projets-hero__media {
position: absolute;
border-radius: var(--radius-lg);
overflow: hidden;
background-color: var(--color-gray-200);
}
.projets-hero__media-el {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.projets-hero__media--1 { left: 82.78%; top: calc(-1.32 * var(--vp-unit)); width: 18.06%; aspect-ratio: 260 / 307; }
.projets-hero__media--2 { left: -5.56%; top: calc(20.19 * var(--vp-unit)); width: 20.35%; aspect-ratio: 293 / 221; }
.projets-hero__media--3 { left: -1.46%; top: calc(78.13 * var(--vp-unit)); width: 21.88%; aspect-ratio: 315 / 194; }
.projets-hero__media--4 { left: 42.29%; top: calc(67.43 * var(--vp-unit)); width: 16.18%; aspect-ratio: 233 / 283; }
.projets-hero__media--5 { left: 86.88%; top: calc(84.13 * var(--vp-unit)); width: 13.96%; aspect-ratio: 201 / 263; }
.projets-hero__filtres {
display: none;
}
@media (max-width: 1024px) {
.projets-hero__title {
font-size: 44px;
}
}
@media (max-width: 767px) {
.projets-hero {
height: auto;
overflow: visible;
display: flex;
flex-direction: column;
align-items: center;
gap: 96px;
padding: calc(105px + 128px) 0 128px;
}
.projets-hero__medias {
display: none;
}
.projets-hero__title-layer {
position: static;
width: 100%;
}
.projets-hero__filtres {
display: flex;
flex-direction: column;
gap: var(--space-sm);
width: 100%;
padding-inline: var(--space-sm);
box-sizing: border-box;
}
.projets-hero__filtres-bouton {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
padding: calc(var(--space-sm) - 1px) var(--space-md);
background-color: var(--glass-bg);
border: 1px solid color-mix(in srgb, var(--color-black) 15%, transparent);
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 1;
text-transform: uppercase;
color: var(--color-black);
cursor: pointer;
}
.projets-hero__filtres-bouton:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.projets-hero__filtres-icone {
display: inline-flex;
width: 20px;
height: 20px;
}
.projets-hero__filtres-panneau {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
padding: var(--space-sm);
background-color: var(--glass-bg);
border-top: 1px solid var(--glass-border);
border-radius: var(--radius-md);
box-shadow: var(--glass-shadow);
opacity: 0;
transition: opacity var(--duration-base) var(--easing-out);
}
.projets-hero__filtres-panneau[hidden] {
display: none;
}
.projets-hero__filtres-panneau--ouvert {
opacity: 1;
}
.projets-hero__title-block {
max-width: none;
width: 100%;
padding-inline: var(--space-sm);
}
.projets-hero__pretitle-text {
font-size: var(--text-sm);
}
.projets-hero__title {
font-size: 40px;
letter-spacing: 0.02em;
}
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
.projets-hero__filtres-panneau {
transition: none;
}
}