/* ═════════════════════════════════════════════════════════════════════════════
   ux-v3.css — LA NOUVELLE INTERFACE (v3, « Piste »). REVERSIBLE.
   ─────────────────────────────────────────────────────────────────────────────
   Chargee uniquement quand le panel (onglet Interface) ou `?ux=v3` la demande,
   via `bkUxV3Assets()` (core/ux.php). TOUTES les regles sont scopees
   `html.bk-ux-v3` : sans cette classe (v1/v2), ce fichier ne s'applique pas.

   ⚠ CE QUE CETTE FEUILLE N'A PAS LE DROIT DE FAIRE
     · masquer quoi que ce soit : 0 `display:none` sur du contenu, 0 `max-height`,
       0 `overflow:hidden` sur du texte, 0 `text-overflow`.
     · cibler `nav` tout court (4 bugs du projet viennent de la) ;
     · toucher aux couleurs de NIVEAU (D/R/N/IR/I) ni aux medailles : elles portent
       une information. On ne remappe que des FONDS et des BORDURES sombres, et les
       jetons de theme — jamais un `color:` inline.

   METHODE : on ne reecrit pas 35 000 lignes de HTML. On redefinit les JETONS que
   toutes les feuilles du site lisent deja (dashboard.css, theme-control.css,
   site-sf.css, la barre, la fiche club, l'accueil), puis on redessine les
   composants communs (cartes, tableaux, boutons, champs).
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. LA PALETTE v3 — sombre (defaut du site) ─────────────────────────────── */
html.bk-ux-v3 {
    --v3-bg:   #0e1013;
    --v3-s1:   #16191e;   /* cartes */
    --v3-s2:   #1d2128;   /* champs, surfaces surelevees */
    --v3-s3:   #262b33;   /* pistes, jauges */
    --v3-bd:   #2b3038;
    --v3-bd2:  #3a404b;
    --v3-tx:   #f2f0eb;
    --v3-tx2:  #cdcac3;
    --v3-tx3:  #a19e97;   /* 6,4:1 sur --v3-s1 */
    --v3-acc:  #ff7a4d;   /* le tartan — texte d'accent sur fond sombre (6,6:1) */
    --v3-btn:  #c2410c;   /* fond des boutons : blanc dessus = 5,2:1 */
    --v3-btn-h:#d9541c;
    --v3-soft: rgba(255,122,77,.12);
    --v3-lane: #74b6ff;   /* bleu « couloir », second accent */
    --v3-ok:   #4fd39d;
    --v3-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
    --v3-r:    14px;
    --v3-font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif,
               "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji";
    --v3-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    background: var(--v3-bg) !important;
}
/* ─── 1b. … et claire (« plein jour ») ───────────────────────────────────────── */
html.bk-ux-v3 body.p2-light {
    --v3-bg:   #e8e5de;   /* 2026-10-14 : assombri (le profil en clair etait trop blanc) */
    --v3-s1:   #f4f2ed;
    --v3-s2:   #ebe8e1;
    --v3-s3:   #dcd8ce;
    --v3-bd:   #d0cbbf;
    --v3-bd2:  #bcb6a8;
    --v3-tx:   #16181b;
    --v3-tx2:  #3c4047;
    --v3-tx3:  #535861;   /* 5,7:1 sur le fond, 6,4:1 sur les cartes */
    --v3-acc:  #a83508;   /* 5,9:1 sur les cartes, 5,3:1 sur le fond */
    --v3-btn:  #c2410c;
    --v3-btn-h:#a8380a;
    --v3-soft: rgba(194,65,12,.08);
    --v3-lane: #1d4ed8;
    --v3-ok:   #047857;
    --v3-shadow: 0 1px 2px rgba(20,20,20,.06), 0 8px 24px rgba(20,20,20,.06);
}
html.bk-ux-v3:has(body.p2-light) { background: #e8e5de !important; }

/* ─── 2. LES JETONS DU SITE, REBRANCHES SUR LA PALETTE ──────────────────────────
   Chaque systeme de couleurs du projet est rebranche ici, une fois, dans les deux
   themes. Specificite volontairement superieure a celle de chaque definition
   d'origine (`:root`, `body.p2-light`, `body.bk-skin-console:not(.p2-light)`,
   `.bk-nav`, `.bkx`), `!important` pour battre le theme personnalise. */
html.bk-ux-v3 body,
html.bk-ux-v3 body.bk-skin-console:not(.p2-light),
html.bk-ux-v3 body.p2-light,
html.bk-ux-v3 body.p2-light.bk-skin-console {
    /* dashboard.css */
    --brand: var(--v3-btn) !important; --brand-light: var(--v3-acc) !important;
    --brand-glow: rgba(194,65,12,.25) !important; --brand-subtle: var(--v3-soft) !important;
    --bg-body: var(--v3-bg) !important; --bg-card: var(--v3-s1) !important; --bg-card-hover: var(--v3-s2) !important;
    --bg-surface: var(--v3-s2) !important; --bg-input: var(--v3-s2) !important; --bg-nav: var(--v3-s1) !important;
    --border: var(--v3-bd) !important; --border-light: var(--v3-bd2) !important; --border-focus: var(--v3-acc) !important;
    --text-primary: var(--v3-tx) !important; --text-secondary: var(--v3-tx2) !important; --text-muted: var(--v3-tx3) !important;
    --text-white: var(--v3-tx) !important; --text-link: var(--v3-acc) !important;
    --radius-md: 12px !important; --radius-lg: var(--v3-r) !important;
    /* theme-control.css + site-sf.css (peau console) */
    --bk-bg: var(--v3-bg) !important; --bk-surface-1: var(--v3-s1) !important; --bk-surface-2: var(--v3-s2) !important;
    --bk-surface-3: var(--v3-s3) !important; --bk-border: var(--v3-bd) !important; --bk-border-soft: var(--v3-bd) !important;
    --bk-text: var(--v3-tx) !important; --bk-text-2: var(--v3-tx2) !important; --bk-text-3: var(--v3-tx3) !important;
    --bk-text-4: var(--v3-tx3) !important; --bk-link: var(--v3-acc) !important;
    /* index2.php (tableau de bord des donnees, ?hub=1) */
    --bg: var(--v3-bg) !important; --surf: var(--v3-s1) !important; --surf-2: var(--v3-s2) !important; --surf-3: var(--v3-s3) !important;
    --bd: var(--v3-bd) !important; --bd-2: var(--v3-bd2) !important;
    --txt: var(--v3-tx) !important; --txt-2: var(--v3-tx2) !important; --txt-3: var(--v3-tx3) !important;
    --vio: var(--v3-acc) !important; --vio-d: var(--v3-btn) !important; --cya: var(--v3-lane) !important;
    background: var(--v3-bg) !important;
    color: var(--v3-tx);
    font-family: var(--v3-font) !important;
}
html.bk-ux-v3 input, html.bk-ux-v3 select, html.bk-ux-v3 textarea, html.bk-ux-v3 button { font-family: var(--v3-font) !important; }

/* La barre du site (core/nav.php) — memes jetons, memes deux themes. */
html.bk-ux-v3 .bk-nav,
html.bk-ux-v3 body.p2-light .bk-nav {
    --bkn-bg: color-mix(in srgb, var(--v3-s1) 92%, transparent);
    --bkn-solid: var(--v3-s1);
    --bkn-surf: var(--v3-s2);
    --bkn-bd: var(--v3-bd);  --bkn-bd-2: var(--v3-bd2);
    --bkn-txt: var(--v3-tx); --bkn-txt-2: var(--v3-tx2); --bkn-txt-3: var(--v3-tx3);
    --bkn-vio: var(--v3-acc); --bkn-vio-d: var(--v3-btn);
}
html.bk-ux-v3 .bk-nav { box-shadow: 0 1px 0 var(--v3-bd) !important; }
html.bk-ux-v3 .bk-nav-mark {
    background: var(--v3-btn) !important; color: #fff !important; border-radius: 8px !important;
}
html.bk-ux-v3 .bk-nav-btn.pri,
html.bk-ux-v3 .bk-nav-btn.pri:hover {
    background: var(--v3-btn) !important; border-color: var(--v3-btn) !important; color: #fff !important;
}

/* La fiche club (.bkx, index.php ?page=recherche&club=) */
html.bk-ux-v3 .bkx,
html.bk-ux-v3 body.p2-light .bkx {
    --ink: var(--v3-tx); --ink-2: var(--v3-tx2); --ink-3: var(--v3-tx3);
    --paper: var(--v3-s1); --paper-2: var(--v3-s2); --rule: var(--v3-bd); --accent: var(--v3-acc);
}

/* ─── 3. LES FONDS SOMBRES ECRITS EN LIGNE (mode sombre) ────────────────────────
   ~5 000 couleurs sont ecrites dans `style=""`. En mode clair, theme-control.css
   les rattrape deja (et il lit les jetons --bk-*, rebranches plus haut). En mode
   sombre rien ne les touchait : on les ramene sur les surfaces v3.
   ⚠ FONDS ET BORDURES UNIQUEMENT, sombre -> sombre. Aucun `color:` n'est touche :
   un texte clair reste lisible sur une surface sombre, quelle qu'elle soit. */
html.bk-ux-v3 body:not(.p2-light) [style*="background:#0d1117"],
html.bk-ux-v3 body:not(.p2-light) [style*="background: #0d1117"],
html.bk-ux-v3 body:not(.p2-light) [style*="background:#0a0f1c"],
html.bk-ux-v3 body:not(.p2-light) [style*="background:#0e1325"],
html.bk-ux-v3 body:not(.p2-light) [style*="background:#070a12"] { background: var(--v3-bg) !important; }
html.bk-ux-v3 body:not(.p2-light) [style*="background:#161b22"],
html.bk-ux-v3 body:not(.p2-light) [style*="background: #161b22"],
html.bk-ux-v3 body:not(.p2-light) [style*="background:#131a28"],
html.bk-ux-v3 body:not(.p2-light) [style*="background:#12182a"],
html.bk-ux-v3 body:not(.p2-light) [style*="linear-gradient(135deg,#12182a 0%,#1a2035 100%)"],
html.bk-ux-v3 body:not(.p2-light) [style*="linear-gradient(135deg, #12182a 0%, #1a2035 100%)"] { background: var(--v3-s1) !important; }
html.bk-ux-v3 body:not(.p2-light) [style*="background:#1e2a3a"],
html.bk-ux-v3 body:not(.p2-light) [style*="background: #1e2a3a"],
html.bk-ux-v3 body:not(.p2-light) [style*="background:#1a2540"],
html.bk-ux-v3 body:not(.p2-light) [style*="background:#21262d"],
html.bk-ux-v3 body:not(.p2-light) [style*="background: #21262d"],
html.bk-ux-v3 body:not(.p2-light) [style*="background:#1c2128"] { background: var(--v3-s2) !important; }
html.bk-ux-v3 body:not(.p2-light) [style*="solid #30363d"],
html.bk-ux-v3 body:not(.p2-light) [style*="solid #21262d"],
html.bk-ux-v3 body:not(.p2-light) [style*="solid #1e2a3a"],
html.bk-ux-v3 body:not(.p2-light) [style*="solid #1a2540"],
html.bk-ux-v3 body:not(.p2-light) [style*="border-color:#30363d"] { border-color: var(--v3-bd) !important; }

/* Boutons violets ecrits en ligne (« Rechercher », « Comparer »...) : fond seul. */
html.bk-ux-v3 [style*="background:#6c5ce7"],
html.bk-ux-v3 [style*="background: #6c5ce7"],
html.bk-ux-v3 [style*="background:var(--brand)"],
html.bk-ux-v3 [style*="background: var(--brand)"] { background: var(--v3-btn) !important; border-color: var(--v3-btn) !important; }

/* ─── 4. LE THEME PERSONNALISE NE DECIDE PLUS DES TITRES NI DES LIENS ──────────
   core/theme.php pose `h1,h2 { color + -webkit-text-fill-color !important }` et
   `a { color !important }` (vert/jaune) et un rayon de 20 px partout. En v3 c'est la
   palette qui decide. ⚠ `-webkit-text-fill-color` PRIME sur `color` au moment de
   peindre : sans lui, le titre resterait vert alors que `color` dit le contraire. */
html.bk-ux-v3 h1:not([style*="background"]),
html.bk-ux-v3 h2:not([style*="background"]),
html.bk-ux-v3 body.p2-light h1:not([style*="background"]),
html.bk-ux-v3 body.p2-light h2:not([style*="background"]) {
    color: var(--v3-tx) !important; -webkit-text-fill-color: var(--v3-tx) !important;
    text-shadow: none !important; letter-spacing: -0.02em; font-family: var(--v3-font) !important;
}
html.bk-ux-v3 h3, html.bk-ux-v3 h4 { font-family: var(--v3-font) !important; letter-spacing: -0.01em; }
html.bk-ux-v3 a:not([style*="background"]):not([class*="btn"]):not(.bk-nav-btn):not([class*="v3-"]),
html.bk-ux-v3 body.p2-light a:not([style*="background"]):not([class*="btn"]):not(.bk-nav-btn):not([class*="v3-"]) {
    color: var(--v3-acc) !important; text-shadow: none !important;
}
/* Les liens de la barre et des menus gardent leur propre couleur (texte, pas accent). */
html.bk-ux-v3 .bk-nav a:not([style*="background"]):not([class*="btn"]):not(.bk-nav-btn) { color: var(--bkn-txt-2) !important; }
html.bk-ux-v3 .bk-nav .bk-nav-brand { color: var(--bkn-txt) !important; }
html.bk-ux-v3 .bk-nav-panel a.on { color: var(--v3-acc) !important; background: var(--v3-soft) !important; }

/* ─── 5. LES COMPOSANTS COMMUNS ─────────────────────────────────────────────── */
html.bk-ux-v3 .chart-card,
html.bk-ux-v3 .card,
html.bk-ux-v3 .stat-card,
html.bk-ux-v3 .section-card,
html.bk-ux-v3 .ath-card,
html.bk-ux-v3 .bk-sec,
html.bk-ux-v3 .tools-card,
html.bk-ux-v3 .search-box {
    background: var(--v3-s1) !important;
    border: 1px solid var(--v3-bd) !important;
    border-radius: var(--v3-r) !important;
    box-shadow: var(--v3-shadow) !important;
}
html.bk-ux-v3 .chart-card:hover,
html.bk-ux-v3 .stat-card:hover,
html.bk-ux-v3 .section-card:hover,
html.bk-ux-v3 .ath-card:hover { border-color: var(--v3-bd2) !important; box-shadow: var(--v3-shadow) !important; }
html.bk-ux-v3 .stat-card-num, html.bk-ux-v3 .stat-num, html.bk-ux-v3 .stat-card .num {
    color: var(--v3-tx) !important; -webkit-text-fill-color: var(--v3-tx) !important; text-shadow: none !important;
    font-variant-numeric: tabular-nums;
}

/* Tableaux : en-tete sobre en petites capitales, lignes aerees, chiffres alignes. */
html.bk-ux-v3 .table-wrap { border: 1px solid var(--v3-bd) !important; border-radius: 12px !important; background: var(--v3-s1) !important; }
html.bk-ux-v3 .bk-table { font-variant-numeric: tabular-nums; border-radius: 0 !important; }
html.bk-ux-v3 .bk-table th {
    background: var(--v3-s2) !important; color: var(--v3-tx3) !important; -webkit-text-fill-color: var(--v3-tx3) !important;
    font-family: var(--v3-font) !important; font-size: 11.5px !important; font-weight: 700 !important;
    letter-spacing: .06em !important; text-transform: uppercase; border-bottom: 1px solid var(--v3-bd) !important;
}
html.bk-ux-v3 .bk-table td { border-bottom: 1px solid var(--v3-bd) !important; }
html.bk-ux-v3 .bk-table tr:hover td { background: var(--v3-soft) !important; }

/* Champs */
html.bk-ux-v3 input[type="text"], html.bk-ux-v3 input[type="search"], html.bk-ux-v3 input[type="email"],
html.bk-ux-v3 input[type="number"], html.bk-ux-v3 input[type="password"], html.bk-ux-v3 select, html.bk-ux-v3 textarea {
    border-radius: 10px !important;
}
html.bk-ux-v3 input:focus-visible, html.bk-ux-v3 select:focus-visible, html.bk-ux-v3 textarea:focus-visible,
html.bk-ux-v3 a:focus-visible, html.bk-ux-v3 button:focus-visible, html.bk-ux-v3 summary:focus-visible, html.bk-ux-v3 label:focus-visible {
    outline: 3px solid var(--v3-acc) !important; outline-offset: 2px !important; box-shadow: none !important;
}

/* Boutons : rayon commun, plus de pilule de 20 px imposee par le theme. */
html.bk-ux-v3 .btn, html.bk-ux-v3 .bkx-btn, html.bk-ux-v3 .btn-msg, html.bk-ux-v3 .btn-cmp-add,
html.bk-ux-v3 .btn-follow, html.bk-ux-v3 .btn-pdf, html.bk-ux-v3 .btn-share, html.bk-ux-v3 .btn-dashboard { border-radius: 10px !important; }
html.bk-ux-v3 .btn-msg, html.bk-ux-v3 .btn-cmp-add, html.bk-ux-v3 .btn-follow,
html.bk-ux-v3 .btn-pdf, html.bk-ux-v3 .btn-share, html.bk-ux-v3 .btn-dashboard {
    background: var(--v3-s2) !important; color: var(--v3-tx) !important; border: 1px solid var(--v3-bd2) !important;
    box-shadow: none !important; text-shadow: none !important;
}
html.bk-ux-v3 .btn-msg:hover, html.bk-ux-v3 .btn-cmp-add:hover, html.bk-ux-v3 .btn-follow:hover,
html.bk-ux-v3 .btn-pdf:hover, html.bk-ux-v3 .btn-share:hover { border-color: var(--v3-acc) !important; }

/* ─── 6. LA BARRE : « Explorer » avec une phrase sous chaque lien ──────────── */
html.bk-ux-v3 .bk-nav-panel a { flex-wrap: wrap; align-items: center; row-gap: 2px; }
html.bk-ux-v3 .v3-nav-desc {
    display: block; flex: 1 0 100%; padding-left: 27px;
    font-size: 11.5px; line-height: 1.4; color: var(--bkn-txt-3); font-weight: 400;
}
html.bk-ux-v3 .v3-nav-guide {
    grid-column: 1 / -1; display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 2px !important;
    background: var(--v3-soft); border: 1px solid color-mix(in srgb, var(--v3-acc) 35%, transparent);
    border-radius: 10px; padding: 12px 14px !important; margin-bottom: 6px;
}
html.bk-ux-v3 .bk-nav .v3-nav-guide b { color: var(--v3-acc); font-size: 14px; }
html.bk-ux-v3 .v3-nav-guide span { color: var(--bkn-txt-2); font-size: 12.5px; }

/* ─── 7. « SUR CETTE PAGE » (bandeau sous la barre, core/nav.php) ─────────── */
html.bk-ux-v3 .v3-coach {
    position: relative; z-index: 40;
    background: var(--v3-s1); border-bottom: 1px solid var(--v3-bd);
    font-family: var(--v3-font); color: var(--v3-tx);
}
html.bk-ux-v3 .v3-coach > summary {
    list-style: none; cursor: pointer;
    max-width: 1280px; margin: 0 auto; padding: 9px 16px;
    display: flex; align-items: center; gap: 10px; min-height: 42px;
    font-size: 13.5px;
}
html.bk-ux-v3 .v3-coach > summary::-webkit-details-marker { display: none; }
html.bk-ux-v3 .v3-coach-ico { font-size: 16px; }
html.bk-ux-v3 .v3-coach-t { white-space: nowrap; color: var(--v3-tx2); }
html.bk-ux-v3 .v3-coach-t b { color: var(--v3-acc); }
html.bk-ux-v3 .v3-coach-chips { display: flex; gap: 6px; overflow-x: auto; min-width: 0; flex: 1 1 auto; scrollbar-width: thin; }
html.bk-ux-v3 .v3-coach-chips i {
    font-style: normal; white-space: nowrap; font-size: 12px; color: var(--v3-tx2);
    background: var(--v3-s2); border: 1px solid var(--v3-bd); border-radius: 999px; padding: 3px 10px;
}
html.bk-ux-v3 .v3-coach-chev { margin-left: auto; color: var(--v3-tx3); font-size: 10px; transition: transform .2s; }
html.bk-ux-v3 .v3-coach[open] .v3-coach-chev { transform: rotate(180deg); }
html.bk-ux-v3 .v3-coach-in {
    max-width: 1280px; margin: 0 auto; padding: 4px 16px 16px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px;
}
html.bk-ux-v3 .v3-coach-card {
    background: var(--v3-s2); border: 1px solid var(--v3-bd); border-radius: 12px; padding: 12px 14px;
}
html.bk-ux-v3 .v3-coach-h { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
html.bk-ux-v3 .v3-coach-card p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--v3-tx2); }
html.bk-ux-v3 .v3-coach-card .v3-coach-ou { color: var(--v3-tx3); font-size: 12.5px; }
html.bk-ux-v3 .v3-coach-card a { display: inline-block; margin-top: 8px; font-weight: 700; font-size: 13px; }
html.bk-ux-v3 .v3-coach-all { grid-column: 1 / -1; font-weight: 700; font-size: 13.5px; padding: 4px 2px; }

/* Badges d'acces (Libre / Avec un compte / Premium) — le mot porte le sens, la couleur le double. */
html.bk-ux-v3 .v3-acc {
    font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap;
}
html.bk-ux-v3 .v3-acc-lib { color: var(--v3-ok);   border-color: color-mix(in srgb, var(--v3-ok) 45%, transparent); }
html.bk-ux-v3 .v3-acc-cpt { color: var(--v3-lane); border-color: color-mix(in srgb, var(--v3-lane) 45%, transparent); }
html.bk-ux-v3 .v3-acc-pre { color: var(--v3-acc);  border-color: color-mix(in srgb, var(--v3-acc) 45%, transparent); }

/* ─── 8. LES PAGES PROPRES A LA v3 (accueil, guide) ─────────────────────────── */
html.bk-ux-v3 body.v3-page { margin: 0; min-height: 100vh; font-size: 15.5px; line-height: 1.6; }
html.bk-ux-v3 .v3-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
html.bk-ux-v3 .v3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

html.bk-ux-v3 .v3-hero { padding: 56px 0 28px; }
html.bk-ux-v3 .v3-hero-s { padding: 40px 0 8px; }
html.bk-ux-v3 .v3-kicker {
    display: inline-block; margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--v3-acc); padding: 4px 12px; border-radius: 999px; background: var(--v3-soft);
}
html.bk-ux-v3 .v3-hero h1 {
    margin: 0 0 14px; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.08; font-weight: 800;
}
html.bk-ux-v3 .v3-hero h1 span { color: var(--v3-tx2) !important; -webkit-text-fill-color: var(--v3-tx2) !important; font-weight: 700; }
html.bk-ux-v3 .v3-lead { margin: 0 0 22px; max-width: 720px; font-size: clamp(16px, 1.6vw, 18.5px); color: var(--v3-tx2); }
html.bk-ux-v3 .v3-hero-search { max-width: 760px; }
html.bk-ux-v3 .v3-hero-search .bkrb { margin: 0 !important; }
html.bk-ux-v3 .v3-try { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--v3-tx3); font-size: 14px; }
html.bk-ux-v3 .v3-try a {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
    background: var(--v3-s1); border: 1px solid var(--v3-bd); border-radius: 999px;
    color: var(--v3-tx) !important; text-decoration: none; font-weight: 600; font-size: 13.5px;
}
html.bk-ux-v3 .v3-try a:hover { border-color: var(--v3-acc); }

html.bk-ux-v3 .v3-figs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
    background: var(--v3-bd); border: 1px solid var(--v3-bd); border-radius: var(--v3-r); margin: 8px 0 12px;
}
html.bk-ux-v3 .v3-figs > div { background: var(--v3-s1); padding: 18px 20px; }
html.bk-ux-v3 .v3-figs > div:first-child { border-radius: var(--v3-r) 0 0 var(--v3-r); }
html.bk-ux-v3 .v3-figs > div:last-child { border-radius: 0 var(--v3-r) var(--v3-r) 0; }
html.bk-ux-v3 .v3-figs b { display: block; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
html.bk-ux-v3 .v3-figs span { color: var(--v3-tx3); font-size: 13px; }

html.bk-ux-v3 .v3-sec { padding: 36px 0 8px; }
html.bk-ux-v3 .v3-sec-h { margin-bottom: 18px; }
html.bk-ux-v3 .v3-sec-h h2 { margin: 0 0 4px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; }
html.bk-ux-v3 .v3-sec-h p { margin: 0; color: var(--v3-tx2); }

html.bk-ux-v3 .v3-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
html.bk-ux-v3 .v3-steps li {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--v3-s1); border: 1px solid var(--v3-bd); border-radius: var(--v3-r); padding: 18px;
}
html.bk-ux-v3 .v3-steps li > b {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    background: var(--v3-btn); color: #fff; font-weight: 800; font-size: 17px;
}
html.bk-ux-v3 .v3-steps h3 { margin: 2px 0 4px; font-size: 16.5px; }
html.bk-ux-v3 .v3-steps p { margin: 0; color: var(--v3-tx2); font-size: 14px; }

html.bk-ux-v3 .v3-onb { margin-top: 14px; padding: 14px 16px; border-radius: var(--v3-r); border: 1px dashed var(--v3-bd2); background: var(--v3-s1); }
html.bk-ux-v3 .v3-onb-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
html.bk-ux-v3 .v3-onb-steps span { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--v3-bd); color: var(--v3-tx3); }
html.bk-ux-v3 .v3-onb-steps .ok   { color: var(--v3-ok);  border-color: color-mix(in srgb, var(--v3-ok) 45%, transparent); }
html.bk-ux-v3 .v3-onb-steps .open { color: var(--v3-acc); border-color: color-mix(in srgb, var(--v3-acc) 45%, transparent); font-weight: 700; }
html.bk-ux-v3 .v3-onb p { margin: 0; color: var(--v3-tx3); font-size: 13px; }

/* Profils : 3 radios. ⚠ Les panneaux non choisis ne sont pas « masques » au sens du
   projet : c'est un selecteur d'onglet explicite, chaque contenu reste a UN clic, et
   le guide les liste tous. Sans JS le selecteur fonctionne (pur CSS). */
html.bk-ux-v3 .v3-prof-r { position: absolute; opacity: 0; pointer-events: none; }
html.bk-ux-v3 .v3-prof-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 16px; }
html.bk-ux-v3 .v3-prof-tab {
    cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
    padding: 14px 16px; border-radius: var(--v3-r); background: var(--v3-s1); border: 2px solid var(--v3-bd);
    transition: border-color .15s, background .15s;
}
html.bk-ux-v3 .v3-prof-tab > span { grid-row: span 2; font-size: 26px; }
html.bk-ux-v3 .v3-prof-tab b { font-size: 15.5px; }
html.bk-ux-v3 .v3-prof-tab small { color: var(--v3-tx3); font-size: 12.5px; line-height: 1.4; }
html.bk-ux-v3 .v3-prof-tab:hover { border-color: var(--v3-bd2); }
html.bk-ux-v3 .v3-prof-panel { display: none; }
html.bk-ux-v3 #v3p-athlete:checked ~ .v3-prof-tabs [data-p="athlete"],
html.bk-ux-v3 #v3p-coach:checked   ~ .v3-prof-tabs [data-p="coach"],
html.bk-ux-v3 #v3p-fan:checked     ~ .v3-prof-tabs [data-p="fan"] { border-color: var(--v3-acc); background: var(--v3-soft); }
html.bk-ux-v3 #v3p-athlete:checked ~ .v3-prof-panel[data-p="athlete"],
html.bk-ux-v3 #v3p-coach:checked   ~ .v3-prof-panel[data-p="coach"],
html.bk-ux-v3 #v3p-fan:checked     ~ .v3-prof-panel[data-p="fan"] { display: block; }
html.bk-ux-v3 #v3p-athlete:focus-visible ~ .v3-prof-tabs [data-p="athlete"],
html.bk-ux-v3 #v3p-coach:focus-visible   ~ .v3-prof-tabs [data-p="coach"],
html.bk-ux-v3 #v3p-fan:focus-visible     ~ .v3-prof-tabs [data-p="fan"] { outline: 3px solid var(--v3-acc); outline-offset: 2px; }

html.bk-ux-v3 .v3-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
html.bk-ux-v3 .v3-card {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--v3-s1); border: 1px solid var(--v3-bd); border-radius: var(--v3-r); padding: 18px;
    color: var(--v3-tx) !important; text-decoration: none; box-shadow: var(--v3-shadow);
    transition: border-color .15s, transform .15s;
}
html.bk-ux-v3 a.v3-card:hover { border-color: var(--v3-acc); transform: translateY(-2px); }
html.bk-ux-v3 .v3-card-ico { font-size: 22px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--v3-s2); }
html.bk-ux-v3 .v3-card > b { font-size: 16px; line-height: 1.3; }
html.bk-ux-v3 .v3-card p { margin: 0; color: var(--v3-tx2); font-size: 14px; line-height: 1.5; }
html.bk-ux-v3 .v3-card .v3-card-ou { color: var(--v3-tx3); font-size: 13px; }
html.bk-ux-v3 .v3-card-f { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
html.bk-ux-v3 .v3-card-f > span, html.bk-ux-v3 .v3-card-f > a { font-weight: 700; font-size: 13.5px; color: var(--v3-acc) !important; }

html.bk-ux-v3 .v3-more { display: grid; gap: 10px; }
html.bk-ux-v3 .v3-more-a {
    display: flex; align-items: center; gap: 16px; padding: 18px 20px;
    background: var(--v3-s1); border: 1px solid var(--v3-bd); border-radius: var(--v3-r);
    color: var(--v3-tx) !important; text-decoration: none;
}
html.bk-ux-v3 .v3-more-a:hover { border-color: var(--v3-acc); }
html.bk-ux-v3 .v3-more-a > span { font-size: 26px; }
html.bk-ux-v3 .v3-more-a b { font-size: 16px; }
html.bk-ux-v3 .v3-more-a p { margin: 2px 0 0; color: var(--v3-tx2); font-size: 14px; }
html.bk-ux-v3 .v3-more-a > i { margin-left: auto; font-style: normal; color: var(--v3-acc); font-size: 20px; }

html.bk-ux-v3 .v3-foot { margin-top: 48px; border-top: 1px solid var(--v3-bd); background: var(--v3-s1); padding: 28px 0 36px; }
html.bk-ux-v3 .v3-foot-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; }
html.bk-ux-v3 .v3-foot-brand { font-size: 15px; letter-spacing: .12em; }
html.bk-ux-v3 .v3-foot p { color: var(--v3-tx3); font-size: 13.5px; margin: 6px 0 0; }
html.bk-ux-v3 .v3-foot-l { display: flex; flex-wrap: wrap; gap: 6px 18px; align-content: flex-start; }
html.bk-ux-v3 .v3-foot-l a { color: var(--v3-tx2) !important; text-decoration: none; font-size: 14px; min-height: 32px; display: inline-flex; align-items: center; }

/* Guide */
html.bk-ux-v3 .v3-gfiltre input {
    width: 100%; max-width: 560px; box-sizing: border-box; font-size: 16px; min-height: 48px; padding: 0 16px;
    background: var(--v3-s1); color: var(--v3-tx); border: 1px solid var(--v3-bd2);
}
html.bk-ux-v3 .v3-gnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
html.bk-ux-v3 .v3-gnav a {
    min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px;
    background: var(--v3-s1); border: 1px solid var(--v3-bd); color: var(--v3-tx) !important; text-decoration: none; font-weight: 600; font-size: 13.5px;
}
html.bk-ux-v3 .v3-gsec { scroll-margin-top: calc(var(--bk-nav-h, 57px) + 12px); }
html.bk-ux-v3 .v3-gvide { padding: 24px; text-align: center; color: var(--v3-tx3); }
html.bk-ux-v3 .v3-gnote ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--v3-tx2); }
html.bk-ux-v3 .v3-gnote li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }

/* ─── 9. TELEPHONE ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    html.bk-ux-v3 .v3-wrap { padding: 0 14px; }
    html.bk-ux-v3 .v3-hero { padding: 32px 0 18px; }
    html.bk-ux-v3 .v3-figs > div:first-child, html.bk-ux-v3 .v3-figs > div:last-child { border-radius: 0; }
    html.bk-ux-v3 .v3-foot-in { grid-template-columns: 1fr; }
    html.bk-ux-v3 .v3-coach > summary { padding: 8px 12px; }
    html.bk-ux-v3 .v3-coach-t { white-space: normal; }
    html.bk-ux-v3 .v3-coach-in { padding: 4px 12px 14px; grid-template-columns: 1fr; }
    html.bk-ux-v3 .v3-nav-desc { padding-left: 27px; }
}

@media (prefers-reduced-motion: reduce) {
    html.bk-ux-v3 .v3-card, html.bk-ux-v3 .v3-coach-chev, html.bk-ux-v3 .v3-prof-tab { transition: none !important; }
    html.bk-ux-v3 a.v3-card:hover { transform: none; }
}

/* Le filtre du guide pose l'attribut `hidden` : sans cette regle, `display:flex`
   des cartes l'emporterait et rien ne disparaitrait jamais. */
html.bk-ux-v3 .v3-gcard[hidden], html.bk-ux-v3 .v3-gsec[hidden] { display: none !important; }

/* Les liens « puces » des pages v3 : texte, pas accent. `:not(#v3)` ne sert qu'a
   peser plus lourd que la regle generale des liens (section 4) sans `!important` en
   cascade : aucun element ne porte cet id. */
html.bk-ux-v3 .v3-try a:not(#v3), html.bk-ux-v3 .v3-gnav a:not(#v3),
html.bk-ux-v3 .v3-foot-l a:not(#v3) { color: var(--v3-tx) !important; }
html.bk-ux-v3 .v3-foot-l a:not(#v3) { color: var(--v3-tx2) !important; }
html.bk-ux-v3 .v3-try a:not(#v3):hover, html.bk-ux-v3 .v3-foot-l a:not(#v3):hover { color: var(--v3-acc) !important; }
html.bk-ux-v3 .v3-card-f > span, html.bk-ux-v3 .v3-card-f > a:not(#v3), html.bk-ux-v3 .v3-more-a > i,
html.bk-ux-v3 .v3-coach-card a:not(#v3), html.bk-ux-v3 .v3-coach-all:not(#v3) { color: var(--v3-acc) !important; }

/* ⚠ DECLARER SES THEMES. Sans `color-scheme`, le mode « forcer les sites en sombre »
   d'Edge/Chrome (reglage de certains visiteurs, actif aussi en headless) reinterprete
   une page CLAIRE : fond gris #1f1f1f, texte delave, accent ternis. Mesure sur l'accueil
   v3 en mode jour. En le declarant, le navigateur sait que la page gere les deux. */
html.bk-ux-v3 { color-scheme: dark; }
html.bk-ux-v3:has(body.p2-light) { color-scheme: light; }

/* ⚠ theme-control.css (couche E) recolore TOUS les liens en mode clair avec un
   selecteur lourd : sans `:not(#v3)`, le libelle de « S'inscrire » prenait la couleur
   de son propre fond (texte invisible, mesure) et les titres de cartes passaient en
   orange. Le texte de ces composants est du TEXTE, pas un lien a reperer. */
html.bk-ux-v3 .bk-nav-btn.pri:not(#v3),
html.bk-ux-v3 body.p2-light .bk-nav-btn.pri:not(#v3) { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html.bk-ux-v3 a.v3-card:not(#v3), html.bk-ux-v3 a.v3-more-a:not(#v3),
html.bk-ux-v3 body.p2-light a.v3-card:not(#v3), html.bk-ux-v3 body.p2-light a.v3-more-a:not(#v3) { color: var(--v3-tx) !important; }
html.bk-ux-v3 a.v3-card:not(#v3) p, html.bk-ux-v3 a.v3-more-a:not(#v3) p { color: var(--v3-tx2) !important; }
html.bk-ux-v3 .v3-nav-guide:not(#v3) b { color: var(--v3-acc) !important; }
html.bk-ux-v3 .v3-nav-guide:not(#v3) span { color: var(--bkn-txt-2) !important; }

/* ─── 10. LA PLAQUE DE RUE DU PROFIL : COULEUR DU NIVEAU, GRISE SI RETIRE ──────
   Les classes viennent du serveur (index.php, core/athlete_actif.php). Memes
   familles que les badges D/R/N/IR/I du site — le seul code couleur que le lecteur
   connait deja. Teintes foncees : texte blanc lisible (nom en grand, gras).
   ⚠ IR (inter-regional) a sa propre teinte violette : il est SOUS le national. */
html.bk-ux-v3 .bk-plaque { background: linear-gradient(155deg, #d9541c 0%, #c2410c 55%, #9a330a 100%) !important; }
html.bk-ux-v3 .bk-plaque--i  { background: linear-gradient(155deg, #c026d3 0%, #a21caf 55%, #86198f 100%) !important; }
html.bk-ux-v3 .bk-plaque--n  { background: linear-gradient(155deg, #e11d48 0%, #be123c 55%, #9f1239 100%) !important; }
html.bk-ux-v3 .bk-plaque--ir { background: linear-gradient(155deg, #6366f1 0%, #4f46e5 55%, #4338ca 100%) !important; }
html.bk-ux-v3 .bk-plaque--r  { background: linear-gradient(155deg, #0891b2 0%, #0e7490 55%, #155e75 100%) !important; }
html.bk-ux-v3 .bk-plaque--d  { background: linear-gradient(155deg, #ea580c 0%, #c2410c 55%, #9a3412 100%) !important; }
/* Ne concourt plus : gris, attenue. La mention ecrite sous le niveau dit POURQUOI —
   jamais la couleur seule. */
html.bk-ux-v3 .bk-plaque--inactif {
    background: linear-gradient(155deg, #6b7280 0%, #4b5563 55%, #374151 100%) !important;
    opacity: .55;
    filter: saturate(0);
}
html.bk-ux-v3 .bk-plaque-inact {
    margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
/* La peau console ajoute .sf-titre-niv avec un liseré a la couleur du niveau : on le
   laisse, mais il ne doit pas recolorer un athlete retire. */
html.bk-ux-v3 .bk-plaque-wrap .bk-plaque-name,
html.bk-ux-v3 .bk-plaque-wrap .bk-plaque-sub { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ─── 11. « FAIRE COURIR EN 3D » EN AVANT ───────────────────────────────────── */
/* Bouton de la barre : contour tartan, toujours visible. */
html.bk-ux-v3 .bk-nav .v3-nav-run:not(#v3) {
    border-color: var(--v3-btn) !important; color: var(--v3-acc) !important; -webkit-text-fill-color: var(--v3-acc) !important;
    background: var(--v3-soft) !important; font-weight: 800 !important; white-space: nowrap;
    order: 10;   /* en DERNIER : sur telephone, connexion et inscription restent a l ecran */
}
html.bk-ux-v3 .bk-nav .v3-nav-run:not(#v3):hover,
html.bk-ux-v3 .bk-nav .v3-nav-run.on:not(#v3) { background: var(--v3-btn) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* Bandeau d'accueil */
html.bk-ux-v3 .v3-run {
    margin: 8px 0 18px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: center;
    padding: 26px 28px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--v3-btn) 45%, var(--v3-bd));
    background: linear-gradient(135deg, color-mix(in srgb, var(--v3-btn) 16%, var(--v3-s1)), var(--v3-s1) 70%);
    box-shadow: var(--v3-shadow);
}
html.bk-ux-v3 .v3-run h2 { margin: 0 0 8px; font-size: clamp(22px, 2.8vw, 32px); font-weight: 900; line-height: 1.1; }
html.bk-ux-v3 .v3-run p { margin: 0 0 16px; color: var(--v3-tx2); max-width: 560px; }
html.bk-ux-v3 .v3-kicker-run { margin-bottom: 10px !important; }
html.bk-ux-v3 .v3-run-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
html.bk-ux-v3 .v3-run-go:not(#v3) {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 12px;
    background: var(--v3-btn); color: #fff !important; -webkit-text-fill-color: #fff !important;
    font-weight: 900; font-size: 15.5px; text-decoration: none; box-shadow: 0 8px 22px rgba(194,65,12,.35);
}
html.bk-ux-v3 .v3-run-go:not(#v3):hover { background: var(--v3-btn-h); }
html.bk-ux-v3 .v3-run-alt:not(#v3) { font-weight: 800; color: var(--v3-acc) !important; text-decoration: none; padding: 0 6px; min-height: 48px; display: inline-flex; align-items: center; }

/* La piste : 6 couloirs, chaque coureur a SA vitesse (decoratif, aria-hidden). */
html.bk-ux-v3 .v3-run-piste {
    position: relative; border-radius: 14px; padding: 10px 12px; display: grid; gap: 5px;
    background: linear-gradient(180deg, #b4442a, #9b3520); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
html.bk-ux-v3 .v3-run-piste span { position: relative; height: 22px; border-bottom: 2px solid rgba(255,255,255,.7); }
html.bk-ux-v3 .v3-run-piste span:last-child { border-bottom: 0; }
html.bk-ux-v3 .v3-run-piste span::after { content: ""; position: absolute; right: 8%; top: -3px; bottom: -3px; width: 3px; background: repeating-linear-gradient(0deg, #fff 0 4px, #111 4px 8px); }
html.bk-ux-v3 .v3-run-piste i {
    position: absolute; top: 3px; left: 0; width: 16px; height: 16px; border-radius: 50%;
    background: hsl(calc(var(--k) * 55 + 20), 85%, 60%); box-shadow: 0 0 0 2px #fff;
    animation: v3Course calc(3.2s + var(--k) * .35s) cubic-bezier(.3, .1, .3, 1) infinite;
}
@keyframes v3Course { 0% { left: 0; } 80%, 100% { left: calc(92% - 16px); } }
@media (max-width: 760px) {
    html.bk-ux-v3 .v3-run { grid-template-columns: 1fr; padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    html.bk-ux-v3 .v3-run-piste i { animation: none; left: calc(var(--k) * 10% + 10%); }
}