/* =============================================
   MODERNA — navbar.css — Luxe Épuré
   ============================================= */

.topbar{background:var(--dark);color:rgba(255,255,255,.42);text-align:center;padding:8px 16px;font-size:11px;letter-spacing:3px;font-weight:300;text-transform:uppercase;}

nav{position:sticky;top:0;z-index:800;background:rgba(255,255,255,.97);border-bottom:1px solid var(--light);transition:box-shadow .4s;backdrop-filter:blur(12px);}
nav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.05);}

.nav-top{display:flex;align-items:center;justify-content:space-between;padding:0 5%;height:58px;}

/* Search */
.nav-search{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--light);padding-bottom:3px;width:180px;position:relative;transition:border-color .3s;}
.nav-search:focus-within{border-bottom-color:var(--dark);}
.nav-search svg{color:var(--mid);flex-shrink:0;}
.nav-search input{background:none;border:none;outline:none;font-family:var(--font-body);font-size:13px;color:var(--dark);width:100%;font-weight:300;}
.nav-search input::placeholder{color:var(--mid);}

/* Logo */
.nav-logo{text-align:center;text-decoration:none;}
.nav-logo-name{font-family:var(--font-title);font-size:26px;font-weight:400;letter-spacing:10px;color:var(--dark);display:block;line-height:1;text-transform:uppercase;}
.nav-logo-sub{font-size:10px;letter-spacing:4px;color:var(--mid);font-weight:300;text-transform:uppercase;display:block;margin-top:4px;}

/* Actions */
.nav-actions{display:flex;align-items:center;gap:20px;width:180px;justify-content:flex-end;}
.nav-btn{background:none;border:none;color:var(--dark);position:relative;transition:color .3s;display:flex;align-items:center;padding:4px;cursor:pointer;}
.nav-btn:hover{color:var(--mid);}
.nav-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;}
.nav-badge{position:absolute;top:-5px;right:-7px;background:var(--dark);color:white;border-radius:50%;width:18px;height:18px;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:400;}
.burger-btn{display:flex!important;}

/* Desktop menu */
.nav-menu{display:flex;justify-content:center;border-top:1px solid var(--light);}
.menu-item{position:relative;}
.menu-link{display:block;padding:12px 16px;font-size:11px;letter-spacing:2.5px;font-weight:400;text-transform:uppercase;color:var(--dark);position:relative;transition:color .3s;text-decoration:none;}
.menu-link::after{content:'';position:absolute;bottom:0;left:50%;right:50%;height:1px;background:var(--dark);transition:left .3s,right .3s;}
.menu-item:hover>.menu-link::after{left:18%;right:18%;}
.menu-link.new-tag{color:var(--gold);}

/* Dropdown */
.dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:var(--white);min-width:500px;box-shadow:0 12px 40px rgba(0,0,0,.08);border-top:1px solid var(--dark);padding:28px;display:grid;grid-template-columns:1fr 1fr 160px;gap:20px;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;z-index:900;}
.menu-item:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dropdown-col h4{font-size:13px;letter-spacing:1.5px;color:var(--mid);font-weight:400;text-transform:uppercase;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--light);}
.dropdown-col a{display:block;padding:5px 0;font-size:15px;color:var(--mid);transition:color .2s,padding-left .2s;text-decoration:none;font-weight:300;}
.dropdown-col a:hover{color:var(--dark);padding-left:5px;}
.dropdown-thumb{position:relative;overflow:hidden;min-height:160px;}
.dropdown-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.dropdown-thumb:hover img{transform:scale(1.04);}
.dropdown-thumb-label{position:absolute;bottom:8px;left:8px;background:var(--dark);color:white;font-size:8px;letter-spacing:2px;padding:3px 8px;text-transform:uppercase;}

/* ── MENU MOBILE — Panneau latéral élégant ── */
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9998;}
.mobile-overlay.open{display:block;}

.nav-mobile{
  display:none;position:fixed;
  top:0;right:-320px;
  width:300px;height:100vh;
  background:var(--white);
  z-index:9999;
  box-shadow:-4px 0 40px rgba(0,0,0,.12);
  overflow-y:auto;
  transition:right 0.4s cubic-bezier(0.16,1,0.3,1);
  flex-direction:column;
}
.nav-mobile.open{display:flex;right:0;}

/* Header du panneau */
.mobile-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 28px;
  border-bottom:1px solid var(--light);
  flex-shrink:0;
}
.mobile-logo-wrap .mobile-logo{
  font-family:var(--font-title);
  font-size:20px;letter-spacing:6px;
  color:var(--dark);display:block;font-weight:300;
}
.mobile-logo-wrap .mobile-logo-sub{
  font-size:6.5px;letter-spacing:4px;
  color:var(--gold);display:block;
  margin-top:3px;font-weight:400;text-transform:uppercase;
}
.mobile-close{
  background:none;border:1px solid var(--light);
  color:var(--mid);width:34px;height:34px;
  font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.2s;
}
.mobile-close:hover{border-color:var(--dark);color:var(--dark);}

/* Sections du menu */
.mobile-section{padding:20px 28px;border-bottom:1px solid var(--light);}
.mobile-section-title{
  font-size:8px;letter-spacing:4px;
  font-weight:400;text-transform:uppercase;
  color:var(--mid);margin-bottom:14px;
}
.mobile-link{
  display:block;padding:11px 0;
  font-size:13px;color:var(--dark);
  text-decoration:none;
  border-bottom:1px solid rgba(232,232,228,.5);
  font-family:var(--font-body);font-weight:300;
  letter-spacing:.3px;
  transition:color .2s,padding-left .2s;
}
.mobile-link:last-child{border-bottom:none;}
.mobile-link:hover{color:var(--mid);padding-left:4px;}

/* Footer du panneau */
.mobile-footer-nav{padding:24px 28px;margin-top:auto;}
.mobile-wa-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px;background:var(--dark);color:white;
  font-size:9px;letter-spacing:3px;font-weight:400;
  text-transform:uppercase;text-decoration:none;
  transition:.3s;border:1px solid var(--dark);
}
.mobile-wa-btn:hover{background:transparent;color:var(--dark);}

/* =============================================
   MODERNA — Corrections Mobile
   ============================================= */
@media (max-width: 768px) {

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* PAS de overflow:hidden sur nav — ça bloque le menu mobile */
  nav {
    max-width: 100vw !important;
    width: 100% !important;
  }

  .nav-menu {
    display: none !important;
  }

  .dropdown {
    display: none !important;
  }

  .topbar {
    font-size: 9px !important;
    letter-spacing: 1px !important;
    padding: 7px 10px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .nav-top {
    padding: 0 3% !important;
    height: 52px !important;
  }

  .nav-search {
    display: none !important;
  }

  .nav-logo-name {
    font-size: 19px !important;
    letter-spacing: 5px !important;
  }

  .nav-logo-sub {
    font-size: 7px !important;
    letter-spacing: 2px !important;
  }

  .nav-actions {
    width: auto !important;
    gap: 10px !important;
  }

  .burger-btn {
    display: flex !important;
    position: relative !important;
    z-index: 1000 !important;
    pointer-events: all !important;
  }
}