:root{--fg:#fff;--muted:rgba(255,255,255,.72);--shadow:0 18px 50px rgba(0,0,0,.35);--a:#0070C0}
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);overflow:hidden;background:#06060a}
    body.trackPage{overflow:auto;height:auto}

    /* Valeurs fond EXACTES OSky */
    .contrastFilter{position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.70);pointer-events:none}
    .yt{position:fixed;inset:0;z-index:-3;background:#000;display:none;overflow:hidden}
    .yt.is-visible{display:block}
    #ytWrap{position:absolute;inset:-4%;overflow:hidden;opacity:.98;transform:scale(1.12);filter:saturate(1.08) contrast(1.08);transition:opacity .22s ease}
    #ytPlayer{position:absolute;top:50%;left:50%;width:max(132vw,234vh);height:max(132vh,74vw);transform:translate(-50%,-50%);pointer-events:none}

.ytBgPoster{
  position:absolute;
  top:50%;
  left:50%;
  width:max(110vw,195vh);
  height:max(110vh,62vw);
  transform:translate(-50%,-50%);
  object-fit:cover;
  pointer-events:none;
  border:0;
  opacity:.92;
  filter:saturate(1.08) contrast(1.04);
}
.ytBgPoster.hidden{display:none;}


    .bg{position:fixed;inset:-6%;z-index:-4;pointer-events:none;overflow:hidden}
    .bg.is-hidden{display:none}
    .bg::before,.bg::after{content:"";position:absolute;inset:-16%;pointer-events:none;will-change:transform,opacity}
    .bg::before{
      background:
        repeating-linear-gradient(120deg, rgba(255,255,255,.28) 0 3px, rgba(255,255,255,0) 3px 34px),
        linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 48%, rgba(255,255,255,0) 100%);
      opacity:.34;
      mix-blend-mode:soft-light;
      animation:bgWatermarkSweep 12s linear infinite;
    }
    .bg::after{
      background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.22), rgba(255,255,255,0) 26%),
        radial-gradient(circle at 78% 32%, rgba(255,255,255,.16), rgba(255,255,255,0) 24%),
        radial-gradient(circle at 58% 76%, rgba(255,255,255,.14), rgba(255,255,255,0) 22%);
      opacity:.26;
      mix-blend-mode:screen;
      animation:bgWatermarkFloat 8s ease-in-out infinite alternate;
    }
    .bg__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(8px) saturate(1.14) contrast(1.08);transform:scale(1.05);opacity:.66;transition:opacity .45s ease,transform .45s ease;animation:bgImageDrift 18s ease-in-out infinite alternate}
    .bg__img.is-fading{opacity:.16;transform:scale(1.08)}
    .bg__overlay{position:absolute;inset:0;background:radial-gradient(1200px 700px at 30% 20%, rgba(0,0,0,.22), rgba(0,0,0,.66))}
    .bg__grain{position:absolute;inset:0;opacity:.085;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:overlay}

    .bg__overlay::before,.bg__overlay::after,.coverOverlay__shade::before,.coverOverlay__shade::after{content:none}

    .coverOverlay{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity .18s ease;overflow:hidden}
.coverOverlay::before{content:"";position:absolute;inset:-14%;pointer-events:none;opacity:.12;mix-blend-mode:soft-light;background:repeating-linear-gradient(115deg, rgba(255,255,255,.10) 0 2px, rgba(255,255,255,0) 2px 42px);filter:blur(3px);animation:bgWatermarkSweep 18s linear infinite reverse}
    .coverOverlay.is-on{opacity:1}
    .coverOverlay__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:auto}
    .coverOverlay__shade{position:absolute;inset:0;background:radial-gradient(1200px 700px at 30% 20%, rgba(0,0,0,.12), rgba(0,0,0,.64))}
    .coverOverlay__grain{position:absolute;inset:0;opacity:.085;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");mix-blend-mode:overlay}


    .bgFx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:1}
    .bgFx::before,.bgFx::after{content:"";position:absolute;top:-28%;bottom:-28%;left:-45%;right:-45%;pointer-events:none;will-change:transform,opacity;mix-blend-mode:screen}
    .bgFx::before{
      background:repeating-linear-gradient(112deg,
        rgba(255,255,255,0) 0 16%,
        rgba(255,255,255,.055) 16% 23%,
        rgba(255,255,255,0) 23% 42%,
        rgba(255,255,255,.028) 42% 46%,
        rgba(255,255,255,0) 46% 68%);
      opacity:.22;
      filter:blur(5px);
      animation:bgBandsSweep 26s linear infinite;
    }
    .bgFx::after{
      background:repeating-linear-gradient(112deg,
        rgba(255,255,255,0) 0 24%,
        rgba(255,255,255,.032) 24% 29%,
        rgba(255,255,255,0) 29% 50%,
        rgba(255,255,255,.018) 50% 53%,
        rgba(255,255,255,0) 53% 76%);
      opacity:.14;
      filter:blur(8px);
      animation:bgBandsSweepAlt 34s linear infinite reverse;
    }
    .brandLogo{position:fixed;top:50px;left:50%;transform:translateX(-50%);z-index:10;pointer-events:none;user-select:none}
    .brandLogo img{height:40px;width:auto;display:block;filter: drop-shadow(0 18px 32px rgba(0,0,0,.45));}

    .webtvToggle{position:fixed;top:calc(18px + env(safe-area-inset-top));left:calc(18px + env(safe-area-inset-left));z-index:13;display:none;align-items:center;justify-content:center;height:42px;width:42px;padding:0;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(8,8,8,.24);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;cursor:pointer;box-shadow:0 16px 42px rgba(0,0,0,.28);transition:opacity .34s ease, transform .34s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;opacity:0;pointer-events:none;transform:translateY(-8px) scale(.98)}
    .webtvToggle.is-available{display:inline-flex;opacity:1;pointer-events:auto;transform:none}
    .webtvToggle:hover{background:rgba(10,10,10,.42);border-color:rgba(255,255,255,.24);box-shadow:0 20px 46px rgba(0,0,0,.34)}
    .webtvToggle:active{transform:scale(.98)}
    .webtvToggle__icon{font-size:14px;line-height:1}
    .webtvToggle__icon--radio{display:none}
        @media (min-width: 1025px){
      .webtvToggle{display:inline-flex}
    }

    /* Social icons + QR (top-right) */
    .socialTopLeft{position:fixed;top:calc(16px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));left:auto;z-index:12;display:flex;gap:10px;align-items:flex-start}
    /* Desktop: un bouton + liste au clic (comme mobile) */
    .socialList{display:none;gap:10px;align-items:center}
    .socialTopLeft.is-open .socialList{display:flex}
    .socialToggle{display:grid;width:38px;height:38px;place-items:center;border-radius:999px;
      border:1px solid rgba(255,255,255,.14);background:rgba(10,10,10,.28);color:rgba(255,255,255,.92);
      backdrop-filter: blur(10px);box-shadow: 0 10px 24px rgba(0,0,0,.28);cursor:pointer;
      transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .socialToggle i{font-size:15px}
    .socialToggle:hover{transform:translateY(-1px);background:rgba(10,10,10,.38);border-color:rgba(255,255,255,.22);box-shadow:0 14px 30px rgba(0,0,0,.34)}
    .socialToggle:active{transform:translateY(0)}
    .socialBtn{width:38px;height:38px;display:grid;place-items:center;border-radius:999px;text-decoration:none;color:rgba(255,255,255,.92);
      background:rgba(10,10,10,.28);backdrop-filter: blur(10px);
      border:1px solid rgba(255,255,255,.14);
      box-shadow: 0 10px 24px rgba(0,0,0,.28);
      cursor:pointer;
      transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .socialBtn i{font-size:16px}
    .socialBtn:hover{transform:translateY(-1px);background:rgba(10,10,10,.38);border-color:rgba(255,255,255,.22);box-shadow:0 14px 30px rgba(0,0,0,.34)}
    .socialBtn:active{transform:translateY(0)}

    /* Mobile: colonne + liste verticale au clic */
    @media (max-width: 720px){
      .socialTopLeft{
        top: max(14px, calc(env(safe-area-inset-top) + 10px));
        right: max(14px, calc(env(safe-area-inset-right) + 10px));
        left:auto;
        gap:8px;
        flex-direction:column;
        align-items:flex-end;
      }
      .socialList{flex-direction:column;gap:8px;margin-top:6px;padding-top:0;align-items:flex-end}
    }

    /* QR modal */
    .qrModal__content{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;padding:6px 0 0}
    .qrModal__title{font-size:20px;font-weight:700;letter-spacing:.2px;text-align:center}
    .qrModal__imgWrap{width:280px;max-width:78vw;aspect-ratio:1/1;border-radius:18px;overflow:hidden;
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
      box-shadow:0 18px 45px rgba(0,0,0,.35);display:grid;place-items:center}
    .qrModal__img{width:100%;height:100%;object-fit:contain;background:#fff}
    .qrModal__hint{color:rgba(255,255,255,.72);font-size:13px;text-align:center;line-height:1.35}
    .qrModal__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding-bottom:8px}

    /* Mobile: masquer le bouton volume (le volume reste à 100% par défaut) */
    @media (max-width: 720px){
      .volWrap{display:none !important;}
    }

    /* Player content must stay centered in the viewport, whether the dock is shown or not */
    .wrap{height:100vh;position:relative;padding:0;display:block;}
    .playerCenter{
      position:fixed;
      top:50%;
      left:0;
      right:0;
      transform:translateY(-50%);
      width:100%;
      display:flex;
      justify-content:center;
      padding:0 18px;
      z-index:6;
    }
    .playerRow{display:inline-flex;align-items:center;gap:20px;max-width:min(1000px,92vw)}

    .miniCover{width:210px;height:210px;border-radius:22px;overflow:hidden;position:relative;background:rgba(0,0,0,.18);flex:0 0 210px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.10)}
    .cover{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:opacity .45s ease,transform .45s ease}
    .cover.is-fading{opacity:.15;transform:scale(1.05)}

    .play--mini{
      width:78px;height:78px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      border-radius:999px;border:1px solid rgba(255,255,255,.22);
      background:rgba(0,0,0,.35);color:#fff;cursor:pointer;
      display:grid;place-items:center;
      box-shadow:0 18px 40px rgba(0,0,0,.35);
      transition:transform .18s ease,background .18s ease;
    }
    .play--mini:hover{transform:translate(-50%,-50%) scale(1.06);background:rgba(0,0,0,.45)}
    .play--mini:active{transform:translate(-50%,-50%) scale(.98)}
    .play--mini i{font-size:24px}
    .play--mini.is-loading i{display:none}
    .spinner{
      width:26px;height:26px;border-radius:999px;
      border:3px solid rgba(255,255,255,.25);
      border-top-color: rgba(255,255,255,.95);
      animation:spin .85s linear infinite;
      display:none;
    }
    .play--mini.is-loading .spinner{display:block}
    @keyframes spin{to{transform:rotate(360deg)}}

    .meta{min-width:0;text-align:left;max-width:clamp(260px,52vw,720px)}
    /* Badge "EN DIRECT" : plus pro, plus sobre, sans doré */
    .chip{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 13px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.20);
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      color:#fff;
      font-weight:800;
      font-size:11px;
      letter-spacing:.42px;
      text-transform:uppercase;
      user-select:none;
      margin-bottom:10px;
      width:fit-content;
      overflow:hidden;
      box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        0 0 0 1px rgba(255,255,255,.05) inset;
    }
    .chip::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      background:linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,.03));
      opacity:.95;
      pointer-events:none;
    }
    .chip::after{ display:none; }

    .chip .dot{
      width:8px;height:8px;border-radius:50%;
      background:#ff3b30;
      box-shadow:0 0 0 4px rgba(255,59,48,.14);
      animation:none;
      flex:0 0 auto;
    }
    .artist{font-weight:800;font-size:32px;line-height:1.10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 25px rgba(0,0,0,.25)}
    .title{font-weight:500;font-size:20px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 25px rgba(0,0,0,.25)}
    .pop{animation:titleSwap .42s cubic-bezier(.22,.8,.25,1)}
    @keyframes titleSwap{0%{transform:translateY(10px) scale(.985);opacity:.02;filter:blur(8px)}45%{transform:translateY(-2px) scale(1.008);opacity:.82;filter:blur(0)}100%{transform:none;opacity:1;filter:blur(0)}}

    .artist.is-loading,.title.is-loading{position:relative;color:transparent !important;min-height:1em}
    .artist.is-loading::before,.title.is-loading::before{content:"";display:block;height:1em;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.22), rgba(255,255,255,.10));background-size:200% 100%;animation:loadingShimmer .9s linear infinite}
    .artist.is-loading::before{width:min(220px,42vw);height:18px}
    .title.is-loading::before{width:min(160px,30vw);height:14px;opacity:.92;margin-top:8px}
    @keyframes loadingShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
    @keyframes bgWatermarkSweep{0%{transform:translate3d(-8%,0,0) scale(1.03)}50%{transform:translate3d(8%,-4%,0) scale(1.09)}100%{transform:translate3d(-5%,4%,0) scale(1.04)}}
    @keyframes bgWatermarkFloat{0%{transform:translate3d(-3%,-2%,0) rotate(-1deg) scale(1.01);opacity:.14}100%{transform:translate3d(4%,3%,0) rotate(1.8deg) scale(1.10);opacity:.30}}
    @keyframes bgSheenDrift{0%{transform:translate3d(-14%,-5%,0) rotate(-8deg) scale(1.05)}100%{transform:translate3d(14%,6%,0) rotate(8deg) scale(1.14)}}
    @keyframes bgPulseFloat{0%{transform:translate3d(-4%,-2%,0) scale(1);opacity:.20}100%{transform:translate3d(5%,3%,0) scale(1.16);opacity:.42}}
    @keyframes bgImageDrift{0%{transform:scale(1.05) translate3d(-1.2%,-0.8%,0)}100%{transform:scale(1.11) translate3d(1.4%,1%,0)}}
    @keyframes bgBandsSweep{0%{transform:translate3d(-12%,0,0) scale(1.08)}50%{transform:translate3d(0,-2%,0) scale(1.11)}100%{transform:translate3d(12%,0,0) scale(1.08)}}
    @keyframes bgBandsSweepAlt{0%{transform:translate3d(10%,0,0) scale(1.05)}50%{transform:translate3d(0,2%,0) scale(1.08)}100%{transform:translate3d(-10%,0,0) scale(1.05)}}

    .sideNav{position:fixed;top:50%;transform:translateY(-50%);z-index:11;width:64px;height:64px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);backdrop-filter:blur(12px);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 18px 50px rgba(0,0,0,.22);transition:opacity .22s ease, transform .22s ease, background .14s ease;will-change:transform, opacity}
    .sideNav:hover{background:rgba(0,0,0,.32);transform:translateY(-50%) scale(1.03)}
    .sideNav:active{transform:translateY(-50%) scale(.98)}
    .sideNav:disabled{opacity:.35;cursor:not-allowed}
    .sideNav i{font-size:20px}
    .sideNav--left{left:18px}
    .sideNav--right{right:18px}

    :root{ --tabs-h: 86px; }

    /* ------------------------------------------------------------------
       Bottom glass dock (like the screenshot), but keeping the original
       feature tabs: volume, derniers titres, menu, site, infos.
    ------------------------------------------------------------------ */
    .dockBar.dockBar--tabs{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:13;

      width:100%; /* collé aux bords de la fenêtre */
      height:var(--tabs-h);
      padding:12px calc(12px + env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom));

      border-radius:0; /* plus d'arrondi */
      border:0;
      background:rgba(0,0,0,.28);
      backdrop-filter:blur(18px);
      box-shadow:0 -14px 40px rgba(0,0,0,.32);

      display:flex;
      align-items:center;
      /* IMPORTANT: keep overflow visible so the volume popover can open above the bar */
      overflow:visible;
    }

    /* Effet lumineux sur la bordure haute (comme ta capture) */
    .dockBar.dockBar--tabs::before{
      content:"";
      position:absolute;
      left:-12%;
      right:-12%;
      top:0;
      height:1px;
      background:linear-gradient(90deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.44),
        rgba(255,255,255,.18),
        rgba(255,255,255,.44),
        rgba(255,255,255,0)
      );
      box-shadow:
        0 0 10px rgba(255,255,255,.14),
        0 0 20px rgba(255,255,255,.05);
      opacity:.62;
      pointer-events:none;
    }

    .dockBar.dockBar--tabs::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:0;
      height:14px;
      background:linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,0));
      opacity:.35;
      pointer-events:none;
    }


    .dockTabs{
      width:100%;
      max-width:960px; /* keep buttons centered like before */
      margin:0 auto;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:6px;
      overflow:visible;
    }

    .dockTab{
      appearance:none;
      border:0;
      background:transparent;
      color:rgba(255,255,255,.80);
      cursor:pointer;
      flex:1 1 0;

      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:6px;

      height:100%;
      min-width:0;
      border-radius:18px;
      transition:background .14s ease, transform .14s ease, color .14s ease;
      user-select:none;
      padding:6px 6px;
    }
    .dockTab i{font-size:18px;line-height:1}
    .dockTab span{
      font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      font-weight:600;
      font-size:12px;
      letter-spacing:.15px;
      line-height:1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:100%;
    }

    .dockTab:hover{background:rgba(255,255,255,.08)}
    .dockTab:active{transform:scale(.98)}

    /* Slight accent on hover to mimic the "active" feel in the screenshot */
    .dockTab:hover i{color:rgba(255,255,255,.95)}

    /* Volume needs to behave like a tab but also anchor the popover */
    .dockItem.volWrap{position:relative;flex:1 1 0;height:100%;display:flex}
    .dockItem.volWrap .dockTab{width:100%}

    .dockLeft{display:flex;align-items:center;gap:10px}

    .volWrap{position:relative;display:flex;align-items:center}
    .volPopover{
      position:absolute;
      left:50%;
      bottom:58px;
      transform:translateX(-50%) translateY(8px);
      opacity:0;
      pointer-events:none;
      transition:opacity .16s ease, transform .16s ease;

      width:78px;
      padding:12px 10px 10px;
      border-radius:18px;

      border:1px solid rgba(255,255,255,.14);
      background:rgba(10,10,14,.48);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);

      box-shadow:
        0 24px 70px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.10);

      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:10px;

      overflow:visible;
    }
    .volWrap:hover .volPopover,
    .volWrap:focus-within .volPopover{
      opacity:1;
      pointer-events:auto;
      transform:translateX(-50%) translateY(0);
    }

    .volPopover::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:-7px;
      width:14px;height:14px;
      background:rgba(10,10,14,.48);
      border-right:1px solid rgba(255,255,255,.14);
      border-bottom:1px solid rgba(255,255,255,.14);
      transform:translateX(-50%) rotate(45deg);
      -webkit-backdrop-filter:blur(16px);
      backdrop-filter:blur(16px);
    }

    .volSliderBox{width:54px;height:150px;display:flex;align-items:center;justify-content:center}
    .volSlider{width:150px;height:22px;transform:rotate(-90deg);transform-origin:center;accent-color:#fff;cursor:pointer}
    .volPct{font-size:12px;font-weight:700;color:rgba(255,255,255,.86);line-height:1;user-select:none}

    .volSlider::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:rgba(255,255,255,.20)}
    .volSlider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:999px;background:#fff;margin-top:-5px;box-shadow:0 8px 18px rgba(0,0,0,.35)}
    .volSlider::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.20)}
    .volSlider::-moz-range-thumb{width:16px;height:16px;border-radius:999px;background:#fff;border:none;box-shadow:0 8px 18px rgba(0,0,0,.35)}

    #infoModal{display:none;position:fixed;inset:0;z-index:50}
    #infoBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
    #infoBox{position:relative;height:100%;display:grid;place-items:center;padding:20px}
    #infoBox > .loading{
      padding:16px 18px;border-radius:18px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(10,10,14,.52);
      backdrop-filter:blur(18px);
      font-weight:800;opacity:.9
    }

    
    /* Track info modal (Deezer) */
    .trkModal{
      width:min(980px, calc(100vw - 40px));
      border-radius:26px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(8,10,14,.58);
      backdrop-filter:blur(22px);
      box-shadow:0 26px 70px rgba(0,0,0,.55);
      padding:24px 24px 20px;
      position:relative;
    }
    .trkClose{
      position:absolute;top:16px;right:16px;
      width:42px;height:42px;border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
      color:#fff;cursor:pointer;
      display:grid;place-items:center;z-index:3;
    }
    .trkHead{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:flex-start; padding-right:64px}
    .trkArt{
      width:118px;height:118px;border-radius:16px;overflow:hidden;flex:0 0 118px;
      background:rgba(255,255,255,.06);
      box-shadow:0 10px 28px rgba(0,0,0,.35);
    }
    .trkArt img{width:100%;height:100%;object-fit:cover;display:block}
    .trkMeta{min-width:0;flex:1}
    .trkArtist{font-size:28px;line-height:1.08;font-weight:800;letter-spacing:-.01em}
    .trkTitle{margin-top:4px;font-size:16px;opacity:.82;font-weight:600}
    .trkGrid{margin-top:12px;display:grid;gap:6px;max-width:420px}
    .trkRow{display:flex;gap:10px}
    .trkLab{width:76px;opacity:.62;font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.08em}
    .trkVal{flex:1;min-width:0;opacity:.92;font-weight:600}
    .trkHead{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:start; padding-right:64px}
    .trkBtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
    .trkBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
      min-width:122px;height:44px;padding:0 16px;border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
      color:#fff;text-decoration:none;font-weight:700;font-size:13px;line-height:1;white-space:nowrap;
      transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease}
    .trkBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);box-shadow:0 8px 20px rgba(0,0,0,.22)}
    .trkBtn i{font-size:16px;opacity:.98}
    .trkBtn span{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
    .trkAside{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;grid-column:2; margin-top:6px}
    .trkFoot{display:flex;justify-content:flex-start}
    .trkOpen{display:inline-flex;gap:8px;align-items:center;color:#fff;font-weight:700;opacity:.94;text-decoration:none;font-size:13px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
    .trkOpen:hover{opacity:1;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
    @media (max-width: 760px){
      #infoBox{padding:14px}
      .trkModal{
        width:min(100vw - 20px, 560px);
        max-height:min(86vh, 720px);
        overflow:auto;
        padding:18px 16px 16px;
        border-radius:24px;
      }
      .trkClose{
        top:12px;right:12px;
        width:48px;height:48px;
        background:rgba(255,255,255,.07);
      }
      .trkHead{
        grid-template-columns:88px minmax(0,1fr);
        gap:14px;
        padding-right:58px;
        align-items:center;
      }
      .trkArt{
        width:88px;height:88px;flex-basis:88px;
        border-radius:18px;
      }
      .trkMeta{display:flex;flex-direction:column;justify-content:center;min-height:88px}
      .trkArtist{font-size:20px;line-height:1.02}
      .trkTitle{margin-top:6px;font-size:15px;line-height:1.2}
      .trkGrid{
        margin-top:18px;
        max-width:none;
        width:100%;
        gap:10px;
      }
      .trkRow{
        display:grid;
        grid-template-columns:78px minmax(0,1fr);
        gap:10px;
        align-items:start;
      }
      .trkLab{width:auto;font-size:11px;opacity:.58}
      .trkVal{line-height:1.35;word-break:break-word}
      .trkAside{
        grid-column:1 / -1;
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-top:18px;
      }
      .trkBtns{
        width:100%;
        max-width:100%;
        margin:0 auto;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items:center;
        gap:10px;
        overflow:visible;
        padding:2px 0 0;
        box-sizing:border-box;
      }
      .trkBtn{min-width:132px;height:48px;flex:0 1 auto;padding:0 14px;font-size:13px}
      .trkBtn i{font-size:18px}
      .trkFoot{justify-content:center}
    }
    @media (max-width: 420px){
      #infoBox{padding:10px}
      .trkModal{
        width:calc(100vw - 16px);
        max-height:calc(100vh - 84px);
        padding:16px 14px 14px;
        border-radius:22px;
      }
      .trkHead{
        grid-template-columns:72px minmax(0,1fr);
        gap:12px;
        padding-right:52px;
      }
      .trkArt{width:72px;height:72px;flex-basis:72px;border-radius:16px}
      .trkMeta{min-height:72px}
      .trkArtist{font-size:18px}
      .trkTitle{font-size:14px}
      .trkGrid{margin-top:16px;gap:8px}
      .trkRow{grid-template-columns:68px minmax(0,1fr);gap:8px}
      .trkBtns{gap:8px;padding-left:0;padding-right:0}
      .trkBtn{min-width:120px;height:46px;padding:0 12px;font-size:12px}
      .trkBtn i{font-size:17px}
      .trkClose{width:46px;height:46px}
    }

    /* Track full page (musique.php) */
    .trackPage{min-height:100vh}
    .trackTop{
      max-width:1160px;margin:0 auto;
      padding:18px 18px 10px;
      display:flex;align-items:center;justify-content:space-between;
    }
    .trackPill{
      display:inline-flex;align-items:center;gap:10px;
      padding:9px 12px;border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      color:#fff;text-decoration:none;
      font-weight:600;
    }
    .trackPill i{opacity:.9}
    .trackCenter{display:flex;justify-content:center;flex:1}
    .trackLogo{height:30px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
    .trackRight{display:flex;gap:10px;align-items:center}

    /* Track full page header responsive */
    @media (max-width: 720px){
      .trackTop{
        display:grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "center center"
          "left right";
        gap:10px;
        padding:14px 14px 8px;
        align-items:center;
      }
      .trackCenter{grid-area:center;display:flex;justify-content:center}
      .trackLogo{height:44px}
      .trackLeft{grid-area:left;display:flex;align-items:center}
      .trackRight{
        grid-area:right;
        display:flex;
        gap:8px;
        align-items:center;
        justify-content:flex-end;
        flex-wrap:nowrap;
      }
      .trackPill{
        padding:8px 10px;
        gap:8px;
        font-size:13px;
      }
      #btnBackToPlayer{white-space:nowrap}
    }
    @media (max-width: 420px){
      .trackLogo{height:40px}
      .trackRight{flex-wrap:wrap;justify-content:flex-end}
    }
    @media (max-width: 420px){
      .trackTop{grid-template-columns:1fr;grid-template-areas:"left" "right" "center";}
      .trackRight{justify-self:start}
      .trackPill{width:fit-content}
    }

    .trackWrap{max-width:1160px;margin:0 auto;padding:10px 18px 28px}
    .trackHero{
      border-radius:22px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(10,10,14,.55);
      backdrop-filter:blur(18px);
      box-shadow:0 26px 70px rgba(0,0,0,.55);
      overflow:hidden;
      padding:22px;
      display:flex;gap:22px;align-items:center;
    }
    .trackCover{width:150px;height:150px;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.06);flex:0 0 150px}
    .trackCover img{width:100%;height:100%;object-fit:cover;display:block}
    .trackMain{min-width:0;flex:1}
    .trackMain h1,.trackMain h2{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    /* Typography tuned to match OpenSky (less bold overall) */
    .trackMain h1{margin:0;font-size:36px;line-height:1.05;font-weight:800;letter-spacing:-.01em}
    .trackMain h2{margin:6px 0 0;font-size:15px;opacity:.9;font-weight:500}
    .trackMetaRow{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px}
    .trackChip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);font-weight:600;opacity:.95}
    .trackLinks{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
    .trackLinkIcon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;text-decoration:none;transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease}
    .trackLinkIcon:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);box-shadow:0 8px 20px rgba(0,0,0,.22)}
    .trackLinkIcon i{font-size:17px;opacity:.98}
    .trackGrid2{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .trackGrid2 > .trackCard{min-width:0}
    .trackCard{border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(10,10,14,.55);backdrop-filter:blur(16px);box-shadow:0 22px 60px rgba(0,0,0,.45);padding:16px}
    .trackCardTitle{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em;margin-bottom:12px}
    .trackCardTitle i{opacity:.9}
    .trackAudio{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);min-width:0}
    .trackAudio audio{width:100%}

    /* OpenSky-like preview player */
    .previewPlayer{width:100%;display:flex;align-items:center;gap:14px}
    .ppPlay{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);display:grid;place-items:center;color:#fff;cursor:pointer}
    .ppPlay i{font-size:14px}
    .ppBody{min-width:0;flex:1}
    .ppTitle{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ppLabel{margin-top:2px;font-size:12px;opacity:.75;font-weight:500}
    .ppRange{margin-top:10px;width:100%}
    .ppTimes{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;opacity:.75;font-weight:500}
    .trackClip{aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
    .trackClip iframe{width:100%;height:100%;border:0}
    @media (max-width: 980px){
      .trackGrid2{grid-template-columns:1fr}
      .trackHero{flex-direction:column;align-items:stretch}
      .trackCover{width:140px;height:140px;flex-basis:140px}
    }


#osPopup{display:none;position:fixed;inset:0;z-index:9999}
    #osPopup.is-open{display:block}

    #osPopupBackdrop{
      position:absolute;inset:0;
      background:rgba(0,0,0,.72);
      opacity:0;
      transition:opacity .18s ease;
    }
    #osPopup.is-open #osPopupBackdrop{opacity:1}
    #osPopup.is-leaving #osPopupBackdrop{opacity:0}

    #osPopupBox{
      position:relative;height:100%;
      display:grid;place-items:center;
      padding:18px;
    }

    .osPopupCard{
      width:min(760px, 94vw);
      border-radius:22px;
      background:rgba(0,0,0,.55);
      border:1px solid rgba(255,255,255,.10);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      box-shadow:0 28px 90px rgba(0,0,0,.60);
      overflow:hidden;

      transform:translateY(14px) scale(.985);
      opacity:0;
      transition:opacity .18s ease, transform .18s ease;
    }
    #osPopup.is-open .osPopupCard{opacity:1;transform:translateY(0) scale(1)}
    #osPopup.is-leaving .osPopupCard{opacity:0;transform:translateY(14px) scale(.985)}

    .osPopupMedia{width:100%;aspect-ratio: 16 / 8; background:rgba(255,255,255,.06); overflow:hidden}
    .osPopupMedia img{width:100%;height:100%;object-fit:cover;display:block}
    .osPopupHead{padding:16px 16px 0}
    .osPopupTitle{
      margin:0;
      font-size:20px;
      font-weight:800;
      letter-spacing:.2px;
      text-shadow:0 1px 25px rgba(0,0,0,.25);
      text-align:center;
    }
    
    .osPopupCard.no-media .osPopupHead{padding-top:22px}
    .osPopupCard.no-media .osPopupTitle{text-align:center}
    .osPopupBody{text-align:center}

.osPopupBody{padding:0px 16px 5px;color:rgba(255,255,255,.82);font-size:16px;line-height:1.45}
    .osPopupBody a{color:#fff;text-decoration:underline;text-underline-offset:3px}
    .osPopupActions{
      display:flex;align-items:center;justify-content:center;gap:10px;
      padding:0 16px 20px;
    }
    .osPopupBtn{
      font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.10);
      color:#fff;
      font-weight:700;
      border-radius:999px;
      padding:10px 14px;
      cursor:pointer;
      transition:transform .14s ease, background .14s ease;
    }
    .osPopupBtn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
    .osPopupBtn:active{transform:translateY(0)}
    .osPopupBtn--primary{border-color:rgba(255,255,255,.22);background:rgba(0,112,192,.20)}
    .osPopupBtn--primary:hover{background:rgba(0,112,192,.28)}
    .osPopupClose{
      position:absolute;top:14px;right:14px;
      width:38px;height:38px;border-radius:999px;
      display:grid;place-items:center;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(0,0,0,.35);
      color:#fff;cursor:pointer;
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      transition:transform .15s ease, background .15s ease;
    }

    body.cine-ui-off #prevBtn,
    body.cine-ui-off #nextBtn,
    body.cine-ui-off .dockBar,
    body.cine-ui-off .socialTopLeft,
    body.cine-ui-off .webtvToggle{
      opacity:0;
      pointer-events:none;
    }

    /*
      Quand l'UI est masquée (mode cinéma), on enlève aussi la réserve
      en bas (var(--tabs-h)) afin de garder cover + titrage centrés.
    */
    body.cine-ui-off{ --tabs-h: 0px; }

    body.cine-ui-off #prevBtn{ transform:translateY(-50%) translateX(-46px); }
    body.cine-ui-off #nextBtn{ transform:translateY(-50%) translateX( 46px); }
    body.cine-ui-off .dockBar{ transform:translateX(-50%) translateY(46px); }

    body.cine-ui-off .playerRow,
    body.cine-ui-off .miniCover,
    body.cine-ui-off .meta,
    body.cine-ui-off .artist,
    body.cine-ui-off .title{
      animation:none !important;
      transform:none !important;
      transition:none !important;
      will-change:auto;
    }

    #btnPlay{
      transition:opacity .22s ease, transform .22s ease, background .18s ease;
      will-change:opacity, transform;
    }
    body.cine-ui-off #btnPlay{
      opacity:0;
      pointer-events:none;
      transform:translate(-50%,-50%) scale(.92);
    }

    body.webtv-mode .brandLogo{top:16px;left:auto;right:22px;transform:none;z-index:12;transition:top .42s ease,left .42s ease,right .42s ease,transform .42s ease,opacity .28s ease}
    body.webtv-mode .brandLogo img{height:17px !important;max-height:17px !important;transition:height .42s ease,max-height .42s ease,filter .42s ease}
    body.webtv-mode .playerCenter{top:auto;left:28px;right:auto;bottom:28px;transform:none;justify-content:flex-start;padding:0;transition:left .46s ease,bottom .46s ease,transform .46s ease,top .46s ease,right .46s ease}
    body.webtv-mode .playerRow{align-items:center;gap:12px;max-width:min(640px,calc(100vw - 56px));padding:14px 18px;border-radius:24px;background:linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.34));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 45px rgba(0,0,0,.20);transition:gap .42s ease,padding .42s ease,max-width .42s ease,background .42s ease,box-shadow .42s ease,border-radius .42s ease,transform .42s ease,opacity .42s ease}
    body.webtv-mode .miniCover{width:84px;height:84px;flex-basis:84px;border-radius:16px;transition:width .42s ease,height .42s ease,flex-basis .42s ease,border-radius .42s ease,box-shadow .42s ease}
    body.webtv-mode .play--mini{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(.94)}
    body.webtv-mode .meta{max-width:min(480px,calc(100vw - 180px));height:84px;min-height:84px;display:flex;flex-direction:column;justify-content:center;align-self:center;gap:0;transition:max-width .42s ease,height .42s ease,min-height .42s ease,transform .42s ease,opacity .42s ease}
    body.webtv-mode .artist{font-size:28px;line-height:1.02;margin:0;display:flex;align-items:flex-end;transition:font-size .42s ease,transform .42s ease,opacity .42s ease}
    body.webtv-mode .title{font-size:18px;line-height:1.05;margin:0;display:flex;align-items:flex-start;transition:font-size .42s ease,transform .42s ease,opacity .42s ease}
    body.webtv-mode .chip{display:none !important;opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
    body.webtv-mode .bg__overlay,
    body.webtv-mode .contrastFilter,
    body.webtv-mode .coverOverlay__shade{opacity:0 !important;background:transparent !important}
    body.webtv-mode .dockBar,
    body.webtv-mode .socialTopLeft,
    body.webtv-mode .poweredBy{opacity:0;pointer-events:none;transform:translateY(22px);transition:opacity .34s ease,transform .34s ease}
    body.webtv-mode .webtvToggle{left:22px;top:16px}
    body.webtv-mode .webtvToggle__icon--tv{display:none}
    body.webtv-mode .webtvToggle__icon--radio{display:inline-block}

    body.webtv-mode .cover,
    body.webtv-mode .meta,
    body.webtv-mode .miniCover,
    body.webtv-mode .playerRow,
    body.webtv-mode .playerCenter,
    body.webtv-mode .brandLogo,
    body.webtv-mode .dockBar,
    body.webtv-mode .socialTopLeft,
    body.webtv-mode .poweredBy{will-change:transform, opacity}

    @media (max-width: 1024px){
      .webtvToggle{display:none !important}
      body.webtv-mode .brandLogo{top:50px;left:50%;right:auto;transform:translateX(-50%)}
      body.webtv-mode .playerCenter{top:50%;left:0;right:0;bottom:auto;transform:translateY(-50%);justify-content:center;padding:0 18px}
      body.webtv-mode .playerRow{background:none;box-shadow:none;padding:0;max-width:min(1000px,92vw)}
      body.webtv-mode .miniCover{width:210px;height:210px;flex-basis:210px;border-radius:22px}
      body.webtv-mode .meta{max-width:clamp(260px,52vw,720px);min-height:210px}
      body.webtv-mode .chip{opacity:1;transform:none;pointer-events:auto}
      body.webtv-mode .dockBar,body.webtv-mode .socialTopLeft,body.webtv-mode .poweredBy{opacity:1;pointer-events:auto;transform:none}
    }

    body.webtv-switching .playerCenter,
    body.webtv-switching .playerRow,
    body.webtv-switching .brandLogo,
    body.webtv-switching .dockBar,
    body.webtv-switching .socialTopLeft,
    body.webtv-switching .poweredBy,
    body.webtv-switching .chip,
    body.webtv-switching .miniCover,
    body.webtv-switching .meta{animation:webtvModeMorph .52s cubic-bezier(.22,.8,.25,1)}
    @keyframes webtvModeMorph{
      0%{opacity:.2;transform:translateY(12px) scale(.985)}
      100%{opacity:1;transform:none}
    }
    @media (prefers-reduced-motion: reduce){
      .webtvToggle, body.webtv-mode .playerCenter, body.webtv-mode .playerRow, body.webtv-mode .miniCover, body.webtv-mode .meta, body.webtv-mode .artist, body.webtv-mode .title, body.webtv-mode .brandLogo, body.webtv-mode .dockBar, body.webtv-mode .socialTopLeft, body.webtv-mode .poweredBy{transition:none !important}
    }

    @media (max-width:640px){
      body{overflow:hidden}
      .wrap{padding:0}
      .playerRow{flex-direction:column;gap:14px;align-items:center;text-align:center}
      .miniCover{width:230px;height:230px;flex-basis:230px}
      .meta{text-align:center;max-width:92vw}
      .chip{margin:0 auto 10px}
      .artist{font-size:28px;max-width:92vw}
      .title{font-size:18px;max-width:92vw}

      #ytPlayer,
      .ytBgPoster{
        width:max(156vw, calc((var(--vh, 1vh) * 100) * 2.45));
        height:max(calc(var(--vh, 1vh) * 156), 92vw);
        min-width:156vw;
        min-height:calc(var(--vh, 1vh) * 156);
      }

      /* Mobile: forcer le clip en plein écran (sans "barres") */
      .yt{inset:0}
      #ytWrap{inset:-14%;transform:scale(1.34)}

      .sideNav{width:56px;height:56px}
      .sideNav--left{left:10px}
      .sideNav--right{right:10px}
      .brandLogo img{height:40px}

      .dockBar.dockBar--tabs{left:0;right:0;padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right))}
      .dockTab span{font-size:11px}

      .osPopupMedia{aspect-ratio: 16 / 9}
    }
  
.ytBgWrap{
  position: fixed;
  inset: 0;
  /* Keep YouTube background UNDER all dark overlays (contrastFilter/bg overlays)
     Otherwise the video appears "without black filter" on some setups. */
  z-index: -5;
  pointer-events: none;
  overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* Bouton menu (3 traits) + modal liens                                        */
/* -------------------------------------------------------------------------- */
.menuLinks{position:fixed;inset:0;z-index:80;display:none}
.menuLinks.is-open{display:flex;align-items:stretch;justify-content:stretch}
.menuLinks__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88)}
.menuLinks__box{
  position:relative;
  width:100vw;
  height:calc(var(--vh,1vh)*100);
  border-radius:0;
  border:0;
  background:rgba(18,18,18,.86);
  backdrop-filter:blur(16px);
  box-shadow:none;
  padding:22px 18px 18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.menuLinks__close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.10);
  color:#fff;
  display:grid;place-items:center;
  cursor:pointer;
  z-index:2;
}
.menuLinks__close:hover{background:rgba(255,255,255,.14)}
.menuLinks__title{display:none}
.menuLinks__list{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;padding:0 6px 6px}
.menuLinks__item{display:block;color:#fff;text-decoration:none;font-weight:300;font-size:22px;letter-spacing:.2px;text-align:center;padding:8px 10px;}
.menuLinks__item:hover{text-decoration:underline;}
.menuLinks__label{font-weight:inherit}

/* Flux cards */
.fluxGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  align-items:stretch;
  gap:14px;
  width:100%;
  max-width:980px;
  padding:8px 4px 12px;
}
.fluxCard{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:92px;
  padding:12px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.08);
  box-shadow:0 12px 36px rgba(0,0,0,.18);
  text-decoration:none;
  color:#fff;
  transition:transform .14s ease, background .14s ease, border-color .14s ease;
}
.fluxCard:hover,.fluxCard:focus{
  transform:translateY(-1px);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
  text-decoration:none;
}
.fluxCard__cover{
  flex:0 0 68px;
  width:68px;
  height:68px;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
  display:grid;
  place-items:center;
}
.fluxCard__cover img{width:100%;height:100%;object-fit:cover;display:block}
.fluxCard__cover i{font-size:24px;opacity:.92}
.fluxCard__meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.fluxCard__title{
  color:#fff;
  font-size:17px;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fluxCard__now{
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-weight:600;
  line-height:1.28;
  white-space:pre-line;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.fluxCard__now.is-loading{color:rgba(255,255,255,.54)}
@media (max-width:640px){
  .fluxGrid{grid-template-columns:1fr;gap:12px;padding:8px 0 12px}
  .fluxCard{padding:11px;min-height:86px;border-radius:18px}
  .fluxCard__cover{flex-basis:60px;width:60px;height:60px;border-radius:16px}
  .fluxCard__title{font-size:16px}
  .fluxCard__now{font-size:12px}
}

/* =========================
   Historique des titres (modal)
   ========================= */
.historyModal{position:fixed;inset:0;z-index:85;display:none}
.historyModal.is-open{display:flex;align-items:stretch;justify-content:stretch}
.historyModal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88)}
.historyModal__box{position:relative;width:100vw;height:calc(var(--vh,1vh)*100);border-radius:0;border:0;background:rgba(18,18,18,.86);backdrop-filter:blur(16px);box-shadow:none;padding:22px 18px 18px;overflow:hidden;display:flex;flex-direction:column}
.historyModal__close{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .14s ease}
.historyModal__close:hover{background:rgba(255,255,255,.14)}
.historyModal__head{padding:2px 6px 12px}
.historyModal__title{color:#fff;font-weight:700;font-size:18px;letter-spacing:.2px}
.historyModal__sub{color:rgba(255,255,255,.68);font-weight:400;font-size:12px;margin-top:4px}
.historyModal__list{
  flex:1;
  min-height:0;
  display:grid;
  /* Desktop like reference: 5 colonnes visibles */
  grid-template-columns:repeat(5, minmax(0, 1fr));
  /* un peu plus compact pour rapprocher les lignes */
  gap:16px;
  padding:4px 6px 14px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  width:100%;
}

@media (min-width:1200px){
  /* 5 colonnes x 4 lignes (20 titres) comme sur la capture desktop */
  .historyModal__list{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    /* Laisse la hauteur se calculer naturellement (pas d'effet "cards" étirées) */
  }
}


/* Card grid layout (cover + meta) */
.historyCard{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-decoration:none;
  /* Pas de "carte" : uniquement la vignette + texte (comme la capture) */
  padding:0;
  border-radius:0;
  border:0;
  background:transparent;
}
.historyCard:hover,.historyCard:focus{ text-decoration:none; }
.historyCard *{ text-decoration:none; }
.historyCard__cover{
  width:100%;
  /* pochettes un peu plus hautes (comme la capture) tout en gardant 20 titres visibles */
  height:clamp(104px, 13vh, 142px);
  border-radius:18px;
  overflow:hidden;
  border:0;
  background:rgba(0,0,0,.18);
}
.historyCard__cover img{width:100%;height:100%;object-fit:cover;display:block}
.historyCard__meta{min-width:0;display:flex;flex-direction:column;gap:3px;padding:0 2px}
.historyCard__title{
  color:#fff;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  /* pas de coupe : on affiche le titre en entier (retour à la ligne) */
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.historyCard__artist{
  color:rgba(255,255,255,.70);
  font-weight:500;
  font-size:12px;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.historyCard__when{
  color:rgba(255,255,255,.55);
  font-weight:500;
  font-size:11px;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:760px){
  .historyModal__list{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:18px}
}
@media (max-width:520px){
  .historyModal__box{padding:18px 14px 14px}
  .historyModal__list{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px}
  .historyCard__cover{border-radius:16px}
  .historyCard__title{font-size:12px}
  .historyCard__artist{font-size:11px}
  .historyCard__when{font-size:10px}
}
@media (max-width:380px){
  .historyModal__list{grid-template-columns:1fr}
}


@media (max-width:520px){
  .menuLinks__box{padding:18px 14px}
  .menuLinks__close{top:14px;right:14px}
  .menuLinks__item{font-size:18px}
}
@media (prefers-reduced-motion: reduce){
      .bg::before,.bg::after,.bgFx::before,.bgFx::after,.bg__overlay::before,.bg__overlay::after,.coverOverlay::before,.coverOverlay__shade::before,.coverOverlay__shade::after{animation:none !important}

  .bg::before,.bg::after,.bgFx::before,.bgFx::after,.coverOverlay::before{animation:none !important}
}

.ytBgWrap.hidden{ display:none; }
.ytBgPoster{
  position:absolute;
  top:50%;
  left:50%;
  width:120vw;
  height:120vh;
  transform:translate(-50%,-50%);
  object-fit:cover;
  filter:saturate(1.08) contrast(1.04);
}
/* dark overlay already exists in design; keep yt under it */

/* Track page: responsive clip iframe */
.clipFrame{position:relative;width:100%;padding-top:56.25%;border-radius:18px;overflow:hidden}
.clipFrame iframe{position:absolute;inset:0;width:100%;height:100%;}


/* Powered by (marque blanche) */
.poweredBy{
  position:fixed;
  left:10px;
  top:50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  z-index: 45;
  padding:10px 8px;
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.8);
  font-weight:800;
  font-size:12px;
  letter-spacing:.02em;
}
.poweredBy a{color:#fff;text-decoration:none}
.poweredBy a:hover{text-decoration:underline}
.poweredBy span{opacity:.75;font-weight:700}
@media (max-width: 720px){
  .poweredBy{left:6px;font-size:11px;padding:8px 6px}
}



/* Musique: dernières diffusions */
.lastPlays{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.lastPlaysTitle{font-weight:700;font-size:13px;opacity:.9;margin-bottom:10px;display:flex;gap:8px;align-items:center}
.lastPlaysList{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.lpItem{display:inline-flex;align-items:center;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:12px;opacity:.92}


    .osPopupClose:hover{transform:scale(1.04);background:rgba(0,0,0,.45)}


/* --- Popup title centered fix --- */
.os-popup-title,
.popup-title,
.os-popup h2 {
    text-align: center !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}