/*
 * TMA — Nav fixe (réplique de la nav du site static)
 * Barre sombre, logo + wordmark à gauche, liens centrés desktop,
 * Contact / hamburger à droite, mobile overlay plein écran.
 */

.tma-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding: 0 24px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #17140f; /* 100% opaque — pas de variation perçue au scroll */
  border-bottom: 1px solid transparent;
  transition: height var(--t-mid) ease,
              border-color var(--t-mid) ease;
}
.tma-nav.is-scrolled {
  height: var(--nav-height-small);
  border-bottom-color: var(--color-on-dark-line);
}

/* Logo + wordmark */
.tma-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tma-nav__logo {
  height: 44px;
  width: auto;
  opacity: 0.92;
  transition: height var(--t-mid);
}
.tma-nav.is-scrolled .tma-nav__logo { height: 38px; }
.tma-nav__wordmark {
  font-family: var(--font-cond);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-on-dark);
  line-height: 0.92;
}
.tma-nav__wordmark--accent { color: var(--color-copper); }

/* Liens desktop — position absolute centered pour ne pas shifter selon
   la largeur des éléments à droite (EN|FR / Contact / etc.) */
.tma-nav__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 32px;
  align-items: center;
}
.tma-nav__link {
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.tma-nav__link:hover,
.tma-nav__link.is-current { color: var(--color-on-dark); }

/* Cluster droit (cart + contact + hamburger) */
.tma-nav__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Cart icon + badge — desktop */
.tma-nav__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-on-dark-muted); /* même teinte que les liens nav */
  text-decoration: none;
  transition: color var(--t-fast);
}
.tma-nav__cart:hover { color: var(--color-on-dark); }
.tma-nav__cart svg {
  display: block;
}
.tma-nav__cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-copper);
  color: var(--color-on-dark);
  font-family: var(--font-cond);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 16px;
  text-align: center;
  display: none;
}
.tma-nav__cart-count.is-active { display: block; }

/* Contact à droite */
.tma-nav__contact {
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-copper);
  text-decoration: none;
  border-bottom: 1px solid var(--color-copper);
  padding-bottom: 1px;
}

/* Hamburger (mobile) */
.tma-ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: transparent;
  border: 0;
}
.tma-ham span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-on-dark);
  transition: all 0.25s;
}
.tma-ham.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.tma-ham.is-open span:nth-child(2) { opacity: 0; }
.tma-ham.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile overlay */
.tma-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile);
  background: var(--color-bg-warm);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 80px 40px 40px;
}
.tma-mobile-nav.is-open { display: flex; }
.tma-mobile-nav a {
  font-family: var(--font-cond);
  font-size: 28px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  width: 100%;
  text-align: center;
}
.tma-mobile-nav a:hover {
  color: var(--color-copper);
  border-bottom-color: var(--color-copper);
}

/* Cart link mobile — même style que les autres liens nav (stacked, full width),
   compteur en petit chiffre copper inline (caché si 0) */
.tma-mobile-nav__cart-link {
  position: relative;
}
.tma-mobile-nav__cart-count {
  margin-left: 10px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--color-copper);
  color: var(--color-on-dark);
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  display: none;
  vertical-align: middle;
}
.tma-mobile-nav__cart-count.is-active { display: inline-block; }

/* Socials row (Instagram + Email) — sous les liens nav */
.tma-mobile-nav__socials {
  display: flex;
  gap: 40px;
  margin-top: 8px;
}
.tma-mobile-nav__social {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  color: var(--color-text) !important;
  font-family: var(--font-cond);
  font-size: 11px !important;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: color var(--t-fast);
  text-decoration: none;
}
.tma-mobile-nav__social:hover {
  color: var(--color-copper) !important;
  border-bottom: none !important;
}

/* Responsive — bascule à 768px (comme le site static) */
@media (max-width: 768px) {
  .tma-ham { display: flex; }
  .tma-nav__links,
  .tma-nav__contact { display: none !important; }
}
@media (min-width: 769px) {
  .tma-mobile-nav { display: none !important; }
}

/* Spacer body pour ne pas passer sous la nav fixe (sauf static homepage qui est en plein écran) */
.tma-body--has-nav { padding-top: var(--nav-height); }
@media (max-width: 768px) {
  .tma-body--has-nav { padding-top: var(--nav-height-small); }
}