/* Page de lien direct /p/<slug>/ : présentation plein cadre + barre discrète (byThomas OS). */
:root{--ink:#fff5e1;--deep:#2e0c10;--accent:#c4504f;--spring:cubic-bezier(.34,1.5,.5,1);--f:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;--fd:'Fraunces',Georgia,serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#120406;overflow:hidden;font-family:var(--f);color:var(--ink);-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0}
#stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#120406;opacity:0;transition:opacity .35s}
#stage.ready iframe{opacity:1}
.cover,.err{position:absolute;inset:0;display:grid;place-items:center;background:#120406 center/cover no-repeat;transition:opacity .4s,visibility 0s .4s;z-index:2}
.cover::before{content:"";position:absolute;inset:0;backdrop-filter:blur(18px) brightness(.5);-webkit-backdrop-filter:blur(18px) brightness(.5)}
#stage.ready .cover{opacity:0;visibility:hidden;pointer-events:none}
.box{position:relative;display:grid;gap:10px;justify-items:center;text-align:center;padding:24px;max-width:460px}
.box b{font:600 24px var(--fd)}.box small{opacity:.8;font-size:13px;line-height:1.5}
.spin{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.err{visibility:hidden;opacity:0;background:#1b080b}
#stage.error .err{visibility:visible;opacity:1}#stage.error .cover{opacity:0;visibility:hidden}
.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 16px;border-radius:999px;border:0;background:var(--accent);color:var(--ink);font:600 13px var(--f);cursor:pointer;text-decoration:none;transition:transform .18s var(--spring),filter .15s}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.95)}.btn.ghost{background:rgba(255,255,255,.14)}
.btn svg{width:16px;height:16px}
:focus-visible{outline:2px solid #f6dc9e;outline-offset:2px;border-radius:8px}
/* barre */
#bar{position:fixed;top:0;left:0;right:0;height:70px;z-index:10;display:flex;justify-content:center;padding-top:10px;pointer-events:none}
#bar .hot{position:absolute;top:0;left:25%;right:25%;height:40px;pointer-events:auto;display:flex;justify-content:center}
#bar .hot i{margin-top:5px;width:46px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);box-shadow:0 0 0 .5px rgba(0,0,0,.3);opacity:.5;transition:opacity .3s;height:4px}
#bar.show .hot i{opacity:0}
.pill{display:flex;align-items:center;gap:6px;padding:5px 6px 5px 16px;max-width:calc(100vw - 16px);border-radius:999px;background:rgba(24,6,9,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.2);font-size:13px;transform:translateY(-90px);opacity:0;transition:transform .4s var(--spring),opacity .25s;pointer-events:auto}
#bar.show .pill,#bar:focus-within .pill{transform:none;opacity:1}
.pill b{font-weight:600;max-width:36vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:6px}
.pill .btn{height:30px;padding:0 13px;font-size:12.5px}
.pill a.os{color:inherit;opacity:.8}
#tap{position:fixed;inset:0;z-index:20;display:none;place-items:center;background:rgba(20,4,8,.7);backdrop-filter:blur(8px);cursor:pointer}
#tap.on{display:grid}
#tap .box b{font-size:30px}
@media (max-width:560px){.pill .lbl{display:none}.pill b{max-width:30vw}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}