/* ----------------------------
       DESIGN GLOBAL – STYLE APPLE
       ---------------------------- */

    :root {
      --primary: #003f5f;
      --secondary: #ffd84d;
      --bg: #f7f7f7;
      --text: #0d0d0d;
      --card-bg: #ffffff;
      --shadow: rgba(0,0,0,0.08);
      --radius: 22px;
    }

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: var(--bg);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                   "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }

    /* ----------------------------
       HEADER APPLE CLEAN
       ---------------------------- */

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 28px;
      margin-top: 15px;
      background: var(--primary);
      border-bottom: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 2px 12px var(--shadow);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .header h1 {
      margin: 0;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.3px;
      color: #ffd84d;
    }

    .status {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      font-weight: 500;
      color: #ff3b30;
    }

    .status .dot {
      width: 14px;
      height: 14px;
      background: #ff3b30; /* rouge Apple Style */
      border-radius: 50%;
      box-shadow: 0 0 12px rgba(255,59,48,0.4);
      animation: pulse 1.6s infinite ease-in-out;
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.25); }
      100% { transform: scale(1); }
    }

    /* ----------------------------
       CONTAINER PLAYER
       ---------------------------- */

    .container {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      box-sizing: border-box;
    }

    .player-card {
      width: 100%;
      max-width: 1500px;
      aspect-ratio: 16 / 9;
      background: var(--card-bg);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 
        0 20px 40px rgba(0,0,0,0.12),
        0 8px 20px rgba(0,0,0,0.06);
      transition: 0.3s ease;
    }

    .player-card:hover {
      transform: scale(1.005);
      box-shadow: 
        0 28px 60px rgba(0,0,0,0.15),
        0 10px 24px rgba(0,0,0,0.08);
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

    @media (max-width: 900px) {
      .container { padding: 12px; }
      .player-card { border-radius: 16px; }
    }