/* ================================================================
   mobile-nav.css
   Menu drawer mobile — standalone, utilisable sur tout template.
   Actif uniquement ≤ 768px via media queries.
   ================================================================ */

/* ── Variables de secours (si inner-skin non chargé, ex: pages LP) */
.sb-burger,
.sb-mobile-overlay,
.sb-mobile-drawer {
  --_font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --_font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --_brand:        var(--brand, #e91e8c);
  --_ink-900:      var(--ink-900, #0f172a);
  --_ink-700:      var(--ink-700, #334155);
  --_ink-500:      var(--ink-500, #64748b);
  --_ink-400:      var(--ink-400, #94a3b8);
  --_ink-300:      var(--ink-300, #cbd5e1);
  --_ink-200:      var(--ink-200, #e2e8f0);
  --_ink-100:      var(--ink-100, #f1f5f9);
  --_white:        var(--white, #fff);
  --_radius-sm:    var(--radius-sm, 8px);
  --_shadow:       var(--shadow-md, 0 6px 32px rgba(0,0,0,.14));
  --_transition:   var(--transition, .2s ease);
  /* Variables customizer — avec fallback sur les valeurs ink/brand */
  --_mnav-bg:              var(--_white);
  --_mnav-border:          var(--_ink-100);
  --_mnav-link:            var(--_ink-900);
  --_mnav-link-hover:      var(--_brand);
  --_mnav-cat-bg:          var(--_ink-100);
  --_mnav-cat-color:       var(--_ink-700);
  --_mnav-cat-hover-bg:    var(--_brand);
  --_mnav-cat-hover-color: var(--_white);
  --_mnav-cta-bg:          var(--_brand);
  --_mnav-cta-bg2:         var(--_mnav-cta-bg);
  --_mnav-cta-color:       var(--_white);
  --_mnav-cta-hover-bg:    var(--_brand);
  --_mnav-cta-hover-bg2:   var(--_mnav-cta-hover-bg);
  --_mnav-cta-hover-color: var(--_white);
  --_mnav-login-border:       var(--_ink-200);
  --_mnav-login-color:        var(--_ink-700);
  --_mnav-login-hover-border: var(--_brand);
  --_mnav-login-hover-color:  var(--_brand);
  --_mnav-menu-size:          17px;
  --_mnav-cat-size:           14px;
  --_mnav-label:           var(--_ink-300);
}
/* ── Burger ──────────────────────────────────────────────────── */
.sb-burger {
  display: none; /* masqué par défaut, affiché en media query */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm, 6px);
  transition: background .15s;
  flex-shrink: 0;
  z-index: 201;
}
.sb-burger:hover { background: var(--ink-100, #f1f5f9); }

.sb-burger__bar {
  display: block;
  width: 22px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, width .2s ease;
  transform-origin: center;
}

/* Croix quand ouvert */
.sb-burger[aria-expanded="true"] .sb-burger__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.sb-burger[aria-expanded="true"] .sb-burger__bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.sb-burger[aria-expanded="true"] .sb-burger__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ── Overlay ─────────────────────────────────────────────────── */
.sb-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 299;
  opacity: 0;
  transition: opacity .2s ease;
}
.sb-mobile-overlay.is-visible {
  display: block;
  opacity: 1;
}


/* ── Drawer ──────────────────────────────────────────────────── */
.sb-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: var(--_mnav-bg);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -4px 0 32px rgba(0, 0, 0, .12);
  overflow: hidden;
  font-family: var(--_font-body);
}
.sb-mobile-drawer:not([hidden]) {
  transform: translateX(0);
}
.sb-mobile-drawer[hidden] {
  display: flex;
  visibility: hidden;
}
.sb-mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

/* ── En-tête du drawer ───────────────────────────────────────── */
.sb-mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--_mnav-border);
  flex-shrink: 0;
}
.sb-mobile-drawer__logo {
  font-family: var(--_font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--_ink-900);
  text-decoration: none;
  letter-spacing: -.02em;
}
.sb-mobile-drawer__logo em { color: var(--_brand); font-style: normal; }

.sb-mobile-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--_ink-100);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--_ink-500);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.sb-mobile-drawer__close:hover {
  background: var(--_ink-200);
  color: var(--_ink-900);
}

/* ── Corps scrollable ────────────────────────────────────────── */
.sb-mobile-drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 32px;
  font-family: var(--_font-body);
}

/* ── Section générique ───────────────────────────────────────── */
.sb-mobile-drawer__section {
  padding: 20px 20px 0;
}
.sb-mobile-drawer__section + .sb-mobile-drawer__section {
  border-top: 1px solid var(--_mnav-border);
  margin-top: 16px;
  padding-top: 20px;
}

/* ── Label de section ────────────────────────────────────────── */
.sb-mobile-drawer__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--_mnav-label);
  margin: 0 0 10px;
  font-family: var(--_font-body);
}

/* ── Menu principal ──────────────────────────────────────────── */
.sb-mobile-drawer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sb-mobile-drawer__menu li { margin: 0; }
.sb-mobile-drawer__menu a {
  display: flex;
  align-items: center;
  padding: 11px 0;
  font-size: var(--_mnav-menu-size);
  font-weight: 700;
  font-family: var(--_font-body);
  color: var(--_mnav-link);
  text-decoration: none;
  border-bottom: 1px solid var(--_mnav-border);
  transition: color .15s, padding-left .15s;
}
.sb-mobile-drawer__menu a:hover,
.sb-mobile-drawer__menu a.active {
  color: var(--_mnav-link-hover);
  padding-left: 6px;
}
.sb-mobile-drawer__menu li:last-child a { border-bottom: none; }

/* ── Menu secondaire (catégories) ───────────────────────────── */
.sb-mobile-drawer__secondary {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sb-mobile-drawer__secondary li { list-style: none; }
.sb-mobile-drawer__secondary .sub-menu { display: none; }
.sb-mobile-drawer__secondary a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--_mnav-cat-bg);
  border-radius: 100px;
  font-size: var(--_mnav-cat-size);
  line-height: 1.2;
  font-weight: 600;
  font-family: var(--_font-body);
  color: var(--_mnav-cat-color);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.sb-mobile-drawer__secondary a:hover {
  background: var(--_mnav-cat-hover-bg);
  color: var(--_mnav-cat-hover-color);
}

/* ── Recherche ───────────────────────────────────────────────── */
.sb-mobile-drawer__search {
  display: flex;
  align-items: center;
  background: var(--_ink-100);
  border-radius: var(--_radius-sm);
  overflow: hidden;
  margin-top: 4px;
}
.sb-mobile-drawer__search-input {
  flex: 1;
  border: none;
  background: none;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--_font-body);
  color: var(--_ink-900);
  outline: none;
}
.sb-mobile-drawer__search-input::placeholder { color: var(--_ink-400); }
.sb-mobile-drawer__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--_ink-400);
  cursor: pointer;
  transition: color .15s;
}
.sb-mobile-drawer__search-btn:hover { color: var(--_brand); }

/* ── Actions (CTA + Connexion) ───────────────────────────────── */
.sb-mobile-drawer__actions {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--_mnav-border);
  margin-top: 16px;
}
.sb-mobile-drawer__cta {
  display: block;
  text-align: center;
  padding: 13px 20px;
  background: linear-gradient(135deg, var(--_mnav-cta-bg), var(--_mnav-cta-bg2));
  color: var(--_mnav-cta-color);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--_font-body);
  border-radius: var(--_radius-sm);
  text-decoration: none;
  transition: filter .15s, color .15s;
}
.sb-mobile-drawer__cta:hover { background: linear-gradient(135deg, var(--_mnav-cta-hover-bg), var(--_mnav-cta-hover-bg2)); color: var(--_mnav-cta-hover-color); filter: brightness(1.08); }

.sb-mobile-drawer__login {
  display: block;
  text-align: center;
  padding: 11px 20px;
  background: none;
  border: 1.5px solid var(--_mnav-login-border);
  color: var(--_mnav-login-color);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--_font-body);
  border-radius: var(--_radius-sm);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.sb-mobile-drawer__login:hover {
  border-color: var(--_mnav-login-hover-border);
  color: var(--_mnav-login-hover-color);
}

/* ── Responsive : activer le burger ≤ 768px ──────────────────── */
@media (max-width: 768px) {
  .sb-burger { display: flex; }
  .sb-nav    { display: none !important; } /* masquer le menu desktop */

  /* Loupe cachée dès la tablette (déjà accessible dans le drawer) */
  .skin-b .sb-header__right .sb-search-btn { display: none !important; }
}

/* ── Mobile ≤ 480px : masquer les boutons header (déjà dans le drawer) */
@media (max-width: 560px) {
  /* Skin B */
  .skin-b .sb-header__right .sb-cta-btn { display: none !important; }

  /* Skin A */
  .sa-header__ctas .sa-login,
  .sa-header__ctas .sa-cta-btn { display: none !important; }
}