/**
 * Deux offcanvas plein écran (même principe : voile + panneau latéral, GSAP du thème) :
 *
 * 1) Navigation — #offcanvas-navigation.site-offcanvas--navigation.header__menu
 *    (.header__menu-bg, .header__menu-wrap) ; ouverture : .header__menu-toggle
 *
 * 2) Réservation — #offcanvas-reservation.site-offcanvas--reservation.gform-offcanvas
 *    (.gform-bg, #formulaire-reservation.gform-ct) ; ouverture : #header-reserve-toggle, liens .open-form
 *
 * Les classes historiques .header__menu* et .gform-* restent inchangées pour le bundle.
 * Fichier chargé après le CSS principal pour surcharger en toute sécurité.
 *
 * Anti-pattern (à ne pas faire) : dupliquer un second bloc HTML avec les mêmes classes
 * .header__menu-wrap / .header__menu-bg / .header__menu — le JS du thème (GSAP) cible ces sélecteurs
 * de façon globale (tous les nœuds) et un seul .header__menu-toggle est câblé ; le « deuxième menu »
 * ne s’affichera pas comme un offcanvas indépendant. Débogage menu : console navigateur, erreurs JS
 * avant le bundle, chemins vers main.*.js, et vérifier que le toggle ne pointe pas vers une autre page.
 */

:root {
  --reserve-pl: clamp(0.5rem, 3.75vw, 5rem);
}

/**
 * Même architecture que .header__menu : conteneur fixe plein écran (z-index),
 * voile et panneau en position absolute comme .header__menu-bg / .header__menu-wrap.
 * Les sélecteurs .gform-bg et .gform-ct restent inchangés pour le GSAP du bundle.
 */
.gform-offcanvas {
  position: fixed;
  inset: 0;
  z-index: 1080;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* Réactiver les clics : pointer-events:none sur le wrapper s’hérite aux enfants sans ce correctif */
.gform-offcanvas .gform-bg,
.gform-offcanvas #formulaire-reservation.gform-ct {
  pointer-events: auto;
}

.gform-offcanvas .gform-bg {
  position: absolute !important;
  top: 0;
  right: 0;
  left: auto;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 100vh;
  z-index: 1;
}

/* Pas de display/overflow !important : le bundle GSAP pose display:none|block inline à l’ouverture/fermeture */
.gform-offcanvas #formulaire-reservation.gform-ct {
  position: absolute !important;
  top: 0;
  right: 0;
  left: auto;
  z-index: 2;
  width: 100vw !important;
  height: calc(var(--vh, 1vh) * 100) !important;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (min-width: 992px) {
  .gform-offcanvas #formulaire-reservation.gform-ct {
    width: 50vw !important;
  }
}

/**
 * Squelette type .header__menu-wrap + __top / __main / __bottom (classes dédiées, pas header__menu*).
 */
#formulaire-reservation .reserve-menu {
  --pl: var(--reserve-pl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 36rem;
  margin-left: 0;
  margin-right: auto;
  min-height: calc((var(--vh, 1vh) * 100) - clamp(5rem, 12vh, 7rem) - 3rem);
}

#formulaire-reservation .reserve-menu__top {
  flex-shrink: 0;
  padding-left: 0;
  margin-top: 0;
  margin-left: 0;
}

#formulaire-reservation .reserve-menu__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 100%;
  padding-left: 0;
}

@media (max-width: 991.98px) {
  #formulaire-reservation .reserve-menu__main {
    padding-left: 0;
  }
}

#formulaire-reservation .reserve-menu__bottom {
  flex-shrink: 0;
  margin-top: 2rem;
  margin-bottom: 0;
  margin-left: -1rem;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 991.98px) {
  #formulaire-reservation .reserve-menu__bottom {
    justify-content: flex-end;
    padding-right: 0;
  }
}

#formulaire-reservation .reserve-menu__bottom-link {
  padding: 1.25rem 0;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  font-family: "Mont", sans-serif;
  font-size: 0.875rem;
}

#formulaire-reservation .reserve-menu__bottom-link:hover {
  opacity: 0.75;
}

/* Voile */
.gform-bg {
  transition: opacity 0.35s ease;
}

/* Panneau : marges type .header__menu-wrap (padding sur le conteneur .gform-ct) */
#formulaire-reservation.gform-ct {
  --pl: var(--reserve-pl);
  padding-top: clamp(5rem, 12vh, 7rem);
  padding-left: var(--reserve-pl);
  padding-right: var(--reserve-pl);
  padding-bottom: 2.5rem;
}

@media (min-width: 992px) {
  #formulaire-reservation.gform-ct {
    padding-left: clamp(2.5rem, 6vw, 6rem);
    padding-right: clamp(2.5rem, 6vw, 6rem);
  }
}

#formulaire-reservation .reserve-panel__kicker {
  font-family: "Mont", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
  margin: 0 0 0.75rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

#formulaire-reservation .gform__top {
  margin-top: 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#formulaire-reservation .gform__top-title {
  font-family: "Monschone", serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  color: #000;
  margin: 0 0 0.75rem 0;
  text-transform: none;
}

#formulaire-reservation .gform__top-txt {
  font-family: "Mont", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #333;
  max-width: 32rem;
}

#formulaire-reservation .gform__form {
  margin-top: 2rem;
  padding-top: 0.5rem;
}

/* Fermeture : même principe que le toggle Menu (fixe viewport, au-dessus du panneau) */
#formulaire-reservation .gform__close {
  position: fixed;
  top: 1.85rem;
  right: var(--reserve-pl);
  z-index: 1095;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #000;
  mix-blend-mode: normal;
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}

@media (max-width: 991.98px) {
  #formulaire-reservation .gform__close {
    top: 0.85rem;
  }
}

#formulaire-reservation .gform__close span {
  font-family: "Mont", sans-serif;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.35rem;
}

#formulaire-reservation .gform__close svg circle {
  stroke: #000;
}

#formulaire-reservation .gform__close svg path {
  stroke: #000;
}

/* Second toggle « Réserver / Fermer » (ne pas utiliser .header__menu-toggle : réservé au JS du thème) */
.header__reserve-toggle {
  mix-blend-mode: difference;
  font-family: "Monschone", serif;
  text-transform: none;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  margin: 1.85rem clamp(0.5rem, 3.75vw, 5rem);
  padding: 1.25rem;
  opacity: 1;
  transition: color 0.35s ease, mix-blend-mode 0.35s ease;
  position: fixed;
  top: 0;
  right: clamp(5.5rem, 22vw, 12rem);
  z-index: 109;
  --pl: 2rem;
}

@media (max-width: 991.98px) {
  .header__reserve-toggle {
    margin: 0.85rem clamp(0.5rem, 3.75vw, 5rem);
    right: clamp(4.5rem, 28vw, 9rem);
    font-size: 1.125rem;
  }
}

body.is-reserve-open .header__reserve-toggle {
  mix-blend-mode: normal;
  color: #000;
}

.header__reserve-toggle span {
  position: relative;
  overflow: hidden;
  padding: 0 0.125rem;
}

.header__reserve-toggle em {
  display: block;
  font-style: normal;
  min-width: 4.75rem;
  text-align: right;
  transition: transform 0.45s cubic-bezier(0.18, 0.68, 0.91, 0.84), opacity 0.35s ease;
}

.header__reserve-toggle i {
  position: absolute;
  font-style: normal;
  left: 0;
  top: 100%;
  width: 100%;
  text-align: right;
  transition: transform 0.45s cubic-bezier(0.18, 0.68, 0.91, 0.84), top 0.45s cubic-bezier(0.18, 0.68, 0.91, 0.84);
}

body.is-reserve-open .header__reserve-toggle em {
  transform: translateY(-120%);
  opacity: 0;
}

body.is-reserve-open .header__reserve-toggle i {
  top: 0;
}

.header__reserve-toggle:after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: #fff;
  border-radius: 50%;
  margin-left: 0.875rem;
  position: relative;
  top: -1.5px;
  transition: transform 0.35s cubic-bezier(0.18, 0.68, 0.91, 0.84);
}

@media (max-width: 991.98px) {
  .header__reserve-toggle:after {
    width: 1.25rem;
    height: 1.25rem;
  }
}

body.is-reserve-open .header__reserve-toggle:after {
  background: #000;
}

body.is-reserve-open .header__reserve-toggle {
  z-index: 1096;
}

.header__reserve-toggle:hover:after {
  transform: scale(1.12);
}