/* =====================================================================
   JM RADIO — site.css : composants partagés par toutes les pages
   (lecteur du bas, modale dédicace / vocal / demande de son, paroles,
   menu latéral, en-têtes de page, utilitaires). Chargé après style.css.
   ===================================================================== */

:root {
    --jm-panel: rgba(12, 16, 27, 0.78);
    --jm-border: rgba(255, 255, 255, 0.07);
    --jm-radius: 22px;
}

/* ---------- Menu (06/10) : barre sombre à gauche + panneau « 3 traits »
   aux couleurs du site (verre sombre, touches dorées) ---------- */
:root { --sb-w: 92px; --sb-panel-w: 300px; --sb-bg: rgba(7, 11, 20, 0.86); --sb-line: rgba(255, 255, 255, 0.06); }
.main-content { margin-left: var(--sb-w); width: calc(100% - var(--sb-w)); }
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-w); height: 100%; z-index: 2001; display: block; margin: 0; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
.sidebar.panel-open { z-index: 9996; }
.sb-rail { position: relative; z-index: 2; width: var(--sb-w); height: 100%; display: flex; flex-direction: column; align-items: center; background: var(--sb-bg); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); border-right: 1px solid var(--sb-line); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.sb-rail::-webkit-scrollbar { display: none; }

/* Bouton 3 traits */
.sb-burger { flex-shrink: 0; width: 46px; height: 46px; margin: 18px auto 4px; padding: 0; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.sb-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #E2E8F0; transition: transform 0.3s ease, opacity 0.2s ease, background 0.25s ease; }
.sb-burger:hover { border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.08); }
.sb-burger:hover span { background: var(--gold); }
.sb-burger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sidebar.panel-open .sb-burger, .sidebar.active .sb-burger { background: var(--gradient-gold); border-color: transparent; box-shadow: 0 6px 18px rgba(251, 191, 36, 0.3); }
.sidebar.panel-open .sb-burger span, .sidebar.active .sb-burger span { background: #0B0F19; }
.sidebar.panel-open .sb-burger span:nth-child(1), .sidebar.active .sb-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sidebar.panel-open .sb-burger span:nth-child(2), .sidebar.active .sb-burger span:nth-child(2) { opacity: 0; }
.sidebar.panel-open .sb-burger span:nth-child(3), .sidebar.active .sb-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Logo (+ badge Octobre Rose ajouté par app.js en octobre) */
.sidebar .logo-zone { width: calc(100% - 24px); display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 12px 0 14px; border-bottom: 1px solid var(--sb-line); text-align: center; }
.sb-logo { display: block; border-radius: 14px; }
.sb-logo img { display: block; width: 54px; height: 54px; border-radius: 14px; object-fit: cover; border: 2px solid rgba(236, 72, 153, 0.4); filter: drop-shadow(0 4px 12px rgba(236, 72, 153, 0.3)); transition: transform 0.25s ease; }
.sb-logo:hover img { transform: scale(1.05); }
.sidebar .octobre-rose-tag { margin: 0; padding: 4px 7px; max-width: 76px; flex-direction: column; gap: 2px; border-radius: 10px; font-size: 0.52rem; line-height: 1.15; letter-spacing: 0.3px; text-align: center; }
.sidebar .octobre-rose-tag i { font-size: 0.78rem; }

/* Rubriques de la barre : pastille avec l'icône + nom dessous */
.sidebar .sidebar-nav { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 10px 0 18px; }
.sidebar .sidebar-nav > a, .sidebar .sidebar-nav > button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0; padding: 7px 4px; border: 0; border-radius: 0; background: none; color: #9CA3AF; font: inherit; font-size: 0.66rem; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; box-shadow: none; transform: none; transition: color 0.2s ease; }
.sidebar .sidebar-nav i { width: 46px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.08rem; color: #6B7280; background: transparent; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.sidebar .sidebar-nav > a:hover, .sidebar .sidebar-nav > button:hover { color: #fff; background: none; transform: none; }
.sidebar .sidebar-nav > a:hover i, .sidebar .sidebar-nav > button:hover i { color: var(--gold); background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); }
.sidebar .sidebar-nav > a.active { color: var(--gold); background: none; border: 0; }
.sidebar .sidebar-nav > a.active i { color: #0B0F19; background: var(--gradient-gold); box-shadow: 0 6px 16px rgba(251, 191, 36, 0.28); }
.sidebar .sidebar-nav .sb-dedi i { color: #F87171; }
.sidebar .sidebar-nav .sb-dedi:hover i { color: #FCA5A5; background: rgba(231, 37, 53, 0.14); }
.sidebar .sidebar-nav > a:focus-visible, .sidebar .sidebar-nav > button:focus-visible { outline: none; }
.sidebar .sidebar-nav > a:focus-visible i, .sidebar .sidebar-nav > button:focus-visible i { box-shadow: 0 0 0 2px var(--gold); }

/* Panneau « 3 traits » */
.sb-panel { position: absolute; top: 0; bottom: 0; left: var(--sb-w); z-index: 1; width: var(--sb-panel-w); display: flex; flex-direction: column; color: #E2E8F0; background: rgba(9, 13, 23, 0.97); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); border-right: 1px solid rgba(251, 191, 36, 0.14); box-shadow: 18px 0 50px rgba(0, 0, 0, 0.5); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; transform: translateX(calc(-100% - var(--sb-w))); visibility: hidden; transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.32s; }
.sb-panel::-webkit-scrollbar { display: none; }
.sidebar.panel-open .sb-panel { transform: none; visibility: visible; transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
body:has(.sidebar.panel-open)::before { content: ''; position: fixed; inset: 0; z-index: 9994; background: rgba(3, 6, 14, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.sb-panel-head { padding: 24px 24px 18px; border-bottom: 1px solid var(--sb-line); }
.sb-panel-head .brand-name { font-weight: 900; font-size: 1.45rem; letter-spacing: 0.5px; line-height: 1.1; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sb-panel-head .brand-tagline { margin-top: 4px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-secondary, #94A3B8); }

.sb-sec { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 4px; }
.sb-sec-title { display: flex; align-items: center; gap: 8px; padding: 14px 24px 8px; font-size: 0.66rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #64748B; }
.sb-sec-title i { color: var(--gold); font-size: 0.72rem; }

/* Stations : une ligne par station, bouton lecture à droite */
.sb-stations { display: flex; flex-direction: column; gap: 6px; padding: 0 12px; }
.sb-st { --st: #E72535; width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.025); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.sb-st img { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; object-fit: cover; }
.sb-st-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-st-txt b { font-size: 0.9rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-st-txt small { font-size: 0.72rem; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-st-play { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--st); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.2s ease; }
.sb-st-play .fa-play { margin-left: 2px; }
.sb-st:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
.sb-st:hover .sb-st-play { background: var(--st); border-color: transparent; color: #fff; }
.sb-st[data-sb-station="classiks"]:hover .sb-st-play, .sb-st.on[data-sb-station="classiks"] .sb-st-play { color: #111; }
.sb-st:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sb-st.on { border-color: color-mix(in srgb, var(--st) 50%, transparent); background: color-mix(in srgb, var(--st) 10%, transparent); }
.sb-st.on .sb-st-txt small { color: var(--st); font-weight: 700; }
.sb-st.on .sb-st-play { background: var(--st); border-color: transparent; color: #fff; }

/* Rubriques du panneau */
.sb-panel-nav a { display: flex; align-items: center; gap: 12px; margin: 0 12px; padding: 8px 12px; border-radius: 12px; color: #CBD5E1; text-decoration: none; font-size: 0.9rem; font-weight: 600; line-height: 1.2; transition: background 0.2s ease, color 0.2s ease; }
.sb-panel-nav a i { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 0.95rem; color: #94A3B8; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.2s ease; }
.sb-panel-nav a small { display: block; margin-top: 2px; font-size: 0.74rem; font-weight: 500; color: #94A3B8; }
.sb-panel-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.sb-panel-nav a:hover i { color: var(--gold); border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); }
.sb-panel-nav a.active { color: var(--gold); background: linear-gradient(90deg, rgba(251, 191, 36, 0.14) 0%, transparent 100%); }
.sb-panel-nav a.active i { color: #0B0F19; background: var(--gradient-gold); border-color: transparent; }
.sb-panel-nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Bas du panneau : réseaux + liens légaux */
.sb-panel-foot { margin-top: auto; padding: 18px 24px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--sb-line); }
.sb-panel .sidebar-social { display: flex; gap: 10px; margin: 0; }
.sb-panel .sidebar-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #CBD5E1; font-size: 1.05rem; text-decoration: none; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.2s ease; }
.sb-panel .sidebar-social a:hover { color: var(--gold); border-color: rgba(251, 191, 36, 0.4); transform: translateY(-2px); }
.sb-legal { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sb-legal a { color: #6B7280; font-size: 0.72rem; font-weight: 500; text-decoration: none; transition: color 0.2s ease; }
.sb-legal a:hover, .sb-legal a.active { color: var(--gold); }

/* Écrans d'ordinateur peu hauts : la barre se resserre pour tout afficher */
@media (min-width: 993px) and (max-height: 780px) {
    .sb-burger { width: 42px; height: 42px; margin-top: 12px; }
    .sidebar .logo-zone { padding: 8px 0 10px; gap: 6px; }
    .sb-logo img { width: 44px; height: 44px; border-radius: 12px; }
    .sidebar .sidebar-nav { padding: 6px 0 10px; gap: 0; }
    .sidebar .sidebar-nav > a, .sidebar .sidebar-nav > button { padding: 5px 4px; gap: 3px; }
    .sidebar .sidebar-nav i { height: 32px; }
}

/* Mobile : le bouton « Menu » du bas ouvre la barre + le panneau ensemble */
@media (max-width: 992px) {
    :root { --sb-w: 80px; }
    .main-content { margin-left: 0; width: 100%; }
    .sidebar { display: flex; width: auto; transform: translateX(-105%); visibility: hidden; transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.32s; }
    .sidebar.active { transform: none; visibility: visible; z-index: 9996; box-shadow: 14px 0 44px rgba(0, 0, 0, 0.6); transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
    body:has(.sidebar.active)::before { content: ''; position: fixed; inset: 0; z-index: 9994; background: rgba(3, 6, 14, 0.62); }
    .sb-rail { background: rgba(7, 11, 20, 0.98); }
    .sb-panel { position: relative; left: 0; width: min(290px, calc(100vw - var(--sb-w) - 36px)); transform: none; visibility: inherit; transition: none; box-shadow: none; }
    .sb-burger { width: 42px; height: 42px; margin-top: 14px; }
    .sidebar .logo-zone { width: calc(100% - 20px); padding: 10px 0 12px; }
    .sb-logo img { width: 46px; height: 46px; border-radius: 12px; }
    .sidebar .sidebar-nav { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    .sidebar .sidebar-nav > a, .sidebar .sidebar-nav > button { font-size: 0.62rem; padding: 6px 3px; }
    .sidebar .sidebar-nav i { width: 42px; height: 34px; }
    .sb-panel-head { padding: 20px 18px 14px; }
    .sb-sec-title { padding: 12px 18px 6px; }
    .sb-stations { padding: 0 10px; }
    .sb-panel-nav a { margin: 0 8px; padding: 7px 10px; font-size: 0.86rem; }
    .sb-panel-foot { padding: 16px 18px calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
    .sb-st { gap: 9px; padding: 7px 8px; }
    .sb-st img { width: 34px; height: 34px; border-radius: 9px; }
    .sb-st-play { width: 30px; height: 30px; }
}

/* ---------- En-tête mobile (logo) ---------- */
@media (max-width: 992px) {
    .mobile-brand-header { padding: 14px 0 12px; gap: 10px; }
    .mobile-brand-header img { height: 46px; width: 46px; border-radius: 13px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
    .mobile-brand-header::after { content: 'JM RADIO'; font-weight: 900; font-size: 1.15rem; letter-spacing: 0.5px; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
}

/* ---------- En-tête de page commun ---------- */
.page-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 22px; }
.page-head .page-ico { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; background: rgba(251, 191, 36, 0.12); color: var(--gold); border: 1px solid rgba(251, 191, 36, 0.25); flex-shrink: 0; }
.page-head h1 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 900; color: #fff; margin: 0; letter-spacing: -0.3px; line-height: 1.15; }
.page-head p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.9rem; }
.section-title { font-size: 1.5rem; padding-left: 14px; letter-spacing: 0; }
.section-title::before { height: 22px; }

/* =====================================================================
   LECTEUR DU BAS (barre flottante)
   ===================================================================== */
.jm-player {
    position: fixed; left: calc(var(--sb-w) + 20px); right: 20px; bottom: 16px; z-index: 9990;
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px;
    padding: 10px 14px 10px 10px; min-height: 76px;
    background: rgba(9, 12, 20, 0.9); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
}
/* Avancée du titre en cours (fine ligne en haut de la barre, si l'API donne la durée) */
.jm-player-progress { position: absolute; left: 18px; right: 18px; top: -1px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.08); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.jm-player.has-progress .jm-player-progress { opacity: 1; }
.jm-player-progress span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--gradient-gold); transition: width 1s linear; }
/* Gauche : pochette + station / titre / artiste */
.jm-player-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.jm-player-cover { position: relative; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: #0F172A; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.jm-player-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jm-player-eq { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 5px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); opacity: 0; transition: opacity 0.3s; }
.jm-player-eq i { width: 3px; height: 30%; background: #fff; border-radius: 2px; animation: jmEq 1s ease-in-out infinite; }
.jm-player-eq i:nth-child(2) { animation-delay: 0.15s; } .jm-player-eq i:nth-child(3) { animation-delay: 0.3s; }
.jm-player.playing .jm-player-eq { opacity: 1; }
@keyframes jmEq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.jm-player-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jm-player-live { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: #64748B; line-height: 1.3; white-space: nowrap; }
.jm-player-live .jm-live-txt::before { content: '·'; margin-right: 6px; }
.jm-live-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #475569; }
.jm-player.playing .jm-player-live { color: #94A3B8; }
.jm-player.playing .jm-live-dot { background: var(--jmradio-red); animation: jmLive 1.6s ease-out infinite; }
@keyframes jmLive { 0% { box-shadow: 0 0 0 0 rgba(231, 37, 53, 0.55); } 100% { box-shadow: 0 0 0 7px rgba(231, 37, 53, 0); } }
.jm-player-title { font-weight: 800; font-size: 0.98rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.jm-player-artist { font-size: 0.82rem; font-weight: 600; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
/* Centre : bouton lecture (anneau qui pulse pendant l'écoute) */
.jm-player-center { display: flex; align-items: center; justify-content: center; }
.jm-player .playBtn { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; color: #0B0F19; background: var(--gradient-gold); box-shadow: 0 8px 22px rgba(251, 191, 36, 0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.jm-player .playBtn:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(251, 191, 36, 0.45); }
.jm-player .playBtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.jm-player .playBtn i { margin-left: 2px; }
.jm-player.playing .playBtn i { margin-left: 0; }
.jm-player .playBtn::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }
.jm-player.playing .playBtn::after { animation: jmRing 2.2s ease-out infinite; }
@keyframes jmRing { 0% { transform: scale(0.92); opacity: 0.55; } 100% { transform: scale(1.25); opacity: 0; } }
/* Droite : kiffe, paroles, dédicace | mini-lecteur, volume */
.jm-player-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.jm-player-sep { width: 1px; height: 26px; margin: 0 2px; background: rgba(255, 255, 255, 0.1); flex-shrink: 0; }
.jm-pbtn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); color: #E2E8F0; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; font-family: inherit; white-space: nowrap; }
.jm-pbtn i { font-size: 0.95rem; color: #94A3B8; transition: color 0.2s ease; }
.jm-pbtn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.jm-pbtn:hover i { color: var(--gold); }
.jm-pbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.jm-pbtn.jm-icon-only { width: 40px; padding: 0; justify-content: center; }
.jm-player .btn-kiffe-bar { height: 40px; padding: 0 12px 0 14px; border-radius: 12px; background: rgba(236, 72, 153, 0.1); border: 1px solid rgba(236, 72, 153, 0.35); color: #F9A8D4; font-size: 0.85rem; box-shadow: none; margin: 0; width: auto; min-width: 0; gap: 8px; }
.jm-player .btn-kiffe-bar i { color: #EC4899; font-size: 0.95rem; }
.jm-player .btn-kiffe-bar .kiffe-count-val { background: rgba(255, 255, 255, 0.12); color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 0.76rem; font-weight: 900; min-width: 24px; text-align: center; margin: 0; }
.jm-player .btn-kiffe-bar:hover { background: rgba(236, 72, 153, 0.2); transform: none; }
.jm-player .btn-kiffe-bar.liked { background: linear-gradient(135deg, #EC4899, #E72535); border-color: transparent; color: #fff; }
.jm-player .btn-kiffe-bar.liked i { color: #fff; }
.jm-volume { display: flex; align-items: center; gap: 4px; }
.jm-volume .jm-pbtn { border-color: transparent; background: transparent; }
.jm-volume input[type="range"] { -webkit-appearance: none; appearance: none; width: 92px; height: 4px; margin: 0 4px 0 0; border-radius: 4px; cursor: pointer; outline: none; background: linear-gradient(90deg, var(--gold) 0, var(--gold) var(--vol, 80%), rgba(255, 255, 255, 0.16) var(--vol, 80%), rgba(255, 255, 255, 0.16) 100%); }
.jm-volume input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45); transition: transform 0.15s ease; }
.jm-volume input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45); }
.jm-volume input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.jm-volume input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35); }
.jm-volume.muted #volIcon::before { content: "\f6a9"; }
/* JM Classiks : liseré doré autour de la pochette */
html[data-station="classiks"] .jm-player-cover { box-shadow: 0 0 0 2px #FBBF24, 0 6px 16px rgba(0, 0, 0, 0.35); }
@media (max-width: 1240px) and (min-width: 993px) {
    .jm-pbtn .jm-pbtn-label { display: none; }
    .jm-pbtn:not(.jm-icon-only) { width: 40px; padding: 0; justify-content: center; }
    .jm-volume input[type="range"] { width: 70px; }
}

/* =====================================================================
   NAVIGATION MOBILE (barre du bas)
   ===================================================================== */
@media (max-width: 992px) {
    .jm-player { left: 10px; right: 10px; bottom: 68px; min-height: 62px; padding: 8px 8px 8px 8px; gap: 10px; grid-template-columns: minmax(0, 1fr) auto auto; border-radius: 16px; }
    .jm-player-progress { left: 14px; right: 14px; }
    .jm-player-left { gap: 10px; }
    .jm-player-cover { width: 46px; height: 46px; border-radius: 10px; }
    .jm-player-live { font-size: 0.56rem; gap: 5px; letter-spacing: 0.6px; }
    .jm-live-dot { width: 6px; height: 6px; }
    .jm-player-title { font-size: 0.88rem; } .jm-player-artist { font-size: 0.74rem; }
    .jm-player-center { order: 3; }
    .jm-player .playBtn { width: 44px; height: 44px; font-size: 1rem; }
    .jm-player .playBtn::after { inset: -4px; }
    .jm-player-right { order: 2; gap: 6px; }
    .jm-pbtn { height: 36px; width: 36px; padding: 0; justify-content: center; border-radius: 10px; }
    .jm-pbtn .jm-pbtn-label, .jm-volume, #btnMiniPlayer, .jm-player-sep { display: none !important; }
    .jm-player .btn-kiffe-bar { height: 36px; padding: 0 9px; width: auto; gap: 6px; }
    .mobile-bottom-nav { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; height: 62px; z-index: 9995; background: rgba(7, 10, 18, 0.96); backdrop-filter: blur(18px); border-top: 1px solid rgba(255, 255, 255, 0.07); justify-content: space-around; align-items: stretch; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
    .mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: #64748B; font-size: 0.62rem; font-weight: 700; border: 0; background: none; font-family: inherit; border-radius: 12px; transition: all 0.2s; min-width: 0; padding: 0 2px; }
    .mobile-nav-item i { font-size: 1.05rem; }
    .mobile-nav-item.active { color: var(--gold); }
    .mobile-nav-item.active i { filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5)); }
    .mobile-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    body { padding-bottom: 150px !important; }
}

/* =====================================================================
   MODALE DÉDICACE : message / vocal / demande de son
   ===================================================================== */
.jm-dedi.modal { padding: 24px 14px; align-items: center; }
.jm-dedi .modal-content { max-width: 520px; padding: 26px 24px 22px; border-radius: 24px; background: linear-gradient(170deg, #111827 0%, #0B1020 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
.jm-dedi .close-modal { top: 16px; right: 16px; }
.jm-dedi-head { display: flex; align-items: center; gap: 14px; margin: 0 36px 18px 0; }
.jm-dedi-ico { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; background: rgba(231, 37, 53, 0.14); color: #FF6B78; border: 1px solid rgba(231, 37, 53, 0.3); flex-shrink: 0; }
.jm-dedi-head h2 { font-size: 1.2rem; font-weight: 900; color: #fff; margin: 0; text-align: left; display: block; }
.jm-dedi-head p { margin: 3px 0 0; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.4; }
.jm-dedi-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; padding: 5px; margin-bottom: 18px; }
.jm-dedi-tabs button { border: 0; background: transparent; color: #94A3B8; font-weight: 700; font-size: 0.82rem; padding: 10px 6px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: all 0.2s ease; font-family: inherit; white-space: nowrap; }
.jm-dedi-tabs button i { font-size: 0.9rem; }
.jm-dedi-tabs button:hover { color: #fff; }
.jm-dedi-tabs button.active { background: rgba(251, 191, 36, 0.14); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.3); }
.jm-dedi-pane { display: none; }
.jm-dedi-pane.active { display: block; animation: jmFade 0.25s ease; }
@keyframes jmFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.jm-field { position: relative; display: block; margin-bottom: 12px; }
.jm-field > i { position: absolute; left: 15px; top: 15px; color: #64748B; font-size: 0.9rem; pointer-events: none; }
.jm-field input, .jm-field textarea { width: 100%; padding: 13px 14px 13px 42px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; border-radius: 13px; font-family: inherit; font-size: 0.95rem; outline: none; transition: border-color 0.2s, background 0.2s; }
.jm-field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.jm-field input:focus, .jm-field textarea:focus { border-color: rgba(251, 191, 36, 0.55); background: rgba(251, 191, 36, 0.04); }
.jm-field input::placeholder, .jm-field textarea::placeholder { color: #64748B; }
.jm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jm-dedi-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.jm-counter, .jm-hint { font-size: 0.78rem; color: #64748B; white-space: nowrap; }
.jm-btn-primary { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 13px; border: 0; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 0.92rem; color: #fff; background: linear-gradient(135deg, #FF3B4E, #E72535); box-shadow: 0 10px 24px rgba(231, 37, 53, 0.35); transition: all 0.2s ease; white-space: nowrap; }
.jm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(231, 37, 53, 0.5); }
.jm-btn-primary:disabled { opacity: 0.6; cursor: wait; transform: none; }
.jm-vocal { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.14); }
.jm-record { width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg, #FF3B4E, #E72535); box-shadow: 0 10px 24px rgba(231, 37, 53, 0.4); transition: all 0.2s ease; font-family: inherit; }
.jm-record:hover { transform: scale(1.05); }
.jm-record.recording { background: #111827; border: 2px solid var(--jmradio-red); color: var(--jmradio-red); animation: jmRecPulse 1.2s infinite; }
@keyframes jmRecPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(231, 37, 53, 0.5); } 50% { box-shadow: 0 0 0 12px rgba(231, 37, 53, 0); } }
.jm-vocal-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.jm-vocal-info b { color: #fff; font-size: 0.95rem; }
.jm-vocal-info span { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.4; }
.jm-waves { display: none; align-items: center; gap: 3px; height: 28px; }
.jm-waves.on { display: flex; }
.jm-waves i { width: 4px; height: 20%; background: var(--jmradio-red); border-radius: 2px; animation: jmWave 0.9s ease-in-out infinite; }
.jm-waves i:nth-child(2) { animation-delay: 0.1s; } .jm-waves i:nth-child(3) { animation-delay: 0.2s; } .jm-waves i:nth-child(4) { animation-delay: 0.3s; } .jm-waves i:nth-child(5) { animation-delay: 0.4s; }
@keyframes jmWave { 0%, 100% { height: 20%; } 50% { height: 100%; } }
.jm-vocal-timer { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--jmradio-red); font-size: 0.9rem; min-width: 42px; text-align: right; }
@media (max-width: 520px) {
    .jm-dedi-tabs button { font-size: 0.74rem; gap: 5px; padding: 9px 4px; }
    .jm-field-row { grid-template-columns: 1fr; gap: 0; }
    .jm-dedi .modal-content { padding: 22px 16px 18px; }
    .jm-dedi-foot { flex-direction: column; align-items: stretch; }
    .jm-btn-primary { justify-content: center; }
}

/* =====================================================================
   PAROLES
   ===================================================================== */
.jm-lyrics { position: fixed; inset: 0; z-index: 10000; background: rgba(3, 6, 14, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.jm-lyrics.active { opacity: 1; pointer-events: auto; }
.jm-lyrics-card { width: 100%; max-width: 640px; max-height: min(82vh, 760px); display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: linear-gradient(170deg, #121a2b 0%, #0a0f1c 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); transform: translateY(16px) scale(0.98); transition: transform 0.3s ease; }
.jm-lyrics.active .jm-lyrics-card { transform: none; }
.jm-lyrics-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.02); }
.jm-lyrics-head img { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.1); background: #0F172A; }
.jm-lyrics-meta { min-width: 0; flex: 1; }
.jm-lyrics-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--gold); background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.25); padding: 3px 8px; border-radius: 999px; margin-bottom: 5px; }
.jm-lyrics-meta h3 { margin: 0; font-size: 1.05rem; font-weight: 900; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-lyrics-meta p { margin: 2px 0 0; font-size: 0.82rem; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-lyrics-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #CBD5E1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.jm-lyrics-close:hover { background: rgba(231, 37, 53, 0.2); color: #fff; border-color: rgba(231, 37, 53, 0.4); }
.jm-lyrics-body { flex: 1; overflow-y: auto; padding: 22px 26px 30px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }
.jm-lyrics-body::-webkit-scrollbar { width: 6px; } .jm-lyrics-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 10px; }
.deezer-lyric-line { font-size: 1.25rem; font-weight: 800; line-height: 1.4; color: rgba(255, 255, 255, 0.42); padding: 6px 0; cursor: pointer; transition: color 0.25s, transform 0.25s; transform-origin: left; }
.deezer-lyric-line:hover { color: rgba(255, 255, 255, 0.75); }
.deezer-lyric-line.active { color: #fff; transform: scale(1.02); }
.jm-lyrics-state { text-align: center; padding: 50px 20px; color: var(--text-secondary); }
.jm-lyrics-state i { font-size: 2.2rem; color: var(--gold); margin-bottom: 14px; display: block; }
.jm-lyrics-state h4 { color: #fff; font-size: 1.15rem; margin: 0 0 6px; }
.jm-lyrics-state p { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.jm-lyrics-foot { padding: 10px 18px; font-size: 0.72rem; color: #64748B; border-top: 1px solid rgba(255, 255, 255, 0.06); text-align: center; }
@media (max-width: 600px) {
    .jm-lyrics { padding: 0; align-items: flex-end; }
    .jm-lyrics-card { max-height: 88vh; border-radius: 22px 22px 0 0; }
    .deezer-lyric-line { font-size: 1.08rem; }
}

/* ---------- Notification (fenêtre showJMModal) : rien à changer, générée par player-common ---------- */

/* ---------- Utilitaires ---------- */
.jm-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Fenêtre « Reste informé » + avis 5 étoiles (bas de l'accueil) ---------- */
.jm-notif { position: fixed; right: 24px; bottom: 112px; z-index: 9993; width: min(380px, calc(100vw - 32px)); padding: 18px; border-radius: 20px; background: rgba(13, 18, 32, 0.97); border: 1px solid rgba(251, 191, 36, 0.3); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; transform: translateY(18px) scale(.98); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.jm-notif.open { opacity: 1; transform: none; pointer-events: auto; }
.jm-notif-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.06); color: #94A3B8; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.jm-notif-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.jm-notif-head { display: flex; gap: 12px; padding-right: 26px; margin-bottom: 14px; }
.jm-notif-head > div b { display: block; color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.25; margin-bottom: 3px; }
.jm-notif-head > div span { display: block; color: #94A3B8; font-size: 0.82rem; line-height: 1.45; }
.jm-notif-ico { width: 42px; height: 42px; flex: none; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #111; background: var(--gradient-gold); box-shadow: 0 8px 18px rgba(251, 191, 36, 0.3); }
.jm-notif-ico.star { background: linear-gradient(135deg, #FDE68A, #F59E0B); }
.jm-notif-ico.ok { background: linear-gradient(135deg, #E72535, #B91C1C); color: #fff; box-shadow: 0 8px 18px rgba(231, 37, 53, 0.35); }
.jm-notif-row { display: flex; gap: 8px; }
.jm-notif-row input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(7, 10, 18, 0.8); color: #fff; font-family: inherit; font-size: 0.92rem; outline: none; }
.jm-notif-row input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18); }
.jm-notif-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--gradient-gold); color: #111; font-family: inherit; font-weight: 800; font-size: 0.86rem; cursor: pointer; white-space: nowrap; transition: filter .2s ease; }
.jm-notif-btn:hover { filter: brightness(1.07); }
.jm-notif-btn:disabled { opacity: .6; cursor: wait; }
.jm-notif-btn.wide { width: 100%; margin-top: 8px; }
.jm-notif-consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 0.74rem; color: #94A3B8; line-height: 1.45; cursor: pointer; }
.jm-notif-consent input { margin-top: 2px; accent-color: #FBBF24; flex: none; }
.jm-notif-consent a { color: var(--gold); }
.jm-notif-msg { min-height: 0; margin-top: 8px; font-size: 0.82rem; font-weight: 700; }
.jm-notif-msg:empty { display: none; }
.jm-notif-msg.err { color: #F87171; }
.jm-notif-msg.ok { color: #34D399; }
.jm-notif-skip { display: block; margin: 8px auto 0; border: 0; background: none; color: #64748B; font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.jm-notif-skip:hover { color: #CBD5E1; }
.jm-stars { display: flex; justify-content: center; gap: 6px; margin: 4px 0 6px; }
.jm-star { width: 48px; height: 48px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: #334155; font-size: 1.55rem; cursor: pointer; transition: transform .15s ease, color .15s ease, background .15s ease; }
.jm-star:hover { transform: scale(1.1); }
.jm-star.on { color: #FBBF24; background: rgba(251, 191, 36, 0.1); text-shadow: 0 0 14px rgba(251, 191, 36, 0.45); }
.jm-stars-label { text-align: center; font-size: 0.8rem; font-weight: 700; color: #CBD5E1; min-height: 1.2em; margin-bottom: 4px; }
.jm-rate-more { margin-top: 8px; }
.jm-rate-more textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(7, 10, 18, 0.8); color: #fff; font-family: inherit; font-size: 0.86rem; resize: vertical; min-height: 58px; outline: none; }
.jm-rate-more textarea:focus { border-color: var(--gold); }
.jm-notif-thanks { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0 4px; }
.jm-notif-thanks b { color: #fff; font-size: 1.05rem; }
.jm-notif-thanks > span:not(.jm-notif-ico) { color: #94A3B8; font-size: 0.84rem; }
.jm-bottom-sentinel { height: 1px; }
@media (max-width: 992px) {
    .jm-notif { left: 16px; right: 16px; width: auto; bottom: calc(150px + env(safe-area-inset-bottom)); padding: 16px; }
    .jm-star { width: 44px; height: 44px; font-size: 1.4rem; }
}
@media (max-width: 380px) { .jm-notif-btn span { display: none; } }

/* Station écoutée autre que JM Radio (ex. JM Classiks) : repère dans le lecteur */


/* ---------- Contenu centré sur les grands écrans (06/10) ---------- */
.main-content > .container { margin-left: auto; margin-right: auto; }

/* ---------- Station en écoute : nom dans l'en-tête mobile ---------- */
html[data-station="classiks"] .mobile-brand-header::after { content: 'JM CLASSIKS'; }

/* =====================================================================
   ACTUS : lecture d'une actu sur le site (fenêtre)
   ===================================================================== */
html.jm-actu-open, html.jm-actu-open body { overflow: hidden; }
.jm-actu { position: fixed; inset: 0; z-index: 10020; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; background: rgba(3, 6, 14, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.jm-actu.active { opacity: 1; pointer-events: auto; }
.jm-actu-card { position: relative; width: min(760px, 100%); margin: auto 0; border-radius: 22px; overflow: hidden; background: #0E1322; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transform: translateY(14px); transition: transform 0.3s ease; outline: none; }
.jm-actu.active .jm-actu-card { transform: none; }
.jm-actu-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform 0.2s ease, background 0.2s ease; }
.jm-actu-close:hover { transform: scale(1.06); background: rgba(0, 0, 0, 0.75); }
.jm-actu-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.jm-actu-media { position: relative; aspect-ratio: 16 / 9; background: #0B0F19; overflow: hidden; }
.jm-actu-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jm-actu-media img.is-logo { object-fit: contain; padding: 14%; }
.jm-actu-body { padding: 22px 28px 26px; display: flex; flex-direction: column; gap: 12px; }
.jm-actu-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jm-actu-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: #fff; background: #E72535; }
.jm-actu-when { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: #94A3B8; }
.jm-actu-body h2 { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 900; line-height: 1.25; color: #fff; }
.jm-actu-text p { margin: 0 0 10px; font-size: 1rem; line-height: 1.7; color: #CBD5E1; }
.jm-actu-text p:last-child { margin-bottom: 0; }
.jm-actu-src { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: #64748B; }
.jm-actu-src i { color: #F97316; }
.jm-actu-more { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.jm-actu-more h3 { margin: 0 0 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #94A3B8; }
.jm-actu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jm-actu-mini { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.03); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; min-width: 0; }
.jm-actu-mini:hover { border-color: rgba(231, 37, 53, 0.45); background: rgba(255, 255, 255, 0.05); }
.jm-actu-mini img { width: 64px; height: 48px; flex-shrink: 0; border-radius: 9px; object-fit: cover; background: #0B0F19; }
.jm-actu-mini span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jm-actu-mini b { font-size: 0.82rem; font-weight: 700; line-height: 1.3; color: #E2E8F0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jm-actu-mini small { font-size: 0.7rem; color: #64748B; }
@media (max-width: 640px) {
    .jm-actu { padding: 0; align-items: stretch; }
    .jm-actu-card { width: 100%; min-height: 100%; margin: 0; border-radius: 0; border: 0; }
    .jm-actu-body { padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); }
    .jm-actu-list { grid-template-columns: 1fr; }
}

/* ---------- Bouton mode clair / sombre (en bas de la barre du menu) ---------- */
.sb-theme { margin: auto 0 0; width: 100%; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px 16px; border: 0; border-top: 1px solid var(--sb-line, rgba(255, 255, 255, 0.06)); background: none; color: #9CA3AF; font: inherit; font-size: 0.62rem; font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer; transition: color 0.2s ease; }
.sb-theme i { width: 46px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1rem; color: var(--gold); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); transition: transform 0.25s ease, background 0.2s ease; }
.sb-theme:hover { color: #fff; }
.sb-theme:hover i { transform: rotate(-18deg); background: rgba(255, 255, 255, 0.09); }
.sb-theme:focus-visible { outline: none; }
.sb-theme:focus-visible i { box-shadow: 0 0 0 2px var(--gold); }
@media (min-width: 993px) and (max-height: 780px) {
    .sb-theme { padding: 8px 4px 10px; gap: 3px; }
    .sb-theme i { height: 28px; }
}
@media (max-width: 992px) {
    .sidebar .sidebar-nav { padding-bottom: 10px; }
    .sb-theme { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Lecteur sur petit téléphone : on garde la place pour le titre (Dédicace reste dans le menu) */
@media (max-width: 430px) {
    .jm-player-right [data-open-dedicace] { display: none !important; }
    .jm-player .btn-kiffe-bar .kiffe-count-val { padding: 1px 6px; min-width: 20px; }
}

/* Dans l'appli Windows : pas de lien pour la télécharger */
html.jm-in-app a[href$="JM-Radio-Windows.exe"] { display: none !important; }