*{box-sizing:border-box}
html{scroll-behavior:smooth}
:root{--title-font:"Clash Display",Inter,ui-sans-serif,system-ui,sans-serif}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#0d1a33;background:#f4f6fa}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
h1,h2,h3,h4,.section-title,.drawer-brand,.brand strong,.player-meta strong{font-family:var(--title-font)}
.shell{width:min(1500px,calc(100% - 48px));margin-inline:auto}

.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(165,183,216,.36)}
.header-inner{height:88px;width:100%;padding:0 24px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.brand{justify-self:center;display:flex;align-items:center}
.brand img{max-width:170px;max-height:58px;object-fit:contain}
.brand strong{font-size:24px;color:var(--primary);font-weight:700;letter-spacing:-.02em}
.pill{display:inline-flex;align-items:center;gap:9px;border:0;background:#fff;padding:12px 16px;border-radius:999px;box-shadow:0 8px 30px rgba(34,72,130,.1);font-weight:800;color:var(--primary);cursor:pointer}
.pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.menu-trigger{justify-self:start}.profile{justify-self:end}

.hero{min-height:610px;position:relative;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#f7f5eb 0,#eef3fb 58%,#f4f6fa 100%)}
.hero-media,.hero-shade{position:absolute;inset:0}
.hero-media{z-index:-3;overflow:hidden;background:linear-gradient(135deg,#f7f5eb,#eef3fb)}
.hero-cover,.hero-video{position:absolute;border:0;opacity:0;pointer-events:none}
.hero-cover{inset:-3%;width:106%;height:106%;object-fit:cover;filter:blur(7px) saturate(.9);transform:scale(1.035);transition:opacity .8s ease,transform 8s ease}
.hero-cover.visible{opacity:.34;transform:scale(1.07)}
.hero-video{top:50%;left:50%;width:177.77777778vh;height:56.25vw;min-width:100%;min-height:100%;transform:translate(-50%,-50%) scale(1.08);transition:opacity .7s ease;clip-path:inset(2px)}
.hero-video.visible{opacity:.4}
.hero-shade{z-index:-2;background:linear-gradient(90deg,rgba(245,248,252,.98) 0%,rgba(245,248,252,.87) 36%,rgba(245,248,252,.52) 64%,rgba(245,248,252,.38) 100%),linear-gradient(0deg,rgba(244,246,250,.86),rgba(244,246,250,.1) 46%,rgba(244,246,250,.22));backdrop-filter:saturate(.92)}
.hero-inner{display:flex;align-items:center;min-height:610px;position:relative;z-index:1}
.hero-copy{max-width:980px;padding:80px 0}
.live-badge{display:inline-flex;align-items:center;background:var(--primary-fill);color:#fff;border-radius:9px;padding:8px 12px;font-size:12px;font-weight:900;letter-spacing:.03em;box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 22%,transparent)}
.hero-current{display:flex;align-items:center;gap:26px;margin-top:18px}.hero-current-cover-wrap{width:148px;height:148px;flex:0 0 148px;border-radius:20px;overflow:hidden;box-shadow:0 18px 48px rgba(22,48,91,.22);background:rgba(255,255,255,.52)}.hero-current-cover-wrap[hidden]{display:none}.hero-current-cover{width:100%;height:100%;display:block;object-fit:cover}.now-playing{min-height:148px;display:flex;flex-direction:column;justify-content:center;will-change:transform,opacity,filter}
.now-playing h1{font-size:clamp(40px,4.5vw,66px);line-height:.96;color:var(--primary);margin:0 0 7px;letter-spacing:-.048em;font-weight:600;max-width:940px;text-wrap:balance}
.now-artist{font-family:var(--title-font);font-size:clamp(18px,1.8vw,26px);line-height:1.12;color:color-mix(in srgb,var(--primary) 78%,#36425a);font-weight:400;min-height:28px;letter-spacing:-.022em}
.now-playing.is-leaving{animation:titleOut .18s ease forwards}
.now-playing.is-entering{animation:titleIn .44s cubic-bezier(.2,.75,.25,1) forwards}
.listen-button{margin-top:34px;border:0;background:#fff;color:var(--primary);border-radius:999px;padding:14px 20px;display:inline-flex;align-items:center;gap:10px;font-weight:850;box-shadow:0 12px 34px rgba(43,75,121,.12);cursor:pointer}
.listen-button:disabled{opacity:.55;cursor:not-allowed}
.listen-button svg{width:16px;height:16px;fill:currentColor}
.listen-button .pause-icon{display:none}
.listen-button.playing .play-icon{display:none}
.listen-button.playing .pause-icon{display:block}

.section{padding:44px 0}
.section-title{font-size:50px;line-height:1;color:#d8e1f0;margin:0 0 4px;font-weight:600;letter-spacing:-.045em}
.carousel-shell{position:relative}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);grid-template-rows:1fr;overflow-x:auto;gap:16px;padding:4px 2px 10px;scrollbar-width:none;scroll-behavior:smooth;scroll-snap-type:x proximity}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.carousel-arrow{position:absolute;z-index:8;top:50%;width:46px;height:46px;border:1px solid rgba(20,47,92,.08);border-radius:50%;background:rgba(255,255,255,.94);color:var(--primary);box-shadow:0 12px 32px rgba(25,52,95,.18);display:grid;place-items:center;font-size:31px;line-height:1;cursor:pointer;transform:translateY(-50%);transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease;backdrop-filter:blur(12px)}
.carousel-arrow:hover:not(:disabled){transform:translateY(-50%) scale(1.07);box-shadow:0 16px 38px rgba(25,52,95,.24)}
.carousel-arrow:disabled{opacity:0;pointer-events:none}
.carousel-prev{left:-21px}.carousel-next{right:-21px}
.show-card{height:260px;min-width:220px;position:relative;border-radius:18px;overflow:hidden;background:#fff;border:1px solid #e7ebf2;box-shadow:0 10px 30px rgba(30,50,95,.08)}
.show-card img{width:100%;height:100%;object-fit:cover}
.show-card:has(img):after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,14,40,.86),rgba(4,14,40,0) 62%)}
.show-overlay{position:absolute;z-index:2;left:18px;right:18px;bottom:17px;color:#172340}
.show-card:has(img) .show-overlay{color:#fff}
.show-overlay h3{margin:8px 0 3px;font-size:23px;font-weight:600;letter-spacing:-.025em}
.show-overlay p{margin:0;opacity:.8}
.mini-badge,.replay{display:inline-block;background:rgba(7,20,71,.74);color:#fff;border-radius:6px;font-size:10px;font-weight:900;padding:5px 7px}
.show-card:not(:has(img)) .mini-badge{background:#edf2f9;color:var(--primary)}
.video-rail{grid-auto-columns:320px}
.video-card h3{color:var(--primary);font-size:18px;margin:10px 2px 4px;font-weight:600;letter-spacing:-.02em}
.video-card p{color:#7b879b;font-size:13px;margin:0 2px}
.media{height:180px;border-radius:16px;overflow:hidden;position:relative;background:#e7ebf3}
.media img{width:100%;height:100%;object-fit:cover}
.replay{position:absolute;right:9px;top:9px}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.news-card{min-height:260px;border-radius:18px;overflow:hidden;background:#fff;position:relative;box-shadow:0 10px 30px rgba(30,50,95,.07);border:1px solid #e7ebf2}
.news-card img{width:100%;height:210px;object-fit:cover}
.news-body{padding:20px}
.news-body h3{margin:0;color:#142143;font-size:23px;font-weight:600;letter-spacing:-.025em}
.news-body p{color:#758198;line-height:1.5;margin:8px 0 0}
.tracks-rail{grid-auto-columns:170px}
.track-card{min-width:170px;transition:transform .24s ease}
.track-art{width:170px;height:170px;position:relative;border-radius:16px;overflow:hidden;background:#e7ebf3;box-shadow:0 10px 28px rgba(24,52,98,.08);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}.track-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 54%,rgba(3,11,28,.48));opacity:.72;transition:opacity .3s ease}.track-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .35s ease}.track-time{position:absolute;z-index:2;top:9px;right:9px;background:var(--primary-fill);backdrop-filter:blur(7px);color:#fff;border:0;border-radius:7px;padding:6px 9px;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 24%,transparent)}.track-card:hover{transform:translateY(-5px)}.track-card:hover .track-art{box-shadow:0 18px 38px rgba(24,52,98,.18)}.track-card:hover img{transform:scale(1.065);filter:saturate(1.08)}.track-card:hover .track-art:after{opacity:.35}
.track-text{padding:8px 2px;display:flex;flex-direction:column;gap:3px}
.track-text strong{font-family:var(--title-font);color:var(--primary);font-size:15px;font-weight:600}
.track-text span{font-family:var(--title-font);font-size:12px;font-weight:450;letter-spacing:-.01em;color:#7b8797}
.track-card:not(:has(img)){background:#fff;border:1px solid #e6ebf3;border-radius:16px;padding:18px;min-height:120px;display:flex;align-items:end}
.podcast-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.podcast-card{min-height:360px;border-radius:18px;background:#10182c;color:white;overflow:hidden;display:flex;flex-direction:column}
.podcast-card img{width:100%;height:220px;object-fit:cover}
.podcast-body{padding:20px;display:flex;flex-direction:column;flex:1}
.podcast-body h3{font-size:21px;margin:0 0 8px;font-weight:600;letter-spacing:-.02em}
.podcast-body p{color:rgba(255,255,255,.65);font-size:13px;line-height:1.5;margin:0}
.podcast-play{margin-top:auto;align-self:flex-start;border:0;background:#fff;color:var(--primary);border-radius:999px;padding:9px 12px;font-weight:800;cursor:pointer}
.empty-bubble{background:#fff;border:1px solid #e2e8f2;border-radius:22px;padding:26px 30px;box-shadow:0 14px 40px rgba(30,57,97,.06);display:flex;flex-direction:column;gap:6px;color:#738097}
.empty-bubble strong{font-family:var(--title-font);color:#172340;font-size:19px;font-weight:600}
.empty-bubble.compact{padding:30px;min-height:150px;justify-content:center}

.footer{border-top:3px solid var(--primary);background:#fff;padding:62px 0 40px;margin-top:60px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.footer-grid>div:not(:first-child){border-left:1px solid #e3e8f1;padding-left:28px}
.footer-brand img{max-width:180px;max-height:70px;object-fit:contain}
.footer-brand h3{color:var(--primary);font-size:30px;margin:0;font-weight:600;letter-spacing:-.03em}
.footer-brand p{color:#6e7a90}
.footer-listen{background:var(--primary-fill);color:#fff;margin-top:14px}
.footer h4{color:var(--primary);text-transform:uppercase;font-size:13px;letter-spacing:.02em;margin:0 0 20px;font-weight:600}
.footer a,.footer span{display:block;margin:0 0 12px;color:#303a4c;font-size:14px}
.socials{display:flex;gap:8px;margin-top:18px}
.socials a{width:38px;height:38px;border:1px solid #d8e0ec;border-radius:50%;display:grid;place-items:center;color:var(--primary);font-size:10px;font-weight:900;margin:0}

.player{position:fixed;z-index:50;left:20px;right:20px;bottom:20px;width:auto;background:rgba(10,16,31,.95);color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:22px;box-shadow:0 18px 55px rgba(4,12,33,.32);transform:translateY(calc(100% + 40px));opacity:0;transition:transform .3s cubic-bezier(.22,.7,.3,1),opacity .22s ease;backdrop-filter:blur(22px);overflow:hidden}
.player.visible{transform:translateY(0);opacity:1}
.player-inner{width:100%;max-width:none;height:88px;padding:0 22px;display:grid;grid-template-columns:auto auto minmax(0,1fr) minmax(220px,360px) auto;gap:16px;align-items:center}
.player-play{width:52px;height:52px;border-radius:50%;border:0;background:var(--primary-fill);color:#fff;cursor:pointer;font-size:17px;display:grid;place-items:center;box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 28%,transparent)}
.player-cover{width:58px;height:58px;border-radius:10px;object-fit:cover;box-shadow:0 7px 20px rgba(0,0,0,.22)}
.player-cover[hidden]{display:none}
.player-meta{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;align-items:center;min-width:0}
.player-live{grid-row:1/span 2;align-self:center;background:var(--primary-fill);color:#fff;border-radius:7px;padding:6px 8px;font-size:9px!important;font-weight:900;letter-spacing:.04em;margin:0!important}
.player-meta strong,.player-meta>span:not(.player-live){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.player-meta strong{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.player-meta>span:not(.player-live){font-size:12px;color:#aeb9cc;margin-top:3px}
.player-volume{display:grid;grid-template-columns:auto minmax(0,1fr) 42px;gap:10px;align-items:center}
.player-volume svg{width:21px;height:21px;fill:none;stroke:#c5cede;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.player-volume input{width:100%;accent-color:var(--primary);cursor:pointer}
.player-volume span{font-size:12px;color:#c5cede;text-align:right;font-variant-numeric:tabular-nums}
.player-close{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:24px;line-height:1;display:grid;place-items:center}
.player-close:hover{background:rgba(255,255,255,.14)}
.player-restore{position:fixed;z-index:49;right:20px;bottom:20px;border:0;border-radius:999px;background:#10182c;color:#fff;padding:10px 14px;display:flex;align-items:center;gap:8px;box-shadow:0 12px 34px rgba(4,12,33,.28);cursor:pointer}
.player-restore[hidden]{display:none}
.player-restore span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--primary-fill);font-size:10px}
.player-restore strong{font-size:12px}

.drawer{position:fixed;z-index:60;left:0;top:0;bottom:0;width:min(360px,86vw);background:white;padding:32px;transform:translateX(-105%);transition:.28s;box-shadow:20px 0 60px rgba(23,42,81,.15)}
.drawer.open{transform:translateX(0)}
.drawer-close{float:right;border:0;background:#eef2f8;width:40px;height:40px;border-radius:50%;font-size:26px}
.drawer-brand{font-size:31px;color:var(--primary);font-weight:600;margin:75px 0 30px;letter-spacing:-.03em}
.drawer nav{display:flex;flex-direction:column;gap:4px}
.drawer nav a{font-family:var(--title-font);font-size:21px;font-weight:600;padding:14px;border-radius:12px}
.drawer nav a:hover{background:#f1f5fb;color:var(--primary)}
.drawer-backdrop{position:fixed;inset:0;z-index:55;background:rgba(7,18,42,.2);opacity:0;pointer-events:none;transition:.28s}
.drawer-backdrop.open{opacity:1;pointer-events:auto}

@keyframes titleOut{to{opacity:0;transform:translateY(-10px);filter:blur(6px)}}
@keyframes titleIn{from{opacity:0;transform:translateY(15px);filter:blur(7px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}

@media(max-width:920px){
  .hero,.hero-inner{min-height:590px}
  .hero-copy{padding:72px 0}
  .hero-shade{background:linear-gradient(90deg,rgba(245,248,252,.97),rgba(245,248,252,.7))}
  .news-grid{grid-template-columns:1fr 1fr}
  .podcast-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:not(:first-child){border-left:0;padding-left:0}
  .header-inner{grid-template-columns:auto 1fr auto;padding:0 18px}
  .brand img{max-width:130px}
  .profile span{display:none}
  .player-inner{grid-template-columns:auto auto minmax(0,1fr) auto}
  .player-volume{display:none}
}

@media(max-width:620px){
  .shell{width:min(100% - 28px,1500px)}
  .header-inner{width:100%;padding:0 14px}
  .topbar .pill{padding:11px 12px}.menu-trigger span{display:none}
  .hero,.hero-inner{min-height:500px}
  .hero-copy{padding:58px 0}
  .hero-shade{background:linear-gradient(90deg,rgba(245,248,252,.96),rgba(245,248,252,.72))}
  .hero-current{gap:15px;margin-top:16px}.hero-current-cover-wrap{width:104px;height:104px;flex-basis:104px;border-radius:15px}.now-playing{min-height:108px}
  .now-playing h1{font-size:clamp(32px,9.5vw,48px);letter-spacing:-.045em;margin:0 0 5px}
  .now-artist{font-size:clamp(16px,5vw,20px);min-height:22px}
  .section{padding:34px 0}
  .section-title{font-size:40px;margin-bottom:2px}
  .carousel-arrow{width:38px;height:38px;font-size:27px}
  .carousel-prev{left:4px}.carousel-next{right:4px}
  .news-grid,.podcast-grid,.footer-grid{grid-template-columns:1fr}
  .news-card{min-height:0}
  .footer{padding-top:48px}
  .player{left:10px;right:10px;bottom:10px;border-radius:18px}.player-inner{height:76px;padding:0 12px;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px}
  .player-play{width:44px;height:44px}
  .player-cover{width:46px;height:46px;border-radius:8px}
  .player-meta{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .player-live{display:none!important}
  .player-meta strong{font-size:16px}
  .player-meta>span:not(.player-live){font-size:11px;margin:0}
  .player-close{width:34px;height:34px;font-size:21px}
}

/* ===== v1.5 : hero / votes / classement ===== */
.header-spacer{display:block;justify-self:end;width:1px;height:1px}

/* Le media et son overlay couvrent réellement toute la largeur du viewport,
   même si le hero se trouve dans une mise en page avec des conteneurs centrés. */
.hero-media,.hero-shade{left:50%;right:auto;width:100vw;transform:translateX(-50%)}
.hero-media{overflow:hidden}
.hero-video{top:50%;left:50%;width:100%;height:100%;min-width:0;min-height:0;transform:translate(-50%,-50%);clip-path:none;object-fit:cover;will-change:opacity,width,height}
.hero-video.visible{opacity:.38}
.hero-cover{inset:-5%;width:110%;height:110%;filter:blur(8px) saturate(.9)}
.hero-shade{background:linear-gradient(90deg,rgba(245,248,252,.98) 0%,rgba(245,248,252,.9) 31%,rgba(245,248,252,.58) 58%,rgba(245,248,252,.38) 100%),linear-gradient(0deg,rgba(244,246,250,.88),rgba(244,246,250,.12) 46%,rgba(244,246,250,.22))}

.hero-inner{justify-content:space-between;gap:38px}
.hero-copy{flex:1 1 auto;min-width:0;max-width:1040px}
.hero-actions{display:flex;align-items:center;gap:10px;margin-top:26px}
.hero-actions .listen-button{margin-top:0}
.listen-button{padding:11px 17px;font-size:14px;gap:8px}
.listen-button svg{width:14px;height:14px}

.like-button{border:1px solid rgba(19,67,143,.08);background:rgba(255,255,255,.92);color:var(--primary);border-radius:999px;padding:10px 14px;display:inline-flex;align-items:center;gap:7px;font-weight:800;box-shadow:0 10px 28px rgba(35,66,115,.11);cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease,opacity .18s ease}
.like-button[hidden]{display:none}
.like-button:hover:not(:disabled){transform:translateY(-2px)}
.like-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;transition:fill .18s ease,transform .18s ease}
.like-button.liked{background:var(--primary-fill);color:#fff}
.like-button.liked svg{fill:currentColor;transform:scale(1.08)}
.like-button:disabled{cursor:default}
.like-button.sending{opacity:.6}

.hero-ranking{flex:0 0 330px;align-self:center;background:rgba(9,17,35,.77);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:18px 18px 15px;box-shadow:0 24px 60px rgba(7,17,39,.22);backdrop-filter:blur(18px);overflow:hidden}
.hero-ranking[hidden]{display:none}
.hero-ranking.ranking-pop{animation:rankingPop .52s cubic-bezier(.2,.75,.2,1)}
.hero-ranking-head,.hero-ranking-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero-ranking-head>span{font-size:10px;font-weight:900;letter-spacing:.12em;color:rgba(255,255,255,.62)}
.hero-ranking-head strong{font-family:var(--title-font);font-size:30px;line-height:1;color:#fff;font-weight:600}
.ranking-roulette-window{height:58px;overflow:hidden;margin:14px -4px 12px;padding:0 4px;mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%)}
.ranking-roulette{will-change:transform}
.roulette-row{height:58px;display:flex;align-items:center;gap:12px;opacity:.45;filter:blur(.4px);transition:opacity .2s ease}
.roulette-row.current{opacity:1;filter:none}
.roulette-rank{width:46px;flex:0 0 46px;font-family:var(--title-font);font-size:20px;font-weight:600;color:#8fb5ff}
.roulette-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.roulette-copy strong,.roulette-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roulette-copy strong{font-family:var(--title-font);font-size:16px;font-weight:600;letter-spacing:-.01em}
.roulette-copy small{font-size:11px;color:rgba(255,255,255,.58)}
.hero-ranking-foot{border-top:1px solid rgba(255,255,255,.12);padding-top:11px;font-size:11px}
.hero-ranking-foot span{color:rgba(255,255,255,.62)}
.hero-ranking-foot a{font-weight:800;color:#fff}

.section-title{margin-bottom:0}
.section-heading-row{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:0}
.section-link{display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-size:13px;font-weight:850;padding:8px 0;white-space:nowrap}
.section-link span{font-size:18px;line-height:1}

.ranking-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding-top:4px}
.ranking-card{position:relative;min-width:0;background:#fff;border:1px solid #e3e9f2;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(28,52,94,.07);transition:transform .22s ease,box-shadow .22s ease}
.ranking-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(28,52,94,.14)}
.ranking-card>img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.ranking-card:hover>img{transform:scale(1.045)}
.ranking-number{position:absolute;z-index:2;top:10px;left:10px;background:rgba(0,0,0,.68);color:#fff;border-radius:8px;padding:6px 9px;font-family:var(--title-font);font-weight:600;font-size:14px;backdrop-filter:blur(7px)}
.ranking-card:not(:has(img)){min-height:210px;display:flex;align-items:end;background:linear-gradient(145deg,#fff,#edf3ff)}
.ranking-card-copy{padding:12px 13px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ranking-card-copy strong,.ranking-card-copy span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking-card-copy strong{font-family:var(--title-font);font-size:16px;color:#17223d;font-weight:600;letter-spacing:-.015em}
.ranking-card-copy span{font-size:12px;color:#748096}
.ranking-card-copy small{font-size:11px;color:var(--primary);font-weight:800;margin-top:5px}

.ranking-page{padding:72px 0 100px}
.ranking-page-head{max-width:740px;margin-bottom:28px}
.ranking-kicker{display:inline-flex;background:var(--primary-fill);color:#fff;border-radius:8px;padding:7px 10px;font-size:10px;font-weight:900;letter-spacing:.1em}
.ranking-page-head h1{font-size:clamp(54px,7vw,92px);line-height:.92;color:var(--primary);font-weight:600;letter-spacing:-.055em;margin:17px 0 14px}
.ranking-page-head p{font-size:16px;line-height:1.6;color:#738097;margin:0}
.ranking-list{display:flex;flex-direction:column;gap:10px}
.ranking-list-item{display:grid;grid-template-columns:70px auto minmax(0,1fr) auto;align-items:center;gap:16px;background:#fff;border:1px solid #e4eaf3;border-radius:18px;padding:12px 18px;box-shadow:0 8px 28px rgba(28,52,94,.055);transition:transform .2s ease,box-shadow .2s ease}
.ranking-list-item:hover{transform:translateX(4px);box-shadow:0 14px 34px rgba(28,52,94,.1)}
.ranking-list-item.top-three{border-color:color-mix(in srgb,var(--primary) 22%,#e4eaf3)}
.ranking-list-position{display:inline-flex;align-items:center;justify-content:center;justify-self:center;min-width:52px;padding:8px 10px;border-radius:10px;background:var(--primary-fill);font-family:var(--title-font);font-size:22px;font-weight:650;line-height:1;color:#fff;text-align:center;box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 22%,transparent)}
.ranking-list-item>img{width:66px;height:66px;border-radius:11px;object-fit:cover}
.ranking-list-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.ranking-list-copy strong{font-family:var(--title-font);font-size:21px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking-list-copy span{font-family:var(--title-font);font-size:13px;font-weight:450;letter-spacing:-.01em;color:#778398;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking-list-votes{text-align:right;min-width:72px}
.ranking-list-votes strong{display:block;font-family:var(--title-font);font-size:25px;color:var(--primary);font-weight:600}
.ranking-list-votes span{font-size:10px;color:#8490a3;text-transform:uppercase;font-weight:800;letter-spacing:.05em}
.ranking-back{justify-self:start}

@keyframes rankingPop{from{opacity:0;transform:translateX(28px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}

@media(max-width:1180px){
  .hero-ranking{flex-basis:290px}
  .ranking-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:920px){
  .hero-inner{display:block}
  .hero-ranking{position:absolute;right:18px;bottom:18px;width:min(300px,42vw);padding:14px}
  .hero-ranking-head strong{font-size:25px}
  .ranking-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:620px){
  .hero-media,.hero-shade{width:100vw}
  .hero-shade{background:linear-gradient(90deg,rgba(245,248,252,.97),rgba(245,248,252,.78))}
  .hero-actions{margin-top:20px;gap:8px;flex-wrap:wrap}
  .listen-button{padding:10px 15px;font-size:13px}
  .like-button{padding:9px 12px;font-size:12px}
  .hero-ranking{position:absolute;left:14px;right:14px;bottom:12px;width:auto;max-width:none}
  .hero-copy{padding-bottom:168px}
  .ranking-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .section-heading-row{align-items:center}
  .section-link{font-size:12px}
  .ranking-page{padding:48px 0 70px}
  .ranking-page-head h1{font-size:54px}
  .ranking-list-item{grid-template-columns:52px auto minmax(0,1fr) auto;gap:10px;padding:10px 11px}
  .ranking-list-position{font-size:23px}
  .ranking-list-item>img{width:54px;height:54px}
  .ranking-list-copy strong{font-size:17px}
  .ranking-list-votes{min-width:48px}
  .ranking-list-votes strong{font-size:20px}
}

/* ===== v1.6 : player / likes / classement hero / clip YouTube ===== */
.hero-current{gap:30px}
.hero-current-cover-wrap{width:184px;height:184px;flex:0 0 184px;border-radius:22px}
.now-playing{min-height:184px}
.listen-button,.like-button{font-size:14px}
.like-button{padding:11px 15px}

/* Le lecteur vidéo est volontairement surdimensionné : les zones d'interface
   YouTube restent hors du cadre et l'iframe demeure totalement non interactive. */
.hero-video{transform:translate(-50%,-50%) scale(1.2)!important;pointer-events:none!important}
.hero-video.visible{opacity:.36}
.hero-media:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(245,248,252,.12) 0,transparent 14%,transparent 78%,rgba(245,248,252,.18) 100%)}

/* Classement animé du hero */
.hero-ranking{flex:0 0 430px;background:rgba(8,16,34,.48);border-color:rgba(255,255,255,.2);border-radius:26px;padding:18px 20px;box-shadow:0 26px 68px rgba(7,17,39,.16);backdrop-filter:blur(22px) saturate(1.05)}
.hero-ranking-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-ranking-head>span{font-size:11px}
.hero-ranking-cover-wrap{width:74px;height:74px;border-radius:15px;overflow:hidden;flex:0 0 74px;box-shadow:0 10px 28px rgba(0,0,0,.24);background:rgba(255,255,255,.12)}
.hero-ranking-cover-wrap[hidden]{display:none}
.hero-ranking-cover{width:100%;height:100%;object-fit:cover;display:block}
.ranking-roulette-window{margin:11px -4px 1px;height:62px}
.roulette-row{height:62px;gap:13px}
.roulette-rank{width:50px;flex-basis:50px;font-size:20px}
.roulette-copy strong{font-size:17px}

/* Player flottant plus léger et plus transparent */
.player{background:rgba(8,14,28,.72);border-color:rgba(255,255,255,.12);box-shadow:0 18px 55px rgba(4,12,33,.24);backdrop-filter:blur(28px) saturate(1.15);overflow:visible}
.player-inner{position:relative;grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:15px}
.player-live{position:absolute;top:-13px;left:22px;grid-row:auto;align-self:auto;margin:0!important;border:1px solid rgba(255,255,255,.18);box-shadow:0 7px 20px rgba(3,10,25,.18)}
.player-volume{display:grid;grid-template-columns:34px 138px;gap:8px;align-items:center;justify-self:end}
.player-volume input{width:138px}
.player-mute{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:#d7dfec;display:grid;place-items:center;cursor:pointer;transition:background .18s ease,color .18s ease}
.player-mute:hover{background:rgba(255,255,255,.09);color:#fff}
.player-mute svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.player-mute .volume-x{display:none}
.player-mute.muted .volume-waves{display:none}
.player-mute.muted .volume-x{display:block}
.player-mute.muted{background:rgba(255,255,255,.1);color:#fff}
.player-close{font-size:0;display:grid;place-items:center;padding:0}
.player-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

@media(max-width:1180px){
  .hero-ranking{flex-basis:370px}
}
@media(max-width:920px){
  .hero-current-cover-wrap{width:156px;height:156px;flex-basis:156px}.now-playing{min-height:156px}
  .hero-ranking{width:min(360px,45vw)}
  .player-inner{grid-template-columns:auto auto minmax(0,1fr) auto}
  .player-volume{display:none}
}
@media(max-width:620px){
  .hero-current-cover-wrap{width:118px;height:118px;flex-basis:118px;border-radius:16px}.now-playing{min-height:118px}
  .listen-button,.like-button{font-size:13px}
  .hero-ranking{left:14px;right:14px;width:auto}
  .hero-ranking-cover-wrap{width:58px;height:58px;flex-basis:58px;border-radius:12px}
  .player-live{display:none!important}
}


/* ===== v1.7 : header hero transparent / classement contextuel / clip sans flash ===== */
.home-page .topbar{position:absolute;top:0;left:0;right:0;z-index:30;background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.home-page .header-inner{position:relative;z-index:2}
.home-page .pill{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.38);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);box-shadow:0 9px 28px rgba(18,38,73,.1)}
.home-page .brand img{filter:drop-shadow(0 4px 14px rgba(255,255,255,.45))}
.home-page .hero{padding-top:20px}

/* L'iframe n'est rendue visible qu'après confirmation de l'état PLAYING.
   Aucun timer de secours ne révèle un écran YouTube encore muni de boutons. */
.hero-video{opacity:0!important;pointer-events:none!important}
.hero-video.visible{opacity:.38!important}
.hero.cover-only .hero-cover.visible{opacity:.68;filter:blur(3px) saturate(1.03);transform:scale(1.045)}
.hero.cover-only .hero-shade{background:linear-gradient(90deg,rgba(245,248,252,.89) 0%,rgba(245,248,252,.74) 34%,rgba(245,248,252,.34) 65%,rgba(245,248,252,.20) 100%),linear-gradient(0deg,rgba(244,246,250,.68),rgba(244,246,250,.05) 48%,rgba(244,246,250,.11))}
.hero.video-active .hero-cover.visible{opacity:.20;filter:blur(8px) saturate(.92)}

/* Classement contextuel du hero : aucun grand bloc principal. */
.hero-ranking{flex:0 0 470px;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;backdrop-filter:none!important;overflow:visible!important}
.ranking-neighbors{display:flex;flex-direction:column;gap:9px;perspective:900px}
.hero-rank-item{display:flex;align-items:center;gap:13px;min-height:78px;padding:9px 13px 9px 9px;border-radius:18px;color:#fff;background:rgba(8,16,34,.24);border:1px solid rgba(255,255,255,.13);box-shadow:0 12px 32px rgba(7,17,39,.10);backdrop-filter:blur(18px) saturate(1.05);-webkit-backdrop-filter:blur(18px) saturate(1.05);animation:rankNeighborIn .52s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--rank-delay,0ms);transition:opacity .25s ease,transform .25s ease,background .25s ease}
.hero-rank-item.previous,.hero-rank-item.next{opacity:.42;filter:saturate(.75)}
.hero-rank-item.previous{transform:scale(.965);transform-origin:right bottom}
.hero-rank-item.next{transform:scale(.965);transform-origin:right top}
.hero-rank-item.current{min-height:94px;padding:10px 15px 10px 10px;background:color-mix(in srgb,var(--primary) 88%,transparent);border-color:color-mix(in srgb,#fff 32%,var(--primary));opacity:1;filter:none;box-shadow:0 18px 42px color-mix(in srgb,var(--primary) 24%,transparent)}
.hero-rank-art{position:relative;width:60px;height:60px;flex:0 0 60px;border-radius:13px;overflow:hidden;background:rgba(255,255,255,.10);box-shadow:0 7px 20px rgba(0,0,0,.17)}
.hero-rank-item.current .hero-rank-art{width:72px;height:72px;flex-basis:72px;border-radius:15px}
.hero-rank-art img{width:100%;height:100%;object-fit:cover;display:block}
.hero-rank-art.no-cover{background:rgba(255,255,255,.10)}
.hero-rank-position{position:absolute;z-index:2;left:6px;top:6px;padding:4px 6px;border-radius:6px;background:rgba(0,0,0,.62);color:#fff;font-family:var(--title-font);font-size:11px;font-weight:600;line-height:1;backdrop-filter:blur(6px)}
.hero-rank-item.current .hero-rank-position{font-size:13px;padding:5px 7px}
.hero-rank-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.hero-rank-copy strong,.hero-rank-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-rank-copy strong{font-family:var(--title-font);font-size:16px;line-height:1.08;font-weight:600;letter-spacing:-.015em}
.hero-rank-copy small{font-size:11px;color:rgba(255,255,255,.67)}
.hero-rank-item.current .hero-rank-copy strong{font-size:21px}
.hero-rank-item.current .hero-rank-copy small{font-size:12px;color:rgba(255,255,255,.82)}
@keyframes rankNeighborIn{from{opacity:0;transform:translateY(22px) rotateX(-9deg)}to{}}

/* Classement d'accueil présenté comme les derniers titres, sans compteur de votes. */
.ranking-rail{grid-auto-columns:170px}
.ranking-track-card{min-width:170px}
.ranking-track-art{position:relative}
.ranking-position{position:absolute;z-index:3;top:9px;left:9px;background:var(--primary-fill);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color:#fff;border-radius:7px;padding:6px 8px;font-family:var(--title-font);font-size:12px;font-weight:600;line-height:1;box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 24%,transparent)}
.ranking-track-card .track-text strong{color:var(--primary)}
.ranking-track-card:not(:has(img)){min-height:170px}

/* Le classement public détaillé n'affiche plus les votes. */
.ranking-list-item{grid-template-columns:70px auto minmax(0,1fr)}
.ranking-list-votes{display:none!important}

@media(max-width:1180px){.hero-ranking{flex-basis:420px}}
@media(max-width:920px){
  .home-page .topbar{position:absolute}
  .hero-ranking{position:absolute;right:18px;bottom:18px;width:min(390px,46vw)}
  .hero-rank-item{min-height:68px}.hero-rank-item.current{min-height:82px}
  .hero-rank-art{width:52px;height:52px;flex-basis:52px}.hero-rank-item.current .hero-rank-art{width:64px;height:64px;flex-basis:64px}
}
@media(max-width:620px){
  .home-page .header-inner{height:74px}
  .home-page .hero{padding-top:0}
  .hero-ranking{left:14px;right:14px;bottom:12px;width:auto}
  .hero-rank-item{min-height:58px;padding:7px 10px 7px 7px;border-radius:14px;gap:10px}
  .hero-rank-item.current{min-height:70px;padding:8px 11px 8px 8px}
  .hero-rank-art{width:44px;height:44px;flex-basis:44px;border-radius:10px}.hero-rank-item.current .hero-rank-art{width:54px;height:54px;flex-basis:54px;border-radius:12px}
  .hero-rank-copy strong{font-size:14px}.hero-rank-item.current .hero-rank-copy strong{font-size:17px}
  .hero-rank-copy small{font-size:10px}.hero-rank-item.current .hero-rank-copy small{font-size:11px}
  .ranking-list-item{grid-template-columns:52px auto minmax(0,1fr)}
}


/* ===== v1.8 : finitions hero / player / carrousels / YouTube ===== */
.home-page .hero{padding-top:96px}
.home-page .hero-inner{min-height:610px}

/* Badge EN DIRECT directement sur la bordure haute de la pochette. */
.hero-current-cover-wrap{position:relative;overflow:visible;background:transparent;box-shadow:none}
.hero-current-cover{border-radius:22px;box-shadow:0 18px 48px rgba(22,48,91,.22)}
.hero-current-cover-wrap .live-badge{position:absolute;z-index:6;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 11px;border-radius:8px;box-shadow:0 9px 24px color-mix(in srgb,var(--primary) 24%,transparent)}

/* Le clip est traité comme un fond décoratif et non comme un lecteur. */
.hero-video{max-width:none!important;max-height:none!important;transform:translate(-50%,-50%)!important}

.carousel-arrow[hidden]{display:none!important}

/* Player plus clair, badge sans contour et métadonnées en deux lignes Clash Display. */
.player{background:rgba(40,52,76,.72);border-color:rgba(255,255,255,.10);box-shadow:0 18px 55px rgba(4,12,33,.20);backdrop-filter:blur(30px) saturate(1.12);-webkit-backdrop-filter:blur(30px) saturate(1.12)}
.player-live{border:0!important;outline:0!important;box-shadow:0 7px 20px rgba(3,10,25,.14)}
.player-meta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0}
.player-meta strong,.player-meta>span:not(.player-live){font-family:var(--title-font);display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-meta strong{font-size:18px;font-weight:600;line-height:1.05;letter-spacing:-.018em;color:#fff}
.player-meta>span:not(.player-live){font-size:13px;font-weight:400;line-height:1.1;color:rgba(255,255,255,.68);margin:2px 0 0}

@media(max-width:920px){
  .home-page .hero{padding-top:86px}
  .hero-current-cover{border-radius:20px}
}
@media(max-width:620px){
  .home-page .hero{padding-top:74px}
  .hero-current-cover{border-radius:16px}
  .hero-current-cover-wrap .live-badge{top:-10px;font-size:10px;padding:6px 9px}
  .player-meta strong{font-size:16px}
  .player-meta>span:not(.player-live){font-size:11px}
}


/* ===== v1.9 : raccourcis discrets vers les plateformes du titre en cours ===== */
.track-platforms{display:inline-flex;align-items:center;gap:7px;margin-left:3px}
.track-platforms[hidden]{display:none!important}
.track-platform-link{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.70);border:1px solid rgba(255,255,255,.48);color:color-mix(in srgb,var(--primary) 86%,#273651);box-shadow:0 7px 20px rgba(20,45,85,.08);backdrop-filter:blur(13px) saturate(1.08);-webkit-backdrop-filter:blur(13px) saturate(1.08);transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.track-platform-link:hover{transform:translateY(-2px) scale(1.04);background:var(--primary-fill);color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 22%,transparent)}
.track-platform-link:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 25%,transparent);outline-offset:2px}
.track-platform-link svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.track-platform-link[data-platform="deezer"] svg,.track-platform-link[data-platform="youtube"] svg,.track-platform-link[data-platform="itunes"] svg{fill:currentColor;stroke:none}
.track-platform-link[data-platform="youtube"] .platform-play{fill:#fff;stroke:none}
.hero-actions{flex-wrap:wrap}
@media(max-width:620px){
  .track-platforms{gap:6px;margin-left:0}
  .track-platform-link{width:32px;height:32px;flex-basis:32px}
  .track-platform-link svg{width:15px;height:15px}
}

/* ===== v1.10 : player discret / historique 30 jours / finitions titres ===== */
.track-card .track-text{padding:9px 2px 0;align-items:flex-start}
.track-card .track-text strong{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-card .track-text span{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Player flottant compact : une petite capsule vitrée, moins présente à l'écran. */
.player{
  left:50%;right:auto;bottom:14px;
  width:min(760px,calc(100% - 28px));
  color:#14213a;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(107,128,165,.18);
  border-radius:18px;
  box-shadow:0 14px 38px rgba(25,45,79,.14);
  backdrop-filter:blur(24px) saturate(1.14);
  -webkit-backdrop-filter:blur(24px) saturate(1.14);
  transform:translate(-50%,calc(100% + 34px));
  overflow:visible;
}
.player.visible{transform:translate(-50%,0)}
.player-inner{
  width:100%;max-width:none;height:64px;margin:0;padding:8px 10px 8px 9px;
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:10px;align-items:center;
}
.player-play{width:42px;height:42px;font-size:13px;box-shadow:none}
.player-cover{width:42px;height:42px;border-radius:9px;box-shadow:0 5px 14px rgba(23,42,72,.12)}
.player-meta{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding-top:1px;min-width:0}
.player-meta strong{font-family:var(--title-font);font-size:14px!important;line-height:1.05;font-weight:600;color:#14213a!important;letter-spacing:-.015em}
.player-meta>span:not(.player-live){font-family:var(--title-font);font-size:11px!important;line-height:1.08;font-weight:400;color:#758198!important;margin:2px 0 0!important}
.player-live{
  position:absolute!important;top:-16px!important;left:0!important;
  padding:3px 7px!important;border:0!important;border-radius:999px!important;
  background:var(--primary-fill)!important;color:#fff!important;
  font-size:7px!important;line-height:1!important;letter-spacing:.06em!important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 20%,transparent)!important;
}
.player-volume{display:grid;grid-template-columns:28px 92px;gap:6px;align-items:center;justify-self:end}
.player-volume input{width:92px;height:3px;accent-color:var(--primary)}
.player-mute{width:28px;height:28px;color:#68768e}
.player-mute:hover,.player-mute.muted{background:#eef2f8;color:var(--primary)}
.player-mute svg{width:17px;height:17px}
.player-close{width:28px;height:28px;background:transparent;color:#7c8799}
.player-close:hover{background:#eef2f8;color:#27354d}
.player-close svg{width:14px;height:14px}
.player-restore{right:14px;bottom:14px;padding:7px;background:rgba(255,255,255,.9);color:#172340;border:1px solid rgba(107,128,165,.16);box-shadow:0 10px 28px rgba(25,45,79,.13);backdrop-filter:blur(18px)}
.player-restore span{width:30px;height:30px}
.player-restore strong{display:none}

/* Page des titres diffusés */
.history-page{padding:68px 0 100px}
.history-page-head{max-width:820px;margin-bottom:24px}
.history-page-head h1{font-family:var(--title-font);font-size:clamp(52px,7vw,88px);line-height:.93;color:var(--primary);font-weight:600;letter-spacing:-.052em;margin:16px 0 12px}
.history-page-head p{font-size:15px;line-height:1.6;color:#748096;margin:0;max-width:760px}
.history-filter{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:25px 0 24px;padding:14px;background:rgba(255,255,255,.78);border:1px solid #e2e8f2;border-radius:18px;box-shadow:0 10px 30px rgba(30,57,97,.05)}
.history-filter label{display:flex;flex-direction:column;gap:6px}
.history-filter label>span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:850;color:#77849a;padding-left:3px}
.history-filter input,.history-filter select{height:42px;border:1px solid #dfe6f0;border-radius:11px;background:#fff;color:#1b2942;padding:0 12px;outline:none;min-width:180px}
.history-filter input:focus,.history-filter select:focus{border-color:color-mix(in srgb,var(--primary) 45%,#dfe6f0);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent)}
.history-filter-submit,.history-filter-reset{height:42px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 15px;font-weight:800;font-size:13px}
.history-filter-submit{border:0;background:var(--primary-fill);color:#fff;cursor:pointer}
.history-filter-reset{border:1px solid #dfe6f0;background:#fff;color:#607089}
.history-results-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 2px 10px;color:#8894a7;font-size:12px}
.history-results-head strong{font-family:var(--title-font);font-size:15px;color:#26354e;font-weight:600}
.history-list{display:flex;flex-direction:column;gap:8px}
.history-row{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:14px;padding:9px 12px 9px 9px;background:rgba(255,255,255,.82);border:1px solid #e5eaf2;border-radius:16px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.history-row:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 18%,#e5eaf2);box-shadow:0 9px 26px rgba(30,57,97,.07)}
.history-cover-wrap{width:70px;height:70px;position:relative;border-radius:12px;overflow:hidden;background:#e7ebf3}
.history-cover{width:100%;height:100%;object-fit:cover;display:block}
.history-cover-empty{background:linear-gradient(135deg,#e9edf4,#dfe6f0)}
.history-time{position:absolute;right:5px;top:5px;background:var(--primary-fill);color:#fff;border-radius:6px;padding:4px 6px;font-size:9px;font-weight:850;backdrop-filter:blur(6px);box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 22%,transparent)}
.history-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.history-copy strong{font-family:var(--title-font);font-size:17px;line-height:1.08;color:var(--primary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-copy span{font-family:var(--title-font);font-size:13px;color:#6f7c91;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-copy small{font-size:10px;color:#a0aaba;margin-top:3px}
.history-platforms{display:flex;align-items:center;gap:6px}
.history-platform-link{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#f2f5f9;color:var(--primary);transition:background .18s ease,color .18s ease,transform .18s ease}
.history-platform-link:hover{background:var(--primary-fill);color:#fff;transform:translateY(-1px)}
.history-platform-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.history-platform-link svg.filled{fill:currentColor;stroke:none}

@media(max-width:760px){
  .player{bottom:9px;width:calc(100% - 18px);border-radius:16px}
  .player-inner{height:60px;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px;padding:7px 9px}
  .player-volume{display:none}
  .player-play{width:40px;height:40px}
  .player-cover{width:40px;height:40px}
  .player-meta strong{font-size:13px!important}.player-meta>span:not(.player-live){font-size:10px!important}
  .player-live{top:-14px!important}
  .history-page{padding:44px 0 70px}
  .history-page-head h1{font-size:52px}
  .history-filter{align-items:stretch}
  .history-filter label{flex:1 1 180px}
  .history-filter input,.history-filter select{width:100%;min-width:0}
  .history-row{grid-template-columns:58px minmax(0,1fr);gap:11px}
  .history-cover-wrap{width:58px;height:58px;border-radius:10px}
  .history-platforms{grid-column:2;justify-content:flex-start;margin-top:2px}
  .history-copy strong{font-size:15px}.history-copy span{font-size:12px}
}

/* ===== v1.11 : titrage hero / clip plein hero / badge player ===== */
/* Titre en cours : Clash Display + dégradé automatiquement dérivé de la couleur principale. */
.now-playing h1{
  font-family:var(--title-font);
  font-weight:700;
  font-size:clamp(38px,4vw,62px);
  line-height:.98;
  background:var(--primary-fill);
  background:linear-gradient(to top right,
    color-mix(in srgb,var(--primary) 84%,white 16%) 0%,
    color-mix(in srgb,var(--primary) 86%,black 14%) 28%,
    color-mix(in srgb,var(--primary) 94%,white 6%) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  white-space:nowrap;
  overflow:hidden;
  /* Pas de fondu permanent en fin de titre : il donnait un effet d’ombre
     sur les derniers caractères, même lorsque le titre tenait entièrement. */
  -webkit-mask-image:none;
  mask-image:none;
  padding-top:.1em;
  padding-bottom:.14em;
  margin-top:-.1em;
  margin-bottom:-.14em;
  width:min(940px,100%);
  max-width:100%;
  letter-spacing:-.048em;
}

/* Le badge du direct dans le hero utilise lui aussi Clash Display. */
.hero-current-cover-wrap .live-badge{
  font-family:var(--title-font);
  font-weight:700;
  letter-spacing:.035em;
}

/* Clip réellement bord à bord : le fond du hero reste la pochette pendant
   l'initialisation, ce qui évite toute bande noire/vidéo vide. */
.hero-media{inset:0!important;background:transparent!important}
.hero-video{
  position:absolute!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  transform:translate(-50%,-50%)!important;
  clip-path:none!important;
  border:0!important;
  background:transparent!important;
  pointer-events:none!important;
}
.hero-video.visible{opacity:.38!important}

/* Badge EN DIRECT du player posé sur sa bordure haute. */
.player-inner{position:relative}
.player-meta{position:static!important}
.player-live{
  display:inline-flex!important;
  align-items:center;
  position:absolute!important;
  top:0!important;
  left:110px!important;
  transform:translateY(-50%);
  margin:0!important;
  z-index:5;
  font-family:var(--title-font);
}

@media(max-width:760px){
  .player-live{left:103px!important;top:0!important;font-size:7px!important}
}
@media(max-width:620px){
  .now-playing h1{font-size:clamp(34px,10vw,48px);width:100%}
}


/* ===== v1.12 : correction media hero + respiration du titrage ===== */
/* Le hero est déjà pleine largeur : on supprime le recentrage en 100vw et le
   backdrop-filter du voile qui pouvaient créer une cassure verticale au milieu. */
.hero-media,
.hero-shade{
  inset:0!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
}
.hero-media{
  overflow:hidden!important;
  background:linear-gradient(135deg,#f7f5eb,#eef3fb)!important;
}
.hero-shade{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:
    linear-gradient(90deg,
      rgba(245,248,252,.95) 0%,
      rgba(245,248,252,.84) 30%,
      rgba(245,248,252,.56) 56%,
      rgba(245,248,252,.34) 100%),
    linear-gradient(0deg,
      rgba(244,246,250,.76) 0%,
      rgba(244,246,250,.08) 48%,
      rgba(244,246,250,.14) 100%)!important;
}
.hero.cover-only .hero-shade{
  background:
    linear-gradient(90deg,
      rgba(245,248,252,.88) 0%,
      rgba(245,248,252,.70) 31%,
      rgba(245,248,252,.32) 62%,
      rgba(245,248,252,.17) 100%),
    linear-gradient(0deg,
      rgba(244,246,250,.59) 0%,
      rgba(244,246,250,.04) 50%,
      rgba(244,246,250,.08) 100%)!important;
}
.hero.video-active .hero-shade{
  background:
    linear-gradient(90deg,
      rgba(245,248,252,.94) 0%,
      rgba(245,248,252,.80) 29%,
      rgba(245,248,252,.49) 55%,
      rgba(245,248,252,.28) 100%),
    linear-gradient(0deg,
      rgba(244,246,250,.70) 0%,
      rgba(244,246,250,.05) 50%,
      rgba(244,246,250,.10) 100%)!important;
}
.hero-video{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center center!important;
  border:0!important;
  clip-path:none!important;
  pointer-events:none!important;
}
.hero-video.visible{opacity:.40!important}
.hero-media:after{inset:0!important}

/* Clash Display est naturellement très serrée : on garde le rendu compact,
   mais avec davantage d'air entre les lettres. */
.now-playing h1{
  letter-spacing:-.018em!important;
}

@media(max-width:620px){
  .now-playing h1{letter-spacing:-.012em!important}
}


/* ===== v1.13 : suppression de l’ombre/fondu en fin du titre courant ===== */
.now-playing h1{
  -webkit-mask-image:none!important;
  mask-image:none!important;
}


/* ===== v1.14 : carrousel émissions en vignettes portrait ===== */
.shows-section{padding-top:38px;padding-bottom:40px}
.shows-rail{
  grid-auto-columns:calc((100% - 80px)/6);
  gap:16px;
  padding-top:4px;
  padding-bottom:12px;
}
.show-tile{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:13/20;
  overflow:hidden;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 28px rgba(28,52,94,.08);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease;
}
.show-tile img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .48s cubic-bezier(.2,.7,.2,1),filter .3s ease;
}
.show-tile:hover{transform:translateY(-6px);box-shadow:0 20px 42px rgba(28,52,94,.17)}
.show-tile:hover img{transform:scale(1.045);filter:saturate(1.04)}
.show-tile:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 70%,white);outline-offset:4px}
.show-tile-fallback{
  position:absolute;
  inset:0;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:7px;
  background:#fff;
  color:#172340;
  border:1px solid #e4eaf3;
}
.show-tile-fallback strong{font-family:var(--title-font);font-size:24px;line-height:1.02;font-weight:600}
.show-tile-fallback small{font-size:12px;color:#78849a;font-weight:700}

/* Page d'une émission */
.show-detail-page{background:#f4f6fa}
.show-detail-main{padding:64px 0 96px}
.show-detail-hero{
  display:grid;
  grid-template-columns:minmax(250px,380px) minmax(0,1fr);
  align-items:center;
  gap:58px;
  min-height:520px;
}
.show-detail-art{
  width:100%;
  aspect-ratio:13/20;
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 64px rgba(25,50,93,.14);
}
.show-detail-art img{width:100%;height:100%;object-fit:cover;display:block}
.show-detail-copy{max-width:790px}
.show-detail-schedule{display:inline-flex;align-items:center;background:var(--primary-fill);color:#fff;border-radius:9px;padding:8px 11px;font-size:11px;font-weight:850;letter-spacing:.035em}
.show-detail-copy h1{font-family:var(--title-font);font-size:clamp(48px,6vw,84px);line-height:.94;letter-spacing:-.045em;font-weight:600;color:var(--primary);margin:18px 0 8px}
.show-detail-copy .show-detail-subtitle{font-family:var(--title-font);font-size:clamp(20px,2.2vw,30px);line-height:1.1;color:#56647b;margin:0 0 24px}
.show-detail-description{font-size:16px;line-height:1.72;color:#657189;max-width:760px;white-space:pre-line}
.show-detail-description p{margin:0}
.show-detail-back{display:inline-flex;align-items:center;gap:8px;margin-top:30px;background:#fff;color:var(--primary);border-radius:999px;padding:11px 16px;font-weight:800;box-shadow:0 10px 28px rgba(35,66,115,.09)}

@media(max-width:1100px){
  .shows-rail{grid-auto-columns:calc((100% - 48px)/4)}
}
@media(max-width:760px){
  .shows-section{padding-top:26px}
  .shows-rail{grid-auto-columns:42vw;gap:12px}
  .show-detail-main{padding-top:36px}
  .show-detail-hero{grid-template-columns:1fr;gap:28px;min-height:0}
  .show-detail-art{width:min(74vw,340px)}
  .show-detail-copy h1{font-size:clamp(42px,13vw,68px)}
}
@media(max-width:480px){
  .shows-rail{grid-auto-columns:58vw}
}

.show-detail-hero:not(:has(.show-detail-art)){grid-template-columns:1fr;min-height:420px}
.show-detail-hero:not(:has(.show-detail-art)) .show-detail-copy{max-width:900px}

/* ===== v1.15 : navigation sticky, thème dégradé, pages titres ===== */
/* Le bandeau de l'accueil est superposé au hero puis devient un verre dépoli au scroll. */
.home-page .topbar{position:sticky;top:0;z-index:40;margin-bottom:-88px;background:transparent;border-bottom:1px solid transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .24s ease,border-color .24s ease,box-shadow .24s ease,backdrop-filter .24s ease}
.home-page .topbar.scrolled{background:rgba(255,255,255,.78);border-bottom-color:rgba(194,205,223,.42);box-shadow:0 8px 26px rgba(26,48,82,.06);backdrop-filter:blur(22px) saturate(1.18);-webkit-backdrop-filter:blur(22px) saturate(1.18)}
.home-page .hero{padding-top:88px}
.header-inner{position:relative;z-index:1}
.menu-trigger{padding:6px 14px 6px 7px!important;gap:9px!important;background:rgba(255,255,255,.76)!important;border:1px solid rgba(255,255,255,.7)!important;box-shadow:0 9px 28px rgba(31,54,91,.10)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#172741!important;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.menu-trigger:hover{transform:translateY(-1px);background:rgba(255,255,255,.92)!important;box-shadow:0 13px 32px rgba(31,54,91,.14)!important}
.menu-trigger svg{width:34px!important;height:34px!important;padding:8px;border-radius:50%;background:var(--primary-fill);stroke:#fff!important;stroke-width:1.8!important;box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 18%,transparent)}
.menu-trigger span{font-family:var(--title-font);font-size:14px;font-weight:600;letter-spacing:-.01em}
.home-page .brand{filter:drop-shadow(0 4px 14px rgba(255,255,255,.5))}

.drawer{width:min(410px,90vw);padding:0;background:rgba(250,252,255,.96);backdrop-filter:blur(26px) saturate(1.15);-webkit-backdrop-filter:blur(26px) saturate(1.15);border-right:1px solid rgba(214,223,237,.76);box-shadow:28px 0 80px rgba(16,35,68,.18)}
.drawer-head{height:90px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8edf4}
.drawer-logo{display:flex;align-items:center;min-width:0}.drawer-logo img{max-width:165px;max-height:52px;object-fit:contain}.drawer-logo strong{font-family:var(--title-font);font-size:24px;color:var(--primary);font-weight:650}
.drawer-close{float:none;width:40px;height:40px;border:1px solid #e0e7f0;background:#fff;color:#516078;display:grid;place-items:center;cursor:pointer}.drawer-close span{display:block;line-height:1;transform:translateY(-1px)}
.drawer-kicker{padding:28px 28px 9px;font-size:9px;font-weight:900;letter-spacing:.18em;color:#a0aabd}
.drawer nav{padding:0 16px;gap:3px}.drawer nav a{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:13px;font-size:22px;color:#24324a;transition:.16s ease}.drawer nav a i{font-family:Inter,sans-serif;font-style:normal;font-size:17px;color:#a1adbf;transition:transform .16s ease}.drawer nav a:hover{background:#fff;color:var(--primary);box-shadow:0 7px 22px rgba(28,52,91,.06)}.drawer nav a:hover i{transform:translateX(3px);color:var(--primary)}
.drawer-foot{position:absolute;left:22px;right:22px;bottom:22px;padding-top:18px;border-top:1px solid #e7ecf3}.drawer-listen{margin:0!important;background:var(--primary-fill)!important;color:#fff!important;box-shadow:0 10px 28px color-mix(in srgb,var(--primary) 20%,transparent)!important}
.drawer-backdrop{background:rgba(10,22,42,.28);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* Les éléments de fond utilisent le dégradé configuré. */
.live-badge,.player-play,.player-live,.footer-listen,.like-button.liked,.ranking-kicker,.history-filter-submit,.show-detail-schedule,.track-detail-kicker,.track-detail-rank{background:var(--primary-fill)!important}
.footer{border-top:0;position:relative}.footer:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--primary-fill)}

/* En mode dégradé, les principaux textes d'accent reprennent eux aussi ce dégradé. */
.theme-gradient .brand strong,.theme-gradient .section-link,.theme-gradient .track-text strong,.theme-gradient .video-card h3,.theme-gradient .footer-brand h3,.theme-gradient .footer h4,.theme-gradient .ranking-page-head h1,.theme-gradient .ranking-list-position,.theme-gradient .history-page-head h1,.theme-gradient .history-copy strong,.theme-gradient .show-detail-copy h1,.theme-gradient .track-detail-copy h1,.theme-gradient .track-detail-artist{
  background:var(--primary-fill);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent
}
.theme-gradient .now-playing h1{background:var(--primary-fill)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
.theme-gradient .pill:not(.menu-trigger),.theme-gradient .track-platform-link,.theme-gradient .history-platform-link,.theme-gradient .socials a{color:var(--primary)}

/* Page dédiée à un titre */
.track-detail-page{background:#f3f6fa}.track-detail-main{padding:72px 0 100px}.track-detail-hero{min-height:570px;display:grid;grid-template-columns:minmax(270px,430px) minmax(0,1fr);gap:64px;align-items:center}.track-detail-art-wrap{position:relative;width:100%;max-width:430px}.track-detail-art{width:100%;aspect-ratio:1/1;display:block;object-fit:cover;border-radius:30px;background:#e8edf4;box-shadow:0 28px 76px rgba(25,48,84,.16)}.track-detail-art-empty{background:linear-gradient(135deg,#e9eef5,#dce4ef)}.track-detail-rank{position:absolute;left:20px;bottom:20px;display:inline-flex;color:#fff;padding:8px 12px;border-radius:999px;font-size:11px;font-weight:900;box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 22%,transparent)}.track-detail-copy{max-width:850px}.track-detail-kicker{display:inline-flex;color:#fff;padding:7px 10px;border-radius:8px;font-size:9px;font-weight:900;letter-spacing:.12em}.track-detail-copy h1{font-family:var(--title-font);font-size:clamp(54px,6.5vw,96px);line-height:.9;letter-spacing:-.052em;color:var(--primary);margin:18px 0 8px;font-weight:650}.track-detail-artist{font-family:var(--title-font);font-size:clamp(24px,2.7vw,38px);line-height:1;color:color-mix(in srgb,var(--primary) 80%,#4c5a72);margin:0 0 34px;letter-spacing:-.03em}.track-detail-meta{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 28px}.track-detail-meta span{min-width:150px;background:rgba(255,255,255,.78);border:1px solid #e1e8f1;border-radius:14px;padding:12px 14px;color:#6d798e;font-size:12px}.track-detail-meta strong{display:block;color:#233149;font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.track-detail-platforms{display:flex;gap:11px;flex-wrap:wrap}.track-detail-platforms>a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e1e7f0;border-radius:999px;padding:7px 12px 7px 7px;color:#334158;font-size:12px;font-weight:800;box-shadow:0 8px 24px rgba(29,51,87,.05);transition:.18s ease}.track-detail-platforms>a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 28%,#e1e7f0)}.platform-circle{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#f0f4f8;color:var(--primary)}.platform-circle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.platform-circle svg.filled{fill:currentColor;stroke:none}.track-detail-note{margin:18px 0 0;color:#9aa4b4;font-size:11px}.subpage-topbar{background:rgba(255,255,255,.86)}

@media(max-width:820px){.track-detail-main{padding-top:42px}.track-detail-hero{grid-template-columns:1fr;gap:30px;min-height:0}.track-detail-art-wrap{width:min(76vw,390px)}.track-detail-copy h1{font-size:clamp(48px,12vw,76px)}.drawer-foot{position:static;margin:30px 22px 22px}.home-page .topbar{margin-bottom:-78px}.home-page .hero{padding-top:78px}}
@media(max-width:620px){.menu-trigger{padding:5px!important}.menu-trigger svg{width:34px!important;height:34px!important}.menu-trigger span{display:none!important}.drawer{width:min(360px,94vw)}.drawer nav a{font-size:20px}.track-detail-main{padding-left:0;padding-right:0}.track-detail-art-wrap{width:min(82vw,340px)}}


/* ===== v1.15 final : logo réglable, header adaptatif, thème principal global ===== */
.header-inner{height:var(--header-height,88px)}
.brand img{height:var(--site-logo-height,58px);width:auto;max-width:min(520px,48vw);max-height:none;object-fit:contain}
.home-page .topbar{margin-bottom:calc(var(--header-height,88px) * -1)}
.home-page .hero{padding-top:var(--header-height,88px)}
.drawer-logo img{height:min(var(--site-logo-height,58px),52px);width:auto;max-width:190px;max-height:none;object-fit:contain}
.now-title-link{display:block;max-width:100%;min-width:0}
.now-title-link.disabled{pointer-events:none}
.now-title-link h1{transition:opacity .18s ease,filter .18s ease}
.now-title-link:not(.disabled):hover h1{opacity:.88;filter:saturate(1.08)}

/* Les surfaces d'accent utilisent toujours le dégradé complet lorsqu'il est activé. */
.theme-gradient .listen-button:hover,.theme-gradient .like-button.liked,.theme-gradient .podcast-play:hover,.theme-gradient .history-filter-submit,.theme-gradient .player-play,.theme-gradient .player-live,.theme-gradient .drawer-listen,.theme-gradient .show-detail-schedule,.theme-gradient .track-detail-kicker,.theme-gradient .track-detail-rank{background:var(--primary-fill)!important;color:#fff!important}
.theme-gradient .section-link,.theme-gradient .track-text strong,.theme-gradient .ranking-card-copy small,.theme-gradient .ranking-list-position,.theme-gradient .history-copy strong,.theme-gradient .video-card h3,.theme-gradient .footer-brand h3,.theme-gradient .footer h4,.theme-gradient .show-detail-copy h1,.theme-gradient .track-detail-copy h1,.theme-gradient .track-detail-artist,.theme-gradient .drawer nav a:hover span{
  background:var(--primary-fill);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent!important
}
.theme-gradient .carousel-arrow,.theme-gradient .like-button:not(.liked),.theme-gradient .podcast-play,.theme-gradient .show-detail-back{color:var(--primary)}

@media(max-width:920px){
  .brand img{height:min(var(--site-logo-height,58px),56px);max-width:190px}
}
@media(max-width:620px){
  .brand img{height:min(var(--site-logo-height,58px),48px);max-width:150px}
  .home-page .topbar{margin-bottom:calc(var(--header-height,88px) * -1)}
  .home-page .hero{padding-top:var(--header-height,88px)}
}


/* ===== v1.16 : plage étendue pour la hauteur du logo ===== */
@media(min-width:921px){
  .brand img{max-width:min(520px,48vw)}
}


/* ===== v1.17 : titrage long lorsque le classement du hero est visible ===== */
/* Le bloc de gauche peut réellement se contracter face au classement. Sans ces
   min-width:0, un titre en nowrap peut imposer sa largeur intrinsèque et passer
   visuellement sous le classement. */
.hero-current{width:100%;min-width:0}
.now-playing{flex:1 1 auto;min-width:0;max-width:100%}
.now-title-link{width:100%;max-width:100%;min-width:0;overflow:hidden;position:relative}

@media(min-width:981px){
  .hero.ranking-visible .hero-copy{
    max-width:calc(100% - 468px);
  }
}

/* Le défilement n'est activé en JS que si le classement est visible ET si le
   titre dépasse réellement de sa zone. Le mouvement aller/retour évite un saut
   brutal de texte tout en laissant lire le début puis la fin du titre. */
.now-title-link.title-marquee h1{
  width:max-content!important;
  max-width:none!important;
  overflow:visible!important;
  animation:heroNowTitleScroll var(--marquee-duration,8s) ease-in-out 1s infinite alternate;
  will-change:transform;
}
@keyframes heroNowTitleScroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--marquee-distance,0px)))}
}
@media(prefers-reduced-motion:reduce){
  .now-title-link.title-marquee h1{animation:none!important}
}

/* ===== v1.18 : fiches actualité + navigation sans couper le direct ===== */
.subpage-site-topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);border-bottom:1px solid rgba(210,220,234,.58);box-shadow:0 8px 28px rgba(25,46,80,.045);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15)}
.detail-inline-back{display:inline-flex;align-items:center;gap:7px;margin:0 0 24px;padding:9px 13px;border:1px solid #e1e7ef;border-radius:999px;background:rgba(255,255,255,.82);color:#344259;font-size:12px;font-weight:800;box-shadow:0 8px 24px rgba(29,50,83,.05);transition:.18s ease}
.detail-inline-back:hover{transform:translateY(-1px);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 22%,#e1e7ef)}

/* Une fiche chargée depuis l'accueil remplace seulement le <main>. L'audio,
   l'header, le menu, le footer et le player restent les mêmes noeuds DOM. */
.site-route-view{min-height:calc(100vh - var(--header-height,88px));background:#f3f6fa;position:relative;z-index:1}
.home-page.route-active{background:#f3f6fa}
.home-page.route-active .topbar{margin-bottom:0!important;background:rgba(255,255,255,.86)!important;border-bottom-color:rgba(210,220,234,.58)!important;box-shadow:0 8px 28px rgba(25,46,80,.045)!important;backdrop-filter:blur(22px) saturate(1.15)!important;-webkit-backdrop-filter:blur(22px) saturate(1.15)!important}
.home-page.route-active .brand{filter:none}
.site-route-view .track-detail-main{padding-top:48px}
.site-route-view .news-detail-main{padding-top:48px}

/* Page actualité */
.news-detail-page{background:#f3f6fa}
.news-detail-main{padding:58px 0 105px;background:#f3f6fa;min-height:70vh}
.news-detail-article{max-width:1120px;margin:0 auto}
.news-detail-head{max-width:930px;margin:0 0 34px}
.news-detail-head time{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--primary) 9%,white);color:var(--primary);font-family:var(--title-font);font-size:11px;font-weight:650;margin-bottom:16px}
.news-detail-head h1{font-family:var(--title-font);font-size:clamp(48px,6vw,86px);line-height:.94;letter-spacing:-.045em;font-weight:650;margin:0;color:#17243a}
.theme-gradient .news-detail-head h1{background:var(--primary-fill);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.news-detail-lead{font-size:clamp(17px,1.8vw,23px);line-height:1.42;color:#657187;max-width:860px;margin:22px 0 0}
.news-detail-image{display:block;width:100%;max-height:610px;object-fit:cover;border-radius:28px;margin:0 0 36px;box-shadow:0 22px 62px rgba(25,47,82,.13)}
.news-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:58px;align-items:start}
.news-detail-content{font-size:16px;line-height:1.78;color:#39465b;max-width:820px}
.news-detail-content p{margin:0 0 24px;white-space:normal}
.news-source-link{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:11px 15px;border-radius:999px;background:#fff;border:1px solid #e0e7f0;color:#24334a;font-size:12px;font-weight:850;box-shadow:0 8px 24px rgba(28,50,85,.055);transition:.18s ease}
.news-source-link:hover{color:var(--primary);transform:translateY(-1px)}
.news-share{position:sticky;top:calc(var(--header-height,88px) + 24px);padding:17px;border-radius:20px;background:rgba(255,255,255,.75);border:1px solid rgba(218,226,238,.84);box-shadow:0 12px 32px rgba(26,47,80,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.news-share>strong{display:block;font-family:var(--title-font);font-size:15px;color:#26354c;margin-bottom:12px}
.news-share-buttons{display:flex;flex-wrap:wrap;gap:7px}
.news-share-buttons a,.news-share-buttons button{width:35px;height:35px;border:0;border-radius:50%;display:grid;place-items:center;background:#eef2f7;color:#33425a;font-family:var(--title-font);font-size:12px;font-weight:700;cursor:pointer;transition:.17s ease}
.news-share-buttons a:hover,.news-share-buttons button:hover{background:var(--primary-fill);color:#fff;transform:translateY(-2px)}
.share-copy-status{display:block;min-height:16px;margin-top:8px;color:var(--primary);font-size:10px;font-weight:800}

@media(max-width:820px){
  .news-detail-main{padding-top:38px}
  .news-detail-layout{grid-template-columns:1fr;gap:28px}
  .news-share{position:static;width:max-content;max-width:100%}
  .news-detail-image{border-radius:20px}
  .site-route-view .track-detail-main,.site-route-view .news-detail-main{padding-top:34px}
}
@media(max-width:560px){
  .news-detail-head h1{font-size:clamp(40px,13vw,60px)}
  .news-detail-lead{font-size:16px}
  .news-detail-main{padding-bottom:82px}
}

/* ===== v1.19 : fiche musique plus compacte, diffusions et clip ===== */
.track-detail-copy h1{
  font-size:clamp(40px,4.6vw,68px);
  line-height:.98;
  letter-spacing:-.008em;
  margin:16px 0 9px;
  font-weight:650;
}
.track-detail-artist{
  font-size:clamp(21px,2.15vw,31px);
  line-height:1.05;
  letter-spacing:-.012em;
  margin-bottom:22px;
}
.track-detail-ranking-highlight{
  width:max-content;
  max-width:100%;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"rank label" "rank sub";
  align-items:center;
  column-gap:14px;
  margin:0 0 22px;
  padding:12px 17px 12px 13px;
  border-radius:20px;
  background:color-mix(in srgb,var(--primary) 10%,rgba(255,255,255,.88));
  border:1px solid color-mix(in srgb,var(--primary) 16%,rgba(255,255,255,.9));
  box-shadow:0 12px 34px color-mix(in srgb,var(--primary) 10%,transparent);
}
.track-detail-ranking-highlight strong{
  grid-area:rank;
  min-width:72px;
  height:72px;
  padding:0 10px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:var(--primary-fill);
  color:#fff;
  font-family:var(--title-font);
  font-size:34px;
  line-height:1;
  font-weight:700;
  box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 22%,transparent);
}
.track-detail-ranking-highlight>span{
  grid-area:label;
  align-self:end;
  font-family:var(--title-font);
  font-size:16px;
  font-weight:650;
  color:#26354a;
  letter-spacing:.015em;
}
.track-detail-ranking-highlight small{
  grid-area:sub;
  align-self:start;
  margin-top:3px;
  color:#8792a4;
  font-size:11px;
  font-weight:700;
}
.track-detail-recent{margin:0 0 24px}
.track-detail-recent-label{
  display:block;
  margin:0 0 9px;
  color:#7d899b;
  font-size:10px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.track-detail-play-bubbles{display:flex;gap:8px;flex-wrap:wrap}
.track-detail-play-bubble{
  min-width:67px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px;
  padding:9px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid #e1e8f1;
  box-shadow:0 7px 20px rgba(29,51,87,.045);
}
.track-detail-play-bubble strong{
  font-family:var(--title-font);
  font-size:13px;
  line-height:1;
  font-weight:650;
  color:#26354a;
}
.track-detail-play-bubble small{font-size:9px;font-weight:800;color:#98a3b4}
.track-detail-clip{padding:12px 0 88px}
.track-detail-clip-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 0 16px}
.track-detail-clip-head h2{margin:0;font-family:var(--title-font);font-size:clamp(28px,3vw,42px);line-height:1;font-weight:650;letter-spacing:-.025em;color:#17243a}
.track-detail-clip-head span{font-size:10px;font-weight:750;color:#9aa4b4}
.track-detail-video{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:26px;background:#0a0b0d;box-shadow:0 24px 66px rgba(20,37,65,.16)}
.track-detail-video iframe{display:block;width:100%;height:100%;border:0}
.theme-gradient .track-detail-ranking-highlight>span,.theme-gradient .track-detail-clip-head h2{background:var(--primary-fill);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

@media(max-width:820px){
  .track-detail-copy h1{font-size:clamp(40px,10vw,62px);letter-spacing:-.006em}
  .track-detail-ranking-highlight strong{min-width:64px;height:64px;font-size:30px}
  .track-detail-clip{padding-bottom:72px}
  .track-detail-video{border-radius:20px}
}
@media(max-width:560px){
  .track-detail-copy h1{font-size:clamp(36px,11vw,52px);letter-spacing:0}
  .track-detail-artist{font-size:21px}
  .track-detail-ranking-highlight{width:100%}
  .track-detail-play-bubbles{gap:6px}
  .track-detail-play-bubble{min-width:61px;padding:8px 9px}
  .track-detail-clip-head{align-items:center}
  .track-detail-video{border-radius:16px}
}


/* ===== v1.21 : titrage hero non tronqué quand le classement est absent ===== */
/* Sans classement, le contenu du hero peut profiter de toute la largeur utile.
   Lorsqu'un titre dépasse malgré tout, le même défilement horizontal que pour
   le classement prend le relais au lieu de couper le texte. */
.hero:not(.ranking-visible) .hero-copy{
  width:100%;
  max-width:100%;
}
.hero:not(.ranking-visible) .now-playing{
  max-width:100%;
}
.hero:not(.ranking-visible) .now-title-link{
  max-width:100%;
}

.hero:not(.ranking-visible) .now-playing h1{
  width:max-content;
  max-width:100%;
}

/* ===== v1.21 : animation légère du classement / bouton Aimé / typo artiste ===== */
/* Le titre classé actuellement diffusé garde son animation d'entrée, puis
   effectue un très léger bounce toutes les 10 secondes pour donner de la vie
   au hero sans distraire la lecture. */
.hero-rank-item.current{
  animation:
    rankNeighborIn .52s cubic-bezier(.2,.75,.2,1) both,
    heroRankSoftBounce 10s ease-in-out 1.2s infinite;
}
@keyframes heroRankSoftBounce{
  0%,88%,100%{transform:translateY(0) scale(1)}
  90%{transform:translateY(-3px) scale(1.008)}
  92%{transform:translateY(0) scale(1)}
  94%{transform:translateY(-1.5px) scale(1.004)}
  96%{transform:translateY(0) scale(1)}
}

/* L'artiste des bandeaux du classement utilise aussi Clash Display. */
.hero-rank-copy small{
  font-family:var(--title-font);
  font-weight:500;
  letter-spacing:-.005em;
}

/* État Aimé : suppression du petit contour/halo parasite autour du dégradé. */
.like-button.liked,
.theme-gradient .like-button.liked{
  border-color:transparent!important;
  outline:0!important;
  box-shadow:none!important;
  background-clip:border-box!important;
  -webkit-background-clip:border-box!important;
  appearance:none;
  -webkit-appearance:none;
}
.like-button.liked:focus,
.like-button.liked:focus-visible{
  outline:0!important;
  box-shadow:none!important;
}

@media (prefers-reduced-motion:reduce){
  .hero-rank-item.current{animation:rankNeighborIn .01ms linear both!important}
}

/* ===== v1.22 : bouton Aimé net / titrage long / badge position classement ===== */
/* Une fois liké, le bouton n'affiche plus aucun liseré autour du dégradé. */
.like-button.liked,
.theme-gradient .like-button.liked,
.like-button.liked:disabled{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:var(--primary-fill)!important;
  background-image:var(--primary-fill)!important;
  background-origin:border-box!important;
  background-clip:border-box!important;
  -webkit-background-clip:border-box!important;
  filter:none!important;
}
.like-button.liked::before,
.like-button.liked::after{
  content:none!important;
  display:none!important;
}

/* Sans classement, le H1 conserve sa largeur intrinsèque. Le parent est la
   fenêtre de lecture : le JS peut ainsi mesurer le vrai dépassement et lancer
   le marquee au lieu de tronquer le texte à max-width:100%. */
.hero:not(.ranking-visible) .now-title-link{
  overflow:hidden!important;
}
.hero:not(.ranking-visible) .now-title-link h1,
.hero:not(.ranking-visible) .now-playing h1{
  width:max-content!important;
  max-width:none!important;
  min-width:0!important;
  text-overflow:clip!important;
}

/* Le numéro de position superposé à la cover reprend la couleur principale
   (unie ou dégradée) du site. */
.hero-rank-position,
.theme-gradient .hero-rank-position{
  background:var(--primary-fill)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 24%,transparent);
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}


/* ===== v1.23 : pochette du titre en cours cliquable ===== */
.hero-current-cover-wrap{
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .2s ease,filter .2s ease;
}
.hero-current-cover-wrap:not(.disabled):hover{transform:translateY(-2px)}
.hero-current-cover-wrap:not(.disabled):hover .hero-current-cover{filter:saturate(1.05) brightness(1.02)}
.hero-current-cover-wrap.disabled{pointer-events:none;cursor:default}


/* v1.27 — émission actuellement à l'antenne sous le titrage du hero */
.current-show-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;min-height:28px;color:rgba(40,52,75,.76);font-size:13px;line-height:1.2}
.current-show-line[hidden]{display:none!important}.current-show-label{font-weight:650;opacity:.82}.current-show-line strong{font-family:var(--title-font);font-size:14px;font-weight:600;letter-spacing:-.01em;color:color-mix(in srgb,var(--primary) 72%,#27354e)}
.current-show-time{display:inline-flex;align-items:center;min-height:26px;padding:5px 9px;border-radius:999px;background:var(--primary-fill);color:#fff;font-family:var(--title-font);font-size:11px;font-weight:650;letter-spacing:.01em;box-shadow:0 7px 18px color-mix(in srgb,var(--primary) 16%,transparent);white-space:nowrap}
@media(max-width:720px){.current-show-line{margin-top:8px;gap:6px;font-size:11px}.current-show-line strong{font-size:12px}.current-show-time{min-height:23px;padding:4px 8px;font-size:10px}}

/* v1.28 — typographie émission en cours + aucun badge horaire pour le comblage */
.current-show-label,
.current-show-line strong{
  font-family:var(--title-font);
}
.current-show-label{
  font-weight:600;
  letter-spacing:-.005em;
}
.current-show-line strong{
  font-weight:600;
  letter-spacing:-.005em;
}
.current-show-time[hidden]{display:none!important}
.current-show-line.is-filler .current-show-time{display:none!important}

/* ===== v1.29 : émission en cours alignée + boutons hero en Clash Display ===== */
.current-show-label,
.current-show-line strong{
  font-family:var(--title-font);
  font-size:14px;
  line-height:1.2;
  letter-spacing:-.005em;
}
.current-show-label{
  font-weight:400;
  opacity:.72;
}
.current-show-line strong{
  font-weight:650;
}

/* Les libellés Écouter / Pause et J’aime / Aimé utilisent Clash Display. */
.listen-button,
.like-button,
.listen-button span,
.like-button .like-label{
  font-family:var(--title-font);
}

@media(max-width:720px){
  .current-show-label,
  .current-show-line strong{
    font-size:12px;
  }
}

/* ===== v1.31 : poids typographiques + mode sombre automatique par heure système ===== */
/* Boutons hero plus légers, toujours en Clash Display. */
#listen-button,
#like-button,
#listen-button span,
#like-button .like-label{
  font-family:var(--title-font);
  font-weight:560;
}

/* “En ce moment” et le nom de l'émission gardent la même taille :
   le libellé gagne juste un peu de présence, le nom est légèrement allégé. */
.current-show-label{
  font-weight:500;
  opacity:.78;
}
.current-show-line strong{
  font-weight:600;
}

/* Mode sombre automatique : activé par assets/js/time-theme.js entre 19h et 7h,
   uniquement à partir de l'heure locale du système. */
html.system-evening{color-scheme:dark}
html.system-evening body{
  background:#0b1020;
  color:#e8edf7;
}
html.system-evening .section-title{color:#343f57}
html.system-evening .section-link{color:color-mix(in srgb,var(--primary) 78%,#fff 22%)}

/* Header / menu */
html.system-evening .topbar,
html.system-evening .subpage-site-topbar{
  background:rgba(10,15,28,.86);
  border-bottom-color:rgba(255,255,255,.075);
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}
html.system-evening .home-page .topbar{background:transparent}
html.system-evening .home-page .topbar.scrolled,
html.system-evening .home-page.route-active .topbar{
  background:rgba(10,15,28,.82)!important;
  border-bottom-color:rgba(255,255,255,.08)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.18)!important;
}
html.system-evening .menu-trigger{
  background:rgba(16,23,40,.76)!important;
  border-color:rgba(255,255,255,.11)!important;
  color:#eef3fb!important;
  box-shadow:0 9px 30px rgba(0,0,0,.18)!important;
}
html.system-evening .menu-trigger:hover{background:rgba(22,31,51,.94)!important}
html.system-evening .drawer{
  background:rgba(11,17,31,.97);
  border-right-color:rgba(255,255,255,.08);
  box-shadow:28px 0 80px rgba(0,0,0,.42);
}
html.system-evening .drawer-head{border-bottom-color:rgba(255,255,255,.08)}
html.system-evening .drawer-close{
  background:#151d30;
  border-color:rgba(255,255,255,.09);
  color:#cbd4e4;
}
html.system-evening .drawer-kicker{color:#68758c}
html.system-evening .drawer nav a{color:#d8e0ed}
html.system-evening .drawer nav a i{color:#66748b}
html.system-evening .drawer nav a:hover{background:#141d30}
html.system-evening .drawer-foot{border-top-color:rgba(255,255,255,.08)}
html.system-evening .drawer-backdrop{background:rgba(0,4,12,.52)}

/* Hero : le média reste visible mais l'habillage devient nocturne. */
html.system-evening .hero,
html.system-evening .hero-media{background:#090e1a!important}
html.system-evening .hero-shade{
  background:
    linear-gradient(90deg,rgba(8,13,25,.94) 0%,rgba(8,13,25,.82) 34%,rgba(8,13,25,.54) 64%,rgba(8,13,25,.38) 100%),
    linear-gradient(0deg,rgba(8,13,25,.84),rgba(8,13,25,.08) 48%,rgba(8,13,25,.2))!important;
}
html.system-evening .hero.cover-only .hero-shade{
  background:
    linear-gradient(90deg,rgba(8,13,25,.88) 0%,rgba(8,13,25,.70) 35%,rgba(8,13,25,.34) 68%,rgba(8,13,25,.20) 100%),
    linear-gradient(0deg,rgba(8,13,25,.70),rgba(8,13,25,.04) 50%,rgba(8,13,25,.13))!important;
}
html.system-evening .hero.video-active .hero-shade{
  background:
    linear-gradient(90deg,rgba(8,13,25,.91) 0%,rgba(8,13,25,.72) 35%,rgba(8,13,25,.36) 67%,rgba(8,13,25,.20) 100%),
    linear-gradient(0deg,rgba(8,13,25,.74),rgba(8,13,25,.04) 50%,rgba(8,13,25,.12))!important;
}
html.system-evening .hero-media:after{
  background:linear-gradient(180deg,rgba(6,10,18,.16) 0,transparent 16%,transparent 78%,rgba(6,10,18,.26) 100%)
}
html.system-evening .now-artist{color:#c0cada}
html.system-evening .current-show-line{color:rgba(220,228,240,.76)}
html.system-evening .current-show-line strong{color:color-mix(in srgb,var(--primary) 72%,#fff 28%)}
html.system-evening #listen-button,
html.system-evening #like-button:not(.liked){
  background:rgba(17,25,43,.78);
  border-color:rgba(255,255,255,.10);
  color:#eef3fb;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
html.system-evening .track-platform-link{
  background:rgba(15,23,40,.72);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 7px 20px rgba(0,0,0,.16);
}

/* Contenus et cartes de l'accueil */
html.system-evening .show-card,
html.system-evening .news-card,
html.system-evening .ranking-card,
html.system-evening .track-card:not(:has(img)),
html.system-evening .empty-bubble{
  background:#111827;
  border-color:#202a3d;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}
html.system-evening .show-overlay{color:#e7edf7}
html.system-evening .show-card:not(:has(img)) .mini-badge{background:#1b2539}
html.system-evening .news-body h3,
html.system-evening .ranking-card-copy strong,
html.system-evening .empty-bubble strong{color:#eef3fb}
html.system-evening .news-body p,
html.system-evening .video-card p,
html.system-evening .ranking-card-copy span,
html.system-evening .track-text span,
html.system-evening .empty-bubble{color:#8f9bb0}
html.system-evening .track-art,
html.system-evening .media{background:#172033}
html.system-evening .carousel-arrow{
  background:rgba(17,24,39,.94);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 12px 32px rgba(0,0,0,.26)
}
html.system-evening .podcast-card{background:#080d18}
html.system-evening .podcast-play{background:#182238}

/* Footer */
html.system-evening .footer{background:#080d18}
html.system-evening .footer-grid>div:not(:first-child){border-left-color:#202a3d}
html.system-evening .footer-brand p{color:#8490a5}
html.system-evening .footer a,
html.system-evening .footer span{color:#aeb8c9}
html.system-evening .socials a{border-color:#263147;background:#101827}

/* Player flottant */
html.system-evening .player{
  background:rgba(12,18,31,.90);
  color:#eef3fb;
  border-color:rgba(255,255,255,.10);
  box-shadow:0 16px 46px rgba(0,0,0,.34)
}
html.system-evening .player-meta strong{color:#eef3fb!important}
html.system-evening .player-meta>span:not(.player-live){color:#91a0b6!important}
html.system-evening .player-mute,
html.system-evening .player-close{color:#aeb9ca}
html.system-evening .player-mute:hover,
html.system-evening .player-mute.muted,
html.system-evening .player-close:hover{background:#1b2538;color:#fff}
html.system-evening .player-restore{
  background:rgba(14,21,36,.94);
  color:#e8edf7;
  border-color:rgba(255,255,255,.09)
}

/* Pages Classement / historique */
html.system-evening .ranking-page-body,
html.system-evening .history-page-body,
html.system-evening .show-detail-page,
html.system-evening .track-detail-page,
html.system-evening .news-detail-page,
html.system-evening .site-route-view,
html.system-evening .home-page.route-active{
  background:#0b1020!important;
}
html.system-evening .ranking-page-head p,
html.system-evening .history-page-head p{color:#8f9bb0}
html.system-evening .ranking-list-item,
html.system-evening .history-row{
  background:rgba(17,24,39,.88);
  border-color:#202a3d;
  box-shadow:0 8px 28px rgba(0,0,0,.16)
}
html.system-evening .ranking-list-copy strong,
html.system-evening .history-results-head strong{color:#eef3fb}
html.system-evening .ranking-list-copy span,
html.system-evening .history-copy span,
html.system-evening .history-copy small,
html.system-evening .history-results-head{color:#8d99ad}
html.system-evening .history-filter{
  background:rgba(17,24,39,.78);
  border-color:#202a3d;
  box-shadow:0 10px 30px rgba(0,0,0,.16)
}
html.system-evening .history-filter label>span{color:#8d99ad}
html.system-evening .history-filter input,
html.system-evening .history-filter select,
html.system-evening .history-filter-reset{
  background:#0f1726;
  border-color:#263147;
  color:#dbe3ef;
}
html.system-evening .history-platform-link{background:#182236}
html.system-evening .history-cover-empty{background:linear-gradient(135deg,#172033,#111827)}

/* Fiches émission / titre / actualité */
html.system-evening .show-detail-copy .show-detail-subtitle,
html.system-evening .show-detail-description,
html.system-evening .news-detail-lead{color:#99a6ba}
html.system-evening .show-detail-back,
html.system-evening .detail-inline-back,
html.system-evening .news-source-link{
  background:#121a2a;
  border-color:#263147;
  color:#cbd5e4;
  box-shadow:0 9px 26px rgba(0,0,0,.16)
}
html.system-evening .track-detail-meta span,
html.system-evening .track-detail-platforms>a,
html.system-evening .track-detail-play-bubble{
  background:rgba(17,24,39,.86);
  border-color:#263147;
  color:#aab6c8
}
html.system-evening .track-detail-meta strong,
html.system-evening .track-detail-play-bubble strong,
html.system-evening .track-detail-clip-head h2{color:#eef3fb}
html.system-evening .track-detail-ranking-highlight{
  background:color-mix(in srgb,var(--primary) 12%,rgba(17,24,39,.9));
  border-color:color-mix(in srgb,var(--primary) 18%,#263147)
}
html.system-evening .track-detail-ranking-highlight>span{color:#e3eaf5}
html.system-evening .track-detail-ranking-highlight small,
html.system-evening .track-detail-recent-label,
html.system-evening .track-detail-play-bubble small,
html.system-evening .track-detail-note,
html.system-evening .track-detail-clip-head span{color:#8895a9}
html.system-evening .platform-circle{background:#1b2538}
html.system-evening .track-detail-art-empty{background:linear-gradient(135deg,#172033,#101827)}
html.system-evening .news-detail-main{background:#0b1020}
html.system-evening .news-detail-head h1{color:#eef3fb}
html.system-evening .news-detail-head time{background:color-mix(in srgb,var(--primary) 12%,#111827)}
html.system-evening .news-detail-content{color:#c0cad8}
html.system-evening .news-share{
  background:rgba(17,24,39,.78);
  border-color:#263147;
  box-shadow:0 12px 32px rgba(0,0,0,.18)
}
html.system-evening .news-share>strong{color:#e5ebf4}
html.system-evening .news-share-buttons a,
html.system-evening .news-share-buttons button{background:#1b2538;color:#c7d1df}

@media(max-width:720px){
  #listen-button,#like-button,#listen-button span,#like-button .like-label{font-weight:560}
}


/* ===== v1.31 : footer éditorial + player externe ===== */
.player,.player-restore{display:none!important}
.external-listen-link{text-decoration:none}
.footer-modern{margin-top:78px;padding:0 0 30px;background:transparent!important;border:0!important;position:relative}
.footer-modern:before{display:none!important}
.footer-modern-shell{max-width:1540px}
.footer-modern-card{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:36px;padding:34px 38px;border-radius:34px;background:#0d1422;color:#fff;box-shadow:0 26px 70px rgba(18,31,52,.13)}
.footer-modern-card:before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;right:-180px;top:-260px;background:var(--primary-fill);opacity:.24;filter:blur(8px);pointer-events:none}
.footer-modern-card:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.055),transparent 42%);pointer-events:none}
.footer-modern-brand,.footer-modern-live{position:relative;z-index:1}
.footer-modern-brand{display:flex;align-items:center;gap:28px;min-width:0}
.footer-modern-logo{width:132px;min-width:132px;height:82px;border-radius:24px;background:rgba(255,255,255,.08);display:grid;place-items:center;padding:16px;border:1px solid rgba(255,255,255,.08)}
.footer-modern-logo img{max-width:100%;max-height:100%;object-fit:contain}
.footer-modern-logo strong{font-family:'Clash Display',sans-serif;font-size:18px}
.footer-modern-copy{min-width:0}
.footer-modern-kicker{display:block!important;margin:0 0 7px!important;font-family:'Clash Display',sans-serif;font-weight:500;font-size:11px!important;letter-spacing:.12em;color:rgba(255,255,255,.58)!important}
.footer-modern-copy h3{margin:0!important;color:#fff!important;font-family:'Clash Display',sans-serif;font-size:30px;line-height:1;font-weight:600;letter-spacing:-.02em;background:none!important;-webkit-text-fill-color:initial!important}
.footer-modern-copy p{margin:8px 0 0!important;color:rgba(255,255,255,.62)!important;font-size:14px;max-width:530px}
.footer-modern-live{display:flex;align-items:center;gap:16px;flex-shrink:0}
.footer-modern-live-label{display:flex;align-items:center;gap:8px;font-family:'Clash Display',sans-serif;font-size:11px;font-weight:500;letter-spacing:.06em;color:rgba(255,255,255,.72)}
.footer-modern-live-label i{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 15%,transparent)}
.footer-modern-player{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:13px 17px;border-radius:999px;background:var(--primary-fill);color:#fff!important;text-decoration:none;font-family:'Clash Display',sans-serif;font-weight:520;font-size:14px;box-shadow:0 12px 30px color-mix(in srgb,var(--primary) 22%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.footer-modern-player:hover{transform:translateY(-2px);box-shadow:0 16px 38px color-mix(in srgb,var(--primary) 30%,transparent)}
.footer-modern-player svg{width:15px;height:15px;fill:currentColor}
.footer-modern-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:21px 8px 0}
.footer-modern-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.footer-modern-nav a{display:inline-flex!important;margin:0!important;padding:8px 11px;border-radius:999px;color:#677387!important;text-decoration:none;font-family:'Clash Display',sans-serif;font-size:13px!important;font-weight:500;transition:background .2s ease,color .2s ease}
.footer-modern-nav a:hover{background:#eef2f8;color:#192234!important}
.footer-modern-side{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;color:#8a95a6}
.footer-modern-copyline{display:inline!important;margin:0!important;font-size:12px!important;color:#8a95a6!important}
.footer-modern-admin{display:inline!important;margin:0!important;font-size:12px!important;color:#8a95a6!important;text-decoration:none}
.footer-modern-socials{display:flex;gap:7px;margin-right:4px}
.footer-modern-socials a{display:grid!important;place-items:center;width:30px;height:30px;margin:0!important;border-radius:50%;background:#eef2f8;color:#536076!important;font-family:'Clash Display',sans-serif;font-size:10px!important;font-weight:600;text-decoration:none;transition:transform .2s ease,background .2s ease,color .2s ease}
.footer-modern-socials a:hover{transform:translateY(-2px);background:var(--primary-fill);color:#fff!important}
html.system-evening .footer-modern{background:transparent!important}
html.system-evening .footer-modern-card{background:#050914;box-shadow:0 24px 70px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.055)}
html.system-evening .footer-modern-nav a{color:#8793a8!important}
html.system-evening .footer-modern-nav a:hover{background:#121a29;color:#fff!important}
html.system-evening .footer-modern-socials a{background:#121a29;color:#aeb9ca!important}
html.system-evening .footer-modern-copyline,html.system-evening .footer-modern-admin{color:#667188!important}
@media(max-width:900px){.footer-modern-card{align-items:flex-start;flex-direction:column;padding:28px}.footer-modern-live{width:100%;justify-content:space-between}.footer-modern-bottom{align-items:flex-start;flex-direction:column}.footer-modern-side{justify-content:flex-start}.footer-modern-brand{gap:18px}.footer-modern-logo{width:104px;min-width:104px;height:72px}.footer-modern-copy h3{font-size:26px}}
@media(max-width:560px){.footer-modern{margin-top:54px}.footer-modern-card{border-radius:26px;padding:24px 20px}.footer-modern-brand{align-items:flex-start;flex-direction:column}.footer-modern-logo{width:112px}.footer-modern-live{align-items:flex-start;flex-direction:column}.footer-modern-player{width:100%;justify-content:center}.footer-modern-bottom{padding-left:0;padding-right:0}.footer-modern-nav{gap:4px}.footer-modern-nav a{padding:7px 8px!important}}

/* ===== Player externe ===== */
.external-player-page{margin:0;min-height:100vh;background:#080d18;color:#fff;overflow-x:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.external-player-page .external-player-shell{position:relative;min-height:100vh;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.external-player-media{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#070b13}
.external-player-bg-cover{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;filter:blur(5px) saturate(1.06);transform:scale(1.025);opacity:.74;transition:opacity .5s ease}
.external-player-bg-video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity .7s ease;z-index:2}
.external-player-bg-video.visible{opacity:.68}
.external-player-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,8,16,.93) 0%,rgba(4,8,16,.77) 43%,rgba(4,8,16,.67) 100%),linear-gradient(180deg,rgba(4,8,16,.32),rgba(4,8,16,.72));backdrop-filter:blur(1px)}
.external-player-top{display:flex;align-items:center;justify-content:space-between;padding:26px clamp(24px,4vw,64px);position:relative;z-index:5}
.external-player-brand{display:flex;align-items:center;text-decoration:none;color:#fff}
.external-player-brand img{display:block;max-width:190px;max-height:72px;object-fit:contain}
.external-player-brand strong{font-family:'Clash Display',sans-serif;font-size:24px}
.external-player-back{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(8,13,24,.24);backdrop-filter:blur(14px);color:#fff;text-decoration:none;font-family:'Clash Display',sans-serif;font-size:12px;font-weight:500}
.external-player-stage{width:min(1500px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(34px,5vw,80px);align-items:center;padding:35px 0 70px;position:relative;z-index:2}
.external-player-main{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:clamp(26px,4vw,56px);align-items:center;min-width:0}
.external-player-art-link{display:block;text-decoration:none;position:relative;border-radius:30px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);aspect-ratio:1;background:rgba(255,255,255,.08)}
.external-player-art{width:100%;height:100%;object-fit:cover;display:block}
.external-player-live-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:3;padding:7px 13px;border-radius:999px;background:var(--primary-fill);font-family:'Clash Display',sans-serif;font-size:10px;font-weight:600;letter-spacing:.08em;color:#fff;box-shadow:0 9px 25px color-mix(in srgb,var(--primary) 28%,transparent)}
.external-player-copy{min-width:0}
.external-player-kicker{display:block;margin-bottom:12px;font-family:'Clash Display',sans-serif;font-size:11px;font-weight:500;letter-spacing:.14em;color:rgba(255,255,255,.55)}
.external-player-title{font-family:'Clash Display',sans-serif;font-size:clamp(42px,5.2vw,76px);line-height:.94;letter-spacing:-.018em;margin:0;background:var(--primary-fill);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:650;overflow-wrap:anywhere}
.external-player-artist{font-family:'Clash Display',sans-serif;font-size:clamp(20px,2vw,30px);font-weight:450;margin:12px 0 0;color:rgba(255,255,255,.9)}
.external-player-show{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:17px;font-family:'Clash Display',sans-serif;font-size:14px}
.external-player-show-label{font-weight:480;color:rgba(255,255,255,.62)}
.external-player-show-title{font-weight:570;color:#fff}
.external-player-show-time{display:inline-flex;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:550}
.external-player-platforms{display:flex;gap:8px;margin-top:20px}
.external-player-platform{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.08);color:#fff;text-decoration:none;backdrop-filter:blur(12px);transition:transform .2s ease,background .2s ease}
.external-player-platform:hover{transform:translateY(-2px);background:var(--primary-fill)}
.external-player-platform svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.external-player-platform svg.filled{fill:currentColor;stroke:none}
.external-player-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.external-player-play,.external-player-like{height:46px;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 18px;cursor:pointer;font-family:'Clash Display',sans-serif;font-size:14px;font-weight:520}
.external-player-play{background:#fff;color:#10182a;min-width:126px}.external-player-play.playing{background:var(--primary-fill);color:#fff}
.external-player-like{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);color:#fff}.external-player-like.liked{background:var(--primary-fill);border-color:transparent}.external-player-like svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}.external-player-like.liked svg{fill:currentColor;stroke:currentColor}
.external-player-sound{display:flex;align-items:center;gap:9px;height:46px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px)}
.external-player-mute{border:0;background:transparent;color:#fff;width:26px;height:26px;padding:3px;cursor:pointer}.external-player-mute svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.external-player-volume{width:90px;accent-color:var(--primary)}
.external-player-ranking{min-width:0;align-self:center}.external-player-ranking[hidden]{display:none!important}
.external-player-ranking-list{display:grid;gap:10px}
.external-player-rank-item{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:19px;text-decoration:none;color:#fff;background:rgba(7,12,22,.34);border:1px solid rgba(255,255,255,.075);backdrop-filter:blur(18px);opacity:.44;transform:scale(.96);transition:.25s ease}
.external-player-rank-item.current{opacity:1;transform:scale(1);background:color-mix(in srgb,var(--primary) 25%,rgba(7,12,22,.62));border-color:color-mix(in srgb,var(--primary) 44%,transparent);box-shadow:0 17px 40px rgba(0,0,0,.2)}
.external-player-rank-art{width:58px;height:58px;border-radius:14px;overflow:hidden;position:relative;background:rgba(255,255,255,.08)}
.external-player-rank-art img{width:100%;height:100%;object-fit:cover}.external-player-rank-position{position:absolute;left:5px;bottom:5px;padding:4px 6px;border-radius:8px;background:var(--primary-fill);font-family:'Clash Display',sans-serif;font-size:9px;font-weight:650;color:#fff}
.external-player-rank-copy{min-width:0}.external-player-rank-copy strong,.external-player-rank-copy small{display:block;font-family:'Clash Display',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.external-player-rank-copy strong{font-size:14px;font-weight:600}.external-player-rank-copy small{font-size:11px;font-weight:450;margin-top:3px;color:rgba(255,255,255,.6)}
.external-player-status{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:8;padding:7px 11px;border-radius:999px;background:rgba(4,8,16,.45);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);font-family:'Clash Display',sans-serif;font-size:10px;font-weight:450;color:rgba(255,255,255,.55)}
@media(max-width:1050px){.external-player-stage{grid-template-columns:1fr}.external-player-ranking{max-width:720px;width:100%;margin:0 auto}.external-player-ranking-list{grid-template-columns:repeat(3,minmax(0,1fr))}.external-player-rank-item{grid-template-columns:50px minmax(0,1fr)}.external-player-rank-art{width:50px;height:50px}}
@media(max-width:760px){.external-player-top{padding:20px}.external-player-stage{width:min(100% - 34px,620px);padding-top:16px}.external-player-main{grid-template-columns:1fr}.external-player-art-link{width:min(68vw,280px);margin:0 auto}.external-player-copy{text-align:center}.external-player-show,.external-player-platforms,.external-player-controls{justify-content:center}.external-player-title{font-size:clamp(38px,12vw,60px)}.external-player-ranking-list{grid-template-columns:1fr}.external-player-ranking{max-width:430px}.external-player-brand img{max-width:150px;max-height:58px}.external-player-volume{width:68px}}
@media(max-width:480px){.external-player-back span{display:none}.external-player-sound{width:100%;justify-content:center}.external-player-volume{width:min(160px,45vw)}}


/* ===== v1.33 : ajustements player externe ===== */
.footer-modern{margin-top:92px;padding:0 0 34px;background:transparent!important;border:0!important;position:relative}
.footer-modern:before{display:none!important}
.footer-modern-shell{max-width:1540px;padding-top:34px!important;border-top:1px solid color-mix(in srgb,var(--primary) 22%,#dfe5ed)}
.footer-modern-shell:before{content:"";display:block;width:72px;height:3px;border-radius:999px;background:var(--primary-fill);margin:-36px auto 32px}
.footer-modern-brandline{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px}
.footer-modern-logo{width:auto!important;min-width:0!important;height:auto!important;max-width:min(230px,52vw);border-radius:0!important;background:transparent!important;border:0!important;padding:0!important;display:flex!important;align-items:center;justify-content:center}
.footer-modern-logo img{display:block;max-width:100%;max-height:72px;object-fit:contain}
.footer-modern-logo strong{font-family:'Clash Display',sans-serif;font-size:25px;font-weight:600;color:#172033}
.footer-modern-tagline{margin:0!important;max-width:620px;color:#7b8798!important;font-family:'Clash Display',sans-serif;font-size:13px!important;font-weight:430;line-height:1.45}
.footer-modern-nav{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:25px}
.footer-modern-nav a{display:inline-flex!important;margin:0!important;padding:7px 10px!important;border-radius:10px;color:#4d596c!important;text-decoration:none;font-family:'Clash Display',sans-serif;font-size:12px!important;font-weight:500;transition:background .2s ease,color .2s ease,transform .2s ease}
.footer-modern-nav a:hover{background:color-mix(in srgb,var(--primary) 9%,transparent);color:var(--primary)!important;transform:translateY(-1px)}
.footer-modern-bottom{display:flex;flex-direction:column;align-items:center!important;justify-content:center!important;gap:14px;padding:23px 0 0!important;margin-top:22px;border-top:1px solid #edf0f4}
.footer-modern-socials{display:flex;justify-content:center;gap:8px;margin:0!important}
.footer-modern-socials a{display:grid!important;place-items:center;width:31px;height:31px;margin:0!important;border-radius:50%;background:#f2f4f7;color:#667286!important;border:1px solid #e9edf2;font-family:'Clash Display',sans-serif;font-size:9px!important;font-weight:600;text-decoration:none;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.footer-modern-socials a:hover{transform:translateY(-2px);background:var(--primary-fill);border-color:transparent;color:#fff!important}
.footer-modern-meta{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;color:#99a2b0;font-size:11px}
.footer-modern-meta a{color:#99a2b0;text-decoration:none;transition:color .2s ease}.footer-modern-meta a:hover{color:var(--primary)}
.footer-modern-dot{width:3px;height:3px;border-radius:50%;background:#c9d0da}
html.system-evening .footer-modern-shell{border-top-color:#232d3e}
html.system-evening .footer-modern-logo strong{color:#eef2f8}
html.system-evening .footer-modern-tagline{color:#7f8ca0!important}
html.system-evening .footer-modern-nav a{color:#9ba7b9!important}
html.system-evening .footer-modern-nav a:hover{background:color-mix(in srgb,var(--primary) 14%,transparent);color:#fff!important}
html.system-evening .footer-modern-bottom{border-top-color:#1d2737}
html.system-evening .footer-modern-socials a{background:#111a29;border-color:#1c2739;color:#9ba8ba!important}
html.system-evening .footer-modern-meta,html.system-evening .footer-modern-meta a{color:#657187}
@media(max-width:600px){.footer-modern{margin-top:64px}.footer-modern-shell{padding-top:29px!important}.footer-modern-shell:before{margin-top:-31px;margin-bottom:26px}.footer-modern-nav{max-width:430px;margin-left:auto;margin-right:auto}.footer-modern-nav a{padding:7px 8px!important}.footer-modern-bottom{margin-top:17px}}

/* Player : composition centrée, plus légère, avec barre de contrôle centrale */
.external-player-page{background:#070b13}
.external-player-page .external-player-shell{min-height:100svh;padding:0 0 38px}
.external-player-bg-cover{inset:-2%;width:104%;height:104%;filter:blur(9px) saturate(1.04);transform:scale(1.03);opacity:.66}
.external-player-bg-video.visible{opacity:.58}
.external-player-overlay{background:linear-gradient(180deg,rgba(4,8,15,.50) 0%,rgba(4,8,15,.68) 50%,rgba(4,8,15,.82) 100%),linear-gradient(90deg,rgba(4,8,15,.18),rgba(4,8,15,.04),rgba(4,8,15,.18));backdrop-filter:none}
.external-player-top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px 24px 8px;position:relative;z-index:5;text-align:center}
.external-player-brand{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;min-height:58px}
.external-player-brand img{display:block;max-width:min(210px,56vw);max-height:72px;object-fit:contain}
.external-player-brand strong{font-family:'Clash Display',sans-serif;font-size:25px;font-weight:600}
.external-player-back{display:none!important}
.external-player-show{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin:0!important;padding:7px 12px;border-radius:999px;background:rgba(8,13,24,.28);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);font-family:'Clash Display',sans-serif;font-size:12px;box-shadow:0 8px 26px rgba(0,0,0,.10)}
.external-player-show[hidden]{display:none!important}
.external-player-show-label{font-weight:480;color:rgba(255,255,255,.62)}
.external-player-show-title{font-weight:560;color:#fff}
.external-player-show-time{display:inline-flex;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.10);border:0;font-size:10px;font-weight:520;color:rgba(255,255,255,.8)}
.external-player-show.is-filler .external-player-show-time{display:none!important}
.external-player-stage{width:min(1180px,calc(100% - 42px));margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px 0 18px;position:relative;z-index:2;flex:1}
.external-player-main{width:min(760px,100%);display:grid;grid-template-columns:minmax(190px,270px) minmax(0,1fr);gap:clamp(24px,4vw,46px);align-items:center;min-width:0}
.external-player-art-link{display:block;width:100%;text-decoration:none;position:relative;border-radius:26px;overflow:visible;box-shadow:0 24px 70px rgba(0,0,0,.28);aspect-ratio:1;background:rgba(255,255,255,.07)}
.external-player-art{width:100%;height:100%;object-fit:cover;display:block;border-radius:26px}
.external-player-live-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:3;padding:6px 11px;border-radius:999px;background:var(--primary-fill);font-family:'Clash Display',sans-serif;font-size:9px;font-weight:600;letter-spacing:.07em;color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 22%,transparent)}
.external-player-copy{min-width:0}
.external-player-kicker{display:none!important}
.external-player-title{font-family:'Clash Display',sans-serif;font-size:clamp(34px,4.2vw,58px);line-height:.98;letter-spacing:-.008em;margin:0;background:var(--primary-fill);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:650;overflow-wrap:anywhere}
.external-player-artist{font-family:'Clash Display',sans-serif;font-size:clamp(17px,1.8vw,24px);font-weight:440;margin:9px 0 0;color:rgba(255,255,255,.84)}
.external-player-platforms{display:flex;gap:7px;margin-top:17px}
.external-player-platform{display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.07);color:#fff;text-decoration:none;backdrop-filter:blur(12px);transition:transform .2s ease,background .2s ease,border-color .2s ease}
.external-player-platform:hover{transform:translateY(-2px);background:var(--primary-fill);border-color:transparent}
.external-player-platform svg{width:15px;height:15px}
.external-player-controlbar{display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);padding:7px 9px;border-radius:999px;background:rgba(247,249,252,.92);border:1px solid rgba(255,255,255,.72);box-shadow:0 18px 55px rgba(0,0,0,.20);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);color:#182033}
.external-player-play,.external-player-like{height:38px;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;cursor:pointer;font-family:'Clash Display',sans-serif;font-size:12px;font-weight:500;transition:transform .2s ease,background .2s ease,color .2s ease}
.external-player-play{background:var(--primary-fill);color:#fff;min-width:104px;box-shadow:none}.external-player-play.playing{background:var(--primary-fill);color:#fff}
.external-player-play:hover,.external-player-like:hover{transform:translateY(-1px)}
.external-player-like{background:transparent!important;border:0!important;color:#455064;box-shadow:none!important;outline:0!important}
.external-player-like.liked{background:var(--primary-fill)!important;color:#fff!important;box-shadow:none!important;border:0!important}
.external-player-like svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}.external-player-like.liked svg{fill:currentColor;stroke:currentColor}
.external-player-control-separator{width:1px;height:22px;background:#dfe4eb;flex:0 0 1px}
.external-player-sound{display:flex;align-items:center;gap:7px;height:38px;padding:0 8px 0 5px;border-radius:999px;background:transparent!important;border:0!important;backdrop-filter:none!important}
.external-player-mute{border:0;background:transparent;color:#5d687a;width:27px;height:27px;padding:4px;cursor:pointer}.external-player-mute svg{width:100%;height:100%}
.external-player-volume{width:78px;accent-color:var(--primary)}
.external-player-ranking{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(330px,29vw);min-width:260px;z-index:4}.external-player-ranking[hidden]{display:none!important}
.external-player-ranking-list{display:grid;gap:8px}
.external-player-rank-item{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;padding:8px;border-radius:17px;text-decoration:none;color:#fff;background:rgba(7,12,22,.30);border:1px solid rgba(255,255,255,.065);backdrop-filter:blur(18px);opacity:.38;transform:scale(.96);transition:.25s ease}
.external-player-rank-item.current{opacity:1;transform:scale(1);background:color-mix(in srgb,var(--primary) 22%,rgba(7,12,22,.58));border-color:color-mix(in srgb,var(--primary) 35%,transparent);box-shadow:0 14px 36px rgba(0,0,0,.18)}
.external-player-rank-art{width:52px;height:52px;border-radius:13px;overflow:hidden;position:relative;background:rgba(255,255,255,.08)}
.external-player-rank-art img{width:100%;height:100%;object-fit:cover}.external-player-rank-position{position:absolute;left:4px;bottom:4px;padding:3px 5px;border-radius:7px;background:var(--primary-fill);font-family:'Clash Display',sans-serif;font-size:8px;font-weight:650;color:#fff}
.external-player-rank-copy strong{font-size:13px;font-weight:570}.external-player-rank-copy small{font-size:10px;font-weight:430;margin-top:2px;color:rgba(255,255,255,.58)}
.external-player-status{display:none!important}
@media(max-width:1180px){.external-player-ranking{position:static;transform:none;width:min(760px,100%);min-width:0}.external-player-ranking-list{grid-template-columns:repeat(3,minmax(0,1fr))}.external-player-rank-item{grid-template-columns:46px minmax(0,1fr)}.external-player-rank-art{width:46px;height:46px}}
@media(max-width:760px){.external-player-top{padding:21px 17px 5px;gap:12px}.external-player-brand img{max-height:58px}.external-player-stage{width:min(100% - 30px,620px);padding-top:17px;gap:21px}.external-player-main{grid-template-columns:1fr;gap:22px}.external-player-art-link{width:min(62vw,245px);margin:0 auto}.external-player-copy{text-align:center}.external-player-platforms{justify-content:center}.external-player-title{font-size:clamp(33px,10vw,52px)}.external-player-ranking-list{grid-template-columns:1fr}.external-player-ranking{max-width:420px}.external-player-controlbar{gap:5px;padding:6px 7px}.external-player-play,.external-player-like{padding:0 10px}.external-player-volume{width:62px}}
@media(max-width:500px){.external-player-controlbar{width:min(100%,390px);justify-content:center;flex-wrap:wrap;border-radius:24px;padding:8px}.external-player-control-separator{display:none}.external-player-sound{height:34px}.external-player-play,.external-player-like{height:35px}.external-player-volume{width:72px}.external-player-show{max-width:calc(100vw - 34px);border-radius:18px}.external-player-art-link{width:min(64vw,225px)}}


/* ===== v1.33 : player sans classement = titrage pleine largeur ===== */
.external-player-stage:not(.has-ranking) .external-player-main{
  width:min(1040px,100%);
}
.external-player-stage:not(.has-ranking) .external-player-copy{
  width:100%;
  min-width:0;
}
.external-player-stage:not(.has-ranking) .external-player-title{
  max-width:none;
  width:100%;
}
.external-player-show-time[hidden],
.external-player-show.is-filler .external-player-show-time{
  display:none!important;
}
/* Aucun libellé de statut "Player en direct" en bas du player. */
.external-player-status{display:none!important}
@media(max-width:1180px){
  .external-player-stage:not(.has-ranking) .external-player-main{width:min(920px,100%)}
}
@media(max-width:760px){
  .external-player-stage:not(.has-ranking) .external-player-main{width:100%}
}

/* ===== v1.34 : player externe — disposition light, contrôles icônes, classement responsive ===== */
.external-player-page .external-player-shell{
  padding-bottom:112px;
}

/* Le clip reste un fond visuel : aucune interaction YouTube et les overlays du lecteur sont rendus imperceptibles. */
.external-player-bg-video{
  pointer-events:none!important;
  filter:blur(8px) saturate(1.08) brightness(.88);
  transform:translate(-50%,-50%) scale(1.045);
  transform-origin:center;
}
.external-player-bg-video.visible{opacity:.55}
.external-player-overlay{
  background:
    radial-gradient(circle at 50% 46%,rgba(4,8,15,.30) 0%,rgba(4,8,15,.48) 34%,rgba(4,8,15,.72) 76%,rgba(4,8,15,.82) 100%),
    linear-gradient(180deg,rgba(4,8,15,.34),rgba(4,8,15,.70));
}

/* Logo centré, émission en cours indépendante en haut à gauche. */
.external-player-top{
  min-height:104px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:24px clamp(22px,3.5vw,58px) 8px;
  position:relative;
  text-align:center;
}
.external-player-brand{margin:0 auto;min-height:58px;display:flex;align-items:center;justify-content:center}
.external-player-brand img{max-height:70px;max-width:min(210px,44vw)}
.external-player-show{
  position:absolute;
  left:clamp(20px,3vw,52px);
  top:29px;
  max-width:min(430px,36vw);
  justify-content:flex-start;
  text-align:left;
  padding:7px 11px;
  margin:0!important;
  border-radius:14px;
  background:rgba(7,12,22,.28);
  border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.external-player-show-label,.external-player-show-title{font-size:12px;line-height:1.2}
.external-player-show-time{font-size:9px}
.external-player-show.is-filler .external-player-show-time,
.external-player-show-time[hidden]{display:none!important}

/* Titrage + classement : deux colonnes uniquement lorsqu'un classement existe. */
.external-player-stage{
  width:min(1420px,calc(100% - 56px));
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,360px);
  gap:clamp(38px,4.5vw,72px);
  align-items:center;
  justify-content:center;
  padding:28px 0 36px;
  flex:1;
}
.external-player-main{
  width:100%;
  max-width:980px;
  justify-self:end;
  display:grid;
  grid-template-columns:minmax(210px,290px) minmax(0,1fr);
  gap:clamp(28px,3.8vw,52px);
  align-items:center;
}
.external-player-copy{min-width:0;width:100%}
.external-player-title{
  font-size:clamp(38px,4.45vw,66px);
  line-height:.96;
  letter-spacing:-.006em;
  overflow-wrap:normal;
  word-break:normal;
}
.external-player-artist{font-size:clamp(18px,1.75vw,25px);margin-top:9px}
.external-player-platforms{margin-top:17px}
.external-player-ranking{
  position:static!important;
  transform:none!important;
  width:100%!important;
  min-width:0!important;
  max-width:360px;
  justify-self:start;
  align-self:center;
}
.external-player-stage:not(.has-ranking){
  grid-template-columns:1fr;
}
.external-player-stage:not(.has-ranking) .external-player-main{
  width:min(1120px,100%);
  max-width:1120px;
  justify-self:center;
  grid-template-columns:minmax(220px,300px) minmax(0,1fr);
}
.external-player-stage:not(.has-ranking) .external-player-copy,
.external-player-stage:not(.has-ranking) .external-player-title{width:100%;max-width:none}

/* Barre de contrôle fixe et discrète en bas. */
.external-player-controlbar{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:max-content;
  max-width:calc(100vw - 28px);
  padding:7px 9px;
  border-radius:999px;
  background:rgba(247,249,252,.90);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 16px 46px rgba(0,0,0,.22);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  color:#182033;
}
.external-player-icon-button{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  padding:0!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
}
.external-player-play{
  background:var(--primary-fill)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.external-player-play svg{width:18px;height:18px;fill:currentColor}
.external-player-play .external-pause-shape{display:none}
.external-player-play.playing .external-play-shape{display:none}
.external-player-play.playing .external-pause-shape{display:block}
.external-player-like{
  background:transparent!important;
  color:#465268!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
}
.external-player-like.liked{
  background:var(--primary-fill)!important;
  color:#fff!important;
}
.external-player-like svg{width:18px;height:18px}
.external-player-like-separator{display:none!important}
.external-player-control-separator{height:20px}
.external-player-sound{height:40px;padding:0 8px 0 3px}
.external-player-volume{width:92px}

@media(max-width:1180px){
  .external-player-stage,
  .external-player-stage.has-ranking{grid-template-columns:1fr;gap:28px}
  .external-player-main,
  .external-player-stage:not(.has-ranking) .external-player-main{justify-self:center;width:min(900px,100%);max-width:900px}
  .external-player-ranking{justify-self:center;max-width:760px}
  .external-player-ranking-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .external-player-show{max-width:40vw}
}
@media(max-width:760px){
  .external-player-page .external-player-shell{padding-bottom:98px}
  .external-player-top{min-height:124px;padding:20px 16px 5px;align-items:flex-start}
  .external-player-brand img{max-height:56px;max-width:150px}
  .external-player-show{left:15px;top:78px;max-width:calc(100vw - 30px);right:15px;width:max-content}
  .external-player-stage{width:min(100% - 30px,620px);padding-top:18px}
  .external-player-main,
  .external-player-stage:not(.has-ranking) .external-player-main{grid-template-columns:1fr;gap:20px;width:100%}
  .external-player-art-link{width:min(60vw,238px);margin:0 auto}
  .external-player-copy{text-align:center}
  .external-player-platforms{justify-content:center}
  .external-player-title{font-size:clamp(34px,10.6vw,54px)}
  .external-player-ranking-list{grid-template-columns:1fr}
  .external-player-ranking{max-width:430px}
  .external-player-controlbar{bottom:14px}
}
@media(max-width:500px){
  .external-player-controlbar{width:auto;flex-wrap:nowrap;border-radius:999px;padding:7px 8px}
  .external-player-volume{width:76px}
  .external-player-sound{width:auto;justify-content:center}
}


/* ===== v1.35 : logos clair/sombre automatiques + finitions player ===== */
.theme-logo{max-width:100%;object-fit:contain}
.theme-logo-light{display:block!important}
.theme-logo-dark{display:none!important}
html.system-evening .theme-logo-light{display:none!important}
html.system-evening .theme-logo-dark{display:block!important}

/* Artiste du player un peu plus léger. */
.external-player-artist{font-weight:400!important}

/* Barre de volume sans contour, y compris au focus. */
.external-player-volume,
.external-player-volume:focus,
.external-player-volume:focus-visible{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.external-player-volume::-moz-focus-outer{border:0!important}
.external-player-volume::-moz-range-track{border:0!important;outline:0!important;box-shadow:none!important}
.external-player-volume::-webkit-slider-runnable-track{border:0!important;outline:0!important;box-shadow:none!important}

/* ===== v1.36 : cohérence logo, footer plus lisible, aucun lien admin public ===== */
/* Le logo du player reprend exactement la hauteur configurée pour le logo du site. */
.external-player-brand .theme-logo{
  height:var(--site-logo-height,58px)!important;
  width:auto!important;
  max-width:min(520px,48vw)!important;
  max-height:none!important;
  object-fit:contain!important;
}
@media(max-width:900px){
  .external-player-brand .theme-logo{
    height:min(var(--site-logo-height,58px),56px)!important;
    max-width:190px!important;
  }
}
@media(max-width:520px){
  .external-player-brand .theme-logo{
    height:min(var(--site-logo-height,58px),48px)!important;
    max-width:150px!important;
  }
}

/* En mode sombre, aucun halo/ombre blanche autour du logo du header. */
html.system-evening .home-page .brand,
html.system-evening .home-page .brand img,
html.system-evening .home-page .brand .theme-logo{
  filter:none!important;
  text-shadow:none!important;
  box-shadow:none!important;
}

/* Footer : liens plus lisibles et hover toujours dans la couleur principale. */
.footer-modern-nav a{
  font-size:15px!important;
  padding:9px 12px!important;
}
.footer-modern-nav a:hover{
  color:var(--primary)!important;
  background:color-mix(in srgb,var(--primary) 9%,transparent)!important;
}
html.system-evening .footer-modern-nav a:hover{
  color:var(--primary)!important;
  background:color-mix(in srgb,var(--primary) 14%,transparent)!important;
}


/* ===== v1.37 : classement player plus présent ===== */
.external-player-ranking{max-width:390px!important}
.external-player-ranking-list{gap:11px!important}
.external-player-rank-item{
  grid-template-columns:62px minmax(0,1fr)!important;
  gap:13px!important;
  min-height:78px!important;
  padding:10px 12px 10px 10px!important;
  border-radius:20px!important;
}
.external-player-rank-art{width:62px!important;height:62px!important;border-radius:14px!important}
.external-player-rank-position{font-size:12px!important;padding:5px 7px!important}
.external-player-rank-copy strong{font-size:16px!important}
.external-player-rank-copy span{font-size:12px!important}
.external-player-rank-item.current{
  background:var(--primary-fill)!important;
  border-color:transparent!important;
  box-shadow:0 18px 44px color-mix(in srgb,var(--primary) 34%,rgba(0,0,0,.22))!important;
  opacity:1!important;
  transform:scale(1.02)!important;
}
.external-player-rank-item.current .external-player-rank-position{
  background:rgba(5,10,20,.58)!important;
  color:#fff!important;
}
.external-player-rank-item.current .external-player-rank-copy strong,
.external-player-rank-item.current .external-player-rank-copy span{color:#fff!important}
@media(max-width:1180px){
  .external-player-ranking{max-width:800px!important}
  .external-player-rank-item{grid-template-columns:56px minmax(0,1fr)!important;min-height:72px!important}
  .external-player-rank-art{width:56px!important;height:56px!important}
}
@media(max-width:760px){
  .external-player-ranking{max-width:440px!important}
  .external-player-rank-item{grid-template-columns:58px minmax(0,1fr)!important}
  .external-player-rank-art{width:58px!important;height:58px!important}
}


/* ===== v1.38 : transition douce au changement de titre et de pochette du player ===== */
.external-player-copy{
  transition:opacity .17s ease,transform .17s ease,filter .17s ease;
  will-change:opacity,transform,filter;
}
.external-player-copy.track-leaving{
  opacity:0;
  transform:translateY(-9px);
  filter:blur(4px);
}
.external-player-copy.track-entering{animation:externalPlayerCopyIn .48s cubic-bezier(.22,.75,.24,1) both}
.external-player-copy.track-entering .external-player-artist{animation:externalPlayerTextDetailIn .48s .045s cubic-bezier(.22,.75,.24,1) both}
.external-player-copy.track-entering .external-player-platforms{animation:externalPlayerTextDetailIn .48s .09s cubic-bezier(.22,.75,.24,1) both}
@keyframes externalPlayerCopyIn{
  from{opacity:0;transform:translateY(11px);filter:blur(5px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes externalPlayerTextDetailIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}
.external-player-art,
.external-player-bg-cover{
  transition:opacity .15s ease,transform .15s ease,filter .15s ease;
  will-change:opacity,transform,filter;
}
.external-player-art.cover-leaving{opacity:.08;transform:scale(.965);filter:blur(5px)}
.external-player-bg-cover.cover-leaving{opacity:.12;transform:scale(1.055);filter:blur(15px) saturate(1.04)}
.external-player-art.cover-entering{animation:externalPlayerCoverIn .52s cubic-bezier(.2,.78,.25,1) both}
.external-player-bg-cover.cover-entering{animation:externalPlayerBackgroundCoverIn .58s cubic-bezier(.2,.78,.25,1) both}
@keyframes externalPlayerCoverIn{
  from{opacity:0;transform:scale(.955);filter:blur(7px)}
  65%{opacity:1}
  to{opacity:1;transform:scale(1);filter:blur(0)}
}
@keyframes externalPlayerBackgroundCoverIn{
  from{opacity:.08;transform:scale(1.075);filter:blur(17px) saturate(1.04)}
  to{opacity:.66;transform:scale(1.03);filter:blur(9px) saturate(1.04)}
}
@media(prefers-reduced-motion:reduce){
  .external-player-copy,
  .external-player-copy.track-entering,
  .external-player-copy.track-entering .external-player-artist,
  .external-player-copy.track-entering .external-player-platforms,
  .external-player-art,
  .external-player-bg-cover,
  .external-player-art.cover-entering,
  .external-player-bg-cover.cover-entering{animation:none!important;transition:none!important}
  .external-player-copy.track-leaving,.external-player-copy.track-entering{opacity:1!important;transform:none!important;filter:none!important}
  .external-player-art.cover-leaving,.external-player-art.cover-entering{opacity:1!important;transform:none!important;filter:none!important}
  .external-player-bg-cover.cover-leaving,.external-player-bg-cover.cover-entering{opacity:.66!important;transform:scale(1.03)!important;filter:blur(9px) saturate(1.04)!important}
}

/* ===== v1.39 : grille programmes, fiches émissions, footer social, classement + progression player ===== */

/* Titre contextuel au-dessus du classement du hero / player : Clash Display,
   volontairement discret et sans cartouche. */
.hero-ranking-kicker,
.external-player-ranking-kicker{
  margin:0 0 11px 3px;
  padding:0;
  border:0;
  background:transparent!important;
  box-shadow:none!important;
  font-family:var(--title-font);
  font-size:17px;
  line-height:1;
  font-weight:500;
  letter-spacing:-.015em;
  color:rgba(255,255,255,.48);
  text-shadow:0 2px 14px rgba(0,0,0,.12);
}
html.system-evening .hero-ranking-kicker,
html.system-evening .external-player-ranking-kicker{color:rgba(255,255,255,.52)}

/* Le badge de position du morceau actuellement classé reste dans la couleur
   principale de la radio, même lorsque tout son bandeau est déjà coloré. */
.external-player-rank-item.current .external-player-rank-position{
  background:var(--primary-fill)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.62),0 7px 18px color-mix(in srgb,var(--primary) 34%,transparent)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Progression du morceau courant au bord inférieur du player. */
.external-player-track-progress{
  position:fixed;
  z-index:90;
  left:0;
  right:0;
  bottom:0;
  height:5px;
  overflow:hidden;
  pointer-events:none;
  background:rgba(255,255,255,.13);
}
.external-player-track-progress>span{
  display:block;
  width:0;
  height:100%;
  border-radius:0 999px 999px 0;
  background:var(--primary-fill);
  box-shadow:0 -2px 16px color-mix(in srgb,var(--primary) 34%,transparent);
  transition:width .24s linear;
}

/* Dernière carte du carrousel d'émissions : accès à la grille complète. */
.all-programs-tile{
  display:flex!important;
  align-items:stretch;
  justify-content:stretch;
  text-decoration:none;
  background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 10%,#fff),rgba(255,255,255,.72));
  border:1px solid color-mix(in srgb,var(--primary) 19%,rgba(30,45,75,.10));
  color:#202a3d;
  overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.all-programs-tile:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--primary) 45%,transparent);
  box-shadow:0 18px 42px color-mix(in srgb,var(--primary) 14%,rgba(12,22,44,.12));
}
.all-programs-tile-inner{
  width:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  gap:5px;
  padding:22px;
}
.all-programs-arrow{
  width:44px;
  height:44px;
  margin-bottom:auto;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--primary-fill);
  color:#fff;
  font-family:var(--title-font);
  font-size:22px;
  box-shadow:0 9px 25px color-mix(in srgb,var(--primary) 20%,transparent);
}
.all-programs-tile strong{font-family:var(--title-font);font-size:23px;line-height:1.03;font-weight:600;letter-spacing:-.025em}
.all-programs-tile small{font-size:12px;color:rgba(31,42,64,.58)}
.empty-program-link{display:inline-flex;margin-top:13px}
html.system-evening .all-programs-tile{
  background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 17%,#121722),rgba(17,22,32,.78));
  border-color:rgba(255,255,255,.09);
  color:#f5f7fb;
}
html.system-evening .all-programs-tile small{color:rgba(239,243,251,.57)}

/* Page Programme : vraie grille hebdomadaire avec navigation semaine par semaine. */
.program-main{padding:132px 0 90px;min-height:78vh}
.program-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:27px}
.program-kicker{display:block;margin-bottom:8px;font-family:var(--title-font);font-size:12px;font-weight:600;letter-spacing:.13em;color:var(--primary)}
.program-head h1{margin:0;font-family:var(--title-font);font-size:clamp(46px,6vw,82px);line-height:.92;font-weight:600;letter-spacing:-.045em;color:#1f2a3d}
.program-head p{margin:14px 0 0;max-width:600px;color:#768196;font-size:14px}
.program-week-nav{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.program-week-nav a{height:44px;min-width:44px;padding:0 15px;border-radius:999px;display:grid;place-items:center;text-decoration:none;background:rgba(255,255,255,.72);border:1px solid rgba(39,55,85,.10);color:#28354c;font-family:var(--title-font);font-weight:500;box-shadow:0 8px 25px rgba(28,45,76,.06);transition:.2s ease}
.program-week-nav a:hover{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 30%,transparent);transform:translateY(-1px)}
.program-week-nav .program-today{padding:0 18px;font-size:13px}
.program-week-title{margin-bottom:15px;font-family:var(--title-font);font-size:18px;font-weight:500;color:#657188}
.program-grid{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:10px;align-items:start}
.program-day{min-width:0;border-radius:22px;background:rgba(255,255,255,.64);border:1px solid rgba(30,49,79,.08);box-shadow:0 14px 38px rgba(24,41,70,.06);overflow:hidden}
.program-day.is-today{border-color:color-mix(in srgb,var(--primary) 35%,transparent);box-shadow:0 16px 44px color-mix(in srgb,var(--primary) 10%,rgba(24,41,70,.07))}
.program-day-head{min-height:61px;padding:13px 14px;display:flex;flex-direction:column;justify-content:center;gap:2px;border-bottom:1px solid rgba(35,51,80,.07)}
.program-day-head strong{font-family:var(--title-font);font-size:15px;font-weight:600;color:#28344a}
.program-day-head span{font-size:11px;color:#8791a2}
.program-day.is-today .program-day-head{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.program-day.is-today .program-day-head strong{color:var(--primary)}
.program-day-list{display:flex;flex-direction:column;gap:8px;padding:8px;min-height:170px}
.program-card{display:block;text-decoration:none;color:inherit;border-radius:16px;background:rgba(248,250,253,.82);border:1px solid rgba(35,51,80,.06);overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.program-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 28%,transparent);box-shadow:0 12px 26px color-mix(in srgb,var(--primary) 9%,rgba(25,40,67,.08))}
.program-card-cover{aspect-ratio:1/1;overflow:hidden;background:rgba(27,38,58,.06)}
.program-card-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.program-card:hover .program-card-cover img{transform:scale(1.025)}
.program-card-copy{display:flex;flex-direction:column;gap:4px;padding:10px 10px 11px}
.program-card-time{display:inline-flex;align-self:flex-start;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--primary) 9%,transparent);color:var(--primary);font-family:var(--title-font);font-size:10px;font-weight:600}
.program-card-copy strong{font-family:var(--title-font);font-size:14px;line-height:1.08;font-weight:600;letter-spacing:-.015em;color:#27344a}
.program-card-copy small{font-size:10px;line-height:1.3;color:#818a9c}
.program-day-empty{padding:25px 10px;text-align:center;font-size:11px;color:#a0a8b5}
html.system-evening .program-head h1{color:#f5f7fb}
html.system-evening .program-head p,html.system-evening .program-week-title{color:rgba(238,243,250,.58)}
html.system-evening .program-week-nav a{background:rgba(19,25,36,.72);border-color:rgba(255,255,255,.08);color:#f0f4fb}
html.system-evening .program-day{background:rgba(19,25,36,.70);border-color:rgba(255,255,255,.07);box-shadow:0 14px 38px rgba(0,0,0,.18)}
html.system-evening .program-day-head{border-bottom-color:rgba(255,255,255,.06)}
html.system-evening .program-day-head strong,html.system-evening .program-card-copy strong{color:#f1f4fa}
html.system-evening .program-day-head span,html.system-evening .program-card-copy small{color:rgba(239,243,250,.52)}
html.system-evening .program-card{background:rgba(26,33,46,.78);border-color:rgba(255,255,255,.06)}

/* Fiche émission : le logo propre à l'émission devient la signature visuelle. */
.show-detail-main{padding:140px 0 95px;min-height:76vh}
.show-detail-card{width:min(980px,100%);margin:0 auto;padding:clamp(28px,5vw,62px);border-radius:32px;background:rgba(255,255,255,.67);border:1px solid rgba(33,51,82,.08);box-shadow:0 25px 75px rgba(27,43,71,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.show-detail-logo-area{text-align:center;display:flex;flex-direction:column;align-items:center}
.show-detail-logo{display:block;width:auto;height:auto;max-width:min(520px,78vw);max-height:190px;object-fit:contain;margin:0 auto 18px}
.show-detail-title-fallback{margin:0 0 14px;font-family:var(--title-font);font-size:clamp(42px,7vw,76px);line-height:.94;font-weight:600;letter-spacing:-.045em;color:#223047}
.show-detail-summary{max-width:700px;margin:0 auto 16px;font-family:var(--title-font);font-size:clamp(17px,2vw,22px);line-height:1.22;font-weight:400;color:#58657a}
.show-detail-schedule{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:7px 11px;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);font-family:var(--title-font);font-size:12px;font-weight:600}
.show-next-countdown{margin-top:20px;padding-top:20px;border-top:1px solid rgba(34,52,82,.08);display:flex;flex-direction:column;align-items:center;gap:5px;min-width:min(410px,100%)}
.show-next-countdown span{font-family:var(--title-font);font-size:13px;font-weight:400;color:#8790a0}
.show-next-countdown strong{font-family:var(--title-font);font-size:clamp(23px,3vw,34px);font-weight:600;letter-spacing:-.025em;color:var(--primary)}
.show-detail-card .show-detail-description{margin:34px auto 0;max-width:760px;padding-top:28px;border-top:1px solid rgba(34,52,82,.08);font-size:15px;line-height:1.72;color:#667286}
.show-detail-card .show-detail-description p{margin:0}
.show-detail-actions{display:flex;justify-content:center;margin-top:31px}
.show-detail-back{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--title-font);font-size:14px;font-weight:500;color:#46536a;transition:.2s ease}
.show-detail-back:hover{color:var(--primary);gap:12px}
html.system-evening .show-detail-card{background:rgba(18,24,35,.68);border-color:rgba(255,255,255,.07);box-shadow:0 28px 80px rgba(0,0,0,.22)}
html.system-evening .show-detail-title-fallback{color:#f4f7fb}
html.system-evening .show-detail-summary{color:rgba(240,244,251,.70)}
html.system-evening .show-next-countdown,html.system-evening .show-detail-card .show-detail-description{border-color:rgba(255,255,255,.07)}
html.system-evening .show-next-countdown span,html.system-evening .show-detail-card .show-detail-description{color:rgba(237,242,250,.57)}
html.system-evening .show-detail-back{color:rgba(241,245,252,.75)}

/* Réseaux sociaux juste sous le menu du footer. Aucun élément n'est généré si
   aucun lien actif n'a été renseigné dans l'administration. */
.footer-social-row{display:flex!important;align-items:center;justify-content:center;gap:8px;margin:13px auto 0!important}
.footer-social-button{width:38px!important;height:38px!important;min-width:38px;display:grid!important;place-items:center!important;padding:0!important;border-radius:50%!important;text-decoration:none!important;background:rgba(255,255,255,.62)!important;border:1px solid rgba(31,47,76,.09)!important;color:#5d687b!important;font-family:var(--title-font)!important;font-size:11px!important;font-weight:600!important;transition:transform .2s ease,color .2s ease,background .2s ease,border-color .2s ease!important}
.footer-social-button:hover{transform:translateY(-2px);color:#fff!important;background:var(--primary-fill)!important;border-color:transparent!important;box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 20%,transparent)!important}
html.system-evening .footer-social-button{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.08)!important;color:rgba(244,247,252,.74)!important}
html.system-evening .footer-social-button:hover{background:var(--primary-fill)!important;color:#fff!important;border-color:transparent!important}

@media(max-width:1180px){
  .program-grid{grid-template-columns:repeat(4,minmax(170px,1fr))}
}
@media(max-width:760px){
  .hero-ranking-kicker,.external-player-ranking-kicker{font-size:14px;margin-bottom:8px}
  .program-main{padding-top:105px}
  .program-head{align-items:flex-start;flex-direction:column;gap:19px}
  .program-week-nav{width:100%;justify-content:space-between}
  .program-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:0 2px 10px;scrollbar-width:none}
  .program-grid::-webkit-scrollbar{display:none}
  .program-day{flex:0 0 min(78vw,280px);scroll-snap-align:start}
  .show-detail-main{padding-top:110px}
  .show-detail-card{border-radius:24px;padding:28px 20px}
  .show-next-countdown{min-width:0;width:100%}
}

/* ===== v1.41 : Programme épuré + player PWA ===== */
/* Le sélecteur de semaine devient l'élément central de navigation. La plage
   de dates textuelle n'est plus affichée. */
.program-head{
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:stretch!important;
  align-items:start!important;
  gap:24px!important;
  margin-bottom:29px!important;
}
.program-head-copy{min-width:0}
.program-head p{
  font-family:var(--title-font)!important;
  font-weight:400!important;
  letter-spacing:-.01em;
}
.program-week-nav{
  justify-self:center!important;
  justify-content:center!important;
  width:auto!important;
  margin:0 auto!important;
}
.program-week-title{display:none!important}
@media(max-width:760px){
  .program-head{gap:20px!important}
  .program-week-nav{width:auto!important;justify-content:center!important}
}

/* Bouton d'installation PWA : uniquement visible lorsque le navigateur peut
   réellement déclencher l'installation (Android/Chrome/Edge notamment). */
.external-player-install{
  position:absolute;
  right:clamp(20px,3vw,52px);
  top:28px;
  z-index:8;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  display:grid;
  place-items:center;
  padding:0;
  background:rgba(7,12,22,.26);
  color:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.external-player-install[hidden]{display:none!important}
.external-player-install:hover{transform:translateY(-1px);background:var(--primary-fill);color:#fff;border-color:transparent}
.external-player-install svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
  .external-player-install{right:15px;top:19px;width:36px;height:36px}
}

/* ===== v1.42 : player clair/sombre synchronisé + responsive mobile hero/player ===== */
/* Le player suit exactement le même thème horaire que le site : clair en journée,
   sombre entre 19 h et 7 h via la classe html.system-evening. */
.external-player-page{
  background:#f4f6fa!important;
  color:#1d2940!important;
}
.external-player-page .external-player-shell{
  background:#eef3f8;
}
.external-player-media{background:#e9eef5!important}
.external-player-bg-cover{opacity:.44!important;filter:blur(10px) saturate(.92) brightness(1.04)!important}
.external-player-bg-video.visible{opacity:.34!important}
.external-player-bg-video{filter:blur(9px) saturate(.94) brightness(1.07)!important}
.external-player-overlay{
  background:
    radial-gradient(circle at 50% 46%,rgba(247,249,252,.32) 0%,rgba(247,249,252,.48) 34%,rgba(244,247,251,.76) 76%,rgba(242,246,250,.88) 100%),
    linear-gradient(180deg,rgba(248,250,252,.40),rgba(241,245,250,.80))!important;
}
.external-player-brand{color:#1f2b42!important}
.external-player-show{
  background:rgba(255,255,255,.54)!important;
  border-color:rgba(31,47,75,.08)!important;
  box-shadow:0 10px 30px rgba(28,46,78,.06);
}
.external-player-show-label{color:#6e7a8d!important}
.external-player-show-title{color:#243149!important}
.external-player-show-time{
  background:color-mix(in srgb,var(--primary) 9%,rgba(255,255,255,.74))!important;
  border-color:color-mix(in srgb,var(--primary) 15%,rgba(42,58,84,.08))!important;
  color:var(--primary)!important;
}
.external-player-artist{color:#45536a!important}
.external-player-platform{
  background:rgba(255,255,255,.64)!important;
  border-color:rgba(38,54,82,.08)!important;
  color:#4a5870!important;
  box-shadow:0 8px 24px rgba(30,47,77,.06);
}
.external-player-platform:hover{background:var(--primary-fill)!important;color:#fff!important;border-color:transparent!important}
.external-player-art-link{box-shadow:0 28px 72px rgba(31,52,87,.18)!important}
.external-player-ranking-kicker{color:rgba(39,52,76,.48)!important;text-shadow:none!important}
.external-player-rank-item{
  color:#253149!important;
  background:rgba(255,255,255,.50)!important;
  border-color:rgba(34,50,78,.08)!important;
  box-shadow:0 12px 34px rgba(29,47,78,.06);
}
.external-player-rank-copy small{color:rgba(54,69,94,.58)!important}
.external-player-rank-item.current{
  background:var(--primary-fill)!important;
  color:#fff!important;
  border-color:transparent!important;
}
.external-player-rank-item.current .external-player-rank-copy strong,
.external-player-rank-item.current .external-player-rank-copy small{color:#fff!important}
.external-player-rank-art{background:rgba(41,58,86,.08)!important}
.external-player-controlbar{
  background:rgba(252,253,255,.91)!important;
  border-color:rgba(255,255,255,.78)!important;
  color:#26344b!important;
  box-shadow:0 16px 44px rgba(26,44,74,.16)!important;
}
.external-player-like:not(.liked){color:#46546b!important}
.external-player-sound{
  background:rgba(239,243,248,.78)!important;
  border-color:rgba(36,52,81,.07)!important;
}
.external-player-mute{color:#526078!important}
.external-player-install{
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(32,48,76,.08)!important;
  color:#40506a!important;
  box-shadow:0 9px 28px rgba(27,44,73,.07);
}
.external-player-install:hover{background:var(--primary-fill)!important;color:#fff!important;border-color:transparent!important}
.external-player-track-progress{background:rgba(39,54,81,.10)!important}

/* Variante nocturne du player, déclenchée par le même script que le site. */
html.system-evening .external-player-page{
  background:#070b13!important;
  color:#fff!important;
}
html.system-evening .external-player-page .external-player-shell{background:#070b13!important}
html.system-evening .external-player-media{background:#070b13!important}
html.system-evening .external-player-bg-cover{opacity:.66!important;filter:blur(9px) saturate(1.04) brightness(.88)!important}
html.system-evening .external-player-bg-video{filter:blur(8px) saturate(1.08) brightness(.84)!important}
html.system-evening .external-player-bg-video.visible{opacity:.55!important}
html.system-evening .external-player-overlay{
  background:
    radial-gradient(circle at 50% 46%,rgba(4,8,15,.30) 0%,rgba(4,8,15,.48) 34%,rgba(4,8,15,.72) 76%,rgba(4,8,15,.82) 100%),
    linear-gradient(180deg,rgba(4,8,15,.34),rgba(4,8,15,.70))!important;
}
html.system-evening .external-player-brand{color:#fff!important}
html.system-evening .external-player-show{background:rgba(7,12,22,.28)!important;border-color:rgba(255,255,255,.07)!important;box-shadow:none}
html.system-evening .external-player-show-label{color:rgba(255,255,255,.62)!important}
html.system-evening .external-player-show-title{color:#fff!important}
html.system-evening .external-player-show-time{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.08)!important;color:#fff!important}
html.system-evening .external-player-artist{color:rgba(255,255,255,.90)!important}
html.system-evening .external-player-platform{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.08)!important;color:#fff!important;box-shadow:none}
html.system-evening .external-player-platform:hover{background:var(--primary-fill)!important}
html.system-evening .external-player-art-link{box-shadow:0 30px 80px rgba(0,0,0,.35)!important}
html.system-evening .external-player-ranking-kicker{color:rgba(255,255,255,.52)!important}
html.system-evening .external-player-rank-item{color:#fff!important;background:rgba(7,12,22,.34)!important;border-color:rgba(255,255,255,.075)!important;box-shadow:none}
html.system-evening .external-player-rank-copy small{color:rgba(255,255,255,.60)!important}
html.system-evening .external-player-rank-item.current{background:var(--primary-fill)!important;border-color:transparent!important;box-shadow:0 18px 44px color-mix(in srgb,var(--primary) 34%,rgba(0,0,0,.22))!important}
html.system-evening .external-player-rank-art{background:rgba(255,255,255,.08)!important}
html.system-evening .external-player-controlbar{background:rgba(12,18,31,.91)!important;border-color:rgba(255,255,255,.10)!important;color:#eef3fb!important;box-shadow:0 16px 46px rgba(0,0,0,.34)!important}
html.system-evening .external-player-like:not(.liked){color:#c2ccda!important}
html.system-evening .external-player-sound{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.08)!important}
html.system-evening .external-player-mute{color:#d5ddeb!important}
html.system-evening .external-player-install{background:rgba(7,12,22,.28)!important;border-color:rgba(255,255,255,.10)!important;color:rgba(255,255,255,.86)!important;box-shadow:none}
html.system-evening .external-player-track-progress{background:rgba(255,255,255,.13)!important}

/* Sur téléphone, le classement contextuel reste volontairement absent : le
   titrage conserve toute la largeur et aucune carte ne vient recouvrir le hero. */
@media(max-width:900px){
  .hero-ranking,
  .external-player-ranking{display:none!important}
  .hero.ranking-visible .hero-copy,
  .hero:not(.ranking-visible) .hero-copy{max-width:100%!important;width:100%!important}
  .hero.ranking-visible .hero-inner{display:flex!important}
  .external-player-stage,
  .external-player-stage.has-ranking,
  .external-player-stage:not(.has-ranking){grid-template-columns:1fr!important}
  .external-player-main,
  .external-player-stage.has-ranking .external-player-main,
  .external-player-stage:not(.has-ranking) .external-player-main{width:min(900px,100%)!important;max-width:900px!important;justify-self:center!important}
}

/* Hero mobile : composition verticale, titrage réellement lisible et boutons
   accessibles au pouce. */
@media(max-width:760px){
  .home-page .hero{
    min-height:0!important;
    align-items:stretch!important;
  }
  .home-page .hero-inner{
    width:min(100% - 30px,560px)!important;
    min-height:calc(100svh - 74px)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .home-page .hero-copy{
    width:100%!important;
    max-width:100%!important;
    padding:44px 0 54px!important;
  }
  .home-page .hero-current{
    width:100%!important;
    margin-top:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:19px!important;
  }
  .home-page .hero-current-cover-wrap{
    width:min(43vw,178px)!important;
    height:min(43vw,178px)!important;
    flex:0 0 auto!important;
    border-radius:21px!important;
    box-shadow:0 18px 48px rgba(18,38,70,.20)!important;
  }
  .home-page .now-playing{
    min-height:0!important;
    width:100%!important;
    max-width:100%!important;
    align-items:center!important;
    text-align:center!important;
  }
  .home-page .now-title-link,
  .home-page .hero:not(.ranking-visible) .now-title-link,
  .home-page .hero.ranking-visible .now-title-link{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  .home-page .now-title-link.title-marquee h1{animation:none!important;transform:none!important}
  .home-page .now-playing h1,
  .home-page .hero:not(.ranking-visible) .now-playing h1,
  .home-page .hero:not(.ranking-visible) .now-title-link h1{
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
    text-wrap:balance!important;
    font-size:clamp(34px,10.5vw,50px)!important;
    line-height:.96!important;
    letter-spacing:-.012em!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .home-page .now-artist{
    min-height:0!important;
    margin-top:7px!important;
    font-size:clamp(18px,5.4vw,24px)!important;
    line-height:1.05!important;
  }
  .home-page .current-show-line{
    justify-content:center!important;
    text-align:center!important;
    margin-top:12px!important;
  }
  .home-page .hero-actions{
    width:100%!important;
    justify-content:center!important;
    gap:9px!important;
    margin-top:24px!important;
  }
  .home-page .track-platforms{width:100%;justify-content:center;margin:2px 0 0!important}
  .home-page .hero-shade{
    background:
      linear-gradient(180deg,rgba(245,248,252,.80) 0%,rgba(245,248,252,.72) 30%,rgba(245,248,252,.82) 76%,rgba(245,248,252,.94) 100%)!important;
  }
  html.system-evening .home-page .hero-shade{
    background:
      linear-gradient(180deg,rgba(8,13,25,.77) 0%,rgba(8,13,25,.68) 30%,rgba(8,13,25,.78) 76%,rgba(8,13,25,.94) 100%)!important;
  }
}
@media(max-width:620px){
  .home-page .hero{padding-top:var(--header-height,88px)!important}
  .home-page .hero-inner{min-height:calc(100svh - var(--header-height,88px))!important}
  .home-page .hero-copy{padding-top:28px!important;padding-bottom:46px!important}
}
@media(max-width:420px){
  .home-page .hero-current-cover-wrap{width:148px!important;height:148px!important}
  .home-page .hero-actions .listen-button,
  .home-page .hero-actions .like-button{min-height:42px}
}

/* Player mobile : pas de clipping vertical, émission lisible, grande zone
   centrale et barre de commandes protégée par la safe-area iOS/Android. */
@media(max-width:760px){
  .external-player-page{overflow-x:hidden!important;overflow-y:auto!important}
  .external-player-page .external-player-shell{
    min-height:100dvh!important;
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    padding:0 0 calc(102px + env(safe-area-inset-bottom,0px))!important;
  }
  .external-player-top{
    min-height:0!important;
    padding:18px 16px 0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:13px!important;
  }
  .external-player-brand{min-height:48px!important;margin:0 auto!important}
  .external-player-brand .theme-logo{max-width:min(58vw,190px)!important;height:min(var(--site-logo-height,58px),52px)!important}
  .external-player-show{
    position:static!important;
    width:min(100%,520px)!important;
    max-width:100%!important;
    align-self:flex-start!important;
    justify-content:flex-start!important;
    text-align:left!important;
    padding:8px 11px!important;
    border-radius:14px!important;
  }
  .external-player-install{top:17px!important;right:15px!important}
  .external-player-stage,
  .external-player-stage.has-ranking,
  .external-player-stage:not(.has-ranking){
    width:min(100% - 30px,560px)!important;
    margin:0 auto!important;
    padding:24px 0 22px!important;
    gap:0!important;
    flex:1 0 auto!important;
  }
  .external-player-main,
  .external-player-stage.has-ranking .external-player-main,
  .external-player-stage:not(.has-ranking) .external-player-main{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:19px!important;
    width:100%!important;
    max-width:100%!important;
    justify-self:center!important;
  }
  .external-player-art-link{
    width:min(52vw,205px)!important;
    margin:0 auto!important;
    border-radius:24px!important;
  }
  .external-player-copy{width:100%!important;max-width:100%!important;text-align:center!important;padding:0 2px}
  .external-player-title{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(32px,10vw,47px)!important;
    line-height:.96!important;
    letter-spacing:-.01em!important;
    overflow-wrap:anywhere!important;
    text-wrap:balance!important;
  }
  .external-player-artist{font-size:clamp(18px,5vw,23px)!important;line-height:1.08!important;margin-top:8px!important}
  .external-player-platforms{justify-content:center!important;margin-top:15px!important}
  .external-player-platform{width:38px!important;height:38px!important}
  .external-player-controlbar{
    left:50%!important;
    right:auto!important;
    bottom:calc(11px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-width:calc(100vw - 24px)!important;
    flex-wrap:nowrap!important;
    padding:7px 8px!important;
    border-radius:999px!important;
  }
  .external-player-icon-button{width:42px!important;height:42px!important;min-width:42px!important}
  .external-player-sound{height:42px!important;padding:0 7px 0 2px!important}
  .external-player-volume{width:min(22vw,86px)!important}
  .external-player-track-progress{height:4px!important}
}
@media(max-width:390px){
  .external-player-art-link{width:min(48vw,178px)!important}
  .external-player-title{font-size:clamp(29px,9.5vw,40px)!important}
  .external-player-platform{width:35px!important;height:35px!important}
  .external-player-icon-button{width:39px!important;height:39px!important;min-width:39px!important}
  .external-player-sound{height:39px!important}
  .external-player-volume{width:68px!important}
}

/* v1.42 — le voile mobile reste identique que le hero utilise un clip ou seulement la pochette. */
@media(max-width:760px){
  .home-page .hero.cover-only .hero-shade,
  .home-page .hero.video-active .hero-shade{
    background:linear-gradient(180deg,rgba(245,248,252,.80) 0%,rgba(245,248,252,.72) 30%,rgba(245,248,252,.82) 76%,rgba(245,248,252,.94) 100%)!important;
  }
  html.system-evening .home-page .hero.cover-only .hero-shade,
  html.system-evening .home-page .hero.video-active .hero-shade{
    background:linear-gradient(180deg,rgba(8,13,25,.77) 0%,rgba(8,13,25,.68) 30%,rgba(8,13,25,.78) 76%,rgba(8,13,25,.94) 100%)!important;
  }
}

/* ===== v1.44 : défilement fiable des titres longs — hero + player ===== */
/* Hero : la zone reste masquée et le H1 garde sa largeur naturelle. Le JS
   calcule la largeur réelle du texte (même pendant une transition) et active
   le défilement uniquement lorsqu'il y a réellement dépassement. */
.home-page .now-title-link,
.home-page .hero:not(.ranking-visible) .now-title-link,
.home-page .hero.ranking-visible .now-title-link{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.home-page .now-title-link h1,
.home-page .hero:not(.ranking-visible) .now-title-link h1,
.home-page .hero.ranking-visible .now-title-link h1{
  width:max-content!important;
  max-width:none!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:nowrap!important;
}
.home-page .now-title-link.title-marquee h1{
  animation:radioTitleMarquee var(--marquee-duration,10s) ease-in-out infinite!important;
  will-change:transform;
}

/* Player externe : même logique, avec un conteneur dédié afin de ne jamais
   couper le titre ni déplacer l'artiste / les boutons plateformes. */
.external-player-title-wrap{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  position:relative;
}
.external-player-title{
  display:block;
  width:max-content!important;
  max-width:none!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:nowrap!important;
}
.external-player-title-wrap.title-marquee .external-player-title{
  animation:radioTitleMarquee var(--marquee-duration,10s) ease-in-out infinite!important;
  will-change:transform;
}

/* Pause visible au début et à la fin, puis retour doux au point de départ. */
@keyframes radioTitleMarquee{
  0%,10%{transform:translateX(0)}
  45%,55%{transform:translateX(calc(-1 * var(--marquee-distance,0px)))}
  90%,100%{transform:translateX(0)}
}

@media(max-width:760px){
  /* v1.42 autorisait le retour à la ligne sur mobile. Les titres longs
     défilent désormais aussi sur smartphone au lieu d'être tronqués. */
  .home-page .now-title-link.title-marquee h1,
  .external-player-title-wrap.title-marquee .external-player-title{
    animation:radioTitleMarquee var(--marquee-duration,10s) ease-in-out infinite!important;
  }
  .home-page .now-playing h1,
  .home-page .hero:not(.ranking-visible) .now-playing h1,
  .home-page .hero:not(.ranking-visible) .now-title-link h1,
  .external-player-title{
    width:max-content!important;
    max-width:none!important;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    text-wrap:nowrap!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .home-page .now-title-link.title-marquee h1,
  .external-player-title-wrap.title-marquee .external-player-title{
    animation:none!important;
    transform:none!important;
  }
}

/* ===== v1.45 : hero Regarder + player audio/vidéo unifié ===== */
/* Le bouton Écouter reprend exactement l'esprit de contour de J'aime. */
.home-page #listen-button{
  border:1px solid rgba(19,67,143,.08)!important;
}
.watch-button{
  margin:0;
  border:1px solid rgba(19,67,143,.08);
  background:rgba(255,255,255,.92);
  color:var(--primary);
  border-radius:999px;
  padding:11px 15px;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  font-family:var(--title-font);
  font-size:14px;
  font-weight:560;
  box-shadow:0 10px 28px rgba(35,66,115,.11);
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.watch-button:hover{transform:translateY(-2px);background:var(--primary-fill);color:#fff;border-color:transparent}
.watch-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html.system-evening .watch-button{
  background:rgba(17,25,43,.78);
  border-color:rgba(255,255,255,.10);
  color:#eef3fb;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
html.system-evening .watch-button:hover{background:var(--primary-fill);color:#fff;border-color:transparent}

/* Bouton de bascule audio / vidéo de la barre de commandes. */
.external-player-mode-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.external-player-mode-toggle .mode-audio-icon{display:none}
.external-player-mode-toggle.show-audio-icon .mode-video-icon{display:none}
.external-player-mode-toggle.show-audio-icon .mode-audio-icon{display:block}

/* Watermark blanc du mode vidéo. */
.external-video-watermark{
  display:none;
  position:fixed;
  top:24px;
  right:28px;
  z-index:24;
  width:min(180px,18vw);
  height:74px;
  pointer-events:none;
  align-items:center;
  justify-content:flex-end;
  opacity:.52;
}
.external-video-watermark .theme-logo{
  width:auto!important;
  max-width:100%!important;
  max-height:74px!important;
  object-fit:contain;
  filter:brightness(0) invert(1)!important;
  opacity:1!important;
}
.external-video-watermark strong{
  font-family:var(--title-font);
  font-size:24px;
  color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.3);
}
.external-player-shell.mode-video .external-video-watermark{display:flex}
.external-player-shell.mode-video .external-player-brand{visibility:hidden;pointer-events:none}
.external-player-shell.mode-video .external-player-install{display:none!important}

/* Le clip devient le visuel plein écran dans le mode vidéo. */
.external-video-fallback{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:min(58vmin,620px);
  height:min(58vmin,620px);
  transform:translate(-50%,-50%) scale(.965);
  object-fit:cover;
  border-radius:clamp(20px,2.2vw,34px);
  opacity:0;
  visibility:hidden;
  box-shadow:0 38px 110px rgba(0,0,0,.36);
  transition:opacity .62s ease,transform .72s cubic-bezier(.2,.7,.2,1),visibility .62s;
}
.external-player-shell.mode-video .external-player-media{background:#05070b!important}
.external-player-shell.mode-video .external-player-bg-cover{
  opacity:.22!important;
  filter:blur(22px) saturate(.9) brightness(.58)!important;
  transform:scale(1.08)!important;
}
.external-player-shell.mode-video .external-player-bg-video{
  z-index:4!important;
  filter:none!important;
  transform:translate(-50%,-50%) scale(1)!important;
  transition:opacity .65s ease,filter .65s ease,transform .75s cubic-bezier(.2,.7,.2,1)!important;
}
.external-player-shell.mode-video .external-player-bg-video.visible{opacity:1!important}
.external-player-shell.mode-video .external-player-overlay{
  z-index:5!important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,.025) 27%,rgba(0,0,0,.02) 60%,rgba(0,0,0,.36) 100%)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:none;
}
.external-player-shell.mode-video.video-no-clip .external-video-fallback,
.external-player-shell.mode-video.video-clip-loading .external-video-fallback{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}
.external-player-shell.mode-video.video-has-clip:not(.video-clip-loading) .external-video-fallback{
  opacity:0;
  visibility:hidden;
}
.external-player-shell.mode-video.media-changing .external-player-bg-video,
.external-player-shell.mode-video.media-changing .external-video-fallback{
  opacity:0!important;
  transform:translate(-50%,-50%) scale(1.035)!important;
}

/* En mode vidéo le layout audio central disparaît, mais la même barre de
   commandes reste disponible sur la même page. */
.external-player-shell.mode-video .external-player-stage{
  position:static!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  min-height:0!important;
}
.external-player-shell.mode-video .external-player-main,
.external-player-shell.mode-video .external-player-ranking{display:none!important}
.external-player-shell.mode-video .external-player-top{
  z-index:22;
  min-height:0;
  height:0;
  padding:0;
}
.external-player-shell.mode-video .external-player-show{
  position:fixed!important;
  top:24px!important;
  left:28px!important;
  z-index:24!important;
  max-width:min(520px,50vw)!important;
  background:rgba(6,8,13,.42)!important;
  border-color:rgba(255,255,255,.13)!important;
  color:#fff!important;
  box-shadow:none!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.external-player-shell.mode-video .external-player-show-label{color:rgba(255,255,255,.68)!important}
.external-player-shell.mode-video .external-player-show-title{color:#fff!important}
.external-player-shell.mode-video .external-player-show-time{
  color:#fff!important;
  background:rgba(255,255,255,.11)!important;
  border-color:rgba(255,255,255,.10)!important;
}
.external-player-shell.mode-video .external-player-controlbar{
  background:rgba(8,11,18,.74)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#fff!important;
  box-shadow:0 18px 55px rgba(0,0,0,.28)!important;
}
.external-player-shell.mode-video .external-player-icon-button,
.external-player-shell.mode-video .external-player-like:not(.liked){color:#fff!important}
/* En mode vidéo, le bouton de retour vers le player audio reprend clairement la couleur primaire. */
.external-player-shell.mode-video .external-player-mode-toggle.show-audio-icon{
  background:var(--primary-fill)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.external-player-shell.mode-video .external-player-sound{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.08)!important;
}
.external-player-shell.mode-video .external-player-mute{color:#fff!important}
.external-player-shell.mode-video .external-player-track-progress{background:rgba(255,255,255,.18)!important;z-index:30!important}

/* Cartouche éditoriale en bas à gauche : titrage -> album -> titrage -> disparition. */
.external-video-info{
  position:fixed;
  left:28px;
  bottom:86px;
  z-index:26;
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  align-items:center;
  gap:15px;
  width:min(670px,calc(100vw - 56px));
  padding:6px 0;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:#fff;
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .42s ease,transform .48s cubic-bezier(.2,.7,.2,1);
}
.external-video-info[hidden]{display:none!important}
.external-video-info.visible{opacity:1;transform:translateY(0)}
.external-video-info-art{width:78px;height:78px;border-radius:12px;object-fit:cover;background:#111;box-shadow:0 9px 28px rgba(0,0,0,.26)}
.external-video-info-copy{min-width:0;transition:opacity .2s ease,transform .2s ease}
.external-video-info.phase-changing .external-video-info-copy{opacity:0;transform:translateY(5px)}
.external-video-info-eyebrow{
  margin:0 0 3px;
  font-family:var(--title-font);
  font-size:clamp(14px,1.2vw,20px);
  line-height:1.08;
  font-weight:420;
  color:rgba(255,255,255,.94);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.external-video-info-primary{
  display:block;
  font-family:var(--title-font);
  font-size:clamp(19px,1.65vw,28px);
  line-height:1.02;
  font-weight:650;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Mode audio = rendu existant ; le fallback et le watermark ne participent pas. */
.external-player-shell.mode-audio .external-video-fallback,
.external-player-shell.mode-audio .external-video-watermark{display:none!important}

@media(max-width:760px){
  .home-page .hero-actions{display:flex!important;flex-wrap:wrap!important}
  .home-page .hero-actions .watch-button{min-height:42px;font-size:13px;padding:10px 13px}

  .external-player-page.external-player-video-mode{overflow:hidden!important;background:#05070b!important}
  .external-player-page.external-player-video-mode .external-player-shell{height:100dvh!important;min-height:100dvh!important;padding:0!important;overflow:hidden!important}
  .external-player-shell.mode-video .external-player-show{
    top:calc(14px + env(safe-area-inset-top,0px))!important;
    left:14px!important;
    max-width:calc(100vw - 120px)!important;
    right:auto!important;
    font-size:11px!important;
    padding:7px 9px!important;
  }
  .external-video-watermark{
    top:calc(12px + env(safe-area-inset-top,0px));
    right:14px;
    width:min(112px,28vw);
    height:52px;
  }
  .external-video-watermark .theme-logo{max-height:52px!important}
  .external-video-fallback{width:min(72vw,360px);height:min(72vw,360px);border-radius:22px}
  .external-video-info{
    left:14px;
    bottom:calc(84px + env(safe-area-inset-bottom,0px));
    width:calc(100vw - 28px);
    grid-template-columns:62px minmax(0,1fr);
    gap:12px;
    padding:6px 0;
    border-radius:0;
  }
  .external-video-info-art{width:62px;height:62px;border-radius:10px}
  .external-video-info-eyebrow{font-size:12px}
  .external-video-info-primary{font-size:17px}
  .external-player-shell.mode-video .external-player-controlbar{
    bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
  }
}

@media(max-width:420px){
  .external-player-shell.mode-video .external-player-show{max-width:calc(100vw - 105px)!important}
  .external-video-info{grid-template-columns:54px minmax(0,1fr);gap:10px}
  .external-video-info-art{width:54px;height:54px}
  .external-video-info-eyebrow{font-size:11px}
  .external-video-info-primary{font-size:15px}
}

@media(prefers-reduced-motion:reduce){
  .external-video-info,.external-video-info-copy,.external-video-fallback,.external-player-bg-video{transition:none!important}
}

/* v1.46 — cartouche vidéo allégé, rythme ralenti et bouton retour audio à la couleur primaire. */


/* v1.47 — bascule audio/vidéo, clip YouTube propre, watermark et mini-cover. */
/* Les deux états de la bascule reprennent la couleur primaire, sans contour natif. */
.external-player-shell.mode-audio .external-player-mode-toggle,
.external-player-shell.mode-video .external-player-mode-toggle{
  background:var(--primary-fill)!important;
  color:#fff!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
.external-player-shell.mode-audio .external-player-mode-toggle:hover,
.external-player-shell.mode-video .external-player-mode-toggle:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}
.external-player-shell.mode-audio .external-player-mode-toggle:focus,
.external-player-shell.mode-audio .external-player-mode-toggle:focus-visible,
.external-player-shell.mode-video .external-player-mode-toggle:focus,
.external-player-shell.mode-video .external-player-mode-toggle:focus-visible{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* Logo blanc du player vidéo légèrement plus présent. */
.external-video-watermark{
  width:min(215px,20vw)!important;
  height:88px!important;
  opacity:.56!important;
}
.external-video-watermark .theme-logo{
  max-height:88px!important;
}

/* Petit rebond de la mini pochette à chaque apparition de la cartouche vidéo. */
@keyframes externalVideoMiniCoverBounce{
  0%{transform:scale(.88);opacity:0}
  52%{transform:scale(1.065);opacity:1}
  76%{transform:scale(.985)}
  100%{transform:scale(1);opacity:1}
}
.external-video-info.visible .external-video-info-art{
  animation:externalVideoMiniCoverBounce .52s cubic-bezier(.2,.78,.25,1) both;
  transform-origin:center center;
}

@media(max-width:760px){
  .external-video-watermark{
    width:min(132px,32vw)!important;
    height:62px!important;
  }
  .external-video-watermark .theme-logo{max-height:62px!important}
}

@media(prefers-reduced-motion:reduce){
  .external-video-info.visible .external-video-info-art{animation:none!important}
}

/* ===== v1.48 : transition vidéo éditoriale + commandes au mouvement ===== */
/* Intro de changement de titre au centre : chaque lettre arrive indépendamment. */
.external-video-center-intro{
  position:fixed;
  inset:0;
  z-index:27;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:clamp(24px,5vw,72px);
  text-align:center;
  color:#fff;
  pointer-events:none;
  opacity:0;
  transform:scale(.985);
  transition:opacity .34s ease,transform .5s cubic-bezier(.2,.72,.22,1);
  text-shadow:0 8px 32px rgba(0,0,0,.42);
}
.external-video-center-intro[hidden]{display:none!important}
.external-video-center-intro.visible{opacity:1;transform:scale(1)}
.external-video-center-intro.leaving{opacity:0;transform:scale(1.015)}
.external-video-center-title,
.external-video-center-artist{
  max-width:min(1120px,86vw);
  font-family:'Clash Display',var(--title-font),sans-serif;
  line-height:.98;
  text-wrap:balance;
}
.external-video-center-title{
  font-size:clamp(42px,6.6vw,94px);
  font-weight:650;
  letter-spacing:-.018em;
}
.external-video-center-artist{
  font-size:clamp(20px,2.35vw,35px);
  font-weight:430;
  letter-spacing:-.006em;
  color:rgba(255,255,255,.84);
}
.external-video-letter{
  display:inline-block;
  opacity:0;
  filter:blur(10px);
  transform:translateY(.72em) rotateX(68deg) scale(.96);
  transform-origin:50% 100%;
}
.external-video-center-intro.visible .external-video-letter{
  animation:externalVideoLetterIn .72s cubic-bezier(.16,.82,.23,1) both;
  animation-delay:calc(var(--letter-index,0) * 34ms);
}
.external-video-center-artist .external-video-letter{
  animation-delay:calc(150ms + var(--letter-index,0) * 28ms)!important;
}
.external-video-letter.is-space{min-width:.24em}
@keyframes externalVideoLetterIn{
  0%{opacity:0;filter:blur(10px);transform:translateY(.72em) rotateX(68deg) scale(.96)}
  56%{opacity:1;filter:blur(1px);transform:translateY(-.055em) rotateX(0) scale(1.012)}
  100%{opacity:1;filter:blur(0);transform:translateY(0) rotateX(0) scale(1)}
}

/* L'émission accompagne le cartouche de bas gauche puis disparaît avec lui. */
.external-player-shell.mode-video .external-player-show{
  transition:opacity .4s ease,transform .45s cubic-bezier(.2,.72,.22,1)!important;
}
.external-player-shell.mode-video .external-player-show.video-sequence-hidden{
  opacity:0!important;
  transform:translateY(-9px)!important;
  pointer-events:none!important;
}

/* En vidéo, la barre de commandes reste invisible tant que l'utilisateur ne bouge pas la souris
   (ou ne touche / n'utilise pas le clavier sur mobile et appareils hybrides). */
.external-player-shell.mode-video .external-player-controlbar{
  opacity:0!important;
  transform:translateX(-50%) translateY(15px)!important;
  pointer-events:none!important;
  transition:opacity .28s ease,transform .34s cubic-bezier(.2,.72,.22,1)!important;
}
.external-player-shell.mode-video.video-controls-visible .external-player-controlbar{
  opacity:1!important;
  transform:translateX(-50%) translateY(0)!important;
  pointer-events:auto!important;
}

@media(max-width:760px){
  .external-video-center-intro{padding:28px 18px 96px;gap:8px}
  .external-video-center-title{font-size:clamp(34px,11vw,58px);max-width:92vw}
  .external-video-center-artist{font-size:clamp(17px,5.3vw,26px);max-width:90vw}
}

@media(prefers-reduced-motion:reduce){
  .external-video-center-intro,
  .external-video-letter,
  .external-player-shell.mode-video .external-player-show,
  .external-player-shell.mode-video .external-player-controlbar{animation:none!important;transition:none!important;filter:none!important}
  .external-video-center-intro.visible .external-video-letter{opacity:1!important;transform:none!important}
}

/* ===== v1.49 : clips synchronisés + habillage radio ===== */
/* L'iframe YouTube est strictement décorative : aucune interaction utilisateur. */
.external-player-bg-video,
.hero-video{pointer-events:none!important}

/* Jingle / publicité / top horaire : on remplace immédiatement le clip par une
   animation de logo, sans toucher au dernier vrai titrage musical. */
.external-video-interstitial{
  position:fixed;
  inset:0;
  z-index:18;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--primary) 22%,transparent) 0,rgba(5,7,11,.22) 32%,rgba(5,7,11,.82) 78%),
    #05070b;
  transition:opacity .28s ease;
}
.external-video-interstitial[hidden]{display:none!important}
.external-video-interstitial.visible{opacity:1}
.external-video-interstitial-logo{
  position:relative;
  z-index:3;
  width:min(390px,48vw);
  height:min(180px,24vw);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:externalInterstitialLogoPulse 2.35s cubic-bezier(.2,.72,.22,1) infinite;
}
.external-video-interstitial-logo .theme-logo{
  width:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 18px 55px rgba(0,0,0,.28))!important;
  opacity:1!important;
}
.external-video-interstitial-logo strong{
  font-family:var(--title-font);
  font-size:clamp(38px,6vw,86px);
  color:#fff;
  text-align:center;
}
.external-video-interstitial-rings,
.external-video-interstitial-rings span{position:absolute;inset:0;margin:auto;border-radius:999px}
.external-video-interstitial-rings{width:min(52vw,650px);height:min(52vw,650px);z-index:1}
.external-video-interstitial-rings span{
  width:42%;height:42%;
  border:1px solid rgba(255,255,255,.22);
  opacity:0;
  animation:externalInterstitialRing 2.8s ease-out infinite;
}
.external-video-interstitial-rings span:nth-child(2){animation-delay:.72s}
.external-video-interstitial-rings span:nth-child(3){animation-delay:1.44s}
.external-player-shell.mode-video.video-interstitial-active .external-player-bg-video,
.external-player-shell.mode-video.video-interstitial-active .external-video-fallback{opacity:0!important;visibility:hidden!important}
.external-player-shell.mode-video.video-interstitial-active .external-player-bg-cover{opacity:.10!important}
.external-player-shell.mode-video.video-interstitial-active .external-video-watermark{opacity:0!important}
.external-player-shell.mode-audio .external-video-interstitial{display:none!important}

@keyframes externalInterstitialRing{
  0%{transform:scale(.48);opacity:0}
  18%{opacity:.42}
  100%{transform:scale(2.15);opacity:0}
}
@keyframes externalInterstitialLogoPulse{
  0%,100%{transform:scale(.985);filter:brightness(.96)}
  50%{transform:scale(1.035);filter:brightness(1.08)}
}

/* Le titrage central gagne un peu de rythme lettre par lettre. */
.external-video-center-intro.visible .external-video-letter{
  animation-duration:.82s!important;
  animation-delay:calc(var(--letter-index,0) * 42ms)!important;
}
.external-video-center-artist .external-video-letter{
  animation-delay:calc(170ms + var(--letter-index,0) * 34ms)!important;
}
.external-video-letter:nth-child(odd){--letter-x:-.13em}
.external-video-letter:nth-child(even){--letter-x:.13em}
@keyframes externalVideoLetterIn{
  0%{opacity:0;filter:blur(12px);transform:translate(var(--letter-x,0),.78em) rotateX(72deg) scale(.94)}
  58%{opacity:1;filter:blur(1px);transform:translate(0,-.06em) rotateX(0) scale(1.018)}
  100%{opacity:1;filter:blur(0);transform:translate(0,0) rotateX(0) scale(1)}
}

/* Même principe sur le hero du site : lorsqu'un élément d'habillage passe,
   aucun ancien clip ne reste figé en arrière-plan. */
.hero-interstitial{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(135deg,rgba(8,12,21,.90),color-mix(in srgb,var(--primary) 34%,rgba(8,12,21,.88)));
  transition:opacity .3s ease;
}
.hero-interstitial[hidden]{display:none!important}
.hero-interstitial.visible{opacity:1}
.hero-interstitial-logo{position:relative;z-index:2;width:min(320px,42vw);height:min(135px,19vw);display:flex;align-items:center;justify-content:center;animation:externalInterstitialLogoPulse 2.35s cubic-bezier(.2,.72,.22,1) infinite}
.hero-interstitial-logo .theme-logo{width:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain;filter:brightness(0) invert(1)!important;opacity:1!important}
.hero-interstitial-logo strong{font-family:var(--title-font);font-size:clamp(34px,6vw,72px);color:#fff;text-align:center}
.hero-interstitial-rings,.hero-interstitial-rings span{position:absolute;inset:0;margin:auto;border-radius:999px}
.hero-interstitial-rings{width:min(56vw,620px);height:min(56vw,620px)}
.hero-interstitial-rings span{width:42%;height:42%;border:1px solid rgba(255,255,255,.20);opacity:0;animation:externalInterstitialRing 2.8s ease-out infinite}
.hero-interstitial-rings span:nth-child(2){animation-delay:.72s}.hero-interstitial-rings span:nth-child(3){animation-delay:1.44s}
.hero.interstitial-active .hero-video{opacity:0!important}
.hero.interstitial-active .hero-cover.visible{opacity:.16!important}

@media(max-width:760px){
  .external-video-interstitial-logo{width:min(270px,62vw);height:min(130px,30vw)}
  .external-video-interstitial-rings{width:88vw;height:88vw}
  .hero-interstitial-logo{width:min(230px,58vw);height:min(100px,25vw)}
  .hero-interstitial-rings{width:86vw;height:86vw}
}
@media(prefers-reduced-motion:reduce){
  .external-video-interstitial-logo,.external-video-interstitial-rings span,
  .hero-interstitial-logo,.hero-interstitial-rings span{animation:none!important}
}


/* ===== v1.50 : séquence titrage -> grande cover -> clip + badges ===== */
/* Le titrage central est seul au premier plan. La grande cover n'entre qu'une
   fois l'intro complètement terminée, puis le clip prend le relais. */
.external-player-shell.mode-video.video-center-active .external-player-bg-video,
.external-player-shell.mode-video.video-center-active .external-video-fallback{
  opacity:0!important;
  visibility:hidden!important;
}
.external-player-shell.mode-video.video-cover-reveal .external-player-bg-video{
  opacity:0!important;
  visibility:hidden!important;
}
.external-player-shell.mode-video.video-cover-reveal .external-video-fallback{
  opacity:1!important;
  visibility:visible!important;
  transform:translate(-50%,-50%) scale(1)!important;
}

.external-video-info-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:21px;
  margin:0 0 7px;
  padding:4px 8px 3px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(7,10,16,.38);
  color:#fff;
  font-family:var(--title-font);
  font-size:10px;
  line-height:1;
  font-weight:650;
  letter-spacing:.11em;
  text-transform:uppercase;
  box-shadow:0 5px 18px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.external-video-info-badge[hidden]{display:none!important}
@media(max-width:760px){
  .external-video-info-badge{font-size:9px;min-height:19px;padding:4px 7px 3px;margin-bottom:5px}
}


/* ===== v1.51 : suppression totale des boutons Play/Pause sur les clips ===== */
/* Le bouton Play/Pause du flux audio n'est pas affiché en mode vidéo : il ne
   peut plus être confondu avec un contrôle du clip YouTube. Le retour audio,
   le volume et les autres commandes restent disponibles. */
.external-player-shell.mode-video #external-play{
  display:none!important;
}
/* Les iframes YouTube restent purement décoratives et impossibles à cibler. */
.external-player-shell.mode-video .external-player-bg-video,
.hero .hero-video{
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}


/* ===== v1.52 : verrouillage YouTube + fin de morceau -> habillage ===== */
/* Bouclier physique au-dessus des iframes : même si un ancien CSS reste en
   mémoire, aucun clic/tap ne peut atteindre YouTube et déclencher son gros
   feedback Play/Pause au centre de la vidéo. */
.youtube-clip-shield{
  position:absolute;
  inset:0;
  z-index:6;
  display:block;
  background:transparent;
  pointer-events:auto!important;
  touch-action:none;
  cursor:default;
  -webkit-tap-highlight-color:transparent;
}
.external-youtube-shield{z-index:3}
.hero-youtube-shield{z-index:5}
.external-player-shell.mode-audio .external-youtube-shield{display:none!important}

/* Pendant un habillage, aucune ancienne pochette ne doit transparaître. */
.external-player-shell.mode-video.video-interstitial-active .external-player-bg-cover,
.external-player-shell.mode-video.video-interstitial-active .external-player-bg-video,
.external-player-shell.mode-video.video-interstitial-active .external-video-fallback{
  opacity:0!important;
  visibility:hidden!important;
}
.external-player-shell.mode-video.video-interstitial-active .external-youtube-shield{display:none!important}
.hero.interstitial-active .hero-cover,
.hero.interstitial-active .hero-video,
.hero.interstitial-active .hero-current-cover-wrap{
  opacity:0!important;
  visibility:hidden!important;
}
.hero.interstitial-active .hero-youtube-shield{display:none!important}
.hero-interstitial{
  background:
    radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--primary) 26%,transparent) 0,rgba(5,7,11,.64) 34%,rgba(5,7,11,.97) 78%),
    #05070b!important;
}

/* La vidéo n'est révélée qu'après plusieurs secondes de lecture continue :
   les éventuels feedbacks natifs de démarrage YouTube ont alors disparu. */
.external-player-bg-video,.hero-video{pointer-events:none!important}


/* Masquage immédiat des états YouTube non PLAYING : surtout aucun fondu de
   sortie pendant lequel le feedback Play/Pause natif pourrait être aperçu. */
.external-player-bg-video:not(.visible),
.hero-video:not(.visible){
  opacity:0!important;
  visibility:hidden!important;
  transition:none!important;
}
.external-player-bg-video.visible,
.hero-video.visible{visibility:visible!important}


/* ===== v1.53 : horloge + émission en haut à droite, titrage bas gauche simplifié ===== */
.external-player-live-time{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-family:var(--title-font);
  font-size:15px;
  line-height:1;
  font-weight:650;
  letter-spacing:.015em;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
.external-player-shell.mode-video .external-player-top{
  position:fixed!important;
  inset:24px 26px auto 26px!important;
  width:auto!important;
  min-height:0!important;
  padding:0!important;
  display:block!important;
  z-index:24!important;
}
.external-player-shell.mode-video .external-player-brand{
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.external-player-shell.mode-video .external-player-install{
  position:fixed!important;
  top:22px!important;
  left:22px!important;
  z-index:25!important;
}
.external-player-shell.mode-video .external-player-show{
  position:fixed!important;
  top:22px!important;
  right:24px!important;
  left:auto!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex-wrap:nowrap!important;
  max-width:min(74vw,860px)!important;
  padding:10px 14px!important;
  border-radius:18px!important;
  background:rgba(8,11,18,.34)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  backdrop-filter:blur(15px)!important;
  -webkit-backdrop-filter:blur(15px)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.18)!important;
}
.external-player-shell.mode-video .external-player-show-label,
.external-player-shell.mode-video .external-player-show-title,
.external-player-shell.mode-video .external-player-live-time{white-space:nowrap!important}
.external-player-shell.mode-video .external-player-show-label{
  color:rgba(255,255,255,.72)!important;
  font-size:12px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.external-player-shell.mode-video .external-player-show-title{
  color:#fff!important;
  font-size:20px!important;
  font-weight:620!important;
  letter-spacing:-.015em!important;
}
.external-player-shell.mode-video .external-player-show-time{display:none!important}
.external-player-shell.mode-video .external-video-info{
  left:34px!important;
  right:auto!important;
  bottom:34px!important;
  grid-template-columns:88px minmax(0,1fr)!important;
  gap:16px!important;
  align-items:end!important;
  max-width:min(560px,calc(100vw - 68px))!important;
  padding:18px 20px!important;
  border-radius:22px!important;
  background:linear-gradient(90deg,rgba(6,8,13,.68),rgba(6,8,13,.34))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.26)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  transform:translate3d(0,14px,0) scale(.985)!important;
}
.external-player-shell.mode-video .external-video-info.visible{transform:translate3d(0,0,0) scale(1)!important}
.external-player-shell.mode-video .external-video-info.from-center{
  transform:translate3d(28vw,-28vh,0) scale(1.16)!important;
  opacity:0!important;
}
.external-player-shell.mode-video .external-video-info.visible.from-center{
  transform:translate3d(0,0,0) scale(1)!important;
  opacity:1!important;
  transition:transform .9s cubic-bezier(.2,.72,.22,1),opacity .55s ease!important;
}
.external-player-shell.mode-video .external-video-info-art{
  width:88px!important;
  height:88px!important;
  border-radius:50%!important;
  box-shadow:0 14px 32px rgba(0,0,0,.30)!important;
}
.external-player-shell.mode-video .external-video-info-copy{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-end!important}
.external-player-shell.mode-video .external-video-info-badge{
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.18)!important;
  color:#fff!important;
  margin-bottom:8px!important;
}
.external-player-shell.mode-video .external-video-info-eyebrow{
  color:#ff5b46!important;
  font-family:var(--title-font)!important;
  font-size:32px!important;
  line-height:.92!important;
  font-weight:680!important;
  letter-spacing:-.03em!important;
  text-transform:uppercase!important;
  margin:0 0 3px!important;
}
.external-player-shell.mode-video .external-video-info-primary{
  color:#fff!important;
  font-family:var(--title-font)!important;
  font-size:56px!important;
  line-height:.90!important;
  font-weight:620!important;
  letter-spacing:-.045em!important;
  text-transform:uppercase!important;
}
.external-player-shell.mode-video .external-video-center-intro{
  z-index:22!important;
}
.external-player-shell.mode-video .external-player-bg-video,
.external-player-shell.mode-video .external-video-fallback,
.external-player-shell.mode-video .external-player-bg-cover{
  inset:0!important;
}
.external-player-shell.mode-video.video-center-active .external-player-bg-cover,
.external-player-shell.mode-video.video-center-active .external-video-fallback,
.external-player-shell.mode-video.video-center-active .external-player-bg-video{opacity:0!important;visibility:hidden!important}
.external-player-shell.mode-video.video-cover-reveal .external-player-bg-cover,
.external-player-shell.mode-video.video-cover-reveal .external-video-fallback{opacity:1!important;visibility:visible!important}
@media(max-width:900px){
  .external-player-shell.mode-video .external-player-show{top:16px!important;right:16px!important;max-width:calc(100vw - 32px)!important;padding:9px 11px!important;gap:8px!important}
  .external-player-shell.mode-video .external-player-show-title{font-size:16px!important}
  .external-player-shell.mode-video .external-player-live-time{font-size:13px!important;padding:5px 9px!important;min-height:24px!important}
  .external-player-shell.mode-video .external-video-info{left:18px!important;right:18px!important;bottom:18px!important;max-width:calc(100vw - 36px)!important;grid-template-columns:64px minmax(0,1fr)!important;gap:12px!important;padding:14px 15px!important}
  .external-player-shell.mode-video .external-video-info-art{width:64px!important;height:64px!important}
  .external-player-shell.mode-video .external-video-info-eyebrow{font-size:22px!important}
  .external-player-shell.mode-video .external-video-info-primary{font-size:34px!important}
}
@media(max-width:640px){
  .external-player-shell.mode-video .external-player-show{flex-wrap:wrap!important;justify-content:flex-start!important}
  .external-player-shell.mode-video .external-video-info.from-center{transform:translate3d(16vw,-22vh,0) scale(1.1)!important}
}


/* ===== v1.54 : player vidéo TV — clip plein écran + overlays sans cartouche ===== */
/* Le clip redevient un vrai fond cover. La v1.53 appliquait inset:0 à l'iframe,
   ce qui annulait son centrage calculé en JS et pouvait déformer/cadrer le clip. */
.external-player-shell.mode-video .external-player-bg-video{
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  min-width:100%!important;
  min-height:100%!important;
  transform:translate(-50%,-50%) scale(1.015)!important;
  object-fit:cover!important;
  filter:none!important;
}
.external-player-shell.mode-video .external-player-bg-video.visible{
  opacity:1!important;
  visibility:visible!important;
}
/* En attendant le clip, la cover remplit elle aussi tout le background. */
.external-player-shell.mode-video .external-video-fallback{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  transform:none!important;
  object-fit:cover!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.external-player-shell.mode-video.video-no-clip .external-video-fallback,
.external-player-shell.mode-video.video-clip-loading .external-video-fallback{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
.external-player-shell.mode-video.video-has-clip:not(.video-clip-loading) .external-video-fallback{
  opacity:0!important;
  visibility:hidden!important;
}
.external-player-shell.mode-video.media-changing .external-video-fallback{transform:scale(1.025)!important}
/* Le clip ou la cover restent visibles derrière le titrage central. */
.external-player-shell.mode-video.video-center-active .external-player-bg-video.visible{
  opacity:1!important;
  visibility:visible!important;
}
.external-player-shell.mode-video.video-center-active.video-no-clip .external-video-fallback,
.external-player-shell.mode-video.video-center-active.video-clip-loading .external-video-fallback{
  opacity:1!important;
  visibility:visible!important;
}
.external-player-shell.mode-video.video-center-active.video-has-clip:not(.video-clip-loading) .external-video-fallback{
  opacity:0!important;
  visibility:hidden!important;
}
.external-player-shell.mode-video.video-center-active .external-player-bg-cover{
  opacity:.16!important;
  visibility:visible!important;
}
.external-player-shell.mode-video .external-player-overlay{
  background:linear-gradient(180deg,rgba(0,0,0,.24) 0%,rgba(0,0,0,.025) 29%,rgba(0,0,0,.02) 60%,rgba(0,0,0,.38) 100%)!important;
}

/* Heure + émission : en haut à gauche, directement sur le clip, sans bloc. */
.external-player-shell.mode-video .external-player-top{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  z-index:24!important;
  pointer-events:none!important;
}
.external-player-shell.mode-video .external-player-show{
  position:fixed!important;
  top:34px!important;
  left:38px!important;
  right:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:16px!important;
  max-width:calc(100vw - 190px)!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:#fff!important;
  text-shadow:0 3px 18px rgba(0,0,0,.62)!important;
  pointer-events:none!important;
}
.external-player-shell.mode-video .external-player-live-time{
  display:inline!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:600!important;
  letter-spacing:-.02em!important;
}
.external-player-shell.mode-video .external-player-show-label{display:none!important}
.external-player-shell.mode-video .external-player-show-title{
  color:#fff!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:560!important;
  letter-spacing:-.018em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.external-player-shell.mode-video .external-player-show-time{display:none!important}

/* Titrage actuel / à suivre : aucun rectangle, une pochette ronde et du texte pur. */
.external-player-shell.mode-video .external-video-info{
  position:fixed!important;
  left:42px!important;
  right:auto!important;
  bottom:42px!important;
  z-index:26!important;
  display:grid!important;
  grid-template-columns:clamp(86px,7vw,118px) minmax(0,1fr)!important;
  align-items:end!important;
  gap:18px!important;
  width:auto!important;
  max-width:min(720px,calc(100vw - 84px))!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transform:translateY(12px)!important;
  text-shadow:0 4px 22px rgba(0,0,0,.72)!important;
}
.external-player-shell.mode-video .external-video-info.visible{
  opacity:1!important;
  transform:translateY(0)!important;
}
.external-player-shell.mode-video .external-video-info.from-center,
.external-player-shell.mode-video .external-video-info.visible.from-center{
  transform:translateY(0)!important;
}
.external-player-shell.mode-video .external-video-info-art{
  width:clamp(86px,7vw,118px)!important;
  height:clamp(86px,7vw,118px)!important;
  aspect-ratio:1!important;
  border-radius:50%!important;
  object-fit:cover!important;
  border:2px solid rgba(255,255,255,.30)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.34)!important;
}
.external-player-shell.mode-video .external-video-info-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  min-width:0!important;
  padding-bottom:2px!important;
}
.external-player-shell.mode-video .external-video-info-badge{
  display:block!important;
  min-height:0!important;
  margin:0 0 5px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  color:var(--primary)!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:clamp(12px,1vw,16px)!important;
  line-height:1!important;
  font-weight:620!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
}
.external-player-shell.mode-video .external-video-info-eyebrow{
  margin:0!important;
  color:#fff!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:clamp(27px,3.1vw,48px)!important;
  line-height:.94!important;
  font-weight:620!important;
  letter-spacing:-.035em!important;
  text-transform:none!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.external-player-shell.mode-video .external-video-info-primary{
  margin-top:4px!important;
  color:rgba(255,255,255,.94)!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:clamp(20px,2.15vw,34px)!important;
  line-height:1!important;
  font-weight:430!important;
  letter-spacing:-.022em!important;
  text-transform:none!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
/* Le grand titrage central glisse visuellement vers son emplacement bas-gauche. */
.external-player-shell.mode-video .external-video-center-intro{
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  transition:opacity .58s ease,transform .62s cubic-bezier(.2,.72,.22,1)!important;
}
.external-player-shell.mode-video .external-video-center-intro.leaving{
  opacity:0!important;
  transform:translate(-30vw,31vh) scale(.48)!important;
  transform-origin:center center!important;
}
.external-player-shell.mode-video .external-video-center-title,
.external-player-shell.mode-video .external-video-center-artist{
  text-transform:none!important;
}

/* Le bouton Play/Pause du flux audio revient dans la barre du player vidéo.
   Cela ne réactive pas le bouton natif YouTube, l'iframe reste non interactive. */
.external-player-shell.mode-video #external-play{
  display:grid!important;
  place-items:center!important;
}

@media(max-width:900px){
  .external-player-shell.mode-video .external-player-show{top:22px!important;left:20px!important;gap:11px!important;max-width:calc(100vw - 110px)!important}
  .external-player-shell.mode-video .external-player-live-time,
  .external-player-shell.mode-video .external-player-show-title{font-size:17px!important}
  .external-player-shell.mode-video .external-video-info{left:20px!important;bottom:24px!important;grid-template-columns:74px minmax(0,1fr)!important;gap:13px!important;max-width:calc(100vw - 40px)!important}
  .external-player-shell.mode-video .external-video-info-art{width:74px!important;height:74px!important}
  .external-player-shell.mode-video .external-video-info-eyebrow{font-size:clamp(24px,7vw,36px)!important}
  .external-player-shell.mode-video .external-video-info-primary{font-size:clamp(18px,5vw,27px)!important}
  .external-player-shell.mode-video .external-video-center-intro.leaving{transform:translate(-21vw,28vh) scale(.52)!important}
}
@media(max-width:560px){
  .external-player-shell.mode-video .external-player-show{gap:8px!important;max-width:calc(100vw - 85px)!important}
  .external-player-shell.mode-video .external-player-live-time{font-size:15px!important}
  .external-player-shell.mode-video .external-player-show-title{font-size:15px!important}
  .external-player-shell.mode-video .external-video-info{grid-template-columns:62px minmax(0,1fr)!important;gap:11px!important}
  .external-player-shell.mode-video .external-video-info-art{width:62px!important;height:62px!important}
}


/* ===== v1.55 : finition TV, wave de comblage, synchro clip, audio/vidéo cohérents ===== */
/* Heure + émission : même rendu dans les deux modes, en haut à gauche, sans bloc ni ombre. */
.external-player-shell.mode-audio .external-player-show,
.external-player-shell.mode-video .external-player-show{
  position:fixed!important;
  top:32px!important;
  left:38px!important;
  right:auto!important;
  z-index:40!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:15px!important;
  width:auto!important;
  max-width:calc(100vw - 210px)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  text-shadow:none!important;
  pointer-events:none!important;
}
.external-player-shell.mode-audio .external-player-live-time,
.external-player-shell.mode-video .external-player-live-time{
  display:inline!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:600!important;
  letter-spacing:-.025em!important;
  text-shadow:none!important;
}
.external-player-shell.mode-audio .external-player-show-label,
.external-player-shell.mode-video .external-player-show-label{display:none!important}
.external-player-shell.mode-audio .external-player-show-title,
.external-player-shell.mode-video .external-player-show-title{
  color:#fff!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:500!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:none!important;
}
.external-player-shell.mode-audio .external-player-show-time,
.external-player-shell.mode-video .external-player-show-time{display:none!important}
/* En audio, on conserve un contraste propre sans ombre typographique. */
.external-player-shell.mode-audio .external-player-show{mix-blend-mode:normal!important}
html:not(.system-evening) .external-player-shell.mode-audio .external-player-live-time,
html:not(.system-evening) .external-player-shell.mode-audio .external-player-show-title{color:#26344b!important}

/* Pochette ronde du cartouche : cercle franc comme la référence, sans bord/halo parasite. */
.external-player-shell.mode-video .external-video-info{
  text-shadow:none!important;
  filter:none!important;
}
.external-player-shell.mode-video .external-video-info-art{
  width:clamp(92px,7.1vw,116px)!important;
  height:clamp(92px,7.1vw,116px)!important;
  aspect-ratio:1/1!important;
  border-radius:0!important;
  clip-path:circle(49.6% at 50% 50%)!important;
  -webkit-clip-path:circle(49.6% at 50% 50%)!important;
  object-fit:cover!important;
  object-position:center center!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  background:transparent!important;
}
.external-player-shell.mode-video .external-video-info-badge{
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-weight:500!important;
  text-shadow:none!important;
}
/* Titre plus affirmé, artiste volontairement plus léger. */
.external-player-shell.mode-video .external-video-info-eyebrow{
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-weight:650!important;
  letter-spacing:-.032em!important;
  text-shadow:none!important;
  filter:none!important;
}
.external-player-shell.mode-video .external-video-info-primary{
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-weight:430!important;
  letter-spacing:-.018em!important;
  text-shadow:none!important;
  filter:none!important;
}
.external-player-shell.mode-video .external-video-center-title{
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-weight:620!important;
  text-shadow:none!important;
}
.external-player-shell.mode-video .external-video-center-artist{
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-weight:430!important;
  text-shadow:none!important;
}

/* Slide de couleur primaire derrière le grand titrage de début de morceau. */
.external-title-color-slide{
  position:fixed;
  inset:0;
  z-index:20;
  pointer-events:none;
  background:var(--primary-fill);
  opacity:1;
  transform:translate3d(-102%,0,0);
  will-change:transform;
}
.external-title-color-slide[hidden]{display:none!important}
.external-title-color-slide.visible{animation:externalTitlePrimarySlide 2.95s cubic-bezier(.22,.78,.22,1) both}
.external-title-color-slide.leaving{transform:translate3d(102%,0,0)}
@keyframes externalTitlePrimarySlide{
  0%{transform:translate3d(-102%,0,0)}
  22%{transform:translate3d(0,0,0)}
  72%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(102%,0,0)}
}
.external-player-shell.mode-video .external-video-center-intro{z-index:22!important}

/* Écran de comblage : aucune ancienne pochette ne doit exister sous le slide. */
.external-player-shell.mode-video.video-fill-active .external-player-media{
  background:var(--primary-fill)!important;
}
.external-player-shell.mode-video.video-fill-active .external-player-bg-cover,
.external-player-shell.mode-video.video-fill-active .external-player-bg-video,
.external-player-shell.mode-video.video-fill-active .external-video-fallback,
.external-player-shell.mode-video.video-fill-active .external-player-overlay{
  opacity:0!important;
  visibility:hidden!important;
  transition:none!important;
}
.external-video-interstitial{
  position:fixed!important;
  inset:0!important;
  z-index:19!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  pointer-events:none!important;
  opacity:1!important;
  visibility:visible!important;
  background:var(--primary-fill)!important;
  transform:translate3d(102%,0,0);
  transition:transform .62s cubic-bezier(.2,.76,.22,1)!important;
}
.external-video-interstitial[hidden]{display:none!important}
.external-video-interstitial.visible{transform:translate3d(0,0,0)!important}
.external-video-interstitial.leaving{transform:translate3d(-102%,0,0)!important}
.external-video-interstitial-rings,
.external-video-interstitial-logo{display:none!important}
.external-video-interstitial-wave{
  position:relative;
  z-index:3;
  height:min(160px,22vh);
  width:min(520px,58vw);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(5px,.65vw,10px);
}
.external-video-interstitial-wave span{
  width:clamp(4px,.42vw,7px);
  height:24%;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  transform-origin:center;
  animation:externalWavePulse 1.08s ease-in-out infinite;
  box-shadow:none!important;
}
.external-video-interstitial-wave span:nth-child(2n){animation-delay:-.16s}
.external-video-interstitial-wave span:nth-child(3n){animation-delay:-.32s}
.external-video-interstitial-wave span:nth-child(4n){animation-delay:-.48s}
.external-video-interstitial-wave span:nth-child(5n){animation-delay:-.64s}
@keyframes externalWavePulse{
  0%,100%{transform:scaleY(.24);opacity:.56}
  28%{transform:scaleY(.88);opacity:1}
  52%{transform:scaleY(.42);opacity:.78}
  74%{transform:scaleY(1.18);opacity:1}
}
.external-player-shell.mode-video.video-interstitial-active .external-player-track-progress{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:none!important;
}
.external-player-shell.mode-video.video-interstitial-active .external-video-watermark{opacity:.42!important}

/* Le clip est toujours dimensionné en cover réel. */
.external-player-shell.mode-video .external-player-bg-video{
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  max-width:none!important;
  max-height:none!important;
  min-width:100%!important;
  min-height:100%!important;
  transform:translate(-50%,-50%)!important;
  object-fit:cover!important;
}

@media(max-width:900px){
  .external-player-shell.mode-audio .external-player-show,
  .external-player-shell.mode-video .external-player-show{top:20px!important;left:20px!important;gap:10px!important;max-width:calc(100vw - 120px)!important}
  .external-player-shell.mode-audio .external-player-live-time,
  .external-player-shell.mode-video .external-player-live-time,
  .external-player-shell.mode-audio .external-player-show-title,
  .external-player-shell.mode-video .external-player-show-title{font-size:16px!important}
  .external-player-shell.mode-video .external-video-info-art{width:78px!important;height:78px!important}
  .external-video-interstitial-wave{width:min(430px,72vw);height:120px}
}
@media(prefers-reduced-motion:reduce){
  .external-title-color-slide.visible,.external-video-interstitial-wave span{animation:none!important}
  .external-title-color-slide.visible{transform:none!important}
}


/* v1.55b — hiérarchie du cartouche alignée sur la référence TV. */
.external-player-shell.mode-video .external-video-info-art{
  border-radius:0!important;
  clip-path:circle(50% at 50% 50%)!important;
  -webkit-clip-path:circle(50% at 50% 50%)!important;
}
.external-player-shell.mode-video .external-video-info-eyebrow{
  font-size:clamp(30px,3.25vw,52px)!important;
  line-height:.92!important;
  font-weight:650!important;
  letter-spacing:-.04em!important;
  color:#fff!important;
}
.external-player-shell.mode-video .external-video-info-primary{
  margin-top:5px!important;
  font-size:clamp(21px,2.05vw,33px)!important;
  line-height:1!important;
  font-weight:420!important;
  letter-spacing:-.02em!important;
  color:rgba(255,255,255,.94)!important;
}
@media(max-width:900px){
  .external-player-shell.mode-video .external-video-info-eyebrow{font-size:clamp(25px,7vw,38px)!important}
  .external-player-shell.mode-video .external-video-info-primary{font-size:clamp(18px,5vw,27px)!important}
}


/* ===== v1.56 : overlay YouTube verrouillé, cover oblique et vrai 'À suivre' ===== */
/* La cover bas-gauche reprend une lecture plus proche de la référence : cercle net avec légère inclinaison. */
.external-player-shell.mode-video .external-video-info-art{
  width:clamp(94px,7.25vw,118px)!important;
  height:clamp(94px,7.25vw,118px)!important;
  clip-path:circle(50% at 50% 50%)!important;
  -webkit-clip-path:circle(50% at 50% 50%)!important;
  border-radius:0!important;
  transform:rotate(-8deg)!important;
  transform-origin:center center!important;
}
/* En vidéo, le clip reste strictement non interactif et on évite toute remontée visuelle du feedback YouTube. */
.external-player-shell.mode-video .external-player-media,
.external-player-shell.mode-video .external-player-bg-video,
.external-player-shell.mode-video .external-youtube-shield{
  -webkit-user-select:none!important;
  user-select:none!important;
}
.external-player-shell.mode-video .external-youtube-shield{
  display:block!important;
  pointer-events:auto!important;
}
/* Le cartouche conserve la hiérarchie titre puis artiste même pendant l'alternance 'À suivre'. */
.external-player-shell.mode-video .external-video-info-badge{
  margin-bottom:4px!important;
}
@media(max-width:900px){
  .external-player-shell.mode-video .external-video-info-art{transform:rotate(-7deg)!important}
}


/* ===== v1.57 : comblage dès fin de clip, cover oblique renforcée ===== */
.external-player-shell.mode-video .external-video-info-art{
  border-radius:50%!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  transform:rotate(-11deg) translateY(2px)!important;
  overflow:hidden!important;
}
/* Lorsque le prochain titre s'affiche, le cartouche reste bien visible et prioritaire. */
.external-player-shell.mode-video .external-video-info.visible{
  opacity:1!important;
  visibility:visible!important;
}


/* ===== v1.58 : intro titre sur fond couleur principale avant affichage du clip ===== */
.external-player-shell.mode-video.video-center-active .external-title-color-slide{
  opacity:1!important;
  visibility:visible!important;
}
.external-player-shell.mode-video.video-center-active .external-player-bg-video,
.external-player-shell.mode-video.video-center-active .external-video-fallback,
.external-player-shell.mode-video.video-center-active .external-player-bg-cover,
.external-player-shell.mode-video.video-center-active .external-player-overlay{
  opacity:0!important;
  visibility:hidden!important;
  transition:none!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-intro{
  z-index:22!important;
}


/* ===== v1.59 : cartouche 1 ligne + disque oblique + background figé ===== */
.external-player-shell.mode-video .external-video-info{
  grid-template-columns:clamp(100px,7.8vw,124px) minmax(0,1fr)!important;
  max-width:min(880px,calc(100vw - 84px))!important;
}
.external-player-shell.mode-video .external-video-info-art{
  width:clamp(100px,7.8vw,124px)!important;
  height:clamp(88px,6.9vw,110px)!important;
  border-radius:50%!important;
  clip-path:ellipse(50% 48% at 50% 50%)!important;
  -webkit-clip-path:ellipse(50% 48% at 50% 50%)!important;
  transform:rotate(-10deg)!important;
  transform-origin:center center!important;
  object-fit:cover!important;
  overflow:hidden!important;
}
.external-player-shell.mode-video .external-video-info-eyebrow,
.external-player-shell.mode-video .external-video-info-primary{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  max-width:min(720px,calc(100vw - 190px))!important;
}
@media(max-width:900px){
  .external-player-shell.mode-video .external-video-info{grid-template-columns:82px minmax(0,1fr)!important}
  .external-player-shell.mode-video .external-video-info-art{width:82px!important;height:74px!important;transform:rotate(-9deg)!important}
  .external-player-shell.mode-video .external-video-info-eyebrow,
  .external-player-shell.mode-video .external-video-info-primary{max-width:calc(100vw - 130px)!important}
}


/* ===== v1.60 : séquences TV verrouillées ===== */
/* La barre de progression reste réservée au player audio. */
.external-player-shell.mode-video .external-player-track-progress{display:none!important}

/* Gradient uniquement lorsque le cartouche bas-gauche est réellement visible. */
.external-player-shell.mode-video.video-info-visible::after{
  content:"";
  position:fixed;
  left:0;right:0;bottom:0;
  height:min(38vh,360px);
  z-index:21;
  pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.48) 0%,rgba(0,0,0,.27) 34%,rgba(0,0,0,.08) 68%,transparent 100%);
}
.external-player-shell.mode-video .external-video-info{z-index:26!important}

/* Pochette "rond oblique" : disque circulaire vu en légère perspective. */
.external-player-shell.mode-video .external-video-info-art{
  width:clamp(100px,7.8vw,124px)!important;
  height:clamp(100px,7.8vw,124px)!important;
  aspect-ratio:1/1!important;
  border-radius:50%!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  object-fit:cover!important;
  transform:perspective(420px) rotateY(-27deg) rotateZ(-7deg)!important;
  transform-origin:center center!important;
  backface-visibility:hidden!important;
  box-shadow:none!important;
  border:0!important;
}
.external-player-shell.mode-video .external-video-info-eyebrow,
.external-player-shell.mode-video .external-video-info-primary{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Intro : le gros titre est exclusivement sur la couleur principale, jamais sur le clip/cover. */
.external-player-shell.mode-video.video-center-active{
  background:var(--primary-fill)!important;
}
.external-player-shell.mode-video.video-center-active .external-title-color-slide{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  animation:none!important;
  background:var(--primary-fill)!important;
}
.external-player-shell.mode-video.video-center-active .external-player-media,
.external-player-shell.mode-video.video-center-active .external-player-bg-video,
.external-player-shell.mode-video.video-center-active .external-video-fallback,
.external-player-shell.mode-video.video-center-active .external-player-bg-cover,
.external-player-shell.mode-video.video-center-active .external-player-overlay{
  opacity:0!important;
  visibility:hidden!important;
  transition:none!important;
}

/* Comblage figé : fond couleur + logo + wave, sans re-slide entre pub/jingle/top. */
.external-video-interstitial{
  grid-template-rows:auto auto!important;
  align-content:center!important;
  justify-items:center!important;
  row-gap:30px!important;
  background:var(--primary-fill)!important;
}
.external-video-interstitial-logo{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(320px,38vw)!important;
  height:min(120px,16vw)!important;
  z-index:4!important;
  animation:none!important;
}
.external-video-interstitial-logo .theme-logo{
  width:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  filter:brightness(0) invert(1)!important;
  opacity:1!important;
}
.external-video-interstitial-logo strong{
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  color:#fff!important;
  font-size:clamp(34px,5vw,72px)!important;
  font-weight:600!important;
}
.external-player-shell.mode-video.video-interstitial-active .external-video-watermark{opacity:0!important;visibility:hidden!important}
.external-player-shell.mode-video.video-interstitial-active .external-player-media,
.external-player-shell.mode-video.video-interstitial-active .external-player-overlay{
  opacity:0!important;visibility:hidden!important;transition:none!important
}
.external-player-shell.mode-video.video-interstitial-active .external-video-interstitial.visible{
  transform:translate3d(0,0,0)!important;
}

/* Masque temporaire du feedback natif YouTube (play/pause/buffering) uniquement pendant les transitions. */
.youtube-clip-shield::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:106px;height:106px;
  transform:translate(-50%,-50%) scale(.88);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(circle,rgba(0,0,0,.24) 0%,rgba(0,0,0,.13) 44%,rgba(0,0,0,0) 72%);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:opacity .18s ease,transform .18s ease;
}
.youtube-clip-shield.feedback-guard::after{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

@media(max-width:900px){
  .external-player-shell.mode-video .external-video-info-art{
    width:82px!important;height:82px!important;
    transform:perspective(360px) rotateY(-25deg) rotateZ(-7deg)!important;
  }
  .external-video-interstitial-logo{width:min(240px,55vw)!important;height:min(90px,22vw)!important}
}


/* v1.60b — masque central renforcé pendant les commandes YouTube. */
.youtube-clip-shield::after{
  width:154px!important;
  height:154px!important;
  background:radial-gradient(circle,rgba(0,0,0,.15) 0%,rgba(0,0,0,.08) 48%,rgba(0,0,0,0) 76%)!important;
  backdrop-filter:blur(30px)!important;
  -webkit-backdrop-filter:blur(30px)!important;
}


/* ===== v1.61 : finition overlay / gradient / disque / intro ===== */
/* Le dégradé assombrit uniquement le fond : jamais les commandes ni le titrage. */
.external-player-shell.mode-video.video-info-visible::after{
  z-index:3!important;
  height:min(34vh,320px)!important;
  background:linear-gradient(to top,rgba(0,0,0,.48) 0%,rgba(0,0,0,.24) 38%,rgba(0,0,0,.07) 72%,transparent 100%)!important;
}
.external-player-shell.mode-video .external-video-info{z-index:40!important}
.external-player-shell.mode-video .external-player-controlbar{z-index:50!important}
.external-player-shell.mode-video .external-player-top{z-index:45!important}
.external-player-shell.mode-video .external-video-watermark{z-index:44!important}

/* Forme de la référence : ellipse très légère, axe incliné d'environ -6°. */
.external-player-shell.mode-video .external-video-info-art{
  width:clamp(108px,8vw,132px)!important;
  height:clamp(98px,7.25vw,120px)!important;
  aspect-ratio:auto!important;
  border-radius:50%!important;
  clip-path:ellipse(50% 50% at 50% 50%)!important;
  -webkit-clip-path:ellipse(50% 50% at 50% 50%)!important;
  transform:rotate(-6deg)!important;
  transform-origin:center center!important;
  object-fit:cover!important;
  box-shadow:none!important;
  border:0!important;
}

/* L'intro centrale est forcée visible sur le fond couleur/dégradé du thème. */
.external-player-shell.mode-video.video-center-active{
  background:var(--primary-fill)!important;
}
.external-player-shell.mode-video.video-center-active .external-title-color-slide{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  animation:none!important;
  background:var(--primary-fill)!important;
  z-index:30!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-intro{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:32!important;
}
.external-player-shell.mode-video.video-center-active .external-player-media,
.external-player-shell.mode-video.video-center-active .external-player-overlay{
  opacity:0!important;
  visibility:hidden!important;
}

/* L'iframe n'est dévoilée qu'après stabilisation ; le shield ne reçoit aucun clic. */
.external-player-shell.mode-video .external-youtube-shield{pointer-events:auto!important;z-index:12!important}
@media(max-width:900px){
  .external-player-shell.mode-video .external-video-info-art{
    width:86px!important;height:78px!important;transform:rotate(-6deg)!important;
  }
}


/* ===== v1.62 : titrage central au-dessus du fond couleur ===== */
/* Le titrage est maintenant un enfant direct du shell : aucune stacking-context
   du contenu principal ne peut le placer derrière le fond couleur. */
.external-player-shell.mode-video.video-center-active .external-title-color-slide{
  z-index:60!important;
}
.external-player-shell.mode-video .external-video-center-intro{
  position:fixed!important;
  inset:0!important;
  z-index:70!important;
  width:100vw!important;
  height:100vh!important;
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  pointer-events:none!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-intro,
.external-player-shell.mode-video.video-center-active .external-video-center-intro.visible{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-title{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  color:#fff!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:clamp(48px,7vw,104px)!important;
  line-height:.94!important;
  font-weight:620!important;
  letter-spacing:-.035em!important;
  text-align:center!important;
  text-shadow:none!important;
  filter:none!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-artist:not([hidden]){
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  color:rgba(255,255,255,.86)!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:clamp(22px,2.6vw,40px)!important;
  line-height:1!important;
  font-weight:430!important;
  text-align:center!important;
  text-shadow:none!important;
  filter:none!important;
}
/* Fallback absolu : même si l'animation lettre par lettre est interrompue par
   un rafraîchissement temps réel, le texte reste visible. */
.external-player-shell.mode-video.video-center-active .external-video-letter{
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-intro.leaving{
  opacity:0!important;
  transition:opacity .55s ease,transform .62s cubic-bezier(.2,.72,.22,1)!important;
}


/* ===== v1.63 : architecture vidéo nettoyée ===== */
/* Couches explicites : média < dégradé < UI < comblage < intro. */
.external-player-shell.mode-video .external-player-media{z-index:1!important}
.external-player-shell.mode-video .external-bottom-shade{
  position:fixed;
  left:0;right:0;bottom:0;
  height:min(34vh,330px);
  z-index:8!important;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:linear-gradient(to top,rgba(0,0,0,.50) 0%,rgba(0,0,0,.28) 36%,rgba(0,0,0,.09) 68%,transparent 100%);
  transition:opacity .35s ease;
}
.external-player-shell.mode-video.video-info-visible .external-bottom-shade{opacity:1;visibility:visible}
/* Désactivation définitive des anciens pseudo-dégradés qui pouvaient recouvrir l'UI. */
.external-player-shell.mode-video.video-info-visible::after{content:none!important;display:none!important}
.external-player-shell.mode-video .external-player-top{z-index:30!important}
.external-player-shell.mode-video .external-video-watermark{z-index:30!important}
.external-player-shell.mode-video .external-video-info{z-index:32!important}
.external-player-shell.mode-video .external-player-controlbar{z-index:40!important}
.external-player-shell.mode-video .external-youtube-shield{z-index:6!important}

/* Le shield reste transparent : aucun disque/blur au centre du clip. */
.youtube-clip-shield::after,
.youtube-clip-shield.feedback-guard::after{content:none!important;display:none!important}

/* Reprise d'onglet : voile léger au-dessus du clip existant, jamais de cover. */
.external-video-resume-veil{
  position:fixed;
  inset:0;
  z-index:22;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:rgba(0,0,0,.10);
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
  transition:opacity .18s ease;
}
.external-video-resume-veil.visible{opacity:1;visibility:visible}
.external-video-resume-veil[hidden]{display:none!important}

/* Intro de nouveau titre : un seul écran plein couleur contient le texte. */
.external-player-shell.mode-video .external-title-color-slide{display:none!important}
.external-player-shell.mode-video .external-video-center-intro{
  position:fixed!important;
  inset:0!important;
  z-index:70!important;
  width:100vw!important;
  height:100vh!important;
  box-sizing:border-box!important;
  display:none!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding:8vh 7vw!important;
  background:var(--primary-fill)!important;
  color:#fff!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:none!important;
  transition:opacity .45s ease!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-intro,
.external-player-shell.mode-video.video-center-active .external-video-center-intro.visible{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-intro.leaving{opacity:0!important}
.external-player-shell.mode-video .external-video-center-title{
  display:block!important;
  max-width:88vw!important;
  color:#fff!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:clamp(52px,7.4vw,110px)!important;
  line-height:.92!important;
  font-weight:620!important;
  letter-spacing:-.04em!important;
  text-align:center!important;
  text-shadow:none!important;
  filter:none!important;
  white-space:normal!important;
}
.external-player-shell.mode-video .external-video-center-artist:not([hidden]){
  display:block!important;
  max-width:86vw!important;
  color:rgba(255,255,255,.88)!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:clamp(23px,2.8vw,42px)!important;
  line-height:1!important;
  font-weight:430!important;
  text-align:center!important;
  text-shadow:none!important;
}
/* Pendant l'intro, aucun clip/cover ne peut transparaître. */
.external-player-shell.mode-video.video-center-active .external-player-media,
.external-player-shell.mode-video.video-center-active .external-player-overlay,
.external-player-shell.mode-video.video-center-active .external-bottom-shade,
.external-player-shell.mode-video.video-center-active .external-video-watermark,
.external-player-shell.mode-video.video-center-active .external-player-top,
.external-player-shell.mode-video.video-center-active .external-player-controlbar,
.external-player-shell.mode-video.video-center-active .external-video-info{
  opacity:0!important;
  visibility:hidden!important;
}

/* Comblage : écran primaire réellement opaque, sans ancienne cover ni logo du coin. */
.external-player-shell.mode-video.video-fill-active{background:var(--primary-fill)!important}
.external-player-shell.mode-video.video-fill-active .external-player-media,
.external-player-shell.mode-video.video-fill-active .external-player-overlay,
.external-player-shell.mode-video.video-fill-active .external-bottom-shade{
  opacity:0!important;visibility:hidden!important;transition:none!important
}
.external-player-shell.mode-video .external-video-interstitial{
  z-index:60!important;
  background:var(--primary-fill)!important;
  opacity:1!important;
}
.external-player-shell.mode-video.video-interstitial-active .external-video-watermark{display:none!important}
.external-player-shell.mode-video .external-video-interstitial-logo{display:flex!important;opacity:1!important;visibility:visible!important}

/* Pochette bas-gauche : masque ovale incliné, contenu redressé comme la référence. */
.external-player-shell.mode-video .external-video-info{
  grid-template-columns:clamp(108px,8.3vw,136px) minmax(0,1fr)!important;
  gap:18px!important;
}
.external-player-shell.mode-video .external-video-info-art-frame{
  width:clamp(108px,8.3vw,136px)!important;
  height:clamp(94px,7.2vw,118px)!important;
  overflow:hidden!important;
  clip-path:ellipse(50% 48% at 50% 50%)!important;
  -webkit-clip-path:ellipse(50% 48% at 50% 50%)!important;
  transform:rotate(-18deg)!important;
  transform-origin:center center!important;
  flex:0 0 auto!important;
}
.external-player-shell.mode-video .external-video-info-art{
  display:block!important;
  width:118%!important;
  height:118%!important;
  max-width:none!important;
  max-height:none!important;
  margin:-9%!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:rotate(18deg) scale(1.04)!important;
  box-shadow:none!important;
}
@media(max-width:900px){
  .external-player-shell.mode-video .external-video-info{grid-template-columns:88px minmax(0,1fr)!important;gap:13px!important}
  .external-player-shell.mode-video .external-video-info-art-frame{width:88px!important;height:76px!important;transform:rotate(-17deg)!important}
  .external-player-shell.mode-video .external-video-info-art{transform:rotate(17deg) scale(1.05)!important}
}

/* ===== v1.65 : couches finales + intro fiable + comblage figé ===== */
/* Le dégradé bas appartient désormais à la couche média. Il ne peut donc plus
   passer au-dessus du titrage, des boutons ou de l'horloge. */
.external-player-shell.mode-video .external-bottom-shade{
  display:none!important;
}
.external-player-shell.mode-video .external-player-media::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:min(36vh,350px);
  z-index:4;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:linear-gradient(to top,rgba(0,0,0,.52) 0%,rgba(0,0,0,.30) 36%,rgba(0,0,0,.10) 68%,rgba(0,0,0,0) 100%);
  transition:opacity .32s ease;
}
.external-player-shell.mode-video.video-info-visible .external-player-media::after{
  opacity:1;
  visibility:visible;
}
.external-player-shell.mode-video .external-video-info{z-index:40!important}
.external-player-shell.mode-video .external-player-controlbar{z-index:50!important}
.external-player-shell.mode-video .external-player-top,
.external-player-shell.mode-video .external-video-watermark{z-index:45!important}

/* Le bloc utilise sa largeur naturelle jusqu'au bord réellement disponible.
   Les points de suspension n'apparaissent donc qu'à proximité du bord écran. */
.external-player-shell.mode-video .external-video-info{
  width:max-content!important;
  max-width:calc(100vw - 48px)!important;
  grid-template-columns:auto auto!important;
}
.external-player-shell.mode-video .external-video-info-copy{
  width:max-content!important;
  max-width:calc(100vw - 205px)!important;
  min-width:0!important;
}
.external-player-shell.mode-video .external-video-info-eyebrow,
.external-player-shell.mode-video .external-video-info-primary{
  width:max-content!important;
  max-width:calc(100vw - 205px)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:900px){
  .external-player-shell.mode-video .external-video-info{max-width:calc(100vw - 30px)!important}
  .external-player-shell.mode-video .external-video-info-copy,
  .external-player-shell.mode-video .external-video-info-eyebrow,
  .external-player-shell.mode-video .external-video-info-primary{max-width:calc(100vw - 125px)!important}
}

/* Écran de changement de titre : le fond et les textes appartiennent à la même
   couche. Le texte est aussi rendu via pseudo-éléments pour rester visible même
   si une ancienne règle CSS cible les enfants historiques. */
.external-player-shell.mode-video .external-video-center-intro{
  z-index:100!important;
  background:var(--primary-fill)!important;
  color:#fff!important;
  isolation:isolate!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-intro{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}
.external-player-shell.mode-video .external-video-center-title,
.external-player-shell.mode-video .external-video-center-artist{
  display:none!important;
}
.external-player-shell.mode-video .external-video-center-intro::before{
  content:attr(data-title);
  display:block;
  max-width:88vw;
  color:#fff;
  font-family:'Clash Display',var(--title-font),sans-serif;
  font-size:clamp(52px,7.4vw,110px);
  line-height:.92;
  font-weight:620;
  letter-spacing:-.04em;
  text-align:center;
  white-space:normal;
}
.external-player-shell.mode-video .external-video-center-intro::after{
  content:attr(data-artist);
  display:none;
  max-width:86vw;
  margin-top:14px;
  color:rgba(255,255,255,.90);
  font-family:'Clash Display',var(--title-font),sans-serif;
  font-size:clamp(23px,2.8vw,42px);
  line-height:1;
  font-weight:430;
  text-align:center;
}
.external-player-shell.mode-video .external-video-center-intro[data-artist]:not([data-artist=""])::after{
  display:block;
}
.external-player-shell.mode-video.video-center-active .external-player-media,
.external-player-shell.mode-video.video-center-active .external-player-overlay,
.external-player-shell.mode-video.video-center-active .external-video-watermark,
.external-player-shell.mode-video.video-center-active .external-player-top,
.external-player-shell.mode-video.video-center-active .external-player-controlbar,
.external-player-shell.mode-video.video-center-active .external-video-info{
  opacity:0!important;
  visibility:hidden!important;
}

/* Tant qu'un même bloc pub/jingle/top est actif, aucune animation d'entrée ne
   peut être rejouée par un simple rafraîchissement des métadonnées. */
.external-player-shell.mode-video.video-interstitial-active .external-video-interstitial,
.external-player-shell.mode-video.video-interstitial-active .external-video-interstitial.visible{
  transform:none!important;
  transition:none!important;
  opacity:1!important;
  visibility:visible!important;
}


/* ===== v1.65 : halo animé autour de la cover bas-gauche ===== */
.external-player-shell.mode-video .external-video-info-art{
  border:2px solid color-mix(in srgb, var(--primary-fill) 74%, #ffffff 26%)!important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08),
    0 0 0 5px color-mix(in srgb, var(--primary-fill) 68%, transparent),
    0 0 18px color-mix(in srgb, var(--primary-fill) 82%, transparent),
    0 0 34px color-mix(in srgb, var(--primary-fill) 58%, transparent)!important;
  filter:
    drop-shadow(0 0 8px color-mix(in srgb, var(--primary-fill) 78%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb, var(--primary-fill) 56%, transparent))!important;
  animation:externalCoverHaloPulse 2.7s ease-in-out infinite!important;
}
@keyframes externalCoverHaloPulse{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(255,255,255,.08),
      0 0 0 5px color-mix(in srgb, var(--primary-fill) 62%, transparent),
      0 0 14px color-mix(in srgb, var(--primary-fill) 72%, transparent),
      0 0 28px color-mix(in srgb, var(--primary-fill) 48%, transparent)!important;
    filter:
      drop-shadow(0 0 7px color-mix(in srgb, var(--primary-fill) 68%, transparent))
      drop-shadow(0 0 14px color-mix(in srgb, var(--primary-fill) 42%, transparent))!important;
  }
  50%{
    box-shadow:
      0 0 0 2px rgba(255,255,255,.10),
      0 0 0 6px color-mix(in srgb, var(--primary-fill) 78%, transparent),
      0 0 22px color-mix(in srgb, var(--primary-fill) 100%, transparent),
      0 0 42px color-mix(in srgb, var(--primary-fill) 68%, transparent)!important;
    filter:
      drop-shadow(0 0 12px color-mix(in srgb, var(--primary-fill) 92%, transparent))
      drop-shadow(0 0 24px color-mix(in srgb, var(--primary-fill) 62%, transparent))!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .external-player-shell.mode-video .external-video-info-art{animation:none!important}
}


/* ===== v1.66 : transitions clip/comblage/intro + titrage central HTML ===== */
/* Les pseudo-éléments de secours sont désactivés : le vrai texte HTML est utilisé. */
.external-player-shell.mode-video .external-video-center-intro::before,
.external-player-shell.mode-video .external-video-center-intro::after{content:none!important;display:none!important}
.external-player-shell.mode-video .external-video-center-title{
  display:block!important;
  position:relative!important;
  z-index:3!important;
  visibility:visible!important;
  opacity:1!important;
  max-width:88vw!important;
  color:#fff!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:clamp(52px,7.4vw,110px)!important;
  line-height:.92!important;
  font-weight:620!important;
  letter-spacing:-.04em!important;
  text-align:center!important;
  text-shadow:none!important;
  white-space:normal!important;
}
.external-player-shell.mode-video .external-video-center-artist:not([hidden]){
  display:block!important;
  position:relative!important;
  z-index:3!important;
  visibility:visible!important;
  opacity:1!important;
  max-width:86vw!important;
  color:rgba(255,255,255,.9)!important;
  font-family:'Clash Display',var(--title-font),sans-serif!important;
  font-size:clamp(23px,2.8vw,42px)!important;
  line-height:1!important;
  font-weight:430!important;
  text-align:center!important;
  text-shadow:none!important;
}

/* Écran couleur du nouveau titre : entrée par la droite et sortie par la gauche. */
.external-player-shell.mode-video .external-video-center-intro{
  display:none!important;
  position:fixed!important;
  inset:0!important;
  z-index:100!important;
  width:100vw!important;
  height:100vh!important;
  box-sizing:border-box!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding:8vh 7vw!important;
  background:var(--primary-fill)!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(102%,0,0)!important;
  transition:transform .72s cubic-bezier(.2,.76,.22,1)!important;
  pointer-events:none!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-intro{
  display:flex!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-intro.visible{
  transform:translate3d(0,0,0)!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-intro.leaving{
  transform:translate3d(-102%,0,0)!important;
}
/* Au slide de sortie, le nouveau clip/visuel est déjà visible derrière. */
.external-player-shell.mode-video.video-center-active:not(.video-center-leaving) .external-player-media,
.external-player-shell.mode-video.video-center-active:not(.video-center-leaving) .external-player-overlay,
.external-player-shell.mode-video.video-center-active:not(.video-center-leaving) .external-video-watermark,
.external-player-shell.mode-video.video-center-active:not(.video-center-leaving) .external-player-top,
.external-player-shell.mode-video.video-center-active:not(.video-center-leaving) .external-player-controlbar,
.external-player-shell.mode-video.video-center-active:not(.video-center-leaving) .external-video-info{
  opacity:0!important;
  visibility:hidden!important;
}
.external-player-shell.mode-video.video-center-leaving .external-player-media,
.external-player-shell.mode-video.video-center-leaving .external-player-overlay{
  opacity:1!important;
  visibility:visible!important;
}

/* Comblage : slide depuis la droite au-dessus du dernier frame du clip. */
.external-player-shell.mode-video .external-video-interstitial{
  transform:translate3d(102%,0,0)!important;
  transition:transform .72s cubic-bezier(.2,.76,.22,1)!important;
  opacity:1!important;
  visibility:visible!important;
}
.external-player-shell.mode-video.video-interstitial-active .external-video-interstitial.visible{
  transform:translate3d(0,0,0)!important;
  transition:transform .72s cubic-bezier(.2,.76,.22,1)!important;
}
.external-player-shell.mode-video.video-interstitial-active .external-video-interstitial.leaving{
  transform:translate3d(-102%,0,0)!important;
  transition:transform .72s cubic-bezier(.2,.76,.22,1)!important;
}
/* Pendant l'entrée, le clip reste visible sous le panneau qui glisse. */
.external-player-shell.mode-video.video-interstitial-entering:not(.video-fill-active) .external-player-media{
  opacity:1!important;
  visibility:visible!important;
}
/* Une fois le panneau en place, le fond média est totalement coupé. */
.external-player-shell.mode-video.video-fill-active .external-player-media,
.external-player-shell.mode-video.video-fill-active .external-player-overlay{
  opacity:0!important;
  visibility:hidden!important;
}


/* ===== v1.67 : séquence intro -> clip -> boucle + halo visible ===== */
/* L'écran d'intro est la couche la plus haute pendant l'intro : texte garanti au-dessus du fond. */
.external-player-shell.mode-video.video-center-active .external-video-center-intro{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:140!important;
  background:var(--primary-fill)!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-title,
.external-player-shell.mode-video.video-center-active .external-video-center-artist:not([hidden]){
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  position:relative!important;
  z-index:145!important;
  color:#fff!important;
}
.external-player-shell.mode-video.video-center-active .external-video-center-artist:not([hidden]){
  color:rgba(255,255,255,.92)!important;
}
/* La boucle bas-gauche reste totalement masquée jusqu'à la fin de l'intro et la révélation du média. */
.external-player-shell.mode-video.video-center-active .external-video-info,
.external-player-shell.mode-video.video-center-leaving .external-video-info{
  opacity:0!important;
  visibility:hidden!important;
}

/* Halo animé sur le masque ovale lui-même. var(--primary) est toujours une couleur valide. */
.external-player-shell.mode-video .external-video-info-art-frame{
  border:2px solid var(--primary)!important;
  box-sizing:border-box!important;
  filter:
    drop-shadow(0 0 5px var(--primary))
    drop-shadow(0 0 12px var(--primary))
    drop-shadow(0 0 22px var(--primary))!important;
  animation:externalCoverFrameHalo 2.35s ease-in-out infinite!important;
}
@keyframes externalCoverFrameHalo{
  0%,100%{
    filter:
      drop-shadow(0 0 4px var(--primary))
      drop-shadow(0 0 9px var(--primary))
      drop-shadow(0 0 17px var(--primary))!important;
    border-color:var(--primary)!important;
  }
  50%{
    filter:
      drop-shadow(0 0 8px var(--primary))
      drop-shadow(0 0 18px var(--primary))
      drop-shadow(0 0 30px var(--primary))!important;
    border-color:#fff!important;
  }
}
/* L'ancienne animation sur l'image elle-même est neutralisée : elle était coupée par le masque. */
.external-player-shell.mode-video .external-video-info-art{
  animation:none!important;
  filter:none!important;
}
@media(prefers-reduced-motion:reduce){
  .external-player-shell.mode-video .external-video-info-art-frame{animation:none!important}
}


/* ===== v1.68 : slide comblage + anneaux rotatifs + garde YouTube ===== */
/* Le voile de reprise cache totalement le feedback natif YouTube mais jamais la cover. */
.external-player-shell.mode-video .external-video-resume-veil{
  z-index:45!important;
  background:rgba(5,7,11,.38)!important;
  backdrop-filter:blur(16px) saturate(.95)!important;
  -webkit-backdrop-filter:blur(16px) saturate(.95)!important;
  transition:opacity .24s ease!important;
}
/* Petit masque central actif seulement pendant une commande/transition YouTube. */
.external-player-shell.mode-video .youtube-clip-shield::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:150px!important;
  height:150px!important;
  transform:translate(-50%,-50%)!important;
  border-radius:50%!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  background:radial-gradient(circle,rgba(7,9,13,.26) 0%,rgba(7,9,13,.13) 44%,rgba(7,9,13,0) 76%)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  transition:opacity .18s ease!important;
}
.external-player-shell.mode-video .youtube-clip-shield.feedback-guard::after{
  opacity:1!important;
  visibility:visible!important;
}

/* Le slide de comblage recouvre le clip avant de couper le média. */
.external-player-shell.mode-video.video-interstitial-entering .external-player-media{
  opacity:1!important;
  visibility:visible!important;
  transition:none!important;
}
.external-player-shell.mode-video.video-interstitial-entering .external-player-bg-video.visible{
  opacity:1!important;
  visibility:visible!important;
}
.external-player-shell.mode-video.video-interstitial-entering .external-video-interstitial{
  transform:translate3d(102%,0,0)!important;
}
.external-player-shell.mode-video.video-interstitial-entering .external-video-interstitial.visible{
  transform:translate3d(0,0,0)!important;
}

/* Le cadre ovale n'est plus le masque lui-même : il peut laisser dépasser le halo. */
.external-player-shell.mode-video .external-video-info-art-frame{
  position:relative!important;
  overflow:visible!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  border:0!important;
  filter:none!important;
  animation:none!important;
  isolation:isolate!important;
}
.external-player-shell.mode-video .external-video-info-art-mask{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  overflow:hidden!important;
  clip-path:ellipse(50% 48% at 50% 50%)!important;
  -webkit-clip-path:ellipse(50% 48% at 50% 50%)!important;
}
.external-player-shell.mode-video .external-video-info-art-frame::before,
.external-player-shell.mode-video .external-video-info-art-frame::after{
  content:"";
  position:absolute;
  inset:-7px;
  z-index:1;
  border-radius:50%;
  pointer-events:none;
  background:conic-gradient(from 0deg,
    transparent 0 10%,
    color-mix(in srgb,var(--primary) 25%,transparent) 14%,
    var(--primary) 24% 34%,
    rgba(255,255,255,.92) 38%,
    var(--primary) 43% 52%,
    transparent 58% 72%,
    var(--primary) 78% 86%,
    transparent 92% 100%);
  filter:drop-shadow(0 0 6px var(--primary)) drop-shadow(0 0 13px var(--primary));
  animation:externalCoverOrbit 3.2s linear infinite;
  -webkit-mask:radial-gradient(ellipse at center,transparent 0 72%,#000 74% 100%);
  mask:radial-gradient(ellipse at center,transparent 0 72%,#000 74% 100%);
}
.external-player-shell.mode-video .external-video-info-art-frame::after{
  inset:-12px;
  opacity:.48;
  animation-duration:5.1s;
  animation-direction:reverse;
  filter:blur(.6px) drop-shadow(0 0 10px var(--primary));
}
@keyframes externalCoverOrbit{to{transform:rotate(360deg)}}
/* L'image reste redressée dans l'ovale incliné. */
.external-player-shell.mode-video .external-video-info-art{
  position:absolute!important;
  inset:-9%!important;
  width:118%!important;
  height:118%!important;
  margin:0!important;
  transform:rotate(18deg) scale(1.04)!important;
  animation:none!important;
  filter:none!important;
}
@media(max-width:900px){
  .external-player-shell.mode-video .external-video-info-art{transform:rotate(17deg) scale(1.05)!important}
}
@media(prefers-reduced-motion:reduce){
  .external-player-shell.mode-video .external-video-info-art-frame::before,
  .external-player-shell.mode-video .external-video-info-art-frame::after{animation:none!important}
}


/* ===== v1.69 : aucun voile noir/flou au chargement initial du player ===== */
/* Le clip vidéo doit être net dès son premier affichage. */
.external-player-shell.mode-video .external-player-bg-video{
  filter:none!important;
}
/* L'overlay global du player audio n'assombrit jamais le clip en mode vidéo. */
.external-player-shell.mode-video:not(.video-center-active):not(.video-fill-active) .external-player-overlay{
  opacity:0!important;
  visibility:hidden!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
/* Le voile de reprise n'est qu'un cache de transition au retour d'onglet :
   aucun flou et jamais visible par défaut. */
.external-player-shell.mode-video .external-video-resume-veil{
  background:rgba(5,7,11,.18)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
.external-player-shell.mode-video .external-video-resume-veil.visible{
  opacity:1!important;
  visibility:visible!important;
}
/* Le shield reste totalement transparent en fonctionnement normal. */
.external-player-shell.mode-video .youtube-clip-shield:not(.feedback-guard)::after{
  content:none!important;
  display:none!important;
}


/* ===== v1.70 : clip YouTube propre, sans disque central ni sous-titres forcés ===== */
/* Le shield bloque les interactions mais ne dessine JAMAIS quoi que ce soit. */
.external-player-shell.mode-video .youtube-clip-shield,
.external-player-shell.mode-video .youtube-clip-shield.feedback-guard{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}
.external-player-shell.mode-video .youtube-clip-shield::before,
.external-player-shell.mode-video .youtube-clip-shield::after,
.external-player-shell.mode-video .youtube-clip-shield.feedback-guard::before,
.external-player-shell.mode-video .youtube-clip-shield.feedback-guard::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}
/* Aucun voile de reprise ne doit recouvrir le clip. */
.external-player-shell.mode-video .external-video-resume-veil,
.external-player-shell.mode-video .external-video-resume-veil.visible{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


/* ===== v1.71 : suppression fiable du feedback Play/Pause natif YouTube ===== */
/* Tant que l'UI native de l'iframe est susceptible d'être visible, on garde
   l'iframe hors écran et on montre uniquement la pochette de secours. */
.external-player-shell.mode-video.youtube-ui-settling .external-player-bg-video,
.external-player-shell.mode-video.youtube-ui-settling .external-player-bg-video.visible{
  opacity:0!important;
  visibility:hidden!important;
  transition:none!important;
}
.external-player-shell.mode-video.video-has-clip.youtube-ui-settling .external-video-fallback{
  opacity:1!important;
  visibility:visible!important;
  transform:translate(-50%,-50%) scale(1)!important;
  transition:none!important;
}
/* Le bouclier reste transparent et intercepte tous les clics/taps. */
.external-player-shell.mode-video .external-youtube-shield{
  display:block!important;
  pointer-events:auto!important;
  background:transparent!important;
  z-index:18!important;
}
.external-player-shell.mode-video .external-youtube-shield::before,
.external-player-shell.mode-video .external-youtube-shield::after{
  content:none!important;
  display:none!important;
}


/* ===== v1.72 : clip plein écran sans bandes périphériques ===== */
.external-player-shell.mode-video .external-player-media{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  overflow:hidden!important;
}
.external-player-shell.mode-video .external-player-bg-video{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  max-width:none!important;
  max-height:none!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center center!important;
}


/* ===== v1.73 : plein écran dès le premier paint, sans saut depuis le coin haut-gauche ===== */
/* Le mode vidéo est désormais aussi rendu côté PHP. Ces règles constituent un
   fallback CSS immédiat : aucun calcul JS n'est nécessaire pour obtenir le
   plein écran au chargement ou pendant le remplacement d'une iframe. */
.external-player-page.external-player-video-mode{
  margin:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  overflow:hidden!important;
  background:#05070b!important;
}
.external-player-page.external-player-video-mode .external-player-shell.mode-video{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.external-player-shell.mode-video .external-player-media{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  margin:0!important;
  overflow:hidden!important;
}
/* Taille cover 16:9 calculée entièrement en CSS. L'overscan de 30 % reprend
   le cadrage TV appliqué par fitVideo(), mais existe avant son premier appel. */
.external-player-shell.mode-video .external-player-bg-video{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:max(130vw,231.112vh)!important;
  height:max(73.125vw,130vh)!important;
  min-width:130vw!important;
  min-height:130vh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center center!important;
}
/* Le fond de secours lui aussi occupe le viewport dès sa première image. */
.external-player-shell.mode-video .external-player-bg-cover{
  position:absolute!important;
  inset:-5%!important;
  width:110%!important;
  height:110%!important;
  min-width:110%!important;
  min-height:110%!important;
  object-fit:cover!important;
}
/* Empêche toute transition de dimensions lors d'un changement de source. */
.external-player-shell.mode-video.media-changing .external-player-media,
.external-player-shell.mode-video.video-clip-loading .external-player-media,
.external-player-shell.mode-video.youtube-ui-settling .external-player-media{
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  inset:0!important;
}


/* ===== v1.74 : viewport vidéo immuable, aucun quart d'écran au chargement ===== */
/* Le conteneur média est toujours le viewport complet, dès le premier paint. */
.external-player-page.external-player-video-mode,
.external-player-page.external-player-video-mode .external-player-shell.mode-video,
.external-player-shell.mode-video .external-player-media{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* IMPORTANT : on ne donne plus à YouTube une iframe surdimensionnée dont la
   taille change après chargement. Son viewport interne est toujours exactement
   celui de l'écran ; le crop TV est obtenu en zoomant l'iframe entière. */
.external-player-shell.mode-video .external-player-bg-video,
.external-player-shell.mode-video.media-changing .external-player-bg-video,
.external-player-shell.mode-video.video-clip-loading .external-player-bg-video,
.external-player-shell.mode-video.youtube-ui-settling .external-player-bg-video,
.external-player-shell.mode-video.video-center-leaving .external-player-bg-video{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  transform:scale(1.32)!important;
  transform-origin:50% 50%!important;
  border:0!important;
  clip-path:none!important;
}

/* Le background de secours reste lui aussi plein écran pendant tous les états
   de chargement et de changement de titre. */
.external-player-shell.mode-video .external-player-bg-cover{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  transform:scale(1.08)!important;
  transform-origin:center!important;
}
.external-player-shell.mode-video .external-video-fallback{
  transform-origin:center!important;
}

/* Aucun état transitoire ne peut réintroduire une taille/position différente. */
.external-player-shell.mode-video.media-changing .external-player-media,
.external-player-shell.mode-video.video-clip-loading .external-player-media,
.external-player-shell.mode-video.youtube-ui-settling .external-player-media,
.external-player-shell.mode-video.video-center-active .external-player-media,
.external-player-shell.mode-video.video-center-leaving .external-player-media{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}


/* ===== v1.75 : iframe dimensionnée avant chargement + contrôles sur écrans TV ===== */
/* Le JS écrit les dimensions réelles en inline !important avant d'affecter src.
   Ces règles ne servent que de filet de sécurité avant le tout premier calcul. */
.external-player-shell.mode-video .external-player-bg-video{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:238.2222vh!important;
  height:134vh!important;
  min-width:134vw!important;
  min-height:75.375vw!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:50% 50%!important;
  border:0!important;
}

/* Le bloc de commandes doit rester disponible sur le comblage ET sur l'écran
   couleur du gros titrage, même si le mode vidéo le cache normalement au repos. */
.external-player-shell.mode-video.video-center-active .external-player-controlbar,
.external-player-shell.mode-video.video-center-leaving .external-player-controlbar,
.external-player-shell.mode-video.video-interstitial-active .external-player-controlbar,
.external-player-shell.mode-video.video-interstitial-entering .external-player-controlbar,
.external-player-shell.mode-video.video-fill-active .external-player-controlbar{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  z-index:240!important;
  transform:translateX(-50%) translateY(0)!important;
}
/* Les panneaux plein écran restent sous les contrôles. */
.external-player-shell.mode-video .external-video-center-intro,
.external-player-shell.mode-video.video-center-active .external-video-center-intro{
  z-index:180!important;
}
.external-player-shell.mode-video .external-video-interstitial,
.external-player-shell.mode-video.video-interstitial-active .external-video-interstitial{
  z-index:170!important;
}


/* ===== v1.76 : un seul background plein écran, zéro flash de taille intrinsèque ===== */
/* L'ancien fallback <img> est totalement neutralisé en vidéo. Il était la
   source du passage plein écran -> petite pochette haut-gauche -> plein écran. */
.external-player-shell.mode-video #external-video-fallback,
.external-player-shell.mode-video .external-video-fallback,
.external-player-shell.mode-video.video-no-clip .external-video-fallback,
.external-player-shell.mode-video.video-clip-loading .external-video-fallback,
.external-player-shell.mode-video.youtube-ui-settling .external-video-fallback,
.external-player-shell.mode-video.media-changing .external-video-fallback{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
}

/* Une seule pochette de fond. Elle est fixée au viewport AVANT même le JS et
   n'a plus aucune animation de taille/transform pendant un changement de titre. */
.external-player-shell.mode-video #external-bg-cover,
.external-player-shell.mode-video .external-player-bg-cover,
.external-player-shell.mode-video .external-player-bg-cover.cover-leaving,
.external-player-shell.mode-video .external-player-bg-cover.cover-entering,
.external-player-shell.mode-video.media-changing .external-player-bg-cover,
.external-player-shell.mode-video.video-clip-loading .external-player-bg-cover,
.external-player-shell.mode-video.youtube-ui-settling .external-player-bg-cover{
  position:fixed!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:0!important;
  transform:none!important;
  animation:none!important;
  transition:opacity .32s ease!important;
  filter:blur(12px) saturate(.94) brightness(.64)!important;
  opacity:1!important;
  visibility:visible!important;
}
/* Dès que le clip a réellement été révélé, la pochette reste derrière et ne
   réapparaît plus lors d'un changement d'onglet. */
.external-player-shell.mode-video.video-clip-live #external-bg-cover,
.external-player-shell.mode-video.video-clip-live .external-player-bg-cover{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Le conteneur média ne change jamais de géométrie, quel que soit l'état. */
.external-player-shell.mode-video .external-player-media,
.external-player-shell.mode-video.media-changing .external-player-media,
.external-player-shell.mode-video.video-clip-loading .external-player-media,
.external-player-shell.mode-video.youtube-ui-settling .external-player-media,
.external-player-shell.mode-video.video-clip-live .external-player-media{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  min-width:100vw!important;
  min-height:100vh!important;
  overflow:hidden!important;
}
\n\n/* ===== v1.77 : retour d'onglet sans aucun flash de cover ===== */\n/* Dès qu'un clip a déjà été révélé une première fois, la cover est retirée\n   du rendu et ne peut plus réapparaître pendant Pause/Buffering/visibilité. */\n.external-player-shell.mode-video.video-clip-live #external-bg-cover,\n.external-player-shell.mode-video.video-clip-live .external-player-bg-cover,\n.external-player-shell.mode-video.video-clip-live.youtube-ui-settling #external-bg-cover,\n.external-player-shell.mode-video.video-clip-live.video-clip-loading #external-bg-cover{\n  display:none!important;\n  opacity:0!important;\n  visibility:hidden!important;\n}\n/* Un clip déjà live reste rendu pendant les états temporaires de reprise. */\n.external-player-shell.mode-video.video-clip-live .external-player-bg-video,\n.external-player-shell.mode-video.video-clip-live.youtube-ui-settling .external-player-bg-video,\n.external-player-shell.mode-video.video-clip-live.video-clip-loading .external-player-bg-video{\n  opacity:1!important;\n  visibility:visible!important;\n}\n

/* ===== v1.78 : aucun retour de cover avant/reprise clip + liseret orbital détaché ===== */
/* Tant qu'un clip est recherché, chargé ou déjà live, la grande cover de fond
   est totalement hors rendu. Elle ne revient que si l'API confirme qu'il
   n'existe réellement aucun clip pour le morceau. */
.external-player-shell.mode-video.video-cover-suppressed #external-bg-cover,
.external-player-shell.mode-video.video-cover-suppressed .external-player-bg-cover,
.external-player-shell.mode-video.video-clip-loading #external-bg-cover,
.external-player-shell.mode-video.video-clip-live #external-bg-cover,
.external-player-shell.mode-video.video-clip-live.youtube-ui-settling #external-bg-cover,
.external-player-shell.mode-video.video-clip-live.media-changing #external-bg-cover{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
/* Au retour d'onglet, le clip déjà live conserve son dernier frame. */
.external-player-shell.mode-video.video-clip-live .external-player-bg-video,
.external-player-shell.mode-video.video-clip-live.youtube-ui-settling .external-player-bg-video,
.external-player-shell.mode-video.video-clip-live.video-clip-loading .external-player-bg-video{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}

/* Liseret détaché : un anneau fin, avec un vrai espace autour de l'ovale,
   dont la zone lumineuse tourne continuellement quand le cartouche est visible. */
.external-player-shell.mode-video .external-video-info-art-frame{
  isolation:isolate!important;
  overflow:visible!important;
}
.external-player-shell.mode-video .external-video-info-art-frame::before{
  content:""!important;
  position:absolute!important;
  inset:-11px!important;
  z-index:1!important;
  border-radius:50%!important;
  padding:2.5px!important;
  pointer-events:none!important;
  background:conic-gradient(from 0deg,
    transparent 0deg 42deg,
    color-mix(in srgb,var(--primary) 45%,transparent) 70deg,
    var(--primary) 103deg,
    #fff 122deg,
    var(--primary) 142deg,
    color-mix(in srgb,var(--primary) 45%,transparent) 172deg,
    transparent 205deg 360deg)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  filter:drop-shadow(0 0 5px var(--primary)) drop-shadow(0 0 10px color-mix(in srgb,var(--primary) 70%,transparent))!important;
  animation:externalDetachedCoverOrbit 2.8s linear infinite!important;
  transform-origin:center!important;
}
.external-player-shell.mode-video .external-video-info-art-frame::after{
  content:""!important;
  position:absolute!important;
  inset:-11px!important;
  z-index:0!important;
  border:1px solid color-mix(in srgb,var(--primary) 42%,rgba(255,255,255,.3))!important;
  border-radius:50%!important;
  background:none!important;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--primary) 48%,transparent))!important;
  opacity:.7!important;
  animation:none!important;
  pointer-events:none!important;
  -webkit-mask:none!important;
  mask:none!important;
}
@keyframes externalDetachedCoverOrbit{
  to{transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){
  .external-player-shell.mode-video .external-video-info-art-frame::before{animation:none!important}
}


/* ===== v1.79 : zéro écran noir + disparition réelle du bezel YouTube ===== */
/* YouTube doit CONTINUER À ÊTRE RENDU pendant la stabilisation : on le rend
   transparent, mais jamais visibility:hidden. Ainsi son feedback Play/Pause
   natif a le temps de finir son animation avant que le clip soit révélé. */
.external-player-shell.mode-video.youtube-ui-settling .external-player-bg-video,
.external-player-shell.mode-video.youtube-ui-settling .external-player-bg-video.visible,
.external-player-shell.mode-video.video-clip-loading .external-player-bg-video{
  display:block!important;
  visibility:visible!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:none!important;
}

/* Une fois le clip validé stable, il est révélé sans modifier sa géométrie. */
.external-player-shell.mode-video.video-clip-live .external-player-bg-video,
.external-player-shell.mode-video.video-clip-live.youtube-ui-settling .external-player-bg-video,
.external-player-shell.mode-video.video-clip-live.video-clip-loading .external-player-bg-video{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Premier chargement uniquement : la cover reste plein écran derrière
   l'iframe transparente, ce qui élimine le flash noir. Dès qu'un vrai
   changement de titre a lieu, l'écran couleur/comblage sert de transition. */
.external-player-shell.mode-video.video-clip-loading:not(.video-cover-suppressed):not(.video-center-active) #external-bg-cover,
.external-player-shell.mode-video.video-clip-loading:not(.video-cover-suppressed):not(.video-center-active) .external-player-bg-cover{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Pendant une vraie intro de changement de titre, le panneau couleur reste
   totalement opaque jusqu'à ce que la classe video-clip-live soit posée. */
.external-player-shell.mode-video.video-center-active .external-video-center-intro{
  opacity:1!important;
  visibility:visible!important;
}

/* Le bouclier reste au-dessus de toute la surface YouTube pour qu'aucun clic,
   tap ou double-clic ne puisse provoquer le bezel natif. */
.external-player-shell.mode-video .external-youtube-shield{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:80!important;
  display:block!important;
  pointer-events:auto!important;
  background:transparent!important;
}
.external-player-shell.mode-video.video-interstitial-active .external-youtube-shield,
.external-player-shell.mode-video.video-center-active .external-youtube-shield{
  pointer-events:none!important;
}


/* ===== v1.80 : suppression stricte du bezel Pause/Play natif YouTube ===== */
/* Une phase de stabilisation gagne TOUJOURS sur video-clip-live. L'ancienne
   règle v1.79 faisait l'inverse et révélait encore l'iframe au moment précis
   où YouTube dessinait son bouton Pause central. */
.external-player-shell.mode-video.youtube-ui-settling .external-player-bg-video,
.external-player-shell.mode-video.youtube-ui-settling.video-clip-live .external-player-bg-video,
.external-player-shell.mode-video.video-clip-live.youtube-ui-settling .external-player-bg-video,
.external-player-shell.mode-video.youtube-ui-settling .external-player-bg-video.visible,
.external-player-shell.mode-video.youtube-ui-settling.video-clip-live .external-player-bg-video.visible{
  display:block!important;
  visibility:visible!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:none!important;
}
/* Jamais de cover pendant cette attente. Le fond de la radio sert de couche
   propre pendant les quelques instants nécessaires à la disparition du bezel. */
.external-player-shell.mode-video.youtube-ui-settling #external-bg-cover,
.external-player-shell.mode-video.youtube-ui-settling .external-player-bg-cover{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
.external-player-shell.mode-video.youtube-ui-settling{
  background:var(--primary-fill)!important;
}
/* Le shield est strictement au-dessus de l'iframe sur toute la lecture afin
   qu'aucun clic/tap ne puisse créer un nouveau feedback central YouTube. */
.external-player-shell.mode-video .external-youtube-shield{
  z-index:2147483000!important;
  pointer-events:auto!important;
  background:transparent!important;
}
.external-player-shell.mode-video .external-player-controlbar,
.external-player-shell.mode-video .external-video-info,
.external-player-shell.mode-video .external-player-top{
  z-index:2147483001!important;
}


/* ===== v1.81 : clip fini avant l'audio + comblage stable ===== */
/* Si YouTube termine avant le flux audio, la cover du morceau reprend le fond
   plein écran jusqu'à la vraie fin du titre. Cette règle gagne sur les anciens
   états video-clip-live / youtube-ui-settling. */
.external-player-shell.mode-video.video-clip-ended-early #external-bg-cover,
.external-player-shell.mode-video.video-clip-ended-early .external-player-bg-cover{
  display:block!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  animation:none!important;
  pointer-events:none!important;
}
.external-player-shell.mode-video.video-clip-ended-early .external-player-bg-video{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}


/* ===== v1.82 : continuité du clip lors des changements d'onglet ===== */
/* Si un clip était déjà visible avant la suspension de l'onglet, aucune
   ancienne règle youtube-ui-settling ne peut le rendre noir au retour. */
.external-player-shell.mode-video.video-tab-preserve .external-player-bg-video,
.external-player-shell.mode-video.video-tab-preserve.youtube-ui-settling .external-player-bg-video,
.external-player-shell.mode-video.video-tab-preserve.video-clip-loading .external-player-bg-video,
.external-player-shell.mode-video.video-tab-preserve .external-player-bg-video.visible{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:none!important;
  transition:none!important;
}
.external-player-shell.mode-video.video-tab-preserve #external-bg-cover,
.external-player-shell.mode-video.video-tab-preserve .external-player-bg-cover{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
.external-player-shell.mode-video.video-tab-preserve{
  background:transparent!important;
}
.external-player-shell.mode-video.video-tab-preserve .external-video-resume-veil,
.external-player-shell.mode-video.video-tab-preserve .external-video-resume-veil.visible{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}


/* ===== v1.83 : bouton Regarder en player vidéo plein écran + fermeture ===== */
body.site-video-player-open{overflow:hidden!important}
.site-video-player-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#000!important;
}
.site-video-player-overlay[hidden]{display:none!important}
.site-video-player-overlay:fullscreen,
.site-video-player-overlay:-webkit-full-screen{
  width:100vw!important;
  height:100vh!important;
  margin:0!important;
  padding:0!important;
  background:#000!important;
}
.site-video-player-frame{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  margin:0!important;
  padding:0!important;
  background:#000!important;
}
.external-player-close{
  display:none;
  width:38px;
  min-width:38px;
  height:38px;
  padding:0!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:999px!important;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  cursor:pointer;
  flex:0 0 38px;
  box-shadow:none!important;
}
.external-player-close svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}
.external-player-close:hover{background:rgba(255,255,255,.16)!important;transform:translateY(-1px)}
.external-player-shell.mode-video #external-close{display:inline-flex!important}
.external-player-shell.mode-audio #external-close{display:none!important}
/* Toujours avant Play/Pause dans la barre, y compris sur les écrans de titrage/comblage. */
.external-player-shell.mode-video .external-player-controlbar{z-index:80!important}
.external-player-shell.mode-video.video-center-active .external-player-controlbar,
.external-player-shell.mode-video.video-interstitial-active .external-player-controlbar{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
@media(max-width:500px){
  .external-player-close{width:35px;min-width:35px;height:35px;flex-basis:35px}
}


/* ===== v1.84 : Écouter identique à Regarder dans le hero ===== */
.home-page .hero-actions #listen-button,
.home-page .hero-actions .watch-button{
  margin:0!important;
  min-height:42px!important;
  padding:11px 15px!important;
  border:1px solid rgba(19,67,143,.08)!important;
  background:rgba(255,255,255,.92)!important;
  color:var(--primary)!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  text-decoration:none!important;
  font-family:var(--title-font)!important;
  font-size:14px!important;
  font-weight:560!important;
  line-height:1!important;
  box-shadow:0 10px 28px rgba(35,66,115,.11)!important;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease!important;
}
.home-page .hero-actions #listen-button:hover,
.home-page .hero-actions .watch-button:hover{
  transform:translateY(-2px)!important;
  background:var(--primary-fill)!important;
  color:#fff!important;
  border-color:transparent!important;
}
.home-page .hero-actions #listen-button svg,
.home-page .hero-actions .watch-button svg{
  width:17px!important;
  height:17px!important;
}
.home-page .hero-actions #listen-button svg{
  fill:currentColor!important;
  stroke:none!important;
}
.home-page .hero-actions .watch-button svg{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
html.system-evening .home-page .hero-actions #listen-button,
html.system-evening .home-page .hero-actions .watch-button{
  background:rgba(17,25,43,.78)!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#eef3fb!important;
  box-shadow:0 10px 30px rgba(0,0,0,.18)!important;
}
html.system-evening .home-page .hero-actions #listen-button:hover,
html.system-evening .home-page .hero-actions .watch-button:hover{
  background:var(--primary-fill)!important;
  color:#fff!important;
  border-color:transparent!important;
}
@media(max-width:720px){
  .home-page .hero-actions #listen-button,
  .home-page .hero-actions .watch-button{
    min-height:42px!important;
    padding:10px 13px!important;
    font-size:13px!important;
  }
}


/* ===== v1.85 : Titres diffusés intégré au gabarit du site ===== */
.history-page-body{background:#f3f6fa}
.history-page{min-height:72vh;padding-top:58px}
.history-kicker{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--primary) 9%,white);color:var(--primary);font-family:var(--title-font);font-size:11px;font-weight:650;letter-spacing:.045em}
.history-page .detail-inline-back{margin-bottom:22px}
.history-page-head h1{margin-top:15px;color:#17243a}
.theme-gradient .history-page-head h1{background:var(--primary-fill);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.history-filter,.history-row{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html.system-evening .history-kicker{background:color-mix(in srgb,var(--primary) 16%,#111824);color:color-mix(in srgb,var(--primary) 78%,white)}
@media(max-width:760px){.history-page{padding-top:38px}.history-page .detail-inline-back{margin-bottom:18px}}


/* ===== v1.86 : corrections mobile player audio / vidéo ===== */
@media(max-width:760px){
  /* Player audio : un titre court doit être centré dans toute la largeur du
     bloc. Les titres réellement plus larges conservent leur défilement. */
  .external-player-shell.mode-audio .external-player-copy,
  .external-player-shell.mode-audio .external-player-title-wrap,
  .external-player-shell.mode-audio .external-player-artist{
    width:100%!important;
    max-width:100%!important;
    text-align:center!important;
  }
  .external-player-shell.mode-audio .external-player-title{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
  .external-player-shell.mode-audio .external-player-title-wrap.title-marquee .external-player-title{
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
  }

  /* Player vidéo : le cartouche éditorial reste nettement au-dessus de la
     barre Play/Pause/volume fixée au bas de l'écran. */
  .external-player-shell.mode-video .external-video-info{
    bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;
  }
}
@media(max-width:390px){
  .external-player-shell.mode-video .external-video-info{
    bottom:calc(86px + env(safe-area-inset-bottom,0px))!important;
  }
}


/* ===== v1.92 : prochain titre sur publicité + source À suivre unifiée ===== */
.external-player-shell.mode-video .external-video-interstitial{
  grid-template-rows:auto auto auto!important;
  row-gap:clamp(18px,2.4vh,30px)!important;
}
.external-video-interstitial-next{
  position:relative;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(900px,86vw);
  max-width:86vw;
  text-align:center;
  color:#fff;
  font-family:'Clash Display',var(--title-font),sans-serif;
  pointer-events:none;
}
.external-video-interstitial-next[hidden]{display:none!important}
.external-video-interstitial-next-label{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:5px 12px 4px;
  margin-bottom:8px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:rgba(0,0,0,.10);
  color:rgba(255,255,255,.92);
  font-size:clamp(11px,.9vw,14px);
  line-height:1;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.external-video-interstitial-next-title{
  display:block;
  max-width:86vw;
  color:#fff;
  font-size:clamp(30px,3.8vw,58px);
  line-height:.96;
  font-weight:650;
  letter-spacing:-.035em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:none!important;
}
.external-video-interstitial-next-artist{
  display:block;
  max-width:84vw;
  margin-top:7px;
  color:rgba(255,255,255,.84);
  font-size:clamp(18px,1.7vw,28px);
  line-height:1;
  font-weight:430;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:none!important;
}
.external-player-shell.mode-video:not(.video-interstitial-publicity) .external-video-interstitial-next{display:none!important}
@media(max-width:900px){
  .external-video-interstitial-next{width:min(92vw,680px);max-width:92vw}
  .external-video-interstitial-next-title{max-width:90vw;font-size:clamp(26px,8vw,42px)}
  .external-video-interstitial-next-artist{max-width:88vw;font-size:clamp(16px,4.6vw,23px)}
}


/* ===== v1.94 : titre sans clip = écran de comblage centré ===== */
.external-video-interstitial-track{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  text-align:center;
  width:min(76vw,720px);
  max-width:100%;
}
.external-video-interstitial-track[hidden]{display:none!important}
.external-video-interstitial-track-art-frame{
  position:relative;
  width:min(30vw,240px);
  height:min(30vw,240px);
  min-width:160px;
  min-height:160px;
  padding:10px;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  box-shadow:0 22px 60px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.external-video-interstitial-track-art-mask{
  width:100%;height:100%;overflow:hidden;border-radius:26px;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 10px 30px rgba(0,0,0,.24);
}
.external-video-interstitial-track-art{width:100%;height:100%;display:block;object-fit:cover}
.external-video-interstitial-track-copy{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:min(92vw,860px)}
.external-video-interstitial-track-label{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);backdrop-filter:blur(10px);
}
.external-video-interstitial-track-title{
  display:block;margin:0;
  font-family:'Clash Display',sans-serif;
  font-size:clamp(34px,5.2vw,74px);line-height:.96;letter-spacing:-.03em;
  color:#fff;font-weight:650;
  text-shadow:0 10px 36px rgba(0,0,0,.28);
}
.external-video-interstitial-track-artist{
  display:block;
  font-family:'Clash Display',sans-serif;
  font-size:clamp(22px,2.4vw,34px);line-height:1.04;letter-spacing:-.01em;
  color:rgba(255,255,255,.84);font-weight:500;
}
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial-logo,
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial-wave,
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial-next{display:none!important}
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial-track{display:flex!important}
.external-player-shell.mode-video.video-interstitial-music-noclip .external-player-bg-cover{opacity:0!important;visibility:hidden!important}
@media (max-width: 768px){
  .external-video-interstitial-track{width:min(90vw,520px);gap:16px}
  .external-video-interstitial-track-art-frame{width:min(52vw,228px);height:min(52vw,228px);min-width:142px;min-height:142px;padding:8px;border-radius:28px}
  .external-video-interstitial-track-art-mask{border-radius:22px}
  .external-video-interstitial-track-title{font-size:clamp(28px,8vw,46px)}
  .external-video-interstitial-track-artist{font-size:clamp(18px,5vw,26px)}
}


/* ===== v2.01 : écran sans clip persistant, aucun retour au noir ===== */
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial,
.external-player-shell.mode-video.video-interstitial-music-noclip.video-interstitial-active .external-video-interstitial{
  background:var(--primary-fill)!important;
  opacity:1!important;
  visibility:visible!important;
}
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial-track{
  opacity:1!important;
  visibility:visible!important;
}
.external-player-shell.mode-video.video-interstitial-music-noclip .external-player-media,
.external-player-shell.mode-video.video-interstitial-music-noclip .external-player-bg-cover,
.external-player-shell.mode-video.video-interstitial-music-noclip .external-player-bg-video,
.external-player-shell.mode-video.video-interstitial-music-noclip .external-player-overlay{
  opacity:0!important;
  visibility:hidden!important;
}


/* ===== v2.01 : contrôles toujours visibles sur l'écran sans clip ===== */
.external-player-shell.mode-video.video-interstitial-music-noclip .external-player-controlbar,
.external-player-shell.mode-video.video-interstitial-music-noclip.video-interstitial-active .external-player-controlbar{
  display:flex!important;
  position:fixed!important;
  left:50%!important;
  bottom:22px!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateX(-50%) translateY(0)!important;
  z-index:2147483646!important;
}
.external-player-shell.mode-video.video-interstitial-music-noclip .external-youtube-shield{
  pointer-events:none!important;
}
@media(max-width:500px){
  .external-player-shell.mode-video.video-interstitial-music-noclip .external-player-controlbar{
    bottom:14px!important;
    width:min(calc(100vw - 22px),390px)!important;
  }
}


/* ===== v2.01 : contrôles hors du stage + no-clip sans noir ===== */
/* La barre est maintenant enfant direct du shell : elle ne peut plus être
   enfermée sous le stacking context d'un écran de comblage. */
.external-player-shell > .external-player-controlbar{
  display:flex!important;
  position:fixed!important;
  left:50%!important;
  bottom:22px!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(-50%) translateY(0)!important;
  z-index:2147483647!important;
}
.external-player-shell.mode-video.video-interstitial-music-noclip > .external-player-controlbar,
.external-player-shell.mode-video.video-interstitial-active > .external-player-controlbar,
.external-player-shell.mode-video.video-center-active > .external-player-controlbar{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
/* Écran sans clip préparé derrière l'intro : aucune couche noire intermédiaire. */
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial{
  background:var(--primary-fill)!important;
  opacity:1!important;
  visibility:visible!important;
}
.external-player-shell.mode-video.video-center-active.video-interstitial-music-noclip .external-video-interstitial{
  transform:translate3d(0,0,0)!important;
  transition:none!important;
}
.external-player-shell.mode-video.video-interstitial-music-noclip .external-player-media,
.external-player-shell.mode-video.video-interstitial-music-noclip .external-player-overlay{
  opacity:0!important;
  visibility:hidden!important;
}
@media(max-width:500px){
  .external-player-shell > .external-player-controlbar{
    bottom:14px!important;
    width:min(calc(100vw - 22px),390px)!important;
  }
}


/* ===== v2.01 : verrouillage transition clip -> titre sans clip ===== */
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial,
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial.visible,
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial.leaving{
  display:grid!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0)!important;
  transition:none!important;
  background:var(--primary-fill)!important;
}
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial-track{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
}


/* ===== v2.01 : le vrai clip reprend toujours la priorité ===== */
/* Si le média API trouve finalement un clip alors que le panneau "sans clip"
   est encore affiché, l'iframe doit pouvoir charger et jouer derrière lui. */
.external-player-shell.mode-video.video-interstitial-music-noclip.video-real-clip-pending .external-player-media,
.external-player-shell.mode-video.video-interstitial-music-noclip.video-real-clip-pending .external-player-bg-video{
  display:block!important;
  visibility:visible!important;
}
.external-player-shell.mode-video.video-interstitial-music-noclip.video-real-clip-pending .external-player-media{
  opacity:1!important;
}
.external-player-shell.mode-video.video-interstitial-music-noclip.video-real-clip-pending .external-player-bg-video{
  opacity:0!important;
  pointer-events:none!important;
}
/* Une fois le clip déclaré live, aucune règle historique "no clip" ne peut
   encore masquer la vidéo. */
.external-player-shell.mode-video.video-clip-live .external-player-bg-video.visible{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}


/* ===== v2.01 : transition sans-clip -> clip atomique, zéro écran noir ===== */
/* Le panneau sans clip reste au-dessus pendant le chargement. Le clip peut déjà
   être peint derrière lui quand JS pose video-noclip-exit-ready. */
.external-player-shell.mode-video.video-interstitial-music-noclip.video-noclip-exit-ready .external-player-media{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}
.external-player-shell.mode-video.video-interstitial-music-noclip.video-noclip-exit-ready .external-player-bg-video,
.external-player-shell.mode-video.video-interstitial-music-noclip.video-noclip-exit-ready .external-player-bg-video.visible{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}
/* L'interstitial reste opaque jusqu'au retrait atomique effectué au frame suivant. */
.external-player-shell.mode-video.video-interstitial-music-noclip.video-noclip-exit-ready .external-video-interstitial{
  display:grid!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
/* Ne jamais démarrer/laisser voir le cartouche bas-gauche avant le média final. */
.external-player-shell.mode-video.video-center-active .external-video-info,
.external-player-shell.mode-video.video-interstitial-active .external-video-info,
.external-player-shell.mode-video.video-clip-loading .external-video-info{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}


/* ===== v2.01 : écran sans clip verrouillé + logo haut droite ===== */
/* L'écran pochette+titrage d'un morceau sans clip est un état permanent du
   morceau, pas une transition : aucune ancienne règle ne peut le masquer. */
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial,
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial.visible,
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial.leaving{
  display:grid!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  transition:none!important;
  background:var(--primary-fill)!important;
}
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-interstitial-track{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:24!important;
}
/* Logo station toujours visible en haut à droite sur le comblage sans clip. */
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-watermark{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:52!important;
}
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-watermark .theme-logo,
.external-player-shell.mode-video.video-interstitial-music-noclip .external-video-watermark strong{
  opacity:1!important;
  visibility:visible!important;
}
/* Le visuel central et le logo restent au-dessus du fond, tandis que la barre
   de contrôle reste encore au-dessus des deux. */
.external-player-shell.mode-video.video-interstitial-music-noclip > .external-player-controlbar{
  z-index:60!important;
}