/* Copied as is from Tempo (webacappella.lite), packages/portal/studio/engine/menu_v4/wfm-effects.css,
   commit c309cbf1 of 2026-10-07. The site uses the « trait » effect (wf-menu--fx-trait). */
/* ============================================================
   WF Menu : EFFETS de survol et de PAGE COURANTE sur la barre racine.

   POURQUOI UN FICHIER, ET PAS wfm.css : wfm.css est la copie locale du
   composant menu_v4 du WebAcappella de bureau (WA_2021/data_src/static_res/
   wa_res/static/wa/menu_v4/). Les deux ont déjà divergé sur l'item scindé.
   Tout ce qui est propre au SaaS vit donc ici, pour qu'une reprise de la
   version C++ ne l'écrase pas.

   POURQUOI PAS header_01 NON PLUS, où vivaient `pills` et `underline` jusqu'au
   2026-09-23 : le site officiel n'a pas de header_01. Il montait son propre
   trait dans OFFICIAL_MENU_EFFECT (official/menu.ts), c'est a dire un second
   exemplaire des mêmes sélecteurs, qui avait déjà divergé sur trois valeurs
   (dégradé au lieu de currentColor, bout arrondi, :focus-visible). L'effet
   appartient au MENU et non au chrome qui l'héberge, d'où des classes posées
   sur le nav `.wf-menu` : n’importe quel porteur peut les poser, sans
   rien savoir du header.

   CHAQUE EFFET DOIT DISTINGUER LE SURVOL DE LA PAGE COURANTE. C'est la raison
   d'être de l'axe : wfm.css donnait aux deux états exactement les mêmes
   déclarations (et site.css l'assumait en commentaire), si bien qu'une souris
   posée sur un item rendait la page courante introuvable. Baymard 2025 compte
   95 % des sites qui ne signalent pas la page courante ; le réglage par défaut
   en faisait partie. Un effet qui ne sépare pas les deux états n'a pas sa
   place dans ce fichier.

   ORDRE DE CHARGEMENT, TOUJOURS APRÈS wfm.css : @import de site.css (éditeur),
   buildCssBundle (site publié), coquille inlinée (site officiel). Les états de
   wfm.css sont donc surchargés par l'ordre des sources, doublé d'une classe de
   spécificité offerte par `:not(.wf-menu--vertical)`. Ce `:not` n'est pas
   décoratif : le panneau latéral et le menu vertical réutilisent le sélecteur
   `.wf-menu > ul > li > a`, et un trait de survol y serait absurde.

   AUCUNE COULEUR EN DUR. Le marqueur lit --wfm-fx-color (un `linear-gradient`
   est admis, c'est un `background`), le texte lit les jetons --wfm-root-* de
   wfm.css. C'est ce qui permet aux surfaces sombres de header_01 et à la
   palette du site officiel de s'accorder sans réécrire une seule règle.

   ANCRAGE DU MARQUEUR : sur le `<li>`, seul élément positionné du couple
   (wfm.css lui pose position:relative). Sur une entrée à sous-menu, le trait
   passe donc aussi sous le chevron. C'est voulu : le marqueur désigne
   l'ENTRÉE, pas la zone cliquable du libellé.

   ENTRÉE SANS PAGE (dossier ou libellé seul, span de classe wf-menu-label écrit par
   renderMenu) : chaque règle qui vise le lien vise aussi le libellé, `a` remplacé par
   `.wf-menu-label` et rien d'autre, pour garder entre ces règles les écarts de
   spécificité de celles du lien (raison détaillée dans wfm.css, « Items du menu
   racine »). Le libellé seul reçoit le même effet que les autres (décision du 07/10).
   ============================================================ */

/* LES REPLIS SONT DANS `:where()`, DONC DE SPÉCIFICITÉ ZÉRO, et c'est le sujet
   du bloc : ce sont des valeurs par défaut, elles doivent perdre contre tout
   porteur qui parle, quel que soit l'ordre des sources. Écrites nues, elles
   pesaient 0,2,0 (classe + `:not(classe)`) et battaient le `.wf-menu` du site
   officiel (0,1,0) : le 2026-09-23, le trait de la barre y est repassé de
   `--wo-marque` à currentColor, c'est a dire du dégradé de marque à un souligné
   d'encre, et la page courante de magenta à l'encre. Les sites clients n'ont
   rien vu, mais par chance seule : leur `.wp-header .wf-menu` (site.css) pesait
   0,2,0 lui aussi et ne gagnait que par l'ordre de buildCssBundle.
   Le `:not` reste, dans le `:where` : il dit QUI est visé, pas COMBIEN ça pèse. */
:where(.wf-menu:not(.wf-menu--vertical))
{
    /* Couleur du marqueur (trait, point). Le repli sur currentColor donne un
       effet discret mais présent à un porteur qui ne dit rien ; les sites
       clients posent le dégradé de marque (site.css), le site officiel le
       sien (official/menu.ts). */
    --wfm-fx-color: currentColor;
    /* Teinte du libellé de la PAGE COURANTE. C'est elle qui sépare l'actif du
       survol sur les effets à marqueur : la couleur ne décale rien, là où un
       passage en gras changerait la largeur de l'item et ferait bouger ses
       voisins, sous les yeux de la mécanique de fit. */
    --wfm-fx-ink: var(--wfm-root-hover-color);
    /* Fond PLEIN de la pastille de page courante (effet `pastille`). Les
       replis valent « encre du menu sur le fond du menu », donc un contraste
       maximal sans rien connaître du thème du porteur. */
    --wfm-fx-solid-bg: var(--wfm-root-color);
    --wfm-fx-solid-color: var(--wfm-bg);
    /* Aplat de la page courante (effet `aplat`), plus soutenu que celui du
       survol, qui reste --wfm-root-hover-bg. Son libellé a sa propre teinte,
       et pas --wfm-fx-ink : celle des effets à marqueur est posée sur le FOND
       DE LA BARRE, celle-ci sur un aplat de marque, et la teinte de marque sur
       une teinte de marque descend sous le seuil AA (mesuré à 4,26:1 par
       l'audit du chrome, ton chaleureux, le 2026-09-23). Le repli garde la
       symétrie avec --wfm-fx-solid-* pour un porteur qui ne dit rien. */
    --wfm-fx-tint-bg: var(--wfm-hover);
    --wfm-fx-tint-color: var(--wfm-fx-ink);
}

/* ── Remise à plat, commune aux effets À MARQUEUR (trait, point) ───────────
   Ces deux effets ne posent PAS d'aplat : ils écrivent sous le libellé. Sans
   cette remise à zéro, la pastille par défaut de wfm.css resterait dessous et
   les deux langages se superposeraient. Le chevron d'un item scindé est visé
   avec le libellé, sinon il garderait le fond de l'état actif et la pastille
   réapparaîtrait, coupée en deux. Le survol est lu sur le `<li>` et l'état
   `--open` (sous-menu ouvert, wfm-deferred.js) est visé aussi : wfm.css allume
   l'entrée entière dans ces deux cas. Spécificités égales à celles du bloc
   suivant pour le libellé, inférieures pour le chevron : la teinte de page
   courante y gagne, sous la souris comme sous-menu ouvert. */
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li:hover > a,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li:hover > .wf-menu__toggle,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--open > a,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--open > .wf-menu__toggle,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > a,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--active.wf-menu-item--split > .wf-menu__toggle,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li:hover > .wf-menu-label,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--open > .wf-menu-label,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > .wf-menu-label,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li:hover > a,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li:hover > .wf-menu__toggle,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--open > a,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--open > .wf-menu__toggle,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > a,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--active.wf-menu-item--split > .wf-menu__toggle,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li:hover > .wf-menu-label,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--open > .wf-menu-label,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > .wf-menu-label
{
    background: transparent;
    color: var(--wfm-root-color);
}

/* La page courante prend la teinte de marque sur les deux effets à marqueur.
   Le chevron d'une entrée à sous-menu la prend AVEC le libellé : ils forment une
   seule entrée, et un chevron resté à la teinte de base se lit comme un défaut
   d'alignement. C'est ce que l'audit du chrome mesure sous le nom « ITEM », et il
   l'a attrapé le 2026-09-23, à la ligne près, sur 189 cas. */
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > a,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--active.wf-menu-item--split > .wf-menu__toggle,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > .wf-menu-label,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > a,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--active.wf-menu-item--split > .wf-menu__toggle,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > .wf-menu-label
{
    color: var(--wfm-fx-ink);
}

/* Socle du marqueur, commun aux deux : une boîte absolue, repliée à zéro, que
   chaque effet dimensionne. `will-change` est délibérément absent : quatre à
   huit items promus en couches pour une transition de 0,2 s au survol, c'est
   de la mémoire vidéo dépensée en permanence pour un gain invisible. */
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li > a::before,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li > .wf-menu-label::before,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li > a::before,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li > .wf-menu-label::before
{
    content: '';
    position: absolute;
    background: var(--wfm-fx-color);
    transition: transform var(--wfm-transition-duration) var(--wfm-transition-easing),
                opacity var(--wfm-transition-duration) var(--wfm-transition-easing);
    pointer-events: none;
}

/* ── EFFET `trait` : un trait qui se déroule sous le libellé ───────────────
   Le défaut de la maison, et celui du site officiel. Le trait se déroule
   depuis la gauche au survol et au focus clavier ; sur la page courante il est
   POSÉ, transition coupée, parce qu'un trait qui rejoue son animation à chaque
   arrivée sur la page attirerait l'œil sur un état qui n'a pas changé. */
/* Écrit pour l'ancienne cible des sites publiés (Safari 12, Chrome 70), et toujours juste au
   plancher visiteur actuel (render/src/lib/site-target.ts) : left/right et non inset-inline (Safari
   14.1, sinon un trait de largeur nulle), et :focus-visible dans sa PROPRE règle. Un sélecteur
   inconnu invalide toute la liste qui le contient : avant Safari 15.4 et Chrome 86, ni survol
   ni ouverture ne traçaient le trait (audit du 2026-10-01). */
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li > a::before,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li > .wf-menu-label::before
{
    left: var(--wfm-root-item-padding-h, 1rem);
    right: var(--wfm-root-item-padding-h, 1rem);
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
}

.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li:hover > a::before,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--open > a::before,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li:hover > .wf-menu-label::before,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--open > .wf-menu-label::before
{
    transform: scaleX(1);
}

.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li > a:focus-visible::before
{
    transform: scaleX(1);
}

.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li > .wf-menu-label:focus-visible::before
{
    transform: scaleX(1);
}

.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > a::before,
.wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > .wf-menu-label::before
{
    transform: scaleX(1);
    transition: none;
}

/* ── EFFET `point` : un point sous le libellé ──────────────────────────────
   La version discrète du trait, pour une barre qui ne veut pas d'une ligne
   pleine largeur. Même grammaire : il grandit au survol, il est posé sur la
   page courante. */
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li > a::before,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li > .wf-menu-label::before
{
    left: 50%;
    bottom: 5px;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
}

.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li:hover > a::before,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--open > a::before,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li:hover > .wf-menu-label::before,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--open > .wf-menu-label::before
{
    transform: scale(1);
    opacity: 1;
}

/* Règle à part, comme pour le trait : :focus-visible invaliderait la liste sur Safari < 15.4. */
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li > a:focus-visible::before
{
    transform: scale(1);
    opacity: 1;
}

.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li > .wf-menu-label:focus-visible::before
{
    transform: scale(1);
    opacity: 1;
}

.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > a::before,
.wf-menu--fx-point:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > .wf-menu-label::before
{
    transform: scale(1);
    opacity: 1;
    transition: none;
}

/* ── EFFET `aplat` : la pastille teintée, celle de wfm.css, enfin dissociée ─
   Le survol garde --wfm-root-hover-bg (rien à écrire, c'est wfm.css). La page
   courante monte d'un cran, sur --wfm-fx-tint-bg, et son libellé prend la
   teinte de marque. Sans ces deux déclarations, l'actif et le survol portaient
   le MÊME aplat : c'est exactement le défaut que cet axe existe pour réparer,
   et il valait pour tous les sites au réglage par défaut. */
.wf-menu--fx-aplat:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > a,
.wf-menu--fx-aplat:not(.wf-menu--vertical) > ul > li.wf-menu-item--active.wf-menu-item--split > .wf-menu__toggle,
.wf-menu--fx-aplat:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > .wf-menu-label
{
    background: var(--wfm-fx-tint-bg);
    color: var(--wfm-fx-tint-color);
}

/* ── EFFET `pastille` : fond PLEIN sur la page courante ────────────────────
   Le survol reste une teinte légère, la page courante est une pastille pleine.
   Pleine, parce que le réglage s'appelle « Pastille sur la page active » : une
   teinte de plus se confondrait avec le survol et ne tiendrait pas la promesse
   du libellé. Le fond est NEUTRE, jamais le dégradé de marque : la charte le
   réserve à l'emphase maximale, c'est a dire au bouton d'appel à l'action, et
   la barre en avait alors deux qui s'annulaient. Un état n'est pas un appel à
   l'action. Contraste mesuré : au delà de 15:1, contre 4,44:1 pour l'aplat.

   AUCUN FORÇAGE DE RAYON : la pastille prend --wfm-root-item-radius, celui des
   items au repos et du hamburger. Elle a porté --radius-pill jusqu'au
   2026-09-23, c'est a dire 100px dans le thème par défaut : la gélule pleine
   datait la barre et jurait avec son voisin immédiat, le hamburger, resté lui
   sur le rayon commun. Ce qui distingue `pastille` des autres effets, c'est le
   fond plein, jamais la forme.

   L'item SCINDÉ (libellé `<a>` plus bouton chevron) est visé deux fois : la
   pastille doit couvrir les deux, sinon le chevron garde la teinte de base et
   la pastille est coupée en deux. Les rayons internes et externes sont déjà
   gérés par wfm.css. */
.wf-menu--fx-pastille:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > a,
.wf-menu--fx-pastille:not(.wf-menu--vertical) > ul > li.wf-menu-item--active.wf-menu-item--split > .wf-menu__toggle,
.wf-menu--fx-pastille:not(.wf-menu--vertical) > ul > li.wf-menu-item--active > .wf-menu-label
{
    background: var(--wfm-fx-solid-bg);
    color: var(--wfm-fx-solid-color);
    font-weight: 700;
}

/* ── Mouvement réduit ──────────────────────────────────────────────────────
   Le marqueur reste, seule l'animation tombe : un visiteur qui demande moins
   de mouvement demande moins de mouvement, pas moins d'information. */
@media (prefers-reduced-motion: reduce)
{
    .wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li > a::before,
    .wf-menu--fx-trait:not(.wf-menu--vertical) > ul > li > .wf-menu-label::before,
    .wf-menu--fx-point:not(.wf-menu--vertical) > ul > li > a::before,
    .wf-menu--fx-point:not(.wf-menu--vertical) > ul > li > .wf-menu-label::before
    {
        transition: none;
    }
}