/* ========================================================================
   BPM 216 — Amélioration douce de l'interface existante
   ------------------------------------------------------------------------
   Objectif : améliorer l'ergonomie, la lisibilité et le mobile sans changer
   l'identité visuelle BPM. Cette feuille est chargée seulement hors des
   pages de contrôle radio protégées.
   ======================================================================== */

body.bpm-ui-polish-v216 {
  --bpm216-tap: 42px;
  --bpm216-content-gap: clamp(.85rem, 1.5vw, 1.25rem);
  --bpm216-soft-line: rgba(255,255,255,.085);
  overflow-wrap: anywhere;
}

/* Navigation : même design, meilleure résistance aux écrans intermédiaires. */
body.bpm-ui-polish-v216 .site-nav {
  min-width: 0;
}
body.bpm-ui-polish-v216 .nav-links {
  min-width: 0;
  scrollbar-width: none;
}
body.bpm-ui-polish-v216 .nav-links::-webkit-scrollbar {
  display: none;
}
body.bpm-ui-polish-v216 .nav-right {
  min-width: 0;
}
body.bpm-ui-polish-v216 .nlink,
body.bpm-ui-polish-v216 .notif-bell,
body.bpm-ui-polish-v216 .bpm184-nav-action {
  position: relative;
}
body.bpm-ui-polish-v216 .nlink::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 1px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .16s ease, transform .16s ease;
}
body.bpm-ui-polish-v216 .nlink.active::after {
  opacity: .65;
  transform: scaleX(1);
}

/* Clics et navigation clavier plus confortables, sans changer les couleurs. */
body.bpm-ui-polish-v216 :where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid rgba(77,159,255,.95) !important;
  outline-offset: 3px;
}
body.bpm-ui-polish-v216 :where(.btn,.ab,.notif-bell,.bpm184-nav-action,.bpm-player-btn,.bpm183-round-play) {
  -webkit-tap-highlight-color: transparent;
}
body.bpm-ui-polish-v216 button:not(:disabled),
body.bpm-ui-polish-v216 [role="button"]:not([aria-disabled="true"]) {
  touch-action: manipulation;
}

/* Cartes : correction des débordements et stabilité des contenus longs. */
body.bpm-ui-polish-v216 :where(
  .card,.dash-card,.pp-card,.post-card,.playlist-card,.event-card,
  .member-card,.artist-premium-card,.alb-card,.ev-home-card,.news-card,
  .bpm183-card,.bpm183-post,.bpm185-composer,.bpm188-panel,
  .bpm189-panel,.bpm190-panel,.bpm192-section,.bpm193-panel
) {
  min-width: 0;
}
body.bpm-ui-polish-v216 :where(
  .card-h,.card-head,.sec-head,.bpm183-card-title,.bpm-navpanel-head,
  .bpm183-post-head,.bpm185-composer-actions
) > * {
  min-width: 0;
}
body.bpm-ui-polish-v216 :where(
  .card h1,.card h2,.card h3,.card strong,.post-card strong,
  .bpm183-card strong,.bpm183-post strong,.bpm-navpanel-main strong
) {
  text-wrap: balance;
}
body.bpm-ui-polish-v216 :where(
  .bpm183-post-text,.post-content,.article-content,.bio,.description,
  .bpm-navpanel-main small,.bpm-qm-preview
) {
  overflow-wrap: anywhere;
}

/* Médias sociaux et musicaux : aucune déformation, moins de sauts de page. */
body.bpm-ui-polish-v216 :where(
  .bpm183-post-media,.post-media,.album-cover,.playlist-cover,
  .event-cover,.artist-cover,.member-cover
) {
  overflow: hidden;
}
body.bpm-ui-polish-v216 :where(
  .bpm183-post-media img,.bpm183-post-media video,.post-media img,
  .post-media video,.album-cover img,.playlist-cover img,.event-cover img
) {
  width: 100%;
  object-fit: cover;
}
body.bpm-ui-polish-v216 .bpm183-post-media img,
body.bpm-ui-polish-v216 .bpm183-post-media video {
  max-height: min(72vh, 760px);
}
body.bpm-ui-polish-v216 video,
body.bpm-ui-polish-v216 audio {
  max-width: 100%;
}

/* Formulaires : hiérarchie et messages plus lisibles. */
body.bpm-ui-polish-v216 :where(.fg,.field,.form-group) {
  min-width: 0;
}
body.bpm-ui-polish-v216 :where(.fg,.field,.form-group) > label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .35rem;
}
body.bpm-ui-polish-v216 :where(input,select,textarea) {
  max-width: 100%;
}
body.bpm-ui-polish-v216 :where(.hint,.help-text,.form-help,.mini) {
  line-height: 1.45;
}
body.bpm-ui-polish-v216 :where(input,select,textarea):disabled {
  cursor: not-allowed;
  opacity: .62;
}

/* Tableaux : défilement horizontal prévisible et en-têtes lisibles. */
body.bpm-ui-polish-v216 :where(.tbl-wrap,.table-wrap,.bpm-table-wrap) {
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
body.bpm-ui-polish-v216 :where(.tbl,.bpm-sec-table,.bpm203-table) th {
  white-space: nowrap;
}
body.bpm-ui-polish-v216 :where(.tbl,.bpm-sec-table,.bpm203-table) td {
  vertical-align: middle;
}

/* Menus rapides : restent dans l'écran même sur petits ordinateurs. */
body.bpm-ui-polish-v216 :where(.bpm-navpanel,.bpm-quickmsg-panel) {
  max-width: calc(100vw - 18px);
  max-height: calc(100dvh - 76px);
}
body.bpm-ui-polish-v216 .bpm-navpanel-body {
  overscroll-behavior: contain;
}

/* Pied de page : liens plus faciles à distinguer sans changer le style. */
body.bpm-ui-polish-v216 .footer-col a {
  width: fit-content;
  max-width: 100%;
}
body.bpm-ui-polish-v216 .footer-col a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Survol uniquement sur les appareils qui ont réellement un pointeur. */
@media (hover:hover) and (pointer:fine) {
  body.bpm-ui-polish-v216 :where(
    .card,.dash-card,.post-card,.playlist-card,.event-card,.member-card,
    .alb-card,.ev-home-card,.news-card,.bpm183-card,.bpm183-post
  ) {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
}

/* Ordinateurs et tablettes intermédiaires : la barre ne déborde plus. */
@media (min-width:761px) and (max-width:1380px) {
  body.bpm-ui-polish-v216 .site-nav {
    padding-inline: clamp(.65rem, 1.4vw, 1.15rem);
    gap: .45rem;
  }
  body.bpm-ui-polish-v216 .nav-links {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
    padding-inline: 10px;
  }
  body.bpm-ui-polish-v216 .nlink {
    padding-inline: 8px;
  }
  body.bpm-ui-polish-v216 .nav-right {
    gap: .3rem;
  }
}

/* Mobile : amélioration discrète des espacements et zones tactiles. */
@media (max-width:760px) {
  body.bpm-ui-polish-v216 {
    --bpm216-content-gap: .8rem;
  }
  body.bpm-ui-polish-v216 .mobile-menu-btn,
  body.bpm-ui-polish-v216 .notif-bell,
  body.bpm-ui-polish-v216 .bpm184-nav-action {
    min-width: var(--bpm216-tap);
    min-height: var(--bpm216-tap);
    align-items: center;
    justify-content: center;
  }
  body.bpm-ui-polish-v216 .site-mobile-menu a,
  body.bpm-ui-polish-v216 .smm-dd-toggle {
    min-height: 46px;
  }
  body.bpm-ui-polish-v216 :where(.btn,.ab) {
    min-height: var(--bpm216-tap);
  }
  body.bpm-ui-polish-v216 :where(.card,.bpm183-card,.bpm183-post,.bpm185-composer) {
    margin-bottom: .75rem;
  }
  body.bpm-ui-polish-v216 :where(.bpm-navpanel,.bpm-quickmsg-panel) {
    position: fixed;
    left: 9px;
    right: 9px;
    top: 66px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 150px);
  }
  body.bpm-ui-polish-v216 .bpm-quickmsg-panel::before,
  body.bpm-ui-polish-v216 .bpm-navpanel::before {
    display: none;
  }
  body.bpm-ui-polish-v216 .bpm183-post-actions {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  body.bpm-ui-polish-v216 .bpm183-post-actions::-webkit-scrollbar {
    display: none;
  }
  body.bpm-ui-polish-v216 .bpm183-post-actions button {
    flex: 0 0 auto;
    min-height: 40px;
  }
}

@media (max-width:420px) {
  body.bpm-ui-polish-v216 .site-nav {
    gap: .3rem !important;
  }
  body.bpm-ui-polish-v216 .bpm-top-logo-img {
    width: 38px !important;
    height: 38px !important;
  }
  body.bpm-ui-polish-v216 :where(.bpm-navpanel,.bpm-quickmsg-panel) {
    left: 6px;
    right: 6px;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.bpm-ui-polish-v216 *,
  body.bpm-ui-polish-v216 *::before,
  body.bpm-ui-polish-v216 *::after {
    scroll-behavior: auto !important;
  }
}