body {
  margin: 0;
  font-family: 'Tenor Sans', sans-serif;
  background: linear-gradient(180deg, #FAF1E6, #FFFFFF);
  color: #333;
  overflow-x: hidden;
}

/* NAV */
.navbar {
  position: fixed;
  top:0; left:0; width:100%;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2rem;
  background: rgba(199,192,174,0.85);
  backdrop-filter: blur(10px);
  z-index: 999;
}
.nav-links { list-style:none; display:flex; gap:2rem; }
.nav-links a {
  text-decoration:none; font-weight:bold; color:#58624B;
  transition:0.3s;
}
.nav-links a:hover { color:#fff; }

/* HERO */
.hero {
  height:100vh; display:flex; justify-content:center; align-items:center;
  text-align:center; color:white; background:url("../img/massage-hero.png") center/cover no-repeat;
  position:relative;
}
.hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(135deg,rgba(88,98,75,0.6),rgba(154,154,146,0.6)); }
.hero-content { position:relative; z-index:2; }
.hero h1 { font-size:3.5rem; }
.hero p { font-size:1.4rem; margin-bottom:1.5rem; }
.btn {
  padding:1rem 2rem; border-radius:40px;
  background:linear-gradient(90deg,#58624B,#9A9A92);
  color:white; text-decoration:none; transition:all 0.3s;
}
.btn:hover { transform:scale(1.05); }

/* ABOUT */
.about { display:flex; gap:2rem; padding:5rem 2rem; align-items:center; }
.about-image img { border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.15); }

/* SALON */
.salon { text-align:center; padding:5rem 2rem; background:#fdfcf9; }
.salon-video { width:100%; border-radius:12px; margin:2rem 0; }
.salon-gallery { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.salon-gallery img { border-radius:10px; transition:0.3s; }
.salon-gallery img:hover { transform:scale(1.05); }

/* SERVICES TABLE */
.services { padding:5rem 2rem; text-align:center; }
.pricing-table { margin:2rem auto; border-collapse:collapse; width:80%; max-width:800px; box-shadow:0 6px 15px rgba(0,0,0,0.1); border-radius:12px; overflow:hidden; }
.pricing-table th, .pricing-table td { padding:1rem; border-bottom:1px solid #eee; }
.pricing-table th { background:#58624B; color:white; }
.pricing-table tr:hover { background:#fafafa; }

/* EXPERIENCE */
.experience { padding:5rem 2rem; text-align:center; background:linear-gradient(180deg,#FAF1E6,#fff); }
.experience .exp-img { margin-top:2rem; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.1); }

/* RÉSERVATION */
.reservation { padding:5rem 2rem; text-align:center; background:#C7C0AE; }
#calendar { max-width:900px; margin:2rem auto; background:#fff; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.1); padding:1rem; }
#resaFormWrapper { background:#fff; padding:2rem; border-radius:12px; max-width:500px; margin:auto; }

/* FOOTER */
footer { background:linear-gradient(90deg,#58624B,#9A9A92); color:white; text-align:center; padding:2rem; }
footer a { color:#FAF1E6; text-decoration:none; }

/* RESPONSIVE */
@media(max-width:768px) {
  .about { flex-direction:column; }
  .nav-links { flex-direction:column; gap:1rem; }
  .hero h1 { font-size:2.2rem; }
}

#adminCalendar {
  max-width: 100%;
  margin: auto;
}

@media (max-width: 768px) {
  .fc .fc-toolbar {
    flex-direction: column;
    gap: 6px;
  }
  .fc .fc-toolbar-title {
    font-size: 1rem;
  }
  .fc .fc-button {
    font-size: 0.8rem;
    padding: 4px 6px;
  }
}
