@font-face{font-family:Outfit;src:url('/assets/brand/fonts/outfit.78b1e336842f.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Fraunces;src:url('/assets/brand/fonts/fraunces.a42964125a62.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--ink:#1B3A33;--soft:#4C6660;--teal:#146B62;--mint:#DDEFEA;--line:#DDE8E3}
  /* Fond transparent ; scène mise à l'échelle avec `zoom` pour un texte net */
  html,body{margin:0;height:100%;background:transparent;overflow:hidden}
  body{font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;
    display:flex;align-items:center;justify-content:center}
  #stage{position:relative;flex:none;width:420px;height:640px;overflow:hidden}
  .abs{position:absolute;left:0;top:0}
  .nw{white-space:nowrap}

  #studio{left:20px;top:10px;width:380px;height:470px;border-radius:22px;background:#F6F9F7;border:1px solid var(--line);box-sizing:border-box}
  #logo{left:44px;top:32px;width:24px;height:24px;border-radius:7px;background:var(--mint);display:flex;align-items:center;justify-content:center}
  #brand{left:76px;top:36px;font-size:14px;font-weight:600}
  #live{left:368px;top:39px;width:9px;height:9px;border-radius:50%;background:var(--teal)}
  #div{left:44px;top:70px;width:332px;height:1px;background:var(--line)}
  #eyebrow{left:44px;top:92px;font-size:12px;letter-spacing:.08em;color:var(--soft)}
  #title{left:44px;top:110px;font-family:"Fraunces",Georgia,serif;font-size:34px;font-weight:500}

  #ex{left:44px;top:168px;width:332px;height:212px;border-radius:18px;background:#fff;border:1px solid var(--line);box-sizing:border-box}
  #tag{left:64px;top:188px;font-size:11.5px;padding:5px 9px;border-radius:7px;background:var(--mint);color:#2E5A52}
  #exT{left:64px;top:224px;font-size:17px;font-weight:600}
  #exS{left:64px;top:252px;font-size:13px;color:var(--soft)}
  #timer{left:62px;top:282px;font-size:42px;color:var(--teal);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  #ring{left:302px;top:282px;width:58px;height:58px}
  #play{left:308px;top:288px;width:46px;height:46px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center}
  #play svg{position:absolute}
  .st{left:64px;top:344px;font-size:12px;color:var(--soft);display:flex;align-items:center;gap:6px}
  #recDot{width:8px;height:8px;border-radius:50%;background:#D9483B}

  #beats{left:46px;top:414px;display:flex;gap:10px}
  #beats i{width:12px;height:12px;border-radius:50%;background:#CDE7E1;display:block}
  #metL{left:292px;top:398px;font-size:12.5px;color:var(--ink)}
  #bpm{left:292px;top:418px;font-size:15px;font-weight:600;transform-origin:0 50%}

  #prof{left:50px;top:498px;width:320px;height:126px;border-radius:18px;background:#fff;border:1px solid var(--line);box-sizing:border-box}
  #pE{left:70px;top:516px;font-size:11px;letter-spacing:.08em;color:var(--teal);font-weight:600}
  #pRow{left:70px;top:534px;display:flex;align-items:baseline;gap:6px}
  #pN{font-size:30px;color:var(--teal);font-weight:500;font-variant-numeric:tabular-nums}
  #pW{font-size:12px;color:var(--soft)}
  /* Badge à droite du titre « CÔTÉ PROFESSEUR », au-dessus des barres */
  #plus{left:194px;top:511px;font-size:11px;font-weight:600;color:#fff;background:var(--teal);padding:3px 8px;border-radius:999px}
  #pS{left:70px;top:590px;font-size:11px;color:var(--soft)}
  .bar{width:10px;border-radius:5px;background:#CDE7E1}
  #chartBase{left:248px;top:600px;width:108px;height:1px;background:var(--line)}

  .tap{width:46px;height:46px;border-radius:50%;border:3px solid var(--teal);box-sizing:border-box}
  .tapDot{width:16px;height:16px;border-radius:50%;background:rgba(27,58,51,.35)}