/* ============================================================
   connect-components.css — Composants Connect (reconstruction)
   ------------------------------------------------------------
   Composants métier Connect (dashboard, mapping, charts) authored
   depuis les tokens. Complète bootstrap-bridge.css. Accent orange
   via product-connect.css. Chargé APRÈS layout.css.
   ============================================================ */

/* ---- Accent texte ---- */
.text-connect, .logo-text-ai { color: var(--accent) !important; }

/* ---- Cartes de tableau de bord ---- */
.dashboard-card {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.dashboard-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* ---- Cartes KPI (mapping & dashboard) ---- */
.mapping-kpi-card, .kpi-scored, .kpi-in-charts, .kpi-enriched, .kpi-avg-score, .kpi-total, .kpi-spotify {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.mapping-kpi-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.kpi-icon {
  width: 42px; height: 42px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 1.1rem;
}

/* ---- Badges mapping ---- */
.mapping-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
}

/* ---- Conteneurs & colonnes de graphiques ---- */
.chart-container, .chart-column-body { border-radius: var(--radius-lg); }
.chart-track-row { border-bottom: 1px solid var(--c-border); }
.chart-track-row:last-child { border-bottom: none; }

/* ============ Score Radar : board kanban (contenu) ============ */
.board-column {
  min-width: 320px; max-width: 320px; max-height: 100%;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); display: flex; flex-direction: column;
}
.board-column-header {
  padding: var(--sp-4); background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: sticky; top: 0; z-index: 10;
}
.column-title { font-weight: var(--fw-semibold); font-size: var(--fs-h3); color: var(--c-text); }
.column-stats { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: 4px; display: flex; justify-content: space-between; }
.column-drag-handle { color: var(--c-text-faint); cursor: grab; }
.board-column-content { padding: var(--sp-3); overflow-y: auto; flex-grow: 1; min-height: 100px; }
.music-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  padding: var(--sp-3); margin-bottom: var(--sp-2); cursor: grab; position: relative;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  border-left: 4px solid var(--c-border-strong);
}
.music-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.music-card:active { cursor: grabbing; }
.trend-hot { border-left-color: var(--c-success); }
.trend-warm { border-left-color: var(--c-warning); }
.trend-cold { border-left-color: var(--c-danger); }
.score-badge { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

/* ---- Score Radar v3 : profil actif, badge score, momentum, confiance ---- */
/* Barre de chips de profils (une chip = .pill--selectable.iscore-chip) */
.sr-profile-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* Groupe badge score + flèche momentum + pastille confiance sur la carte */
.sr-badges { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-1); }

/* Badge principal : score du profil actif, palier de couleur par seuils.
   Recette pills (fond soft + texte sémantique) → lisible clair ET sombre. */
.sr-score {
  min-width: 34px; padding: 2px var(--sp-2);
  border-radius: var(--radius-sm); text-align: center;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  background: var(--c-surface-2); color: var(--c-text-faint);
  border: 1px solid var(--c-border);
}
/* Échelle OFFICIELLE des scores/popularités (.score-level--* / .score-text--*)
   déplacée dans bootstrap-bridge.css : chargée par TOUS les produits (Connect
   ET AI.biza), car la popularité Spotify s'affiche aussi sur les pages Artistes. */

/* Flèche de momentum (↗ / → / ↘) */
.sr-momentum { font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: 1; }
.sr-momentum--up   { color: var(--c-success); }
.sr-momentum--flat { color: var(--c-text-faint); }
.sr-momentum--down { color: var(--c-danger); }

/* Pastille de confiance (nombre de sources alimentant le score) */
.sr-conf { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sr-conf--low  { background: var(--c-danger); }
.sr-conf--mid  { background: var(--c-warning); }
.sr-conf--high { background: var(--c-success); }

/* Popularité Spotify : indicateur secondaire discret */
.sr-spotify { color: var(--c-text-muted); font-size: var(--fs-xs); }
.sr-spotify .fa-spotify { color: var(--c-spotify); }

/* Liseré de suggestion sur la carte (à monter / à descendre) */
.music-card.sr-move-up   { border-left-color: var(--c-success); }
.music-card.sr-move-down { border-left-color: var(--c-danger); }

/* Ligne de suggestion dans le panneau */
.sr-suggestion { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--c-border); }
.sr-suggestion:last-child { border-bottom: none; }
.sr-suggestion.is-staged { opacity: 0.5; }
.sr-suggestion__reason { font-size: var(--fs-sm); color: var(--c-text-muted); }
.sr-suggestion__move { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* ============================================================
   MUSIC CHARTS (mc-*) — source unique, 100% tokenisée
   Remplace l'ancien <style> inline de music-charts.html et le bloc
   legacy "control-bar". Classes émises par le JS conservées comme
   hooks (.chart-track-row, .position-badge, .pos-*, .delta-*,
   .score-pill, .spotify-pop, .radio-badge, .genre-badge, .bpm-badge,
   .key-badge, .rotation-badge, .filter-stat-badge, .airplay-spins).
   ============================================================ */

/* ---- Barre d'outils sous la topbar ---- */
.mc-toolbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.mc-toolbar__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.mc-toolbar__title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--c-text); }
.mc-toolbar__actions { display: flex; align-items: center; gap: var(--sp-2); }
.mc-toolbar__controls { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* ---- Sélecteur de source (pictos) ---- */
.source-pill-bar { display: inline-flex; gap: var(--sp-1); }
.source-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 60px; border-radius: var(--radius-sm); }
.source-pill-bar .btn-check:checked + .source-btn { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow-sm); }
.source-picto { height: 28px; width: auto; display: block; filter: grayscale(35%); opacity: 0.65; transition: filter var(--t-fast), opacity var(--t-fast), transform var(--t-fast); }
.source-pill-bar .btn-check:checked + .source-btn .source-picto { filter: none; opacity: 1; transform: scale(1.05); }
.source-btn:hover .source-picto { filter: none; opacity: 1; }
.source-picto-icon { font-size: 1.5rem; color: var(--c-text-muted); opacity: 0.7; transition: color var(--t-fast), opacity var(--t-fast), transform var(--t-fast); }
.source-pill-bar .btn-check:checked + .source-btn .source-picto-icon { color: var(--c-info); opacity: 1; transform: scale(1.05); }
.source-btn:hover .source-picto-icon { opacity: 1; }
.source-title-picto { height: 26px; width: auto; }
.source-title-icon { color: var(--c-info); }

/* ---- Bandeau KPI (cartes .stat-card cliquables = filtres) ---- */
.mc-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.mc-kpi-card { cursor: pointer; }
.mc-kpi-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.mc-kpi-card.is-dim { opacity: 0.55; }

/* ---- Colonne de résultats : lignes-cartes média alignées ----
   Une carte par titre (respiration, coins arrondis, hover) MAIS la grille
   de colonnes reste PARTAGÉE entre l'en-tête (.mc-track-header, sticky) et
   les cartes (.mc-track) via --mc-cols : les métriques (Ibiza, Spotify,
   métrique source) restent comparables verticalement. Hiérarchie de la
   carte : rang (gros, or top 10) → pochette → titre/artiste sur 2 lignes
   → scores → statut (point) → actions (▶ extrait, fiche). */
.chart-column { background: transparent; }
.mc-track-list {
  display: flex; flex-direction: column; gap: var(--sp-2);
  /* rang | pochette | titre/artiste | Ibiza | Spotify | métrique source | point statut | actions
     (actions : ▶ extrait + lier à ma base + fiche = 3 boutons de 32px) */
  --mc-cols: 44px 44px minmax(0, 1fr) 52px 52px 128px 14px 116px;
}
.mc-track,
.mc-track-header {
  display: grid;
  grid-template-columns: var(--mc-cols);
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
}
.mc-track {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mc-track:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); }

/* En-tête de colonnes : hors carte, reste visible au défilement */
.mc-track-header {
  position: sticky; top: 0; z-index: 2;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border-strong);
}
.mc-th {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--c-text-faint); white-space: nowrap;
}
.mc-th--num, .mc-th--metric { text-align: right; }

/* Rang : repère principal de la carte (gros, tabulaire), or pour le top 10 ;
   la progression (delta) passe en petit sous le rang. */
.mc-track__rankbox {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  line-height: 1;
}
.mc-track__rankbox .delta-up,
.mc-track__rankbox .delta-down,
.mc-track__rankbox .delta-new,
.mc-track__rankbox .delta-flat { font-size: var(--fs-xs); }
.mc-track__pos {
  font-size: var(--fs-h3); font-weight: var(--fw-bold);
  color: var(--c-text-muted); font-variant-numeric: tabular-nums;
}
/* Les classes podium (pos-*) stylent des badges circulaires ailleurs ;
   ici la position est textuelle : on ne garde que la teinte or du top 10. */
.mc-track__pos.pos-top10 { background: transparent; color: var(--c-gold); }
.mc-track__pos.pos-top50, .mc-track__pos.pos-rest { background: transparent; }

/* Pochette (Shazam ou cache Spotify du catalogue) + placeholder */
.mc-artwork {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--c-surface-2); flex-shrink: 0;
}
.mc-artwork--ph {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-text-faint); font-size: var(--fs-body);
}

/* Point de statut : plein vert = en rotation, anneau gris = hors rotation,
   rouge cerclé = émergent (opportunité). */
.mc-dot { width: 10px; height: 10px; border-radius: 50%; justify-self: center; flex-shrink: 0; }
.mc-dot--rotation { background: var(--c-success); }
.mc-dot--none { border: 2px solid var(--c-border-strong); }
.mc-dot--emergent { background: var(--c-danger); box-shadow: 0 0 0 3px var(--c-danger-soft); }

/* Cellule d'identité : titre (gras) et artiste (discret) sur 2 lignes,
   chacune tronquée — hiérarchie franche, casse normale (choix David). */
.mc-track__id { min-width: 0; line-height: var(--lh-tight); }
.mc-track__title-line {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: var(--fw-semibold); color: var(--c-text);
}
.mc-track__title { font-weight: var(--fw-semibold); color: var(--c-text); }
.mc-track__artist {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: var(--fs-sm); color: var(--c-text-muted);
}

/* Cellules numériques alignées (Ibiza, Spotify) */
.mc-track__num {
  text-align: right; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--c-text); font-variant-numeric: tabular-nums;
}
.mc-track__num.is-empty { color: var(--c-text-faint); font-weight: var(--fw-regular); }

.mc-track__metric { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }

/* Actions de la carte : ▶ extrait (Apple Music, 30 s) + lier à ma base +
   ouvrir la fiche. Boutons carrés arrondis, façon référence hit-parade validée. */
.mc-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.mc-play, .mc-open, .mc-link {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  border: 1px solid var(--c-border-strong); background: var(--c-surface-2);
  color: var(--c-text-muted); font-size: var(--fs-sm);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  padding: 0;
}
.mc-play:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.mc-play.is-playing { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast, #fff); }
.mc-open:hover { border-color: var(--c-info); color: var(--c-info); background: var(--c-info-soft); }
.mc-link:hover { border-color: var(--c-warning); color: var(--c-warning); background: var(--c-warning-soft); }
/* Liaison manuelle existante : le maillon reste teinté pour la repérer */
.mc-link.is-manual { color: var(--c-warning); border-color: var(--c-warning); }

/* Résultats de recherche de la modale « Lier à ma base » */
.mc-link-results { max-height: 300px; overflow-y: auto; }

/* Légende du code couleur des points de statut (au-dessus de la liste) */
.mc-legend {
  display: flex; justify-content: flex-end; align-items: center;
  gap: var(--sp-4); margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); color: var(--c-text-muted);
}
.mc-legend__item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.mc-legend .mc-dot { justify-self: auto; }

/* Écrans étroits : on sacrifie les colonnes Ibiza/Spotify et le bouton
   fiche (le détail reste dans la modale, la ligne reste cliquable) pour
   préserver rang + pochette + titre + métrique + extrait. */
@media (max-width: 860px) {
  .mc-track-list { --mc-cols: 36px 40px minmax(0, 1fr) 104px 14px 36px; }
  .mc-track__num, .mc-th--num, .mc-open, .mc-link { display: none; }
  .mc-artwork { width: 40px; height: 40px; }
  .mc-track__pos { font-size: var(--fs-body); }
}

/* Message vide / chargement */
.mc-empty { text-align: center; color: var(--c-text-muted); padding: var(--sp-6) var(--sp-4); font-size: var(--fs-sm); }

/* ---- Pastille de position + variantes podium ---- */
.position-badge {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.pos-top10 { background: var(--c-gold); color: var(--c-on-gold); }
.pos-top50 { background: var(--accent-soft); color: var(--accent); }
.pos-rest  { background: var(--c-surface-2); color: var(--c-text-muted); }

/* ---- Indicateur de variation ---- */
.delta-up { color: var(--c-success); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.delta-down { color: var(--c-danger); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.delta-new { color: var(--c-info); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.delta-flat { color: var(--c-text-faint); font-size: var(--fs-sm); }

/* ---- Bloc titre/artiste ---- */
.track-artwork { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.track-title { font-weight: var(--fw-medium); color: var(--c-text); line-height: var(--lh-tight); }
.track-artist { font-size: var(--fs-sm); color: var(--c-text-muted); line-height: var(--lh-tight); }
.track-label { font-size: var(--fs-xs); color: var(--c-text-muted); }
.track-meta { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.rotation-badge { font-size: var(--fs-xs); }

/* ---- Métadonnées chiffrées ---- */
.score-pill { display: inline-block; min-width: 34px; text-align: center; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold); background: var(--c-warning-soft); color: var(--c-warning); }
.spotify-pop { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-spotify); }
.radio-badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.radio-badge { font-size: var(--fs-xs); padding: 0.1rem 0.4rem; border-radius: var(--radius-sm); background: var(--c-info-soft); color: var(--c-info); white-space: nowrap; }
.genre-badge { font-size: var(--fs-xs); padding: 0.1rem 0.4rem; border-radius: var(--radius-sm); background: var(--c-success-soft); color: var(--c-success); font-weight: var(--fw-semibold); }
.bpm-badge { font-size: var(--fs-xs); padding: 0.1rem 0.4rem; border-radius: var(--radius-sm); background: var(--c-surface-2); color: var(--c-text-muted); }
.key-badge { font-size: var(--fs-xs); padding: 0.1rem 0.4rem; border-radius: var(--radius-sm); background: var(--c-info-soft); color: var(--c-info); }

/* ---- Airplay (Radios) : passages + part d'antenne ----
   .airplay-spins est le "score" de la ligne (passages × % part d'antenne).
   On le bombe d'un cran (h3 -> h2) pour qu'il pèse visuellement plus
   lourd que le titre — c'est l'info finale que l'œil va chercher. */
.airplay-spins { font-weight: var(--fw-bold); font-size: var(--fs-h2); color: var(--c-text); line-height: 1; }
.airplay-spins small { font-size: var(--fs-sm); }
.mc-share { display: flex; flex-direction: column; gap: 4px; min-width: 96px; }
.mc-share__label { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* ---- Grille des opportunités émergentes, repliable ----
   Lignes-cartes compactes (même vocabulaire que la liste principale, liseré
   danger) : pochette | titre/artiste | position+delta | ▶ extrait. Les
   métadonnées secondaires (antenne, %, jours, label, BPM, clé) vivent dans
   le tooltip — c'est ce qui dégonfle les anciennes cartes massives. */
.mc-emergent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-2); }
.mc-ecard {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 36px;
  gap: var(--sp-3); align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-danger);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mc-ecard:hover { border-color: var(--c-border-strong); border-left-color: var(--c-danger); box-shadow: var(--shadow-sm); }
.mc-ecard .mc-artwork { width: 40px; height: 40px; }
.mc-ecard__pos {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  line-height: 1; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--c-text-muted); font-variant-numeric: tabular-nums;
}
.mc-ecard__pos .delta-up, .mc-ecard__pos .delta-down,
.mc-ecard__pos .delta-new, .mc-ecard__pos .delta-flat { font-size: var(--fs-xs); }
.mc-emergent-toggle { cursor: pointer; user-select: none; }
.mc-emergent-chevron { transition: transform var(--t-fast); }
.mc-emergent-toggle[aria-expanded="false"] .mc-emergent-chevron { transform: rotate(180deg); }

/* ---- Répartition par genre (1001Tracklists) ---- */
.genre-breakdown { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* ---- Onglets mapping ---- */
.mapping-tabs .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Barre d'outils Score Radar (legacy vt-subbar, conservée) ---- */
.vt-subbar {
  background: var(--c-surface) !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: none !important;
}
.vt-subbar h2, .vt-subbar h4 { color: var(--c-text); font-weight: var(--fw-semibold); }
.vt-subbar .badge.bg-light, .vt-subbar .badge.bg-secondary {
  background: var(--c-surface-2) !important; color: var(--c-text-muted) !important; border-color: var(--c-border) !important;
}

/* ---- Boutons de bascule du dashboard ---- */
.dashboard-btn.active, .dashboard-results-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

/* ---- Détail Titre : libellé d'attribut devant une pill (ex. "Era :") ---- */
.detail-attr-label { color: var(--c-text-muted); font-size: var(--fs-xs); margin-right: var(--sp-1); }

/* ---- Détail Titre : nom d'artiste cliquable dans le hero ---- */
.song-artist-link { color: inherit; text-decoration: none; }
.song-artist-link:hover { color: var(--accent); text-decoration: underline; }

/* ---- Détail Titre : bouton Play en overlay sur la pochette ---- */
.cover-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast);
}
.cover-play-btn:hover { background: var(--accent); transform: translate(-50%, -50%) scale(1.08); }
.cover-play-btn.playing { background: var(--accent); }

/* ---- Utilitaires couleur d'accent produit (au lieu du bleu Bootstrap) ---- */
.text-accent { color: var(--accent) !important; }
.bg-accent { background-color: var(--accent) !important; }

/* ---- Détail Titre : empilement masonry des cartes métadonnées ----
   Les colonnes se remplissent indépendamment (pas d'alignement ligne par ligne
   façon Bootstrap), donc plus d'espaces vides sous une carte courte. */
.song-detail-cards { column-count: 2; column-gap: var(--sp-5, 1.5rem); }
.song-detail-cards > .card { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 991.98px) { .song-detail-cards { column-count: 1; } }

/* ---- Mapping : file « à mapper en priorité » ---- */
#mapping-priority-list .mapping-priority-item:last-child { border-bottom: 0 !important; }

/* ---- Mapping : chevron repli du panneau prioritaire ---- */
.mapping-priority-chevron { transition: transform var(--t-fast); }
[data-bs-target="#mapping-priority-body"].collapsed .mapping-priority-chevron { transform: rotate(180deg); }

/* ---- Mapping : dashboard KPI compacté (récupère de la hauteur pour les tables) ---- */
#mapping-dashboard .card-body { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
#mapping-dashboard .h3 { font-size: 1.35rem; }
#mapping-dashboard .fa-2x { font-size: 1.45em; }
#mapping-dashboard .progress { margin-top: var(--sp-1) !important; }

/* ---- Mapping : en-tête de table collant (sous la topbar), fond tokenisé ---- */
#artist-table-wrapper thead th {
  background: var(--c-surface-2);
  box-shadow: inset 0 -1px 0 var(--c-border);
}

/* ============================================================
   RADAR DÉCOUVERTE (radar-decouverte.html)
   Liste des titres hors catalogue scorés depuis les sources
   monitorées (Beatport / 1001TL / Shazam / Airplay).
   ============================================================ */

/* Bandeau KPI (compteurs) */
.rd-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Barre de filtres client */
.rd-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.rd-filters__search { max-width: 280px; }

/* Grille partagée en-tête / lignes (métriques comparables verticalement,
   même principe que Music Charts) */
.rd-track,
.rd-track-header {
  display: grid;
  grid-template-columns: var(--rd-cols, 52px minmax(220px, 1.6fr) 84px minmax(220px, 1.2fr) 110px 44px);
  align-items: center;
  gap: var(--sp-3);
}

.rd-track-list { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Ligne-carte par titre */
.rd-track {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-2) var(--sp-3);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.rd-track:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); }

/* En-tête de colonnes (sticky) */
.rd-track-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--c-bg);
  padding: var(--sp-2) var(--sp-3);
}
.rd-th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-faint);
}

/* Rang */
.rd-track__rank {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  text-align: center;
}

/* Identité du titre : 2 lignes tronquées */
.rd-track__id { min-width: 0; }
.rd-track__title {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-track__artist {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge de score découverte (0-100), code couleur sémantique */
.rd-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  justify-self: start;
}
/* Paliers de couleur : classes génériques .score-level--* (échelle officielle) */

/* Badges de sources (couleur par source via --rd-src, fond adouci) */
.rd-track__sources { display: flex; flex-wrap: wrap; gap: var(--sp-1); min-width: 0; }
.rd-src {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: color-mix(in srgb, var(--rd-src) 14%, transparent);
  color: var(--rd-src);
  cursor: help;
}
.rd-src--beatport  { --rd-src: var(--c-src-beatport); }
.rd-src--tracklist { --rd-src: var(--c-src-tracklist); }
.rd-src--shazam    { --rd-src: var(--c-src-shazam); }
.rd-src--airplay   { --rd-src: var(--c-src-airplay); }

/* État vide */
.rd-empty {
  text-align: center;
  color: var(--c-text-muted);
  padding: var(--sp-6) var(--sp-4);
}

/* Responsive : sous 860px, les sources passent sous le titre */
@media (max-width: 860px) {
  .rd-track,
  .rd-track-header { --rd-cols: 40px minmax(140px, 1.6fr) 64px 96px 44px; }
  .rd-track-header .rd-th--sources,
  .rd-track__sources { display: none; }
}

/* ============================================================
   Profils de Score Ibiza (connect-settings, onglet Ibiza Score)
   ------------------------------------------------------------
   Cartes-lignes de la liste des profils (.row-card de cards.css).
   La couleur du profil est une DONNÉE utilisateur : elle est posée
   en inline par le JS via la variable --scorep-color.
   ============================================================ */

/* Pastille de couleur du profil (couleur = donnée, via --scorep-color) */
.scorep-dot {
  width: 12px; height: 12px;
  border-radius: var(--radius-pill);
  background: var(--scorep-color, var(--accent));
  border: 1px solid var(--c-border);
  flex-shrink: 0;
}

/* Icône FontAwesome du profil, alignée à largeur fixe */
.scorep-icon {
  width: 20px; text-align: center;
  color: var(--c-text-muted);
  flex-shrink: 0;
}

/* Carte-ligne en cours d'édition : liseré accent */
.row-card.scorep-editing {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Poignée de réordonnancement (drag & drop de l'ordre d'affichage) */
.scorep-grip {
  color: var(--c-text-muted);
  cursor: grab;
  flex-shrink: 0;
}

/* Carte en cours de glissement */
.row-card.scorep-dragging {
  opacity: 0.5;
  cursor: grabbing;
  border-style: dashed;
}

/* Liste déroulante des cases « Playlists du profil » (hauteur bornée) */
.scorep-playlists-box {
  max-height: 200px;
  overflow-y: auto;
  background: var(--c-surface);
}

/* ============================================================
   Playlists Spotify monitorées (connect-settings, onglet « Playlists Spotify »)
   ------------------------------------------------------------
   Miniature de playlist dans le tableau de monitoring.
   ============================================================ */

.splm-thumb {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  object-fit: cover;
  flex-shrink: 0;
}
.splm-thumb--ph {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface-2);
  color: var(--c-text-faint);
}

/* ==== Détail Titre : Ibiza Score V2 (profils, décomposition, trajectoire, feedback) ==== */

/* Chip de profil : pill sélectionnable + point de la couleur du profil.
   La couleur vient des données (profil configurable en base) → variable
   locale --iscore-color posée en inline par le JS, repli sur l'accent. */
.iscore-chip { --iscore-color: var(--accent); }
.iscore-chip__dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--iscore-color); margin-right: var(--sp-1); flex-shrink: 0;
}
.pill--selectable.iscore-chip.is-active {
  background: color-mix(in srgb, var(--iscore-color) 14%, transparent);
  border-color: var(--iscore-color);
  color: var(--c-text);
}

/* Ligne de décomposition : label + valeur/poids, barre .trait-bar dessous */
.iscore-dim { padding: var(--sp-1) 0; }
.iscore-dim__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.iscore-dim__label { font-size: var(--fs-sm); color: var(--c-text); }
.iscore-dim__value { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text); white-space: nowrap; }
.iscore-dim__weight { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--c-text-muted); }
.iscore-dim--muted { opacity: 0.45; }

/* Sparkline SVG maison (trajectoire du score) */
.iscore-spark { display: block; width: 100%; height: 72px; color: var(--accent); }
.iscore-spark__area { fill: currentColor; opacity: 0.12; stroke: none; }
.iscore-spark__line { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.iscore-spark__dot { fill: currentColor; stroke: none; }
.iscore-spark-meta {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--c-text-faint); margin-top: var(--sp-1);
}

/* Boutons de feedback 👍 / 👎 sur la pertinence du score */
.iscore-vote {
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
  border-radius: var(--radius); padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-h3); line-height: 1.4; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.iscore-vote:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.iscore-vote:disabled { opacity: 0.6; cursor: default; }
.iscore-vote--up.is-active { background: var(--c-success-soft); border-color: var(--c-success); }
.iscore-vote--down.is-active { background: var(--c-danger-soft); border-color: var(--c-danger); }

/* ============================================================
   Sous-navigation de réglages (.settings-subnav) — 2026-07-05
   Colonne de nav-pills Bootstrap verticale avec libellés de
   groupe non cliquables, pour découper un onglet de settings
   en sous-sections (onglet « Ibiza Score » des Global Settings).
   Sur mobile (<768px) : pills horizontales scrollables au-dessus
   du contenu.
   ============================================================ */
.settings-subnav-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  margin-top: var(--sp-4);
}
.settings-subnav {
  position: sticky;
  top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
}
.settings-subnav__group {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-faint);
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
  user-select: none;
}
.settings-subnav__group:first-child { padding-top: var(--sp-1); }
.settings-subnav .nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.settings-subnav .nav-link i {
  color: var(--c-text-faint);
  transition: color var(--t-fast);
}
.settings-subnav .nav-link:hover { background: var(--c-surface-2); color: var(--c-text); }
.settings-subnav .nav-link.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--fw-semibold);
}
.settings-subnav .nav-link.active i { color: var(--accent); }

@media (max-width: 767.98px) {
  .settings-subnav-layout { grid-template-columns: 1fr; }
  .settings-subnav {
    position: static;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--sp-1);
    padding: var(--sp-2);
  }
  .settings-subnav__group { padding: 0 var(--sp-2); white-space: nowrap; flex: 0 0 auto; }
  .settings-subnav .nav-link { width: auto; flex: 0 0 auto; white-space: nowrap; }
}

/* Utilitaire flex : autorise la troncature d'un enfant dans un conteneur flex
   (min-width:0 = valeur structurelle de layout, non thématisable). */
.min-width-0 { min-width: 0; }