: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:-6%;z-index:-4;background:#000;display:none}
    .yt.is-visible{display:block}
    #ytWrap{position:absolute;inset:0;opacity:.92;transform:scale(1.06);filter:saturate(1.08) contrast(1.08);transition:opacity .22s ease}
    #ytPlayer{position:absolute;top:50%;left:50%;width:140vw;height:78.75vw;min-height:140vh;transform:translate(-50%,-50%);pointer-events:none}

    .bg{position:fixed;inset:-6%;z-index:-3;pointer-events:none}
    .bg.is-hidden{display:none}
    .bg__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) saturate(1.15) contrast(1.1);transform:scale(1.06);opacity:.52;transition:opacity .45s ease,transform .45s ease}
    .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}

    .coverOverlay{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;transition:opacity .18s ease}
    .coverOverlay.is-on{opacity:1}
    .coverOverlay__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .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}

    .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));}

    /* 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 propre + glow doux) */
    .chip{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      border:1px solid rgba(255,210,120,.26);
      background:rgba(0,0,0,.22);
      backdrop-filter:blur(12px);
      color:rgba(255,255,255,.82);
      font-weight:800;
      font-size:11px;
      letter-spacing:.45px;
      text-transform:uppercase;
      user-select:none;
      margin-bottom:10px;
      width:fit-content;
      overflow:hidden;
      box-shadow:
        0 0 0 1px rgba(255,210,120,.10) inset,
        0 0 18px rgba(255,205,120,.14);
    }
    /* Halo lumineux (inspiré de la bordure du bandeau) */
    .chip::before{
      content:"";
      position:absolute;
      inset:-6px;
      border-radius:999px;
      background:linear-gradient(90deg,
        rgba(255,255,255,0),
        rgba(255,210,120,.52),
        rgba(255,255,255,.18),
        rgba(255,210,120,.52),
        rgba(255,255,255,0)
      );
      filter:blur(10px);
      opacity:.28;
      pointer-events:none;
    }
    /* Petit highlight interne */
    .chip::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:999px;
      background:linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,0));
      opacity:.22;
      pointer-events:none;
    }

    .chip .dot{
      width:7px;height:7px;border-radius:50%;
      background:#ff2b2b;
      box-shadow:0 0 0 6px rgba(255,43,43,.16),0 0 26px rgba(255,43,43,.28);
      animation:livePulse 1.25s ease-in-out infinite;
    }
    @keyframes livePulse{
      0%{transform:scale(1);box-shadow:0 0 0 6px rgba(255,43,43,.14),0 0 26px rgba(255,43,43,.26)}
      60%{transform:scale(1.18);box-shadow:0 0 0 10px rgba(255,43,43,.08),0 0 34px rgba(255,43,43,.22)}
      100%{transform:scale(1);box-shadow:0 0 0 6px rgba(255,43,43,.14),0 0 26px rgba(255,43,43,.26)}
    }
    .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:pop .22s ease}
    @keyframes pop{from{transform:translateY(2px);opacity:.85}to{transform:none;opacity:1}}

    .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,210,120,.55),
        rgba(255,255,255,.22),
        rgba(255,210,120,.55),
        rgba(255,255,255,0)
      );
      box-shadow:
        0 0 12px rgba(255,205,120,.26),
        0 0 26px rgba(255,205,120,.10);
      opacity:.65;
      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:22px 22px 18px;
      position:relative;
    }
    .trkClose{
      position:absolute;top:14px;right:14px;
      width:38px;height:38px;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;
    }
    .trkHead{display:flex;gap:18px;align-items:flex-start}
    .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}
    .trkBtns{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
    .trkBtn{display:inline-flex;align-items:center;gap:10px;
      padding:9px 14px;border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      color:#fff;text-decoration:none;
      font-weight:700;font-size:13px;
      transition:transform .15s ease, background .15s ease, border-color .15s ease}
    .trkBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20)}
    .trkBtn i{font-size:13px;opacity:.95}
    .trkFoot{margin-top:14px;display:flex;justify-content:flex-end}
    .trkOpen{position:absolute;right:18px;bottom:16px;display:inline-flex;gap:8px;align-items:center;color:#eaeaea;font-weight:700;opacity:.9;text-decoration:none;font-size:13px}
    .trkOpen:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
    @media (max-width: 640px){
      .trkHead{flex-direction:column;align-items:stretch}
      .trkArt{width:96px;height:96px;flex-basis:96px}
      .trkArtist{font-size:22px}

      /* Mobile: avoid the "Ouvrir la page" link sticking to the buttons */
      .trkFoot{margin-top:18px}
      .trkOpen{position:static;right:auto;bottom:auto;padding-top:10px}
    }

    /* 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:14px;display:flex;flex-wrap:wrap;gap:10px}
    .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{
      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); }

    @keyframes osPulse {
      0%   { transform:scale(1) }
      50%  { transform:scale(1.015) }
      100% { transform:scale(1) }
    }
    body.cine-ui-off .playerRow{
      animation:osPulse 3.8s ease-in-out infinite;
      will-change:transform;
    }

    #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);
    }

    @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{
        height:calc(var(--vh, 1vh) * 100);
        width:calc((var(--vh, 1vh) * 100) * (16 / 9));
        min-height:calc(var(--vh, 1vh) * 100);
        min-width:100vw;
      }

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

      .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}

/* =========================
   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}
}
.ytBgWrap.hidden{ display:none; }
.ytBgFrame{
  position:absolute;
  top:50%;
  left:50%;
  width:120vw;
  height:120vh;
  transform:translate(-50%,-50%);
  filter: blur(0px);
}
/* 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;
}