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;
} .booking-calendar .fbw-calendar--action {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 22px !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
}
.booking-calendar .fbw-calendar--action .best-price {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 1px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important; text-align: right !important;
}
.booking-calendar .fbw-calendar--action .best--label {
font-family: "Cormorant SC", var(--global-heading-font-family) !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--global-palette4) !important;
opacity: 0.75;
}
.booking-calendar .fbw-calendar--action .best--price {
margin: 0 !important;
font-family: var(--global-heading-font-family) !important;
font-size: 26px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
}
.booking-calendar .fbw-calendar--action .best--taxes-details {
display: block !important;
margin: 2px 0 0 !important;
text-align: right !important;
}
.booking-calendar .fbw-calendar--action .taxes--line {
display: block !important;
font-family: var(--global-body-font-family) !important;
font-size: 11px !important;
line-height: 1.35 !important;
color: var(--global-palette4) !important;
opacity: 0.7;
} .booking-calendar .fbw-calendar--action .taxes--excl {
font-size: 0 !important;
}
.booking-calendar .fbw-calendar--action .taxes--excl::before {
content: "Taxe de séjour en sus : ";
}
html[lang^="en"] .booking-calendar .fbw-calendar--action .taxes--excl::before {
content: "City tax not included: ";
}
.booking-calendar .fbw-calendar--action .taxes--excl::before,
.booking-calendar .fbw-calendar--action .taxes--excl .taxes--amount {
font-size: 11px !important;
} .booking-calendar .fbw-calendar--action .next {
flex: 0 0 auto !important;
align-self: center !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.booking-calendar .fbw-calendar--action .next .next--button {
width: 100% !important;
height: 42px !important;
min-height: 42px !important;
white-space: nowrap !important;
} .booking-calendar .config--child-number {
border: 0 !important;
} @media (max-width: 767px) { .booking-calendar__content {
padding-bottom: 130px !important;
} .booking-calendar__content {
padding-top: 14px !important;
}
.booking-calendar .fbw-calendar--title {
margin: 0 0 12px !important;
padding: 0 40px 0 0 !important;
text-align: left !important;
}
.booking-calendar .fbw-calendar--container h1,
.booking-calendar #widgets--wrapper h1 {
font-size: 26px !important;
line-height: 32px !important;
text-align: left !important;
}
.booking-calendar__close {
top: 18px !important;
right: 14px !important;
} .booking-calendar .fwb-cal-bottom--group,
.booking-calendar .fbw-cal-bottom--group {
order: 1;
margin-top: 0 !important;
}
.booking-calendar .fbw-calendar--config {
order: 2;
margin-top: 6px !important;
padding-top: 16px !important;
border-top: 1px solid rgba(26, 20, 16, 0.12) !important;
border-bottom: 0 !important;
}
.booking-calendar .fbw-calendar--bottom {
flex-wrap: wrap !important;
} .booking-calendar .fbw-calendar--dates.mobile {
flex: 1 1 100% !important;
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 0 16px;
margin: 12px 0 0 !important;
padding: 12px 0 0 !important;
border-top: 1px solid rgba(26, 20, 16, 0.12) !important;
}
.booking-calendar .fbw-calendar--dates.mobile fieldset {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
min-width: 0;
}
.booking-calendar .fbw-calendar--dates.mobile .fbw-calendar--label {
display: block !important;
margin: 0 0 4px !important;
}
.booking-calendar .fbw-calendar--dates.mobile .value {
display: block !important;
min-height: 1.4em;
text-align: left !important;
}
.booking-calendar .fbw-calendar--dates.mobile .value:empty::before {
content: "—";
opacity: 0.35;
}
.booking-calendar .fbw-calendar--dates.mobile .date--departure {
padding-left: 16px !important;
border-left: 1px solid rgba(26, 20, 16, 0.12) !important;
}
.booking-calendar .fbw-calendar--bottom .fbw-calendar--action,
.booking-calendar .fbw-calendar--action {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 5 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
min-height: 92px !important; margin: 0 !important;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
background: var(--global-palette8) !important;
border-top: 1px solid rgba(212, 184, 122, 0.55) !important;
box-shadow: 0 -10px 30px rgba(24, 32, 49, 0.10) !important;
} .booking-calendar .fbw-calendar--action:not(:has(.best-price))::before {
content: "Choisissez vos dates";
flex: 1 1 auto;
font-family: "Cormorant SC", var(--global-heading-font-family);
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--global-palette3);
opacity: 0.75;
}
html[lang^="en"] .booking-calendar .fbw-calendar--action:not(:has(.best-price))::before {
content: "Select your dates";
} .booking-calendar:has(.departure--value:not(:empty)) .fbw-calendar--action:not(:has(.best-price))::before {
content: "Cliquez sur Réserver pour voir les tarifs de ces dates";
font-family: var(--global-body-font-family);
font-size: 13px;
line-height: 1.35;
letter-spacing: 0;
text-transform: none;
}
html[lang^="en"] .booking-calendar:has(.departure--value:not(:empty)) .fbw-calendar--action:not(:has(.best-price))::before {
content: "Click Book to see the rates for these dates";
}
.booking-calendar .fbw-calendar--action .best-price {
flex: 1 1 auto !important;
min-width: 0 !important;
align-items: flex-start !important;
text-align: left !important;
}
.booking-calendar .fbw-calendar--action .best--label {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 10px !important;
}
.booking-calendar .fbw-calendar--action .best--price {
font-size: 22px !important;
}
.booking-calendar .fbw-calendar--action .best--taxes-details {
text-align: left !important;
}
.booking-calendar .fbw-calendar--action .taxes--line,
.booking-calendar .fbw-calendar--action .taxes--excl::before,
.booking-calendar .fbw-calendar--action .taxes--excl .taxes--amount {
font-size: 10px !important;
} .booking-calendar .fbw-calendar--action .next {
flex: 0 0 auto !important;
min-width: 0 !important;
width: auto !important;
}
.booking-calendar .fbw-calendar--action .next .next--button {
width: auto !important;
padding: 0 22px !important;
} .booking-calendar__close {
z-index: 10;
}
} @media (max-width: 1023px) {
.booking-calendar .fbw-calendar--day .day--price {
white-space: nowrap !important;
font-size: 11px !important;
letter-spacing: -0.02em !important;
}
}
@media (max-width: 400px) {
.booking-calendar .fbw-calendar--day .day--price {
font-size: 10px !important;
}
} @media (min-width: 768px) and (max-width: 1023px) {
.booking-calendar .fbw-calendar {
display: flex !important;
gap: 28px;
}
.booking-calendar .fbw-calendar--month-bloc {
display: block !important;
flex: 1 1 0;
align-self: flex-start; width: auto !important;
min-width: 0;
} .booking-calendar .fbw-calendar--month-bloc + .fbw-calendar--month-bloc::before {
left: -14px;
}
} .booking-calendar .fbw-calendar--month-table-container {
overflow: visible !important;
} @media (max-width: 767px) { .booking-calendar .fb-widget,
.booking-calendar .fbw-calendar--container {
overflow-x: clip !important;
}
.booking-calendar__content {
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 0 !important;
}
.booking-calendar .fbw-calendar--title {
position: sticky;
top: 0;
z-index: 4;
margin: 0 -10px 14px !important; padding: 14px 60px 12px 18px !important;
background: var(--global-palette8);
border-bottom: 1px solid rgba(212, 184, 122, 0.55);
box-shadow: 0 10px 30px rgba(24, 32, 49, 0.08);
text-align: left !important;
}
.booking-calendar .fbw-calendar--container h1,
.booking-calendar #widgets--wrapper h1 {
font-size: 27px !important;
line-height: 30px !important;
color: var(--global-palette3) !important;
}
.booking-calendar .fbw-calendar--title::after {
content: "Paris · Le Marais";
display: block;
margin-top: 3px;
font-family: "Cormorant SC", var(--global-heading-font-family);
font-size: 11px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--global-palette1);
}
html[lang^="en"] .booking-calendar .fbw-calendar--title::after {
content: "Paris · The Marais";
} .booking-calendar__close {
top: 23px !important;
right: 16px !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
min-height: 30px !important;
max-width: 30px !important;
max-height: 30px !important;
font-size: 20px !important;
} .booking-calendar .fbw-calendar--container {
padding-left: 0 !important;
padding-right: 0 !important;
} .booking-calendar .fbw-calendar,
.booking-calendar .fbw-calendar--month-bloc {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
}
.booking-calendar .fbw-calendar--month-name {
font-size: 15px !important;
letter-spacing: 0.08em !important;
} .booking-calendar .fbw-calendar--weekdays {
height: 34px !important;
padding: 0 !important;
vertical-align: middle !important;
}
.booking-calendar .fbw-calendar--day .day--number {
font-size: 15px !important;
}
} @media (max-width: 767px) and (min-height: 700px) {
.booking-calendar .fbw-calendar--day {
height: 62px !important;
}
} @media (max-width: 767px) and (max-height: 699px) {
.booking-calendar .fbw-calendar--day {
height: 52px !important;
}
}
@media (max-width: 767px) and (max-height: 699px) { .booking-calendar .fbw-calendar--day .day--number {
padding-top: 3px !important;
margin-bottom: 1px !important;
line-height: 20px !important;
}
.booking-calendar .fbw-calendar--day .day--price,
.booking-calendar .fbw-calendar--day .day--unavailable-price,
.booking-calendar .fbw-calendar--day .day--in,
.booking-calendar .fbw-calendar--day .day--out {
min-height: 0 !important;
line-height: 14px !important;
}
}
@media (max-width: 767px) { .booking-calendar table.fbw-calendar--month {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
} @media (min-width: 768px) {
.booking-calendar .fbw-calendar--title {
margin-bottom: 16px !important;
}
.booking-calendar .fbw-calendar--config {
margin-bottom: 6px !important;
} .booking-calendar .fbw-calendar--dates.desktop {
display: flex !important;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 28px;
min-height: 0 !important;
margin: 0 0 8px !important;
padding: 6px 0 0 !important;
}
.booking-calendar .fbw-calendar--dates.desktop fieldset {
display: flex !important;
align-items: baseline;
gap: 10px;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.booking-calendar .fbw-calendar--dates.desktop .value {
min-height: 1.3em;
} .booking-calendar .fbw-calendar--weekdays {
height: 30px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
vertical-align: middle !important;
} .booking-calendar .fbw-calendar--day {
height: clamp(44px, calc((100dvh - 355px) / 6), 62px) !important;
padding-top: 3px !important;
}
.booking-calendar .fbw-calendar--day .day--number {
padding-top: 2px !important;
margin-bottom: 1px !important;
line-height: 20px !important;
}
.booking-calendar .fbw-calendar--day .day--price,
.booking-calendar .fbw-calendar--day .day--unavailable-price,
.booking-calendar .fbw-calendar--day .day--in,
.booking-calendar .fbw-calendar--day .day--out {
min-height: 0 !important;
line-height: 15px !important;
}
.booking-calendar .fbw-calendar--bottom {
margin-bottom: 0 !important;
} .booking-calendar .fbw-calendar--action .best-price {
display: grid !important;
grid-template-columns: auto auto;
grid-template-areas:
"label price"
"taxes price";
align-items: center;
column-gap: 14px !important;
row-gap: 2px !important;
}
.booking-calendar .fbw-calendar--action .best--label {
grid-area: label;
align-self: end;
text-align: right;
}
.booking-calendar .fbw-calendar--action .best--price {
grid-area: price;
font-size: 28px !important;
line-height: 1 !important;
}
.booking-calendar .fbw-calendar--action .best--taxes-details {
grid-area: taxes;
align-self: start;
margin: 0 !important;
}
.booking-calendar .fbw-calendar--action .taxes--line {
line-height: 1.3 !important;
}
}
@media (min-width: 768px) { .booking-calendar .fbw-calendar--bottom {
flex-wrap: nowrap !important;
align-items: center !important;
gap: 16px;
}
.booking-calendar .fbw-calendar--legend {
flex: 1 1 auto !important;
min-width: 0;
row-gap: 4px !important;
}
.booking-calendar .fbw-calendar--bottom .fbw-calendar--action {
flex: 0 0 auto !important;
margin-left: 0 !important;
}
}
@media (min-width: 768px) { .booking-calendar .fbw-calendar--day {
position: relative;
}
.booking-calendar .fbw-calendar--day .day--min-stay {
position: absolute !important;
left: 4px;
right: 4px;
bottom: 2px;
height: 4px !important;
margin: 0 !important;
}
} .booking-calendar .fbw-calendar--action .best--label {
font-size: 13px !important;
letter-spacing: 0.08em !important;
opacity: 0.85;
}
.booking-calendar .fbw-calendar--action .best--price {
font-size: 32px !important;
}
.booking-calendar .fbw-calendar--action .taxes--line,
.booking-calendar .fbw-calendar--action .taxes--excl::before,
.booking-calendar .fbw-calendar--action .taxes--excl .taxes--amount {
font-size: 13.5px !important;
}
.booking-calendar .fbw-calendar--action .taxes--line {
line-height: 1.25 !important;
opacity: 0.85;
}
@media (max-width: 767px) {
.booking-calendar .fbw-calendar--action .best--label {
font-size: 12px !important;
}
.booking-calendar .fbw-calendar--action .best--price {
font-size: 26px !important;
}
.booking-calendar .fbw-calendar--action .taxes--line,
.booking-calendar .fbw-calendar--action .taxes--excl::before,
.booking-calendar .fbw-calendar--action .taxes--excl .taxes--amount {
font-size: 12.5px !important;
}
} .booking-calendar .fbw-calendar--action .taxes--line.taxes--excl {
font-size: 0 !important;
}
@media (max-width: 767px) { .booking-calendar .fbw-calendar--action .best--label {
font-size: 11.5px !important;
letter-spacing: 0.03em !important;
}
.booking-calendar .fbw-calendar--action .taxes--line {
white-space: nowrap;
}
.booking-calendar .fbw-calendar--action .taxes--line,
.booking-calendar .fbw-calendar--action .taxes--excl::before,
.booking-calendar .fbw-calendar--action .taxes--excl .taxes--amount {
font-size: 12px !important;
}
.booking-calendar .fbw-calendar--action .next .next--button {
padding: 0 18px !important;
} .booking-calendar .fbw-calendar--bottom .fbw-calendar--action,
.booking-calendar .fbw-calendar--action {
min-height: 100px !important;
}
.booking-calendar__content {
padding-bottom: 140px !important;
}
} .booking-calendar .fb-widget,
.booking-calendar .fbw-calendar--container {
overflow-x: clip !important;
overflow-y: visible !important;
} @media (min-width: 768px) {
.booking-calendar .fbw-calendar--day {
height: clamp(44px, calc((100dvh - 355px) / 6), 72px) !important;
}
.booking-calendar__content {
display: flex;
flex-direction: column;
}
.booking-calendar__content > .fb-widget {
margin-top: auto;
margin-bottom: auto;
}
} @media (min-width: 768px) { .booking-calendar__content {
padding-top: 22px !important;
}
.booking-calendar__content > .fb-widget {
margin-top: 0;
margin-bottom: auto;
}
.booking-calendar .fbw-calendar--title {
margin-top: 0 !important;
padding-top: 0 !important;
} .booking-calendar .fbw-calendar--day {
height: clamp(44px, calc((100dvh - 365px) / 6), 76px) !important;
} .booking-calendar .fbw-calendar--action .best-price {
align-items: start !important;
}
.booking-calendar .fbw-calendar--action .best--label {
align-self: center !important;
}
.booking-calendar .fbw-calendar--action .best--price {
align-self: start !important;
margin-top: -3px !important; } .booking-calendar .fbw-calendar--dates.desktop {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 260px));
gap: 0 16px !important;
margin: 4px 0 12px !important;
padding: 0 !important;
}
.booking-calendar .fbw-calendar--dates.desktop fieldset {
display: flex !important;
align-items: baseline;
justify-content: space-between;
gap: 12px;
min-width: 0;
height: 38px;
padding: 0 12px !important;
border: 1px solid rgba(26, 20, 16, 0.12) !important;
background: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.booking-calendar .fbw-calendar--dates.desktop fieldset {
align-items: center;
}
.booking-calendar .fbw-calendar--dates.desktop .fbw-calendar--label {
flex: 0 0 auto;
margin: 0 !important;
}
.booking-calendar .fbw-calendar--dates.desktop .value {
min-height: 0 !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: var(--global-heading-font-family) !important;
font-size: 17px !important;
color: var(--global-palette3) !important;
}
.booking-calendar .fbw-calendar--dates.desktop .value:empty::before {
content: "—";
color: rgba(26, 20, 16, 0.3);
} .booking-calendar .fbw-calendar--dates.desktop fieldset.to-fill {
border-color: var(--global-palette1) !important;
box-shadow: 0 0 0 1px rgba(212, 184, 122, 0.35);
}
.booking-calendar .fbw-calendar--dates.desktop fieldset.to-fill .fbw-calendar--label {
color: var(--global-palette1) !important;
}
}
@media (min-width: 768px) { .booking-calendar .fbw-calendar--dates.desktop fieldset.to-fill .fbw-calendar--label {
color: var(--global-palette3) !important;
}
} .booking-calendar .fbw-calendar--day.unavailable_day:not(.chosen_day) .day--number {
color: var(--global-palette6) !important;
opacity: 0.6;
} .booking-calendar .fbw-calendar--day .min_stay-details {
width: auto !important;
min-width: 130px;
padding: 7px 10px !important;
border: 1px solid rgba(212, 184, 122, 0.55);
border-radius: 0 !important;
background: var(--global-palette3) !important;
box-shadow: 0 8px 24px rgba(24, 32, 49, 0.22);
white-space: nowrap;
} .booking-calendar .fbw-calendar--day .min_stay-details::before {
border-bottom-color: var(--global-palette3) !important;
}
.booking-calendar .fbw-calendar--day .min_stay-details span,
.booking-calendar .fbw-calendar--day.valid_day:hover:not(.chosen_day) .min_stay-details.min_stay-details span {
font-family: var(--global-body-font-family) !important;
font-size: 13px !important;
line-height: 1.35 !important;
color: var(--global-palette8) !important;
opacity: 1 !important;
} .booking-calendar .fbw-calendar--day .min_stay-details span:nth-child(2),
.booking-calendar .fbw-calendar--day.valid_day:hover:not(.chosen_day) .min_stay-details.min_stay-details span:nth-child(2) {
font-family: "Cormorant SC", var(--global-heading-font-family) !important;
font-size: 12px !important;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--global-palette1) !important;
}
.booking-calendar .fbw-calendar--day .min_stay-details span:empty {
display: none !important;
}
@media (min-width: 768px) { .booking-calendar .fbw-calendar--dates.desktop {
grid-template-columns: repeat(2, minmax(0, 300px)) !important;
}
}