.lch-chambres {
--lch-ch-ink: #1f1c18;
--lch-ch-muted: #6b6560;
--lch-ch-accent: #C39D7A;
--lch-ch-bg: #ffffff;
--lch-ch-gray: #cfcac2;
--lch-ch-slide: min(72vw, 62rem);
--lch-ch-gap: 0.55rem;
position: relative;
width: 100vw;
max-width: 100vw;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: var(--lch-ch-bg);
color: var(--lch-ch-ink);
font-family: "Outfit", system-ui, sans-serif;
box-sizing: border-box;
padding: clamp(1.35rem, 2.8vw, 2.25rem) 0 clamp(3.25rem, 6vw, 4.5rem);
overflow: clip;
}
.lch-chambres__intro {
max-width: 42rem;
margin: 0 auto clamp(2.25rem, 4.5vw, 3.25rem);
padding: 0 clamp(1.25rem, 4vw, 2rem);
text-align: center;
}
.lch-chambres__subtitle {
margin: 0 0 -0.35rem;
font-family: "Great Vibes", "Segoe Script", cursive;
font-weight: 400;
font-size: clamp(1.85rem, 3.2vw, 2.55rem);
line-height: 1;
color: var(--lch-ch-accent);
}
.lch-chambres__title,
.wpcursor-component.lch-chambres .lch-chambres__title,
.lch-chambres h2.lch-chambres__title {
margin: 0 0 1rem !important;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-weight: 500 !important;
font-size: clamp(2.4rem, 4.5vw, 3.4rem) !important;
line-height: 1.1 !important;
letter-spacing: 0.01em;
text-transform: none !important;
color: var(--lch-ch-ink) !important;
}
.lch-chambres__desc {
margin: 0 auto 1.5rem;
max-width: 36rem;
font-size: clamp(0.95rem, 1.15vw, 1.05rem);
line-height: 1.75;
font-weight: 300;
color: var(--lch-ch-muted);
}
.lch-chambres__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.6rem;
border: 1px solid var(--lch-ch-accent);
background: transparent;
color: var(--lch-ch-ink) !important;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.78rem;
font-weight: 500;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.lch-chambres__cta:hover,
.lch-chambres__cta:focus-visible {
background: var(--lch-ch-accent);
border-color: var(--lch-ch-accent);
color: #fff !important;
}
.lch-chambres__stage {
position: relative;
width: 100%;
}
.lch-chambres__viewport {
width: 100%;
overflow: hidden;
touch-action: pan-y;
}
.lch-chambres__track {
list-style: none;
margin: 0; padding: 0 max(0px, calc((100% - var(--lch-ch-slide)) / 2));
display: flex;
gap: var(--lch-ch-gap);
will-change: transform;
transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); transform: translate3d(calc(-1 * (var(--lch-ch-slide) + var(--lch-ch-gap))), 0, 0);
}
.lch-chambres__slide {
flex: 0 0 var(--lch-ch-slide);
width: var(--lch-ch-slide);
min-width: 0;
margin: 0;
}
.lch-chambres__card {
position: relative;
display: block;
height: clamp(18rem, 54vh, 36rem);
overflow: hidden;
background: var(--lch-ch-gray);
text-decoration: none;
color: inherit;
}
.lch-chambres__placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #cfc9c0 0%, #bdb7ae 48%, #b0aaa0 100%);
}
.lch-chambres__slide.is-active .lch-chambres__placeholder {
background: linear-gradient(135deg, #d9d5cf 0%, #cfcac2 48%, #c4bfb6 100%);
}
.lch-chambres__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.02);
transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.lch-chambres__veil {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(255, 255, 255, 0.32);
pointer-events: none;
transition: opacity 0.55s ease;
opacity: 1;
}
.lch-chambres__caption {
position: absolute;
left: 1.25rem;
bottom: 1.1rem;
z-index: 2;
margin: 0;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(1.05rem, 1.8vw, 1.35rem);
letter-spacing: 0.02em;
color: var(--lch-ch-ink);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.45s ease, transform 0.45s ease;
pointer-events: none;
} .lch-chambres__slide.is-active .lch-chambres__veil {
opacity: 0;
}
.lch-chambres__slide.is-active .lch-chambres__caption {
opacity: 1;
transform: translateY(0);
}
.lch-chambres__slide.is-active .lch-chambres__image {
transform: scale(1);
}
.lch-chambres__nav {
position: absolute;
top: 50%;
z-index: 4;
transform: translateY(-50%);
width: 2.5rem;
height: 2.5rem;
display: grid;
place-items: center;
border: 0;
background: transparent;
color: var(--lch-ch-ink);
cursor: pointer;
opacity: 0.7;
transition: opacity 0.25s ease, color 0.25s ease;
}
.lch-chambres__nav:hover,
.lch-chambres__nav:focus-visible {
opacity: 1;
color: var(--lch-ch-accent);
}
.lch-chambres__nav--prev {
left: max(0.35rem, calc((100vw - var(--lch-ch-slide)) / 4 - 0.5rem));
}
.lch-chambres__nav--next {
right: max(0.35rem, calc((100vw - var(--lch-ch-slide)) / 4 - 0.5rem));
}
.lch-chambres__dots {
position: relative;
left: auto;
bottom: auto;
transform: none;
z-index: 4;
display: flex;
justify-content: center;
gap: 0.55rem;
margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
padding: 0;
}
.lch-chambres__dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 999px;
border: 1.5px solid rgba(31, 28, 24, 0.45);
background: transparent;
padding: 0;
cursor: pointer;
transition: background 0.25s ease, border-color 0.25s ease;
}
.lch-chambres__dot.is-active {
background: rgba(31, 28, 24, 0.55);
border-color: rgba(31, 28, 24, 0.55);
}
@media (max-width: 900px) {
.lch-chambres {
--lch-ch-slide: 76vw;
}
.lch-chambres__card {
height: clamp(16rem, 48vh, 28rem);
}
}
@media (max-width: 560px) {
.lch-chambres {
--lch-ch-slide: 80vw;
--lch-ch-gap: 0.35rem;
}
.lch-chambres__card {
height: clamp(14rem, 42vh, 22rem);
}
.lch-chambres__caption {
bottom: 2.5rem;
left: 0.85rem;
}
}
@media (prefers-reduced-motion: reduce) {
.lch-chambres__track,
.lch-chambres__image,
.lch-chambres__veil,
.lch-chambres__caption,
.lch-chambres__cta,
.lch-chambres__nav {
transition: none;
}
}