/* Copied as is from Tempo (webacappella.lite), packages/portal/studio/engine/menu_v4/wfm-deferred.css,
   commit c309cbf1 of 2026-10-07. */
/* ============================================
   WF Menu — CSS différé
   ============================================

   Bulle popover + offcanvas panel.
   Chargé à la première interaction utilisateur.

   ============================================ */

/* ============================================
   Bulle (Popover)
   ============================================ */

.wf-bulle
{
    position: fixed;
    z-index: 10000;
    min-width: var(--wfm-bulle-min-width);
    max-height: calc(100vh - 20px);
    padding: var(--wfm-bulle-padding);
    background: var(--wfm-bg);
    /* Le FILET sépare la bulle de la page, l'ombre ne fait que l'élever. Sans lui, le thème
       « Ombres : aplat » (--shadow: none, que la bulle suit) laissait un panneau blanc sans
       aucun bord sur une section blanche (site client, 2026-10-07). Même recette que l'autre
       panneau flottant de l'en-tête, le sélecteur de langue (lang-switch.css). */
    border: 1px solid var(--wfm-border);
    border-radius: var(--wfm-bulle-radius);
    box-shadow: var(--wfm-bulle-shadow);
    font-family: var(--wfm-font-family);
    font-size: var(--wfm-font-size);

    /* Animation sobre */
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--wfm-transition-duration) var(--wfm-transition-easing),
                transform var(--wfm-transition-duration) var(--wfm-transition-easing);
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Glass theme pour la bulle */
.wf-bulle--glass
{
    backdrop-filter: var(--wfm-bulle-backdrop);
    -webkit-backdrop-filter: var(--wfm-bulle-backdrop);
    border: 1px solid var(--wfm-border);
}

.wf-bulle--visible
{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ============================================
   Items dans la bulle
   ============================================ */

.wf-bulle ul
{
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wf-bulle li
{
    position: relative;
}

/* ENTRÉE SANS PAGE (span de classe wf-menu-label, recopié de renderMenu) : visée à côté du
   lien dans chaque règle de la bulle et du panneau, survol compris. « L'effet normal »,
   décision du 07/10/2026 ; la mention « lien non défini » (wfm.css) dit qu'elle ne mène
   nulle part encore. Pas grisée : ce n'est pas un état « désactivé ». */
.wf-bulle li a,
.wf-bulle li > .wf-menu-label
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--wfm-item-padding, 0.625rem 1.25rem);
    color: var(--wfm-color);
    text-decoration: none;
    font-size: var(--wfm-font-size);
    font-weight: var(--wfm-font-weight);
    font-style: var(--wfm-font-style);
    position: relative;
    transition: all var(--wfm-transition-duration) var(--wfm-transition-easing);
}

/* Barre accent à gauche au hover (bulle) */
.wf-bulle li a::before,
.wf-bulle li > .wf-menu-label::before
{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--wfm-accent);
    border-radius: 0 3px 3px 0;
    transition: transform var(--wfm-transition-duration) var(--wfm-transition-easing);
}

/* Barre accent à gauche au hover (offcanvas) */
.wf-menu__offcanvas-level a::before,
.wf-menu__offcanvas-level button.wf-menu__item::before,
.wf-menu__offcanvas-level li > .wf-menu-label::before
{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--wfm-offcanvas-accent, var(--wfm-accent));
    border-radius: 0 3px 3px 0;
    transition: transform var(--wfm-transition-duration) var(--wfm-transition-easing);
}

.wf-bulle li a:hover,
.wf-bulle li > .wf-menu-label:hover
{
    background: var(--wfm-hover);
    color: var(--wfm-accent);
}

.wf-menu__offcanvas-level a:hover,
.wf-menu__offcanvas-level button.wf-menu__item:hover,
.wf-menu__offcanvas-level li > .wf-menu-label:hover
{
    background: var(--wfm-offcanvas-hover, var(--wfm-hover));
    color: var(--wfm-offcanvas-accent, var(--wfm-accent));
}

/* PAGE COURANTE (et rubrique courante dans le panneau) : en gras, barre d'accent posée. Ni la
   bulle ni le panneau ne la signalaient : sur téléphone, rien ne disait où l'on est (audit du
   2026-10-01). L'encre reste celle du conteneur, l'accent en texte ne tient pas 4,5:1 sur
   le fond clair ; c'est la barre, graphique, qui le porte. */
.wf-menu__offcanvas-level li.wf-menu-item--active > a,
.wf-menu__offcanvas-level li.wf-menu-item--active > button.wf-menu__item,
.wf-bulle li a[aria-current="page"]
{
    font-weight: 700;
}

.wf-menu__offcanvas-level li.wf-menu-item--active > a::before,
.wf-menu__offcanvas-level li.wf-menu-item--active > button.wf-menu__item::before,
.wf-bulle li a[aria-current="page"]::before,
.wf-bulle li a:hover::before,
.wf-bulle li > .wf-menu-label:hover::before,
.wf-menu__offcanvas-level a:hover::before,
.wf-menu__offcanvas-level button.wf-menu__item:hover::before,
.wf-menu__offcanvas-level li > .wf-menu-label:hover::before
{
    transform: translateY(-50%) scaleY(1);
}

/* Chevron pour items avec enfants */
.wf-bulle .wf-menu-item--has-children > a .wf-chevron
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    opacity: 0.6;
    flex-shrink: 0;
    transition: all var(--wfm-transition-duration) var(--wfm-transition-easing);
}

.wf-bulle .wf-menu-item--has-children > a:hover .wf-chevron
{
    opacity: 1;
    transform: translateX(3px);
}

.wf-bulle .wf-menu-item--has-children > a .wf-chevron::after
{
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* Chevron-split dans la bulle : même traitement que le panneau mobile —
   séparateur vertical + chevron SVG dans une zone d'action dédiée. */
.wf-bulle li.wf-menu-item--split
{
    display: flex;
    align-items: stretch;
}

.wf-bulle li.wf-menu-item--split > a
{
    flex: 1;
    min-width: 0;
}

.wf-bulle .wf-menu__toggle
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    flex-shrink: 0;
    min-width: 44px;
    padding: 0 0.75rem;
    border: none;
    border-left: 1px solid var(--wfm-border);
    background: transparent;
    color: var(--wfm-color);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--wfm-transition-duration) var(--wfm-transition-easing),
                color var(--wfm-transition-duration) var(--wfm-transition-easing);
}

.wf-bulle .wf-menu__toggle .wf-menu__item-chevron
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 0.6;
    transition: transform var(--wfm-transition-duration) var(--wfm-transition-easing);
}

/* Forcer la taille du SVG (sinon, en flex-item sans dimension, il s'effondre à 0) */
.wf-bulle .wf-menu__toggle .wf-menu__item-chevron svg
{
    display: block;
    width: 100%;
    height: 100%;
}

/* Survol : toute la ligne s'éclaire (label + zone chevron), peu importe la zone survolée */
.wf-bulle li.wf-menu-item--split:hover > a,
.wf-bulle li.wf-menu-item--split:hover > .wf-menu__toggle
{
    background: var(--wfm-hover);
    color: var(--wfm-accent);
}

.wf-bulle li.wf-menu-item--split:hover > a::before
{
    transform: translateY(-50%) scaleY(1);
}

.wf-bulle li.wf-menu-item--split:hover .wf-menu__item-chevron
{
    opacity: 1;
    transform: translateX(2px);
}

/* ============================================
   Bouton retour
   ============================================ */

.wf-bulle__back
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    color: var(--wfm-color);
    text-decoration: none;
    font-size: var(--wfm-bulle-back-font-size);
    font-weight: var(--wfm-font-weight);
    font-style: var(--wfm-font-style);
    border-bottom: 1px solid var(--wfm-border);
    margin-bottom: 0.25rem;
    transition: all var(--wfm-transition-duration) var(--wfm-transition-easing);
    position: sticky;
    top: 0;
    background: var(--wfm-bg);
    z-index: 1;
    flex-shrink: 0;
}

.wf-bulle__back::before
{
    content: '';
    width: 6px;
    height: 6px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
    transition: all var(--wfm-transition-duration) var(--wfm-transition-easing);
}

.wf-bulle__back:hover
{
    color: var(--wfm-accent);
    background: var(--wfm-hover);
}

.wf-bulle__back:hover::before
{
    opacity: 1;
    transform: rotate(45deg) translateX(-2px) translateY(2px);
}

/* ============================================
   Contenu et transitions drill-down
   ============================================ */

.wf-bulle__content
{
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    transition: opacity var(--wfm-drilldown-duration) var(--wfm-transition-easing),
                transform var(--wfm-drilldown-duration) var(--wfm-transition-easing);
}

/* Scrollbar personnalisée (bulle) */
.wf-bulle__content::-webkit-scrollbar
{
    width: 6px;
}

.wf-bulle__content::-webkit-scrollbar-track
{
    background: transparent;
}

.wf-bulle__content::-webkit-scrollbar-thumb
{
    background: var(--wfm-border);
    border-radius: 3px;
}

.wf-bulle__content::-webkit-scrollbar-thumb:hover
{
    background: var(--wfm-accent);
}

/* Scrollbar personnalisée (offcanvas) */
.wf-menu__offcanvas-level::-webkit-scrollbar
{
    width: 6px;
}

.wf-menu__offcanvas-level::-webkit-scrollbar-track
{
    background: transparent;
}

.wf-menu__offcanvas-level::-webkit-scrollbar-thumb
{
    background: var(--wfm-offcanvas-border, var(--wfm-border));
    border-radius: 3px;
}

.wf-menu__offcanvas-level::-webkit-scrollbar-thumb:hover
{
    background: var(--wfm-offcanvas-accent, var(--wfm-accent));
}

.wf-bulle__content--transitioning-forward
{
    opacity: 0;
    transform: translateX(-30%);
}

.wf-bulle__content--transitioning-back
{
    opacity: 0;
    transform: translateX(30%);
}

.wf-bulle__content--entering-forward,
.wf-bulle__content--entering-back
{
    transition: none;
}

.wf-bulle__content--entering-forward
{
    opacity: 0;
    transform: translateX(100%);
}

.wf-bulle__content--entering-back
{
    opacity: 0;
    transform: translateX(-100%);
}

/* ============================================
   MODE MOBILE - OVERLAY
   ============================================ */

.wf-menu__overlay
{
    position: fixed;
    inset: 0;
    background: var(--wfm-overlay-bg);
    backdrop-filter: blur(var(--wfm-overlay-blur));
    -webkit-backdrop-filter: blur(var(--wfm-overlay-blur));
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9998;
}

.wf-menu__overlay.is-visible
{
    opacity: 1;
    visibility: visible;
}

/* ============================================
   MODE MOBILE - OFFCANVAS PANEL
   ============================================ */

.wf-menu__offcanvas
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: var(--wfm-offcanvas-max-width);
    height: 100vh;
    height: 100dvh;
    background: var(--wfm-offcanvas-bg, var(--wfm-bg));
    transform: translateX(-100%);
    /* FERMÉ = hors écran ET masqué : seulement translaté, ses liens restaient dans l'ordre de
       tabulation et dans l'arbre d'accessibilité (Tab partait dans un panneau invisible, un
       lecteur d'écran lisait le menu deux fois ; audit du 2026-10-01). La visibilité bascule
       APRÈS la sortie, pour que l'animation reste visible. */
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    overflow: hidden;
    font-family: var(--wfm-font-family);
    font-size: var(--wfm-font-size);
}

/* Desktop : largeur fixe */
@media (min-width: 481px)
{
    .wf-menu__offcanvas
    {
        width: var(--wfm-offcanvas-width);
        max-width: min(var(--wfm-offcanvas-max-width), 90vw);
    }
}

.wf-menu__offcanvas.is-open
{
    transform: translateX(0);
    box-shadow: var(--wfm-offcanvas-shadow);
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

.wf-menu__offcanvas--right
{
    left: auto;
    right: 0;
    transform: translateX(100%);
}

.wf-menu__offcanvas--right.is-open
{
    transform: translateX(0);
}

/* Glass theme pour l'offcanvas */
.wf-menu--glass .wf-menu__offcanvas
{
    backdrop-filter: var(--wfm-bulle-backdrop);
    -webkit-backdrop-filter: var(--wfm-bulle-backdrop);
    border-right: 1px solid var(--wfm-offcanvas-border, var(--wfm-border));
}

.wf-menu--glass .wf-menu__offcanvas--right
{
    border-right: none;
    border-left: 1px solid var(--wfm-offcanvas-border, var(--wfm-border));
}

/* ============================================
   OFFCANVAS - HEADER
   ============================================ */

.wf-menu__offcanvas-header
{
    padding: var(--wfm-offcanvas-header-padding);
    border-bottom: 1px solid var(--wfm-offcanvas-border, var(--wfm-border));
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    background: var(--wfm-offcanvas-bg, var(--wfm-bg));
    position: relative;
    z-index: 10;
}

.wf-menu__offcanvas-header-content
{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.wf-menu__offcanvas-icon
{
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: var(--wfm-offcanvas-icon-size, 28px);
}

.wf-menu__offcanvas-icon img,
.wf-menu__offcanvas-icon svg
{
    height: 100%;
    width: auto;
}

img.wf-menu__offcanvas-icon
{
    height: var(--wfm-offcanvas-icon-size, 28px);
    width: auto;
}

.wf-menu__offcanvas-title
{
    font-size: var(--wfm-offcanvas-title-font-size);
    font-weight: var(--wfm-offcanvas-title-font-weight);
    font-style: var(--wfm-font-style);
    color: var(--wfm-offcanvas-color, var(--wfm-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-menu__offcanvas-close
{
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--wfm-root-item-radius, 8px);
    color: var(--wfm-offcanvas-color, var(--wfm-color));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all var(--wfm-transition-duration) var(--wfm-transition-easing);
    flex-shrink: 0;
}

.wf-menu__offcanvas-close:hover
{
    background: var(--wfm-offcanvas-accent, var(--wfm-accent));
    color: #fff;
    transform: rotate(90deg);
}

/* Light theme: close button */
.wf-menu--light .wf-menu__offcanvas-close
{
    background: rgba(0, 0, 0, 0.05);
    color: var(--wfm-offcanvas-color, var(--wfm-color));
}

.wf-menu--light .wf-menu__offcanvas-close:hover
{
    background: var(--wfm-offcanvas-accent, var(--wfm-accent));
    color: #fff;
}

/* ============================================
   OFFCANVAS - BACK BUTTON
   ============================================ */

.wf-menu__offcanvas-back
{
    display: none;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--wfm-offcanvas-color, var(--wfm-color));
    font-size: var(--wfm-offcanvas-font-size);
    font-weight: var(--wfm-font-weight);
    font-style: var(--wfm-font-style);
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem;
    margin-right: 0.5rem;
    border-radius: var(--wfm-root-item-radius, 8px);
    transition: all var(--wfm-transition-duration) var(--wfm-transition-easing);
    flex-shrink: 0;
    font-family: inherit;
}

.wf-menu__offcanvas-back:hover
{
    background: var(--wfm-offcanvas-hover, var(--wfm-hover));
}

.wf-menu__offcanvas-back svg
{
    width: 20px;
    height: 20px;
    transition: transform var(--wfm-transition-duration) var(--wfm-transition-easing);
}

.wf-menu__offcanvas-back:hover svg
{
    transform: translateX(-3px);
}

.wf-menu__offcanvas.has-parent .wf-menu__offcanvas-back
{
    display: flex;
}

.wf-menu__offcanvas.has-parent .wf-menu__offcanvas-icon,
.wf-menu__offcanvas.has-parent .wf-menu__offcanvas-title
{
    display: none;
}

/* ============================================
   OFFCANVAS - LEVELS CONTAINER
   ============================================ */

.wf-menu__offcanvas-body
{
    flex: 1;
    position: relative;
    overflow: hidden;
}

.wf-menu__offcanvas-levels
{
    position: relative;
    height: 100%;
    width: 100%;
}

/* ============================================
   OFFCANVAS - BOUTONS DE L'EN-TÊTE (recopiés de la barre)
   En tête du panneau, seulement ceux que la barre cache à cette largeur
   (wfm-deferred.js _syncPanelButtons). Classe et non [hidden] : .wp-btn pose
   son display, qui battrait la règle du navigateur.
   ============================================ */

.wf-menu__offcanvas-ctas
{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wfm-offcanvas-border, var(--wfm-border));
}

.wf-menu__offcanvas-ctas > a
{
    justify-content: center;
}

.wf-menu__offcanvas-ctas--empty,
.wf-menu__offcanvas-ctas > .wf-menu__offcanvas-cta--off
{
    display: none;
}

/* ============================================
   OFFCANVAS - LANGUES DU SITE (recopiées du sélecteur de l'en-tête)
   En pied du panneau, hors des niveaux : elles restent visibles quand on
   descend dans un sous-menu.
   ============================================ */

.wf-menu__offcanvas-langs
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--wfm-offcanvas-border, var(--wfm-border));
}

.wf-menu__offcanvas-langs a
{
    padding: 0.5rem 0.75rem;
    border-radius: var(--wfm-root-item-radius, 8px);
    color: var(--wfm-offcanvas-color, var(--wfm-color));
    font-size: var(--wfm-offcanvas-font-size);
    text-decoration: none;
}

.wf-menu__offcanvas-langs a:hover
{
    background: var(--wfm-offcanvas-hover, var(--wfm-hover));
}

/* Langue courante : l'ENCRE du panneau, en gras, soulignée de l'accent. L'accent en couleur de
   texte ne tenait pas sur le fond clair du panneau (2,95:1 mesuré le 2026-10-01, 4,5 requis) ;
   un trait n'est pas du texte. */
.wf-menu__offcanvas-langs a[aria-current]
{
    font-weight: 700;
    text-decoration: underline;
    -webkit-text-decoration-color: var(--wfm-offcanvas-accent, var(--wfm-accent));
    text-decoration-color: var(--wfm-offcanvas-accent, var(--wfm-accent));
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.wf-menu__offcanvas-langs .wp-langs-check
{
    display: none;
}

/* ============================================
   OFFCANVAS - SINGLE LEVEL
   ============================================ */

.wf-menu__offcanvas-level
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0;
    background: var(--wfm-offcanvas-bg, var(--wfm-bg));

    /* Initial state: hidden to the right */
    transform: translateX(100%) scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s 0.35s;
}

.wf-menu__offcanvas-level.is-active
{
    transform: translateX(0) scale(1);
    opacity: 1;
    visibility: visible;
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s 0s;
}

.wf-menu__offcanvas-level.is-left
{
    transform: translateX(-30%) scale(0.95);
    opacity: 0;
}

/* ============================================
   OFFCANVAS - MENU ITEMS
   ============================================ */

.wf-menu__offcanvas-level ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.wf-menu__offcanvas-level li
{
    position: relative;
}

.wf-menu__offcanvas-level a,
.wf-menu__offcanvas-level button.wf-menu__item,
.wf-menu__offcanvas-level li > .wf-menu-label
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--wfm-offcanvas-item-padding, 0.875rem 1.5rem);
    color: var(--wfm-offcanvas-color, var(--wfm-color));
    text-decoration: none;
    font-size: var(--wfm-offcanvas-font-size);
    font-weight: var(--wfm-offcanvas-font-weight);
    font-style: var(--wfm-font-style);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all var(--wfm-transition-duration) var(--wfm-transition-easing);
    position: relative;
    font-family: inherit;
}

.wf-menu__item-text
{
    flex: 1;
    min-width: 0;
}

/* Chevron for items with children */
.wf-menu__item-chevron
{
    width: 20px;
    height: 20px;
    opacity: 0.6;
    transition: all var(--wfm-transition-duration) var(--wfm-transition-easing);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.wf-menu__offcanvas-level button.wf-menu__item:hover .wf-menu__item-chevron
{
    opacity: 1;
    transform: translateX(3px);
}

/* Chevron-split offcanvas : <a> navigable (ferme l'offcanvas) + bouton chevron (drill-down) */
.wf-menu__offcanvas-level li.wf-menu-item--split
{
    display: flex;
    align-items: center;
}

.wf-menu__offcanvas-level li.wf-menu-item--split > a
{
    flex: 1;
    width: auto;
}

.wf-menu__offcanvas-level li.wf-menu-item--split > .wf-menu__toggle
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    min-width: 44px;
    padding: 0 0.75rem;
    background: none;
    border: none;
    border-left: 1px solid var(--wfm-offcanvas-border, var(--wfm-border));
    color: var(--wfm-offcanvas-color, var(--wfm-color));
    cursor: pointer;
    transition: all var(--wfm-transition-duration) var(--wfm-transition-easing);
}

.wf-menu__offcanvas-level li.wf-menu-item--split > .wf-menu__toggle:hover
{
    background: var(--wfm-offcanvas-hover, var(--wfm-hover));
    color: var(--wfm-offcanvas-accent, var(--wfm-accent));
}

.wf-menu__offcanvas-level li.wf-menu-item--split > .wf-menu__toggle .wf-menu__item-chevron
{
    margin-left: 0;
}

/* ============================================
   OFFCANVAS - ITEM STAGGER ANIMATION
   ============================================ */

.wf-menu__offcanvas-level.is-active li
{
    animation: wfMenuSlideIn 0.4s ease forwards;
    opacity: 0;
    /* Stagger delay basé sur l'index (défini via JS ou fallback) */
    animation-delay: calc(0.05s + var(--wfm-item-index, 0) * 0.03s);
}

@keyframes wfMenuSlideIn
{
    from
    {
        opacity: 0;
        transform: translateX(20px);
    }
    to
    {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Reverse animation when going back */
.wf-menu__offcanvas-level.is-active.from-left li
{
    animation-name: wfMenuSlideInReverse;
}

@keyframes wfMenuSlideInReverse
{
    from
    {
        opacity: 0;
        transform: translateX(-20px);
    }
    to
    {
        opacity: 1;
        transform: translateX(0);
    }
}