/* ═══════════════════════════════════════════════════════════════════════════════════════
   ux-v2.css — INTERFACE v2. Couche d'amelioration, chargee EN DERNIER, activable/desactivable
   depuis le panel admin (onglet Interface) ou par `?ux=v1` / `?ux=v2`.

   ⚠ REGLE ABSOLUE : AUCUNE COULEUR DE THEME EN DUR ICI.
   `assets/css/theme-control.css` reste la SOURCE DE VERITE du clair/sombre. Cette feuille
   se charge APRES lui : un `#161b22` ecrit ici casserait le mode clair sans qu'on comprenne
   d'ou ca vient. On n'utilise que des variables (`var(--bg-card)`, `var(--text-primary)`…),
   ou des couleurs NEUTRES au theme (transparences, `currentColor`).
   Les seules teintes admises sont les accents fonctionnels deja etablis dans le projet
   (violet #6c5ce7 / #a29bfe), identiques en clair et en sombre.

   Domaine de cette feuille : espacement, rythme typographique, hierarchie, etats
   d'interaction, ACCESSIBILITE, densite et lisibilite des tableaux. Pas la couleur.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.bk-ux-v2 {
    /* Echelle d'espacement : 4 valeurs, pas 40 valeurs improvisees au fil des pages. */
    --ux-1: 6px;  --ux-2: 12px;  --ux-3: 20px;  --ux-4: 32px;
    --ux-r:  10px;                       /* rayon unique */
    --ux-ring: #a29bfe;                  /* anneau de focus — meme accent en clair et sombre */
    --ux-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.14);
}

/* ───────────────────────────────────────────────────────────────────────────────────────
   1. ACCESSIBILITE CLAVIER — le manque le plus grave mesure sur le site.
   `:focus-visible` : 0 occurrence dans dashboard.css, common.css et mobile.css.
   Concretement : quelqu'un qui navigue au clavier (ou au lecteur d'ecran) ne voit PAS ou
   il se trouve. Ce n'est pas un detail de confort, c'est ce qui rend le site utilisable
   ou non pour ces personnes.
   On cible `:focus-visible` et non `:focus` : le navigateur ne montre alors l'anneau qu'a
   la navigation clavier, jamais apres un clic souris — c'est ce qui avait fait supprimer
   les contours par defaut a l'epoque.
   ─────────────────────────────────────────────────────────────────────────────────────── */
.bk-ux-v2 a:focus-visible,
.bk-ux-v2 button:focus-visible,
.bk-ux-v2 input:focus-visible,
.bk-ux-v2 select:focus-visible,
.bk-ux-v2 textarea:focus-visible,
.bk-ux-v2 [tabindex]:focus-visible,
.bk-ux-v2 [role="button"]:focus-visible {
    outline: 3px solid var(--ux-ring) !important;
    outline-offset: 2px !important;
    border-radius: 6px;
}
/* Lien d'evitement : permet de sauter la navigation (~40 liens) pour aller au contenu.
   Invisible tant qu'on ne l'atteint pas au clavier. */
.bk-ux-v2 .bk-skip {
    position: absolute; left: -9999px; top: 0; z-index: 100001;
    padding: 10px 18px; border-radius: 0 0 var(--ux-r) 0;
    background: var(--ux-ring); color: #12101a; font-weight: 700; text-decoration: none;
}
.bk-ux-v2 .bk-skip:focus { left: 0; }

/* ───────────────────────────────────────────────────────────────────────────────────────
   2. MOUVEMENT — `prefers-reduced-motion` etait absent de TOUTES les feuilles.
   Les animations (clignotements dores, pulsations, defilements) peuvent provoquer nausees
   et migraines, et sont un declencheur reconnu pour les troubles vestibulaires. Le systeme
   d'exploitation expose deja le reglage : il suffit de l'ecouter.
   ─────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bk-ux-v2 *, .bk-ux-v2 *::before, .bk-ux-v2 *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────────────────
   3. LISIBILITE DU TEXTE
   Mesure : 83 declarations `font-size:10px` et 230 `font-size:11px` en inline. En dessous
   de 12 px, un texte devient penible pour beaucoup de monde et illisible pour certains.
   On remonte le plancher SANS toucher au HTML : rehausse legere (10->11.5, 11->12.5) pour
   ne pas faire deborder les tableaux denses, puis plus franche sur mobile ou la distance
   de lecture est plus grande par rapport a la taille d'ecran.
   ─────────────────────────────────────────────────────────────────────────────────────── */
.bk-ux-v2 [style*="font-size:10px"] { font-size: 11.5px !important; }
.bk-ux-v2 [style*="font-size:11px"] { font-size: 12.5px !important; }
.bk-ux-v2 { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.bk-ux-v2 p, .bk-ux-v2 li { line-height: 1.65; }
/* Longueur de ligne : au-dela de ~80 caracteres, l'oeil perd la ligne suivante en revenant
   a la marge. Ne s'applique qu'aux blocs de PROSE, jamais aux tableaux ni aux grilles. */
.bk-ux-v2 .p2-bio p, .bk-ux-v2 .bkx-portrait p, .bk-ux-v2 .article-body p { max-width: 72ch; }

/* Hierarchie des titres : une echelle, au lieu de tailles decidees page par page. */
.bk-ux-v2 h1 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.18; letter-spacing: -.02em; }
.bk-ux-v2 h2 { font-size: clamp(18px, 2.2vw, 23px); line-height: 1.25; letter-spacing: -.01em; }
.bk-ux-v2 h3 { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.3; }

/* ───────────────────────────────────────────────────────────────────────────────────────
   4. TABLEAUX — le contenu principal du site.
   a) En-tete COLLANT : sur un classement de 200 lignes, on ne sait plus quelle colonne on
      lit des la 15e. Le motif « 3 tables » du projet met un `<thead>` en haut ET en bas ;
      le collant regle le probleme pendant le defilement, sans changer le HTML.
   b) Lignes alternees + survol : suivre une ligne sur 12 colonnes a l'oeil nu est un
      exercice d'equilibriste (la feuille de match interclubs en a 14).
   c) Indication de defilement horizontal : un tableau coupe net ne DIT PAS qu'il continue.
      Un degrade sur le bord droit le signale — sur mobile, c'est la difference entre
      « le tableau est tronque » et « je peux faire glisser ».
   ─────────────────────────────────────────────────────────────────────────────────────── */
.bk-ux-v2 .table-wrap { position: relative; border-radius: var(--ux-r); }
/* ⚠ PAS DE DEGRADE SUR LE BORD DROIT. La premiere version en posait un pour signaler que
   le tableau continue — mais un voile, meme leger, RECOUVRE les derniers caracteres de la
   colonne de droite. Sur ce site, ces caracteres sont des chronos et des noms de clubs :
   masquer ne serait-ce qu'un chiffre est inacceptable.
   L'affordance de defilement est assuree autrement, SANS rien recouvrir : la barre de
   defilement est rendue visible (section 7 plus bas). */
.bk-ux-v2 .bk-table th {
    position: sticky; top: 0; z-index: 2;
    background: var(--bg-card); /* sans fond opaque, les lignes defilent A TRAVERS l'entete */
    backdrop-filter: saturate(1.2);
}
.bk-ux-v2 .bk-table tbody tr:nth-child(even) > td { background: rgba(127,127,127,.055); }
.bk-ux-v2 .bk-table tbody tr:hover > td { background: rgba(162,155,254,.13); }
.bk-ux-v2 .bk-table td, .bk-ux-v2 .bk-table th { padding-top: 9px; padding-bottom: 9px; }
/* Les chiffres s'alignent en colonne : sans chasse fixe, comparer 9''84 et 10''02 demande
   de relire. `tabular-nums` met tous les chiffres a la meme largeur. */
.bk-ux-v2 .bk-table td, .bk-ux-v2 .perf-val, .bk-ux-v2 .esp-big { font-variant-numeric: tabular-nums; }

/* ───────────────────────────────────────────────────────────────────────────────────────
   5. CARTES, BOUTONS, LIENS — une seule grammaire visuelle
   ─────────────────────────────────────────────────────────────────────────────────────── */
.bk-ux-v2 .stat-card, .bk-ux-v2 .esp-card, .bk-ux-v2 .bk-card, .bk-ux-v2 .card {
    border-radius: var(--ux-r);
    box-shadow: var(--ux-shadow);
    transition: transform .16s ease, box-shadow .16s ease;
}
.bk-ux-v2 .stat-card:hover, .bk-ux-v2 .bk-card:hover { transform: translateY(-2px); }

.bk-ux-v2 button, .bk-ux-v2 .btn, .bk-ux-v2 .esp-cta, .bk-ux-v2 .bk-claim-go {
    border-radius: var(--ux-r);
    transition: filter .15s ease, transform .12s ease;
}
.bk-ux-v2 button:hover, .bk-ux-v2 .btn:hover { filter: brightness(1.12); }
.bk-ux-v2 button:active, .bk-ux-v2 .btn:active { transform: translateY(1px); }
/* Un bouton desactive doit se VOIR desactive : sinon on clique, rien ne se passe, et on
   croit que le site est casse. */
.bk-ux-v2 button[disabled], .bk-ux-v2 .btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

/* Le soulignement n'apparait qu'au survol, mais avec un decalage : souligner un lien juste
   sous sa base coupe les jambages (p, g, y) et gene la lecture. */
.bk-ux-v2 .p2-bio a, .bk-ux-v2 .article-body a { text-underline-offset: 3px; }

/* ───────────────────────────────────────────────────────────────────────────────────────
   6. MOBILE — la majorite du trafic
   ─────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* ⚠ 16px MINIMUM sur les champs : en dessous, iOS ZOOME automatiquement a la mise au
       point, la page saute, et l'utilisateur doit re-dezoomer a la main. Ce n'est pas un
       choix esthetique, c'est le seul moyen d'empecher ce comportement. */
    .bk-ux-v2 input, .bk-ux-v2 select, .bk-ux-v2 textarea { font-size: 16px !important; }

    /* Cibles tactiles : ~44px est le minimum recommande pour un doigt. En dessous, on rate
       sa cible et on ouvre le lien d'a cote. */
    .bk-ux-v2 nav a, .bk-ux-v2 .tab-main, .bk-ux-v2 .esp-tab, .bk-ux-v2 .tab-sub {
        min-height: 42px; display: inline-flex; align-items: center;
    }
    .bk-ux-v2 button, .bk-ux-v2 .btn { min-height: 42px; }

    .bk-ux-v2 [style*="font-size:10px"] { font-size: 12px !important; }
    .bk-ux-v2 [style*="font-size:11px"] { font-size: 13px !important; }
    .bk-ux-v2 [style*="font-size:12px"] { font-size: 13.5px !important; }

    /* Le defilement horizontal reste DANS le tableau. */
    .bk-ux-v2 .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* ⚠ SURTOUT PAS `overflow-x: hidden` SUR LE CORPS DE PAGE. C'etait dans la premiere
       version pour empecher le balancement lateral — mais `hidden` ne « range » pas ce qui
       depasse : il le COUPE. Un tableau plus large que l'ecran, hors d'un `.table-wrap`,
       verrait ses dernieres colonnes purement supprimees a l'affichage, sans barre de
       defilement pour aller les chercher. On accepte plutot un debordement visible :
       une donnee qu'on doit faire glisser vaut infiniment mieux qu'une donnee coupee. */
}

/* ───────────────────────────────────────────────────────────────────────────────────────
   7. DETAILS QUI SE VOIENT
   ─────────────────────────────────────────────────────────────────────────────────────── */
.bk-ux-v2 ::selection { background: rgba(162,155,254,.32); }
/* Barre de defilement discrete mais visible : par defaut, sur fond sombre, on ne sait pas
   qu'un panneau defile. */
.bk-ux-v2 * { scrollbar-width: thin; scrollbar-color: rgba(162,155,254,.5) transparent; }
.bk-ux-v2 ::-webkit-scrollbar { width: 10px; height: 10px; }
.bk-ux-v2 ::-webkit-scrollbar-thumb { background: rgba(162,155,254,.45); border-radius: 8px; }
.bk-ux-v2 ::-webkit-scrollbar-thumb:hover { background: rgba(162,155,254,.7); }
.bk-ux-v2 ::-webkit-scrollbar-track { background: transparent; }

/* Les images ne debordent jamais de leur conteneur, meme mal dimensionnees a la source. */
.bk-ux-v2 img { max-width: 100%; height: auto; }

/* Ancres : un titre vise par un lien interne ne doit pas se retrouver sous l'entete fixe. */
.bk-ux-v2 [id] { scroll-margin-top: 84px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   PARTIE B — RENDU VISUEL ET RYTHME DE PAGE
   Toujours la meme regle : aucune couleur de theme en dur, et RIEN n'est masque.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────────────────
   B1. NAVIGATION COLLANTE
   La nav n'etait pas collante. Sur une fiche profil (1,2 Mo de HTML) ou la page Athletes
   (62 000 caracteres de texte), on perd TOUT acces au menu des qu'on descend : pour changer
   de page il fallait remonter jusqu'en haut. Le fond floute existait deja dans dashboard.css,
   il ne servait a rien sans le collage.
   ─────────────────────────────────────────────────────────────────────────────────────── */
.bk-ux-v2 nav {
    position: sticky; top: 0; z-index: 500;
    box-shadow: 0 1px 0 rgba(127,127,127,.16), 0 6px 20px rgba(0,0,0,.16);
}

/* ───────────────────────────────────────────────────────────────────────────────────────
   B2. EN-TETES DE TABLEAU REELLEMENT COLLANTS
   ⚠ `dashboard.css` pose `overflow: hidden` sur `.bk-table` (pour arrondir les angles).
   Or `overflow` autre que `visible` cree un conteneur de defilement : le `position: sticky`
   des `<th>` se calait donc sur la table elle-meme, qui ne defile pas -> il ne se passait
   RIEN. La regle etait inerte depuis le debut.
   On rend l'overflow visible sur la table et on deplace l'arrondi sur `.table-wrap`, qui
   est le vrai conteneur. Aucun contenu n'est coupe : `.table-wrap` defile (`auto`).
   ─────────────────────────────────────────────────────────────────────────────────────── */
.bk-ux-v2 .bk-table { overflow: visible; }
.bk-ux-v2 .table-wrap { overflow: auto; border-radius: var(--ux-r); }
.bk-ux-v2 .bk-table th {
    /* Un entete qui defile PAR-DESSUS les lignes doit etre opaque, sinon on lit deux
       textes superposes. `--bg-surface` suit le theme clair/sombre. */
    /* ⚠ ON NE TOUCHE QUE CE QUI SERT AU COLLAGE. `dashboard.css` definit deja
       font-size:11px + uppercase + letter-spacing:0.8px sur ces en-tetes. Les
       redefinir ici (et pire, en `.78em` relatif) changeait leur taille selon le
       contexte et REDUISAIT l'interlettrage voulu. Une couche par-dessus ne doit
       reecrire que ce qu'elle a besoin de changer. */
    background: var(--bg-surface, var(--bg-card));
    box-shadow: inset 0 -1px 0 var(--border);
}

/* ───────────────────────────────────────────────────────────────────────────────────────
   B3. DENSITE ET LISIBILITE DES TABLEAUX
   Les separateurs pleins entre chaque cellule fatiguent l'oeil quand il y a 14 colonnes
   (feuille de match interclubs). On garde une seule ligne horizontale, tres discrete :
   le zebrage suffit a suivre une ligne.
   ─────────────────────────────────────────────────────────────────────────────────────── */
.bk-ux-v2 .bk-table td { border-bottom: 1px solid rgba(127,127,127,.13); }
.bk-ux-v2 .bk-table tr:last-child td { border-bottom: none; }
.bk-ux-v2 .bk-table td:first-child, .bk-ux-v2 .bk-table th:first-child { padding-left: 14px; }
.bk-ux-v2 .bk-table td:last-child,  .bk-ux-v2 .bk-table th:last-child  { padding-right: 14px; }

/* ───────────────────────────────────────────────────────────────────────────────────────
   B4. RYTHME VERTICAL — le gain visuel le plus important, et le moins risque
   Une page dense sans respiration donne l'impression que tout est au meme niveau. On
   augmente l'espace AVANT les titres (pas apres) : c'est ce qui rattache visuellement un
   titre a son contenu au lieu de le laisser flotter entre deux blocs.
   ─────────────────────────────────────────────────────────────────────────────────────── */
/* ⚠ SEULEMENT LES TITRES NON STYLISES EN INLINE. index.php compte 95 `<h2>`, dont
   beaucoup portent `margin:0 0 8px` en inline — qui GAGNE sur une feuille de style.
   Sans le `:not([style])`, une partie des titres prenait 46px et l'autre 0 :
   l'espacement devenait INCOHERENT au lieu d'etre regulier. Un titre stylise a la
   main l'a ete pour une raison ; on le laisse tranquille. */
.bk-ux-v2 h2:not([style]) { margin-top: 46px; padding-bottom: 10px; }
.bk-ux-v2 h3:not([style]) { margin-top: 30px; }
.bk-ux-v2 h1 + p, .bk-ux-v2 h2 + p { margin-top: 6px; }
.bk-ux-v2 .container > h1:first-child, .bk-ux-v2 h2:first-child { margin-top: 0; }
/* Filet d'accent sous les titres de section : donne un point d'ancrage a l'oeil quand on
   parcourt la page en diagonale. Purement additif, ne recouvre rien. */
/* ⚠ Meme raison : reserve aux titres de section standards. Applique a tous les h2,
   le filet violet apparaissait sous le titre HERO (32px, blanc) et sous les titres
   d'erreur en rouge qui portent explicitement `border:none`. */
.bk-ux-v2 h2:not([style]) { position: relative; }
.bk-ux-v2 h2:not([style])::after {
    content: ""; position: absolute; left: 0; bottom: -1px; width: 46px; height: 2px;
    background: linear-gradient(90deg, #a29bfe, transparent);
}

/* ───────────────────────────────────────────────────────────────────────────────────────
   B5. CARTES ET PANNEAUX — une seule grammaire
   Beaucoup de blocs sont stylises en INLINE (`border-radius:12px` un peu partout). On ne
   peut pas tous les reprendre proprement, mais on peut unifier ceux qui portent un rayon
   connu : l'arrondi et l'ombre suffisent a faire lire un ensemble comme un systeme.
   ─────────────────────────────────────────────────────────────────────────────────────── */
/* ⚠ RETIRE : reecrire `border-radius:12px` -> 10px en `!important` ecrasait des choix
   inline deliberes sur des dizaines de blocs, pour un gain de 2 pixels. Le rapport
   benefice/risque ne le justifie pas. */
.bk-ux-v2 .table-wrap, .bk-ux-v2 .esp-card, .bk-ux-v2 .bk-card { box-shadow: var(--ux-shadow); }

/* ───────────────────────────────────────────────────────────────────────────────────────
   B6. BOUTONS, ONGLETS, PASTILLES — hauteurs et formes coherentes
   ─────────────────────────────────────────────────────────────────────────────────────── */
.bk-ux-v2 .badge:not([style*="padding"]), .bk-ux-v2 .badge-cat:not([style*="padding"]), .bk-ux-v2 .tag:not([style*="padding"]) {
    border-radius: 999px; padding: 3px 10px; font-weight: 700; letter-spacing: .01em;
}
.bk-ux-v2 nav a { border-radius: 8px; padding: 8px 12px; transition: background .15s ease; }
.bk-ux-v2 nav a:hover { background: rgba(162,155,254,.14); }

/* ───────────────────────────────────────────────────────────────────────────────────────
   B7. RESPIRATION DE LA PAGE
   `--space-lg` (24px) de marge laterale sur un telephone, c'est 48px perdus sur 375px de
   large. On resserre sur mobile pour rendre la largeur au contenu — plus de place pour les
   tableaux, donc moins de defilement horizontal.
   ─────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .bk-ux-v2 .container { padding-left: 14px; padding-right: 14px; }
    .bk-ux-v2 h2 { margin-top: 34px; }
    .bk-ux-v2 nav { position: sticky; }
}
@media (min-width: 1200px) {
    /* Sur grand ecran, un peu plus d'air en haut de page : le contenu ne demarre pas colle
       sous la barre de navigation. */
    .bk-ux-v2 .container { padding-top: 34px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   PARTIE C — SQUELETTES DE CHARGEMENT
   Le site est lent A FROID (profil ~39 s, page Athletes ~140 s) et n'affichait RIEN pendant
   ce temps : la section restait `display:none`, l'utilisateur voyait un trou puis un « pop »
   de contenu. Un ecran fige se lit comme un ecran casse.
   Le squelette montre la FORME de ce qui arrive : on comprend qu'un contenu se charge, et
   ou. Il calme l'attente au lieu de la subir.
   ⚠ Respecte `prefers-reduced-motion` (regle globale plus haut) : le scintillement s'arrete
   pour qui a demande moins de mouvement — un shimmer en boucle peut declencher une gene.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.bk-ux-v2 .bk-skel { display: block; }
.bk-ux-v2 .bk-skel-line,
.bk-ux-v2 .bk-skel-block {
    position: relative; overflow: hidden;
    background: rgba(127,127,127,.22);
    border-radius: 8px;
}
.bk-ux-v2 .bk-skel-line  { height: 13px; margin: 9px 0; }
.bk-ux-v2 .bk-skel-block { height: 74px; margin: 12px 0; border-radius: var(--ux-r); }
/* La barre de lumiere qui balaie : c'est elle qui dit « ca travaille », pas « c'est fige ». */
.bk-ux-v2 .bk-skel-line::after,
.bk-ux-v2 .bk-skel-block::after {
    content: ""; position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    animation: bkSkelSweep 1.25s ease-in-out infinite;
}
@keyframes bkSkelSweep { 100% { transform: translateX(100%); } }
/* Largeurs variees : un pave de barres identiques ressemble a un tableau, pas a du texte
   en cours d'arrivee. On imite le rythme d'un vrai paragraphe. */
.bk-ux-v2 .bk-skel-line.w-40 { width: 40%; }
.bk-ux-v2 .bk-skel-line.w-60 { width: 60%; }
.bk-ux-v2 .bk-skel-line.w-80 { width: 80%; }
.bk-ux-v2 .bk-skel-row { display: flex; gap: 12px; }
.bk-ux-v2 .bk-skel-row .bk-skel-block { flex: 1; }
@media (prefers-reduced-motion: reduce) {
    .bk-ux-v2 .bk-skel-line::after, .bk-ux-v2 .bk-skel-block::after { animation: none; }
}

/* ── LABEL EXPLICITE DU SQUELETTE ───────────────────────────────────────────────────────
   Les barres grises montrent la FORME ; le label dit le SENS. Sur une attente longue
   (~19 s a froid), un texte clair vaut mieux qu'un devinette a partir de rectangles. */
.bk-ux-v2 .bk-skel-label {
    display: flex; align-items: center; gap: 12px;
    font-size: 18px; font-weight: 800; letter-spacing: .01em;
    color: var(--text-primary, #c9d1d9);
    margin: 6px 0 16px;
}
.bk-ux-v2 .bk-skel-dot {
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--ux-ring, #a29bfe); flex: 0 0 auto;
    box-shadow: 0 0 0 5px rgba(162,155,254,.18);
    animation: bkPulseDot 1s ease-in-out infinite;
}
@keyframes bkPulseDot {
    0%, 100% { opacity: .25; transform: scale(.7); }
    50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .bk-ux-v2 .bk-skel-dot { animation: none; opacity: .8; }
}