/* ─────────────────────────────────────────────────────────────
   BeBuzz v2 — cadre de téléphone commun aux écrans animés (08/10/2026)
   Chaque écran est dessiné à la taille Figma (390 × 844 px) puis mis à
   l'échelle par phone.js (variable --k). Les écrans vivent dans
   assets/v2/screens/<nom>.css|.js et ne redéfinissent ni police ni cadre.
   ───────────────────────────────────────────────────────────── */
@font-face{font-family:Talkto;src:url(/assets/fonts/TalktoFont-Normal.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Talkto;src:url(/assets/fonts/TalktoFont-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Talkto;src:url(/assets/fonts/TalktoFont-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Talkto;src:url(/assets/fonts/TalktoFont-UltraBold.ttf) format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:Talkto;src:url(/assets/fonts/TalktoFont-Heavy.ttf) format("truetype");font-weight:900;font-display:swap}

.phone{
  --k:1;
  position:relative;width:100%;aspect-ratio:390/844;
  border-radius:calc(56px * var(--k));
  padding:0;isolation:isolate;
  box-shadow:0 0 0 calc(2px * var(--k)) rgba(255,255,255,.16),0 calc(40px * var(--k)) calc(90px * var(--k)) rgba(0,0,0,.55);
  background:#0b0b0c;
}
.phone::after{ /* reflet du verre */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 0 calc(1px * var(--k)) rgba(255,255,255,.10);
  background:linear-gradient(145deg,rgba(255,255,255,.06),transparent 30%);
}
.phone .scr{
  position:absolute;left:0;top:0;width:390px;height:844px;
  transform:scale(var(--k));transform-origin:0 0;
  border-radius:56px;overflow:hidden;background:#0b0b0c;color:#fff;text-align:left; /* l'écran ne prend pas l'alignement de la carte qui le contient */
  font-family:Talkto,-apple-system,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  user-select:none;-webkit-user-select:none;
}
.phone .scr *{box-sizing:border-box}
.phone .scr img,.phone .scr video{display:block;max-width:none}
.phone .scr video{object-fit:cover}
/* plusieurs écrans dans un même téléphone (hero) : fondu de l'un à l'autre */
.phone .scr.is-stacked{opacity:0;transition:opacity .7s cubic-bezier(.2,.7,.1,1)}
.phone .scr.is-stacked.is-on{opacity:1}
/* repli sans JS : l'image fixe posée dans le téléphone */
.phone > .phone__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.phone.is-mounted > .phone__fallback{display:none}

/* icônes des écrans (09/10) : blanches, opacité réduite, comme les symboles de l'app iOS */
.phone .scr .bbi{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.22em;flex:none;opacity:.78}