/* =====================================================================
   Sapins.be — Méga-menu (bande rosé sous le header rouge, dropdowns)
   ===================================================================== */
.sapins-megamenu {
  --smm-bg: #FFF5F4;          /* bande rosé pâle */
  --smm-red: #AE0011;
  --smm-text: #232323;
  --smm-active: #FFFD9E;
  background: var(--smm-bg);
  border-bottom: 1px solid #f0dede;
  position: relative;
  z-index: 60;
}

.sapins-megamenu__bar {
  display: flex;
  align-items: center;
}

/* On masque le menu natif Hummingbird (displayTop) pour éviter le doublon */
.header .js-top-menu,
.header #_desktop_top_menu,
.header .main-menu { display: none !important; }

/* ---------- Liste de 1er niveau (desktop) ---------- */
.sapins-megamenu__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0;
  padding: 0;
  width: 100%;
}

.sapins-megamenu__item { position: static; }

.sapins-megamenu__link {
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: .7rem .55rem;
  color: var(--smm-text);
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.sapins-megamenu__link:hover,
.sapins-megamenu__item:hover > .sapins-megamenu__link {
  color: var(--smm-red);
  border-bottom-color: var(--smm-red);
}
.sapins-megamenu__caret { font-size: 15px; line-height: 1; }

/* ---------- Dropdown méga (desktop) ---------- */
.sapins-megamenu__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;                 /* toujours au-dessus du contenu de la page (slider, etc.) */
  background: #fff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
  border-top: 3px solid var(--smm-red);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.sapins-megamenu__item.has-dropdown:hover > .sapins-megamenu__dropdown,
.sapins-megamenu__item.has-dropdown.is-open > .sapins-megamenu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sapins-megamenu__dropdown-inner {
  max-width: 1320px;           /* même largeur que le header (.container-xxl) */
  margin: 0 auto;
  padding: 1.5rem 1rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start; /* liste + image alignées à gauche */
  gap: 2.5rem;                 /* espacement entre la liste des liens et l'image */
  align-items: flex-start;
}
/* Les colonnes ne s'étirent plus (sinon l'image est poussée tout à droite) */
.smm-cols { display: flex; flex-wrap: wrap; gap: 2rem; flex: 0 1 auto; }
/* Panneau image (change au survol d'un sous-lien) */
.smm-dd-image { flex: 0 0 300px; max-width: 300px; }
.smm-dd-img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  display: block;
  transition: opacity .15s ease;
}
.sapins-megamenu__col { min-width: 170px; }
.sapins-megamenu__col-title {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--smm-red);
  margin-bottom: .5rem;
  font-size: .85rem;
  letter-spacing: .02em;
}
.sapins-megamenu__sublist { list-style: none; margin: 0; padding: 0; }
.sapins-megamenu__sublist li { margin: .15rem 0; }
.sapins-megamenu__sublist a {
  display: block;
  padding: .3rem 0;
  color: #444;
  text-decoration: none;
}
.sapins-megamenu__sublist a:hover { color: var(--smm-red); }

/* ---------- Bouton burger (caché en desktop) ---------- */
.sapins-megamenu__toggle {
  display: none;
  align-items: center;
  gap: .4rem;
  background: transparent;
  border: 0;
  color: var(--smm-text);
  font-weight: 700;
  padding: .75rem 1rem;
  cursor: pointer;
}

/* En-tête du panneau mobile (titre + fermer) — caché en desktop */
.sapins-megamenu__panel-head { display: none; }

/* ===================================================================
   RESPONSIVE (< 992px) : menu PLEIN ÉCRAN qui glisse depuis la gauche
   (piloté par le burger du header ; la barre « Menu » propre est masquée)
   =================================================================== */
@media (max-width: 991.98px) {
  .sapins-megamenu { background: transparent; }
  .sapins-megamenu__bar { display: block; padding: 0; }
  .sapins-megamenu__toggle { display: none; }

  /* Backdrop sombre */
  .sapins-megamenu__backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
    z-index: 1040;
  }
  .sapins-megamenu.is-open .sapins-megamenu__backdrop { opacity: 1; visibility: visible; }

  /* Panneau plein écran */
  .sapins-megamenu__list {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0;
    width: 86%; max-width: 360px; height: 100vh; height: 100dvh;
    background: #fff; z-index: 1050;
    transform: translateX(-100%);
    transition: transform .28s ease, box-shadow .28s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: none; /* pas d'ombre quand fermé (sinon elle déborde à gauche de l'écran) */
  }
  /* L'ombre n'apparaît que quand le drawer est ouvert */
  .sapins-megamenu.is-open .sapins-megamenu__list { transform: translateX(0); box-shadow: 2px 0 18px rgba(0, 0, 0, .18); }

  /* En-tête du panneau */
  .sapins-megamenu__panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1rem; background: var(--smm-red); color: #fff;
    position: sticky; top: 0; z-index: 1;
  }
  .sapins-megamenu__panel-title { font-weight: 700; font-size: 1.1rem; }
  .sapins-megamenu__close { background: transparent; border: 0; color: #fff; cursor: pointer; padding: .25rem; display: inline-flex; }

  /* Items en liste verticale */
  .sapins-megamenu__item { border-top: 1px solid #f0dede; }
  .sapins-megamenu__item:first-of-type { border-top: 0; }
  .sapins-megamenu__link { justify-content: flex-start; gap: .6rem; padding: .9rem 1rem; font-size: 1rem; border-bottom: 0; }
  .smm-icon svg { width: 20px !important; height: 20px !important; }
  .sapins-megamenu__caret { margin-left: auto; }
  .smm-push-right { margin-left: 0; }

  /* Dropdowns en accordéon */
  .sapins-megamenu__dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-top: 0; display: none; background: #faf7f7;
  }
  .sapins-megamenu__item.is-open > .sapins-megamenu__dropdown { display: block; }
  .sapins-megamenu__dropdown-inner { flex-direction: column; gap: .5rem; padding: .25rem 1.25rem .75rem; max-width: none; }
  .smm-cols { flex-direction: column; gap: .5rem; }
  .smm-dd-image { display: none; }
  .sapins-megamenu__sublist a { padding: .45rem 0; }
}

/* Blocage du scroll de la page quand le menu plein écran est ouvert */
body.smm-menu-open { overflow: hidden; }
/* Le menu plein écran « remplace la page » : le header est masqué quand il est ouvert
   (il est de toute façon recouvert par le panneau + backdrop). Évite que le badge panier dépasse. */
body.smm-menu-open .header-oneline { display: none !important; }

/* ---- Icônes par entrée de 1er niveau ---- */
.smm-icon { display: inline-flex !important; align-items: center; flex: 0 0 auto; }
.smm-icon svg { width: 16px !important; height: 16px !important; display: block; }
.smm-icon svg path,
.smm-icon svg circle { fill: #232323; }
.sapins-megamenu__item:hover > .sapins-megamenu__link .smm-icon svg path,
.sapins-megamenu__item:hover > .sapins-megamenu__link .smm-icon svg circle,
.sapins-megamenu__link:hover .smm-icon svg path { fill: var(--smm-red); }
.sapins-megamenu__link { gap: .3rem; }

/* ---- Espace pro / Infos poussés à droite (desktop) ---- */
@media (min-width: 992px) {
  .sapins-megamenu__list .smm-push-right { margin-left: auto; }
}