/**
 * H2J MegaMenu — frontend styles
 *
 * Sidebar drawer + burger trigger + accordion category tree.
 * Vanilla CSS, no Bootstrap dependency. Theming via --h2j-* variables.
 *
 * @author    H2J Ecosystem <info@2klove.fr>
 * @copyright 2024-2026 H2J sas RCS 978391720
 */

/* ═══════════════════════════════════════════════════════════
   1. BURGER BUTTON
   ═══════════════════════════════════════════════════════════ */
.h2j-mm-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px 10px;
  background: #ffffff;
  border: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
  z-index: 850;
}
.h2j-mm-burger:hover {
  background-color: var(--h2j-bg-light, #f8f7ff);
  border-color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
}
.h2j-mm-burger:focus-visible {
  outline: 2px solid var(--cubx-accent, var(--h2j-primary, #7c3aed));
  outline-offset: 2px;
}
.h2j-mm-burger__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--h2j-text, #1a1f2c);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.h2j-mm-burger.is-active .h2j-mm-burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.h2j-mm-burger.is-active .h2j-mm-burger__bar:nth-child(2) {
  opacity: 0;
}
.h2j-mm-burger.is-active .h2j-mm-burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mode SIDEBAR : floating burger top-left over hero ──────── */
/* v2.3.5 — "Vrai corner" : ancré au coin top-left de la viewport, seul le coin
   bas-droit est arrondi (les 3 autres restent à angle droit pour épouser le
   bord de l'écran). Le hover violet/rouge a été retiré (effet inutile selon
   user feedback). On garde un focus visible pour l'accessibilité clavier. */
.h2j-mm-burger--floating {
  position: fixed;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  border: none;
  border-right: 1px solid var(--h2j-border, #e5e7eb);
  border-bottom: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: 0 0 12px 0;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.h2j-mm-burger--floating:hover {
  /* Pas de couleur d'accent au hover : le burger garde son fond blanc.
     Seul un léger renforcement de l'ombre signale le survol, sans bordure
     accentuée. Override des règles génériques .h2j-mm-burger:hover. */
  background-color: #ffffff;
  border-right-color: var(--h2j-border, #e5e7eb);
  border-bottom-color: var(--h2j-border, #e5e7eb);
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.18);
}

/* ── Mode BAR : inline burger inside header bar ─────────────── */
.h2j-mm-burger--inline {
  position: relative;
  border-radius: 6px;
  width: 44px;
  height: 44px;
}

/* ═══════════════════════════════════════════════════════════
   2. HEADER BAR (mode 'bar')
   ═══════════════════════════════════════════════════════════ */
.h2j-mm-bar {
  background: var(--h2j-bg, #ffffff);
  border-bottom: 1px solid var(--h2j-border, #e5e7eb);
  position: sticky;
  top: 0;
  z-index: 800;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.h2j-mm-bar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  max-width: 1280px;
  margin: 0 auto;
}
.h2j-mm-bar__logo {
  flex: 1;
  display: flex;
  justify-content: center;
}
.h2j-mm-bar__logo img {
  max-height: 44px;
  width: auto;
  display: block;
}
.h2j-mm-bar__icons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.h2j-mm-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--h2j-text, #1a1f2c);
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.h2j-mm-bar__icon:hover {
  background-color: var(--h2j-bg-light, #f8f7ff);
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
}

/* ═══════════════════════════════════════════════════════════
   3. BACKDROP
   ═══════════════════════════════════════════════════════════ */
.h2j-mm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  /* v2.4.0.16 — Durée alignée sur les animations drawer pour un fondu smooth */
  transition: opacity 0.8s ease;
  z-index: 990;
}
.h2j-mm-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.h2j-mm-backdrop[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   4. SIDEBAR DRAWER
   ═══════════════════════════════════════════════════════════ */
.h2j-mm-sidebar {
  /* Largeur fallback si jamais le template n'injecte pas inline
     style="--h2j-mm-width:Npx". En operation normale c'est H2JMegaMenu::getSidebarWidth()
     qui pilote la valeur (setting BO H2JECO_MEGAMENU_WIDTH, default 380px depuis v2.15.30,
     clamp [240..480]).
     Cette valeur n'est utilisee QUE si le inline-style est absent (ne peut pas l'override). */
  --h2j-mm-width: 380px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--h2j-mm-width);
  max-width: 90vw;
  background: var(--h2j-bg, #ffffff);
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.18);
  transform: translateX(-100%);
  /* v2.4.0.16 — Durée par défaut alignée sur les presets d'animation
     (chaque preset --anim-* peut override cette durée avec son propre easing).
     Avant : 0.32s, maintenant 0.8s pour un effet smooth et bien visible. */
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.h2j-mm-sidebar.is-open {
  transform: translateX(0);
}

.h2j-mm-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--h2j-border, #e5e7eb);
  flex-shrink: 0;
  gap: 12px;
  background: var(--h2j-bg, #ffffff);
  /* v2.4.0.14 — z-index élevé pour que les dropdowns switcher passent
     par-dessus le wrapper scrollable qui suit (et par-dessus ses contenus).
     IMPORTANT : pas de position:sticky ici — le header reste en haut via
     flex-shrink:0 + ordre dans le flex column, et les dropdowns absolus
     débordent normalement dans le drawer sans être coupés par un stacking
     context sticky. */
  position: relative;
  z-index: 2;
}

/* v2.4.0.14 — Wrapper scrollable : englobe search + auth + nav.
   C'est lui qui porte le scroll unique (au lieu de .h2j-mm-sidebar),
   ce qui permet au dropdown switcher (dans le header, hors de ce wrapper)
   de s'afficher par-dessus sans être clippé.

   v2.15.30 — Scrollbar fine et discrete (gris pale) pour ne pas distraire de
   la navigation. Sur mobile/touch le scroll est gere a la molette ou au geste,
   donc la scrollbar reste essentiellement decorative. Triple support :
     - scrollbar-width: thin (Firefox)
     - ::-webkit-scrollbar* (Chrome/Safari/Edge)
     - scrollbar-color (Firefox bonus pour la teinte) */
.h2j-mm-sidebar__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  min-height: 0; /* permet au flex:1 de bien contraindre la hauteur sur Safari */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.h2j-mm-sidebar__scroll::-webkit-scrollbar {
  width: 6px;
}
.h2j-mm-sidebar__scroll::-webkit-scrollbar-track {
  background: transparent;
}
.h2j-mm-sidebar__scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}
.h2j-mm-sidebar__scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.32);
}

/* v2.4.0.10 — Zone de gauche (logo OU switchers langue/devise).
   Flexbox row avec gap réduit pour caser plusieurs switchers dans
   un drawer étroit (320px par défaut). */
.h2j-mm-sidebar__header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap; /* pills se stackent si drawer étroit */
}
.h2j-mm-sidebar__logo img {
  max-height: 40px;
  width: auto;
  display: block;
}
.h2j-mm-sidebar__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--h2j-text, #1a1f2c);
  border-radius: 6px;
  transition: background-color 0.2s;
}
.h2j-mm-sidebar__close:hover {
  background-color: var(--h2j-bg-light, #f8f7ff);
}
.h2j-mm-sidebar__close:focus-visible {
  outline: 2px solid var(--cubx-accent, var(--h2j-primary, #7c3aed));
  outline-offset: 2px;
}

.h2j-mm-sidebar__nav {
  /* v2.4.0.12 — flux unique : plus de flex/overflow, le scroll est sur .h2j-mm-sidebar */
  padding: 8px 0;
}

/* ══════════════════════════════════════════════════════════
   4b. SWITCHERS (lang / currency) — v2.4.0.10
   Pill sombre arrondi + menu dropdown. Utilisé dans le header du drawer
   mais stylistiquement autonome (réutilisable dans footer / megamenu item).
   ══════════════════════════════════════════════════════════ */
.h2j-mm-switcher {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

/* Bouton pill sombre avec chevron. Couleur de fond = --h2j-text (qui est
   sombre en thème clair, clair en thème sombre). Couleur texte = --h2j-bg
   (inversion automatique pour garantir le contraste dans tous les presets).
   v2.4.0.10 fix: color hardcodé #fff remplacé par var(--h2j-bg). */
.h2j-mm-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--h2j-text, #1a1f2c);
  color: var(--h2j-bg, #ffffff);
  border: none;
  border-radius: var(--cubx-radius, 8px); /* v2.4.0.10 — coins arrondis CUBX au lieu de capsule 999px */
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.2;
}

.h2j-mm-switcher__trigger--link {
  text-decoration: none;
}

.h2j-mm-switcher__trigger:hover,
.h2j-mm-switcher__trigger:focus-visible {
  background: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  outline: none;
}

.h2j-mm-switcher__trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--h2j-bg, #fff), 0 0 0 4px var(--cubx-accent, var(--h2j-primary, #7c3aed));
}

.h2j-mm-switcher__label {
  display: inline-block;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h2j-mm-switcher__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.h2j-mm-switcher__icon .material-icons {
  font-size: 16px;
  line-height: 1;
}

.h2j-mm-switcher--events .h2j-mm-switcher__label {
  max-width: 88px;
}

.h2j-mm-switcher__chevron {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.h2j-mm-switcher__trigger[aria-expanded="true"] .h2j-mm-switcher__chevron {
  transform: rotate(180deg);
}

/* Menu dropdown (liste des langues/devises disponibles) */
.h2j-mm-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-width: 240px;
  background: var(--h2j-bg, #ffffff);
  border: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 4px 0;
  margin: 0;
  list-style: none;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  /* v2.15.30 — Scrollbar fine cohérente avec .h2j-mm-sidebar__scroll */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.h2j-mm-switcher__menu::-webkit-scrollbar {
  width: 6px;
}
.h2j-mm-switcher__menu::-webkit-scrollbar-track {
  background: transparent;
}
.h2j-mm-switcher__menu::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}
.h2j-mm-switcher__menu::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.32);
}

.h2j-mm-switcher__menu[hidden] {
  display: none;
}

.h2j-mm-switcher__menu li {
  margin: 0;
  padding: 0;
}

.h2j-mm-switcher__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: var(--h2j-text, #1a1f2c);
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  cursor: pointer;
}

.h2j-mm-switcher__item:hover,
.h2j-mm-switcher__item:focus-visible {
  background: var(--h2j-bg-light, #f8f7ff);
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  text-decoration: none;
  outline: none;
}

.h2j-mm-switcher__item--active {
  font-weight: 700;
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  cursor: default;
  background: var(--h2j-bg-light, #f8f7ff);
}

/* Pour le currency switcher : iso code en gras, signe plus discret */
.h2j-mm-switcher__iso {
  font-weight: 600;
}

.h2j-mm-switcher__sign {
  opacity: 0.7;
  font-size: 12px;
}

/* Pill statique (mono-langue ou mono-devise) : même apparence visuelle
   mais sans effet hover ni cursor pointer. Informatif uniquement. */
.h2j-mm-switcher--static .h2j-mm-switcher__trigger--static {
  cursor: default;
  user-select: none;
}

.h2j-mm-switcher--static .h2j-mm-switcher__trigger--static:hover,
.h2j-mm-switcher--static .h2j-mm-switcher__trigger--static:focus-visible {
  background: var(--h2j-text, #1a1f2c); /* pas de changement au hover */
  transform: none;
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════
   4c. SEARCH BAR — v2.4.0.11
   Barre de recherche structurelle entre le header et la nav.
   Formulaire natif PS (GET ?s=query vers la page recherche).
   Design : cadre arrondi, icône loupe, adapté au thème via vars.
   ══════════════════════════════════════════════════════════ */
.h2j-mm-sidebar__search {
  padding: 12px 20px 4px;
  flex-shrink: 0;
}

.h2j-mm-search {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--h2j-border, #e5e7eb);
  border-radius: var(--cubx-radius, 8px);
  background: var(--h2j-bg, #ffffff);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.h2j-mm-search:focus-within {
  border-color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.h2j-mm-search__input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--h2j-text, #1a1f2c);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.h2j-mm-search__input::placeholder {
  color: var(--h2j-text-light, #6b7280);
  opacity: 0.7;
}

.h2j-mm-search__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  color: var(--h2j-text-light, #6b7280);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s;
}

.h2j-mm-search__btn:hover {
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
}

/* Zone résultats autocomplete (dropdown sous l'input).
   Le contenu est géré par H2JProductSearch.js (classes .h2j-sr__*).
   v2.4.0.12 — plus de max-height/overflow : les résultats coulent
   naturellement dans le flux scrollable du drawer. */
.h2j-mm-search__results {
  margin-top: 4px;
  border: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: var(--cubx-radius, 8px);
  background: var(--h2j-bg, #ffffff);
}

.h2j-mm-search__results[aria-hidden="true"] {
  display: none;
}

/* Override des styles injectés par H2JProductSearch pour s'adapter au drawer.
   Les items doivent utiliser les variables CSS du design system CUBX
   au lieu des couleurs hardcodées du widget BO. */
.h2j-mm-search__results .h2j-sr__item {
  color: var(--h2j-text, #1e293b);
}

.h2j-mm-search__results .h2j-sr__item:hover,
.h2j-mm-search__results .h2j-sr__item--focused {
  background: var(--h2j-bg-light, #f8f7ff);
}

.h2j-mm-search__results .h2j-sr__name {
  color: var(--h2j-text, #1e293b);
}

.h2j-mm-search__results .h2j-sr__mark {
  background: var(--cubx-accent, #fef08a);
  color: inherit;
}

/* ════════════════════════════════════════════════════════
   4d. AUTH BLOCK — v2.4.0.13
   Bloc authentification (entre search et nav).
   Invité : 2 boutons côte à côte (Connexion plein + Inscription outline).
   Logé  : carte compte avec avatar initiale + "Bonjour [Prénom]" + chevron.
   Tout est lié au thème via les CSS vars du DS CUBX — aucune couleur hardcodée.
   ════════════════════════════════════════════════════════ */

.h2j-mm-sidebar__auth {
  padding: 8px 20px 12px;
  flex-shrink: 0;
}

/* Invité — ligne de 2 boutons gap 8px, chacun flex:1 pour 50/50 */
.h2j-mm-auth-row {
  display: flex;
  gap: 8px;
}

.h2j-mm-auth-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: var(--cubx-radius, 8px);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  min-width: 0;
}

.h2j-mm-auth-btn svg {
  flex-shrink: 0;
}

.h2j-mm-auth-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.h2j-mm-auth-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--h2j-bg, #fff), 0 0 0 4px var(--cubx-accent, var(--h2j-primary, #7c3aed));
}

/* Bouton primaire — Connexion : fond plein couleur accent */
.h2j-mm-auth-btn--primary {
  background: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  color: var(--h2j-bg, #ffffff);
  border: 1.5px solid var(--cubx-accent, var(--h2j-primary, #7c3aed));
}

.h2j-mm-auth-btn--primary:hover {
  background: var(--h2j-primary-dark, var(--h2j-text, #1a1f2c));
  border-color: var(--h2j-primary-dark, var(--h2j-text, #1a1f2c));
  color: var(--h2j-bg, #ffffff);
  text-decoration: none;
}

/* Bouton secondaire — Inscription : outline couleur accent, fond transparent */
.h2j-mm-auth-btn--secondary {
  background: transparent;
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  border: 1.5px solid var(--cubx-accent, var(--h2j-primary, #7c3aed));
}

.h2j-mm-auth-btn--secondary:hover {
  background: var(--h2j-bg-light, #f8f7ff);
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  text-decoration: none;
}

/* Logé — carte compte (avatar + hello + prénom + chevron) */
.h2j-mm-auth-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--h2j-bg-light, #f8f7ff);
  border: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: var(--cubx-radius, 8px);
  color: var(--h2j-text, #1a1f2c);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.h2j-mm-auth-card:hover {
  background: var(--h2j-bg, #ffffff);
  border-color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  text-decoration: none;
  color: var(--h2j-text, #1a1f2c);
}

.h2j-mm-auth-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--h2j-bg, #fff), 0 0 0 4px var(--cubx-accent, var(--h2j-primary, #7c3aed));
}

/* Avatar : rond coloré accent avec initiale en blanc */
.h2j-mm-auth-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  color: var(--h2j-bg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
  line-height: 1;
}

.h2j-mm-auth-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.h2j-mm-auth-card__hello {
  font-size: 11px;
  color: var(--h2j-text-light, #6b7280);
  font-weight: 400;
}

.h2j-mm-auth-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--h2j-text, #1a1f2c);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h2j-mm-auth-card__chevron {
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  flex-shrink: 0;
  transition: transform 0.2s;
}

.h2j-mm-auth-card:hover .h2j-mm-auth-card__chevron {
  transform: translateX(2px);
}

/* Responsive : sur drawers très étroits (< 280px), passer les 2 boutons en colonne
   pour éviter le texte écrasé. Rare mais sécurité d'affichage. */
@media (max-width: 280px) {
  .h2j-mm-auth-row {
    flex-direction: column;
  }
}

/* ════════════════════════════════════════════════════════
   4e. CART BLOCK — v2.4.0.15
   Mini panier sous le bloc auth.
   État non-vide : icône cart + badge compteur + "Mon panier" + montant
   État vide     : icône cart + "Panier vide" (style atténué)
   Style : identique au bloc auth logé — cohérence visuelle garantie.
   100% thème CUBX — aucune couleur hardcodée.
   ════════════════════════════════════════════════════════ */

.h2j-mm-sidebar__cart {
  padding: 0 20px 12px;
  flex-shrink: 0;
}

/* Carte cart : même structure que .h2j-mm-auth-card (cohérence) */
.h2j-mm-cart-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--h2j-bg-light, #f8f7ff);
  border: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: var(--cubx-radius, 8px);
  color: var(--h2j-text, #1a1f2c);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.h2j-mm-cart-card:hover {
  background: var(--h2j-bg, #ffffff);
  border-color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  text-decoration: none;
  color: var(--h2j-text, #1a1f2c);
}

.h2j-mm-cart-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--h2j-bg, #fff), 0 0 0 4px var(--cubx-accent, var(--h2j-primary, #7c3aed));
}

/* Icône cart + badge compteur en sur-impression */
.h2j-mm-cart-card__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
}

.h2j-mm-cart-card__icon svg {
  display: block;
  /* v2.4.0.16 — l'icône occupe mieux le container 36×36 pour rester visible
     même avec le badge en sur-impression. */
  width: 24px;
  height: 24px;
}

/* Badge compteur : rond coloré en top-right, sur-imprimé sur l'icône cart.
   v2.4.0.16 — badge réduit (16×16 au lieu de 18×18) et décalé plus loin
   dans le coin (top/right: -6px au lieu de -2/-4) pour ne plus masquer
   l'icône cart. Couleur = accent thème (suit ambre/violet selon preset DS)
   au lieu de --h2j-danger pour rester harmonisé avec l'identité visuelle. */
.h2j-mm-cart-card__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  color: var(--h2j-bg, #ffffff);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--h2j-bg-light, #f8f7ff);
  box-sizing: content-box;
}

/* Au hover de la carte, la bordure du badge suit le changement de fond carte */
.h2j-mm-cart-card:hover .h2j-mm-cart-card__badge {
  border-color: var(--h2j-bg, #ffffff);
}

.h2j-mm-cart-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.h2j-mm-cart-card__label {
  font-size: 11px;
  color: var(--h2j-text-light, #6b7280);
  font-weight: 400;
}

.h2j-mm-cart-card__total {
  font-size: 14px;
  font-weight: 600;
  color: var(--h2j-text, #1a1f2c);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* État vide : montant remplacé par "Panier vide" en style atténué italique */
.h2j-mm-cart-card__total--empty {
  font-weight: 400;
  font-style: italic;
  color: var(--h2j-text-light, #6b7280);
}

.h2j-mm-cart-card__chevron {
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  flex-shrink: 0;
  transition: transform 0.2s;
}

.h2j-mm-cart-card:hover .h2j-mm-cart-card__chevron {
  transform: translateX(2px);
}

/* État vide : icône cart aussi atténuée (cache que c'est cliquable mais incitatif discret) */
.h2j-mm-cart-card--empty .h2j-mm-cart-card__icon {
  color: var(--h2j-text-light, #6b7280);
}

/* ═══════════════════════════════════════════════════════════
   5. ACCORDION TREE
   ═══════════════════════════════════════════════════════════ */
.h2j-mm-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}
.h2j-mm-tree__item {
  border-bottom: 1px solid var(--h2j-border, #e5e7eb);
}
.h2j-mm-tree--root > .h2j-mm-tree__item:last-child {
  border-bottom: none;
}
.h2j-mm-tree__row {
  display: flex;
  align-items: stretch;
  min-height: 48px;
}
.h2j-mm-tree__link {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 14px 20px;
  color: var(--h2j-text, #1a1f2c);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}
.h2j-mm-tree__link:hover {
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  background-color: var(--h2j-bg-light, #f8f7ff);
  text-decoration: none;
}
.h2j-mm-tree__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  background: none;
  border: none;
  /* v2.11.27 — Trait vertical entre label et chevron retiré : la row est
     désormais visuellement continue, le chevron est perçu comme une affordance
     du même item plutôt que comme une zone séparée. Le séparateur horizontal
     de .h2j-mm-tree__item (border-bottom) suffit à délimiter les items. */
  cursor: pointer;
  color: var(--h2j-text-light, #6b7280);
  transition: background-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.h2j-mm-tree__toggle:hover {
  background-color: var(--h2j-bg-light, #f8f7ff);
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
}
.h2j-mm-tree__toggle:focus-visible {
  outline: 2px solid var(--cubx-accent, var(--h2j-primary, #7c3aed));
  outline-offset: -2px;
}
.h2j-mm-tree__chevron {
  transition: transform 0.25s ease;
}
.h2j-mm-tree__toggle[aria-expanded="true"] .h2j-mm-tree__chevron {
  transform: rotate(180deg);
}

/* Sub-tree (depth 1+) : reveal via JS removing [hidden] */
.h2j-mm-tree--sub {
  background: var(--h2j-bg-light, #f8f7ff);
  border-top: 1px solid var(--h2j-border, #e5e7eb);
}
.h2j-mm-tree--sub[hidden] {
  display: none;
}
.h2j-mm-tree--sub .h2j-mm-tree__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.h2j-mm-tree--sub .h2j-mm-tree__link {
  font-size: 14px;
  font-weight: 400;
  padding-left: 36px;
}
.h2j-mm-tree--sub .h2j-mm-tree--sub .h2j-mm-tree__link {
  font-size: 13px;
  padding-left: 52px;
  color: var(--h2j-text-light, #6b7280);
}
.h2j-mm-tree--sub .h2j-mm-tree--sub .h2j-mm-tree--sub .h2j-mm-tree__link {
  padding-left: 68px;
}

.h2j-mm-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--h2j-text-light, #6b7280);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   6. BODY LOCK WHEN OPEN
   ═══════════════════════════════════════════════════════════ */
body.h2j-mm-open {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   7. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .h2j-mm-burger--floating {
    width: 48px;
    height: 48px;
  }
  .h2j-mm-bar__inner {
    padding: 8px 12px;
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════
   8. CUSTOM ITEMS — v2.4.0
   Icons, separators, HTML widgets, link target indicators.
   ═══════════════════════════════════════════════════════════ */

/* ── Icon wrapper inside a tree link ─────────────────────── */
.h2j-mm-tree__link {
  /* override: items with icons need flex alignment */
  display: flex;
  align-items: center;
  gap: 12px;
}
.h2j-mm-tree__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: inherit;
  font-size: 22px;
  line-height: 1;
}
.h2j-mm-tree__icon-wrap .h2j-icon,
.h2j-mm-tree__icon-wrap .material-icons,
.h2j-mm-tree__icon-wrap svg,
.h2j-mm-tree__icon-wrap img {
  width: 22px;
  height: 22px;
  font-size: 22px;
  display: inline-block;
  object-fit: contain;
}
.h2j-mm-tree__icon-wrap svg {
  /* SVG inline — inherit current text colour by default */
  fill: currentColor;
}
.h2j-mm-tree__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* In sub-trees the icon scales down to keep visual hierarchy */
.h2j-mm-tree--sub .h2j-mm-tree__icon-wrap,
.h2j-mm-tree--sub .h2j-mm-tree__icon-wrap .material-icons,
.h2j-mm-tree--sub .h2j-mm-tree__icon-wrap svg,
.h2j-mm-tree--sub .h2j-mm-tree__icon-wrap img {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/* ── Separator (visual divider, no link) ─────────────────── */
.h2j-mm-tree__item--separator {
  padding: 8px 20px;
  border-bottom: none !important;
  background: transparent;
}
.h2j-mm-separator-line {
  display: block;
  height: 1px;
  background: var(--h2j-border, #e5e7eb);
  margin: 0;
}

/* ── HTML widget (raw user content, no row chrome) ───────── */
.h2j-mm-tree__item--html {
  border-bottom: 1px solid var(--h2j-border, #e5e7eb);
}
.h2j-mm-html-content {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--h2j-text, #1a1f2c);
  line-height: 1.5;
}
.h2j-mm-html-content__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--h2j-text-light, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.h2j-mm-html-content a {
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  text-decoration: none;
}
.h2j-mm-html-content a:hover {
  text-decoration: underline;
}
.h2j-mm-html-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.h2j-mm-html-content p {
  margin: 0 0 8px;
}
.h2j-mm-html-content p:last-child {
  margin-bottom: 0;
}

/* ── Type-specific accents (subtle visual cue) ───────────── */
.h2j-mm-tree__item--cms .h2j-mm-tree__icon-wrap {
  opacity: 0.85;
}
.h2j-mm-tree__item--manufacturer .h2j-mm-tree__icon-wrap {
  opacity: 0.85;
}
.h2j-mm-tree__item--link .h2j-mm-tree__link::after {
  /* small external-link arrow for items opening in new tabs */
  content: '';
}
.h2j-mm-tree__item--link .h2j-mm-tree__link[target="_blank"]::after {
  content: '\2197';        /* ↗ arrow */
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.5;
}

/* =========================================================================
   NEWSLETTER WIDGET (v2.4.0.16)
   Rendered via H2JNewsletterWidget::renderWidgetHtml() inside a
   module_widget item in the megamenu sidebar (or any other context).
   Scoped with .h2jeco-newsletter-widget* classes to stay isolated from
   the rest of the megamenu — reusable in footer, drawer, etc.
   ========================================================================= */
.h2jeco-newsletter-widget {
  padding: 16px 20px 18px;
  border-bottom: 1px solid var(--h2j-border, #e5e7eb);
  background: transparent;
}
.h2jeco-newsletter-widget__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--h2j-text, #1a1f2c);
  margin: 0 0 10px;
  line-height: 1.3;
}
.h2jeco-newsletter-widget__form {
  margin: 0 0 8px;
}
.h2jeco-newsletter-widget__input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  background: var(--h2j-bg-soft, #f5f6fa);
  border: 1px solid var(--h2j-border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.h2jeco-newsletter-widget__input-wrap:focus-within {
  border-color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
  background: #fff;
}
.h2jeco-newsletter-widget__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--h2j-text, #1a1f2c);
  outline: none;
  font-style: italic;
}
.h2jeco-newsletter-widget__input::placeholder {
  color: var(--h2j-text-light, #9ca3af);
  font-style: italic;
}
.h2jeco-newsletter-widget__input:not(:placeholder-shown) {
  font-style: normal;
}
.h2jeco-newsletter-widget__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  padding: 0;
  background: transparent;
  border: none;
  border-left: 1px solid var(--h2j-border, #e5e7eb);
  color: var(--h2j-text-light, #6b7280);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.h2jeco-newsletter-widget__submit:hover,
.h2jeco-newsletter-widget__submit:focus-visible {
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  background: rgba(124, 58, 237, 0.06);
  outline: none;
}
.h2jeco-newsletter-widget__submit svg {
  display: block;
  width: 18px;
  height: 18px;
}
.h2jeco-newsletter-widget__form[data-fallback="1"] .h2jeco-newsletter-widget__input,
.h2jeco-newsletter-widget__form[data-fallback="1"] .h2jeco-newsletter-widget__submit {
  opacity: 0.6;
  cursor: not-allowed;
}
.h2jeco-newsletter-widget__gdpr {
  font-size: 11px;
  line-height: 1.4;
  color: var(--h2j-text-light, #6b7280);
  margin-top: 6px;
}

/* Megamenu item wrapping a newsletter widget: remove default row padding
   so the widget controls its own padding. */
.h2j-mm-tree__item--module_widget > .h2j-mm-html-content:has(.h2jeco-newsletter-widget) {
  padding: 0;
}

/* =========================================================================
   LINKS GROUP (v2.4.0.16)
   Conteneur de titre + liste compacte de liens, style footer ("Produits",
   "Notre société", "Contact"...). Le titre est rendu petit capital-case,
   les liens en liste simple sans chevron ni accordion.
   Les enfants déclarés sous un item links_group sont flat, pas d'indentation.
   ========================================================================= */
.h2j-mm-tree__item--links-group {
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--h2j-border, #e5e7eb);
  list-style: none;
}
.h2j-mm-links-group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--h2j-text, #1a1f2c);
  margin: 0 0 8px;
  line-height: 1.3;
}
.h2j-mm-links-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 18px;
  color: var(--h2j-text-light, #6b7280);
}
.h2j-mm-links-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.h2j-mm-links-group__item {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
.h2j-mm-links-group__link {
  display: block;
  padding: 4px 0 4px 4px;
  font-size: 13px;
  color: var(--h2j-text, #1a1f2c);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.12s ease, padding-left 0.12s ease;
}
.h2j-mm-links-group__link:hover,
.h2j-mm-links-group__link:focus-visible {
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
  padding-left: 8px;
  outline: none;
}

/* =========================================================================
   COMPACT MODE + WAVE EFFECT (v2.4.0.16)
   Le megamenu est nativement plus compact que la version originale : les
   items sont 15% plus courts, fonts légèrement réduites, paddings serrés.
   Appliqué par défaut sur toute la sidebar pour un look pro moderne.
   ========================================================================= */

/* ----- Compacter les rows principales ----- */
.h2j-mm-tree__row {
  min-height: 44px; /* était 48px */
}
.h2j-mm-tree__link {
  padding: 10px 20px;    /* était 14px 20px */
  font-size: 15px;        /* était 16px */
  gap: 10px;              /* était 12px */
}
.h2j-mm-tree__toggle {
  width: 44px;            /* était 48px */
}
.h2j-mm-tree__icon-wrap,
.h2j-mm-tree__icon-wrap .h2j-icon,
.h2j-mm-tree__icon-wrap .material-icons,
.h2j-mm-tree__icon-wrap svg,
.h2j-mm-tree__icon-wrap img {
  width: 20px;            /* était 22px */
  height: 20px;
  font-size: 20px;
}
.h2j-mm-tree--sub .h2j-mm-tree__link {
  font-size: 13px;        /* était 14px */
  padding-top: 9px;
  padding-bottom: 9px;
}
.h2j-mm-tree--sub .h2j-mm-tree--sub .h2j-mm-tree__link {
  font-size: 12.5px;
}

/* Sub-tree width réduit également le toggle */
.h2j-mm-tree--sub .h2j-mm-tree__toggle {
  width: 40px;
}

/* Compacter sections du header (switchers, auth, cart, search) */
.h2j-mm-sidebar__header {
  padding: 12px 16px;     /* était 16px 20px */
}
.h2j-mm-sidebar__search {
  padding: 10px 16px 4px;
}
.h2j-mm-sidebar__auth {
  padding: 6px 16px 10px;
}
.h2j-mm-sidebar__cart {
  padding: 0 16px 10px;
}
.h2j-mm-auth-btn {
  padding: 8px 8px;       /* était 10px 8px */
  font-size: 12.5px;
}
.h2j-mm-auth-card,
.h2j-mm-cart-card {
  padding: 8px 12px;      /* était 10px 14px */
}
.h2j-mm-auth-card__avatar {
  width: 32px;            /* était 36px */
  height: 32px;
  font-size: 13px;
}
.h2j-mm-cart-card__icon {
  width: 32px;
  height: 32px;
}
.h2j-mm-cart-card__icon svg {
  width: 22px;
  height: 22px;
}
.h2j-mm-search__input {
  padding: 8px 14px;      /* était 10px 14px */
  font-size: 13.5px;
}
.h2j-mm-search__btn {
  width: 38px;
  height: 38px;
}

/* Compacter le widget newsletter */
.h2jeco-newsletter-widget {
  padding: 14px 16px 16px;
}
.h2jeco-newsletter-widget__title {
  font-size: 13.5px;
}

/* Compacter le widget links_group */
.h2j-mm-tree__item--links-group {
  padding: 12px 16px 8px;
}
.h2j-mm-links-group__title {
  font-size: 14px;
}
.h2j-mm-links-group__link {
  padding: 3px 0 3px 4px;
  font-size: 12.5px;
}

/* ----- Wave effect (effet vague) au niveau du drawer global -----
   7 presets d'animation sélectionnables via BO (H2JECO_MEGAMENU_ANIM).
   Chaque preset est scopé via une classe .h2j-mm-sidebar--anim-<preset>
   appliquée sur l'élément aside dans megamenu.tpl.

   Défaut BO : 'slide' (classique, neutre).
   Tester en BO : Ecosystem > MegaMenu > Animation preset.
*/

/* === Preset 1 : SLIDE (classique, neutre) === */
.h2j-mm-sidebar--anim-slide {
  /* Durée augmentée à 0.8s pour voir l'effet smooth */
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Preset 2 : ELASTIC (rebond élastique marqué, effet spring) ===
   Keyframes dédiées pour garantir un effet spring visible à l'ouverture ET
   à la fermeture. L'ouverture dépasse (overshoot +18px) avant de revenir
   en 2 oscillations. La fermeture a un micro-étirement vers la droite
   (comme un élastique qu'on lâche) avant de filer hors écran. */
.h2j-mm-sidebar--anim-elastic {
  transition: transform 0.3s ease;
}
@keyframes h2j-mm-elastic-open {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(18px); }   /* premier dépassement */
  75%  { transform: translateX(-6px); }   /* retour amorti */
  88%  { transform: translateX(3px); }    /* second dépassement léger */
  100% { transform: translateX(0); }
}
@keyframes h2j-mm-elastic-close {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(18px); }   /* étirement vers la droite avant de filer */
  100% { transform: translateX(-100%); }
}
.h2j-mm-sidebar--anim-elastic.is-open:not(.is-closing) {
  animation: h2j-mm-elastic-open 1.0s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.h2j-mm-sidebar--anim-elastic.is-closing {
  animation: h2j-mm-elastic-close 0.9s cubic-bezier(0.6, 0, 0.7, 0.2) both;
}

/* === Preset 3 : BOUNCE (rebond ample, effet plus marqué) ===
   Note : l'overshoot du cubic-bezier ne marche visuellement qu'à l'OUVERTURE
   (le drawer dépasse puis revient). À la fermeture, l'overshoot tenterait
   de glisser au-delà de translateX(-100%) = déjà hors écran, donc invisible.
   Pour rendre l'effet symétrique, on utilise 2 @keyframes (open/close)
   au lieu d'une transition. */
.h2j-mm-sidebar--anim-bounce {
  transition: transform 1.0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes h2j-mm-bounce-open {
  0%   { transform: translateX(-100%); }
  70%  { transform: translateX(12px); }   /* overshoot visible */
  100% { transform: translateX(0); }
}
@keyframes h2j-mm-bounce-close {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(12px); }   /* micro-recul avant de fuir à gauche */
  100% { transform: translateX(-100%); }
}
.h2j-mm-sidebar--anim-bounce.is-open:not(.is-closing) {
  animation: h2j-mm-bounce-open 1.0s cubic-bezier(0.34, 1.1, 0.64, 1) both;
  transition: none;
}
.h2j-mm-sidebar--anim-bounce.is-closing {
  animation: h2j-mm-bounce-close 1.0s cubic-bezier(0.6, 0, 0.7, 0.2) both;
  transition: none;
}

/* === Preset 4 : FADE-SLIDE (fade + slide combinés, doux et pro) === */
.h2j-mm-sidebar--anim-fade-slide {
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.85s ease-out;
}
.h2j-mm-sidebar--anim-fade-slide.is-open {
  opacity: 1;
}

/* === Preset 5 : WAVE-ITEMS (drawer slide simple + vague staggered sur les items) ===
   Le drawer glisse classiquement, mais les items apparaissent un par un
   en vague depuis le haut (effet cascade). À la fermeture, les items
   disparaissent dans l'ordre INVERSE (du bas vers le haut) avec translateX
   pour renforcer l'effet vague.
*/
.h2j-mm-sidebar--anim-wave-items {
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes h2j-mm-wave-item-in {
  0%   { opacity: 0; transform: translateX(-30px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes h2j-mm-wave-item-out {
  0%   { opacity: 1; transform: translateX(0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-30px); }
}
/* OUVERTURE : cascade du haut vers le bas */
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item {
  animation: h2j-mm-wave-item-in 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(1)  { animation-delay: 0.15s; }
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(2)  { animation-delay: 0.22s; }
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(3)  { animation-delay: 0.29s; }
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(4)  { animation-delay: 0.36s; }
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(5)  { animation-delay: 0.43s; }
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(6)  { animation-delay: 0.50s; }
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(7)  { animation-delay: 0.57s; }
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(8)  { animation-delay: 0.64s; }
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(9)  { animation-delay: 0.71s; }
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(10) { animation-delay: 0.78s; }
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(11) { animation-delay: 0.82s; }
.h2j-mm-sidebar--anim-wave-items.is-open:not(.is-closing) .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(12) { animation-delay: 0.86s; }

/* FERMETURE : cascade INVERSÉE (du bas vers le haut) pour effet symétrique.
   Les items s'effacent un par un avec translateX négatif. */
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item {
  animation: h2j-mm-wave-item-out 0.5s cubic-bezier(0.4, 0, 1, 0.8) both;
}
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(12) { animation-delay: 0.00s; }
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(11) { animation-delay: 0.04s; }
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(10) { animation-delay: 0.08s; }
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(9)  { animation-delay: 0.12s; }
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(8)  { animation-delay: 0.16s; }
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(7)  { animation-delay: 0.20s; }
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(6)  { animation-delay: 0.24s; }
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(5)  { animation-delay: 0.28s; }
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(4)  { animation-delay: 0.32s; }
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(3)  { animation-delay: 0.36s; }
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(2)  { animation-delay: 0.40s; }
.h2j-mm-sidebar--anim-wave-items.is-closing .h2j-mm-tree--root > .h2j-mm-tree__item:nth-child(1)  { animation-delay: 0.44s; }

/* === Preset 6 : SCALE-IN (le drawer grandit depuis le burger) ===
   Le drawer part d'une petite taille en haut-à-gauche et grandit vers sa
   taille normale. Combine scale + translateX pour un effet origami/zoom.
*/
.h2j-mm-sidebar--anim-scale-in {
  transform-origin: 0 0;
  transition: transform 0.9s cubic-bezier(0.34, 1.15, 0.64, 1),
              opacity 0.8s ease-out;
  opacity: 0.4;
}
.h2j-mm-sidebar--anim-scale-in:not(.is-open) {
  transform: translateX(-100%) scale(0.85);
}
.h2j-mm-sidebar--anim-scale-in.is-open {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* === Preset 7 : WAVE-EDGE (vague sinusoïdale sur le bord droit du drawer) ===

   Animation en 2 temps : neutre → déformé → neutre.
   Le bord droit du drawer se déforme en vague sinusoïdale pendant
   l'ouverture/fermeture puis revient à sa position rectangulaire.

   Reproduction via @keyframes CSS :
     0%   = rectangle quasi droit (position de repos)
     30%  = vague déformée au maximum
     100% = rectangle quasi droit (retour au repos)

   Deux animations séparées :
     - wave-open-seq   : bord droit rentre vers l'intérieur (concave)
     - wave-close-seq  : bord droit bombe vers l'extérieur (convexe)

   Déclenchées via classes .is-open (ouverture) et .is-closing (fermeture).
   Le JS gère l'ajout/retrait de .is-closing avec le timing approprié.
*/

/* === Preset 7 : WAVE-EDGE (vague sinusoïdale sur le bord droit du drawer) ===

   Animation en 2 temps : neutre → déformé → neutre.
   Le bord droit du drawer se déforme en vague sinusoïdale pendant
   l'ouverture puis revient à sa position rectangulaire.

   Reproduction via @keyframes CSS avec clip-path polygon 11 points :
     0%   = rectangle quasi droit (position de repos)
     30%  = vague déformée au maximum (concave, bord rentre vers l'intérieur)
     100% = rectangle quasi droit (retour au repos)

   L'effet est déclenché à l'ouverture via .is-open, et à la fermeture via
   .is-closing (géré par le JS).
*/

/* Polygon "neutre" — presque rectangle, légère concavité invisible.
   C'est la position de REPOS : appliqué aux états ouvert ET fermé. */
.h2j-mm-sidebar--anim-wave-edge {
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  clip-path: polygon(
    0%   0%,
    100% 0%,
    100% 10%,
    100% 25%,
    100% 40%,
    100% 50%,
    100% 60%,
    100% 75%,
    100% 90%,
    100% 100%,
    0%   100%
  );
  box-shadow: none;
}

/* @keyframes OUVERTURE : bord droit RENTRE vers l'intérieur au milieu,
   puis revient à la position de repos. La vague passe de 100% à ~75%
   au milieu (concave), puis retour à 100%. Total 1.15s. */
@keyframes h2j-mm-wave-open-seq {
  0% {
    clip-path: polygon(
      0%  0%,   100% 0%,
      100% 10%, 100% 25%, 100% 40%,
      100% 50%,
      100% 60%, 100% 75%, 100% 90%,
      100% 100%,0%  100%
    );
  }
  30% {
    /* Pic de déformation : bord droit rentre au milieu (concave vers gauche). */
    clip-path: polygon(
      0%  0%,   100% 0%,
      95%  10%, 85%  25%, 78%  40%,
      75%  50%,
      78%  60%, 85%  75%, 95%  90%,
      100% 100%, 0%  100%
    );
  }
  100% {
    clip-path: polygon(
      0%  0%,   100% 0%,
      100% 10%, 100% 25%, 100% 40%,
      100% 50%,
      100% 60%, 100% 75%, 100% 90%,
      100% 100%,0%  100%
    );
  }
}

/* @keyframes FERMETURE UNIFIÉE : gère CLIP-PATH + TRANSFORM en une seule anim.

   IMPORTANT — Pourquoi concave et pas convexe :
   clip-path ne peut que MASQUER du contenu existant, pas en ajouter. Un polygon
   avec x=125% ne crée aucun effet visuel car le drawer lui-même ne s'étend pas
   au-delà de 320px — il n'y a rien à afficher à 400px.
   Solution : faire BOMBER le bord vers l'INTÉRIEUR (concave, x=75%). Le bord droit
   rentre dans le drawer comme une vague qui se creuse, puis revient neutre.

   Timeline 1.2s :
     0% → 25%  : clip-path creuse (concave), transform reste à 0 (drawer en place)
     25% → 50% : clip-path revient neutre, transform reste à 0
     50% → 100%: transform glisse 0 → -100% (drawer part hors écran)
*/
@keyframes h2j-mm-wave-close-seq {
  0% {
    transform: translateX(0);
    clip-path: polygon(
      0%  0%,   100% 0%,
      100% 10%, 100% 25%, 100% 40%,
      100% 50%,
      100% 60%, 100% 75%, 100% 90%,
      100% 100%,0%  100%
    );
  }
  25% {
    /* Pic de déformation CONCAVE : bord droit rentre vers l'intérieur */
    transform: translateX(0);
    clip-path: polygon(
      0%  0%,   100% 0%,
      93%  10%, 85%  25%, 78%  40%,
      75%  50%,
      78%  60%, 85%  75%, 93%  90%,
      100% 100%, 0%  100%
    );
  }
  50% {
    /* Retour neutre — drawer toujours en place */
    transform: translateX(0);
    clip-path: polygon(
      0%  0%,   100% 0%,
      100% 10%, 100% 25%, 100% 40%,
      100% 50%,
      100% 60%, 100% 75%, 100% 90%,
      100% 100%,0%  100%
    );
  }
  100% {
    /* Drawer a glissé hors écran */
    transform: translateX(-100%);
    clip-path: polygon(
      0%  0%,   100% 0%,
      100% 10%, 100% 25%, 100% 40%,
      100% 50%,
      100% 60%, 100% 75%, 100% 90%,
      100% 100%,0%  100%
    );
  }
}

/* Animation OUVERTURE : clip-path vague concave pendant que le drawer glisse.
   Le drawer utilise la transition transform standard (0.8s) définie plus haut. */
.h2j-mm-sidebar--anim-wave-edge.is-open:not(.is-closing) {
  animation: h2j-mm-wave-open-seq 1.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Animation FERMETURE UNIFIÉE : gère clip-path + transform en une seule passe.
   Durée 1.2s :
     - 0 → 600ms : wave bombe puis revient neutre, drawer en place
     - 600 → 1200ms : drawer glisse hors écran (transform animé par la keyframe)
   
   Le JS retire .is-open AVANT d'ajouter .is-closing pour libérer le clip-path
   de wave-open-seq (qui a fill-mode:both et restait locké sinon).
*/
.h2j-mm-sidebar--anim-wave-edge.is-closing {
  animation: h2j-mm-wave-close-seq 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Fallback pour navigateurs ne supportant pas clip-path: polygon() — très rare
   (<1% en 2026, support depuis 2014). Sur ces navigateurs, le drawer s'ouvre
   en rectangle classique, sans effet vague, mais sans aucune casse visuelle. */
@supports not (clip-path: polygon(0 0, 10px 10px, 0 10px)) {
  .h2j-mm-sidebar--anim-wave-edge,
  .h2j-mm-sidebar--anim-wave-edge.is-open,
  .h2j-mm-sidebar--anim-wave-edge.is-closing {
    clip-path: none;
    animation: none;
  }
}

/* Respect de prefers-reduced-motion : transition simple sans effet sur tous les presets */
@media (prefers-reduced-motion: reduce) {
  .h2j-mm-sidebar[class*="h2j-mm-sidebar--anim-"] {
    transition: transform 0.2s ease !important;
    animation: none !important;
  }
  .h2j-mm-sidebar[class*="h2j-mm-sidebar--anim-"] .h2j-mm-tree__item {
    animation: none !important;
  }
}

/* =========================================================================
   v2.11.22 — WIDGET WRAPPED : widgets H2J intégrés dans un links-group wrapper
   =========================================================================
   Quand l'user définit un label et/ou une icône sur un item module_widget,
   _node.tpl wrappe le widget avec le pattern .h2j-mm-links-group ("Produit",
   "Notre société"...) pour harmoniser visuellement le drawer. Les règles
   ci-dessous :
     1. Masquent les titres internes des widgets (company_info, follow_us,
        newsletter) évitant le doublon avec le titre du wrapper.
     2. Neutralisent les paddings/borders propres au widget (qui sont déjà
        gérés par le wrapper .h2j-mm-tree__item--links-group).
   Sans label ni icône BO → pas de wrapper → ces règles ne s'appliquent pas
   (rendu self-contained historique préservé, ex: chat EVE).
   ========================================================================= */

/* 1. Masquer les titres internes des widgets quand wrappés */
.h2j-mm-tree__item--widget-wrapped .h2j-cw__title,
.h2j-mm-tree__item--widget-wrapped .h2jeco-follow-us-widget__title,
.h2j-mm-tree__item--widget-wrapped .h2jeco-newsletter-widget__title {
  display: none !important;
}

/* 2. Neutraliser les paddings/borders propres au widget company_info
   (sa variante ctx-megamenu_sidebar applique déjà un padding 14px 20px 10px
   + border-bottom qui doublonnerait avec le wrapper). */
.h2j-mm-tree__item--widget-wrapped .h2j-cw {
  padding: 0;
  border: none;
}
.h2j-mm-tree__item--widget-wrapped .h2j-cw--ctx-megamenu_sidebar {
  padding: 0;
  border: none;
}

/* 3. Container du widget au sein du wrapper : respecte l'alignement du titre
   ainsi que le padding-left 4px utilisé par .h2j-mm-links-group__link. */
.h2j-mm-tree__item--widget-wrapped .h2j-mm-widget-content {
  padding: 0;
}

/* =========================================================================
   v2.11.23 — ACTIVE PATH : catégorie courante + auto-expand du chemin
   =========================================================================
   Quand le visiteur est sur une page catégorie, CMS, manufacturer ou PS,
   le JS h2j-megamenu.js détecte le lien correspondant dans le drawer et :
     1. Ajoute la classe --active sur son <li>
     2. Expand tous les .h2j-mm-tree--sub ancêtres
     3. Pose aria-current='page' sur le <a> pour l'accessibilité
   Les règles ci-dessous donnent au lien actif un style gras + accent pour
   aider le visiteur à se situer dans un gros catalogue (170+ catégories).
   ========================================================================= */

/* Lien actif (catégorie ou lien standard du tree) : gras + couleur accent */
.h2j-mm-tree__item--active > .h2j-mm-tree__row > .h2j-mm-tree__link,
.h2j-mm-tree__link[aria-current="page"] {
  font-weight: 700;
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
}

/* Si l'item actif a un icône, on la teinte aussi avec l'accent */
.h2j-mm-tree__item--active > .h2j-mm-tree__row > .h2j-mm-tree__link .h2j-mm-tree__icon-wrap,
.h2j-mm-tree__item--active > .h2j-mm-tree__row > .h2j-mm-tree__link .h2j-mm-tree__icon-wrap .material-icons {
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
}

/* Lien actif dans un links_group (enfant plat d'un item --links-group) */
.h2j-mm-links-group__link[aria-current="page"] {
  font-weight: 700;
  color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
}