/*
 * site-nav.css — CSS nav commun pharmalpha.fr
 * Inclure dans toutes les pages principales : index.html, stephen-robert.html
 * Ne pas modifier les classes nav dans les HTML — ce fichier fait autorité.
 *
 * Comportement :
 *   - État "top"     : fond transparent, logo blanc (filter invert), textes blancs
 *   - État "scrolled" : classe .solid ajoutée par JS → fond blanc, logo couleur, textes noirs
 *
 * Hauteurs :
 *   - Top desktop    : padding 10px 0 → logo clamp(60,6vw,110) → hauteur ~80-130px
 *   - Scrolled       : padding 6px 0  → logo clamp(40,3vw,52)  → hauteur ~52-64px
 *   - Mobile (<968px): padding 10px 0 → logo 80px (croppé, centré abs) → nav 100px min
 */

/* ===== NAV WRAPPER ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  padding: 10px 0;
  background: #0a0a0a;
  transition: background 0.35s, padding 0.35s, box-shadow 0.35s;
}
.nav.solid {
  background: #ffffff;
  padding: 6px 0;
  box-shadow: 0 1px 24px rgba(0,0,0,0.07);
}

/* ===== NAV INNER ===== */
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap;
  max-width: 1480px; margin: 0 auto; padding: 0 28px;
  gap: 18px;
}

/* ===== LOGO ===== */
.nav-logo { flex-shrink: 0; }
.nav-logo img {
  height: clamp(51px, 5.1vw, 93px) !important; width: auto !important;
  filter: invert(1);
  transition: filter 0.35s, height 0.3s;
}
.nav.solid .nav-logo img {
  height: clamp(40px, 3vw, 52px) !important;
  filter: none;
}
.nav-links { flex-wrap: nowrap; }
.nav-links a { white-space: nowrap; }
.nav-right { flex-shrink: 0; }

/* ===== LINKS ===== */
.nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none; padding: 0; margin: 0;
}
.nav-links a {
  padding: 8px 9px; font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.8); border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.nav-links a:hover { color: #ffffff; background: rgba(255,255,255,0.07); }
.nav-links a.active { color: #ff914d; font-weight: 700; }

.nav.solid .nav-links a { color: #0a0a0a; }
.nav.solid .nav-links a:hover { color: #ff914d; background: transparent; }
.nav.solid .nav-links a.active { color: #ff914d; }

/* ===== RIGHT ACTIONS ===== */
.nav-right { display: flex; align-items: center; gap: 12px; }

/* Boutons dans la nav (partagés avec pages) */
.nav .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 8px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  transition: all 0.3s ease; cursor: pointer;
  white-space: nowrap; text-decoration: none;
}
.nav .btn-orange { background: #ff914d; color: #ffffff; }
.nav .btn-orange:hover { background: #f08236; transform: translateY(-1px); }
.nav .btn-ghost-white {
  background: transparent; color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.3);
}
.nav .btn-ghost-white:hover {
  border-color: #ffffff; background: rgba(255,255,255,0.06);
}
.nav.solid .btn-ghost-white {
  color: #0a0a0a; border-color: #0a0a0a;
}
.nav.solid .btn-ghost-white:hover {
  background: #0a0a0a; color: #ffffff;
}

/* ===== HAMBURGER ===== */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: 4px; cursor: pointer;
  background: none; border: none;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: #ffffff; border-radius: 2px;
  transition: all 0.3s ease;
}
.nav.solid .hamburger span { background: #0a0a0a; }

/* ===== MOBILE MENU (overlay) ===== */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 950;
  background: #0a0a0a; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 22px; font-weight: 600; color: #ffffff;
  text-decoration: none; transition: color 0.2s;
}
.mobile-menu a:hover { color: #ff914d; }
.mm-close {
  position: absolute; top: 20px; right: 24px;
  font-size: 36px; color: #ffffff; cursor: pointer; line-height: 1;
  background: none; border: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 968px) {
  .nav { padding: 10px 0; }
  .nav-inner {
    position: relative;
    min-height: 80px;
    justify-content: space-between;
  }
  .nav-logo {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .nav-logo img { height: 80px; width: auto; }
  .nav-links { display: none; }
  .nav-right { display: contents; }
  .nav-right .btn-ghost-white { display: none; }
  .nav-right .btn-orange {
    order: -1;
    padding: 11px 13px; gap: 0;
  }
  .nav-right .btn-orange .btn-text { display: none; }
  .hamburger { order: 1; display: flex; }
}