/* ── Reset minimal ── */
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

      body {
        background: #04060d;
        font-family: 'Courier New', 'Lucida Console', monospace;
        overflow: hidden;
      }

      /* ══════════════════════════════════════
         SPLASH SCREEN
      ══════════════════════════════════════ */
      #splash {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: #04060d;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: opacity 0.7s ease;
      }
      #splash.hidden {
        opacity: 0;
        pointer-events: none;
      }

      /* Scan-line overlay */
      #splash::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(255,255,255,0.018) 2px,
          rgba(255,255,255,0.018) 4px
        );
        pointer-events: none;
      }

      /* Scan sweep animation */
      #splash::after {
        content: '';
        position: absolute;
        left: 0; right: 0; height: 120px;
        background: linear-gradient(transparent, rgba(34,211,238,0.06), transparent);
        animation: sweep 4s linear infinite;
        pointer-events: none;
      }
      @keyframes sweep {
        0%   { top: -120px; }
        100% { top: 100%; }
      }

      /* ── Status badge top ── */
      .sp-status {
        position: absolute;
        top: 24px;
        right: 28px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 10px;
        color: #22c55e;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .sp-dot {
        width: 7px; height: 7px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 8px #22c55e;
        animation: blink 1s ease-in-out infinite;
      }
      @keyframes blink {
        0%,49%  { opacity: 1; }
        50%,100%{ opacity: 0.2; }
      }

      /* ── Version badge top-left ── */
      .sp-version {
        position: absolute;
        top: 24px;
        left: 28px;
        font-size: 9px;
        color: #334155;
        letter-spacing: 0.15em;
        text-transform: uppercase;
      }

      /* ── Center logo block ── */
      .sp-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        z-index: 1;
      }

      /* Broadcast icon */
      .sp-icon {
        width: 64px; height: 64px;
        border: 2px solid rgba(34,211,238,0.30);
        border-radius: 14px;
        background: rgba(34,211,238,0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 28px;
        box-shadow: 0 0 40px rgba(34,211,238,0.12);
        animation: pulseIcon 3s ease-in-out infinite;
      }
      @keyframes pulseIcon {
        0%,100% { box-shadow: 0 0 30px rgba(34,211,238,0.10); }
        50%     { box-shadow: 0 0 55px rgba(34,211,238,0.22); }
      }
      .sp-icon svg {
        width: 32px; height: 32px;
        stroke: #22d3ee;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      /* PLAYOUT */
      .sp-title-top {
        font-size: 13px;
        font-weight: 700;
        color: #475569;
        letter-spacing: 0.55em;
        text-transform: uppercase;
        margin-bottom: 6px;
      }
      .sp-title-main {
        font-size: 52px;
        font-weight: 900;
        color: #e2e8f0;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1;
        text-shadow: 0 0 60px rgba(34,211,238,0.18);
        animation: fadeUp 0.8s ease both;
      }
      .sp-title-main span {
        color: #22d3ee;
        text-shadow: 0 0 40px rgba(34,211,238,0.5);
      }
      .sp-title-sub {
        font-size: 16px;
        font-weight: 700;
        color: #64748b;
        letter-spacing: 0.38em;
        text-transform: uppercase;
        margin-top: 8px;
        animation: fadeUp 0.8s 0.1s ease both;
      }
      .sp-tagline {
        font-size: 10px;
        color: #334155;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        margin-top: 18px;
        animation: fadeUp 0.8s 0.2s ease both;
      }

      @keyframes fadeUp {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      /* ── Divider ── */
      .sp-divider {
        width: 1px;
        height: 40px;
        background: linear-gradient(transparent, rgba(34,211,238,0.3), transparent);
        margin: 28px 0 24px;
        animation: fadeUp 0.8s 0.3s ease both;
      }

      /* ── Channel badges ── */
      .sp-channels {
        display: flex;
        align-items: center;
        gap: 8px;
        animation: fadeUp 0.8s 0.35s ease both;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 600px;
      }
      .sp-ch {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        border-radius: 8px;
        border: 1px solid;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .sp-ch-dot {
        width: 5px; height: 5px;
        border-radius: 50%;
        animation: blink 1s ease-in-out infinite;
      }

      /* ── Progress bar ── */
      .sp-progress-wrap {
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        width: 320px;
        animation: fadeUp 0.8s 0.5s ease both;
      }
      .sp-progress-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6px;
        font-size: 9px;
        color: #334155;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .sp-progress-track {
        width: 100%;
        height: 2px;
        background: #1e293b;
        border-radius: 2px;
        overflow: hidden;
      }
      .sp-progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #0891b2, #22d3ee, #67e8f9);
        border-radius: 2px;
        animation: progress 2.8s cubic-bezier(0.4,0,0.2,1) forwards;
        box-shadow: 0 0 10px rgba(34,211,238,0.5);
      }
      @keyframes progress {
        0%   { width: 0%; }
        30%  { width: 45%; }
        60%  { width: 72%; }
        80%  { width: 88%; }
        100% { width: 100%; }
      }

      /* ── Footer credit ── */
      .sp-footer {
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 9px;
        color: #1e293b;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        white-space: nowrap;
        animation: fadeUp 0.8s 0.6s ease both;
      }

      /* ── Timecode top-center ── */
      .sp-timecode {
        position: absolute;
        top: 22px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 11px;
        color: #22d3ee;
        letter-spacing: 0.18em;
        opacity: 0.7;
      }

      /* ── Corner decorations ── */
      .sp-corner {
        position: absolute;
        width: 20px; height: 20px;
        border-color: rgba(34,211,238,0.2);
        border-style: solid;
      }
      .sp-corner.tl { top: 14px; left: 14px; border-width: 1px 0 0 1px; }
      .sp-corner.tr { top: 14px; right: 14px; border-width: 1px 1px 0 0; }
      .sp-corner.bl { bottom: 14px; left: 14px; border-width: 0 0 1px 1px; }
      .sp-corner.br { bottom: 14px; right: 14px; border-width: 0 1px 1px 0; }

/* Variantes du splash externalisées pour une CSP sans attribut style. */
.sp-ch--orange { border-color:rgba(251,146,60,.4);color:#fb923c;background:rgba(251,146,60,.06) }
.sp-ch--cyan { border-color:rgba(34,211,238,.4);color:#22d3ee;background:rgba(34,211,238,.06) }
.sp-ch--green { border-color:rgba(52,211,153,.4);color:#34d399;background:rgba(52,211,153,.06) }
.sp-ch--violet { border-color:rgba(167,139,250,.4);color:#a78bfa;background:rgba(167,139,250,.06) }
.sp-ch--amber { border-color:rgba(251,191,36,.4);color:#fbbf24;background:rgba(251,191,36,.06) }
.sp-ch-dot--orange { background:#fb923c;box-shadow:0 0 6px #fb923c }
.sp-ch-dot--cyan { background:#22d3ee;box-shadow:0 0 6px #22d3ee }
.sp-ch-dot--green { background:#34d399;box-shadow:0 0 6px #34d399 }
.sp-ch-dot--violet { background:#a78bfa;box-shadow:0 0 6px #a78bfa }
.sp-ch-dot--amber { background:#fbbf24;box-shadow:0 0 6px #fbbf24 }