body.calendar-open {
overflow: hidden;
}
.booking-calendar,
.booking-calendar *,
.booking-calendar *::before,
.booking-calendar *::after {
box-sizing: border-box;
}
.booking-calendar {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
width: 100vw;
height: 100dvh;
max-height: 100dvh;
padding: 0;
overflow: hidden;
background: var(--global-palette3);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.28s ease,
visibility 0.28s ease;
}
.booking-calendar.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.booking-calendar__backdrop {
display: none;
}
.booking-calendar__panel {
position: relative;
z-index: 1;
width: 100vw;
height: 100dvh;
max-width: none;
max-height: 100dvh;
padding: 0;
overflow: hidden;
background: transparent;
border: 0;
box-shadow: none;
opacity: 1;
transform: none;
}
.booking-calendar__split {
display: grid;
grid-template-columns: minmax(280px, 32vw) minmax(0, 1fr);
width: 100%;
height: 100dvh;
min-height: 100dvh;
max-height: 100dvh;
overflow: hidden;
} .booking-calendar__aside {
position: relative;
min-height: 100dvh;
overflow: hidden;
background: var(--global-palette3);
color: var(--global-palette7);
}
.booking-calendar__aside-bg {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(10, 18, 32, 0.98) 0%,
rgba(10, 18, 32, 0.88) 40%,
rgba(10, 18, 32, 0.55) 100%
),
linear-gradient(
180deg,
rgba(10, 18, 32, 0.42) 0%,
rgba(24, 32, 49, 0.88) 48%,
rgba(10, 18, 32, 0.98) 100%
),
url(https://hotelcarondebeaumarchais.com/wp-content/uploads/2026/04/Sans-titre-5-copie-6.jpg) right center / cover no-repeat;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
} .booking-calendar__aside-inner {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(32px, 5vw, 60px) clamp(20px, 3vw, 40px);
}
.booking-calendar__aside-top {
flex: 0 0 auto;
}
.booking-calendar__aside-body {
flex: 0 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(24px, 5vh, 56px) 0;
}
.booking-calendar__aside-footer {
flex: 0 0 auto;
} .booking-calendar__hotel {
margin: 0 0 8px;
text-align: center;
font-family: var(--global-heading-font-family);
font-size: clamp(26px, 2.5vw, 36px);
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--global-palette8);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.booking-calendar__place {
margin: 0; text-align: center;
font-family: "Cormorant SC", var(--global-heading-font-family);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--global-palette1);
opacity: 0.9;
}
.booking-calendar__aside-title {
margin: 0 0 20px;
font-family: var(--global-heading-font-family);
font-size: clamp(38px, 4.2vw, 58px);
font-weight: 400;
line-height: 0.96;
letter-spacing: -0.01em;
color: var(--global-palette8);
text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}
.booking-calendar__aside-title em {
color: var(--global-palette1);
font-style: italic;
text-shadow: 0 2px 6px rgba(212, 184, 122, 0.3);
}
.booking-calendar__aside-text {
max-width: 100%;
margin: 0;
font-family: var(--global-body-font-family);
font-size: clamp(16px, 1.2vw, 18px);
font-weight: 400;
line-height: 1.6;
color: rgba(245, 240, 232, 0.9);
}
.booking-calendar__benefits {
list-style: none;
display: grid;
gap: 12px;
margin: 0;
padding: 22px 0 0;
border-top: 1px solid rgba(212, 184, 122, 0.25);
}
.booking-calendar__benefits li {
position: relative;
padding-left: 18px;
font-family: "Cormorant SC", var(--global-heading-font-family);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.11em;
text-transform: uppercase;
color: rgba(212, 184, 122, 0.95);
}
.booking-calendar__benefits li::before {
content: "";
position: absolute;
left: 0;
top: 0.65em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--global-palette1);
box-shadow: 0 0 8px rgba(212, 184, 122, 0.4);
} .booking-calendar__content {
position: relative;
min-width: 0;
height: 100dvh;
max-height: 100dvh;
overflow: auto;
box-sizing: border-box;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.42) 0%,
rgba(255, 255, 255, 0.08) 44%,
rgba(237, 232, 222, 0.18) 100%
),
var(--global-palette8);
padding: clamp(18px, 2.5vw, 36px) clamp(28px, 4vw, 58px) 18px;
}
.booking-calendar__content .fb-widget,
.booking-calendar__content .widgets--wrapper,
.booking-calendar__content .fbw-calendar--container {
max-width: 100% !important;
min-height: 0 !important;
}
.booking-calendar__content .fbw-calendar--container {
max-width: 1060px !important;
margin: 0 auto !important;
} .booking-calendar__close {
position: fixed;
top: 22px;
right: 24px;
z-index: 10;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(24, 32, 49, 0.08) !important;
color: var(--global-palette3) !important;
font-family: Arial, sans-serif !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 1 !important;
cursor: pointer;
transition:
background-color 0.18s ease,
color 0.18s ease,
transform 0.18s ease;
}
.booking-calendar__close:hover,
.booking-calendar__close:focus-visible {
background: var(--global-palette3) !important;
color: var(--global-palette1) !important;
transform: scale(1.03);
outline: none !important;
} .booking-calendar .fb-widget,
.booking-calendar .fbw-calendar--container {
max-width: 100% !important;
overflow-x: hidden !important;
}
.booking-calendar .fbw-calendar--container {
font-family: var(--global-body-font-family) !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--global-palette4) !important;
} .booking-calendar .fbw-calendar--container h1,
.booking-calendar #widgets--wrapper h1 {
font-family: var(--global-heading-font-family) !important;
font-size: clamp(34px, 2.5vw, 44px) !important;
font-weight: 400 !important;
line-height: 1.05 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--global-palette3) !important;
}
.booking-calendar .fbw-calendar--title {
text-align: center !important;
} .booking-calendar .fbw-calendar--config,
.booking-calendar .fbw-calendar--controls,
.booking-calendar .fbw-calendar--header {
background: transparent !important;
border-bottom: 1px solid rgba(26, 20, 16, 0.12) !important;
padding-top: 4px !important;
padding-bottom: 8px !important;
}
.booking-calendar label,
.booking-calendar .fbw-label,
.booking-calendar .fbw-calendar--label,
.booking-calendar .fbw-calendar--config .fbw-calendar--label,
.booking-calendar .fbw-calendar--config label,
.booking-calendar .fbw-calendar--config .adult--label,
.booking-calendar .fbw-calendar--config .child--label,
.booking-calendar .fbw-calendar--config .promo--label,
.booking-calendar .fbw-calendar--dates .fbw-calendar--label,
.booking-calendar .fbw-calendar--dates .arrival--label,
.booking-calendar .fbw-calendar--dates .departure--label {
font-family: "Cormorant SC", var(--global-heading-font-family) !important;
color: var(--global-palette3) !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
}
.booking-calendar select,
.booking-calendar input {
height: 30px !important;
min-height: 30px !important;
padding: 4px 9px !important;
border: 1px solid rgba(26, 20, 16, 0.12) !important;
border-radius: 0 !important;
background: #fff !important;
color: var(--global-palette4) !important;
font-family: var(--global-body-font-family) !important;
font-size: 14px !important;
} .booking-calendar select {
appearance: auto !important;
-webkit-appearance: menulist !important;
-moz-appearance: menulist !important;
padding-right: 34px !important;
cursor: pointer;
}
.booking-calendar select:focus,
.booking-calendar input:focus {
border-color: var(--global-palette1) !important;
outline: none !important;
box-shadow: 0 0 0 1px rgba(212, 184, 122, 0.25) !important;
} .booking-calendar .fbw-calendar--dates.desktop {
min-height: 34px !important;
padding-top: 6px !important;
padding-bottom: 0 !important;
}
.booking-calendar .fbw-calendar--dates .value,
.booking-calendar .fbw-calendar--dates .arrival--value,
.booking-calendar .fbw-calendar--dates .departure--value {
font-family: var(--global-body-font-family) !important;
color: var(--global-palette4) !important;
font-size: 15px !important;
} .booking-calendar .fbw-cal-bottom--group {
margin-top: -18px !important;
}
.booking-calendar .fbw-calendar--month-name {
font-family: var(--global-body-font-family) !important;
color: var(--global-palette3) !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
.booking-calendar .fbw-calendar--month-table-container {
border-top: 0 !important;
}
.booking-calendar .fbw-calendar--month-bloc + .fbw-calendar--month-bloc {
position: relative;
}
.booking-calendar .fbw-calendar--month-bloc + .fbw-calendar--month-bloc::before {
content: "";
position: absolute;
left: -1px;
top: 54px;
bottom: 14px;
width: 1px;
transform: translateX(-50%);
background: linear-gradient(
to bottom,
transparent,
rgba(26, 20, 16, 0.10),
transparent
);
pointer-events: none;
}
.booking-calendar .fbw-calendar--weekdays {
font-family: var(--global-body-font-family) !important;
color: var(--global-palette4) !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: lowercase !important;
} .booking-calendar .fbw-calendar--button {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
opacity: 0.65 !important;
}
.booking-calendar .fbw-calendar--button:hover {
opacity: 1 !important;
background: rgba(212, 184, 122, 0.10) !important;
}
.booking-calendar .fbw-calendar--button svg {
width: 16px !important;
height: 16px !important;
}
.booking-calendar .fbw-calendar--button svg line {
stroke: var(--global-palette3) !important;
stroke-width: 2 !important;
} .booking-calendar .fbw-calendar--day {
background: rgba(245, 240, 232, 0.48) !important;
border: 1px solid rgba(26, 20, 16, 0.06) !important;
border-radius: 0 !important;
transition:
background-color 0.15s ease,
border-color 0.15s ease;
} .booking-calendar .fbw-calendar--day:not(.valid_day):not(.available_day):not(.unavailable_day) {
background: transparent !important;
border-color: transparent !important;
} .booking-calendar .fbw-calendar--day.available_day,
.booking-calendar .fbw-calendar--day.valid_day {
background: rgba(250, 247, 242, 0.92) !important;
} .booking-calendar .fbw-calendar--day.unavailable_day {
background: rgba(237, 232, 222, 0.52) !important;
} .booking-calendar .fbw-calendar--day.valid_day:hover {
background: rgba(212, 184, 122, 0.16) !important;
border-color: rgba(168, 134, 62, 0.22) !important;
}
.booking-calendar .fbw-calendar--day.valid_day:hover:not(.chosen_day) .day--number,
.booking-calendar .fbw-calendar--day.valid_day:hover:not(.chosen_day) .day--in,
.booking-calendar .fbw-calendar--day.valid_day:hover:not(.chosen_day) .day--out,
.booking-calendar .fbw-calendar--day.valid_day:hover:not(.chosen_day) .day--min-stay,
.booking-calendar .fbw-calendar--day.valid_day:hover:not(.chosen_day) .min_stay-details,
.booking-calendar .fbw-calendar--day.valid_day:hover:not(.chosen_day) .min_stay-details span {
color: var(--global-palette4) !important;
}
.booking-calendar .fbw-calendar--day.valid_day:hover:not(.chosen_day) .day--price,
.booking-calendar .fbw-calendar--day.valid_day:hover:not(.chosen_day) .day--unavailable-price {
color: var(--global-palette5) !important;
} .booking-calendar .day--number,
.booking-calendar .day--price,
.booking-calendar .day--unavailable-price {
font-family: var(--global-body-font-family) !important;
}
.booking-calendar .fbw-calendar--day .day--number {
font-size: 14px !important;
font-weight: 500 !important;
color: var(--global-palette4) !important;
}
.booking-calendar .fbw-calendar--day .day--price {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--global-palette5) !important;
opacity: 1 !important;
}
.booking-calendar .fbw-calendar--day .day--unavailable-price {
font-size: 10px !important;
color: var(--global-palette6) !important;
opacity: 0.75 !important;
} .booking-calendar .best-price.day--price,
.booking-calendar .best-price .day--price {
color: var(--global-palette2) !important;
font-weight: 700 !important;
}
.booking-calendar .best-price::after {
border-top-color: var(--global-palette2) !important;
} .booking-calendar .last-room::before {
background-color: var(--global-palette3) !important;
} .booking-calendar .min_stay {
background-color: rgba(237, 232, 222, 0.78) !important;
} .booking-calendar .fbw-calendar--day.chosen_day,
.booking-calendar .fbw-calendar--day.chosen_day.valid_day,
.booking-calendar .fbw-calendar--day.chosen_day:hover,
.booking-calendar .fbw-calendar--day.chosen_day.valid_day:hover {
background: var(--global-palette3) !important;
border-color: rgba(212, 184, 122, 0.55) !important;
box-shadow: inset 0 0 0 1px rgba(212, 184, 122, 0.32) !important;
}
.booking-calendar .fbw-calendar--day.chosen_day,
.booking-calendar .fbw-calendar--day.chosen_day:hover,
.booking-calendar .fbw-calendar--day.chosen_day.valid_day:hover,
.booking-calendar .fbw-calendar--day.chosen_day .day--number,
.booking-calendar .fbw-calendar--day.chosen_day .day--price,
.booking-calendar .fbw-calendar--day.chosen_day .day--unavailable-price,
.booking-calendar .fbw-calendar--day.chosen_day .day--in,
.booking-calendar .fbw-calendar--day.chosen_day .day--out,
.booking-calendar .fbw-calendar--day.chosen_day .day--min-stay,
.booking-calendar .fbw-calendar--day.chosen_day .min_stay-details,
.booking-calendar .fbw-calendar--day.chosen_day .min_stay-details span,
.booking-calendar .fbw-calendar--day.chosen_day:hover .day--number,
.booking-calendar .fbw-calendar--day.chosen_day:hover .day--price,
.booking-calendar .fbw-calendar--day.chosen_day:hover .day--unavailable-price,
.booking-calendar .fbw-calendar--day.chosen_day:hover .day--in,
.booking-calendar .fbw-calendar--day.chosen_day:hover .day--out,
.booking-calendar .fbw-calendar--day.chosen_day:hover .day--min-stay,
.booking-calendar .fbw-calendar--day.chosen_day:hover .min_stay-details,
.booking-calendar .fbw-calendar--day.chosen_day:hover .min_stay-details span {
color: #fff !important;
opacity: 1 !important;
} .booking-calendar .fbw-calendar--day.in-range,
.booking-calendar .fbw-calendar--day.range,
.booking-calendar .fbw-calendar--day.between {
background: var(--global-palette9) !important;
border-color: rgba(212, 184, 122, 0.22) !important;
}
.booking-calendar .fbw-calendar--day.in-range .day--number,
.booking-calendar .fbw-calendar--day.range .day--number,
.booking-calendar .fbw-calendar--day.between .day--number {
color: var(--global-palette3) !important;
} .booking-calendar .fbw-calendar--bottom {
margin-top: 6px !important;
padding: 10px 0 0 !important;
}
.booking-calendar .fbw-calendar--legend {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 14px !important;
margin-left: 0 !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: left !important;
opacity: 0.95;
}
.booking-calendar .fbw-calendar--legend .legend-cal {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
.booking-calendar .fbw-calendar--legend .legend-txt {
text-align: left !important;
}
.booking-calendar .legend-cal.best-price--legend .legend-txt {
color: var(--global-palette2) !important;
}
.booking-calendar .legend-cal .legend-color--best {
border-top-color: var(--global-palette2) !important;
}
.booking-calendar .legend-cal .legend-color--last {
background-color: var(--global-palette3) !important;
}
.booking-calendar .fbw-calendar--bottom .fbw-calendar--action {
margin-left: 12px !important;
}
.booking-calendar .fbw-calendar--action .next {
min-width: 170px !important;
background: var(--global-palette3) !important;
border: 1px solid rgba(212, 184, 122, 0.55) !important;
border-radius: 0 !important;
box-shadow: none !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
.booking-calendar .fbw-calendar--action .next:hover {
background: var(--global-palette1) !important;
border-color: var(--global-palette1) !important;
}
.booking-calendar .fbw-calendar--action .next .next--button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 40px !important;
padding: 0 30px !important;
color: var(--global-palette1) !important;
font-family: "Cormorant SC", var(--global-heading-font-family) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
.booking-calendar .fbw-calendar--action .next:hover .next--button {
color: var(--global-palette3) !important;
} .booking-calendar .fbw-calendar--action .best--price {
color: var(--global-palette3) !important;
}  @media (min-width: 1281px) {
.booking-calendar__split {
display: grid;
grid-template-columns: minmax(280px, 32vw) minmax(0, 1fr);
}
.booking-calendar__aside {
display: block;
}
} @media (max-width: 1280px) {
.booking-calendar__split {
display: block;
width: 100%;
}
.booking-calendar__aside {
display: none !important;
}
.booking-calendar__content {
width: 100vw;
background: var(--global-palette8);
padding: 48px clamp(18px, 4vw, 56px) 16px !important;
}
.booking-calendar__content .fbw-calendar--container {
max-width: 1060px !important;
margin: 0 auto !important;
}
.booking-calendar__close {
top: 12px;
right: 12px;
background: var(--global-palette3) !important;
color: var(--global-palette1) !important;
}
} @media (min-width: 768px) and (max-height: 820px) {
.booking-calendar__content {
padding-top: 16px !important;
padding-bottom: 14px !important;
}
.booking-calendar .fbw-calendar--config,
.booking-calendar .fbw-calendar--controls,
.booking-calendar .fbw-calendar--header {
padding-top: 6px !important;
padding-bottom: 8px !important;
}
.booking-calendar .fbw-calendar--action {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.booking-calendar .day--number {
font-size: 13px !important;
}
.booking-calendar .day--price {
font-size: 11px !important;
}
.booking-calendar .fbw-calendar--bottom {
margin-top: 10px !important;
padding-top: 10px !important;
}
.booking-calendar .fbw-calendar--action .next .next--button {
min-height: 38px !important;
}
.booking-calendar .fbw-calendar--month-bloc + .fbw-calendar--month-bloc::before {
top: 40px;
bottom: 8px;
}
} @media (max-width: 767px) {
.booking-calendar__content {
padding: 54px 14px 22px !important;
}
.booking-calendar__content .fbw-calendar--container {
max-width: 100% !important;
margin: 0 !important;
}
.booking-calendar__close {
top: 10px;
right: 10px;
}
.booking-calendar .fbw-calendar--month-bloc + .fbw-calendar--month-bloc::before {
display: none;
}
.booking-calendar .day--number {
font-size: 14px !important;
}
.booking-calendar .day--price {
font-size: 12px !important;
}
.booking-calendar .fbw-calendar--bottom {
margin-top: 12px !important;
}
.booking-calendar .fbw-calendar--action .next {
min-width: 100% !important;
}
.booking-calendar .fbw-calendar--action .next .next--button {
width: 100% !important;
}
} .modal-container {
z-index: 1000000 !important;
}