@font-face{font-family:Outfit;src:url("/assets/brand/fonts/outfit.78b1e336842f.woff2") format("woff2");font-weight:100 900;font-display:swap}

  :root{
    --ink:#1B3A33;
    --ink-soft:#4C6660;
    --teal:#1F6E63;
    --rust:#B4532A;
    --rust-ink:#6B3A22;
    --peach:#F7E3D6;
    --block:#F5F7F4;
  }
  /* Fond transparent : l'animation se fond dans la page qui l'intègre */
  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)}
  #stage{position:absolute;left:0;top:0;width:600px;height:680px;transform-origin:0 0;overflow:hidden}
  .abs{position:absolute;left:0;top:0}

  #frame{left:10px;top:10px;width:580px;height:660px;border-radius:34px;
    background:linear-gradient(160deg,#D3EAE5 0%,#D9E9EC 50%,#DDE8F1 100%)}
  #caption{left:0;top:637px;width:600px;text-align:center;font-size:12px;color:#4C6F6A}
  #card{left:40px;top:40px;width:520px;height:572px;border-radius:22px;background:#fff;
    box-shadow:0 18px 40px rgba(30,70,65,.08),0 1px 3px rgba(30,70,65,.05)}
  #eyebrow{left:66px;top:68px;font-size:12px;letter-spacing:.06em;color:var(--ink-soft)}
  #title{left:66px;top:90px;font-size:23px;font-weight:600;white-space:nowrap;height:30px;display:flex;align-items:center}
  #caret{display:inline-block;width:2px;height:24px;background:var(--teal);margin-left:2px}

  /* Barre de dictée */
  #bar{left:66px;top:134px;width:468px;height:50px;border-radius:12px;background:var(--peach);overflow:hidden;transform-origin:50% 50%}
  .st{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:0 16px;font-size:14px;color:var(--rust-ink);white-space:nowrap}
  .st .sp{margin-left:auto}
  .wave{display:flex;align-items:center;gap:3px;height:28px}
  .wave i{display:block;width:3px;border-radius:2px;background:var(--rust)}
  #rec .dot{width:10px;height:10px;border-radius:50%;background:#D9483B}
  #rec .wave{margin-left:auto}
  #shine{width:160px;height:50px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0));opacity:0}
  .ddots span{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--rust-ink);margin-left:3px}

  /* Blocs de notes */
  .blk{left:66px;width:468px;height:84px;border-radius:14px;background:var(--block);box-sizing:border-box;padding:15px 16px;transform-origin:50% 0}
  .blk .h{display:flex;align-items:center;gap:10px}
  .blk .t{font-size:16.5px;font-weight:600}
  .blk .chip{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.03em;padding:4px 9px;border-radius:999px}
  .blk .b{font-size:13.5px;color:var(--ink-soft);margin-top:9px;white-space:nowrap}
  .chip.sol{background:#DFEBF4;color:#2E5E80}
  .chip.tec{background:#F7E3D6;color:#8A4325}
  .chip.mor{background:#DDF0EC;color:var(--teal)}
  .sk{left:66px;width:468px;height:84px;border-radius:14px;background:var(--block);overflow:hidden}
  .sk i{position:absolute;left:16px;height:10px;border-radius:5px;background:#E6EBE7}
  .sk .glow{position:absolute;top:0;width:180px;height:84px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0))}

  #prog{left:66px;top:482px;width:468px;height:72px;border-radius:16px;background:#DDF0EC;box-sizing:border-box;padding:16px 18px}
  #prog .row{display:flex;font-size:14.5px;font-weight:600;color:var(--teal)}
  #prog .row span:last-child{margin-left:auto}
  #track{position:absolute;left:18px;right:18px;top:46px;height:8px;border-radius:4px;background:#BFE3DD;overflow:hidden}
  #fill{height:100%;width:0;border-radius:4px;background:var(--teal)}
  #foot{left:66px;top:574px;font-size:12.5px;color:var(--ink-soft)}
  #cursor{width:26px;height:31px;transform-origin:3px 3px}