html.skyvox-radio-page-html,
body.skyvox-radio-page-body{margin:0!important;padding:0!important;background:#01162e!important;overflow-x:hidden!important}
html.skyvox-iphone-portrait-active,
body.skyvox-iphone-portrait-active{width:100%!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:0!important;overflow:hidden!important;background-color:#00142b!important;background-image:url("../images/skyvox-iphone-portrait-bg.jpg")!important;background-position:center bottom!important;background-size:cover!important;background-repeat:no-repeat!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}
/* ===== 2.0.3 : présentation dédiée iPhone portrait =====
Activation par JS uniquement sur iPhone/iPod <= 480 px en portrait.
Les autres appareils conservent strictement la présentation historique. */
.skyvox-player__iphone-copy,
.skyvox-player__iphone-station{display:none}
.skyvox-player.skyvox-iphone-portrait{
position:fixed!important;
inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;
width:100vw!important;max-width:none!important;height:100dvh!important;min-height:100svh!important;
margin:0!important;padding:0!important;
z-index:2147480000!important;
overflow:hidden!important;
background:#00142b!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__inner{
position:absolute!important;inset:0!important;
width:100vw!important;height:100dvh!important;min-height:100svh!important;aspect-ratio:auto!important;
overflow:hidden!important;
background-image:
linear-gradient(180deg,rgba(0,19,43,.18) 0%,rgba(0,20,45,.22) 42%,rgba(0,14,33,.38) 79%,rgba(0,10,25,.48) 100%),
url("../images/skyvox-iphone-portrait-bg.jpg")!important;
background-position:center top!important, center bottom!important;
background-size:auto auto!important, cover!important;
background-repeat:no-repeat!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__inner:before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
radial-gradient(circle at 50% 23%,rgba(16,94,156,.08),transparent 38%),
linear-gradient(180deg,rgba(0,10,27,.10),transparent 28%,rgba(0,13,31,.05) 54%,rgba(0,10,25,.16) 100%);
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__reference{
position:absolute;z-index:3;left:50%;top:calc(env(safe-area-inset-top,0px) + 24px);
transform:translateX(-50%);width:clamp(154px,43vw,196px);height:clamp(154px,43vw,196px);
inset-block-end:auto;right:auto;pointer-events:none;background:url("../images/skyvox-logo-white.png") center/contain no-repeat;
filter:drop-shadow(0 3px 12px rgba(0,0,0,.34));
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__reference img{display:none!important}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__fx,
.skyvox-player.skyvox-iphone-portrait .skyvox-player__approved-listen{display:none!important}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-copy{
display:block;position:absolute;z-index:4;left:5vw;right:5vw;
top:calc(env(safe-area-inset-top,0px) + 24px + clamp(154px,43vw,196px) + 8px);
text-align:center;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.48);pointer-events:none;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-kicker{
font-size:clamp(11px,3vw,14px);font-weight:750;letter-spacing:.24em;line-height:1.2;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-slogan{
margin-top:8px;font-family:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;
font-size:clamp(22px,6.6vw,31px);line-height:1.05;font-weight:500;letter-spacing:.01em;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__main{
position:absolute;z-index:5;left:6vw;right:6vw;top:42svh;width:auto;height:auto;
display:flex!important;flex-direction:column;gap:14px;align-items:stretch;pointer-events:none;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
order:1;height:190px;min-height:190px;width:100%;position:relative;overflow:visible;pointer-events:none;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__play{
position:absolute!important;z-index:7;left:50%!important;top:0!important;transform:translateX(-50%);
width:94px!important;height:94px!important;border:3px solid rgba(255,255,255,.96)!important;border-radius:50%!important;
background:rgba(1,25,53,.80)!important;color:#fff!important;opacity:1!important;pointer-events:auto!important;
box-shadow:0 10px 34px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.13)!important;
transition:background .18s ease,box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__play span:first-child{
visibility:visible!important;display:block!important;color:#fff!important;font-size:38px!important;line-height:88px!important;
transform:translateX(3px);font-family:Arial,sans-serif;font-weight:800;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__play.is-playing,
.skyvox-player.skyvox-iphone-portrait.is-playing .skyvox-player__play{
background:#20c95a!important;border-color:#82ffa5!important;
box-shadow:0 0 0 12px rgba(32,201,90,.15),0 0 32px rgba(32,255,101,.72),0 12px 34px rgba(0,0,0,.38)!important;
}
.skyvox-player.skyvox-iphone-portrait.is-playing .skyvox-player__play span:first-child{
transform:none;font-size:31px!important;letter-spacing:-4px;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__play:active{transform:translateX(-50%) scale(.96)}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{
display:block;position:absolute;z-index:6;left:6vw;right:6vw;top:calc(42svh + 103px);
text-align:center;color:#fff;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.50);
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station strong{
display:block;font-size:clamp(22px,6vw,27px);line-height:1.08;font-weight:800;letter-spacing:-.025em;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station span{
display:block;margin-top:5px;font-size:clamp(11px,3.1vw,14px);line-height:1.25;font-weight:550;letter-spacing:.015em;color:#f0f6fb;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{display:block!important;position:absolute;left:0;right:0;top:148px;height:38px;pointer-events:none}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__mute{
left:0!important;top:2px!important;width:34px!important;height:34px!important;opacity:1!important;background:rgba(0,19,42,.64)!important;
color:#fff!important;border:1px solid rgba(255,255,255,.24)!important;pointer-events:auto!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__mute span{visibility:visible!important;display:block!important;font-size:16px;line-height:32px}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume label{
position:absolute!important;left:44px!important;right:48px!important;top:4px!important;width:auto!important;height:30px!important;pointer-events:auto!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume input{
width:100%!important;height:30px!important;opacity:1!important;appearance:none!important;-webkit-appearance:none!important;background:transparent!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume input::-webkit-slider-runnable-track{
height:5px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(209,233,246,.82));box-shadow:0 0 0 1px rgba(0,0,0,.16);
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume input::-webkit-slider-thumb{
-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:0;margin-top:-8.5px;box-shadow:0 2px 10px rgba(0,0,0,.40);
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume input::-moz-range-track{height:5px;border-radius:999px;background:#fff}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume input::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume-value{
right:0!important;top:9px!important;opacity:1!important;color:#fff!important;font-size:12px!important;line-height:1!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__now{
order:2;position:relative!important;left:auto!important;top:auto!important;width:100%;height:104px!important;min-height:104px;
border:1px solid rgba(121,196,239,.28)!important;border-radius:18px!important;
background:linear-gradient(135deg,rgba(4,42,77,.80),rgba(1,25,52,.72))!important;
box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important;
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__now:before{display:none!important}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__art{
left:10px!important;top:10px!important;width:84px!important;height:84px!important;border-radius:14px!important;
background:rgba(0,18,39,.62)!important;border:1px solid rgba(255,255,255,.14);overflow:hidden;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__art img{border-radius:13px!important}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__meta{
left:108px!important;right:13px!important;top:14px!important;bottom:10px!important;padding:0!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__meta small{
font-size:9px!important;line-height:1.1!important;letter-spacing:.14em!important;color:#73e7ff!important;margin:0 0 5px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__meta strong{
font-size:17px!important;line-height:1.1!important;font-weight:800!important;color:#fff!important;letter-spacing:-.01em!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__meta>span{
font-size:13px!important;line-height:1.15!important;color:#dbe9f2!important;margin-top:4px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__progress{
left:0!important;right:0!important;bottom:0!important;height:19px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__progress-times{font-size:9px!important;color:#cfe2ed!important}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__progress-bar{left:30px!important;right:30px!important;top:7px!important;height:3px!important}
@media (max-height:720px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__reference{width:140px;height:140px;top:calc(env(safe-area-inset-top,0px) + 12px)}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-copy{top:calc(env(safe-area-inset-top,0px) + 160px)}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-slogan{font-size:22px;margin-top:5px}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__main{top:36svh}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{top:calc(36svh + 101px)}
}
/* ===== 2.0.4 : finition premium iPhone portrait (logo + commandes) ===== */
.skyvox-player.skyvox-iphone-portrait .skyvox-player__reference{
width:clamp(162px,45vw,202px)!important;
height:clamp(162px,45vw,202px)!important;
background-image:url("../images/skyvox-logo-white.png")!important;
background-position:center!important;
background-size:contain!important;
background-repeat:no-repeat!important;
filter:drop-shadow(0 4px 14px rgba(0,0,0,.42)) drop-shadow(0 0 12px rgba(255,255,255,.10))!important;
}
/* Bouton principal : volume, relief, reflet et profondeur — uniquement iPhone portrait. */
.skyvox-player.skyvox-iphone-portrait .skyvox-player__play{
width:98px!important;
height:98px!important;
border:1px solid rgba(255,255,255,.72)!important;
background:
radial-gradient(circle at 36% 24%,rgba(255,255,255,.30) 0%,rgba(255,255,255,.08) 26%,transparent 47%),
linear-gradient(145deg,rgba(27,78,123,.98) 0%,rgba(6,43,80,.98) 48%,rgba(1,22,48,.99) 100%)!important;
box-shadow:
0 14px 30px rgba(0,0,0,.48),
0 4px 10px rgba(0,0,0,.30),
inset 0 2px 0 rgba(255,255,255,.30),
inset 0 -8px 18px rgba(0,8,25,.48),
inset 0 0 0 7px rgba(255,255,255,.035),
0 0 0 5px rgba(1,20,44,.30)!important;
-webkit-backdrop-filter:blur(14px) saturate(125%);
backdrop-filter:blur(14px) saturate(125%);
overflow:visible!important;
isolation:isolate;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__play::after{
content:"";
position:absolute;
inset:7px;
border-radius:50%;
z-index:-1;
border:1px solid rgba(255,255,255,.16);
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 48%,rgba(0,0,0,.12));
box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
pointer-events:none;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__play span:first-child{
visibility:hidden!important;
display:block!important;
width:0!important;height:0!important;line-height:0!important;font-size:0!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__play::before{
content:"";
position:absolute;
left:50%;top:50%;
width:0;height:0;
transform:translate(-42%,-50%);
border-top:14px solid transparent;
border-bottom:14px solid transparent;
border-left:22px solid #fff;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.30));
transition:.18s ease;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__play:hover{
box-shadow:
0 16px 34px rgba(0,0,0,.48),
0 5px 12px rgba(0,0,0,.34),
inset 0 2px 0 rgba(255,255,255,.34),
inset 0 -9px 20px rgba(0,8,25,.48),
inset 0 0 0 7px rgba(255,255,255,.045),
0 0 0 5px rgba(1,20,44,.34),
0 0 24px rgba(57,189,248,.18)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__play:active{
transform:translateX(-50%) translateY(2px) scale(.975)!important;
box-shadow:
0 7px 16px rgba(0,0,0,.42),
inset 0 3px 10px rgba(0,8,25,.52),
inset 0 1px 0 rgba(255,255,255,.20),
0 0 0 4px rgba(1,20,44,.32)!important;
}
/* Lecture active : vert premium, pas un simple disque plat. */
.skyvox-player.skyvox-iphone-portrait .skyvox-player__play.is-playing,
.skyvox-player.skyvox-iphone-portrait.is-playing .skyvox-player__play{
border-color:rgba(199,255,215,.94)!important;
background:
radial-gradient(circle at 35% 23%,rgba(255,255,255,.40) 0%,rgba(255,255,255,.10) 24%,transparent 46%),
linear-gradient(145deg,#32e873 0%,#17bc52 48%,#087c34 100%)!important;
box-shadow:
0 15px 32px rgba(0,0,0,.46),
0 5px 12px rgba(0,0,0,.28),
inset 0 2px 0 rgba(255,255,255,.40),
inset 0 -9px 20px rgba(0,80,31,.36),
inset 0 0 0 7px rgba(255,255,255,.065),
0 0 0 6px rgba(28,211,91,.16),
0 0 26px rgba(31,236,101,.62)!important;
}
.skyvox-player.skyvox-iphone-portrait.is-playing .skyvox-player__play::before{
width:21px;height:29px;
transform:translate(-50%,-50%);
border:0!important;
background:linear-gradient(90deg,#fff 0 7px,transparent 7px 14px,#fff 14px 21px);
border-radius:2px;
filter:drop-shadow(0 2px 3px rgba(0,75,30,.30));
}
/* Commande son : vraie capsule en verre avec relief, sans rendu emoji plat. */
.skyvox-player.skyvox-iphone-portrait .skyvox-player__mute{
width:38px!important;height:38px!important;left:-2px!important;top:0!important;
border:1px solid rgba(255,255,255,.34)!important;
border-radius:12px!important;
background:
radial-gradient(circle at 32% 20%,rgba(255,255,255,.24),transparent 42%),
linear-gradient(145deg,rgba(18,64,103,.94),rgba(2,28,57,.94))!important;
box-shadow:0 7px 15px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -5px 10px rgba(0,8,25,.30)!important;
overflow:hidden;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__mute span{
visibility:hidden!important;font-size:0!important;line-height:0!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__mute::before{
content:"";position:absolute;left:8px;top:12px;width:8px;height:14px;
background:#fff;clip-path:polygon(0 31%,38% 31%,100% 0,100% 100%,38% 69%,0 69%);
filter:drop-shadow(0 1px 2px rgba(0,0,0,.26));
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__mute::after{
content:"";position:absolute;left:18px;top:11px;width:9px;height:16px;
border-right:2px solid rgba(255,255,255,.95);border-radius:0 14px 14px 0;
box-shadow:4px 0 0 -2px rgba(255,255,255,.72);
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__mute[aria-pressed="true"]::after{
left:19px;top:10px;width:14px;height:18px;border:0;border-radius:0;box-shadow:none;
background:linear-gradient(55deg,transparent 43%,#ff7070 44% 55%,transparent 56%);
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__mute:active{
transform:translateY(1px) scale(.97);
box-shadow:0 3px 8px rgba(0,0,0,.30),inset 0 2px 7px rgba(0,7,22,.42)!important;
}
/* Curseur volume avec profondeur et poignée métallique. */
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume input::-webkit-slider-runnable-track{
height:6px!important;
background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(188,219,237,.82))!important;
border:1px solid rgba(0,11,29,.32)!important;
box-shadow:inset 0 1px 2px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.10)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume input::-webkit-slider-thumb{
width:23px!important;height:23px!important;margin-top:-9.5px!important;
background:radial-gradient(circle at 35% 28%,#fff 0%,#f7fbff 42%,#c8d7e3 100%)!important;
border:1px solid rgba(255,255,255,.82)!important;
box-shadow:0 4px 9px rgba(0,0,0,.38),inset 0 1px 0 #fff!important;
}
/* Carte titre : relief plus propre, sans toucher au moteur audio. */
.skyvox-player.skyvox-iphone-portrait .skyvox-player__now{
border:1px solid rgba(142,211,249,.30)!important;
background:linear-gradient(145deg,rgba(8,52,91,.86),rgba(2,29,59,.78))!important;
box-shadow:0 16px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -10px 22px rgba(0,12,31,.18)!important;
}
/* ===== 2.0.5 : commandes volume iPhone réellement utilisables =====
- zones tactiles placées au-dessus des calques visuels ;
- mute piloté via HTMLMediaElement.muted ;
- si WebKit interdit le volume logiciel, aucune fausse glissière : affichage
explicite du volume système iPhone, contrôlé par les boutons physiques. */
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
z-index:20!important;
pointer-events:auto!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{
z-index:24!important;
pointer-events:auto!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__mute{
z-index:27!important;
pointer-events:auto!important;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume label{
z-index:26!important;
pointer-events:auto!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume input{
position:relative;
z-index:27!important;
pointer-events:auto!important;
touch-action:pan-x;
-webkit-tap-highlight-color:transparent;
}
/* Sur iPhone/WebKit sans volume par élément, la sortie reste sous le contrôle
matériel iOS. La zone n'imite plus un slider qui ne peut pas agir sur le son. */
.skyvox-player.skyvox-iphone-portrait.skyvox-system-volume .skyvox-player__volume label{
pointer-events:none!important;
display:flex!important;
align-items:center;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-system-volume .skyvox-player__volume label::after{
content:"VOLUME · BOUTONS iPHONE";
position:absolute;
left:8px;right:8px;top:50%;
transform:translateY(-50%);
color:rgba(255,255,255,.92);
font:700 9px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
letter-spacing:.10em;
text-align:center;
text-shadow:0 1px 3px rgba(0,0,0,.55);
pointer-events:none;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-system-volume .skyvox-player__volume input{
opacity:.22!important;
pointer-events:none!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-system-volume .skyvox-player__volume input::-webkit-slider-thumb{
opacity:0!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-system-volume .skyvox-player__volume-value{
width:58px!important;
right:-4px!important;
top:9px!important;
font-size:8px!important;
font-weight:800!important;
letter-spacing:.06em!important;
text-align:right!important;
color:#fff!important;
opacity:.95!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-system-volume.is-muted .skyvox-player__volume label::after{
content:"SON COUPÉ · APPUYEZ À GAUCHE";
color:#ffd7d7;
}
/* ===== 2.1.0 — Agenda / Événements SKYVOX ===== */
.skyvox-player__events-launcher{
position:absolute;z-index:12;left:0;top:calc(100% + 10px);width:58%;min-height:58px;
display:grid;grid-template-columns:42px minmax(0,1fr) 28px;align-items:center;gap:10px;
padding:9px 12px;border:1px solid rgba(121,205,247,.34);border-radius:16px;
background:linear-gradient(145deg,rgba(8,52,91,.94),rgba(2,27,57,.90));
color:#fff;text-align:left;cursor:pointer;pointer-events:auto;appearance:none;
box-shadow:0 14px 28px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(16,97,146,.12);
-webkit-backdrop-filter:blur(14px) saturate(125%);backdrop-filter:blur(14px) saturate(125%);
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.skyvox-player__events-launcher:hover,.skyvox-player__events-launcher:focus-visible{border-color:rgba(111,226,255,.72);background:linear-gradient(145deg,rgba(10,67,112,.98),rgba(3,34,70,.96));box-shadow:0 16px 32px rgba(0,0,0,.34),0 0 24px rgba(48,198,255,.18),inset 0 1px 0 rgba(255,255,255,.14);outline:none}.skyvox-player__events-launcher:active{transform:translateY(1px) scale(.992)}
.skyvox-player__events-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;border:1px solid rgba(150,232,255,.35);background:radial-gradient(circle at 35% 22%,rgba(255,255,255,.24),transparent 42%),linear-gradient(145deg,#0f6e9e,#063555);box-shadow:0 6px 14px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.16);font-size:20px;color:#8cecff}
.skyvox-player__events-copy{min-width:0;display:block}.skyvox-player__events-copy small,.skyvox-player__events-copy strong,.skyvox-player__events-copy em{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.skyvox-player__events-copy small{font-size:8px;font-weight:800;letter-spacing:.11em;color:#72dffc;line-height:1.15}.skyvox-player__events-copy strong{margin-top:3px;font-size:14px;line-height:1.15;color:#fff;font-style:normal}.skyvox-player__events-copy em{margin-top:3px;font-size:10px;line-height:1.15;color:#c7dce8;font-style:normal}.skyvox-player__events-arrow{font-size:27px;line-height:1;color:#fff;text-align:center;opacity:.92}
body.skyvox-events-open{overflow:hidden!important}.skyvox-events-modal[hidden]{display:none!important}.skyvox-events-modal{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:24px;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#fff}.skyvox-events-modal__backdrop{position:absolute;inset:0;background:rgba(0,10,24,.76);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.skyvox-events-modal__dialog{position:relative;z-index:2;width:min(920px,100%);max-height:min(88dvh,900px);overflow:hidden;border:1px solid rgba(111,205,249,.26);border-radius:26px;background:linear-gradient(160deg,rgba(4,33,65,.99),rgba(1,17,38,.99));box-shadow:0 30px 90px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.08);outline:none}.skyvox-events-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 26px 18px;border-bottom:1px solid rgba(127,202,239,.14);background:linear-gradient(180deg,rgba(14,73,112,.28),rgba(4,32,64,0))}.skyvox-events-modal__eyebrow{display:block;font-size:10px;line-height:1.2;font-weight:850;letter-spacing:.20em;color:#61dcff}.skyvox-events-modal__header h2{margin:5px 0 0!important;color:#fff!important;font-size:30px!important;line-height:1.05!important;letter-spacing:-.025em!important}.skyvox-events-modal__header p{margin:7px 0 0;color:#b8cfdd;font-size:13px}.skyvox-events-modal__close{width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(255,255,255,.20);border-radius:13px;background:linear-gradient(145deg,rgba(22,72,106,.78),rgba(2,29,58,.88));color:#fff;font-size:29px;line-height:36px;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.13)}.skyvox-events-modal__close:hover,.skyvox-events-modal__close:focus-visible{border-color:rgba(112,226,255,.72);outline:none;box-shadow:0 0 20px rgba(56,204,255,.18)}
.skyvox-events-month-nav{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:10px;padding:14px 24px 8px}.skyvox-events-month-nav strong{text-align:center;font-size:17px;letter-spacing:.01em;text-transform:capitalize}.skyvox-events-month-nav button{width:42px;height:38px;justify-self:center;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(10,55,89,.72);color:#fff;font-size:27px;line-height:1;text-align:center;cursor:pointer}.skyvox-events-month-nav button > *{display:flex;align-items:center;justify-content:center}.skyvox-events-month-nav button:disabled{opacity:.28;cursor:default}.skyvox-events-month-dots{display:flex;align-items:center;justify-content:center;gap:7px;padding:0 24px 12px}.skyvox-events-month-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(185,220,238,.32);cursor:pointer;transition:.18s ease}.skyvox-events-month-dots button.is-active{width:22px;border-radius:999px;background:#54d8ff;box-shadow:0 0 12px rgba(84,216,255,.45)}
.skyvox-events-pages{max-height:calc(min(88dvh,900px) - 180px);overflow:auto;padding:4px 22px 24px;overscroll-behavior:contain}.skyvox-events-page[hidden]{display:none!important}.skyvox-events-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.skyvox-event-card{overflow:hidden;border:1px solid rgba(117,195,235,.22);border-radius:20px;background:linear-gradient(145deg,rgba(9,52,88,.90),rgba(3,27,56,.92));box-shadow:0 16px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)}.skyvox-event-card__media{position:relative;height:190px;overflow:hidden;background:radial-gradient(circle at 50% 35%,rgba(63,181,236,.24),transparent 54%),linear-gradient(145deg,#0a3c65,#021b38)}.skyvox-event-card__media img{display:block;width:100%;height:100%;object-fit:cover}.skyvox-event-card__media:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,transparent,rgba(0,16,36,.64));pointer-events:none}.skyvox-event-card__media.is-empty{display:flex;align-items:center;justify-content:center}.skyvox-event-card__media.is-empty>span{font-size:30px;font-weight:900;letter-spacing:.11em;color:rgba(255,255,255,.22)}.skyvox-event-card__date{position:absolute;z-index:2;left:14px;bottom:14px;width:58px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.34);border-radius:16px;background:rgba(1,22,45,.80);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 7px 17px rgba(0,0,0,.30)}.skyvox-event-card__date strong{font-size:23px;line-height:1;font-weight:850}.skyvox-event-card__date span{margin-top:4px;font-size:9px;text-transform:uppercase;letter-spacing:.10em;color:#91e6ff}.skyvox-event-card__body{padding:17px 18px 19px}.skyvox-event-card__category{display:inline-flex;align-items:center;min-height:24px;padding:4px 9px;border:1px solid rgba(97,218,255,.26);border-radius:999px;background:rgba(34,161,215,.12);font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#78e2ff}.skyvox-event-card__category--interview{color:#d6c5ff;border-color:rgba(187,155,255,.28);background:rgba(139,92,246,.12)}.skyvox-event-card__category--direct{color:#a5f0be;border-color:rgba(94,223,132,.30);background:rgba(34,197,94,.12)}.skyvox-event-card__body h3{margin:10px 0 0!important;color:#fff!important;font-size:20px!important;line-height:1.15!important;letter-spacing:-.015em!important}.skyvox-event-card__body time{display:block;margin-top:6px;color:#b8ccda;font-size:11px;font-weight:650}.skyvox-event-card__body p{margin:12px 0 0!important;color:#dbe8f0!important;font-size:13px!important;line-height:1.55!important}.skyvox-events-empty{margin:20px 24px 28px;padding:34px 22px;border:1px dashed rgba(118,199,238,.28);border-radius:18px;text-align:center;background:rgba(7,47,80,.34)}.skyvox-events-empty strong{display:block;font-size:18px}.skyvox-events-empty p{margin:8px 0 0;color:#b6ccd9}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{position:relative!important;order:3!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;min-height:62px!important;margin:0!important;grid-template-columns:42px minmax(0,1fr) 24px!important;border-radius:17px!important;padding:9px 11px!important;background:linear-gradient(145deg,rgba(7,52,90,.90),rgba(2,27,56,.84))!important;box-shadow:0 13px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.09)!important}.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-icon{width:42px;height:42px;border-radius:13px}.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy small{font-size:7px;letter-spacing:.10em}.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy strong{font-size:13px}.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy em{font-size:9px}.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-arrow{font-size:24px}
@media(max-width:720px){.skyvox-events-modal{padding:0;align-items:stretch}.skyvox-events-modal__dialog{width:100%;height:100dvh;max-height:none;border-radius:0;border:0}.skyvox-events-modal__header{padding:calc(env(safe-area-inset-top,0px) + 18px) 18px 14px}.skyvox-events-modal__header h2{font-size:26px!important}.skyvox-events-modal__header p{font-size:12px}.skyvox-events-modal__close{width:40px;height:40px;flex-basis:40px}.skyvox-events-month-nav{padding:12px 14px 7px;grid-template-columns:44px minmax(0,1fr) 44px}.skyvox-events-month-nav strong{font-size:16px}.skyvox-events-month-dots{padding-bottom:10px}.skyvox-events-pages{max-height:calc(100dvh - env(safe-area-inset-top,0px) - 162px);padding:3px 14px calc(env(safe-area-inset-bottom,0px) + 20px)}.skyvox-events-list{grid-template-columns:1fr;gap:14px}.skyvox-event-card__media{height:180px}.skyvox-event-card__body{padding:15px 16px 17px}.skyvox-event-card__body h3{font-size:19px!important}}
@media(max-width:380px){.skyvox-player.skyvox-iphone-portrait .skyvox-player__main{gap:10px}.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{min-height:56px!important}.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy small{display:none}.skyvox-event-card__media{height:160px}}
/* ===== 2.2.1 — Finition cartouche événements + fermeture popup ===== */
.skyvox-player__events-launcher{
min-height:72px;
grid-template-columns:46px minmax(0,1fr) 30px;
gap:12px;
padding:12px 14px;
}
.skyvox-player__events-icon{width:46px;height:46px;border-radius:14px;font-size:21px}
.skyvox-player__events-copy{display:grid;gap:4px;align-content:center}
.skyvox-player__events-copy small{font-size:9px;line-height:1.25;letter-spacing:.13em}
.skyvox-player__events-copy strong{margin-top:0;font-size:14px;line-height:1.3}
.skyvox-player__events-copy em{margin-top:0;font-size:10px;line-height:1.35}
.skyvox-events-modal__close{
display:grid!important;
place-items:center!important;
padding:0!important;
line-height:1!important;
text-align:center!important;
font-family:Arial,Helvetica,sans-serif!important;
font-size:28px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{
min-height:76px!important;
grid-template-columns:46px minmax(0,1fr) 26px!important;
gap:11px!important;
padding:12px 13px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-icon{width:46px;height:46px;border-radius:14px}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy{gap:4px}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy small{display:block!important;font-size:8px;line-height:1.25;letter-spacing:.12em}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy strong{font-size:13px;line-height:1.28}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy em{font-size:9px;line-height:1.3}
@media(max-width:380px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{min-height:74px!important}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy small{display:block!important}
}
/* ===== 2.2.2 — Lisibilité renforcée « Nos événements » ===== */
/* La cartouche respire davantage et le titre « Nos événements » devient un vrai repère visuel. */
.skyvox-player__events-launcher{
min-height:82px;
grid-template-columns:50px minmax(0,1fr) 30px;
gap:14px;
padding:14px 16px;
}
.skyvox-player__events-icon{
width:50px;
height:50px;
border-radius:15px;
font-size:22px;
}
.skyvox-player__events-copy{gap:5px}
.skyvox-player__events-copy small{
display:block!important;
overflow:visible!important;
text-overflow:clip!important;
white-space:nowrap!important;
font-size:12px!important;
line-height:1.2!important;
font-weight:900!important;
letter-spacing:.055em!important;
text-transform:none!important;
color:#8be8ff!important;
text-shadow:0 1px 7px rgba(40,199,255,.18);
}
.skyvox-player__events-copy strong{
font-size:15px;
line-height:1.3;
}
.skyvox-player__events-copy em{
font-size:10.5px;
line-height:1.35;
}
/* iPhone portrait : priorité à la lisibilité, sans réduire le titre même sur petits écrans. */
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{
min-height:90px!important;
grid-template-columns:50px minmax(0,1fr) 28px!important;
gap:13px!important;
padding:14px 14px!important;
border-radius:19px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-icon{
width:50px!important;
height:50px!important;
border-radius:15px!important;
font-size:22px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy{gap:5px!important}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy small{
display:block!important;
font-size:14px!important;
line-height:1.18!important;
font-weight:900!important;
letter-spacing:.035em!important;
text-transform:none!important;
color:#9aebff!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy strong{
font-size:14px!important;
line-height:1.3!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy em{
font-size:10px!important;
line-height:1.35!important;
}
@media(max-width:380px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{
min-height:88px!important;
padding:13px 12px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy small{
display:block!important;
font-size:13px!important;
}
}
/* ===== 2.2.5 — Équilibre vertical autour du Play, sans déplacer Play =====
Le bouton Play conserve STRICTEMENT sa position de la 2.2.4 / 2.2.2.
Tout ce qui se trouve dessous descend : titre SKYVOX Radio, volume,
cartouche du morceau et cartouche « Nos événements ».
L’espace sous le Play est augmenté pour se rapprocher visuellement de
l’espace disponible au-dessus, tout en gardant le bas de l’interface
visible dans la safe area de l’iPhone portrait. */
/* iPhone portrait standard : Play inchangé ; +32 à +56 px de respiration dessous. */
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
height:242px!important;
min-height:242px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__main{
gap:10px!important;
}
/* Play = 98px de haut. Le titre débute 56px après son bord inférieur. */
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{
top:calc(42svh + 154px)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{
top:204px!important;
}
/* iPhone de hauteur intermédiaire : même principe, sans toucher au Play. */
@media (min-height:721px) and (max-height:820px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
height:224px!important;
min-height:224px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__main{
gap:8px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{
top:calc(42svh + 150px)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{
top:194px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__now{
height:98px!important;
min-height:98px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__art{
width:78px!important;
height:78px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__meta{
left:102px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{
min-height:84px!important;
padding-top:11px!important;
padding-bottom:11px!important;
}
}
/* iPhone <=720px : position historique du Play à 36svh conservée ;
seuls les éléments inférieurs descendent et se compactent si nécessaire. */
@media (max-height:720px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
height:212px!important;
min-height:212px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__main{
gap:6px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{
top:calc(36svh + 146px)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{
top:186px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__now{
height:90px!important;
min-height:90px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__art{
width:70px!important;
height:70px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__meta{
left:94px!important;
top:11px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{
min-height:80px!important;
padding:10px 12px!important;
}
}
/* Très petits iPhone : Play toujours immobile ; on garde une marge basse utile. */
@media (max-height:650px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
height:202px!important;
min-height:202px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__main{
gap:5px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{
top:calc(36svh + 142px)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{
top:176px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__now{
height:84px!important;
min-height:84px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__art{
width:64px!important;
height:64px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__meta{
left:88px!important;
top:9px!important;
bottom:7px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{
min-height:76px!important;
padding:8px 11px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-icon{
width:46px!important;
height:46px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy small{
font-size:13px!important;
}
}
/* iPhone 721–760px : marge basse renforcée sans faire remonter aucun élément. */
@media (min-height:721px) and (max-height:760px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
height:224px!important;
min-height:224px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__main{
gap:4px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__now{
height:92px!important;
min-height:92px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__art{
width:72px!important;
height:72px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__meta{
left:96px!important;
top:11px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{
min-height:78px!important;
padding:8px 11px!important;
}
}
/* iPhone très court (ex. 320×568) : le Play reste fixe ; les cartes se compactent
pour que leur point de départ descende encore tout en conservant une vraie marge basse. */
@media (max-height:600px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
height:214px!important;
min-height:214px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__main{
gap:2px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{
top:calc(36svh + 136px)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{
top:170px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__now{
height:64px!important;
min-height:64px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__art{
left:7px!important;
top:7px!important;
width:50px!important;
height:50px!important;
border-radius:11px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__art img{
border-radius:10px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__meta{
left:68px!important;
right:8px!important;
top:7px!important;
bottom:5px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__meta small{
font-size:7px!important;
margin-bottom:2px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__meta strong{
font-size:14px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__meta>span{
font-size:10px!important;
margin-top:2px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__progress{
height:14px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__progress-times{
font-size:7px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__progress-bar{
left:24px!important;
right:24px!important;
top:5px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{
min-height:58px!important;
grid-template-columns:38px minmax(0,1fr) 20px!important;
gap:7px!important;
padding:5px 8px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-icon{
width:38px!important;
height:38px!important;
border-radius:11px!important;
font-size:18px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy{
gap:2px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy small{
font-size:12px!important;
line-height:1.05!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy strong{
font-size:11px!important;
line-height:1.1!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-copy em{
font-size:8px!important;
line-height:1.1!important;
}
}
/* ===== 2.2.6 — Contenu encore abaissé sous le Play, Play strictement fixe =====
Validation utilisateur : le bouton Play ne bouge pas. On augmente uniquement
la respiration sous son bord inférieur ; station, volume, titre en cours et
cartouche « Nos événements » descendent ensemble. Les petits iPhone compactent
seulement les cartes inférieures afin de rester dans le viewport. */
/* iPhone portrait courant (> 820 px de haut) : déplacement visible de +18 px. */
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
height:260px!important;
min-height:260px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{
top:calc(42svh + 172px)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{
top:222px!important;
}
/* 761–820 px : +10 px, sans toucher au Play. */
@media (min-height:761px) and (max-height:820px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
height:234px!important;
min-height:234px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{
top:calc(42svh + 160px)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{
top:204px!important;
}
}
/* 721–760 px : les blocs démarrent plus bas, avec légère compaction en bas. */
@media (min-height:721px) and (max-height:760px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
height:232px!important;
min-height:232px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{
top:calc(42svh + 158px)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{
top:202px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__now{
height:88px!important;
min-height:88px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{
min-height:74px!important;
}
}
/* 651–720 px : +12 px sous le Play. */
@media (min-height:651px) and (max-height:720px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
height:224px!important;
min-height:224px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{
top:calc(36svh + 158px)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{
top:198px!important;
}
}
/* 601–650 px : déplacement vers le bas avec compensation uniquement sur les cartes. */
@media (min-height:601px) and (max-height:650px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
height:210px!important;
min-height:210px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{
top:calc(36svh + 150px)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{
top:184px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__now{
height:80px!important;
min-height:80px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__events-launcher{
min-height:72px!important;
}
}
/* <= 600 px : cartes déjà compactes ; on les descend encore de 12 px. */
@media (max-height:600px){
.skyvox-player.skyvox-iphone-portrait .skyvox-player__controls{
height:226px!important;
min-height:226px!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__iphone-station{
top:calc(36svh + 148px)!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__volume{
top:182px!important;
}
}
/* ===== 2.2.7 — Même présentation premium sur iPad en mode portrait =====
La maquette iPhone validée est conservée telle quelle. L'iPad réutilise la même
structure plein écran (fond avion/nuages, logo blanc, Play premium, station,
volume, morceau en cours, Nos événements) avec des dimensions adaptées au format tablette.
Le paysage iPad, Android et desktop ne sont pas modifiés. */
html.skyvox-ipad-portrait-active,
body.skyvox-ipad-portrait-active{
width:100%!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
margin:0!important;padding:0!important;overflow:hidden!important;background-color:#00142b!important;background-image:url("../images/skyvox-iphone-portrait-bg.jpg")!important;background-position:center bottom!important;background-size:cover!important;background-repeat:no-repeat!important;
}
/* Largeur de contenu maîtrisée : même composition que l'iPhone, sans étirer les cartes. */
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__main{
left:50%!important;right:auto!important;width:min(72vw,680px)!important;
transform:translateX(-50%)!important;
top:42svh!important;
gap:14px!important;
}
/* Identité : même photo plein écran et même logo blanc, simplement dimensionnés pour iPad. */
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__reference{
top:calc(env(safe-area-inset-top,0px) + 28px)!important;
width:clamp(210px,28vw,270px)!important;height:clamp(210px,28vw,270px)!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__iphone-copy{
left:10vw!important;right:10vw!important;
top:calc(env(safe-area-inset-top,0px) + 28px + clamp(210px,28vw,270px) + 10px)!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__iphone-kicker{
font-size:clamp(14px,1.8vw,18px)!important;letter-spacing:.25em!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__iphone-slogan{
margin-top:10px!important;font-size:clamp(30px,4.1vw,42px)!important;
}
/* Play : même rendu premium/vert actif, plus confortable sur tablette. */
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__play{
width:118px!important;height:118px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__play::before{
border-top-width:17px;border-bottom-width:17px;border-left-width:27px;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait.is-playing .skyvox-player__play::before{
width:25px;height:35px;
background:linear-gradient(90deg,#fff 0 8px,transparent 8px 17px,#fff 17px 25px);
}
/* Tout ce qui est sous Play reste dans le même ordre et descend ensemble comme sur iPhone. */
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__controls{
height:286px!important;min-height:286px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__iphone-station{
left:50%!important;right:auto!important;width:min(72vw,680px)!important;transform:translateX(-50%)!important;
top:calc(42svh + 190px)!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__iphone-station strong{
font-size:clamp(28px,3.4vw,36px)!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__iphone-station span{
margin-top:7px!important;font-size:clamp(14px,1.8vw,18px)!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__volume{
top:238px!important;height:44px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__mute{
width:42px!important;height:42px!important;border-radius:13px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__volume label{
left:54px!important;right:58px!important;height:34px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__volume-value{
top:11px!important;font-size:13px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait.skyvox-system-volume .skyvox-player__volume label::after{
content:"VOLUME · BOUTONS iPAD";
font-size:10px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait.skyvox-system-volume.is-muted .skyvox-player__volume label::after{
content:"SON COUPÉ · APPUYEZ À GAUCHE";
}
/* Carte du morceau : même style, avec une lecture plus confortable à distance. */
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__now{
height:112px!important;min-height:112px!important;border-radius:20px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__art{
left:12px!important;top:12px!important;width:88px!important;height:88px!important;border-radius:15px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__meta{
left:116px!important;right:16px!important;top:16px!important;bottom:11px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__meta small{
font-size:10px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__meta strong{
font-size:20px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__meta>span{
font-size:14px!important;
}
/* « Nos événements » conserve la hiérarchie validée et gagne en confort sur iPad. */
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__events-launcher{
min-height:96px!important;grid-template-columns:54px minmax(0,1fr) 30px!important;
gap:15px!important;padding:14px 16px!important;border-radius:20px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__events-icon{
width:54px!important;height:54px!important;border-radius:16px!important;font-size:24px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__events-copy small{
font-size:16px!important;line-height:1.2!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__events-copy strong{
font-size:16px!important;line-height:1.3!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__events-copy em{
font-size:12px!important;line-height:1.35!important;
}
/* iPad portrait plus court (anciens 9,7\" / split view portrait) : aucune remontée du Play.
Seuls les blocs inférieurs se compactent juste assez pour rester dans le viewport. */
@media (min-width:481px) and (max-height:1050px){
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__main{
top:40svh!important;gap:10px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__controls{
height:258px!important;min-height:258px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__iphone-station{
top:calc(40svh + 178px)!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__volume{
top:216px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__now{
height:104px!important;min-height:104px!important;
}
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__events-launcher{
min-height:88px!important;padding:12px 15px!important;
}
}
/* Popup événements : même expérience plein écran que l'iPhone lorsque l'iPad est en portrait. */
html.skyvox-ipad-portrait-active .skyvox-events-modal,
body.skyvox-ipad-portrait-active .skyvox-events-modal{
padding:0!important;align-items:stretch!important;
}
html.skyvox-ipad-portrait-active .skyvox-events-modal__dialog,
body.skyvox-ipad-portrait-active .skyvox-events-modal__dialog{
width:100%!important;height:100dvh!important;max-height:none!important;border-radius:0!important;border:0!important;
}
html.skyvox-ipad-portrait-active .skyvox-events-modal__header,
body.skyvox-ipad-portrait-active .skyvox-events-modal__header{
padding:calc(env(safe-area-inset-top,0px) + 24px) 32px 18px!important;
}
html.skyvox-ipad-portrait-active .skyvox-events-modal__header h2,
body.skyvox-ipad-portrait-active .skyvox-events-modal__header h2{
font-size:34px!important;
}
html.skyvox-ipad-portrait-active .skyvox-events-pages,
body.skyvox-ipad-portrait-active .skyvox-events-pages{
max-height:calc(100dvh - env(safe-area-inset-top,0px) - 184px)!important;
padding:6px 28px calc(env(safe-area-inset-bottom,0px) + 28px)!important;
}
html.skyvox-ipad-portrait-active .skyvox-events-list,
body.skyvox-ipad-portrait-active .skyvox-events-list{
grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;
}
/* ===== 2.2.9 — Portrait iPhone/iPad : photo plein écran HD sans bande basse =====
Le fond est aussi porté par le conteneur fixe racine : aucune zone de safe-area ou
variation de viewport iOS ne peut révéler un aplat bleu sous la photo. L'image 2x
conserve exactement la même composition, mais avec une définition Retina. */
html.skyvox-iphone-portrait-active,
body.skyvox-iphone-portrait-active,
html.skyvox-ipad-portrait-active,
body.skyvox-ipad-portrait-active{
height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
overflow:hidden!important;overscroll-behavior:none!important;
}
.skyvox-player.skyvox-iphone-portrait{
top:0!important;right:0!important;bottom:0!important;left:0!important;
width:100vw!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
overflow:hidden!important;
background-image:url("../images/skyvox-iphone-portrait-bg.jpg")!important;
background-position:center bottom!important;background-size:cover!important;background-repeat:no-repeat!important;
background-color:transparent!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__inner{
inset:0!important;width:100%!important;height:100%!important;min-height:100%!important;max-height:100%!important;
background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important;
}
/* ===== 2.2.8 — Paysage iPhone + iPad : maquette fournie, haut/bas supprimés =====
Le rendu paysage est isolé des présentations portrait. Le visuel de référence existant
est recadré exactement comme la capture validée : suppression du menu supérieur et du
bandeau inférieur. Les vraies commandes restent actives au-dessus de la maquette. */
html.skyvox-apple-landscape-active,
body.skyvox-apple-landscape-active{
width:100%!important;height:100%!important;min-height:100%!important;
margin:0!important;padding:0!important;overflow:hidden!important;background:#01162e!important;
}
.skyvox-player.skyvox-apple-landscape{
position:fixed!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;
width:100vw!important;max-width:none!important;height:100dvh!important;min-height:100svh!important;
margin:0!important;padding:0!important;overflow:hidden!important;background:#01162e!important;
z-index:2147480000!important;
display:flex!important;align-items:center!important;justify-content:center!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__inner{
/* Ratio exact de la capture paysage fournie (1536 × 709). Sur iPhone il remplit
pratiquement tout l'écran ; sur iPad il reste centré sans déformer la maquette. */
position:relative!important;inset:auto!important;
width:min(100vw,calc(100dvh * 2.1664315938))!important;
height:min(100dvh,calc(100vw / 2.1664315938))!important;
min-height:0!important;max-width:100vw!important;max-height:100dvh!important;
aspect-ratio:1536/709!important;overflow:hidden!important;background:#01162e!important;
flex:0 0 auto!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__inner:before{display:none!important}
.skyvox-player.skyvox-apple-landscape .skyvox-player__reference{
/* Le screenshot fourni correspond exactement au visuel 1672×941 redimensionné à la
largeur puis remonté de 74 px dans son repère natif. */
position:absolute!important;z-index:0!important;
left:0!important;right:auto!important;top:-9.5909732017%!important;bottom:auto!important;
width:100%!important;height:121.9605077574%!important;
transform:none!important;background:#01162e!important;filter:none!important;pointer-events:none!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__reference img{
display:block!important;width:100%!important;height:100%!important;max-width:none!important;
object-fit:fill!important;margin:0!important;padding:0!important;border:0!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__fx,
.skyvox-player.skyvox-apple-landscape .skyvox-player__approved-listen,
.skyvox-player.skyvox-apple-landscape .skyvox-player__iphone-copy,
.skyvox-player.skyvox-apple-landscape .skyvox-player__iphone-station,
.skyvox-player.skyvox-apple-landscape .skyvox-player__events-launcher{display:none!important}
/* Zone live alignée sur les deux cartes de la capture recadrée. */
.skyvox-player.skyvox-apple-landscape .skyvox-player__main{
position:absolute!important;z-index:5!important;
left:6.82%!important;right:auto!important;top:76.9675599436%!important;
width:85.05%!important;height:19.5779971791%!important;
display:grid!important;grid-template-columns:minmax(0,1.263fr) minmax(0,1fr)!important;
gap:1.34%!important;align-items:stretch!important;margin:0!important;transform:none!important;
pointer-events:none!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__now,
.skyvox-player.skyvox-apple-landscape .skyvox-player__controls{
position:relative!important;min-width:0!important;height:100%!important;
border:0!important;border-radius:clamp(12px,1.35vw,21px)!important;
box-shadow:none!important;overflow:hidden!important;
}
/* Métadonnées réelles : elles remplacent proprement le faux titre de la maquette. */
.skyvox-player.skyvox-apple-landscape .skyvox-player__now{
pointer-events:none!important;background:transparent!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__now:before{
display:block!important;content:""!important;position:absolute!important;z-index:1!important;
left:19.9%!important;top:7.2%!important;right:1.5%!important;bottom:8.8%!important;
background:url("../images/skyvox-meta-clean.png") center/100% 100% no-repeat!important;
pointer-events:none!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__art{
position:absolute!important;z-index:2!important;left:3.83%!important;top:11.9%!important;
width:14.7%!important;height:76.2%!important;border-radius:clamp(9px,1.05vw,16px)!important;
overflow:hidden!important;background:rgba(2,25,51,.9)!important;box-shadow:none!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__art img{
display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
object-fit:cover!important;border-radius:inherit!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__meta{
position:absolute!important;z-index:3!important;left:22.2%!important;right:3.7%!important;
top:15.2%!important;bottom:11.5%!important;min-width:0!important;padding:0!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__meta small{
display:block!important;margin:0 0 clamp(2px,.45vw,7px)!important;
color:#d5e7f2!important;font-size:clamp(6px,.72vw,11px)!important;line-height:1.1!important;
font-weight:850!important;letter-spacing:.13em!important;text-transform:uppercase!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__meta strong,
.skyvox-player.skyvox-apple-landscape .skyvox-player__meta>span{
display:block!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__meta strong{
margin:0!important;color:#fff!important;font-size:clamp(13px,1.85vw,29px)!important;
line-height:1.02!important;font-weight:790!important;letter-spacing:-.025em!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__meta>span{
margin-top:clamp(2px,.38vw,6px)!important;color:#d8e5ed!important;
font-size:clamp(8px,1.03vw,16px)!important;line-height:1.15!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__progress{
position:absolute!important;left:0!important;right:0!important;bottom:0!important;
height:clamp(10px,1.55vw,24px)!important;margin:0!important;display:block!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__progress-times{
position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
color:#e4edf3!important;font-size:clamp(6px,.95vw,15px)!important;line-height:1!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__progress-bar{
position:absolute!important;left:8%!important;right:8%!important;top:42%!important;
height:clamp(2px,.31vw,5px)!important;border-radius:999px!important;overflow:hidden!important;
background:rgba(93,149,182,.46)!important;
}
/* Commandes réelles, visibles et tactiles. Le visuel n'est plus une simple zone transparente. */
.skyvox-player.skyvox-apple-landscape .skyvox-player__controls{
pointer-events:none!important;
background:linear-gradient(145deg,rgba(5,34,66,.42),rgba(2,20,43,.30))!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__play{
position:absolute!important;z-index:6!important;
left:8.0%!important;top:21.8%!important;width:13.55%!important;height:56.5%!important;
min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;
appearance:none!important;border:clamp(1px,.13vw,2px) solid rgba(124,232,255,.70)!important;border-radius:50%!important;
opacity:1!important;color:#fff!important;cursor:pointer!important;pointer-events:auto!important;
background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.26),transparent 34%),linear-gradient(145deg,#26d6ff,#0787d4)!important;
box-shadow:0 0 clamp(10px,1.7vw,26px) rgba(20,196,255,.55),inset 0 1px 0 rgba(255,255,255,.45),0 clamp(3px,.5vw,8px) clamp(8px,1.2vw,18px) rgba(0,0,0,.35)!important;
display:grid!important;place-items:center!important;
transition:transform .16s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__play span:first-child{
visibility:visible!important;display:block!important;color:#fff!important;
font-size:clamp(16px,2.2vw,34px)!important;line-height:1!important;font-family:Arial,sans-serif!important;font-weight:900!important;
transform:translateX(3%)!important;text-shadow:0 2px 6px rgba(0,0,0,.25)!important;
}
.skyvox-player.skyvox-apple-landscape.is-playing .skyvox-player__play,
.skyvox-player.skyvox-apple-landscape .skyvox-player__play.is-playing{
border-color:#86ffab!important;
background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.28),transparent 34%),linear-gradient(145deg,#28e167,#0eb34c)!important;
box-shadow:0 0 0 clamp(4px,.7vw,10px) rgba(25,213,84,.14),0 0 clamp(15px,2.1vw,34px) rgba(29,255,102,.62),inset 0 1px 0 rgba(255,255,255,.46),0 clamp(3px,.5vw,8px) clamp(8px,1.2vw,18px) rgba(0,0,0,.36)!important;
}
.skyvox-player.skyvox-apple-landscape.is-playing .skyvox-player__play span:first-child{
transform:none!important;letter-spacing:-.15em!important;font-size:clamp(14px,1.9vw,30px)!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__play:active{transform:scale(.95)!important}
.skyvox-player.skyvox-apple-landscape .skyvox-player__play:focus-visible{outline:2px solid #fff!important;outline-offset:3px!important}
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume{display:contents!important}
.skyvox-player.skyvox-apple-landscape .skyvox-player__mute{
position:absolute!important;z-index:6!important;
left:26.3%!important;top:32.2%!important;width:8.1%!important;height:33.7%!important;
min-width:0!important;min-height:0!important;padding:0!important;margin:0!important;
appearance:none!important;border:1px solid rgba(114,206,244,.34)!important;border-radius:50%!important;
opacity:1!important;color:#fff!important;cursor:pointer!important;pointer-events:auto!important;
background:linear-gradient(145deg,rgba(10,67,111,.96),rgba(2,33,67,.98))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.28)!important;
display:grid!important;place-items:center!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__mute span{
visibility:visible!important;display:block!important;font-size:clamp(9px,1.15vw,18px)!important;line-height:1!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__mute:focus-visible{outline:2px solid #7ce5ff!important;outline-offset:2px!important}
.skyvox-player.skyvox-apple-landscape.is-muted .skyvox-player__mute{
border-color:rgba(255,153,153,.52)!important;
background:linear-gradient(145deg,rgba(112,35,52,.96),rgba(55,12,29,.98))!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume label{
position:absolute!important;z-index:6!important;left:39.7%!important;top:38.5%!important;
width:42.6%!important;height:30%!important;margin:0!important;padding:0!important;pointer-events:auto!important;
display:flex!important;align-items:center!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume input{
display:block!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;
opacity:1!important;cursor:pointer!important;appearance:none!important;-webkit-appearance:none!important;background:transparent!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume input::-webkit-slider-runnable-track{
height:clamp(3px,.38vw,6px)!important;border-radius:999px!important;
background:linear-gradient(90deg,#22c8ff 0 var(--skyvox-volume-pct,80%),rgba(31,104,151,.58) var(--skyvox-volume-pct,80%) 100%)!important;
box-shadow:inset 0 0 0 1px rgba(116,210,255,.10)!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume input::-webkit-slider-thumb{
-webkit-appearance:none!important;width:clamp(12px,1.35vw,21px)!important;height:clamp(12px,1.35vw,21px)!important;
margin-top:calc(clamp(3px,.38vw,6px) / 2 - clamp(12px,1.35vw,21px) / 2)!important;
border:0!important;border-radius:50%!important;background:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.38)!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume input::-moz-range-track{
height:clamp(3px,.38vw,6px)!important;border-radius:999px!important;background:#22c8ff!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume input::-moz-range-thumb{
width:clamp(12px,1.35vw,21px)!important;height:clamp(12px,1.35vw,21px)!important;border:0!important;border-radius:50%!important;background:#fff!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume-value{
position:absolute!important;z-index:6!important;right:5.2%!important;top:43%!important;
opacity:1!important;color:#fff!important;font-size:clamp(7px,.9vw,14px)!important;line-height:1!important;pointer-events:none!important;
}
/* iOS : le système conserve la main sur le niveau sonore. Le bouton muet reste fonctionnel ;
le curseur est visuellement conservé mais n'est pas présenté comme un volume logiciel actif. */
.skyvox-player.skyvox-apple-landscape.skyvox-system-volume .skyvox-player__volume input{
pointer-events:none!important;opacity:.58!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-system-volume .skyvox-player__volume-value{
min-width:52px!important;text-align:right!important;font-size:clamp(6px,.72vw,11px)!important;letter-spacing:.04em!important;
}
/* Très petits paysages : conserver les cartes et leurs zones tactiles dans la fenêtre. */
@media (orientation:landscape) and (max-height:390px){
.skyvox-player.skyvox-apple-landscape .skyvox-player__inner{
width:min(100vw,calc(100dvh * 2.1664315938))!important;
height:min(100dvh,calc(100vw / 2.1664315938))!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__meta strong{font-size:clamp(11px,1.7vw,22px)!important}
.skyvox-player.skyvox-apple-landscape .skyvox-player__meta>span{font-size:clamp(7px,.95vw,13px)!important}
}
/* ===== 2.2.10 — Finition commandes paysage iPhone/iPad =====
Le visuel de référence contient des commandes décoratives intégrées à l'image.
Cette couche opaque les masque complètement afin qu'une seule série de vraies
commandes interactives soit visible. Aucun changement du moteur audio. */
.skyvox-player.skyvox-apple-landscape .skyvox-player__controls{
background:linear-gradient(145deg,#08345d 0%,#05294b 48%,#041f3b 100%)!important;
border:1px solid rgba(58,169,226,.34)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 10px 24px rgba(0,10,28,.18)!important;
isolation:isolate!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__controls::before{
content:""!important;
position:absolute!important;inset:0!important;z-index:0!important;
border-radius:inherit!important;
background:
radial-gradient(circle at 14% 22%,rgba(34,194,255,.09),transparent 30%),
linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.035))!important;
pointer-events:none!important;
}
/* Bouton lecture : symbole CSS net, sans glyphe/emoji iOS. */
.skyvox-player.skyvox-apple-landscape .skyvox-player__play{
left:7.2%!important;top:18.5%!important;width:14.7%!important;height:63%!important;
border:1px solid rgba(140,231,255,.72)!important;
background:linear-gradient(145deg,#28c9f5 0%,#079bd8 56%,#0478bb 100%)!important;
box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,0 7px 18px rgba(0,0,0,.28),0 0 20px rgba(16,187,245,.30)!important;
overflow:visible!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__play span{
visibility:hidden!important;opacity:0!important;font-size:0!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__play::before{
content:""!important;display:block!important;width:0!important;height:0!important;
border-top:clamp(7px,.8vw,12px) solid transparent!important;
border-bottom:clamp(7px,.8vw,12px) solid transparent!important;
border-left:clamp(11px,1.25vw,19px) solid #fff!important;
margin-left:5%!important;filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))!important;
}
.skyvox-player.skyvox-apple-landscape.is-playing .skyvox-player__play,
.skyvox-player.skyvox-apple-landscape .skyvox-player__play.is-playing{
border-color:rgba(145,255,184,.86)!important;
background:linear-gradient(145deg,#28dc69 0%,#12b84e 58%,#07953e 100%)!important;
box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 7px 18px rgba(0,0,0,.30),0 0 24px rgba(31,229,100,.38)!important;
}
.skyvox-player.skyvox-apple-landscape.is-playing .skyvox-player__play::before,
.skyvox-player.skyvox-apple-landscape .skyvox-player__play.is-playing::before{
width:clamp(5px,.52vw,8px)!important;height:clamp(18px,1.75vw,27px)!important;
border:0!important;background:#fff!important;border-radius:2px!important;
margin:0 clamp(7px,.75vw,11px) 0 0!important;
box-shadow:clamp(10px,1.05vw,16px) 0 0 #fff!important;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.24))!important;
}
/* Bouton son : icône vectorielle CSS, séparée du Play et sans doublon de l'image. */
.skyvox-player.skyvox-apple-landscape .skyvox-player__mute{
left:27.0%!important;top:30%!important;width:8.6%!important;height:40%!important;
border:1px solid rgba(111,205,246,.36)!important;
background:linear-gradient(145deg,#0c4778 0%,#08345d 58%,#052744 100%)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 13px rgba(0,0,0,.24)!important;
overflow:hidden!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__mute span{
visibility:hidden!important;opacity:0!important;font-size:0!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__mute::before{
content:""!important;position:absolute!important;left:27%!important;top:31%!important;
width:31%!important;height:38%!important;background:#fff!important;
clip-path:polygon(0 32%,28% 32%,100% 0,100% 100%,28% 68%,0 68%)!important;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__mute::after{
content:""!important;position:absolute!important;left:59%!important;top:28%!important;
width:20%!important;height:44%!important;border-right:2px solid rgba(255,255,255,.92)!important;
border-radius:50%!important;opacity:.92!important;
}
.skyvox-player.skyvox-apple-landscape.is-muted .skyvox-player__mute{
border-color:rgba(255,137,153,.58)!important;
background:linear-gradient(145deg,#783044 0%,#5e1f34 58%,#411126 100%)!important;
}
.skyvox-player.skyvox-apple-landscape.is-muted .skyvox-player__mute::after{
left:58%!important;top:18%!important;width:2px!important;height:64%!important;
border:0!important;border-radius:2px!important;background:#fff!important;
transform:rotate(43deg)!important;transform-origin:center!important;opacity:1!important;
}
/* Curseur : une seule barre, bien alignée, sans superposition avec le bouton son. */
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume label{
left:40.5%!important;top:35%!important;width:42%!important;height:30%!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume input::-webkit-slider-runnable-track{
height:clamp(4px,.4vw,6px)!important;
background:linear-gradient(90deg,#26c8f5 0 var(--skyvox-volume-pct,80%),rgba(44,112,155,.55) var(--skyvox-volume-pct,80%) 100%)!important;
box-shadow:none!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume input::-webkit-slider-thumb{
width:clamp(14px,1.35vw,21px)!important;height:clamp(14px,1.35vw,21px)!important;
border:2px solid rgba(255,255,255,.92)!important;background:#fff!important;
box-shadow:0 3px 9px rgba(0,0,0,.32)!important;
}
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume-value{
right:4.6%!important;top:43%!important;font-weight:650!important;
}
/* iPhone paysage très bas : conserver de vraies zones tactiles sans collision. */
@media (orientation:landscape) and (max-height:430px){
.skyvox-player.skyvox-apple-landscape .skyvox-player__play{left:7.4%!important;width:14.3%!important}
.skyvox-player.skyvox-apple-landscape .skyvox-player__mute{left:27.2%!important;width:8.4%!important}
.skyvox-player.skyvox-apple-landscape .skyvox-player__volume label{left:40.3%!important;width:42.3%!important}
}
/* ===== 2.2.15 — iPad paysage : vrai responsive sans déformation =====
iPad uniquement. L'image reste proportionnelle et occupe toute la largeur.
La zone basse est prolongée par le fond natif. Les deux cartes réelles sont
recalculées séparément et conservent chacune leur ratio d'origine. */
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape{
position:fixed!important;
inset:0!important;
width:100vw!important;
height:100dvh!important;
min-height:100svh!important;
overflow:hidden!important;
background:#01162e!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__inner{
position:absolute!important;
inset:0!important;
width:100vw!important;
height:100dvh!important;
min-width:0!important;
min-height:0!important;
max-width:none!important;
max-height:none!important;
aspect-ratio:auto!important;
overflow:hidden!important;
background-color:#01162e!important;
background-image:
linear-gradient(to bottom,rgba(1,22,46,0) 0%,rgba(1,22,46,0) 66%,rgba(1,22,46,.18) 73%,#01162e 83%,#01162e 100%),
url("../images/skyvox-radio-hero.png")!important;
background-position:center top,center top!important;
background-size:100% 100%,100vw auto!important;
background-repeat:no-repeat,no-repeat!important;
transform:none!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__reference{
display:none!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__main{
position:absolute!important;
z-index:5!important;
left:2vw!important;
right:2vw!important;
top:auto!important;
bottom:max(2.2dvh,env(safe-area-inset-bottom))!important;
width:auto!important;
height:auto!important;
min-height:0!important;
display:grid!important;
grid-template-columns:minmax(0,1.263fr) minmax(0,1fr)!important;
gap:1.25vw!important;
align-items:end!important;
margin:0!important;
transform:none!important;
pointer-events:none!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__now,
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__controls{
position:relative!important;
width:100%!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
align-self:end!important;
overflow:hidden!important;
border:1px solid rgba(58,169,226,.42)!important;
border-radius:clamp(14px,1.45vw,22px)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 10px 24px rgba(0,10,28,.22)!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__now{
aspect-ratio:5.17/1!important;
background:linear-gradient(145deg,#08345d 0%,#05294b 48%,#041f3b 100%)!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__controls{
aspect-ratio:4.09/1!important;
background:linear-gradient(145deg,#08345d 0%,#05294b 48%,#041f3b 100%)!important;
}
/* Les contenus restent pilotés par les pourcentages paysage existants :
leurs proportions suivent donc automatiquement la taille de chaque carte. */
@media (orientation:landscape) and (min-width:900px) and (min-height:600px){
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__meta strong{
font-size:clamp(16px,2.05vw,28px)!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__meta>span{
font-size:clamp(10px,1.15vw,16px)!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__meta small{
font-size:clamp(7px,.78vw,11px)!important;
}
}
/* 2.2.15b — équilibrage vertical iPad 4:3 / 1.43 et raccord sans couture. */
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__inner::after{
content:""!important;
display:block!important;
position:absolute!important;
z-index:2!important;
left:0!important;
right:0!important;
top:calc(56.28vw - 7dvh)!important;
height:14dvh!important;
pointer-events:none!important;
background:linear-gradient(to bottom,rgba(1,22,46,0) 0%,rgba(1,22,46,.52) 48%,#01162e 100%)!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__main{
z-index:5!important;
bottom:max(env(safe-area-inset-bottom),calc((100dvh - 66.55vw) / 2))!important;
}
/* ===== 2.2.17 — iPad paysage : cercle Play et symbole centrés =====
Correction strictement limitée à l'iPad paysage. Le bouton conserve la carte
et le responsive 2.2.15, mais devient un vrai cercle 1:1 et son symbole est
centré optiquement dans ce cercle. */
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__play{
top:50%!important;
left:7.2%!important;
height:63%!important;
width:auto!important;
aspect-ratio:1/1!important;
transform:translateY(-50%)!important;
border-radius:50%!important;
display:block!important;
overflow:hidden!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__play::before{
content:""!important;
position:absolute!important;
left:50%!important;
top:50%!important;
width:0!important;
height:0!important;
margin:0!important;
border-top:clamp(7px,.8vw,12px) solid transparent!important;
border-bottom:clamp(7px,.8vw,12px) solid transparent!important;
border-left:clamp(11px,1.25vw,19px) solid #fff!important;
transform:translate(-42%,-50%)!important;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))!important;
box-shadow:none!important;
background:transparent!important;
border-radius:0!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__play::after{
content:none!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__play:active{
transform:translateY(-50%) scale(.95)!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape.is-playing .skyvox-player__play,
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__play.is-playing{
transform:translateY(-50%)!important;
}
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape.is-playing .skyvox-player__play::before,
.skyvox-player.skyvox-apple-landscape.skyvox-ipad-landscape .skyvox-player__play.is-playing::before{
left:42%!important;
top:50%!important;
width:clamp(5px,.52vw,8px)!important;
height:clamp(18px,1.75vw,27px)!important;
margin:0!important;
border:0!important;
border-radius:2px!important;
background:#fff!important;
transform:translate(-50%,-50%)!important;
box-shadow:clamp(10px,1.05vw,16px) 0 0 #fff!important;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.24))!important;
}
/* ===== 2.2.20 — Portrait iPhone/iPad : volume SOUS « Nos événements » =====
Non-régression stricte : Play, carte « À l’antenne » et carte « Nos événements »
conservent leurs positions/dimensions. Seul le groupe volume sort visuellement de
son emplacement historique dans .skyvox-player__controls et se place sous la carte
événements. Aucun changement de l'ordre flex ni des hauteurs des cadres. */
/* iPhone portrait courant / grand : ligne volume complète sous le cadre événements. */
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume{
top:490px!important;
height:38px!important;
}
/* 821–900 px : l'espace bas est plus court ; la barre reste sous le cadre, compacte,
sans pousser ni recouvrir aucun cadre. */
@media (min-height:821px) and (max-height:900px){
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume{
top:488px!important;height:12px!important;
}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__mute{
width:12px!important;height:12px!important;top:0!important;border-radius:5px!important;
}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__mute span{
font-size:7px!important;line-height:10px!important;
}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume label{
left:18px!important;right:28px!important;top:0!important;height:12px!important;
}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input{
height:12px!important;
}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-runnable-track{height:3px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-thumb{width:10px!important;height:10px!important;margin-top:-3.5px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-moz-range-track{height:3px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-moz-range-thumb{width:10px!important;height:10px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume-value{
top:2px!important;font-size:8px!important;
}
}
/* 791–820 px. */
@media (min-height:791px) and (max-height:820px){
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume{
top:448px!important;height:22px!important;
}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__mute{width:22px!important;height:22px!important;top:0!important;border-radius:8px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__mute span{font-size:11px!important;line-height:20px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume label{left:30px!important;right:38px!important;top:0!important;height:22px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input{height:22px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-thumb{width:16px!important;height:16px!important;margin-top:-5.5px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-moz-range-thumb{width:16px!important;height:16px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume-value{top:5px!important;font-size:9px!important}
}
/* 761–790 px : ligne compacte, toujours après le cadre événements. */
@media (min-height:761px) and (max-height:790px){
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume{top:446px!important;height:9px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__mute,
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume-value{display:none!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume label{left:0!important;right:0!important;top:0!important;height:9px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input{height:9px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-runnable-track{height:3px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-thumb{width:8px!important;height:8px!important;margin-top:-2.5px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-moz-range-track{height:3px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-moz-range-thumb{width:8px!important;height:8px!important}
}
/* 721–760 px. */
@media (min-height:721px) and (max-height:760px){
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume{top:416px!important;height:8px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__mute,
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume-value{display:none!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume label{left:0!important;right:0!important;top:0!important;height:8px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input{height:8px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-runnable-track{height:2px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-thumb{width:7px!important;height:7px!important;margin-top:-2.5px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-moz-range-track{height:2px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-moz-range-thumb{width:7px!important;height:7px!important}
}
/* 661–720 px. */
@media (min-height:661px) and (max-height:720px){
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume{top:420px!important;height:10px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__mute,
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume-value{display:none!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume label{left:0!important;right:0!important;top:0!important;height:10px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input{height:10px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-runnable-track{height:2px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-thumb{width:8px!important;height:8px!important;margin-top:-3px!important}
}
@media (min-height:651px) and (max-height:660px){
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume{top:420px!important;height:4px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__mute,
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume-value{display:none!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume label{left:0!important;right:0!important;top:0!important;height:4px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input{height:4px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-runnable-track{height:2px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-thumb{width:5px!important;height:5px!important;margin-top:-1.5px!important}
}
/* <=660 px : contrainte géométrique forte. La barre reste après « Nos événements »
et devient volontairement très fine plutôt que de déplacer/écraser un cadre. */
@media (max-height:650px){
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume{top:386px!important;height:5px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__mute,
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume-value{display:none!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume label{left:0!important;right:0!important;top:0!important;height:5px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input{height:5px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-runnable-track{height:2px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-webkit-slider-thumb{width:6px!important;height:6px!important;margin-top:-2px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-moz-range-track{height:2px!important}
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume input::-moz-range-thumb{width:6px!important;height:6px!important}
}
@media (max-height:600px){
.skyvox-player.skyvox-iphone-portrait:not(.skyvox-ipad-portrait) .skyvox-player__volume{top:366px!important;height:4px!important}
}
/* iPad portrait : espace disponible suffisant, ligne volume complète et confortable. */
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__volume{
top:544px!important;height:44px!important;
}
@media (min-width:481px) and (max-height:1050px){
.skyvox-player.skyvox-iphone-portrait.skyvox-ipad-portrait .skyvox-player__volume{
top:494px!important;height:44px!important;
}
}
/* ===== 2.2.24 — Portrait iPhone/iPad : photo jusqu’au bord physique inférieur =====
Correctif ciblé pour iOS/PWA : 100dvh peut s’arrêter avant la zone basse réellement
capturée à l’écran. Le canvas portrait utilise donc le grand viewport (lvh/vh) pour
peindre la photo jusqu’en bas. Les positions/dimensions des cartes, du Play, de la
station, des événements et du volume ne sont pas modifiées. background-size:cover
conserve le ratio de la photo (aucune déformation). */
.skyvox-player.skyvox-iphone-portrait{
bottom:auto!important;
height:100vh!important;min-height:100vh!important;max-height:none!important;
background-image:url("../images/skyvox-iphone-portrait-bg.jpg")!important;
background-position:center bottom!important;background-size:cover!important;background-repeat:no-repeat!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__inner{
height:100vh!important;min-height:100vh!important;max-height:none!important;
background-position:center top!important,center bottom!important;
background-size:auto auto!important,cover!important;
background-repeat:no-repeat!important;
}
@supports (height:100lvh){
.skyvox-player.skyvox-iphone-portrait{height:100lvh!important;min-height:100lvh!important}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__inner{height:100lvh!important;min-height:100lvh!important}
}
/* ===== 2.2.25 — iOS/PWA portrait : suppression réelle de la bande basse =====
Cause corrigée : viewport-fit=cover doit être présent dans le initial.
Une fois le viewport iOS étendu aux safe areas, le lecteur est ancré par inset:0
au viewport lui-même (sans dépendre de vh/dvh/lvh). Aucun élément intérieur n'est
repositionné : Play, station, cartes événements et volume restent inchangés. */
html.skyvox-iphone-portrait-active,
body.skyvox-iphone-portrait-active,
html.skyvox-ipad-portrait-active,
body.skyvox-ipad-portrait-active{
margin:0!important;
padding:0!important;
width:100%!important;
height:100%!important;
min-height:100%!important;
max-height:none!important;
overflow:hidden!important;
background-color:#00142b!important;
background-image:url("../images/skyvox-iphone-portrait-bg.jpg")!important;
background-position:center bottom!important;
background-size:cover!important;
background-repeat:no-repeat!important;
}
.skyvox-player.skyvox-iphone-portrait{
position:fixed!important;
inset:0!important;
top:0!important;
right:0!important;
bottom:0!important;
left:0!important;
width:auto!important;
height:auto!important;
min-width:0!important;
min-height:0!important;
max-width:none!important;
max-height:none!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
background-color:#00142b!important;
background-image:url("../images/skyvox-iphone-portrait-bg.jpg")!important;
background-position:center bottom!important;
background-size:cover!important;
background-repeat:no-repeat!important;
}
.skyvox-player.skyvox-iphone-portrait .skyvox-player__inner{
position:absolute!important;
inset:0!important;
top:0!important;
right:0!important;
bottom:0!important;
left:0!important;
width:100%!important;
height:100%!important;
min-width:0!important;
min-height:0!important;
max-width:none!important;
max-height:none!important;
aspect-ratio:auto!important;
background-position:center top!important,center bottom!important;
background-size:auto auto!important,cover!important;
background-repeat:no-repeat!important;
}