.lch-logement-booking {
position: relative;
isolation: isolate;
--lch-lb-bg: #3f4a3d;
--lch-lb-ink: #f7f2ea;
--lch-lb-muted: rgba(247, 242, 234, 0.82);
--lch-lb-leaf: rgba(214, 200, 170, 0.22);
--lch-lb-bar: #fff;
--lch-lb-field: #6b645c;
--lch-lb-cta: #c6b49a;
--lch-lb-cta-ink: #2a2622;
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--lch-lb-bg);
color: var(--lch-lb-ink);
padding: clamp(2.75rem, 5.5vw, 4rem) 0;
font-family: "Outfit", system-ui, sans-serif;
}
.lch-logement-booking__botanical {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.lch-logement-booking__leaf {
position: absolute;
color: var(--lch-lb-leaf);
width: clamp(5rem, 10vw, 8rem);
opacity: 0.9;
}
.lch-logement-booking__leaf--left {
left: -0.5rem;
top: 50%;
transform: translateY(-50%);
}
.lch-logement-booking__leaf--right {
right: -0.5rem;
top: 50%;
transform: translateY(-50%) scaleX(-1);
}
.lch-logement-booking__inner {
position: relative;
z-index: 1;
width: min(1180px, calc(100% - 3rem));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
gap: clamp(1.5rem, 3.5vw, 2.75rem);
align-items: center;
box-sizing: border-box;
}
.lch-logement-booking__title,
.wpcursor-component.lch-logement-booking .lch-logement-booking__title,
.lch-logement-booking h2.lch-logement-booking__title {
margin: 0 0 0.65rem !important;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-weight: 500 !important;
font-size: clamp(1.9rem, 3.2vw, 2.55rem) !important;
line-height: 1.15 !important;
color: #fff !important;
}
.lch-logement-booking__text {
margin: 0;
max-width: 28rem;
font-weight: 300;
font-size: clamp(0.92rem, 1.3vw, 1.02rem);
line-height: 1.6;
color: var(--lch-lb-muted);
}
.lch-logement-booking__bar {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(7.5rem, 0.75fr) auto;
align-items: stretch;
gap: 0;
background: var(--lch-lb-bar);
border-radius: 999px;
padding: 0.45rem 0.45rem 0.45rem 1.1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
min-width: 0;
}
.lch-logement-booking__field {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.15rem;
padding: 0.35rem 0.95rem;
border-right: 1px solid rgba(42, 38, 34, 0.1);
min-width: 0;
cursor: pointer;
}
.lch-logement-booking__field--guests {
border-right: 0;
}
.lch-logement-booking__label {
font-size: 0.72rem;
letter-spacing: 0.04em;
color: #8a837a;
font-weight: 400;
}
.lch-logement-booking__control {
display: flex;
align-items: center;
gap: 0.45rem;
color: var(--lch-lb-field);
}
.lch-logement-booking__input,
.lch-logement-booking__select {
appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
width: 100%;
min-width: 0;
font: inherit;
font-size: 0.92rem;
font-weight: 400;
color: var(--lch-lb-cta-ink);
outline: none;
}
.lch-logement-booking__select {
cursor: pointer;
}
.lch-logement-booking__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
align-self: stretch;
border: 0;
border-radius: 999px;
background: var(--lch-lb-cta);
color: var(--lch-lb-cta-ink);
padding: 0.85rem 1.25rem;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.02em;
cursor: pointer;
white-space: nowrap;
transition: background 0.25s ease, transform 0.25s ease;
}
.lch-logement-booking__cta:hover,
.lch-logement-booking__cta:focus-visible {
background: #b8a588;
transform: translateY(-1px);
outline: none;
}
.lch-logement-booking__modal[hidden] {
display: none !important;
}
.lch-logement-booking__modal {
position: fixed;
inset: 0;
z-index: 100080;
display: grid;
place-items: center;
padding: 1.25rem;
}
.lch-logement-booking__modal-backdrop {
position: absolute;
inset: 0;
background: rgba(18, 16, 14, 0.62);
}
.lch-logement-booking__modal-dialog {
position: relative;
z-index: 1;
width: min(980px, 100%);
height: min(84vh, 760px);
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.lch-logement-booking__modal-close {
position: absolute;
top: 0.55rem;
right: 0.65rem;
z-index: 2;
width: 2.2rem;
height: 2.2rem;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: #2a2622;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.lch-logement-booking__modal-frame {
display: block;
width: 100%;
height: 100%;
border: 0;
background: #fff;
}
html.lch-octorate-open {
overflow: hidden;
}
@media (max-width: 1100px) {
.lch-logement-booking__inner {
grid-template-columns: 1fr;
}
.lch-logement-booking__bar {
border-radius: 18px;
padding: 0.75rem;
grid-template-columns: 1fr 1fr;
gap: 0.55rem;
}
.lch-logement-booking__field {
border: 1px solid rgba(42, 38, 34, 0.1);
border-radius: 12px;
padding: 0.7rem 0.85rem;
}
.lch-logement-booking__cta {
grid-column: 1 / -1;
border-radius: 12px;
min-height: 3rem;
}
}
@media (max-width: 640px) {
.lch-logement-booking__inner {
width: calc(100% - 2.2rem);
}
.lch-logement-booking__bar {
grid-template-columns: 1fr;
}
.lch-logement-booking__leaf {
opacity: 0.45;
}
.lch-logement-booking__modal-dialog {
height: min(90vh, 700px);
}
}
@media (prefers-reduced-motion: reduce) {
.lch-logement-booking__cta {
transition: none;
}
}
.lch-logement-booking--photo {
background: #1f241e;
}
.lch-logement-booking__media {
position: absolute;
inset: 0;
z-index: 0;
}
.lch-logement-booking__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: blur(1.2px) saturate(0.9);
transform: scale(1.04);
}
.lch-logement-booking__veil {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(20, 24, 18, 0.72) 0%, rgba(20, 24, 18, 0.55) 45%, rgba(20, 24, 18, 0.62) 100%);
}
.lch-logement-booking--photo .lch-logement-booking__inner,
.lch-logement-booking--photo .lch-logement-booking__leaf {
position: relative;
z-index: 1;
}
.lch-logement-booking--photo .lch-logement-booking__leaf {
opacity: 0.35;
}