/* Copied as is from Tempo (webacappella.lite), packages/portal/studio/engine/menu_v4/wfm.css,
   commit c309cbf1 of 2026-10-07. Not edited here: our colours go through the --wfm-* variables
   (server/www/public/www.css). */
/* ============================================
   WF Menu — CSS structurel (barre racine + hamburger + responsive)
   Chargé en <link>, ne contient AUCUNE couleur en dur.
   Les variables --wfm-* sont déclarées par le C++ dans le HTML inline.
   Ce bloc fournit les valeurs par défaut de secours.
   Les styles bulle/offcanvas sont dans wfm-deferred.css (chargé au premier clic).
   ============================================ */

/* ============================================
   VALEURS PAR DÉFAUT
   Toutes les variables --wfm-* en un seul endroit.
   Le C++ surcharge celles qu'il connaît ; les autres gardent ces défauts.
   ============================================ */

.wf-menu
{
    /* --- Couleurs conteneurs (bulle, offcanvas) --- */
    --wfm-bg: #ffffff;
    --wfm-color: #333333;
    --wfm-accent: #4a6cf7;
    --wfm-hover: rgba(74, 108, 247, 0.08);
    --wfm-border: rgba(0, 0, 0, 0.08);

    /* --- Barre racine --- */
    --wfm-root-bg: transparent;
    --wfm-root-color: var(--wfm-color);
    --wfm-root-hover-bg: var(--wfm-root-bg);
    --wfm-root-hover-color: var(--wfm-root-color);
    --wfm-root-item-padding-v: 0.625rem;
    --wfm-root-item-padding-h: 1rem;
    --wfm-root-item-radius: 8px;
    --wfm-root-gap: 0.25rem;
    --wfm-root-font-size: var(--wfm-font-size);
    --wfm-root-font-weight: var(--wfm-font-weight);
    --wfm-root-font-style: var(--wfm-font-style);

    /* --- Typographie --- */
    --wfm-font-family: inherit;
    --wfm-font-size: 0.9375rem;
    --wfm-font-weight: 500;
    --wfm-font-style: normal;

    /* --- Items bulle (popover) --- */
    --wfm-item-padding: 0.625rem 1.25rem;
    --wfm-bulle-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    --wfm-bulle-radius: 12px;
    --wfm-bulle-min-width: 220px;
    --wfm-bulle-padding: 0.5rem 0;
    --wfm-bulle-back-font-size: 0.875rem;

    /* --- Hamburger --- */
    --wfm-hamburger-size: 44px;
    --wfm-hamburger-bg: var(--wfm-root-bg);
    --wfm-hamburger-color: var(--wfm-root-color);
    --wfm-hamburger-hover-bg: var(--wfm-accent);
    --wfm-hamburger-radius: var(--wfm-root-item-radius);

    /* --- Offcanvas (panneau mobile) --- */
    --wfm-offcanvas-bg: var(--wfm-bg);
    --wfm-offcanvas-color: var(--wfm-color);
    --wfm-offcanvas-accent: var(--wfm-accent);
    --wfm-offcanvas-hover: var(--wfm-hover);
    --wfm-offcanvas-border: var(--wfm-border);
    --wfm-offcanvas-width: 320px;
    --wfm-offcanvas-max-width: 100%;
    --wfm-offcanvas-item-padding: 0.875rem 1.5rem;
    --wfm-offcanvas-font-size: var(--wfm-font-size);
    --wfm-offcanvas-font-weight: var(--wfm-font-weight);
    --wfm-offcanvas-header-padding: 1.25rem 1.5rem;
    --wfm-offcanvas-title-font-size: 1.125rem;
    --wfm-offcanvas-title-font-weight: 600;
    --wfm-offcanvas-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);

    /* --- Overlay --- */
    --wfm-overlay-bg: rgba(0, 0, 0, 0.6);
    --wfm-overlay-blur: 4px;

    /* --- Transitions --- */
    --wfm-transition-duration: 0.2s;
    --wfm-transition-easing: ease;
    --wfm-drilldown-duration: 0.25s;
}

/* ============================================
   Reset du menu
   ============================================ */

.wf-menu,
.wf-menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.wf-menu
{
    position: relative;
    display: flex;
    width: 100%;
    font-family: var(--wfm-font-family);
    font-style: var(--wfm-font-style);
}

.wf-menu > ul
{
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--wfm-root-gap);
}

/* ============================================
   Mode vertical
   ============================================ */

.wf-menu--vertical
{
    display: flex;
    flex-direction: column;
}

.wf-menu--vertical > ul
{
    flex-direction: column;
    align-items: stretch;
    gap: var(--wfm-root-gap);
}

.wf-menu--vertical > ul > li > a,
.wf-menu--vertical > ul > li > .wf-menu-label
{
    justify-content: space-between;
}

.wf-menu > ul > li
{
    position: relative;
}

/* Items du menu racine.
   ENTRÉE SANS PAGE (SaaS) : renderMenu l'écrit en span de classe wf-menu-label, la copie C++
   ne connaît que des <a>. Le libellé est donc visé À CÔTÉ du lien dans chaque règle de la
   barre, ici et dans wfm-effects.css ; sans cela un dossier « PLUS » gardait la police du
   header, sans padding, sans majuscules ni chevron (site client, 2026-10-07). Chaque règle
   du libellé est celle du lien, `a` remplacé par `.wf-menu-label` et rien d'autre : leurs
   écarts de spécificité restent ceux des règles du lien, donc la cascade aussi (la page
   courante garde sa teinte sous la souris). Un libellé SEUL (ni page ni enfants) réagit au
   survol comme les autres, décision du 07/10 : « l'effet normal », la mention « lien non
   défini » dit le reste. Seuls le chevron et le curseur visent le DOSSIER
   (`li.wf-menu-item--has-children`, posé par renderMenu). */
.wf-menu > ul > li > a,
.wf-menu > ul > li > .wf-menu-label
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--wfm-root-item-padding-v) var(--wfm-root-item-padding-h);
    color: var(--wfm-root-color);
    text-decoration: none;
    font-size: var(--wfm-root-font-size);
    line-height: var(--wfm-line-height);
    font-weight: var(--wfm-root-font-weight);
    font-style: var(--wfm-root-font-style);
    border-radius: var(--wfm-root-item-radius);
    background: var(--wfm-root-bg);
    transition: all var(--wfm-transition-duration) var(--wfm-transition-easing);
    white-space: nowrap;
}

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

.wf-menu > ul > li.wf-menu-item--active > a,
.wf-menu > ul > li.wf-menu-item--active > .wf-menu-label
{
    background: var(--wfm-root-hover-bg);
    color: var(--wfm-root-hover-color);
}

/* Le dossier s'ouvre au clic (doigt, clavier) : il se présente comme tel */
.wf-menu > ul > .wf-menu-item--has-children > .wf-menu-label
{
    cursor: pointer;
}

/* MENTION « LIEN NON DÉFINI » d'une entrée sans page ni enfants : l'attribut est posé par
   renderMenu (texte dans la langue du site) et recopié par la bulle et le panneau. Visible
   des visiteurs aussi (décision du 07/10/2026). Pas de règle propre à la barre : elle sert
   les trois surfaces. Encre du conteneur (currentColor), sans color-mix (plancher visiteur
   Safari 15.4) ; casse et espacement remis à zéro, le réglage « majuscules » de l'en-tête
   ne vaut que pour le libellé. ::after est libre ici, le chevron ne vise que le dossier. */
.wf-menu-label[data-wfm-nolink]::after
{
    content: attr(data-wfm-nolink);
    flex-shrink: 0;
    margin-left: 0.5em;
    padding: 0.125em 0.5em;
    border: 1px solid currentColor;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
    opacity: 0.75;
}

/* Indicateur de sous-menu (menu racine) */
.wf-menu > ul > .wf-menu-item--has-children > a::after,
.wf-menu > ul > .wf-menu-item--has-children > .wf-menu-label::after
{
    content: '';
    box-sizing: content-box;
    width: 5px;
    height: 5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
    margin-left: 0.25rem;
    transition: transform var(--wfm-transition-duration) var(--wfm-transition-easing);
}

/* `--open` = sous-menu ouvert (posé par wfm-deferred.js), distinct de `--active` = page
   courante (posé par le serveur). La copie C++ d'origine confond les deux. */
.wf-menu > ul > .wf-menu-item--has-children.wf-menu-item--open > a::after,
.wf-menu > ul > .wf-menu-item--has-children.wf-menu-item--open > .wf-menu-label::after
{
    transform: rotate(-135deg);
}

/* Flèche en mode vertical : pointe vers la droite */
.wf-menu--vertical > ul > .wf-menu-item--has-children > a::after,
.wf-menu--vertical > ul > .wf-menu-item--has-children > .wf-menu-label::after
{
    transform: rotate(-45deg);
    margin-left: auto;
}

.wf-menu--vertical > ul > .wf-menu-item--has-children.wf-menu-item--open > a::after,
.wf-menu--vertical > ul > .wf-menu-item--has-children.wf-menu-item--open > .wf-menu-label::after
{
    transform: rotate(-45deg) translateX(2px);
}

/* ============================================
   CHEVRON-SPLIT (item parent avec lien réel)
   Le label reste un <a> navigable, le chevron devient un <button> séparé.
   ============================================ */

/* Pas de double chevron : on supprime le ::after du <a> quand split */
.wf-menu > ul > .wf-menu-item--split > a::after,
.wf-menu--vertical > ul > .wf-menu-item--split > a::after
{
    content: none;
}

/* Le <li> split aligne le <a> et le bouton côte à côte, même hauteur que les voisins */
.wf-menu > ul > .wf-menu-item--split
{
    display: flex;
    align-items: stretch;
}

/* Le label ne garde quasiment pas de padding à droite : le chevron colle au texte */
.wf-menu > ul > .wf-menu-item--split > a
{
    padding-right: 0.125rem;
}

/* Item split : le <a> et le chevron forment UNE pilule continue → coins internes
   carrés, coins externes arrondis (inoffensif hors actif/hover : fond transparent). */
.wf-menu > ul > .wf-menu-item--split > a
{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.wf-menu > ul > .wf-menu-item--split > .wf-menu__toggle
{
    border-radius: var(--wfm-root-item-radius);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* État actif : le chevron partage le fond + la teinte du libellé (sinon il dépasse sans fond). */
.wf-menu > ul > li.wf-menu-item--active.wf-menu-item--split > .wf-menu__toggle
{
    background: var(--wfm-root-hover-bg);
    color: var(--wfm-root-hover-color);
}
/* Survol et sous-menu ouvert : l'ENTRÉE s'allume, libellé et chevron ensemble. Sans ceci,
   seul le <a> prenait le fond au survol, coins droits carrés, chevron dehors : une pilule
   coupée net, et rien du tout en survolant le chevron. Spécificité de (0,2,2) à (0,4,1) :
   bat le repos, perd contre les états actifs de wfm-effects.css (pastille, aplat), que la
   page courante garde donc sous la souris. */
.wf-menu > ul > .wf-menu-item--split:hover > a,
.wf-menu > ul > .wf-menu-item--split:hover > .wf-menu__toggle,
.wf-menu > ul > .wf-menu-item--open > a,
.wf-menu > ul > .wf-menu-item--open > .wf-menu-label,
.wf-menu > ul > .wf-menu-item--split.wf-menu-item--open > .wf-menu__toggle
{
    background: var(--wfm-root-hover-bg);
    color: var(--wfm-root-hover-color);
}

.wf-menu--vertical > ul > .wf-menu-item--split > a
{
    flex: 1;
    padding-right: 0;
}

/* Bouton chevron : compact, épouse la hauteur de l'item (pas de boîte 44px qui déforme).
   min-width 24px = le plancher de WCAG 2.2 (2.5.8, Target Size minimum), pas un
   choix de goût : le padding seul donnait 19px de large, mesuré sur le site
   officiel le 2026-09-22, et l'audit d'accessibilité le comptait en « serious »
   sur toutes les pages en desktop. 24 et pas 44 : la hauteur vient déjà de
   align-self stretch, et 44 rendrait la barre bancale, ce que le commentaire
   ci-dessus refusait à juste titre. En panneau latéral la cible fait 45px, le
   min-width n'y change donc rien. */
.wf-menu__toggle
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    min-width: 24px;
    padding: 0 0.5rem 0 0.25rem;
    margin: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Chevron interne : réplique la géométrie du ::after racine */
.wf-menu__toggle .wf-chevron
{
    display: inline-block;
    box-sizing: content-box;
    width: 5px;
    height: 5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
    transition: transform var(--wfm-transition-duration) var(--wfm-transition-easing);
}

.wf-menu__toggle[aria-expanded="true"] .wf-chevron
{
    transform: rotate(-135deg);
}

/* Mode vertical : le chevron pointe vers la droite */
.wf-menu--vertical .wf-menu__toggle .wf-chevron
{
    transform: rotate(-45deg);
}

.wf-menu--vertical .wf-menu__toggle[aria-expanded="true"] .wf-chevron
{
    transform: rotate(-45deg) translateX(2px);
}

/* Cacher les sous-menus natifs */
.wf-menu li > ul
{
    display: none;
}

/* ============================================
   HAMBURGER
   ============================================ */

.wf-menu__hamburger
{
    display: none;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: var(--wfm-hamburger-size);
    height: var(--wfm-hamburger-size);
    border: 1px solid var(--wfm-hamburger-border-color, transparent);
    background: var(--wfm-hamburger-bg);
    border-radius: var(--wfm-hamburger-radius);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all var(--wfm-transition-duration) var(--wfm-transition-easing);
    position: relative;
}

.wf-menu__hamburger.is-active
{
    z-index: 1001;
}

.wf-menu__hamburger:hover
{
    background: var(--wfm-hamburger-hover-bg);
    border-color: var(--wfm-hamburger-hover-border-color, transparent);
    transform: scale(1.05);
}

.wf-menu__hamburger:hover > svg
{
    fill: var(--wfm-hamburger-hover-color, var(--wfm-hamburger-color));
}

/* SVG hamburger icon — generated from MenuMobileBut_D::ICON_SIZE_FACTOR */
.wf-menu__hamburger > svg
{
    width: var(--wfm-hamburger-icon-size, 55%);
    height: var(--wfm-hamburger-icon-size, 55%);
    fill: var(--wfm-hamburger-color);
}

/* ============================================
   ÉLÉMENTS INJECTÉS PAR LE JS — état initial caché
   (évite le flash avant chargement de wfm-deferred.css)
   ============================================ */

.wf-menu__overlay
{
    position: fixed;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 9998;
}

.wf-menu__offcanvas
{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    visibility: hidden;   /* fermé = hors de l'ordre de tabulation (cf. wfm-deferred.css) */
    z-index: 9999;
}

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

/* ============================================
   BODY LOCK (utilisé par le JS offcanvas)
   ============================================ */

body.wf-menu-locked
{
    overflow: hidden;
}