:root { color-scheme: dark; }* { box-sizing: border-box; }html,body { margin:0; height:100%; overflow:hidden; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:#0b0d10; color:#dfe6ee; }#app { display:flex; height:100vh; }#stage { position:relative; flex:1; min-width:0; background: radial-gradient(circle at 50% 40%, #15191f 0%, #0b0d10 70%); }canvas { display:block; width:100%; height:100%; touch-action:none; }#hud { display:none; }#toolbar { position:absolute; top:6px; right:6px; display:flex; gap:4px; z-index:20; }#toolbar .ico { position:relative; width:44px; height:44px; padding:0; margin:0; display:flex; align-items:center; justify-content:center;background:transparent; border:0; border-radius:50%; color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color .15s; }#toolbar .ico svg { display:block; flex:none; filter:drop-shadow(0 0 1px rgba(0,0,0,.5)) drop-shadow(0 1px 3px rgba(0,0,0,.35)); }#toolbar .ico:focus { outline:none; }#toolbar .ico:focus-visible { box-shadow:0 0 0 2px rgba(255,255,255,.6); }#toolbar #fsbtn .ico-reduire, #stage:fullscreen #toolbar #fsbtn .ico-agrandir { display:none; }#stage:fullscreen #toolbar #fsbtn .ico-reduire { display:block; }#toolbar .ico::after { content:attr(data-bulle); position:absolute; top:calc(100% + 4px); right:0; padding:4px 8px; border-radius:4px;background:rgba(0,0,0,.72); color:#fff; font-size:12px; line-height:1.3; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s; }#stage:fullscreen #fsbtn::after { content:"Quitter le plein écran"; }@media (hover:hover) {#toolbar .ico:hover { background-color:rgba(255,255,255,.14); }#toolbar .ico:hover::after { opacity:1; transition-delay:.25s; }}#toolbar .ico:active { background-color:rgba(255,255,255,.22); }button { background:#1d2733; color:#dfe6ee; border:1px solid #2c3a49; border-radius:7px; padding:7px 10px; font-size:12px; cursor:pointer; }button:hover { background:#26333f; }input[type=range] { width:140px; accent-color:#5ec8ff; }#timebar { position:absolute; left:12px; right:12px; bottom:12px; background:rgba(11,13,16,.7); border:1px solid #232c36; border-radius:10px; padding:8px 12px; display:none; flex-direction:column; align-items:stretch; gap:6px; }#timebar.show { display:flex; }#timebar .tlrow { display:flex; align-items:center; gap:10px; }#timebar input[type=range]{ flex:1; }#tltrack { width:100%; height:24px; border-radius:4px; display:block; touch-action:none; }#playbtn { width:34px; height:30px; }#timelbl { font-size:11px; color:#9fb0c0; min-width:120px; text-align:right; font-variant-numeric:tabular-nums; }[hidden] { display:none !important; }#couverture { position:absolute; inset:0; z-index:15; display:flex; align-items:center; justify-content:center; background:#0b0d10; }#couv-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; }#couv-img:not([src]) { display:none; }#charge-boite { position:relative; width:min(320px,70%); text-align:center; }#charge { height:6px; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden; }#charge-barre { height:100%; width:0; background:#5ec8ff; transition:width .15s; }#charge-txt { margin-top:8px; font-size:12px; color:#dfe6ee; text-shadow:0 1px 3px #000; }#aide { position:absolute; left:50%; bottom:64px; transform:translateX(-50%); z-index:16; max-width:calc(100% - 32px); background:rgba(11,13,16,.8); border:1px solid #232c36; border-radius:10px; padding:8px 12px; font-size:12px; line-height:1.6; color:#dfe6ee; text-align:center; pointer-events:none; }#logo { position:absolute; left:12px; top:10px; z-index:14; display:block; opacity:.8; }#logo:empty { display:none; }#logo img { display:block; height:36px; width:auto; filter:drop-shadow(0 0 1px rgba(0,0,0,.5)) drop-shadow(0 1px 3px rgba(0,0,0,.35)); }#refus { position:absolute; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:#0b0d10; color:#dfe6ee; font-size:15px; text-align:center; padding:16px; }#refus a { color:#5ec8ff; }body.capture #toolbar, body.capture #logo, body.capture #aide, body.capture #timebar { display:none !important; }