/*
Theme Name: Keral Core
Theme URI: https://keral.co
Template: generatepress
Author: Michael Dhifi
Author URI: https://keral.co/about
Description: Keral Core is a WordPress theme developed by Keral to deliver a fast, modern, and highly controlled web experience. Built with a strong focus on performance and flexibility, it ensures optimized loading times and a lightweight structure aligned with today's web standards. Designed following best coding practices, Keral Core fully leverages the power of the block editor (Gutenberg) while remaining compatible with leading page builders. It seamlessly integrates with essential plugins such as WooCommerce, providing scalability for a wide range of digital projects. Fully responsive and SEO-optimized, Keral Core features a modular architecture that allows advanced customization, including color management, dynamic typography, flexible layouts, and multiple widget areas. Developed by Keral, this theme reflects a commitment to performance, simplicity, and digital efficiency. Learn more: https://keral.co
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.4
Updated: 2026-09-30
*/

/*
==========================================================================
   0 — VARIABLES & CONFIGURATION
========================================================================== */

:root {
	    /* === FONTS — owned by Keral Core, fonts.css supprimé === */
    --gp-font--cormorant: "Cormorant", Georgia, "Times New Roman", serif;
    --gp-font--cormorant-garamond-light: "Cormorant";
    --gp-font--inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* Aliases internes */
    --font-heading: var(--gp-font--cormorant-garamond-light), Georgia, "Times New Roman", serif;
    --font-body: var(--gp-font--inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    --color-primary: #000000;
    --color-accent-1: #8c5a2a;
    --color-accent-2: #c9a961;
    --color-accent-3: #4a2c1a;
    --color-bg-dark: #0d1419;
    --color-active-line: rgba(224, 198, 149, 0.35);

	--keral-call-popup-bg: #ffffff;
	--keral-call-popup-color: #1a1a1a;
	--keral-call-popup-overlay: rgba(0, 0, 0, 0.5);
	--keral-call-popup-z: 99999;
	--keral-call-btn-radius: 0;


    --fs-tagline: 1.85rem;
    --fs-menu-link: 0.95rem;
    --fs-btn-small: 11px;
}
/* === @font-face — owned by Keral Core ===
 * Relative URLs (from wp-content/themes/keral-core/ to wp-content/uploads/):
 * they work on any domain — staging, temporary address or final domain. */
@font-face {
	font-display: swap;
	font-family: "Cormorant";
	font-style: normal;
	font-weight: 300;
	src: url('../../uploads/generatepress/fonts/cormorant-garamond-light/cormorant-garamond-v21-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: "Cormorant";
	font-style: italic;
	font-weight: 300;
	src: url('../../uploads/generatepress/fonts/cormorant-garamond-light/cormorant-garamond-v21-latin_latin-ext-300italic.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: normal;
	font-weight: 300;
	src: url('../../uploads/generatepress/fonts/inter/inter-v20-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: italic;
	font-weight: 300;
	src: url('../../uploads/generatepress/fonts/inter/inter-v20-latin_latin-ext-300italic.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: italic;
	font-weight: 400;
	src: url('../../uploads/generatepress/fonts/inter/inter-v20-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	src: url('../../uploads/generatepress/fonts/inter/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
}

/* ==========================================================================
   1 — EFFETS GLOBAUX & BLUR HEADERS
   ========================================================================== */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/*
 * FIX: will-change removed from static rule.
 * It is now applied dynamically in the scroll handler JS:
 *   - Set on scroll start
 *   - Removed via debounced timeout (~300ms after scroll stops)
 * This prevents the browser holding a compositor layer for the header
 * on every page even when the user never scrolls.
 *
 * transform: translateZ(0) also removed — it was a legacy GPU promotion
 * hack that is redundant when will-change is managed correctly, and it
 * creates a new stacking context that can cause z-index conflicts.
 */
.main-header-block {
  transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
  background: transparent;
}

.main-header-block.scrolled {
  background: rgba(44, 40, 37, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: 999999;
}

.skip-link:focus {
  left: 10px;
  top: 10px;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
}

/* ==========================================================================
   2 — ACCORDÉONS
   ========================================================================== */

.dd-accord-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.dd-accord-body > * {
    min-height: 0;
    overflow: hidden;
}

.dd-accord-item.open .dd-accord-body {
    grid-template-rows: 1fr;
}

.dd-accord-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dd-accord-header .dd-accord-icon {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.dd-accord-item.open .dd-accord-icon {
    transform: rotate(45deg);
}

/* ==========================================================================
   3 — MENU MOBILE FULLSCREEN (OVERLAY & ORBES)
   ========================================================================== */

/* 3.1 — Conteneur Principal */
#mobile-sidebar.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    margin: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 35px 24px;
    box-sizing: border-box;
    background: transparent;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.02);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}

#mobile-sidebar.fullscreen-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0s;
}

body.menu-open {
    overflow: hidden;
}

/* 3.2 — Fond Animé & Orbes */
.menu-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #0d1419;
}

.menu-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    background: rgba(13, 20, 25, 0.35);
    z-index: 1;
}

/*
 * FIX: will-change moved from .orb base rule to .is-open scope.
 * The browser now only allocates compositor layers for orbs when the
 * mobile menu is actually open. When the menu is closed, zero GPU
 * memory is held for these elements.
 *
 * mix-blend-mode: screen + filter: blur(60px) is still expensive
 * while the menu is open — that is a design trade-off. The important
 * thing is that it does not cost anything during normal page browsing.
 */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0;
    mix-blend-mode: screen;
    animation-play-state: paused;
    transition: opacity 0.5s ease;
}

#mobile-sidebar.is-open .orb {
    opacity: 0.55;
    animation-play-state: running;
    will-change: transform, opacity; /* Applied only when menu is open */
}

.orb-1 {
    width: 380px;
    height: 380px;
    background: #8c5a2a;
    top: -10%;
    left: -15%;
    animation: drift1 22s ease-in-out infinite;
}

.orb-2 {
    width: 320px;
    height: 320px;
    background: #c9a961;
    bottom: -10%;
    right: -10%;
    animation: drift2 28s ease-in-out infinite;
}

.orb-3 {
    width: 280px;
    height: 280px;
    background: #4a2c1a;
    top: 40%;
    right: 20%;
    animation: drift3 25s ease-in-out infinite;
}

@keyframes drift1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(60px, 80px, 0) scale(1.15); }
}

@keyframes drift2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-70px, -60px, 0) scale(1.2); }
}

@keyframes drift3 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(-40px, 50px, 0) scale(0.9); }
    66%      { transform: translate3d(50px, -40px, 0) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .orb { animation: none; }
}

/* 3.4 — Contenu (Logo, Tagline, Nav) */
.sidebar-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
    margin-bottom: 0px;
    z-index: 2;
}

#mobile-sidebar .menu-logo {
    width: 60px;
    height: auto;
    display: block;
    margin: 0 auto;
}

#mobile-sidebar .menu-hotel-name {
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 22px;
    text-align: center;
    margin: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#mobile-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

#mobile-sidebar nav a {
    color: #ffffff;
    font-family: var(--font-body);
    font-size: var(--fs-menu-link);
    text-decoration: none;
    transition: opacity 0.25s;
}

/* 3.5 — Bouton Fermeture */
#close-sidebar {
    background: #ffffff;
    border: none;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
    position: relative;
    z-index: 2;
}
#close-sidebar:hover { transform: scale(1.06); }

/* ==========================================================================
   4 — CALENDRIER MOBILE (FIX GRILLE & TAILLES)
   ========================================================================== */

/* 4.1 — Structure du Tiroir (Modal) */
.dd-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: hidden;
    pointer-events: none;
    height: 100dvh;
}
.dd-modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.dd-modal-content {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 92dvh;
    background: #fff;
    border-radius: 32px 32px 0 0;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    padding: 0;
}
.dd-modal.is-open .dd-modal-content {
    transform: translateY(0);
}

/* 4.2 — Handle & Header */
.dd-handle {
    width: 40px;
    height: 4px;
    background: #E5E5E5;
    border-radius: 10px;
    margin: 10px auto 0;
}

.dd-header-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 25px 24px 15px 24px;
}

#dd-calendar-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0;
}

/* 4.3 — Bouton Fermer */
#dd-close-calendar {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
}

#dd-close-calendar::before,
#dd-close-calendar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 1px;
    background: var(--color-primary);
}
#dd-close-calendar::before { transform: translate(-50%, -50%) rotate(45deg); }
#dd-close-calendar::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* 4.4 — Grilles */
.dd-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding: 10px 20px;
    border-bottom: 1px solid #f9f9f9;
}
.dd-weekdays span {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
}

.dd-calendar-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 20px 80px;
}

.dd-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.dd-day {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 50%;
    margin: 0 auto;
}

.dd-day.is-selected {
    background: var(--color-primary);
    color: #fff;
}
.dd-day.in-range {
    background: #f3f4f6;
    border-radius: 0;
}

/* 4.5 — Bouton de validation */
#dd-calendar-btn-next {
    display: block;
    width: 90%;
    margin: 10px auto 20px;
    background: var(--color-primary);
    color: #fff;
    height: 52px;
    border-radius: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: var(--fs-btn-small);
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* ==========================================================================
   5 — GUESTS (VOYAGEURS)
   ========================================================================== */

.guest-container {
    padding: 24px;
    background: #ffffff;
    height: 100%;
}

.guest-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    border-bottom: 0.5px solid #eeeeee;
}

.guest-row:last-child {
    border-bottom: none;
}

.guest-ctrl {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.cnt-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0.5px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    font-weight: 200;
    color: var(--color-primary);
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    box-sizing: border-box;
}

.cnt-val {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 16px;
    min-width: 20px;
    text-align: center;
}

#dd-guests-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0;
}

.dd-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#dd-guests-dates {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 17px;
    color: #999;
    margin: 0 0 12px 0;
    text-align: center;
    letter-spacing: 0.05em;
}

#dd-close-guests {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
}
#dd-close-guests::before,
#dd-close-guests::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px;
    height: 1px;
    background: var(--color-primary);
}
#dd-close-guests::before { transform: translate(-50%, -50%) rotate(45deg); }
#dd-close-guests::after  { transform: translate(-50%, -50%) rotate(-45deg); }

#dd-back-to-calendar {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
}
#dd-back-to-calendar::before,
#dd-back-to-calendar::after {
    content: '';
    position: absolute;
    left: 4px;
    width: 10px;
    height: 1px;
    background: var(--color-primary);
}
#dd-back-to-calendar::before { top: calc(50% - 4px); transform: rotate(-45deg); }
#dd-back-to-calendar::after  { top: calc(50% + 4px);  transform: rotate(45deg); }

#dd-btn-final-verify {
    display: block;
    width: 90%;
    margin: 10px auto 20px;
    background: var(--color-primary);
    color: #fff;
    height: 52px;
    border-radius: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: var(--fs-btn-small);
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

#dd-btn-final-verify:hover {
    opacity: 0.85;
}

/* ==========================================================================
   6 — BARRE D'ACTION COLLÉE (STICKY CHECK RATES MOBILE)
   ========================================================================== */

.check-rates-wrapper {
    display: none;
}

@media (max-width: 767px) {
    .check-rates-wrapper {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9990;
        background: #ffffff;
        padding: 10px;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.12);
    }

    .check-rates-btn {
        display: block;
        width: 100%;
        background-color: var(--color-primary);
        color: #ffffff;
        text-align: center;
        padding: 14px 20px;
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }
}

/* ==========================================================================
   7 — DROPDOWNS DESKTOP (CALENDRIER & VOYAGEURS)
   ========================================================================== */

#bb-dates-field {
    position: relative;
    z-index: 50;
}

#bb-guests-field {
    position: relative;
    z-index: 49;
}

/*
 * FIX: will-change removed from static rule on both dropdowns.
 * Apply it in JS on the trigger's pointerenter/focus event,
 * remove it on transitionend — same pattern as the booking bar.
 * backface-visibility: hidden also removed from #bb-calendar-dropdown
 * — it was a legacy GPU hack redundant with proper will-change management.
 */
#bb-calendar-dropdown,
#bb-guests-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.20);
    z-index: 9999;
    opacity: 0;
    transform: scale(0.97) translateY(-4px);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#bb-calendar-dropdown.is-open,
#bb-guests-dropdown.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

#bb-calendar-dropdown {
    padding: 28px;
    min-width: 720px;
}

.bb__calendar-months {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.bb__cal-month { flex: 1; }

.bb__cal-month-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin-bottom: 14px;
}

.bb__cal-month-title {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--color-primary);
}

.bb__cal-nav {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 28px;
    font-weight: 200;
    line-height: 1;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    transition: opacity 0.2s ease;
}

.bb__cal-nav:hover { opacity: 0.5; }
.bb__cal-nav--prev { left: 0; }
.bb__cal-nav--next { right: 0; }

.bb__cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.bb__cal-weekday {
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    text-align: center;
    padding: 4px 0 10px;
}

/* 7.4 — Footer & Bouton "Done" */
.bb__calendar-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bb__calendar-hint {
    font-size: 10px;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
    min-height: 16px;
}

/*
 * FIX: will-change removed from static rule.
 * These buttons only animate on hover — scoping will-change to :hover
 * means the browser promotes the layer exactly when needed and releases
 * it automatically when the cursor leaves. Zero idle GPU cost.
 */
.bb__done-btn,
.bb__confirm-btn {
    background: var(--color-primary);
    color: #ffffff;
    border: none;
    padding: 14px 36px;
    font-size: 9px;
    font-weight: 400;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.35em;
    cursor: pointer;
    border-radius: 0;
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
}

.bb__done-btn:hover,
.bb__confirm-btn:hover {
    will-change: opacity, transform; /* Scoped to hover — promoted only when needed */
}

/* 7.5 — Guest Picker Desktop */
#bb-guests-dropdown {
    padding: 24px;
    width: 280px;
}

.bb__guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.bb__guest-row:last-of-type { border-bottom: none; }

.bb__guest-label {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9ca3af;
}

.bb__guest-ctrl {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.bb__counter-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f3f4f6;
    background: #ffffff;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 300;
    line-height: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.bb__counter-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.bb__guest-count {
    font-size: 13px;
    font-weight: 400;
    font-family: var(--font-body);
    color: var(--color-primary);
    min-width: 24px;
    text-align: center;
    display: inline-block;
}

.bb__confirm-btn {
    width: 100%;
    margin-top: 20px;
}

/* ── Overlay ── */
#bb-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0,0,0,0.04);
  display: none;
  cursor: default;
}
#bb-overlay.is-visible { display: block; }

/* ==========================================================================
   SUBMENU OVERLAY BAR — ACTIVE STATE
   Page IDs are site-specific — update for each hotel installation.
   Seminars  → page-id-3323
   Events    → page-id-4752
   Quote     → page-id-5607
   ========================================================================== */

.submenu-bar-overlay {
    position: fixed;
    z-index: 999;
    width: 100%;
}

.page-id-3156 .submenu-bar-overlay .submenu-meetings,
.page-id-3323 .submenu-bar-overlay .submenu-seminars,
.page-id-5730 .submenu-bar-overlay .submenu-quote {
    display: inline-block;
    color: #F2F2F2;
    position: relative;
    border-bottom: none;
}

.page-id-3156 .submenu-bar-overlay .submenu-meetings::after,
.page-id-3323 .submenu-bar-overlay .submenu-seminars::after,
.page-id-5730 .submenu-bar-overlay .submenu-quote::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 3px;
    background-color: rgba(224, 198, 149, 0.35);
}

/* Désactive le grid sur la liste des chambres en mobile */
@media (max-width: 768px) {
    body .wp-block-post-template.is-layout-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}

/* ==========================================================================
   8 — FLUENT FORMS
   ========================================================================== */

.frm-fluent-form {
    background: #fff;
    margin: 0 auto;
}

.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form input[type="tel"],
.frm-fluent-form input[type="number"],
.frm-fluent-form input[type="date"],
.frm-fluent-form input[type="url"],
.frm-fluent-form textarea,
.ff-default .ff-el-form-control,
.ff-default select.ff-el-form-control,
.frm-fluent-form select {
    width: 100% !important;
    background: #f0f0f0 !important;
    border: none !important;
    border-bottom: 1px solid var(--color-primary) !important;
    border-radius: 0 !important;
    padding: 16px 14px !important;
    font-family: var(--font-heading) !important;
    font-size: 14px !important;
    color: #606266 !important;
    -webkit-text-fill-color: #606266 !important;
    height: 52px !important;
    box-sizing: border-box;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.frm-fluent-form select,
.ff-default select.ff-el-form-control {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%23606266' d='M6 8L0 0h12z'/%3e%3c/svg%3e") !important;
    background-size: 10px 6px !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 40px !important;
}

.frm-fluent-form input:focus,
.frm-fluent-form select:focus,
.frm-fluent-form textarea:focus {
    background: #ebebeb !important;
}

.frm-fluent-form input::placeholder,
.frm-fluent-form textarea::placeholder {
    color: #888;
    font-style: italic;
    opacity: 0.7;
    font-family: var(--font-heading);
}

.frm-fluent-form .ff-btn-submit,
.frm-fluent-form button[type="submit"],
form.fluent_form_7 .ff-btn-submit:not(.ff_btn_no_style) {
    background: var(--color-primary) !important;
    color: #fff !important;
    font-family: var(--font-body) !important;
    font-size: var(--fs-btn-small) !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    padding: 18px 56px !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    display: block !important;
    margin: 0 auto !important;
    width: auto;
    transition: background 0.2s;
}

.frm-fluent-form .ff-btn-submit:hover {
    background: #333 !important;
}

@media (max-width: 767px) {
    .frm-fluent-form {
        padding: 30px 20px;
    }
    /* 16px minimum — prevents iOS forced zoom on input focus */
    .frm-fluent-form input,
    .frm-fluent-form select,
    .frm-fluent-form textarea {
        font-size: 16px !important;
    }
    .frm-fluent-form .ff-btn-submit {
        width: 100% !important;
    }
}

/* ==========================================================================
   1 — SLIDER HÉBERGEMENTS (dd-swiper)
   ========================================================================== */

.dd-accommodations-wrap {
  width: 100%;
  background: #ffffff;
  text-align: center;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 585px;
}

@media (max-width: 768px) {
    .dd-accommodations-wrap {
        min-height: auto; /* remplace 775px */
    }
}

.dd-swiper {
  width: 100%;
  height: 535px;
  padding: 20px 0 0 0;
  overflow: visible;
  contain: layout style;
}

.dd-swiper .swiper-wrapper {
  align-items: flex-start;
}

.dd-swiper .swiper-slide {
  width: 380px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  opacity: 0.6 !important;
  transform: scale(0.85) !important;
  transition: transform 0.8s ease, opacity 0.8s ease;
  contain: layout style;
}

.dd-slide__img-container {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 380 / 280;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.dd-slide__img-container::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  z-index: -1;
}

.dd-swiper .swiper-slide .dd-slide__img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dd-swiper .swiper-slide-active {
  transform: scale(1) !important;
  opacity: 1 !important;
  z-index: 10 !important;
}

.dd-swiper .swiper-slide-active .dd-slide__img-container::after {
  opacity: 1;
}

.dd-slide__label {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  font-family: var(--font-heading), serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  transition: opacity 0.3s;
}

.swiper-slide-active .dd-slide__label {
  opacity: 0;
}

.dd-slide__content {
  width: 100%;
  background: #faf8f5;
  padding: 24px;
  box-sizing: border-box;
  height: 210px;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  box-shadow: 0 20px 60px rgba(44, 40, 37, 0.12);
}

.swiper-slide-active .dd-slide__content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dd-slide__name {
  font-family: var(--font-heading), serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  color: #000;
}

.dd-slide__divider {
  width: 30px;
  height: 1px;
  background: #000;
  margin: 0 auto 14px;
}

.dd-slide__desc {
  font-family: var(--font-heading), serif;
  font-size: 13px;
  font-style: italic;
  color: #555;
  line-height: 1.7;
  margin: 0 0 20px 0;
}

.dd-slide__buttons {
  display: flex;
  justify-content: center;
}

.dd-slide__buttons a {
  margin: 0 5px;
}

.dd-slide__btn-primary {
  padding: 11px 18px;
  background: #000;
  color: #fff;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.dd-slide__btn-secondary {
  padding: 11px 18px;
  border: 1px solid #000;
  color: #000;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.dd-swiper-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 30px 0;
  height: 50px;
}

.dd-swiper-nav button,
.dd-swiper-nav .dd-counter {
  margin: 0 12px;
}

.dd-swiper-nav button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #000;
  transition: 0.3s;
  padding: 10px;
}

.dd-counter {
  font-family: var(--font-heading), serif;
  font-size: 14px;
  color: #000;
  min-width: 60px;
}

@media (max-width: 768px) {
  .dd-swiper {
    height: 515px;
    padding-bottom: 0;
  }
  .dd-swiper .swiper-slide {
    width: 85vw;
    transform: scale(0.9) !important;
  }
  .dd-swiper .swiper-slide-active {
    transform: scale(1) !important;
  }
  .dd-slide__img-container {
    aspect-ratio: 85vw / 220px;
  }
  .dd-swiper .swiper-slide-active .dd-slide__img-container {
    aspect-ratio: 85vw / 220px;
  }
  .dd-slide__content {
    height: 260px;
    padding: 20px 15px;
  }
  .dd-slide__buttons {
    flex-direction: column;
    gap: 8px;
  }
  .dd-slide__btn-primary,
  .dd-slide__btn-secondary {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: 0;
  }
  button.dd-slide__btn-primary {
    display: block;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: none;
  }
	  .dd-slide__buttons a,
  .dd-slide__buttons button {
    margin: 0; /* ← reset le margin: 0 5px global */
  }
}



/* ==========================================================================
   2 — SLIDER RESTAURATION (dr-swiper)
   ========================================================================== */

.dr-services-wrap {
  width: 100%;
  background: #ffffff;
  text-align: center;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
}

.dr-swiper {
  width: 100%;
  height: 580px;
  padding: 20px 0 0 0;
  overflow: visible;
  contain: layout style;
}

.dr-swiper .swiper-wrapper {
  align-items: flex-start;
}

.dr-swiper .swiper-slide {
  width: 320px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  opacity: 0.5 !important;
  transform: scale(0.88) !important;
  transition: transform 0.8s ease, opacity 0.8s ease;
  z-index: 1;
  /* contain intentionally omitted — height animation on active slide
     requires layout recalculation to propagate correctly */
}

.dr-slide__img-container {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 320 / 380;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  transition: height 0.8s ease, box-shadow 0.8s ease;
}

.dr-swiper .swiper-slide .dr-slide__img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.dr-swiper .swiper-slide-active {
  transform: scale(1) !important;
  opacity: 1 !important;
  z-index: 10;
}

.dr-swiper .swiper-slide-active .dr-slide__img-container {
  height: 220px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.dr-slide__label {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: #ffffff;
  transition: opacity 0.3s;
}

.dr-swiper .swiper-slide-active .dr-slide__label {
  opacity: 0;
}

.dr-slide__content {
  width: 100%;
  background: #ffffff;
  padding: 0 24px;
  box-sizing: border-box;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease, height 0.5s ease, padding 0.5s ease;
  box-shadow: 0 20px 60px rgba(44, 40, 37, 0.12);
}

.dr-swiper .swiper-slide-active .dr-slide__content {
  opacity: 1;
  height: 230px;
  padding: 28px 24px;
}

.dr-slide__category {
  font-family: var(--font-heading);
  font-size: 13px;
  font-style: italic;
  color: #888;
  margin: 0 0 8px 0;
}

.dr-slide__name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  margin: 0 0 12px 0;
  color: #000;
}

.dr-slide__divider {
  width: 30px;
  height: 1px;
  background: #000;
  margin: 0 auto 16px;
}

.dr-slide__desc {
  font-family: var(--font-heading);
  font-size: 13px;
  color: #555;
  line-height: 1.7;
  margin: 0 0 20px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dr-slide__buttons {
  display: flex;
  justify-content: center;
}

.dr-slide__btn-primary {
  padding: 13px 32px;
  background: #000;
  color: #fff;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}

.dr-swiper-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 30px 0;
  height: 50px;
}

.dr-swiper-nav button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #000;
  transition: 0.3s;
  padding: 10px;
}

.dr-swiper-nav button,
.dr-swiper-nav .dr-counter {
  margin: 0 12px !important;
}

.dr-counter {
  font-family: var(--font-heading);
  font-size: 14px;
  color: #000;
  min-width: 60px;
}

@media (max-width: 768px) {
  .dr-swiper {
    height: 580px;
  }
  .dr-swiper .swiper-slide {
    width: 85vw;
    transform: scale(0.9) !important;
  }
  .dr-swiper .swiper-slide-active {
    transform: scale(1) !important;
  }
  .dr-slide__img-container {
    aspect-ratio: 85vw / 280px;
  }
  .dr-swiper .swiper-slide-active .dr-slide__img-container {
    height: 180px;
  }
  .dr-swiper .swiper-slide-active .dr-slide__content {
    height: 260px;
    padding: 20px 15px;
  }
  .dr-slide__btn-primary {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ==========================================================================
   3 — GALERIE MULTIMÉDIA (dg-media-swiper)
   ========================================================================== */

.dg-media-slider-wrap {
  position: relative;
}

.dg-media-swiper {
  width: 100%;
  height: auto;
  overflow: visible;
  padding: 0;
  position: relative;
  contain: layout style;
}

.dg-media-swiper .swiper-wrapper {
  align-items: flex-start;
}

.dg-media-swiper .swiper-slide {
  width: 700px;
  cursor: pointer;
  opacity: 0.35 !important;
  transition: opacity 0.8s ease;
  z-index: 1;
  contain: layout style;
}

.dg-media-swiper .swiper-slide-active {
  opacity: 1 !important;
  z-index: 10;
}

.dg-media__container {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  background: #111;
}

.dg-media-swiper .swiper-slide .dg-media__container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dg-media__desc {
  text-align: center;
  padding: 30px 20px 0;
  opacity: 0;
  height: 90px;
  transition: opacity 0.5s ease;
}

.dg-media-swiper .swiper-slide-active .dg-media__desc {
  opacity: 1;
}

.dg-media__desc p {
  font-family: var(--font-heading);
  font-size: 15px;
  font-style: italic;
  color: #aaa;
  line-height: 1.8;
  margin: 0;
}

.dg-media-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 100%;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 20;
}

.dg-media-nav button {
  pointer-events: all;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 48px;
  cursor: pointer;
  padding: 10px 20px;
  transition: opacity 0.3s;
  opacity: 0.6;
  font-family: var(--font-heading);
  line-height: 1;
}

.dg-media-nav button:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .dg-media-swiper .swiper-slide {
    width: 90vw;
  }
  .dg-media-swiper .swiper-slide-active .dg-media__desc {
    height: 110px;
  }
  .dg-media-nav button {
    font-size: 32px;
    padding: 10px;
  }
}
/**
 * Keral Suite — Call Action Popup
 * Minimal, theme-friendly. Uses CSS variables that themes can override.
 * ─── Popup ───────────────────────────────────────────
 */

.keral-call-popup {
	position: fixed;
	inset: 0;
	z-index: var(--keral-call-popup-z);
	display: none;
	align-items: center;
	justify-content: center;
}
.keral-call-popup[data-open="1"] {
	display: flex;
}

.keral-call-popup__overlay {
	position: absolute;
	inset: 0;
	background: var(--keral-call-popup-overlay);
	cursor: pointer;
}

.keral-call-popup__dialog {
	position: relative;
	background: var(--keral-call-popup-bg);
	color: var(--keral-call-popup-color);
	padding: 40px 32px;
	width: 85%;
	max-width: 360px;
	text-align: center;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.keral-call-popup__title {
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0 0 32px;
}

/* Optional intro line below the title (5.7.31+).
   When the intro exists, tighten the spacing above it. */
.keral-call-popup__intro {
	font-size: 14px;
	line-height: 1.5;
	color: #555;
	margin: -16px 0 24px;
}

.keral-call-popup__channels {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 32px;
}

.keral-call-popup__btn {
	display: block;
	padding: 16px;
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.keral-call-popup__btn:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

.keral-call-popup__btn--whatsapp {
	background: #1a1a1a;
	color: #ffffff;
}

.keral-call-popup__btn--phone {
	background: transparent;
	color: #1a1a1a;
	border: 1px solid #1a1a1a;
}

.keral-call-popup__btn--email {
	background: transparent;
	color: #1a1a1a;
	border: 1px solid #1a1a1a;
}

.keral-call-popup__cancel {
	background: none;
	border: 0;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: underline;
	color: inherit;
	font-family: inherit;
}

/* ─── Floating button (optional trigger mode) ────────── */

.keral-call-floating {
	position: fixed;
	z-index: calc(var(--keral-call-popup-z) - 1);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	background: #1a1a1a;
	color: #ffffff;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: inherit;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s ease;
}
.keral-call-floating:hover {
	transform: translateY(-2px);
}

.keral-call-floating[data-position="bottom-right"] { bottom: 24px; right: 24px; }
.keral-call-floating[data-position="bottom-left"]  { bottom: 24px; left: 24px;  }
.keral-call-floating[data-position="top-right"]    { top: 24px;    right: 24px; }
.keral-call-floating[data-position="top-left"]     { top: 24px;    left: 24px;  }

@media (max-width: 768px) {
	.keral-call-floating { padding: 10px 14px; }
	.keral-call-floating__label { display: none; }
}

/* ==========================================================================
   CLS FIX — HERO IMAGE
   ========================================================================== */

/* Réserve l'espace via aspect-ratio pour tous les mobiles
 * gb-element-f8bda043 = conteneur image hero homepage
 * Si l'ID change après édition GB, mettre à jour ici
 * ───────────────────────────────────────────────────── */
/* ==========================================================================
   SWIPER MOBILE FIX — reset transform sur 375px
   ========================================================================== */