/** * Mega menu LONACI - panneau deux colonnes, ouverture au clic. */ /* Disable Kalium hover dropdowns for mega items (desktop). */ @media (min-width: 992px) { body.lonaci-brand .main-header.menu-type-standard-menu .standard-menu-container ul.menu > li.lonaci-mega, body.lonaci-brand .main-header.menu-type-standard-menu .standard-menu-container div.menu > ul > li.lonaci-mega { position: static; } body.lonaci-brand .main-header.menu-type-standard-menu .standard-menu-container ul.menu > li.lonaci-mega > ul, body.lonaci-brand .main-header.menu-type-standard-menu .standard-menu-container div.menu > ul > li.lonaci-mega > ul { display: none !important; } body.lonaci-brand .main-header .header-block, body.lonaci-brand .main-header.menu-type-standard-menu .standard-menu-container { position: relative; } body.lonaci-brand .lonaci-mega > a .dropdown-toggle { display: none !important; } body.lonaci-brand .lonaci-mega__trigger { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; } body.lonaci-brand .lonaci-mega__caret { display: inline-block; width: 0.45em; height: 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform 0.2s ease; flex-shrink: 0; opacity: 0.75; } body.lonaci-brand .lonaci-mega.is-open > .lonaci-mega__trigger .lonaci-mega__caret { transform: rotate(-135deg) translateY(-1px); } body.lonaci-brand .lonaci-mega.is-open > .lonaci-mega__trigger { color: var(--lonaci-green) !important; } body.lonaci-brand .lonaci-mega:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor, .current_page_item, .current_page_parent, .current_page_ancestor) > .lonaci-mega__trigger, body.lonaci-brand .lonaci-mega:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor, .current_page_item, .current_page_parent, .current_page_ancestor).is-open > .lonaci-mega__trigger { color: var(--lonaci-orange) !important; } body.lonaci-brand .lonaci-mega.is-open > .lonaci-mega__trigger::after { transform: scaleX(1) !important; opacity: 1 !important; } /* Full-width panel - portaled to , anchored under the header */ body.lonaci-brand .lonaci-mega-panel { position: fixed; left: 0; right: 0; top: var(--lonaci-mega-top, 0px); width: 100%; z-index: 1250; display: none; overflow: hidden; background: var(--lonaci-white); box-shadow: 0 24px 48px rgba(0, 40, 20, 0.18); border-top: 1px solid rgba(13, 122, 75, 0.08); } body.lonaci-brand .lonaci-mega-panel.is-open { display: block; animation: lonaciMegaIn 0.22s ease; } @keyframes lonaciMegaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } body.lonaci-brand .lonaci-mega-panel__inner { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); width: min(1140px, calc(100% - 2rem)); margin-inline: auto; min-height: 280px; } /* Left intro pane */ body.lonaci-brand .lonaci-mega-panel__intro { position: relative; background: var(--lonaci-green-dark); color: var(--lonaci-white); padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 3rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } body.lonaci-brand .lonaci-mega-panel__intro::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background: var(--lonaci-green-dark); } body.lonaci-brand .lonaci-mega-panel__title { margin: 0; font-family: var(--lonaci-font); font-size: clamp(1.75rem, 2.5vw, 2.35rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--lonaci-white); } body.lonaci-brand .lonaci-mega-panel__desc { margin: 0; font-size: 0.95rem; line-height: var(--lonaci-line-height-body); color: rgba(255, 255, 255, 0.88); max-width: 28ch; flex: 1 1 auto; } body.lonaci-brand a.lonaci-btn.lonaci-btn--hero.lonaci-mega-panel__cta { margin-top: auto; align-self: flex-start; box-shadow: none; white-space: nowrap; padding-block: 0.3rem; } body.lonaci-brand a.lonaci-btn.lonaci-btn--hero.lonaci-mega-panel__cta .lonaci-btn__label { white-space: nowrap; } body.lonaci-brand a.lonaci-btn.lonaci-btn--hero.lonaci-mega-panel__cta .lonaci-btn__icon { width: 2rem; height: 2rem; } body.lonaci-brand .lonaci-mega-panel__cta:hover, body.lonaci-brand .lonaci-mega-panel__cta:focus { transform: translateY(-1px); } /* Right links pane - two real columns: flat links | nested groups */ body.lonaci-brand .lonaci-mega-panel__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.75rem; align-items: start; background: var(--lonaci-white); padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1.75rem, 4vw, 3.5rem); } body.lonaci-brand .lonaci-mega-panel__links:not(:has(.lonaci-mega-panel__groups)) { grid-template-columns: 1fr; } /* Flat-only menus (ex. Jeu Responsable) : liens sur 2 colonnes */ body.lonaci-brand .lonaci-mega-panel__links:not(:has(.lonaci-mega-panel__groups)) .lonaci-mega-panel__list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.75rem; row-gap: 0; align-items: start; } body.lonaci-brand .lonaci-mega-panel__list, body.lonaci-brand .lonaci-mega-panel__groups { display: flex !important; flex-direction: column; align-items: stretch; list-style: none !important; margin: 0 !important; padding: 0 !important; position: static !important; visibility: visible !important; opacity: 1 !important; transform: none !important; background: transparent !important; box-shadow: none !important; width: auto !important; min-width: 0 !important; float: none !important; } body.lonaci-brand .lonaci-mega-panel__list > li, body.lonaci-brand .lonaci-mega-panel__groups > li { margin: 0 !important; padding: 0 !important; float: none !important; position: relative !important; } body.lonaci-brand .lonaci-mega-panel__list > li > a { display: flex !important; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 0 !important; font-family: var(--lonaci-font); font-size: 1.05rem !important; font-weight: 600 !important; color: var(--lonaci-green-dark) !important; text-decoration: none !important; border-bottom: 1px solid rgba(13, 122, 75, 0.08); background: transparent !important; line-height: 1.3 !important; transition: color 0.15s ease, padding-left 0.15s ease; } body.lonaci-brand .lonaci-mega-panel__list > li > a:hover, body.lonaci-brand .lonaci-mega-panel__list > li > a:focus, body.lonaci-brand .lonaci-mega-panel__list > li:is(.current-menu-item, .current_page_item) > a { color: var(--lonaci-orange) !important; padding-left: 0.25rem !important; } body.lonaci-brand .lonaci-mega-panel__list > li > a::after, body.lonaci-brand .lonaci-mega-panel__list > li > a::before { display: none !important; content: none !important; } body.lonaci-brand .lonaci-mega__chevron { display: inline-block; width: 0.4em; height: 0.4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); flex-shrink: 0; opacity: 0.55; } /* Nested column group (badge + children) */ body.lonaci-brand .lonaci-mega-group { padding-top: 0.15rem !important; } body.lonaci-brand .lonaci-mega-group__label { display: inline-flex; align-items: center; margin-bottom: 0.75rem; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--lonaci-green-dark); color: var(--lonaci-white); font-family: var(--lonaci-font); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } body.lonaci-brand .lonaci-mega-group__list { list-style: none !important; margin: 0 !important; padding: 0 !important; position: static !important; visibility: visible !important; opacity: 1 !important; transform: none !important; background: transparent !important; box-shadow: none !important; width: auto !important; float: none !important; } body.lonaci-brand .lonaci-mega-group__list > li > a { display: flex !important; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0 !important; font-family: var(--lonaci-font); font-size: 1.05rem !important; font-weight: 600 !important; color: var(--lonaci-green-dark) !important; text-decoration: none !important; border-bottom: 1px solid rgba(13, 122, 75, 0.08); background: transparent !important; } body.lonaci-brand .lonaci-mega-group__list > li > a:hover, body.lonaci-brand .lonaci-mega-group__list > li > a:focus, body.lonaci-brand .lonaci-mega-group__list > li:is(.current-menu-item, .current_page_item) > a { color: var(--lonaci-orange) !important; } body.lonaci-brand .lonaci-mega-group__list > li > a::after, body.lonaci-brand .lonaci-mega-group__list > li > a::before { display: none !important; content: none !important; } /* Backdrop when open */ body.lonaci-brand.lonaci-mega-open::before { content: ""; position: fixed; inset: 0; background: rgba(12, 28, 20, 0.35); z-index: 1100; pointer-events: none; } /* Block page scroll while mega menu is open */ html:has(body.lonaci-mega-open), body.lonaci-brand.lonaci-mega-open { overflow: hidden !important; overscroll-behavior: none; } body.lonaci-brand .main-header { z-index: 1201; } } /* Mobile / tablet: mega panels are hidden on desktop header; inside the offcanvas they must remain usable as an accordion. */ @media (max-width: 991px) { body.lonaci-brand .lonaci-mega-panel { display: none !important; } body.lonaci-brand .lonaci-mega__caret, body.lonaci-brand .lonaci-mega__chevron { display: none !important; } /* Offcanvas exception: unwrap mega chrome, keep nested lists */ body.lonaci-brand .mobile-menu .lonaci-mega-panel, body.lonaci-brand .mobile-menu .lonaci-mega-panel[hidden] { display: contents !important; position: static !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } body.lonaci-brand .mobile-menu .lonaci-mega-panel__inner, body.lonaci-brand .mobile-menu .lonaci-mega-panel__links, body.lonaci-brand .mobile-menu .lonaci-mega-panel__groups { display: contents !important; } body.lonaci-brand .mobile-menu .lonaci-mega-panel__intro { display: none !important; } body.lonaci-brand .mobile-menu .lonaci-mega__caret { display: inline-flex !important; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; margin-inline-start: auto; border-radius: 50%; background: transparent; color: var(--lonaci-green); flex-shrink: 0; pointer-events: auto !important; cursor: pointer; } body.lonaci-brand .mobile-menu .lonaci-mega__caret::before { content: ""; display: block; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -0.15rem; } body.lonaci-brand .mobile-menu .lonaci-mega.lonaci-sub-open > a .lonaci-mega__caret::before, body.lonaci-brand .mobile-menu .menu-item-open > a .lonaci-mega__caret::before { transform: rotate(-135deg); margin-top: 0.15rem; } body.lonaci-brand .mobile-menu .lonaci-mega__chevron { display: none !important; } body.lonaci-brand .mobile-menu .lonaci-mega-group__label { display: block; font-family: var(--lonaci-font); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lonaci-green); padding: 0.85rem 0.35rem 0.35rem; } } @media (prefers-reduced-motion: reduce) { body.lonaci-brand .lonaci-mega.is-open > .lonaci-mega-panel { animation: none; } }