/* core/mobile_v2.css — refonte mobile "façon Pokékalos" (chargé par core/mobile_nav.php).
   Thèmes : html[data-theme="light"|"dark"] (posé par beachadex/includes/header.php).
   Couleurs : fond = nuages du jeu (clair #f8f8f8 / sombre #241824, échantillonnés sur les captures).
   Tout ce qui est mobile vit sous 768px ; hors media query, tout est masqué (pas de doublon bureau). */

.bbm-bar, .bbm-backdrop, .bbm-discover { display: none; }
#bbmLeftExtras { display: none; }
/* Icônes des sous-menus (bureau) : événements / capacités. */
.bx-nav-menu a:has(.bx-nav-ico) { display: flex; align-items: center; gap: 9px; }
.bx-nav-ico { width: 24px; height: 24px; object-fit: contain; flex: none; }
/* Titre d'accueil : plus de capitalisation forcée ("Toute l'actualité Boom Beach en temps réel"). */
.event-news-title { text-transform: none; }

/* Pied de page : plus de bande sous le footer ; l'espace passe AU-DESSUS. */
html body.public-home-page, html body:has(.bx-footer) { padding-bottom: 0; margin-bottom: 0; }
html body .bx-footer, html body:not(:has(.bx-cta-account)) .bx-footer { margin-top: 40px; margin-bottom: 0; }

/* ==========================================================================
   Cartes événements (.evx-card) : pastilles catégorie/QG, accueil à image pleine largeur,
   thème sombre façon Pokékalos (fond = nuage sombre du jeu, texte clair).
   ========================================================================== */
.evx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.evx-cat-label, .evx-hq { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; border: 1px solid #d6dde3; background: #eef2f6; color: #2a3a47; font-size: .72em; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; }
.evx-cat-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .75; flex: none; }
.evx-hq { align-self: auto; color: #1f7fb8; background: #e3f0f8; border-color: #bcd9ec; }
.evx-hq::before { content: none; }

/* Accueil : image pleine largeur, texte en dessous (colonne verticale). */
@media (max-width: 768px) {
html body .evx-home .evx-card-top { flex-direction: column; gap: 0; padding: 0; }
html body .evx-home .evx-thumb { flex: none; width: 100%; display: block; }
html body .evx-home .evx-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
html body .evx-home .evx-card-main { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 12px; }
html body .evx-home .evx-title { font-size: 1.2em; }
}
/* Bureau : l'accueil reprend exactement le format des cartes de la page Événements. */
@media (min-width: 769px) {
html body .evx-home .evx-thumb { flex: 0 0 82px; }
html body .evx-home .evx-thumb img { width: 82px; height: 82px; }
}

/* Thème sombre : cartes événements. */
html[data-theme="dark"] .evx-card { background: #2e212f; border-color: #4a384a; color: #f3edf4; }
html[data-theme="dark"] .evx-title { color: #f6f1f7; }
html[data-theme="dark"] .evx-extra { color: #c3b5c7; }
html[data-theme="dark"] .evx-dates { color: #e2d8e5; }
html[data-theme="dark"] .evx-card-foot { background: #3a2b3b; color: #7fd8e3; }
html[data-theme="dark"] .evx-cat-label, html[data-theme="dark"] .evx-hq { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .16); color: #e9dfec; }
html[data-theme="dark"] .evx-hq { color: #8fd0f2; }
html[data-theme="dark"] .evx-home .evx-comments { color: #c3b5c7; }
html[data-theme="dark"] .evx-admin { background: rgba(36, 24, 36, .92); color: #f3edf4; }
html[data-theme="dark"] .evx-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }

@media (max-width: 768px) {
    :root { --mobile-topbar-h: 58px; --mobile-bottom-nav-h: 0px; --bbm-h: 58px; }

    body {
        --bbm-bg: #241824; --bbm-card: #32233a; --bbm-ink: #f3edf4; --bbm-mute: #b9aabd;
        --bbm-line: rgba(255, 255, 255, .12); --bbm-accent: #56c8d8; --bbm-sel: rgba(255, 255, 255, .07);
        --bbm-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    }
    html[data-theme="light"] body {
        --bbm-bg: #f8f8f8; --bbm-card: #ffffff; --bbm-ink: #0f2a3d; --bbm-mute: #587084;
        --bbm-line: #dfe5ea; --bbm-accent: #1f7a8c; --bbm-sel: #eef2f6;
        --bbm-shadow: 0 10px 30px rgba(15, 42, 61, .22);
    }
    /* Fond de page = nuages du jeu. */
    html body, html body.public-home-page { background: var(--bbm-bg); color: var(--bbm-ink); }
    body:has(.bbm-bar) { padding-top: var(--bbm-h); }
    body.bbm-lock { overflow: hidden; }

    /* ---------------- En-tête : [≡ Menu] | logo | [archipel] ---------------- */
    .bbm-bar {
        display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
        position: fixed; top: 0; left: 0; right: 0; height: var(--bbm-h); z-index: 900;
        background: linear-gradient(100deg, #0b3358 0%, #135a78 55%, #1a7f98 100%);
        border-bottom: 2px solid #0b2238; box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
    }
    .bbm-bar-zone {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        border: 0; margin: 0; padding: 0 16px; background: rgba(8, 28, 48, .22); color: #fff;
        font: 700 1rem/1 'Inter', system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .bbm-bar-left { border-right: 1px solid rgba(255, 255, 255, .16); min-width: 104px; }
    .bbm-bar-right { border-left: 1px solid rgba(255, 255, 255, .16); min-width: 64px; padding: 0 14px; }
    .bbm-bar-zone:active { background: rgba(255, 255, 255, .14); }
    .bbm-burger { position: relative; width: 22px; height: 16px; display: block; }
    .bbm-burger i { position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .22s, opacity .18s, top .22s; }
    .bbm-burger i:nth-child(1) { top: 0; } .bbm-burger i:nth-child(2) { top: 6.5px; } .bbm-burger i:nth-child(3) { top: 13px; }
    body.mobile-menu-open .bbm-burger i:nth-child(1) { top: 6.5px; transform: rotate(45deg); }
    body.mobile-menu-open .bbm-burger i:nth-child(2) { opacity: 0; }
    body.mobile-menu-open .bbm-burger i:nth-child(3) { top: 6.5px; transform: rotate(-45deg); }
    .bbm-ico-open { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(8, 28, 48, .5)); }
    .bbm-ico-close { display: none; font-size: 1.5rem; }
    body.bbm-discover-open .bbm-ico-open { display: none; }
    body.bbm-discover-open .bbm-ico-close { display: block; }

    .bbm-logo {
        display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 0 6px;
        text-decoration: none; font-family: 'Bangers', cursive; font-size: 1.5rem; letter-spacing: 1px; line-height: 1;
        white-space: nowrap; overflow: hidden;
    }
    .bbm-logo img { height: 34px; width: auto; flex: none; filter: drop-shadow(0 2px 0 rgba(8, 28, 48, .55)); }
    .bbm-logo span { color: #fff; -webkit-text-stroke: 4px #0b2238; paint-order: stroke fill; text-shadow: 0 2px 0 #0b2238; padding: 2px 3px 4px 0; overflow: hidden; text-overflow: ellipsis; }
    @media (max-width: 360px) { .bbm-bar-label { display: none; } .bbm-bar-left { min-width: 58px; } .bbm-logo span { font-size: 1.2rem; } }

    /* ---------------- Fond derrière les volets ---------------- */
    .bbm-backdrop { display: block; position: fixed; inset: var(--bbm-h) 0 0 0; background: rgba(8, 14, 22, .55); z-index: 840; opacity: 0; pointer-events: none; transition: opacity .22s; }
    body.mobile-menu-open .bbm-backdrop, body.bbm-discover-open .bbm-backdrop { opacity: 1; pointer-events: auto; }

    /* ---------------- Volets (gauche = navigation, droite = À découvrir) ---------------- */
    html body .bx-mobile-menu-popup.bbm-drawer,
    html body .bbm-discover {
        display: flex; flex-direction: column; gap: 0; position: fixed; top: var(--bbm-h); bottom: 0; z-index: 860;
        width: min(88vw, 400px); max-height: none; padding: 0; margin: 0; box-sizing: border-box; overflow: hidden;
        background: var(--bbm-bg); color: var(--bbm-ink); border: 0; border-radius: 0; box-shadow: var(--bbm-shadow);
        animation: none; transition: transform .26s cubic-bezier(.3, .8, .3, 1), visibility 0s linear .26s; visibility: hidden;
    }
    html body .bx-mobile-menu-popup.bbm-drawer { left: 0; right: auto; transform: translateX(-104%); border-right: 1px solid var(--bbm-line); }
    html body .bbm-discover { right: 0; left: auto; transform: translateX(104%); border-left: 1px solid var(--bbm-line); }
    html body.mobile-menu-open .bx-mobile-menu-popup.bbm-drawer,
    html body.bbm-discover-open .bbm-discover { transform: translateX(0); visibility: visible; transition: transform .26s cubic-bezier(.3, .8, .3, 1), visibility 0s; }
    /* Avant câblage JS, le pop-up d'origine reste invisible. */
    html body .bx-mobile-menu-popup:not(.bbm-drawer) { display: none; }

    .bbm-d-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--bbm-line); background: var(--bbm-bg); }
    html body .bbm-d-head h2, html body .bbm-card-title { background: none; border: 0; box-shadow: none; text-shadow: none; -webkit-text-stroke: 0; width: auto; display: block; text-align: left; padding: 0; color: var(--bbm-ink) !important; }
    html body .bbm-discover .bbm-d-head h2 { color: #fff !important; }
    .bbm-d-head h2 { margin: 0; font: 800 1.1rem/1.2 'Inter', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--bbm-ink); }
    .bbm-x { width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--bbm-line); background: var(--bbm-card); color: var(--bbm-ink); font-size: 1.05rem; cursor: pointer; }
    .bbm-d-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 28px; -webkit-overflow-scrolling: touch; }
    .bbm-discover .bbm-d-head { background: linear-gradient(120deg, #0b3358, #1c4f93); border-bottom: 0; }
    .bbm-discover .bbm-d-head h2 { color: #fff; text-transform: none; letter-spacing: 0; font-size: 1.35rem; }
    .bbm-discover .bbm-x { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }

    /* ---- accordéons du volet gauche ---- */
    .bbm-group { border-bottom: 1px solid var(--bbm-line); --c: #c0344f; }
    .bbm-group[data-c="1"] { --c: #2f56c8; } .bbm-group[data-c="2"] { --c: #1f8a5b; } .bbm-group[data-c="3"] { --c: #7a45c0; }
    .bbm-g-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 6px; border: 0; background: transparent; color: var(--bbm-ink); text-align: left; cursor: pointer; font-family: inherit; }
    .bbm-g-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
    .bbm-g-ic img { width: 32px; height: 32px; object-fit: contain; }
    .bbm-g-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .bbm-g-tx b { font: 800 1.2rem/1.15 'Inter', system-ui, sans-serif; letter-spacing: -.01em; }
    .bbm-g-tx small { font: 500 .92rem/1.2 'Inter', system-ui, sans-serif; color: var(--bbm-mute); }
    .bbm-g-chev { flex: none; width: 10px; height: 10px; border-right: 3px solid var(--c); border-bottom: 3px solid var(--c); transform: rotate(45deg); margin: -4px 6px 0 0; transition: transform .2s; }
    .bbm-group.is-open .bbm-g-chev { transform: rotate(-135deg); margin-top: 4px; }
    .bbm-group.is-open { background: var(--bbm-sel); }
    .bbm-g-list { display: none; padding: 0 0 12px 6px; }
    .bbm-group.is-open .bbm-g-list { display: flex; flex-direction: column; gap: 2px; }
    html body .bbm-drawer .bx-mobile-menu-link {
        display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0; border-radius: 12px;
        color: var(--bbm-ink); text-decoration: none; text-transform: none; letter-spacing: 0;
        font: 600 1.02rem/1.25 'Inter', system-ui, sans-serif; background: transparent;
    }
    html body .bbm-drawer .bx-mobile-menu-link:active { background: var(--bbm-sel); }
    html body .bbm-drawer .bx-mobile-menu-link.active { background: var(--bbm-sel); color: var(--bbm-accent); box-shadow: inset 3px 0 0 var(--bbm-accent); }
    .bbm-drawer .bx-mobile-menu-link-icon { width: 24px; height: 24px; }
    html body .bbm-drawer .bbm-item.bx-mobile-menu-link { padding: 16px 10px; border-radius: 0; border-bottom: 1px solid var(--bbm-line); font-weight: 800; font-size: 1.12rem; }
    html body .bbm-drawer .bx-mobile-menu-link-highlight { color: var(--bbm-accent); }
    .bbm-extras { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
    .bbm-theme, .bbm-langsel-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--bbm-line); background: var(--bbm-card); color: var(--bbm-ink); font-family: 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer; }
    .bbm-theme-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
    .bbm-theme-ic img { width: 34px; height: 34px; object-fit: contain; }
    html[data-theme="light"] .bbm-theme-dark, html:not([data-theme="light"]) .bbm-theme-light { display: none; }
    .bbm-theme-tx, .bbm-langsel-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .bbm-theme-tx b, .bbm-langsel-tx b { font-size: 1.02rem; font-weight: 800; }
    .bbm-theme-tx small, .bbm-langsel-tx small { font-size: .82rem; color: var(--bbm-mute); font-weight: 500; }
    html[data-theme="light"] .bbm-theme-lbl-dark, html:not([data-theme="light"]) .bbm-theme-lbl-light { display: none; }
    .bbm-switch { flex: none; width: 46px; height: 26px; border-radius: 99px; background: var(--bbm-sel); border: 1px solid var(--bbm-line); position: relative; }
    .bbm-switch i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bbm-accent); transition: transform .2s; }
    html[data-theme="light"] .bbm-switch i { transform: translateX(20px); }
    .bbm-lang-flag { font-size: 1.5rem; line-height: 1; }
    .bbm-langsel { position: relative; }
    .bbm-langsel.is-open .bbm-g-chev { transform: rotate(-135deg); margin-top: 4px; }
    .bbm-langsel .bbm-g-chev { --c: var(--bbm-accent); border-color: var(--bbm-accent); }
    .bbm-langsel-list { margin-top: 6px; max-height: 42vh; overflow-y: auto; border: 1px solid var(--bbm-line); border-radius: 14px; background: var(--bbm-card); padding: 4px; }
    .bbm-langsel-list[hidden] { display: none; }
    .bbm-lang { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--bbm-ink); font: 600 1rem 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer; }
    .bbm-lang.is-current { background: var(--bbm-sel); color: var(--bbm-accent); }
    .bbm-settings { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bbm-line); background: var(--bbm-card); color: var(--bbm-ink); text-decoration: none; font: 700 1rem 'Inter', system-ui, sans-serif; }
    .bbm-settings img { width: 24px; height: 24px; }
    html[data-theme="light"] .bbm-settings img, html[data-theme="light"] .bbm-g-ic img[src*="Settings"] { filter: none; }

    /* ---- volet droit ---- */
    .bbm-discover .bbm-d-body { background: color-mix(in srgb, var(--bbm-bg) 88%, #2f56c8); }
    .bbm-card { background: var(--bbm-card); border: 1px solid var(--bbm-line); border-radius: 16px; padding: 18px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
    .bbm-card-title { margin: 0; font: 800 1.35rem/1.2 'Inter', system-ui, sans-serif; letter-spacing: -.02em; color: var(--bbm-ink); }
    .bbm-rule { height: 3px; margin: 12px 0 16px; border-radius: 3px; background: linear-gradient(90deg, #2f56c8 0 22%, #3ab5b5 22% 32%, var(--bbm-line) 32%); }
    .bbm-search-form { display: flex; align-items: stretch; border: 1px solid var(--bbm-line); border-radius: 14px; background: var(--bbm-bg); overflow: hidden; }
    .bbm-search-form input { flex: 1; min-width: 0; padding: 14px; border: 0; outline: 0; background: transparent; color: var(--bbm-ink); font: 600 1rem 'Inter', system-ui, sans-serif; }
    .bbm-search-form input::placeholder { color: var(--bbm-mute); }
    .bbm-search-btn { flex: none; width: 52px; display: grid; place-items: center; background: #2f56c8; margin: 5px; border-radius: 10px; }
    .bbm-search-btn img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
    .bbm-search-results { margin-top: 10px; max-height: 46vh; overflow-y: auto; border-radius: 12px; }
    .bbm-res { display: flex; align-items: center; gap: 10px; padding: 10px 8px; text-decoration: none; color: var(--bbm-ink); border-bottom: 1px solid var(--bbm-line); }
    .bbm-res img, .bbm-res-noic { width: 34px; height: 34px; object-fit: contain; flex: none; }
    .bbm-res-name { font-weight: 700; flex: 1; min-width: 0; }
    .bbm-res-type { font-size: .78rem; color: var(--bbm-mute); text-align: right; }
    .bbm-res-empty, .bbm-loading { padding: 14px; text-align: center; color: var(--bbm-mute); font-weight: 600; }
    /* Les sections de la colonne droite du bureau (masquées dans la page d'accueil mobile) s'affichent ici. */
    html body .bbm-discover .public-home-quickaccess,
    html body .bbm-discover .pass-releases-section,
    html body .bbm-discover .officer-releases-section { display: block; width: 100%; max-width: none; margin: 0 0 14px; box-sizing: border-box; }
    html body .bbm-discover .public-home-quickaccess { padding: 0; }

    /* ---------------- Boutons flottants QG + Warships ---------------- */

/* Le footer finit la page ; sa dernière ligne laisse la place aux boutons flottants (dans le footer, pas en dessous). */
    html body .bx-footer-bottom { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

    /* ---------------- Page d'accueil : on gagne de la largeur ---------------- */
    .public-home-col-right { display: none; }                       /* accès rapide désormais dans le volet "À découvrir" */
    .public-home-quickaccess { display: none; }
    .public-home-columns { padding: 0; margin: 0; gap: 0; width: 100%; }
    .public-home-col-center { width: 100%; max-width: none; }
    .event-news-section, .event-news-section.evx-home { width: 100%; max-width: none; margin: 0; padding-bottom: 18px; border-radius: 0; }
    .event-news-title { font-size: 1.3em; padding: 14px 12px; margin-bottom: 14px; line-height: 1.2; }
    .event-news-grid { padding: 0 8px; gap: 10px; }
    
    .event-news-section.evx-home .event-news-full-link { margin-left: 10px; }
    .public-home-hero { padding-left: 8px; padding-right: 8px; }
    .public-home-cycle-banner-inner, .public-home-ticker { width: 100%; box-sizing: border-box; }

    /* ---------------- Page Événements : quasi pleine largeur ---------------- */
    .event-timeline-page, .event-timeline-page-article, .evx-page { width: 100%; max-width: none; margin: 10px 0 40px; padding: 0 6px; box-sizing: border-box; }
    .evx-hero { padding: 16px 12px; gap: 16px; border-radius: 12px; }
    .evx-hero-title { font-size: 1.9em; }
    .evx-cal { max-width: 100%; }
    .evx-card { border-radius: 12px; }
}

/* ==========================================================================
   Méga-menu de l'en-tête (bureau) façon Pokékalos : titres en colonnes (icône + titre),
   sous-titres dessous qui mènent aux sections (#dex-sec-N) ; 3 groupes pour Événements.
   ========================================================================== */
html body .bx-nav-menu.bx-mega { flex-direction: row; align-items: flex-start; gap: 6px 22px; padding: 16px 20px 18px; max-width: calc(100vw - 16px); }
html body .bx-nav-group.is-open .bx-nav-menu.bx-mega { display: flex; }
.bx-mega-col { display: flex; flex-direction: column; gap: 1px; min-width: 150px; }
html body .bx-nav-menu.bx-mega .bx-mega-head {
    display: flex; align-items: center; gap: 9px; padding: 4px 8px 8px; margin-bottom: 6px; color: #ffe066; white-space: nowrap;
    font-family: 'Bangers', cursive; letter-spacing: .6px; text-transform: uppercase; font-size: 1.05em; text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, .18); border-radius: 0;
}
html body .bx-nav-menu.bx-mega a.bx-mega-head:hover { background: transparent; color: #fff; }
html body .bx-nav-menu.bx-mega a.bx-mega-head.active { background: transparent; color: #fff; border-bottom-color: #ffe066; }
html body .bx-nav-menu.bx-mega .bx-mega-head .bx-nav-ico { width: 30px; height: 30px; }
html body .bx-nav-menu.bx-mega a.bx-mega-link {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-family: inherit; text-transform: none;
    letter-spacing: 0; font-size: .88em; font-weight: 600; color: #e6f1f8; opacity: .95;
}
html body .bx-nav-menu.bx-mega a.bx-mega-link:hover { background: rgba(255, 255, 255, .14); color: #fff; }
html body .bx-nav-menu.bx-mega a.bx-mega-link .bx-nav-ico { width: 22px; height: 22px; }

/* Volet mobile : sous-sections en pastilles ("Sommaire") et intertitres des groupes d'événements. */
@media (max-width: 768px) {
    html body .bbm-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 14px 10px 54px; }
    html body .bbm-chips a { padding: 5px 11px; border-radius: 999px; font-size: .78em; font-weight: 700; text-decoration: none;
        color: var(--bbm-ink); background: var(--bbm-card); border: 1px solid rgba(127, 127, 127, .35); }
    html body .bbm-subhead { padding: 10px 14px 2px; font-size: .72em; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; opacity: .7; color: var(--bbm-ink); }
}

/* Volet mobile : accordéons de sous-sections (fermés par défaut). */
@media (max-width: 768px) {
    html body .bbm-acc { margin: 0 0 2px; }
    html body .bbm-acc-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: transparent; border: 0; cursor: pointer; text-align: left;
        color: var(--bbm-ink); font: 700 .95rem/1.2 inherit; font-family: inherit; }
    html body .bbm-acc-ic { display: inline-flex; width: 26px; flex: none; }
    html body .bbm-acc-ic:empty { width: 0; }
    html body .bbm-acc-ic img { width: 26px; height: 26px; object-fit: contain; }
    html body .bbm-acc-tx { flex: 1; min-width: 0; }
    html body .bbm-acc-links .bbm-acc-tx { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; opacity: .8; }
    html body .bbm-acc-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; opacity: .7; flex: none; margin-right: 4px; }
    html body .bbm-acc.is-open > .bbm-acc-btn .bbm-acc-chev { transform: rotate(-135deg); }
    html body .bbm-acc-body { display: none; }
    html body .bbm-acc.is-open > .bbm-acc-body { display: flex; flex-direction: column; }
    html body .bbm-acc-body.bbm-chips { flex-direction: row; padding: 2px 14px 10px 50px; }
    html body .bbm-acc-body .bbm-chips a, html body .bbm-acc-body.bbm-chips a { padding: 5px 11px; border-radius: 999px; font-size: .78em; font-weight: 700; text-decoration: none;
        color: var(--bbm-ink); background: var(--bbm-card); border: 1px solid rgba(127, 127, 127, .35); }
    html body .bbm-acc-body.bbm-chips a.bbm-chip-all { border-color: var(--bbm-accent, #1f7a8c); color: var(--bbm-accent, #1f7a8c); }
    html body .bbm-acc-links .bbm-acc-body { padding-left: 12px; }

    /* Page Événements : barre « Catégorie / x événements affichés » sans débordement horizontal. */
    html body .evx-page { max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
    html body .evx-subbar { flex-wrap: wrap; gap: 6px 12px; }
    html body .evx-subbar .evx-cat { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; }
    html body .evx-subbar .evx-cat select { flex: 1; min-width: 0; max-width: 100%; margin-left: 0; }
    html body .evx-subbar .evx-shown { flex: 1 1 100%; text-align: right; }
    html body .evx-toolbar { flex-wrap: wrap; min-width: 0; }
    html body .evx-tabs, html body .evx-search { max-width: 100%; min-width: 0; box-sizing: border-box; }
}

/* Volet « À découvrir » : en-tête bleu uni, corps beige. */
html body .bbm-discover .bbm-d-head { background: rgb(35, 95, 145); }
html body .bbm-discover .bbm-d-body { background: #F4E5C1; }


/* Doublon de croix supprimé ; survol/appui lisibles sur les onglets du volet (plus de fond bleu + texte sombre). */
.bbm-x { display: none !important; }
@media (max-width: 768px) {
    html body :is(.bbm-g-btn, .bbm-acc-btn):is(:hover, :focus, :focus-visible, :active) {
        background: var(--bbm-sel, rgba(31, 122, 140, .14)); color: var(--bbm-ink); border: 0; outline: none; box-shadow: inset 4px 0 0 var(--c, var(--bbm-accent, #1f7a8c));
    }
    html body :is(.bbm-g-btn, .bbm-acc-btn):is(:hover, :focus, :active) .bbm-g-tx small { color: var(--bbm-mute); }
}
.bbm-search-form { align-items: center; }
.bbm-search-ico { flex: none; width: 24px; height: 24px; object-fit: contain; margin-left: 12px; }

@media (max-width: 768px) {
    html body :is(.bbm-theme, .bbm-langsel-btn, .bbm-settings, .bbm-lang):is(:hover, :focus-visible, :active) {
        background: var(--bbm-sel, rgba(31, 122, 140, .14)); color: var(--bbm-ink); border-color: var(--bbm-accent, #1f7a8c); outline: none; box-shadow: none;
    }
    html body :is(.bbm-theme, .bbm-langsel-btn):is(:hover, :focus-visible, :active) :is(small, b) { color: inherit; }
    html body :is(.bbm-theme, .bbm-langsel-btn):is(:hover, :focus-visible, :active) small { color: var(--bbm-mute); }
}

/* Volet de navigation (thème clair) : même fond beige que « À découvrir »,
   les groupes (.bbm-g-btn) restent blancs. */
@media (max-width: 768px) {
    html[data-theme="light"] body .bx-mobile-menu-popup.bbm-drawer,
    html[data-theme="light"] body .bbm-drawer .bbm-d-body { background: #F4E5C1; }
    html[data-theme="light"] body .bbm-drawer .bbm-group { background: #fff; border: 0; border-radius: 12px; margin: 0 0 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(15, 42, 61, .12); }
    html[data-theme="light"] body .bbm-drawer .bbm-group.is-open { background: #fff; }
    html[data-theme="light"] body .bbm-drawer .bbm-g-btn,
    html[data-theme="light"] body .bbm-drawer .bbm-g-btn:is(:hover, :focus, :focus-visible, :active) { background: #fff; padding-left: 12px; }
}

/* ==========================================================================
   Volet de navigation : même rendu en clair et en sombre (groupes = cartes),
   Dashboard / Compte repris sur le même visuel, plus de sous-titres.
   ========================================================================== */
@media (max-width: 768px) {
    html body .bbm-drawer .bbm-group,
    html body .bbm-drawer .bbm-group.is-open,
    html body .bbm-drawer details.bbm-item {
        background: var(--bbm-card); border: 0; border-radius: 12px; margin: 0 0 8px; overflow: hidden;
        box-shadow: 0 1px 3px rgba(15, 42, 61, .12);
    }
    html[data-theme="dark"] body .bbm-drawer .bbm-group,
    html[data-theme="dark"] body .bbm-drawer .bbm-group.is-open,
    html[data-theme="dark"] body .bbm-drawer details.bbm-item { box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
    html body .bbm-drawer .bbm-g-btn,
    html body .bbm-drawer .bbm-g-btn:is(:hover, :focus, :focus-visible, :active) { background: var(--bbm-card); padding-left: 12px; }
    html body .bbm-drawer .bbm-g-btn { padding-top: 14px; padding-bottom: 14px; }

    /* Dashboard / Compte (<details>) */
    html body .bbm-drawer details.bbm-item > summary.bx-mobile-menu-link {
        display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 12px; border: 0; border-radius: 0; background: var(--bbm-card);
        color: var(--bbm-ink); font: 800 1.2rem/1.15 'Inter', system-ui, sans-serif; letter-spacing: -.01em; list-style: none; cursor: pointer;
    }
    html body .bbm-drawer details.bbm-item > summary .bx-mobile-menu-link-icon { width: 32px; height: 32px; flex: none; object-fit: contain; }
    html body .bbm-drawer details.bbm-item > summary .bx-mobile-acc-chev { width: 10px; height: 10px; border-width: 0 3px 3px 0; border-style: solid; border-color: var(--bbm-accent); margin: -4px 6px 0 auto; opacity: 1; }
    html body .bbm-drawer details.bbm-item[open] > summary .bx-mobile-acc-chev { margin-top: 4px; }
    html body .bbm-drawer details.bbm-item[open] { padding-bottom: 10px; }
    html body .bbm-drawer details.bbm-item > .bx-mobile-menu-sub { margin-left: 6px; margin-right: 6px; }
    html body .bbm-drawer details.bbm-item > summary:is(:hover, :active, :focus) { background: var(--bbm-sel); }
}

/* Sous-onglets (pastilles) du volet : en liste verticale, une par ligne, pour Beachadex comme pour Dashboard. */
@media (max-width: 768px) {
    html body .bbm-acc-body.bbm-chips { flex-direction: column; flex-wrap: nowrap; gap: 6px; padding: 2px 14px 10px 50px; }
    html body .bbm-acc-body.bbm-chips a { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 7px 12px; font-size: .85em; }
    html body .bbm-acc-body.bbm-chips a img, html body .bbm-acc-body.bbm-chips a .bbm-chip-ico { width: 18px; height: 18px; object-fit: contain; flex: none; }
    html body details.bbm-item > .bbm-acc { margin: 0 6px; }
}

/* ==========================================================================
   Menu mobile dès 1100px (demande du 10/11, "le menu passe en mode mobile dès que Compte passe sous la
   barre de recherche") : on rejoue ICI uniquement les règles de la barre + du tiroir (.bbm-*) pour 769–1100px.
   La mise en page du contenu (accueil, événements…) reste, elle, sur le seuil 768px.
   ========================================================================== */
@media (max-width: 1100px) {
    :root { --mobile-topbar-h: 58px; --mobile-bottom-nav-h: 0px; --bbm-h: 58px; }
    body {
            --bbm-bg: #241824; --bbm-card: #32233a; --bbm-ink: #f3edf4; --bbm-mute: #b9aabd;
            --bbm-line: rgba(255, 255, 255, .12); --bbm-accent: #56c8d8; --bbm-sel: rgba(255, 255, 255, .07);
            --bbm-shadow: 0 10px 30px rgba(0, 0, 0, .5);
        }
    html[data-theme="light"] body {
            --bbm-bg: #f8f8f8; --bbm-card: #ffffff; --bbm-ink: #0f2a3d; --bbm-mute: #587084;
            --bbm-line: #dfe5ea; --bbm-accent: #1f7a8c; --bbm-sel: #eef2f6;
            --bbm-shadow: 0 10px 30px rgba(15, 42, 61, .22);
        }
    body:has(.bbm-bar) { padding-top: var(--bbm-h); }
    body.bbm-lock { overflow: hidden; }
    .bbm-bar {
            display: grid; grid-template-columns: auto 1fr auto; align-items: stretch;
            position: fixed; top: 0; left: 0; right: 0; height: var(--bbm-h); z-index: 900;
            background: linear-gradient(100deg, #0b3358 0%, #135a78 55%, #1a7f98 100%);
            border-bottom: 2px solid #0b2238; box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
        }
    .bbm-bar-zone {
            display: flex; align-items: center; justify-content: center; gap: 10px;
            border: 0; margin: 0; padding: 0 16px; background: rgba(8, 28, 48, .22); color: #fff;
            font: 700 1rem/1 'Inter', system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
        }
    .bbm-bar-left { border-right: 1px solid rgba(255, 255, 255, .16); min-width: 104px; }
    .bbm-bar-right { border-left: 1px solid rgba(255, 255, 255, .16); min-width: 64px; padding: 0 14px; }
    .bbm-bar-zone:active { background: rgba(255, 255, 255, .14); }
    .bbm-burger { position: relative; width: 22px; height: 16px; display: block; }
    .bbm-burger i { position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .22s, opacity .18s, top .22s; }
    .bbm-burger i:nth-child(1) { top: 0; }
    .bbm-burger i:nth-child(2) { top: 6.5px; }
    .bbm-burger i:nth-child(3) { top: 13px; }
    body.mobile-menu-open .bbm-burger i:nth-child(1) { top: 6.5px; transform: rotate(45deg); }
    body.mobile-menu-open .bbm-burger i:nth-child(2) { opacity: 0; }
    body.mobile-menu-open .bbm-burger i:nth-child(3) { top: 6.5px; transform: rotate(-45deg); }
    .bbm-ico-open { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(8, 28, 48, .5)); }
    .bbm-ico-close { display: none; font-size: 1.5rem; }
    body.bbm-discover-open .bbm-ico-open { display: none; }
    body.bbm-discover-open .bbm-ico-close { display: block; }
    .bbm-logo {
            display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 0 6px;
            text-decoration: none; font-family: 'Bangers', cursive; font-size: 1.5rem; letter-spacing: 1px; line-height: 1;
            white-space: nowrap; overflow: hidden;
        }
    .bbm-logo img { height: 34px; width: auto; flex: none; filter: drop-shadow(0 2px 0 rgba(8, 28, 48, .55)); }
    .bbm-logo span { color: #fff; -webkit-text-stroke: 4px #0b2238; paint-order: stroke fill; text-shadow: 0 2px 0 #0b2238; padding: 2px 3px 4px 0; overflow: hidden; text-overflow: ellipsis; }
    .bbm-backdrop { display: block; position: fixed; inset: var(--bbm-h) 0 0 0; background: rgba(8, 14, 22, .55); z-index: 840; opacity: 0; pointer-events: none; transition: opacity .22s; }
    body.mobile-menu-open .bbm-backdrop, body.bbm-discover-open .bbm-backdrop { opacity: 1; pointer-events: auto; }
    html body .bx-mobile-menu-popup.bbm-drawer,
        html body .bbm-discover {
            display: flex; flex-direction: column; gap: 0; position: fixed; top: var(--bbm-h); bottom: 0; z-index: 860;
            width: min(88vw, 400px); max-height: none; padding: 0; margin: 0; box-sizing: border-box; overflow: hidden;
            background: var(--bbm-bg); color: var(--bbm-ink); border: 0; border-radius: 0; box-shadow: var(--bbm-shadow);
            animation: none; transition: transform .26s cubic-bezier(.3, .8, .3, 1), visibility 0s linear .26s; visibility: hidden;
        }
    html body .bx-mobile-menu-popup.bbm-drawer { left: 0; right: auto; transform: translateX(-104%); border-right: 1px solid var(--bbm-line); }
    html body .bbm-discover { right: 0; left: auto; transform: translateX(104%); border-left: 1px solid var(--bbm-line); }
    html body.mobile-menu-open .bx-mobile-menu-popup.bbm-drawer,
        html body.bbm-discover-open .bbm-discover { transform: translateX(0); visibility: visible; transition: transform .26s cubic-bezier(.3, .8, .3, 1), visibility 0s; }
    html body .bx-mobile-menu-popup:not(.bbm-drawer) { display: none; }
    .bbm-d-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--bbm-line); background: var(--bbm-bg); }
    html body .bbm-d-head h2, html body .bbm-card-title { background: none; border: 0; box-shadow: none; text-shadow: none; -webkit-text-stroke: 0; width: auto; display: block; text-align: left; padding: 0; color: var(--bbm-ink) !important; }
    html body .bbm-discover .bbm-d-head h2 { color: #fff !important; }
    .bbm-d-head h2 { margin: 0; font: 800 1.1rem/1.2 'Inter', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--bbm-ink); }
    .bbm-x { width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--bbm-line); background: var(--bbm-card); color: var(--bbm-ink); font-size: 1.05rem; cursor: pointer; }
    .bbm-d-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 28px; -webkit-overflow-scrolling: touch; }
    .bbm-discover .bbm-d-head { background: linear-gradient(120deg, #0b3358, #1c4f93); border-bottom: 0; }
    .bbm-discover .bbm-d-head h2 { color: #fff; text-transform: none; letter-spacing: 0; font-size: 1.35rem; }
    .bbm-discover .bbm-x { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }
    .bbm-group { border-bottom: 1px solid var(--bbm-line); --c: #c0344f; }
    .bbm-group[data-c="1"] { --c: #2f56c8; }
    .bbm-group[data-c="2"] { --c: #1f8a5b; }
    .bbm-group[data-c="3"] { --c: #7a45c0; }
    .bbm-g-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 6px; border: 0; background: transparent; color: var(--bbm-ink); text-align: left; cursor: pointer; font-family: inherit; }
    .bbm-g-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
    .bbm-g-ic img { width: 32px; height: 32px; object-fit: contain; }
    .bbm-g-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .bbm-g-tx b { font: 800 1.2rem/1.15 'Inter', system-ui, sans-serif; letter-spacing: -.01em; }
    .bbm-g-tx small { font: 500 .92rem/1.2 'Inter', system-ui, sans-serif; color: var(--bbm-mute); }
    .bbm-g-chev { flex: none; width: 10px; height: 10px; border-right: 3px solid var(--c); border-bottom: 3px solid var(--c); transform: rotate(45deg); margin: -4px 6px 0 0; transition: transform .2s; }
    .bbm-group.is-open .bbm-g-chev { transform: rotate(-135deg); margin-top: 4px; }
    .bbm-group.is-open { background: var(--bbm-sel); }
    .bbm-g-list { display: none; padding: 0 0 12px 6px; }
    .bbm-group.is-open .bbm-g-list { display: flex; flex-direction: column; gap: 2px; }
    html body .bbm-drawer .bx-mobile-menu-link {
            display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0; border-radius: 12px;
            color: var(--bbm-ink); text-decoration: none; text-transform: none; letter-spacing: 0;
            font: 600 1.02rem/1.25 'Inter', system-ui, sans-serif; background: transparent;
        }
    html body .bbm-drawer .bx-mobile-menu-link:active { background: var(--bbm-sel); }
    html body .bbm-drawer .bx-mobile-menu-link.active { background: var(--bbm-sel); color: var(--bbm-accent); box-shadow: inset 3px 0 0 var(--bbm-accent); }
    .bbm-drawer .bx-mobile-menu-link-icon { width: 24px; height: 24px; }
    html body .bbm-drawer .bbm-item.bx-mobile-menu-link { padding: 16px 10px; border-radius: 0; border-bottom: 1px solid var(--bbm-line); font-weight: 800; font-size: 1.12rem; }
    html body .bbm-drawer .bx-mobile-menu-link-highlight { color: var(--bbm-accent); }
    .bbm-extras { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
    .bbm-theme, .bbm-langsel-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--bbm-line); background: var(--bbm-card); color: var(--bbm-ink); font-family: 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer; }
    .bbm-theme-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
    .bbm-theme-ic img { width: 34px; height: 34px; object-fit: contain; }
    html[data-theme="light"] .bbm-theme-dark, html:not([data-theme="light"]) .bbm-theme-light { display: none; }
    .bbm-theme-tx, .bbm-langsel-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .bbm-theme-tx b, .bbm-langsel-tx b { font-size: 1.02rem; font-weight: 800; }
    .bbm-theme-tx small, .bbm-langsel-tx small { font-size: .82rem; color: var(--bbm-mute); font-weight: 500; }
    html[data-theme="light"] .bbm-theme-lbl-dark, html:not([data-theme="light"]) .bbm-theme-lbl-light { display: none; }
    .bbm-switch { flex: none; width: 46px; height: 26px; border-radius: 99px; background: var(--bbm-sel); border: 1px solid var(--bbm-line); position: relative; }
    .bbm-switch i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bbm-accent); transition: transform .2s; }
    html[data-theme="light"] .bbm-switch i { transform: translateX(20px); }
    .bbm-lang-flag { font-size: 1.5rem; line-height: 1; }
    .bbm-langsel { position: relative; }
    .bbm-langsel.is-open .bbm-g-chev { transform: rotate(-135deg); margin-top: 4px; }
    .bbm-langsel .bbm-g-chev { --c: var(--bbm-accent); border-color: var(--bbm-accent); }
    .bbm-langsel-list { margin-top: 6px; max-height: 42vh; overflow-y: auto; border: 1px solid var(--bbm-line); border-radius: 14px; background: var(--bbm-card); padding: 4px; }
    .bbm-langsel-list[hidden] { display: none; }
    .bbm-lang { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--bbm-ink); font: 600 1rem 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer; }
    .bbm-lang.is-current { background: var(--bbm-sel); color: var(--bbm-accent); }
    .bbm-settings { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bbm-line); background: var(--bbm-card); color: var(--bbm-ink); text-decoration: none; font: 700 1rem 'Inter', system-ui, sans-serif; }
    .bbm-settings img { width: 24px; height: 24px; }
    html[data-theme="light"] .bbm-settings img, html[data-theme="light"] .bbm-g-ic img[src*="Settings"] { filter: none; }
    .bbm-discover .bbm-d-body { background: color-mix(in srgb, var(--bbm-bg) 88%, #2f56c8); }
    .bbm-card { background: var(--bbm-card); border: 1px solid var(--bbm-line); border-radius: 16px; padding: 18px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
    .bbm-card-title { margin: 0; font: 800 1.35rem/1.2 'Inter', system-ui, sans-serif; letter-spacing: -.02em; color: var(--bbm-ink); }
    .bbm-rule { height: 3px; margin: 12px 0 16px; border-radius: 3px; background: linear-gradient(90deg, #2f56c8 0 22%, #3ab5b5 22% 32%, var(--bbm-line) 32%); }
    .bbm-search-form { display: flex; align-items: stretch; border: 1px solid var(--bbm-line); border-radius: 14px; background: var(--bbm-bg); overflow: hidden; }
    .bbm-search-form input { flex: 1; min-width: 0; padding: 14px; border: 0; outline: 0; background: transparent; color: var(--bbm-ink); font: 600 1rem 'Inter', system-ui, sans-serif; }
    .bbm-search-form input::placeholder { color: var(--bbm-mute); }
    .bbm-search-btn { flex: none; width: 52px; display: grid; place-items: center; background: #2f56c8; margin: 5px; border-radius: 10px; }
    .bbm-search-btn img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
    .bbm-search-results { margin-top: 10px; max-height: 46vh; overflow-y: auto; border-radius: 12px; }
    .bbm-res { display: flex; align-items: center; gap: 10px; padding: 10px 8px; text-decoration: none; color: var(--bbm-ink); border-bottom: 1px solid var(--bbm-line); }
    .bbm-res img, .bbm-res-noic { width: 34px; height: 34px; object-fit: contain; flex: none; }
    .bbm-res-name { font-weight: 700; flex: 1; min-width: 0; }
    .bbm-res-type { font-size: .78rem; color: var(--bbm-mute); text-align: right; }
    .bbm-res-empty, .bbm-loading { padding: 14px; text-align: center; color: var(--bbm-mute); font-weight: 600; }
    html body .bbm-discover .public-home-quickaccess,
        html body .bbm-discover .pass-releases-section,
        html body .bbm-discover .officer-releases-section { display: block; width: 100%; max-width: none; margin: 0 0 14px; box-sizing: border-box; }
    html body .bbm-discover .public-home-quickaccess { padding: 0; }
    html body .bbm-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 14px 10px 54px; }
    html body .bbm-chips a { padding: 5px 11px; border-radius: 999px; font-size: .78em; font-weight: 700; text-decoration: none;
            color: var(--bbm-ink); background: var(--bbm-card); border: 1px solid rgba(127, 127, 127, .35); }
    html body .bbm-subhead { padding: 10px 14px 2px; font-size: .72em; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; opacity: .7; color: var(--bbm-ink); }
    html body .bbm-acc { margin: 0 0 2px; }
    html body .bbm-acc-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: transparent; border: 0; cursor: pointer; text-align: left;
            color: var(--bbm-ink); font: 700 .95rem/1.2 inherit; font-family: inherit; }
    html body .bbm-acc-ic { display: inline-flex; width: 26px; flex: none; }
    html body .bbm-acc-ic:empty { width: 0; }
    html body .bbm-acc-ic img { width: 26px; height: 26px; object-fit: contain; }
    html body .bbm-acc-tx { flex: 1; min-width: 0; }
    html body .bbm-acc-links .bbm-acc-tx { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; opacity: .8; }
    html body .bbm-acc-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; opacity: .7; flex: none; margin-right: 4px; }
    html body .bbm-acc.is-open > .bbm-acc-btn .bbm-acc-chev { transform: rotate(-135deg); }
    html body .bbm-acc-body { display: none; }
    html body .bbm-acc.is-open > .bbm-acc-body { display: flex; flex-direction: column; }
    html body .bbm-acc-body.bbm-chips { flex-direction: row; padding: 2px 14px 10px 50px; }
    html body .bbm-acc-body .bbm-chips a, html body .bbm-acc-body.bbm-chips a { padding: 5px 11px; border-radius: 999px; font-size: .78em; font-weight: 700; text-decoration: none;
            color: var(--bbm-ink); background: var(--bbm-card); border: 1px solid rgba(127, 127, 127, .35); }
    html body .bbm-acc-body.bbm-chips a.bbm-chip-all { border-color: var(--bbm-accent, #1f7a8c); color: var(--bbm-accent, #1f7a8c); }
    html body .bbm-acc-links .bbm-acc-body { padding-left: 12px; }
    html body :is(.bbm-g-btn, .bbm-acc-btn):is(:hover, :focus, :focus-visible, :active) {
            background: var(--bbm-sel, rgba(31, 122, 140, .14)); color: var(--bbm-ink); border: 0; outline: none; box-shadow: inset 4px 0 0 var(--c, var(--bbm-accent, #1f7a8c));
        }
    html body :is(.bbm-g-btn, .bbm-acc-btn):is(:hover, :focus, :active) .bbm-g-tx small { color: var(--bbm-mute); }
    html body :is(.bbm-theme, .bbm-langsel-btn, .bbm-settings, .bbm-lang):is(:hover, :focus-visible, :active) {
            background: var(--bbm-sel, rgba(31, 122, 140, .14)); color: var(--bbm-ink); border-color: var(--bbm-accent, #1f7a8c); outline: none; box-shadow: none;
        }
    html body :is(.bbm-theme, .bbm-langsel-btn):is(:hover, :focus-visible, :active) :is(small, b) { color: inherit; }
    html body :is(.bbm-theme, .bbm-langsel-btn):is(:hover, :focus-visible, :active) small { color: var(--bbm-mute); }
    html[data-theme="light"] body .bx-mobile-menu-popup.bbm-drawer,
        html[data-theme="light"] body .bbm-drawer .bbm-d-body { background: #F4E5C1; }
    html[data-theme="light"] body .bbm-drawer .bbm-group { background: #fff; border: 0; border-radius: 12px; margin: 0 0 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(15, 42, 61, .12); }
    html[data-theme="light"] body .bbm-drawer .bbm-group.is-open { background: #fff; }
    html[data-theme="light"] body .bbm-drawer .bbm-g-btn,
        html[data-theme="light"] body .bbm-drawer .bbm-g-btn:is(:hover, :focus, :focus-visible, :active) { background: #fff; padding-left: 12px; }
    html body .bbm-drawer .bbm-group,
        html body .bbm-drawer .bbm-group.is-open,
        html body .bbm-drawer details.bbm-item {
            background: var(--bbm-card); border: 0; border-radius: 12px; margin: 0 0 8px; overflow: hidden;
            box-shadow: 0 1px 3px rgba(15, 42, 61, .12);
        }
    html[data-theme="dark"] body .bbm-drawer .bbm-group,
        html[data-theme="dark"] body .bbm-drawer .bbm-group.is-open,
        html[data-theme="dark"] body .bbm-drawer details.bbm-item { box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
    html body .bbm-drawer .bbm-g-btn,
        html body .bbm-drawer .bbm-g-btn:is(:hover, :focus, :focus-visible, :active) { background: var(--bbm-card); padding-left: 12px; }
    html body .bbm-drawer .bbm-g-btn { padding-top: 14px; padding-bottom: 14px; }
    html body .bbm-drawer details.bbm-item > summary.bx-mobile-menu-link {
            display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 12px; border: 0; border-radius: 0; background: var(--bbm-card);
            color: var(--bbm-ink); font: 800 1.2rem/1.15 'Inter', system-ui, sans-serif; letter-spacing: -.01em; list-style: none; cursor: pointer;
        }
    html body .bbm-drawer details.bbm-item > summary .bx-mobile-menu-link-icon { width: 32px; height: 32px; flex: none; object-fit: contain; }
    html body .bbm-drawer details.bbm-item > summary .bx-mobile-acc-chev { width: 10px; height: 10px; border-width: 0 3px 3px 0; border-style: solid; border-color: var(--bbm-accent); margin: -4px 6px 0 auto; opacity: 1; }
    html body .bbm-drawer details.bbm-item[open] > summary .bx-mobile-acc-chev { margin-top: 4px; }
    html body .bbm-drawer details.bbm-item[open] { padding-bottom: 10px; }
    html body .bbm-drawer details.bbm-item > .bx-mobile-menu-sub { margin-left: 6px; margin-right: 6px; }
    html body .bbm-drawer details.bbm-item > summary:is(:hover, :active, :focus) { background: var(--bbm-sel); }
    html body .bbm-acc-body.bbm-chips { flex-direction: column; flex-wrap: nowrap; gap: 6px; padding: 2px 14px 10px 50px; }
    html body .bbm-acc-body.bbm-chips a { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 7px 12px; font-size: .85em; }
    html body .bbm-acc-body.bbm-chips a img, html body .bbm-acc-body.bbm-chips a .bbm-chip-ico { width: 18px; height: 18px; object-fit: contain; flex: none; }
    html body details.bbm-item > .bbm-acc { margin: 0 6px; }
    :root { --bx-topbar-h: var(--bbm-h, 58px); }
}

/* Police fluide : en dessous de ~930px de large, la taille de base descend doucement (16px -> 14px),
   donc tout ce qui est en em/rem suit. Aucun changement sur ordinateur. */
html { font-size: clamp(14px, calc(10.5px + .6vw), 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas, svg { max-width: 100%; }