/*
 * Thème KingFight par-dessus Nova : fond sombre, cadres en parchemin, bois et or (section « STYLE D », en fin de fichier).
 * Police du pack pour les titres, menus et boutons ; police du système pour le texte (lisible).
 */
@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; }

body.kf {
    --kf-fond: #0e0a14;
    --kf-fond-bas: #08050d;
    --kf-surface: #160e20;
    --kf-surface-2: #1f1729;
    --kf-surface-3: #2a1f38;
    --kf-cadre: #3a1d6e;
    --kf-cadre-vif: #6d3fd0;
    --kf-trait: #2d2140;
    --kf-noir: #07040b;
    --kf-texte: #f4effa;
    --kf-texte-2: #d9cfe6;
    --kf-texte-3: #a99bbb;
    --kf-violet: #b47cff;
    --kf-or: #f2c14e;
    --kf-or-clair: #ffe08a;
    --kf-or-fonce: #b8891f;
    --kf-or-texte: #2a1a00;
    --kf-rose: #ff5c7a;
    --kf-vert: #5ee36a;
    --kf-pixel: "KingFight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --kf-texte-police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --bs-body-bg: var(--kf-fond);
    --bs-body-bg-rgb: 14, 10, 20;
    --bs-body-color: var(--kf-texte);
    --bs-body-color-rgb: 244, 239, 250;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: rgba(244, 239, 250, 0.78);
    --bs-secondary-bg: var(--kf-surface);
    --bs-tertiary-bg: var(--kf-surface-2);
    --bs-border-color: var(--kf-trait);
    --bs-link-color: var(--kf-violet);
    --bs-link-color-rgb: 180, 124, 255;
    --bs-link-hover-color: #ffffff;
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-primary: var(--kf-violet);
    --bs-primary-rgb: 180, 124, 255;
    --di-primary-rgb: 180, 124, 255;
    --di-tertiary-rgb: 242, 193, 78;
    --di-body-bg: var(--kf-fond);
    --di-main-font: var(--kf-texte-police);
    --bg-light: none;
    --bg-dark: none;
    --bg-base: none;

    background: var(--kf-fond) !important;
    color: var(--kf-texte);
    font-family: var(--kf-texte-police) !important;
    font-size: 16px;
    line-height: 1.6;
}

body.kf ::selection { background: #6d3fd0; color: #ffffff; }
body.kf a { color: var(--kf-violet); }
body.kf a:hover { color: #ffffff; }
body.kf img.pixel, body.kf .kf-case img, body.kf .kf-liste-events img { image-rendering: pixelated; }

/* titres : police du pack, sans les majuscules ni la graisse 900 forcées par Nova (les pages des profils gardent leurs règles) */
body.kf :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.kfp *) {
    font-family: var(--kf-pixel) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #ffffff;
    line-height: 1.2;
}
body.kf :is(h1, .h1):not(.kfp *) { font-size: 2.25rem; }
body.kf :is(h2, .h2):not(.kfp *) { font-size: 1.5rem; }
body.kf :is(h3, .h3):not(.kfp *) { font-size: 1.25rem; }
body.kf .text-uppercase:not(.kfp *) { text-transform: none !important; }

/* ---------- boutons ---------- */
body.kf .btn { font-family: var(--kf-pixel); font-weight: 400; border-radius: 0; letter-spacing: 0; text-transform: none; }
body.kf .kf-btn-or, body.kf .btn-primary {
    --bs-btn-color: var(--kf-or-texte); --bs-btn-bg: var(--kf-or); --bs-btn-border-color: #000;
    --bs-btn-hover-color: var(--kf-or-texte); --bs-btn-hover-bg: #ffd25e; --bs-btn-hover-border-color: #000;
    --bs-btn-active-color: var(--kf-or-texte); --bs-btn-active-bg: var(--kf-or-fonce); --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: var(--kf-or-texte); --bs-btn-disabled-bg: #8a7340; --bs-btn-disabled-border-color: #000;
    color: var(--kf-or-texte) !important; background: var(--kf-or) !important; border: 2px solid #000 !important;
    box-shadow: inset 0 3px 0 var(--kf-or-clair), inset 0 -4px 0 var(--kf-or-fonce) !important;
    font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
}
body.kf .kf-btn-or:hover, body.kf .btn-primary:hover { background: #ffd25e !important; color: var(--kf-or-texte) !important; }
body.kf .kf-btn-or.active { box-shadow: inset 0 3px 0 var(--kf-or-clair), inset 0 -4px 0 var(--kf-or-fonce), 0 0 0 3px rgba(242, 193, 78, 0.35) !important; }
body.kf .kf-btn-sombre, body.kf .btn-secondary, body.kf .btn-light, body.kf .btn-dark,
body.kf .btn-outline-primary, body.kf .btn-outline-secondary, body.kf .btn-outline-tertiary, body.kf .btn-outline-light, body.kf .btn-outline-dark {
    color: var(--kf-texte) !important; background: var(--kf-surface-2) !important; border: 2px solid #000 !important;
    box-shadow: inset 0 2px 0 #3a2a52, inset 0 -3px 0 #0b0710 !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
}
body.kf .kf-btn-sombre:hover, body.kf .btn-secondary:hover, body.kf .btn-light:hover, body.kf .btn-dark:hover,
body.kf .btn-outline-primary:hover, body.kf .btn-outline-secondary:hover, body.kf .btn-outline-tertiary:hover, body.kf .btn-outline-light:hover, body.kf .btn-outline-dark:hover {
    background: var(--kf-surface-3) !important; color: #ffffff !important;
}
body.kf .btn-success { background: #2f9e44 !important; border: 2px solid #000 !important; color: #fff !important; box-shadow: inset 0 2px 0 #5ee36a, inset 0 -3px 0 #1d5a24 !important; }
body.kf .btn-danger { background: #c92a42 !important; border: 2px solid #000 !important; color: #fff !important; box-shadow: inset 0 2px 0 #ff8197, inset 0 -3px 0 #7a1222 !important; }
body.kf .kf-btn-grand { min-height: 56px; padding: 0 1.4rem; font-size: 1.125rem; }
body.kf .btn:focus-visible, body.kf a:focus-visible, body.kf button:focus-visible, body.kf input:focus-visible { outline: 3px solid var(--kf-or); outline-offset: 2px; box-shadow: none; }

/* ---------- panneaux, cartes, formulaires, tableaux ---------- */
body.kf .kf-panneau, body.kf .card:not(.kfp *) {
    background: var(--kf-surface); border: 2px solid var(--kf-cadre); border-radius: 0; box-shadow: 0 0 0 2px var(--kf-noir); color: var(--kf-texte);
}
body.kf .card:not(.kfp *) { --bs-card-bg: var(--kf-surface); --bs-card-cap-bg: var(--kf-surface-2); --bs-card-border-color: var(--kf-cadre); --bs-card-color: var(--kf-texte); }
body.kf .card-header:not(.kfp *), body.kf .card-footer:not(.kfp *) { background: var(--kf-surface-2); border-color: var(--kf-trait); }
body.kf .bg-body-secondary:not(.kfp *), body.kf .bg-body-tertiary:not(.kfp *) { background-color: var(--kf-surface) !important; }
body.kf .form-control, body.kf .form-select, body.kf .input-group-text {
    background-color: var(--kf-noir); border: 2px solid #3a2a52; border-radius: 0; color: #ffffff;
}
body.kf .form-control::placeholder { color: #8f81a3; }
body.kf .form-control:focus, body.kf .form-select:focus { border-color: var(--kf-violet); box-shadow: 0 0 0 3px rgba(180, 124, 255, 0.25); background-color: var(--kf-noir); color: #ffffff; }
body.kf .form-check-input { background-color: var(--kf-noir); border: 2px solid #3a2a52; }
body.kf .form-check-input:checked { background-color: var(--kf-violet); border-color: var(--kf-violet); }
body.kf .table:not(.kfp *) { --bs-table-bg: transparent; --bs-table-color: var(--kf-texte); --bs-table-border-color: var(--kf-trait); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(180, 124, 255, 0.08); --bs-table-hover-color: #ffffff; }
body.kf .dropdown-menu {
    --bs-dropdown-bg: var(--kf-surface); --bs-dropdown-border-color: var(--kf-cadre); --bs-dropdown-link-color: var(--kf-texte);
    --bs-dropdown-link-hover-bg: var(--kf-surface-2); --bs-dropdown-link-hover-color: #ffffff; --bs-dropdown-link-active-bg: var(--kf-cadre-vif); --bs-dropdown-link-active-color: #ffffff;
    border: 2px solid var(--kf-cadre); border-radius: 0; box-shadow: 0 0 0 2px var(--kf-noir), 0 12px 32px rgba(0, 0, 0, 0.5); padding: 0.4rem 0;
}
body.kf .dropdown-item { padding: 0.55rem 1rem; display: flex; align-items: center; gap: 0.6rem; }
body.kf .modal-content { background: var(--kf-surface); border: 2px solid var(--kf-cadre); border-radius: 0; box-shadow: 0 0 0 2px var(--kf-noir); color: var(--kf-texte); }
body.kf .modal-header, body.kf .modal-footer { border-color: var(--kf-trait); }
body.kf .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
body.kf .alert { border-radius: 0; border-width: 2px; }
body.kf .badge { border-radius: 0; font-family: var(--kf-pixel); font-weight: 400; }
body.kf .pagination { flex-wrap: wrap; row-gap: 4px; }
body.kf .pagination { --bs-pagination-bg: var(--kf-surface-2); --bs-pagination-color: var(--kf-texte); --bs-pagination-border-color: #000; --bs-pagination-hover-bg: var(--kf-surface-3); --bs-pagination-hover-color: #fff; --bs-pagination-active-bg: var(--kf-or); --bs-pagination-active-color: var(--kf-or-texte); --bs-pagination-active-border-color: #000; --bs-pagination-border-radius: 0; }
body.kf .list-group { --bs-list-group-bg: var(--kf-surface); --bs-list-group-color: var(--kf-texte); --bs-list-group-border-color: var(--kf-trait); --bs-list-group-action-hover-bg: var(--kf-surface-2); --bs-list-group-active-bg: var(--kf-cadre-vif); --bs-list-group-active-border-color: var(--kf-cadre-vif); border-radius: 0; }
body.kf .nav-tabs { --bs-nav-tabs-border-color: var(--kf-trait); --bs-nav-tabs-link-active-bg: var(--kf-surface); --bs-nav-tabs-link-active-color: #fff; --bs-nav-tabs-link-active-border-color: var(--kf-cadre) var(--kf-cadre) var(--kf-surface); }
body.kf .nav-pills { --bs-nav-pills-link-active-bg: var(--kf-or); --bs-nav-pills-link-active-color: var(--kf-or-texte); --bs-nav-pills-border-radius: 0; }

/* ---------- mise en page ---------- */
body.kf .kf-conteneur { max-width: 1240px; padding-left: 24px; padding-right: 24px; }
body.kf main#plug { padding-top: 3.75rem !important; margin-bottom: 4rem !important; }
body.kf main#plug > div { gap: 1.5rem !important; }
body.kf main#plug > div > h1:first-child { margin-bottom: 0; }
body.kf .kf-page { min-height: calc(100vh - 74px); }

/* barre du haut : compacte, reste en haut de l'écran */
body.kf .kf-barre {
    padding: 0; min-height: 72px; background: rgba(14, 10, 20, 0.95); border-bottom: 2px solid #000; box-shadow: 0 2px 0 #2a1a3d;
    backdrop-filter: blur(6px); z-index: 1030;
}
body.kf .kf-barre > .kf-conteneur { min-height: 72px; gap: 0 20px; flex-wrap: wrap; }
body.kf .kf-marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--kf-or); font-family: var(--kf-pixel); font-weight: 700; font-size: 24px; line-height: 28px; text-transform: uppercase; text-shadow: 3px 3px 0 #5a4210; }
body.kf .kf-marque:hover { color: #ffd25e; }
body.kf .kf-bouton-menu { border: 2px solid #000; border-radius: 0; background: var(--kf-surface-2); color: var(--kf-texte); width: 44px; height: 44px; padding: 0; font-size: 1.5rem; box-shadow: inset 0 2px 0 #3a2a52; }
body.kf .kf-menu { gap: 2px; }
body.kf .kf-barre-droite { display: flex; align-items: center; flex: 1; gap: 10px; }
body.kf .kf-menu-droite { margin-right: auto; }
body.kf .kf-menu .nav-link { font-family: var(--kf-pixel); font-size: 16px; color: #e6dcf2; padding: 12px 14px !important; border-radius: 0; text-transform: none; display: inline-flex; align-items: center; gap: 8px; }
body.kf .kf-menu .nav-link i, body.kf .kf-menu .dropdown-item i { font-size: 1rem; line-height: 1; }
body.kf .kf-menu .nav-link:hover, body.kf .kf-menu .nav-link:focus { color: #ffffff; background: var(--kf-surface-2); }
body.kf .kf-menu .nav-link.active { color: #ffffff; box-shadow: inset 0 -3px 0 var(--kf-violet); background: none; }
body.kf .kf-recherche { position: relative; display: flex; align-items: center; margin: 0; }
body.kf .kf-recherche i { position: absolute; left: 12px; color: #8f81a3; pointer-events: none; }
body.kf .kf-recherche input { width: 210px; height: 44px; padding: 0 12px 0 36px; background: var(--kf-noir); border: 2px solid #3a2a52; color: #ffffff; font-size: 15px; border-radius: 0; }
body.kf .kf-recherche input:focus { outline: none; border-color: var(--kf-violet); }
body.kf .kf-outils { display: flex; flex-direction: row; align-items: center; gap: 10px; }
body.kf .kf-menu-boutique { display: flex; align-items: center; margin: 0 6px; }
body.kf .kf-menu-boutique .kf-btn-or { height: 44px; padding: 0 18px; }
body.kf .kf-outils .notifications-dropdown > .nav-link { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: var(--kf-surface-2); border: 2px solid #000; color: var(--kf-texte); position: relative; }
body.kf .kf-outils .notifications-dropdown > .nav-link::after { display: none; }
body.kf .kf-outils .notifications-dropdown .badge { position: absolute; top: -6px; right: -6px; }
body.kf .kf-compte { display: flex; align-items: center; gap: 10px; color: var(--kf-texte) !important; padding: 4px 10px 4px 4px !important; background: var(--kf-surface-2); border: 2px solid #000; }
body.kf .kf-compte img { image-rendering: pixelated; }
body.kf .kf-compte-nom { display: flex; flex-direction: column; line-height: 1.15; font-size: 14px; }
body.kf .kf-compte-role { font-family: var(--kf-pixel); font-size: 12px; color: var(--kf-role, var(--kf-texte-3)); }

@media (max-width: 1199.98px) {
    body.kf .kf-barre > .kf-conteneur { padding-top: 12px; padding-bottom: 12px; min-height: 0; }
    body.kf .kf-marque { font-size: 20px; }
    body.kf .kf-marque img { width: 36px; height: 36px; }
    body.kf #kf-menu { flex-basis: 100%; }
    body.kf #kf-menu.show, body.kf #kf-menu.collapsing { padding: 12px 0 8px; }
    body.kf .kf-menu { margin: 0 0 12px; }
    body.kf .kf-menu-boutique { margin: 6px 0; }
    body.kf .kf-menu-centre { margin: 0 0 6px; }
    body.kf .kf-barre-droite { display: block; }
    body.kf .kf-menu .dropdown-menu { box-shadow: none; }
    body.kf .kf-recherche { margin-bottom: 12px; }
    body.kf .kf-recherche input { width: 100%; }
    body.kf .kf-outils { flex-wrap: wrap; }
}

/* ---------- accueil ---------- */
body.kf .kf-heros {
    background: linear-gradient(180deg, rgba(14, 10, 20, 0.25) 0%, rgba(14, 10, 20, 0.55) 55%, var(--kf-fond) 100%), url("../img/fond-sombre-1920.jpg") center 35% / cover no-repeat;
}
body.kf .kf-heros-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 64px; }
body.kf .kf-heros-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
body.kf .kf-heros h1 { margin: 0; font-size: 3rem !important; line-height: 1.12; text-shadow: 4px 4px 0 #2a0f5e; }
body.kf .kf-heros p { margin: 0; max-width: 540px; font-size: 1.125rem; line-height: 1.6; color: #e0d6ee; }
body.kf .kf-heros-boutons, body.kf .kf-heros-infos { display: flex; flex-wrap: wrap; gap: 12px; }
body.kf .kf-heros-logo { display: flex; justify-content: center; }
body.kf .kf-heros-logo img { max-width: 100%; height: auto; }
body.kf .kf-puce { display: inline-flex; align-items: center; gap: 8px; background: rgba(14, 10, 20, 0.75); border: 2px solid var(--kf-trait); padding: 6px 12px; font-family: var(--kf-pixel); font-size: 15px; color: #e6dcf2; }
body.kf .kf-point { width: 10px; height: 10px; flex: none; background: var(--kf-vert); box-shadow: 0 0 0 2px #1d5a24; }
body.kf .kf-point-rouge { background: #ff4d4d; box-shadow: 0 0 0 2px #6b1414; }

body.kf .kf-accueil { display: flex; flex-direction: column; gap: 48px; padding-top: 16px; padding-bottom: 72px; }
body.kf .kf-message { padding: 20px 24px; }
body.kf .kf-section { display: flex; flex-direction: column; gap: 16px; }
body.kf .kf-section-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
body.kf .kf-titre-section { margin: 0; font-size: 1.25rem !important; }
body.kf .kf-lien-plus { font-family: var(--kf-pixel); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
body.kf .kf-discret { font-size: 14px; color: var(--kf-texte-3); }
body.kf .kf-surtitre { font-family: var(--kf-pixel); font-size: 14px; color: var(--kf-violet); }

body.kf .kf-ce-soir { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
body.kf .kf-prochain { padding: 24px; display: flex; gap: 22px; align-items: center; border-color: var(--kf-cadre-vif); }
body.kf .kf-case { width: 104px; height: 104px; flex: none; background: var(--kf-noir); border: 2px solid var(--kf-cadre); display: grid; place-items: center; }
body.kf .kf-prochain-texte { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body.kf .kf-prochain-nom { font-family: var(--kf-pixel); font-weight: 700; font-size: 2rem; line-height: 1.1; color: #ffffff; }
body.kf .kf-prochain-quand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #e0d6ee; }
body.kf .kf-compte-rebours:empty { display: none; }
body.kf .kf-compte-rebours { font-family: var(--kf-pixel); font-size: 14px; padding: 3px 8px; background: var(--kf-rose); color: #1a0006; border: 2px solid #000; }
body.kf .kf-liste-events { list-style: none; margin: 0; padding: 6px 20px; display: flex; flex-direction: column; }
body.kf .kf-liste-events li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 2px solid #22172f; }
body.kf .kf-liste-events li:last-child { border-bottom: 0; }
body.kf .kf-liste-nom { flex: 1; min-width: 0; font-family: var(--kf-pixel); color: #ffffff; }
body.kf .kf-liste-quand { color: var(--kf-texte-2); font-size: 15px; text-align: right; }

/* carte « Ce soir » et lignes du planning : des boutons qui ouvrent la fiche de l'event */
body.kf .kf-cliquable { cursor: pointer; text-align: left; font: inherit; color: inherit; }
body.kf button.kf-panneau.kf-prochain { width: 100%; }
body.kf .kf-cliquable:hover, body.kf .kf-cliquable:focus-visible { border-color: var(--kf-or) !important; }
body.kf .kf-liste-events li { padding: 0; }
body.kf .kf-liste-events li > button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 0; background: none; border: 0; }
body.kf .kf-liste-events li > button:hover .kf-liste-nom { color: var(--kf-or); }
body.kf .kf-heros-sous { font-family: var(--kf-pixel); font-size: 1.25rem !important; line-height: 1.4 !important; color: var(--kf-or) !important; }
body.kf .kf-onglet { cursor: pointer; }
body.kf .kf-onglet.active { color: var(--kf-or-texte); background: var(--kf-or); box-shadow: inset 0 -3px 0 var(--kf-or-fonce); }
body.kf .kf-lignes-classement { display: flex; flex-direction: column; gap: 10px; }
body.kf .kf-modale-event .modal-header { align-items: center; }
body.kf .kf-modale-event .modal-title { font-size: 1.4rem !important; margin: 0; }
body.kf .kf-modale-event img.pixel { image-rendering: pixelated; }

/* fiche d'un event : comme l'infobulle du jeu */
.kf-fiche { font-family: "KingFight", system-ui, sans-serif; font-size: 16px; line-height: 21px; color: #aaaaaa; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.kf-fiche-titre { font-weight: 700; font-size: 18px; }
.kf-fiche-quand { color: #ffffff; }
.kf-fiche-classement { color: #6fa8ff; }
.kf-fiche-desc { margin: 0; color: #e0e0ff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 23px; }
.kf-fiche-section { margin-top: 6px; color: #ffff55; }
.kf-fiche-lignes { display: flex; flex-direction: column; gap: 1px; }

body.kf .kf-deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
body.kf .kf-classement, body.kf .kf-rejoindre { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
body.kf .kf-onglets { display: flex; flex-wrap: wrap; gap: 8px; }
body.kf .kf-onglet { font-family: var(--kf-pixel); font-size: 14px; padding: 8px 12px; color: var(--kf-texte-2); background: var(--kf-surface-2); border: 2px solid #000; text-decoration: none; }
body.kf .kf-onglet:hover { color: #ffffff; }
body.kf .kf-onglet.actif { color: var(--kf-or-texte); background: var(--kf-or); box-shadow: inset 0 -3px 0 var(--kf-or-fonce); }
body.kf .kf-ligne-classement { display: flex; align-items: center; gap: 16px; padding: 12px 14px; background: #1c1327; border: 2px solid #000; }
body.kf .kf-place { width: 40px; font-family: var(--kf-pixel); font-weight: 700; font-size: 28px; line-height: 32px; color: var(--kf-texte-2); }
body.kf .kf-place-1 { color: var(--kf-or); }
body.kf .kf-place-2 { color: #c9c9d6; }
body.kf .kf-place-3 { color: #d08a4a; }
body.kf .kf-ligne-nom { flex: 1; min-width: 0; font-family: var(--kf-pixel); font-size: 18px; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.kf .kf-ligne-points { font-family: var(--kf-pixel); color: #e0d6ee; }
body.kf .kf-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
body.kf .kf-etapes li { display: flex; gap: 16px; align-items: flex-start; }
body.kf .kf-etapes strong { display: block; font-family: var(--kf-pixel); font-weight: 400; font-size: 18px; color: #ffffff; }
body.kf .kf-etapes li > span:last-child { color: var(--kf-texte-2); }
body.kf .kf-etape-n { width: 44px; height: 44px; flex: none; display: grid; place-items: center; font-family: var(--kf-pixel); font-size: 20px; font-weight: 700; color: var(--kf-or-texte); background: var(--kf-or); border: 2px solid #000; box-shadow: inset 0 -3px 0 var(--kf-or-fonce); }

body.kf .kf-grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body.kf .kf-carte-lien { text-decoration: none; color: inherit; display: block; }
body.kf .kf-carte-lien:hover .kf-panneau { border-color: var(--kf-cadre-vif); }
body.kf .kf-produit, body.kf .kf-actu { height: 100%; display: flex; flex-direction: column; }
body.kf .kf-produit img, body.kf .kf-actu img { width: 100%; height: auto; display: block; border-bottom: 2px solid #000; }
body.kf .kf-actu img { aspect-ratio: 16 / 9; object-fit: cover; }
body.kf .kf-produit-corps, body.kf .kf-actu-corps { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
body.kf .kf-produit-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
body.kf .kf-produit h3, body.kf .kf-actu h3 { margin: 0; font-size: 1.25rem !important; }
body.kf .kf-produit p, body.kf .kf-actu p { margin: 0; color: var(--kf-texte-2); }
body.kf .kf-prix { font-weight: 700; font-size: 1.125rem; color: var(--kf-or); white-space: nowrap; }

@media (max-width: 991.98px) {
    body.kf .kf-heros { background-image: linear-gradient(180deg, rgba(14, 10, 20, 0.2) 0%, rgba(14, 10, 20, 0.6) 60%, var(--kf-fond) 100%), url("../img/fond-sombre-960.jpg"); background-position: 58% 30%; }
    body.kf .kf-heros-grille { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; padding-bottom: 28px; text-align: center; }
    body.kf .kf-heros-logo { order: -1; }
    body.kf .kf-heros-logo img { width: 230px; }
    body.kf .kf-heros-texte { align-items: center; gap: 14px; }
    body.kf .kf-heros h1 { font-size: 1.75rem !important; }
    body.kf .kf-heros p { font-size: 1rem; }
    body.kf .kf-heros-boutons { width: 100%; flex-direction: column; }
    body.kf .kf-heros-boutons .btn { width: 100%; }
    body.kf .kf-heros-infos { justify-content: center; }
    body.kf .kf-ce-soir, body.kf .kf-deux-colonnes, body.kf .kf-grille-3 { grid-template-columns: 1fr; }
    body.kf .kf-accueil { gap: 32px; }
    body.kf .kf-prochain { padding: 14px; gap: 14px; }
    body.kf .kf-case { width: 64px; height: 64px; }
    body.kf .kf-case img { width: 48px; height: 48px; }
    body.kf .kf-prochain-nom { font-size: 1.375rem; }
    body.kf .kf-conteneur { padding-left: 16px; padding-right: 16px; }
    body.kf .kf-classement, body.kf .kf-rejoindre { padding: 16px; }
    body.kf .kf-ligne-classement { padding: 10px 12px; gap: 12px; }
    body.kf .kf-place { width: 28px; font-size: 22px; }
    body.kf .kf-ligne-nom { font-size: 16px; }
    body.kf .kf-liste-events { padding: 4px 14px; }
    body.kf .kf-liste-nom { font-size: 15px; }
    body.kf .kf-liste-quand { font-size: 13px; }
    body.kf .kf-rejoindre .btn { align-self: stretch !important; }
    body.kf .kf-astuce { display: none !important; }
}
body.kf .kf-btn-or, body.kf .kf-btn-sombre { white-space: nowrap; }

/* ---------- pied de page ---------- */
body.kf .kf-pied { background: var(--kf-fond-bas); border-top: 2px solid #000; box-shadow: inset 0 2px 0 var(--kf-surface-2); margin-top: auto; }
body.kf .kf-pied-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 36px; padding-bottom: 24px; }
body.kf .kf-pied-marque { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
body.kf .kf-pied-marque .kf-marque { font-size: 20px; }
body.kf .kf-pied-marque p { margin: 0; max-width: 320px; color: var(--kf-texte-3); }
body.kf .kf-pied-reseaux { display: flex; gap: 8px; }
body.kf .kf-pied-reseaux a { width: 44px; height: 44px; display: grid; place-items: center; background: var(--kf-surface-2); border: 2px solid #000; color: var(--kf-texte); font-size: 1.2rem; text-decoration: none; }
body.kf .kf-pied-reseaux a:hover { background: var(--kf-surface-3); color: #ffffff; }
body.kf .kf-pied nav { display: flex; flex-direction: column; gap: 6px; }
body.kf .kf-pied nav h2 { font-size: 1rem !important; margin: 0 0 4px; }
body.kf .kf-pied nav a { text-decoration: none; color: var(--kf-texte-2); padding: 2px 0; }
body.kf .kf-pied nav a:hover { color: #ffffff; }
body.kf .kf-pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-bottom: 24px; color: #8f81a3; font-size: 14px; }
@media (max-width: 991.98px) {
    body.kf .kf-pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.kf .kf-pied-marque { grid-column: 1 / -1; }
}

/* ---------- barre du bas sur téléphone ---------- */
body.kf .kf-bas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; height: 64px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    background: var(--kf-fond-bas); border-top: 2px solid #000; box-shadow: inset 0 2px 0 var(--kf-surface-2); padding-bottom: env(safe-area-inset-bottom);
}
body.kf .kf-bas a, body.kf .kf-bas button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; padding: 0;
    font-family: var(--kf-pixel); font-size: 13px; color: var(--kf-texte-3); text-decoration: none;
}
body.kf .kf-bas i { font-size: 1.35rem; line-height: 1; }
body.kf .kf-bas .actif { color: var(--kf-or); box-shadow: inset 0 3px 0 var(--kf-or); }
@media (max-width: 991.98px) {
    body.kf { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ---------- boutique ---------- */
body.kf #shop .card .card-title, body.kf #shop .card h4, body.kf #shop .card h5 { font-family: var(--kf-pixel) !important; }
/* bannière KingPlus en haut de la boutique */
body.kf .kf-kingplus { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 28px; align-items: center; padding: 28px 32px; background: linear-gradient(135deg, #22113a 0%, #160e20 55%, #2b1645 100%); border: 2px solid var(--kf-or-fonce); box-shadow: 0 0 0 2px var(--kf-noir), 0 12px 40px rgba(242, 193, 78, 0.08); }
body.kf .kf-kingplus-texte { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.kf .kf-kingplus-titre { margin: 0; font-size: 3rem !important; line-height: 1 !important; text-shadow: 4px 4px 0 #000; }
body.kf .kf-or { color: var(--kf-or); }
body.kf .kf-violet { color: #c58cff; }
body.kf .kf-kingplus-accroche { margin: 0; font-family: var(--kf-pixel); font-size: 1.05rem; color: var(--kf-or-clair); }
body.kf .kf-kingplus-avantages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
body.kf .kf-kingplus-avantages li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 14px; line-height: 1.3; color: var(--kf-texte-2); }
/* 31/10 (Artur : « améliore les icônes ») : objets du pack en 64 px, sur un halo violet plutôt qu'une case sombre */
body.kf .kf-kingplus-icone { width: 76px; height: 76px; display: grid; place-items: center; background: radial-gradient(circle at 50% 55%, rgba(180, 124, 255, 0.32) 0%, rgba(180, 124, 255, 0) 68%); }
body.kf .kf-kingplus-icone img { width: 64px; height: 64px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55)); transition: transform 0.15s ease; }
body.kf .kf-kingplus-icone { transition: transform 0.18s var(--kf-rebond, ease); }
body.kf .kf-kingplus-avantages li:hover .kf-kingplus-icone { transform: translateY(-4px) scale(1.08); }
body.kf .kf-kingplus-icone img { image-rendering: pixelated; }
body.kf .kf-kingplus-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
body.kf .kf-kingplus-visuel img { width: 100%; height: auto; display: block; border: 2px solid #000; }
@media (max-width: 991.98px) {
    body.kf .kf-kingplus { grid-template-columns: 1fr; padding: 20px 16px; }
    body.kf .kf-kingplus-visuel { order: -1; max-width: 360px; margin: 0 auto; }
    body.kf .kf-kingplus-titre { font-size: 2.3rem !important; }
    body.kf .kf-kingplus-boutons .btn { width: 100%; }
}

/* panier : une ligne par article avec sa petite image */
body.kf .kf-panier-lignes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
body.kf .kf-panier-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 10px 14px; background: var(--kf-surface-2); border: 2px solid #000; }
body.kf .kf-panier-image { width: 96px; height: 72px; object-fit: cover; border: 2px solid #000; flex: none; }
body.kf .kf-panier-nom { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--kf-pixel); font-size: 17px; color: #ffffff; }
body.kf .kf-panier-nom .kf-discret { font-family: var(--kf-texte-police); }
body.kf .kf-panier-quantite input { width: 84px; }
body.kf .kf-panier-total { width: 110px; text-align: right; font-weight: 700; color: var(--kf-or); }
body.kf .kf-panier-retirer { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; }
body.kf .kf-panier-actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
body.kf .kf-panier-remises { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; color: var(--kf-texte-2); }
body.kf .kf-panier-somme { text-align: right; font-family: var(--kf-pixel); font-size: 1.4rem; color: #ffffff; margin: 14px 0 10px; }
/* description de la catégorie : texte centré dans son cadre (le plugin met un pb-1 qui le collait en bas) */
body.kf #shop .card > .card-body.pb-1 { padding: 16px 20px !important; }
body.kf #shop .card > .card-body.pb-1 > :last-child { margin-bottom: 0; }
body.kf .kf-boutique-categories { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
body.kf .kf-categorie { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-family: var(--kf-pixel); color: var(--kf-texte-2); background: var(--kf-surface); border: 2px solid #000; text-decoration: none; }
body.kf .kf-categorie:hover { color: #ffffff; background: var(--kf-surface-2); }
body.kf .kf-categorie.actif { color: var(--kf-or-texte); background: var(--kf-or); box-shadow: inset 0 -3px 0 var(--kf-or-fonce); }
body.kf .kf-sous-categorie { margin-left: 18px; }
body.kf .kf-boutique-compte { padding: 16px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
body.kf .kf-boutique-joueur { display: flex; align-items: center; gap: 12px; }
body.kf .kf-boutique-joueur img { image-rendering: pixelated; border: 2px solid #000; }
body.kf .kf-boutique-joueur > div { display: flex; flex-direction: column; min-width: 0; }
body.kf .kf-boutique-pseudo { font-family: var(--kf-pixel); color: #ffffff; }
body.kf .kf-boutique-boutons { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 991.98px) {
    /* sur téléphone : catégories en onglets qui défilent, compte et panier sur une ligne */
    body.kf .kf-boutique-categories { flex-direction: row; overflow-x: auto; gap: 8px; margin: 0 -16px 16px; padding: 0 16px 4px; scrollbar-width: none; }
    body.kf .kf-categorie { flex: none; padding: 10px 14px; }
    body.kf .kf-sous-categorie { margin-left: 0; }
    body.kf .kf-boutique-compte { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px; gap: 10px; }
    body.kf .kf-boutique-compte > .kf-discret { flex-basis: 100%; }
    body.kf .kf-boutique-boutons { flex-direction: row; flex-wrap: wrap; width: 100%; }
    body.kf .kf-boutique-boutons .btn { flex: 1 1 auto; padding: 8px 10px; font-size: 14px; }
}

@media (max-width: 991.98px) {
    /* tableaux larges des plugins (sanctions, paiements) : ils défilent dans leur cadre au lieu d'élargir la page */
    body.kf main#plug table:not(.kfp *) { display: block; max-width: 100%; overflow-x: auto; }
}

/* animations réduites (réglage du système) : on garde les effets doux (fondus, couleurs, petits soulèvements), on coupe
   les gros mouvements (flottement, entrées glissées) — voir aussi la section « animations » plus bas (1/11) */
@media (prefers-reduced-motion: reduce) {
    body.kf * { scroll-behavior: auto !important; }
}

/* boutique : offre à l'année à côté de l'abonnement (31/10) */
body.kf .kf-kingplus-an { display: inline-flex; align-items: center; gap: 0.6rem; }
body.kf .kf-kingplus-offert { display: inline-block; padding: 2px 8px; background: var(--kf-or); color: #2a1a00; border: 2px solid #000; font-size: 0.8rem; line-height: 1.2; font-weight: 700; white-space: nowrap; }
/* panier dans la barre du haut (la colonne de gauche de la boutique est retirée) */
body.kf .kf-panier-lien { position: relative; display: inline-flex; align-items: center; font-size: 1.35rem; }
body.kf .kf-panier-nombre { position: absolute; top: 2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--kf-or); color: #2a1a00; font-size: 0.7rem; line-height: 18px; font-weight: 700; text-align: center; }

/* 1/11 : réseaux sociaux tout à gauche de la barre du menu, avant le logo */
body.kf .kf-reseaux { gap: 2px; align-items: center; margin-right: 6px; }
/* barre du menu sur une seule ligne (le logo passait au-dessus) : plus large que le contenu, les réseaux seulement s'il y a
   la place, la recherche repliée en loupe */
@media (min-width: 1200px) {
    body.kf .kf-barre > .kf-conteneur { flex-wrap: nowrap; max-width: 1440px; }
    body.kf .kf-barre .kf-menu .nav-link { white-space: nowrap; }
}
/* Discord, YouTube… tout au bord gauche de la page (Artur, 1/11), hors du cadre du menu ; cachés s'ils toucheraient le logo */
@media (min-width: 1600px) { body.kf .kf-reseaux { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); margin: 0; } }
@media (max-width: 1599.98px) { body.kf .kf-reseaux { display: none !important; } }
body.kf .kf-reseaux a { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: #8f86a6; font-size: 1.05rem; text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; }
body.kf .kf-reseaux a:hover, body.kf .kf-reseaux a:focus-visible { color: #fff; background: rgba(180, 124, 255, 0.16); transform: translateY(-1px); }

/* 1/11 : recherche globale : une loupe dans la barre du menu, une grande fenêtre (façon Wynncraft) */
body.kf .kf-recherche { display: flex; align-items: center; margin-left: 4px; }
body.kf .kf-recherche-bouton { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(180, 124, 255, 0.25); background: #0f0a17; color: #b9b0cc; }
body.kf .kf-recherche-bouton:hover, body.kf .kf-recherche-bouton:focus-visible { color: #fff; border-color: var(--kf-or); }
body.kf .kf-recherche-modale .modal-content { min-height: min(720px, 86vh); background: #1b1226; border: 2px solid #4a17b8; }
body.kf .kf-recherche-entete { display: flex; gap: 12px; align-items: stretch; padding: 18px; border-bottom: 2px solid rgba(180, 124, 255, 0.25); background: #22163a; }
body.kf .kf-recherche-type, body.kf .kf-recherche-champ { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 8px 12px; border-radius: 8px; border: 2px solid #3a2a52; background: #120b1c; }
body.kf .kf-recherche-type { flex: 0 0 200px; }
body.kf .kf-recherche-champ { flex: 1; min-width: 0; }
body.kf .kf-recherche-type span, body.kf .kf-recherche-champ span { font-family: var(--kf-pixel); font-size: 0.75rem; letter-spacing: 0.04em; color: #b9b0cc; text-transform: uppercase; }
body.kf .kf-recherche-type select, body.kf .kf-recherche-champ input { border: 0; background: transparent; color: #fff; font-size: 1.05rem; padding: 2px 0; outline: none; }
body.kf .kf-recherche-type select option { background: #1b1226; color: #fff; }
body.kf .kf-recherche-champ:focus-within, body.kf .kf-recherche-type:focus-within { border-color: var(--kf-or); }
body.kf .kf-recherche-corps { padding: 18px; }
body.kf .kf-recherche-accueil { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 360px; text-align: center; color: var(--kf-texte-2); }
body.kf .kf-recherche-accueil strong { color: #fff; font-size: 1.05rem; }
body.kf .kf-recherche-accueil[hidden] { display: none; }
body.kf .kf-recherche-groupe + .kf-recherche-groupe { margin-top: 18px; }
body.kf .kf-recherche-groupe h3 { margin: 0 0 10px; font-family: var(--kf-pixel); font-size: 1rem; color: var(--kf-or); }
body.kf .kf-recherche-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
body.kf .kf-recherche-carte { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--kf-texte); text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s var(--kf-rebond, ease); }
body.kf .kf-recherche-carte:hover, body.kf .kf-recherche-carte.actif { background: rgba(180, 124, 255, 0.16); border-color: rgba(242, 193, 78, 0.5); color: #fff; transform: translateY(-2px); }
body.kf .kf-recherche-carte img, body.kf .kf-recherche-carte .kf-recherche-icone { width: 40px; height: 40px; flex: none; border-radius: 6px; image-rendering: pixelated; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); color: var(--kf-or); font-size: 1.1rem; }
body.kf .kf-recherche-texte { display: flex; flex-direction: column; min-width: 0; }
body.kf .kf-recherche-texte strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.kf .kf-recherche-texte small { color: var(--kf-texte-2); opacity: 0.75; }
@media (max-width: 767.98px) {
    body.kf .kf-recherche-entete { flex-direction: column; }
    body.kf .kf-recherche-type { flex-basis: auto; }
}
@media (max-width: 1199.98px) { body.kf .kf-recherche { margin: 8px 0 0; } body.kf .kf-recherche-bouton { width: 100%; justify-content: flex-start; } }

/* 1/11 : résumé du panier (menu de la barre du haut et colonne de droite de la boutique) */
body.kf .kf-mini-panier { width: 340px; max-width: calc(100vw - 24px); padding: 14px; }
body.kf .kf-mini-panier-titre { font-family: var(--kf-pixel); font-weight: 700; font-size: 1rem; color: var(--kf-or); margin-bottom: 10px; }
body.kf .kf-resume-panier { display: flex; flex-direction: column; gap: 12px; }
body.kf .kf-resume-vide { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 0; color: var(--kf-texte-2); }
body.kf .kf-resume-vide i { font-size: 1.8rem; opacity: 0.6; }
body.kf .kf-resume-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
body.kf .kf-resume-liste li { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
body.kf .kf-resume-liste img { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; flex: none; }
body.kf .kf-resume-nom { flex: 1; min-width: 0; font-size: 0.9rem; line-height: 1.25; }
body.kf .kf-resume-prix { font-family: var(--kf-pixel); font-weight: 700; white-space: nowrap; }
body.kf .kf-resume-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--kf-pixel); }
body.kf .kf-resume-total strong { color: var(--kf-or); font-size: 1.15rem; }
body.kf .kf-panier-cote { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--kf-surface); border: 2px solid rgba(180, 124, 255, 0.22); border-radius: 10px; transition: box-shadow 0.3s ease, border-color 0.3s ease; }
body.kf .kf-panier-cote.kf-panier-ajout { border-color: var(--kf-or); box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.25), 0 0 26px rgba(242, 193, 78, 0.25); }
body.kf .kf-panier-cote-pour { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
body.kf .kf-panier-cote-pour img { border-radius: 4px; image-rendering: pixelated; flex: none; }
body.kf .kf-panier-cote-pour > span { display: flex; flex-direction: column; min-width: 0; }
body.kf .kf-panier-cote-pour strong { font-family: var(--kf-pixel); overflow-wrap: anywhere; }
@media (max-width: 1199.98px) { body.kf .kf-panier-cote { position: static; margin-top: 24px; } }
/* ordinateur : panneau fixe sur toute la hauteur à droite, liste au milieu, total et Payer collés en bas */
@media (min-width: 1200px) {
    /* sous la barre du menu (Artur, 1/11 : « ne pas passer sur la bordure du haut ») : la barre garde toute la largeur,
       seul le contenu se décale */
    body.kf:has(#kf-panier-cote) .kf-page { padding-right: 340px; }
    body.kf .kf-panier-cote { position: fixed; top: var(--kf-hauteur-barre, 74px); right: 0; bottom: 0; width: 340px; z-index: 1010; border-radius: 0; border-width: 2px 0 0 2px; padding: 22px 20px; gap: 14px; overflow: hidden; }
    body.kf .kf-panier-cote .kf-resume-panier { flex: 1; min-height: 0; }
    body.kf .kf-panier-cote .kf-resume-liste { flex: 1; max-height: none; min-height: 0; }
    body.kf .kf-panier-cote .kf-resume-vide { flex: 1; justify-content: center; }
    body.kf .kf-panier-cote .kf-resume-total { margin-top: auto; }
}

/* 1/11 (Artur : « aligne les boutons Ajouter au panier ») : bouton en bas de chaque carte, sur une ligne */
body.kf #shop .card .card-title { font-size: 1.1rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.kf #shop .kf-carte-ajout { white-space: nowrap; font-size: 0.9rem; padding-left: 0.4rem; padding-right: 0.4rem; overflow: hidden; text-overflow: ellipsis; }

/* 1/11 : chargement KingFight, la couronne du pack dont le contour est parcouru par un trait doré */
body.kf .kf-chargement { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(8, 4, 16, 0.42); backdrop-filter: blur(2px); }
body.kf .kf-chargement[hidden] { display: none; }
body.kf .kf-chargement svg { overflow: visible; filter: drop-shadow(0 0 6px rgba(242, 193, 78, 0.55)); }
body.kf .kf-chargement path { fill: none; stroke-width: 1.3; stroke-linejoin: miter; }
body.kf .kf-chargement-fond { stroke: rgba(255, 255, 255, 0.14); }
body.kf .kf-chargement-trait { stroke: #ffd86a; stroke-linecap: square; stroke-dasharray: 34 86; animation: kf-trace 1.3s linear infinite; }
@keyframes kf-trace { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
/* animations réduites : le reste du site est figé (plus haut), le chargement tourne lentement (il dit que ça charge) */
@media (prefers-reduced-motion: reduce) { body.kf .kf-chargement .kf-chargement-trait { animation: kf-trace 3.2s linear infinite !important; } }

/* ================================================================== 1/11 : animations (Artur : « comme Wynncraft »)
   rebond des cartes, reflet de lumière au survol, liseré doré qui tourne sur la bannière KingPlus, icônes qui
   flottent, blocs qui apparaissent en fondu au défilement (kingfight.js), fenêtres qui s'ouvrent en zoom. Pas
   d'étincelles. */
:root { --kf-rebond: cubic-bezier(0.44, 0.51, 0.53, 1.94); }

/* cartes de la boutique : soulèvement avec rebond, image qui se rapproche, reflet qui traverse */
body.kf #shop .card { position: relative; overflow: hidden; transition: transform 0.2s var(--kf-rebond), box-shadow 0.25s ease, border-color 0.25s ease; }
body.kf #shop .card:hover { transform: translateY(-6px) scale(1.02); border-color: rgba(242, 193, 78, 0.55); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), 0 0 22px rgba(180, 124, 255, 0.18); }
body.kf #shop .card > a:first-child { display: block; overflow: hidden; }
body.kf #shop .card-img-top { transition: transform 0.45s ease; }
body.kf #shop .card:hover .card-img-top { transform: scale(1.06); }
body.kf #shop .card::after, body.kf .kf-btn-or::after { content: ""; position: absolute; top: -25%; left: -70%; width: 45%; height: 150%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-18deg); pointer-events: none; opacity: 0; }
body.kf #shop .card:hover::after { animation: kf-reflet 0.85s ease forwards; }
body.kf .kf-btn-or { position: relative; overflow: hidden; }
body.kf .kf-btn-or:hover::after { animation: kf-reflet 0.7s ease forwards; }
@keyframes kf-reflet { 0% { left: -70%; opacity: 1; } 100% { left: 135%; opacity: 1; } }

/* boutons : enfoncés au clic */
body.kf .btn { transition: transform 0.1s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
body.kf .btn:active { transform: scale(0.96); }

/* bannière KingPlus : un liseré doré tourne autour du cadre */
body.kf .kf-kingplus { border: 2px solid transparent; background: linear-gradient(135deg, #22113a 0%, #160e20 55%, #2b1645 100%) padding-box, linear-gradient(90deg, #7a5212 0%, #7a5212 32%, #ffe58a 50%, #7a5212 68%, #7a5212 100%) border-box; background-size: 100% 100%, 50% 100%; animation: kf-lisere 6s linear infinite; }
/* le dégradé du cadre fait la moitié de la largeur et se répète : il avance d'un motif par tour, sans saut */
@keyframes kf-lisere { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 100% 0; } }
/* ses icônes flottent doucement, chacune à son rythme */
body.kf .kf-kingplus-icone img { animation: kf-flotte 3.6s ease-in-out infinite; }
body.kf .kf-kingplus-avantages li:nth-child(2n) .kf-kingplus-icone img { animation-delay: -1.2s; }
body.kf .kf-kingplus-avantages li:nth-child(3n) .kf-kingplus-icone img { animation-delay: -2.4s; }
@keyframes kf-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* fenêtre d'un article : zoom léger avec rebond */
body.kf .modal.fade .modal-dialog { transform: scale(0.94); opacity: 0; transition: transform 0.22s var(--kf-rebond), opacity 0.18s ease; }
body.kf .modal.show .modal-dialog { transform: none; opacity: 1; }

/* blocs qui apparaissent en fondu glissé au défilement (classes posées par kingfight.js) ; une animation plutôt qu'une
   transition : les cartes gardent leur propre transition (rebond au survol) */
body.kf .kf-apparait:not(.kf-visible) { opacity: 0; }
body.kf .kf-apparait.kf-visible { animation: kf-entree 0.55s ease var(--kf-delai, 0s) backwards; }
@keyframes kf-entree { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes kf-fondu { from { opacity: 0; } to { opacity: 1; } }
@media print { body.kf .kf-apparait { opacity: 1 !important; animation: none !important; } }

@media (prefers-reduced-motion: reduce) {
    body.kf .kf-kingplus-icone img { animation: none; }
    body.kf .kf-apparait.kf-visible { animation-name: kf-fondu; }
    body.kf #shop .card:hover { transform: translateY(-3px); }
    body.kf .kf-kingplus { animation-duration: 14s; }
}

/* 1/11 : News (notes de mise à jour) */
body.kf .kf-news { display: flex; flex-direction: column; gap: 22px; }
body.kf .kf-news-entete { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; }
body.kf .kf-news-titre { margin: 0; color: var(--kf-or); text-shadow: 3px 3px 0 #5a4210; }
body.kf .kf-news-recherche { position: relative; display: flex; align-items: center; }
body.kf .kf-news-recherche i { position: absolute; left: 12px; color: #8f86a6; }
body.kf .kf-news-recherche input { width: 260px; max-width: 100%; height: 40px; padding: 0 12px 0 36px; border-radius: 8px; border: 1px solid rgba(180, 124, 255, 0.25); background: #0f0a17; color: var(--kf-texte); }
body.kf .kf-news-recherche input:focus { outline: none; border-color: var(--kf-or); }
body.kf .kf-news-vide { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; border: 2px dashed rgba(180, 124, 255, 0.25); border-radius: 12px; color: var(--kf-texte-2); }
body.kf .kf-news-vide i { font-size: 2.4rem; color: var(--kf-violet); }
body.kf .kf-news-pastilles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.kf .kf-news-pastille { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border-radius: 4px; font-family: var(--kf-pixel); font-size: 0.78rem; font-weight: 700; }
body.kf .kf-news-patch { background: rgba(180, 124, 255, 0.2); color: #d9c2ff; border: 1px solid rgba(180, 124, 255, 0.45); }
body.kf .kf-news-epinglee { background: rgba(242, 193, 78, 0.18); color: var(--kf-or); border: 1px solid rgba(242, 193, 78, 0.45); }
body.kf .kf-news-date { color: var(--kf-texte-2); opacity: 0.8; font-size: 0.88rem; }
/* la dernière news en grand */
body.kf .kf-news-une { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; border-radius: 12px; border: 2px solid rgba(242, 193, 78, 0.35); background: linear-gradient(135deg, #22113a, #160e20); color: var(--kf-texte); text-decoration: none; transition: transform 0.2s var(--kf-rebond, ease), border-color 0.25s ease, box-shadow 0.25s ease; }
body.kf .kf-news-une:hover { transform: translateY(-4px); border-color: var(--kf-or); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45); color: var(--kf-texte); }
body.kf .kf-news-une img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
body.kf .kf-news-une-texte { display: flex; flex-direction: column; gap: 12px; padding: 26px; justify-content: center; }
body.kf .kf-news-une h2 { margin: 0; font-size: 1.7rem; line-height: 1.2; }
body.kf .kf-news-une p { margin: 0; color: var(--kf-texte-2); }
body.kf .kf-news-une .btn { align-self: flex-start; }
body.kf .kf-news-une:not(:has(img)) { grid-template-columns: 1fr; }
/* les autres en cartes */
body.kf .kf-news-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
body.kf .kf-news-carte { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; border: 2px solid rgba(180, 124, 255, 0.2); background: var(--kf-surface); color: var(--kf-texte); text-decoration: none; transition: transform 0.2s var(--kf-rebond, ease), border-color 0.25s ease; }
body.kf .kf-news-carte:hover { transform: translateY(-4px); border-color: rgba(242, 193, 78, 0.55); color: var(--kf-texte); }
body.kf .kf-news-carte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
body.kf .kf-news-carte-texte { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
body.kf .kf-news-carte h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
body.kf .kf-news-carte p { margin: 0; color: var(--kf-texte-2); font-size: 0.92rem; }
@media (max-width: 767.98px) { body.kf .kf-news-une { grid-template-columns: 1fr; } body.kf .kf-news-une img { min-height: 0; aspect-ratio: 16 / 9; } }
/* une news : texte mis en page pour les notes de mise à jour */
body.kf .kf-news-article { max-width: 900px; margin: 0 auto; width: 100%; }
body.kf .kf-news-retour { align-self: flex-start; color: var(--kf-texte-2); text-decoration: none; }
body.kf .kf-news-retour:hover { color: var(--kf-or); }
body.kf .kf-news-article-entete { display: flex; flex-direction: column; gap: 10px; }
body.kf .kf-news-article-entete h1 { margin: 0; font-size: 2.2rem; line-height: 1.15; }
body.kf .kf-news-article-image { width: 100%; border-radius: 12px; border: 2px solid rgba(180, 124, 255, 0.25); }
body.kf .kf-news-contenu { padding: 26px 28px; border-radius: 12px; background: var(--kf-surface); border: 1px solid rgba(180, 124, 255, 0.18); line-height: 1.65; font-size: 1.02rem; }
body.kf .kf-news-contenu h2, body.kf .kf-news-contenu h3, body.kf .kf-news-contenu h4 { margin: 1.4em 0 0.5em; padding-bottom: 6px; border-bottom: 2px solid rgba(242, 193, 78, 0.25); color: var(--kf-or); font-size: 1.3rem; }
body.kf .kf-news-contenu > :first-child { margin-top: 0; }
body.kf .kf-news-contenu ul { list-style: none; padding-left: 0; }
body.kf .kf-news-contenu ul li { position: relative; padding-left: 22px; margin: 6px 0; }
body.kf .kf-news-contenu ul li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 8px; height: 8px; background: var(--kf-violet); transform: rotate(45deg); }
body.kf .kf-news-contenu img { max-width: 100%; height: auto; border-radius: 8px; }
body.kf .kf-news-contenu code { background: rgba(180, 124, 255, 0.14); color: #e7d8ff; padding: 1px 6px; border-radius: 4px; }
body.kf .kf-news-contenu blockquote { margin: 1em 0; padding: 10px 16px; border-left: 4px solid var(--kf-or); background: rgba(242, 193, 78, 0.08); }
body.kf .kf-news-actions { display: flex; gap: 12px; }
body.kf .kf-news-commentaires { display: flex; flex-direction: column; gap: 12px; }
body.kf .kf-news-commentaire { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--kf-surface); border: 1px solid rgba(255, 255, 255, 0.06); }
body.kf .kf-news-commentaire img { border-radius: 6px; flex: none; image-rendering: pixelated; }
body.kf .kf-news-commenter { padding: 14px; border-radius: 10px; background: var(--kf-surface); border: 1px solid rgba(255, 255, 255, 0.06); }

/* 1/11 : fiche d'un event au survol (accueil, « Ce soir sur KingFight ») */
body.kf .kf-bulle-event { position: fixed; z-index: 1050; max-width: 380px; padding: 12px 14px; background: rgba(16, 0, 16, 0.96); border: 2px solid #4a17b8; box-shadow: 0 0 0 2px rgba(16, 0, 16, 0.96), 0 14px 30px rgba(0, 0, 0, 0.5); color: #fff; pointer-events: none; }
body.kf .kf-bulle-event[hidden] { display: none; }
body.kf .kf-fiche-regles { margin: 0; padding-left: 18px; color: #e0e0ff; font-size: 0.92rem; line-height: 1.35; }
body.kf .kf-fiche-regles li { margin: 2px 0; }
body.kf .kf-fiche-malediction { color: #d9a8ff; font-size: 0.92rem; line-height: 1.35; }
body.kf .kf-fiche-malediction span { color: #ff55ff; font-weight: 700; }
body.kf .kf-ligne-lien { color: inherit; text-decoration: none; }
body.kf .kf-ligne-lien:hover, body.kf .kf-ligne-lien:focus-visible { color: var(--kf-or); text-decoration: underline; text-underline-offset: 3px; }

/* 1/11 : pancarte suspendue de l'IP, au centre sous la barre du menu (Artur) ; accrochée à la barre collée en haut,
   elle reste à l'écran ; un clic copie l'IP. Pixel art x2 (img/pancarte). */
body.kf .kf-pancarte { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 1; pointer-events: none; }
body.kf .kf-pancarte-corps { position: relative; display: block; margin: 0; padding: 14px 8px 4px; border: 0; background: none; cursor: pointer; pointer-events: auto; transform-origin: 50% 0; }
body.kf .kf-pancarte-chaine { position: absolute; top: 0; width: 8px; height: 15px; background: url("../img/pancarte/chaine.png") center top / 8px 12px repeat-y; image-rendering: pixelated; }
body.kf .kf-pancarte-chaine:first-child { left: 26px; }
body.kf .kf-pancarte-chaine:nth-child(2) { right: 26px; }
body.kf .kf-pancarte-planche {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 36px; padding: 0 12px 0 14px;
    background: url("../img/pancarte/planches.png") left top / 96px 36px repeat-x; image-rendering: pixelated;
    color: #fff6e0; font-family: var(--kf-pixel); font-size: 18px; line-height: 1; white-space: nowrap; text-shadow: 2px 2px 0 #2b1a0d;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4));
}
body.kf .kf-pancarte-planche::before, body.kf .kf-pancarte-planche::after { content: ""; position: absolute; top: 0; width: 8px; height: 36px; background: url("../img/pancarte/bord-gauche.png") 0 0 / 8px 36px no-repeat; image-rendering: pixelated; }
body.kf .kf-pancarte-planche::before { left: -8px; }
body.kf .kf-pancarte-planche::after { right: -8px; background-image: url("../img/pancarte/bord-droit.png"); }
body.kf .kf-pancarte-texte { display: inline-block; text-align: center; padding-top: 2px; }
body.kf .kf-pancarte-planche i { font-size: 14px; color: #fff6e0; filter: drop-shadow(2px 2px 0 #2b1a0d); }
body.kf .kf-pancarte-corps:hover { animation: kf-balance 1.6s ease-in-out; }
body.kf .kf-pancarte-corps:hover .kf-pancarte-texte, body.kf .kf-pancarte-corps:hover i { color: #ffd25e; }
body.kf .kf-pancarte-corps:focus-visible { outline: none; }
body.kf .kf-pancarte-corps:focus-visible .kf-pancarte-planche { outline: 3px solid var(--kf-or); outline-offset: 3px; }
body.kf .kf-pancarte-corps.copiee .kf-pancarte-texte, body.kf .kf-pancarte-corps.copiee i { color: #8dff7a; }
@keyframes kf-balance { 0% { transform: rotate(0); } 20% { transform: rotate(2.5deg); } 45% { transform: rotate(-2deg); } 70% { transform: rotate(1deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { body.kf .kf-pancarte-corps:hover { animation-duration: 2.4s; } }

/* 1/11 : Boutique au centre de la barre, juste au-dessus de la pancarte (Artur : « met le au centre ») : le logo et
   Accueil, News, Jeu à gauche, Vote, Classements, Règlement puis le panier et le compte à droite. Il faut la place :
   en dessous de 1920 px, le bouton reste dans le menu, entre Jeu et Vote. */
@media (min-width: 1920px) {
    body.kf .kf-barre > .kf-conteneur { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 14px; max-width: none; padding-left: 110px; padding-right: 110px; }
    body.kf .kf-barre #kf-menu { display: contents !important; }
    body.kf .kf-barre .kf-marque { grid-column: 1; grid-row: 1; justify-self: start; }
    body.kf .kf-barre .kf-menu-gauche { grid-column: 1; grid-row: 1; justify-self: end; }
    body.kf .kf-barre .kf-menu-centre { grid-column: 2; grid-row: 1; }
    body.kf .kf-barre .kf-barre-droite { grid-column: 3; grid-row: 1; min-width: 0; }
    body.kf .kf-barre .kf-menu-boutique { margin: 0; }
}

/* 1/11 : offres de la boutique (Artur, « comme Wynncraft ») : bonus, total, base barrée, prix sur le bouton du panier,
   − / quantité / + quand l'offre est déjà dans le panier ; lignes du panier avec quantité et poubelle */
body.kf .kf-offre .card-body { gap: 6px; }
body.kf .kf-offre-bonus { display: inline-block; padding: 3px 10px; background: var(--kf-violet); color: #fff; border: 2px solid #000; font-family: var(--kf-pixel); font-size: 0.85rem; line-height: 1.2; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25); }
body.kf .kf-offre-titre { margin: 4px 0 0; font-family: var(--kf-pixel); font-size: 1.45rem; color: #fff; }
body.kf .kf-offre-base { color: var(--kf-texte-2); font-size: 0.95rem; opacity: 0.8; }
body.kf .kf-offre-achat { width: 100%; margin-top: auto; padding-top: 12px; }
body.kf .kf-offre-achat > .btn { height: 48px; font-size: 1.05rem; }
body.kf .kf-offre-ancien-prix { font-size: 0.85em; opacity: 0.7; font-weight: 400; }
body.kf .kf-offre-quantite { display: flex; align-items: stretch; gap: 6px; height: 48px; }
body.kf .kf-offre-quantite .btn { flex: 0 0 42px; padding: 0; font-size: 1.2rem; }
body.kf .kf-offre-quantite .btn:disabled { opacity: 0.45; }
body.kf .kf-offre-quantite > span { flex: 1; min-width: 0; display: grid; place-items: center; padding: 0 4px; background: var(--kf-surface-2); border: 2px solid #000; font-family: var(--kf-pixel); font-size: 0.9rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.kf .kf-resume-nom { display: flex; flex-direction: column; gap: 2px; }
body.kf .kf-resume-quantite { flex: none; padding: 2px 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); font-family: var(--kf-pixel); font-size: 0.85rem; color: #fff; }
body.kf .kf-resume-retirer { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--kf-texte-2); font-size: 1rem; transition: color 0.15s ease, background-color 0.15s ease; }
body.kf .kf-resume-retirer:hover, body.kf .kf-resume-retirer:focus-visible { color: #ff6b6b; background: rgba(255, 80, 80, 0.12); }

/* 1/11 : acheter pour un ami : bouton « Offrir » dans l'en-tête du panier, champ du pseudo */
body.kf .kf-panier-cote-pour { display: flex; align-items: center; gap: 12px; }
body.kf .kf-panier-cote-pour > span { flex: 1; min-width: 0; }
body.kf .kf-panier-cote-pour .kf-discret i { color: var(--kf-or); }
body.kf .kf-panier-pour-bouton { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; font-family: var(--kf-pixel); font-size: 0.85rem; }
body.kf .kf-offrir { display: flex; flex-direction: column; gap: 4px; margin: -4px 0 0; }
body.kf .kf-offrir[hidden] { display: none; }
body.kf .kf-offrir label { display: flex; flex-direction: column; gap: 4px; margin: 0; width: 100%; }
body.kf .kf-offrir-champ { display: flex; gap: 6px; }
body.kf .kf-offrir-champ .form-control { flex: 1; min-width: 0; height: 40px; }
body.kf .kf-offrir-champ .btn { flex: none; height: 40px; padding: 0 12px; }
body.kf .kf-offrir-note { margin: -4px 0 0; font-size: 0.85rem; color: var(--kf-texte-2); }
body.kf .kf-panier-pour-page { display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin-bottom: 14px; }
body.kf .kf-mini-panier-cadeau { margin: -4px 0 10px; font-size: 0.9rem; color: var(--kf-texte-2); }
body.kf .kf-mini-panier-cadeau i { color: var(--kf-or); }
body.kf .kf-mini-panier-cadeau strong { color: #fff; }

/* 1/11 (Artur) : visuel de la boutique animé au survol de la carte : fond et rayons qui tournent en CSS, illustration en planche d'images */
body.kf .kf-visuel { position: relative; display: block; overflow: hidden; }
body.kf .kf-visuel > img { display: block; width: 100%; height: auto; }
body.kf .kf-visuel-anim { position: absolute; inset: 0; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; overflow: hidden; background: radial-gradient(circle at 50% var(--kf-cy), rgba(var(--kf-accent), 0.65) 0, rgba(var(--kf-accent), 0.2) 28%, rgba(var(--kf-accent), 0) 62%), linear-gradient(180deg, var(--kf-haut), var(--kf-bas)); }
body.kf .kf-visuel-anim::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%); box-shadow: inset 0 0 0 2px rgba(var(--kf-accent), 0.35); }
body.kf .kf-visuel-rayons { position: absolute; left: 50%; top: var(--kf-cy); width: 180%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(var(--kf-accent), 0.11) 0 8deg, rgba(var(--kf-accent), 0) 8deg 30deg); -webkit-mask-image: radial-gradient(closest-side, #000 0, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(closest-side, #000 0, rgba(0, 0, 0, 0) 100%); }
body.kf .kf-visuel-objet { position: absolute; left: 0; top: 0; z-index: 1; width: 1600%; height: 100%; background-size: 100% 100%; background-repeat: no-repeat; }
body.kf .kf-visuel.kf-anime .kf-visuel-anim { opacity: 1; }
body.kf .kf-visuel.kf-anime .kf-visuel-rayons { animation: kf-visuel-rayons 14s linear infinite; }
body.kf .kf-visuel.kf-anime .kf-visuel-objet { animation: kf-visuel-planche 1.8s steps(16) infinite; }
@keyframes kf-visuel-rayons { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes kf-visuel-planche { to { transform: translateX(-100%); } }

/* ================================================================== 1/11 : STYLE D, « parchemin et bois » (choix final d'Artur, à la place du relief pixel)
   Fond sombre, cadres clairs en parchemin, titres et boutons en bois comme la pancarte de l'IP, gros boutons dorés.
   Cette section passe après toutes les autres et les remplace. Dans un cadre, les jetons de texte valent de l'encre ;
   les bulles du jeu (fiche d'un event, infobulles) restent sombres. */
body.kf {
    --kf-bois: repeating-linear-gradient(180deg, #9c6b3a 0 9px, #8a5c2f 9px 10px, #a0703e 10px 19px, #8a5c2f 19px 20px);
    --kf-bois-survol: repeating-linear-gradient(180deg, #ad7c49 0 9px, #9a6b3b 9px 10px, #b1804c 10px 19px, #9a6b3b 19px 20px);
    --kf-bois-fonce: repeating-linear-gradient(180deg, #4a2e14 0 9px, #3f2610 9px 10px, #4f3217 10px 19px, #3f2610 19px 20px);
    --kf-parchemin: radial-gradient(120% 90% at 30% 20%, #f3e6c6 0%, #e6d3a8 60%, #d6bf8f 100%);
    --kf-dore: linear-gradient(180deg, #ffd25e, #e0a521);
    --kf-dore-survol: linear-gradient(180deg, #ffdf85, #eab030);
    --kf-encre: #3b2410; --kf-encre-forte: #2b1a0d; --kf-encre-douce: #654526; --kf-ambre: #7a4e0c; --kf-lien: #55288f; --kf-rouge: #a3281f;
    --kf-brun: #4a2e14; --kf-filet: #b9975f; --kf-creme: #f8eed6; --kf-creme-bois: #fff6e0;
    --kf-voile: rgba(255, 255, 255, 0.35); --kf-voile-survol: rgba(255, 255, 255, 0.62);
    --kf-ombre-cadre: inset 0 0 0 2px #f8eed6, inset 0 0 0 4px #b9975f, 0 6px 0 #2a1a0b;
    --kf-ombre-bois: inset 0 2px 0 #c08a4f, 0 4px 0 #2b1a0d;
    --kf-violet: #f2c14e;
    --bs-link-color: #f2c14e;
}
body.kf ::selection { background: #7a4e0c; color: #fff6e0; }
body.kf a:hover { color: var(--kf-creme-bois); }

/* les cadres en parchemin */
body.kf :is(.kf-panneau, .card, .kf-news-une, .kf-news-carte, .kf-news-contenu, .kf-news-commentaire, .kf-news-commenter, .modal-content, .dropdown-menu, .kf-boutique-compte, .kf-panier-cote, .kf-kingplus):not(.kfp *) {
    --kf-texte: var(--kf-encre); --kf-texte-2: #4a3220; --kf-texte-3: var(--kf-encre-douce); --kf-violet: var(--kf-lien);
    --di-body-color: var(--kf-encre); --di-body-color-rgb: 59, 36, 16; --di-body-color-emphasis: var(--kf-encre-forte); --di-emphasis-color: var(--kf-encre-forte); --di-emphasis-color-rgb: 43, 26, 13;
    --di-secondary-color: var(--kf-encre-douce); --di-tertiary-color: var(--kf-encre-douce); --di-border-color: var(--kf-filet); --di-border-color-translucent: var(--kf-filet);
    --di-link-color: var(--kf-lien); --di-link-color-rgb: 85, 40, 143; --di-link-hover-color: var(--kf-encre-forte); --di-link-hover-color-rgb: 43, 26, 13; --di-heading-color: var(--kf-encre-forte);
    --di-card-color: var(--kf-encre); --di-card-bg: transparent; --di-card-cap-bg: transparent; --di-card-border-color: var(--kf-brun); --di-card-title-color: var(--kf-encre-forte);
    --di-table-color: var(--kf-encre); --di-table-bg: transparent; --di-table-border-color: var(--kf-filet); --di-table-striped-color: var(--kf-encre); --di-table-striped-bg: var(--kf-voile); --di-table-hover-color: var(--kf-encre-forte); --di-table-hover-bg: var(--kf-voile-survol);
    --di-list-group-color: var(--kf-encre); --di-list-group-bg: var(--kf-voile); --di-list-group-border-color: var(--kf-filet); --di-list-group-action-color: var(--kf-encre); --di-list-group-action-hover-color: var(--kf-encre-forte); --di-list-group-action-hover-bg: var(--kf-voile-survol);
    background: var(--kf-parchemin); border: 3px solid var(--kf-brun); border-radius: 6px; box-shadow: var(--kf-ombre-cadre); color: var(--kf-encre);
}
body.kf :is(.kf-panneau, .card, .kf-news-une, .kf-news-carte, .kf-news-contenu, .kf-news-commentaire, .kf-news-commenter, .modal-content, .kf-boutique-compte, .kf-panier-cote, .kf-kingplus):not(.kfp *) a:not(.btn):hover { color: var(--kf-encre-forte); }
body.kf :is(.kf-panneau, .card, .kf-news-une, .kf-news-carte, .kf-news-contenu, .modal-content, .kf-kingplus) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(.kfp *) { color: var(--kf-encre-forte); }
body.kf :is(.kf-panneau, .card, .modal-content) :is(.bg-body-secondary, .bg-body-tertiary):not(.kfp *) { background-color: var(--kf-voile) !important; }
body.kf :is(.kf-panneau, .card, .modal-content, .kf-panier-cote, .dropdown-menu) :is(a, button, input):focus-visible { outline-color: var(--kf-lien); }
body.kf .card-header:not(.kfp *), body.kf .card-footer:not(.kfp *) { background: var(--kf-bois); border-color: var(--kf-encre-forte); color: var(--kf-creme-bois); text-shadow: 2px 2px 0 var(--kf-encre-forte); }
body.kf .card-header:not(.kfp *) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: var(--kf-creme-bois) !important; }
body.kf .card-footer:not(.kfp *) { background: transparent; border-top: 2px dashed var(--kf-filet); color: var(--kf-encre); text-shadow: none; }
body.kf .alert { border: 3px solid var(--kf-brun); border-radius: 5px; background: var(--kf-creme); color: var(--kf-encre); }
body.kf .alert-warning { background: #ffe9ae; border-color: #8a6a00; color: #4a3200; }
body.kf .alert-info { background: #d6e6f7; border-color: #2f5fc0; color: #173a78; }
body.kf .alert-success { background: #cdeac0; border-color: #1f6b2a; color: #123d18; }
body.kf .alert-danger { background: #f6cfca; border-color: #a3281f; color: #5a1410; }
body.kf .alert a { color: inherit; font-weight: 700; }

/* boutons : dorés pour acheter, en bois pour le reste ; au clic ils s'enfoncent dans leur ombre */
body.kf .btn { border-radius: 5px; }
body.kf .kf-btn-or, body.kf .btn-primary {
    background: var(--kf-dore) !important; border: 3px solid var(--kf-encre-forte) !important; box-shadow: inset 0 3px 0 #fff0b3, 0 4px 0 var(--kf-encre-forte) !important; color: #3a2600 !important;
}
body.kf .kf-btn-or:hover, body.kf .btn-primary:hover { background: var(--kf-dore-survol) !important; color: #3a2600 !important; }
body.kf .kf-btn-or.active { box-shadow: inset 0 3px 0 #fff0b3, 0 4px 0 var(--kf-encre-forte), 0 0 0 3px rgba(255, 246, 224, 0.4) !important; }
body.kf .kf-btn-sombre, body.kf .btn-secondary, body.kf .btn-light, body.kf .btn-dark, body.kf .btn-outline-primary, body.kf .btn-outline-secondary, body.kf .btn-outline-tertiary, body.kf .btn-outline-light, body.kf .btn-outline-dark {
    background: var(--kf-bois) !important; border: 3px solid var(--kf-encre-forte) !important; box-shadow: var(--kf-ombre-bois) !important; color: var(--kf-creme-bois) !important; text-shadow: 2px 2px 0 var(--kf-encre-forte);
}
body.kf .kf-btn-sombre:hover, body.kf .btn-secondary:hover, body.kf .btn-light:hover, body.kf .btn-dark:hover, body.kf .btn-outline-primary:hover, body.kf .btn-outline-secondary:hover, body.kf .btn-outline-tertiary:hover, body.kf .btn-outline-light:hover, body.kf .btn-outline-dark:hover {
    background: var(--kf-bois-survol) !important; color: #ffffff !important;
}
body.kf .btn-success { background: #2f8f3e !important; border: 3px solid var(--kf-encre-forte) !important; box-shadow: inset 0 2px 0 #6fd67c, 0 4px 0 var(--kf-encre-forte) !important; color: #fff !important; text-shadow: 2px 2px 0 #14401b; }
body.kf .btn-danger { background: #b8322a !important; border: 3px solid var(--kf-encre-forte) !important; box-shadow: inset 0 2px 0 #e2685f, 0 4px 0 var(--kf-encre-forte) !important; color: #fff3e0 !important; text-shadow: 2px 2px 0 #5a1410; }
body.kf .btn:active { transform: translateY(4px); }
body.kf .kf-btn-or:active, body.kf .btn-primary:active { box-shadow: inset 0 3px 0 #fff0b3 !important; }
body.kf .kf-btn-sombre:active, body.kf .btn-secondary:active, body.kf .btn-light:active, body.kf .btn-dark:active { box-shadow: inset 0 2px 0 #c08a4f !important; }
body.kf .btn-success:active, body.kf .btn-danger:active { box-shadow: none !important; }
body.kf .btn-close { filter: none; }

/* champs : crème, cadre brun */
body.kf .form-control, body.kf .form-select, body.kf .input-group-text, body.kf .kf-news-recherche input, body.kf .kf-recherche-type, body.kf .kf-recherche-champ {
    background-color: var(--kf-creme); border: 3px solid var(--kf-brun); border-radius: 5px; color: var(--kf-encre-forte);
}
body.kf .form-control::placeholder { color: #80603c; }
body.kf .form-control:focus, body.kf .form-select:focus, body.kf .kf-news-recherche input:focus, body.kf .kf-recherche-champ:focus-within, body.kf .kf-recherche-type:focus-within { background-color: #fffaf0; border-color: #b8860b; box-shadow: 0 0 0 3px rgba(224, 165, 33, 0.35); color: var(--kf-encre-forte); }
body.kf .form-select { --di-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232b1a0d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
body.kf .form-check-input { background-color: var(--kf-creme); border: 3px solid var(--kf-brun); border-radius: 3px; }
body.kf .form-check-input:checked { background-color: #e0a521; border-color: var(--kf-encre-forte); }
body.kf .form-check-input:checked[type="checkbox"] { --di-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%232a1a00' stroke-linecap='square' stroke-width='3.4' d='m5 10 3.5 3.5L15 7'/%3e%3c/svg%3e"); }

/* petits boutons et onglets du thème */
body.kf .kf-onglet, body.kf .kf-categorie, body.kf .kf-pied-reseaux a, body.kf .pagination .page-link {
    background: var(--kf-bois); border: 3px solid var(--kf-encre-forte); border-radius: 5px; box-shadow: var(--kf-ombre-bois); color: var(--kf-creme-bois); text-shadow: 2px 2px 0 var(--kf-encre-forte);
}
body.kf .kf-onglet:hover, body.kf .kf-categorie:hover, body.kf .kf-pied-reseaux a:hover, body.kf .pagination .page-link:hover { background: var(--kf-bois-survol); color: #ffffff; }
body.kf .kf-onglet.active, body.kf .kf-onglet.actif, body.kf .kf-categorie.actif, body.kf .pagination .page-item.active .page-link {
    background: var(--kf-dore); box-shadow: inset 0 3px 0 #fff0b3, 0 4px 0 var(--kf-encre-forte); color: #3a2600; text-shadow: none;
}
body.kf .pagination { --di-pagination-border-radius: 5px; gap: 6px; }
body.kf .pagination .page-link { margin: 0 !important; }
body.kf .kf-etape-n { background: var(--kf-dore); border: 3px solid var(--kf-encre-forte); border-radius: 5px; box-shadow: inset 0 3px 0 #fff0b3, 0 3px 0 var(--kf-encre-forte); color: #3a2600; }
body.kf .kf-puce { background: var(--kf-bois); border: 3px solid var(--kf-encre-forte); border-radius: 5px; box-shadow: var(--kf-ombre-bois); color: var(--kf-creme-bois); text-shadow: 2px 2px 0 var(--kf-encre-forte); }
body.kf .kf-compte-rebours { background: #b8322a; border: 2px solid #5a1410; border-radius: 3px; color: #fff3e0; }
body.kf .kf-offre-bonus { background: #b8322a; border: 2px solid #5a1410; border-radius: 3px; box-shadow: none; color: #fff3e0; padding: 3px 12px; text-shadow: 1px 1px 0 #5a1410; }
body.kf .kf-kingplus-offert { background: var(--kf-dore); border: 2px solid var(--kf-encre-forte); border-radius: 3px; color: #3a2600; text-shadow: none; }
body.kf .kf-panier-nombre { background: var(--kf-dore); border: 2px solid var(--kf-encre-forte); border-radius: 3px; color: #3a2600; line-height: 14px; height: 20px; text-shadow: none; }
body.kf .badge { border-radius: 3px; }
body.kf .list-group { border-radius: 4px; }
body.kf .nav-tabs .nav-link { border-radius: 5px 5px 0 0; }
body.kf .nav-pills .nav-link.active { background: var(--kf-dore); color: #3a2600; }

/* barre du haut : une planche, comme la pancarte de l'IP qui y est accrochée */
body.kf .kf-barre { background: var(--kf-bois); border-bottom: 3px solid var(--kf-encre-forte); box-shadow: inset 0 2px 0 #c08a4f, 0 4px 0 rgba(43, 26, 13, 0.7); backdrop-filter: none; }
body.kf .kf-menu .nav-link { color: var(--kf-creme-bois); text-shadow: 2px 2px 0 var(--kf-encre-forte); border-radius: 4px; }
body.kf .kf-menu .nav-link:hover, body.kf .kf-menu .nav-link:focus { background: rgba(43, 26, 13, 0.35); color: #ffffff; }
body.kf .kf-menu .nav-link.active { background: rgba(43, 26, 13, 0.45); box-shadow: inset 0 -3px 0 #ffd25e; color: #ffd25e; }
body.kf .kf-compte, body.kf .kf-recherche-bouton, body.kf .kf-bouton-menu, body.kf .kf-outils .notifications-dropdown > .nav-link {
    background: var(--kf-bois-fonce); border: 3px solid var(--kf-encre-forte); border-radius: 5px; box-shadow: inset 0 2px 0 #6b4a2a; color: var(--kf-creme-bois) !important;
}
body.kf .kf-compte:hover, body.kf .kf-recherche-bouton:hover, body.kf .kf-bouton-menu:hover { background: #5a3a1c; color: #ffffff !important; }
body.kf .kf-recherche-bouton { min-width: 44px; height: 44px; }
body.kf .kf-compte { padding: 3px 10px 3px 3px !important; }
body.kf .kf-compte img { border: 2px solid var(--kf-encre-forte); }
body.kf .kf-reseaux a { color: #d9c7a3; }
body.kf .kf-reseaux a:hover, body.kf .kf-reseaux a:focus-visible { background: rgba(255, 246, 224, 0.12); color: #ffffff; }
body.kf .kf-pancarte-planche { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.55)); }

/* menus déroulants */
body.kf .dropdown-menu { padding: 8px 6px; box-shadow: inset 0 0 0 2px #f8eed6, 0 6px 0 #2a1a0b, 0 14px 30px rgba(0, 0, 0, 0.5); }
body.kf .dropdown-menu .dropdown-item { border-radius: 3px; color: var(--kf-encre); }
body.kf .dropdown-menu .dropdown-item i { color: var(--kf-ambre); }
body.kf .dropdown-menu .dropdown-item:hover, body.kf .dropdown-menu .dropdown-item:focus, body.kf .dropdown-menu .dropdown-item.active, body.kf .dropdown-menu .dropdown-item:active { background: var(--kf-bois); color: var(--kf-creme-bois); text-shadow: 2px 2px 0 var(--kf-encre-forte); }
body.kf .dropdown-menu .dropdown-item:hover i, body.kf .dropdown-menu .dropdown-item:focus i, body.kf .dropdown-menu .dropdown-item.active i { color: var(--kf-creme-bois); }
body.kf .dropdown-divider { border-color: var(--kf-filet); opacity: 1; }

/* fenêtres : titre sur une planche ; la fiche d'un event reste comme la bulle du jeu */
body.kf .modal-header { background: var(--kf-bois); border-bottom: 3px solid var(--kf-encre-forte); border-radius: 3px 3px 0 0; color: var(--kf-creme-bois); }
body.kf .modal-header :is(.modal-title, h1, h2, h3, h4, h5, h6) { color: var(--kf-creme-bois) !important; text-shadow: 2px 2px 0 var(--kf-encre-forte); }
body.kf .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 1; }
body.kf .modal-footer { border-top: 2px dashed var(--kf-filet); }
body.kf .kf-modale-event .modal-body { background: #100010; color: #aaaaaa; box-shadow: inset 0 0 0 2px #2c0a63; border-radius: 0 0 3px 3px; }
body.kf .kf-bulle-event { border: 3px solid #4a17b8; }

/* accueil */
body.kf .kf-titre-section { display: inline-block; align-self: flex-start; padding: 8px 16px 6px; background: var(--kf-bois); border: 3px solid var(--kf-encre-forte); border-radius: 5px; box-shadow: var(--kf-ombre-bois); color: var(--kf-creme-bois) !important; text-shadow: 2px 2px 0 var(--kf-encre-forte); }
body.kf .kf-case { background: #7a5233; border: 0; border-radius: 3px; box-shadow: inset 3px 3px 0 var(--kf-brun), inset -3px -3px 0 #a0703e; }
body.kf .kf-prochain { border-color: var(--kf-brun); }
body.kf .kf-prochain-nom, body.kf .kf-liste-nom, body.kf .kf-ligne-nom, body.kf .kf-etapes strong, body.kf .kf-offre-titre, body.kf .kf-panier-nom, body.kf .kf-panier-somme, body.kf .kf-boutique-pseudo { color: var(--kf-encre-forte); }
body.kf .kf-prochain-quand, body.kf .kf-ligne-points { color: var(--kf-encre); }
body.kf .kf-liste-events li { border-bottom: 2px dashed var(--kf-filet); }
body.kf .kf-liste-events li > button:hover .kf-liste-nom { color: var(--kf-ambre); }
body.kf .kf-cliquable:hover, body.kf .kf-cliquable:focus-visible { border-color: var(--kf-encre-forte) !important; }
body.kf button.kf-cliquable:hover, body.kf button.kf-cliquable:focus-visible { background: radial-gradient(120% 90% at 30% 20%, #fbf1d8 0%, #efdfba 60%, #e0cb9e 100%); }
body.kf .kf-ligne-classement { background: var(--kf-voile); border: 2px solid var(--kf-filet); border-radius: 4px; }
body.kf .kf-place { color: var(--kf-encre-douce); }
body.kf .kf-place-1 { color: #a3700a; }
body.kf .kf-place-2 { color: #5f6b78; }
body.kf .kf-place-3 { color: #8a4a1c; }
body.kf .kf-produit img, body.kf .kf-actu img { border-bottom: 3px solid var(--kf-brun); border-radius: 3px 3px 0 0; }
body.kf .kf-prix, body.kf .kf-panier-total { color: var(--kf-ambre); }
body.kf .kf-carte-lien:hover .kf-panneau { border-color: var(--kf-encre-forte); }

/* boutique */
body.kf #shop .card { padding: 10px 10px 0; }
body.kf #shop .card:hover { border-color: var(--kf-encre-forte); box-shadow: inset 0 0 0 2px #f8eed6, inset 0 0 0 4px #e0a521, 0 10px 0 #2a1a0b; }
body.kf #shop .card-img-top, body.kf #shop .kf-visuel { border-radius: 3px; }
body.kf #shop .kf-visuel, body.kf .kf-kingplus-visuel .kf-visuel { border: 3px solid var(--kf-brun); }
body.kf #shop .kf-visuel > img, body.kf .kf-kingplus-visuel img { border: 0; }
body.kf #shop .card:hover .card-img-top { transform: none; }
body.kf #shop .card .card-body { padding: 12px 4px 16px; }
body.kf #shop .card > .card-body.pb-1 { padding: 16px 20px !important; }
body.kf .kf-offre-base { color: #7a5a35; opacity: 1; }
body.kf .kf-offre-achat > .btn { height: 46px; font-size: 1.1rem; }
body.kf .kf-offre-quantite { height: 46px; }
body.kf .kf-offre-quantite .btn { flex: 0 0 44px; font-size: 1.35rem; }
body.kf .kf-offre-quantite > span { background: var(--kf-creme); border: 3px solid var(--kf-brun); border-radius: 5px; box-shadow: none; color: var(--kf-encre-forte); }
body.kf .kf-offre-ancien-prix { color: inherit; }

/* bannière KingPlus : le liseré doré tourne autour du parchemin */
body.kf .kf-kingplus { border: 4px solid transparent; background: var(--kf-parchemin) padding-box, linear-gradient(90deg, #4a2e14 0%, #4a2e14 30%, #ffe58a 50%, #4a2e14 70%, #4a2e14 100%) border-box; background-size: 100% 100%, 50% 100%; box-shadow: inset 0 0 0 2px #f8eed6, inset 0 0 0 4px #b9975f, 0 6px 0 #2a1a0b; }
body.kf .kf-kingplus-titre { text-shadow: 3px 3px 0 var(--kf-encre-forte); }
body.kf .kf-kingplus .kf-or { color: #ffc93c; }
body.kf .kf-kingplus .kf-violet { color: #a26bff; }
body.kf .kf-kingplus-accroche { color: var(--kf-ambre); }
body.kf .kf-kingplus-icone { background: radial-gradient(circle at 50% 55%, rgba(122, 78, 12, 0.28) 0%, rgba(122, 78, 12, 0) 68%); }

/* panier : parchemin, titre sur une planche, lignes voilées */
body.kf .kf-mini-panier-titre { color: var(--kf-encre-forte); }
body.kf .kf-panier-cote .kf-mini-panier-titre { order: -1; margin: -16px -16px 0; padding: 12px 16px; background: var(--kf-bois); border-bottom: 3px solid var(--kf-encre-forte); border-radius: 3px 3px 0 0; color: var(--kf-creme-bois); font-size: 1.1rem; text-shadow: 2px 2px 0 var(--kf-encre-forte); }
body.kf .kf-panier-cote.kf-panier-ajout { border-color: #b8860b; box-shadow: inset 0 0 0 2px #f8eed6, inset 0 0 0 4px #e0a521, 0 6px 0 #2a1a0b; }
@media (min-width: 1200px) {
    body.kf .kf-panier-cote { border-width: 0 0 0 3px; border-radius: 0; border-color: var(--kf-encre-forte); box-shadow: inset 2px 0 0 #f8eed6, inset 4px 0 0 #b9975f; }
    body.kf .kf-panier-cote.kf-panier-ajout { box-shadow: inset 2px 0 0 #f8eed6, inset 5px 0 0 #e0a521; }
    body.kf .kf-panier-cote .kf-mini-panier-titre { margin: -22px -20px 0; padding: 14px 20px; border-radius: 0; }
}
body.kf .kf-panier-cote-pour { padding: 0 0 12px; background: none; border: 0; border-bottom: 2px dashed var(--kf-filet); border-radius: 0; box-shadow: none; }
body.kf .kf-panier-cote-pour img { border: 3px solid var(--kf-brun); border-radius: 0; }
body.kf .kf-panier-cote-pour strong { color: var(--kf-encre-forte); }
body.kf .kf-panier-pour-bouton { background: var(--kf-bois); border: 3px solid var(--kf-encre-forte); border-radius: 5px; box-shadow: inset 0 2px 0 #c08a4f, 0 3px 0 var(--kf-encre-forte); color: var(--kf-creme-bois); text-shadow: 2px 2px 0 var(--kf-encre-forte); }
body.kf .kf-panier-pour-bouton:hover, body.kf .kf-panier-pour-bouton:focus-visible { background: var(--kf-bois-survol); color: #ffffff; }
body.kf .kf-panier-pour-bouton i { color: #ffd25e; }
body.kf .kf-panier-cote-pour .kf-discret i, body.kf .kf-mini-panier-cadeau i { color: var(--kf-ambre); }
body.kf .kf-mini-panier-cadeau strong { color: var(--kf-encre-forte); }
body.kf .kf-resume-vide { color: var(--kf-encre-douce); }
body.kf .kf-resume-liste li, body.kf .kf-panier-ligne { padding: 6px 8px; background: var(--kf-voile); border: 2px solid var(--kf-filet); border-radius: 4px; box-shadow: none; }
body.kf .kf-resume-liste img, body.kf .kf-panier-image { border: 2px solid var(--kf-brun); border-radius: 0; }
body.kf .kf-resume-prix { color: #8a5a10; }
body.kf .kf-resume-quantite { padding: 2px 7px; background: var(--kf-brun); border: 0; border-radius: 3px; color: #f3e6c6; }
body.kf .kf-resume-retirer { width: 30px; height: 30px; background: none; border: 0; border-radius: 4px; box-shadow: none; color: var(--kf-rouge); }
body.kf .kf-resume-retirer:hover, body.kf .kf-resume-retirer:focus-visible { background: rgba(163, 40, 31, 0.14); color: #7a1c14; }
body.kf .kf-resume-total { padding-top: 10px; border-top: 2px dashed var(--kf-filet); }
body.kf .kf-resume-total strong { color: var(--kf-encre-forte); font-size: 1.25rem; }

/* News */
body.kf .kf-news-une, body.kf .kf-news-carte, body.kf .kf-news-contenu, body.kf .kf-news-commentaire, body.kf .kf-news-commenter { border-radius: 6px; }
body.kf .kf-news-une:hover, body.kf .kf-news-carte:hover { border-color: var(--kf-encre-forte); color: var(--kf-encre); box-shadow: inset 0 0 0 2px #f8eed6, inset 0 0 0 4px #e0a521, 0 10px 0 #2a1a0b; }
body.kf .kf-news-une img, body.kf .kf-news-carte img { padding: 4px; }
body.kf .kf-news-article-image { border: 3px solid var(--kf-brun); border-radius: 6px; }
body.kf .kf-news-patch { background: rgba(85, 40, 143, 0.14); border: 1px solid rgba(85, 40, 143, 0.5); color: var(--kf-lien); }
body.kf .kf-news-epinglee { background: rgba(224, 165, 33, 0.25); border: 1px solid #a3700a; color: var(--kf-ambre); }
body.kf .kf-news-pastille { border-radius: 3px; }
body.kf .kf-news-date { color: var(--kf-encre-douce); opacity: 1; }
body.kf .kf-news-entete .kf-news-date, body.kf .kf-news-article-entete .kf-news-date { color: var(--kf-texte-2); }
body.kf .kf-news-vide { border: 3px dashed var(--kf-filet); border-radius: 6px; }
body.kf .kf-news-vide i { color: var(--kf-or); }
body.kf .kf-news-contenu h2, body.kf .kf-news-contenu h3, body.kf .kf-news-contenu h4 { border-bottom: 2px dashed var(--kf-filet); color: var(--kf-ambre) !important; }
body.kf .kf-news-contenu ul li::before { background: var(--kf-ambre); }
body.kf .kf-news-contenu code { background: rgba(85, 40, 143, 0.12); color: var(--kf-lien); border-radius: 3px; }
body.kf .kf-news-contenu blockquote { background: rgba(224, 165, 33, 0.18); border-left: 4px solid #a3700a; }
body.kf .kf-news-commentaire img { border: 2px solid var(--kf-brun); border-radius: 0; }

/* recherche */
body.kf .kf-recherche-modale .modal-content { background: var(--kf-parchemin); border: 3px solid var(--kf-brun); }
body.kf .kf-recherche-entete { background: var(--kf-bois); border-bottom: 3px solid var(--kf-encre-forte); border-radius: 3px 3px 0 0; }
body.kf .kf-recherche-type, body.kf .kf-recherche-champ { padding: 6px 10px; }
body.kf .kf-recherche-type span, body.kf .kf-recherche-champ span { color: var(--kf-encre-douce); }
body.kf .kf-recherche-type select, body.kf .kf-recherche-champ input { color: var(--kf-encre-forte); }
body.kf .kf-recherche-type select option { background: var(--kf-creme); color: var(--kf-encre-forte); }
body.kf .kf-recherche-accueil { color: var(--kf-encre); }
body.kf .kf-recherche-accueil strong { color: var(--kf-encre-forte); }
body.kf .kf-recherche-groupe h3 { color: var(--kf-ambre) !important; }
body.kf .kf-recherche-carte { background: var(--kf-voile); border: 2px solid var(--kf-filet); border-radius: 4px; color: var(--kf-encre); }
body.kf .kf-recherche-carte:hover, body.kf .kf-recherche-carte.actif { background: var(--kf-voile-survol); border-color: #b8860b; color: var(--kf-encre-forte); }
body.kf .kf-recherche-carte img, body.kf .kf-recherche-carte .kf-recherche-icone { background: #7a5233; border: 2px solid var(--kf-brun); border-radius: 0; color: #ffd25e; }
body.kf .kf-recherche-texte small { color: var(--kf-encre-douce); opacity: 1; }

/* pied de page et barre du téléphone : bois foncé */
body.kf .kf-pied { background: var(--kf-bois-fonce); border-top: 3px solid var(--kf-encre-forte); box-shadow: inset 0 2px 0 #6b4a2a; }
body.kf .kf-pied nav h2 { color: #ffd25e !important; text-shadow: 2px 2px 0 var(--kf-encre-forte); }
body.kf .kf-pied nav a { color: #f3e6c6; }
body.kf .kf-pied nav a:hover { color: #ffffff; }
body.kf .kf-pied-marque p, body.kf .kf-pied-bas { color: #d9c7a3; }
body.kf .kf-bas { background: var(--kf-bois); border-top: 3px solid var(--kf-encre-forte); box-shadow: inset 0 2px 0 #c08a4f; }
body.kf .kf-bas a, body.kf .kf-bas button { color: var(--kf-creme-bois); text-shadow: 2px 2px 0 var(--kf-encre-forte); }
body.kf .kf-bas .actif { color: #ffd25e; box-shadow: inset 0 3px 0 #ffd25e; }

/* 1/11 (Artur : noir au survol, « pas beau avec le thème ») : Nova peint la ligne survolée avec le fond de la page. Partout ailleurs que les classements (déjà réglés dans profils.css), le parchemin s'éclaircit. */
body.kf tbody > tr:hover > :is(td, th) { background: var(--kf-voile-survol) !important; color: var(--kf-encre-forte); }

/* 1/11 (Artur : « l'image est trop sombre », aperçus validés) : version claire derrière toutes les pages, fixe, sous un léger voile.
   Sur un pseudo-élément : background-attachment: fixed saccade au défilement et ne marche pas sur téléphone.
   La couleur reste sur html : c'est elle qu'on voit tant que l'image n'est pas chargée. */
html { background: #0e0a14; }
body.kf { background: transparent !important; text-shadow: 1px 1px 0 rgba(20, 10, 30, 0.85); }
body.kf::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(14, 10, 20, 0.3), rgba(14, 10, 20, 0.3)), url("../img/fond-clair-1920.jpg") center 40% / cover no-repeat;
}
body.kf .kf-heros { background: none; }
body.kf .kf-heros-sous, body.kf .kf-heros p { text-shadow: 2px 2px 0 #2b1a0d; }
/* le texte des cadres en parchemin, des menus et des boutons n'a pas besoin de cette ombre */
body.kf :is(.kf-panneau, .card, .kf-news-une, .kf-news-carte, .kf-news-contenu, .kf-news-commentaire, .kf-news-commenter, .modal-content, .dropdown-menu, .kf-boutique-compte, .kf-panier-cote, .kf-kingplus, .gui, .volet-joueur, .objet-carte, .infobulle, .objet-bulle, .btn-primary, .kf-btn-or) { text-shadow: none; }
@media (max-width: 991.98px) {
    body.kf::before { background-image: linear-gradient(rgba(14, 10, 20, 0.3), rgba(14, 10, 20, 0.3)), url("../img/fond-clair-960.jpg"); background-position: 58% 30%; }
    body.kf .kf-heros { background-image: none; }
}