/* ══════════════════════════════════════════════════════════
   France Minéraux V6 — Header Styles
   Extracted from Design System V6
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   TOPBAR PROMOTIONAL
   ══════════════════════════════════════════════════ */

.topbar-promo {
  background: var(--aubergine);
  padding: 9px 0;
  text-align: center;
  border-bottom: 1px solid rgba(196, 162, 101, 0.15);
}

.topbar-promo-text {
  font-size: 0.68rem;
  letter-spacing: 1.8px;
  color: var(--gold-light);
  font-weight: 400;
}

.topbar-promo-text strong {
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 2px;
}

.topbar-promo-text .promo-highlight {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.92rem;
  font-weight: 600;
  font-style: italic;
  color: var(--gold);
}

.topbar-promo-note {
  font-size: 0.52rem;
  opacity: 0.5;
  margin-left: 8px;
}

.topbar-promo-sep {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: rgba(196, 162, 101, 0.3);
  margin: 0 14px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════
   TOPBAR SCROLLING
   ══════════════════════════════════════════════════ */

.topbar {
  background: var(--aubergine);
  padding: 8px 0;
  overflow: hidden;
  position: relative;
}

/* Desktop topbar — flex row with scroll animation */
.topbar-desktop {
  display: flex;
  justify-content: center;
  gap: 48px;
  animation: topbar-scroll 20s linear infinite;
}

/* Mobile topbar — hidden on desktop */
.topbar-mobile {
  display: none;
}

@keyframes topbar-scroll {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px);
  }
}

.topbar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-light);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}

.topbar-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
}

/* ── Mobile topbar: 2 rows, each row = item · item ── */
.tb-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tb-cell {
  color: var(--gold-light, #E8D9BE);
  font-family: 'Raleway', sans-serif;
  font-size: 0.44rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}
.tb-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold, #C4A265);
  opacity: 0.4;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   MAIN HEADER
   ══════════════════════════════════════════════════ */

/* ═══ NUCLEAR HEADER FIX ═══
   MyDecor uses body classes header-v3, header-fullwidth to apply dark header.
   reset.css & responsive.css cannot be dequeued (parent uses wp_print_styles).
   Solution: beat them on specificity with body class selectors + !important.
   When two rules both have !important, the one with higher specificity wins. */

/* Level 1: basic selectors */
.header,
#header,
header.header,
header#header,
header.header#header,
body .header,
body #header,
/* Level 2: MyDecor body-class selectors (same specificity as parent theme) */
.header-v3 .header,
.header-v3 #header,
.header-v3 header.header,
.header-fullwidth .header,
.header-fullwidth #header,
.header-fullwidth header.header,
body.header-v3 .header,
body.header-v3 #header,
body.header-v3 header#header,
body.header-fullwidth .header,
body.header-fullwidth #header,
body.header-fullwidth header#header,
/* Level 3: combined body classes */
body.header-v3.header-fullwidth .header,
body.header-v3.header-fullwidth #header,
body.header-v3.header-fullwidth header#header,
/* Level 4: with theme-mydecor */
body.theme-mydecor .header,
body.theme-mydecor #header,
body.theme-mydecor header#header,
body.theme-mydecor.header-v3 .header,
body.theme-mydecor.header-v3 #header,
body.theme-mydecor.header-v3.header-fullwidth .header,
body.theme-mydecor.header-v3.header-fullwidth #header,
body.theme-mydecor.header-v3.header-fullwidth header#header {
  background: #FAF7F2 !important;
  background-color: #FAF7F2 !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.header.scrolled,
#header.scrolled,
header#header.scrolled,
body.header-v3 .header.scrolled,
body.header-fullwidth .header.scrolled,
body.theme-mydecor .header.scrolled {
  background: rgba(250, 247, 242, 0.96) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 var(--cream);
}

/* Kill any pseudo-element overlays from parent theme */
.header::before, .header::after,
#header::before, #header::after,
header.header::before, header.header::after,
body.header-v3 .header::before, body.header-v3 .header::after,
body.header-fullwidth .header::before, body.header-fullwidth .header::after,
body.theme-mydecor .header::before, body.theme-mydecor .header::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

/* Header text/icon colors: let the normal V6 styles handle them.
   Do NOT use wildcard * overrides — they break the logo gradients and icon colors. */

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  height: 72px;
}

/* ══════════════════════════════════════════════════
   LOGO
   ══════════════════════════════════════════════════ */

.logo {
  display: flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-word {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--aubergine);
  line-height: 1;
}

.logo-crystal {
  width: 30px;
  height: 42px;
  margin: 0 6px;
  flex-shrink: 0;
}

.logo-sub {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 0.5rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════ */

.nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav > ul {
  display: flex;
  list-style: none;
  gap: 0;
}

.nav > ul > li {
  position: relative;
}

.nav > ul > li > a {
  display: flex;
  align-items: center;
  height: 72px;
  padding: 0 15px;
  font-size: 0.62rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--aubergine);
  transition: color 0.3s ease;
}

.nav > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav > ul > li:hover > a {
  color: var(--gold);
}

.nav > ul > li:hover > a::after {
  transform: scaleX(1);
}

/* ══════════════════════════════════════════════════
   HEADER ACTIONS (Icons, Cart, etc.)
   ══════════════════════════════════════════════════ */

.h-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.h-act {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--aubergine);
  border-radius: 50%;
  transition: all 0.3s ease;
  position: relative;
}

.h-act:hover {
  background: var(--aubergine-05);
  color: var(--gold);
}

.h-act svg {
  width: 18px;
  height: 18px;
}

.h-act .dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--cream-warm);
}

/* Cart count badge */
.h-act .cart-count {
  position: absolute;
  top: 2px;
  right: 0px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--aubergine, #3C2A3C);
  color: var(--gold-light, #E8D9BE);
  font-family: 'Raleway', sans-serif;
  font-size: .55rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
  box-sizing: border-box;
  border: 1.5px solid var(--cream-warm, #FAF7F2);
  z-index: 1;
}

/* ══════════════════════════════════════════════════
   MEGA MENU
   ══════════════════════════════════════════════════ */

.megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--white);
  min-width: 1000px;
  padding: 40px 44px 36px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 20px 60px rgba(60, 42, 60, 0.1);
  border-top: 2px solid var(--gold);
}

.nav > ul > li:hover > .megamenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.mega-section h5 {
  font-family: 'Raleway', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  padding-bottom: 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--cream);
}

.mega-section a {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 3.5px 0;
  transition: all 0.25s ease;
}

.mega-section a:hover {
  color: var(--aubergine);
  transform: translateX(4px);
}

.mega-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--cream);
}

/* ══════════════════════════════════════════════════
   MEGA MENU — MAP SECTION
   ══════════════════════════════════════════════════ */

.megamenu-map,
.mega-map {
  min-width: 700px;
}

.megamenu-map .mega-section {
  /* Dans le layout map, les sections sont des liens simples */
}

.megamenu-map .mega-section h5 {
  display: none; /* Pas de header de section dans le layout map */
}

.megamenu-map .mega-section a {
  display: block;
  padding: 4px 0;
}

.mega-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.mega-map-visual img {
  width: 100%;
  border-radius: 8px;
  margin-top: 16px;
}

.mega-map-visual h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  color: var(--aubergine);
}

.mega-map-visual p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.mega-map-cities ul {
  list-style: none;
}

.mega-map-cities li {
  padding: 4px 0;
}

.mega-map-cities a {
  font-size: 0.82rem;
  color: var(--text-muted);
  transition: all 0.25s ease;
}

.mega-map-cities a:hover {
  color: var(--gold);
  transform: translateX(4px);
}

.mega-map-cta {
  margin-top: 16px;
}

.btn-gold {
  display: inline-block;
  padding: 10px 24px;
  background: var(--gold);
  color: var(--white);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 4px;
  transition: background 0.3s;
}

.btn-gold:hover {
  background: var(--gold-bright);
}

/* ══════════════════════════════════════════════════
   MOBILE MENU TOGGLE
   ══════════════════════════════════════════════════ */

.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 8px;
  order: -1;
  margin-right: 8px;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--aubergine);
  transition: all 0.3s var(--ease);
  transform-origin: center;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(4.5px, 4.5px);
  background: var(--aubergine, #3C2A3C) !important;
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(4.5px, -4.5px);
  background: var(--aubergine, #3C2A3C) !important;
}
/* Force aubergine color — override MyDecor red */
.mobile-menu-toggle[aria-expanded="true"] .hamburger span {
  background: var(--aubergine, #3C2A3C) !important;
}
.mobile-menu-toggle[aria-expanded="true"] {
  z-index: 1002;
  position: relative;
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(45, 27, 45, 0.5);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s var(--ease);
}

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

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background: var(--cream-warm);
  z-index: 1001;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 24px 40px;
  transform: translateX(-100%);
  transition: transform 0.4s var(--ease-out);
}

.mobile-nav.active {
  transform: translateX(0);
}

/* ── Mobile Nav: Logo ── */
.mn-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--cream, #EDE7DD);
}
.mn-logo a {
  display: flex !important;
  align-items: center !important;
  border-bottom: none !important;
  padding: 0 !important;
  width: auto !important;
}
.mn-logo a img,
.mn-logo a svg {
  max-width: 160px;
  height: auto;
}
/* Kill any WP custom logo wrapper styles */
.mn-logo .custom-logo-link {
  display: flex !important;
  border-bottom: none !important;
  padding: 0 !important;
}
.mn-logo .custom-logo {
  max-width: 160px;
  height: auto;
}

/* ── Mobile Nav: Separator between categories ── */
hr.mn-separator {
  border: none;
  border-top: 1px solid rgba(196,162,101,.15);
  margin: 0;
  padding: 0;
  height: 0;
}

/* ── Mobile Nav: 3-Level Hierarchy ── */

/* Level 1: Category wrapper */
.mn-cat {
  border-bottom: none;
}

/* Level 1: Category link — UPPERCASE + BOLD */
.mn-cat-link {
  display: block;
  padding: 13px 0 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--aubergine);
  text-decoration: none;
  border-bottom: none !important;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.mn-cat-link:hover { color: var(--gold); }

/* Level 2: Subcategory list — always visible */
.mn-sub-list {
  padding-left: 14px;
  padding-bottom: 4px;
}

/* Level 2: Subcategory item wrapper */
.mn-sub-item {
  /* nothing special */
}

/* Level 2: Subcategory header row (link + optional toggle) */
.mn-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Level 2: Subcategory link — normal weight (only main cats are bold) */
.mn-sub-link {
  display: block;
  padding: 8px 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--aubergine, #3C2A3C);
  text-decoration: none;
  transition: color .2s ease;
  border-bottom: none !important;
  flex: 1;
  text-transform: none;
}
.mn-sub-link:hover { color: var(--gold, #C4A265); }

/* Level 2: Toggle button on subcategories (for L3 expansion) */
.mn-sub-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--cream, #EDE7DD) !important;
  border: 1px solid rgba(196,162,101,.2) !important;
  color: #3C2A3C !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: all .25s ease;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Raleway', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  text-align: center !important;
  overflow: visible !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mn-sub-toggle:hover,
.mn-sub-toggle:active { background: var(--gold, #C4A265) !important; border-color: var(--gold, #C4A265) !important; color: #fff !important; }
.mn-sub-open .mn-sub-toggle { background: #3C2A3C !important; border-color: #3C2A3C !important; color: #E8D9BE !important; }

/* Level 3: Sub-subcategories panel — collapsed by default */
.mn-subsub-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  padding-left: 16px;
}
.mn-sub-open .mn-subsub-panel {
  max-height: 800px;
}

/* Level 3: Sub-subcategory links — normal weight (tel quel) */
.mn-subsub-link {
  display: block;
  padding: 6px 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--aubergine, #3C2A3C);
  text-decoration: none;
  transition: color .2s ease;
  border-bottom: none !important;
  text-transform: none;
}
.mn-subsub-link:hover { color: var(--gold, #C4A265); }
.mn-subsub-panel > .mn-subsub-link:last-child {
  padding-bottom: 8px;
}

/* ── Kill ALL legacy generic a styles inside mobile-nav ── */
.mobile-nav a {
  text-decoration: none;
  border-bottom: none !important;
}
.mobile-nav .mn-cat a,
.mobile-nav .mn-sub-list a,
.mobile-nav .mn-subsub-panel a,
.mobile-nav .mn-logo a {
  border-bottom: none !important;
  padding: 0;
  font-size: inherit;
}

/* ══════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════ */

.breadcrumb {
  padding: 14px 0;
  background: var(--cream-warm);
  border-bottom: 1px solid var(--cream);
}

.breadcrumb a {
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb a:hover {
  color: var(--gold);
}

.breadcrumb span {
  color: var(--text-muted);
  margin: 0 8px;
  font-size: 0.72rem;
}

.breadcrumb strong {
  color: var(--aubergine);
  font-size: 0.72rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .mega-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .megamenu {
    min-width: 720px;
    padding: 32px 32px 28px;
  }
}

@media (max-width: 768px) {
  /* Topbar promo — compact */
  .topbar-promo { padding: 6px 0; }
  .topbar-promo-text { font-size: .6rem; letter-spacing: 1px; }
  .topbar-promo-text .promo-highlight { font-size: .78rem; }
  .topbar-promo-sep { display: inline-block; margin: 0 8px; height: 9px; }
  .topbar-promo-note { display: none; }

  /* Topbar — switch desktop/mobile versions */
  .topbar { padding: 6px 12px; overflow: visible !important; }
  .topbar-desktop { display: none !important; }
  .topbar-mobile {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    padding: 2px 0;
  }

  /* Header */
  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-row {
    height: 64px;
  }

  .nav > ul > li > a {
    height: 64px;
    padding: 0 12px;
    font-size: 0.55rem;
  }

  .nav {
    display: none;
  }

  .megamenu {
    display: none;
  }

  .logo-word {
    font-size: 0.95rem;
    letter-spacing: 2.5px;
  }

  .logo-crystal {
    width: 24px;
    height: 36px;
  }

  .h-actions {
    gap: 4px;
  }

  .h-act {
    width: 36px;
    height: 36px;
  }

  /* Breadcrumb — compact */
  .fm-breadcrumb { font-size: .72rem; padding: 12px 0; }
}

@media (max-width: 480px) {
  .header-row {
    height: 56px;
  }

  .logo-word {
    font-size: 0.85rem;
    letter-spacing: 2px;
  }

  .logo-crystal {
    width: 20px;
    height: 30px;
    margin: 0 4px;
  }

  .h-act svg {
    width: 16px;
    height: 16px;
  }

  .h-act .dot {
    width: 6px;
    height: 6px;
    top: 4px;
    right: 4px;
  }
  .h-act .cart-count {
    top: 0px;
    right: -2px;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    font-size: .48rem;
    line-height: 14px;
    padding: 0 3px;
  }

  /* Topbar promo — compact on very small */
  .topbar-promo-text { font-size: .55rem; letter-spacing: .5px; }
  .topbar-promo-sep { display: inline-block; height: 8px; margin: 0 8px; }
  .topbar-promo-text .promo-highlight { font-size: .7rem; }

  /* Topbar reassurance — tighter on small screens but keep row spacing */
  .topbar { padding: 5px 8px; }
  .topbar-mobile { gap: 5px; }
  .tb-cell { font-size: .38rem; letter-spacing: .6px; }
  .tb-row { gap: 5px; }
  .tb-dot { width: 2px; height: 2px; }
}