/* demo/frame.css — cadre téléphone Android + mise en scène */
body{ margin:0; background:#0e0e10; color:#fff; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px 12px 96px; }
.stage{ display:flex; gap:32px; justify-content:center; flex-wrap:nowrap; transform-origin:top center; }
.phone-col{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.phone-label{ font:600 14px/20px Inter,sans-serif; letter-spacing:.02em; color:#cfcfcf; }
.phone-scaler{ width:calc(390px * var(--s,1)); height:calc(844px * var(--s,1)); flex-shrink:0; }
.phone{ width:390px; height:844px; background:#000; border-radius:44px; padding:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5); position:relative;
  transform:scale(var(--s,1)); transform-origin:top left; }
.phone .screen{ width:100%; height:100%; border-radius:32px; overflow:hidden; background:#fff; position:relative; }
.phone iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.phone .gesture{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:120px; height:5px; border-radius:3px; background:rgba(0,0,0,.35); z-index:5; }
#control-bar{ position:fixed; bottom:0; left:0; right:0; background:#17171a;
  border-top:1px solid #2a2a2e; display:flex; align-items:center; justify-content:center;
  gap:12px; padding:12px 16px; z-index:50; }
#control-bar.hidden{ display:none; }
#control-bar button{ background:#2a2a2e; color:#fff; border:0; border-radius:10px;
  padding:10px 16px; font:600 14px Inter,sans-serif; cursor:pointer; }
#control-bar button:hover{ background:#3a3a40; }
#btn-autoplay{ background:var(--tj-primary,#F6C700); color:#111; }
#indicator{ font:600 14px Inter,sans-serif; color:#cfcfcf; min-width:48px; text-align:center; }
#caption{ font:500 15px/22px Inter,sans-serif; color:#eaeaea; max-width:840px; text-align:center; min-height:44px; }
.autoplaying #btn-autoplay{ background:#3a3a40; color:#fff; }
#menu-panel{ position:fixed; bottom:64px; left:50%; transform:translateX(-50%);
  width:min(92vw,420px); max-height:62vh; overflow-y:auto; background:#17171a;
  border:1px solid #2a2a2e; border-radius:16px; padding:12px; z-index:60;
  box-shadow:0 -8px 30px rgba(0,0,0,.5); }
#menu-panel.hidden{ display:none; }
#menu-panel .menu-head{ font:700 15px Inter,sans-serif; color:#fff; padding:4px 8px 8px; }
#menu-panel .menu-group{ font:600 11px Inter,sans-serif; text-transform:uppercase;
  letter-spacing:.05em; color:#8a8a90; padding:10px 8px 4px; }
#menu-panel .menu-item{ display:block; width:100%; text-align:left; background:#2a2a2e;
  color:#eee; border:0; border-radius:10px; padding:10px 12px; margin:4px 0;
  font:500 14px Inter,sans-serif; cursor:pointer; }
#menu-panel .menu-item:hover{ background:#3a3a40; }
#menu-panel .menu-resume{ display:block; width:100%; text-align:center;
  background:var(--tj-primary,#F6C700); color:#111; border:0; border-radius:10px;
  padding:11px; margin-top:10px; font:700 14px Inter,sans-serif; cursor:pointer; }