/* ═══════════════════════════════════════════════════════
   Radio Musique Libre — Footer Player Bar
   Barre fixe en bas de page, style Deezer/Radio Monaco
   Palette chakra conservée (rouge → violet)
═══════════════════════════════════════════════════════ */

/* Décalage du contenu pour ne pas masquer la dernière ligne */
body { padding-bottom: 72px !important; }

/* ── Conteneur principal ── */
#rml-footer-bar,
#rml-footer-bar *,
#rml-footer-bar *::before,
#rml-footer-bar *::after { box-sizing: border-box; }

#rml-footer-bar {
  /* Variables chakra reprises du hero player */
  --rfb-grad: linear-gradient(90deg, #ff0000, #ff8c00, #ffd400, #00c853, #00b8d4, #3d5afe, #9c27b0);
  --rfb-grad135: linear-gradient(135deg, #ff0000, #ff8c00, #ffd400, #00c853, #00b8d4, #3d5afe, #9c27b0);
  --rfb-bg:   #0d0d14;
  --rfb-text: #ffffff;
  --rfb-muted: rgba(255,255,255,.45);
  --rfb-border: rgba(255,255,255,.09);

  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 68px;
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;

  background: var(--rfb-bg);
  border-top: 1px solid var(--rfb-border);
  box-shadow: 0 -6px 30px rgba(0,0,0,.45);
  font-family: 'DM Sans', sans-serif;
}

/* ── Séparateur décoratif chakra au-dessus ── */
#rml-footer-bar::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--rfb-grad);
  opacity: .75;
}

/* Reset boutons */
#rml-footer-bar button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
#rml-footer-bar svg { display: block; }

/* ── Logo + live ── */
#rml-footer-bar .rml-fb-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

#rml-footer-bar .rml-fb-logo {
  font-family: 'Syne', sans-serif;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--rfb-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

#rml-footer-bar .rml-fb-live {
  display: flex;
  align-items: center;
}

#rml-footer-bar .rml-fb-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff3333;
  flex-shrink: 0;
  animation: rfb-pulse 1.5s ease-in-out infinite;
}
@keyframes rfb-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.5); }
}

/* ── Pochette ── */
#rml-footer-bar .rml-fb-artwork {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--rfb-border);
  background: linear-gradient(135deg, #1a0033, #001a30);
  transition: opacity .4s;
}
#rml-footer-bar .rml-fb-artwork.loading { opacity: .3; }

/* ── Info titre/artiste ── */
#rml-footer-bar .rml-fb-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

#rml-footer-bar .rml-fb-artist {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--rfb-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

#rml-footer-bar .rml-fb-title {
  font-family: 'Syne', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  color: var(--rfb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  transition: opacity .35s;
}
#rml-footer-bar .rml-fb-title.updating { opacity: .15; }

/* ── Bouton play/pause ── */
#rml-footer-bar .rml-fb-play-btn {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  padding: 0;
  background: var(--rfb-grad135);
  border: 2px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, box-shadow .3s;
  box-shadow: 0 4px 18px rgba(255,0,0,.28);
  animation: rfb-btnPulse 2.5s ease-in-out infinite;
}
#rml-footer-bar .rml-fb-play-btn.paused {
  animation: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
@keyframes rfb-btnPulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(255,0,0,.4), 0 4px 18px rgba(255,0,0,.28); }
  50%      { box-shadow: 0 0 0 10px rgba(255,0,0,.0), 0 4px 18px rgba(255,0,0,.28); }
}
#rml-footer-bar .rml-fb-play-btn:hover  { transform: scale(1.08); }
#rml-footer-bar .rml-fb-play-btn:active { transform: scale(.92); }

#rml-footer-bar .rml-fb-play-btn svg {
  width: 20px; height: 20px;
  fill: #ffffff;
  flex-shrink: 0;
}

/* ── Volume ── */
#rml-footer-bar .rml-fb-vol {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

#rml-footer-bar .rml-fb-vol-icon {
  font-size: .82rem;
  color: var(--rfb-muted);
  flex-shrink: 0;
}

#rml-footer-bar input[type=range].rml-fb-slider {
  width: 88px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 2px;
  background: var(--rfb-grad);
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}
#rml-footer-bar input[type=range].rml-fb-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--rfb-bg);
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,.4);
}
#rml-footer-bar input[type=range].rml-fb-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--rfb-bg);
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,.4);
}
#rml-footer-bar input[type=range].rml-fb-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--rfb-grad);
  border: none;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #rml-footer-bar .rml-fb-brand { display: none; }
  #rml-footer-bar { padding: 0 12px; gap: 10px; }
  #rml-footer-bar input[type=range].rml-fb-slider { width: 60px; }
}
@media (max-width: 400px) {
  #rml-footer-bar .rml-fb-vol { display: none; }
}