* { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #000;
      color: var(--wc-text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow-x: hidden;
    }

    .bubble {
      position: fixed;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
      will-change: transform;
    }

    main {
      flex: 1;
      max-width: 960px;
      width: 100%;
      margin: 0 auto;
      padding: 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .player-wrap {
      background: #030810;
      border: 1px solid rgba(26, 45, 74, 0.6);
      border-radius: var(--wc-r-m);
      overflow: hidden;
      position: relative;
    }

    video {
      width: 100%;
      aspect-ratio: 16/9;
      display: block;
      background: #020609;
    }

    .player-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: rgba(3, 8, 16, 0.9);
      pointer-events: none;
    }
    .player-overlay.hidden { display: none; }

    .overlay-icon { color: var(--wc-bord-nuit); }
    .overlay-msg  { font-size: 15px; color: #3a5070; font-weight: 500; }
    .overlay-sub  { font-size: 12px; color: #1e3050; }

    .spin {
      width: 32px; height: 32px;
      border: 3px solid var(--wc-bord-nuit);
      border-top-color: var(--wc-bleu-vif);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .status-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: rgba(12, 24, 41, 0.25);
      border: 1px solid rgba(26, 45, 74, 0.6);
      border-radius: var(--wc-r-m);
      backdrop-filter: blur(12px);
      font-size: 13px;
    }

    .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wc-bord-nuit); flex-shrink: 0; }
    .dot.live { background: var(--wc-rouge-vif); box-shadow: 0 0 6px var(--wc-rouge-vif); animation: pulse 1.5s infinite; }
    .dot.loading { background: var(--wc-bleu-vif); box-shadow: 0 0 6px var(--wc-bleu-vif); animation: pulse 1.5s infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

    .status-text { color: #3a5070; }
    .status-text.live { color: var(--wc-texte-doux); }

    .btn {
      margin-left: auto;
      background: rgba(12, 24, 41, 0.5);
      border: 1px solid rgba(26, 45, 74, 0.7);
      border-radius: var(--wc-r-s);
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--wc-bleu-clair);
      cursor: pointer;
      transition: all 0.15s;
    }
    .btn:hover { background: rgba(29, 78, 216, 0.2); border-color: var(--wc-bleu-vif); }

    @media (max-width: 600px) {
      main { padding: 14px 10px; gap: 10px; }
      .status-bar { flex-wrap: wrap; gap: 8px; }
      .btn { margin-left: 0; }
    }
  
    /* ─── Standard Nav (logo | titre | id) ─── */
    nav {
      position: sticky; top: 0; z-index: 1000;
      height: 64px;
      display: grid; grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 0 24px;
      background: rgba(0,0,0,0.75);
      backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    nav .brand { justify-self: start; display: inline-flex; align-items: center; height: 100%; }
    nav .brand img { height: 24px; display: block; }
    nav .nav-pill {
      justify-self: center;
      display: inline-flex; align-items: center;
      padding: 6px 14px;
      font-size: 12px; font-weight: 500;
      color: var(--wc-text-secondary);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--wc-r-pilule);
      max-width: 60vw;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      line-height: 1;
    }
    nav .nav-user {
      justify-self: end;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px;
      border-radius: var(--wc-r-pilule);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 12px; font-weight: 500;
      color: var(--wc-text-secondary);
      cursor: pointer;
      transition: all .15s;
      line-height: 1;
    }
    nav .nav-user:hover { background: rgba(255,69,58,0.15); border-color: rgba(255,69,58,0.3); color: var(--wc-red); }
    nav .nav-user .x { opacity: 0.5; font-size: 10px; }
    nav .nav-clock {
      justify-self: end;
      font-size: 18px; font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
      color: var(--wc-texte-bleute);
      text-shadow: 0 0 8px rgba(var(--wc-bleu-clair-rgb),0.45), 0 0 40px rgba(var(--wc-bleu-vif-rgb),0.35);
      line-height: 1;
    }
    nav .nav-timer {
      justify-self: center;
      font-size: 22px; font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--wc-texte-bleute); letter-spacing: 0.04em;
      line-height: 1;
    }
    @media (max-width: 600px) {
      nav { padding: 0 14px; height: 56px; }
      nav .brand img { height: 13px; }
      nav .nav-pill { font-size: 9px; padding: 4px 8px; max-width: 50vw; }
      nav .nav-user { font-size: 10px; padding: 4px 11px; }
    }
    /* ─── Footer ─── */
    .page-footer {
      padding: 18px 32px;
      border-top: 1px solid rgba(255,255,255,0.07);
      display: flex; justify-content: center; align-items: center;
      font-size: 12px; color: rgba(255,255,255,0.3);
      margin-top: auto;
    }
    .page-footer a { color: rgba(255,255,255,0.3); text-decoration: none; }
    .page-footer a:hover { color: rgba(255,255,255,0.6); }

    /* ── Vu-mètre et mesures ────────────────────────────────────────────── */
    .player-overlay.clickable { pointer-events: auto; cursor: pointer; }

    .mesures {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
      gap: 8px;
    }
    .mesure {
      background: rgba(12, 24, 41, 0.25);
      border: 1px solid rgba(26, 45, 74, 0.6);
      border-radius: var(--wc-r-m);
      padding: 8px 11px;
      backdrop-filter: blur(12px);
    }
    .mesure .k {
      font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
      color: #3a5070; white-space: nowrap;
    }
    .mesure .v {
      font-size: 15px; font-weight: 600; color: var(--wc-texte-doux);
      font-variant-numeric: tabular-nums; margin-top: 3px; white-space: nowrap;
    }
    .mesure .v.warn { color: var(--wc-ambre); }
    .mesure .v.bad  { color: var(--wc-rouge-vif); }

    .vu {
      background: rgba(12, 24, 41, 0.25);
      border: 1px solid rgba(26, 45, 74, 0.6);
      border-radius: var(--wc-r-m);
      padding: 11px 14px 9px;
      backdrop-filter: blur(12px);
    }
    .vu-head {
      display: flex; align-items: center; gap: 8px;
      font-size: var(--wc-surtitre-taille); letter-spacing: var(--wc-surtitre-espacement); text-transform: var(--wc-surtitre-casse);
      color: var(--wc-surtitre-couleur); margin-bottom: 9px; font-weight: var(--wc-surtitre-graisse); }
    .vu-head .etat { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
    .vu-head .etat.ok   { color: #22c55e; }
    .vu-head .etat.warn { color: var(--wc-ambre); }
    .vu-head .etat.bad  { color: var(--wc-rouge-vif); }

    .vu-row { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
    .vu-lab { width: 11px; font-size: 11px; font-weight: 700; color: #3a5070; }
    .vu-track {
      position: relative; flex: 1; height: 11px;
      border-radius: 3px; overflow: hidden;
      border: 1px solid rgba(26, 45, 74, 0.5); background: #070f1c;
    }
    /* Le dégradé occupe toute la piste et ne bouge jamais : c'est un masque
       sombre qui découvre la portion atteinte. Sinon les couleurs glisseraient
       avec le niveau et le rouge n'indiquerait plus 0 dBFS. */
    .vu-grad {
      position: absolute; inset: 0;
      background: linear-gradient(90deg, #22c55e 0%, #22c55e 58%, var(--wc-ambre) 80%, var(--wc-rouge-vif) 100%);
    }
    .vu-mask { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: #070f1c; }
    .vu-peak {
      position: absolute; top: 0; bottom: 0; width: 2px;
      background: #e6f0ff; left: 0; opacity: 0;
    }
    .vu-db {
      width: 52px; text-align: right; font-size: 11px;
      color: #7d93b4; font-variant-numeric: tabular-nums;
    }
    .vu-echelle {
      position: relative; height: 12px; margin-left: 20px; margin-right: 61px;
    }
    .vu-echelle span {
      position: absolute; top: 0; transform: translateX(-50%);
      font-size: 9px; color: #2a4064; font-variant-numeric: tabular-nums;
    }

    /* Ligne de diagnostic : elle sert à identifier une panne du vu-mètre sans
       avoir à ouvrir la console. Discrète, mais lisible sur une capture. */
    .vu-diag {
      margin-top: 8px; padding-top: 8px;
      border-top: 1px solid rgba(26, 45, 74, 0.45);
      font-size: 10.5px; line-height: 1.5; color: #55708f;
      font-family: var(--wc-police-mono);
      word-break: break-word;
    }

    .alertes { display: flex; gap: 8px; flex-wrap: wrap; }
    .alerte {
      display: none; align-items: center; gap: 7px;
      padding: 8px 13px; border-radius: var(--wc-r-s); font-size: 13px; font-weight: 600;
    }
    .alerte.on { display: flex; }
    .alerte.silence { background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.4); color: var(--wc-ambre); }
    .alerte.gel     { background: rgba(239, 68, 68, 0.12);  border: 1px solid rgba(239, 68, 68, 0.4);  color: var(--wc-rouge-vif); }

    .icon-btn {
      background: rgba(12, 24, 41, 0.5);
      border: 1px solid rgba(26, 45, 74, 0.7);
      border-radius: var(--wc-r-s); padding: 6px 11px;
      font-size: 13px; font-weight: 600; color: var(--wc-bleu-clair);
      cursor: pointer; transition: all 0.15s;
    }
    .icon-btn:hover { background: rgba(29, 78, 216, 0.2); border-color: var(--wc-bleu-vif); }
    .status-bar .btn { margin-left: 0; }
    .status-bar .sep { margin-left: auto; }