:root{--page-background:#17191B;--panel-background:#30444C;--equalizer-color:#D18A61;--slider-color:#D18A61;--radio-name-color:#F1E9DC;--player-text:#F1E9DC;--player-secondary:#E5C397}
*{box-sizing:border-box}
body{margin:0;padding:24px 16px;background:var(--page-background);color:var(--player-text);font-family:Arial,Helvetica,sans-serif;text-align:center;min-width:240px}
#player-container{position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:540px;margin:0 auto;padding:26px 28px 20px;background:var(--panel-background);border:1px solid #53656D;border-top:2px solid var(--slider-color);border-radius:16px;display:flex;flex-direction:column;align-items:stretch;gap:20px;box-shadow:none}
#player-container::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--player-background-image,none);background-size:390px 390px;background-position:center center;background-repeat:no-repeat;filter:grayscale(1);mix-blend-mode:screen;opacity:.19;pointer-events:none}
#radioName{margin:0;color:var(--radio-name-color);font-size:22px;font-weight:600;line-height:1.3;letter-spacing:.5px;text-wrap:balance;text-shadow:none}
.top-row{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.cover{display:block;width:150px;height:150px;object-fit:contain;background:var(--page-background);border:1px solid #65747A;border-radius:8px;box-shadow:none}
.metadata{width:100%;font-size:15px;line-height:1.6;color:var(--player-text);text-align:center;overflow-wrap:anywhere;text-shadow:none;animation:none}
.onair-blink{display:inline-flex;align-items:center;color:var(--player-secondary);font-size:12px!important;font-weight:600;letter-spacing:1px;text-transform:uppercase;animation:none}
.onair-dot{display:inline-block;width:6px;height:6px;background:var(--slider-color);border-radius:50%;margin-right:7px;box-shadow:none}
.controls{display:flex;align-items:center;justify-content:center;gap:20px;min-height:46px}
.controls img{width:44px;height:44px;object-fit:contain;padding:9px;background:var(--slider-color);border:1px solid transparent;border-radius:9px;cursor:pointer;transition:opacity .15s}
.controls img:hover{opacity:.86}
.controls img:focus-visible{outline:2px solid var(--player-text);outline-offset:4px}
.equalizer{display:flex;align-items:flex-end;width:116px;height:30px;gap:3px}
.bar{flex:1;background:var(--equalizer-color);height:10%;min-height:3px;border-radius:2px 2px 0 0}
.volume-slider{display:block;width:100%;height:5px;margin:2px 0 0;appearance:none;border:0;border-radius:4px;background:var(--slider-color);cursor:pointer}
.volume-slider::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--slider-color);border:2px solid var(--player-text)}
.volume-slider::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--slider-color);border:2px solid var(--player-text)}
.volume-slider:focus-visible{outline:2px solid var(--player-text);outline-offset:6px}
.player-status{min-height:0;margin:0;color:var(--player-secondary);font-size:12px;line-height:1.5}
.player-status:empty{display:none}
@media(max-width:400px){body{padding:14px 10px}#player-container{padding:22px 18px 20px;gap:18px;border-radius:12px}#radioName{font-size:19px}.cover{width:132px;height:132px}.metadata{font-size:14px}.controls{gap:16px}.equalizer{width:100px}}
@media(prefers-reduced-motion:reduce){.controls img{transition:none}}

/* Indicateur de lecture si l’analyseur ne fournit pas de signal. */
.eq-indicator{display:none;align-items:center;justify-content:center;gap:7px;width:100%;color:var(--player-secondary);font-size:11px;line-height:1.3;text-align:left}
.equalizer[data-mode="fallback"] .bar{display:none}
.equalizer[data-mode="fallback"] .eq-indicator{display:flex}
.eq-indicator-dot{width:6px;height:6px;border-radius:50%;background:var(--equalizer-color);flex-shrink:0}
.equalizer.is-playing[data-mode="fallback"] .eq-indicator-dot{animation:eq-playing 1.4s ease-in-out infinite}
@keyframes eq-playing{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.equalizer.is-playing[data-mode="fallback"] .eq-indicator-dot{animation:none}}