/* ==========================================================================
   L'INDIGO — RESTAURANT BORD DE MER — VILLENEUVE-LOUBET
   Feuille de style de la page publique
   Version 2.4.0 — 2026-08-03 11:05
   ========================================================================== */

:root {
  /* Palette Thème Clair & Lumineux (Riviera Sunshine) */
  --bg-deep: #F7F5F0;
  --bg-dark: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-solid: #FFFFFF;
  --bg-card-hover: #F1ECE3;
  --bg-glass: rgba(255, 255, 255, 0.94);
  
  --color-gold: #C08A3E;
  --color-gold-dark: #9C6F2E;
  --color-gold-light: #E0AE62;
  --color-gold-glow: rgba(224, 174, 98, 0.25);
  --color-turquoise: #008B7D;
  --color-turquoise-light: #00A896;
  --color-coral: #D9534F;

  --text-main: #0A1424; /* Indigo très sombre pour un contraste parfait */
  --text-sub: #2C3E50;
  --text-muted: #64748B;
  --text-gold: #9C6F2E;

  --border-gold: rgba(224, 174, 98, 0.3);
  --border-subtle: rgba(10, 20, 36, 0.08);

  /* Fonts */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Spacings & Layout */
  --header-height: 80px;
  --sticky-bar-height: 72px;
  --container-max: 1200px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Courbes de mouvement sur mesure (jamais les défauts du navigateur) */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);

  /* Durées : tout ce qui est UI reste sous 300 ms, l'image seule se permet plus */
  --dur-press: 140ms;
  --dur-ui: 240ms;
  --dur-card: 320ms;
  --dur-media: 750ms;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  line-height: 1.6;
  padding-bottom: var(--sticky-bar-height);
}

@media (min-width: 769px) {
  body {
    padding-bottom: 0;
  }
}

/* Le titre d'une section ne doit jamais passer sous l'en-tête fixe
   quand on arrive dessus par un lien du menu. */
section[id] {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

/* Repère de navigation au clavier : visible partout, y compris sur fond sombre. */
:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.cocktails-section :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-gold-light);
}

/* Retour de pression : tout ce qui se clique répond sous le doigt, au contact. */
.btn,
.menu-tab,
.cocktail-filter-tab,
.sticky-btn,
.header-phone-btn,
.brand-logo,
.phone-link {
  -webkit-tap-highlight-color: transparent;
}

.btn:active,
.menu-tab:active,
.cocktail-filter-tab:active,
.sticky-btn:active,
.header-phone-btn:active {
  transform: scale(0.97);
  transition-duration: var(--dur-press);
}

.brand-logo:active .brand-symbol {
  transform: scale(0.94);
}

.brand-symbol {
  transition: transform var(--dur-press) var(--ease-out-strong);
}

/* Common Containers */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* Typography Helpers */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-main);
}

.text-gold {
  color: var(--color-gold-dark);
}

.text-turquoise {
  color: var(--color-turquoise);
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: 12px;
}

.section-tag::before, .section-tag::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: var(--color-gold);
}

.section-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 16px;
  letter-spacing: -0.5px;
  color: var(--text-main);
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-sub);
  max-width: 680px;
  margin: 0 auto 40px auto;
}

.text-center {
  text-align: center;
}

/* Header & Navigation */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--transition-normal);
}

.main-header.scrolled {
  background: var(--bg-glass);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid var(--border-gold);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  color: var(--text-main);
}

.brand-symbol {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0F233A 0%, #00A896 100%);
  border: 1px solid var(--color-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(15, 35, 58, 0.2);
}

/* Le logo de la maison, dans l'en-tête. Sa hauteur commande sa largeur :
   le dessin garde ses proportions quoi qu'il arrive. */
.brand-logo-image {
  height: 46px;
  width: auto;
  display: block;
  transition: transform var(--dur-press) var(--ease-out-strong);
}
.brand-logo:active .brand-logo-image { transform: scale(0.96); }

@media (max-width: 420px) {
  .brand-logo-image { height: 34px; }
}

/* Le logo dans le pied de page, sur fond sombre. */
.footer-logo {
  height: auto;
  width: 100%;
  max-width: 260px;
  display: block;
  margin-bottom: 14px;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-main);
}

.nav-desktop {
  display: none;
}

@media (min-width: 992px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .nav-link {
    color: var(--text-sub);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: color var(--transition-fast);
    position: relative;
    padding: 6px 0;
  }

  .nav-link:hover, .nav-link.active {
    color: var(--color-gold-dark);
  }

  .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-gold);
    transition: width var(--transition-normal);
  }

  .nav-link:hover::after, .nav-link.active::after {
    width: 100%;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-phone-btn {
  display: none;
}

@media (min-width: 640px) {
  .header-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--text-main);
    border: 1px solid var(--text-main);
    color: #FFFFFF;
    padding: 10px 18px;
    min-height: 44px;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background var(--dur-ui) var(--ease-out-strong),
                border-color var(--dur-ui) var(--ease-out-strong),
                transform var(--dur-ui) var(--ease-out-strong),
                box-shadow var(--dur-ui) var(--ease-out-strong);
    box-shadow: 0 4px 12px rgba(10, 20, 36, 0.15);
  }
}

@media (hover: hover) and (pointer: fine) {
  .header-phone-btn:hover {
    background: var(--color-gold-dark);
    border-color: var(--color-gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(154, 123, 28, 0.32);
  }
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  position: relative;
}

/* La zone à toucher dépasse le dessin des trois barres : 54 × 44 au doigt,
   sans déformer le trait ni casser l'animation en croix. */
.menu-toggle::after {
  content: '';
  position: absolute;
  inset: -12px;
}

@media (min-width: 992px) {
  .menu-toggle {
    display: none;
  }
}

.menu-toggle span {
  width: 100%;
  height: 2.5px;
  background-color: var(--text-main);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.menu-toggle.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Mobile Navigation Overlay */
.nav-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #FFFFFF;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.nav-mobile-overlay.active {
  opacity: 1;
  visibility: visible;
}

.nav-mobile-link {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--text-main);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  transition: color var(--dur-ui) var(--ease-out-strong),
              transform var(--dur-ui) var(--ease-out-strong);
}

.nav-mobile-link:hover,
.nav-mobile-link:active {
  color: var(--color-gold-dark);
}

.nav-mobile-link:active {
  transform: scale(0.97);
}

/* Section Common Styling */
section {
  padding: 90px 0;
  position: relative;
}

/* 1. HERO SECTION */
.hero-section {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: calc(var(--header-height) + 30px);
  padding-bottom: 60px;
  background: linear-gradient(180deg, #E8F3F5 0%, var(--bg-deep) 100%);
  overflow: hidden;
}

.hero-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.72;
  filter: saturate(1.04) brightness(1.02);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 78% at 50% 62%, rgba(247, 245, 240, 0.94) 0%, rgba(247, 245, 240, 0.62) 48%, rgba(247, 245, 240, 0) 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(247, 245, 240, 0.30) 46%, rgba(247, 245, 240, 0.90) 84%, var(--bg-deep) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
}

.opening-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid var(--color-gold);
  padding: 8px 22px;
  border-radius: var(--radius-full);
  color: var(--color-gold-dark);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 24px;
  box-shadow: 0 4px 15px rgba(224, 174, 98, 0.15);
}

.opening-dot {
  width: 10px;
  height: 10px;
  background-color: var(--color-turquoise);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--color-turquoise);
}

.hero-title {
  font-size: clamp(3rem, 7.5vw, 5.5rem);
  letter-spacing: -1px;
  margin-bottom: 12px;
  color: var(--text-main);
}

/* La signature de la maison, accrochée au nom. Elle reste nettement plus
   petite : elle accompagne le nom, elle ne le concurrence pas. Sur téléphone
   elle passe à la ligne plutôt que d'écraser le titre. */
.hero-title-signature {
  display: inline-block;
  margin-left: 0.42em;
  font-size: 0.34em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-gold-dark);
  vertical-align: 0.72em;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .hero-title-signature {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 0.28em;
    vertical-align: baseline;
  }
}

.hero-tagline {
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  color: var(--color-gold-dark);
  font-family: var(--font-serif);
  font-style: italic;
  margin-bottom: 20px;
}

.hero-description {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--text-sub);
  margin-bottom: 36px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Button UI Components */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-ui) var(--ease-out-strong),
              color var(--dur-ui) var(--ease-out-strong),
              border-color var(--dur-ui) var(--ease-out-strong),
              transform var(--dur-ui) var(--ease-out-strong),
              box-shadow var(--dur-ui) var(--ease-out-strong);
  border: none;
  min-height: 48px;
}

.btn svg {
  flex-shrink: 0;
}

.btn-primary {
  background: var(--text-main);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(10, 20, 36, 0.2);
}

.btn-gold {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(224, 174, 98, 0.3);
}

.btn-turquoise {
  background: linear-gradient(135deg, var(--color-turquoise) 0%, #006D62 100%);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(0, 139, 125, 0.25);
}

.btn-outline {
  background: #FFFFFF;
  border: 1px solid var(--text-main);
  color: var(--text-main);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(10, 20, 36, 0.3);
    background: var(--color-gold-dark);
  }

  .btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(224, 174, 98, 0.42);
  }

  .btn-turquoise:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0, 139, 125, 0.36);
    background: linear-gradient(135deg, #00A896 0%, var(--color-turquoise) 100%);
  }

  .btn-outline:hover {
    background: var(--text-main);
    color: #FFFFFF;
    transform: translateY(-2px);
  }

  .sticky-btn-call:hover {
    background: var(--color-gold-dark);
  }

  .sticky-btn-route:hover {
    background: #E8E0D2;
  }
}

/* 2. LE LIEU SECTION */
.place-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 992px) {
  .place-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.place-img-wrapper {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-gold);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.place-img-wrapper img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-media) var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .place-img-wrapper:hover img {
    transform: scale(1.04);
  }
}

.place-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 30px;
}

@media (min-width: 640px) {
  .place-features {
    grid-template-columns: 1fr 1fr;
  }
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 24px;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: border-color var(--dur-card) var(--ease-out-strong),
              transform var(--dur-card) var(--ease-out-strong),
              box-shadow var(--dur-card) var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .feature-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(10, 20, 36, 0.08);
  }

  .feature-card:hover .feature-icon {
    background: rgba(0, 139, 125, 0.18);
    transform: scale(1.06);
  }
}

.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(0, 139, 125, 0.1);
  color: var(--color-turquoise);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: background var(--dur-ui) var(--ease-out-strong),
              transform var(--dur-ui) var(--ease-out-strong);
}

.feature-card h4 {
  font-size: 1.15rem;
  margin-bottom: 6px;
  color: var(--text-main);
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* 3. SECTION LES MENUS & FORMULES */
.formulas-section {
  background: linear-gradient(180deg, #F5F2EC 0%, #EBE6DC 100%);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 100px 0;
}

.formulas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 992px) {
  .formulas-grid {
    grid-template-columns: 1fr 1.08fr 1fr;
    align-items: stretch;
  }
}

.formula-card {
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 38px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--dur-card) var(--ease-out-strong),
              box-shadow var(--dur-card) var(--ease-out-strong),
              border-color var(--dur-card) var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .formula-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(10, 20, 36, 0.11);
    border-color: var(--color-gold);
  }

  .formula-card:hover .formula-price {
    transform: scale(1.04);
  }

  .formula-card.featured:hover {
    box-shadow: 0 24px 55px rgba(224, 174, 98, 0.24);
  }
}

.formula-card:active {
  transform: translateY(-3px) scale(0.995);
  transition-duration: var(--dur-press);
}

.formula-card.featured {
  border: 2px solid var(--color-gold);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF6EE 100%);
  box-shadow: 0 15px 40px rgba(224, 174, 98, 0.15);
}

.formula-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 5px 20px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(154, 123, 28, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.formula-header {
  text-align: center;
  border-bottom: 1px solid var(--border-gold);
  padding-bottom: 22px;
  margin-bottom: 24px;
}

.formula-title {
  font-size: 1.75rem;
  color: var(--text-main);
  margin-bottom: 4px;
}

.formula-subtitle {
  font-size: 0.9rem;
  color: var(--color-gold-dark);
  font-family: var(--font-serif);
  font-style: italic;
}

.formula-price {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  margin-top: 12px;
  line-height: 1;
  transform-origin: center;
  transition: transform var(--dur-card) var(--ease-out-strong);
}

.formula-price span {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-muted);
}

.formula-courses {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
  flex-grow: 1;
}

.course-block {
  border-bottom: 1px solid rgba(10, 20, 36, 0.06);
  padding-bottom: 12px;
}

.course-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.course-type {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-turquoise);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.course-type svg {
  flex-shrink: 0;
}

.course-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 2px;
}

.course-desc {
  font-size: 0.86rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
}

.formula-footer-note {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--border-subtle);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-sub);
}

/* La ligne de précision sous la note de bas de carte (jours de service, etc.) */
.formula-footer-precision {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Filet sans JavaScript : les trois sections de contenu sont construites au
   chargement, on prévient plutôt que de laisser un blanc inexpliqué. */
.js-requis {
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 24px 0;
}

.cocktails-section .js-requis {
  color: #C3CEDE;
}

/* 4. LA CARTE SECTION & PICTOS CATEGORIES */
.menu-section {
  background: #FFFFFF;
}

.menu-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.menu-banner {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-gold);
  box-shadow: 0 14px 34px rgba(10, 20, 36, 0.08);
  margin-bottom: 40px;
}

.menu-banner img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 55%;
  transition: transform var(--dur-media) var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .menu-banner:hover img {
    transform: scale(1.04);
  }
}

@media (max-width: 640px) {
  .menu-banner img {
    height: 180px;
  }
}

.menu-tab {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  color: var(--text-sub);
  padding: 11px 22px;
  min-height: 44px;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-ui) var(--ease-out-strong),
              color var(--dur-ui) var(--ease-out-strong),
              border-color var(--dur-ui) var(--ease-out-strong),
              transform var(--dur-ui) var(--ease-out-strong);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.menu-tab svg {
  color: var(--color-gold-dark);
  transition: color var(--dur-ui) var(--ease-out-strong);
  flex-shrink: 0;
}

.menu-tab.active {
  background: var(--text-main);
  color: #FFFFFF;
  border-color: var(--text-main);
}

.menu-tab.active svg {
  color: #FFFFFF;
}

@media (hover: hover) and (pointer: fine) {
  .menu-tab:hover {
    background: var(--text-main);
    color: #FFFFFF;
    border-color: var(--text-main);
    transform: translateY(-2px);
  }

  .menu-tab:hover svg {
    color: #FFFFFF;
  }
}

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

@media (min-width: 768px) {
  .menu-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.menu-category-card {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
  transition: transform var(--dur-card) var(--ease-out-strong),
              box-shadow var(--dur-card) var(--ease-out-strong),
              border-color var(--dur-card) var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .menu-category-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-gold);
    box-shadow: 0 14px 32px rgba(10, 20, 36, 0.07);
  }

  .menu-category-card:hover .category-title-icon {
    background: rgba(224, 174, 98, 0.24);
    transform: rotate(-6deg) scale(1.06);
  }

  .menu-item:hover .menu-item-name {
    color: var(--color-gold-dark);
  }

  .menu-item:hover .menu-item-dots {
    border-bottom-color: rgba(224, 174, 98, 0.55);
  }

  .menu-item:hover .menu-item-price {
    transform: scale(1.06);
  }
}

.menu-category-title {
  font-size: 1.5rem;
  color: var(--color-gold-dark);
  border-bottom: 1px solid var(--border-gold);
  padding-bottom: 14px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-category-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.category-title-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(224, 174, 98, 0.15);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-ui) var(--ease-out-strong),
              transform var(--dur-ui) var(--ease-out-strong);
}

.menu-item {
  margin-bottom: 20px;
  padding: 4px 6px;
  margin-left: -6px;
  margin-right: -6px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-ui) var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .menu-item:hover {
    background: rgba(224, 174, 98, 0.06);
  }
}

.menu-item:last-child {
  margin-bottom: 0;
}

.menu-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}

.menu-item-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
  transition: color var(--dur-ui) var(--ease-out-strong);
}

.menu-item-dots {
  flex-grow: 1;
  border-bottom: 1px dotted rgba(10, 20, 36, 0.2);
  transition: border-bottom-color var(--dur-ui) var(--ease-out-strong);
}

.menu-item-price {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-gold-dark);
  transform-origin: right center;
  transition: transform var(--dur-ui) var(--ease-out-strong);
}

.menu-item-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
}

.menu-disclaimer {
  margin-top: 40px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ==========================================================================
   5. LA CARTE DES COCKTAILS — GALERIE « HEURE DORÉE » (v1.8.0)
   Le seul moment de la page qui bascule au crépuscule, et c'est voulu : les
   cocktails se boivent au coucher du soleil, et les six photos sont toutes
   prises à cette heure-là. L'indigo profond est déjà celui du pied de page,
   donc on reste dans la même marque, juste plus tard dans la journée.
   Chaque cocktail porte sa propre photo : plus de colonne d'aperçu, donc plus
   de moitié d'écran vide quand on fait défiler.
   ========================================================================== */
.cocktails-section {
  --dusk-bg: #0A1424;
  --dusk-surface: rgba(255, 255, 255, 0.05);
  --dusk-surface-hover: rgba(255, 255, 255, 0.08);
  --dusk-border: rgba(255, 255, 255, 0.11);
  --dusk-text: #FFFFFF;
  --dusk-sub: #C3CEDE;
  --dusk-gold: #E3BE5A;
  --dusk-turquoise: #56D6C5;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 130px 0 130px 0;
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #13203A 9%,
    var(--dusk-bg) 26%,
    var(--dusk-bg) 88%,
    #13203A 96%,
    #FFFFFF 100%);
}

/* La lueur d'horizon : chaude en haut, un souffle turquoise en bas. */
.cocktails-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(115% 55% at 50% 8%, rgba(224, 174, 98, 0.20) 0%, rgba(224, 174, 98, 0) 62%),
    radial-gradient(80% 50% at 12% 88%, rgba(0, 168, 150, 0.16) 0%, rgba(0, 168, 150, 0) 65%);
}

.cocktails-section .section-title {
  color: var(--dusk-text);
}

.cocktails-section .section-subtitle {
  color: var(--dusk-sub);
}

/* Filtres, version crépuscule */
.cocktail-filter-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.cocktail-filter-tab {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(227, 190, 90, 0.42);
  color: #F1ECE3;
  padding: 11px 24px;
  min-height: 44px;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-ui) var(--ease-out-strong),
              color var(--dur-ui) var(--ease-out-strong),
              border-color var(--dur-ui) var(--ease-out-strong),
              transform var(--dur-ui) var(--ease-out-strong),
              box-shadow var(--dur-ui) var(--ease-out-strong);
}

.cocktail-filter-tab svg {
  color: var(--dusk-gold);
  flex-shrink: 0;
  transition: color var(--dur-ui) var(--ease-out-strong);
}

.cocktail-filter-tab.active {
  background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%);
  border-color: var(--color-gold-light);
  color: var(--dusk-bg);
  box-shadow: 0 8px 22px rgba(224, 174, 98, 0.28);
}

.cocktail-filter-tab.active svg {
  color: var(--dusk-bg);
}

@media (hover: hover) and (pointer: fine) {
  .cocktail-filter-tab:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: var(--color-gold-light);
    transform: translateY(-2px);
  }

  .cocktail-filter-tab.active:hover {
    background: linear-gradient(135deg, #E9C868 0%, var(--color-gold-light) 100%);
  }
}

/* La grille : six cocktails, six photos, tout visible d'un coup d'œil. */
.cocktails-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 700px) {
  .cocktails-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .cocktails-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.cocktail-card {
  display: flex;
  flex-direction: column;
  background: var(--dusk-surface);
  border: 1px solid var(--dusk-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30);
  transition: transform var(--dur-card) var(--ease-out-strong),
              box-shadow var(--dur-card) var(--ease-out-strong),
              border-color var(--dur-card) var(--ease-out-strong),
              background var(--dur-card) var(--ease-out-strong);
}

.cocktail-card.is-signature {
  border-color: rgba(227, 190, 90, 0.55);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(227, 190, 90, 0.22) inset;
}

.cocktail-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0F1A2C;
}

.cocktail-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-media) var(--ease-out-strong);
}

/* Voile bas : assoit les pastilles et fait remonter la couleur du verre. */
.cocktail-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 20, 36, 0.34) 0%,
    rgba(10, 20, 36, 0) 34%,
    rgba(10, 20, 36, 0) 52%,
    rgba(10, 20, 36, 0.62) 100%);
  transition: opacity var(--dur-card) var(--ease-out-strong);
}

.cocktail-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--dusk-gold);
  background: rgba(10, 20, 36, 0.66);
  border: 1px solid rgba(227, 190, 90, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 11px;
  border-radius: var(--radius-full);
}

.cocktail-card-badge.is-virgin {
  color: var(--dusk-turquoise);
  border-color: rgba(86, 214, 197, 0.45);
}

.cocktail-card-price {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  transform-origin: right bottom;
  transition: transform var(--dur-card) var(--ease-out-strong),
              color var(--dur-card) var(--ease-out-strong);
}

.cocktail-card-body {
  padding: 20px 22px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.cocktail-card-title {
  font-size: 1.18rem;
  line-height: 1.3;
  color: var(--dusk-text);
  transition: color var(--dur-card) var(--ease-out-strong);
}

/* En grille, les descriptions démarrent toutes à la même hauteur,
   que le nom du cocktail tienne sur une ou deux lignes. */
@media (min-width: 700px) {
  .cocktail-card-title {
    min-height: 3.05rem;
  }
}

.cocktail-card-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--dusk-sub);
}

@media (hover: hover) and (pointer: fine) {
  .cocktail-card:hover {
    transform: translateY(-7px);
    background: var(--dusk-surface-hover);
    border-color: rgba(227, 190, 90, 0.65);
    box-shadow: 0 26px 52px rgba(0, 0, 0, 0.42), 0 0 34px rgba(224, 174, 98, 0.14);
  }

  .cocktail-card:hover .cocktail-card-media img {
    transform: scale(1.07);
  }

  .cocktail-card:hover .cocktail-card-media::after {
    opacity: 0.78;
  }

  .cocktail-card:hover .cocktail-card-price {
    transform: scale(1.08);
    color: var(--dusk-gold);
  }

  .cocktail-card:hover .cocktail-card-title {
    color: var(--dusk-gold);
  }
}

@media (max-width: 480px) {
  .cocktails-section {
    padding: 96px 0 96px 0;
  }

  .cocktail-card-media {
    aspect-ratio: 16 / 10;
  }

  .cocktail-card-body {
    padding: 18px 18px 20px 18px;
  }
}

/* 6. ÉVÉNEMENTS SECTION */
.events-section {
  background: #FFFFFF;
}

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

@media (min-width: 768px) {
  .events-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.event-card {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  transition: transform var(--dur-card) var(--ease-out-strong),
              border-color var(--dur-card) var(--ease-out-strong),
              box-shadow var(--dur-card) var(--ease-out-strong);
}

.event-media {
  overflow: hidden;
  line-height: 0;
}

.event-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-media) var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .event-card:hover {
    transform: translateY(-7px);
    border-color: var(--color-gold);
    box-shadow: 0 16px 34px rgba(10, 20, 36, 0.10);
  }

  .event-card:hover .event-img {
    transform: scale(1.06);
  }

  .event-card:hover .event-title {
    color: var(--color-gold-dark);
  }
}

.event-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.event-title {
  font-size: 1.4rem;
  color: var(--text-main);
  margin-bottom: 8px;
  transition: color var(--dur-card) var(--ease-out-strong);
}

.event-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--color-turquoise);
  margin-bottom: 12px;
  font-weight: 600;
}

.event-desc {
  font-size: 0.95rem;
  color: var(--text-sub);
  line-height: 1.5;
}

/* 7. PRIVATISATION & GROUPES SECTION */
.privatisation-section {
  background: var(--bg-deep);
}

.privatisation-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 992px) {
  .privatisation-container {
    grid-template-columns: 5fr 7fr;
  }
}

.privatisation-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}

.event-tag {
  background: #FFFFFF;
  border: 1px solid var(--border-gold);
  color: var(--color-gold-dark);
  padding: 8px 15px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform var(--dur-ui) var(--ease-out-strong),
              background var(--dur-ui) var(--ease-out-strong),
              color var(--dur-ui) var(--ease-out-strong),
              box-shadow var(--dur-ui) var(--ease-out-strong);
}

.event-tag svg {
  color: currentColor;
  flex-shrink: 0;
  transition: color var(--dur-ui) var(--ease-out-strong);
}

/* Cascade d'entrée des occasions d'événement */
.event-type-tags > .reveal:nth-child(2) { animation-delay: 55ms; }
.event-type-tags > .reveal:nth-child(3) { animation-delay: 110ms; }
.event-type-tags > .reveal:nth-child(4) { animation-delay: 165ms; }
.event-type-tags > .reveal:nth-child(5) { animation-delay: 220ms; }

@media (hover: hover) and (pointer: fine) {
  .event-tag:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 18px rgba(154, 123, 28, 0.28);
  }
}

.form-card {
  background: #FFFFFF;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.form-title {
  font-size: 1.5rem;
  margin-bottom: 6px;
  color: var(--text-main);
}

.form-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-sub);
}

.form-control {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-gold-dark);
  box-shadow: 0 0 0 3px rgba(192, 138, 62, 0.28), 0 0 12px var(--color-gold-glow);
  background: #FFFFFF;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239C6F2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

.form-submit-btn {
  width: 100%;
  margin-top: 10px;
}

/* Success Modal / Feedback Overlay */
.feedback-toast {
  display: none;
  background: rgba(0, 139, 125, 0.1);
  border: 1px solid var(--color-turquoise);
  color: var(--text-main);
  padding: 16px;
  border-radius: var(--radius-sm);
  margin-top: 20px;
  text-align: center;
  font-size: 0.95rem;
}

.feedback-toast.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 8. ACCÈS & HORAIRES SECTION */
.access-section {
  background: #FFFFFF;
}

.access-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 992px) {
  .access-grid {
    grid-template-columns: 5fr 7fr;
  }
}

.info-cards-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-box {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: border-color var(--dur-card) var(--ease-out-strong),
              box-shadow var(--dur-card) var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .info-box:hover {
    border-color: var(--border-gold);
    box-shadow: 0 10px 26px rgba(10, 20, 36, 0.06);
  }
}

.info-box-title {
  font-size: 1.2rem;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.hours-table tr {
  border-bottom: 1px solid rgba(10, 20, 36, 0.06);
}

.hours-table tr:last-child {
  border-bottom: none;
}

.hours-table td {
  padding: 8px 0;
}

.hours-table td.day {
  color: var(--text-sub);
  font-weight: 500;
}

.hours-table td.time {
  text-align: right;
  color: var(--text-main);
  font-weight: 600;
}

.hours-table tr.closed td {
  color: var(--color-coral);
}

.phone-numbers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--text-main);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  transition: color var(--dur-ui) var(--ease-out-strong),
              transform var(--dur-ui) var(--ease-out-strong);
}

.phone-link svg {
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .phone-link:hover {
    color: var(--color-gold-dark);
    transform: translateX(3px);
  }
}

.phone-link:active {
  transform: scale(0.985);
  transition-duration: var(--dur-press);
}

/* Local Map Placeholder (Pure CSS/SVG - Offline Safe & Clear Theme) */
.map-placeholder {
  background: #EAF4F6;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  height: 100%;
  min-height: 380px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
}

.map-svg-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
}

.map-card-content {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-subtle);
  padding: 24px 30px;
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px);
  max-width: 420px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.map-pin-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(224, 174, 98, 0.15);
  color: var(--color-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  box-shadow: 0 4px 15px rgba(224, 174, 98, 0.2);
}

/* FOOTER */
.site-footer {
  background: #0A1424;
  border-top: 1px solid var(--border-subtle);
  padding: 50px 0 30px 0;
  color: #94A3B8;
  font-size: 0.9rem;
}

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

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.site-footer li a {
  display: inline-flex;
  align-items: center;
  transition: color var(--dur-ui) var(--ease-out-strong),
              transform var(--dur-ui) var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer li a:hover {
    color: var(--color-gold-light) !important;
    transform: translateX(3px);
  }
}

/* Au doigt, les liens du pied de page deviennent de vraies cibles. */
@media (pointer: coarse) {
  .site-footer li a {
    min-height: 44px;
  }
}

.footer-disclaimer {
  font-size: 0.82rem;
  color: #94A3B8;
  margin-top: 10px;
  font-style: italic;
}

/* Les deux pages d'information obligatoires, au bas du site. Discrètes mais
   jamais cachées : lisibles, cliquables, libellées en clair. */
.footer-legal {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-left: 14px;
}
.footer-legal a {
  color: #94A3B8;
  text-decoration: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  padding-bottom: 1px;
}
.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--color-gold-light);
  border-bottom-color: var(--color-gold-light);
}
@media (max-width: 639px) {
  .footer-legal { display: flex; justify-content: center; margin: 8px 0 0; }
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    text-align: left;
  }
}

/* MOBILE STICKY ACTION BAR (PERIMETER STRICT: 2 BUTTONS ONLY) */
.mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--sticky-bar-height);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-gold);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 16px;
  gap: 12px;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1);
}

@media (min-width: 769px) {
  .mobile-sticky-bar {
    display: none;
  }
}

.sticky-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.sticky-btn-call {
  background: var(--text-main);
  color: #FFFFFF;
}

.sticky-btn-route {
  background: #F1ECE3;
  border: 1px solid var(--border-gold);
  color: var(--text-main);
}

/* ==========================================================================
   MOUVEMENT — apparition au défilement
   Principe : l'entrée est une ANIMATION (pas une transition), et le script
   retire les classes une fois jouée. L'élément revient donc à son état naturel,
   ce qui laisse les effets de survol (qui utilisent aussi transform) totalement
   libres. Sans JavaScript, rien n'est masqué : la page reste lisible.
   ========================================================================== */
.js-anim .reveal {
  opacity: 0;
}

.js-anim .reveal.is-revealing {
  animation: revealUp 640ms var(--ease-out-strong) both;
}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Cascade : chaque élément d'une même famille entre 70 ms après le précédent.
   Le contenu reste cliquable dès qu'il est là, la cascade ne bloque rien. */
.formulas-grid > .reveal:nth-child(2),
.menu-grid > .reveal:nth-child(2),
.events-grid > .reveal:nth-child(2),
.cocktails-grid > .reveal:nth-child(2),
.place-features > .reveal:nth-child(2) { animation-delay: 70ms; }

.formulas-grid > .reveal:nth-child(3),
.menu-grid > .reveal:nth-child(3),
.cocktails-grid > .reveal:nth-child(3) { animation-delay: 140ms; }

.menu-grid > .reveal:nth-child(4),
.cocktails-grid > .reveal:nth-child(4) { animation-delay: 210ms; }

.cocktails-grid > .reveal:nth-child(5) { animation-delay: 280ms; }
.cocktails-grid > .reveal:nth-child(6) { animation-delay: 350ms; }

/* Retour au filtrage : les éléments qui restent visibles se reposent en douceur */
@keyframes filterIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* « backwards » et pas « both » : une fois l'animation jouée, l'élément
   retrouve son état naturel même si la classe traîne une fraction de seconde,
   donc l'effet de survol reste opérationnel dans tous les cas. */
.is-filtering-in {
  animation: filterIn 220ms var(--ease-out-strong) backwards;
}

/* ==========================================================================
   ACCESSIBILITÉ DU MOUVEMENT
   Mouvement réduit ne veut pas dire aucun retour : on garde les changements
   d'opacité et de couleur, on retire tout ce qui déplace et tout ce qui zoome.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-anim .reveal {
    opacity: 1 !important;
  }

  .js-anim .reveal.is-revealing {
    animation: none !important;
  }

  /* Aucun déplacement, aucun agrandissement */
  .formula-card:hover,
  .feature-card:hover,
  .event-card:hover,
  .cocktail-card:hover,
  .menu-category-card:hover,
  .btn:hover,
  .header-phone-btn:hover,
  .menu-tab:hover,
  .cocktail-filter-tab:hover,
  .btn:active,
  .menu-tab:active,
  .cocktail-filter-tab:active,
  .sticky-btn:active,
  .header-phone-btn:active {
    transform: none !important;
  }

  .place-img-wrapper:hover img,
  .event-card:hover .event-img,
  .cocktail-card:hover .cocktail-card-media img,
  .menu-banner:hover img {
    transform: none !important;
  }
}

/* ==========================================================================
   Le champ piège du formulaire, et le message qui dit la vérité
   ========================================================================== */

/* Hors de l'écran plutôt que « display:none » : certains robots ignorent les
   champs masqués, celui-ci reste dans la page et se fait remplir. */
.form-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Quand la demande n'a PAS pu partir, le message ne doit surtout pas
   ressembler à un accusé de réception. */
.feedback-toast.is-souci {
  background: #FDEDEC;
  border-color: rgba(198, 64, 60, 0.35);
  color: #97302C;
}

.feedback-toast.is-souci a { color: #97302C; font-weight: 700; }

/* La mention d'information, discrète mais lisible — elle est obligatoire
   au moment où l'on recueille, pas seulement dans une page à part. */
.form-mention {
  margin-top: 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

.form-mention a { color: var(--color-gold-dark); }

/* ==========================================================================
   LES PHOTOS DU RESTAURANT
   Chaque photo est servie en trois largeurs et en deux formats : le
   navigateur prend la plus petite qui suffit à son écran. Sur un téléphone
   en terrasse, c'est ce qui fait la différence entre une page qui s'ouvre
   et une page qu'on n'attend pas.
   ========================================================================== */

/* <picture> n'est qu'un aiguillage : il ne doit créer aucune boîte, sans quoi
   les règles écrites pour l'image (« .place-img-wrapper img ») cesseraient de
   la trouver, et une ligne de blanc apparaîtrait sous chaque photo. */
picture {
  display: contents;
}

/* Le bandeau du bar, dans la section des cocktails. Elle n'avait aucune photo
   d'ensemble : les six vignettes fabriquées en tenaient lieu. */
.cocktails-banner {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(227, 190, 90, 0.28);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  margin-bottom: 40px;
  position: relative;
}

.cocktails-banner img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center 58%;
}

/* Un voile bleu nuit : la photo est prise en plein jour, la section est
   sombre. Sans ce voile, le bandeau troue la page. */
.cocktails-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 20, 36, 0.30) 0%,
    rgba(10, 20, 36, 0.14) 45%,
    rgba(10, 20, 36, 0.52) 100%);
}

@media (max-width: 640px) {
  .cocktails-banner img {
    height: 200px;
  }
}

/* --------------------------------------------------------------------------
   QUAND IL N'Y A PAS DE PHOTO

   Les cocktails et les plats n'en ont pas : la restauratrice n'a pas encore
   fait photographier sa carte, et on ne comble pas ce vide avec une image
   qui ne serait pas la sienne. La carte se lit alors en toutes lettres, sur
   un bandeau court qui garde la pastille et le prix bien lisibles.
   -------------------------------------------------------------------------- */
.cocktail-card-media.sans-photo {
  aspect-ratio: auto;
  min-height: 74px;
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(227, 190, 90, 0.16) 0%, rgba(227, 190, 90, 0) 58%),
    linear-gradient(135deg, #142442 0%, #0D1929 100%);
  border-bottom: 1px solid rgba(227, 190, 90, 0.24);
}

/* Le voile bas n'a plus rien à assombrir : il ternirait le fond. */
.cocktail-card-media.sans-photo::after {
  display: none;
}

/* Sans photo, les deux pastilles ne se superposent plus à une image : elles
   se posent de part et d'autre, à la même hauteur. */
.cocktail-card-media.sans-photo .cocktail-card-badge {
  top: 50%;
  transform: translateY(-50%);
}

.cocktail-card-media.sans-photo .cocktail-card-price {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  text-shadow: none;
  color: var(--dusk-gold);
}

@media (max-width: 480px) {
  /* La règle générale ramène le ratio à 16/10 sur petit écran : elle
     rouvrirait un grand rectangle vide. */
  .cocktail-card-media.sans-photo {
    aspect-ratio: auto;
  }
}

/* Sans recette à afficher, le corps de la carte n'a plus qu'un nom à porter :
   on resserre, sinon la carte se creuse d'un blanc qui n'a rien à y faire. */
.cocktail-card-media.sans-photo + .cocktail-card-body {
  padding: 16px 22px 18px 22px;
}

/* Un rendez-vous sans photo : on ne laisse pas de cadre vide en haut de la
   carte, le titre remonte simplement. */
.event-media.sans-photo {
  display: none;
}