/* ── Carousel Area : galerie défilement horizontal (façon GSAP horizontal-scrolling-gallery) ── */
			.gsap-gallery {
			  position: relative;
			  height: 100vh;
			  overflow: hidden;
			  display: flex;
			  align-items: center;
			  background-color: var(--title-color);
			}
			.gsap-gallery-track {
			  display: flex;
			  align-items: center;
			  gap: 24px;
			  padding: 0 8vw;
			  will-change: transform;
			}
			.gsap-gallery-item {
			  position: relative;
			  flex: 0 0 auto;
			  height: 68vh;
			  border-radius: 10px;
			  overflow: hidden;
			  display: block;
			}
			.gsap-gallery-item img {
			  height: 100%;
			  width: auto;
			  max-width: none;
			  display: block;
			  object-fit: cover;
			  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
			}
			.gsap-gallery-item:hover img {
			  transform: scale(1.05);
			}
			@media (max-width: 991px) {
			  .gsap-gallery {
			    height: auto;
			    padding: 60px 0;
			  }
			  .gsap-gallery-track {
			    overflow-x: auto;
			    -webkit-overflow-scrolling: touch;
			    scroll-snap-type: x proximity;
			    padding: 0 20px;
			  }
			  .gsap-gallery-item {
			    height: 50vh;
			    scroll-snap-align: center;
			  }
			}
			/* ── Illustrations latérales #carte (carte.png / louche.png) ── */
			/* --carte-container reprend les paliers de largeur du .container Bootstrap,
			   pour centrer les images dans la colonne (marge) restante de chaque côté. */
			#carte {
			  position: relative;
			  --carte-container: 960px;
			}
			@media (min-width: 1200px) {
			  #carte {
			    --carte-container: 1140px;
			  }
			}
			@media (min-width: 1400px) {
			  #carte {
			    --carte-container: 1320px;
			  }
			}
			.image-gauche, .image-droite {
			  position: absolute;
			  width: 130px;
			  pointer-events: none;
			  z-index: 1;
			}
			.image-gauche {
			  top: 4%;
			}
			.image-droite {
			  top: 10%;
			}
			.image-gauche {
			  left: calc((100vw - var(--carte-container)) / 4 - 65px);
			}
			.image-droite {
			  right: calc((100vw - var(--carte-container)) / 4 - 125px);
			  width: 250px;
			}
			.image-gauche img, .image-droite img {
			  width: 100%;
			  height: auto;
			  display: block;
			  will-change: transform;
			}
			@media (max-width: 991px) {
			  .image-gauche, .image-droite {
			    display: none;
			  }
			}
			/* ── Illustration Glaces & Sorbets (glace.svg) ── */
			.glace-subsection {
			  position: relative;
			}
			.image-glace {
			  position: absolute;
			  top: -10px;
			  left: calc(50% - 50vw + 40px);
			  width: 12vw;
			  pointer-events: none;
			  z-index: 1;
			}
			.image-glace img {
			  width: 100%;
			  height: auto;
			  display: block;
			  will-change: transform;
			}
			@media (max-width: 991px) {
			  .image-glace {
			    display: none;
			  }
			}
			/* ── Illustration verre de vin qui se remplit (main-et-verre.png / vin.png) ── */
			.wine-row-wrap {
			  position: relative;
			}
			.verre-vin-wrap {
			  position: absolute;
			  top: 2vh;
			  right: calc(50% - 50vw + 40px);
			  width: calc(12vw + 40px);
			  aspect-ratio: 650 / 700;
			  pointer-events: none;
			  z-index: 1;
			}
			.verre-vin-wrap img {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: auto;
			  display: block;
			}
			.verre-liquid {
			  clip-path: inset(100% 0 0 0);
			  will-change: clip-path;
			}
			@media (max-width: 991px) {
			  .verre-vin-wrap {
			    display: none;
			  }
			}
			/* ── Nav catégories sticky ── */
			.sticky-menu-nav-wrapper {
			  position: sticky;
			  top: 90px;
			  backdrop-filter: blur(15px);
			  z-index: 100;
			  padding: 0 0 60px;
			  transition: all 0.3s ease;
			}
			@media (max-width:991px) {
			  .sticky-menu-nav-wrapper {
			    top: 70px;
			    padding: 15px 0;
			  }
			}
			.sticky-menu-nav {
			  display: flex;
			  justify-content: flex-start;
			  gap: 12px;
			  list-style: none;
			  padding: 0;
			  margin: 0;
			  overflow-x: auto;
			  white-space: nowrap;
			  -webkit-overflow-scrolling: touch;
			}
			.sticky-menu-nav::-webkit-scrollbar {
			  display: none;
			}
			.sticky-menu-nav a {
			  font-family: var(--title-font);
			  font-size: 12px;
			  font-weight: 600;
			  text-transform: uppercase;
			  letter-spacing: 1px;
			  color: #9fa2ad;
			  padding: 10px 20px;
			  border-radius: 30px;
			  border: 1px solid rgba(255, 255, 255, 0.06);
			  background: rgba(255, 255, 255, 0.02);
			  transition: all 0.3s ease;
			  display: inline-block;
			  text-decoration: none;
			}
			.sticky-menu-nav a:hover, .sticky-menu-nav a.active {
			  color: #050f1e;
			  background: var(--theme-color);
			  border-color: var(--theme-color);
			}
			/* ── Blocs catégories ── */
			.menu-category-block {
			  scroll-margin-top: 180px;
			}
			@media (max-width:991px) {
			  .menu-category-block {
			    scroll-margin-top: 150px;
			  }
			}
			.category-header {
			  margin-bottom: 50px;
			}
			.category-header .sub-title {
			  color: var(--theme-color);
			  font-family: var(--title-font);
			  font-size: 13px;
			  font-weight: 500;
			  text-transform: uppercase;
			  letter-spacing: 2px;
			  display: block;
			  margin-bottom: 10px;
			  margin-top: 1rem;
			}
			.category-header .sec-title {
			  color: var(--smoke-color);
			  margin: 0 auto 15px auto;
			  text-transform: uppercase;
			}
			.category-header .sec-line {
			  width: 80px;
			  height: 3px;
			  background-color: var(--theme-color);
			  margin: 0 auto;
			}
			/* ── Carte item ── */
			.menu-item-card {
			  background: rgba(255, 255, 255, 0.02);
			  border: 1px solid rgba(255, 255, 255, 0.05);
			  border-radius: 12px;
			  padding: 25px 30px;
			  height: 100%;
			  display: flex;
			  flex-direction: column;
			  justify-content: center;
			  transition: all 0.4s cubic-bezier(.165, .84, .44, 1);
			  position: relative;
			}
			.menu-item-card:hover {
			  background: rgba(255, 255, 255, 0.04);
			  border-color: var(--theme-color);
			  transform: translateY(-5px);
			}
			.menu-item-top {
			  display: flex;
			  justify-content: space-between;
			  align-items: baseline;
			  margin-bottom: 12px;
			  gap: 15px;
			}
			.menu-item-title {
			  font-family: var(--title-font);
			  font-size: 16px;
			  font-weight: 600;
			  color: var(--smoke-color);
			  margin: 0;
			  text-transform: uppercase;
			  letter-spacing: 0.5px;
			  transition: color 0.3s ease;
			}
			@media (max-width:575px) {
			  .menu-item-title {
			    font-size: 14px;
			  }
			}
			.menu-item-card:hover .menu-item-title {
			  color: var(--theme-color);
			}
			.menu-item-dots {
			  flex-grow: 1;
			  border-bottom: 1px dotted rgba(255, 255, 255, 0.15);
			  margin: 0 10px;
			  position: relative;
			  top: -4px;
			  transition: border-color 0.3s ease;
			}
			.menu-item-card:hover .menu-item-dots {
			  border-bottom-color: rgba(227, 255, 4, 0.3);
			}
			.menu-item-price {
			  font-family: var(--title-font);
			  font-size: 16px;
			  font-weight: 700;
			  color: var(--theme-color);
			  white-space: nowrap;
			}
			@media (max-width:575px) {
			  .menu-item-price {
			    font-size: 14px;
			  }
			}
			.menu-item-desc {
			  font-family: var(--body-font);
			  font-size: 14px;
			  color: #9fa2ad;
			  margin: 0;
			  line-height: 1.6;
			}
			.menu-item-badge {
			  position: absolute;
			  top: -12px;
			  left: 25px;
			  background-color: var(--theme-color);
			  color: #050f1e;
			  font-family: var(--title-font);
			  font-size: 9px;
			  font-weight: 700;
			  padding: 3px 12px;
			  border-radius: 20px;
			  text-transform: uppercase;
			  letter-spacing: 0.5px;
				transform: rotate(-2deg);
			}
			.sub-category-title {
			  font-family: var(--title-font);
			  font-size: 37px;
			  color: var(--theme-color);
			  margin-bottom: 30px;
			  text-transform: uppercase;
			  letter-spacing: 1px;
			  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
			  padding-bottom: 12px;
			  text-align: center;
			}
			.provenance-box {
			  background: rgba(255, 255, 255, 0.01);
			  border: 1px dashed rgba(255, 255, 255, 0.1);
			  border-radius: 12px;
			  padding: 30px;
			  margin-top: 50px;
			}
			.provenance-badge {
			  font-family: var(--title-font);
			  font-size: 11px;
			  font-weight: 700;
			  color: #050f1e;
			  background-color: var(--theme-color);
			  padding: 5px 14px;
			  border-radius: 4px;
			  text-transform: uppercase;
			  letter-spacing: 1px;
			  display: inline-block;
			}
			.provenance-text {
			  font-family: var(--body-font);
			  font-size: 13px;
			  color: #9fa2ad;
			  margin: 0;
			  line-height: 1.7;
			}
			.button a:hover {
			  color: #050f1e;
			}
			.provenance-text strong {
			  color: var(--smoke-color);
			}
			/* ── Vins ── */
			.wine-table-wrap {
			  border: 1px solid rgba(255, 255, 255, 0.06);
			  border-radius: 14px;
			  overflow: hidden;
			  margin-bottom: 30px;
			}
			.wine-table-head {
			  background: rgba(227, 255, 4, 0.08);
			  padding: 18px 28px;
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
			}
			.wine-table-head h4 {
			  font-family: var(--title-font);
			  font-size: 13px;
			  font-weight: 700;
			  text-transform: uppercase;
			  letter-spacing: 2px;
			  color: var(--theme-color);
			  margin: 0;
			}
			.wine-cols-label {
			  display: flex;
			  gap: 28px;
			  font-family: var(--title-font);
			  font-size: 11px;
			  font-weight: 700;
			  letter-spacing: 1px;
			  color: #9fa2ad;
			  text-transform: uppercase;
			}
			.wine-cols-label span {
			  width: 46px;
			  text-align: right;
			}
			.wine-row {
			  display: flex;
			  justify-content: space-between;
			  align-items: baseline;
			  padding: 16px 28px;
			  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
			  transition: background 0.2s ease;
			  gap: 12px;
			}
			.wine-row:last-child {
			  border-bottom: none;
			}
			.wine-row:hover {
			  background: rgba(255, 255, 255, 0.02);
			}
			.wine-name {
			  font-size: 14px;
			  color: var(--smoke-color);
			  flex: 1;
			}
			.wine-origin {
			  font-size: 12px;
			  color: #9fa2ad;
			  display: block;
			  margin-top: 2px;
			}
			.wine-prices {
			  display: flex;
			  gap: 28px;
			  flex-shrink: 0;
			}
			.wine-prices span {
			  width: 46px;
			  text-align: right;
			  font-family: var(--title-font);
			  font-size: 14px;
			  font-weight: 700;
			  color: var(--theme-color);
			  white-space: nowrap;
			}
			.wine-prices span.empty {
			  color: transparent;
			}
			.cave-card {
			  background: rgba(255, 255, 255, 0.02);
			  border: 1px solid rgba(255, 255, 255, 0.05);
			  border-radius: 14px;
			  padding: 28px;
			  height: 100%;
			  transition: all 0.3s ease;
			}
			.cave-card:hover {
			  border-color: rgba(227, 255, 4, 0.3);
			}
			.cave-card-label {
			  font-family: var(--title-font);
			  font-size: 10px;
			  font-weight: 700;
			  letter-spacing: 2px;
			  text-transform: uppercase;
			  color: #050f1e;
			  background: var(--theme-color);
			  padding: 4px 12px;
			  border-radius: 20px;
			  display: inline-block;
			  margin-bottom: 18px;
			}
			.cave-card h4 {
			  font-family: var(--title-font);
			  font-size: 15px;
			  font-weight: 700;
			  text-transform: uppercase;
			  letter-spacing: 1px;
			  color: var(--smoke-color);
			  margin-bottom: 6px;
			}
			.cave-card .cave-subtitle {
			  font-size: 12px;
			  color: #9fa2ad;
			  margin-bottom: 20px;
			  font-style: italic;
			}
			.cave-item {
			  display: flex;
			  justify-content: space-between;
			  align-items: baseline;
			  padding: 10px 0;
			  border-bottom: 1px dotted rgba(255, 255, 255, 0.08);
			  gap: 10px;
			}
			.cave-item:last-child {
			  border-bottom: none;
			}
			.cave-item-name {
			  font-size: 14px;
			  color: var(--smoke-color);
			}
			.cave-item-price {
			  font-family: var(--title-font);
			  font-size: 15px;
			  font-weight: 700;
			  color: var(--theme-color);
			  white-space: nowrap;
			}
			.grandes-occasions-banner {
			  background: linear-gradient(135deg, rgba(227, 255, 4, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
			  border: 1px solid rgba(227, 255, 4, 0.2);
			  border-radius: 14px;
			  padding: 35px 40px;
			  margin-top: 30px;
			}
			.grandes-occasions-banner .go-title {
			  font-family: var(--title-font);
			  font-size: 12px;
			  letter-spacing: 3px;
			  text-transform: uppercase;
			  color: var(--theme-color);
			  margin-bottom: 6px;
			}
			.grandes-occasions-banner h3 {
			  font-family: var(--title-font);
			  font-size: 22px;
			  text-transform: uppercase;
			  color: var(--smoke-color);
			  margin-bottom: 28px;
			}
			.go-item {
			  display: flex;
			  justify-content: space-between;
			  align-items: baseline;
			  padding: 12px 0;
			  border-bottom: 1px dotted rgba(255, 255, 255, 0.08);
			  gap: 10px;
			}
			.go-item:last-child {
			  border-bottom: none;
			}
			.go-item-name {
			  font-size: 15px;
			  color: var(--smoke-color);
			}
			.go-item-origin {
			  font-size: 12px;
			  color: #9fa2ad;
			  display: block;
			}
			.go-item-price {
			  font-family: var(--title-font);
			  font-size: 17px;
			  font-weight: 700;
			  color: var(--theme-color);
			  white-space: nowrap;
			}
			@media (max-width:767px) {
			  .wine-cols-label {
			    gap: 14px;
			  }
			  .wine-prices {
			    gap: 14px;
			  }
			  .wine-cols-label span, .wine-prices span {
			    width: 38px;
			  }
			  .wine-row, .wine-table-head {
			    padding: 14px 16px;
			  }
			  .grandes-occasions-banner {
			    padding: 24px 20px;
			  }
			}
			/*=================================
    Parallax Image — .parallax-img
==================================*/
			/*
  Usage :
    <div class="parallax-img">
      <img src="..." alt="...">
    </div>

  Options via attribut data :
    data-parallax-speed="40"   → intensité du mouvement (défaut : 30)

  Le conteneur doit avoir une hauteur définie (height, min-height, etc.).
  L'image s'agrandit légèrement (scale 1.15) pour masquer les bords lors du déplacement.
*/
			.parallax-img {
			  overflow: hidden;
			}
			.parallax-img img {
			  width: 100%;
			  height: 100%;
			  object-fit: cover;
			  display: block;
			  will-change: transform;
			}
			/*=================================
    Parallax Row — .parallax-row
==================================*/
			/*
  Usage :
    <section class="parallax-row">
      <div class="parallax-row__content">
        <!-- texte, titre, boutons... -->
      </div>
      <div class="parallax-row__image">
        <img src="..." alt="...">
      </div>
    </section>

  Options via attribut data :
    data-parallax-speed="20"   → intensité du mouvement (défaut : 15)

  Variante image à gauche :
    <section class="parallax-row parallax-row--reverse"> ... </section>
*/
			.parallax-row {
			  display: flex;
			  align-items: stretch;
			  min-height: 500px;
			  position: relative;
			  z-index: 2;
			  /* S'assure que la ligne de parallax passe par-dessus les sections précédentes/suivantes */
			}
			/* Variante image à gauche, contenu à droite */
			.parallax-row--reverse {
			  flex-direction: row-reverse;
			}
			/* Colonne contenu */
			.parallax-row__content {
			  flex: 1;
			  display: flex;
			  align-items: center;
			  padding: 80px 60px;
			  position: relative;
			  z-index: 1;
			}
			/* Colonne image */
			.parallax-row__image {
			  flex: 0 0 50%;
			  overflow: hidden;
			  position: relative;
			  z-index: 2;
			  /* passe légèrement par-dessus le contenu */
			  margin-left: -40px;
			  /* chevauchement sur le contenu */
			  margin-top: -60px;
			  /* SORT du conteneur par le haut */
			  margin-bottom: -60px;
			  /* SORT du conteneur par le bas */
			}
			.parallax-row--reverse .parallax-row__image {
			  margin-left: 0;
			  margin-right: -40px;
			}
			.parallax-row__image img {
			  width: 100%;
			  height: 120%;
			  /* hauteur supplémentaire pour absorber le mouvement */
			  object-fit: cover;
			  display: block;
			  will-change: transform;
			  position: relative;
			  top: -10%;
			  /* centrage initial */
			}
			/* Responsive — mobile */
			@media (max-width: 991px) {
			  .parallax-row {
			    flex-direction: column;
			    min-height: auto;
			  }
			  .parallax-row--reverse {
			    flex-direction: column;
			  }
			  .parallax-row__content {
			    padding: 60px 30px;
			  }
			  .parallax-row__image {
			    flex: 0 0 auto;
			    height: 400px;
			    margin-left: 0;
			    margin-right: 0;
			    margin-top: 0;
			    margin-bottom: 0;
			  }
			  .parallax-row--reverse .parallax-row__image {
			    margin-right: 0;
			  }
			}
			@media (max-width: 575px) {
			  .parallax-row__content {
			    padding: 40px 20px;
			  }
			  .parallax-row__image {
			    height: 280px;
			  }
			  .vertical-text-right {
			    display: none !important;
			  }
			}
			/*===========================================
   Fullscreen Video Popup (Immersion) 
=============================================*/
			.mfp-fullscreen-video .mfp-container {
			  padding: 0 !important;
			}
			.mfp-fullscreen-video .mfp-content {
			  width: 100vw !important;
			  height: 100vh !important;
			  max-width: 100% !important;
			  margin: 0 !important;
			}
			.mfp-fullscreen-video .mfp-iframe-scaler {
			  width: 100% !important;
			  height: 100% !important;
			  padding-top: 0 !important;
			}
			.mfp-fullscreen-video .mfp-iframe-scaler iframe {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100vw;
			  height: 100vh;
			  box-shadow: none;
			  background: #000;
			}
			.mfp-fullscreen-video .mfp-close {
			  top: 30px !important;
			  right: 40px !important;
			  left: auto !important;
			  width: 160px !important;
			  height: 160px !important;
			  font-size: 160px !important;
			  line-height: 160px !important;
			  text-align: center;
			  color: #fff !important;
			  opacity: 0.8 !important;
			  transition: 0.3s;
			}
			.mfp-fullscreen-video .mfp-close:hover {
			  opacity: 1 !important;
			}
			@media (max-width: 991px) {
			  .mfp-fullscreen-video .mfp-close {
			    width: 60px !important;
			    height: 60px !important;
			    font-size: 60px !important;
			    line-height: 60px !important;
			  }
			}
			/* Transitions plus longues pour correspondre à l'immersion */
			.mfp-fullscreen-video.mfp-zoom-in .mfp-content {
			  opacity: 0;
			  transition: all 1.2s cubic-bezier(0.86, 0, 0.07, 1);
			  transform: scale(1.1);
			}
			.mfp-fullscreen-video.mfp-zoom-in.mfp-ready .mfp-content {
			  opacity: 1;
			  transform: scale(1);
			}
			.mfp-fullscreen-video.mfp-zoom-in.mfp-removing .mfp-content {
			  transform: scale(1.1);
			  opacity: 0;
			}
			.mfp-fullscreen-video.mfp-zoom-in.mfp-bg {
			  opacity: 0;
			  transition: opacity 1.2s ease-out;
			}
			.mfp-fullscreen-video.mfp-zoom-in.mfp-ready.mfp-bg {
			  opacity: 1;
			}
			.mfp-fullscreen-video.mfp-zoom-in.mfp-removing.mfp-bg {
			  opacity: 0;
			}
			/*=================================
    PhotoSwipe — Galerie plein écran
==================================*/
			/* Bouton de fermeture — cercle flottant haut droite */
			.pswp__button--close {
			  position: fixed !important;
			  top: 16px !important;
			  right: 16px !important;
			  z-index: 9999 !important;
			  width: 44px !important;
			  height: 44px !important;
			  background: rgba(0, 0, 0, 0.55) !important;
			  border-radius: 50% !important;
			  backdrop-filter: blur(6px) !important;
			  display: flex !important;
			  align-items: center !important;
			  justify-content: center !important;
			  transition: background 0.2s ease !important;
			}
			.pswp__button--close:hover {
			  background: rgba(0, 0, 0, 0.85) !important;
			}
			/* Compteur (5/8) */
			.pswp__counter {
			  font-size: 14px !important;
			  opacity: 0.7 !important;
			}
			/* Flèches de navigation */
			.pswp__button--arrow {
			  background: rgba(0, 0, 0, 0.4) !important;
			  border-radius: 50% !important;
			  backdrop-filter: blur(4px) !important;
			  width: 50px !important;
			  height: 50px !important;
			}
			/* Custom Responsive Background Video styling */
			.hero-slider {
			  position: relative !important;
			  overflow: hidden !important;
			}
			.hero-video-container {
			  position: absolute !important;
			  top: 0 !important;
			  left: 0 !important;
			  width: 100% !important;
			  height: 100% !important;
			  z-index: -2 !important;
			  overflow: hidden !important;
			  pointer-events: none !important;
			  container-type: size !important;
			}
			.hero-video-container iframe {
			  position: absolute !important;
			  top: 50% !important;
			  left: 50% !important;
			  transform: translate(-50%, -50%) !important;
			  width: 100vw !important;
			  height: 56.25vw !important;
			  min-height: 100% !important;
			  min-width: 177.78vh !important;
			  border: none !important;
			  /* Container queries for container-scoped responsiveness */
			  width: 100cqw !important;
			  height: 56.25cqw !important;
			  min-height: 100cqh !important;
			  min-width: 177.78cqh !important;
			}
			.ruby-text {
			  display: ruby-text !important;
			}
			/* Arrow carte animée */
			.arrow-carte-wrapper {
			  position: absolute;
			  bottom: 40px;
			  left: 50%;
			  transform: translateX(-50%);
			  width: 160px;
			  height: 160px;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  z-index: 10;
			  text-decoration: none;
			}
			.arrow-carte-text {
			  position: absolute;
			  width: 100%;
			  height: 100%;
			  animation: spin 10s linear infinite;
			}
			.arrow-carte-text text {
			  fill: #ffffff;
			  font-size: 13.5px;
			  font-weight: 600;
			  letter-spacing: 3px;
			}
			.arrow-carte-icon {
			  position: absolute;
			  width: 65px;
			  height: 65px;
			  animation: bounce-arrow 1.6s ease-in-out infinite;
			}
			.arrow-carte-icon img {
			  width: 100%;
			  height: 100%;
			}
			@keyframes spin {
			  from {
			    transform: rotate(0deg);
			  }
			  to {
			    transform: rotate(360deg);
			  }
			}
			@keyframes bounce-arrow {
			  0%, 100% {
			    transform: translateY(0);
			  }
			  45% {
			    transform: translateY(-10px);
			  }
			  65% {
			    transform: translateY(-5px);
			  }
			}
			/* ============================================================
   BOUTON RÉSERVER — Image reserver.png par-dessus le bouton
   Va-et-vient gauche → droite toutes les 3 secondes
   ============================================================ */
			.reserver-wrapper {
			  position: relative;
			  display: inline-block;
			}
			.reserver-img-overlay {
			  position: absolute;
			  top: 35%;
			  right: -76px;
			  transform: translateY(-50%);
			  width: 120px;
			  max-width: none;
			  height: auto;
			  pointer-events: none;
			  z-index: 10;
			  animation: reserver-swing 3s ease-in-out infinite;
			}
			@keyframes reserver-swing {
			  0% {
			    transform: translateY(-50%) translateX(0);
			  }
			  30% {
			    transform: translateY(-50%) translateX(18px);
			  }
			  60% {
			    transform: translateY(-50%) translateX(-8px);
			  }
			  80% {
			    transform: translateY(-50%) translateX(6px);
			  }
			  100% {
			    transform: translateY(-50%) translateX(0);
			  }
			}
			@media (max-width: 991px) {
			  .reserver-img-overlay {
			    width: 160px;
			    right: -90px;
			  }
			}
			/* ============================================================
   OVERLAY HERO — Lisibilité du texte sur background.jpg
   Surcharge l'opacité générale [data-opacity="5"] (0.5)
   pour le hero principal uniquement → portée à 0.7
   ============================================================ */
			#hero .hero-overlay::before, .hero-5 .hero-overlay::before {
			  opacity: 0.8;
			}
			.vertical-text-right {
			  -webkit-transform: rotate(90deg);
			  transform: rotate(90deg);
			  -webkit-transform-origin: bottom right 0;
			  transform-origin: bottom right 0;
			  letter-spacing: 6px;
			  display: inline-block;
			  margin: 11em 2em;
			  white-space: nowrap;
			  top: 60%;
			  position: absolute;
			  color: #ffffff;
			  padding: 0;
			  padding-top: 0;
			  line-height: 0;
			  z-index: 2;
			  right: 26px;
			  font-size: 12px;
			}
			.f-400 {
			  font-weight: 400;
			}
			#les-horaires {
			  color: #fff;
			  padding: 80px 0 60px;
			}
			.horaires-inner {
			  display: grid;
			  grid-template-columns: 1fr 1fr;
			  gap: 60px;
			  align-items: center;
			}
			.horaires-title-row {
			  display: flex;
			  align-items: center;
			  gap: 16px;
			  margin-bottom: 32px;
			}
			.horaires-title {
			  font-size: clamp(2rem, 4vw, 3.2rem);
			  font-weight: 800;
			  color: #fff;
			  margin-bottom: 0;
			  line-height: 1.1;
			}
			.horaires-list {
			  list-style: none;
			  padding: 0;
			  margin: 0 0 0 62px;
			}
			.horaires-row {
			  display: flex;
			  gap: 1.5em;
			  font-size: 1.15rem;
			  color: #fff;
			  line-height: 1.9;
			}
			.horaires-day {
			  min-width: 110px;
			}
			.horaires-ferme em {
			  font-style: italic;
			}
			.horaires-photo img {
			  width: 100%;
			  height: 320px;
			  object-fit: cover;
			  border-radius: 4px;
			}
			@media (max-width: 768px) {
			  .horaires-inner {
			    grid-template-columns: 1fr;
			  }
			  .horaires-photo {
			    display: none;
			  }
			}
			/* ── Illustrations latérales #carte-chasse (mêmes réglages que #carte) ── */
			#carte-chasse {
			  position: relative;
			  --carte-container: 960px;
			}
			@media (min-width: 1200px) {
			  #carte-chasse {
			    --carte-container: 1140px;
			  }
			}
			@media (min-width: 1400px) {
			  #carte-chasse {
			    --carte-container: 1320px;
			  }
			}
			/* ── Note centrée entre les blocs de plats (ex: "Sauce grand veneur ou sauce forestière au choix") ── */
			.menu-note-line {
			  text-align: center;
			  font-style: italic;
			  font-size: 14px;
			  color: #9fa2ad;
			  margin: 30px 0;
			}
			/* ── Guide des vins (tasting notes) ── */
			.wine-guide-intro-quote {
			  text-align: center;
			  font-family: var(--title-font);
			  font-size: 18px;
			  font-style: italic;
			  color: var(--theme-color);
			  margin-bottom: 35px;
			}
			.wine-guide-card {
			  background: rgba(255, 255, 255, 0.02);
			  border: 1px solid rgba(255, 255, 255, 0.05);
			  border-radius: 12px;
			  padding: 26px 28px;
			  height: 100%;
			  transition: all 0.3s ease;
			}
			.wine-guide-card:hover {
			  background: rgba(255, 255, 255, 0.04);
			  border-color: var(--theme-color);
			  transform: translateY(-5px);
			}
			.wine-guide-type {
			  display: block;
			  font-family: var(--title-font);
			  font-size: 11px;
			  font-weight: 700;
			  letter-spacing: 2px;
			  text-transform: uppercase;
			  color: var(--theme-color);
			  margin-bottom: 8px;
			}
			.wine-guide-name {
			  font-family: var(--title-font);
			  font-size: 18px;
			  font-weight: 600;
			  color: var(--smoke-color);
			  margin: 0 0 4px;
			  text-transform: uppercase;
			  letter-spacing: 0.5px;
			}
			.wine-guide-origin {
			  font-size: 12px;
			  font-style: italic;
			  color: #9fa2ad;
			  margin: 0 0 16px;
			}
			.wine-guide-note {
			  font-size: 13px;
			  color: #9fa2ad;
			  line-height: 1.6;
			  margin: 0 0 8px;
			}
			.wine-guide-note:last-child {
			  margin-bottom: 0;
			}
			.wine-guide-note strong {
			  color: var(--smoke-color);
			  font-family: var(--title-font);
			  font-weight: 600;
			  text-transform: uppercase;
			  font-size: 11px;
			  letter-spacing: 0.5px;
			  margin-right: 4px;
			}
			/* ── Correction hover icônes réseaux sociaux (.social-btn.style3) ──
   .link-effect/.effect-1 est prévu pour un effet de glissement texte
   (2 lignes de texte empilées) : au hover, .effect-1 passe de top:20%
   à top:-76%. Sur une icône seule (une seule ligne, pas de texte à
   faire défiler), ce glissement fait sortir l'icône de la zone visible
   (overflow:hidden) et elle disparaît. On neutralise le glissement pour
   ces boutons : seul le changement de couleur (.social-btn a:hover)
   reste actif. ── */
			.social-btn.style3 .link-effect:hover .effect-1 {
			  top: 20%;
			}
			/* ── Illustrations chien.png / plat-chasse.png collées au logo (la-chasse.html) ──
   Les 3 images (chien, logo, plat-chasse) sont dans une même rangée flex,
   centrée, pour que le chien/l'assiette restent proches du logo à toutes
   les largeurs d'écran plutôt que plaqués sur les bords du container. ── */
			.illu-chasse {
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  gap: clamp(20px, 4vw, 60px);
			  margin-bottom: 10px;
			}
			.illu-chasse-1, .illu-chasse-2 {
			  width: 150px;
			  flex-shrink: 0;
			}
			@media (max-width: 991px) {
			  .illu-chasse-1, .illu-chasse-2 {
			    display: none;
			  }
			}
			/* ── Icône "Guide des Vins" instable, comme un verre qui vacille ── */
			.illu-vin-wobble {
			  transform-origin: 50% 100%;
			  animation: illu-vin-wobble 3.2s ease-in-out infinite;
			}
			@keyframes illu-vin-wobble {
			  0%, 100% {
			    transform: rotate(0deg);
			  }
			  15% {
			    transform: rotate(-4deg);
			  }
			  32% {
			    transform: rotate(3deg);
			  }
			  48% {
			    transform: rotate(-3deg);
			  }
			  64% {
			    transform: rotate(2deg);
			  }
			  80% {
			    transform: rotate(-1.5deg);
			  }
			  92% {
			    transform: rotate(1deg);
			  }
			}
			/* ── Galerie collage (media.html) — mise en page façon mosaïque via colonnes CSS,
   inspirée du modèle "collage-wrapper" de demos.elemisthemes.com/brailie, réimplémentée
   sans dépendance JS externe (magnificPopup déjà présent gère la lightbox via #my-gallery). ── */
			.collage-wrapper {
			  padding: 100px 0 80px;
			}
			.collage {
			  columns: 4 280px;
			  column-gap: 18px;
			}
			/* Variante compacte pour une petite galerie de 2-4 photos (ex: page détail événement) :
   ratio fixe au lieu du columns masonry, plus net avec peu d'images. */
			.collage-compact {
			  display: grid;
			  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
			  columns: unset;
			}
			.collage-compact .collage-image-wrapper {
			  margin-bottom: 0;
			}
			.collage-compact .collage-image-wrapper a {
			  aspect-ratio: 4 / 3;
			  display: block;
			}
			.collage-compact .collage-image-wrapper img {
			  width: 100%;
			  height: 100%;
			  object-fit: cover;
			}
			@media (max-width: 1199px) {
			  .collage {
			    columns: 3 260px;
			  }
			}
			@media (max-width: 767px) {
			  .collage {
			    columns: 2 220px;
			  }
			}
			@media (max-width: 480px) {
			  .collage {
			    columns: 1;
			  }
			}
			.collage-image-wrapper {
			  break-inside: avoid;
			  margin-bottom: 18px;
			  border-radius: 10px;
			  overflow: hidden;
			  position: relative;
			}
			.collage-image-wrapper a {
			  display: block;
			  position: relative;
			}
			.collage-image-wrapper img {
			  width: 100%;
			  height: auto;
			  display: block;
			  transition: transform 0.6s cubic-bezier(.165, .84, .44, 1);
			}
			.collage-image-wrapper .overlay {
			  position: absolute;
			  inset: 0;
			  background: rgba(5, 15, 30, 0.45);
			  opacity: 0;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  transition: opacity 0.4s ease;
			  pointer-events: none;
			}
			.collage-image-wrapper .overlay .overlay-icon {
			  width: 26px;
			  height: 26px;
			  transform: scale(0.7);
			  transition: transform 0.4s ease;
			}
			.collage-image-wrapper:hover img {
			  transform: scale(1.08);
			}
			.collage-image-wrapper:hover .overlay {
			  opacity: 1;
			}
			.collage-image-wrapper:hover .overlay .overlay-icon {
			  transform: scale(2);
			}
			/* ── Liste d'événements horizontale (evenements.html) — inspirée de la présentation
   "entry-event" de demos.elemisthemes.com/brailie/operali, réimplémentée avec
   les composants propres au site (couleurs, typographie). ── */
			.event-listing {
			  display: flex;
			  flex-direction: column;
			  gap: 26px;
			}
			.entry-event {
			  background: rgba(255, 255, 255, 0.02);
			  border: 1px solid rgba(255, 255, 255, 0.05);
			  border-radius: 14px;
			  overflow: hidden;
			  transition: all 0.4s cubic-bezier(.165, .84, .44, 1);
			}
			.entry-event:hover {
			  border-color: var(--theme-color);
			}
			.entry-event a {
			  display: flex;
			  align-items: stretch;
			  height: 230px;
			  overflow: hidden;
			  color: inherit;
			  text-decoration: none;
			}
			.entry-event .meta-date {
			  flex: 0 0 170px;
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  justify-content: center;
			  text-align: center;
			  background: var(--theme-color);
			  color: var(--title-color);
			  font-family: var(--title-font);
			  padding: 12px 16px;
			}
			.entry-event .meta-date .day {
			  font-size: 64px;
			  font-weight: 900;
			  margin-top: 20px;
			}
			.entry-event .meta-date .month {
			  font-size: 14px;
			  font-weight: 600;
			  text-transform: uppercase;
			  letter-spacing: 1px;
			  margin-top: 8px;
			}
			.entry-event .meta-date .year {
			  font-size: 13px;
			  opacity: 0.75;
			}
			.entry-event .meta-date .hour {
			  display: block;
			  font-size: 20px;
			  font-weight: 600;
			  margin-top: 12px;
			  padding-top: 12px;
			  border-top: 1px solid rgba(5, 15, 30, 0.3);
			  width: 100%;
			}
			.entry-event .featured-image {
			  flex: 0 1 480px;
			  min-width: 120px;
			  position: relative;
			  overflow: hidden;
			}
			.entry-event .featured-image img {
			  width: 100%;
			  height: 100%;
			  object-fit: cover;
			  display: block;
			  transition: transform 0.6s cubic-bezier(.165, .84, .44, 1);
			}
			.entry-event:hover .featured-image img {
			  transform: scale(1.08);
			}
			.entry-event .event-details {
			  flex: 1 1 220px;
			  display: flex;
			  flex-direction: column;
			  justify-content: center;
			  padding: 16px 36px;
			  min-width: 220px;
			}
			.entry-event .entry-title {
			  display: -webkit-box;
			  -webkit-line-clamp: 2;
			  line-clamp: 2;
			  -webkit-box-orient: vertical;
			  overflow: hidden;
			  font-family: var(--title-font);
			  font-size: 36px;
			  font-weight: 600;
			  color: var(--smoke-color);
			  text-transform: uppercase;
			  letter-spacing: 0.5px;
			  line-height: 1.05;
			  margin-bottom: 4px;
			  transition: color 0.3s ease;
			}
			.entry-event:hover .entry-title {
			  color: var(--theme-color);
			}
			.entry-event .entry-title .subtitle {
			  display: block;
			  font-family: var(--body-font);
			  font-size: 13px;
			  font-weight: 400;
			  text-transform: none;
			  color: #9fa2ad;
			  margin-top: 2px;
			}
			.entry-event .entry-excerpt {
			  display: -webkit-box;
			  -webkit-line-clamp: 2;
			  line-clamp: 2;
			  -webkit-box-orient: vertical;
			  overflow: hidden;
			  font-size: 17px;
			  color: #ffffff;
			  line-height: 1.3;
			  margin: 8px 0 10px;
			}
			.entry-event .read-more {
			  display: inline-flex;
			  align-items: center;
			  gap: 8px;
			  font-family: var(--title-font);
			  font-size: 18px;
			  font-weight: 700;
			  letter-spacing: 0.5px;
			  text-transform: uppercase;
			  color: var(--theme-color);
			}
			.entry-event .read-more i {
			  transition: transform 0.3s ease;
			}
			.entry-event:hover .read-more i {
			  transform: translateX(4px);
			}
			@media (max-width: 767px) {
			  .entry-event a {
			    flex-direction: column;
			    height: auto;
			  }
			  .entry-event .meta-date {
			    flex-direction: row;
			    gap: 10px;
			    padding: 14px;
			    flex: 0 0 auto;
			  }
			  .entry-event .meta-date .day {
			    font-size: 24px;
			  }
			  .entry-event .meta-date .hour {
			    display: none;
			  }
			  .entry-event .featured-image {
			    flex: 0 0 auto;
			    aspect-ratio: 16 / 9;
			  }
			  .entry-event .event-details {
			    padding: 22px 24px 26px;
			  }
			  .arrow-carte-wrapper {
			    width: 115px;
			  }
			}
			/* ── Page détail d'un événement (evenement.html) ── */
			.event-hero {
			  position: relative;
			  border-radius: 16px;
			  overflow: hidden;
			  margin-bottom: 40px;
			}
			.event-hero img {
			  width: 100%;
			  max-height: 695px;
			  object-fit: cover;
			  display: block;
			}
			.event-hero .meta-date {
			  position: absolute;
			  top: 0;
			  left: 0;
			  background: var(--theme-color);
			  color: var(--title-color);
			  font-family: var(--title-font);
			  font-weight: 700;
			  border-radius: 10px 0 0;
			  padding: 12px 20px;
			  text-align: center;
			  line-height: 1.2;
			}
			.event-hero .meta-date .day {
			  display: block;
			  font-size: 28px;
			}
			.event-hero .meta-date .month {
			  display: block;
			  font-size: 12px;
			  text-transform: uppercase;
			  letter-spacing: 1px;
			}
			.event-hero .meta-date .hour {
			  display: block;
			  font-size: 11px;
			  font-weight: 400;
			  margin-top: 4px;
			  opacity: 0.8;
			}
			.event-content .entry-title {
			  font-family: var(--title-font);
			  text-transform: uppercase;
			  color: var(--smoke-color);
			  margin-bottom: 4px;
			}
			.event-content .entry-title .subtitle {
			  display: block;
			  font-family: var(--body-font);
			  font-size: 15px;
			  font-weight: 400;
			  color: var(--theme-color);
			  text-transform: none;
			  margin-top: 6px;
			}
			.event-content p {
			  color: #ffffff;
			  font-size: 15px;
			  line-height: 1.8;
			  max-width: 760px;
			}
			.event-info-table {
			  background: rgba(255, 255, 255, 0.02);
			  border: 1px solid rgba(255, 255, 255, 0.05);
			  border-radius: 14px;
			  padding: 10px 28px;
			  margin: 0 0 30px;
			  max-width: 500px;
			}
			.event-subtitle {
			  text-transform: uppercase;
			  display: block;
			  color: var(--theme-color);
			  font-family: var(--title-font);
			  font-size: 16px;
			  font-weight: 600;
			  margin-bottom: 12px;
			}
			.event-info-table .info-row {
			  display: flex;
			  justify-content: space-between;
			  gap: 20px;
			  padding: 16px 0;
			  border-bottom: 1px dotted rgba(255, 255, 255, 0.08);
			}
			.event-info-table .info-row:last-child {
			  border-bottom: none;
			}
			.event-info-table .info-label {
			  font-family: var(--title-font);
			  font-size: 11px;
			  font-weight: 700;
			  letter-spacing: 1px;
			  text-transform: uppercase;
			  color: #9fa2ad;
			}
			.event-info-table .info-value {
			  color: var(--smoke-color);
			  font-size: 14px;
			  text-align: right;
			}
			.event-back-link {
			  display: inline-flex;
			  align-items: center;
			  gap: 8px;
			  font-family: var(--title-font);
			  font-size: 12px;
			  font-weight: 700;
			  letter-spacing: 0.5px;
			  text-transform: uppercase;
			  color: #9fa2ad;
			  margin-bottom: 40px;
			  transition: color 0.3s ease;
			}
			.event-back-link:hover {
			  color: var(--theme-color);
			}
			/* ── Bandeau footer "Venez nous rendre visite" — photo qui se fond dans
   le jaune à droite, .btn/.bg-theme restent inchangés. ── */
			.footer-layout5 .footer-top {
			  background-image:
			    linear-gradient(to right, transparent 0%, transparent 28%, var(--theme-color) 58%), linear-gradient(rgba(255, 186, 4, 0.4), rgba(255, 186, 4, 0.4)), url('../images/image-banniere.jpg');
			  background-size: cover, cover, cover;
			  background-position: center, center, left center;
			  background-repeat: no-repeat, no-repeat, no-repeat;
			}
			/* ── Flèches Précédent/Suivant de la lightbox (magnificPopup) — icônes
   maison au lieu des triangles CSS par défaut. ── */
			.mfp-arrow.mfp-arrow-left, .mfp-arrow.mfp-arrow-right {
			  background-repeat: no-repeat;
			  background-position: center;
			  background-size: 50px;
			}
			.mfp-arrow-left:before, .mfp-arrow-left:after, .mfp-arrow-right:before, .mfp-arrow-right:after {
			  display: none;
			}
			.mfp-arrow.mfp-arrow-left {
			  background-image: url('../images/icon/gauche.svg');
			}
			.mfp-arrow.mfp-arrow-right {
			  background-image: url('../images/icon/droite.svg');
			}
			@media (max-width: 991px) {
			  /* Header visible : la barre se cale juste en dessous */
			  body:not(.hide-main-header) .sticky-menu-nav-wrapper {
			    top: var(--header-h, 108px);
			  }
			  .menu-section, [id] {
			    scroll-margin-top: calc(var(--header-h, 108px) + 90px);
			  }
			}
/* Ouverture instantanée de la vidéo : sans fondu ni zoom */
.mfp-fullscreen-video.mfp-zoom-in .mfp-content,
.mfp-fullscreen-video.mfp-zoom-in.mfp-bg {
  transition: none !important;
}
.mfp-fullscreen-video.mfp-zoom-in .mfp-content {
  opacity: 1 !important;
  transform: none !important;
}
.mfp-fullscreen-video.mfp-zoom-in.mfp-bg {
  opacity: 1 !important;
}

/* La fermeture garde son fondu */
.mfp-fullscreen-video.mfp-zoom-in.mfp-removing .mfp-content,
.mfp-fullscreen-video.mfp-zoom-in.mfp-removing.mfp-bg {
  transition: 0.4s !important;
  opacity: 0 !important;
}