/* ─────────────────────────────────────────────────────────────
   Écran « record » — Figma 374:9303 « Flow 14 · speech-script-recording »
   La créatrice enregistre sa story, le speech défile en prompteur.
   Coordonnées Figma (390 × 844). Animé par record.js (rAF, transform / opacity).
   ───────────────────────────────────────────────────────────── */
.scr--record{background:#050505}
.scr--record p{margin:0}

.scr--record .rc-video{position:absolute;left:0;top:0;width:390px;height:844px;background:#050505 center/cover no-repeat}
/* voile neutre : la vidéo de rue est bien plus claire que la séquence d'intérieur du Figma — garde le prompteur lisible */
.scr--record .rc-tint{position:absolute;inset:0;background:rgba(0,0,0,.22)}
.scr--record .rc-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.15) 30%,rgba(0,0,0,.2) 65%,rgba(0,0,0,.8) 100%)}

/* en-tête */
.scr--record .rc-title{position:absolute;left:95px;top:50px;width:200px;height:25px;text-align:center;
  font-size:21px;font-weight:800;letter-spacing:-.6176px;line-height:normal;white-space:nowrap}
.scr--record .rc-step{position:absolute;left:0;top:85px;width:390px;height:5px}

/* chrono + pastille d'intonation */
.scr--record .rc-timer{position:absolute;left:149px;top:112px;width:92px;height:40px}
.scr--record .rc-timer svg{position:absolute;left:5px;top:12px;width:16px;height:16px}
.scr--record .rc-timer span{position:absolute;left:26px;top:0;width:70px;height:40px;line-height:40px;
  font-size:25px;font-weight:700;color:#00D4FE;white-space:nowrap;font-variant-numeric:tabular-nums}
.scr--record .rc-pill{position:absolute;left:132.5px;top:157px;width:125px;height:28px;overflow:hidden;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.scr--record .rc-pill span{position:absolute;left:13px;top:6px;font-size:11px;font-weight:700;letter-spacing:.88px;line-height:normal;white-space:nowrap}
.scr--record .rc-pill svg{position:absolute;left:96px;top:6px;width:14px;height:14px}

/* prompteur : une ligne = 43,1 px (pas mesuré sur le rendu Figma ; 20 px × 2,13 = 42,6), texte centré */
.scr--record .rc-vp{position:absolute;left:16px;top:160px;width:358px;height:552px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 28px,#000 46px,#000 510px,transparent 552px);
          mask-image:linear-gradient(180deg,transparent 0,transparent 28px,#000 46px,#000 510px,transparent 552px)}
.scr--record .rc-lines{position:absolute;left:16px;top:39px;width:326px;will-change:transform}
.scr--record .rc-l{height:43.1px;line-height:43.1px;text-align:center;white-space:nowrap;
  font-size:20px;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}

/* commandes du bas */
.scr--record .rc-add{position:absolute;left:47px;top:728px;width:66px;height:66px}
.scr--record .rc-add svg{position:absolute;left:23.5px;top:10px;width:20px;height:21px}
.scr--record .rc-add span,.scr--record .rc-filt span{position:absolute;top:39px;font-size:12px;font-weight:400;line-height:normal;white-space:nowrap;color:rgba(255,255,255,.7)}
.scr--record .rc-add span{left:7.5px}
.scr--record .rc-filt{position:absolute;left:277px;top:728px;width:66px;height:66px}
.scr--record .rc-filt svg{position:absolute;left:23.18px;top:12px;width:20.64px;height:18.39px}
.scr--record .rc-filt span{left:16.5px;top:38.39px}

.scr--record .rc-halo{position:absolute;left:150.75px;top:703px;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(238,29,82,.42) 0,rgba(238,29,82,.16) 45%,rgba(238,29,82,0) 70%);opacity:.5;will-change:transform,opacity}
.scr--record .rc-rec{position:absolute;left:142.33px;top:694.58px;width:106.834px;height:106.834px;overflow:visible}
.scr--record .rc-rec .rc-sq{transform-box:fill-box;transform-origin:center}
.scr--record .rc-stop{position:absolute;left:158px;top:794px;width:74px;text-align:center;font-size:12px;font-weight:400;line-height:normal;color:rgba(255,255,255,.7)}