/* Bareshoes.fr — méga-menu (module bareshoes_menu). Tout est préfixé .bhs-mm : rien d'autre n'est touché. */

/* ---------- Ordinateur : le panneau prend la place du sous-menu d'origine ---------- */
@media (min-width: 992px) {
  #_top_main_menu .top-menu li > .sub-menu.bhs-mm-sub {
    left: 0 !important; right: 0 !important; width: auto !important; min-width: 0 !important;
    max-height: none !important; overflow: visible !important; display: block !important;
    padding: 0; border: 1px solid #ececec; border-top: 0; border-radius: 0 0 16px 16px;
    background: #fff; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .28);
  }
  /* Clavier : le panneau s'ouvre aussi quand un lien de la rubrique a le focus */
  #_top_main_menu #top-menu li:focus-within > .sub-menu.bhs-mm-sub { opacity: 1; transform: scale(1, 1); }
  /* Menu fixe (en haut au défilement) : bande pleine largeur, contenu aligné sur la colonne (réglage de custom.css gardé) */
  #header .header-top-main.fixed #_top_main_menu .top-menu li > .sub-menu.bhs-mm-sub { border-radius: 0; border-left: 0; border-right: 0; }
}

.bhs-mm { font-family: inherit; color: #141414; text-align: left; }
.bhs-mm *, .bhs-mm-m * { box-sizing: border-box; }
.bhs-mm ul, .bhs-mm-m ul { list-style: none; margin: 0; padding: 0; }
.bhs-mm__corps { display: flex; gap: 40px; padding: 30px 32px 26px; }
/* 1re colonne (Chaussures) : au moins la largeur de son plus long libellé (« Toutes les chaussures femme »),
   les autres colonnes se partagent le reste ; 40 px entre les colonnes */
.bhs-mm__colonnes { flex: 1 1 auto; min-width: 0; display: grid; grid-auto-flow: column; grid-template-columns: minmax(max-content, 1.25fr); grid-auto-columns: minmax(0, 1fr); gap: 40px; }
.bhs-mm__colonne { min-width: 0; }
/* Le thème impose min-width: 220px à tous les liens des sous-menus : les liens débordaient de leur colonne */
#header .bhs-mm a { min-width: 0 !important; }
/* Le thème ajoute padding-bottom: 10px aux liens des sous-menus : dans le bandeau du bas, les liens
   (Retour, Écrivez-nous, Tout voir) descendaient de 5 px par rapport au texte « Envoi rapide » */
#header .bhs-mm a.bhs-mm__rea, #header .bhs-mm a.bhs-mm__tout { padding: 0 !important; }
#header .bhs-mm .bhs-mm__colonne ul,
#header .bhs-mm .bhs-mm__grille { display: block; }
#header .bhs-mm li { display: block !important; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; flex: none !important; }
.bhs-mm__titre { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b6b6b; }
#header .bhs-mm a.bhs-mm__lien {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 0; margin: 0;
  font-size: 15px; font-weight: 500; line-height: 1.35; color: #141414; text-transform: none; white-space: normal; border: 0; background: none;
  transition: color .15s;
}
#header .bhs-mm a.bhs-mm__lien:hover, #header .bhs-mm a.bhs-mm__lien:focus-visible { color: #ff0066; }
#header .bhs-mm a.bhs-mm__lien--fort { font-weight: 700; }
#header .bhs-mm a.bhs-mm__lien--sous { padding-left: 14px; font-size: 14px; color: #5c5c5c; }
.bhs-mm__badge { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.4; padding: 1px 7px; border-radius: 999px; background: #ffe6ef; color: #b8004d; }

.bhs-mm__cartes { flex: 0 0 auto; display: flex; gap: 18px; }
/* Une carte jusqu'à 1449 px (colonne de 1170 px), deux au-delà (colonne de 1400 px) */
.bhs-mm__cartes .bhs-mm__carte:nth-child(n+2) { display: none !important; }
@media (min-width: 1450px) { .bhs-mm__cartes .bhs-mm__carte:nth-child(2) { display: flex !important; } }
#header .bhs-mm a.bhs-mm__carte {
  width: 210px; min-width: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px;
  color: #141414; text-transform: none; white-space: normal; text-decoration: none; border: 0;
}
.bhs-mm__visuel { display: block; aspect-ratio: 4 / 5; margin-bottom: 8px; overflow: hidden; border-radius: 10px; background: #f3f2f0; }
.bhs-mm__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--bhs-z, 1)); transition: transform .4s ease; }
#header .bhs-mm a.bhs-mm__carte:hover img, .bhs-mm-m__carte:hover img { transform: scale(calc(var(--bhs-z, 1) * 1.03)); }
.bhs-mm__sur { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b8004d; }
.bhs-mm__ctitre { font-size: 15px; font-weight: 700; line-height: 1.3; }
.bhs-mm__cbtn { font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
#header .bhs-mm a.bhs-mm__carte:hover .bhs-mm__cbtn { color: #ff0066; }

.bhs-mm__az { flex: 1 1 auto; min-width: 0; }
#header .bhs-mm .bhs-mm__grille { column-count: 4; column-gap: 28px; }
#header .bhs-mm .bhs-mm__grille li { break-inside: avoid; }

.bhs-mm__pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 13px 32px;
  border-top: 1px solid #ececec; font-size: 13px; color: #5c5c5c;
}
#header .bhs-mm .bhs-mm__rea, #header .bhs-mm .bhs-mm__tout {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 0; margin: 0;
  font-size: 13px; font-weight: 500; color: #5c5c5c; text-transform: none; white-space: nowrap; border: 0; background: none;
}
#header .bhs-mm a.bhs-mm__rea:hover { color: #141414; }
#header .bhs-mm .bhs-mm__tout { margin-left: auto; font-size: 14px; font-weight: 700; color: #141414; }
#header .bhs-mm .bhs-mm__tout:hover { color: #ff0066; }
.bhs-mm svg { flex: none; }

@media (max-width: 1199px) {
  .bhs-mm__corps { gap: 28px; padding: 26px 24px 22px; }
  .bhs-mm__colonnes { gap: 28px; }
  #header .bhs-mm a.bhs-mm__carte { width: 160px; }
  #header .bhs-mm .bhs-mm__grille { column-count: 3; }
  .bhs-mm__pied { padding: 12px 24px; }
}

/* ---------- Téléphone et tablette : rubriques du menu latéral ---------- */
#sidevertical_menu .sub-menu.bhs-mm-msub { padding: 0 0 12px; }
.bhs-mm-m { padding: 2px 0 6px; color: #141414; }
#sidevertical_menu .bhs-mm-m a { text-transform: none; }
#sidevertical_menu .bhs-mm-m a.bhs-mm-m__tout {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0;
  font-size: 15px; font-weight: 700; color: #141414; border-bottom: 1px solid #ececec;
}
#sidevertical_menu .bhs-mm-m li { display: block; margin: 0; padding: 0; }
#sidevertical_menu .bhs-mm-m a.bhs-mm-m__lien {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0;
  font-size: 15px; font-weight: 500; color: #141414; border-bottom: 1px solid #f3f3f3;
}
#sidevertical_menu .bhs-mm-m a.bhs-mm-m__lien--sous { padding-left: 14px; font-size: 14px; color: #5c5c5c; }
.bhs-mm-m__titre { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b6b6b; }
.bhs-mm-m__pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
#sidevertical_menu .bhs-mm-m__pastilles a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px;
  border: 1px solid #dcdcdc; border-radius: 999px; font-size: 14px; font-weight: 500; color: #141414;
}
#sidevertical_menu .bhs-mm-m a.bhs-mm-m__carte { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 0; color: #141414; }
.bhs-mm-m__carte .bhs-mm__visuel { width: 84px; flex: none; margin: 0; border-radius: 8px; }
.bhs-mm-m__ctexte { display: flex; flex-direction: column; gap: 2px; }
#sidevertical_menu .bhs-mm-m a:hover, #sidevertical_menu .bhs-mm-m a:focus-visible { color: #ff0066; }

@media (prefers-reduced-motion: reduce) {
  .bhs-mm__visuel img { transition: none; }
}

/* 1.0.4 : le thème réduit tous les SVG à 5 px (theme.css : svg:not(:root)) → tailles des icônes du menu imposées */
.bhs-mm svg, .bhs-mm-m svg { overflow: visible; }
#header .bhs-mm .bhs-mm__rea svg { width: 18px; height: 18px; }
#header .bhs-mm .bhs-mm__tout svg, #sidevertical_menu .bhs-mm-m .bhs-mm-m__tout svg { width: 16px; height: 16px; }

/* 1.1.0 : étiquette « offre » posée sur l'image de la carte */
.bhs-mm__visuel { position: relative; }
.bhs-mm__offre {
  position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px;
  background: #d6005a; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0;
}
.bhs-mm-m__carte .bhs-mm__offre { top: 6px; left: 6px; padding: 2px 6px; font-size: 10px; }

/* Onglet « Opération en cours » (1.3.0) : en rose Bareshoes ; la barre se resserre un peu pour garder le menu sur une ligne
   à côté du logo (mesuré sur la boutique à 992, 1024, 1200 et 1440 px de large). */
#header .top-menu[data-depth="0"] > li.bhs-op > a.dropdown-item,
#header .top-menu[data-depth="0"] > li.bhs-op:hover > a.dropdown-item { color: #ff0066; }
#header .top-menu[data-depth="0"] > li.bhs-op.current > a.dropdown-item { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 992px) {
  body.bhs-op-on #header .header-top .container { column-gap: 20px; }
  body.bhs-op-on #header .top-menu[data-depth="0"] > li > a.dropdown-item { font-size: 15px; padding-left: 8px; padding-right: 8px; }
}
@media (min-width: 1200px) {
  body.bhs-op-on #header .header-top .container { column-gap: 36px; }
  body.bhs-op-on #header .top-menu[data-depth="0"] > li > a.dropdown-item { font-size: 18px; padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 1600px) {
  body.bhs-op-on #header .header-top .container { column-gap: 64px; }
  body.bhs-op-on #header .top-menu[data-depth="0"] > li > a.dropdown-item { font-size: 19px; padding-left: 22px; padding-right: 22px; }
}
/* téléphone : menu latéral */
#sidevertical_menu li.bhs-op > a.dropdown-item { color: #ff0066; }
