/* Scène de la démo : barre d'outils + page invité (dans un téléphone) ou régie (pleine largeur). */
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(/fonts/manrope-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(/fonts/manrope-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(/fonts/manrope-latin-700-normal.woff2) format('woff2')}
:root{--ink:#0E1726;--ground:#E4E7EF;--blue:#2F3CF2;--flash:#FFD23F;--bar:58px}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--ground);color:var(--ink);font:400 15px/1.45 Manrope,system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--flash);outline-offset:2px}

.bar{position:relative;z-index:30;flex:none;min-height:var(--bar);display:flex;align-items:center;gap:10px 18px;padding:8px 14px;background:var(--ink);color:#fff;flex-wrap:wrap}
.brand{font:700 18px Manrope,sans-serif;text-decoration:none;color:#fff;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;margin-right:4px}
.tag{font-size:11px;font-weight:700;background:var(--flash);color:var(--ink);padding:2px 8px;border-radius:99px}
.bar-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bar-right{margin-left:auto}
.b{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);cursor:pointer;font-weight:600;font-size:14px;white-space:nowrap}
.b:hover{background:rgba(255,255,255,.14)}
.b-l{opacity:.65;font-weight:400}
.b strong{font-weight:700;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.b.ghost{width:38px;padding:0;justify-content:center;border-radius:50%;font-family:Georgia,serif;font-style:italic;font-weight:700}
.seg{display:flex;background:rgba(255,255,255,.08);border-radius:10px;padding:3px}
.seg button{border:0;background:none;height:32px;padding:0 14px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;color:#C6CCDC}
.seg button.on{background:#fff;color:var(--ink)}

.pop{position:absolute;top:calc(100% + 8px);left:14px;z-index:40;width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 90px);overflow:auto;background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 20px 60px -10px rgba(14,23,38,.45);padding:16px}
.pop.narrow{width:min(320px,calc(100vw - 28px));left:auto;right:14px;display:flex;flex-direction:column;gap:12px}
.pop p{margin:0}
.pop .small{font-size:13px;color:#55607A;word-break:break-all}
.pop h3{margin:14px 0 8px;font-size:13px;font-weight:700;color:#55607A}
.pop h3:first-child{margin-top:0}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.opt{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:10px;border:1.5px solid #D7DCE8;background:#fff;cursor:pointer}
.opt:hover{border-color:var(--ink)}
.opt.on{border-color:var(--blue);background:#EEF0FF}
.sw{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid rgba(0,0,0,.12);position:relative;overflow:hidden}
.sw i{position:absolute;right:0;bottom:0;width:14px;height:14px;border-radius:8px 0 0 0}
.opt b{display:block;font-size:14px;line-height:1.2}
.opt span{font-size:12px;color:#55607A}
.qr{width:200px;height:200px;margin:0 auto;padding:10px;background:#fff;border:1px solid #D7DCE8;border-radius:12px}
.qr svg{width:100%;height:100%;display:block}

.stage{flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;padding:0}
.frame{flex:1;min-height:0;display:flex}
.frame iframe{flex:1;width:100%;height:100%;border:0;background:#fff}
/* vue invité : un téléphone centré sur grand écran, plein écran sur mobile */
body[data-view=guest] .stage{align-items:center;padding:20px}
body[data-view=guest] .frame{flex:none;width:410px;max-width:100%;height:min(860px,100%);border:10px solid var(--ink);border-radius:44px;overflow:hidden;background:var(--ink);box-shadow:0 30px 70px -25px rgba(14,23,38,.55)}
body[data-view=guest] .frame iframe{border-radius:34px}
body[data-view=regie] .frame iframe{background:#F2F1EE}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;max-width:calc(100vw - 32px);box-shadow:0 12px 30px rgba(0,0,0,.3)}

@media(max-width:700px){
  .b-l{display:none}
  .bar{padding:8px 10px;gap:8px}
  .bar-right{margin-left:0}
  .b{padding:0 10px;font-size:13px}
  .seg button{padding:0 10px}
  body[data-view=guest] .stage{padding:0}
  body[data-view=guest] .frame{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
  body[data-view=guest] .frame iframe{border-radius:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}