/* ============================================================
 * bonus.css — Page catalogue bonus
 * ============================================================ */

.bn-page { padding-bottom: 24px; }

/* ---- HERO ---- */
.bn-hero {
    margin: 10px 12px 14px;
    padding: 18px 16px 16px;
    background: var(--surface,#fff);
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 16px;
    text-align: center;
    position: relative; overflow: hidden;
    box-sizing: border-box;
}
.bn-hero::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse at 80% 0%, color-mix(in srgb,var(--primary,#0066cc) 14%,transparent),transparent 60%),
                radial-gradient(ellipse at 10% 100%, color-mix(in srgb,#f59e0b 10%,transparent),transparent 55%);
}
.bn-hero > * { position: relative; }
.bn-hero__icon { width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--primary,#0066cc) 12%,transparent);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:1.2rem;color:var(--primary,#0066cc); }
.bn-hero__title { margin:0 0 6px;font-size:1.2rem;font-weight:900;line-height:1.2;color:var(--text-main,#1e2a3e); }
.bn-hero__desc { margin:0 0 14px;font-size:0.78rem;line-height:1.5;color:var(--text-secondary,#5a6874); }
.bn-hero__stats { display:flex;justify-content:center;border-top:1px solid var(--border,#e2e8f0);padding-top:12px; }
.bn-stat { flex:1;display:flex;flex-direction:column;align-items:center;gap:2px; }
.bn-stat + .bn-stat { border-left:1px solid var(--border,#e2e8f0); }
.bn-stat strong { font-size:1.1rem;font-weight:900;color:var(--primary,#0066cc);line-height:1; }
.bn-stat span { font-size:0.62rem;color:var(--text-secondary,#5a6874);text-transform:uppercase;letter-spacing:0.4px; }

/* ---- FILTRES CATÉGORIES — static ---- */
.bn-filters {
    position: static !important; top: unset !important;
    background:var(--bg-main,#f8f9fa);
    border-top:1px solid var(--border,#e2e8f0);
    border-bottom:1px solid var(--border,#e2e8f0);
    margin:0 0 0; padding:10px 12px;
    box-sizing:border-box; width:100%;
}
.bn-filters__scroll { display:flex;flex-wrap:wrap;gap:6px; }
.bn-pill { display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:999px;border:1px solid var(--border,#e2e8f0);background:var(--surface,#fff);color:var(--text-main,#1e2a3e);font-size:0.75rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:all .18s; }
.bn-pill i { font-size:0.68rem; }
.bn-pill:hover { border-color:var(--primary,#0066cc);color:var(--primary,#0066cc); }
.bn-pill--active { background:var(--primary,#0066cc);border-color:var(--primary,#0066cc);color:#fff;font-weight:700; }
.bn-pill__n { min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:rgba(0,0,0,.12);font-size:0.6rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center; }
.bn-pill--active .bn-pill__n { background:rgba(255,255,255,.25); }

/* ---- BOUTONS FILTRER / COMPARER ---- */
.bn-actions {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border,#e2e8f0);
    background: var(--bg-main,#f8f9fa);
    box-sizing: border-box;
}
.bn-action-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--border,#e2e8f0);
    background: var(--surface,#fff);
    color: var(--text-main,#1e2a3e);
    font-size: 0.78rem; font-weight: 700; font-family: inherit;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
}
.bn-action-btn i { font-size: 0.75rem; }
.bn-action-btn:hover { border-color:var(--primary,#0066cc);color:var(--primary,#0066cc); }
.bn-action-btn--filter[data-active] {
    background: color-mix(in srgb,var(--primary,#0066cc) 10%,transparent);
    border-color: var(--primary,#0066cc);
    color: var(--primary,#0066cc);
}
.bn-action-btn--compare { background:var(--primary,#0066cc);color:#fff;border-color:var(--primary,#0066cc); }
.bn-action-btn--compare:hover { background:color-mix(in srgb,var(--primary,#0066cc) 85%,#000);color:#fff; }
.bn-action-btn__count { background:var(--primary,#0066cc);color:#fff;border-radius:999px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:0.6rem;padding:0 4px; }
.bn-action-btn--filter[data-active] .bn-action-btn__count { background:var(--primary,#0066cc); }

/* ---- MODAL ---- */
.bn-modal {
    /* Positionné par rapport à #app-container (position:relative)
       → la modale reste dans le rectangle 430px, ne déborde pas sur PC */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--nav-height, 54px);
    z-index: 200;
    display: none;
    align-items: flex-end;
    /* Arrondi identique au conteneur sur desktop */
    border-radius: inherit;
    overflow: hidden;
}
.bn-modal.is-open { display: flex; }
.bn-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    animation: bnFadeIn .22s ease;
}
.bn-modal__box {
    position: relative; z-index: 1;
    width: 100%;
    max-height: calc(100% - 48px);
    background: var(--surface,#fff);
    border-radius: 20px 20px 0 0;
    padding: 20px 16px 20px;
    overflow-y: auto;
    box-sizing: border-box;
    animation: bnSlideUp .28s cubic-bezier(.4,0,.2,1);
}
@keyframes bnFadeIn  { from{opacity:0} to{opacity:1} }
@keyframes bnSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

.bn-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.bn-modal__header h3 { margin:0;font-size:1rem;font-weight:800;color:var(--text-main,#1e2a3e);display:flex;align-items:center;gap:8px; }
.bn-modal__header h3 i { color:var(--primary,#0066cc); }
.bn-modal__close { background:none;border:none;font-size:1.1rem;color:var(--text-secondary,#5a6874);cursor:pointer;padding:4px;border-radius:50%;transition:all .15s; }
.bn-modal__close:hover { background:var(--bg-main,#f8f9fa);color:var(--text-main,#1e2a3e); }
.bn-modal__sub { margin:0 0 14px;font-size:0.76rem;color:var(--text-secondary,#5a6874); }
.bn-modal__foot { display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border,#e2e8f0); }
.bn-modal__btn { flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:10px;border:none;font-size:0.82rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .18s; }
.bn-modal__btn--ghost { background:var(--bg-main,#f8f9fa);color:var(--text-secondary,#5a6874);border:1px solid var(--border,#e2e8f0); }
.bn-modal__btn--ghost:hover { border-color:var(--primary,#0066cc);color:var(--primary,#0066cc); }
.bn-modal__btn--primary { background:var(--primary,#0066cc);color:#fff; }
.bn-modal__btn--primary:hover { background:color-mix(in srgb,var(--primary,#0066cc) 85%,#000); }

/* ---- PICKER BOOKMAKER ---- */
.bn-bk-picker { display:flex;flex-wrap:wrap;gap:8px; }
.bn-bk-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 2px solid var(--border,#e2e8f0);
    background: var(--bg-main,#f8f9fa);
    cursor: pointer;
    transition: all .18s;
    min-width: 130px;
    position: relative;
}
.bn-bk-chip input { display:none; }
.bn-bk-chip--active { border-color:var(--primary,#0066cc);background:color-mix(in srgb,var(--primary,#0066cc) 8%,transparent); }
.bn-bk-chip__logo {
    width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.5rem; font-weight: 900; color: #fff;
    word-break: break-all; text-align: center; line-height: 1.1;
}
.bn-bk-chip__name { font-size:0.78rem;font-weight:700;color:var(--text-main,#1e2a3e);flex:1; }
.bn-bk-chip__check { font-size:0.75rem;color:var(--primary,#0066cc);opacity:0;transition:opacity .15s; }
.bn-bk-chip--active .bn-bk-chip__check { opacity:1; }

/* ---- COMPARER ---- */
.bn-compare-cols { display:flex;align-items:center;gap:10px;margin-bottom:4px; }
.bn-compare-col { flex:1;display:flex;flex-direction:column;gap:6px; }
.bn-compare-col__label { margin:0;font-size:0.72rem;font-weight:700;color:var(--text-secondary,#5a6874);text-transform:uppercase;letter-spacing:0.3px; }
.bn-compare-vs { flex-shrink:0;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--primary,#0066cc) 12%,transparent);color:var(--primary,#0066cc);display:flex;align-items:center;justify-content:center;font-size:0.8rem;margin-top:18px; }
.bn-select { width:100%;padding:9px 10px;border-radius:10px;border:1px solid var(--border,#e2e8f0);background:var(--bg-main,#f8f9fa);color:var(--text-main,#1e2a3e);font-size:0.82rem;font-family:inherit;outline:none;cursor:pointer;transition:border-color .18s; }
.bn-select:focus { border-color:var(--primary,#0066cc); }

/* ---- TABLEAU COMPARATIF ---- */
.bn-compare-table-wrap { overflow-x:auto;margin-top:12px; }
.bn-compare-table { width:100%;border-collapse:collapse;font-size:0.78rem; }
.bn-compare-table th { padding:9px 10px;background:color-mix(in srgb,var(--primary,#0066cc) 10%,transparent);color:var(--primary,#0066cc);font-weight:800;text-align:left;border-bottom:2px solid var(--border,#e2e8f0);white-space:nowrap; }
.bn-compare-table td { padding:8px 10px;border-bottom:1px solid var(--border,#e2e8f0);color:var(--text-main,#1e2a3e);text-align:center;vertical-align:middle; }
.bn-compare-table td:first-child { text-align:left;font-weight:600;color:var(--text-secondary,#5a6874); }
.bn-compare-table tr:last-child td { border-bottom:none; }
.bn-compare-table tr:hover td { background:color-mix(in srgb,var(--primary,#0066cc) 4%,transparent); }
.bn-compare-bk-header { display:flex;align-items:center;gap:6px; }
.bn-compare-bk-logo { width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.42rem;font-weight:900;color:#fff;flex-shrink:0; }
.bn-compare-empty { text-align:center;padding:24px;color:var(--text-secondary,#5a6874);font-size:0.85rem; }
.bn-compare-err { color:#dc2626;font-size:0.82rem;padding:10px;background:color-mix(in srgb,#dc2626 8%,transparent);border-radius:8px;margin-top:8px; }

/* ---- CARROUSEL ---- */
.bn-carousel { overflow:hidden;position:relative;margin-bottom:4px; }
.bn-carousel__track {
    display: flex;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.bn-carousel__slide { flex: 0 0 100%; width:100%;padding:0 2px;box-sizing:border-box; }
.bn-carousel__dots { display:flex;justify-content:center;gap:6px;margin-top:10px; }
.bn-carousel__dot {
    width:8px;height:8px;border-radius:50%;
    border:none;background:var(--border,#e2e8f0);
    cursor:pointer;padding:0;transition:all .2s;
}
.bn-carousel__dot--active { background:var(--primary,#0066cc);width:22px;border-radius:4px; }

/* ---- SECTION ---- */
.bn-section { padding:0 12px 4px;margin-bottom:16px; }
.bn-section__hd { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px; }
.bn-section__title { font-size:0.82rem;font-weight:800;color:var(--text-main,#1e2a3e);text-transform:uppercase;letter-spacing:0.3px;display:flex;align-items:center;gap:5px; }
.bn-section__title i { color:var(--primary,#0066cc); }
.bn-section__bk-filter { color:var(--primary,#0066cc);font-size:0.72rem; }
.bn-section__count { font-size:0.7rem;color:var(--text-secondary,#5a6874); }

/* ---- CARTES ---- */
.bn-list { display:flex;flex-direction:column;gap:12px; }
.bn-card {
    display:flex;flex-direction:column;
    background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);
    border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;
    transition:transform .2s,box-shadow .2s;
}
.bn-card:hover { transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.09); }
.bn-card--featured { border-color:color-mix(in srgb,var(--primary,#0066cc) 35%,transparent); }
.bn-card__cover { position:relative;height:130px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0; }
.bn-card__big-icon { font-size:2.8rem;color:rgba(255,255,255,.3);position:relative;z-index:1; }
.bn-card__cat-badge { position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.55);color:#fff;font-size:0.6rem;font-weight:700;padding:3px 8px;border-radius:999px;backdrop-filter:blur(4px);text-transform:uppercase; }
.bn-card__promo { position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);color:var(--text-main,#1e2a3e);font-size:0.6rem;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:0.5px; }
.bn-card__featured-badge { position:absolute;bottom:8px;left:8px;background:rgba(245,158,11,.9);color:#fff;font-size:0.6rem;font-weight:700;padding:2px 8px;border-radius:999px; }
.bn-card__body { padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px; }
.bn-card__bk { font-size:0.65rem;font-weight:700;color:var(--primary,#0066cc);text-transform:uppercase;letter-spacing:0.4px; }
.bn-card__title { margin:0;font-size:0.9rem;font-weight:800;line-height:1.3;color:var(--text-main,#1e2a3e);overflow-wrap:break-word;word-break:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.bn-card__desc { margin:0;font-size:0.75rem;line-height:1.45;color:var(--text-secondary,#5a6874);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.bn-card__foot { display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px dashed var(--border,#e2e8f0);padding-top:8px;margin-top:4px; }
.bn-card__cta { color:var(--primary,#0066cc);font-weight:700;font-size:0.72rem;display:inline-flex;align-items:center;gap:3px;flex-shrink:0; }
.bn-card__cta i { transition:transform .18s;font-size:0.6rem; }
.bn-card:hover .bn-card__cta i { transform:translateX(3px); }

/* ---- CODE PROMO ---- */
.bn-code-btn {
    display:inline-flex;align-items:center;gap:5px;
    background:var(--bg-main,#f8f9fa);border:1px solid var(--border,#e2e8f0);
    border-radius:8px;padding:4px 8px;font-size:0.66rem;font-weight:700;font-family:inherit;
    color:var(--text-main,#1e2a3e);cursor:pointer;transition:all .18s;
}
.bn-code-btn.copied { background:var(--primary,#0066cc);color:#fff;border-color:var(--primary,#0066cc); }
.bn-code-btn__code { padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.07);font-weight:800;letter-spacing:0.5px;font-size:0.6rem; }

/* ---- BOUTON S'INSCRIRE (révélé après copie) ---- */
.bn-signup-reveal { margin-top:8px;animation:bnSlideDown .25s ease; }
@keyframes bnSlideDown { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.bn-signup-btn {
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;padding:10px 14px;border-radius:10px;
    background:var(--primary,#0066cc);color:#fff;
    text-decoration:none;font-size:0.82rem;font-weight:800;
    transition:background .18s;
}
.bn-signup-btn:hover { background:color-mix(in srgb,var(--primary,#0066cc) 85%,#000); }

/* ---- EMPTY ---- */
.bn-empty { text-align:center;padding:32px 16px;background:var(--surface,#fff);border:1px dashed var(--border,#e2e8f0);border-radius:14px;color:var(--text-secondary,#5a6874); }
.bn-empty i { font-size:2rem;color:var(--primary,#0066cc);margin-bottom:8px;display:block; }
.bn-empty p { margin:0 0 10px;font-size:0.85rem; }
.bn-empty a { color:var(--primary,#0066cc);font-weight:700; }

/* ---- DARK MODE ---- */
[data-theme="dark"] .bn-hero,[data-theme="dark"] .bn-card,[data-theme="dark"] .bn-modal__box,[data-theme="dark"] .bn-bk-chip { background:var(--surface,#1e293b);border-color:var(--border,#334155); }
[data-theme="dark"] .bn-filters,[data-theme="dark"] .bn-actions { background:var(--bg-main,#0f172a);border-color:var(--border,#334155); }
[data-theme="dark"] .bn-pill { background:var(--surface,#1e293b);border-color:var(--border,#334155);color:var(--text-main,#f8fafc); }
[data-theme="dark"] .bn-card__title,[data-theme="dark"] .bn-hero__title { color:var(--text-main,#f8fafc); }
[data-theme="dark"] .bn-action-btn { background:var(--surface,#1e293b);border-color:var(--border,#334155);color:var(--text-main,#f8fafc); }
[data-theme="dark"] .bn-select { background:var(--surface,#1e293b);border-color:var(--border,#334155);color:var(--text-main,#f8fafc); }
[data-theme="dark"] .bn-compare-table th { background:color-mix(in srgb,var(--primary,#3399ff) 15%,transparent); }
[data-theme="dark"] .bn-compare-table td { border-color:var(--border,#334155); }
[data-theme="dark"] .bn-code-btn { background:var(--bg-main,#0f172a);border-color:var(--border,#334155);color:var(--text-main,#f8fafc); }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion:reduce) {
    .bn-card,.bn-carousel__track,.bn-signup-btn { transition:none; }
    .bn-card:hover { transform:none; }
    .bn-modal__box,.bn-modal__backdrop { animation:none; }
    .bn-signup-reveal { animation:none; }
}


/* ============================================================
 * CUSTOM PICKER COMPARAISON (remplace <select> natif)
 * ============================================================ */
.bn-cmp-pickers {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}
.bn-cmp-picker-group {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.bn-cmp-picker {
    position: relative;
    width: 100%;
    cursor: pointer;
    user-select: none;
}
.bn-cmp-picker__selected {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 30px 9px 10px;
    border-radius: 10px;
    border: 1px solid var(--border,#e2e8f0);
    background: var(--bg-main,#f8f9fa);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main,#1e2a3e);
    min-height: 42px;
    transition: border-color .18s;
}
.bn-cmp-picker.is-open .bn-cmp-picker__selected {
    border-color: var(--primary,#0066cc);
}
.bn-cmp-picker__placeholder { color: var(--text-secondary,#5a6874); font-weight: 400; }
.bn-cmp-picker__arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--text-secondary,#5a6874);
    transition: transform .22s;
    pointer-events: none;
}
.bn-cmp-picker.is-open .bn-cmp-picker__arrow { transform: translateY(-50%) rotate(180deg); }

/* Dropdown avec scrollbar */
.bn-cmp-picker__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--surface,#fff);
    border: 1px solid var(--border,#e2e8f0);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 50;
    /* Scrollbar : max 4 items visibles (~48px chacun) */
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary,#0066cc) transparent;
}
.bn-cmp-picker__dropdown::-webkit-scrollbar { width: 4px; }
.bn-cmp-picker__dropdown::-webkit-scrollbar-track { background: transparent; }
.bn-cmp-picker__dropdown::-webkit-scrollbar-thumb { background: var(--primary,#0066cc); border-radius: 4px; }
.bn-cmp-picker.is-open .bn-cmp-picker__dropdown { display: block; animation: bnDropIn .18s ease; }
@keyframes bnDropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }

.bn-cmp-picker__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background .15s;
    border-bottom: 1px solid var(--border,#e2e8f0);
}
.bn-cmp-picker__opt:last-child { border-bottom: none; }
.bn-cmp-picker__opt:hover { background: color-mix(in srgb,var(--primary,#0066cc) 8%,transparent); }
.bn-cmp-picker__opt.is-selected {
    background: color-mix(in srgb,var(--primary,#0066cc) 12%,transparent);
    color: var(--primary,#0066cc);
    font-weight: 700;
}
.bn-cmp-opt__logo {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.48rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    text-align: center;
    word-break: break-all;
    overflow: hidden;
}
.bn-cmp-opt__name { font-size: 0.8rem; font-weight: 600; color: var(--text-main,#1e2a3e); }
.bn-cmp-picker__opt.is-selected .bn-cmp-opt__name { color: var(--primary,#0066cc); }

/* Logo dans le selected */
.bn-cmp-sel__logo {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.42rem;
    font-weight: 900;
    color: #fff;
    word-break: break-all;
    text-align: center;
}

/* ============================================================
 * FIX : Chips bookmaker — logo image ou initiales stylées
 * ============================================================ */
.bn-bk-chip__logo {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.bn-bk-chip__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.bn-bk-chip__logo span {
    font-size: 0.48rem;
    font-weight: 900;
    color: #fff;
    text-align: center;
    word-break: break-all;
    line-height: 1.15;
    padding: 2px;
}

/* Dark mode additions */
[data-theme="dark"] .bn-cmp-picker__selected { background:var(--surface,#1e293b);border-color:var(--border,#334155);color:var(--text-main,#f8fafc); }
[data-theme="dark"] .bn-cmp-picker__dropdown { background:var(--surface,#1e293b);border-color:var(--border,#334155); }
[data-theme="dark"] .bn-cmp-opt__name { color:var(--text-main,#f8fafc); }

/* ============================================================
 * LOGOS BOOKMAKERS — picture + fallback
 * ============================================================ */
.bk-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: transparent;
}
.bk-logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.bk-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 0.46rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.1;
    word-break: break-all;
    overflow: hidden;
    padding: 2px;
    box-sizing: border-box;
}

/* Logo image réel dans les chips */
.bn-bk-chip__logo .bk-logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    border-radius: 7px;
    display: block;
}
.bn-bk-chip__logo .bk-logo-fallback {
    width: 100% !important;
    height: 100% !important;
    border-radius: 7px;
}

/* Logo dans le picker comparaison */
.bn-cmp-opt__logo .bk-logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}
.bn-cmp-opt__logo .bk-logo-fallback {
    width: 100% !important;
    height: 100% !important;
    border-radius: 6px;
}

/* ============================================================
 * CONFINEMENT DANS #app-container (desktop 9:16)
 * La modale est position:absolute → reste dans le rectangle.
 * Les chips de filtre ne débordent pas horizontalement.
 * Aucun impact sur l'apparence mobile.
 * ============================================================ */

/* S'assurer que #app-container crée bien un contexte de positionnement */
#app-container {
    position: relative; /* déjà défini dans style.css, on confirme */
}

/* Chips bookmaker dans la modale filtre : grille 2 colonnes max */
#modalFilterBk .bn-bk-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow-x: hidden; /* jamais de scroll horizontal */
}

/* Sur très petits écrans (<320px) : 1 colonne */
@media (max-width: 320px) {
    #modalFilterBk .bn-bk-picker {
        grid-template-columns: 1fr;
    }
}

/* Les filtres catégorie ne débordent pas */
.bn-filters__scroll {
    overflow-x: hidden;
    flex-wrap: wrap;
}

/* Boutons action : taille fixe dans le conteneur */
.bn-actions {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}
.bn-action-btn {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Picker comparaison : éviter le débordement du dropdown */
.bn-cmp-picker__dropdown {
    /* Rester dans le conteneur parent */
    max-width: 100%;
    box-sizing: border-box;
}