.cpl {
position: relative;
width: 100%;
overflow: hidden;
background-color: #3c3c3b;
height: 51.5625vw; min-height: 560px; }
.cpl .cpl-swiper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.cpl .swiper-slide {
position: relative;
height: 100%;
}
.cpl .cpl-img {
width: 100%;
height: 100%;
object-fit: cover;
} .cpl .cpl-filtre {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
mix-blend-mode: multiply;
background: rgba(60, 60, 59, 0.3);
} .cpl .cpl-texte {
position: absolute;
top: 0;
bottom: clamp(48px, 8.62vw, 149px);
left: 26.331%; z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
max-width: 60%;
pointer-events: none;
} .cpl .cpl-texte--fixe {
z-index: 3;
}
.cpl .cpl-ligne {
flex: 1 1 auto;
min-height: 0;
width: 3px;
margin-left: 8px; margin-bottom: clamp(12px, 1.27vw, 22px);
background-color: #e95c15;
}
.cpl .cpl-titre {
flex: none;
margin: 0;
font-family: "DM Serif Display", serif;
color: #fff;
opacity: 0.9;
font-size: clamp(40px, 5.2083vw, 90px); line-height: 1.0556; } .cpl .cpl-titre--long {
font-size: clamp(40px, 3.4722vw, 60px);
} .cpl .cpl-nav {
position: absolute;
top: 50%;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
cursor: pointer;
border: 1px solid #fff;
border-radius: 9999px;
background-color: transparent;
color: #fff;
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
width: clamp(48px, 4.6296vw, 80px); height: clamp(48px, 4.6296vw, 80px);
}
.cpl .cpl-nav:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.cpl .cpl-nav--prev {
left: clamp(16px, 4.34vw, 75px); }
.cpl .cpl-nav--next {
right: clamp(16px, 4.34vw, 75px);
}
.cpl .cpl-chevron {
width: 22.5%; height: auto;
}
.cpl .cpl-nav--cache {
display: none;
} @media (max-width: 767px) {
.cpl .cpl-texte {
left: 20px;
bottom: 48px;
max-width: calc(100% - 40px);
}
.cpl .cpl-nav {
top: 160px;
}
.cpl .cpl-ligne {
flex: 0 0 80px;
}
.cpl .cpl-titre {
font-size: clamp(26px, 7.5vw, 34px);
line-height: 1.15;
}
}