/* ═══════════════════════════════════════════════════════════════
   LAB-JGT PRO — Header CSS
   Règle: AUCUN style générique type .ljp-container ici.
   Tout est scopé sous .ljp-header ou .ljp-drawer.
   ═══════════════════════════════════════════════════════════════ */

/* ── Position: relative par défaut, sticky si classe présente ── */
.ljp-header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--ljp-header-bg, #ffffff);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.3s ease-in-out;
}
.ljp-header--sticky {
    position: sticky;
}
.ljp-header--fixed {
    position: fixed;
    width: 100%;
}
.ljp-header.scrolled {
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}
.ljp-header.hidden {
    transform: translateY(-100%);
}

/* Frosted glass — seulement si classe présente */
.ljp-header--blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Header inner — wrapper interne, PAS .ljp-container ── */
.ljp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: var(--ljp-header-height, 72px);
    max-width: var(--ljp-header-max-width, 1280px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

/* ── Logo ── */
.ljp-logo { flex-shrink: 0; display: flex; align-items: center; }
.ljp-logo a { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.ljp-logo .site-title { font-size: 1.375rem; font-weight: 800; color: var(--ljp-color-dark, #1a1a2e); letter-spacing: -0.02em; }
.ljp-logo img { max-height: var(--ljp-logo-height, 44px); width: auto; transition: max-height 0.3s ease; }
.ljp-site-tagline { font-size: 0.7rem; font-weight: 400; opacity: 0.6; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; display: block; }

/* ── Nav desktop ── */
.ljp-nav { flex: 1; display: flex; justify-content: center; }
.ljp-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; align-items: center; gap: 0.25rem; }
.ljp-nav-list > li { position: relative; }
.ljp-nav-list > li > a {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.625rem 1rem;
    font-size: var(--ljp-font-nav-size, 0.9375rem); font-weight: var(--ljp-font-nav-weight, 600);
    color: var(--ljp-nav-color, var(--ljp-color-text, #4a4a68));
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    position: relative; /* needed for ::before pseudo-elements (bars) */
}
.ljp-nav-list > li > a:hover,
.ljp-nav-list > li.current-menu-item > a,
.ljp-nav-list > li.current-menu-ancestor > a {
    color: var(--ljp-nav-hover-color, var(--ljp-color-primary, #007bff));
    background: var(--ljp-nav-hover-bg, color-mix(in srgb, var(--ljp-color-primary, #007bff) 8%, transparent));
}
/* ::before — reserved for hover bars via PHP/CSS vars. Reset here so PHP rules always win. */
.ljp-nav-list > li > a::before {
    display: none;
}
/* ::after default = chevron for items with sub-menu.
   Overridden by ljp-nav-vars (PHP) based on admin settings. */
.ljp-nav-list > li.menu-item-has-children > a::after {
    content: ""; display: inline-block;
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -2px);
    transition: transform 0.22s ease, opacity 0.2s ease;
    flex-shrink: 0; opacity: 0.6;
    /* NOT position:absolute — must stay inline in flex flow */
    position: static; background: none;
    margin-left: 3px;
}
.ljp-nav-list > li.menu-item-has-children:hover > a::after,
.ljp-nav-list > li.menu-item-has-children:focus-within > a::after {
    transform: rotate(225deg) translate(-1px, -2px); opacity: 1;
}
/* Items WITHOUT sub-menu: no ::after needed */
.ljp-nav-list > li:not(.menu-item-has-children) > a::after {
    display: none;
}

/* ── Dropdown ── */
.ljp-nav-list > li > .sub-menu {
    visibility: hidden; opacity: 0; pointer-events: none;
    position: absolute; top: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--ljp-dd-bg, #ffffff);
    border-radius: var(--ljp-dd-radius, 14px);
    box-shadow: var(--ljp-dd-shadow, 0 12px 48px rgba(0,0,0,0.18));
    padding: 0.5rem; list-style: none; margin: 0;
    border: 1px solid rgba(0,0,0,0.07);
    z-index: 200;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    /* Toujours vertical — items empilés les uns sous les autres */
    display: flex;
    flex-direction: column;
    gap: var(--ljp-submenu-gap, 0px);
    /* Taille selon le contenu, avec un plancher */
    width: max-content;
    min-width: var(--ljp-dd-width, 180px);
    max-width: min(480px, 90vw);
}

/* Chaque li dans un sous-menu : toujours block, pleine largeur */
.ljp-nav-list .sub-menu > li {
    display: block !important;
    width: 100% !important;
    flex-shrink: 0;
}

/* Bridge invisible qui couvre le gap entre le lien et le dropdown */
/* Sans ça, la souris quitte le li en traversant le vide et ferme le menu */
.ljp-nav-list > li.menu-item-has-children::after {
    content: "";
    position: absolute;
    bottom: -12px; /* couvre le gap + un peu de marge */
    left: 0;
    right: 0;
    height: 14px;
    display: block;
}

.ljp-nav-list > li > .sub-menu::before {
    content: ""; position: absolute; top: -6px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: var(--ljp-dd-bg, #ffffff);
    border-left: 1px solid rgba(0,0,0,0.07);
    border-top: 1px solid rgba(0,0,0,0.07);
    border-radius: 2px 0 0 0;
}
.ljp-nav-list > li:hover > .sub-menu,
.ljp-nav-list > li:focus-within > .sub-menu {
    visibility: visible; opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
/* Dropdowns côté droit pour les derniers items */
.ljp-nav-list > li:last-child > .sub-menu,
.ljp-nav-list > li:nth-last-child(2) > .sub-menu {
    left: auto; right: 0; transform: translateY(-8px);
}
.ljp-nav-list > li:last-child > .sub-menu::before,
.ljp-nav-list > li:nth-last-child(2) > .sub-menu::before { left: auto; right: 20px; transform: rotate(45deg); }
.ljp-nav-list > li:last-child:hover > .sub-menu,
.ljp-nav-list > li:last-child:focus-within > .sub-menu,
.ljp-nav-list > li:nth-last-child(2):hover > .sub-menu,
.ljp-nav-list > li:nth-last-child(2):focus-within > .sub-menu { transform: translateY(0); }

.ljp-nav-list .sub-menu li { position: relative; }
.ljp-nav-list .sub-menu li a {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%; box-sizing: border-box;
    /* padding, color, border-radius : entièrement gérés par PHP (ljp-nav-vars) */
    padding: 0.6rem 0.875rem;
    font-size: var(--ljp-font-nav-size, 0.9rem); font-weight: var(--ljp-font-nav-weight, 500);
    color: var(--ljp-submenu-color, var(--ljp-color-text, #4a4a68));
    text-decoration: none; border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease, font-weight 0.1s;
    line-height: 1.4;
    white-space: nowrap;
}
/* Hover et actif : styles structurels seulement ici — couleurs/bg via PHP vars */
.ljp-nav-list .sub-menu li a:hover { color: var(--ljp-submenu-hover-color, var(--ljp-color-primary, #007bff)); }
.ljp-nav-list .sub-menu li.current-menu-item > a {
    color: var(--ljp-submenu-hover-color, var(--ljp-color-primary, #007bff));
    font-weight: 600;
}
.ljp-nav-list .sub-menu .ljp-menu-separator {
    height: 1px; background: rgba(0,0,0,0.06);
    margin: 0.375rem 0.5rem; list-style: none;
}
/* Sous-menu niveau 3 */
.ljp-nav-list .sub-menu .sub-menu {
    top: 0; left: 100%; right: auto;
    transform: translateX(6px) translateY(-8px); margin-left: 4px;
}
.ljp-nav-list .sub-menu li:hover > .sub-menu,
.ljp-nav-list .sub-menu li:focus-within > .sub-menu {
    visibility: visible; opacity: 1; pointer-events: auto;
    transform: translateX(6px) translateY(0);
}
.ljp-nav-list .sub-menu li.menu-item-has-children > a::after {
    content: ""; display: inline-block; width: 6px; height: 6px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg); margin-left: auto; opacity: 0.5;
}

/* ── Header actions ── */
.ljp-header-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; }

/* ── CTA ── */
.ljp-header-cta {
    display: none;
    padding: 0.5rem 1.125rem;
    font-weight: 600; text-decoration: none;
    transition: filter 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
    border-radius: 8px; /* fallback, overridden per-item */
}
.ljp-header-cta:hover { filter: brightness(0.88); }
/* Lien simple — pas de fond/padding bouton */
.ljp-header-cta.ljp-cta-type-link {
    padding: 0.25rem 0;
    background: none !important;
    border-radius: 0 !important;
}
.ljp-header-cta.ljp-cta-type-link:hover { filter: none; opacity: 0.7; }
@media (min-width: 1024px) { .ljp-header-cta { display: inline-flex; } }

/* Alignement dans .ljp-header-actions via order + spacer auto */
.ljp-header-cta.ljp-cta-align-left  { order: -10; }
.ljp-header-cta.ljp-cta-align-center { margin-left: auto; margin-right: auto; }
/* right = order normal (flex-end naturel du parent) */

/* ── Center CTA wrapper (séparé de <nav> pour survivre au force-drawer) ── */
.ljp-header-center-cta {
    display: none;
    align-items: center;
    gap: 0.5rem;
}
@media (min-width: 1024px) {
    .ljp-header-center-cta { display: flex; }
    .ljp-header--force-drawer .ljp-header-center-cta { display: flex; }
}

/* ── Hamburger ── */
.ljp-hamburger {
    display: none;
    padding: 8px; background: transparent; border: none;
    cursor: pointer; border-radius: 8px;
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    width: var(--ljp-ham-size, 40px); height: var(--ljp-ham-size, 40px);
    align-items: center; justify-content: center;
    background: var(--ljp-ham-bg, transparent);
    border-radius: var(--ljp-ham-radius, 8px);
}
.ljp-hamburger:hover { filter: brightness(0.85); }
.ljp-hamburger-box { width: 24px; height: 18px; display: inline-flex; position: relative; }
.ljp-hamburger-inner,
.ljp-hamburger-inner::before,
.ljp-hamburger-inner::after {
    display: block; position: absolute; width: 24px; height: 2.5px;
    background-color: var(--ljp-ham-color, var(--ljp-color-dark, #1a1a2e));
    border-radius: 4px;
    transition: transform 0.35s cubic-bezier(0.645,0.045,0.355,1),
                opacity   0.35s cubic-bezier(0.645,0.045,0.355,1),
                top       0.35s cubic-bezier(0.645,0.045,0.355,1),
                bottom    0.35s cubic-bezier(0.645,0.045,0.355,1);
}
.ljp-hamburger-inner { top: 50%; transform: translateY(-50%); }
.ljp-hamburger-inner::before { content: ""; top: -8px; }
.ljp-hamburger-inner::after  { content: ""; bottom: -8px; top: auto; }
.ljp-hamburger.is-active .ljp-hamburger-inner { transform: rotate(45deg); }
.ljp-hamburger.is-active .ljp-hamburger-inner::before { top: 0; opacity: 0; transform: translateX(-8px); }
.ljp-hamburger.is-active .ljp-hamburger-inner::after  { bottom: 0; transform: rotate(-90deg); }

/* Hamburger visible en mobile par défaut */
@media (max-width: 1023px) {
    .ljp-hamburger { display: inline-flex; }
    .ljp-nav { display: none; }
}
/* Force drawer sur desktop */
@media (min-width: 1024px) {
    .ljp-header--force-drawer .ljp-nav { display: none !important; }
    .ljp-header--force-drawer .ljp-hamburger { display: inline-flex !important; }
}

/* ── Drawer overlay ── */
.ljp-drawer-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    z-index: 1998;
    transition: background 0.35s ease, backdrop-filter 0.35s ease;
}
.ljp-drawer-overlay.is-visible {
    display: block;
    background: rgba(0,0,0,0.45);
}
/* Blur overlay seulement si classe présente */
.ljp-drawer-overlay--blur.is-visible {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── Drawer ── */
.ljp-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(var(--ljp-drawer-width, 360px), 88vw);
    z-index: 1999;
    background: var(--ljp-drawer-bg, #ffffff);
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateX(110%);
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.15);
}
.ljp-drawer[hidden] { display: flex; }
.ljp-drawer.is-open { transform: translateX(0); }

/* Drawer gauche */
.ljp-drawer--left {
    right: auto; left: 0;
    transform: translateX(-110%);
    box-shadow: 12px 0 60px rgba(0,0,0,0.15);
}
.ljp-drawer--left.is-open { transform: translateX(0); }

/* Drawer header */
.ljp-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.ljp-drawer-logo a { text-decoration: none; color: var(--ljp-color-dark, #1a1a2e); font-size: 1.125rem; font-weight: 800; }
.ljp-drawer-logo img { max-height: 36px; width: auto; }
.ljp-drawer-close {
    background: var(--ljp-close-bg, #f5f5f5); border: none; cursor: pointer; padding: 8px;
    border-radius: var(--ljp-close-radius, 8px); color: var(--ljp-close-color, #666);
    display: flex; align-items: center; justify-content: center;
    width: var(--ljp-close-size, 36px); height: var(--ljp-close-size, 36px);
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.ljp-drawer-close:hover { background: var(--ljp-close-hover-bg, #ffe0e0); color: var(--ljp-close-hover-color, #dc3545); }

/* Drawer body */
.ljp-drawer-body {
    flex: 1; overflow-y: auto;
    padding: 1.25rem var(--ljp-drawer-px, 1.5rem);
    display: flex; flex-direction: column;
    scrollbar-width: thin; scrollbar-color: #ddd transparent;
}
.ljp-drawer-body::-webkit-scrollbar { width: 4px; }
.ljp-drawer-body::-webkit-scrollbar-track { background: transparent; }
.ljp-drawer-body::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }

/* Drawer menu items */
.ljp-drawer-menu { list-style: none; margin: 0; padding: 0; flex: 1; }
.ljp-drawer-menu > li {
    opacity: 0; transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    border-bottom: 1px solid #f5f5f5;
}
.ljp-drawer.is-open .ljp-drawer-menu > li { opacity: 1; transform: translateX(0); }
.ljp-drawer.is-open .ljp-drawer-menu > li:nth-child(1) { transition-delay: 0.05s; }
.ljp-drawer.is-open .ljp-drawer-menu > li:nth-child(2) { transition-delay: 0.10s; }
.ljp-drawer.is-open .ljp-drawer-menu > li:nth-child(3) { transition-delay: 0.15s; }
.ljp-drawer.is-open .ljp-drawer-menu > li:nth-child(4) { transition-delay: 0.20s; }
.ljp-drawer.is-open .ljp-drawer-menu > li:nth-child(5) { transition-delay: 0.25s; }
.ljp-drawer.is-open .ljp-drawer-menu > li:nth-child(6) { transition-delay: 0.30s; }
.ljp-drawer.is-open .ljp-drawer-menu > li:nth-child(7) { transition-delay: 0.35s; }
.ljp-drawer.is-open .ljp-drawer-menu > li:nth-child(8) { transition-delay: 0.40s; }

.ljp-drawer-menu > li > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 0.25rem;
    font-size: var(--ljp-font-nav-size, 1.0625rem); font-weight: var(--ljp-font-nav-weight, 600);
    color: var(--ljp-drawer-item-color, var(--ljp-color-dark, #1a1a2e));
    text-decoration: none;
    transition: color 0.2s ease;
}
.ljp-drawer-menu > li > a:hover,
.ljp-drawer-menu > li.current-menu-item > a {
    color: var(--ljp-drawer-item-hover, var(--ljp-color-primary, #007bff));
}

/* Chevron drawer — sur un span séparé pour éviter le clic sur le lien */
.ljp-drawer-menu .menu-item-has-children > a .ljp-drawer-chevron {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.ljp-drawer-menu .menu-item-has-children > a .ljp-drawer-chevron::after {
    content: ""; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    display: block;
}
.ljp-drawer-menu .menu-item-has-children > a .ljp-drawer-chevron:hover { background: rgba(0,0,0,0.06); }
.ljp-drawer-menu .menu-item-has-children.is-open > a .ljp-drawer-chevron::after { transform: rotate(-135deg); }

/* Sous-menu drawer */
.ljp-drawer-menu .sub-menu {
    list-style: none; margin: 0 0 0.25rem 0; padding: 0;
    border-left: 2px solid var(--ljp-drawer-sub-border, rgba(0,123,255,0.15)); margin-left: 0.5rem;
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1);
}
.ljp-drawer-menu .menu-item-has-children.is-open > .sub-menu { max-height: 500px; }
.ljp-drawer-menu .sub-menu li a {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: var(--ljp-font-nav-size, 0.9375rem); font-weight: var(--ljp-font-nav-weight, 500); color: var(--ljp-drawer-sub-color, var(--ljp-color-text-muted, #6c757d));
    text-decoration: none; border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease;
}
.ljp-drawer-menu .sub-menu li a::before {
    /*content: "";*/ width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; opacity: 0.35; flex-shrink: 0;
}
.ljp-drawer-menu .sub-menu li a:hover {
    color: var(--ljp-drawer-sub-hover, var(--ljp-color-primary, #007bff));
    background: var(--ljp-drawer-sub-hover-bg, rgba(0,123,255,0.05));
}
.ljp-drawer-menu .sub-menu li.current-menu-item > a { color: var(--ljp-drawer-sub-hover, var(--ljp-color-primary, #007bff)); font-weight: 600; }

/* Drawer footer */
.ljp-drawer-footer {
    margin-top: auto; padding-top: 1.5rem;
    border-top: 1px solid #f0f0f0;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.ljp-drawer-info-item {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 0.9rem; font-weight: 500; color: var(--ljp-color-text-muted, #6c757d);
    text-decoration: none; transition: color 0.2s ease;
}
.ljp-drawer-info-item:hover { color: var(--ljp-color-primary, #007bff); }
.ljp-drawer-info-item svg { flex-shrink: 0; color: var(--ljp-color-primary, #007bff); }

body.drawer-open { overflow: hidden; }

/* ── Drawer styles variants ── */
.ljp-drawer-style-slide .ljp-drawer-menu > li > a {
    transition: color 0.2s, padding-left 0.2s, border-left 0.2s;
    border-left: 3px solid transparent;
}
.ljp-drawer-style-underline .ljp-drawer-menu > li > a { position: relative; }
.ljp-drawer-style-underline .ljp-drawer-menu > li > a::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: var(--ljp-drawer-item-hover, var(--ljp-color-primary, #007bff));
    transform: scaleX(0); transition: transform 0.2s ease;
}
.ljp-drawer-style-underline .ljp-drawer-menu > li > a:hover::after,
.ljp-drawer-style-underline .ljp-drawer-menu > li.current-menu-item > a::after { transform: scaleX(1); }
.ljp-drawer-style-fill .ljp-drawer-menu > li > a:hover {
    background: rgba(0,0,0,0.05);
    border-radius: var(--ljp-drawer-item-radius, 0);
}

/* ── Nav indicator variants ── */
.ljp-nav-indicator--underline .ljp-nav-list > li > a { position: relative; }
.ljp-nav-indicator--dot .ljp-nav-list > li > a { position: relative; }

/* ── Hamburger single toggle ontop ── */
.ljp-hamburger--single.ljp-ham-ontop { z-index: 2100; }

/* ── Drawer footer CTA ─────────────────────────────────────────────────────── */
.ljp-drawer-footer-cta {
    flex-shrink: 0;
    padding: 1.5rem var(--ljp-drawer-px, 1.5rem) 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
      background: var(--ljp-color-custom5, #007bff);
}
.ljp-drawer-cta-row {
    display: flex;
}
.ljp-drawer-cta-row.ljp-drawer-cta-align-left   { justify-content: flex-start; }
.ljp-drawer-cta-row.ljp-drawer-cta-align-center { justify-content: center; }
.ljp-drawer-cta-row.ljp-drawer-cta-align-right  { justify-content: flex-end; }

.ljp-drawer-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: var(--ljp-font-button-size, 0.9375rem);
    font-weight: var(--ljp-font-button-weight, 600);
    text-decoration: none;
    border-radius: 8px;
    transition: filter 0.2s ease;
    white-space: nowrap;
    background: var(--ljp-color-primary, #007bff);
    color: #ffffff;
    width: 100%;
}
.ljp-drawer-cta-btn:hover { filter: brightness(0.88); }

.ljp-drawer-cta-link {
    display: inline-flex;
    align-items: center;
    font-size: var(--ljp-font-button-size, 0.9375rem);
    font-weight: var(--ljp-font-button-weight, 600);
    text-decoration: none;
    color: var(--ljp-color-primary, #007bff);
    transition: opacity 0.2s ease;
    padding: 0.375rem 0;
}
.ljp-drawer-cta-link:hover { opacity: 0.75; }

/* ── Header CTA link style (non-button) ──────────────────────────────────────── */
.ljp-header-cta-link {
    display: none;
    align-items: center;
    font-size: var(--ljp-font-button-size, 0.9375rem);
    font-weight: var(--ljp-font-button-weight, 600);
    text-decoration: none;
    color: var(--ljp-color-primary, #007bff);
    transition: opacity 0.2s ease;
    white-space: nowrap;
}
.ljp-header-cta-link:hover { opacity: 0.75; }
@media (min-width: 1024px) {
    .ljp-header-cta-link { display: inline-flex; }
}

/* ── Drawer width with min-width support ─────────────────────────────────────── */
.ljp-drawer {
    width: min(var(--ljp-drawer-width, 360px), 88vw);
    min-width: var(--ljp-drawer-min-width, 0px);
}

/* ── Mega menu custom picker layout ─────────────────────────────────────────── */
.ljp-mega-panel {
    display: flex !important;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ljp-mega-col-wrapper {
    flex: 1;
    min-width: 0;
    list-style: none;
}
.ljp-mega-col {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ljp-mega-col li {
    list-style: none;
}
/* Heading (first item non-clickable) */
.ljp-mega-heading > .ljp-mega-heading-text {
    display: block;
    padding: var(--ljp-mega-heading-py, 6px) var(--ljp-mega-heading-px, 14px);
    font-size: var(--ljp-mega-heading-size, 13px);
    font-weight: var(--ljp-mega-heading-weight, 700);
    color: var(--ljp-mega-heading-color, currentColor);
    cursor: default;
    user-select: none;
    text-transform: var(--ljp-mega-heading-transform, none);
    margin-bottom: 0; /* gap contrôlé via margin-bottom sur le li parent */
}
/* Sub-link hover styles for mega */
.ljp-mega-col li a {
    transition: color 0.15s ease, background 0.15s ease !important;
    text-decoration: none !important;
}
/* Neutraliser les ::before et ::after des variations (kinetic, style.css, etc.) */
.ljp-mega-col li a::before,
.ljp-mega-col li a::after,
.ljp-nav-list .sub-menu li a::before,
.ljp-nav-list .sub-menu li a::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}
/* Style: underline */
.ljp-mega-sub-underline .ljp-mega-col li a {
    position: relative;
    background: none !important;
}
.ljp-mega-sub-underline .ljp-mega-col li a::after {
    content: '';
    position: absolute;
    bottom: 4px; left: var(--ljp-sub-lnk-px, 14px); right: var(--ljp-sub-lnk-px, 14px);
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}
.ljp-mega-sub-underline .ljp-mega-col li a:hover::after { transform: scaleX(1); }
/* Style: none */
.ljp-mega-sub-none .ljp-mega-col li a:hover {
    background: none !important;
    color: inherit;
}

/* ── Drawer Mega Menu Mobile ──────────────────────────────────────────────── */
.ljp-drawer-mega-menu { list-style: none; margin: 0; padding: 0; }

/* Groupe (= une colonne du picker) */
.ljp-drawer-mega-group { margin-bottom: 0; }

/* Heading / titre de groupe */
.ljp-drawer-mega-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0 0.35rem;
    margin: 0;
    font-size: var(--ljp-drawer-mega-h-size, 13px);
    font-weight: 700;
    color: var(--ljp-drawer-mega-h-color, var(--ljp-color-primary, #007bff));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    user-select: none;
}

/* Accordion toggle */
.ljp-drawer-mega-toggle { cursor: pointer; }
.ljp-drawer-mega-chevron {
    display: inline-block;
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.22s ease;
    flex-shrink: 0;
}
.ljp-drawer-mega-toggle--open .ljp-drawer-mega-chevron {
    transform: rotate(225deg) translate(-2px, -2px);
}

/* Items list */
.ljp-drawer-mega-items {
    list-style: none;
    margin: 0;
    padding: 0 0 0.5rem;
}
.ljp-drawer-mega-items[hidden] { display: none; }

/* Les liens dans le mega mobile héritent du style drawer submenu */
.ljp-drawer-mega-items li a {
    display: block;
    width: 100%;
    padding: 0.55rem 0;
    color: var(--ljp-drawer-sub-color, #6c757d);
    text-decoration: none;
    font-size: var(--ljp-font-nav-size, 0.9rem);
    font-weight: var(--ljp-font-nav-weight, 500);
    transition: color 0.15s, padding-left 0.15s;
    border-left: 3px solid transparent;
    padding-left: 10px;
}
.ljp-drawer-mega-items li a:hover,
.ljp-drawer-mega-items li.current-menu-item > a {
    color: var(--ljp-drawer-sub-hover, var(--ljp-color-primary, #007bff));
    border-left-color: var(--ljp-drawer-sub-border, rgba(0,0,0,0.15));
    padding-left: 14px;
}
/* Mode flat — pas de séparation entre groupes */
.ljp-drawer-mega-group--flat .ljp-drawer-mega-heading {
    border-bottom: none;
    padding-bottom: 0.15rem;
}