html.skyvox-radio-page-html,
body.skyvox-radio-page-body{margin:0!important;padding:0!important;background:#01162e!important;overflow-x:hidden!important}
body.skyvox-radio-page-body .skyvox-edge-host,
body.skyvox-radio-page-body .skyvox-edge-host-root{max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;background:transparent!important;border:0!important;box-shadow:none!important}

.skyvox-player,.skyvox-player *{box-sizing:border-box}
.skyvox-player{
  --skyvox-accent:#38c9ff;
  position:relative;
  left:50%;right:50%;
  width:100vw!important;max-width:100vw!important;
  margin-left:-50vw!important;margin-right:-50vw!important;
  margin-top:0!important;margin-bottom:0!important;
  overflow:hidden;
  color:#fff;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  background:#01162e;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.skyvox-player__inner{
  position:relative;
  width:100%;
  aspect-ratio:1672/941;
  min-height:0;
  overflow:hidden;
  background:#01162e;
}
.skyvox-player__reference{position:absolute;inset:0;z-index:0;pointer-events:none;line-height:0;background:#01162e}
.skyvox-player__reference img{display:block;width:100%;height:100%;object-fit:fill;max-width:none!important;border:0!important;margin:0!important;padding:0!important}

/* Zone cliquable au-dessus du bouton "Écouter en direct" déjà présent dans le visuel de référence. */
.skyvox-player__approved-listen{
  position:absolute;z-index:5;
  left:79.3%;top:1.8%;width:12.7%;height:5.7%;
  appearance:none;border:0;background:transparent;border-radius:999px;cursor:pointer;
  opacity:.001;padding:0;margin:0;
}
.skyvox-player__approved-listen:focus-visible{opacity:1;outline:3px solid #67ddff;outline-offset:2px;background:rgba(49,199,255,.12)}

/* Le visuel de référence fournit exactement les deux cartes. Le code vivant ne repeint que la zone de métadonnées,
   afin de conserver le titre, l'artiste et la progression réels sans doubler les bordures de la maquette. */
.skyvox-player__main{
  position:absolute;z-index:3;
  left:6.82%;top:70.99%;width:85.05%;height:16.05%;
  display:grid;grid-template-columns:minmax(0,1.263fr) minmax(0,1fr);gap:1.34%;
  align-items:stretch;pointer-events:none;
}
.skyvox-player__now,.skyvox-player__controls{
  position:relative;min-width:0;height:100%;
  border:0!important;border-radius:21px;background:transparent!important;box-shadow:none!important;
}
.skyvox-player__now{pointer-events:none}
.skyvox-player__now:before{
  content:"";position:absolute;z-index:1;
  left:19.9%;top:7.2%;right:1.5%;bottom:8.8%;
  background:url("../images/skyvox-meta-clean.png") center/100% 100% no-repeat;
  pointer-events:none;
}
.skyvox-player__art{
  position:absolute;z-index:2;left:3.83%;top:11.9%;width:14.7%;height:76.2%;
  border-radius:16px;overflow:hidden;background:transparent;box-shadow:none;
}
.skyvox-player__art:after{display:none!important}
.skyvox-player__art img{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px}
.skyvox-player__meta{position:absolute;z-index:3;left:22.2%;right:3.7%;top:15.2%;bottom:11.5%;min-width:0;padding:0}
.skyvox-player__meta small{display:block;text-transform:uppercase;letter-spacing:.13em;color:#b4cad8;font-size:10px;line-height:1.15;font-weight:800;margin:0 0 7px}
.skyvox-player__meta strong,.skyvox-player__meta>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.skyvox-player__meta strong{font-size:29px;line-height:1.02;font-weight:770;color:#fff;letter-spacing:-.025em;margin:0}
.skyvox-player__meta>span{font-size:16px;line-height:1.2;color:#d8e5ed;margin-top:6px}
.skyvox-player__progress{position:absolute!important;left:0;right:0;bottom:0;height:24px;margin:0!important;display:block!important}
.skyvox-player__progress-times{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;color:#e4edf3;font-size:15px;line-height:1;font-variant-numeric:tabular-nums;pointer-events:none}
.skyvox-player__progress-bar{position:absolute;left:49px;right:49px;top:9px;height:5px;border-radius:999px;overflow:hidden;background:rgba(93,149,182,.46);box-shadow:inset 0 0 0 1px rgba(119,190,224,.10)}
.skyvox-player__progress-bar span{display:block;width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#35cfff,#3ab9ef);box-shadow:0 0 10px rgba(53,203,255,.26)}

/* Les contrôles réels sont des zones interactives exactement superposées aux contrôles visibles de la maquette. */
.skyvox-player__controls{pointer-events:none}
.skyvox-player__play{
  position:absolute;left:8.0%;top:21.8%;width:13.55%;height:56.5%;
  appearance:none;border:0;border-radius:50%;padding:0;margin:0;background:transparent!important;
  color:transparent!important;box-shadow:none!important;cursor:pointer;opacity:.001;pointer-events:auto;
}
.skyvox-player__play span{visibility:hidden!important}.skyvox-player__play [data-skyvox-play-label]{display:none!important}
.skyvox-player__play:focus-visible{opacity:1;outline:3px solid #67ddff;outline-offset:3px;background:rgba(49,199,255,.08)!important}
.skyvox-player__volume{display:contents}
.skyvox-player__mute{
  position:absolute;left:26.3%;top:32.2%;width:8.1%;height:33.7%;
  appearance:none;border:0;border-radius:50%;padding:0;margin:0;background:transparent!important;color:transparent!important;
  opacity:.001;cursor:pointer;pointer-events:auto;
}
.skyvox-player__mute span{visibility:hidden!important}
.skyvox-player__mute:focus-visible{opacity:1;outline:2px solid #67ddff;outline-offset:2px}
.skyvox-player__volume label{position:absolute!important;left:39.7%;top:43%;width:42.6%!important;height:18%;margin:0!important;padding:0!important;pointer-events:auto}
.skyvox-player__volume input{display:block;width:100%!important;height:100%!important;margin:0!important;padding:0!important;opacity:.001;cursor:pointer;appearance:none;-webkit-appearance:none;background:transparent}
.skyvox-player__volume-value{position:absolute;right:5.2%;top:45%;font-size:0;color:transparent;opacity:0;pointer-events:none}

.skyvox-player__status,.skyvox-player .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Sur tablette/mobile, on conserve l'identité exacte et les commandes restent superposées à l'image mise à l'échelle. */
@media(max-width:1000px){
  .skyvox-player__inner{aspect-ratio:1672/941;min-height:0;padding:0;background:#01162e}
  .skyvox-player__reference{position:absolute;inset:0;width:100%;height:100%}
  .skyvox-player__reference img{width:100%;height:100%;object-fit:fill}
  .skyvox-player__main{position:absolute;left:6.82%;top:70.99%;width:85.05%;height:16.05%;display:grid;grid-template-columns:minmax(0,1.263fr) minmax(0,1fr);gap:1.34%;margin:0}
  .skyvox-player__meta small{font-size:clamp(5px,1vw,10px);margin-bottom:clamp(2px,.6vw,7px)}
  .skyvox-player__meta strong{font-size:clamp(10px,2.4vw,29px)}
  .skyvox-player__meta>span{font-size:clamp(7px,1.3vw,16px);margin-top:clamp(2px,.45vw,6px)}
  .skyvox-player__progress{height:clamp(10px,2vw,24px)}
  .skyvox-player__progress-times{font-size:clamp(6px,1.2vw,15px)}
  .skyvox-player__progress-bar{left:8%;right:8%;top:42%;height:clamp(2px,.45vw,5px)}
}
@media(max-width:650px){
  .skyvox-player__meta small{letter-spacing:.08em}
}

/* ===== Animations premium 1.4.4 : superposition non destructive sur la maquette ===== */
.skyvox-player__fx{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
}
.skyvox-player__fx-horizon{
  position:absolute;left:10.5%;top:43.5%;width:78.5%;height:28%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 78%,rgba(78,213,255,.27) 0%,rgba(18,146,244,.12) 28%,rgba(0,96,210,.045) 49%,transparent 70%),
    linear-gradient(180deg,transparent 42%,rgba(82,222,255,.13) 52%,transparent 66%);
  filter:blur(8px);mix-blend-mode:screen;opacity:.42;
  transform-origin:50% 78%;
  animation:skyvoxHorizonPulse 5.8s ease-in-out infinite;
}
.skyvox-player__fx-onair{
  position:absolute;left:73.7%;top:7.8%;width:13.8%;height:13.2%;
  border-radius:32px;
  background:radial-gradient(ellipse at center,rgba(27,193,255,.20),rgba(0,123,255,.05) 48%,transparent 72%);
  filter:blur(6px);mix-blend-mode:screen;opacity:.35;
  animation:skyvoxOnAirPulse 3.8s ease-in-out infinite;
}
.skyvox-player__fx-title{
  position:absolute;left:56.25%;top:23.0%;width:3.6%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle,rgba(255,255,255,.98) 0 3%,rgba(115,229,255,.88) 8%,rgba(33,176,255,.34) 22%,transparent 54%),
    linear-gradient(90deg,transparent 47%,rgba(255,255,255,.72) 49.5% 50.5%,transparent 53%),
    linear-gradient(0deg,transparent 47%,rgba(255,255,255,.72) 49.5% 50.5%,transparent 53%);
  filter:drop-shadow(0 0 9px rgba(72,203,255,.8));
  opacity:.28;
  animation:skyvoxTitleSpark 4.9s ease-in-out infinite;
}
.skyvox-player__routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;mix-blend-mode:screen;opacity:.42}
.skyvox-player__routes path{
  fill:none;stroke:rgba(111,224,255,.82);stroke-width:1.1;stroke-linecap:round;
  stroke-dasharray:2 15;stroke-dashoffset:0;
  filter:drop-shadow(0 0 3px rgba(52,197,255,.70));
  animation:skyvoxRouteFlow 6.6s linear infinite;
}
.skyvox-player__routes path:nth-child(2){animation-duration:7.7s;animation-delay:-2.2s;opacity:.78}
.skyvox-player__routes path:nth-child(3){animation-duration:5.9s;animation-delay:-4.1s;opacity:.92}
.skyvox-player__routes path:nth-child(4){animation-duration:8.4s;animation-delay:-1.6s;opacity:.72}
.skyvox-player__routes path:nth-child(5){animation-duration:6.9s;animation-delay:-3.5s;opacity:.84}
.skyvox-player__routes path:nth-child(6){animation-duration:7.3s;animation-delay:-5.0s;opacity:.68}
.skyvox-player__city-lights{position:absolute;inset:0}
.skyvox-player__city-lights i{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;
  background:#fff;opacity:.35;transform:translate(-50%,-50%) scale(.55);
  box-shadow:0 0 3px 1px rgba(255,255,255,.9),0 0 8px 2px rgba(78,205,255,.85),0 0 16px 4px rgba(25,147,255,.35);
  animation:skyvoxCityTwinkle var(--d) ease-in-out infinite var(--delay);
}
.skyvox-player__edge-particles{position:absolute;top:31%;bottom:2%;width:15%;opacity:.18;filter:blur(.15px)}
.skyvox-player__edge-particles--left{left:-5%;background:radial-gradient(circle at 70% 55%,rgba(59,199,255,.5) 0 1px,transparent 1.7px) 0 0/19px 22px;transform:rotate(-11deg);animation:skyvoxParticleDrift 13s ease-in-out infinite}
.skyvox-player__edge-particles--right{right:-5%;background:radial-gradient(circle at 30% 55%,rgba(59,199,255,.46) 0 1px,transparent 1.7px) 0 0/21px 24px;transform:rotate(11deg);animation:skyvoxParticleDriftR 14.5s ease-in-out infinite}

/* Lorsque la radio joue, les animations gagnent légèrement en présence sans devenir agressives. */
.skyvox-player.is-playing .skyvox-player__fx-horizon{opacity:.58;animation-duration:4.3s}
.skyvox-player.is-playing .skyvox-player__routes{opacity:.54}
.skyvox-player.is-playing .skyvox-player__city-lights i{box-shadow:0 0 4px 1px rgba(255,255,255,.95),0 0 10px 3px rgba(78,205,255,.95),0 0 20px 5px rgba(25,147,255,.42)}
.skyvox-player.is-playing .skyvox-player__fx-onair{opacity:.55;animation-duration:2.9s}

@keyframes skyvoxCityTwinkle{
  0%,100%{opacity:.18;transform:translate(-50%,-50%) scale(.48)}
  38%{opacity:.82;transform:translate(-50%,-50%) scale(1.15)}
  52%{opacity:.42;transform:translate(-50%,-50%) scale(.72)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1.38)}
}
@keyframes skyvoxRouteFlow{to{stroke-dashoffset:-68}}
@keyframes skyvoxHorizonPulse{
  0%,100%{opacity:.34;transform:scale(1)}
  50%{opacity:.58;transform:scale(1.025,1.05)}
}
@keyframes skyvoxOnAirPulse{
  0%,100%{opacity:.22;transform:scale(.96)}
  48%{opacity:.54;transform:scale(1.045)}
}
@keyframes skyvoxTitleSpark{
  0%,76%,100%{opacity:.18;transform:translate(-50%,-50%) scale(.7) rotate(0deg)}
  83%{opacity:.9;transform:translate(-50%,-50%) scale(1.22) rotate(18deg)}
  90%{opacity:.28;transform:translate(-50%,-50%) scale(.82) rotate(34deg)}
}
@keyframes skyvoxParticleDrift{
  0%,100%{transform:translate3d(0,0,0) rotate(-11deg);opacity:.12}
  50%{transform:translate3d(12px,-8px,0) rotate(-9deg);opacity:.24}
}
@keyframes skyvoxParticleDriftR{
  0%,100%{transform:translate3d(0,0,0) rotate(11deg);opacity:.12}
  50%{transform:translate3d(-12px,-10px,0) rotate(9deg);opacity:.23}
}

@media (prefers-reduced-motion:reduce){
  .skyvox-player__fx-horizon,.skyvox-player__fx-onair,.skyvox-player__fx-title,
  .skyvox-player__routes path,.skyvox-player__city-lights i,
  .skyvox-player__edge-particles{animation:none!important}
  .skyvox-player__city-lights i{opacity:.46;transform:translate(-50%,-50%) scale(.8)}
}

/* ===== 1.4.6 : battement recentré exactement sur le symbole existant + étoiles subtiles ===== */
.skyvox-player{
  --skyvox-heartbeat-duration:1.36s;
}

/*
 * Le symbole animé est calé sur le centre mesuré du symbole imprimé dans
 * skyvox-reference-page.png (≈ x 953 / y 270 sur 1672×941).
 * Sa largeur/hauteur reprend l'espacement réel des 7 barres afin qu'il se
 * superpose au symbole d'origine au lieu de former un second pictogramme décalé.
 */
.skyvox-player__heartbeat{
  position:absolute;
  left:57.00%;top:28.69%;
  width:3.45%;height:5.89%;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;gap:4.8%;
  opacity:.36;mix-blend-mode:screen;
  filter:drop-shadow(0 0 3px rgba(97,230,255,.56));
  transform-origin:50% 50%;
  animation:skyvoxHeartbeatShell var(--skyvox-heartbeat-duration) cubic-bezier(.23,.72,.32,1) infinite;
  z-index:2;
}
.skyvox-player__heartbeat:before{
  content:"";position:absolute;inset:-24%;border-radius:50%;
  border:1px solid rgba(105,225,255,.22);
  box-shadow:0 0 8px rgba(61,202,255,.22),inset 0 0 6px rgba(105,225,255,.10);
  opacity:.12;transform:scale(.90);
  animation:skyvoxHeartbeatRing var(--skyvox-heartbeat-duration) ease-out infinite;
}
.skyvox-player__heartbeat i{
  display:block;width:8.4%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0 24%,rgba(191,247,255,.62) 42%,rgba(83,220,255,.58) 100%);
  box-shadow:0 0 3px rgba(255,255,255,.45),0 0 6px rgba(73,215,255,.38);
  transform-origin:50% 50%;
  animation:skyvoxHeartbeatBars var(--skyvox-heartbeat-duration) cubic-bezier(.22,.7,.25,1) infinite;
}
.skyvox-player__heartbeat i:nth-child(1),.skyvox-player__heartbeat i:nth-child(7){height:20%;animation-delay:-.02s}
.skyvox-player__heartbeat i:nth-child(2),.skyvox-player__heartbeat i:nth-child(6){height:43%;animation-delay:-.04s}
.skyvox-player__heartbeat i:nth-child(3),.skyvox-player__heartbeat i:nth-child(5){height:68%;animation-delay:-.06s}
.skyvox-player__heartbeat i:nth-child(4){height:92%;animation-delay:-.08s}

/* Étoiles : petit noyau lumineux + rayons courts, pas de longues lignes. */
.skyvox-player__star{
  position:absolute;z-index:4;pointer-events:none;
  width:2.25%;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.72);
  opacity:.06;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.98) 0 5%,rgba(203,249,255,.9) 7%,rgba(86,215,255,.46) 17%,rgba(34,157,255,.12) 31%,transparent 52%);
  filter:drop-shadow(0 0 4px rgba(116,226,255,.5)) drop-shadow(0 0 9px rgba(31,149,255,.25));
  will-change:transform,opacity,filter;
}
.skyvox-player__star:before,.skyvox-player__star:after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(229,251,255,.12) 18%,rgba(255,255,255,.82) 50%,rgba(229,251,255,.12) 82%,transparent);
  filter:blur(.2px);
}
.skyvox-player__star:before{width:50%;height:1px}
.skyvox-player__star:after{width:1px;height:50%;background:linear-gradient(180deg,transparent,rgba(229,251,255,.10) 18%,rgba(255,255,255,.76) 50%,rgba(229,251,255,.10) 82%,transparent)}
.skyvox-player__star--badge{
  left:14.78%;top:16.55%;
  animation:skyvoxStarBadge 6.4s ease-in-out infinite;
}
.skyvox-player__star--wordmark{
  left:58.22%;top:23.38%;width:1.95%;
  animation:skyvoxStarWordmark 5.3s ease-in-out infinite -1.7s;
}

.skyvox-player.is-playing .skyvox-player__heartbeat{opacity:.48;filter:drop-shadow(0 0 4px rgba(125,238,255,.68)) drop-shadow(0 0 8px rgba(34,171,255,.24))}
.skyvox-player.is-playing .skyvox-player__star--badge{animation-duration:5.7s}
.skyvox-player.is-playing .skyvox-player__star--wordmark{animation-duration:4.7s}

@keyframes skyvoxHeartbeatShell{
  0%,18%,100%{transform:translate(-50%,-50%) scale(1)}
  6%{transform:translate(-50%,-50%) scale(1.025)}
  11%{transform:translate(-50%,-50%) scale(.995)}
  14%{transform:translate(-50%,-50%) scale(1.014)}
  17%{transform:translate(-50%,-50%) scale(1)}
}
@keyframes skyvoxHeartbeatRing{
  0%,3%{opacity:.03;transform:scale(.88)}
  9%{opacity:.30;transform:scale(1.02)}
  18%{opacity:0;transform:scale(1.22)}
  100%{opacity:0;transform:scale(1.22)}
}
@keyframes skyvoxHeartbeatBars{
  0%,19%,100%{transform:scaleY(1);filter:brightness(1)}
  6%{transform:scaleY(1.14);filter:brightness(1.16)}
  11%{transform:scaleY(.96);filter:brightness(1.02)}
  14%{transform:scaleY(1.08);filter:brightness(1.10)}
  18%{transform:scaleY(1);filter:brightness(1)}
}
@keyframes skyvoxStarBadge{
  0%,62%,100%{opacity:.035;transform:translate(-50%,-50%) scale(.66);filter:drop-shadow(0 0 3px rgba(92,220,255,.24))}
  68%{opacity:.20;transform:translate(-50%,-50%) scale(.82)}
  72%{opacity:.66;transform:translate(-50%,-50%) scale(1.02);filter:drop-shadow(0 0 5px rgba(255,255,255,.62)) drop-shadow(0 0 10px rgba(54,188,255,.42))}
  76%{opacity:.15;transform:translate(-50%,-50%) scale(.78)}
  81%{opacity:.38;transform:translate(-50%,-50%) scale(.90)}
  87%{opacity:.035;transform:translate(-50%,-50%) scale(.66)}
}
@keyframes skyvoxStarWordmark{
  0%,53%,100%{opacity:.04;transform:translate(-50%,-50%) scale(.65)}
  59%{opacity:.22;transform:translate(-50%,-50%) scale(.82)}
  63%{opacity:.72;transform:translate(-50%,-50%) scale(1.04);filter:drop-shadow(0 0 5px rgba(255,255,255,.68)) drop-shadow(0 0 10px rgba(45,190,255,.45))}
  67%{opacity:.14;transform:translate(-50%,-50%) scale(.76)}
  72%{opacity:.42;transform:translate(-50%,-50%) scale(.91)}
  79%{opacity:.04;transform:translate(-50%,-50%) scale(.65)}
}

@media (prefers-reduced-motion:reduce){
  .skyvox-player__heartbeat,.skyvox-player__heartbeat:before,.skyvox-player__heartbeat i,
  .skyvox-player__star{animation:none!important}
  .skyvox-player__heartbeat{opacity:.28}
  .skyvox-player__star{opacity:.10;transform:translate(-50%,-50%) scale(.72)}
}
/* 1.4.6 conserve l'éclat spécifique du O et désactive l'ancien éclat générique. */
.skyvox-player__fx-title{display:none!important}