/*
 * Profils KingFight : panneaux, cases et boutons du jeu ; police du pack (ascii.png convertie en TTF, 16 px par em : tailles 16, 32, 48).
 * Les couleurs de fin de fichier (section « STYLE D ») remplacent celles du début : parchemin, bois et or (choix final d'Artur, 1/11).
 */
@font-face { font-family: "KingFight"; src: url("../fonts/KingFight-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "KingFight"; src: url("../fonts/KingFight-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

.kfp {
    --kfp-panneau: #2a1d40; --kfp-clair: #4b3672; --kfp-sombre: #160d26;
    --kfp-case: #1f1530; --kfp-case-survol: #2f2148; --kfp-creux: #120a1e; --kfp-creux-haut: #07040c; --kfp-creux-bas: #3a2a55;
    --kfp-texte: #e6dcf2; --kfp-doux: #b9b0cc; --kfp-or: #f2c14e; --kfp-or-clair: #ffe08a; --kfp-or-fonce: #b07c12;
    --kfp-coins: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
    --kfp-coins-haut: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% 100%, 0 100%);
    background: transparent; color: var(--kfp-texte); font-family: "KingFight", monospace; font-size: 16px; line-height: 20px; padding: 24px;
}
.kfp img { image-rendering: pixelated; }
.kfp a { color: var(--kfp-or); }
.kfp a:hover { color: #ffffff; }
/* le thème du site met h1/h2 en majuscules (et les pseudos avec) : textes tels quels ici */
.kfp h1, .kfp h2, .kfp h3 { font-family: "KingFight", monospace; margin: 0; letter-spacing: 0; text-transform: none; }
.kfp .grand { font-size: 32px; line-height: 36px; font-weight: 700; }
/* gros montants (« 985 075 509 $ ») : plus petits et à la ligne plutôt que de sortir du cadre */
.kfp .grand.grand-long { font-size: 24px; line-height: 28px; white-space: normal !important; overflow-wrap: anywhere; }
.kfp .tres-grand { font-size: 48px; line-height: 54px; font-weight: 700; }
.kfp .doux { color: var(--kfp-doux); }
.kfp .vert { color: #5ee36a; }
.kfp .rouge { color: #ff7b7b; }
.kfp .violet { color: #c4a6ff; }
.kfp .or { color: var(--kfp-or); }
.kfp .bronze { color: #e0955a; }

/* panneaux et cases du jeu */
.kfp .gui { background: var(--kfp-panneau); border: 3px solid #000; box-shadow: inset 3px 3px 0 var(--kfp-clair), inset -3px -3px 0 var(--kfp-sombre); color: var(--kfp-texte); padding: 24px; clip-path: var(--kfp-coins); }
/* une infobulle ou une fenêtre à l'intérieur serait coupée par les coins en escalier */
.kfp .gui:has(.infobulle), .kfp .gui:has(.modal) { clip-path: none; }
.kfp .gui h2 { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--kfp-or); }
.kfp .slot { width: 72px; height: 72px; flex: none; background: var(--kfp-creux); box-shadow: inset 4px 4px 0 var(--kfp-creux-haut), inset -4px -4px 0 var(--kfp-creux-bas); display: grid; place-items: center; }
.kfp .ligne-gui { background: var(--kfp-case); box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); padding: 10px 12px; }
.kfp .separateur { height: 3px; margin-bottom: 2px; background: var(--kfp-sombre); box-shadow: 0 2px 0 var(--kfp-creux-bas); }
.kfp .bouton { display: inline-block; background: #3a2760; border: 3px solid #000; box-shadow: inset 3px 3px 0 #6a4fa0, inset -3px -4px 0 #22163a; color: #ffffff; text-shadow: 2px 2px 0 #22163a; text-decoration: none; font-family: "KingFight", monospace; font-size: 16px; padding: 12px 20px; cursor: pointer; clip-path: var(--kfp-coins); transition: background-color 0.12s ease, transform 0.08s ease; }
.kfp .bouton:hover { background: #4a3580; color: #ffffff; }
.kfp .bouton:active { transform: translateY(2px); box-shadow: inset 3px 3px 0 #22163a, inset -3px -3px 0 #6a4fa0; }
.kfp .bouton.actif { background: var(--kfp-or); color: #3a2600; text-shadow: none; box-shadow: inset 3px 3px 0 var(--kfp-or-clair), inset -3px -4px 0 var(--kfp-or-fonce); }
.kfp .bouton:focus-visible { clip-path: none; outline: 3px solid var(--kfp-or); outline-offset: 2px; }
/* contour en relief comme une case d'inventaire (Artur, 31/10 : « mets des contours sur les barres d'xp ») */
.kfp .barre { height: 16px; background: #0b0713; border: 3px solid #000; box-shadow: -3px -3px 0 var(--kfp-creux-haut), 3px 3px 0 var(--kfp-creux-bas); margin: 3px; }
.kfp .barre .plein { height: 16px; background: #7fe02a; box-shadow: inset 0 4px 0 #b6ff6a, inset 0 -4px 0 #4f9a12; }
.kfp .pastille-verte { width: 12px; height: 12px; background: #3ad13a; border: 2px solid #1f6b2a; flex: none; }
.kfp .pastille-grise { width: 12px; height: 12px; background: #8b8b8b; border: 2px solid #555555; flex: none; }
.kfp .badge-grade { color: #ffffff; padding: 4px 8px; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); border: 2px solid rgba(0, 0, 0, 0.45); }

/* mise en page : fiche à gauche, rubriques à droite ; une colonne sur téléphone */
.kfp .page { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.kfp .fiche { flex: 1 1 380px; max-width: 420px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; }
.kfp .fiche .grand { white-space: nowrap; }
@media (max-width: 1100px) { .kfp .fiche { max-width: none; } }
@media (max-width: 480px) { .kfp { padding: 12px; } .kfp .gui { padding: 16px; } .kfp .fiche .grand { white-space: normal; } }
.kfp .colonne { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.kfp .rangee { display: flex; flex-wrap: wrap; gap: 24px; }
.kfp .skin { background: #000; box-shadow: inset 4px 4px 0 var(--kfp-creux-haut), inset -4px -4px 0 var(--kfp-creux-bas); height: 400px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 28px; box-sizing: border-box; }
.kfp .skin img { max-height: 340px; }
.kfp .classements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: center; }
.kfp a.ligne-gui { color: var(--kfp-texte); }
.kfp a.ligne-gui:hover { background: var(--kfp-case-survol); color: #ffffff; }

/* onglets du jeu, posés sur le premier panneau */
.kfp .onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: -24px; padding-left: 12px; }
/* 1/11 : onglets des classements (avec icônes) sur une seule ligne, qui défile sur le côté si l'écran est étroit */
.kfp .onglets:has(.icone-onglet) { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.kfp .onglets:has(.icone-onglet)::-webkit-scrollbar { display: none; }
.kfp .onglets:has(.icone-onglet) .onglet { flex: none; padding: 12px 13px; white-space: nowrap; }
.kfp .onglet { display: inline-block; background: var(--kfp-case); border: 3px solid #000; border-bottom: 0; box-shadow: inset 3px 3px 0 var(--kfp-creux-bas); color: var(--kfp-doux); text-decoration: none; padding: 12px 20px; clip-path: var(--kfp-coins-haut); }
.kfp .onglet:hover { background: var(--kfp-case-survol); color: #ffffff; }
.kfp .onglet.actif { background: var(--kfp-panneau); box-shadow: inset 3px 3px 0 var(--kfp-clair); color: #ffd25e; }

.kfp .grille-membres { display: flex; flex-wrap: wrap; gap: 12px; }
.kfp .membre { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; text-decoration: none; color: var(--kfp-texte); }
.kfp .membre:hover { color: #ffffff; }
/* 31/10 (Artur) : cases de l'HDV plus larges (c'était serré), lore de l'objet au survol */
.kfp .grille-hdv { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.kfp .annonce { display: flex; gap: 14px; align-items: center; padding: 12px 14px; cursor: help; }
.kfp .annonce:hover, .kfp .annonce:focus-visible { outline: 2px solid var(--kfp-or); outline-offset: -2px; background: var(--kfp-case-survol); }
.kfp .annonce-texte { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kfp .annonce-nom { font-weight: 700; line-height: 20px; }
.kfp .annonce-prix { font-size: 18px; line-height: 22px; font-weight: 700; color: #ffffff; }
.kfp .infobulle-objet { max-width: 340px; }

/* champs creusés comme une case d'inventaire */
.kfp .recherche { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.kfp .recherche input, .kfp .recherche select { height: 48px; box-sizing: border-box; padding: 0 12px; background: var(--kfp-creux); border: 3px solid; border-color: var(--kfp-creux-haut) var(--kfp-creux-bas) var(--kfp-creux-bas) var(--kfp-creux-haut); color: #ffffff; font-family: "KingFight", monospace; font-size: 16px; }
.kfp .recherche input { width: 220px; }
.kfp .recherche input::placeholder { color: #8f86a6; }
.kfp .recherche input:focus, .kfp .recherche select:focus { outline: none; border-color: var(--kfp-or); }
.kfp .alerte { background: #3a2a10; border: 3px solid #000; color: #ffe08a; padding: 12px 16px; margin-bottom: 24px; clip-path: var(--kfp-coins); }

/* arbre : plateau du menu /arbre, tuiles du pack (atlas : 4 icônes par rangée, 3 états chacune) */
.kfp .plateau { position: relative; }
.kfp .tuile, .kfp .tuile-legende { width: 64px; height: 64px; padding: 0; border: 0; background-color: transparent; background-image: url("../img/tuiles/atlas.png"); background-repeat: no-repeat; image-rendering: pixelated; }
.kfp .tuile { position: absolute; cursor: pointer; }
.kfp .tuile-legende { display: inline-block; }
.kfp .tuile:hover { filter: brightness(1.12); }
.kfp .tuile:focus-visible { outline: 4px solid #8fb5ff; outline-offset: 2px; }
.kfp .tuile.choisie { outline: 4px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 8px #000; }
.kfp .trait-contour, .kfp .trait { position: absolute; }
.kfp .trait-contour { background: #07040c; }
.kfp .trait-acquis { background: var(--kfp-or); }
.kfp .trait-dispo { background: #ffffff; }
.kfp .trait-verrou { background: #6f6585; }
.kfp .bande { position: absolute; left: 8px; width: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-right: 3px solid var(--kfp-creux-bas); }
.kfp .bande-nom { font-weight: 700; color: #ffffff; }
.kfp .depart { position: absolute; width: 64px; height: 64px; box-sizing: border-box; border: 4px solid var(--kfp-or); background: #2d2440; box-shadow: inset 0 0 0 4px #1d1630; display: grid; place-items: center; }
/* « DÉPART » tient sous sa case (il débordait sur le trait, 1/11) */
.kfp .depart-texte { position: absolute; width: 64px; text-align: center; font-weight: 700; color: #ffffff; font-size: 13px; line-height: 16px; white-space: nowrap; }

/* Pages Events et Classements */
.kfp .ligne-gui .doux, .kfp .tableau .doux { color: var(--kfp-doux); }
.kfp .lien-gui { color: var(--kfp-texte); text-decoration: underline; text-underline-offset: 3px; }
.kfp .lien-gui:hover { color: #ffd25e; }
.kfp .badge-classement { background: #1f4f9a; color: #ffffff; padding: 2px 8px; border: 2px solid #0d2a57; font-weight: 700; white-space: nowrap; }
.kfp .badge-en-cours { background: #1f6b2a; color: #ffffff; padding: 2px 8px; border: 2px solid #0f3a16; font-weight: 700; white-space: nowrap; }
.kfp .planning { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px 16px; }
.kfp .jour { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kfp .jour h3 { font-size: 16px; line-height: 20px; font-weight: 700; color: #ffffff; }
/* planning de la semaine (31/10) : 7 colonnes sur toute la largeur de l'écran, une ligne par event, fiche au survol */
/* largeur de l'écran disponible : moins le panneau d'un joueur des Cash Cups quand il est ouvert */
.kfp.kfp-large { width: min(1800px, calc(var(--kfp-ecran, 100vw) - 32px)); margin-left: calc(50% - min(900px, var(--kfp-ecran, 100vw) / 2 - 16px)); box-sizing: border-box; }
.kfp .semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: start; }
.kfp .semaine .jour { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kfp .semaine .jour h3 { font-size: 15px; line-height: 20px; margin: 0 0 4px; padding-bottom: 4px; border-bottom: 3px solid var(--kfp-sombre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kfp .creneau-court { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 4px 6px; background: var(--kfp-case); border: 0; box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); font-family: inherit; font-size: 14px; line-height: 18px; color: var(--kfp-texte); text-align: left; cursor: help; }
.kfp .creneau-court:hover, .kfp .creneau-court:focus-visible { background: var(--kfp-case-survol); outline: 2px solid var(--kfp-or); outline-offset: -2px; }
.kfp .creneau-court time { flex: none; width: 64px; font-weight: 700; white-space: nowrap; }
.kfp .creneau-court img { flex: none; image-rendering: pixelated; }
.kfp .creneau-court .nom { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kfp .creneau-court.creneau-classement { box-shadow: inset 4px 0 0 #5b8def, inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); padding-left: 10px; }
.kfp .creneau-court.creneau-en-cours { background: #16391c; box-shadow: inset 0 0 0 2px #5ee36a; }
.kfp .jours-onglets { display: none; }
/* branches du résumé de l'arbre (profil) : liens vers l'arbre placé sur la branche */
.kfp .branche-lien { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--kfp-texte); text-decoration: none; }
.kfp .branche-lien:hover .slot, .kfp .branche-lien:focus-visible .slot { outline: 3px solid var(--kfp-or); outline-offset: 1px; }
.kfp .branche-lien:hover span:not(.slot) { color: #ffffff; }
.kfp .tuile.tuile-repere { outline: 4px solid var(--kfp-or); outline-offset: 2px; z-index: 2; }
/* onglets du profil : une vue à la fois quand le script tourne (sans script : tout s'affiche) */
.kfp .panneau-onglet { display: flex; flex-direction: column; gap: 24px; }
.kfp .js-onglets .panneau-onglet { display: none; }
.kfp .js-onglets .panneau-onglet.visible { display: flex; }
/* classements : liste des Cash Cups et recherche */
.kfp .outils-classement { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.kfp .choix-cup, .kfp .recherche-classement { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.kfp .choix-cup select, .kfp .recherche-classement input { height: 44px; box-sizing: border-box; padding: 0 12px; background: var(--kfp-creux); border: 3px solid; border-color: var(--kfp-creux-haut) var(--kfp-creux-bas) var(--kfp-creux-bas) var(--kfp-creux-haut); color: #fff; font-family: "KingFight", monospace; font-size: 15px; max-width: 100%; }
.kfp .choix-cup select { min-width: 280px; }
/* 1/11 : métiers en icônes à cliquer ; colonnes triables (flèche du sens du tri) */
.kfp .choix-metiers { display: flex; flex-wrap: wrap; gap: 10px; }
.kfp .choix-metier { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; color: var(--kfp-doux); text-decoration: none; }
.kfp .choix-metier .slot { width: 52px; height: 52px; }
.kfp .choix-metier:hover { color: #ffffff; }
.kfp .choix-metier:hover .slot, .kfp .choix-metier:focus-visible .slot { outline: 3px solid var(--kfp-clair); outline-offset: 1px; }
.kfp .choix-metier.actif .slot { outline: 3px solid var(--kfp-or); outline-offset: 1px; }
.kfp .choix-metier.actif span:last-child { font-weight: 700; color: #ffd25e; }
.kfp .tableau th[data-tri] .tri { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; white-space: nowrap; }
.kfp .tableau th[data-tri] .tri::after { content: "↕"; margin-left: 6px; opacity: 0.4; }
.kfp .tableau th[aria-sort="descending"] .tri::after { content: "▼"; opacity: 1; }
.kfp .tableau th[aria-sort="ascending"] .tri::after { content: "▲"; opacity: 1; }
.kfp .tableau th[data-tri] .tri:hover, .kfp .tableau th[data-tri] .tri:focus-visible { color: #ffd25e; }
.kfp .recherche-classement input { width: 240px; }
.kfp .choix-cup select:focus, .kfp .recherche-classement input:focus { outline: none; border-color: var(--kfp-or); }
.kfp .infobulle-event { max-width: 360px; }
.kfp .infobulle-event .kf-fiche { gap: 4px; }
@media (max-width: 1199.98px) {
    /* téléphone et tablette : un jour à la fois */
    .kfp.kfp-large { width: auto; margin-left: 0; }
    .kfp .jours-onglets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
    .kfp .jours-onglets .bouton { flex: none; padding: 8px 12px; font-size: 14px; }
    .kfp .semaine { display: block; }
    .kfp .semaine .jour { display: none; }
    .kfp .semaine .jour.actif { display: flex; }
    .kfp .creneau-court { padding: 8px 10px; font-size: 15px; }
}
.kfp .creneau { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.kfp .creneau .heure { width: 72px; flex: none; font-weight: 700; color: #ffffff; }
.kfp .creneau .badge-en-cours { margin-left: auto; }
/* le nom garde sa largeur : le badge passe à la ligne au lieu de le couvrir */
.kfp .creneau > span[style] { flex-basis: auto !important; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .kfp .creneau .heure { width: 52px; } }
.kfp .creneau-classement { box-shadow: inset 6px 0 0 #5b8def, inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); padding-left: 16px; }
.kfp .grand-place { font-size: 20px; line-height: 24px; font-weight: 700; color: #ffffff; white-space: nowrap; }
.kfp .place-1 { color: var(--kfp-or); }
.kfp .place-3 { color: #e0955a; }
.kfp .or-lisible { color: var(--kfp-or); font-weight: 700; }
.kfp .bronze-lisible { color: #e0955a; font-weight: 700; }
.kfp .tableau-defile { overflow-x: auto; }
.kfp .tableau { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.kfp .tableau th { text-align: left; color: var(--kfp-doux); font-weight: 700; padding: 0 12px 2px; white-space: nowrap; }
/* lignes creusées : trait du haut sur toute la ligne, trait de gauche sur la première case. !important : le thème raye
   les lignes impaires des tableaux en !important */
.kfp .tableau td { background: var(--kfp-case) !important; padding: 10px 12px; color: var(--kfp-texte); box-shadow: inset 0 2px 0 var(--kfp-creux-haut), inset 0 -2px 0 var(--kfp-creux-bas); }
.kfp .tableau tr td:first-child { box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset 0 -2px 0 var(--kfp-creux-bas); width: 72px; }
.kfp .tableau .nombre { text-align: right; white-space: nowrap; }
.kfp .recherche input[type="date"] { width: auto; color-scheme: dark; }
.kfp .echantillon-classement { display: inline-block; width: 8px; height: 24px; background: #5b8def; flex: none; }
.kfp .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* arbre : on l'attrape à la souris pour le déplacer */
.kfp .cadre-plateau { cursor: grab; }
.kfp .cadre-plateau.glisse, .kfp .cadre-plateau.glisse .tuile { cursor: grabbing; }
.kfp .plateau { user-select: none; -webkit-user-select: none; }
/* infobulle des cases de l'arbre : comme celle des objets en jeu (fond violet très sombre, cadre violet) */
.kfp .infobulle { position: fixed; z-index: 1050; max-width: 360px; box-sizing: border-box; padding: 10px 12px; background: rgba(16, 0, 16, 0.95); border: 2px solid #4a17b8; box-shadow: 0 0 0 2px rgba(16, 0, 16, 0.95); color: #ffffff; font-family: "KingFight", monospace; font-size: 16px; line-height: 20px; pointer-events: none; display: flex; flex-direction: column; gap: 4px; }
.kfp .infobulle[hidden] { display: none; }
.kfp .infobulle .bulle-titre { font-weight: 700; }
.kfp .infobulle .bulle-type { color: #aaaaaa; }
.kfp .infobulle .bulle-desc { color: #e0e0ff; font-family: system-ui, sans-serif; font-size: 17px; line-height: 24px; }
.kfp .infobulle .bulle-etat.prise { color: #ffaa00; }
.kfp .infobulle .bulle-etat.dispo { color: #55ff55; }
.kfp .infobulle .bulle-etat.refus { color: #ff5555; }
/* 31/10 (Artur) : la fiche à gauche garde les métiers et leurs barres d'XP l'un sous l'autre ; onglet Arbre = un seul
   panneau, l'arbre en haut et les points à placer à droite (ils suivent l'écran pendant qu'on descend dans l'arbre) */
.kfp [hidden] { display: none !important; }
.kfp.kfp-large .fiche { max-width: 380px; }
.kfp .metiers-fiche { display: flex; flex-direction: column; gap: 14px; }
.kfp .metier-fiche { display: flex; gap: 12px; align-items: center; }
.kfp .slot.slot-petit { width: 56px; height: 56px; }
.kfp .metier-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kfp .metier-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; }
.kfp .ligne-historique { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.kfp .arbre-vue { display: flex; gap: 20px; align-items: flex-start; padding: 16px; }
.kfp .arbre-vue > .cadre-plateau { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.kfp .arbre-points { flex: 0 0 290px; box-sizing: border-box; position: sticky; top: 96px; padding: 16px; background: var(--kfp-case); box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); display: flex; flex-direction: column; gap: 14px; }
.kfp .arbre-branches { display: flex; flex-direction: column; gap: 6px; }
.kfp .branche-ligne { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; background: #3a2760; border: 0; box-shadow: inset 2px 2px 0 #6a4fa0, inset -2px -2px 0 #22163a; font: inherit; color: #ffffff; text-align: left; cursor: pointer; }
.kfp .branche-ligne:hover, .kfp .branche-ligne:focus-visible { background: #4a3580; outline: 2px solid var(--kfp-or); outline-offset: -2px; }
.kfp .branche-ligne .nombre { margin-left: auto; font-weight: 700; white-space: nowrap; }
.kfp .arbre-action, .kfp .arbre-action [data-info="choix"] { display: flex; flex-direction: column; gap: 10px; }
.kfp .message-arbre { color: #8fb5ff; font-weight: 700; }
.kfp .message-arbre:empty { display: none; }
.kfp .legende-arbre { display: flex; flex-direction: column; gap: 6px; }
.kfp .legende-arbre > span { display: flex; align-items: center; gap: 10px; }
.kfp .legende-arbre .tuile-legende { zoom: 0.5; }
@media (max-width: 991.98px) {
    .kfp .arbre-vue { flex-direction: column; align-items: stretch; }
    .kfp .arbre-points { position: static; flex-basis: auto; }
    .kfp .arbre-vue > .cadre-plateau { max-height: 75vh; overflow: auto; }
}
.kfp[data-onglet-actif="arbre"] .fiche .hors-arbre { display: none !important; }
/* 31/10 (Artur : « retire complètement ce truc ») : plus de panneau à droite de l'arbre ; ses points disponibles par
   voie sont dans la fiche de gauche, sur l'onglet Arbre seulement (l'argent et les KingZ y sont masqués) */
.kfp .seulement-arbre { display: none !important; }
.kfp[data-onglet-actif="arbre"] .fiche .seulement-arbre { display: block !important; }
.kfp[data-onglet-actif="arbre"] .fiche .points-fiche { display: flex !important; }
.kfp .points-fiche { flex-direction: column; gap: 12px; }
.kfp .points-dispo { display: flex; align-items: baseline; gap: 12px; font-weight: 700; color: #ffffff; }
/* recherche d'un joueur au bout des onglets (31/10) : si la place manque, elle passe AU-DESSUS (wrap-reverse) pour que
   les onglets restent posés sur le panneau */
/* avec wrap-reverse, le bas de la ligne est flex-start : les onglets restent posés sur le panneau même si la recherche est plus haute qu'eux (Artur, 1/11 : « c'est coupé bizarre ») */
.kfp .barre-onglets { display: flex; flex-wrap: wrap-reverse; align-items: flex-start; gap: 8px 16px; margin-bottom: -24px; }
.kfp .barre-onglets .onglets { margin-bottom: 0; }
.kfp .recherche-profil { margin-left: auto; margin-bottom: 12px; display: flex; gap: 0; }
.kfp .recherche-profil input { width: 230px; height: 40px; box-sizing: border-box; padding: 0 12px; background: var(--kfp-creux); border: 3px solid; border-color: var(--kfp-creux-haut) var(--kfp-creux-bas) var(--kfp-creux-bas) var(--kfp-creux-haut); border-right: 0; color: #fff; font-family: "KingFight", monospace; font-size: 15px; }
.kfp .recherche-profil input::placeholder { color: #8f86a6; }
.kfp .recherche-profil input:focus { outline: none; border-color: var(--kfp-or); }
.kfp .recherche-profil button { width: 46px; height: 40px; background: #3a2760; border: 3px solid #000; box-shadow: inset 2px 2px 0 #6a4fa0, inset -2px -2px 0 #22163a; color: #fff; font-size: 16px; cursor: pointer; }
.kfp .recherche-profil button:hover { background: #4a3580; color: #ffd25e; }
@media (max-width: 767.98px) {
    .kfp .recherche-profil { flex-basis: 100%; margin: 0; }
    .kfp .recherche-profil input { flex: 1; width: auto; min-width: 0; }
}
/* onglet Paiements (31/10) */
.kfp .ligne-paiement { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
/* 1/11 (Artur) : podium des classements, 1er en or, 2e en argent, 3e en bronze ; gain en KingZ en vert */
/* 1/11 : podium bien visible (Artur : « on ne voit pas assez la différence ») : fonds or, argent et bronze, reflet de
   lumière qui traverse la ligne. !important : le thème raye les lignes impaires des tableaux en !important. */
.kfp .tableau tr.rang-or { color: #3d2900; }
.kfp .tableau tr.rang-argent { color: #20252c; }
.kfp .tableau tr.rang-bronze { color: #3d1f08; }
.kfp .tableau tr.rang-or td { background: linear-gradient(180deg, #ffe27a 0%, #f5c23a 100%) !important; color: #3d2900; box-shadow: inset 0 3px 0 #fff0b3, inset 0 -3px 0 #c8901a; }
.kfp .tableau tr.rang-argent td { background: linear-gradient(180deg, #f7f9fc 0%, #c5ceda 100%) !important; color: #20252c; box-shadow: inset 0 3px 0 #ffffff, inset 0 -3px 0 #8d97a5; }
.kfp .tableau tr.rang-bronze td { background: linear-gradient(180deg, #f6be8c 0%, #d68a4f 100%) !important; color: #3d1f08; box-shadow: inset 0 3px 0 #ffd9b5, inset 0 -3px 0 #9c5a2a; }
.kfp .tableau tr.rang-or td:first-child { box-shadow: inset 6px 0 0 #b8780f, inset 0 3px 0 #fff0b3, inset 0 -3px 0 #c8901a; }
.kfp .tableau tr.rang-argent td:first-child { box-shadow: inset 6px 0 0 #6f7a89, inset 0 3px 0 #ffffff, inset 0 -3px 0 #8d97a5; }
.kfp .tableau tr.rang-bronze td:first-child { box-shadow: inset 6px 0 0 #8a4a1c, inset 0 3px 0 #ffd9b5, inset 0 -3px 0 #9c5a2a; }
.kfp .tableau tr[class^="rang-"] td:first-child { font-size: 1.15em; font-weight: 700; }
.kfp .tableau tr.rang-or td:first-child { text-shadow: 1px 1px 0 #fff0b3; }
/* textes colorés d'une ligne du podium (fond clair) : lisibles en sombre */
.kfp .tableau tr[class^="rang-"] .doux, .kfp .tableau tr[class^="rang-"] .or-lisible, .kfp .tableau tr[class^="rang-"] .bronze-lisible, .kfp .tableau tr[class^="rang-"] .violet { color: inherit; }
.kfp .tableau tr[class^="rang-"] .gain-kingz { color: #14591f; }
.kfp .tableau tr[class^="rang-"] { position: relative; }
.kfp .tableau tr[class^="rang-"]::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 62%) no-repeat;
    background-size: 40% 100%; background-position: -60% 0; animation: kfp-reflet-podium 3.6s ease-in-out infinite;
}
.kfp .tableau tr.rang-argent::after { animation-delay: 0.6s; }
.kfp .tableau tr.rang-bronze::after { animation-delay: 1.2s; }
@keyframes kfp-reflet-podium { 0% { background-position: -60% 0; } 55%, 100% { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) { .kfp .tableau tr[class^="rang-"]::after { animation-duration: 6s; } }
.kfp .tableau tr.rang-or .lien-gui, .kfp .tableau tr.rang-argent .lien-gui, .kfp .tableau tr.rang-bronze .lien-gui { color: inherit; }
.kfp .gain-kingz { color: #5ee36a; font-weight: 700; }
/* factions cliquables : fiche avec leurs membres */
.kfp .lien-faction { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #c4a6ff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kfp .lien-faction:hover, .kfp .lien-faction:focus-visible { color: #ffd25e; }
.kfp .tableau tr[class^="rang-"] .lien-faction { color: inherit; }
.kfp .fiche-faction { display: flex; flex-direction: column; gap: 16px; padding-right: 28px; }
/* cup en direct */
.kfp .cup-direct { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 14px; background: #16391c; box-shadow: inset 0 0 0 2px #5ee36a; color: #d8ffd8; text-decoration: none; }
.kfp .cup-direct:hover { background: #1d4a25; color: #ffffff; }
.kfp .pastille-direct { display: inline-block; margin-left: 6px; padding: 1px 6px; background: #1f6b2a; color: #fff; font-size: 12px; line-height: 16px; vertical-align: middle; animation: kf-pulsation 1.6s ease-in-out infinite; }
@keyframes kf-pulsation { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* 1/11 : planning de la semaine (lundi → dimanche) : colonnes séparées par un sillon, aujourd'hui en doré */
.kfp .semaine { gap: 0; }
.kfp .semaine .jour { padding: 6px 8px 8px; }
.kfp .semaine .jour + .jour { border-left: 2px solid var(--kfp-sombre); box-shadow: inset 2px 0 0 var(--kfp-creux-bas); }
.kfp .semaine .jour h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; white-space: normal; }
.kfp .semaine .jour.aujourdhui { background: #33280f; box-shadow: inset 0 0 0 3px #b8901f; }
.kfp .semaine .jour.aujourdhui h3 { color: #ffd25e; border-bottom-color: #b8901f; }
.kfp .pastille-aujourdhui { display: inline-block; padding: 1px 6px; font-size: 11px; line-height: 15px; background: var(--kfp-or); color: #2a1a00; border: 2px solid #000; }
.kfp .creneau-court.creneau-fini { opacity: 0.45; }
.kfp .creneau-court.creneau-prochain { background: #4a3a10; box-shadow: inset 0 0 0 2px var(--kfp-or); color: #ffffff; }
.kfp .creneau-court.creneau-classement.creneau-prochain { box-shadow: inset 4px 0 0 #5b8def, inset 0 0 0 2px var(--kfp-or); }
@media (max-width: 991.98px) {
    .kfp .semaine .jour + .jour { border-left: 0; box-shadow: none; }
    .kfp .semaine .jour.aujourdhui { box-shadow: inset 0 0 0 3px #b8901f; }
}

/* 1/11 : bloc Arbre de compétences de l'onglet Profil : chaque voie avec son métier (niveau, barre d'XP) */
.kfp .arbre-resume { display: flex; flex-direction: column; gap: 18px; }
.kfp .arbre-resume-tete { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.kfp .arbre-resume-branches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kfp .branche-carte { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; background: var(--kfp-case); box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); }
.kfp .branche-carte .branche-lien { flex-direction: row; align-items: center; gap: 12px; }
.kfp .branche-carte .branche-nom { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 1199.98px) { .kfp .arbre-resume-branches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kfp .arbre-resume-branches { grid-template-columns: 1fr; } }

/* 1/11 : icônes des onglets des classements */
.kfp .onglet .icone-onglet { width: 22px; height: 22px; image-rendering: pixelated; vertical-align: -5px; margin-right: 6px; }

/* 1/11 : 25 places à la fois dans les classements */
.kfp .tableau tr.ligne-cachee { display: none; }
.kfp .plus-de-places { align-self: center; margin-top: 4px; }

/* 1/11 : Cash Cups façon tracker : joueur cliquable, panneau vertical à droite (ses stats, ses parties ou ses cups) */
.kfp .lien-volet { padding: 0; border: 0; background: none; font: inherit; color: #c4a6ff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kfp .lien-volet:hover, .kfp .lien-volet:focus-visible { color: #ffd25e; }
.kfp .tableau tr[class^="rang-"] .lien-volet { color: inherit; }
/* 1/11 (Artur : « des bordures bizarres ») : un seul cadre autour de la ligne ouverte dans le panneau, pas une bordure par case */
.kfp .tableau tr.volet-actif { --kfp-cadre-ligne: var(--kfp-or); }
.kfp .tableau tr[class^="rang-"].volet-actif { --kfp-cadre-ligne: #000000; }
.kfp .tableau tr.volet-actif td { box-shadow: inset 0 3px 0 var(--kfp-cadre-ligne), inset 0 -3px 0 var(--kfp-cadre-ligne); }
.kfp .tableau tr.volet-actif td:first-child { box-shadow: inset 3px 0 0 var(--kfp-cadre-ligne), inset 0 3px 0 var(--kfp-cadre-ligne), inset 0 -3px 0 var(--kfp-cadre-ligne); }
.kfp .tableau tr.volet-actif td:last-child { box-shadow: inset -3px 0 0 var(--kfp-cadre-ligne), inset 0 3px 0 var(--kfp-cadre-ligne), inset 0 -3px 0 var(--kfp-cadre-ligne); }
.kfp .volet-joueur {
    position: fixed; top: var(--kf-hauteur-barre, 74px); right: 0; bottom: 0; z-index: 1020; width: min(400px, 100vw); box-sizing: border-box;
    overflow-y: auto; padding: 20px 18px 24px; background: var(--kfp-panneau); border-left: 3px solid #000; box-shadow: inset 3px 0 0 var(--kfp-clair), -10px 0 30px rgba(0, 0, 0, 0.45);
    color: var(--kfp-texte); transform: translateX(105%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.kfp .volet-joueur.ouvert { transform: none; visibility: visible; transition: transform 0.25s ease; }
.kfp .volet-fermer { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; border: 3px solid #000; background: #3a2760; box-shadow: inset 2px 2px 0 #6a4fa0, inset -2px -2px 0 #22163a; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; clip-path: var(--kfp-coins); }
.kfp .volet-fermer:hover { background: #4a3580; }
.kfp .volet-tete { display: flex; align-items: center; gap: 12px; padding-right: 44px; margin-bottom: 16px; }
.kfp .volet-tete img { image-rendering: pixelated; border: 2px solid #000; flex: none; }
.kfp .volet-rang { flex: none; padding: 4px 8px; font-size: 24px; font-weight: 700; background: #3a2760; color: #fff; border: 3px solid #000; clip-path: var(--kfp-coins); }
.kfp .volet-rang:empty { display: none; }
.kfp .volet-rang.rang-or { background: linear-gradient(180deg, #ffe27a, #f5c23a); color: #3d2900; }
.kfp .volet-rang.rang-argent { background: linear-gradient(180deg, #f7f9fc, #c5ceda); color: #20252c; }
.kfp .volet-rang.rang-bronze { background: linear-gradient(180deg, #f6be8c, #d68a4f); color: #3d1f08; }
.kfp .volet-nom { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kfp .volet-nom strong { font-size: 20px; overflow-wrap: anywhere; color: #ffffff; }
.kfp .volet-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.kfp .volet-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px; background: var(--kfp-case); box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); }
.kfp .volet-stat span { font-size: 12px; color: var(--kfp-doux); }
.kfp .volet-stat strong { font-size: 16px; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kfp .volet-stat.grand strong { font-size: 24px; }
.kfp .volet-titre { margin: 0 0 10px; font-size: 16px; color: var(--kfp-or); }
.kfp .volet-matchs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kfp .volet-matchs li { background: var(--kfp-case); box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); }
.kfp .volet-matchs li.gagnee { background: #4a3a10; box-shadow: inset 0 0 0 2px var(--kfp-or); }
.kfp .volet-lien { display: block; color: inherit; text-decoration: none; }
.kfp .volet-lien:hover, .kfp .volet-lien:focus-visible { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
/* 1/11 : fiche d'une partie (clic sur une partie du panneau) */
.kfp button.volet-lien { width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.kfp .volet-retour { display: inline-block; margin: 0 0 12px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.kfp .volet-gagnant { margin: 0 0 12px; font-weight: 700; color: var(--kfp-or); }
.kfp .volet-faits { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; overflow-wrap: anywhere; }
.kfp .volet-faits strong { color: var(--kfp-or); }
.kfp .volet-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.kfp .volet-ligne > div { display: flex; flex-direction: column; min-width: 0; }
.kfp .volet-ligne > div:first-child { flex: 1; }
.kfp .volet-ligne .droite { align-items: flex-end; text-align: right; }
.kfp .volet-ligne small { color: var(--kfp-doux); font-size: 12px; }
.kfp .volet-points { min-width: 44px; text-align: right; font-weight: 700; color: #5ee36a; }
/* panneau ouvert sur grand écran : la page se décale pour ne rien cacher du tableau */
@media (min-width: 1400px) {
    body.kf .kf-page { transition: padding-right 0.25s ease; }
    body.kf:has(.volet-joueur.ouvert) { --kfp-ecran: calc(100vw - 400px); }
    body.kf:has(.volet-joueur.ouvert) .kf-page { padding-right: 400px; }
}

/* 1/11 : HDV : mes objets en vente, mes ventes et achats */
.kfp .hdv-vues, .kfp .hdv-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.kfp .hdv-vues .bouton, .kfp .hdv-filtres .bouton { padding: 10px 16px; }
.kfp .rouge-gui { color: #ff7b7b; }
.kfp .hdv-historique { display: flex; flex-direction: column; gap: 6px; }
.kfp .ligne-hdv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px 16px; align-items: center; padding: 10px 12px; background: var(--kfp-case); box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); }
.kfp .ligne-hdv .libelle { min-width: 0; overflow-wrap: anywhere; }
.kfp .etiquette-hdv { padding: 2px 8px; font-size: 12px; color: #fff; border: 2px solid #000; }
.kfp .ligne-hdv.vente .etiquette-hdv { background: #1f6b2a; }
.kfp .ligne-hdv.achat .etiquette-hdv { background: #8a2a22; }
@media (max-width: 575.98px) { .kfp .ligne-hdv { grid-template-columns: auto minmax(0, 1fr); } }

/* 1/11 : Règlement : sommaire à gauche qui suit la lecture, texte en police du système (plus lisible en long) */
.kfp .regle-page { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 22px; align-items: start; }
.kfp .regle-sommaire { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; }
.kfp .regle-sommaire h1 { margin: 0 0 8px; padding: 0 8px; font-size: 22px; line-height: 28px; font-weight: 700; color: var(--kfp-or); }
.kfp .regle-sommaire a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; color: var(--kfp-doux); text-decoration: none; font-size: 15px; }
.kfp .regle-sommaire a:hover { background: var(--kfp-case-survol); color: #ffffff; }
.kfp .regle-sommaire a.actif { background: var(--kfp-case); box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas), inset 4px 0 0 var(--kfp-or); color: #ffd25e; }
.kfp .regle-contenu { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.kfp .regle-partie[hidden] { display: none; }
.kfp .regle-partie { scroll-margin-top: 130px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: var(--kfp-texte); }
.kfp .regle-partie h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 3px solid var(--kfp-sombre); font-size: 22px; line-height: 28px; }
.kfp .regle-partie h3 { margin: 18px 0 8px; font-size: 16px; line-height: 22px; font-weight: 700; color: #ffffff; }
.kfp .regle-partie p { margin: 0 0 10px; }
.kfp .regle-partie ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kfp .regle-partie li { position: relative; padding-left: 26px; }
.kfp .regle-interdit li::before { content: "\F62A"; font-family: "bootstrap-icons"; position: absolute; left: 2px; top: 0; color: #ff7b7b; }
.kfp .regle-liste li::before { content: ""; position: absolute; left: 6px; top: 0.6em; width: 8px; height: 8px; background: var(--kfp-or); }
.kfp .regle-puces { flex-direction: row !important; flex-wrap: wrap; gap: 8px !important; }
.kfp .regle-puces li { padding: 4px 10px; background: var(--kfp-case); box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); }
.kfp .regle-alerte, .kfp .regle-note { padding: 10px 14px 10px 16px; background: var(--kfp-case); box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); }
.kfp .regle-alerte { border-left: 5px solid #ff5c5c; color: #ffd9d9; }
.kfp .regle-note { border-left: 5px solid var(--kfp-or); color: #ffeec2; }
@media (max-width: 991.98px) {
    .kfp .regle-page { grid-template-columns: minmax(0, 1fr); }
    .kfp .regle-sommaire { position: static; }
}

/* 1/11 : compte Discord sur son propre profil */
.kfp .compte-discord { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; padding: 16px 20px; }
.kfp .compte-discord-logo { flex: none; width: 52px; height: 52px; display: grid; place-items: center; background: #5865f2; box-shadow: inset 3px 3px 0 #8a94ff, inset -3px -3px 0 #3a44b8; border: 3px solid #000; color: #fff; font-size: 24px; clip-path: var(--kfp-coins); }
.kfp .compte-discord-texte { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* 1/11 : page Pilotage (tableau Grafana sur le site, pour les admins) */
.kfp .pilotage-tete { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: flex-start; justify-content: space-between; }
.kfp .choix-periode { display: flex; flex-wrap: wrap; gap: 6px; }
.kfp .choix-periode .bouton { padding: 8px 14px; }
.kfp .pilotage-alerte { color: #ffd25e; }
.kfp .pilotage-bref { display: flex; flex-direction: column; gap: 12px; }
.kfp .pilotage-bref ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 10px 24px; }
.kfp .pilotage-bref li { display: flex; gap: 10px; }
.kfp .pilotage-bref i { color: var(--kfp-or); flex: none; }
.kfp.pilotage .onglet i { margin-right: 4px; }
.kfp.pilotage .onglets { flex-direction: row; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.kfp.pilotage .onglets .onglet { flex: none; padding: 12px 13px; white-space: nowrap; }
.kfp .pilotage-section { display: flex; flex-direction: column; gap: 20px; }
.kfp .pilotage-section[hidden] { display: none; }
.kfp .cases-chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.kfp .case-chiffre { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--kfp-case); box-shadow: inset 3px 3px 0 var(--kfp-creux-haut), inset -3px -3px 0 var(--kfp-creux-bas); }
.kfp .case-titre { color: #ffffff; font-weight: 700; }
.kfp .case-valeur { font-size: 28px; line-height: 32px; font-weight: 700; color: var(--kfp-or); overflow-wrap: anywhere; }
.kfp .case-unite { font-size: 16px; font-weight: 400; color: var(--kfp-doux); }
.kfp .case-aide { font-size: 14px; line-height: 18px; color: var(--kfp-doux); }
.kfp .case-verdict { display: inline-flex; gap: 6px; align-items: center; color: #ffffff; font-size: 14px; line-height: 18px; }
.kfp .case-verdict-bon i { color: #5ee36a; }
.kfp .case-verdict-faible i { color: #fab219; }
.kfp .pilotage-blocs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .kfp .pilotage-blocs { grid-template-columns: minmax(0, 1fr); } }
.kfp .pilotage-bloc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kfp .pilotage-bloc [hidden] { display: none; }
.kfp .bloc-large { grid-column: 1 / -1; }
.kfp .pilotage-bloc h3 { font-size: 16px; line-height: 20px; font-weight: 700; color: #ffffff; }
.kfp .pilotage-bloc p { margin: 2px 0 0; font-size: 14px; line-height: 18px; }
.kfp .pilotage-vide { padding: 28px 16px; text-align: center; color: var(--kfp-doux); background: var(--kfp-creux); box-shadow: inset 3px 3px 0 var(--kfp-creux-haut), inset -3px -3px 0 var(--kfp-creux-bas); margin: 0; }
.kfp .tableau-haut-limite { max-height: 460px; overflow-y: auto; }
.kfp .tableau .chiffre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kfp .tableau-haut-limite th { position: sticky; top: 0; background: var(--kfp-panneau); z-index: 1; }
.kfp .graphique { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.kfp .graphique-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 18px; }
.kfp .graphique-legende li { display: inline-flex; align-items: center; gap: 6px; }
.kfp .marque-carre { width: 12px; height: 12px; flex: none; }
.kfp .marque-trait { width: 16px; height: 2px; flex: none; }
.kfp .graphique-zone { background: var(--kfp-creux); box-shadow: inset 3px 3px 0 var(--kfp-creux-haut), inset -3px -3px 0 var(--kfp-creux-bas); padding: 6px; min-width: 0; }
.kfp .graphique-zone .pilotage-vide { box-shadow: none; }
.kfp .graphique-zone svg { display: block; }
.kfp .graphique-zone svg:focus-visible { outline: 3px solid var(--kfp-or); outline-offset: 2px; }
.kfp .graphique-zone text { font: 14px "KingFight", monospace; fill: var(--kfp-doux); }
.kfp .graphique-zone .texte-direct { fill: var(--kfp-texte); }
.kfp .axe-grille { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.kfp .axe-base { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
.kfp .repere-survol { fill: rgba(255, 255, 255, 0.08); pointer-events: none; }
.kfp .repere-trait { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; pointer-events: none; }
.kfp .graphique-chiffres summary { cursor: pointer; color: var(--kfp-doux); font-size: 14px; }
.kfp .graphique-chiffres summary:hover { color: #ffd25e; }
.kfp .graphique-chiffres[hidden] { display: none; }
.kfp .graphique-chiffres .tableau-defile { max-height: 320px; overflow-y: auto; margin-top: 6px; }
.kfp .barres-liste { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 12px; background: var(--kfp-creux); box-shadow: inset 3px 3px 0 var(--kfp-creux-haut), inset -3px -3px 0 var(--kfp-creux-bas); }
.kfp .barres-liste li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto; gap: 10px; align-items: center; font-size: 14px; line-height: 18px; }
.kfp .barre-nom { overflow-wrap: anywhere; }
.kfp .barre-rail { display: block; }
.kfp .barre { display: block; height: 14px; min-width: 2px; border-radius: 0 4px 4px 0; }
.kfp .barre-1 { background: #3987e5; }
.kfp .barre-2 { background: #d95926; }
.kfp .barre-valeur { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .kfp .barres-liste li { grid-template-columns: minmax(0, 1fr) auto; } .kfp .barre-rail { grid-column: 1 / -1; grid-row: 2; } }
.pilotage-infobulle { position: fixed; z-index: 1080; pointer-events: none; min-width: 150px; max-width: 320px; padding: 8px 10px; background: #100010; border: 2px solid #4b3672; color: #e6dcf2; font: 14px/18px "KingFight", monospace; }
.pilotage-infobulle[hidden] { display: none; }
.pilotage-infobulle .infobulle-titre { color: #b9b0cc; margin-bottom: 4px; }
.pilotage-infobulle .infobulle-rangee { display: flex; align-items: center; gap: 8px; }
.pilotage-infobulle .infobulle-cle { width: 12px; height: 2px; flex: none; }
.pilotage-infobulle strong { color: #ffffff; font-weight: 700; white-space: nowrap; }
@media (max-width: 480px) {
    .kfp .cases-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .kfp .case-chiffre { padding: 10px; }
    .kfp .case-valeur { font-size: 22px; line-height: 26px; }
    .kfp .case-aide { font-size: 13px; line-height: 16px; }
}
.kfp .case-aide { overflow-wrap: anywhere; }
@media (max-width: 480px) { .kfp .case-valeur { font-size: 20px; line-height: 24px; overflow-wrap: normal; } }

/* 1/11 : onglet Sanctions : état, compteurs qui filtrent, une fiche par sanction (couleur + icône + nom pour chaque type) */
.kfp .sanctions { display: flex; flex-direction: column; gap: 16px; --s-ban: #ff5c5c; --s-mute: #f29a3f; --s-warning: #f2c14e; --s-kick: #7fb0ff; }
.kfp .sanction-etat { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--kfp-creux); box-shadow: inset 3px 3px 0 var(--kfp-creux-haut), inset -3px -3px 0 var(--kfp-creux-bas); }
.kfp .sanction-etat > i { flex: none; font-size: 26px; line-height: 1; }
.kfp .sanction-etat-propre > i { color: #5ee36a; }
.kfp .sanction-etat-propre strong { color: #ffffff; }
.kfp .sanction-etat-actif { border-left: 5px solid var(--s-ban); }
.kfp .sanction-etat-actif > i { color: var(--s-ban); }
.kfp .sanction-etat-actif strong { color: #ffffff; font-size: 18px; line-height: 24px; }
.kfp .sanction-etat-fin { color: var(--kfp-doux); font-size: 14px; line-height: 18px; margin-top: 2px; }
.kfp .sanctions-compteurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kfp .sanction-compteur { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; background: var(--kfp-case); border: 0; box-shadow: inset 3px 3px 0 var(--kfp-creux-haut), inset -3px -3px 0 var(--kfp-creux-bas); color: var(--kfp-texte); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.12s ease; }
.kfp .sanction-compteur i { grid-row: 1 / 3; font-size: 22px; line-height: 1; }
.kfp .sanction-compteur:hover:not(:disabled) { background: var(--kfp-case-survol); }
.kfp .sanction-compteur:focus-visible { outline: 3px solid var(--kfp-or); outline-offset: 2px; }
.kfp .sanction-compteur:disabled { opacity: 0.45; cursor: default; }
.kfp .sanction-compteur[aria-pressed="true"] { background: var(--kfp-case-survol); box-shadow: inset 0 0 0 3px var(--kfp-or); }
.kfp .sanction-compteur-nombre { font-size: 24px; line-height: 28px; font-weight: 700; color: #ffffff; }
.kfp .sanction-compteur-nom { font-size: 14px; line-height: 18px; color: var(--kfp-doux); overflow-wrap: anywhere; }
.kfp .sanction-ban i { color: var(--s-ban); }
.kfp .sanction-mute i { color: var(--s-mute); }
.kfp .sanction-warning i { color: var(--s-warning); }
.kfp .sanction-kick i { color: var(--s-kick); }
.kfp .sanctions-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kfp .sanction { display: flex; gap: 14px; padding: 14px 16px 14px 14px; background: var(--kfp-case); box-shadow: inset 3px 3px 0 var(--kfp-creux-haut), inset -3px -3px 0 var(--kfp-creux-bas); border-left: 5px solid transparent; }
.kfp .sanction[hidden] { display: none; }
.kfp .sanction.sanction-ban { border-left-color: var(--s-ban); }
.kfp .sanction.sanction-mute { border-left-color: var(--s-mute); }
.kfp .sanction.sanction-warning { border-left-color: var(--s-warning); }
.kfp .sanction.sanction-kick { border-left-color: var(--s-kick); }
.kfp .sanction-icone { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--kfp-creux); box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); font-size: 20px; line-height: 1; }
.kfp .sanction-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kfp .sanction-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kfp .sanction-tete strong { color: #ffffff; }
.kfp .sanction-duree { color: var(--kfp-doux); font-size: 14px; line-height: 18px; }
.kfp .sanction-badge { padding: 1px 8px; font-size: 13px; line-height: 18px; background: var(--kfp-creux); color: var(--kfp-doux); }
.kfp .sanction-badge-actif { background: #b32d2d; color: #ffffff; }
.kfp .sanction-motif { margin: 0; color: var(--kfp-texte); overflow-wrap: anywhere; }
.kfp .sanction-details { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; line-height: 18px; color: var(--kfp-doux); }
.kfp .sanction-details i { margin-right: 2px; }
.kfp .sanction-levee { font-size: 14px; line-height: 18px; color: #9fe6a8; overflow-wrap: anywhere; }
@media (max-width: 620px) { .kfp .sanctions-compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kfp .sanction-icone { display: none; } }

/* 1/11 : onglet Items : filtres, cartes avec le texte de l'objet comme en jeu, fiche à droite */
.kfp .objets-tete { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
.kfp .objets-filtres { display: flex; flex-direction: column; gap: 14px; }
.kfp .objets-recherche { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0 14px; background: var(--kfp-creux); border: 3px solid; border-color: var(--kfp-creux-haut) var(--kfp-creux-bas) var(--kfp-creux-bas) var(--kfp-creux-haut); color: var(--kfp-doux); }
.kfp .objets-recherche input { flex: 1 1 auto; min-width: 0; height: 46px; border: 0; background: transparent; color: #ffffff; font-family: "KingFight", monospace; font-size: 16px; outline: none; }
.kfp .objets-recherche:focus-within { border-color: var(--kfp-or); }
.kfp .objets-raretes { display: flex; flex-wrap: wrap; gap: 8px; }
.kfp .objet-rarete { padding: 6px 12px; border: 0; background: var(--kfp-case); box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); font: inherit; font-size: 14px; line-height: 18px; cursor: pointer; color: var(--kfp-rarete); }
.kfp .objet-rarete:hover { background: var(--kfp-case-survol); }
.kfp .objet-rarete[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--kfp-rarete); }
.kfp .objets-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.kfp .objet-filtre { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 0; background: var(--kfp-case); box-shadow: inset 2px 2px 0 var(--kfp-creux-haut), inset -2px -2px 0 var(--kfp-creux-bas); color: var(--kfp-texte); font: inherit; font-size: 14px; line-height: 18px; cursor: pointer; }
.kfp .objet-filtre:hover:not(:disabled) { background: var(--kfp-case-survol); }
.kfp .objet-filtre:disabled { opacity: 0.4; cursor: default; }
.kfp .objet-filtre[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--kfp-or); color: #ffd25e; }
.kfp .objet-filtre-nombre { color: var(--kfp-doux); }
.kfp .objets-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: start; }
.kfp .objets-temoin { height: 1px; }
.kfp .objet-icone { display: block; image-rendering: pixelated; }
.kfp .objet-commune { --kfp-rarete: #55ffff; }
.kfp .objet-rare { --kfp-rarete: #ffff55; }
.kfp .objet-epique { --kfp-rarete: #7f7fff; }
.kfp .objet-legendaire { --kfp-rarete: #ff5555; }
.kfp .objet-mythique { --kfp-rarete: #d67bff; }
.kfp .objet-carte { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px; border: 0; background: var(--kfp-panneau); box-shadow: inset 3px 3px 0 var(--kfp-clair), inset -3px -3px 0 var(--kfp-sombre), 0 0 0 3px #000; color: var(--kfp-texte); font: inherit; text-align: left; cursor: pointer; transition: transform 0.08s ease; }
.kfp .objet-carte:hover { transform: translateY(-2px); box-shadow: inset 3px 3px 0 var(--kfp-rarete, var(--kfp-clair)), inset -3px -3px 0 var(--kfp-sombre), 0 0 0 3px #000; }
.kfp .objet-carte:focus-visible { outline: 3px solid var(--kfp-or); outline-offset: 3px; }
.kfp .objet-carte-tete { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kfp .objet-carte .slot { width: 56px; height: 56px; }
.kfp .objet-carte-nom { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
/* comme la bulle en jeu */
.kfp .objet-bulle { padding: 8px 10px; background: #100010; box-shadow: inset 0 0 0 2px #2c0a63; color: #aaaaaa; font-size: 14px; line-height: 18px; overflow-wrap: anywhere; }
.kfp .objet-carte .objet-bulle-nom { display: none; }
.kfp .objet-bulle:not(:has(> :not(.objet-bulle-nom))) { display: none; }
.kfp .objet-bulle-nom { font-weight: 700; margin-bottom: 4px; }
.kfp .objet-bulle-vide { height: 8px; }
.kfp .objet-bulle-dura { margin-top: 6px; }
.kfp .mc-noir { color: #555555; } .kfp .mc-bleu-fonce { color: #5555dd; } .kfp .mc-vert-fonce { color: #00aa00; } .kfp .mc-cyan-fonce { color: #00aaaa; }
.kfp .mc-rouge-fonce { color: #dd2222; } .kfp .mc-violet-fonce { color: #c04dc0; } .kfp .mc-or { color: #ffaa00; } .kfp .mc-gris { color: #aaaaaa; }
.kfp .mc-gris-fonce { color: #777777; } .kfp .mc-bleu { color: #7f7fff; } .kfp .mc-vert { color: #55ff55; } .kfp .mc-cyan { color: #55ffff; }
.kfp .mc-rouge { color: #ff5555; } .kfp .mc-rose { color: #ff55ff; } .kfp .mc-jaune { color: #ffff55; } .kfp .mc-blanc { color: #ffffff; }
.kfp .mc-gras { font-weight: 700; } .kfp .mc-italique { font-style: italic; } .kfp .mc-souligne { text-decoration: underline; } .kfp .mc-barre { text-decoration: line-through; }
/* fiche */
.kfp .volet-objet .volet-tete .slot { width: 64px; height: 64px; }
.kfp .objet-fiche-nom { font-size: 18px; }
.kfp .volet-objet .objet-bulle { margin-bottom: 4px; }
.kfp .volet-objet .objet-bulle-nom { display: none; }
.kfp .objet-texte { margin: 0 0 10px; font-size: 15px; line-height: 20px; color: var(--kfp-texte); }
.kfp .objet-liste { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 20px; }
.kfp .objet-liste li { position: relative; padding-left: 16px; }
.kfp .objet-liste li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; background: var(--kfp-or); }
.kfp .objet-case { width: 44px; height: 44px; padding: 0; border: 0; position: relative; }
button.objet-case { cursor: pointer; }
.kfp button.objet-case:hover { outline: 3px solid var(--kfp-or); outline-offset: 0; }
.kfp .objet-craft { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kfp .objet-craft-grille { display: grid; grid-template-columns: repeat(3, 44px); gap: 2px; }
.kfp .objet-craft-fleche { font-size: 22px; color: var(--kfp-doux); }
.kfp .objet-craft-resultat { width: 56px; height: 56px; }
.kfp .objet-quantite { position: absolute; right: 4px; bottom: 2px; font-size: 14px; font-weight: 700; color: #ffffff; text-shadow: 2px 2px 0 #000; }
.kfp .objet-condense { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kfp .objet-condense .objet-texte { margin: 0; }
.kfp .objet-sert { display: flex; flex-wrap: wrap; gap: 4px; }
.kfp .objet-lien { padding: 0; border: 0; background: none; font: inherit; line-height: inherit; color: var(--kfp-or-clair); text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kfp .objet-lien:hover, .kfp .objet-lien:focus-visible { color: #ffffff; }
.kfp .objet-lien-fiche { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; line-height: 20px; color: var(--kfp-texte); text-align: left; cursor: pointer; }
.kfp .objet-lien-fiche:hover .objet-case, .kfp .objet-lien-fiche:focus-visible .objet-case { outline: 3px solid var(--kfp-or); outline-offset: 0; }
.kfp .objet-lien-fiche:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================== 1/11 : STYLE D, « parchemin et bois » (choix final d'Artur, à la place du relief pixel)
   Mêmes matières que le thème : parchemin pour les cadres, bois pour les titres, onglets et boutons, or pour les choix actifs.
   Dans un cadre, les jetons valent de l'encre et tout ce qui s'écrivait en clair passe en foncé ; les bulles du jeu et les
   graphiques du Pilotage (couleurs vérifiées sur leur fond) restent sombres. */
.kfp {
    --kfp-bois: repeating-linear-gradient(180deg, #9c6b3a 0 9px, #8a5c2f 9px 10px, #a0703e 10px 19px, #8a5c2f 19px 20px);
    --kfp-bois-survol: repeating-linear-gradient(180deg, #ad7c49 0 9px, #9a6b3b 9px 10px, #b1804c 10px 19px, #9a6b3b 19px 20px);
    --kfp-parchemin: radial-gradient(120% 90% at 30% 20%, #f3e6c6 0%, #e6d3a8 60%, #d6bf8f 100%);
    --kfp-dore: linear-gradient(180deg, #ffd25e, #e0a521);
    --kfp-brun: #4a2e14; --kfp-noir-bois: #2b1a0d; --kfp-filet: #b9975f; --kfp-creme: #f8eed6; --kfp-creme-bois: #fff6e0;
    --kfp-marge: 24px; --kfp-lien: #f2c14e; --kfp-lien-survol: #ffffff;
}
@media (max-width: 480px) { .kfp { --kfp-marge: 16px; } }
.kfp :is(.gui, .volet-joueur, .objet-carte) {
    --kfp-texte: #3b2410; --kfp-doux: #654526; --kfp-fort: #2b1a0d; --kfp-or: #7a4e0c; --kfp-or-clair: #7a4e0c; --kfp-lien: #55288f; --kfp-lien-survol: #2b1a0d;
    --kfp-panneau: #e6d3a8; --kfp-clair: #f8eed6; --kfp-sombre: #b9975f;
    --kfp-case: rgba(255, 255, 255, 0.35); --kfp-case-survol: rgba(255, 255, 255, 0.62);
    --kfp-creux: #f8eed6; --kfp-creux-haut: #b9975f; --kfp-creux-bas: #b9975f;
}
.kfp .gui { background: var(--kfp-parchemin); border: 3px solid var(--kfp-brun); border-radius: 6px; box-shadow: inset 0 0 0 2px #f8eed6, inset 0 0 0 4px #b9975f, 0 6px 0 #2a1a0b; color: var(--kfp-texte); clip-path: none; padding: var(--kfp-marge); }
.kfp a { color: var(--kfp-lien); }
.kfp a:hover { color: var(--kfp-lien-survol); }
.kfp :is(.gui, .volet-joueur) :is(.vert, .gain-kingz, .volet-points, .sanction-levee, .sanction-etat-propre > i, .case-verdict-bon i) { color: #1c6b22; }
.kfp :is(.gui, .volet-joueur) :is(.rouge, .rouge-gui) { color: #a3281f; }
.kfp :is(.gui, .volet-joueur) .violet { color: #55288f; }
.kfp :is(.gui, .volet-joueur) :is(.or, .or-lisible, .place-1, .case-verdict-faible i) { color: #7a4e0c; }
.kfp :is(.gui, .volet-joueur) :is(.bronze, .bronze-lisible, .place-3) { color: #8a4a1c; }
.kfp .tableau tr[class^="rang-"] .gain-kingz { color: #14591f; }
.kfp .tableau tr[class^="rang-"] :is(.or-lisible, .bronze-lisible, .violet, .doux, .place-1, .place-3) { color: inherit; }

/* ce qui s'écrivait en blanc sur les panneaux violets */
.kfp :is(.gui, .volet-joueur) :is(.annonce-prix, .jour h3, .creneau .heure, .grand-place, .case-titre, .case-verdict, .pilotage-bloc h3, .regle-partie h3, .volet-nom strong, .volet-stat strong, .sanction-tete strong, .sanction-compteur-nombre, .sanction-etat-propre strong, .sanction-etat-actif strong, .points-dispo, .grand) { color: var(--kfp-fort); }
.kfp :is(.gui, .volet-joueur) :is(.membre:hover, a.ligne-gui:hover, .branche-lien:hover span:not(.slot), .choix-metier:hover, .volet-lien:hover, .regle-sommaire a:hover) { color: var(--kfp-fort); }
.kfp :is(.gui, .volet-joueur) :is(.lien-gui:hover, .tableau th[data-tri] .tri:hover, .tableau th[data-tri] .tri:focus-visible, .lien-faction:hover, .lien-faction:focus-visible, .lien-volet:hover, .lien-volet:focus-visible, .choix-metier.actif span:last-child, .graphique-chiffres summary:hover, .pilotage-alerte) { color: #7a4e0c; }
.kfp :is(.gui, .volet-joueur) :is(.lien-faction, .lien-volet) { color: #55288f; }
.kfp .pilotage-alerte { color: #ffd25e; }
.kfp .gui .pilotage-alerte { color: #7a4e0c; }

/* titres sur une planche, comme dans la maquette (« Panier ») : titre seul, ou ligne de titre avec ses boutons */
.kfp .gui h2 { color: #7a4e0c; }
.kfp .gui > :is(h1, h2):first-child, .kfp .gui > :first-child:has(> h2:first-child) {
    margin: calc(var(--kfp-marge) * -1) calc(var(--kfp-marge) * -1) 2px; padding: 10px var(--kfp-marge) 8px; background: var(--kfp-bois); border-bottom: 3px solid var(--kfp-noir-bois); border-radius: 3px 3px 0 0;
}
.kfp .gui > :is(h1, h2):first-child, .kfp .gui > :first-child:has(> h2:first-child) h2 { color: var(--kfp-creme-bois) !important; font-size: 17px; line-height: 22px; font-weight: 700; text-shadow: 2px 2px 0 var(--kfp-noir-bois); }
.kfp .gui > :first-child:has(> h2:first-child) { --kfp-doux: #f3e6c6; --kfp-lien: #ffe08a; --kfp-lien-survol: #ffffff; color: #f3e6c6; text-shadow: 1px 1px 0 var(--kfp-noir-bois); }
.kfp .regle-partie > h2:first-child { display: flex; margin-bottom: 14px; }
.kfp .regle-sommaire > h1:first-child { margin: -18px -14px 8px; padding: 12px 16px 10px; font-size: 20px; line-height: 26px; }
.kfp .arbre-vue > :first-child { margin: 0; padding: 0; background: none; border: 0; }

/* cases d'inventaire : le brun du coffre, les objets s'y détachent */
.kfp .slot { background: #7a5233; border-radius: 3px; box-shadow: inset 3px 3px 0 var(--kfp-brun), inset -3px -3px 0 #a0703e; }
.kfp .skin { background: var(--kfp-noir-bois); border: 3px solid var(--kfp-brun); border-radius: 4px; box-shadow: none; }
.kfp .separateur { height: 0; margin: 2px 0; background: none; border-top: 2px dashed var(--kfp-filet); box-shadow: none; }
.kfp :is(.ligne-gui, .creneau-court, .arbre-points, .branche-carte, .volet-stat, .volet-matchs li, .ligne-hdv, .regle-puces li, .regle-alerte, .regle-note, .case-chiffre, .sanction-compteur, .sanction, .sanction-etat, .objet-filtre, .objet-rarete) { border-radius: 4px; }
.kfp .gui .barre:not(.barre-1):not(.barre-2) { background: var(--kfp-brun); border: 3px solid var(--kfp-noir-bois); border-radius: 3px; box-shadow: none; margin: 0; overflow: hidden; }
.kfp .gui .barre:not(.barre-1):not(.barre-2) .plein { height: 100%; }
.kfp .alerte { background: #f3e6c6; border: 3px solid #a3281f; border-radius: 5px; color: #5a1410; clip-path: none; }
.kfp .pastille-grise { background: #8f7d62; border-color: #5c4a36; }

/* boutons et onglets en bois */
.kfp .bouton, .kfp .branche-ligne, .kfp .recherche-profil button, .kfp .volet-fermer, .kfp .volet-rang {
    background: var(--kfp-bois); border: 3px solid var(--kfp-noir-bois); border-radius: 5px; box-shadow: inset 0 2px 0 #c08a4f, 0 4px 0 var(--kfp-noir-bois); color: var(--kfp-creme-bois); text-shadow: 2px 2px 0 var(--kfp-noir-bois); clip-path: none;
}
.kfp .bouton:hover, .kfp .branche-ligne:hover, .kfp .branche-ligne:focus-visible, .kfp .recherche-profil button:hover, .kfp .volet-fermer:hover { background: var(--kfp-bois-survol); color: #ffffff; }
.kfp .bouton:active { transform: translateY(4px); box-shadow: inset 0 2px 0 #c08a4f; }
.kfp .bouton.actif { background: var(--kfp-dore); box-shadow: inset 0 3px 0 #fff0b3, 0 4px 0 var(--kfp-noir-bois); color: #3a2600; text-shadow: none; }
.kfp .bouton:focus-visible { outline: 3px solid #b8860b; }
.kfp .branche-ligne { box-shadow: inset 0 2px 0 #c08a4f, 0 3px 0 var(--kfp-noir-bois); }
.kfp .volet-fermer { box-shadow: inset 0 2px 0 #c08a4f, 0 3px 0 var(--kfp-noir-bois); text-shadow: none; }
.kfp .volet-rang { box-shadow: inset 0 2px 0 #c08a4f; }
.kfp .volet-rang.rang-or { background: linear-gradient(180deg, #ffe27a, #f5c23a); color: #3d2900; text-shadow: none; }
.kfp .volet-rang.rang-argent { background: linear-gradient(180deg, #f7f9fc, #c5ceda); color: #20252c; text-shadow: none; }
.kfp .volet-rang.rang-bronze { background: linear-gradient(180deg, #f6be8c, #d68a4f); color: #3d1f08; text-shadow: none; }
.kfp .onglet { background: var(--kfp-bois); border: 3px solid var(--kfp-noir-bois); border-bottom: 0; border-radius: 6px 6px 0 0; box-shadow: inset 0 2px 0 #c08a4f; color: #f3e6c6; text-shadow: 2px 2px 0 var(--kfp-noir-bois); clip-path: none; }
.kfp .onglet:hover { background: var(--kfp-bois-survol); color: #ffffff; }
.kfp .onglet.actif { background: var(--kfp-parchemin); box-shadow: inset 0 2px 0 #f8eed6; color: #3b2410; font-weight: 700; text-shadow: none; }

/* champs : crème, cadre brun, aussi hors des cadres (recherche d'un joueur sur le fond sombre) */
.kfp :is(.recherche input, .recherche select, .choix-cup select, .recherche-classement input, .recherche-profil input, .objets-recherche) { background: #f8eed6; border: 3px solid var(--kfp-brun); border-radius: 5px; color: #2b1a0d; }
.kfp .recherche-profil input { border-right: 0; border-radius: 5px 0 0 5px; }
.kfp .recherche-profil button { border-radius: 0 5px 5px 0; box-shadow: inset 0 2px 0 #c08a4f; }
.kfp :is(.recherche input, .recherche-profil input, .recherche-classement input)::placeholder { color: #80603c; }
.kfp :is(.recherche input, .recherche select, .choix-cup select, .recherche-classement input, .recherche-profil input):focus, .kfp .objets-recherche:focus-within { border-color: #b8860b; }
.kfp .recherche input[type="date"] { color-scheme: light; }
.kfp .objets-recherche { color: #654526; }
.kfp .objets-recherche input { color: #2b1a0d; }
.kfp .objets-recherche input::placeholder { color: #80603c; }

/* events, planning */
.kfp .semaine .jour + .jour { border-left: 2px dashed var(--kfp-filet); box-shadow: none; }
.kfp .semaine .jour h3 { border-bottom: 2px dashed var(--kfp-filet); }
.kfp .semaine .jour.aujourdhui { background: rgba(224, 165, 33, 0.2); border-radius: 4px; box-shadow: inset 0 0 0 3px #b8860b; }
.kfp .semaine .jour.aujourdhui + .jour { border-left-color: transparent; }
.kfp .semaine .jour.aujourdhui h3 { border-bottom-color: #b8860b; color: #7a4e0c; }
.kfp .pastille-aujourdhui { background: var(--kfp-dore); border: 2px solid var(--kfp-noir-bois); border-radius: 3px; color: #3a2600; }
.kfp .creneau-court.creneau-en-cours, .kfp .cup-direct { background: #cdeac0; box-shadow: inset 0 0 0 2px #1f6b2a; color: #123d18; }
.kfp .cup-direct:hover { background: #bfe3b0; color: #123d18; }
.kfp .creneau-court.creneau-prochain { background: #ffe9ae; box-shadow: inset 0 0 0 2px #b8860b; color: #3b2410; }
.kfp .creneau-court.creneau-classement { box-shadow: inset 4px 0 0 #2f5fc0, inset 2px 2px 0 var(--kfp-filet), inset -2px -2px 0 var(--kfp-filet); }
.kfp .creneau-classement { box-shadow: inset 6px 0 0 #2f5fc0, inset 2px 2px 0 var(--kfp-filet), inset -2px -2px 0 var(--kfp-filet); }
.kfp .creneau-court.creneau-classement.creneau-prochain { box-shadow: inset 4px 0 0 #2f5fc0, inset 0 0 0 2px #b8860b; }
.kfp .creneau-court.creneau-fini { opacity: 0.55; }
.kfp .echantillon-classement { background: #2f5fc0; }
.kfp .semaine .jour.aujourdhui .creneau-court:not(.creneau-en-cours):not(.creneau-prochain) { background: rgba(255, 255, 255, 0.55); }
@media (max-width: 991.98px) { .kfp .semaine .jour + .jour { border-left: 0; } }

/* arbre : sur le parchemin, comme une carte */
.kfp .bande { border-right: 2px dashed var(--kfp-filet); }
.kfp .bande-nom, .kfp .depart-texte { color: #2b1a0d; }
.kfp .depart { background: #4a2e14; border-color: #b8860b; box-shadow: inset 0 0 0 4px #2b1a0d; }
.kfp .trait-verrou { background: #8f7d62; }
.kfp .tuile.choisie { outline-color: #2b1a0d; box-shadow: 0 0 0 8px #e0a521; }
.kfp .tuile:focus-visible { outline-color: #2f5fc0; }
.kfp .tuile.tuile-repere { outline-color: #b8860b; }
.kfp .message-arbre { color: #2f5fc0; }
.kfp .cadre-plateau { border-radius: 4px; }

/* panneau d'un joueur ou d'un objet */
.kfp .volet-joueur { background: var(--kfp-parchemin); border-left: 3px solid var(--kfp-noir-bois); box-shadow: inset 2px 0 0 #f8eed6, inset 4px 0 0 #b9975f, -10px 0 30px rgba(0, 0, 0, 0.45); color: var(--kfp-texte); }
.kfp .volet-tete img { border-color: var(--kfp-brun); }
/* la pancarte de l'IP passe devant le haut du panneau tant qu'il atteint le milieu de l'écran */
@media (max-width: 979.98px) { .kfp .volet-joueur { padding-top: 72px; } .kfp .volet-fermer { top: 60px; } }
.kfp .volet-titre { padding-bottom: 6px; border-bottom: 2px dashed var(--kfp-filet); color: var(--kfp-fort); }
.kfp .volet-matchs li.gagnee { background: #ffe9ae; box-shadow: inset 0 0 0 2px #b8860b; }
.kfp .volet-lien:hover, .kfp .volet-lien:focus-visible { background: rgba(255, 255, 255, 0.4); }
.kfp .fiche-faction .grand { color: var(--kfp-fort); }

/* HDV */
.kfp .annonce:hover, .kfp .annonce:focus-visible { outline-color: #b8860b; }
.kfp .etiquette-hdv { border-color: var(--kfp-noir-bois); }

/* règlement */
.kfp .regle-sommaire a { border-radius: 4px; color: var(--kfp-texte); }
.kfp .regle-sommaire a.actif { background: rgba(255, 255, 255, 0.5); box-shadow: inset 4px 0 0 #7a4e0c, inset 0 0 0 2px var(--kfp-filet); color: #2b1a0d; font-weight: 700; }
.kfp .regle-partie h2 { border-bottom: 3px solid var(--kfp-noir-bois); }
.kfp .regle-interdit li::before { color: #a3281f; }
.kfp .regle-liste li::before { background: #7a4e0c; }
.kfp .regle-alerte { border-left-color: #a3281f; color: #7a1c14; }
.kfp .regle-note { border-left-color: #a3700a; color: #3b2410; }

/* compte Discord, Pilotage */
.kfp .compte-discord-logo { border: 3px solid var(--kfp-noir-bois); border-radius: 5px; box-shadow: inset 0 2px 0 #8a94ff; clip-path: none; }
.kfp .pilotage-bref i { color: #7a4e0c; }
.kfp :is(.graphique-zone, .barres-liste) { --kfp-doux: #b9b0cc; --kfp-texte: #e6dcf2; --kfp-creux: #120a1e; --kfp-or: #f2c14e; background: #120a1e; border: 3px solid var(--kfp-brun); border-radius: 4px; box-shadow: none; color: #e6dcf2; }
.kfp .tableau-haut-limite th { background: #e6d3a8; }
.kfp .pilotage-vide { box-shadow: inset 0 0 0 2px var(--kfp-filet); border-radius: 4px; }
.kfp .graphique-zone .pilotage-vide { box-shadow: none; }

/* sanctions : mêmes repères, couleurs foncies pour le parchemin */
.kfp .sanctions { --s-ban: #a3281f; --s-mute: #b35f0a; --s-warning: #8a6a00; --s-kick: #2f5fc0; }
.kfp .sanction-compteur[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #b8860b; }
.kfp .sanction-badge { background: var(--kfp-brun); border-radius: 3px; color: #f3e6c6; }
.kfp .sanction-badge-actif { background: #a3281f; color: #fff3e0; }

/* Items : cartes en parchemin, noms en couleurs foncées ; le texte de l'objet reste dans sa bulle du jeu, en couleurs vives */
.kfp .objet-commune { --kfp-rarete: #00757f; }
.kfp .objet-rare { --kfp-rarete: #806200; }
.kfp .objet-epique { --kfp-rarete: #3535c0; }
.kfp .objet-legendaire { --kfp-rarete: #b81c1c; }
.kfp .objet-mythique { --kfp-rarete: #8e2bbf; }
.kfp .objet-carte { background: var(--kfp-parchemin); border: 3px solid var(--kfp-brun); border-radius: 6px; box-shadow: inset 0 0 0 2px #f8eed6, 0 4px 0 #2a1a0b; }
.kfp .objet-carte:hover { box-shadow: inset 0 0 0 2px #f8eed6, inset 0 0 0 4px var(--kfp-rarete, #b8860b), 0 6px 0 #2a1a0b; }
.kfp .objet-carte:focus-visible { outline-color: #b8860b; }
.kfp .objet-rarete { background: var(--kfp-case); box-shadow: inset 0 0 0 2px var(--kfp-filet); }
.kfp .objet-rarete[aria-pressed="true"] { background: #fffaf0; box-shadow: inset 0 0 0 3px var(--kfp-rarete); }
.kfp .objet-filtre { background: var(--kfp-case); box-shadow: inset 0 0 0 2px var(--kfp-filet); }
.kfp .objet-filtre[aria-pressed="true"] { background: var(--kfp-dore); box-shadow: inset 0 0 0 2px var(--kfp-noir-bois); color: #3a2600; }
.kfp .objet-filtre[aria-pressed="true"] .objet-filtre-nombre { color: #5a3c00; }
.kfp .objet-bulle { border-radius: 3px; }
.kfp .mc-noir { color: #2b1a0d; } .kfp .mc-bleu-fonce { color: #2a2a9c; } .kfp .mc-vert-fonce { color: #0a6b0a; } .kfp .mc-cyan-fonce { color: #006b6b; }
.kfp .mc-rouge-fonce { color: #9c1616; } .kfp .mc-violet-fonce { color: #7d1f7d; } .kfp .mc-or { color: #9a5700; } .kfp .mc-gris { color: #5c4a36; }
.kfp .mc-gris-fonce { color: #6b5a45; } .kfp .mc-bleu { color: #3535c0; } .kfp .mc-vert { color: #157a15; } .kfp .mc-cyan { color: #00757f; }
.kfp .mc-rouge { color: #b81c1c; } .kfp .mc-rose { color: #a8189a; } .kfp .mc-jaune { color: #806200; } .kfp .mc-blanc { color: #2b1a0d; }
.kfp .objet-bulle .mc-noir { color: #555555; } .kfp .objet-bulle .mc-bleu-fonce { color: #5555dd; } .kfp .objet-bulle .mc-vert-fonce { color: #00aa00; } .kfp .objet-bulle .mc-cyan-fonce { color: #00aaaa; }
.kfp .objet-bulle .mc-rouge-fonce { color: #dd2222; } .kfp .objet-bulle .mc-violet-fonce { color: #c04dc0; } .kfp .objet-bulle .mc-or { color: #ffaa00; } .kfp .objet-bulle .mc-gris { color: #aaaaaa; }
.kfp .objet-bulle .mc-gris-fonce { color: #777777; } .kfp .objet-bulle .mc-bleu { color: #7f7fff; } .kfp .objet-bulle .mc-vert { color: #55ff55; } .kfp .objet-bulle .mc-cyan { color: #55ffff; }
.kfp .objet-bulle .mc-rouge { color: #ff5555; } .kfp .objet-bulle .mc-rose { color: #ff55ff; } .kfp .objet-bulle .mc-jaune { color: #ffff55; } .kfp .objet-bulle .mc-blanc { color: #ffffff; }
.kfp .objet-lien { color: #55288f; }
.kfp .objet-lien:hover, .kfp .objet-lien:focus-visible { color: #2b1a0d; }
.kfp button.objet-case:hover, .kfp .objet-lien-fiche:hover .objet-case, .kfp .objet-lien-fiche:focus-visible .objet-case { outline-color: #b8860b; }
.kfp .choix-metier:hover .slot, .kfp .choix-metier:focus-visible .slot { outline-color: #a0703e; }
.kfp .choix-metier.actif .slot, .kfp .branche-lien:hover .slot, .kfp .branche-lien:focus-visible .slot { outline-color: #b8860b; }

/* 1/11 (Artur : noir au survol, « pas beau avec le thème ») : Nova peint la ligne survolée avec le fond de la page, en !important. Ici le parchemin s'éclaircit et la ligne prend un filet doré. */
.kfp .tableau tbody > tr:not([class^="rang-"]):hover td { background: var(--kfp-case-survol) !important; }
.kfp .tableau tbody > tr:not([class^="rang-"]):not(.volet-actif):hover td { box-shadow: inset 0 2px 0 #b8860b, inset 0 -2px 0 #b8860b; }
.kfp .tableau tbody > tr:not([class^="rang-"]):not(.volet-actif):hover td:first-child { box-shadow: inset 2px 0 0 #b8860b, inset 0 2px 0 #b8860b, inset 0 -2px 0 #b8860b; }
.kfp .tableau tbody > tr:not([class^="rang-"]):not(.volet-actif):hover td:last-child { box-shadow: inset -2px 0 0 #b8860b, inset 0 2px 0 #b8860b, inset 0 -2px 0 #b8860b; }
.kfp .tableau tbody > tr[class^="rang-"]:hover td { filter: brightness(1.07); }
.kfp :is(.graphique-zone, .barres-liste) { --kfp-case-survol: #2f2148; }

/* 1/11 (Artur : « respecter les couleurs des lores ») : dans la bulle d'une annonce de l'HDV, les couleurs du jeu restent vives */
.kfp .infobulle .mc-noir { color: #555555; } .kfp .infobulle .mc-bleu-fonce { color: #5555dd; } .kfp .infobulle .mc-vert-fonce { color: #00aa00; } .kfp .infobulle .mc-cyan-fonce { color: #00aaaa; }
.kfp .infobulle .mc-rouge-fonce { color: #dd2222; } .kfp .infobulle .mc-violet-fonce { color: #c04dc0; } .kfp .infobulle .mc-or { color: #ffaa00; } .kfp .infobulle .mc-gris { color: #aaaaaa; }
.kfp .infobulle .mc-gris-fonce { color: #777777; } .kfp .infobulle .mc-bleu { color: #7f7fff; } .kfp .infobulle .mc-vert { color: #55ff55; } .kfp .infobulle .mc-cyan { color: #55ffff; }
.kfp .infobulle .mc-rouge { color: #ff5555; } .kfp .infobulle .mc-rose { color: #ff55ff; } .kfp .infobulle .mc-jaune { color: #ffff55; } .kfp .infobulle .mc-blanc { color: #ffffff; }
.kfp .infobulle .lore-vide { height: 8px; }

/* 1/11 (Artur) : fiches de caisses de /items : probabilités, garantie, bulle au survol, retour vers la fiche précédente */
.kfp .objet-survol { padding: 0; background: none; border: 0; box-shadow: none; display: block; max-width: 320px; font-family: inherit; }
.kfp .objet-survol[hidden] { display: none; }
.kfp .objet-survol .objet-bulle { display: block !important; box-shadow: inset 0 0 0 2px #2c0a63, 0 4px 12px rgba(0, 0, 0, 0.5); }
.kfp .objet-tirage { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.kfp .objet-tirage .objet-texte { margin: 0; }
.kfp .objet-garantie { margin: 0; padding: 8px 10px; background: var(--kfp-case); border-left: 4px solid #b8860b; font-size: 14px; line-height: 19px; }
.kfp .objet-palier-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; margin-top: 6px; font-size: 14px; }
.kfp .objet-lots { display: flex; flex-wrap: wrap; gap: 6px; }
.kfp .objet-lot { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 50px; }
.kfp .objet-lot-chance { font-size: 11px; line-height: 13px; color: var(--kfp-doux); white-space: nowrap; }
.kfp span.objet-case[tabindex] { cursor: help; }
.kfp .objet-tirage-groupe summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.kfp .objet-tirage-groupe + .objet-tirage-groupe { border-top: 2px dashed var(--kfp-filet); padding-top: 4px; }
.kfp .objet-retour { display: inline-flex; align-items: center; gap: 8px; margin: 0 44px 12px 0; padding: 4px 10px; font-size: 14px; }

/* 1/11 (Artur) : fiches de /items : XP de métier et case de l'arbre */
.kfp .objet-metier { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.kfp .objet-metier-xp { font-weight: 700; color: #2c6b12; }
.kfp .objet-arbre { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; padding: 8px 10px; background: var(--kfp-case); border-left: 4px solid #4f7f2a; font-size: 14px; line-height: 19px; }
.kfp .objet-arbre .objet-texte { margin: 4px 0 0; font-size: 14px; line-height: 19px; }
.kfp .objet-arbre-nom { font-size: 15px; }
.kfp .objet-arbre-chemin { margin-top: 4px; }
.kfp .objet-arbre-chemin summary { cursor: pointer; }
.kfp .objet-arbre-chemin ol { margin: 4px 0 0; padding-left: 22px; }

/* la pancarte du serveur, accrochée au menu, ne recouvre pas une fiche ouverte (téléphone, tablette) */
@media (max-width: 991.98px) { body.kf:has(.volet-joueur.ouvert) .kf-pancarte { display: none; } }

/* 1/11 (Artur) : le wiki sur le site : même page que le règlement, une page à la fois */
.kfp .wiki-sommaire { max-height: calc(100vh - 150px); overflow-y: auto; padding: 14px 12px; }
.kfp .wiki-menu > summary { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 2px 8px; list-style: none; cursor: default; }
.kfp .wiki-menu > summary::-webkit-details-marker { display: none; }
.kfp .wiki-menu-titre { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--kfp-or); }
.kfp .wiki-menu-actuel, .kfp .wiki-menu > summary .bi { display: none; }
.kfp .wiki-sommaire a { padding: 6px 10px; font-size: 14px; line-height: 19px; }
.kfp .wiki-sommaire a.wiki-enfant { margin-left: 12px; font-size: 13px; line-height: 18px; }
.kfp .wiki-lien-items { margin-bottom: 4px; font-weight: 700; }
.kfp .wiki-groupe { margin-top: 2px; }
.kfp .wiki-groupe > summary { padding: 6px 8px; font-size: 14px; line-height: 19px; font-weight: 700; cursor: pointer; color: var(--kfp-fort, inherit); }
.kfp .wiki-groupe > summary:hover { color: var(--kfp-or); }
.kfp .wiki-page { min-width: 0; }
.kfp .wiki-page details { margin: 0 0 8px; }
.kfp .wiki-page details > summary { padding: 6px 2px; font-weight: 700; cursor: pointer; }
.kfp .wiki-page h2 { margin: 26px 0 10px; padding-bottom: 6px; font-size: 20px; line-height: 26px; color: var(--kfp-fort, inherit); scroll-margin-top: 130px; }
.kfp .wiki-page h3 { margin: 18px 0 8px; font-size: 16px; line-height: 22px; color: var(--kfp-fort, inherit); scroll-margin-top: 130px; }
.kfp .wiki-page ul { margin: 0 0 12px; }
.kfp .wiki-page ul > li::before { content: ""; position: absolute; left: 6px; top: 0.6em; width: 8px; height: 8px; background: var(--kfp-or); }
.kfp .wiki-page ol { margin: 0 0 12px; padding-left: 26px; }
.kfp .wiki-page ol > li { padding-left: 2px; margin-bottom: 6px; }
.kfp .wiki-page a:not(.bouton, .wiki-carte) { color: #55288f; text-decoration: underline; text-underline-offset: 2px; }
.kfp .wiki-page a:not(.bouton, .wiki-carte):hover { color: #7a4e0c; }
.kfp .wiki-page code { padding: 1px 5px; background: rgba(43, 26, 13, 0.1); border-radius: 3px; font-size: 0.92em; color: var(--kfp-fort, inherit); }
.kfp .wiki-page strong { color: var(--kfp-fort, inherit); }
.kfp .wiki-couverture { display: block; width: calc(100% + 0px); max-height: 220px; object-fit: cover; margin: 0 0 16px; border-radius: 4px; }
.kfp .wiki-page figure { margin: 14px 0; text-align: center; }
.kfp .wiki-page figure img { max-width: 100%; height: auto; border-radius: 4px; }
.kfp .wiki-page figcaption { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--kfp-doux); }
.kfp .wiki-page figcaption p { margin: 0; }
.kfp .wiki-page img[data-size="line"] { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; image-rendering: pixelated; }
.kfp .wiki-tableau { overflow-x: auto; margin: 0 0 14px; }
.kfp .wiki-tableau table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 20px; }
.kfp .wiki-tableau th { padding: 7px 10px; background: rgba(43, 26, 13, 0.12); border-bottom: 2px solid var(--kfp-noir-bois, #2b1a0d); text-align: left; font-weight: 700; white-space: nowrap; color: var(--kfp-fort, inherit); }
.kfp .wiki-tableau td { padding: 6px 10px; border-bottom: 1px solid var(--kfp-filet); vertical-align: top; color: var(--kfp-texte); }
.kfp .wiki-tableau :is(table, thead, tbody, tr, td) { background: none !important; }
.kfp .wiki-note { margin: 12px 0; padding: 10px 14px 10px 16px; background: var(--kfp-case); border-left: 5px solid #a3700a; }
.kfp .wiki-note p:last-child { margin-bottom: 0; }
.kfp .wiki-note-warning, .kfp .wiki-note-danger { border-left-color: #a3281f; }
.kfp .wiki-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 10px 0 18px; }
.kfp .wiki-carte { display: flex; flex-direction: column; gap: 4px; padding: 0 0 10px; overflow: hidden; background: var(--kfp-case); border: 2px solid var(--kfp-filet); border-radius: 5px; text-decoration: none; color: var(--kfp-texte); transition: border-color 0.12s, background-color 0.12s; }
.kfp .wiki-carte:hover, .kfp .wiki-carte:focus-visible { border-color: var(--kfp-noir-bois, #2b1a0d); background: var(--kfp-case-survol); }
.kfp .wiki-carte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.kfp .wiki-carte strong { padding: 4px 10px 0; font-size: 15px; line-height: 20px; }
.kfp .wiki-carte span { padding: 0 10px; font-size: 13px; line-height: 18px; color: var(--kfp-doux); }
.kfp .wiki-suite { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 14px; border-top: 2px dashed var(--kfp-filet); }
.kfp .wiki-suivante { margin-left: auto; }
@media (max-width: 991.98px) {
    .kfp .wiki-sommaire { max-height: none; }
    .kfp .wiki-menu > summary { margin: 0; cursor: pointer; }
    .kfp .wiki-menu[open] > summary { margin-bottom: 8px; }
    .kfp .wiki-menu-actuel { display: block; flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 19px; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--kfp-doux); }
    .kfp .wiki-menu > summary .bi { display: inline-block; }
    .kfp .wiki-menu[open] > summary .bi { transform: rotate(180deg); }
    .kfp .wiki-page h1 { font-size: 22px; line-height: 28px; }
}