/* ========================================================================
   BPM 370 R22 - Harmonisation visuelle globale
   Reference: accueil BPM connecte.
   Charge uniquement hors pages radio/AutoDJ techniques protegees.
   ======================================================================== */

body.bpm-r22-visual-harmony {
  --bpm-r22-page-max: 1480px;
  --bpm-r22-panel: rgba(8, 13, 24, .86);
  --bpm-r22-panel-2: rgba(13, 20, 36, .82);
  --bpm-r22-line: rgba(255, 255, 255, .09);
  --bpm-r22-line-strong: rgba(77, 159, 255, .26);
  --bpm-r22-text: #e8eaf2;
  --bpm-r22-muted: #8b96ad;
  --bpm-r22-muted-2: #64708a;
  --bpm-r22-radius: 18px;
  --bpm-r22-radius-sm: 12px;
  --bpm-r22-shadow: 0 18px 48px rgba(0, 0, 0, .24);
  font-family: var(--font, "DM Sans", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.55;
}

body.bpm-r22-visual-harmony :where(button, input, select, textarea, table, .btn, .ab) {
  font-family: var(--font, "DM Sans", system-ui, sans-serif) !important;
}

body.bpm-r22-visual-harmony :where(
  h1, h2, h3,
  .sec-title, .section-card-title, .card-head h2, .card-h .ct,
  .page-head h1, .artistes-hero h1, .bpm260-page-hero h1,
  .bpm270-hero h1, .bpm280-hero h1, .bpm290-hero h1, .bpm300-hero h1,
  .bpm198-hero h1, .bpm199-hero h1, .bpm200-hero h1, .bpm201-email-hero h1,
  .bpm203-media-hero h1, .bpm192-premium-info h2, .ph-name,
  .em-content h1, .admin-main h1, .redac-main h1
) {
  font-family: var(--head, "Bebas Neue", system-ui, sans-serif) !important;
  letter-spacing: 0 !important;
  color: #fff;
  text-wrap: balance;
}

body.bpm-r22-visual-harmony :where(.page-head h1, .artistes-hero h1, .bpm260-page-hero h1, .bpm270-hero h1, .bpm280-hero h1, .bpm290-hero h1, .bpm300-hero h1, .bpm198-hero h1, .bpm199-hero h1, .bpm200-hero h1, .bpm201-email-hero h1, .bpm203-media-hero h1) {
  font-size: 44px !important;
  line-height: .95 !important;
  margin: .25rem 0 .45rem !important;
}

body.bpm-r22-visual-harmony h1 {
  font-size: 44px !important;
  line-height: .95 !important;
}

body.bpm-r22-visual-harmony h2 {
  font-size: 22px !important;
  line-height: 1.1 !important;
}

body.bpm-r22-visual-harmony h3 {
  font-size: 17px !important;
  line-height: 1.18 !important;
}

body.bpm-r22-visual-harmony :where(.card h1, [class*="-card"] h1, [class*="-panel"] h1, .auth-card h1) {
  font-size: 24px !important;
  line-height: 1.05 !important;
}

body.bpm-r22-visual-harmony :where(.card h2, [class*="-card"] h2, [class*="-panel"] h2) {
  font-size: 20px !important;
}

body.bpm-r22-visual-harmony :where(.card h3, [class*="-card"] h3, [class*="-panel"] h3) {
  font-size: 16px !important;
}

body.bpm-r22-visual-harmony :where(.section-card-title, .sec-title, .card-head h2, .bpm280-panel-head h2, .bpm280-section-head h2, .bpm201-email-panel h2, .bpm199-panel h2, .bpm199-card h2) {
  font-size: 20px !important;
  line-height: 1.1 !important;
}

body.bpm-r22-visual-harmony :where(p, li, td, th, .description, .bio, .bpm201-muted, .bpm280-section-head p, .bpm280-panel-head small, .page-head p, .artistes-hero p) {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

body.bpm-r22-visual-harmony :where(small, .muted, .hint, .help-text, .form-help, .cs, .lbl, .eyebrow, .bpm260-page-hero .eyebrow, .bpm280-kicker, .bpm201-kicker, .bpm199-kicker, .bpm200-kicker) {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body.bpm-r22-visual-harmony :where(.eyebrow, .lbl, .bpm260-page-hero .eyebrow, .bpm280-kicker, .bpm201-kicker, .bpm199-kicker, .bpm200-kicker) {
  letter-spacing: 0 !important;
}

/* Header commun: meme comportement que l'accueil, avec moins de variations par page. */
body.bpm-r22-visual-harmony .site-nav {
  min-height: 58px;
  height: 58px;
  padding-inline: 1.25rem;
  gap: .65rem;
}

body.bpm-r22-visual-harmony .nav-links {
  gap: .18rem;
}

body.bpm-r22-visual-harmony .nlink {
  min-height: 38px;
  padding: 8px 11px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0 !important;
  color: var(--bpm-r22-muted) !important;
}

body.bpm-r22-visual-harmony .nlink i {
  font-size: 16px;
}

body.bpm-r22-visual-harmony .nlink:hover,
body.bpm-r22-visual-harmony .nlink.active,
body.bpm-r22-visual-harmony .platform-top-explore.is-open > .nlink {
  color: #fff !important;
  background: rgba(42, 127, 255, .13) !important;
  border-color: rgba(77, 159, 255, .24) !important;
}

body.bpm-r22-visual-harmony .platform-top-explore-menu a,
body.bpm-r22-visual-harmony .site-mobile-menu a {
  font-size: 13px !important;
  font-weight: 800;
  letter-spacing: 0 !important;
}

/* Contenants et panneaux: rapproches des cartes de l'accueil. */
body.bpm-r22-visual-harmony :where(
  .container, .artistes-page, .bpm194-app-page, .bpm260-settings-page,
  .bpm260-team-page, .bpm260-promo-page, .bpm260-release-page,
  .bpm270-page, .bpm280-page, .bpm290-page, .bpm300-page,
  .bpm198-page, .bpm199-admin-wrap, .bpm200-config, .bpm201-email-admin,
  .bpm203-media-page, .profil-body
) {
  width: min(100% - 2rem, var(--bpm-r22-page-max));
  max-width: var(--bpm-r22-page-max);
  margin-left: auto;
  margin-right: auto;
}

body.bpm-r22-visual-harmony :where(
  .card, .section-card, .dash-card, .wallet-card, .post-card, .playlist-card,
  .event-card, .member-card, .artist-premium-card, .news-card,
  .bpm183-card, .bpm183-post, .bpm185-composer, .bpm188-panel,
  .bpm189-panel, .bpm190-panel, .bpm192-card, .bpm192-section,
  .bpm193-panel, .bpm199-card, .bpm199-panel, .bpm200-card,
  .bpm201-email-card, .bpm201-email-panel, .bpm260-setting-card,
  .bpm260-team-invite, .bpm260-team-list, .bpm260-promo-create,
  .bpm260-promo-list, .bpm260-waitlist, .bpm260-release-nav,
  .bpm260-release-form, .bpm260-track-editor, .bpm280-panel,
  .bpm280-room-main, .bpm280-room-side > *, .bpm300-panel
) {
  border-radius: var(--bpm-r22-radius) !important;
  border-color: var(--bpm-r22-line) !important;
  background: var(--bpm-r22-panel) !important;
  box-shadow: none;
}

body.bpm-r22-visual-harmony :where(
  .page-head, .artistes-hero, .bpm260-page-hero, .bpm270-hero,
  .bpm280-hero, .bpm290-hero, .bpm300-hero, .bpm198-hero,
  .bpm199-hero, .bpm200-hero, .bpm201-email-hero, .bpm203-media-hero,
  .admin-main .pg-ttl, .redac-main .pg-ttl
) {
  border-radius: 22px !important;
  border: 1px solid var(--bpm-r22-line-strong) !important;
  background:
    radial-gradient(circle at 12% 0, rgba(42, 127, 255, .18), transparent 36%),
    linear-gradient(135deg, rgba(12, 20, 35, .96), rgba(5, 9, 18, .96)) !important;
  box-shadow: var(--bpm-r22-shadow);
  padding: 1.35rem !important;
}

body.bpm-r22-visual-harmony :where(.card-head, .card-h, .section-card-title, .bpm280-panel-head, .bpm201-email-panel h2, .bpm199-card h2, .bpm199-panel h2) {
  gap: .55rem;
}

/* Boutons et champs: meme densite que l'accueil. */
body.bpm-r22-visual-harmony :where(.btn, .ab, .hero-btn-primary, .hero-btn-sec, button.btn) {
  min-height: 38px;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.1;
}

body.bpm-r22-visual-harmony :where(.btn-sm) {
  min-height: 34px;
  padding: 7px 11px !important;
  font-size: 12px !important;
}

body.bpm-r22-visual-harmony :where(.inp, input:not([type=checkbox]):not([type=radio]), select, textarea) {
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1.35;
}

body.bpm-r22-visual-harmony :where(input:not([type=checkbox]):not([type=radio]), select) {
  min-height: 40px;
}

body.bpm-r22-visual-harmony :where(.lbl, label) {
  font-weight: 800;
}

/* Menus lateraux et onglets: meme lecture que le menu de l'accueil. */
body.bpm-r22-visual-harmony :where(.bpm183-side-menu a, .sb-nav .ni, .bpm260-release-nav > a, .bpm280-tabs a, .bpm192-tabs a, .bpm188-tabs a, .smm-admin) {
  min-height: 40px;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 800;
  letter-spacing: 0 !important;
}

body.bpm-r22-visual-harmony :where(.bpm183-side-menu a.active, .sb-nav .ni.on, .bpm260-release-nav > a.active, .bpm280-tabs a.active, .bpm192-tabs a:hover, .bpm188-tabs a.active) {
  background: rgba(42, 127, 255, .12) !important;
  border-color: rgba(77, 159, 255, .25) !important;
  color: #fff !important;
}

/* Tableaux et listes: taille stable et coherente. */
body.bpm-r22-visual-harmony :where(table, .tbl, .bpm201-email-table) {
  font-size: 13px;
}

body.bpm-r22-visual-harmony :where(th) {
  font-size: 11px !important;
  font-weight: 900;
  letter-spacing: 0 !important;
}

body.bpm-r22-visual-harmony :where(.alert, .alert-ok, .alert-err, .alert-info, .bpm280-flash, .bpm199-check, .bpm201-status) {
  border-radius: 12px !important;
  font-size: 13px !important;
}

/* Les grands chiffres gardent la police d'affichage, mais avec la meme echelle. */
body.bpm-r22-visual-harmony :where(.dash-n, .pro-card strong, .wallet-amount, .bpm199-score strong, .bpm192-metrics strong, .bpm280-passport-score strong) {
  font-family: var(--head, "Bebas Neue", system-ui, sans-serif) !important;
  letter-spacing: 0 !important;
  line-height: .95;
}

@media (min-width: 761px) and (max-width: 1320px) {
  body.bpm-r22-visual-harmony .site-nav {
    padding-inline: .85rem;
  }
  body.bpm-r22-visual-harmony .nav-links {
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.bpm-r22-visual-harmony .nav-links::-webkit-scrollbar {
    display: none;
  }
  body.bpm-r22-visual-harmony .nlink {
    padding-inline: 9px !important;
  }
}

@media (max-width: 760px) {
  body.bpm-r22-visual-harmony {
    font-size: 14px;
  }
  body.bpm-r22-visual-harmony :where(.page-head h1, .artistes-hero h1, .bpm260-page-hero h1, .bpm270-hero h1, .bpm280-hero h1, .bpm290-hero h1, .bpm300-hero h1, .bpm198-hero h1, .bpm199-hero h1, .bpm200-hero h1, .bpm201-email-hero h1, .bpm203-media-hero h1) {
    font-size: 34px !important;
  }
  body.bpm-r22-visual-harmony h1 {
    font-size: 34px !important;
  }
  body.bpm-r22-visual-harmony h2 {
    font-size: 20px !important;
  }
  body.bpm-r22-visual-harmony :where(
    .container, .artistes-page, .bpm194-app-page, .bpm260-settings-page,
    .bpm260-team-page, .bpm260-promo-page, .bpm260-release-page,
    .bpm270-page, .bpm280-page, .bpm290-page, .bpm300-page,
    .bpm198-page, .bpm199-admin-wrap, .bpm200-config, .bpm201-email-admin,
    .bpm203-media-page, .profil-body
  ) {
    width: min(100% - 1rem, var(--bpm-r22-page-max));
  }
  body.bpm-r22-visual-harmony :where(.btn, .ab, .hero-btn-primary, .hero-btn-sec, button.btn) {
    min-height: 42px;
  }
  body.bpm-r22-visual-harmony :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
    font-size: 16px !important;
  }
}