/* ============================================================
   ONI NAV — Front CSS v1.4
   La Tablée Onirique
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================================
   VARIABLES (valeurs par défaut — écrasées par inline style sur <nav>)
   ============================================================ */
:root {
    --oni-link-color:      #F2E4C9;
    --oni-link-hover:      #FFBE7A;
    --oni-dropdown-bg:     #0D2633;
    --oni-dropdown-border: #FFBE7A;
    --oni-font-size:       15px;
    --oni-nav-padding:     14px;
    --oni-btn-radius:      50px;
    --oni-item-gap:        4px;
    --oni-icon-size:       1.1em;
    --oni-social-size:     34px;
    --oni-font-family:     'Inter', sans-serif;
    --oni-nav-shadow:      0 2px 16px rgba(0,0,0,.4);
    --oni-gold:            #FFBE7A;
    --oni-cream:           #F2E4C9;
    --oni-dark:            #0D1A26;
    --oni-transition:      0.28s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   RESET — neutralise les styles du thème WordPress
   ============================================================ */
.oni-nav *, .oni-nav *::before, .oni-nav *::after { box-sizing: border-box; }
.oni-nav ul { list-style: none; margin: 0; padding: 0; }

/* Force couleur sur TOUS les liens — empêche le thème de les écraser */
.oni-nav a,
.oni-nav a:link,
.oni-nav a:visited {
    text-decoration: none !important;
    color: var(--oni-link-color) !important;
}
.oni-nav a:hover,
.oni-nav a:focus {
    color: var(--oni-link-hover) !important;
    text-decoration: none !important;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.oni-nav {
    position: relative;
    /* background et box-shadow injectés en inline style PHP */
    font-family: var(--oni-font-family);
    font-size: var(--oni-font-size);
    z-index: 9999;
}

.oni-nav--sticky { position: sticky; top: 0; }

.oni-nav__inner {
    display: flex;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: calc(var(--oni-nav-padding) * 2 + 28px);
    position: relative;
    z-index: 2;
}

.oni-nav__logo { flex-shrink: 0; margin-right: 20px; display: flex; align-items: center; }
.oni-nav__logo img { display: block; }

.oni-nav__gold-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--oni-gold) 30%, var(--oni-gold) 70%, transparent);
    opacity: .7;
    position: relative;
    z-index: 2;
}

/* ============================================================
   DESKTOP LIST
   ============================================================ */
.oni-nav__list {
    display: flex;
    align-items: center;
    flex: 1;
    gap: var(--oni-item-gap);
}
.oni-nav__spacer { flex: 1; }
.oni-nav__item   { position: relative; }

/* ---- Links ---- */
.oni-nav__link {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: var(--oni-link-color) !important;
    font-weight: 400;
    letter-spacing: .02em;
    border-radius: 6px;
    transition: color var(--oni-transition), background var(--oni-transition);
    white-space: nowrap;
    position: relative;
    text-shadow: none !important;
    background: transparent;
}
.oni-nav__link::after {
    content: '';
    position: absolute;
    bottom: 2px; left: 14px; right: 14px;
    height: 1px;
    background: var(--oni-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--oni-transition);
}
.oni-nav__link:hover,
.oni-nav__link:focus-visible {
    color: var(--oni-link-hover) !important;
    background: rgba(255,190,122,.07);
}
.oni-nav__link:hover::after { transform: scaleX(1); }

/* Arrow */
.oni-nav__arrow {
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .6;
    transition: transform var(--oni-transition);
    margin-left: 2px;
    flex-shrink: 0;
}
.oni-nav__item--has-children:hover .oni-nav__arrow,
.oni-nav__item--has-children.oni-open .oni-nav__arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.oni-nav__icon { flex-shrink: 0; font-size: var(--oni-icon-size); }

/* ============================================================
   SIMPLE DROPDOWN
   ============================================================ */
.oni-nav__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 0;
    background: var(--oni-dropdown-bg);
    border: 1px solid rgba(255,190,122,.3);
    border-top: 2px solid var(--oni-dropdown-border);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.55);
    padding: 6px 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--oni-transition), transform var(--oni-transition);
    z-index: 100;
}
.oni-nav__item--has-children:hover .oni-nav__dropdown,
.oni-nav__item--has-children.oni-open .oni-nav__dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.oni-nav__dropdown-item a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    color: var(--oni-link-color) !important;
    font-size: .9em;
    transition: color var(--oni-transition), transform var(--oni-transition), background var(--oni-transition);
    position: relative;
}
.oni-nav__dropdown-item a::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--oni-gold);
    transform: scaleY(0);
    transition: transform var(--oni-transition);
}
.oni-nav__dropdown-item a:hover {
    color: var(--oni-link-hover) !important;
    transform: translateX(6px);
    background: rgba(255,190,122,.07);
}
.oni-nav__dropdown-item a:hover::before { transform: scaleY(1); }

/* ============================================================
   BOUTONS
   ============================================================ */
.oni-nav__btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-radius: var(--oni-btn-radius);
    font-family: var(--oni-font-family);
    font-size: .9em;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--oni-transition), color var(--oni-transition), transform var(--oni-transition), box-shadow var(--oni-transition);
    white-space: nowrap;
    text-decoration: none !important;
}
.oni-nav__btn:hover  { transform: translateY(-1px); }
.oni-nav__btn:active { transform: translateY(0); }

.oni-nav__btn--primary {
    background: var(--oni-cream);
    color: #152635 !important;
    box-shadow: 0 2px 10px rgba(255,190,122,.2);
}
.oni-nav__btn--primary:hover {
    background: var(--oni-gold);
    box-shadow: 0 4px 16px rgba(255,190,122,.4);
    color: #152635 !important;
}
/* Quand la lueur est désactivée — neutralise box-shadow ET transform */
.oni-nav--no-btn-glow .oni-nav__btn:hover {
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}
.oni-nav--no-btn-glow .oni-nav__btn--primary:hover {
    box-shadow: none !important;
    transform: none !important;
}

.oni-nav__btn--outline {
    background: transparent;
    color: var(--oni-cream) !important;
    border: 1.5px solid var(--oni-cream);
}
.oni-nav__btn--outline:hover { border-color: var(--oni-gold); color: var(--oni-gold) !important; background: rgba(255,190,122,.08); }

.oni-nav__btn--ghost {
    background: transparent;
    color: var(--oni-link-color) !important;
    border: none;
}
.oni-nav__btn--ghost:hover { color: var(--oni-gold) !important; background: rgba(255,190,122,.08); }

.oni-nav__item--btn { padding: 0 6px; }
.oni-nav__btn-label { display: inline; }

/* Hover personnalisé via CSS vars injectées inline sur le bouton */
.oni-nav__btn[style*="--btn-bg-hover"]:hover {
    background: var(--btn-bg-hover) !important;
}
.oni-nav__btn[style*="--btn-color-hover"]:hover {
    color: var(--btn-color-hover) !important;
}

/* ============================================================
   RÉSEAUX SOCIAUX
   ============================================================ */
.oni-nav__social {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width:  var(--oni-social-size);
    height: var(--oni-social-size);
    border-radius: 50%;
    font-size: 1.1em;
    transition: transform var(--oni-transition), box-shadow var(--oni-transition), background var(--oni-transition), filter var(--oni-transition);
    text-decoration: none !important;
}
.oni-nav__social:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.4); }

.oni-nav__social--circle { background: var(--social-color, #FFBE7A); color: #fff !important; }
.oni-nav__social--circle:hover { filter: brightness(1.15); }
.oni-nav__social--outline { background: transparent; border: 1.5px solid var(--social-color, #FFBE7A); color: var(--social-color, #FFBE7A) !important; }
.oni-nav__social--outline:hover { background: var(--social-color, #FFBE7A); color: #fff !important; }
.oni-nav__social--flat { background: transparent; color: var(--oni-link-color) !important; }
.oni-nav__social--flat:hover { color: var(--social-color, #FFBE7A) !important; }
.oni-nav__item--social { padding: 0 4px; }

/* ============================================================
   MEGA MENU
   ============================================================ */
.oni-megamenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    max-width: min(90vw, 1100px);
    background: var(--oni-dropdown-bg);
    border: 1px solid rgba(255,190,122,.25);
    border-top: 2px solid var(--oni-dropdown-border);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.55);
    padding: 24px 28px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--oni-transition), transform var(--oni-transition);
    z-index: 100;
}
.oni-nav__item--mega:hover .oni-megamenu,
.oni-nav__item--mega.oni-open .oni-megamenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.oni-megamenu__grid { display: grid; gap: 28px; }
.oni-megamenu__grid--1 { grid-template-columns: minmax(200px, 1fr); }
.oni-megamenu__grid--2 { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.oni-megamenu__grid--3 { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
.oni-megamenu__grid--4 { grid-template-columns: repeat(4, minmax(140px, 1fr)); }

.oni-megamenu__col-title {
    display: flex; align-items: center; gap: 7px;
    font-family: 'Marcellus SC', serif;
    font-weight: 700;
    font-size: .85em; color: var(--oni-mega-col-title-color, var(--oni-gold)) !important;
    letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 14px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,190,122,.2);
}
.oni-megamenu__col-image { margin-bottom: 14px; border-radius: 8px; overflow: hidden; }
.oni-megamenu__col-image img { width: 100%; height: 140px; object-fit: cover; display: block; transition: transform var(--oni-transition); border-radius: 8px; }
.oni-megamenu__col-image:hover img { transform: scale(1.04); }
.oni-megamenu__links { display: flex; flex-direction: column; gap: 2px; }
.oni-megamenu__link-item { border-radius: 7px; overflow: hidden; }
.oni-megamenu__link {
    display: flex !important; align-items: flex-start; gap: 10px;
    padding: 9px 10px; border-radius: 7px;
    transition: background var(--oni-transition), transform var(--oni-transition);
    text-decoration: none !important;
    /* Pas de color ici — géré par les enfants pour permettre les couleurs individuelles */
}
.oni-megamenu__link:hover {
    background: rgba(255,190,122,.1);
    transform: translateX(5px);
}
.oni-megamenu__link-icon {
    flex-shrink: 0; margin-top: 2px; font-size: 1.2em;
    color: var(--oni-mega-icon-color, var(--oni-gold)) !important;
}
.oni-megamenu__link-text { display: flex; flex-direction: column; gap: 2px; }
.oni-megamenu__link-label {
    font-weight: 500; font-size: .9em;
    /* --link-label-color = couleur individuelle du lien (injectée sur le parent .oni-megamenu__link)
       Fallback : couleur globale mega, puis crème par défaut */
    color: var(--link-label-color, var(--oni-mega-link-color, var(--oni-cream))) !important;
    transition: color var(--oni-transition);
}
.oni-megamenu__link:hover .oni-megamenu__link-label {
    /* Au hover, si couleur individuelle définie on la garde (légèrement éclaircie via filter),
       sinon on prend la couleur hover globale */
    color: var(--link-label-color, var(--oni-mega-link-hover, var(--oni-gold))) !important;
}
.oni-megamenu__link-desc {
    font-size: .78em;
    color: var(--link-desc-color, var(--oni-mega-desc-color, #8fa8b8)) !important;
    line-height: 1.4;
}

/* ---- Liens / éléments désactivés ----
   Aucun changement visuel : même apparence que les autres liens.
   Juste non-cliquable (cursor:default, pointer-events:none).
   Le parent avec dropdown reste hoverable pour ouvrir le sous-menu.
   ---- */
.oni-nav__link--disabled {
    cursor: default !important;
    pointer-events: none;
}
/* Parent de dropdown désactivé : garde le hover pour ouvrir le sous-menu */
.oni-nav__item--has-children > .oni-nav__link--disabled {
    pointer-events: auto;
    cursor: default !important;
}
/* Pas de soulignement ni de changement de couleur au hover */
.oni-nav__link--disabled:hover,
.oni-nav__link--disabled:focus {
    color: var(--oni-link-color) !important;
    background: transparent !important;
    text-decoration: none !important;
}
.oni-nav__link--disabled::after { display: none !important; }

/* Liens mega désactivés : idem, aucun changement visuel */
.oni-megamenu__link--disabled {
    cursor: default !important;
    pointer-events: none;
}
.oni-megamenu__link--disabled:hover {
    background: transparent !important;
    transform: none !important;
    color: var(--link-label-color, var(--oni-mega-link-color, var(--oni-cream))) !important;
}
.oni-megamenu__link--disabled .oni-megamenu__link-label {
    /* Même priorité que le lien actif : couleur individuelle d'abord, puis globale */
    color: var(--link-label-color, var(--oni-mega-link-color, var(--oni-cream))) !important;
}
.oni-megamenu__link--disabled .oni-megamenu__link-desc {
    color: var(--link-desc-color, var(--oni-mega-desc-color, #8fa8b8)) !important;
}

/* ============================================================
   SURBRILLANCE / GLOW — animations
   ============================================================ */
@keyframes oniPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--glow-color, rgba(255,190,122,.7)); }
    50%       { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
}
@keyframes oniHeartbeat {
    0%,100% { transform: scale(1); }
    14%     { transform: scale(1.12); }
    28%     { transform: scale(1); }
    42%     { transform: scale(1.07); }
    70%     { transform: scale(1); }
}
@keyframes oniShake {
    0%,100%         { transform: translateX(0); }
    15%,45%,75%     { transform: translateX(-4px); }
    30%,60%,90%     { transform: translateX(4px); }
}
@keyframes oniBounce {
    0%,100% { transform: translateY(0); }
    40%     { transform: translateY(-8px); }
    70%     { transform: translateY(-4px); }
}
@keyframes oniFlash {
    0%,50%,100% { opacity: 1; }
    25%,75%     { opacity: .25; }
}
@keyframes oniGlowShadow {
    0%,100% { text-shadow: 0 0 0 transparent; }
    50%     { text-shadow: 0 0 10px var(--glow-color, rgba(255,190,122,.9)), 0 0 22px var(--glow-color, rgba(255,190,122,.4)); }
}

.oni-nav--glow-pulse     .oni-nav__item--glow > .oni-nav__link,
.oni-nav--glow-pulse     .oni-nav__item--glow > .oni-nav__btn    { animation: oniPulse 2s ease-in-out infinite; }
.oni-nav--glow-heartbeat .oni-nav__item--glow > .oni-nav__link,
.oni-nav--glow-heartbeat .oni-nav__item--glow > .oni-nav__btn    { animation: oniHeartbeat 1.4s ease-in-out infinite; }
.oni-nav--glow-shake     .oni-nav__item--glow > .oni-nav__link,
.oni-nav--glow-shake     .oni-nav__item--glow > .oni-nav__btn    { animation: oniShake 2s ease-in-out infinite; }
.oni-nav--glow-bounce    .oni-nav__item--glow > .oni-nav__link,
.oni-nav--glow-bounce    .oni-nav__item--glow > .oni-nav__btn    { animation: oniBounce 1.5s ease-in-out infinite; }
.oni-nav--glow-flash     .oni-nav__item--glow > .oni-nav__link,
.oni-nav--glow-flash     .oni-nav__item--glow > .oni-nav__btn    { animation: oniFlash 2s ease-in-out infinite; }
.oni-nav--glow-glow      .oni-nav__item--glow > .oni-nav__link,
.oni-nav--glow-glow      .oni-nav__item--glow > .oni-nav__btn    { animation: oniGlowShadow 2s ease-in-out infinite; }

/* ---- Glow sur les liens individuels du mega menu ---- */
.oni-megamenu__link-item--glow-pulse     .oni-megamenu__link { animation: oniPulse 2s ease-in-out infinite; }
.oni-megamenu__link-item--glow-heartbeat .oni-megamenu__link { animation: oniHeartbeat 1.4s ease-in-out infinite; }
.oni-megamenu__link-item--glow-shake     .oni-megamenu__link { animation: oniShake 2s ease-in-out infinite; }
.oni-megamenu__link-item--glow-bounce    .oni-megamenu__link { animation: oniBounce 1.5s ease-in-out infinite; }
.oni-megamenu__link-item--glow-flash     .oni-megamenu__link { animation: oniFlash 2s ease-in-out infinite; }
.oni-megamenu__link-item--glow-glow      .oni-megamenu__link { animation: oniGlowShadow 2s ease-in-out infinite; }

.oni-megamenu__link-item--glow .oni-megamenu__link {
    position: relative;
}
/* Badge sur les liens mega */
.oni-megamenu__link-item--glow[style*="--glow-badge"] .oni-megamenu__link::after {
    content: var(--glow-badge);
    position: absolute;
    top: 4px; right: 4px;
    font-size: 9px; font-weight: 700; line-height: 1;
    padding: 2px 5px; border-radius: 20px;
    background: var(--glow-color, #FFBE7A);
    color: #152635;
    pointer-events: none;
    white-space: nowrap;
}

/* Badge — N'apparaît QUE si --glow-badge est défini et non vide */
.oni-nav__item--glow[style*="--glow-badge"] > .oni-nav__link::before,
.oni-nav__item--glow[style*="--glow-badge"] > .oni-nav__btn::before {
    content: var(--glow-badge);
    position: absolute;
    top: -7px; right: 0px;
    font-size: 9px; font-weight: 700; line-height: 1;
    padding: 2px 5px;
    border-radius: 20px;
    background: var(--glow-color, #FFBE7A);
    color: #152635;
    letter-spacing: .04em;
    pointer-events: none;
    white-space: nowrap;
    font-style: normal;
    font-family: 'Inter', sans-serif;
}

/* ============================================================
   HAMBURGER
   ============================================================ */
.oni-nav__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    margin-left: auto;
    z-index: 10;
    position: relative;
}
.oni-nav__hamburger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--oni-cream);
    border-radius: 2px;
    transition: transform var(--oni-transition), opacity var(--oni-transition);
    transform-origin: center;
}
.oni-nav__hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.oni-nav__hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.oni-nav__hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MOBILE DRAWER — panneau latéral droit
   ============================================================ */

/* Overlay de fond */
.oni-nav__mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}
.oni-nav__mobile-overlay.oni-open {
    opacity: 1;
    pointer-events: auto;
}

/* Panneau */
.oni-nav__mobile-drawer {
    /* Toujours dans le DOM, caché par transform — permet l'animation */
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 85vw);
    background: var(--oni-dropdown-bg, #0D2633);
    border-left: 1px solid rgba(255,190,122,.25);
    box-shadow: -8px 0 40px rgba(0,0,0,.6);
    z-index: 9999;
    transform: translateX(110%);
    visibility: hidden;
    transition: transform .38s cubic-bezier(.4,0,.2,1), visibility 0s linear .38s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
}
.oni-nav__mobile-drawer.oni-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .38s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
    pointer-events: auto;
}

/* En-tête du panneau */
.oni-nav__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,190,122,.2);
    position: sticky;
    top: 0;
    background: var(--oni-dropdown-bg, #0D2633);
    z-index: 1;
}
.oni-nav__mobile-title {
    font-family: 'Marcellus SC', serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--oni-gold) !important;
    letter-spacing: .05em;
}
.oni-nav__mobile-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,190,122,.1);
    border: none !important;
    border-radius: 50%;
    color: var(--oni-cream) !important;
    font-size: 16px;
    cursor: pointer;
    transition: background var(--oni-transition);
}
.oni-nav__mobile-close:hover { background: rgba(255,190,122,.25); }

/* Ligne dorée en haut du drawer */
.oni-nav__mobile-drawer::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--oni-gold), rgba(255,190,122,.3));
    position: sticky;
    top: 0;
}

.oni-nav__mobile-list { padding: 8px 0 32px; }

/* Liens génériques mobile — EXCL. les boutons (.oni-mobile__item--btn > a) */
.oni-mobile__item:not(.oni-mobile__item--btn) > a,
.oni-mobile__toggle {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    color: var(--oni-link-color) !important;
    font-size: 1em;
    font-family: var(--oni-font-family);
    background: none !important;
    border: none !important;
    border-left: 2px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: color var(--oni-transition), background var(--oni-transition), border-color var(--oni-transition);
    box-shadow: none !important;
}
.oni-mobile__item:not(.oni-mobile__item--btn) > a:hover,
.oni-mobile__toggle:hover {
    color: var(--oni-gold) !important;
    background: rgba(255,190,122,.07) !important;
    border-left-color: var(--oni-gold);
}

.oni-mobile__arrow {
    margin-left: auto;
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform var(--oni-transition);
    opacity: .6;
    flex-shrink: 0;
}
.oni-mobile__toggle[aria-expanded="true"] .oni-mobile__arrow { transform: rotate(180deg); }

.oni-mobile__sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1);
    background: rgba(255,190,122,.04);
    border-left: 2px solid rgba(255,190,122,.2);
    margin: 0 20px 0 20px;
    border-radius: 0 0 6px 6px;
}
.oni-mobile__sub.oni-open { max-height: 1000px; }

/* Le <a> ou <span> conteneur — reset propre */
.oni-mobile__sub li > a,
.oni-mobile__sub li > span {
    display: block !important;
    padding: 0 !important;
    color: inherit !important;
    background: none !important;
    border: none !important;
    text-decoration: none !important;
    width: 100% !important;
}
.oni-mobile__sub li > a { cursor: pointer; }
.oni-mobile__sub li > span { cursor: default; }
.oni-mobile__sub li > a:hover { background: rgba(255,190,122,.07) !important; }

/* Inner : le vrai flex container — résistant aux overrides du thème */
.oni-mobile__sub-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 9px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Icône */
.oni-mobile__sub-icon {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    font-size: 1em !important;
}

/* Bloc texte : label + desc en colonne */
.oni-mobile__sub-text {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* Label */
.oni-mobile__sub-label {
    display: block !important;
    color: var(--link-label-color, rgba(242,228,201,.85)) !important;
    font-size: .9em !important;
    line-height: 1.4 !important;
    white-space: normal !important;
}
.oni-mobile__sub li > a:hover .oni-mobile__sub-label {
    color: var(--link-label-color, var(--oni-gold)) !important;
    filter: brightness(1.15);
}

/* Description */
.oni-mobile__sub-desc {
    display: block !important;
    font-size: .78em !important;
    color: var(--link-desc-color, rgba(242,228,201,.45)) !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
    white-space: normal !important;
}

/* Boutons dans le menu mobile — style bouton préservé */
.oni-mobile__item--btn {
    padding: 12px 20px;
    display: flex;
    align-items: center;
}
.oni-mobile__item--btn .oni-nav__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: nowrap !important;
    border-left: none !important;
    padding: 10px 22px !important;
    border-radius: var(--oni-btn-radius) !important;
    font-family: var(--oni-font-family) !important;
    font-size: .95em !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}
.oni-mobile__item--btn .oni-nav__btn--primary {
    background: var(--oni-cream) !important;
    color: #152635 !important;
    box-shadow: 0 2px 10px rgba(255,190,122,.2) !important;
}
.oni-mobile__item--btn .oni-nav__btn--primary:hover {
    background: var(--oni-gold) !important;
    color: #152635 !important;
}
.oni-mobile__item--btn .oni-nav__btn--outline {
    background: transparent !important;
    border: 1.5px solid var(--oni-cream) !important;
    color: var(--oni-cream) !important;
}
.oni-mobile__item--btn .oni-nav__btn--ghost {
    background: transparent !important;
    color: var(--oni-link-color) !important;
    border: none !important;
}

/* Séparateur entre boutons et liens sociaux */
.oni-mobile__item--social-wrap {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .oni-nav__list              { display: none; }
    .oni-nav__hamburger         { display: flex; }
    /* drawer et overlay sont toujours display:block, cachés par transform/opacity */
    .oni-nav__inner             { padding: 0 16px; }
}

/* ============================================================
   A11Y focus
   ============================================================ */
.oni-nav__link:focus-visible,
.oni-nav__btn:focus-visible,
.oni-nav__social:focus-visible {
    outline: 2px solid var(--oni-gold);
    outline-offset: 2px;
}

/* ============================================================
   SORTABLE — drag & drop placeholder
   ============================================================ */
.oni-item-row-placeholder {
    background: rgba(255,190,122,.08);
    border: 2px dashed rgba(255,190,122,.4);
    border-radius: 8px;
    margin-bottom: 6px;
}
.oni-item-row.oni-dragging {
    opacity: .5;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.oni-mega-link-placeholder {
    background: rgba(255,190,122,.06);
    border: 1px dashed rgba(255,190,122,.3);
    border-radius: 8px;
    margin-bottom: 8px;
}