

:root{
  --dp-header-bg:#2f2f2f;
  --dp-header-fg:#ffffff;
  --dp-muted:rgba(255,255,255,.75);
  --dp-border:rgba(255,255,255,.12);
  --dp-radius:12px;
}

/* =====================================================
   HEADER GLOBAL
   ===================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:var(--dp-header-bg);
  color:var(--dp-header-fg);
}

.site-header a{
  color:inherit;
  text-decoration:none;
}
.site-header a:hover{
  opacity:.92;
}

.site-header .wrap{
  max-width:1280px;
  margin:0 auto;
  padding:0 18px;
}

/* =====================================================
   TOPBAR
   ===================================================== */
.site-header .topbar{
  border-bottom:1px solid var(--dp-border);
}

.site-header .topbar .wrap{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:14px;
}

.site-header .socials{
  display:flex;
  align-items:center;
  gap:10px;
}
.site-header .socials .icon{
  width:16px;
  height:16px;
  display:block;
}

.site-header .login-link{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--dp-muted);
}
.site-header .login-link .icon{
  width:16px;
  height:16px;
  display:block;
}

/* =====================================================
   LANG SWITCHER
   ===================================================== */
.lang-switcher{
  position:relative;
}

.lang-switcher .lang-current{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid var(--dp-border);
  border-radius:999px;
  background:transparent;
  color:inherit;
  cursor:pointer;
}

.lang-switcher .chev{
  width:18px;
  height:18px;
  fill:currentColor;
  opacity:.8;
}

.lang-switcher .lang-menu{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  min-width:86px;
  list-style:none;
  margin:0;
  padding:6px;
  background:var(--dp-header-bg);
  border:1px solid var(--dp-border);
  border-radius:var(--dp-radius);
  z-index:1000;
}

.lang-switcher .lang-menu a{
  display:block;
  padding:8px 10px;
  border-radius:10px;
}
.lang-switcher .lang-menu a:hover{
  background:rgba(255,255,255,.08);
}

/* =====================================================
   NAVBAR
   ===================================================== */
.site-header .navbar .wrap{
  min-height:96px;
  display:flex;
  align-items:center;
  gap:18px;
}

.site-header .logo img{
  height:42px;
  width:auto;
  display:block;
}

/* =====================================================
   MENU WORDPRESS – B2C + B2B (DESKTOP CLEAN)
   ===================================================== */
:is(#menu-btoc, #menu-btob){
  flex:1;
  min-width:0;
}

/* Reset */
:is(#menu-btoc, #menu-btob) ul{
  list-style:none;
  margin:0;
  padding:0;
}

/* Niveau 1 */
:is(#menu-btoc, #menu-btob) > ul,
:is(#menu-btoc, #menu-btob) > div > ul{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;

  /* empêche le wrap FR / EN */
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
}

:is(#menu-btoc, #menu-btob) li{
  position:relative;
  flex-shrink:0;
}

:is(#menu-btoc, #menu-btob) a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:10px;
}

:is(#menu-btoc, #menu-btob) > ul > li > a,
:is(#menu-btoc, #menu-btob) > div > ul > li > a{
  font-weight:600;
}

:is(#menu-btoc, #menu-btob) a:hover{
  background:rgba(255,255,255,.08);
}

/* Dropdown */
:is(#menu-btoc, #menu-btob) .sub-menu{
  display:none;
  position:absolute;
  left:0;
  top:calc(100% + 10px);
  min-width:220px;
  padding:8px;
  background:var(--dp-header-bg);
  border:1px solid var(--dp-border);
  border-radius:var(--dp-radius);
  z-index:50;
}

:is(#menu-btoc, #menu-btob) li:hover > .sub-menu{
  display:block;
}

:is(#menu-btoc, #menu-btob) .sub-menu a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  white-space:nowrap;
}
:is(#menu-btoc, #menu-btob) .sub-menu a:hover{
  background:rgba(255,255,255,.08);
}

/* Niveau 2 */
:is(#menu-btoc, #menu-btob) .sub-menu .sub-menu{
  top:0;
  left:100%;
}

/* =====================================================
   ACTIONS – B2C + B2B
   ===================================================== */
.site-header .actions,
.site-header .navbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
}

.site-header .actions .icon,
.site-header .navbar-actions .icon{
  width:18px;
  height:18px;
  display:block;
}

.site-header .actions .action,
.site-header .navbar-actions .action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--dp-border);
}

.site-header .cart-count{
  font-size:12px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
}

.site-header .cart-price{
  font-weight:600;
}

/* =====================================================
   BURGER
   ===================================================== */
.nav-toggle{
  display:none;
  padding:8px;
  border:1px solid var(--dp-border);
  background:transparent;
  color:inherit;
  border-radius:999px;
  cursor:pointer;
}
.nav-toggle .icon{
  width:18px;
  height:18px;
}

/* =====================================================
   SEARCH DROPDOWN (B2B)
   ===================================================== */
.search-dropdown{
  position:absolute;
  right:18px;
  top:calc(42px + 96px - 10px);
  background:var(--dp-header-bg);
  border:1px solid var(--dp-border);
  border-radius:12px;
  padding:10px;
  min-width:280px;
  z-index:1000;
}

.search-dropdown form{
  display:flex;
  gap:8px;
}

.search-dropdown input[type="search"]{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--dp-border);
  background:rgba(0,0,0,.15);
  color:#fff;
}

.search-dropdown button,
.search-dropdown input[type="submit"]{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--dp-border);
  background:rgba(255,255,255,.08);
  color:#fff;
}

/* =====================================================
   RESPONSIVE / MOBILE
   ===================================================== */
@media (max-width:980px){

  :is(#menu-btoc, #menu-btob) > ul,
  :is(#menu-btoc, #menu-btob) > div > ul{
    display:none;
  }

  .nav-toggle{
    display:inline-flex;
  }

  .site-header.is-open
  :is(#menu-btoc, #menu-btob) > ul,
  .site-header.is-open
  :is(#menu-btoc, #menu-btob) > div > ul{
    display:flex;
    position:absolute;
    left:18px;
    right:18px;
    top:calc(42px + 96px);
    padding:14px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    background:var(--dp-header-bg);
    border:1px solid var(--dp-border);
    border-radius:var(--dp-radius);
    z-index:999;
  }

  .site-header.is-open
  :is(#menu-btoc, #menu-btob) .sub-menu{
    display:block;
    position:static;
    padding:6px 0 0;
    border:0;
    background:transparent;
  }

  .search-dropdown{
    left:18px;
    right:18px;
    min-width:auto;
    top:calc(42px + 96px + 10px);
  }
}
