/*!
 * studiotools — Pro Dark Theme
 * ------------------------------------------------------------
 * Inspired by Linear / Vercel / Soundcharts / Notion dark mode.
 *
 * Design tokens, hierarchy of surfaces, subtle borders, refined
 * interactive states — applied through html[data-bs-theme="dark"].
 *
 * Load order:
 *   1) <script src="/assets/theme.js"></script>            (before paint)
 *   2) <link href="bootstrap.min.css">
 *   3) <link href="/assets/theme.css">                     (after Bootstrap)
 */

/* =========================================================================
   0) Base de palette Tabler (data-bs-theme-base="neutral")
   Tabler ne tinte par défaut que --tblr-gray-* via la base. On fait dériver
   surfaces / bordures / textes de l'échelle de gris pour que la base "neutral"
   colore TOUTE l'UI (light par défaut + dark). Fallbacks = valeurs Tabler.
   ========================================================================= */
html[data-bs-theme="light"] {
    --tblr-body-bg: var(--tblr-gray-50, #f9fafb);
    --tblr-bg-surface: #ffffff;
    --tblr-bg-surface-secondary: var(--tblr-gray-100, #f3f4f6);
    --tblr-bg-surface-tertiary: var(--tblr-gray-200, #e5e7eb);
    --tblr-border-color: var(--tblr-gray-200, #e5e7eb);
    --tblr-border-color-translucent: var(--tblr-gray-200, #e5e7eb);
    --tblr-body-color: var(--tblr-gray-900, #1f2937);
    --tblr-secondary-color: var(--tblr-gray-600, #4b5563);
}
html[data-bs-theme="dark"] {
    --tblr-body-bg: var(--tblr-gray-900, #111827);
    --tblr-bg-surface: var(--tblr-gray-800, #1f2937);
    --tblr-bg-surface-secondary: var(--tblr-gray-800, #1f2937);
    --tblr-bg-surface-tertiary: var(--tblr-gray-700, #374151);
    --tblr-border-color: var(--tblr-gray-700, #374151);
    --tblr-border-color-translucent: var(--tblr-gray-800, #1f2937);
    --tblr-body-color: var(--tblr-gray-100, #f3f4f6);
    --tblr-secondary-color: var(--tblr-gray-400, #9ca3af);
}

/* =========================================================================
   1) Design tokens
   ========================================================================= */
html[data-bs-theme="dark"] {
    /* surfaces : 5 niveaux de profondeur, du fond le plus sombre au plus clair */
    --st-bg-0:        #0a0c10;        /* fond absolu (body) */
    --st-bg-1:        #0f1218;        /* sections / chrome */
    --st-bg-2:        #141821;        /* cards, KPI */
    --st-bg-3:        #1a1f2a;        /* cards hover, inputs */
    --st-bg-4:        #232936;        /* hover sur cards-3, table-row hover */

    /* borders : 3 niveaux pour la hiérarchie */
    --st-border-1:    #1c2230;        /* divider subtil */
    --st-border-2:    #262d3b;        /* card border */
    --st-border-3:    #333b4d;        /* emphasis */

    /* texte */
    --st-text-1:      #e8eaed;        /* primary */
    --st-text-2:      #a8b0bd;        /* secondary */
    --st-text-3:      #6b7385;        /* tertiary / labels */
    --st-text-4:      #4a5163;        /* disabled / placeholder */

    /* accents : 1 seule couleur d'accent + sémantiques */
    --st-accent:      #4f8eff;        /* bleu doux (plus pro que #1e3a8a) */
    --st-accent-soft: rgba(79,142,255,0.12);
    --st-accent-hover:#6ba1ff;
    --st-success:     #34d399;
    --st-success-soft:rgba(52,211,153,0.12);
    --st-warning:     #fbbf24;
    --st-warning-soft:rgba(251,191,36,0.12);
    --st-danger:      #f87171;
    --st-danger-soft: rgba(248,113,113,0.12);

    /* Bootstrap overrides : on remplace les couleurs natives par les nôtres */
    --bs-body-bg: var(--st-bg-0);
    --bs-body-color: var(--st-text-1);
    --bs-border-color: var(--st-border-2);
    --bs-border-color-translucent: var(--st-border-1);
    --bs-secondary-color: var(--st-text-2);
    --bs-tertiary-color: var(--st-text-3);
    --bs-tertiary-bg: var(--st-bg-1);
    --bs-secondary-bg: var(--st-bg-2);
    --bs-primary: var(--st-accent);
    --bs-link-color: var(--st-accent);
    --bs-link-hover-color: var(--st-accent-hover);

    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[data-bs-theme="dark"] body {
    background-color: var(--st-bg-0) !important;
    color: var(--st-text-1) !important;
    font-feature-settings: "ss01", "cv11";
}

/* =========================================================================
   2) Effacement des couleurs hardcodées light qui traînent partout
   ========================================================================= */
html[data-bs-theme="dark"] [style*="background:#f8fafc"],
html[data-bs-theme="dark"] [style*="background: #f8fafc"],
html[data-bs-theme="dark"] [style*="background-color:#f8fafc"],
html[data-bs-theme="dark"] [style*="background-color: #f8fafc"],
html[data-bs-theme="dark"] [style*="background:#f8f9fa"],
html[data-bs-theme="dark"] [style*="background: #f8f9fa"],
html[data-bs-theme="dark"] [style*="background-color:#f8f9fa"],
html[data-bs-theme="dark"] [style*="background-color: #f8f9fa"] {
    background: var(--st-bg-1) !important;
    color: var(--st-text-1);
}
html[data-bs-theme="dark"] [style*="background:#fff"],
html[data-bs-theme="dark"] [style*="background:#ffffff"],
html[data-bs-theme="dark"] [style*="background-color:#fff"],
html[data-bs-theme="dark"] [style*="background-color:#ffffff"],
html[data-bs-theme="dark"] [style*="background: #fff"],
html[data-bs-theme="dark"] [style*="background: #ffffff"],
html[data-bs-theme="dark"] [style*="background-color: #fff"],
html[data-bs-theme="dark"] [style*="background-color: #ffffff"],
html[data-bs-theme="dark"] [style*="background: white"],
html[data-bs-theme="dark"] [style*="background:white"],
html[data-bs-theme="dark"] [style*="background-color: white"],
html[data-bs-theme="dark"] [style*="background-color:white"] {
    background-color: var(--st-bg-2) !important;
    color: var(--st-text-1);
}

/* =========================================================================
   3) Layout principal — airplay/index.php
   ========================================================================= */

/* Main container : surface élevée à plat, sans ombre lumineuse */
html[data-bs-theme="dark"] .main-container {
    background: var(--st-bg-1) !important;
    border: 1px solid var(--st-border-1) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    margin: 12px !important;
}

/* Header : surface sombre + sous-titre lisible.
   On garde le bleu *uniquement* en fine ligne d'accent en bas. */
html[data-bs-theme="dark"] .header-section {
    background: linear-gradient(180deg, var(--st-bg-2) 0%, var(--st-bg-1) 100%) !important;
    color: var(--st-text-1) !important;
    border-bottom: 1px solid var(--st-border-2) !important;
    border-radius: 12px 12px 0 0 !important;
    position: relative;
}
html[data-bs-theme="dark"] .header-section::after {
    content: '';
    position: absolute;
    left: 24px; right: 24px; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--st-accent), transparent);
    opacity: 0.5;
    pointer-events: none;
}
html[data-bs-theme="dark"] .header-section h1,
html[data-bs-theme="dark"] .header-section .subtitle {
    color: var(--st-text-1) !important;
}
html[data-bs-theme="dark"] .header-section .subtitle { color: var(--st-text-2) !important; }

/* Boutons du header (Auto-refresh, Top 100 Deezer, Tous les Tracks, Discogs, user) :
   style "chip" propre, pas une foule de couleurs disparates */
html[data-bs-theme="dark"] .header-section .btn {
    background: var(--st-bg-3) !important;
    color: var(--st-text-1) !important;
    border: 1px solid var(--st-border-2) !important;
    font-weight: 500 !important;
    font-size: .8125rem !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: all .15s ease !important;
}
html[data-bs-theme="dark"] .header-section .btn:hover {
    background: var(--st-bg-4) !important;
    border-color: var(--st-border-3) !important;
    color: var(--st-text-1) !important;
}
html[data-bs-theme="dark"] .header-section .btn-danger,
html[data-bs-theme="dark"] .header-section .btn.btn-danger {
    background: var(--st-danger-soft) !important;
    color: var(--st-danger) !important;
    border-color: rgba(248,113,113,0.3) !important;
}
html[data-bs-theme="dark"] .header-section .btn-success {
    background: var(--st-success-soft) !important;
    color: var(--st-success) !important;
    border-color: rgba(52,211,153,0.3) !important;
}

/* =========================================================================
   4) Navigation principale (nav-tabs)
   ========================================================================= */
html[data-bs-theme="dark"] .main-container > .nav-tabs,
html[data-bs-theme="dark"] .nav-tabs:not(#intelSubNav):not(#platformSubNav) {
    background: var(--st-bg-1) !important;
    border: none !important;
    border-bottom: 1px solid var(--st-border-2) !important;
    padding: 0 16px !important;
    margin: 0 !important;
    gap: 4px;
}
html[data-bs-theme="dark"] .nav-tabs .nav-link {
    background: transparent !important;
    color: var(--st-text-2) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 12px 16px !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    transition: color .15s ease, border-color .15s ease !important;
}
html[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--st-text-1) !important;
    border-bottom-color: var(--st-border-3) !important;
}
html[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background: transparent !important;
    color: var(--st-accent) !important;
    border-bottom-color: var(--st-accent) !important;
    font-weight: 600 !important;
}

/* Tab content area */
html[data-bs-theme="dark"] .tab-content {
    background: transparent !important;
    padding: 16px !important;
}

/* =========================================================================
   5) Sub-navigation pills (#platformSubNav, #intelSubNav) — Spotify, YouTube, etc.
   ========================================================================= */
html[data-bs-theme="dark"] #intelSubNav .nav-link,
html[data-bs-theme="dark"] #platformSubNav .nav-link {
    background: var(--st-bg-2) !important;
    color: var(--st-text-2) !important;
    border: 1px solid var(--st-border-1) !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: all .12s ease !important;
}
html[data-bs-theme="dark"] #intelSubNav .nav-link:hover,
html[data-bs-theme="dark"] #platformSubNav .nav-link:hover {
    background: var(--st-bg-3) !important;
    color: var(--st-text-1) !important;
    border-color: var(--st-border-2) !important;
}
html[data-bs-theme="dark"] #intelSubNav .nav-link.active,
html[data-bs-theme="dark"] #platformSubNav .nav-link.active {
    background: var(--st-accent-soft) !important;
    color: var(--st-accent) !important;
    border-color: rgba(79,142,255,0.3) !important;
    box-shadow: none !important;
}

/* =========================================================================
   6) "Veille tendances plateformes" banner + sub-titre
   ========================================================================= */
html[data-bs-theme="dark"] .stats-card {
    background: var(--st-bg-2) !important;
    border: 1px solid var(--st-border-2) !important;
    border-radius: 12px !important;
    color: var(--st-text-1) !important;
    box-shadow: none !important;
    padding: 18px 20px !important;
}
html[data-bs-theme="dark"] .stats-card h1,
html[data-bs-theme="dark"] .stats-card h2,
html[data-bs-theme="dark"] .stats-card h3,
html[data-bs-theme="dark"] .stats-card h4,
html[data-bs-theme="dark"] .stats-card h5 {
    color: var(--st-text-1) !important;
}
html[data-bs-theme="dark"] .stats-card .small,
html[data-bs-theme="dark"] .stats-card small,
html[data-bs-theme="dark"] .stats-card .text-muted {
    color: var(--st-text-3) !important;
}

/* KPI / scope summary cards : sobres, label en haut + valeur grosse */
html[data-bs-theme="dark"] #rotationSummary .stats-card,
html[data-bs-theme="dark"] #gapSummary .stats-card,
html[data-bs-theme="dark"] #ttaSummary .stats-card,
html[data-bs-theme="dark"] #daypartSummary .stats-card,
html[data-bs-theme="dark"] #platformKpis .stats-card,
html[data-bs-theme="dark"] #compareSummary .stats-card {
    background: var(--st-bg-2) !important;
    border: 1px solid var(--st-border-2) !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    transition: border-color .15s ease, background .15s ease;
}
html[data-bs-theme="dark"] #rotationSummary .stats-card:hover,
html[data-bs-theme="dark"] #gapSummary .stats-card:hover,
html[data-bs-theme="dark"] #ttaSummary .stats-card:hover,
html[data-bs-theme="dark"] #daypartSummary .stats-card:hover,
html[data-bs-theme="dark"] #platformKpis .stats-card:hover,
html[data-bs-theme="dark"] #compareSummary .stats-card:hover {
    border-color: var(--st-border-3) !important;
    background: var(--st-bg-3) !important;
}

/* Filter bar (Pays, Limite, Affichage) */
html[data-bs-theme="dark"] #intelSharedFilters,
html[data-bs-theme="dark"] #platforms .filter-bar,
html[data-bs-theme="dark"] [id*="filter"] {
    background: var(--st-bg-1) !important;
}
html[data-bs-theme="dark"] #intelSharedFilters .form-label.small,
html[data-bs-theme="dark"] #platforms .form-label.small,
html[data-bs-theme="dark"] .form-label.small {
    color: var(--st-text-3) !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    font-size: .6875rem !important;
}

/* =========================================================================
   7) Form controls — inputs, selects, ButtonGroups segmentés
   ========================================================================= */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .input-group-text,
html[data-bs-theme="dark"] input[type="text"],
html[data-bs-theme="dark"] input[type="search"],
html[data-bs-theme="dark"] input[type="number"],
html[data-bs-theme="dark"] input[type="url"],
html[data-bs-theme="dark"] input[type="email"],
html[data-bs-theme="dark"] input[type="password"],
html[data-bs-theme="dark"] select,
html[data-bs-theme="dark"] textarea {
    background-color: var(--st-bg-2) !important;
    color: var(--st-text-1) !important;
    border: 1px solid var(--st-border-2) !important;
    border-radius: 8px !important;
    font-size: .875rem !important;
    padding: 8px 12px !important;
}
html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="dark"] input::placeholder,
html[data-bs-theme="dark"] textarea::placeholder {
    color: var(--st-text-4) !important;
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] input:focus,
html[data-bs-theme="dark"] select:focus,
html[data-bs-theme="dark"] textarea:focus {
    background-color: var(--st-bg-2) !important;
    border-color: var(--st-accent) !important;
    box-shadow: 0 0 0 3px var(--st-accent-soft) !important;
    outline: none !important;
}

/* Segmented control style pour les btn-group avec input radios (Tout/En rotation/Pas en rotation) */
html[data-bs-theme="dark"] .btn-group .btn,
html[data-bs-theme="dark"] .btn-group-toggle .btn {
    background: var(--st-bg-2) !important;
    color: var(--st-text-2) !important;
    border: 1px solid var(--st-border-2) !important;
    font-weight: 500 !important;
    font-size: .8125rem !important;
}
html[data-bs-theme="dark"] .btn-group .btn:hover,
html[data-bs-theme="dark"] .btn-group-toggle .btn:hover {
    background: var(--st-bg-3) !important;
    color: var(--st-text-1) !important;
}
html[data-bs-theme="dark"] .btn-group .btn.active,
html[data-bs-theme="dark"] .btn-group .btn-check:checked + .btn,
html[data-bs-theme="dark"] .btn-group-toggle .btn.active {
    background: var(--st-accent-soft) !important;
    color: var(--st-accent) !important;
    border-color: rgba(79,142,255,0.3) !important;
    z-index: 2;
}

/* =========================================================================
   8) Boutons sémantiques (consistant + soft tones)
   ========================================================================= */
html[data-bs-theme="dark"] .btn {
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: .875rem !important;
    box-shadow: none !important;
    transition: all .15s ease;
}
html[data-bs-theme="dark"] .btn-primary {
    background-color: var(--st-accent) !important;
    border-color: var(--st-accent) !important;
    color: #fff !important;
}
html[data-bs-theme="dark"] .btn-primary:hover {
    background-color: var(--st-accent-hover) !important;
    border-color: var(--st-accent-hover) !important;
}
html[data-bs-theme="dark"] .btn-outline-primary {
    background: transparent !important;
    color: var(--st-accent) !important;
    border-color: rgba(79,142,255,0.4) !important;
}
html[data-bs-theme="dark"] .btn-outline-primary:hover {
    background: var(--st-accent-soft) !important;
    color: var(--st-accent-hover) !important;
    border-color: var(--st-accent) !important;
}
html[data-bs-theme="dark"] .btn-outline-secondary,
html[data-bs-theme="dark"] .btn-light,
html[data-bs-theme="dark"] .btn-secondary {
    background: var(--st-bg-3) !important;
    color: var(--st-text-1) !important;
    border-color: var(--st-border-2) !important;
}
html[data-bs-theme="dark"] .btn-outline-secondary:hover,
html[data-bs-theme="dark"] .btn-light:hover,
html[data-bs-theme="dark"] .btn-secondary:hover {
    background: var(--st-bg-4) !important;
    border-color: var(--st-border-3) !important;
    color: var(--st-text-1) !important;
}
html[data-bs-theme="dark"] .btn-success { background: var(--st-success) !important; border-color: var(--st-success) !important; color: #04231a !important; }
html[data-bs-theme="dark"] .btn-warning { background: var(--st-warning) !important; border-color: var(--st-warning) !important; color: #2a1b00 !important; }
html[data-bs-theme="dark"] .btn-danger  { background: var(--st-danger)  !important; border-color: var(--st-danger)  !important; color: #2a0606 !important; }

html[data-bs-theme="dark"] .btn-outline-success { color: var(--st-success) !important; border-color: rgba(52,211,153,0.4) !important; background: transparent !important; }
html[data-bs-theme="dark"] .btn-outline-success:hover { background: var(--st-success-soft) !important; }
html[data-bs-theme="dark"] .btn-outline-warning { color: var(--st-warning) !important; border-color: rgba(251,191,36,0.4) !important; background: transparent !important; }
html[data-bs-theme="dark"] .btn-outline-warning:hover { background: var(--st-warning-soft) !important; }
html[data-bs-theme="dark"] .btn-outline-danger  { color: var(--st-danger)  !important; border-color: rgba(248,113,113,0.4) !important; background: transparent !important; }
html[data-bs-theme="dark"] .btn-outline-danger:hover  { background: var(--st-danger-soft) !important; }

/* Boutons d'action icônes (colonne ACTIONS du tableau) : pas de fonds colorés !
   On garde tout neutre, on colore juste l'icône au hover. */
html[data-bs-theme="dark"] td .btn,
html[data-bs-theme="dark"] td .btn-sm {
    background: transparent !important;
    border: 1px solid var(--st-border-1) !important;
    color: var(--st-text-2) !important;
    padding: 4px 8px !important;
    min-width: 30px;
}
html[data-bs-theme="dark"] td .btn:hover { background: var(--st-bg-3) !important; color: var(--st-text-1) !important; border-color: var(--st-border-2) !important; }
html[data-bs-theme="dark"] td .btn.btn-outline-primary:hover { color: var(--st-accent) !important; border-color: var(--st-accent) !important; background: var(--st-accent-soft) !important; }
html[data-bs-theme="dark"] td .btn.btn-outline-success:hover { color: var(--st-success) !important; border-color: var(--st-success) !important; background: var(--st-success-soft) !important; }
html[data-bs-theme="dark"] td .btn.btn-outline-danger:hover  { color: var(--st-danger) !important; border-color: var(--st-danger) !important; background: var(--st-danger-soft) !important; }

/* =========================================================================
   9) Cards (Bootstrap) + custom track-cards
   ========================================================================= */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .track-card,
html[data-bs-theme="dark"] .track-card-compact,
html[data-bs-theme="dark"] .quick-stat,
html[data-bs-theme="dark"] .radio-logo-card,
html[data-bs-theme="dark"] .genre-card,
html[data-bs-theme="dark"] .release-card,
html[data-bs-theme="dark"] .platform-card,
html[data-bs-theme="dark"] .kpi-card {
    background: var(--st-bg-2) !important;
    border: 1px solid var(--st-border-2) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: var(--st-text-1);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
html[data-bs-theme="dark"] .card:hover,
html[data-bs-theme="dark"] .track-card:hover,
html[data-bs-theme="dark"] .track-card-compact:hover,
html[data-bs-theme="dark"] .radio-logo-card:hover,
html[data-bs-theme="dark"] .genre-card:hover {
    background: var(--st-bg-3) !important;
    border-color: var(--st-border-3) !important;
    transform: none !important;
    box-shadow: none !important;
}
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-footer {
    background: var(--st-bg-1) !important;
    border-color: var(--st-border-2) !important;
    color: var(--st-text-1);
}
html[data-bs-theme="dark"] .card-header.bg-primary,
html[data-bs-theme="dark"] .modal-header.bg-primary {
    background: var(--st-bg-2) !important;
    border-bottom: 1px solid var(--st-accent) !important;
}

/* =========================================================================
   10) Tableaux : la pièce maîtresse — header sobre, rows aérées, hover doux
   ========================================================================= */
html[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--st-text-1);
    --bs-table-border-color: var(--st-border-1);
    --bs-table-striped-bg: rgba(255,255,255,0.02);
    --bs-table-hover-bg: var(--st-bg-3);
    border-color: var(--st-border-1) !important;
    margin-bottom: 0 !important;
}
html[data-bs-theme="dark"] .table > :not(caption) > * > * {
    background: transparent !important;
    color: var(--st-text-1) !important;
    border-color: var(--st-border-1) !important;
}
html[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] .table-dark thead th,
html[data-bs-theme="dark"] #platformResults table thead.table-dark th,
html[data-bs-theme="dark"] #rotationTracks table thead th,
html[data-bs-theme="dark"] #trendingResults table thead th {
    background: var(--st-bg-1) !important;
    color: var(--st-text-3) !important;
    text-transform: uppercase !important;
    font-size: .6875rem !important;
    letter-spacing: .06em !important;
    font-weight: 600 !important;
    border-top: none !important;
    border-bottom: 1px solid var(--st-border-2) !important;
    padding: 12px 14px !important;
}
html[data-bs-theme="dark"] .table tbody td {
    padding: 14px !important;
    vertical-align: middle !important;
    font-size: .875rem !important;
}
html[data-bs-theme="dark"] .table tbody tr {
    border-color: var(--st-border-1) !important;
    transition: background .12s ease;
}
html[data-bs-theme="dark"] .table tbody tr:hover {
    background: var(--st-bg-3) !important;
}
html[data-bs-theme="dark"] #platformResults table tbody tr.table-success-subtle,
html[data-bs-theme="dark"] tr.table-success-subtle {
    background: var(--st-success-soft) !important;
    box-shadow: inset 3px 0 0 0 var(--st-success);
}
html[data-bs-theme="dark"] #platformResults table tbody tr.table-success-subtle:hover,
html[data-bs-theme="dark"] tr.table-success-subtle:hover {
    background: rgba(52,211,153,0.18) !important;
}

/* =========================================================================
   11) Badges + alerts + pills cohérents
   ========================================================================= */
html[data-bs-theme="dark"] .badge {
    font-weight: 500 !important;
    font-size: .6875rem !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    letter-spacing: .02em;
}
html[data-bs-theme="dark"] .badge.bg-primary,
html[data-bs-theme="dark"] .badge.bg-info { background: var(--st-accent-soft) !important; color: var(--st-accent) !important; }
html[data-bs-theme="dark"] .badge.bg-success { background: var(--st-success-soft) !important; color: var(--st-success) !important; }
html[data-bs-theme="dark"] .badge.bg-warning { background: var(--st-warning-soft) !important; color: var(--st-warning) !important; }
html[data-bs-theme="dark"] .badge.bg-danger  { background: var(--st-danger-soft)  !important; color: var(--st-danger) !important; }
html[data-bs-theme="dark"] .badge.bg-secondary,
html[data-bs-theme="dark"] .badge.bg-light { background: var(--st-bg-3) !important; color: var(--st-text-1) !important; }
html[data-bs-theme="dark"] .badge.bg-dark { background: var(--st-bg-1) !important; color: var(--st-text-2) !important; border: 1px solid var(--st-border-2); }

/* Tier badges sont volontairement vifs (sémantique) mais on les adoucit un peu */
html[data-bs-theme="dark"] .rotation-tier-A { background-color: var(--tblr-red) !important; color: var(--tblr-white) !important; }
html[data-bs-theme="dark"] .rotation-tier-B { background-color: #fd7e14 !important; color: #fff !important; }
html[data-bs-theme="dark"] .rotation-tier-C { background-color: #0dcaf0 !important; color: #000 !important; }
html[data-bs-theme="dark"] .rotation-tier-Recurrent { background-color: #495057 !important; color: #fff !important; }
html[data-bs-theme="dark"] .rotation-tier-Gold { background-color: #ffc107 !important; color: #000 !important; }
html[data-bs-theme="dark"] .rotation-tier-New { background-color: var(--st-bg-3) !important; color: var(--st-text-1) !important; border: 1px solid var(--st-border-2); }

html[data-bs-theme="dark"] .alert {
    border-radius: 10px !important;
    border: 1px solid var(--st-border-2) !important;
    background: var(--st-bg-2) !important;
    color: var(--st-text-1) !important;
    font-size: .875rem;
    padding: 12px 16px !important;
}
html[data-bs-theme="dark"] .alert-info    { background: rgba(79,142,255,0.08) !important; border-color: rgba(79,142,255,0.25) !important; color: var(--st-text-1) !important; }
html[data-bs-theme="dark"] .alert-success { background: var(--st-success-soft) !important; border-color: rgba(52,211,153,0.25) !important; color: var(--st-text-1) !important; }
html[data-bs-theme="dark"] .alert-warning { background: var(--st-warning-soft) !important; border-color: rgba(251,191,36,0.25) !important; color: var(--st-text-1) !important; }
html[data-bs-theme="dark"] .alert-danger  { background: var(--st-danger-soft)  !important; border-color: rgba(248,113,113,0.25) !important; color: var(--st-text-1) !important; }

/* =========================================================================
   12) Modaux, dropdowns, list-groups, accordions, toasts, popovers
   ========================================================================= */
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .popover,
html[data-bs-theme="dark"] .toast,
html[data-bs-theme="dark"] .list-group-item,
html[data-bs-theme="dark"] .accordion-item {
    background: var(--st-bg-2) !important;
    border-color: var(--st-border-2) !important;
    color: var(--st-text-1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer {
    background: var(--st-bg-1) !important;
    border-color: var(--st-border-2) !important;
}
html[data-bs-theme="dark"] .modal-backdrop.show { opacity: 0.7 !important; background: #000; }
html[data-bs-theme="dark"] .dropdown-item { color: var(--st-text-1); }
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus { background: var(--st-bg-3) !important; color: var(--st-text-1) !important; }
html[data-bs-theme="dark"] .dropdown-divider { border-color: var(--st-border-2); }

html[data-bs-theme="dark"] .accordion-button { background: var(--st-bg-2) !important; color: var(--st-text-1) !important; box-shadow: none !important; }
html[data-bs-theme="dark"] .accordion-button:not(.collapsed) { background: var(--st-bg-3) !important; color: var(--st-accent) !important; }
html[data-bs-theme="dark"] .accordion-button:focus { box-shadow: 0 0 0 3px var(--st-accent-soft) !important; }

/* =========================================================================
   13) Liens & typography
   ========================================================================= */
html[data-bs-theme="dark"] a { color: var(--st-accent); text-decoration: none; }
html[data-bs-theme="dark"] a:hover { color: var(--st-accent-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] small.text-muted { color: var(--st-text-3) !important; }
html[data-bs-theme="dark"] .text-secondary { color: var(--st-text-2) !important; }
html[data-bs-theme="dark"] .text-dark,
html[data-bs-theme="dark"] .text-black { color: var(--st-text-1) !important; }
html[data-bs-theme="dark"] .text-white { color: var(--st-text-1) !important; }
html[data-bs-theme="dark"] hr { border-color: var(--st-border-2) !important; opacity: 1; }

/* =========================================================================
   14) Footer audio player
   ========================================================================= */
html[data-bs-theme="dark"] .footer-audio-player {
    background: var(--st-bg-1) !important;
    border-top: 1px solid var(--st-border-2) !important;
    color: var(--st-text-1);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
}
html[data-bs-theme="dark"] .footer-audio-player .progress { background: var(--st-bg-3); }
html[data-bs-theme="dark"] .footer-audio-player .progress-bar { background: var(--st-accent); }

/* =========================================================================
   15) Spinners, loaders, lazy placeholders
   ========================================================================= */
html[data-bs-theme="dark"] .loading-spinner { color: var(--st-accent); }
html[data-bs-theme="dark"] .lazy-image-placeholder {
    background: linear-gradient(90deg, var(--st-bg-2) 25%, var(--st-bg-3) 50%, var(--st-bg-2) 75%) !important;
    background-size: 200% 100% !important;
}
html[data-bs-theme="dark"] .cover-art-fallback,
html[data-bs-theme="dark"] .cover-art-fallback-compact {
    background-image: linear-gradient(135deg, var(--st-bg-3) 0%, var(--st-bg-1) 100%) !important;
    color: var(--st-text-3) !important;
}
html[data-bs-theme="dark"] .preview-btn-placeholder {
    background: var(--st-bg-2) !important;
    border-color: var(--st-border-2) !important;
    color: var(--st-text-3) !important;
}

/* =========================================================================
   16) Bootstrap helpers : .bg-light, .bg-white, table.table-light, etc.
   ========================================================================= */
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-white { background: var(--st-bg-2) !important; color: var(--st-text-1) !important; }
html[data-bs-theme="dark"] .bg-body-tertiary { background: var(--st-bg-1) !important; }
html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-start,
html[data-bs-theme="dark"] .border-end { border-color: var(--st-border-2) !important; }
html[data-bs-theme="dark"] .navbar.bg-light,
html[data-bs-theme="dark"] .navbar.bg-white { background: var(--st-bg-1) !important; }

/* =========================================================================
   17) Floating theme toggle (button injected by theme.js)
   ========================================================================= */
#studiotools-theme-toggle {
    background: var(--st-bg-2, rgba(20,24,33,0.92)) !important;
    border: 1px solid var(--st-border-2, rgba(255,255,255,0.1)) !important;
    color: var(--st-text-1, #fff) !important;
    backdrop-filter: blur(8px);
}
#studiotools-theme-toggle:hover { background: var(--st-bg-3) !important; }
#studiotools-theme-toggle:focus { outline: 2px solid var(--st-accent, #4f8eff); outline-offset: 2px; }
html[data-bs-theme="light"] #studiotools-theme-toggle {
    background: #ffffff !important;
    color: #1f2937 !important;
    border-color: rgba(0,0,0,0.12) !important;
}

/* =========================================================================
   18) Scrollbars
   ========================================================================= */
html[data-bs-theme="dark"] * { scrollbar-color: var(--st-border-3) var(--st-bg-1); }
html[data-bs-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--st-bg-1); }
html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--st-border-3); border-radius: 6px; border: 2px solid var(--st-bg-1); }
html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--st-text-4); }

/* =========================================================================
   19) Code, pre, kbd, tooltips
   ========================================================================= */
html[data-bs-theme="dark"] code,
html[data-bs-theme="dark"] pre {
    background: var(--st-bg-1) !important;
    color: var(--st-text-1);
    border: 1px solid var(--st-border-1);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: .8125em;
}
html[data-bs-theme="dark"] kbd {
    background: var(--st-bg-3) !important;
    color: var(--st-text-1);
    border: 1px solid var(--st-border-3);
}
html[data-bs-theme="dark"] .tooltip-inner {
    background: var(--st-bg-1) !important;
    color: var(--st-text-1);
    border: 1px solid var(--st-border-2);
    font-size: .75rem;
}
html[data-bs-theme="dark"] .tooltip .tooltip-arrow::before { border-top-color: var(--st-border-2); }

/* =========================================================================
   20) Form-check (radios, checkboxes) — pour les filtres
   ========================================================================= */
html[data-bs-theme="dark"] .form-check-input {
    background: var(--st-bg-2) !important;
    border-color: var(--st-border-3) !important;
}
html[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--st-accent) !important;
    border-color: var(--st-accent) !important;
}
html[data-bs-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--st-accent-soft) !important;
    border-color: var(--st-accent) !important;
}
html[data-bs-theme="dark"] .form-switch .form-check-input { background-color: var(--st-bg-3) !important; }

/* =========================================================================
   21) Date / time / number widgets natifs
   ========================================================================= */
html[data-bs-theme="dark"] input[type="date"],
html[data-bs-theme="dark"] input[type="datetime-local"],
html[data-bs-theme="dark"] input[type="time"] {
    color-scheme: dark;
}

/* =========================================================================
   22) Misc : "Auto-refresh OFF" + chips dans le header user-area
   ========================================================================= */
html[data-bs-theme="dark"] .badge-counter {
    background: var(--st-accent) !important;
    color: #fff !important;
}
html[data-bs-theme="dark"] .badge.text-bg-light {
    background: var(--st-bg-3) !important;
    color: var(--st-text-1) !important;
}

/* =========================================================================
   25) RADIO DNA — module GSelector / Mediabase
   Layout, KPIs, heatmap, pyramide de rotation, clock, signature, Venn compare.
   ========================================================================= */
.ra-root {
    padding: 0;
}
.ra-controls {
    padding: .75rem 1rem;
}

/* ---- KPIs grid ---- */
.ra-kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .5rem;
    padding: .25rem;
    position: relative;
}
.ra-kpi-header {
    grid-column: 1 / -1;
    padding: .5rem .25rem;
    font-size: .95rem;
}
.ra-kpi-card {
    background: var(--st-bg-2, var(--tblr-bg-surface, #fff));
    border: 1px solid var(--st-border-2, var(--tblr-border-color, #e5e7eb));
    border-left-width: 3px;
    border-radius: 8px;
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    transition: transform .15s ease, background .2s ease;
}
.ra-kpi-card:hover {
    background: var(--st-bg-3, var(--tblr-bg-surface-secondary, #f3f4f6));
    transform: translateY(-1px);
}
.ra-kpi-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.ra-kpi-body { min-width: 0; }
.ra-kpi-value { font-size: 1.05rem; font-weight: 700; line-height: 1.1; }
.ra-kpi-label {
    font-size: .68rem;
    color: var(--st-text-2, var(--tblr-secondary-color, #6b7280));
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ra-kpi-card.border-primary { border-left-color: var(--tblr-primary, var(--st-accent, #6e56cf)); }
.ra-kpi-card.border-info    { border-left-color: var(--tblr-cyan, #0ea5e9); }
.ra-kpi-card.border-success { border-left-color: var(--tblr-green, #10b981); }
.ra-kpi-card.border-warning { border-left-color: var(--tblr-yellow, #f59e0b); }
.ra-kpi-card.border-danger  { border-left-color: var(--tblr-red, #dc2626); }
.ra-kpi-card.border-secondary { border-left-color: var(--st-border-3, var(--tblr-gray-500, #6b7280)); }

/* ---- Section nav (pills) ---- */
.ra-section-nav .nav-link {
    border-radius: 6px !important;
    font-size: .85rem;
    padding: .4rem .85rem;
    color: var(--st-text-2, var(--tblr-secondary-color));
}
.ra-section-nav .nav-link.active {
    background: var(--tblr-primary, var(--st-accent, #6e56cf)) !important;
    color: var(--tblr-white, #fff) !important;
}

/* ---- HEATMAP ---- */
#raHeatmap {
    overflow-x: auto;
    min-width: 0;
}
.ra-heatmap {
    --cell-h: 28px;
    --cell-min-w: 30px;
    font-size: .72rem;
    min-width: 820px;
}
.ra-heatmap-header,
.ra-heatmap-row,
.ra-daypart-bar {
    display: grid;
    grid-template-columns: 50px repeat(24, minmax(var(--cell-min-w), 1fr));
    gap: 1px;
}
.ra-heatmap-corner { background: transparent; }
.ra-heatmap-hours {
    display: grid;
    grid-template-columns: repeat(24, minmax(var(--cell-min-w), 1fr));
    grid-column: 2 / -1;
    gap: 1px;
}
.ra-heatmap-hourlbl {
    text-align: center;
    color: var(--st-text-2, var(--tblr-secondary-color));
    font-weight: 500;
    line-height: 18px;
}
.ra-daypart-track {
    grid-column: 2 / -1;
    display: flex;
    gap: 1px;
    margin-bottom: 4px;
}
.ra-daypart-band {
    font-size: .65rem;
    text-align: center;
    background: var(--st-bg-3, var(--tblr-bg-surface-secondary));
    border-radius: 3px;
    padding: 2px 4px;
    color: var(--st-text-2, var(--tblr-secondary-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ra-heatmap-daylbl {
    color: var(--st-text-2, var(--tblr-secondary-color));
    font-weight: 600;
    line-height: var(--cell-h);
    text-align: right;
    padding-right: 8px;
}
.ra-heatmap-cell {
    height: var(--cell-h);
    border-radius: 3px;
    background: rgba(110, 86, 207, calc(0.05 + var(--ratio, 0) * 0.85));
    color: rgba(255, 255, 255, calc(0.55 + var(--ratio, 0) * 0.45));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .68rem;
    transition: transform .12s ease;
}
.ra-heatmap-cell:hover {
    transform: scale(1.12);
    z-index: 2;
    outline: 1px solid var(--tblr-primary, var(--st-accent, #6e56cf));
}
html[data-bs-theme="light"] .ra-heatmap-cell {
    background: rgba(110, 86, 207, calc(0.06 + var(--ratio, 0) * 0.78));
    color: rgba(20, 20, 30, calc(0.4 + var(--ratio, 0) * 0.6));
}

/* ---- ROTATION PYRAMIDE ---- */
.ra-rot-pyramid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem;
}
.ra-rot-bar {
    --pct: 0;
    --color: var(--tblr-primary, var(--st-accent));
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    background: var(--st-bg-2, var(--tblr-bg-surface));
    border-radius: 6px;
    padding: .35rem .6rem;
    border: 1px solid var(--st-border-2, var(--tblr-border-color));
    position: relative;
    overflow: hidden;
}
.ra-rot-bar-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--color), color-mix(in srgb, var(--color) 60%, transparent));
    opacity: .18;
    width: calc(var(--pct) * 1%);
}
.ra-rot-bar-lbl {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.ra-rot-bar-lbl strong {
    color: var(--color);
    font-size: .85rem;
    min-width: 80px;
}
.ra-rot-bar-lbl span {
    font-size: .8rem;
    color: var(--st-text-1, var(--tblr-body-color));
    min-width: 120px;
}
.ra-rot-bar-lbl small {
    font-size: .72rem;
    color: var(--st-text-2, var(--tblr-secondary-color));
    flex: 1;
}
.ra-cat-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}
.ra-rot-table thead th { font-size: .65rem; }
.ra-rot-table tbody td { font-size: .8rem; padding: 4px 8px; }

/* ---- CLOCK ---- */
.ra-clock-summary {
    background: var(--st-bg-3, var(--tblr-bg-surface-secondary));
    padding: .4rem .6rem;
    border-radius: 4px;
}
.ra-clock-slots { max-height: 380px; overflow-y: auto; padding-right: 6px; }
.ra-clock-slot {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--st-border-2, var(--tblr-border-color));
}
.ra-clock-slot:last-child { border-bottom: none; }
.ra-clock-time {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    color: var(--tblr-primary, var(--st-accent, #6e56cf));
    font-weight: 700;
    font-size: .8rem;
    line-height: 1.4;
}
.ra-clock-tracks { display: grid; gap: .25rem; }
.ra-clock-track {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: .5rem;
    align-items: center;
}
.ra-clock-track img {
    width: 28px; height: 28px; border-radius: 3px; object-fit: cover;
}
.ra-consistency-bar {
    height: 3px;
    background: var(--st-bg-3, var(--tblr-bg-surface-tertiary));
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}
.ra-consistency-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--tblr-green, #10b981), var(--tblr-yellow, #f59e0b));
}

/* ---- SIGNATURE SCORE BAR ---- */
.ra-score-bar {
    height: 4px;
    background: var(--st-bg-3, var(--tblr-bg-surface-tertiary));
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 2px;
}
.ra-score-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--tblr-primary, #6e56cf), var(--tblr-orange, #ea580c));
}

/* ---- VENN COMPARE ---- */
.ra-venn {
    position: relative;
    height: 200px;
    max-width: 480px;
    margin: 0 auto;
}
.ra-venn-circle {
    position: absolute;
    top: 30px;
    width: 180px; height: 140px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--tblr-white, #fff);
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.ra-venn-a { left: 30px;  background: radial-gradient(circle at center, rgba(110,86,207,.85), rgba(110,86,207,.5)); }
.ra-venn-b { left: 200px; background: radial-gradient(circle at center, rgba(14,165,233,.85), rgba(14,165,233,.5)); }
.ra-venn-common {
    position: absolute;
    top: 75px;
    left: 192px;
    width: 60px;
    text-align: center;
    color: var(--tblr-white, #fff);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.ra-venn-name { font-size: .85rem; font-weight: 600; padding: 0 30px; }
.ra-venn-num  { font-size: 1.5rem; font-weight: 800; }
.ra-venn-common .ra-venn-num { font-size: 1.4rem; }
.ra-jaccard { text-align: center; padding: 1rem 0; }

@media (max-width: 768px) {
    .ra-kpis-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .ra-heatmap { --cell-min-w: 18px; font-size: .6rem; min-width: 620px; }
    .ra-heatmap-cell { height: 22px; }
    .ra-venn { transform: scale(0.85); transform-origin: top left; height: 170px; }
}

html[data-bs-theme="dark"] .ra-kpi-card { background: var(--st-bg-2); }
html[data-bs-theme="dark"] .ra-rot-bar { background: var(--st-bg-2); }

/* Kind badges (track / programme / jingle) */
.ra-kind-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    margin-left: 6px;
    font-size: .68rem;
    font-weight: 600;
    border-radius: 3px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}
.ra-kind-badge .ti { font-size: .75rem; }
.ra-kind-program {
    background: rgba(139, 92, 246, 0.16);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.35);
}
.ra-kind-jingle {
    background: rgba(245, 158, 11, 0.16);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
html[data-bs-theme="dark"] .ra-kind-program {
    background: rgba(139, 92, 246, 0.22);
    color: #a78bfa;
}
html[data-bs-theme="dark"] .ra-kind-jingle {
    background: rgba(245, 158, 11, 0.22);
    color: #fbbf24;
}

/* =========================================================================
   26) TOASTS / NOTIFICATIONS — style Tabler (alert-*), empilables haut-droite
   stShowToast()/showNotification() créent un .alert.alert-{type}.st-toast-fixed.
   Sans ce bloc, les toasts étaient ajoutés au <body> sans positionnement → invisibles.
   ========================================================================= */
#st-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;                 /* au-dessus des modals Tabler (1055) */
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(420px, calc(100vw - 2rem));
    pointer-events: none;          /* clics traversent le conteneur… */
}

.st-toast-fixed {
    /* Fallback si un toast est ajouté directement au <body> (hors conteneur). */
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;
    width: min(420px, calc(100vw - 2rem));

    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .9rem;
    border: 0;
    border-left: 4px solid currentColor;   /* accent coloré par type (alert-*) */
    border-radius: var(--tblr-border-radius, 8px);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .28);
    pointer-events: auto;                    /* …mais le toast reste cliquable */
    animation: st-toast-in .18s ease-out;
}

/* Dans le conteneur empilable, on neutralise le positionnement fixe individuel. */
#st-toast-container .st-toast-fixed {
    position: static;
    top: auto;
    right: auto;
    width: auto;
}

.st-toast-icon {
    font-size: 1.15rem;
    line-height: 1.35;
    flex: 0 0 auto;
}

.st-toast-msg {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
    word-break: break-word;
}

.st-toast-fixed .btn-close {
    flex: 0 0 auto;
    margin: -.1rem -.2rem 0 0;
}

@keyframes st-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 575.98px) {
    #st-toast-container,
    .st-toast-fixed { left: 1rem; right: 1rem; width: auto; }
}