:root{
  --jia-accent:#e10600;
  --jia-radius:18px;
  --jia-bg: rgba(255,255,255,0.92);
  --jia-border: rgba(15,23,42,0.10);
  --jia-shadow: 0 18px 45px rgba(2,6,23,0.12);
  --jia-text: #0f172a;
  --jia-muted: rgba(15,23,42,0.65);
}

.jia-player-wrap{
  margin: 0 0 14px 0; /* collé au contenu */
}

.jia-player{
  display:flex;
  gap:12px;
  align-items:stretch;
  padding: 12px;
  border-radius: var(--jia-radius);
  background:
    radial-gradient(1200px 400px at 0% 0%, rgba(225,6,0,0.16), transparent 55%),
    radial-gradient(900px 300px at 100% 0%, rgba(225,6,0,0.10), transparent 55%),
    var(--jia-bg);
  border: 1px solid var(--jia-border);
  box-shadow: var(--jia-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--jia-text);
}

.jia-player.jia-sticky{
  position: sticky;
  top: 10px;
  z-index: 30;
}

.jia-left, .jia-right{
  display:flex;
  gap:10px;
  align-items:center;
}

.jia-left{ flex: 0 0 auto; }

.jia-mid{
  flex: 1 1 auto;
  min-width: 150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 8px;
}

.jia-btn{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.85);
  border-radius: calc(var(--jia-radius) - 6px);
  padding: 10px 12px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 10px 22px rgba(2,6,23,0.08);
  color: var(--jia-text);
}

.jia-btn:hover{ transform: translateY(-1px); border-color: rgba(225,6,0,0.35); }
.jia-btn:active{ transform: translateY(0px); }

.jia-primary{
  background: linear-gradient(135deg, var(--jia-accent), #ff3b30);
  border-color: rgba(225,6,0,0.5);
  color: white;
}

.jia-ico{
  width: 20px;
  height: 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  line-height: 1;
}

.jia-label{ white-space: nowrap; }

.jia-progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.08);
  overflow:hidden;
}

.jia-progress-bar{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jia-accent), #ff3b30);
  width: 0%;
  transition: width .25s ease;
}

.jia-meta{
  display:flex;
  justify-content:space-between;
  font-size: 12px;
  color: var(--jia-muted);
}

.jia-select select{
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.85);
  border-radius: calc(var(--jia-radius) - 8px);
  padding: 10px 10px;
  font-weight: 700;
  color: var(--jia-text);
  box-shadow: 0 10px 22px rgba(2,6,23,0.07);
}

.jia-note{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--jia-radius);
  background: rgba(225,6,0,0.08);
  border: 1px dashed rgba(225,6,0,0.30);
  color: var(--jia-text);
}

.jia-sr{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

@media (max-width: 860px){
  .jia-player{ flex-wrap: wrap; }
  .jia-right{ width: 100%; justify-content: flex-end; }
  .jia-mid{ width: 100%; order: 3; }
  .jia-left{ order: 1; }
}