/* ===== DISONS DINETTE — Barre de navigation & menu mobile (pages secondaires) ===== */
/* Reprend la charte de index.html. Contrairement à la nav de la page d'accueil (fixe et
   transparente pour se superposer au hero), cette version est "sticky" avec un fond plein,
   car les pages secondaires n'ont pas de hero plein écran sous le menu. */

nav#navbar {
  position: sticky; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 60px;
  background: rgba(250,249,246,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 24px rgba(0,0,0,.08);
}

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-icon { height: 56px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 18px; list-style: none; }
.nav-links a {
  text-decoration: none; color: var(--noir);
  font-size: .8rem; font-weight: 400; letter-spacing: .02em;
  white-space: nowrap;
  position: relative; padding-bottom: 3px;
  transition: color .2s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1.5px; background: var(--rose);
  transition: width .3s;
}
.nav-links a:hover { color: var(--vert-fonce); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--vert-fonce); font-weight: 500; }
.nav-links a.active::after { width: 100%; }

.btn-nav {
  background: var(--vert-fonce); color: #fff;
  padding: 11px 22px; border-radius: 6px;
  text-decoration: none; font-size: .85rem; font-weight: 500;
  letter-spacing: .03em; transition: background .2s, transform .15s;
  white-space: nowrap;
}
.btn-nav:hover { background: var(--vert-moyen); transform: translateY(-1px); }

.btn-primary {
  background: var(--rose); color: #fff;
  padding: 13px 26px; border-radius: 30px;
  text-decoration: none; font-size: .9rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s, transform .15s;
}
.btn-primary:hover { background: var(--vert-fonce); transform: translateY(-2px); }

/* hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: var(--vert-fonce); border-radius: 2px; transition: .3s; }

/* ===== MENU MOBILE ===== */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--creme); padding: 30px 40px;
  flex-direction: column;
}
.mobile-menu.open { display: flex; }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.mobile-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--vert-fonce); }
.mobile-links { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.mobile-links a { font-size: 1.4rem; font-family: 'Cormorant Garamond', serif; font-weight: 500; color: var(--vert-fonce); text-decoration: none; }

@media (max-width: 1180px) {
  nav#navbar { padding: 16px 30px; }
  .nav-links { display: none; }
  .btn-nav { display: none; }
  .hamburger { display: flex; }
}