/* =================================
   IMPORT DES POLICES LOCALES
   ================================= */
@import url('../font/typographies_alternatives_futura/css/fonts.css');

/* =================================
   VARIABLES CSS ET RESET
   ================================= */

:root {
  /* Couleurs selon la charte graphique COSY */
  --primary-blue: #1a365d;
  --secondary-blue: #2d5a87;
  --accent-gold: #d4af37;
  --light-blue: #4a7cba;
  --text-light: #ffffff;
  --text-dark: #1a365d;
  --text-muted: #4a7cba;
  --background-light: #f7fafc;
  --background-dark: #3D4E57;
  --shadow-light: rgba(26, 54, 93, 0.1);
  --shadow-medium: rgba(26, 54, 93, 0.2);
  --shadow-heavy: rgba(26, 54, 93, 0.3);
  --border-radius: 8px;
  --transition: all 0.3s ease;
  
  /* Typographie selon la charte graphique COSY */
  /* Utilisation des polices locales : Montserrat et Archivo Narrow */
  /* TYPOGRAPHIE PRINCIPALE: Montserrat (remplace Futura PT) */
  --font-primary: 'Montserrat', 'Futura PT', sans-serif;
  /* TYPOGRAPHIE SECONDAIRE: Archivo Narrow (remplace Futura PT Condensed) */
  --font-secondary: 'Archivo Narrow', 'Futura PT Condensed', sans-serif;
  /* GRAND TITRE: Archivo Narrow - BOLD */
  --font-grand-titre: 'Archivo Narrow', 'Futura PT Condensed', sans-serif;
  /* TITRE: Montserrat - SEMI BOLD */
  --font-titre: 'Montserrat', 'Futura PT', sans-serif;
  /* Sous-titre: Archivo Narrow - ITALIC */
  --font-sous-titre: 'Archivo Narrow', 'Futura PT Condensed', sans-serif;
  /* Label: Montserrat - LIGHT */
  --font-labeur: 'Montserrat', 'Futura PT', sans-serif;
  /* Police condensed (alias pour compatibilité) */
  --font-condensed: 'Archivo Narrow', 'Futura PT Condensed', sans-serif;
  
  /* Hiérarchie typographique selon la charte graphique */
  --font-size-grand-titre: 36px;
  --font-size-titre: 25px;
  --font-size-sous-titre: 17px;
  --font-size-labeur: 12px;
  --font-size-nav: 16px;
  --font-size-body: 14px;
  --font-size-small: 10px;
  --font-size-medium: 18px;
  --font-size-large: 28px;
  --font-size-extra-large: 32px;
  
  /* Poids de police selon la charte graphique */
  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-demi: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (max-width: 480px) {
  html,
  body {
    width: 100vw;
    max-width: 100vw;
  }
}

@media (max-width: 320px) {
  html,
  body {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .container {
    padding: 0 10px;
  }

  .main-content {
    width: 100%;
    padding: 0 10px;
  }

  .hero-title {
    font-size: 1.7rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .cta-button {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 375px) {
  html,
  body {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .container {
    padding: 0 12px;
  }

  .main-content {
    width: 100%;
    padding: 0 12px;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .cta-button {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 425px) {
  html,
  body {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .container {
    padding: 0 14px;
  }

  .main-content {
    width: 100%;
    padding: 0 14px;
  }

  .hero-title {
    font-size: 1.9rem;
  }

  .hero-subtitle {
    font-size: 1.05rem;
  }

  .cta-button {
    width: 100%;
    text-align: center;
  }
}

/* =================================
   EFFETS DE SCROLL POUR LES SECTIONS
   ================================= */

/* Animation d'apparition des sections lors du scroll */
.section-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.section-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation d'apparition depuis la gauche */
.section-slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s ease;
}

.section-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Animation d'apparition depuis la droite */
.section-slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s ease;
}

.section-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Animation d'apparition avec zoom */
.section-zoom-in {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s ease;
}

.section-zoom-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Animation d'apparition avec rotation */
.section-rotate-in {
  opacity: 0;
  transform: rotate(-5deg) scale(0.9);
  transition: all 0.8s ease;
}

.section-rotate-in.visible {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Délai d'apparition pour créer un effet cascade */
.section-delay-1 { transition-delay: 0.1s; }
.section-delay-2 { transition-delay: 0.2s; }
.section-delay-3 { transition-delay: 0.3s; }
.section-delay-4 { transition-delay: 0.4s; }
.section-delay-5 { transition-delay: 0.5s; }

/* Effet de parallaxe léger pour certaines sections */
.section-parallax {
  transform: translateZ(0);
  will-change: transform;
}

/* Animation d'apparition des cartes et éléments */
.card-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.card-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation des boutons lors du scroll */
.button-bounce-in {
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: all 0.6s ease;
}

.button-bounce-in.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Animation des images lors du scroll */
.image-fade-in {
  opacity: 0;
  transform: scale(1.1);
  transition: all 0.8s ease;
}

.image-fade-in.visible {
  opacity: 1;
  transform: scale(1);
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-light);
  line-height: 1.6;
  color: var(--text-light);
  background: var(--background-dark);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 63px; /* Compensation pour le header fixe (nav + logo) */
  transition: padding-top 0.3s ease;
}

/* Quand la section logo est compressée, réduire le padding */
body.logo-compressed {
  padding-top: 60px; /* Seulement la hauteur de la nav */
}

/* Supprimer complètement l'espace de la section logo compressée */
body.logo-compressed .logo-section {
  display: none;
}

/* S'assurer que les onglets suivent le scroll */
body.logo-compressed .submenu-tabs {
  top: 60px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

p {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-light);
  line-height: 1.6;
  margin-bottom: 1rem;
}

a {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: var(--transition);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px;
    width: 100%;
  }
  
  body {
    width: 100%;
    min-width: 100%;
  }
}

/* =================================
   HIÉRARCHIE TYPOGRAPHIQUE
   ================================= */

/* Classe pour les éléments accessibles mais visuellement cachés */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1 {
  font-family: var(--font-grand-titre);
  font-size: var(--font-size-grand-titre);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

h2 {
  font-family: var(--font-titre);
  font-size: var(--font-size-titre);
  font-weight: var(--font-weight-demi);
  letter-spacing: 0.5px;
  margin-bottom: 0.8rem;
}

h3 {
  font-family: var(--font-sous-titre);
  font-size: var(--font-size-sous-titre);
  font-weight: var(--font-weight-medium);
  font-style: italic;
  letter-spacing: 0.3px;
  margin-bottom: 0.6rem;
}

h4, h5, h6 {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.2px;
  margin-bottom: 0.5rem;
}

/* =================================
   HEADER PRINCIPAL
   ================================= */

.main-header {
  position: center;
  background: rgba(61, 78, 87, 0.95);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  padding: 0;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  height: 90px;
}

/* Quand la section logo est compressée, réduire la hauteur du header */
body.logo-compressed .main-header {
  height: 60px;
}

/* Effet de scroll pour le header */
.main-header.scrolled {
  background: rgba(61, 78, 87, 0.98);
  backdrop-filter: blur(15px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.main-header .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  height: 90px;
  overflow: visible;
  transition: all 0.3s ease;
}

/* Quand la section logo est compressée, réduire la hauteur du conteneur */
body.logo-compressed .main-header .container {
  height: 60px;
  padding: 0 20px;
}

/* =================================
   MENU HORIZONTAL PRINCIPAL
   ================================= */

.main-nav {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(61, 78, 87, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  height: 60px;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 15px;
  margin: 0 auto;
  padding: 0 30px;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius);
  backdrop-filter: blur(5px);
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link {
  color: var(--text-light);
  text-decoration: none;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-nav);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: var(--border-radius);
  transition: var(--transition);
  position: relative;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--accent-gold);
  background: rgba(255, 255, 255, 0.1);
}

.nav-link.active {
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.2);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-gold);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

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

@media (max-width: 1024px) {
  .main-nav {
    display: none;
    visibility: hidden;
    pointer-events: none;
  }

  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1002;
  }
  
  .main-header .container {
    position: relative;
  }
  
  .logo-section {
    margin-left: 0; /* Pas besoin d'espace à gauche */
  }

  .main-header {
    width: 100%;
  }

  body {
    overflow-x: hidden;
    width: 100%;
  }

}

@media (max-width: 768px) {
  .nav-link {
    font-size: 0.85rem;
    padding: 8px 12px;
  }

  .main-header .container {
    flex-direction: column;
    height: auto;
    gap: 10px;
    position: relative;
  }
  
  .menu-toggle {
    display: flex !important;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1002;
  }
  
  .logo-section {
    margin-left: 0;
  }

  .highlights-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .preview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .preview-card {
    text-align: center;
    align-items: center;
    padding: 25px 15px;
  }
  
  .preview-icon {
    font-size: 2rem;
    margin-bottom: 15px;
  }
  
  .preview-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }
  
  .preview-card p {
    font-size: 0.9rem;
    margin-bottom: 15px;
  }

  .main-content {
    width: 100%;
    padding: 0 12px;
  }

  .carousel-slide {
    flex: 0 0 100%;
    padding: 0 8px;
  }

  .agenda-card {
    padding: 20px;
  }

  .map-modal {
    width: 95%;
  }

  .map-content {
    flex-direction: column;
    gap: 20px;
  }

  .map-container iframe {
    width: 100%;
  }
}

/* =================================
   LOGO SECTION
   ================================= */

.logo-section {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  padding: 20px 0;
  background: rgba(61, 78, 87, 0.95);
  backdrop-filter: blur(10px);
  height: 90px;
  overflow: visible;
  transition: all 0.3s ease;
  transform: translateY(0);
  margin-top: 0;
}

/* Effet de compression lors du scroll */
.logo-section.scrolled {
  height: 0;
  padding: 0;
  margin: 0;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.logo-left {
  position: absolute;
  left: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
}

.logo-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: auto;
  max-width: 100%;
  overflow: visible;
}

/* =================================
   FOOTER LOGO
   ================================= */

.footer-logo-container {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  text-align: center;
}

.footer-logo-image {
  height: 50px;
  width: auto;
  transition: var(--transition);
}

.footer-logo-image:hover {
  transform: scale(1.05);
}

.footer-logo-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer-logo-text h3 {
  margin: 0;
  color: var(--accent-gold);
  font-size: var(--font-size-sous-titre);
  font-weight: 700;
  text-align: center;
  width: 100%;
}

.footer-logo-text p {
  margin: 5px 0 0 0;
  color: var(--text-light);
  font-size: 0.9rem;
  text-align: center;
  width: 100%;
}

.footer-logo-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: var(--transition);
}

.footer-logo-link:hover {
  transform: scale(1.02);
}

.footer-logo-link:hover .footer-logo-image {
  transform: scale(1.05);
}

.footer-logo-link:hover .footer-logo-text h3 {
  color: var(--accent-gold);
}

.footer-text-link {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
  white-space: nowrap;
}

.footer-text-link:hover {
  color: var(--accent-gold);
  text-decoration: underline;
}

.footer-text-separator {
  color: var(--text-light);
  opacity: 0.7;
}

.header-text-link {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

.header-text-link:hover {
  color: var(--accent-gold);
  text-decoration: underline;
}

/* =================================
   POPUP CARTE GOOGLE MAPS
   ================================= */

.map-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

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

.map-modal {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  border-radius: var(--border-radius);
  max-width: 800px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.7);
  transition: transform 0.3s ease;
  border: 2px solid var(--accent-gold);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.map-overlay.active .map-modal {
  transform: scale(1);
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px 20px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.1);
}

.map-header h2 {
  color: var(--accent-gold);
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
}

.map-close {
  background: none;
  border: none;
  color: var(--accent-gold);
  font-size: 2rem;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.map-close:hover {
  background: rgba(212, 175, 55, 0.2);
  transform: scale(1.1);
}

.map-content {
  padding: 30px;
}

.map-container {
  margin-bottom: 25px;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.map-info h3 {
  color: var(--accent-gold);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 15px;
  border-left: 3px solid var(--accent-gold);
  padding-left: 15px;
}

.map-info p {
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 10px;
  opacity: 0.9;
}

.map-actions {
  display: flex;
  gap: 15px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.map-action-btn {
  background: var(--accent-gold);
  color: var(--primary-blue);
  text-decoration: none;
  padding: 12px 20px;
  border-radius: var(--border-radius);
  font-weight: 600;
  transition: var(--transition);
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.map-action-btn:hover {
  background: var(--accent-gold);
  transform: translateY(-2px);
  color: var(--primary-blue);
}

.map-footer {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid rgba(212, 175, 55, 0.3);
}

.map-close-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 25px;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.map-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--accent-gold);
  transform: translateY(-2px);
}

.address-button {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 8px 12px;
  margin: 0;
  transition: var(--transition);
  text-decoration: none;
  display: inline;
  border-radius: var(--border-radius);
  position: relative;
}

.address-button:hover {
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

.address-button::after {
  content: '🗺️';
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--accent-gold);
  color: var(--primary-blue);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
  opacity: 0;
  transform: scale(0);
  transition: var(--transition);
}

.address-button:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* Responsive pour le popup carte */
@media (max-width: 768px) {
  .map-modal {
    width: 98%;
    max-height: 95vh;
  }
  
  .map-header {
    padding: 20px 25px 15px;
  }
  
  .map-header h2 {
    font-size: 1.5rem;
  }
  
  .map-content {
    padding: 25px;
  }
  
  .map-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .map-action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .map-modal {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .map-header {
    padding: 15px 20px 10px;
  }
  
  .map-header h2 {
    font-size: 1.3rem;
  }
  
  .map-content {
    padding: 20px;
  }
  
  .map-info h3 {
    font-size: 1.1rem;
  }
}

.logo-left {
  flex: 1;
  padding-left: 20px;
}

.logo-image-left {
  height: 85px;
  width: auto;
  transition: var(--transition);
}

.logo-image-left:hover {
  transform: scale(1.05);
}

.logo {
  flex: 2;
  text-align: center;
}

.logo-link {
  text-decoration: none;
  color: var(--accent-gold);
  transition: var(--transition);
}

.logo-link:hover {
  color: var(--accent-gold);
}

.logo-text {
  font-family: var(--font-grand-titre);
  font-size: var(--font-size-grand-titre);
  font-weight: var(--font-weight-bold);
  color: var(--accent-gold);
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
  text-align: center;
  line-height: 1;
  display: block;
  width: 100%;
}

.logo-subtitle {
  font-family: var(--font-labeur);
  font-size: var(--font-size-labeur);
  font-weight: var(--font-weight-light);
  color: var(--text-light);
  margin: 0;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.2;
  display: block;
  width: 100%;
}

/* =================================
   MENU MOBILE
   ================================= */

.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 15px;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: auto;
  min-height: 50px;
  transition: var(--transition);
  z-index: 1002;
  flex-direction: row;
}

/* Texte MENU */
.menu-text {
  color: var(--accent-gold);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition);
}

.menu-toggle:hover .menu-text {
  color: var(--text-light);
}

/* Icône hamburger (trois barres) */
.hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  position: relative;
}

.hamburger-icon span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--accent-gold);
  border-radius: 3px;
  transition: var(--transition);
}

.menu-toggle:hover .hamburger-icon span {
  background-color: var(--text-light);
}

.menu-toggle.active .hamburger-icon span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

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

.menu-toggle.active .hamburger-icon span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}


/* =================================
   MENU LATERAL
   ================================= */

.sidebar-menu {
  position: fixed;
  top: 0;
  right: -350px;
  width: 350px;
  height: 100vh;
  background: #3D4E57;
  z-index: 1001;
  transition: var(--transition);
  overflow-y: auto;
  box-shadow: -5px 0 20px var(--shadow-heavy);
}

.sidebar-menu.active {
  right: 0;
}

.menu-header {
  padding: 30px 20px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-header h2 {
  color: var(--text-light);
  font-size: 1.5rem;
  font-weight: 700;
}

.close-menu {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 2rem;
  cursor: pointer;
  padding: 5px;
  transition: var(--transition);
}

.close-menu:hover {
  color: var(--accent-gold);
  transform: rotate(90deg);
}

.menu-list {
  list-style: none;
  padding: 20px 0;
}

.menu-list li {
  margin: 0;
}

.menu-link {
  display: block;
  padding: 15px 30px;
  color: var(--text-light);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
  border-left: 3px solid transparent;
}

.menu-link:hover,
.menu-link.active {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: var(--accent-gold);
  color: var(--accent-gold);
}

.menu-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.menu-footer .location {
  color: var(--text-light);
  font-size: 1.1rem;
  opacity: 0.8;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

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

/* =================================
   CONTENU PRINCIPAL
   ================================= */

.main-content {
  margin-top: 0;
  flex: 1;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* =================================
   CARROUSEL ÉVÉNEMENTS
   ================================= */

.events-carousel {
  position: relative;
  overflow: hidden;
  background: #3D4E57;
  padding: 48px 0 60px;
}

.carousel-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: auto;
}

.carousel-track {
  display: flex;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
  --slide-count: 4;
}

.carousel-slide {
  flex: 0 0 calc(100% / var(--slide-count));
  height: auto;
  position: relative;
  padding: 0 16px;
  flex-shrink: 0;
  display: flex;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  transition: var(--transition);
}

.carousel-slide:hover .carousel-image {
  filter: brightness(0.9);
}

.carousel-caption {
  display: none;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(26, 54, 93, 0.8);
  color: var(--accent-gold);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  transition: var(--transition);
  z-index: 10;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(212, 175, 55, 0.3);
}

.carousel-btn:hover {
  background: var(--accent-gold);
  color: var(--primary-blue);
  transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
  left: -30px;
}

.carousel-next {
  right: -30px;
}

@media (max-width: 600px) {
  .carousel-prev {
    left: 5px;
  }
  .carousel-next {
    right: 5px;
  }
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.carousel-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
}

.carousel-indicator.active,
.carousel-indicator:hover {
  background: var(--accent-gold);
  border-color: rgba(255, 255, 255, 0.3);
}

.agenda-header {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto 16px;
  color: var(--text-light);
  padding: 0 16px;
}

.agenda-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.85rem;
  color: var(--accent-gold);
  margin-bottom: 6px;
  font-weight: var(--font-weight-bold);
}

.agenda-title {
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  margin-bottom: 8px;
}

.agenda-subtitle {
  opacity: 0.8;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
}

.agenda-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #3D4E57;
  border-radius: 20px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  padding: 24px;
  text-decoration: none;
  color: var(--text-light);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.agenda-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.agenda-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 12px 18px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.35);
  width: fit-content;
}

.agenda-day {
  font-size: 1.8rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.agenda-month {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
}

.agenda-year {
  font-size: 0.7rem;
  font-weight: var(--font-weight-normal);
  line-height: 1;
  margin-top: 2px;
}

.agenda-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agenda-type {
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--accent-gold);
}

.agenda-event {
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
}

.agenda-meta {
  font-size: 0.95rem;
  opacity: 0.75;
}

.agenda-description {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.85;
}

.agenda-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--font-weight-demi);
  color: var(--accent-gold);
}

.agenda-link::after {
  content: '↗';
  font-size: 0.9rem;
}

.agenda-cta {
  margin-top: 30px;
  text-align: center;
}

.agenda-cta .cta-button-outline {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

@media (max-width: 900px) {
  .carousel-slide {
    padding: 0 8px;
  }
  
  .agenda-card {
    padding: 20px;
  }
}
/* =================================
   SECTION HERO
   ================================= */

.hero-section {
  background: #3D4E57;
  color: var(--text-light);
  padding: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-title {
  font-family: var(--font-grand-titre);
  font-size: var(--font-size-grand-titre);
  font-weight: var(--font-weight-bold);
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

.hero-title .highlight {
  color: var(--accent-gold);
}

.hero-subtitle {
  font-family: var(--font-sous-titre);
  font-size: var(--font-size-sous-titre);
  font-weight: var(--font-weight-medium);
  font-style: italic;
  margin-bottom: 20px;
  opacity: 0.9;
  letter-spacing: 0.5px;
}

/* =================================
   SECTION LES CREATIONS
   ================================= */

.les_creations {
  padding: 40px 0;
  text-align: center;
  background: linear-gradient(135deg, var(--secondary-blue), var(--light-blue));
}

.creations-logo {
  height: 120px;
  width: auto;
  opacity: 0.3;
  transition: var(--transition);
}

.creations-logo:hover {
  opacity: 0.6;
  transform: scale(1.05);
}

.page-content {
  max-width: 1000px;
  margin: 0 auto;
}

.page-title {
  font-family: var(--font-titre);
  font-size: var(--font-size-titre);
  font-weight: var(--font-weight-demi);
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  color: var(--accent-gold);
  letter-spacing: 1px;
}

/* =================================
   ONGLETS (SOUS-MENUS) - SUPPRIMÉ
   ================================= */
/* Les styles pour les onglets sont maintenant dans pages-specific.css */
.hero-location {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  gap: 10px;
  margin-bottom: 25px;
  font-size: 1.1rem;
}

.location-pin {
  font-size: 1.2rem;
}

.hero-cta {
  margin-top: 25px;
}

.cta-button {
  display: inline-block;
  background: var(--accent-gold);
  color: var(--primary-blue);
  padding: 15px 30px;
  text-decoration: none;
  border-radius: var(--border-radius);
  font-weight: 700;
  font-size: 1.1rem;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.cta-button-outline {
  background: transparent;
  color: var(--accent-gold);
  border: 2px solid var(--accent-gold);
  box-shadow: none;
}

.cta-button-outline:hover {
  background: rgba(212, 175, 55, 0.15);
  color: var(--accent-gold);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.25);
}

/* =================================
   MENU DÉROULANT DÉCOUVRIR COSY
   ================================= */

.discover-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

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

.discover-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #3D4E57;
  border-radius: var(--border-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  transition: transform 0.3s ease;
}

.discover-overlay.active .discover-modal {
  transform: translate(-50%, -50%) scale(1);
}

.discover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 30px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.discover-header h2 {
  color: var(--text-light);
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.discover-close {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 2rem;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition);
}

.discover-close:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.discover-content {
  padding: 20px 30px 30px;
}

.discover-section {
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius);
  border-left: 4px solid var(--accent-gold);
}

.discover-section h3 {
  color: var(--accent-gold);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 15px 0;
}

.discover-section p {
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}

.discover-footer {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.discover-close-btn {
  background: var(--accent-gold);
  color: var(--primary-blue);
  border: none;
  padding: 12px 30px;
  border-radius: var(--border-radius);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.discover-close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

/* Style pour les noms des membres de l'équipe */
.team-member {
  text-decoration: underline;
  text-decoration-color: var(--accent-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
  color: var(--accent-gold);
}

/* Responsive pour le menu déroulant */
@media (max-width: 768px) {
  .discover-modal {
    width: 95%;
    max-height: 90vh;
  }
  
  .discover-header {
    padding: 20px 20px 15px;
  }
  
  .discover-header h2 {
    font-size: 1.5rem;
  }
  
  .discover-content {
    padding: 15px 20px 20px;
  }
  
  .discover-section {
    padding: 15px;
    margin-bottom: 20px;
  }
}

/* =================================
   RESPONSIVE HEADER
   ================================= */

@media (max-width: 768px) {
  .main-header .container {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }
  
  .main-nav {
    display: none;
  }
  
  .logo-section {
    flex: 1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
  }
  
  .logo-center {
    gap: 10px;
  }
  
  .footer-logo-container {
    gap: 10px;
  }
  
  .footer-logo-image {
    height: 40px;
  }
  
  .menu-toggle {
    display: flex !important;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1002;
  }
  
  .logo-section {
    margin-left: 0;
  }
  
  .nav-list {
    gap: 15px;
  }
  
  .nav-link {
    font-size: 0.85rem;
    padding: 6px 10px;
  }
  
  /* Sur mobile, quand la section logo est compressée */
  body.logo-compressed {
    padding-top: 0;
  }
  
  body.logo-compressed .submenu-tabs {
    top: 0;
  }
  
  /* Sur mobile, réduire aussi la hauteur du header et du conteneur */
  body.logo-compressed .main-header {
    height: 60px;
  }
  
  body.logo-compressed .main-header .container {
    height: 60px;
  }
}

.hero-decoration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1.5" fill="rgba(255,255,255,0.1)"/></svg>');
  opacity: 0.15;
  z-index: 1;
}

/* ========================================
   HÉROS / BANDEROLES DE PAGE
   ======================================== */

.page-header {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 0 !important;
  min-height: auto;
  height: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
  background-color: var(--background-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-bottom: 0 !important;
}

.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(61, 78, 87, 0.9), rgba(61, 78, 87, 0.45));
  z-index: 0;
}

.page-header .container {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-header .page-title {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: 0.08em;
}

.page-header .page-subtitle {
  margin: 0;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  opacity: 0.9;
}

.page-header.beer-header {
  background-image: url("../img/biere/banderol pour biere.jpg");
}

.page-header.wine-header {
  background-image: url("../img/vins/banderol vin.jpg");
}

.page-header.cocktail-header {
  background-image: url("../img/cocktails/bandeerol cocktail.jpg");
}

.page-header.alcohol-header {
  background-image: url("../img/alcools/banderol alccol.jpg");
}

.page-header.drink-header {
  background-image: url("../img/sans alcool/banderol sans alcool.png");
}

.page-header.tapas-header {
  background-image: url("../img/Tapas/banderol tapas.jpg");
}

@media (max-width: 768px) {
  .page-header {
    min-height: auto;
    height: auto;
  }

  .page-header .container {
    padding: 32px 16px;
  }
}

/* =================================
   SECTIONS DE CONTENU
   ================================= */

.content-section {
  margin: 0;
  padding: 40px 0 80px;
  background: #3D4E57;
  color: var(--text-light);
  transition: var(--transition);
}

.page-header + .content-section {
  margin-top: 0;
  padding-top: 0;
}

.page-header + .content-section .container {
  padding-top: 0;
}

.page-content > *:first-child {
  margin-top: 0;
}

.main-content {
  margin: 0;
  padding: 0;
}

.page-subtitle {
  font-size: 1.4rem;
  opacity: 0.9;
  font-weight: 400;
  margin: 0;
}

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

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text-light);
}

.section-divider {
  width: 80px;
  height: 4px;
  background: var(--accent-gold);
  margin: 0 auto;
  border-radius: 2px;
}

/* =================================
   PREVIEW GRID
   ================================= */

.preview-section {
  background: #3D4E57 !important;
  background-color: #3D4E57 !important;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.preview-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 40px 30px;
  border-radius: var(--border-radius);
  text-align: center;
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.preview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.15);
}

.preview-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.preview-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--text-light);
}

.preview-card p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 25px;
  line-height: 1.6;
  flex: 1;
}

.preview-link {
  display: inline-block;
  background: var(--accent-gold);
  color: var(--primary-blue);
  padding: 12px 25px;
  text-decoration: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  transition: var(--transition);
  margin-top: auto;
  align-self: center;
}

.preview-link:hover {
  background: #f4d03f;
  transform: translateY(-2px);
}

/* Image de fond spécifique à la page présentation */
.page-presentation .page-header {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/devanture_cosy.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #3D4E57; /* Fallback color */
}

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

/* =================================
   LISTES DE PRODUITS
   ================================= */

/* (Styles spécifiques pour les anciennes grilles retirés au profit de pages-specific.css) */

/* Mise en forme identique aux autres listes pour les bières pression */
.beer-list.pression-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(1100px, 100%);
  margin: 0 auto;
}

.beer-list.pression-layout .beer-item {
  width: 100%;
  min-height: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 20px 30px;
}

.beer-list.pression-layout .beer-header {
  width: 25%;
  min-width: 180px;
  text-align: left;
}

.beer-list.pression-layout .beer-details {
  flex: 1;
  margin: 0;
  text-align: left;
}

.beer-list.pression-layout .beer-prices {
  margin: 0;
  padding: 0;
  margin-left: auto;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.wine-list.rouges-layout,
.wine-list.blancs-layout,
.wine-list.bulles-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(1100px, 100%);
  margin: 0 auto;
}

.wine-list.rouges-layout .wine-item,
.wine-list.blancs-layout .wine-item,
.wine-list.bulles-layout .wine-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 30px;
}

.wine-list .wine-header {
  width: 25%;
  min-width: 180px;
  text-align: left;
}

.wine-list .wine-details {
  flex: 1;
  margin: 0;
  text-align: left;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wine-list .wine-prices {
  margin-left: auto;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Affichage en grille pour la section cocktails classiques */
.cocktail-list.classiques-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 25px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px !important;
}

/* Forcer l'affichage en grille avec des sélecteurs plus spécifiques */
#classiques .cocktail-list.classiques-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 25px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px !important;
}

/* Surcharge complète pour la grille */
#classiques .cocktail-list.classiques-grid,
.tab-panel#classiques .cocktail-list.classiques-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 25px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px !important;
}

.cocktail-list.classiques-grid .cocktail-category {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 30px;
}

.cocktail-list.classiques-grid .cocktail-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  text-align: center;
  transition: var(--transition);
  height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cocktail-list.classiques-grid .cocktail-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-5px);
}

.cocktail-list.classiques-grid .cocktail-header {
  margin-bottom: 15px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cocktail-list.classiques-grid .cocktail-name {
  font-size: 1em;
  font-weight: 600;
  color: var(--text-light);
  margin: 0;
  line-height: 1.2;
  word-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.cocktail-list.classiques-grid .cocktail-image {
  width: 200px;
  height: 200px;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cocktail-list.classiques-grid .cocktail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cocktail-list.classiques-grid .cocktail-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cocktail-list.classiques-grid .cocktail-ingredients {
  font-size: 0.9em;
  color: var(--text-light);
  margin: 0;
  line-height: 1.4;
}

/* Affichage en ligne pour la section Mules (3 cocktails) */
.cocktail-list.classiques-grid .cocktail-category.mules-layout {
  display: flex;
  flex-direction: row;
  gap: 30px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.cocktail-list.classiques-grid .cocktail-category.mules-layout .cocktail-item {
  flex: 0 1 auto;
  width: 300px;
  height: 420px;
  margin-bottom: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cocktail-list.classiques-grid .cocktail-category.mules-layout .cocktail-image {
  width: 200px;
  height: 200px;
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cocktail-list.classiques-grid .cocktail-category.mules-layout .cocktail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.wine-list.rouges-layout .wine-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cocktail-list {
  max-width: 800px;
  margin: 0 auto;
}

.cocktail-category {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* Surcharge pour la grille des cocktails classiques */
.cocktail-list.classiques-grid {
  max-width: 1200px !important;
}

.cocktail-list.classiques-grid .cocktail-category {
  display: block !important;
  margin-bottom: 30px !important;
}

/* Forcer la surcharge avec des sélecteurs plus spécifiques */
#classiques .cocktail-list.classiques-grid .cocktail-category,
.tab-panel#classiques .cocktail-list.classiques-grid .cocktail-category {
  display: block !important;
  margin-bottom: 30px !important;
}

.wine-item,
.beer-item,
.drink-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  margin-bottom: 30px;
  padding: 30px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 25px;
  width: 750px;
  height: 700px;
  box-sizing: border-box;
}

/* Cadres des vins adaptés au contenu */
.wine-item {
  height: auto;
  min-height: 450px;
  padding: 20px;
  gap: 15px;
}

/* Optimisation de l'espacement pour les vins */
.wine-item .wine-header {
  margin-bottom: 5px;
}

.wine-item .wine-image {
  margin: 8px 0;
}

.wine-item .wine-details {
  margin: 15px 0;
}

.wine-item .wine-prices {
  margin-top: 15px;
  margin-bottom: 5px;
}

.cocktail-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  margin-bottom: 25px;
  padding: 20px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
  width: 750px;
  height: auto;
  min-height: 450px;
  max-height: 550px;
  box-sizing: border-box;
}

/* Surcharge pour la grille des cocktails classiques */
.cocktail-list.classiques-grid .cocktail-item {
  width: auto !important;
  height: 400px !important;
  min-height: auto !important;
  max-height: none !important;
  margin-bottom: 0 !important;
}

/* Forcer la largeur des éléments dans la grille */
#classiques .cocktail-list.classiques-grid .cocktail-item,
.tab-panel#classiques .cocktail-list.classiques-grid .cocktail-item {
  width: auto !important;
  height: 400px !important;
  min-height: auto !important;
  max-height: none !important;
  margin-bottom: 0 !important;
}

.wine-item:hover,
.beer-item:hover,
.cocktail-item:hover,
.drink-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(5px);
}

.wine-item .wine-header,
.beer-item .beer-header,
.drink-item .drink-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  gap: 0px;
  width: auto;
  max-width: 100%;
  padding: 0;
  min-height: auto;
  height: auto;
}

.cocktail-item .cocktail-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  gap: 0px;
  width: 100%;
}

.wine-name,
.beer-name,
.drink-name,
.tapas-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin: 0;
  text-align: center;
  line-height: 1.1;
  width: auto;
  max-width: 100%;
}

.cocktail-name {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin: 0;
  text-align: center;
}

.wine-prices,
.beer-prices,
.cocktail-prices,
.drink-prices {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.price-small,
.price-bottle,
.price-demi,
.price-pinte,
.price-single {
  background: rgba(212, 175, 55, 0.2);
  color: var(--accent-gold);
  padding: 8px 12px;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.beer-image {
  width: 550px;
  height: 550px;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 2px solid rgba(212, 175, 55, 0.3);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.beer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

/* Effet de hover supprimé pour éviter le zoom */

.wine-image {
  flex-shrink: 0;
  width: 300px;
  height: 300px;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.wine-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: var(--transition);
}

/* Effet de hover supprimé pour éviter le zoom */

/* ========================================
   IMAGES DES COCKTAILS - MISE EN VALEUR
   ========================================
   Conteneur des images de cocktails avec style optimal
   - Dimensions: 320x320px (carré parfait)
   - Bordure: Transparente pour un look épuré
   - Centrage: Flexbox pour un alignement parfait
   - Coins arrondis: Utilisation de la variable CSS */
.cocktail-image {
  width: 320px;
  height: 320px;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 2px solid transparent;
  margin: 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   IMAGES DES ALCOOLS - MISE EN VALEUR
   ========================================
   Conteneur des images d'alcools avec style optimal (comme les cocktails)
   - Dimensions: 320x320px (carré parfait)
   - Bordure: Aucune bordure pour un look épuré
   - Centrage: Flexbox pour un alignement parfait
   - Coins arrondis: Utilisation de la variable CSS
   - Espacement: Collé au titre pour un rendu compact */
.alcohol-image {
  width: 320px;
  height: 320px;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: none;
  margin: 5px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   IMAGES DES COCKTAILS - RENDU FINAL
   ========================================
   Style des images à l'intérieur des conteneurs
   - Dimensions: 100% pour remplir le conteneur
   - Object-fit: Cover pour maintenir les proportions
   - Position: Centrée pour un rendu optimal
   - Transition: Animation douce au survol */
.cocktail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: var(--transition);
}

/* ========================================
   IMAGES DES ALCOOLS - RENDU FINAL
   ========================================
   Style des images d'alcools (comme les cocktails)
   - Dimensions: 100% pour remplir le conteneur
   - Object-fit: Cover pour maintenir les proportions
   - Position: Centrée pour un rendu optimal
   - Transition: Animation douce au survol */
.alcohol-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: var(--transition);
}

.expresso-martini-img {
  object-position: center 30%;
}

/* Effet de hover supprimé pour éviter le zoom */

.wine-details,
.beer-details,
.drink-details {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.7;
}

.cocktail-details {
  color: rgba(255, 255, 255, 0.9) !important;
  text-align: center !important;
  width: 100% !important;
  font-size: 1.2rem !important;
  line-height: 1.5 !important;
  margin: 8px 0 !important;
  padding: 0 20px !important;
  font-weight: 400 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.wine-appellation,
.wine-grapes,
.wine-type,
.beer-type,
.cocktail-ingredients {
  margin: 0 !important;
  font-size: 1.2rem !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 400 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.wine-grapes {
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

/* =================================
   STYLES POUR LES ALCOOLS
   ================================= */

.alcohol-list {
  max-width: 800px;
  margin: 0 auto;
}

.alcohol-category {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  margin-bottom: 30px;
  padding: 25px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.alcohol-category:hover {
  background: rgba(255, 255, 255, 0.15);
}

.alcohol-category .category-title {
  color: var(--accent-gold);
  font-family: var(--font-titre);
  font-size: var(--font-size-titre);
  font-weight: var(--font-weight-bold);
  margin-bottom: 1.5rem;
  text-align: center;
  border-bottom: 2px solid var(--accent-gold);
  padding-bottom: 0.5rem;
}

/* ========================================
   CADRES DES ALCOOLS - OPTIMISATION
   ========================================
   Structure des cartes d'alcools avec espacement optimal (comme les cocktails)
   - Hauteur: Auto avec min-height pour s'adapter au contenu
   - Largeur: 750px pour une présentation équilibrée
   - Espacement: 15px entre les éléments internes
   - Style: Fond semi-transparent avec effet de flou */
.alcohol-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  margin-bottom: 15px;
  padding: 20px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
  width: 750px;
  height: auto;
  min-height: 400px;
  box-sizing: border-box;
}

.alcohol-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(5px);
}

/* ========================================
   HEADER DES ALCOOLS - TITRES
   ========================================
   Zone d'affichage du nom de l'alcool (comme les cocktails)
   - Flexbox vertical pour centrer le titre
   - Largeur adaptative pour les titres longs
   - Espacement minimal pour coller à l'image */
.alcohol-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  width: auto;
  max-width: 100%;
  margin-bottom: 5px;
  padding: 0;
  min-height: auto;
  height: auto;
}

.alcohol-name {
  color: var(--accent-gold);
  font-family: var(--font-primary);
  font-size: 1.3rem;
  font-weight: var(--font-weight-demi);
  margin: 0;
  text-align: center;
  line-height: 1.1;
  width: auto;
  max-width: 100%;
}

.alcohol-prices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  margin-bottom: 5px;
}

/* ========================================
   PRIX DES ALCOOLS - MISE EN VALEUR
   ========================================
   Affichage des prix des alcools avec style optimisé
   - Taille: 1.1rem (augmentée pour une meilleure visibilité)
   - Style: Badge avec fond doré semi-transparent
   - Bordure: Ligne dorée pour l'encadrement
   - Position: Centrée sous les détails */
.alcohol-prices .price-single {
  background: rgba(212, 175, 55, 0.2);
  color: var(--accent-gold);
  padding: 8px 12px;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 1.1rem;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

/* ========================================
   BOISSONS SANS ALCOOL - STYLE IDENTIQUE AUX ALCOOLS
   ========================================
   Application du même style que la page alcool pour la cohérence
   - Structure identique: titre + image + description + prix
   - Espacement optimisé: image collée au titre
   - Style visuel: même apparence que les alcools */

/* ========================================
   CADRES DES BOISSONS SANS ALCOOL - OPTIMISATION
   ========================================
   Structure des cartes de boissons sans alcool (comme les alcools)
   - Hauteur: Auto avec min-height pour s'adapter au contenu
   - Largeur: 750px pour une présentation équilibrée
   - Espacement: 15px entre les éléments internes
   - Style: Fond semi-transparent avec effet de flou */
.drink-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  margin-bottom: 15px;
  padding: 20px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
  width: 750px;
  height: auto;
  min-height: 400px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.drink-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transition: left 0.6s ease;
}

.drink-item:hover::before {
  left: 100%;
}

.drink-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border-color: rgba(212, 175, 55, 0.3);
}

/* ========================================
   HEADER DES BOISSONS SANS ALCOOL - TITRES
   ========================================
   Zone d'affichage du nom de la boisson (comme les alcools)
   - Flexbox vertical pour centrer le titre
   - Largeur adaptative pour les titres longs
   - Espacement minimal pour coller à l'image */
.drink-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  width: auto;
  max-width: 100%;
  margin-bottom: 5px;
  padding: 0;
  min-height: auto;
  height: auto;
}

/* ========================================
   NOM DES BOISSONS SANS ALCOOL - TYPOGRAPHIE
   ========================================
   Style du titre principal de chaque boisson sans alcool
   - Taille: 1.3rem (comme les alcools)
   - Couleur: Or accentué (var(--accent-gold))
   - Espacement: Optimisé pour éviter les coupures
   - Poids: Demi-bold pour la lisibilité */
.drink-name {
  color: var(--accent-gold);
  font-family: var(--font-primary);
  font-size: 1.3rem;
  font-weight: var(--font-weight-demi);
  margin: 0;
  text-align: center;
  line-height: 1.1;
  width: auto;
  max-width: 100%;
}

/* ========================================
   IMAGES DES BOISSONS SANS ALCOOL - MISE EN VALEUR
   ========================================
   Conteneur des images de boissons sans alcool (comme les alcools)
   - Dimensions: 320x320px (carré parfait)
   - Bordure: Aucune bordure pour un look épuré
   - Centrage: Flexbox pour un alignement parfait
   - Coins arrondis: Utilisation de la variable CSS
   - Espacement: Collé au titre pour un rendu compact */
.drink-image {
  width: 320px;
  height: 320px;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: none;
  margin: 5px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   IMAGES DES BOISSONS SANS ALCOOL - RENDU FINAL
   ========================================
   Style des images de boissons sans alcool (comme les alcools)
   - Dimensions: 100% pour remplir le conteneur
   - Object-fit: Cover pour maintenir les proportions
   - Position: Centrée pour un rendu optimal
   - Transition: Animation douce au survol */
.drink-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: var(--transition);
}

/* ========================================
   DÉTAILS DES BOISSONS SANS ALCOOL - DESCRIPTIONS
   ========================================
   Zone d'affichage des détails et descriptions
   - Couleur: Blanc semi-transparent pour la lisibilité
   - Taille: 0.95rem (base pour les descriptions)
   - Largeur: 100% pour utiliser tout l'espace disponible
   - Espacement: Optimisé pour coller à l'image */
.drink-details {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 15px 0;
}

/* ========================================
   TYPE DES BOISSONS SANS ALCOOL - TEXTE PRINCIPAL
   ========================================
   Style du texte des types de boissons (très lisible)
   - Taille: 1.2rem (visible et lisible)
   - Couleur: Blanc avec 90% d'opacité pour le contraste
   - Poids: Semi-bold (600) pour la lisibilité
   - Espacement: 5px vertical pour l'équilibre */
.drink-type {
  margin: 5px 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: none;
  letter-spacing: normal;
}

/* ========================================
   PRIX DES BOISSONS SANS ALCOOL - MISE EN VALEUR
   ========================================
   Affichage des prix avec style optimisé (comme les alcools)
   - Taille: 1.1rem pour une meilleure visibilité
   - Style: Badge avec fond doré semi-transparent
   - Bordure: Ligne dorée pour l'encadrement
   - Position: Centrée sous les détails */
.drink-prices .price-single {
  background: rgba(212, 175, 55, 0.2);
  color: var(--accent-gold);
  padding: 8px 12px;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 1.1rem;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.alcohol-prices small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  font-weight: 400;
}

/* ========================================
   DÉTAILS DES ALCOOLS - DESCRIPTIONS
   ========================================
   Zone d'affichage des détails et descriptions des alcools
   - Couleur: Blanc semi-transparent pour la lisibilité
   - Taille: 0.95rem (base pour les descriptions)
   - Largeur: 100% pour utiliser tout l'espace disponible
   - Espacement: Optimisé pour coller à l'image */
.alcohol-details {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 15px 0;
}

.alcohol-type {
  margin: 5px 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =================================
   CATÉGORIES DE COCKTAILS
   ================================= */

.cocktail-category,
.drink-category {
  margin-bottom: 50px;
}

.category-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-price {
  font-size: 1.2rem;
  color: var(--text-light);
}

/* =================================
   FOOTER
   ================================= */

.main-footer {
  background: #3D4E57;
  color: var(--text-light);
  padding: 60px 0 30px;
  margin-top: auto;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 30px;
}

.footer-logo h3 {
  font-size: 2rem;
  font-weight: 900;
  color: var(--accent-gold);
  margin-bottom: 10px;
}

.footer-logo p {
  font-family: var(--font-labeur);
  font-size: var(--font-size-labeur);
  font-weight: var(--font-weight-light);
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-social {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin: 15px 0;
}

.social-link {
  color: var(--text-light);
  transition: var(--transition);
  padding: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.social-link:hover {
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.2);
  transform: translateY(-2px);
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 15px;
}

.social-card {
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-top: 15px;
  background: rgba(255, 255, 255, 0.03);
}

.footer-info {
  text-align: right;
  grid-column: 3;
}

.footer-info p:last-child {
  white-space: nowrap;
}

/* MENTION LÉGALE ALCOOL - CENTRÉE */
.alcohol-warning-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  padding: 20px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  margin: 0 20px;
}

.alcohol-warning-text {
  color: var(--accent-gold);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
  text-align: center;
}

/* MENTION LÉGALE ALCOOL - ANCIENNE POSITION (pour compatibilité) */
.alcohol-warning {
  text-align: center;
  margin-top: 20px;
  padding: 15px 20px;
  background: rgba(212, 175, 55, 0.1);
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px 8px 0 0;
}

.contact-info {
  margin-bottom: 20px;
  text-align: right;
}

.contact-info p {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin: 10px 0;
  font-size: 0.95rem;
}

.contact-info .phone {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin: 10px 0;
  font-size: 0.95rem;
}

.contact-info .address {
  text-align: right;
  justify-content: flex-end;
  margin-right: 0;
  padding-right: 0;
}

.contact-info .address .address-button {
  padding: 8px 0 8px 0;
  margin: 0;
  text-align: right;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  background: none;
  border: none;
}

.contact-icon {
  font-size: 1.1rem;
}

.contact-link-wrapper {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.contact-link {
  display: inline-block;
  background: var(--accent-gold);
  color: var(--primary-blue);
  padding: 8px 20px;
  text-decoration: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-link:hover {
  background: #f4d03f;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

@media (max-width: 768px) {
  .footer-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 30px;
    text-align: center;
  }

  .footer-logo {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
    justify-content: center;
  }

  .alcohol-warning-center {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    width: 100%;
  }

  .footer-info {
    grid-column: 1;
    grid-row: 3;
    text-align: center;
    width: 100%;
  }

  .footer-logo,
  .contact-info {
    text-align: center;
    justify-content: center;
  }

  .contact-info p,
  .contact-info .phone,
  .contact-info .address {
    justify-content: center;
  }

  .contact-info .address .address-button {
    justify-content: center;
  }

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

/* =================================
   SYSTÈME D'ÉTOILES
   ================================= */

.star-rating {
  margin-top: 15px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.star {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: var(--transition);
  margin: 0 2px;
  display: inline-block;
}

.star:hover,
.star.active {
  color: var(--accent-gold);
  transform: scale(1.1);
}

.star:hover ~ .star {
  color: rgba(255, 255, 255, 0.3);
}

.rating-stats {
  margin-left: 15px;
  font-size: 0.9rem;
  color: var(--accent-gold);
  font-weight: 600;
  display: inline-block;
}

.average-rating {
  font-size: 1.1rem;
  font-weight: 700;
  margin-right: 5px;
}

.rating-count {
  /* Masqué visuellement pour l'utilisateur mais disponible pour le développeur */
  display: none;
  /* Alternative: visibility: hidden; pour garder l'espace */
  /* Alternative: opacity: 0; pour rendre transparent */
  /* Alternative: position: absolute; left: -9999px; pour déplacer hors écran */
}

.rating-text {
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--accent-gold);
  font-style: italic;
  opacity: 0.9;
}

/* =================================
   FORMULAIRE DE CONTACT
   ================================= */

.contact-content {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 0 20px;
}

.contact-info-section h2,
.contact-form-section h2 {
  color: var(--accent-gold);
  font-size: 2rem;
  margin-bottom: 30px;
  font-weight: 700;
  text-align: center;
}

.info-grid {
  display: grid;
  gap: 30px;
}

.info-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 25px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.info-item h3 {
  color: var(--accent-gold);
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-weight: 600;
}

.info-item p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.5;
}

.contact-form {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  color: var(--text-light);
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 1rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  font-family: inherit;
  font-size: 1rem;
  transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-gold);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.submit-button {
  width: 100%;
  background: var(--accent-gold);
  color: var(--primary-blue);
  padding: 15px 30px;
  border: none;
  border-radius: var(--border-radius);
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: inherit;
}

.submit-button:hover {
  background: #f4d03f;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.submit-button:disabled {
  background: rgba(212, 175, 55, 0.5);
  cursor: not-allowed;
  transform: none;
}

/* =================================
   MESSAGES DE FORMULAIRE
   ================================= */

.form-message {
  padding: 15px 20px;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
  font-weight: 500;
  animation: slideIn 0.3s ease-out;
}

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

.form-message-success {
  background: rgba(76, 175, 80, 0.2);
  border: 1px solid rgba(76, 175, 80, 0.5);
  color: #81c784;
}

.form-message-error {
  background: rgba(244, 67, 54, 0.2);
  border: 1px solid rgba(244, 67, 54, 0.5);
  color: #ef5350;
}

/* =================================
   PLACEHOLDER CONTENT
   ================================= */

.placeholder-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.placeholder-content h2 {
  color: var(--accent-gold);
  font-size: 1.8rem;
  margin: 40px 0 20px;
  font-weight: 700;
}

.placeholder-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  text-align: center;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius);
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

/* =================================
   RESPONSIVE DESIGN
   ================================= */

@media (max-width: 768px) {
  .logo-text {
    font-size: 2rem;
  }
  
  .logo-subtitle {
    font-size: 1rem;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .page-title {
    font-size: 2.2rem;
  }
  
  .preview-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .preview-card {
    padding: 30px 20px;
  }
  
  .submenu-tabs {
    flex-direction: column;
    align-items: center;
  }
  
  .submenu-main-buttons {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  
  .submenu-tabs > .submenu-main-buttons > .tab-button {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
  }
  
  .tab-button {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
  }
  
  .wine-item .wine-header,
  .beer-item .beer-header,
  .cocktail-item .cocktail-header,
  .drink-item .drink-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .wine-prices,
  .beer-prices,
  .cocktail-prices,
  .drink-prices,
  .alcohol-prices,
  .tapas-prices {
    width: 100%;
    justify-content: center !important;
    text-align: center !important;
    margin-left: 0 !important;
  }
  
  .category-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .footer-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    text-align: center;
    gap: 25px;
  }
  
  .footer-logo {
    grid-column: 1;
    grid-row: 1;
  }
  
  .alcohol-warning-center {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    width: 100%;
  }
  
  .footer-info {
    grid-column: 1;
    grid-row: 3;
    text-align: center;
    width: 100%;
  }
  
  .footer-social {
    justify-content: center;
  }
  
  .contact-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .contact-form {
    padding: 30px 20px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 15px;
  }
  
  .preview-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .preview-card {
    padding: 25px 20px;
  }
  
  .preview-icon {
    font-size: 2.5rem;
  }
  
  .hero-section {
    padding: 0;
  }
  
  .content-section {
    padding: 60px 0;
  }
  
  .page-header {
    height: 220px;
    padding: 0;
  }
  
  .wine-item,
  .beer-item,
  .cocktail-item {
    padding: 20px;
  }
  
  /* Responsive pour les boissons sans alcool */
  .drink-item {
    padding: 15px;
    width: 90%;
    min-height: 350px;
  }
  
  .drink-image {
    width: 280px;
    height: 280px;
  }
  
  .sidebar-menu {
    width: 100vw;
    right: -100vw;
  }
}

/* =================================
   ANIMATIONS ET TRANSITIONS
   ================================= */

@media (prefers-reduced-motion: no-preference) {
  .content-section {
    opacity: 0;
    transform: translateY(30px);
  }
  
  .content-section.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =================================
   UTILITAIRES
   ================================= */

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

.mb-20 {
  margin-bottom: 20px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-40 {
  margin-top: 40px;
}

/* =================================
   POP-UPS CATÉGORIES
   ================================= */

.category-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

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

.category-modal {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  border-radius: var(--border-radius);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  transform: scale(0.7);
  transition: transform 0.3s ease;
  border: 2px solid var(--accent-gold);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.category-overlay.active .category-modal {
  transform: scale(1);
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px 20px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.1);
}

.category-header h2 {
  color: var(--accent-gold);
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
}

.category-close {
  background: none;
  border: none;
  color: var(--accent-gold);
  font-size: 2rem;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.category-close:hover {
  background: rgba(212, 175, 55, 0.2);
  transform: scale(1.1);
}

.category-content {
  padding: 30px;
}

.category-section {
  margin-bottom: 30px;
}

.category-section h3 {
  color: var(--accent-gold);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 15px;
  border-left: 3px solid var(--accent-gold);
  padding-left: 15px;
}

.category-section p {
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
  opacity: 0.9;
}

.category-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  gap: 15px;
  flex-wrap: wrap;
}

.category-close-btn {
  background: var(--accent-gold);
  color: var(--primary-blue);
  border: none;
  padding: 12px 25px;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.category-close-btn:hover {
  background: #b8941f;
  transform: translateY(-2px);
}

.category-full-link {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  text-decoration: none;
  padding: 12px 25px;
  border-radius: var(--border-radius);
  font-weight: 600;
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.category-full-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--accent-gold);
  transform: translateY(-2px);
}

/* Styles pour les boutons preview-link transformés en boutons */
.preview-link {
  background: var(--accent-gold);
  color: var(--primary-blue);
  border: none;
  padding: 12px 25px;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.preview-link:hover {
  background: #b8941f;
  transform: translateY(-2px);
  color: var(--primary-blue);
}

/* Responsive pour les pop-ups */
@media (max-width: 768px) {
  .category-modal {
    width: 95%;
    max-height: 85vh;
  }
  
  .category-header {
    padding: 20px 25px 15px;
  }
  
  .category-header h2 {
    font-size: 1.5rem;
  }
  
  .category-content {
    padding: 25px;
  }
  
  .category-footer {
    flex-direction: column;
    gap: 10px;
  }
  
  .category-close-btn,
  .category-full-link {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .category-modal {
    width: 98%;
    max-height: 90vh;
  }
  
  .category-header {
    padding: 15px 20px 10px;
  }
  
  .category-header h2 {
    font-size: 1.3rem;
  }
  
  .category-content {
    padding: 20px;
  }
  
  .category-section {
    margin-bottom: 20px;
  }
  
  .category-section h3 {
    font-size: 1.1rem;
  }
}

/* =================================
   OPTIMISATION DES COCKTAILS
   ================================= */

/* ========================================
   CADRES DES COCKTAILS - SECTION CLASSIQUES
   ========================================
   Structure des cartes de cocktails avec espacement optimal
   - Hauteur: 650px pour contenir titre + image + description
   - Largeur: 850px pour les titres longs (ex: MOJITO FRAMBOISE OU MANGUE)
   - Espacement: 25px entre les éléments internes
   - Style: Fond semi-transparent avec effet de flou
   - FORÇAGE: Affichage forcé pour éviter les conflits CSS */
.cocktail-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  margin-bottom: 30px;
  padding: 30px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 25px;
  width: 850px;
  height: 650px;
  box-sizing: border-box;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ========================================
   ESPACEMENT INTERNE DES COCKTAILS
   ========================================
   Gestion des marges entre les éléments internes
   - Header: 15px en bas pour coller à l'image
   - Image: 20px vertical pour centrer dans le cadre
   - Description: 25px vertical pour équilibrer l'espace */
.cocktail-item .cocktail-header {
  margin-bottom: 15px;
}

.cocktail-item .cocktail-image {
  margin: 20px 0;
}

.cocktail-item .cocktail-details {
  margin: 25px 0;
}

/* ========================================
   HEADER DES COCKTAILS - TITRES
   ========================================
   Zone d'affichage du nom du cocktail
   - Flexbox vertical pour centrer le titre
   - Largeur adaptative pour les titres longs
   - Pas de marge pour coller à l'image
   - FORÇAGE: Affichage forcé pour éviter les conflits CSS */
.cocktail-item .cocktail-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  gap: 0px;
  width: auto;
  max-width: 100%;
  padding: 0;
  min-height: auto;
  height: auto;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ========================================
   FORÇAGE ULTIME - HEADERS DES COCKTAILS
   ========================================
   Règles de forçage avec spécificité maximale pour les headers
   - Sélecteur très spécifique pour surcharger tous les conflits */
.cocktail-item .cocktail-header,
div.cocktail-item div.cocktail-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  gap: 0px !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  min-height: auto !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  z-index: 9999 !important;
  clip: auto !important;
  overflow: visible !important;
}

/* ========================================
   NOM DES COCKTAILS - TYPOGRAPHIE
   ========================================
   Style du titre principal de chaque cocktail
   - Taille: 1.7rem (optimisé pour les titres longs)
   - Couleur: Or accentué (var(--accent-gold))
   - Espacement: 15px de padding horizontal pour éviter les coupures
   - Poids: Bold (700) pour la lisibilité
   - FORÇAGE: Affichage forcé pour éviter les conflits CSS */
.cocktail-name {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin: 0;
  text-align: center;
  line-height: 1.2;
  width: 100%;
  max-width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ========================================
   FORÇAGE ULTIME - TITRES DES COCKTAILS
   ========================================
   Règles de forçage avec spécificité maximale pour garantir l'affichage
   - Sélecteur très spécifique pour surcharger tous les conflits
   - Propriétés critiques pour la visibilité forcée */
.cocktail-item .cocktail-header .cocktail-name,
div.cocktail-item div.cocktail-header h4.cocktail-name {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  color: var(--accent-gold) !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
  position: static !important;
  z-index: 9999 !important;
  clip: auto !important;
  overflow: visible !important;
}

/* ========================================
   DESCRIPTIONS DES COCKTAILS - INGRÉDIENTS
   ========================================
   Zone d'affichage des ingrédients et recettes
   - Couleur: Blanc semi-transparent pour la lisibilité
   - Taille: 1.45rem (base pour les descriptions)
   - Largeur: 100% pour utiliser tout l'espace disponible
   - Interligne: 1.7 pour un espacement optimal */
.cocktail-details {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  width: 100%;
  font-size: 1.45rem;
  line-height: 1.7;
}

/* ========================================
   INGRÉDIENTS DES COCKTAILS - TEXTE PRINCIPAL
   ========================================
   Style du texte des ingrédients (très lisible)
   - Taille: 2.7rem (augmentée de 2 tailles pour une lisibilité excellente)
   - Couleur: Blanc avec 90% d'opacité pour le contraste
   - Poids: Semi-bold (500) pour la lisibilité
   - Espacement: 5px vertical pour l'équilibre */
.cocktail-ingredients {
  margin: 5px 0;
  font-size: 2.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* ========================================
   IMAGES DES COCKTAILS - MISE EN VALEUR
   ========================================
   Conteneur des images de cocktails avec style optimal
   - Dimensions: 320x320px (carré parfait)
   - Bordure: Transparente pour un look épuré
   - Centrage: Flexbox pour un alignement parfait
   - Coins arrondis: Utilisation de la variable CSS */
.cocktail-image {
  width: 320px;
  height: 320px;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 2px solid transparent;
  margin: 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   IMAGES DES COCKTAILS - RENDU FINAL
   ========================================
   Style des images à l'intérieur des conteneurs
   - Dimensions: 100% pour remplir le conteneur
   - Object-fit: Cover pour maintenir les proportions
   - Position: Centrée pour un rendu optimal
   - Transition: Animation douce au survol */
.cocktail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: var(--transition);
}

/* ========================================
   TITRES DE SECTION - COCKTAILS
   ========================================
   En-têtes des différentes catégories de cocktails
   - Taille: 2rem pour la hiérarchie visuelle
   - Couleur: Or accentué pour la cohérence
   - Bordure: Ligne dorée en bas pour séparer les sections
   - Layout: Flexbox pour aligner titre et prix */
.category-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* ========================================
   PRIX DES SECTIONS - COCKTAILS
   ========================================
   Affichage du prix unique par section (ex: "10€")
   - Taille: 1.6rem pour la lisibilité
   - Style: Badge avec fond doré semi-transparent
   - Bordure: Ligne dorée pour l'encadrement
   - Position: Aligné à droite du titre de section */
.category-price {
  font-size: 1.6rem;
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.2);
  padding: 6px 12px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(212, 175, 55, 0.3);
  font-weight: 600;
}

/* ========================================
   PAGE COCKTAILS - OPTIMISATION DE L'ESPACEMENT
   ========================================
   Styles spécifiques pour optimiser l'espacement de la page cocktails
   - Suppression des espaces excessifs entre sections
   - Optimisation de l'affichage du contenu principal
   - Gestion des marges et paddings pour un rendu compact */

/* ========================================
   PAGE TAPAS - STYLES PRINCIPAUX
   ========================================
   Styles pour la page des tapas avec la même structure que les alcools
   - Structure identique : Titre → Image → Description → Prix
   - Images centrées : 320x320px sans bordures
   - Espacement optimal : Image collée au titre (5px)
   - Style cohérent : Même apparence que la page des alcools */

/* ========================================
   LISTE DES TAPAS - CONTAINER PRINCIPAL
   ========================================
   Conteneur principal pour afficher les tapas
   - Largeur maximale pour centrer le contenu
   - Espacement uniforme entre les catégories */
.tapas-list {
  max-width: 800px;
  margin: 0 auto;
}

/* ========================================
   CATÉGORIES DE TAPAS - SECTIONS
   ========================================
   Sections pour organiser les différents types de tapas
   - Fond semi-transparent avec effet de flou
   - Espacement entre les catégories
   - Bordure subtile pour la séparation */
.tapas-category {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  margin-bottom: 30px;
  padding: 25px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.tapas-category:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ========================================
   CADRES DES TAPAS - OPTIMISATION
   ========================================
   Structure des cartes de tapas avec espacement optimal
   - Hauteur: Auto avec min-height pour s'adapter au contenu
   - Largeur: 750px pour une présentation équilibrée
   - Espacement: 15px entre les éléments internes
   - Style: Fond semi-transparent avec effet de flou */

/* ========================================
   HEADER DES TAPAS - TITRES
   ========================================
   Zone d'affichage du nom du tapas
   - Flexbox vertical pour centrer le titre
   - Largeur adaptative pour les titres longs
   - Espacement minimal pour coller à l'image */
.tapas-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  width: auto;
  max-width: 100%;
  margin-bottom: 5px;
  padding: 0;
  min-height: auto;
  height: auto;
}


/* ========================================
   IMAGES DES TAPAS - CENTRAGE ET TAILLE
   ========================================
   Conteneur des images de tapas
   - Dimensions: 400x400px pour une présentation plus visible
   - Centrage: Marges automatiques pour centrer horizontalement
   - Espacement: 5px au-dessus pour coller au titre */
.tapas-image {
  width: 400px;
  height: 400px;
  border: none;
  margin: 5px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: transparent;
}

/* ========================================
   IMAGES DES TAPAS - STYLE DES IMAGES
   ========================================
   Style des images de tapas
   - Object-fit: Cover pour remplir le conteneur
   - Object-position: Center pour centrer le contenu
   - Dimensions: 100% pour remplir le conteneur */
.tapas-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--border-radius);
  background: transparent !important;
  display: block !important;
}

/* ========================================
   DÉTAILS DES TAPAS - DESCRIPTIONS
   ========================================
   Zone d'affichage des descriptions des tapas
   - Espacement: 15px au-dessus et en-dessous
   - Largeur: 100% pour utiliser tout l'espace disponible */
.tapas-details {
  margin: 15px 0;
  width: 100%;
}


/* ========================================
   PRIX DES TAPAS - AFFICHAGE
   ========================================
   Zone d'affichage des prix des tapas
   - Flexbox pour centrer le prix
   - Espacement: 10px au-dessus pour séparer de la description */
.tapas-prices {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

/* ========================================
   PRIX UNIQUE DES TAPAS - STYLE
   ========================================
   Style du prix unique des tapas
   - Taille: 1.1rem pour la lisibilité
   - Couleur: Or accentué pour la cohérence
   - Style: Badge avec fond doré semi-transparent */
.tapas-prices .price-single {
  font-size: 1.1rem;
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.2);
  padding: 8px 16px;
  border-radius: var(--border-radius);
  border: 1px solid rgba(212, 175, 55, 0.3);
  font-weight: 600;
  font-family: var(--font-primary);
}

/* ========================================
   SECTION SPÉCIALITÉS TAPAS - IMAGE LARGE
   ========================================
   Styles spécifiques pour la section spécialités
   - Image en format large (ratio 16:9 ou similaire)
   - Object-fit: contain pour voir l'image entière
   - Dimensions adaptées pour éviter la déformation */
#specialites .tapas-image {
  width: 100%;
  max-width: 600px;
  height: 400px;
  border: none;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: transparent;
}

#specialites .tapas-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: var(--border-radius);
  transform: rotate(270deg);
}

/* ========================================
   HEADER - LOGO À GAUCHE ET NAVIGATION CENTRÉE
   ========================================
   Styles pour positionner le logo à gauche et centrer la navigation
   - Logo positionné à gauche du header
   - Navigation centrée par rapport au logo
   - Layout flexbox pour un positionnement optimal */

/* Conteneur principal du header */
.main-header .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

/* ========================================
   HEADER - LOGO À GAUCHE ET NAVIGATION CENTRÉE
   ========================================
   Styles pour positionner le logo à gauche et centrer la navigation
   - Logo positionné à gauche du header
   - Navigation centrée par rapport au logo
   - Layout flexbox pour un positionnement optimal */

/* Conteneur principal du header */
.main-header .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

/* Navigation centrée - Gestion du débordement */
.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
  overflow: visible;
}

/* Liste de navigation - UNE SEULE LIGNE et entièrement visible */
.nav-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: auto;
  box-sizing: border-box;
  overflow: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Masquer la scrollbar */
.nav-list::-webkit-scrollbar {
  display: none;
}

/* Liens de navigation - Taille optimisée pour une ligne et entièrement visible */
.nav-link {
  white-space: nowrap;
  font-size: 0.9rem;
  padding: 8px 12px;
  text-decoration: none;
  transition: var(--transition);
  flex-shrink: 0;
  min-width: fit-content;
  overflow: visible;
  text-overflow: unset;
}

/* Section du titre et sous-titre */
.title-section {
  text-align: center;
  margin: 15px auto;
  width: 100%;
}

/* ========================================
   PAGE MENTIONS LÉGALES - STYLES SPÉCIFIQUES
   ========================================
   Styles dédiés à la page des mentions légales
   - Sections bien structurées et lisibles
   - Titres et contenu bien espacés
   - Style professionnel et légal */

.legal-section {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px;
  margin-bottom: 30px;
  transition: var(--transition);
}

.legal-section:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(212, 175, 55, 0.2);
  transform: translateY(-2px);
}

.legal-section .section-title {
  color: var(--accent-gold);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}

.legal-content {
  color: var(--text-light);
  line-height: 1.7;
}

.legal-content p {
  margin-bottom: 15px;
  font-size: 1rem;
}

.legal-content strong {
  color: var(--accent-gold);
  font-weight: 600;
}

.legal-content ul {
  margin: 15px 0;
  padding-left: 20px;
}

.legal-content li {
  margin-bottom: 8px;
  color: var(--text-light);
}

.legal-content a {
  color: var(--accent-gold);
  text-decoration: none;
  transition: var(--transition);
}

.legal-content a:hover {
  color: var(--text-light);
  text-decoration: underline;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  .logo-image-left {
    height: 45px;
    max-width: 110px;
  }
  
  .main-header .container {
    gap: 8px;
  }
  
  .nav-list {
    gap: 10px;
  }
  
  .nav-link {
    font-size: 0.8rem;
    padding: 6px 8px;
  }
}

/* Responsive pour très petits écrans */
@media (max-width: 480px) {
  .logo-image-left {
    height: 40px;
    max-width: 100px;
  }
  
  .nav-list {
    gap: 8px;
    justify-content: center;
  }
  
  .nav-link {
    font-size: 0.75rem;
    padding: 5px 6px;
  }
}

/* =================================
   STYLE GLOBAL POUR TOUTES LES IMAGES
   ================================= */

/* Style pour toutes les images du site avec effet zoom */
.beer-img,
.wine-img,
.cocktail-img,
.drink-img,
.alcohol-img,
.tapas-img,
.food-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet hover sur le conteneur d'image - agrandissement du conteneur */
.cocktail-image,
.wine-image,
.beer-image,
.drink-image,
.alcohol-image,
.tapas-image,
.food-image {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-origin: center;
}

.cocktail-image:hover,
.wine-image:hover,
.beer-image:hover,
.drink-image:hover,
.alcohol-image:hover,
.tapas-image:hover,
.food-image:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
}

/* Curseur et effet hover sur les images zoomables */
.zoomable-image {
  cursor: zoom-in !important;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.zoomable-image:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* Curseur et effet hover sur les titres zoomables */
.zoomable-title {
  cursor: zoom-in !important;
  transition: color 0.3s ease, transform 0.3s ease;
  position: relative;
}

.zoomable-title:hover {
  color: var(--accent-gold);
  transform: scale(1.05);
}

.zoomable-title::after {
  content: ' 🔍';
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 0.8em;
}

.zoomable-title:hover::after {
  opacity: 1;
}

/* =================================
   MODAL DE ZOOM D'IMAGE
   ================================= */

.image-zoom-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(5px);
}

.image-zoom-overlay.active {
  opacity: 1;
}

.image-zoom-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  max-width: min(80vw, 700px);
  max-height: 90vh;
  width: auto;
  min-width: 450px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  background: rgba(15, 23, 42, 0.98);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 0;
  border: 2px solid rgba(212, 175, 55, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(212, 175, 55, 0.2);
  box-sizing: border-box;
}

.image-zoom-modal.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.image-zoom-header {
  padding: 20px 25px;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(212, 175, 55, 0.08);
  min-height: 60px;
  flex-shrink: 0;
}

.image-zoom-title {
  margin: 0;
  padding: 0;
  color: var(--accent-gold);
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-primary);
  flex: 1;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  overflow: visible;
  height: auto;
  min-height: auto;
}

.image-zoom-close {
  position: absolute;
  top: 10px;
  right: 10px;
  margin-left: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-light);
  font-size: 2rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10001;
  line-height: 1;
  padding: 0;
}

/* Conteneur pour l'image qui limite sa taille */
.image-zoom-image-container {
  width: 100%;
  max-height: 50vh;
  height: auto;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  overflow: visible;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  /* S'assurer que le conteneur ne force pas de zoom */
  transform: none !important;
  scale: 1 !important;
}

.image-zoom-img {
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
  object-fit: contain !important;
  /* Image entière affichée sans zoom - s'adapte au conteneur */
  /* Calculer dynamiquement la taille max pour afficher l'image entière */
  max-width: calc(100% - 40px) !important;
  max-height: 45vh !important;
  width: auto !important;
  height: auto !important;
  transform: none !important; /* Pas de zoom pour afficher la photo entière */
  transform-origin: center center !important;
  box-sizing: border-box !important;
  /* Forcer l'affichage de l'image entière */
  object-position: center center !important;
  /* Désactiver tous les types de zoom possibles */
  scale: 1 !important;
  zoom: 1 !important;
  /* L'image doit s'adapter pour tenir dans le conteneur */
  aspect-ratio: auto !important;
}

.image-zoom-content {
  padding: 20px 30px;
  border-top: 2px solid rgba(212, 175, 55, 0.2);
  background: rgba(255, 255, 255, 0.02);
  max-width: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: none;
  min-height: 120px;
  flex: 1;
  display: block !important;
  visibility: visible !important;
  flex-shrink: 0;
  box-sizing: border-box;
  /* Style de la scrollbar personnalisé */
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.6) rgba(255, 255, 255, 0.1);
}

/* Style de la scrollbar pour WebKit (Chrome, Safari, Edge) */
.image-zoom-content::-webkit-scrollbar {
  width: 12px;
}

.image-zoom-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.image-zoom-content::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.6);
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.image-zoom-content::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.8);
}

.image-zoom-details {
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.2rem;
  line-height: 1.9;
  margin-bottom: 20px;
  font-weight: 500;
  padding-bottom: 10px;
}

.image-zoom-details p {
  margin: 12px 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.1rem;
  line-height: 1.8;
}

.image-zoom-details p:first-child {
  margin-top: 0;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
}

.image-zoom-details p:last-child {
  margin-bottom: 0;
}

.image-zoom-details .cocktail-ingredients,
.image-zoom-details .wine-appellation,
.image-zoom-details .wine-grapes,
.image-zoom-details .beer-type,
.image-zoom-details .drink-type {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.image-zoom-prices {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid rgba(212, 175, 55, 0.3);
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  justify-content: flex-start;
}

.image-zoom-prices .price-small,
.image-zoom-prices .price-bottle,
.image-zoom-prices .price-single,
.image-zoom-prices .price-demi,
.image-zoom-prices .price-pinte {
  background: rgba(212, 175, 55, 0.25) !important;
  color: var(--accent-gold) !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  border: 2px solid rgba(212, 175, 55, 0.5) !important;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3) !important;
  min-width: 80px;
  text-align: center;
  transition: all 0.3s ease;
}

.image-zoom-prices .price-small:hover,
.image-zoom-prices .price-bottle:hover,
.image-zoom-prices .price-single:hover,
.image-zoom-prices .price-demi:hover,
.image-zoom-prices .price-pinte:hover {
  background: rgba(212, 175, 55, 0.35) !important;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4) !important;
}

.image-zoom-prices .price-small small,
.image-zoom-prices .price-bottle small,
.image-zoom-prices .price-single small {
  font-size: 0.9rem !important;
  opacity: 0.9;
  display: block;
  margin-top: 4px;
}

.image-zoom-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-light);
  font-size: 2rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10001;
  line-height: 1;
  padding: 0;
}

.image-zoom-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.image-zoom-close:active {
  transform: scale(0.95);
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  .image-zoom-modal {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .image-zoom-header {
    padding: 15px 20px;
  }
  
  .image-zoom-title {
    font-size: 1.2rem;
  }
  
  .image-zoom-modal {
    max-width: 90vw;
    max-height: 90vh;
    min-width: 300px;
  }
  
  .image-zoom-header {
    padding: 15px 20px;
    min-height: 55px;
  }
  
  .image-zoom-title {
    font-size: 1.2rem;
  }
  
  .image-zoom-modal {
    max-width: 90vw;
    max-height: 95vh;
    min-width: 350px;
  }
  
  .image-zoom-image-container {
    max-height: 40vh;
    padding: 15px;
    min-height: 180px;
  }
  
  .image-zoom-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    transform: none !important; /* Pas de zoom pour afficher la photo entière */
    transform-origin: center center !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  
  .image-zoom-content {
    padding: 18px 25px;
    max-height: none;
    min-height: 100px;
    flex: 1;
  }
  
  .image-zoom-content::-webkit-scrollbar {
    width: 10px;
  }
  
  .image-zoom-prices .price-small,
  .image-zoom-prices .price-bottle,
  .image-zoom-prices .price-single {
    font-size: 1.2rem !important;
    padding: 10px 16px !important;
  }
  
  .image-zoom-details {
    font-size: 1.1rem;
  }
  
  .image-zoom-details p {
    font-size: 1rem;
  }
  
  .image-zoom-close {
    top: 5px;
    right: 5px;
    width: 35px;
    height: 35px;
    font-size: 1.5rem;
  }
}

/* ========================================
   STYLES SPÉCIFIQUES AUX PAGES
   ======================================== */

/* ========================================
   PAGE ACCUEIL (index.html)
   ======================================== */

/* Correction pour forcer l'affichage de la section preview */
.content-section.preview-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ========================================
   PAGE TAPAS (tapas.html)
   ======================================== */

/* Styles pour la popup des spécialités */
.speciality-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(61, 78, 87, 0.95);
  z-index: 9999;
  opacity: 0;
  transition: var(--transition);
}

.speciality-popup-overlay.active {
  opacity: 1;
}

.speciality-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  max-width: 80vw;
  max-height: 80vh;
  min-width: 70vw;
  min-height: 70vh;
  background: var(--primary-blue);
  border-radius: var(--border-radius);
  box-shadow: 0 15px 40px var(--shadow-heavy);
  transition: var(--transition);
  overflow: auto;
  border: 1px solid var(--accent-gold);
}

.speciality-popup.active {
  transform: translate(-50%, -50%) scale(1);
}

.speciality-popup-content {
  background: var(--background-dark);
  border: 3px solid var(--accent-gold);
  border-radius: var(--border-radius);
  max-width: 90vw;
  max-height: 90vh;
  min-width: 80vw;
  min-height: 80vh;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  max-height: 100%;
  overflow-y: auto;
  color: var(--text-light);
  position: relative;
}

.speciality-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 2px solid var(--shadow-light);
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: var(--text-light);
}

.speciality-popup-title {
  margin: 0;
  font-size: var(--font-size-titre);
  font-weight: var(--font-weight-demi);
  color: var(--text-light);
  font-family: var(--font-titre);
}

.speciality-popup-close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--text-light);
  padding: 0;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition);
}

.speciality-popup-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.speciality-popup-img {
  max-width: 95%;
  max-height: 65vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--border-radius);
  box-shadow: 0 8px 20px var(--shadow-medium);
  transform: scale(1.1);
  margin: 25px auto;
  padding: 0;
  display: block;
  z-index: 1;
  transition: transform 0.3s ease;
}

.speciality-popup-description {
  text-align: center;
  color: var(--text-light);
  line-height: 1.6;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-secondary);
  position: relative;
  background: rgba(26, 54, 93, 0.95);
  padding: 20px;
  margin: 20px 0 0 0;
  border-radius: var(--border-radius);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.ingredients-section {
  margin-bottom: 25px;
  text-align: center;
}

.ingredients-section h4 {
  color: var(--accent-gold);
  font-family: var(--font-sous-titre);
  font-size: var(--font-size-sous-titre);
  font-weight: var(--font-weight-demi);
  font-style: italic;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  font-family: var(--font-primary);
}

.ingredients-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 25px 0;
  text-align: center;
}

.ingredients-section li {
  padding: 12px 20px;
  font-family: var(--font-sous-titre);
  font-size: var(--font-size-sous-titre);
  font-style: italic;
  color: var(--text-light);
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(212, 175, 55, 0.1));
  border-radius: var(--border-radius);
  border: 1px solid var(--accent-gold);
  display: inline-block;
  min-width: 200px;
  font-family: var(--font-secondary);
}

.ingredients-section li:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(212, 175, 55, 0.2));
  border-color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-medium);
  transition: var(--transition);
}

.speciality-popup-price {
  text-align: center;
  font-size: var(--font-size-grand-titre);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-grand-titre);
  color: var(--text-dark);
  margin-top: 20px;
  padding: 25px 40px;
  background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
  border-radius: var(--border-radius);
  border: 3px solid var(--primary-blue);
  box-shadow: 0 6px 20px var(--shadow-medium);
  min-width: 150px;
  font-family: var(--font-primary);
}

/* Style pour l'image cliquable */
.speciality-img {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  transform: rotate(180deg);
}

/* Style personnalisé pour la barre de défilement */
.speciality-popup-content::-webkit-scrollbar {
  width: 8px;
}

.speciality-popup-content::-webkit-scrollbar-track {
  background: var(--background-light);
  border-radius: 4px;
}

.speciality-popup-content::-webkit-scrollbar-thumb {
  background: var(--secondary-blue);
  border-radius: 4px;
}

.speciality-popup-content::-webkit-scrollbar-thumb:hover {
  background: var(--primary-blue);
}

.speciality-popup-description p {
  margin-bottom: 12px;
  font-size: 16px;
}

/* Responsive pour la popup */
@media (max-width: 768px) {
  .speciality-popup {
    max-width: 98vw;
    max-height: 95vh;
    min-width: 95vw;
    min-height: 85vh;
  }
  
  .speciality-popup-header {
    padding: 15px 20px;
  }
  
  .speciality-popup-content {
    padding: 15px;
    flex-direction: column;
    text-align: center;
  }
  
  .speciality-popup-title {
    font-size: 18px;
  }
  
  .speciality-popup-img {
    max-width: 110vw;
    max-height: 100vh;
    width: 110vw;
    height: 100vh;
    margin-bottom: 15px;
    margin-left: -5vw;
  }
}

@media (max-width: 480px) {
  .speciality-popup {
    max-width: 99vw;
    max-height: 98vh;
    min-width: 98vw;
    min-height: 90vh;
  }
  
  .speciality-popup-title {
    font-size: 16px;
  }
  
  .speciality-popup-img {
    max-width: 105vw;
    max-height: 95vh;
    width: 105vw;
    height: 95vh;
    margin-left: -2.5vw;
  }
  
  .speciality-popup-description p {
    font-size: 14px;
  }
}

/* ========================================
   PAGE ALCÓOL (alcool.html)
   ======================================== */

/* Styles spécifiques pour la page alcool */
.alcool-section {
  margin-bottom: 0 !important;
}

/* ÉLIMINATION FORCÉE DE L'ESPACE ENTRE SECTIONS */
.page-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.content-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page-header + .content-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page-header + .content-section .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.page-header + .content-section .page-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* Amélioration du sous-titre de page */
.page-subtitle {
  opacity: 0.9;
  font-weight: 400;
  padding: 0 !important;
  margin: 0 !important;
}

/* Correction pour forcer l'affichage du contenu */
.content-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ========================================
   PAGE BIÈRES (bieres.html)
   ======================================== */

/* Styles spécifiques pour la page bières */

/* ========================================
   PAGE VINS (vins.html)
   ======================================== */

/* Styles spécifiques pour la page vins */

/* ========================================
   PAGE COCKTAILS (cocktails.html)
   ======================================== */

/* Styles spécifiques pour la page cocktails */

/* ========================================
   PAGE SANS ALCOOL (sans-alcool.html)
   ======================================== */

/* Styles spécifiques pour la page sans alcool */

/* ========================================
   PAGE PRÉSENTATION (presentation.html)
   ======================================== */

/* Styles spécifiques pour la page présentation */

/* ========================================
   PAGE ÉVÉNEMENTS (evenements.html)
   ======================================== */

/* Styles spécifiques pour la page événements */

/* ========================================
   PAGE CONTACT (contact.html)
   ======================================== */

/* Styles spécifiques pour la page contact */

/* ========================================
   PAGE MENTIONS LÉGALES (mentions-legales.html)
   ======================================== */

/* Styles spécifiques pour la page mentions légales */
.page-content .category-title {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 10px;
  color: var(--accent-gold);
  font-family: var(--font-primary);
  letter-spacing: 0.5px;
}

/* ========================================
   STYLES SPÉCIFIQUES AUX PAGES
   ======================================== */

/* Champ honeypot anti-bot pour les formulaires */
.contact-form .form-guard {
  position: absolute;
  left: -10000px;
  opacity: 0;
  height: 0;
  width: 1px;
  overflow: hidden;
  pointer-events: none;
}


/* ========================================
   GESTION DES SOUS-MENUS
   ======================================== */

/* Sous-menus qui suivent le scroll (par défaut) */
.submenu-tabs.sticky-submenu {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--background-dark);
  box-shadow: 0 2px 10px rgba(61, 78, 87, 0.3);
}

/* Sous-menus qui ne suivent pas le scroll */
.submenu-tabs:not(.sticky-submenu) {
  position: static;
}

/* Onglets internes masqués par défaut */
.submenu-internal-tabs {
  display: none;
}

.submenu-internal-tabs.show {
  display: block;
}

/* ========================================
   GRILLE UNIFIÉE POUR LES CARTES PRODUITS
   ======================================== */

.category-title {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-demi);
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.category-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
  color: var(--text-dark);
  font-size: 0.85rem;
  font-weight: var(--font-weight-bold);
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ========================================
   GRILLE UNIFIÉE POUR LES CARTES PRODUITS
   ======================================== */

.page-content .alcohol-list,
.page-content .cocktails-content,
.page-content .drink-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

.alcohol-grid,
.cocktail-grid,
.beer-list,
.wine-list,
.sans-alcool-list,
.tapas-list,
.event-list,
.product-list,
.food-list,
.cocktail-grid--centered {
  display: flex !important;
  flex-direction: column;
  width: min(1200px, 100%);
  margin: 0 auto;
  gap: 20px;
}

.drink-category {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sans-alcool .drink-category {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .sans-alcool .drink-category {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .sans-alcool .drink-category {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.drink-category .category-title {
  grid-column: 1 / -1;
  margin-bottom: 5px;
}

.cocktail-category,
.cocktails-category {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.alcohol-item,
.beer-item,
.cocktail-item,
.wine-item,
.drink-item,
.sans-alcool-item,
.tapas-item,
.event-item,
.product-item,
.food-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  padding: 20px 30px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 0px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
  overflow: hidden;
}

.alcohol-image,
.beer-image,
.cocktail-image,
.wine-image,
.drink-image,
.sans-alcool-image,
.tapas-image,
.product-image,
.event-image,
.food-image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  aspect-ratio: 1 / 1;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}

.alcohol-image img,
.beer-image img,
.cocktail-image img,
.wine-image img,
.drink-image img,
.sans-alcool-image img,
.tapas-image img,
.product-image img,
.event-image img,
.food-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* Force l'affichage des images dans cocktail-grid */
.cocktail-grid .cocktail-image img,
.cocktail-grid .cocktail-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.cocktail-grid .cocktail-image {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 200px !important;
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}

.cocktail-header h4,
.cocktail-name,
.alcohol-name,
.beer-name,
.wine-name,
.drink-name,
.tapas-name {
  word-break: break-word;
  hyphens: auto;
  color: var(--accent-gold) !important;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.wine-img {
  object-fit: contain !important;
  object-position: center !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.alcohol-item:hover,
.beer-item:hover,
.cocktail-item:hover,
.wine-item:hover,
.drink-item:hover,
.sans-alcool-item:hover,
.tapas-item:hover,
.event-item:hover,
.product-item:hover,
.food-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

/* Texte dans les items */
.cocktail-item h3,
.cocktail-item h4,
.beer-item h3,
.beer-item h4,
.wine-item h3,
.wine-item h4,
.tapas-item h3,
.tapas-item h4,
.event-item h3,
.event-item h4,
.alcool-item h3,
.alcool-item h4,
.alcohol-item h3,
.alcohol-item h4,
.sans-alcool-item h3,
.sans-alcool-item h4,
.drink-item h3,
.drink-item h4,
.food-item h3,
.food-item h4,
.product-item h3,
.product-item h4,
.item h3,
.item h4 {
  color: var(--accent-gold) !important;
  margin-bottom: 10px !important;
  text-align: center !important;
}

/* ========================================
   CARTES PRODUITS - VERSION HORIZONTALE
   ======================================== */
.cocktail-grid,
.cocktail-grid--centered,
.alcohol-grid,
.beer-list,
.wine-list,
.drink-list,
.sans-alcool-list,
.tapas-list {
  display: flex !important;
  flex-direction: column;
  gap: 20px;
  width: min(1100px, 100%);
  margin: 0 auto;
}

.cocktail-item,
.alcohol-item,
.beer-item,
.wine-item,
.drink-item,
.sans-alcool-item,
.tapas-item {
  width: 100% !important;
  max-width: 100%;
  min-height: auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 20px;
  text-align: left !important;
  padding: 20px 30px !important;
}

.cocktail-item .cocktail-header,
.alcohol-item .alcohol-header,
.beer-item .beer-header,
.wine-item .wine-header,
.drink-item .drink-header,
.tapas-item .tapas-header {
  align-items: center !important;
  text-align: center !important;
  width: 25%;
  min-width: 180px;
  gap: 6px !important;
}

.cocktail-name,
.alcohol-name,
.beer-name,
.wine-name,
.drink-name,
.tapas-name {
  text-align: left !important;
  width: 100%;
}

.cocktail-details,
.alcohol-details,
.beer-details,
.wine-details,
.drink-details,
.tapas-details {
  text-align: center !important;
  margin: 0 !important;
  width: 100% !important;
  flex: 1;
  justify-content: center;
}

.cocktail-prices,
.alcohol-prices,
.beer-prices,
.wine-prices,
.drink-prices,
.tapas-prices {
  justify-content: flex-end;
  text-align: right;
  width: auto;
  margin-left: auto;
  gap: 10px;
}

/* Sur les petits écrans, centrer les prix */
@media (max-width: 768px) {
  .cocktail-prices,
  .alcohol-prices,
  .beer-prices,
  .wine-prices,
  .drink-prices,
  .tapas-prices {
    justify-content: center !important;
    text-align: center !important;
    margin-left: 0 !important;
    width: 100%;
  }
}

.cocktail-details,
.alcohol-details,
.beer-details,
.wine-details,
.drink-details,
.tapas-details {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  flex-wrap: wrap;
}

.cocktail-details p,
.alcohol-details p,
.beer-details p,
.wine-details p,
.drink-details p,
.tapas-details p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-light);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-wrap: break-word;
  line-height: 1.5;
}

.cocktail-ingredients {
  font-size: 0.95rem !important;
  color: var(--text-light) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

@media (max-width: 768px) {
  .cocktail-item,
  .alcohol-item,
  .beer-item,
  .wine-item,
  .drink-item,
  .sans-alcool-item,
  .tapas-item {
    flex-direction: column;
    text-align: center !important;
    gap: 15px;
  }

  .cocktail-details,
  .alcohol-details,
  .beer-details,
  .wine-details,
  .drink-details,
  .tapas-details {
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .cocktail-item .cocktail-header,
  .alcohol-item .alcohol-header,
  .beer-item .beer-header,
  .wine-item .wine-header,
  .drink-item .drink-header,
  .tapas-item .tapas-header {
    align-items: center !important;
    text-align: center !important;
  }

  .cocktail-details,
  .alcohol-details,
  .beer-details,
  .wine-details,
  .drink-details,
  .tapas-details {
    text-align: center !important;
  }

  .cocktail-prices,
  .alcohol-prices,
  .beer-prices,
  .wine-prices,
  .drink-prices,
  .tapas-prices {
    justify-content: center !important;
    text-align: center !important;
    margin-left: 0 !important;
    width: 100%;
  }
  
  .wine-list .wine-prices,
  .beer-list.pression-layout .beer-prices {
    justify-content: center !important;
    margin-left: 0 !important;
    width: 100%;
  }
  
  .wine-item .wine-prices,
  .beer-item .beer-prices,
  .cocktail-item .cocktail-prices,
  .alcohol-item .alcohol-prices,
  .drink-item .drink-prices,
  .tapas-item .tapas-prices {
    justify-content: center !important;
    text-align: center !important;
    margin-left: 0 !important;
    width: 100%;
  }
}

/* Headers des items centrés */
.cocktail-header:not(.page-header),
.beer-header:not(.page-header),
.wine-header:not(.page-header),
.tapas-header:not(.page-header),
.event-header,
.alcool-header,
.alcohol-header:not(.page-header),
.sans-alcool-header,
.drink-header:not(.page-header),
.food-header,
.product-header,
.item-header {
  text-align: center;
  margin-bottom: 10px !important; /* Espacement réduit */
}

/* Style spécifique pour les événements - disposition verticale */
.event-item {
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.event-item .event-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 15px;
}

.event-item .event-header h3 {
  color: var(--accent-gold) !important;
  margin: 0;
}

.event-item .event-details {
  width: 100%;
  text-align: left !important;
}

.event-item .event-details p {
  margin: 0;
  color: var(--text-light) !important;
  opacity: 0.9 !important;
  line-height: 1.6 !important;
}

/* Détails des items centrés */
.cocktail-details,
.beer-details,
.wine-details,
.tapas-details,
.event-details,
.alcool-details,
.alcohol-details,
.sans-alcool-details,
.drink-details,
.food-details,
.product-details,
.item-details {
  text-align: left !important;
  color: var(--text-light) !important;
  opacity: 0.9 !important;
  line-height: 1.6 !important;
}


/* ========================================
   GESTION DES ONGLETS (TOUTES PAGES)
   ======================================== */

/* Masquer les onglets non-actifs */
.tab-panel:not(.active) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.tab-panel.active {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

/* Forcer l'affichage des onglets actifs même avec section-fade-in */
.tab-panel.active.section-fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}

/* ========================================
   STYLES POUR LA PAGE TAPAS
   ======================================== */

/* Correction de la superposition dans l'onglet végétarien */

/* Modal plein écran pour l'image de spécialité */
.image-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-modal-overlay.active {
  opacity: 1;
}

.image-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2001;
  opacity: 0;
  transition: all 0.3s ease;
}

.image-modal.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.image-modal-close {
  position: absolute;
  top: 20px;
  right: 30px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: white;
  font-size: 40px;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 50%;
  z-index: 2002;
  transition: all 0.3s ease;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-modal-close:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.image-modal-img {
  max-width: 95%;
  max-height: 95%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
  transform: rotate(-90deg);
}

.image-modal-img:hover {
  transform: rotate(-90deg) scale(1.02);
}

/* Responsive pour le modal d'image */
@media (max-width: 768px) {
  .image-modal-close {
    top: 15px;
    right: 20px;
    font-size: 30px;
    width: 50px;
    height: 50px;
  }
  
  .image-modal-img {
    max-width: 98%;
    max-height: 98%;
  }
}

@media (max-width: 480px) {
  .image-modal-close {
    top: 10px;
    right: 15px;
    font-size: 25px;
    width: 45px;
    height: 45px;
  }
  
  .image-modal-img {
    max-width: 99%;
    max-height: 99%;
  }
}

/* Popup de spécialité */
.speciality-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.speciality-popup-overlay.active {
  opacity: 1;
}

.speciality-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  background: var(--background-light);
  border-radius: var(--border-radius);
  box-shadow: 0 20px 60px var(--shadow-dark);
  max-width: 90vw;
  max-height: 90vh;
  width: 600px;
  height: 80vh;
  z-index: 1001;
  opacity: 0;
  transition: all 0.3s ease;
  overflow: hidden;
}

.speciality-popup.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.speciality-popup-header {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: white;
  padding: 20px;
  text-align: center;
  position: relative;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.speciality-popup-title {
  margin: 0;
  font-size: var(--font-size-grand-titre);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-grand-titre);
}

.speciality-popup-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.speciality-popup-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.speciality-popup-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  max-height: 100%;
  overflow-y: auto;
  color: var(--text-light);
  position: relative;
}

.speciality-popup-img {
  max-width: 95%;
  max-height: 65vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--border-radius);
  box-shadow: 0 8px 20px var(--shadow-medium);
  transform: scale(1.1);
  margin: 25px auto;
  padding: 0;
  display: block;
  z-index: 1;
  transition: transform 0.3s ease;
}

.speciality-popup-description {
  text-align: center;
  color: var(--text-light);
  line-height: 1.6;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-secondary);
  position: relative;
  background: rgba(26, 54, 93, 0.95);
  padding: 20px;
  margin: 20px 0 0 0;
  border-radius: var(--border-radius);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.ingredients-section {
  margin-bottom: 25px;
  text-align: center;
}

.ingredients-section h4 {
  color: var(--accent-gold);
  font-family: var(--font-sous-titre);
  font-size: var(--font-size-sous-titre);
  font-weight: var(--font-weight-demi);
  font-style: italic;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  font-family: var(--font-primary);
}

.ingredients-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 25px 0;
  text-align: center;
}

.ingredients-section li {
  padding: 12px 20px;
  font-family: var(--font-sous-titre);
  font-size: var(--font-size-sous-titre);
  font-style: italic;
  color: var(--text-light);
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(212, 175, 55, 0.1));
  border-radius: var(--border-radius);
  border: 1px solid var(--accent-gold);
  display: inline-block;
  min-width: 200px;
  font-family: var(--font-secondary);
}

.ingredients-section li:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(212, 175, 55, 0.2));
  border-color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-medium);
  transition: var(--transition);
}

.speciality-popup-price {
  text-align: center;
  font-size: var(--font-size-grand-titre);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-grand-titre);
  color: var(--text-dark);
  margin-top: 20px;
  padding: 25px 40px;
  background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
  border-radius: var(--border-radius);
  border: 3px solid var(--primary-blue);
  box-shadow: 0 6px 20px var(--shadow-medium);
  min-width: 150px;
  font-family: var(--font-primary);
}

/* Style pour l'image cliquable */
.speciality-img {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  transform: rotate(180deg);
}

.speciality-img:hover {
  transform: rotate(180deg);
}

/* ========================================
   MODAL IMAGE AVEC DESCRIPTION ET PRIX
   ======================================== */
.image-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-modal-overlay.active {
  opacity: 1;
}

.image-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1a1a2e;
  border-radius: 15px;
  max-width: 95%;
  max-height: 95%;
  width: 1000px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
  border: 2px solid #d4af37;
}

.image-modal.active {
  opacity: 1;
}

.image-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 2px solid #d4af37;
  background: #16213e;
  border-radius: 13px 13px 0 0;
}

.image-modal-title {
  margin: 0;
  color: #d4af37;
  font-size: 1.8rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.image-modal-close {
  background: none;
  border: 2px solid #d4af37;
  font-size: 2rem;
  cursor: pointer;
  color: #d4af37;
  padding: 0;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.image-modal-close:hover {
  background: #d4af37;
  color: #1a1a2e;
  transform: scale(1.1);
}

.image-modal-content {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow-y: auto;
  background: #1a1a2e;
}

.image-modal-img {
  width: 100%;
  height: auto;
  max-height: 700px;
  object-fit: contain;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  display: block !important;
}

.image-modal-info {
  padding: 25px;
  background: #16213e;
  border-radius: 0 0 13px 13px;
}

.image-modal-description h3 {
  margin: 0 0 20px 0;
  color: #d4af37;
  font-size: 1.4rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.image-modal-description p {
  margin: 0 0 15px 0;
  color: #e0e0e0;
  line-height: 1.7;
  font-size: 1.1rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.image-modal-description p:last-child {
  margin-bottom: 25px;
}

.image-modal-price {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #1a1a2e;
  border-radius: 10px;
  border: 2px solid #d4af37;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.price-label {
  font-weight: 600;
  color: #e0e0e0;
  font-size: 1.2rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.price-value {
  font-weight: 700;
  color: #d4af37;
  font-size: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Barre de défilement personnalisée pour le modal */
.image-modal-content::-webkit-scrollbar {
  width: 8px;
}

.image-modal-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.image-modal-content::-webkit-scrollbar-thumb {
  background: #d4af37;
  border-radius: 4px;
}

.image-modal-content::-webkit-scrollbar-thumb:hover {
  background: #b8941f;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  .image-modal {
    width: 98%;
    max-height: 98%;
  }
  
  .image-modal-header {
    padding: 15px;
  }
  
  .image-modal-title {
    font-size: 1.4rem;
  }
  
  .image-modal-info {
    padding: 20px;
  }
  
  .image-modal-description h3 {
    font-size: 1.2rem;
  }
  
  .image-modal-description p {
    font-size: 1rem;
  }
  
  .image-modal-img {
    max-height: 100%;
  }
}

/* ========================================
   SOUS-NAVIGATION INTERNE POUR ALCOOLS
   ======================================== */
.submenu-internal-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin: 0;
  padding: 5px 0 0 0;
  position: relative;
  transition: all 0.3s ease;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Quand la section logo est compressée, les onglets remontent et se collent à la nav */
body.logo-compressed .submenu-internal-tabs {
  padding: 5px 0 0 0 !important;
}

.internal-tab-button {
  padding: 15px 20px;
  background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
  border: 2px solid var(--primary-blue);
  color: var(--text-dark);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-demi);
  font-size: var(--font-size-nav);
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px var(--shadow-light);
  width: 100%;
  text-align: center;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.internal-tab-button:hover {
  background: linear-gradient(135deg, #e6c200, #f39c12);
  color: var(--text-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-medium);
  border-color: var(--accent-gold);
}

.internal-tab-button.active {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: white;
  border-color: var(--accent-gold);
  box-shadow: 0 6px 20px var(--shadow-medium);
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  .submenu-main-buttons {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  
  .submenu-tabs > .submenu-main-buttons > .tab-button {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
  }
  
  .submenu-internal-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 15px;
    margin: 0 auto;
    max-width: 100%;
  }
  
  .internal-tab-button {
    width: 100%;
    min-width: auto;
    padding: 12px 15px;
    font-size: 0.9rem;
  }
  
  .internal-tab-button {
    padding: 12px 20px;
    font-size: 0.9rem;
    min-width: 140px;
  }
}

@media (max-width: 480px) {
  .submenu-internal-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px;
    max-width: 100%;
  }
  
  .internal-tab-button {
    padding: 10px 12px;
    font-size: 0.8rem;
    width: 100%;
    min-width: auto;
  }
}

/* ========================================
   STYLES POUR LES IFRAMES GOOGLE MAPS
   ======================================== */

.map-container iframe {
  border: 0;
  width: 100%;
  height: 400px;
}

/* ========================================
   STYLES RESPONSIVE POUR LES POPUPS
   ======================================== */

@media (max-width: 768px) {
  .speciality-popup {
    max-width: 98vw;
    max-height: 95vh;
    min-width: 95vw;
    min-height: 85vh;
  }
  
  .speciality-popup-header {
    padding: 15px 20px;
  }
  
  .speciality-popup-content {
    padding: 15px;
    flex-direction: column;
    text-align: center;
  }
  
  .speciality-popup-title {
    font-size: 18px;
  }
  
  .speciality-popup-img {
    max-width: 110vw;
    max-height: 100vh;
    width: 110vw;
    height: 100vh;
    margin-bottom: 15px;
    margin-left: -5vw;
  }
}

@media (max-width: 480px) {
  .speciality-popup {
    max-width: 99vw;
    max-height: 98vh;
    min-width: 98vw;
    min-height: 90vh;
  }
  
  .speciality-popup-title {
    font-size: 16px;
  }
  
  .speciality-popup-img {
    max-width: 105vw;
    max-height: 95vh;
    width: 105vw;
    height: 95vh;
    margin-left: -2.5vw;
  }
  
  .speciality-popup-description p {
    font-size: 14px;
  }
}

/* ========================================
   STYLES POUR LES ONGLETS TAPAS
   ======================================== */

.submenu-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin: 0;
  flex-wrap: wrap;
  padding: 10px 20px 5px 20px;
  position: sticky;
  top: 150px;
  z-index: 100;
  transition: all 0.3s ease;
}

/* Style spécifique pour la page alcool avec structure en colonne */
.submenu-tabs:has(.submenu-main-buttons) {
  flex-direction: column;
  gap: 0;
}

.submenu-main-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.submenu-tabs > .submenu-main-buttons > .tab-button {
  display: inline-flex;
  padding: 15px 30px;
  background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
  border: 2px solid var(--primary-blue);
  color: var(--text-dark);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-demi);
  font-size: var(--font-size-nav);
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px var(--shadow-light);
  min-width: 180px;
  text-align: center;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.submenu-tabs > .submenu-main-buttons > .tab-button:hover {
  background: linear-gradient(135deg, #e6c200, #f39c12);
  color: var(--text-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-medium);
  border-color: var(--accent-gold);
}

.submenu-tabs > .submenu-main-buttons > .tab-button.active {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: white;
  border-color: var(--accent-gold);
  box-shadow: 0 6px 20px var(--shadow-medium);
}

/* Quand la section logo est compressée, les onglets remontent et se collent à la nav */
body.logo-compressed .submenu-tabs {
  top: 60px !important;
  margin-top: 0 !important;
  padding: 5px 20px 5px 20px !important;
}

.tab-button {
  padding: 15px 30px;
  background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
  border: 2px solid var(--primary-blue);
  color: var(--text-dark);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-demi);
  font-size: var(--font-size-nav);
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px var(--shadow-light);
  min-width: 180px;
  text-align: center;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.tab-button:hover {
  background: linear-gradient(135deg, #e6c200, #f39c12);
  color: var(--text-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-medium);
  border-color: var(--accent-gold);
}

.tab-button.active {
  background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
  color: white;
  border-color: var(--accent-gold);
  box-shadow: 0 6px 20px var(--shadow-medium);
}

.tab-content {
  width: 100%;
}

/* Règles pour les onglets déplacées dans les fichiers CSS spécifiques aux pages */

/* ========================================
   STYLES SPÉCIFIQUES POUR LA PAGE SANS ALCOOL
   ======================================== */

/* Alignement parfait des 4 boutons sans alcool */
.sans-alcool .submenu-tabs {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 20px 40px 20px;
  padding: 20px;
  width: calc(100% - 40px);
  position: sticky;
  top: 150px;
  z-index: 100;
  transition: all 0.3s ease;
}

/* Quand la section logo est compressée, les onglets remontent et se collent à la nav */
body.logo-compressed .sans-alcool .submenu-tabs {
  top: 60px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.sans-alcool .tab-button {
  flex: 1;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sous-titre);
  line-height: 1.2;
  min-width: 0;
}

/* Styles spécifiques pour la page vins - boutons sur une ligne */
.vins .submenu-tabs {
  flex-wrap: nowrap;
  gap: 10px;
  padding: 15px 20px;
}

.vins .tab-button {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--font-size-small);
  padding: 12px 15px;
}

/* Responsive pour les petits écrans */
@media (max-width: 768px) {
  .sans-alcool .submenu-tabs {
    flex-direction: column;
    gap: 15px;
    padding: 0;
  }
  
  .sans-alcool .tab-button {
    height: 55px;
    font-size: var(--font-size-body);
    width: 100%;
  }
  
  .vins .submenu-tabs {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .vins .tab-button {
    flex: 1 1 calc(50% - 5px);
    min-width: 120px;
  }
}

/* ========================================
   STYLES POUR LES LISTES TAPAS
   ======================================== */

.tapas-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 20px;
}