/* =====================================================================
   Mouvement — couche commune des transitions d'interface
   =====================================================================
   Ce que cette feuille adoucit (relevé image par image le 11/10/2026) :
     1. changement d'écran par le conteneur : l'ancien contenu disparaissait
        d'un coup, la pastille de chargement clignotait même sur une réponse en
        150 ms, et le nouvel écran « sautait » en place ;
     2. contenu d'onglet, de sous-onglet, de tuile : apparition d'un bloc, et
        tableau visible une fraction de seconde SANS sa mise en forme, le temps
        que bootstrap-table s'initialise ;
     3. sous-menus de la barre latérale : ouverts en une image, les entrées du
        dessous décalées de 130 px sans trajet ;
     4. menus (déroulants, listes de choix, menu du compte, volet du rail) :
        apparition sèche ;
     5. boutons : aucun retour à l'appui ;
     6. chargement d'une page complète (lien hors conteneur, enregistrement
        suivi d'une redirection, connexion) : une image vide entre deux pages.
   L'entrée des fenêtres (swal) est pilotée par js/eb_motion.js : la parade
   `animation: none !important` de dashboard-modern.css reste en place.

   TROIS RÈGLES, à tenir pour tout ajout :

   a) Tout vit sous `html.eb-motion`. Cette classe n'est posée par
      js/eb_motion.js que si l'onglet est AFFICHÉ et que la personne n'a pas
      demandé moins d'animations. Dans un onglet en arrière-plan le temps des
      animations ne s'écoule pas : une entrée qui part de 0 d'opacité y
      resterait figée — contenu présent, invisible. Sans la classe, chaque
      élément est d'emblée dans son état final.
      Seule exception, le point 6 : une transition entre deux documents ne
      peut pas dépendre d'une classe posée par un script (la page d'arrivée
      n'a encore rien exécuté). C'est le navigateur qui tient ce rôle — il
      l'abandonne de lui-même si l'onglet est masqué ou si la page d'arrivée
      tarde — et la préférence « moins d'animations » passe par la requête média.

   b) Une entrée ne doit jamais pouvoir laisser un contenu invisible. Les
      classes `.eb-motion-in*` sont posées PUIS RETIRÉES par js/eb_motion.js,
      sur `animationend` ou, à défaut, sur un délai de secours. Aucune
      animation d'ici ne garde son état final (`forwards`) : la fin d'une
      animation, c'est le style normal de l'élément.

   c) Seules l'opacité et les propriétés `translate` / `scale` sont animées.
      Jamais `transform` sur un conteneur : il deviendrait le repère de ses
      descendants en `position: fixed` (barre « Sauver », volets) pour la
      durée du trajet, et Popper écrit déjà `transform` sur les menus qu'il
      place. `translate` et `scale` se composent avec lui sans l'écraser.

   Les sélecteurs passent par `:where()` chaque fois qu'ils AJOUTENT une
   animation : spécificité nulle, donc toute règle du produit qui anime déjà
   l'élément (feuille d'actions mobile, toasts, SITAC…) garde la main.
   ===================================================================== */

:root {
  --eb-motion-fast: 110ms;   /* menus, appui                          */
  --eb-motion-base: 180ms;   /* apparition d'un contenu               */
  --eb-motion-slow: 240ms;   /* ce qui déplace ses voisins (accordéon) */
  --eb-ease-out: cubic-bezier(0.2, 0, 0, 1);    /* arrivée : vite puis posé */
  --eb-ease-std: cubic-bezier(0.4, 0, 0.2, 1);  /* départ doux, arrivée douce */
}

/* Une seule image clé : le point d'arrivée est le style normal de l'élément,
   quel qu'il soit (une opacité de 0,6 posée ailleurs reste 0,6). */
@keyframes eb-motion-fade-in { from { opacity: 0; } }
@keyframes eb-motion-rise-in { from { opacity: 0; translate: 0 6px; } }
@keyframes eb-motion-drop-in { from { opacity: 0; translate: 0 -4px; } }
@keyframes eb-motion-slide-in { from { opacity: 0; translate: -6px 0; } }

/* ---------------------------------------------------------------------
   1. Contenu qui arrive (js/eb_motion.js → ebMotion.entree)
   ---------------------------------------------------------------------
   Départ doux (--eb-ease-std) et non rapide : pendant les premières dizaines
   de millisecondes le fragment est encore brut (tableau sans bootstrap-table,
   listes de choix natives). À 50 ms il n'est qu'à ~10 % d'opacité. */
:where(html.eb-motion) :where(.eb-motion-in) {
  animation: eb-motion-fade-in var(--eb-motion-slow) var(--eb-ease-std);
}
/* Variante « enfants » pour #space-left : la barre du haut est remplacée sur
   place et ne doit pas clignoter, la pastille de chargement a sa propre
   entrée. La pastille « mode » (.test-label-container, MAIL DESACTIVE…) pend
   sous la barre du haut : elle fait partie du cadre, pas de l'écran qui arrive.
   Elle est écartée ici et dans le fondu de sortie ci-dessous. */
:where(html.eb-motion) :where(.eb-motion-in-enfants) > :where(:not(.eb-topbar):not(.eb-spa-loader):not(.test-label-container)) {
  animation: eb-motion-fade-in var(--eb-motion-slow) var(--eb-ease-std);
}

/* ---------------------------------------------------------------------
   2. Changement d'écran par le conteneur
   ---------------------------------------------------------------------
   L'ancien contenu reste MASQUÉ pendant le chargement (décision du
   28/07/2026, 67ab21c2b : une vue lourde ne doit pas rester sous la
   pastille). Il s'efface seulement en 90 ms au lieu d'être coupé net :
   `visibility` bascule à la fin du fondu, les clics sont coupés tout de
   suite par le `pointer-events: none` de la règle d'origine. */
html.eb-motion body.eb-has-topbar-v2 #space-left.eb-container-is-loading > :not(.eb-topbar):not(.eb-spa-loader):not(.test-label-container),
html.eb-motion body.eb-has-topbar-v2 .space-left.eb-container-is-loading > :not(.eb-topbar):not(.eb-spa-loader):not(.test-label-container),
html.eb-motion body.eb-has-topbar-v2 #space-left.eb-spa-is-loading > :not(.eb-topbar):not(.eb-spa-loader):not(.test-label-container),
html.eb-motion body.eb-has-topbar-v2 .space-left.eb-spa-is-loading > :not(.eb-topbar):not(.eb-spa-loader):not(.test-label-container) {
  transition: opacity 90ms ease-out, visibility 0s linear 90ms;
}
/* La pastille n'apparaît que si l'attente dure. Mesuré en local : la réponse
   arrive en ~150 ms, la pastille s'affichait donc une ou deux images avant de
   disparaître — un clignotement, pas une information. Sous 220 ms, rien ;
   au-delà, elle entre en fondu. `backwards` : invisible pendant le délai. */
:where(html.eb-motion body.eb-has-topbar-v2) :where(.eb-spa-loader) {
  animation: eb-motion-fade-in var(--eb-motion-base) ease-out 220ms backwards;
}

/* ---------------------------------------------------------------------
   3. Sous-menus de la barre latérale
   ---------------------------------------------------------------------
   Hauteur animée de 0 à `auto` : il faut `interpolate-size` (Chromium 129+).
   Ailleurs le bloc entier est ignoré et le sous-menu s'ouvre comme avant —
   aucune régression, seulement pas de trajet.
   L'état fermé reste `display: none` (règle d'origine) : rien ne change pour
   le clavier, les lecteurs d'écran ni les `:visible` de jQuery. C'est
   `transition-behavior: allow-discrete` qui retarde ce `display: none` à la
   fin de la fermeture, et `@starting-style` qui donne son point de départ à
   l'ouverture.
   Hors rail étroit / replié : ces deux modes masquent les sous-menus par un
   `display: none !important` qui ne doit pas être différé de 240 ms. */
@supports (interpolate-size: allow-keywords) {
  html.eb-motion:not(.eb-sidebar-is-narrow) .eb-sidebar:not(.collapsed) .eb-nav-sub {
    interpolate-size: allow-keywords;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    /* `clip` et non `hidden` : pas de zone de défilement créée, et l'axe
       horizontal reste libre. La marge laisse passer le contour de focus de
       la première et de la dernière entrée. */
    overflow-y: clip;
    overflow-clip-margin: 3px;
    transition:
      height var(--eb-motion-slow) var(--eb-ease-out),
      padding var(--eb-motion-slow) var(--eb-ease-out),
      opacity var(--eb-motion-base) ease,
      display var(--eb-motion-slow) allow-discrete;
  }
  html.eb-motion:not(.eb-sidebar-is-narrow) .eb-sidebar:not(.collapsed) .eb-nav-sub.show {
    height: auto;
    padding-top: 2px;
    padding-bottom: 4px;
    opacity: 1;
  }
  @starting-style {
    html.eb-motion:not(.eb-sidebar-is-narrow) .eb-sidebar:not(.collapsed) .eb-nav-sub.show {
      height: 0;
      padding-top: 0;
      padding-bottom: 0;
      opacity: 0;
    }
  }
}

/* ---------------------------------------------------------------------
   4. Menus
   ---------------------------------------------------------------------
   Déroulants Bootstrap et listes de choix : fondu seul. Popper les place par
   un `transform` en ligne et peut les recalculer pendant l'ouverture — on ne
   déplace rien. `.inner` exclu : bootstrap-select pose `.dropdown-menu.show`
   sur l'enveloppe ET sur sa liste intérieure, le fondu jouerait deux fois. */
:where(html.eb-motion) :where(.dropdown-menu.show:not(.inner)) {
  animation: eb-motion-fade-in var(--eb-motion-fast) ease-out;
}
/* Menu du compte : ancré au-dessus de l'avatar, il monte de quelques pixels. */
:where(html.eb-motion) :where(.eb-user-menu.show) {
  animation: eb-motion-rise-in var(--eb-motion-base) var(--eb-ease-out);
}
/* Volet du rail étroit : il sort de la barre, vers la droite. */
:where(html.eb-motion) :where(.eb-nav-flyout.show) {
  animation: eb-motion-slide-in var(--eb-motion-fast) ease-out;
}

/* ---------------------------------------------------------------------
   5. Boutons : retour à l'appui
   ---------------------------------------------------------------------
   `scale` (propriété) et non `transform: scale()` : un bouton flottant centré
   par `transform: translateX(-50%)` garde sa place. Même geste que les
   boutons du SITAC (`:active { transform: scale(.96) }`), étendu au produit.
   Exclus : le bouton d'une liste de choix (il occupe toute la largeur du
   champ), les liens habillés en bouton, les boutons inertes ou désactivés, et
   les interrupteurs bootstrap-toggle — leur enveloppe ET leurs deux libellés
   sont des `.btn`, l'effet s'y multiplierait pendant que le curseur glisse. */
:where(html.eb-motion) .btn:active:not(.dropdown-toggle):not(.btn-link):not(.eb-btn-inert):not(.disabled):not(:disabled):not(.toggle):not(.toggle *) {
  scale: 0.97;
}

/* ---------------------------------------------------------------------
   5 bis. Survol des lignes de tableau
   ---------------------------------------------------------------------
   Le survol d'une ligne (fond + ombre portée posés par dashboard-modern.css
   et main.css sur la ligne ET ses cellules) basculait en une image ; en
   parcourant une liste à la souris, le surlignage « sautait » de ligne en
   ligne. Il glisse désormais en 110 ms, à l'arrivée comme au départ.
   Transition et non animation : rien ne joue au chargement, ni quand la
   classe `eb-motion` est posée — seul un changement d'état la déclenche.
   `:where()` partout : une règle du produit qui fixe sa propre transition
   sur une cellule garde la main. */
:where(html.eb-motion) :where(table > tbody > tr, table > tbody > tr > td) {
  transition: background-color var(--eb-motion-fast) ease, box-shadow var(--eb-motion-fast) ease;
}

/* ---------------------------------------------------------------------
   6. D'une page complète à la suivante
   ---------------------------------------------------------------------
   Le conteneur ne prend pas tout : le formulaire d'activité, un
   enregistrement suivi d'une redirection, la connexion, tout `location.href`
   rechargent le document. Entre les deux, l'écran passait par une image vide
   (relevé du 11/10/2026 : zone de contenu blanche à 84-95 ms, nouvelle page à
   120 ms). Avec cette règle le navigateur garde l'image de la page quittée
   jusqu'au premier rendu de la suivante, puis fond l'une dans l'autre : la
   barre latérale, identique des deux côtés, ne bouge plus.

   Rien à programmer, et rien qui puisse rester figé : c'est le navigateur qui
   tient l'ancienne image, la rend dès que la nouvelle page peut être peinte,
   et abandonne la transition si l'onglet est masqué ou si l'arrivée tarde.
   Il faut que les DEUX pages portent la règle — donc cette feuille : une page
   sans load_css() (document servi, page de traitement nue) se charge comme
   avant. Ne s'applique ni au rechargement, ni à une adresse saisie, ni à une
   autre origine. Chromium 126+, Safari 18.2+ ; ailleurs la règle est ignorée.

   160 ms et non les 250 ms d'usage : pendant le fondu la page d'arrivée ne
   reçoit pas les clics.

   Cette règle a une garde, servie dans le <head> avec la feuille :
   eb_transition_page_script() (fonctions_menu.php). Elle écoute la promesse
   que le navigateur rejette quand il abandonne une transition — sans quoi ce
   rejet remonterait au journal d'erreurs comme une panne — et abandonne
   d'elle-même la transition vers ce qui n'est pas un écran (sortie de session,
   page de traitement, export). Ne pas poser l'une sans l'autre. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 160ms;
  }
}

/* =====================================================================
   7 à 12 — Mise en valeur (revue du 23/10/2026)
   =====================================================================
   Les points 1 à 6 adoucissent ce qui CHANGE ; ceux-ci donnent du relief à
   ce que l'on regarde : l'arrivée sur le tableau de bord, le survol de ce qui
   se clique, l'onglet qu'on quitte pour un autre. Mêmes trois règles (a, b, c)
   que plus haut, et une de plus :

   d) rien ne bouge en boucle. Une animation répond à un geste ou à une
      arrivée, puis s'arrête : l'écran reste un outil de travail.
   ===================================================================== */

@keyframes eb-motion-rise-in-ample { from { opacity: 0; translate: 0 14px; } }

/* ---------------------------------------------------------------------
   7. Le tableau de bord, à son chargement complet
   ---------------------------------------------------------------------
   C'est l'écran où l'on arrive le plus souvent par une page COMPLÈTE — la
   connexion y mène — et donc le seul que les entrées du point 1 ne couvrent
   pas : `html.eb-motion` n'y est posée qu'après le premier rendu (cf.
   js/eb_motion.js, synchroniserApresRendu).

   `html.eb-motion-accueil` est posée AVANT le premier rendu, dans le <head>,
   par eb_accueil_mouvement_script() (fonctions_menu.php) — seulement si
   l'onglet est affiché, sans préférence « moins d'animations » et hors retour
   arrière — et retirée par le même script 2,5 s plus tard quoi qu'il arrive.
   Elle n'est donc jamais là quand un bloc pourrait être peint sans entrée,
   puis repeint à 0 d'opacité : c'est le clignotement mesuré le 14/10/2026.

   Salutation, tuiles, puis les widgets colonne par colonne, de haut en bas.
   `backwards` : pendant son délai, un bloc tient sa première image — c'est ce
   qui permet à js/eb_motion.js de remettre le chiffre d'une tuile à 0 pour le
   faire compter, sans qu'on le voie sauter. La fin de l'animation rend le
   style normal (aucun `forwards`, règle b).

   On anime le support du widget (`.widget-column > *`), pas sa carte : la
   carte est remplacée quand son contenu arrive (loadWidgetQueue,
   js/content_loader.js), son support reste. */
html.eb-motion-accueil .eb-dashboard > .eb-greeting,
html.eb-motion-accueil .eb-stats-row > .eb-stat-card,
html.eb-motion-accueil .eb-widget-col > .widget-column > * {
  animation: eb-motion-rise-in-ample 460ms var(--eb-ease-out) backwards;
  animation-delay: calc(var(--eb-accueil-delai, 0ms) + var(--eb-accueil-col, 0) * 70ms + var(--eb-accueil-ligne, 0) * 90ms);
}
.eb-stats-row > .eb-stat-card:nth-child(1) { --eb-accueil-delai: 90ms; }
.eb-stats-row > .eb-stat-card:nth-child(2) { --eb-accueil-delai: 140ms; }
.eb-stats-row > .eb-stat-card:nth-child(3) { --eb-accueil-delai: 190ms; }
.eb-stats-row > .eb-stat-card:nth-child(n+4) { --eb-accueil-delai: 240ms; }
.eb-widget-col > .widget-column > * { --eb-accueil-delai: 280ms; }
.eb-widget-col > .widget-column > :nth-child(2) { --eb-accueil-ligne: 1; }
.eb-widget-col > .widget-column > :nth-child(3) { --eb-accueil-ligne: 2; }
.eb-widget-col > .widget-column > :nth-child(n+4) { --eb-accueil-ligne: 3; }
/* Une règle par colonne : un sélecteur `of S` inconnu du moteur n'invalide
   que la sienne (la colonne part alors avec la première). */
.eb-widget-col:nth-child(2 of .eb-widget-col) { --eb-accueil-col: 1; }
.eb-widget-col:nth-child(3 of .eb-widget-col) { --eb-accueil-col: 2; }
.eb-widget-col:nth-child(n+4 of .eb-widget-col) { --eb-accueil-col: 3; }

/* ---------------------------------------------------------------------
   8. Survol de ce qui se clique : l'icône répond
   ---------------------------------------------------------------------
   Transitions (et non animations) : rien ne joue au chargement, seul le geste
   déclenche. `scale` / `rotate` / `translate` en propriétés : elles se
   composent avec un `transform` posé ailleurs (une tuile soulevée au survol
   garde son trajet). Écrans à souris seulement — sur un écran tactile, le
   « survol » reste collé après le toucher. */
@media (hover: hover) {
  /* Tuiles du tableau de bord : l'icône se redresse et grandit un peu. */
  :where(html.eb-motion) :where(.eb-stat-card) .eb-stat-icon,
  :where(html.eb-motion) :where(.stats-container-new > .nav-item) .stats-icon-badge {
    transition: scale var(--eb-motion-slow) var(--eb-ease-out), rotate var(--eb-motion-slow) var(--eb-ease-out);
  }
  :where(html.eb-motion) .eb-stat-card:not(.eb-stat-card-static):hover .eb-stat-icon,
  :where(html.eb-motion) .stats-container-new > .nav-item > a:not(.stat-container-disabled):hover .stats-icon-badge {
    scale: 1.1;
    rotate: -6deg;
  }

  /* « Voir tout → » et les flèches d'en-tête de carte : la flèche avance. */
  :where(html.eb-motion) :where(.eb-card-action, .eb-ruby > a) i {
    transition: translate var(--eb-motion-base) var(--eb-ease-out);
  }
  :where(html.eb-motion) :where(.eb-card-action, .eb-ruby > a):hover i {
    translate: 3px 0;
  }

  /* Barre latérale : l'icône de l'entrée survolée glisse d'un cran vers le
     libellé. Pas en rail étroit ou replié : l'icône y est seule et centrée. */
  :where(html.eb-motion:not(.eb-sidebar-is-narrow)) :where(.eb-sidebar:not(.collapsed)) :where(.eb-nav-item, .eb-nav-sub-item) > i:first-child {
    transition: translate var(--eb-motion-base) var(--eb-ease-out), opacity var(--eb-motion-base) ease;
  }
  :where(html.eb-motion:not(.eb-sidebar-is-narrow)) :where(.eb-sidebar:not(.collapsed)) :where(.eb-nav-item, .eb-nav-sub-item):hover > i:first-child {
    translate: 2px 0;
  }

  /* Bouton de l'assistant (coin bas-droit) : il se présente au survol. */
  :where(html.eb-motion) :where(#iaWidgetBtn) {
    transition: scale var(--eb-motion-base) var(--eb-ease-out), box-shadow var(--eb-motion-base) ease;
  }
  :where(html.eb-motion) #iaWidgetBtn:hover {
    scale: 1.06;
  }
}

/* ---------------------------------------------------------------------
   9. Onglets, pastilles, révélation au défilement
   ---------------------------------------------------------------------
   Pilotés par js/eb_motion.js, en API Web Animations : aucune règle ici.
     - l'onglet choisi : son repère (trait ou pastille) GLISSE depuis l'onglet
       quitté au lieu de s'éteindre d'un côté et de s'allumer de l'autre ;
     - une pastille de compteur (menu latéral, cloche) dont le chiffre change
       rebondit une fois ;
     - les widgets du tableau de bord et les grilles de cartes entrent en
       cascade à l'arrivée d'un écran ; ceux situés sous la ligne de
       flottaison montent à leur place quand on les fait défiler jusqu'à eux.
   ===================================================================== */

/* ---------------------------------------------------------------------
   10. La barre du haut se détache du contenu qui défile sous elle
   ---------------------------------------------------------------------
   Barre blanche sur page blanche, séparées par un filet d'un pixel : une
   fois la page défilée, tableaux et cartes glissaient SOUS la barre sans
   qu'aucune profondeur ne le dise. Une ombre douce apparaît sur les 48
   premiers pixels de défilement, et repart quand on remonte.

   Animation liée au DÉFILEMENT, pas au temps : elle ne peut ni rester figée
   dans un onglet masqué ni jouer seule — d'où l'exception à la règle a (pas
   de `html.eb-motion`) et à la règle b (`both` : passé 48 px, l'ombre reste
   là ; c'est un état, pas une entrée, et elle ne masque rien).
   Le document défile par la racine sur tous les écrans à barre du haut
   (mesuré le 23/10/2026) ; un écran qui défilerait par un bloc intérieur
   garde simplement sa barre sans ombre. Ailleurs que Chromium 115+ /
   Safari 26+, la règle est ignorée : barre telle qu'avant. */
@keyframes eb-motion-barre-detachee {
  to { box-shadow: var(--eb-motion-ombre-barre); }
}
:root { --eb-motion-ombre-barre: 0 6px 18px -10px rgba(15, 23, 42, 0.28); }
:root.dark { --eb-motion-ombre-barre: 0 6px 20px -8px rgba(0, 0, 0, 0.65); }
@supports (animation-timeline: scroll()) {
  :where(.eb-topbar) {
    animation: eb-motion-barre-detachee linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 48px;
  }
}

/* ---------------------------------------------------------------------
   11. Clair ↔ sombre : la nouvelle teinte s'étend depuis le geste
   ---------------------------------------------------------------------
   modules/theme/js/color-scheme.js (ebBasculeEnCercle) passe le changement
   de thème par document.startViewTransition() et pose
   `html.eb-theme-bascule` le temps du trajet : l'image de la page dans sa
   nouvelle teinte s'ouvre en cercle depuis l'endroit touché, par-dessus
   l'ancienne. Le fondu par défaut (et ses 160 ms du point 6) est coupé ici,
   le cercle est joué par l'API Web Animations sur
   ::view-transition-new(root). */
html.eb-theme-bascule::view-transition-old(root),
html.eb-theme-bascule::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ---------------------------------------------------------------------
   12. « Ajout rapide » : les raccourcis arrivent l'un après l'autre
   ---------------------------------------------------------------------
   Le menu s'ouvre déjà en 150 ms (dashboard-modern.css) ; ses tuiles
   montent ensuite dans l'ordre de lecture, 25 ms d'écart, la dernière à
   moins d'un quart de seconde. Au bureau (menu) comme au téléphone (feuille
   d'actions, js/eb-action-sheet). `backwards` : une tuile attend son tour
   invisible, puis rend son style normal. */
:where(html.eb-motion) :where(.eb-quickadd-dropdown.eb-quickadd-open, .eb-action-sheet.show) .eb-quickadd-grid > a {
  animation: eb-motion-rise-in 220ms var(--eb-ease-out) backwards;
  animation-delay: calc(40ms + var(--eb-rang-raccourci, 0) * 25ms);
}
.eb-quickadd-grid > a:nth-child(2) { --eb-rang-raccourci: 1; }
.eb-quickadd-grid > a:nth-child(3) { --eb-rang-raccourci: 2; }
.eb-quickadd-grid > a:nth-child(4) { --eb-rang-raccourci: 3; }
.eb-quickadd-grid > a:nth-child(5) { --eb-rang-raccourci: 4; }
.eb-quickadd-grid > a:nth-child(6) { --eb-rang-raccourci: 5; }
.eb-quickadd-grid > a:nth-child(n+7) { --eb-rang-raccourci: 6; }