/**
 * academy-player-themes.css
 * 3 thèmes élève : Sombre (défaut), Clair, Sépia
 * Appliqués via data-svp-theme="sombre|clair|sepia" sur .svp-wrapper
 */

/* ── Variables par thème ────────────────────────────────────────────────── */

/* Thème Sombre (défaut — aucune surcharge nécessaire, styles existants) */
.svp-wrapper,
.svp-wrapper[data-svp-theme="sombre"] {
    --svp-bg:           #0f0f1e;
    --svp-bg2:          #1a1a2e;
    --svp-bg3:          rgba(255,255,255,0.04);
    --svp-text:         #e4e4e7;
    --svp-text2:        #a1a1aa;
    --svp-text3:        #71717a;
    --svp-border:       rgba(255,255,255,0.08);
    --svp-border2:      rgba(255,255,255,0.12);
    --svp-input-bg:     rgba(255,255,255,0.06);
    --svp-accent:       #7c3aed;
    --svp-accent-light: rgba(139,92,246,0.15);
    --svp-tab-active:   #a78bfa;
    --svp-tab-border:   #7c3aed;
    --svp-badge-bg:     rgba(139,92,246,0.2);
    --svp-badge-text:   #c4b5fd;
}

/* Thème Clair */
.svp-wrapper[data-svp-theme="clair"] {
    --svp-bg:           #f5f5f8;
    --svp-bg2:          #eaeaf0;
    --svp-bg3:          rgba(0,0,0,0.04);
    --svp-text:         #18181b;
    --svp-text2:        #52525b;
    --svp-text3:        #71717a;
    --svp-border:       rgba(0,0,0,0.10);
    --svp-border2:      rgba(0,0,0,0.15);
    --svp-input-bg:     rgba(0,0,0,0.04);
    --svp-accent:       #6d28d9;
    --svp-accent-light: rgba(109,40,217,0.10);
    --svp-tab-active:   #7c3aed;
    --svp-tab-border:   #7c3aed;
    --svp-badge-bg:     rgba(109,40,217,0.12);
    --svp-badge-text:   #6d28d9;
}

/* Thème Sépia */
.svp-wrapper[data-svp-theme="sepia"] {
    --svp-bg:           #f2e8d5;
    --svp-bg2:          #e8d8be;
    --svp-bg3:          rgba(100,60,20,0.05);
    --svp-text:         #3d2b1a;
    --svp-text2:        #7a5c3a;
    --svp-text3:        #9a7a58;
    --svp-border:       rgba(100,60,20,0.18);
    --svp-border2:      rgba(100,60,20,0.28);
    --svp-input-bg:     rgba(100,60,20,0.06);
    --svp-accent:       #8b5e3c;
    --svp-accent-light: rgba(139,94,60,0.12);
    --svp-tab-active:   #8b5e3c;
    --svp-tab-border:   #8b5e3c;
    --svp-badge-bg:     rgba(139,94,60,0.15);
    --svp-badge-text:   #6b3e1c;
}

/* ── Sélecteur de thème (boutons) ───────────────────────────────────────── */

.svp-theme-selector {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.svp-theme-label {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
}

.svp-wrapper[data-svp-theme="clair"] .svp-theme-label {
    color: rgba(0,0,0,0.35);
}
.svp-wrapper[data-svp-theme="sepia"] .svp-theme-label {
    color: rgba(60,35,10,0.45);
}

.svp-theme-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    flex-shrink: 0;
}
.svp-theme-btn:hover { transform: scale(1.15); }
.svp-theme-btn.svp-theme-active {
    border-color: rgba(139,92,246,0.7);
    box-shadow: 0 0 0 2px rgba(139,92,246,0.2);
}
.svp-wrapper[data-svp-theme="clair"] .svp-theme-btn.svp-theme-active {
    border-color: rgba(109,40,217,0.6);
    box-shadow: 0 0 0 2px rgba(109,40,217,0.15);
}
.svp-wrapper[data-svp-theme="sepia"] .svp-theme-btn.svp-theme-active {
    border-color: rgba(139,94,60,0.7);
    box-shadow: 0 0 0 2px rgba(139,94,60,0.2);
}

.svp-theme-btn-sombre { background: #18181b; }
.svp-theme-btn-clair  { background: #f0f0f5; }
.svp-theme-btn-sepia  { background: #e8d5b0; }

/* ── Application des variables aux classes svp-* ───────────────────────── */

.svp-wrapper { background: var(--svp-bg); color: var(--svp-text); }

/* Barre contrôles */
.svp-wrapper .svp-controls-bar {
    background: var(--svp-bg2);
    border-top: 1px solid var(--svp-border);
}

/* Vitesse */
.svp-wrapper .svp-speed-btn {
    color: var(--svp-text2);
    background: var(--svp-bg3);
    border: 1px solid var(--svp-border);
}
.svp-wrapper .svp-speed-btn:hover,
.svp-wrapper .svp-speed-btn.svp-speed-active {
    color: var(--svp-tab-active);
    border-color: var(--svp-accent);
}

/* Boutons contrôle */
.svp-wrapper .svp-quick-note-btn,
.svp-wrapper .svp-quiz-module-btn {
    color: var(--svp-text2);
    background: var(--svp-bg3);
    border: 1px solid var(--svp-border);
}
.svp-wrapper .svp-quick-note-btn:hover,
.svp-wrapper .svp-quiz-module-btn:hover {
    background: var(--svp-accent-light);
    border-color: var(--svp-accent);
    color: var(--svp-tab-active);
}

/* Section header */
.svp-wrapper .svp-section-title {
    color: var(--svp-text2);
}

/* Notes */
.svp-wrapper .svp-note-item {
    border-color: var(--svp-border);
    background: var(--svp-bg3);
}
.svp-wrapper .svp-note-ts { color: var(--svp-tab-active); }
.svp-wrapper .svp-note-text { color: var(--svp-text); }

/* Quick note panel */
.svp-wrapper .svp-quick-note-panel {
    background: var(--svp-bg2);
    border: 1px solid var(--svp-border2);
}
.svp-wrapper .svp-qn-title { color: var(--svp-text); }
.svp-wrapper .svp-qn-close { color: var(--svp-text3); }
.svp-wrapper .svp-qn-input {
    background: var(--svp-input-bg);
    border: 1px solid var(--svp-border);
    color: var(--svp-text);
}

/* Chapitres */
.svp-wrapper .svp-chapter-item {
    background: var(--svp-bg3);
    border: 1px solid var(--svp-border);
    color: var(--svp-text);
}
.svp-wrapper .svp-chapter-item:hover {
    border-color: var(--svp-border2);
    background: var(--svp-input-bg);
}
.svp-wrapper .svp-chapter-title { color: var(--svp-text); }
.svp-wrapper .svp-chapter-summary { color: var(--svp-text2); }
.svp-wrapper .svp-chapter-ts { color: var(--svp-text3); }
.svp-wrapper .svp-chapters-timeline { background: var(--svp-bg3); }

/* Réactions */
.svp-wrapper .svp-reactions-bar {
    border-top-color: var(--svp-border);
    border-bottom-color: var(--svp-border);
}
.svp-wrapper .svp-reaction-btn {
    background: var(--svp-bg3);
    border-color: var(--svp-border);
    color: var(--svp-text2);
}
.svp-wrapper .svp-reaction-btn:hover {
    background: var(--svp-accent-light);
    border-color: var(--svp-accent);
}
.svp-wrapper .svp-reaction-btn.svp-reaction-active {
    background: var(--svp-accent-light);
    border-color: var(--svp-accent);
    color: var(--svp-tab-active);
}

/* Tabs */
.svp-wrapper .svp-tab-header {
    border-bottom-color: var(--svp-border);
}
.svp-wrapper .svp-tab-btn {
    color: var(--svp-text3);
}
.svp-wrapper .svp-tab-btn:hover {
    color: var(--svp-text);
}
.svp-wrapper .svp-tab-btn.svp-tab-active {
    color: var(--svp-tab-active);
    border-bottom-color: var(--svp-tab-border);
}
.svp-wrapper .svp-tab-badge {
    background: var(--svp-badge-bg);
    color: var(--svp-badge-text);
}
.svp-wrapper .svp-interact-tabs {
    border-top-color: var(--svp-border);
}

/* Commentaires */
.svp-wrapper .svp-comment-input {
    background: var(--svp-input-bg);
    border-color: var(--svp-border);
    color: var(--svp-text);
}
.svp-wrapper .svp-comment-input:focus {
    border-color: var(--svp-accent);
    background: var(--svp-bg3);
}
.svp-wrapper .svp-comment-input::placeholder { color: var(--svp-text3); }
.svp-wrapper .svp-comment {
    background: var(--svp-bg3);
    border-color: var(--svp-border);
}
.svp-wrapper .svp-comment:hover { border-color: var(--svp-border2); }
.svp-wrapper .svp-comment-author { color: var(--svp-text); }
.svp-wrapper .svp-comment-body { color: var(--svp-text2); }
.svp-wrapper .svp-comment-time { color: var(--svp-text3); }
.svp-wrapper .svp-empty-interactions,
.svp-wrapper .svp-loading-comments { color: var(--svp-text3); }
.svp-wrapper .svp-empty-interactions { border-color: var(--svp-border); }
.svp-wrapper .svp-reply {
    border-left-color: var(--svp-border2);
    background: var(--svp-bg3);
}
.svp-wrapper .svp-reply-form { border-top-color: var(--svp-border); }
.svp-wrapper .svp-reply-btn { color: var(--svp-text3); }
.svp-wrapper .svp-reply-btn:hover { color: var(--svp-tab-active); background: var(--svp-accent-light); }

/* Q&A */
.svp-wrapper .svp-qa-item {
    background: var(--svp-bg3);
    border-color: var(--svp-border);
}
.svp-wrapper .svp-qa-author { color: var(--svp-text); }
.svp-wrapper .svp-qa-question { color: var(--svp-text); }
.svp-wrapper .svp-qa-upvote {
    background: var(--svp-bg3);
    border-color: var(--svp-border);
    color: var(--svp-text3);
}
.svp-wrapper .svp-qa-upvote:hover {
    background: var(--svp-accent-light);
    color: var(--svp-tab-active);
    border-color: var(--svp-accent);
}
.svp-wrapper .svp-qa-input {
    background: var(--svp-input-bg);
    border-color: var(--svp-border);
    color: var(--svp-text);
}

/* Transcription */
.svp-wrapper .svp-transcript-toggle { color: var(--svp-text2); }
.svp-wrapper .svp-transcript-count { color: var(--svp-text3); }
.svp-wrapper .svp-seg { color: var(--svp-text2); }
.svp-wrapper .svp-seg:hover { color: var(--svp-text); }
.svp-wrapper .svp-seg-time { color: var(--svp-text3); }
.svp-wrapper .svp-seg-active { color: var(--svp-tab-active); }

/* Module progress */
.svp-wrapper .svp-module-progress-label,
.svp-wrapper .svp-module-progress-pct { color: var(--svp-text2); }
.svp-wrapper .svp-module-progress-bar { background: var(--svp-bg3); }


/* ── Fond global du wrapper selon thème ─────────────────────────────────── */

/* Thème Clair — override du no-video placeholder */
.svp-wrapper[data-svp-theme="clair"] .svp-no-video {
    background: var(--svp-bg2);
    color: var(--svp-text2);
}

/* Thème Sépia — teinte chaude sur les badges */
.svp-wrapper[data-svp-theme="sepia"] .svp-instructor-badge {
    background: rgba(139,94,60,0.12);
    border-color: rgba(139,94,60,0.3);
    color: var(--svp-accent);
}

/* ── Sprint Modal & éléments manquants ──────────────────────────────────── */

/* Bouton supprimer commentaire */
.svp-wrapper .svp-comment-del { color: var(--svp-text3); }

/* Réponse Q&A — texte */
.svp-wrapper .svp-qa-answer p { color: var(--svp-text2); }

/* Sprint modal (position:fixed — peut être dans .svp-wrapper selon le player) */
.svp-wrapper .svp-sprint-panel {
    background: var(--svp-bg2);
}
.svp-wrapper .svp-sprint-sub { color: var(--svp-text3); }
.svp-wrapper .svp-sprint-close {
    background: var(--svp-bg3);
    color: var(--svp-text3);
}
.svp-wrapper .svp-sprint-close:hover {
    background: var(--svp-input-bg);
    color: var(--svp-text);
}
.svp-wrapper .svp-sprint-summary { color: var(--svp-text2); }
.svp-wrapper .svp-sprint-lessons-title { color: var(--svp-text3); }
.svp-wrapper .svp-sprint-lesson {
    background: var(--svp-bg3);
    border-color: var(--svp-border);
}
.svp-wrapper .svp-sprint-lesson-title { color: var(--svp-text); }
.svp-wrapper .svp-sprint-lesson-module { color: var(--svp-text3); }
.svp-wrapper .svp-sprint-lesson-reason { color: var(--svp-text2); }
.svp-wrapper .svp-sprint-empty { color: var(--svp-text3); }
.svp-wrapper .svp-sprint-footer { border-top-color: var(--svp-border); }

/* ── Toasts & notifications — thèmes Clair et Sépia ─────────────────────── */
/* data-player-theme est posé sur <body> par academy-player-theme-selector   */

/* Thème Clair — toasts fond blanc */
body[data-player-theme=clair] .toast {
    background: linear-gradient(135deg, rgba(248,248,252,0.97) 0%, rgba(238,238,246,0.97) 100%) !important;
    color: #18181b !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06) !important;
}
body[data-player-theme=clair] .toast::before {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent) !important;
}
body[data-player-theme=clair] .toast-message {
    color: #27272a !important;
}
body[data-player-theme=clair] .toast-close {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.09) !important;
    color: rgba(0,0,0,0.45) !important;
}
body[data-player-theme=clair] .toast-close:hover {
    background: rgba(0,0,0,0.1) !important;
    color: rgba(0,0,0,0.85) !important;
}

/* Thème Sépia — toasts fond parchemin */
body[data-player-theme=sepia] .toast {
    background: linear-gradient(135deg, rgba(245,238,220,0.97) 0%, rgba(233,222,200,0.97) 100%) !important;
    color: #3d2b1a !important;
    border: 1px solid rgba(100,60,20,0.15) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06) !important;
}
body[data-player-theme=sepia] .toast::before {
    background: linear-gradient(90deg, transparent, rgba(100,60,20,0.08), transparent) !important;
}
body[data-player-theme=sepia] .toast-message {
    color: #3d2b1a !important;
}
body[data-player-theme=sepia] .toast-close {
    background: rgba(100,60,20,0.06) !important;
    border-color: rgba(100,60,20,0.12) !important;
    color: rgba(61,43,26,0.45) !important;
}
body[data-player-theme=sepia] .toast-close:hover {
    background: rgba(100,60,20,0.12) !important;
    color: rgba(61,43,26,0.9) !important;
}

/* Labels de type (Succès, Erreur, etc.) — lisibles sur fond clair/sépia */
body[data-player-theme=clair] .toast-success .toast-label,
body[data-player-theme=sepia] .toast-success .toast-label { color: #16a34a !important; }
body[data-player-theme=clair] .toast-error .toast-label,
body[data-player-theme=sepia] .toast-error .toast-label   { color: #dc2626 !important; }
body[data-player-theme=clair] .toast-warning .toast-label,
body[data-player-theme=sepia] .toast-warning .toast-label { color: #d97706 !important; }
body[data-player-theme=clair] .toast-info .toast-label,
body[data-player-theme=sepia] .toast-info .toast-label    { color: #6d28d9 !important; }

/* Achievement toast — laisser tel quel (dark gold, toujours lisible) */
/* XP toast — laisser tel quel (gold gradient, toujours lisible) */

/* ── notif-toast (notifications.js) — thèmes Clair et Sépia ─────────────── */
/* Le .notif-toast utilise des styles inline — !important requis              */

body[data-player-theme=clair] .notif-toast {
    background: rgba(248,248,252,0.97) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04) !important;
    color: #18181b !important;
}
body[data-player-theme=sepia] .notif-toast {
    background: rgba(245,238,220,0.97) !important;
    border-color: rgba(100,60,20,0.15) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(100,60,20,0.06) !important;
    color: #3d2b1a !important;
}

body[data-player-theme=clair] .notif-toast-title,
body[data-player-theme=clair] .notif-toast-body { color: #18181b !important; }
body[data-player-theme=sepia] .notif-toast-title,
body[data-player-theme=sepia] .notif-toast-body { color: #3d2b1a !important; }

body[data-player-theme=clair] .notif-toast-close,
body[data-player-theme=sepia] .notif-toast-close {
    background: rgba(0,0,0,0.05) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    color: rgba(0,0,0,0.45) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CLOCHE + PANNEAU NOTIFICATIONS — Thèmes Clair & Sépia
   body[data-player-theme] posé par academy-player-theme-selector.js
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Icône cloche ──────────────────────────────────────────────────────── */
body[data-player-theme=clair]  .notif-badge-btn { color: #3f3f46 !important; }
body[data-player-theme=sepia]  .notif-badge-btn { color: #5c3d1e !important; }
body[data-player-theme=clair]  .notif-badge-btn:hover { background: rgba(0,0,0,0.07) !important; color: #18181b !important; }
body[data-player-theme=sepia]  .notif-badge-btn:hover { background: rgba(100,60,20,0.1) !important; color: #3d2b1a !important; }

/* ── Panneau principal ─────────────────────────────────────────────────── */
body[data-player-theme=clair]  .notif-premium-panel {
    background: #f5f5f8 !important;
    border-left: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: -10px 0 40px rgba(0,0,0,0.1) !important;
}
body[data-player-theme=sepia]  .notif-premium-panel {
    background: #f2e8d5 !important;
    border-left: 1px solid rgba(100,60,20,0.2) !important;
    box-shadow: -10px 0 40px rgba(0,0,0,0.1) !important;
}

/* ── En-tête ───────────────────────────────────────────────────────────── */
body[data-player-theme=clair]  .notif-premium-header {
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(59,130,246,0.06) 100%) !important;
}
body[data-player-theme=sepia]  .notif-premium-header {
    border-bottom: 1px solid rgba(100,60,20,0.15) !important;
    background: linear-gradient(135deg, rgba(139,94,60,0.08) 0%, rgba(180,130,80,0.05) 100%) !important;
}
body[data-player-theme=clair]  .notif-premium-title h2,
body[data-player-theme=clair]  .notif-premium-empty h3  { color: #18181b !important; }
body[data-player-theme=sepia]  .notif-premium-title h2,
body[data-player-theme=sepia]  .notif-premium-empty h3  { color: #3d2b1a !important; }
body[data-player-theme=clair]  .notif-premium-subtitle,
body[data-player-theme=clair]  .notif-premium-empty p   { color: #52525b !important; }
body[data-player-theme=sepia]  .notif-premium-subtitle,
body[data-player-theme=sepia]  .notif-premium-empty p   { color: #7a5c3a !important; }

/* ── Bouton fermer ─────────────────────────────────────────────────────── */
body[data-player-theme=clair]  .notif-premium-close {
    background: rgba(0,0,0,0.05) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    color: #52525b !important;
}
body[data-player-theme=sepia]  .notif-premium-close {
    background: rgba(100,60,20,0.07) !important;
    border: 1px solid rgba(100,60,20,0.15) !important;
    color: #7a5c3a !important;
}

/* ── Onglets ───────────────────────────────────────────────────────────── */
body[data-player-theme=clair]  .notif-premium-tab {
    border: 1px solid rgba(0,0,0,0.08) !important;
    color: #52525b !important;
}
body[data-player-theme=sepia]  .notif-premium-tab {
    border: 1px solid rgba(100,60,20,0.15) !important;
    color: #7a5c3a !important;
}
body[data-player-theme=clair]  .notif-premium-tab:hover { background: rgba(0,0,0,0.05) !important; }
body[data-player-theme=sepia]  .notif-premium-tab:hover { background: rgba(100,60,20,0.07) !important; }
body[data-player-theme=clair]  .notif-premium-tab.active {
    background: rgba(99,102,241,0.1) !important;
    border-color: rgba(99,102,241,0.3) !important;
    color: #6d28d9 !important;
}
body[data-player-theme=sepia]  .notif-premium-tab.active {
    background: rgba(139,94,60,0.12) !important;
    border-color: rgba(139,94,60,0.35) !important;
    color: #8b5e3c !important;
}
body[data-player-theme=clair]  .notif-premium-tab-badge {
    background: rgba(99,102,241,0.15) !important;
    color: #6d28d9 !important;
}
body[data-player-theme=sepia]  .notif-premium-tab-badge {
    background: rgba(139,94,60,0.15) !important;
    color: #8b5e3c !important;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
body[data-player-theme=clair]  .notif-premium-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.04) !important; }
body[data-player-theme=sepia]  .notif-premium-list::-webkit-scrollbar-track { background: rgba(100,60,20,0.05) !important; }

/* ── Items ─────────────────────────────────────────────────────────────── */
body[data-player-theme=clair]  .notif-premium-item {
    background: rgba(0,0,0,0.03) !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
}
body[data-player-theme=sepia]  .notif-premium-item {
    background: rgba(100,60,20,0.05) !important;
    border: 1px solid rgba(100,60,20,0.12) !important;
}
body[data-player-theme=clair]  .notif-premium-item:hover {
    background: rgba(99,102,241,0.06) !important;
    border-color: rgba(99,102,241,0.2) !important;
}
body[data-player-theme=sepia]  .notif-premium-item:hover {
    background: rgba(139,94,60,0.08) !important;
    border-color: rgba(139,94,60,0.25) !important;
}
body[data-player-theme=clair]  .notif-premium-item.unread {
    background: rgba(99,102,241,0.07) !important;
    border-color: rgba(99,102,241,0.25) !important;
}
body[data-player-theme=sepia]  .notif-premium-item.unread {
    background: rgba(139,94,60,0.08) !important;
    border-color: rgba(139,94,60,0.3) !important;
}
body[data-player-theme=clair]  .notif-premium-item-title  { color: #18181b !important; }
body[data-player-theme=sepia]  .notif-premium-item-title  { color: #3d2b1a !important; }
body[data-player-theme=clair]  .notif-premium-item-message { color: #52525b !important; }
body[data-player-theme=sepia]  .notif-premium-item-message { color: #7a5c3a !important; }
body[data-player-theme=clair]  .notif-premium-item-time   { color: #71717a !important; }
body[data-player-theme=sepia]  .notif-premium-item-time   { color: #9a7a58 !important; }
body[data-player-theme=clair]  .notif-premium-item-footer {
    border-top: 1px solid rgba(0,0,0,0.06) !important;
}
body[data-player-theme=sepia]  .notif-premium-item-footer {
    border-top: 1px solid rgba(100,60,20,0.1) !important;
}

/* ── Boutons snooze & actions ──────────────────────────────────────────── */
body[data-player-theme=clair]  .notif-snooze-btn { color: #71717a !important; }
body[data-player-theme=sepia]  .notif-snooze-btn { color: #9a7a58 !important; }
body[data-player-theme=clair]  .notif-action-btn {
    background: rgba(0,0,0,0.04) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    color: #3f3f46 !important;
}
body[data-player-theme=sepia]  .notif-action-btn {
    background: rgba(100,60,20,0.06) !important;
    border: 1px solid rgba(100,60,20,0.15) !important;
    color: #5c3d1e !important;
}

/* ── Pied de page ──────────────────────────────────────────────────────── */
body[data-player-theme=clair]  .notif-premium-footer {
    background: rgba(0,0,0,0.04) !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
}
body[data-player-theme=sepia]  .notif-premium-footer {
    background: rgba(100,60,20,0.06) !important;
    border-top: 1px solid rgba(100,60,20,0.12) !important;
}
body[data-player-theme=clair]  .notif-premium-btn-secondary {
    background: rgba(0,0,0,0.05) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    color: #52525b !important;
}
body[data-player-theme=sepia]  .notif-premium-btn-secondary {
    background: rgba(100,60,20,0.08) !important;
    border: 1px solid rgba(100,60,20,0.18) !important;
    color: #7a5c3a !important;
}
body[data-player-theme=clair]  .notif-premium-btn-secondary:hover {
    background: rgba(0,0,0,0.09) !important;
}
body[data-player-theme=sepia]  .notif-premium-btn-secondary:hover {
    background: rgba(100,60,20,0.14) !important;
}

/* ── Groupes ───────────────────────────────────────────────────────────── */
body[data-player-theme=clair]  .notif-group-header-label,
body[data-player-theme=clair]  .notif-group-header-time  { color: #3f3f46 !important; }
body[data-player-theme=sepia]  .notif-group-header-label,
body[data-player-theme=sepia]  .notif-group-header-time  { color: #5c3d1e !important; }
body[data-player-theme=clair]  .notif-group-mark-read { color: #6d28d9 !important; }
body[data-player-theme=sepia]  .notif-group-mark-read { color: #8b5e3c !important; }

/* ── Bouton Marquer tout lu header ───────────────────────────────────── */
body[data-player-theme=clair]  .notif-premium-markall-header,
body[data-player-theme=clair]  .notif-premium-markall-footer {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #52525b !important;
}
body[data-player-theme=sepia]  .notif-premium-markall-header,
body[data-player-theme=sepia]  .notif-premium-markall-footer {
    background: rgba(100,60,20,0.07) !important;
    border-color: rgba(100,60,20,0.15) !important;
    color: #7a5c3a !important;
}