/* ═════════════════════════════════════════════════════════════════════════════
   profil-fifa.css — LA FICHE ATHLETE FACON JEU VIDEO (carte « Ultimate Team »).
   Chargee seulement si l'interrupteur est actif (panel > Interface, ou ?fifa=1).
   Couche independante : elle passe par-dessus l'habillage (classique/console/robo)
   ET la version d'interface (v1/v2/v3) — d'ou `:not(#bkf)` sur les jetons, pour
   peser plus lourd que chacun d'eux sans dependre de l'ordre de chargement.

   ⚠ Elle n'enleve rien : 0 display:none, 0 max-height, 0 overflow:hidden sur du texte.
   ⚠ Couleurs de niveau (D/R/N/IR/I) intactes : elles portent une information.
   ⚠ Deux themes. En clair on ne garde PAS un fond sombre : theme-control.css fonce
     alors les textes inline -> texte sombre sur fond sombre. Le clair a sa palette.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Palette « stade de nuit » (sombre) ───────────────────────────────── */
html body.bk-fifa:not(#bkf) {
    --f-bg:  #060d1a; --f-s1: #0c1830; --f-s2: #12223f; --f-s3: #1a2e52;
    --f-bd:  #1f355a; --f-bd2: #2c4a7a;
    --f-tx:  #eef4ff; --f-tx2: #c3d0e8; --f-tx3: #93a3c2;
    --f-acc: #22f0a0;   /* vert « terrain » neon */
    --f-acc2:#3ad1ff;   /* cyan */
    --f-ink: #04120c;   /* texte pose SUR l'accent */
    --f-glow: 0 0 0 1px rgba(34,240,160,.18), 0 10px 30px rgba(0,0,0,.45);
}
/* ─── 1b. … et « match en plein jour » (clair) ────────────────────────────── */
html body.bk-fifa.p2-light:not(#bkf) {
    --f-bg:  #dfe6f0; --f-s1: #f4f7fb; --f-s2: #e8eef6; --f-s3: #d6dfeb;
    --f-bd:  #c3cfe0; --f-bd2: #a9b9d1;
    --f-tx:  #0a1630; --f-tx2: #2f3d58; --f-tx3: #4b5873;
    --f-acc: #067a47;   /* 5,4:1 sur --f-s1 */
    --f-acc2:#0b5fa8;
    --f-ink: #ffffff;
    --f-glow: 0 1px 2px rgba(10,22,48,.08), 0 10px 26px rgba(10,22,48,.10);
}

/* Les jetons du site rebranches (dashboard, theme-control/console --bk-*, v3 --v3-*). */
html body.bk-fifa:not(#bkf), html body.bk-pokemon:not(#bkf),
html body.bk-fifa.p2-light:not(#bkf), html body.bk-pokemon.p2-light:not(#bkf) {
    --bg-body: var(--f-bg) !important; --bg-card: var(--f-s1) !important; --bg-card-hover: var(--f-s2) !important;
    --bg-surface: var(--f-s2) !important; --bg-input: var(--f-s2) !important;
    --border: var(--f-bd) !important; --border-light: var(--f-bd2) !important;
    --text-primary: var(--f-tx) !important; --text-secondary: var(--f-tx2) !important; --text-muted: var(--f-tx3) !important;
    --text-white: var(--f-tx) !important; --text-link: var(--f-acc2) !important;
    --bk-bg: var(--f-bg) !important; --bk-surface-1: var(--f-s1) !important; --bk-surface-2: var(--f-s2) !important;
    --bk-surface-3: var(--f-s3) !important; --bk-border: var(--f-bd) !important; --bk-border-soft: var(--f-bd) !important;
    --bk-text: var(--f-tx) !important; --bk-text-2: var(--f-tx2) !important; --bk-text-3: var(--f-tx3) !important;
    --bk-text-4: var(--f-tx3) !important; --bk-link: var(--f-acc2) !important;
    --v3-bg: var(--f-bg) !important; --v3-s1: var(--f-s1) !important; --v3-s2: var(--f-s2) !important; --v3-s3: var(--f-s3) !important;
    --v3-bd: var(--f-bd) !important; --v3-bd2: var(--f-bd2) !important;
    --v3-tx: var(--f-tx) !important; --v3-tx2: var(--f-tx2) !important; --v3-tx3: var(--f-tx3) !important;
    --v3-acc: var(--f-acc) !important; --v3-soft: color-mix(in srgb, var(--f-acc) 12%, transparent) !important;
    /* fond : projecteurs de stade */
    background:
        radial-gradient(900px 420px at 15% -80px, color-mix(in srgb, var(--f-acc2) 18%, transparent), transparent 70%),
        radial-gradient(900px 420px at 85% -80px, color-mix(in srgb, var(--f-acc) 14%, transparent), transparent 70%),
        var(--f-bg) !important;
    background-attachment: fixed !important;
}
html:has(body.bk-fifa) { background: #060d1a !important; }
html:has(body.bk-pokemon) { background: #12141b !important; }
html:has(body.bk-pokemon.p2-light) { background: #e9edf3 !important; }
html:has(body.bk-fifa.p2-light) { background: #dfe6f0 !important; }

/* ─── 2. La fiche : titres « jeu video », panneaux ──────────────────────────── */
body.bk-fifa .p2-cover h1,
body.bk-fifa .p2-name, body.bk-fifa .p2-name-plain {
    font-style: italic; font-weight: 900 !important; text-transform: uppercase; letter-spacing: -.01em;
}
body.bk-fifa h2:not([style*="background"]), body.bk-fifa .p2-rubrique {
    font-style: italic; text-transform: uppercase; letter-spacing: .02em;
}
body.bk-fifa .p2-rubrique { color: var(--f-acc) !important; -webkit-text-fill-color: var(--f-acc) !important; }

/* Panneaux : les blocs de la fiche (peau classique) et les cartes de colonnes (peau console). */
body.bk-fifa .p2-block,
body.bk-fifa.bk-skin-console .sf-main > *,
body.bk-fifa.bk-skin-console .sf-side > *,
body.bk-fifa .chart-card {
    background: linear-gradient(180deg, var(--f-s2), var(--f-s1)) !important;
    border: 1px solid var(--f-bd) !important;
    border-top: 2px solid var(--f-acc) !important;
    border-radius: 12px !important;
    box-shadow: var(--f-glow) !important;
}
body.bk-fifa .p2-block { padding: 14px 16px !important; }
body.bk-fifa .bk-table th {
    background: var(--f-s3) !important; color: var(--f-tx2) !important; -webkit-text-fill-color: var(--f-tx2) !important;
    font-style: italic; text-transform: uppercase; letter-spacing: .06em;
}
body.bk-fifa .bk-table tr:hover td { background: color-mix(in srgb, var(--f-acc) 10%, transparent) !important; }

/* La plaque de rue garde sa forme ; la carte la precede. */
body.bk-fifa .bk-plaque-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* ─── 3. LA CARTE DE JOUEUR ─────────────────────────────────────────────────── */
.bkf-wrap {
    display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: center;
    margin: 6px auto 4px; max-width: 760px;
}
.bkf-card {
    --c1: #e8c66a; --c2: #b8892b; --c3: #6d4c10; --ct: #2a1b02; --cs: #4a3205;
    position: relative; width: 250px; flex: 0 0 auto; min-height: 360px;   /* hauteur MINIMALE : un nom long fait grandir la carte, il n est jamais rogne par le blason */
    padding: 20px 18px 16px; box-sizing: border-box;
    color: var(--ct);
    background:
        radial-gradient(160px 120px at 30% 18%, rgba(255,255,255,.55), transparent 70%),
        linear-gradient(160deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
    /* le blason de la carte, coins coupes — elle ne contient aucun menu deroulant */
    clip-path: polygon(50% 0, 100% 7%, 100% 86%, 50% 100%, 0 86%, 0 7%);
    filter: drop-shadow(0 16px 26px rgba(0,0,0,.45));
    display: flex; flex-direction: column;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    transition: transform .25s ease;
}
.bkf-card:hover { transform: translateY(-4px) rotate(-.6deg); }
.bkf-shine {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
    background-size: 250% 100%; animation: bkfShine 5s ease-in-out infinite;
}
@keyframes bkfShine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }

/* Paliers */
.bkf-special { --c1: #3a3a3a; --c2: #121212; --c3: #000; --ct: #f5d77a; --cs: #e9c45a; }
.bkf-special::after {
    content: ""; position: absolute; inset: 6px; pointer-events: none;
    clip-path: polygon(50% 0, 100% 7%, 100% 86%, 50% 100%, 0 86%, 0 7%);
    box-shadow: inset 0 0 0 2px #e9c45a;
}
.bkf-or     { --c1: #f6dc85; --c2: #d4a93c; --c3: #8a6512; --ct: #2b1c03; --cs: #4d3507; }
.bkf-argent { --c1: #f1f3f6; --c2: #b8bfc9; --c3: #6f7884; --ct: #161b22; --cs: #2c333d; }
.bkf-bronze { --c1: #e7b48a; --c2: #b97843; --c3: #6e3f19; --ct: #241105; --cs: #3c1f0a; }
.bkf-retire { --c1: #d3d6db; --c2: #9aa1ab; --c3: #5c636d; --ct: #15191f; --cs: #262b33; opacity: .55; filter: grayscale(1) drop-shadow(0 12px 20px rgba(0,0,0,.35)); }
.bkf-retire .bkf-shine { animation: none; opacity: 0; }

.bkf-top { display: flex; justify-content: space-between; position: relative; z-index: 1; }
.bkf-ovr { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 0 6px; min-width: 56px; }
.bkf-ovr b { font-size: 44px; line-height: .9; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bkf-pos { font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.bkf-flag img { display: block; width: 32px !important; height: auto !important; margin: 4px 0 0 !important; border-radius: 2px !important; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.bkf-niv { margin-top: 4px; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.18); }
.bkf-special .bkf-niv { background: rgba(233,196,90,.18); }
.bkf-avatar { width: 128px; height: 128px; margin: 6px 4px 0 0; opacity: .9; }
.bkf-avatar svg { width: 100%; height: 100%; fill: var(--cs); opacity: .55; }

.bkf-name { position: relative; z-index: 1; text-align: center; margin-top: 2px; border-bottom: 1px solid color-mix(in srgb, var(--ct) 30%, transparent); padding-bottom: 6px; }
.bkf-name small { display: block; font-size: 12px; font-weight: 600; opacity: .85; line-height: 1.2; overflow-wrap: anywhere; }
.bkf-name strong { display: block; font-size: 21px; font-weight: 900; letter-spacing: .01em; line-height: 1.05; overflow-wrap: anywhere; }

.bkf-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px 16px; padding: 8px 10px 4px; }
.bkf-st { display: flex; align-items: baseline; gap: 6px; }
.bkf-st b { font-size: 18px; font-weight: 900; min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; }
.bkf-st span { font-size: 13px; font-weight: 700; letter-spacing: .05em; opacity: .9; }
.bkf-st.bkf-v-top b { text-shadow: 0 0 10px rgba(255,255,255,.6); }

.bkf-foot { position: relative; z-index: 1; margin-top: auto; text-align: center; display: flex; flex-direction: column; gap: 1px; padding-bottom: 18px; }
.bkf-club { font-size: 11.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.bkf-pal  { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }

/* Encadre a cote de la carte */
.bkf-side { flex: 1 1 260px; max-width: 360px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bkf-kpi {
    background: var(--f-s1, #0c1830); border: 1px solid var(--f-bd, #1f355a); border-top: 2px solid var(--f-acc, #22f0a0);
    border-radius: 10px; padding: 10px 8px; text-align: center;
}
.bkf-kpi b { display: block; font-size: 24px; font-weight: 900; font-style: italic; color: var(--f-tx, #eef4ff); font-variant-numeric: tabular-nums; }
.bkf-kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--f-tx3, #93a3c2); }
.bkf-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--f-tx3, #93a3c2); }

@media (max-width: 560px) {
    .bkf-card { width: min(250px, 78vw); }
    .bkf-side { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bkf-shine { animation: none; }
    .bkf-card, .bkf-card:hover { transition: none; transform: none; }
}

/* « Le faire courir en 3D » sous la carte (Pokemon) / en tete de l'encadre (FIFA).
   Commun aux deux styles : la fonction la plus spectaculaire du site, a un clic. */
a.bk-run3d:not(#x) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 20px; border-radius: 12px; box-sizing: border-box;
    background: linear-gradient(135deg, #ea580c, #c2410c) !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    font-weight: 900; font-size: 15px; text-decoration: none !important; letter-spacing: .01em;
    box-shadow: 0 8px 22px rgba(234,88,12,.4);
    animation: bkRunPulse 2.6s ease-in-out infinite;
}
a.bk-run3d:not(#x):hover { filter: brightness(1.08); }
a.bk-run3d:not(#x):focus-visible { outline: 3px solid #fdba74; outline-offset: 3px; }
.bkf-run { grid-column: 1 / -1; }
@keyframes bkRunPulse { 0%, 100% { box-shadow: 0 8px 22px rgba(234,88,12,.35); } 50% { box-shadow: 0 8px 30px rgba(234,88,12,.65); } }
@media (prefers-reduced-motion: reduce) { a.bk-run3d:not(#x) { animation: none; } }