/* ============================================================
   Bellevue V4 — conversion & référencement
   Barre d'actions mobile, statut d'ouverture en direct, FAQ,
   pop-up d'offre. Chargé après v3.css, reprend son langage :
   courbes 24px, pastilles, ombres chaudes, crème / or / encre.
   Ne modifie pas la maquette Webflow.
   ============================================================ */
:root {
  --v4-cream: #fdfeee;
  --v4-cream-2: #f7f9d6;
  --v4-gold: #c48a2d;
  --v4-gold-dark: #a8721f;
  --v4-ink: #4a3312;
  --v4-line: rgba(196, 138, 45, .30);
  --v4-sh: 0 2px 6px rgba(74, 51, 18, .05), 0 14px 30px rgba(74, 51, 18, .10);
  --v4-sh-hi: 0 6px 14px rgba(74, 51, 18, .09), 0 28px 54px rgba(74, 51, 18, .18);
  --v4-bar-h: 4.25rem;
}

/* ---------- 1. BARRE D'ACTIONS MOBILE ---------- */
.v4-bar { display: none; }
@media (max-width: 767px) {
  .v4-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 990;
    gap: .5rem;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    background: rgba(253, 254, 238, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--v4-line);
    box-shadow: 0 -8px 24px rgba(74, 51, 18, .10);
  }
  .v4-bar-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-radius: 999px;
    border: 1px solid var(--v4-gold);
    background: var(--v4-cream);
    color: var(--v4-gold-dark);
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .v4-bar-btn svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
  .v4-bar-main {
    flex-grow: 1.35;
    background: var(--v4-gold);
    color: #fff;
    box-shadow: 0 6px 16px rgba(196, 138, 45, .35);
  }
  .v4-bar-btn:active { transform: translateY(1px); }
  .v4-bar-btn:focus-visible { outline: 2px solid var(--v4-ink); outline-offset: 2px; }

  /* la page ne passe pas sous la barre */
  body { padding-bottom: calc(var(--v4-bar-h) + env(safe-area-inset-bottom)); }
  /* le bouton « Réserver » flottant ferait doublon avec la barre */
  .lottie_fixed-wrapper { display: none !important; }
  /* le bandeau cookies se pose au-dessus de la barre, sans la masquer */
  #cc-banner { bottom: calc(var(--v4-bar-h) + .75rem + env(safe-area-inset-bottom)) !important; }
}

/* ---------- 2. STATUT D'OUVERTURE EN DIRECT ---------- */
.v4-status-wrap {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin: 0 0 1rem;
}
.v4-status-wrap:has(> .v4-status[hidden]) { display: none; }
.v4-status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: .5rem 1rem .5rem .85rem;
  border-radius: 999px;
  background: rgba(253, 254, 238, .92);
  border: 1px solid var(--v4-line);
  box-shadow: var(--v4-sh);
  color: var(--v4-ink);
  font-family: Lato, sans-serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
}
.v4-status[hidden] { display: none; }
.v4-status-dot {
  width: .55rem; height: .55rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #5e8a3a;
  box-shadow: 0 0 0 0 rgba(94, 138, 58, .55);
}
.v4-status.is-closed .v4-status-dot {
  background: transparent;
  border: 1.5px solid var(--v4-gold);
}
.v4-status-sub { font-weight: 400; opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .v4-status.is-open .v4-status-dot { animation: v4-pulse 2.4s ease-out infinite; }
}
@keyframes v4-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(94, 138, 58, .55); }
  70%  { box-shadow: 0 0 0 .5rem rgba(94, 138, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(94, 138, 58, 0); }
}
/* variante dans le pied de page doré */
.footer .v4-status { margin-top: .75rem; font-size: .8rem; }

/* ---------- 3. FAQ ---------- */
.v4-faq {
  position: relative;
  background: var(--v4-cream);
  color: var(--v4-ink);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}
.v4-faq-inner {
  max-width: 54rem;
  margin: 0 auto;
}
.v4-faq-kicker {
  margin: 0 0 .25rem;
  text-align: center;
  font-family: Lato, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--v4-gold-dark);
}
.v4-faq-title {
  margin: 0 0 2rem;
  text-align: center;
}
.v4-faq-list { display: grid; gap: .85rem; }
.v4-faq-item {
  background: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(253, 254, 238, .6));
  border: 1px solid var(--v4-line);
  border-radius: 24px;
  box-shadow: var(--v4-sh);
  transition: box-shadow .35s ease;
}
.v4-faq-item[open] { box-shadow: var(--v4-sh-hi); }
.v4-faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--v4-ink);
  border-radius: 24px;
}
.v4-faq-item > summary::-webkit-details-marker { display: none; }
.v4-faq-item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--v4-gold);
  background:
    linear-gradient(var(--v4-gold), var(--v4-gold)) center / .8rem 1.5px no-repeat,
    linear-gradient(var(--v4-gold), var(--v4-gold)) center / 1.5px .8rem no-repeat;
  transition: transform .3s ease, background-color .3s ease;
}
.v4-faq-item[open] > summary::after {
  transform: rotate(45deg);
  background-color: rgba(196, 138, 45, .12);
}
.v4-faq-item > summary:focus-visible { outline: 2px solid var(--v4-gold); outline-offset: 3px; }
.v4-faq-a {
  padding: 0 1.4rem 1.3rem;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--v4-ink);
}
.v4-faq-a p { margin: 0; }
.v4-faq-a a {
  color: var(--v4-gold-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 767px) {
  .v4-faq-item > summary { padding: 1rem 1.1rem; font-size: 1rem; }
  .v4-faq-a { padding: 0 1.1rem 1.1rem; font-size: .95rem; }
}

/* ---------- 4. POP-UP D'OFFRE ---------- */
.v4-promo {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 995;
  width: min(22rem, calc(100vw - 2rem));
  padding: 1.6rem 1.5rem 1.4rem;
  border-radius: 24px;
  background: var(--v4-cream);
  border: 1px solid var(--v4-line);
  box-shadow: var(--v4-sh-hi);
  color: var(--v4-ink);
  font-family: Lato, sans-serif;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .3, 1);
}
.v4-promo[hidden] { display: none; }
.v4-promo.is-open { opacity: 1; transform: none; }
.v4-promo:focus,
.v4-promo[tabindex]:focus-visible { outline: none; }
.v4-promo-close {
  position: absolute;
  top: .5rem; right: .5rem;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--v4-ink);
  cursor: pointer;
}
.v4-promo-close:hover { background: rgba(196, 138, 45, .12); }
.v4-promo-close:focus-visible { outline: 2px solid var(--v4-gold); outline-offset: 0; }
.v4-promo-close svg { width: 18px; height: 18px; }
.v4-promo-kicker {
  margin: 0 0 .35rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v4-gold-dark);
}
.v4-promo-title {
  margin: 0 2rem .5rem 0;
  font-family: var(--_miramont---heading, Greatvibes, cursive);
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--v4-gold);
}
.v4-promo-text { margin: 0 0 1.1rem; font-size: .98rem; line-height: 1.5; }
/* bouton pastille en Lato (la police Flatbread des boutons Webflow n'a
   pas de capitales accentuées : « RÉSERVER » s'affichait mal) */
.v4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--v4-gold);
  background: var(--v4-gold);
  color: #fff;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(196, 138, 45, .30);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.v4-btn:hover { background: var(--v4-gold-dark); border-color: var(--v4-gold-dark); color: #fff; }
.v4-btn:focus-visible { outline: 2px solid var(--v4-ink); outline-offset: 3px; }
.v4-btn-ghost { background: transparent; color: var(--v4-gold-dark); box-shadow: none; }
.v4-btn-ghost:hover { background: rgba(196, 138, 45, .12); color: var(--v4-gold-dark); }
@media (max-width: 767px) {
  .v4-promo {
    left: 1rem; right: 1rem;
    width: auto;
    bottom: calc(var(--v4-bar-h) + .75rem + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .v4-promo { transition: none; }
}

/* ---------- 5. PAGE 404 ---------- */
.v4-404 {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: var(--v4-cream);
  color: var(--v4-ink);
  font-family: Lato, sans-serif;
  text-align: center;
}
.v4-404-card {
  max-width: 34rem;
  padding: 2.5rem clamp(1.25rem, 5vw, 3rem);
  border-radius: 34px;
  border: 1px solid var(--v4-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(253, 254, 238, .5));
  box-shadow: var(--v4-sh);
}
.v4-404-logo { width: min(15rem, 70%); height: auto; margin: 0 auto 1.25rem; display: block; }
.v4-404-code {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--v4-gold-dark);
}
.v4-404-title {
  margin: .25rem 0 .75rem;
  font-family: var(--_miramont---heading, Greatvibes, cursive);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  line-height: 1.1;
  color: var(--v4-gold);
}
.v4-404-text { margin: 0 0 1.75rem; line-height: 1.6; }
.v4-404-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* « Reservieren » (allemand) débordait du bouton de l'en-tête sur mobile */
@media (max-width: 479px) {
  html[lang="de"] .button.is-navbar2-button { font-size: 12.5px; padding-left: 8px; padding-right: 8px; }
}

/* Widget de réservation Softable : il remplace l'ancien bouton fixe « Réserver »
   (appel) en bas à gauche. Sur mobile, la barre du bas a déjà « Réserver » :
   on masque le bouton flottant pour qu'il ne la recouvre pas. */
.has-softable .tambour-lb { display: none !important; }
@media (max-width: 767px) {
  .has-softable body > button[aria-label][style*="fixed"] { display: none !important; }
}