html:has(.lch-logement-hero),
body:has(.lch-logement-hero) {
overflow-x: clip;
}
.lch-logement-hero {
--lch-lh-ink: #f7f2ea;
--lch-lh-muted: rgba(247, 242, 234, 0.86);
--lch-lh-gold: #c6b49a;
--lch-lh-dock: #f7f3ed;
--lch-lh-actions: #ebe4d8;
--lch-lh-dark: #2a2622;
--lch-lh-soft: #5f584f;
--lch-lh-book: #3a4a3d;
position: relative;
isolation: isolate;
width: 100%;
margin: 0;
background: #1a1612;
color: var(--lch-lh-ink);
font-family: "Outfit", system-ui, sans-serif;
}
.lch-logement-hero__stage {
position: relative;
min-height: clamp(28rem, 72vh, 44rem);
display: flex;
align-items: flex-end;
overflow: hidden;
}
.lch-logement-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.lch-logement-hero__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
}
.lch-logement-hero__veil {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(12, 10, 8, 0.55) 0%, rgba(12, 10, 8, 0.28) 42%, rgba(12, 10, 8, 0.12) 70%, rgba(12, 10, 8, 0.22) 100%),
linear-gradient(180deg, rgba(12, 10, 8, 0.28) 0%, transparent 32%, transparent 58%, rgba(12, 10, 8, 0.42) 100%);
}
.lch-logement-hero__copy {
position: relative;
z-index: 1;
width: min(40rem, calc(100% - 3rem));
margin: 0 auto 0 clamp(1.25rem, 5.5vw, 5rem);
padding: 7.5rem 0 5.5rem;
box-sizing: border-box;
}
.lch-logement-hero__brand {
margin: 0 0 1.35rem;
font-weight: 400;
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--lch-lh-gold);
}
.lch-logement-hero__eyebrow {
margin: 0 0 0.85rem;
font-weight: 400;
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.88);
}
.lch-logement-hero__title,
.wpcursor-component.lch-logement-hero .lch-logement-hero__title,
.lch-logement-hero h1.lch-logement-hero__title {
margin: 0 0 0.9rem !important;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-weight: 500 !important;
font-size: clamp(2.6rem, 6.2vw, 4.6rem) !important;
line-height: 1.05 !important;
letter-spacing: 0.01em !important;
color: #fff !important;
text-wrap: balance;
}
.lch-logement-hero__lead {
margin: 0;
max-width: 28rem;
font-weight: 300;
font-size: clamp(1rem, 1.6vw, 1.15rem);
line-height: 1.55;
color: var(--lch-lh-muted);
}
.lch-logement-hero__scroll {
position: absolute;
left: 50%;
bottom: 1.35rem;
z-index: 2;
display: grid;
place-items: center;
width: 2.35rem;
height: 2.35rem;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 999px;
transform: translateX(-50%);
color: #fff;
text-decoration: none;
background: rgba(12, 10, 8, 0.12);
backdrop-filter: blur(4px);
transition: background 0.25s ease, border-color 0.25s ease;
}
.lch-logement-hero__scroll:hover,
.lch-logement-hero__scroll:focus-visible {
background: rgba(12, 10, 8, 0.28);
border-color: #fff;
}
.lch-logement-hero__scroll span {
display: block;
width: 0.45rem;
height: 0.45rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
margin-top: -0.2rem;
}
.lch-logement-hero__dock {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
align-items: stretch;
background: var(--lch-lh-dock);
color: var(--lch-lh-dark);
border-top: 1px solid rgba(42, 38, 34, 0.06);
}
.lch-logement-hero__specs {
list-style: none;
margin: 0;
padding: 1.35rem clamp(1rem, 3vw, 2.25rem);
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
box-sizing: border-box;
}
.lch-logement-hero__spec {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
padding: 0.35rem 1rem;
border-right: 1px solid rgba(42, 38, 34, 0.1);
min-width: 0;
}
.lch-logement-hero__spec:first-child {
padding-left: 0.15rem;
}
.lch-logement-hero__spec:last-child {
border-right: 0;
}
.lch-logement-hero__spec-icon {
display: inline-flex;
color: #9a7d55;
margin-bottom: 0.15rem;
}
.lch-logement-hero__spec-value {
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 500;
font-size: clamp(0.98rem, 1.35vw, 1.15rem);
line-height: 1.25;
color: var(--lch-lh-dark);
text-wrap: balance;
}
.lch-logement-hero__spec-label {
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--lch-lh-soft);
font-weight: 400;
}
.lch-logement-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.25rem 1.35rem;
background: var(--lch-lh-actions);
box-sizing: border-box;
}
.lch-logement-hero__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 2.75rem;
padding: 0.7rem 1.15rem;
border-radius: 2px;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
line-height: 1.2;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
white-space: nowrap;
}
.lch-logement-hero__btn--book {
background: var(--lch-lh-book);
color: #f7f2ea;
border: 1px solid var(--lch-lh-book);
flex: 1 1 auto;
min-width: 7.5rem;
}
.lch-logement-hero__btn--book:hover,
.lch-logement-hero__btn--book:focus-visible {
background: #2f3d32;
border-color: #2f3d32;
transform: translateY(-1px);
}
.lch-logement-hero__btn--gift {
background: transparent;
color: #8a704c;
border: 1px solid rgba(154, 125, 85, 0.55);
flex: 1 1 auto;
min-width: 7rem;
}
.lch-logement-hero__btn--gift:hover,
.lch-logement-hero__btn--gift:focus-visible {
border-color: #8a704c;
background: rgba(255, 255, 255, 0.45);
transform: translateY(-1px);
}
@media (max-width: 1100px) {
.lch-logement-hero__specs {
grid-template-columns: repeat(3, minmax(0, 1fr));
row-gap: 1rem;
}
.lch-logement-hero__spec:nth-child(3) {
border-right: 0;
}
.lch-logement-hero__dock {
grid-template-columns: 1fr;
}
.lch-logement-hero__actions {
justify-content: stretch;
padding: 1.1rem 1.25rem 1.35rem;
}
}
@media (max-width: 700px) {
.lch-logement-hero__stage {
min-height: clamp(24rem, 68vh, 34rem);
}
.lch-logement-hero__copy {
width: calc(100% - 2.2rem);
margin-left: 1.1rem;
padding: 6.5rem 0 4.5rem;
}
.lch-logement-hero__brand {
display: none; }
.lch-logement-hero__specs {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 1.15rem 1.1rem;
gap: 1rem 0;
}
.lch-logement-hero__spec {
border-right: 0;
padding: 0 0.65rem 0 0;
}
.lch-logement-hero__spec:nth-child(odd) {
border-right: 1px solid rgba(42, 38, 34, 0.1);
padding-right: 0.85rem;
}
.lch-logement-hero__actions {
flex-direction: column;
align-items: stretch;
}
.lch-logement-hero__btn {
width: 100%;
letter-spacing: 0.1em;
}
}
@media (prefers-reduced-motion: reduce) {
.lch-logement-hero__btn {
transition: none;
}
}