/* ============================================
   LA TERRASSE CHEZ STEPHAN — Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* --- CSS Custom Properties --- */
:root {
   --color-sea: #4c99df;
   --color-sea-dark: #005a8e;
   --color-sea-deep: #003d5c;
   --color-sand: #e8dcc8;
   --color-sand-light: #f5f0e8;
   --color-sand-warm: #d4c4a8;
   --color-offwhite: #faf8f4;
   --color-text: #2c2c2c;
   --color-text-light: #6b6b6b;
   --color-white: #ffffff;
   --color-accent: #c0885a;
   --color-accent-light: #d4a574;
   --font-heading: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
   --font-body: 'Lato', 'Helvetica Neue', sans-serif;
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
   --shadow-md: 0 8px 30px rgba(0, 0, 0, .10);
   --shadow-lg: 0 16px 50px rgba(0, 0, 0, .14);
   --radius: 12px;
   --radius-lg: 20px;
   --transition: .35s cubic-bezier(.4, 0, .2, 1);
   --header-h: 70px;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   scroll-behavior: smooth;
   font-size: 16px;
   overflow-x: hidden;
}

body {
   font-family: var(--font-body);
   color: var(--color-text);
   background: var(--color-offwhite);
   line-height: 1.7;
   font-weight: 400;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased
}

img {
   display: block;
   max-width: 100%;
   height: auto
}

a {
   color: inherit;
   text-decoration: none
}

ul {
   list-style: none
}

address {
   font-style: normal
}

em {
   font-style: italic
}

sup {
   font-size: .65em
}

/* --- Container --- */
.container {
   width: 100%;
   max-width: 1140px;
   margin: 0 auto;
   padding: 0 20px
}

/* --- Section Base --- */
.section {
   padding: 80px 0
}

.section-header {
   text-align: center;
   margin-bottom: 50px
}

.section-label {
   display: inline-block;
   font-family: var(--font-body);
   font-size: .75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: var(--color-sea);
   margin-bottom: 12px
}

.section-title {
   font-family: var(--font-heading);
   font-size: clamp(2rem, 5vw, 3rem);
   font-weight: 600;
   color: var(--color-sea-deep);
   line-height: 1.2
}

.section-title em {
   color: var(--color-accent)
}

.title-ornament {
   width: 50px;
   height: 3px;
   background: linear-gradient(90deg, var(--color-sea), var(--color-accent));
   margin: 16px auto 0;
   border-radius: 2px
}

/* --- Buttons --- */
.btn {
   display: inline-block;
   padding: 14px 36px;
   border-radius: 50px;
   font-family: var(--font-body);
   font-size: .95rem;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   transition: var(--transition);
   cursor: pointer;
   border: none
}

.btn-primary {
   background: var(--color-sea);
   color: var(--color-white);
   box-shadow: 0 4px 20px rgba(0, 119, 190, .35)
}

.btn-primary:hover {
   background: var(--color-sea-dark);
   transform: translateY(-2px);
   box-shadow: 0 8px 30px rgba(0, 119, 190, .45)
}

/* --- Reveal Animation --- */
.reveal {
   opacity: 0;
   transform: translateY(35px);
   transition: opacity .8s cubic-bezier(.4, 0, .2, 1), transform .8s cubic-bezier(.4, 0, .2, 1)
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0)
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   transition: background .4s, box-shadow .4s, backdrop-filter .4s;
   padding-top: env(safe-area-inset-top, 0px);
}

.site-header.scrolled {
   background: rgba(250, 248, 244, .92);
   backdrop-filter: blur(12px);
   box-shadow: var(--shadow-sm)
}

.navbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: var(--header-h);
   padding: 0 24px;
   max-width: 1200px;
   margin: 0 auto
}

.navbar-right {
   display: flex;
   align-items: center;
   gap: 15px;
   z-index: 1001;
}

.navbar-actions {
   display: flex;
   align-items: center;
   gap: 10px;
}

.nav-action-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform .2s ease, opacity .2s ease;
}

.nav-action-btn:hover {
   transform: scale(1.08);
   opacity: 0.9;
}
.logo {
   display: flex;
   align-items: center;
   z-index: 1001
}

.logo-text {
   font-family: var(--font-heading);
   font-size: 1.3rem;
   letter-spacing: 1px;
   color: var(--color-white);
   transition: color .4s, transform .3s ease, opacity .3s ease;
   line-height: 0.9;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
}

.scrolled .logo-text {
   color: var(--color-sea-deep);
}

.logo-text em {
   display: block;
   font-style: italic;
   font-weight: 400;
   font-size: 0.75em;
   margin-top: 1px;
}

.logo-text:hover {
   transform: scale(1.03);
}

/* Version footer du logo texte (plus grande) */
.footer-logo.logo-text {
   font-size: clamp(3.5rem, 8vw, 4.5rem);
   line-height: 0.9;
   opacity: 0.95;
   justify-content: center;
   height: 100%;
}

.footer-logo.logo-text:hover {
   opacity: 1;
}

.footer-logo.logo-text em {
   margin-top: 3px;
}

.header-logo-img {
   height: 50px;
   width: auto;
   filter: brightness(0) invert(1);
   transition: filter .4s, transform .3s ease;
}

.scrolled .header-logo-img {
   filter: brightness(0); /* Black */
}

.header-logo-img:hover {
   transform: scale(1.03);
}

/* Nav Links */
.nav-links {
   display: flex;
   gap: 8px;
   margin-left: auto;
   margin-right: 20px;
}

.nav-links a {
   padding: 8px 18px;
   font-size: .85rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: rgba(255, 255, 255, .9);
   border-radius: 50px;
   transition: var(--transition)
}

.scrolled .nav-links a {
   color: var(--color-text)
}

.nav-links a:hover {
   background: rgba(255, 255, 255, .15);
}

.scrolled .nav-links a:hover,
.scrolled .nav-links a.active {
   background: rgba(0, 119, 190, .15);
   color: var(--color-sea)
}

/* Burger */
.burger {
   display: none;
   flex-direction: column;
   gap: 5px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 8px;
   z-index: 1001
}

.burger-line {
   width: 26px;
   height: 2.5px;
   background: var(--color-white);
   border-radius: 2px;
   transition: var(--transition)
}

.scrolled .burger-line {
   background: var(--color-sea-deep)
}

.burger.open .burger-line:nth-child(1) {
   transform: rotate(45deg) translate(5px, 5px)
}

.burger.open .burger-line:nth-child(2) {
   opacity: 0
}

.burger.open .burger-line:nth-child(3) {
   transform: rotate(-45deg) translate(5px, -5px)
}

/* ============================================
   HERO
   ============================================ */
.hero {
   position: relative;
   height: 100vh;
   min-height: 600px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden
}

.hero-bg {
   position: absolute;
   inset: 0;
   background-color: #001d30;
}

.hero-bg img,
.hero-bg video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 40%;
   transform: scale(1.05);
   animation: heroZoom 20s ease-in-out infinite alternate
}

@keyframes heroZoom {
   from {
      transform: scale(1.05)
   }

   to {
      transform: scale(1.15)
   }
}

.hero-overlay {
   position: absolute;
   inset: 0;
}

.hero-content {
   position: relative;
   text-align: center;
   color: var(--color-white);
   padding: 0 20px;
   max-width: 900px
}

/* Custom reveal for hero: slower, from top to bottom */
.hero .reveal {
   transform: translateY(-45px);
   transition: opacity 1.5s cubic-bezier(.4, 0, .2, 1), transform 1.5s cubic-bezier(.4, 0, .2, 1);
}

.hero .reveal.visible {
   transform: translateY(0);
}

.hero-tagline {
   display: block;
   font-size: .8rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 4px;
   margin-bottom: 50px;
   color: rgba(255, 255, 255, 0.85);
}

.hero-title-large {
   font-family: var(--font-heading);
   font-size: clamp(3rem, 10vw, 7rem);
   font-weight: 700;
   line-height: 1;
   margin-bottom: 20px;
   text-shadow: 0 2px 30px rgba(0, 0, 0, .3);
   width: 100%;
}

.hero-title-large em {
   display: block;
   font-size: .65em;
   font-weight: 400;
   margin-top: 5px;
}

.hero-logo-wrapper {
   display: flex;
   justify-content: center;
   width: 100%;
   margin-bottom: 25px;
}

.hero-logo-img {
   width: 100%;
   max-width: clamp(320px, 55vw, 650px);
   height: auto;
   filter: brightness(0) invert(1) drop-shadow(0 2px 20px rgba(0, 0, 0, .3));
}

.hero-subtitle {
   font-size: clamp(1rem, 2.5vw, 1.25rem);
   font-weight: 300;
   line-height: 1.6;
   margin-bottom: 36px;
   color: rgba(255, 255, 255, 0.9);
}

.hero-cta {
   animation-delay: .6s
}

/* Scroll indicator */
.hero-scroll-indicator {
   position: absolute;
   bottom: 30px;
   left: 50%;
   transform: translateX(-50%)
}

.hero-scroll-indicator span {
   display: block;
   width: 24px;
   height: 40px;
   border: 2px solid rgba(255, 255, 255, .5);
   border-radius: 12px;
   position: relative
}

.hero-scroll-indicator span::after {
   content: '';
   position: absolute;
   top: 6px;
   left: 50%;
   transform: translateX(-50%);
   width: 4px;
   height: 8px;
   background: rgba(255, 255, 255, .7);
   border-radius: 2px;
   animation: scrollBounce 2s infinite
}

@keyframes scrollBounce {

   0%,
   100% {
      transform: translateX(-50%) translateY(0);
      opacity: 1
   }

   50% {
      transform: translateX(-50%) translateY(14px);
      opacity: .3
   }
}

/* =══════════════════════════════════════════
   DIVIDER PARALLAX
   ============================================ */
.divider-parallax {
   position: relative;
   height: 300px;
   overflow: hidden;
   background-color: #001d30;
   z-index: 10;
}

.divider-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
}

.divider-bg img,
.divider-bg video {
   width: 100%;
   height: 130%;
   object-fit: cover;
   position: absolute;
   top: -15%;
   left: 0;
   will-change: transform;
}

.divider-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.35);
   z-index: 2;
   pointer-events: none;
}

/* ============================================
   NOTRE HISTOIRE
   ============================================ */
.notre-histoire {
   background: var(--color-offwhite)
}

.notre-histoire-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 50px;
   align-items: center
}

.notre-histoire-image {
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   position: relative
}

.notre-histoire-image::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: var(--radius-lg);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
   pointer-events: none
}

.notre-histoire-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s ease
}

.notre-histoire-image:hover img {
   transform: scale(1.04)
}

.notre-histoire-lead {
   font-family: var(--font-body);
   font-style: italic;
   font-size: 1.25rem;
   line-height: 1.7;
   color: var(--color-sea-deep);
   margin-bottom: 25px;
   padding-left: 20px;
   border-left: 3px solid var(--color-accent);
}

.notre-histoire-text .separator-ornament {
   margin: 0 0 25px 20px;
}

.notre-histoire-text>p:not(.notre-histoire-lead) {
   color: var(--color-text-light);
   margin-bottom: 30px;
   font-size: 1.1rem;
   line-height: 1.8;
}

.notre-histoire-values {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px
}

.value-item {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 18px 20px;
   border-radius: var(--radius);
   background: var(--color-white);
   box-shadow: var(--shadow-sm);
   transition: var(--transition)
}

.value-icon {
   font-size: 1.5rem;
   flex-shrink: 0;
   margin-top: 2px
}

.value-item h3 {
   font-family: var(--font-heading);
   font-size: 1rem;
   font-weight: 600;
   color: var(--color-sea-deep);
   margin-bottom: 4px
}

.value-item p {
   font-size: .88rem;
   color: var(--color-text-light);
   line-height: 1.5
}


/* ============================================
   CARTE (MENU)
   ============================================ */
.carte {
   background: var(--color-offwhite);
}

.menu-tabs-wrapper {
   display: flex;
   justify-content: center;
   margin-bottom: 50px;
}

.menu-tabs {
   display: flex;
   background: var(--color-sand-light);
   padding: 6px;
   border-radius: 40px;
   box-shadow: var(--shadow-sm);
}

.menu-tab-btn {
   background: none;
   border: none;
   padding: 12px 30px;
   font-family: var(--font-body);
   font-size: .95rem;
   font-weight: 700;
   color: var(--color-text-light);
   cursor: pointer;
   border-radius: 30px;
   transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.menu-tab-btn:hover {
   color: var(--color-accent);
}

.menu-tab-btn.active {
   background: var(--color-sea-deep);
   color: var(--color-white);
   box-shadow: var(--shadow-sm);
}

.menu-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 30px
}

.menu-category {
   display: grid;
   grid-template-columns: 260px 1fr;
   background: var(--color-white);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-md);
   transition: var(--transition)
}

.menu-category-image {
   overflow: hidden;
   min-height: 220px
}

.menu-category-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s ease
}

.menu-category-image img:hover {
   transform: scale(1.06)
}

.menu-category-content {
   padding: 30px
}

.menu-category-title {
   font-family: var(--font-heading);
   font-size: 1.35rem;
   font-weight: 600;
   color: var(--color-sea-deep);
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 10px
}

.menu-icon {
   font-size: 1.3rem
}

.menu-list {
   display: flex;
   flex-direction: column;
   gap: 16px
}

.menu-item {
   border-bottom: 1px solid rgba(0, 0, 0, .06);
   padding-bottom: 14px
}

.menu-item:last-child {
   border-bottom: none;
   padding-bottom: 0
}

.menu-item-header {
   display: flex;
   align-items: flex-end;
   gap: 8px
}

.menu-item-name {
   font-weight: 700;
   font-size: .95rem;
   color: var(--color-sea-deep);
   white-space: normal;
   word-break: break-word
}

.menu-item-dots {
   flex: 1;
   border-bottom: 2px dotted var(--color-sand-warm);
   margin: 0 4px;
   min-width: 20px;
   align-self: flex-end;
   margin-bottom: 4px
}

.menu-item-price {
   font-family: var(--font-heading);
   font-weight: 600;
   font-size: 1.05rem;
   color: var(--color-accent);
   white-space: nowrap
}

.menu-item-desc {
   font-size: .88rem;
   color: var(--color-text-light);
   margin-top: 6px;
   line-height: 1.5
}

.menu-item-prices {
   display: flex;
   gap: 16px;
   margin-top: 10px;
   flex-wrap: wrap
}

.price-tag {
   display: inline-block;
   padding: 6px 16px;
   background: var(--color-sand-light);
   border-radius: 50px;
   font-size: .82rem;
   color: var(--color-text-light)
}

.price-tag strong {
   color: var(--color-accent);
   font-weight: 700
}

.alcohol-warning {
   text-align: center;
   font-size: .8rem;
   color: var(--color-text-light);
   margin-top: 40px;
   opacity: .8;
   letter-spacing: 0.5px;
}

/* ============================================
   GALLERY
   ============================================ */
.gallery, .photo-gallery {
   background: var(--color-sand-light);
   padding: 80px 0;
}

.gallery-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
}

.gallery-item {
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   position: relative;
   padding-bottom: 75%; /* 4:3 Aspect Ratio */
}

.gallery-item img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s ease;
}

.gallery-item:hover img {
   transform: scale(1.04);
}

.photo-carousel {
   min-width: 0;
   display: flex;
   gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   padding: 10px calc(50% - 150px) 20px;
   scrollbar-width: none;
   align-items: center;
}

.photo-carousel::-webkit-scrollbar {
   display: none;
}

.photo-card {
   flex: 0 0 300px;
   scroll-snap-align: center;
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   position: relative;
   height: 400px;
}

.photo-card img,
.photo-card video {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s ease;
}

.photo-card:hover img,
.photo-card:hover video {
   transform: scale(1.04);
}

/* ============================================
   LOGEMENT (DÉTAILS)
   ============================================ */
.logement-section {
   background: var(--color-offwhite);
   padding: 80px 0 100px
}

.logement-card {
   display: grid;
   grid-template-columns: 1fr 1fr;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--color-white);
   box-shadow: var(--shadow-lg)
}

.logement-image {
   overflow: hidden;
   min-height: 350px
}

.logement-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s ease
}

.logement-image img:hover {
   transform: scale(1.04)
}

.logement-content {
   padding: 50px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center
}

.logement-content .section-label {
   text-align: left
}

.logement-title {
   font-family: var(--font-heading);
   font-size: clamp(1.6rem, 3vw, 2.2rem);
   font-weight: 600;
   color: var(--color-sea-deep);
   line-height: 1.2;
   margin-bottom: 8px
}

.logement-title em {
   color: var(--color-accent)
}

.logement-content .title-ornament {
   margin: 16px 0 20px
}

.logement-content p {
   color: var(--color-text-light);
   font-size: 1.02rem;
   line-height: 1.7;
   margin-bottom: 24px
}

.logement-features {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: space-around
}

.logement-feature {
   padding: 8px 18px;
   background: var(--color-sand-light);
   border-radius: 50px;
   font-size: .85rem;
   font-weight: 400;
   color: var(--color-text)
}

/* ============================================
   GOOGLE AVIS (Reviews)
   ============================================ */
.gavis {
   background: var(--color-offwhite);
   padding: 80px 0 0;
   overflow: hidden;
}

/* --- Header stats --- */
.gavis-header {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 28px;
   flex-wrap: wrap;
   margin-bottom: 40px
}

.gavis-glogo {
   flex-shrink: 0
}

.gavis-glogo svg {
   width: 44px;
   height: 44px
}

.gavis-stats {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.gavis-rating {
   display: flex;
   align-items: baseline;
   gap: 8px
}

.gavis-note {
   font-family: var(--font-heading);
   font-size: 2.2rem;
   font-weight: 700;
   color: var(--color-sea-deep);
   line-height: 1
}

.gavis-stars {
   display: flex;
   gap: 2px
}

.gavis-stars svg {
   width: 18px;
   height: 18px
}

.gavis-count {
   font-size: .88rem;
   color: var(--color-text-light)
}

.gavis-cta {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 6px;
   font-size: .85rem;
   font-weight: 700;
   color: var(--color-sea);
   transition: color .3s
}

.gavis-cta:hover {
   color: var(--color-sea-dark);
   text-decoration: underline
}

/* --- Carousel --- */
.gavis-carousel {
   min-width: 0;
   display: flex;
   gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   padding: 10px 0 20px 0;
   scrollbar-width: none;
   align-items: flex-start;
}

.gavis-carousel::-webkit-scrollbar {
   display: none
}

/* --- Card --- */
.gavis-card {
   position: relative;
   flex: 0 0 320px;
   scroll-snap-align: start;
   background: var(--color-white);
   border-radius: var(--radius);
   box-shadow: var(--shadow-sm);
   padding: 24px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   transition: box-shadow .3s, transform .3s;
   min-height: 19rem;
}

/* Card header */
.gavis-card-head {
   display: flex;
   align-items: center;
   gap: 12px;
   padding-right: 45px;
}

.gavis-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   font-weight: 700;
   color: #fff;
   flex-shrink: 0
}

.gavis-card-meta {
   display: flex;
   flex-direction: column
}

.gavis-card-name {
   display: flex;
   align-items: center;
   gap: 6px;
   font-weight: 700;
   font-size: .92rem;
   color: var(--color-text)
}

.gavis-lg {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   font-size: .72rem;
   font-weight: 400;
   color: var(--color-text-light)
}

.gavis-lg svg {
   width: 12px;
   height: 12px;
   fill: #F4B400
}

.gavis-card-date {
   font-size: .78rem;
   color: var(--color-text-light)
}

/* Card stars + text */
.gavis-card-stars {
   display: flex;
   gap: 2px
}

.gavis-card-stars svg {
   width: 16px;
   height: 16px
}

.gavis-booking-badge {
   position: absolute;
   top: 24px;
   right: 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: #003580;
   color: #fff;
   font-weight: 700;
   font-size: 1.05rem;
   width: 38px;
   height: 38px;
   border-radius: 8px 8px 8px 0;
}

.gavis-card-stars-spacer {
   height: 16px;
}

.gavis-card-text {
   font-size: .9rem;
   line-height: 1.55;
   color: var(--color-text);
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
   transition: max-height .4s ease
}

.gavis-card-text--expanded {
   -webkit-line-clamp: unset;
   overflow: visible
}

.gavis-voir-plus {
   background: none;
   border: none;
   color: var(--color-sea);
   font-size: .85rem;
   font-weight: 700;
   cursor: pointer;
   padding: 0;
   margin-top: -4px;
   transition: color .2s
}

.gavis-voir-plus:hover {
   color: var(--color-sea-dark);
   text-decoration: underline
}

/* Card footer */
.gavis-card-visit {
   font-size: .78rem;
   color: var(--color-text-light);
   margin-top: auto;
   padding-top: 8px;
   border-top: 1px solid rgba(0, 0, 0, .05)
}

/* Carousel centering on large screens */
@media(min-width:1200px) {
   .gavis-carousel {
      justify-content: center;
      padding-left: calc((100vw - 1140px)/2);
      padding-right: calc((100vw - 1140px)/2)
   }
}

/* ==========================================================================
   Navigation du Carrousel (Flèches PC)
   ========================================================================== */
.carousel-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

.carousel-nav {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   background-color: var(--white);
   border: 1px solid var(--primary-blue);
   color: var(--primary-blue);
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
}

.carousel-nav:hover {
   background-color: var(--primary-blue);
   color: var(--white);
}

/* Positionnement : on les fait légèrement déborder sur les côtés */
.carousel-nav.prev {
   left: 0px;
}

.carousel-nav.next {
   right: 0px;
}

/* On masque les flèches sur mobile car le tactile "swipe" est naturel */
@media (max-width: 768px) {
   .carousel-wrapper {
      gap: 0;
   }

   .carousel-nav {
      display: none;
   }
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
   background: var(--color-sea-deep);
   color: rgba(255, 255, 255, .85);
   padding: 0 0 30px;
   position: relative
}

.footer-wave {
   position: relative;
   top: -1px;
   margin-top: -2px;
   left: 0;
   width: 100%;
   line-height: 0;
   margin-bottom: 40px
}

.footer-wave svg {
   width: 100%;
   height: 80px
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.4fr 1.2fr 1fr;
   gap: 40px;
   padding-bottom: 40px;
   border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.lodging-footer-grid {
   grid-template-columns: 1.4fr 1.2fr 1fr;
}

.footer-logo {
   display: flex;
   align-items: center;
   height: 100%;
}

.footer-logo-img {
   height: 100%;
   max-height: 200px;
   width: 100%;
   object-fit: contain;
   object-position: left center;
   opacity: 0.95;
   filter: brightness(0) invert(1);
   transition: opacity .3s ease, transform .3s ease;
}

.footer-logo-img:hover {
   opacity: 1;
   transform: scale(1.03);
}

.footer-info h3,
.footer-hours h3,
.footer-social h3 {
   font-family: var(--font-heading);
   font-size: 1.05rem;
   font-weight: 600;
   margin-bottom: 16px;
   color: var(--color-white)
}

.footer-info address p {
   margin-bottom: 12px;
   font-size: .9rem;
}

.footer-contact-link {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   line-height: 1.6;
   color: var(--color-accent-light);
   font-weight: 700;
   transition: color .3s;
}

.footer-contact-link:hover {
   color: var(--color-white);
}

.footer-icon {
   flex-shrink: 0
}

.reservation-warning,
.hours-future-info {
   color: var(--color-accent-light);
   font-weight: 700;
   font-size: .85rem;
   margin-bottom: 24px;
   letter-spacing: 0.5px;
   line-height: 1.4;
}

.hours-table {
   width: 100%;
   font-size: .9rem
}

.hours-table td {
   padding: 6px 0;
   vertical-align: top
}

.hours-table td:first-child {
   width: 50%;
   padding-right: 12px;
   white-space: nowrap
}

.hours-table .closed td {
   opacity: .5
}

.social-links {
   display: flex;
   gap: 14px
}

.social-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .1);
   color: rgba(255, 255, 255, .85);
   transition: var(--transition)
}

.social-link:hover {
   background: var(--color-sea);
   color: var(--color-white);
   transform: translateY(-3px)
}

.social-link svg {
   width: 20px;
   height: 20px
}

.footer-bottom {
   text-align: center;
   padding-top: 24px;
   font-size: .8rem;
   opacity: .5
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media(max-width:900px) {
   .notre-histoire-grid {
      grid-template-columns: 1fr;
      gap: 30px
   }

   .notre-histoire-image {
      max-height: 350px
   }

   .menu-category {
      grid-template-columns: 1fr
   }

   .menu-category-image {
      max-height: 200px
   }

   .gallery-grid {
      grid-template-columns: 1fr;
      gap: 15px;
   }

   .logement-card {
      grid-template-columns: 1fr
   }

   .logement-image {
      max-height: 280px
   }

   .logement-content {
      padding: 30px 24px
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 30px
   }

   .gavis-card {
      flex: 0 0 280px
   }
}

@media(max-width:768px) {
   :root {
      --header-h: 60px
   }

   .burger {
      display: flex
   }

   .nav-links {
      position: fixed;
      top: 0;
      right: 0;
      width: 75%;
      max-width: 320px;
      height: 100vh;
      flex-direction: column;
      background: rgba(250, 248, 244, .97);
      backdrop-filter: blur(16px);
      padding: 100px 30px 40px;
      gap: 6px;
      transform: translateX(100%);
      transition: transform .4s cubic-bezier(.4, 0, .2, 1);
      box-shadow: -8px 0 30px rgba(0, 0, 0, .1);
      margin: 0
   }

   .nav-links.open {
      transform: translateX(0)
   }

   .nav-links a {
      color: var(--color-text);
      font-size: 1rem;
      padding: 14px 18px;
      border-radius: var(--radius)
   }

   .nav-links a:hover {
      background: rgba(0, 119, 190, .08)
   }

   .section {
      padding: 60px 0
   }

   .section-header {
      margin-bottom: 35px
   }

   .hero {
      min-height: 100svh
   }

   .footer-grid {
      grid-template-columns: 1fr
   }

   .footer-logo {
      justify-content: center;
   }

   .footer-logo-img {
      object-position: center;
      max-height: 120px;
   }

   .gavis-header {
      flex-direction: column;
      text-align: center;
      gap: 16px
   }

   .photo-carousel {
      padding: 10px 7.5vw 20px;
   }

   .gavis-card, .photo-card {
      flex: 0 0 75vw
   }
}

@media(max-width:480px) {
   .container {
      padding: 0 16px
   }

   .notre-histoire-values {
      gap: 12px
   }

   .value-item {
      padding: 14px
   }

   .menu-category-content {
      padding: 20px
   }

   .logement-features {
      flex-direction: column
   }

   .btn {
      padding: 12px 28px;
      font-size: .85rem
   }
}

/* Mobile nav overlay */
.nav-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .3);
   z-index: 999
}

.nav-overlay.active {
   display: block
}

/* --- Dynamic Image Loading Fade-in --- */
img.dynamic-img,
video.dynamic-img,
.hero-bg img.dynamic-img,
.hero-bg video.dynamic-img {
   opacity: 0;
   transition: opacity 0.6s ease-in-out;
}
img.dynamic-img.loaded,
video.dynamic-img.loaded,
.hero-bg img.dynamic-img.loaded,
.hero-bg video.dynamic-img.loaded {
   opacity: 1;
}

/* ============================================
   LOGEMENT DETAILS EXTENSIONS (INFOS & TARIFS)
   ============================================ */
.logement-practical-section {
   background-color: var(--color-offwhite);
}

.practical-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 30px;
   margin-top: 40px;
}

.practical-card {
   background: var(--color-white);
   padding: 30px 24px;
   border-radius: var(--radius);
   box-shadow: var(--shadow-sm);
   text-align: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.practical-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
}

.practical-icon {
   font-size: 2.2rem;
   margin-bottom: 15px;
}

.practical-card-title {
   font-family: var(--font-heading);
   font-size: 1.2rem;
   color: var(--color-sea-deep);
   margin-bottom: 12px;
   font-weight: 600;
}

.practical-card-detail {
   font-size: 0.95rem;
   color: var(--color-text-light);
   line-height: 1.6;
}

.logement-pricing-section {
   background-color: var(--color-offwhite);
}

.pricing-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 30px;
   margin-top: 40px;
}

@media(min-width: 769px) {
   .pricing-grid {
      grid-template-columns: 1fr 1fr;
      max-width: 850px;
      margin: 40px auto 0;
   }
}

.price-card {
   background: var(--color-white);
   border-radius: var(--radius);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
   border: 1px solid rgba(0, 61, 92, 0.06);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   display: flex;
   flex-direction: column;
}

.price-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
   border-color: var(--color-sand-warm);
}

.price-header {
   background: var(--color-sea-deep);
   color: var(--color-white);
   padding: 24px 20px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
}

.price-season-name {
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-weight: 700;
   color: var(--color-sand);
}

.price-value {
   font-family: var(--font-heading);
   font-size: 2rem;
   font-weight: 700;
}

.price-value small {
   font-size: 0.9rem;
   font-weight: 300;
   opacity: 0.85;
}

.price-body {
   padding: 24px 20px;
   text-align: center;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 15px;
}

.price-dates {
   font-size: 0.95rem;
   color: var(--color-text);
   line-height: 1.5;
}

.price-min-stay {
   display: inline-block;
   font-size: 0.8rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--color-accent);
   padding: 4px 12px;
   background: rgba(192, 136, 90, 0.08);
   border-radius: 20px;
   align-self: center;
}

@media(max-width: 768px) {
   .practical-grid,
   .pricing-grid {
      gap: 20px;
      margin-top: 30px;
   }
   .practical-card {
      padding: 25px 20px;
   }
   .price-body {
      padding: 20px;
   }
}

/* --- Logement Prestations & Atouts --- */
.logement-amenities-section {
   background-color: var(--color-sand-light);
}

.amenities-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 25px;
   margin-top: 45px;
}

.amenity-card {
   display: flex;
   align-items: center;
   gap: 15px;
   padding: 20px 24px;
   background-color: var(--color-offwhite);
   border-radius: var(--radius);
   border: 1px solid rgba(0, 0, 0, 0.03);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.amenity-card:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-sm);
   border-color: var(--color-sand-warm);
}

.amenity-icon {
   font-size: 1.8rem;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 45px;
   height: 45px;
   background: var(--color-white);
   border-radius: 50%;
   box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.amenity-text {
   font-size: 0.95rem;
   font-weight: 500;
   color: var(--color-text);
}

@media(max-width: 992px) {
   .amenities-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media(max-width: 576px) {
   .amenities-grid {
      grid-template-columns: 1fr;
      gap: 15px;
   }
   .amenity-card {
      padding: 16px 20px;
   }
}

/* ==========================================================================
   Lightbox Interactive
   ========================================================================== */
#histoire-img,
#logement-image,
.photo-card img,
.photo-card video,
.gallery-item img,
.gallery-item video,
.menu-category-image img {
   cursor: zoom-in;
}

.lightbox {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 29, 48, 0.95);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity .35s ease, visibility .35s ease;
}

.lightbox.active {
   opacity: 1;
   visibility: visible;
}

.lightbox-close {
   position: absolute;
   top: 24px;
   right: 24px;
   background: none;
   border: none;
   color: var(--color-white);
   font-size: 2.5rem;
   cursor: pointer;
   opacity: 0.7;
   transition: opacity .3s, transform .3s;
   z-index: 10000;
}

.lightbox-close:hover {
   opacity: 1;
   transform: scale(1.1);
}

.lightbox-content {
   max-width: 90%;
   max-height: 85vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transform: scale(0.9);
   transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.lightbox.active .lightbox-content {
   transform: scale(1);
}

.lightbox-content img {
   max-width: 100%;
   max-height: 75vh;
   object-fit: contain;
   border-radius: var(--radius);
   box-shadow: var(--shadow-lg);
}

.lightbox-caption {
   color: rgba(255, 255, 255, 0.85);
   font-size: 0.95rem;
   margin-top: 16px;
   text-align: center;
   font-family: var(--font-body);
}

.amenity-icon-img {
   width: 24px;
   height: 24px;
   object-fit: contain;
}

.practical-icon-img {
   width: 38px;
   height: 38px;
   object-fit: contain;
   display: block;
   margin: 0 auto 15px;
}

#logement-avis-section {
   background-color: var(--color-sand-light);
}

#logement-avis-logo-svg {
   border-radius: 8px;
   overflow: hidden;
}