/* ============================================================================
   MEGAMENU LCDCE (La Cave des CE) — design maquette « Vins+Vins - LCDCE - Menu »
   Cible : module posmegamenu (#_desktop_megamenu) sur theme_ecolife (shop 1, racine).
   Charte (styles.css de la maquette) : barre blanche, rouge #e2001a, glyphes TEAL,
   Montserrat MAJUSCULES grasses, panneau liseré rouge 3px. Scopé #_desktop_megamenu.
   ============================================================================ */
:root {
  --lc-red: #e2001a;
  --lc-red-dark: #b80016;
  --lc-ink: #1c1c1c;
  --lc-text: #3b3b3b;
  --lc-muted: #7c7c7c;
  --lc-faint: #a8a6a3;
  --lc-border: #e7e4e0;
  --lc-border-soft: #f0eeea;
  --lc-grey-50: #faf9f7;
  --lc-grey-100: #f4f2ee;
  --lc-teal: #5e9ca0;
  --lc-teal-dark: #4c878b;
  --lc-teal-tint: #eef5f5;
  --lc-rouge: #6e1414;
  --lc-blanc: #e3cf8f;
  --lc-rose: #e9a6a0;
  --lc-champ: #efe2b0;
  --lc-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================================
   1. BARRE NAV (déjà blanche sur theme_ecolife) + entrées
   ============================================================================ */
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item > a {
  position: relative !important;
  font-family: var(--lc-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;            /* live lacavedesce.fr = 600 */
  letter-spacing: normal !important;       /* live = normal */
  text-transform: uppercase !important;
  color: #161616 !important;               /* live = #161616 */
  padding: 22px 0 !important;              /* live = padding 0, espacement via gap 30px */
  margin: 0 !important;
  transition: color .16s !important;
}
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item > a:hover,
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item:hover > a,
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item.active > a {
  color: #e83c4d !important;               /* live lacavedesce.fr survol/actif */
}
/* pas de flèche ▾ (maquette : texte seul) */
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item > a i.icon-rt-arrow-down { display: none !important; }
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item > a { flex-direction: row !important; white-space: nowrap !important; }
/* live : espacement uniquement par le gap 30px (on neutralise le padding/margin du <li> du thème) */
#_desktop_megamenu .pos-menu-horizontal .menu-content > li.menu-item { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
#_desktop_megamenu .pos-menu-horizontal .menu-content { flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 30px !important; }
/* la colonne menu prend la place, la recherche se réduit (sinon COFFRETS passe sous la recherche) */
.elementor-element-55d173a { flex: 0 0 290px !important; max-width: 290px !important; width: 290px !important; }   /* colonne recherche */
.elementor-element-53a9773 { flex: 1 1 auto !important; max-width: none !important; width: auto !important; }       /* colonne menu */

/* recherche : pilule grise (déjà proche) */
.elementor-section:has(#_desktop_megamenu) .elementor-search__input {
  background: var(--lc-grey-100) !important; border: 1px solid var(--lc-border) !important;
  border-radius: 6px !important; height: 44px !important; font-family: var(--lc-sans) !important;
  font-size: 14px !important; color: var(--lc-ink) !important;
}
.elementor-section:has(#_desktop_megamenu) .elementor-search__input::placeholder { color: var(--lc-faint) !important; }

/* ============================================================================
   2. PANNEAU
   ============================================================================ */
/* bandeau = pleine largeur écran (le skin blanc/liseré rouge/ombre est sur .menu-dropdown) */
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown {
  background: #fff !important;
  border: none !important;
  border-bottom: 3px solid var(--lc-red) !important;
  border-radius: 0 !important;
  box-shadow: 0 28px 48px -22px rgba(0,0,0,.34) !important;
  /* le thème transitionne 'left' → annule la transition de position (sinon left bloqué) */
  transition: opacity .18s ease, visibility .18s ease !important;
}
/* contenu = largeur fixe (conteneur de la page), centré sur la zone de contenu → colonnes alignées à gauche sous le menu */
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .pos-sub-inner {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 1360px !important;             /* ≈ largeur du conteneur de page (remplit, plus de vide à droite) */
  margin-left: calc(50vw - 695px) !important; /* = bord gauche du menu (~107) → aligné à gauche, colonnes sous le menu */
  margin-right: 0 !important;
}
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item:hover > .menu-dropdown { opacity: 1 !important; visibility: visible !important; }
@media (prefers-reduced-motion: no-preference) {
  #_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item:hover > .menu-dropdown .pos-sub-inner { animation: lcMegaIn .16s ease; }
}
@keyframes lcMegaIn { from { transform: translateY(-7px); } to { transform: none; } }

/* panneaux alignés au bord gauche du contenu (comme la maquette) */
#_desktop_megamenu.mm-static .pos-menu-horizontal { position: relative; }
#_desktop_megamenu.mm-static .menu-content > li.menu-item { position: static; }
/* full-bleed : le bandeau part du bord gauche de l'écran et fait 100vw, collé sous la navbar.
   695 = (conteneur 1450/2) - décalage menu(30) ; ancrage sur .pos-menu-horizontal (left ~107). */
#_desktop_megamenu.mm-static .menu-content > li.menu-item > .menu-dropdown {
  left: calc(695px - 50vw) !important; right: auto !important; top: 100% !important; width: 100vw !important;
}

/* ============================================================================
   3. COMPOSANTS (port de la maquette LCDCE, scopé)
   ============================================================================ */
#_desktop_megamenu .panel-flex { display: flex; align-items: stretch; }
#_desktop_megamenu .cats-zone { padding: 16px 30px 24px; display: grid; gap: 22px; flex: 1; }
#_desktop_megamenu .cats-zone.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#_desktop_megamenu .cats-zone.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#_desktop_megamenu .cats-zone.bx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 26px; }

#_desktop_megamenu .zone-eyebrow {
  display: flex; align-items: center; gap: 8px; font-family: var(--lc-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lc-muted); margin-bottom: 12px;
}
#_desktop_megamenu .zone-eyebrow svg { color: var(--lc-red); flex-shrink: 0; }

/* zone filtres gauche (teintée, border-right) */
#_desktop_megamenu .quick-zone { background: var(--lc-grey-50) !important; border-right: 1px solid var(--lc-border); padding: 16px 30px 14px !important; }
#_desktop_megamenu .qgrid { display: grid; grid-template-columns: repeat(3, minmax(168px, 1fr)); gap: 22px; }
#_desktop_megamenu .qblock { min-width: 0; }
#_desktop_megamenu .qhead {
  display: flex; align-items: center; gap: 7px; font-family: var(--lc-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lc-faint); margin-bottom: 8px;
}
#_desktop_megamenu .qhead-ic { display: inline-flex; color: var(--lc-teal-dark); }
#_desktop_megamenu .qhead-ic svg { width: 13px; height: 13px; }
#_desktop_megamenu .qlist { display: flex; flex-direction: column; gap: 3px; }
/* 2e bloc dans la zone filtres (ex. Champagne : « Accès rapides » sous « Style de Champagne ») */
#_desktop_megamenu .quick-zone .qblock-2 { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--lc-border); }

/* item filtre (glyphe teal / pastille) */
#_desktop_megamenu .filt-item {
  display: flex; align-items: flex-start; gap: 9px; padding: 3px 9px; margin: 0 -9px;
  font-family: var(--lc-sans); font-size: 13px; font-weight: 500; color: var(--lc-text);
  cursor: pointer; border-radius: 4px; transition: background .14s, color .14s;
}
#_desktop_megamenu .filt-item:hover { background: #fff; color: var(--lc-ink); box-shadow: inset 0 0 0 1px var(--lc-border); }
#_desktop_megamenu .filt-item .fglyph { display: inline-flex; color: var(--lc-faint); flex-shrink: 0; margin-top: 1px; }
#_desktop_megamenu .filt-item:hover .fglyph { color: var(--lc-teal-dark); }
#_desktop_megamenu .filt-item .pdot { width: 13px; height: 13px; border-radius: 50%; margin-top: 1px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
#_desktop_megamenu .pdot.rouge { background: var(--lc-rouge); }
#_desktop_megamenu .pdot.blanc { background: var(--lc-blanc); }
#_desktop_megamenu .pdot.rose { background: var(--lc-rose); }
#_desktop_megamenu .pdot.champagne { background: var(--lc-champ); }
#_desktop_megamenu .filt-l { min-width: 0; line-height: 1.3; }

/* colonnes catégories / en-têtes (UPPERCASE + soulignement rouge) */
#_desktop_megamenu .rcol { min-width: 0; display: flex; flex-direction: column; }
#_desktop_megamenu .rcol.span2 { grid-column: span 2; }
#_desktop_megamenu .rcol.span2 .rlist { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 22px; }
#_desktop_megamenu .col-head,
#_desktop_megamenu .menu-dropdown .column_title,
#_desktop_megamenu .menu-dropdown .my-sub-tit {
  position: relative; display: block;
  font-family: var(--lc-sans) !important; font-size: 12.5px !important; font-weight: 700 !important;
  letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--lc-ink) !important;
  padding-bottom: 6px !important; margin: 0 0 7px !important; border-bottom: 1px solid var(--lc-border-soft) !important;
}
#_desktop_megamenu .col-head::after,
#_desktop_megamenu .menu-dropdown .column_title::after,
#_desktop_megamenu .menu-dropdown .my-sub-tit::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 26px; height: 3px; background: var(--lc-red);
}
#_desktop_megamenu .menu-dropdown .my-sub-tit:has(br) { border-bottom: none !important; color: transparent !important; }
#_desktop_megamenu .menu-dropdown .my-sub-tit:has(br)::after { display: none !important; }
#_desktop_megamenu .menu-dropdown .my-sub-tit:empty, #_desktop_megamenu .menu-dropdown .column_title:empty { display: none !important; }

#_desktop_megamenu .rlist { display: flex; flex-direction: column; gap: 3px; }
#_desktop_megamenu .rub-item,
#_desktop_megamenu .menu-dropdown ul.ul-column > li.submenu-item > a {
  font-family: var(--lc-sans) !important; font-size: 13.5px !important; font-weight: 400 !important;
  color: var(--lc-text) !important; padding: 2px 0 !important; line-height: 1.34 !important;
  display: block !important; text-transform: none !important; letter-spacing: 0 !important; transition: color .14s !important;
}
#_desktop_megamenu .rub-item:hover,
#_desktop_megamenu .menu-dropdown ul.ul-column > li.submenu-item > a:hover { color: var(--lc-red) !important; }
#_desktop_megamenu .menu-dropdown ul.ul-column { margin: 0 !important; padding: 0 !important; list-style: none !important; }

/* « voir plus » */
#_desktop_megamenu .more {
  margin-top: 3px; padding-top: 0px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--lc-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lc-red); cursor: pointer; opacity: .85;
}
#_desktop_megamenu .more:hover { opacity: 1; }
#_desktop_megamenu .more svg { transition: transform .16s; }
#_desktop_megamenu .more:hover svg { transform: translateX(3px); }

/* rail filtres droite (teinté) */
#_desktop_megamenu .quick-rail {
  flex: 0 0 246px; background: var(--lc-grey-50); border-left: 1px solid var(--lc-border);
  padding: 16px 24px 14px; display: flex; flex-direction: column;
}
#_desktop_megamenu .quick-rail.narrow { flex-basis: 224px; }
#_desktop_megamenu .rail-cta {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lc-border);
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--lc-sans);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lc-red); cursor: pointer;
}
#_desktop_megamenu .rail-cta svg { transition: transform .16s; }
#_desktop_megamenu .rail-cta:hover svg { transform: translateX(3px); }

/* OFFRES — cartes (icône teal-tint, radius) */
#_desktop_megamenu .offres-wrap { padding: 16px 30px 26px; }
#_desktop_megamenu .sel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 8px 18px; }
#_desktop_megamenu .sel-card {
  display: flex; align-items: center; gap: 13px; padding: 8px 14px;
  background: #fff; border: 1px solid var(--lc-border); border-radius: 7px;
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
#_desktop_megamenu .sel-card:hover { background: var(--lc-teal-tint); border-color: var(--lc-teal-dark); box-shadow: 0 2px 8px -4px rgba(76,135,139,.4); }
#_desktop_megamenu .sel-fic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--lc-teal-tint); border-radius: 7px; color: var(--lc-teal-dark); flex-shrink: 0; }
#_desktop_megamenu .sel-card:hover .sel-fic { background: var(--lc-teal-dark); color: #fff; }
#_desktop_megamenu .sel-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
#_desktop_megamenu .sel-l { font-family: var(--lc-sans); font-size: 14px; font-weight: 600; color: var(--lc-ink); }
#_desktop_megamenu .sel-d { font-family: var(--lc-sans); font-size: 12px; font-weight: 500; color: var(--lc-muted); }
#_desktop_megamenu .sel-arr { color: var(--lc-faint); display: inline-flex; flex-shrink: 0; }
#_desktop_megamenu .sel-card:hover .sel-arr { color: var(--lc-teal-dark); }

/* familles (spiritueux / coffrets) */
#_desktop_megamenu .fam-wrap { padding: 16px 30px 24px; flex: 1; }
#_desktop_megamenu .fam-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 40px; margin-top: 6px; }
#_desktop_megamenu .fam-grid .rub-item { border-bottom: 1px solid var(--lc-border-soft); }
#_desktop_megamenu .fam-grid.one { grid-template-columns: 1fr; }

/* disposition statique : flush + équilibre flex */
#_desktop_megamenu .pos-sub-inner.mm-flush { padding: 0 !important; }
#_desktop_megamenu .panel-flex > .quick-zone { flex: 0 0 auto; }
#_desktop_megamenu .panel-flex > .quick-zone + .cats-zone { flex: 1 1 auto; }
#_desktop_megamenu .panel-flex > .cats-zone:first-child { flex: 1 1 auto; }
#_desktop_megamenu .panel-flex > .quick-rail { flex: 0 0 246px; }
#_desktop_megamenu .panel-flex > .quick-rail.narrow { flex-basis: 224px; }

/* ============================================================================
   4. MOBILE LCDCE (#mobile-megamenu) — accordéon, charte LCDCE
   ============================================================================ */
#mobile-megamenu.mm-static-m .menu-dropdown { display: none; }
#mobile-megamenu .menu-content { display: block !important; }
#mobile-megamenu .menu-content > li.menu-item { border-top: 1px solid var(--lc-border-soft) !important; position: relative !important; }
#mobile-megamenu .menu-content > li.menu-item:first-child { border-top: none !important; }
#mobile-megamenu .menu-content > li.menu-item.active { background: var(--lc-grey-50) !important; }
#mobile-megamenu .menu-content > li.menu-item > a {
  font-family: var(--lc-sans) !important; font-size: 14px !important; font-weight: 700 !important;
  letter-spacing: .05em !important; text-transform: uppercase !important; color: var(--lc-ink) !important;
  padding: 16px 44px 16px 18px !important;
}
#mobile-megamenu .menu-content > li.menu-item.active > a,
#mobile-megamenu .menu-content > li.menu-item > a:hover { color: var(--lc-red) !important; }
#mobile-megamenu .icon-drop-mobile { position: absolute; top: 13px; right: 16px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#mobile-megamenu .icon-drop-mobile::before { content: '+'; font-family: var(--lc-sans); font-size: 21px; font-weight: 400; line-height: 1; color: var(--lc-muted); }
#mobile-megamenu .icon-drop-mobile.open_menu::before { content: '\2212'; color: var(--lc-red); }
#mobile-megamenu .icon-drop-mobile i { display: none !important; }
#mobile-megamenu .menu-dropdown .pos-sub-inner { padding: 4px 18px 16px !important; background: #fff !important; border: none !important; box-shadow: none !important; }
/* en-têtes de section */
#mobile-megamenu .menu-dropdown .my-sub-tit,
#mobile-megamenu .menu-dropdown .column_title {
  position: relative; display: block;
  font-family: var(--lc-sans) !important; font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--lc-ink) !important;
  margin: 14px 0 8px !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--lc-border-soft) !important;
}
#mobile-megamenu .menu-dropdown .my-sub-tit::after,
#mobile-megamenu .menu-dropdown .column_title::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 24px; height: 3px; background: var(--lc-red); }
/* items */
#mobile-megamenu .menu-dropdown ul.ul-column { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#mobile-megamenu .menu-dropdown ul.ul-column > li.submenu-item > a {
  display: block !important; font-family: var(--lc-sans) !important; font-size: 13.5px !important; font-weight: 500 !important;
  color: var(--lc-text) !important; padding: 7px 0 !important; line-height: 1.3 !important;
}
#mobile-megamenu .menu-dropdown ul.ul-column > li.submenu-item > a:hover { color: var(--lc-red) !important; }
/* filtres (glyphe teal / pastille) */
#mobile-megamenu .m-filts { display: flex; flex-direction: column; gap: 1px; margin: 0 0 6px; }
#mobile-megamenu .filt-item { display: flex; align-items: center; gap: 9px; padding: 7px 2px; font-family: var(--lc-sans); font-size: 13px; font-weight: 500; color: var(--lc-text); }
#mobile-megamenu .filt-item .fglyph { color: var(--lc-faint); display: inline-flex; flex-shrink: 0; }
#mobile-megamenu .filt-item .pdot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
#mobile-megamenu .pdot.rouge { background: var(--lc-rouge); }
#mobile-megamenu .pdot.blanc { background: var(--lc-blanc); }
#mobile-megamenu .pdot.rose { background: var(--lc-rose); }
#mobile-megamenu .pdot.champagne { background: var(--lc-champ); }
/* cartes OFFRES (1 colonne) */
#mobile-megamenu .sel-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 6px 0; }
#mobile-megamenu .sel-card { display: flex; align-items: center; gap: 12px; padding: 11px 12px; background: var(--lc-grey-50); border: 1px solid var(--lc-border); border-radius: 6px; }
#mobile-megamenu .sel-fic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--lc-teal-tint); border-radius: 6px; color: var(--lc-teal-dark); flex-shrink: 0; }
#mobile-megamenu .sel-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#mobile-megamenu .sel-l { font-family: var(--lc-sans); font-size: 14px; font-weight: 600; color: var(--lc-ink); }
#mobile-megamenu .sel-d { font-family: var(--lc-sans); font-size: 12px; font-weight: 500; color: var(--lc-muted); }
/* voir plus */
#mobile-megamenu .more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lc-sans); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lc-red); padding: 8px 0 2px; }
/* familles 2 colonnes (spiritueux) / 1 colonne (coffrets) */
#mobile-megamenu .fam-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 16px; }
#mobile-megamenu .fam-grid.one { grid-template-columns: 1fr; }
#mobile-megamenu .fam-grid .rub-item { border-bottom: 1px solid var(--lc-border-soft); padding: 8px 0; display: block; font-family: var(--lc-sans); font-size: 13.5px; font-weight: 500; color: var(--lc-text); }
#mobile-megamenu .fam-grid .rub-item:hover { color: var(--lc-red); }