/* ===== BB Billetterie — parcours d'achat (front bespoke) ===== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --bg:#0B0D10; --surface:#16181D; --hover:#1C1F26; --line:#1E2127;
  --text:#F4F5F7; --muted:#8A8F98; --faint:#5B6069;
  --accent: var(--bb-primary, #f00000); --on-accent:#fff;
  --green:#2DD4A7; --amber:#F5A623; --red:#F26D6D;
}
html,body { background:var(--bg); color:var(--text); }
body {
  font-family:var(--font-body,'Inter',system-ui,-apple-system,sans-serif); letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; min-height:100vh;
  /* Empêche le faux-gras synthétique sur mobile quand une police custom n'a pas la graisse demandée. */
  font-synthesis:none;
}
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }
a { color:inherit; }
/* police des titres (réglable depuis Réglages › Typographie) */
.hero h1, .intro h1, .conf h1, .evhead .t, .csec .cst h2, .ticket-panel h3 { font-family:var(--font-title,var(--font-body,inherit)); }
.bb-boot { min-height:100vh; display:flex; align-items:center; justify-content:center; color:var(--muted); }

/* ----- shell ----- */
.screen { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.fill { flex:1; }
.pad-bottom { padding-bottom:6.4rem; }

/* sticky action bar */
.bar { position:fixed; bottom:0; left:0; right:0; display:flex; align-items:center; gap:1rem; padding:1rem 1.3rem 1.25rem; background:linear-gradient(to top,var(--bg) 72%,transparent); z-index:30; }
.bar .grow { flex:1; min-width:0; }
.bar .l { font-size:0.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
.bar .v { font-size:1.15rem; font-weight:800; letter-spacing:-0.02em; margin-top:0.1rem; }
.btn-cta { background:var(--accent); color:var(--on-accent); border:none; border-radius:14px; padding:1.05rem 1.7rem; font:inherit; font-family:var(--font-button,var(--font-body,inherit)); font-weight:800; font-size:1rem; box-shadow:0 12px 30px -10px color-mix(in srgb,var(--accent) 55%,transparent); }
.btn-cta.full { width:100%; }
.btn-cta:active { transform:scale(0.97); }
.btn-cta:disabled, .btn-cta[disabled] { background:var(--surface); color:var(--faint); box-shadow:none; cursor:not-allowed; transform:none; }
.btn-cta[disabled] { opacity:0.45; pointer-events:none; box-shadow:none; }

/* top bar (back) + step indicator */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.2rem 0.4rem; }
.topbar .bk { width:38px; height:38px; border-radius:50%; background:var(--surface); color:var(--text); border:none; font-size:1.3rem; display:flex; align-items:center; justify-content:center; }
.topbar .tt { font-weight:600; font-size:1rem; }
.topbar .sp { width:38px; }
.steps { display:flex; gap:0.4rem; padding:0.4rem 1.3rem 0.2rem; }
.steps i { flex:1; height:4px; border-radius:2px; background:var(--line); }
.steps i.on { background:var(--accent); }

/* ===== ÉVÉNEMENT ===== */
.hero { position:relative; min-height:360px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:1.3rem 1.3rem 1.5rem; background:#16181D; }
.hero::before { content:''; position:absolute; inset:0; z-index:0; background:#16181D var(--poster,none) center/cover no-repeat; }
.hero::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to top,var(--bg) 2%,transparent 58%),linear-gradient(to bottom,rgba(0,0,0,0.5),transparent 32%); }
.hero .top { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; padding:1.1rem 1.2rem; z-index:3; }
.hero .ic { width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,0.32); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; border:none; font-size:1.05rem; }
.hero .htxt { position:relative; z-index:2; }
.chip { display:inline-block; background:rgba(0,0,0,0.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; padding:0.4rem 0.7rem; border-radius:8px; margin-bottom:0.9rem; }
.hero h1 { font-size:2rem; font-weight:900; letter-spacing:-0.035em; line-height:1.05; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,0.35); }

.meta { padding:1.4rem 1.3rem 0; display:flex; flex-direction:column; gap:1rem; }
.mrow { display:flex; align-items:center; gap:0.9rem; }
.mrow .mi { width:42px; height:42px; border-radius:12px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; }
.mrow .mi svg { width:20px; height:20px; }
.mrow .mt { font-size:0.95rem; font-weight:600; }
.mrow .ms { font-size:0.8rem; color:var(--muted); margin-top:0.15rem; }
.sec { padding:1.6rem 1.3rem 0; }
.sec h2 { font-size:0.76rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; margin-bottom:0.7rem; }
.sec p { font-size:0.95rem; line-height:1.6; color:#cfd2d8; }
.org { display:flex; align-items:center; gap:0.75rem; margin:1.5rem 1.3rem 0; padding-top:1.3rem; border-top:1px solid var(--line); }
.org .av { width:42px; height:42px; border-radius:50%; background:#23262E; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem; color:#fff; flex-shrink:0; }
.org .ot { font-size:0.92rem; font-weight:600; }
.org .os { font-size:0.78rem; color:var(--muted); margin-top:0.1rem; }

/* ===== BILLETS ===== */
.evhead { padding:0.3rem 1.3rem 0.4rem; }
.evhead .t { font-size:1.4rem; font-weight:800; letter-spacing:-0.03em; line-height:1.1; }
.evhead .d { color:var(--muted); font-size:0.85rem; margin-top:0.35rem; }
.lab { padding:1.3rem 1.3rem 0.3rem; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; }
.tier { margin:0.65rem 1.3rem; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.05rem 1.1rem; display:flex; align-items:center; gap:1rem; transition:border-color .15s,background .15s; animation:rise 0.5s ease-out both; }
.tier.sel { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); }
.tier .info { flex:1; min-width:0; }
.tier .nm { font-weight:700; font-size:1.02rem; display:flex; align-items:center; gap:0.5rem; }
.tier .pop { background:rgba(245,166,35,0.16); color:var(--amber); font-size:0.6rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; padding:0.2rem 0.45rem; border-radius:6px; }
.tier .ds { color:var(--muted); font-size:0.8rem; margin-top:0.25rem; }
.tier .pp { font-weight:800; font-size:1rem; margin-top:0.55rem; }
.tier .pp small { color:var(--muted); font-weight:500; font-size:0.74rem; }
.step { display:flex; align-items:center; gap:0.65rem; flex-shrink:0; }
.step button { width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--hover); color:var(--text); font-size:1.35rem; line-height:1; display:flex; align-items:center; justify-content:center; }
.step button.pl { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.step button:disabled { opacity:0.4; }
.step button:active { transform:scale(0.9); }
.step .q { min-width:16px; text-align:center; font-weight:800; font-size:1.05rem; }

/* ===== INFOS ===== */
.intro { padding:1.1rem 1.3rem 0.2rem; }
.intro h1 { font-size:1.55rem; font-weight:800; letter-spacing:-0.03em; }
.intro p { color:var(--muted); font-size:0.9rem; margin-top:0.4rem; }
.field { margin:1.1rem 1.3rem 0; }
.field label { display:block; font-size:0.78rem; color:var(--muted); font-weight:600; margin-bottom:0.5rem; }
.field .inp { position:relative; }
.field .inp > svg { position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--faint); }
.field input { width:100%; height:54px; border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--text); font:inherit; font-size:0.98rem; font-weight:500; padding:0 1rem; }
.field input.has-ic { padding-left:2.9rem; }
.field input::placeholder { color:var(--faint); font-weight:400; }
.field input:focus { outline:none; border-color:var(--accent); }
.field .hint { font-size:0.76rem; color:var(--faint); margin-top:0.5rem; }
.phone-row { display:flex; gap:0.5rem; }
.phone-row .phone-cc { flex:0 0 auto; max-width:42%; height:54px; border:1px solid var(--line); border-radius:13px; background:var(--surface); color:var(--text); font:inherit; font-size:0.95rem; font-weight:600; padding:0 0.6rem; -webkit-appearance:none; appearance:none; }
.phone-row .phone-cc:focus { outline:none; border-color:var(--accent); }
.phone-row .phone-num { flex:1; min-width:0; }
.field .err { color:var(--red); }
.note { margin:1.5rem 1.3rem 0; display:flex; align-items:center; gap:0.65rem; color:var(--muted); font-size:0.86rem; background:var(--surface); border-radius:12px; padding:0.9rem 1rem; }
.note svg { width:18px; height:18px; color:var(--green); flex-shrink:0; }

/* ===== PAIEMENT ===== */
.recap { margin:0 1.3rem; background:var(--surface); border-radius:14px; padding:0.5rem 1.1rem; }
.recap .r { display:flex; justify-content:space-between; align-items:center; padding:0.7rem 0; font-size:0.92rem; }
.recap .r + .r { border-top:1px solid var(--line); }
.recap .r .k small { color:var(--muted); }
.recap .r.tot { font-weight:800; font-size:1.05rem; }
.recap .r.tot .v { color:var(--accent); }
.method { margin:0 1.3rem 0.65rem; display:flex; align-items:center; gap:0.9rem; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:0.9rem 1.1rem; }
.method.sel { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,transparent); }
.method .lg { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.82rem; flex-shrink:0; background:var(--hover); color:var(--text); overflow:hidden; }
.method .lg img { width:100%; height:100%; object-fit:contain; }
.method .mn { flex:1; font-weight:700; font-size:0.98rem; }
.method .mn small { display:block; color:var(--muted); font-weight:500; font-size:0.78rem; margin-top:0.15rem; }
.method .rad { width:22px; height:22px; border-radius:50%; border:2px solid var(--line); flex-shrink:0; position:relative; }
.method.sel .rad { border-color:var(--accent); }
.method.sel .rad::after { content:''; position:absolute; inset:4px; border-radius:50%; background:var(--accent); }
.pay { margin:0.4rem 1.3rem 0; background:var(--surface); border-radius:16px; padding:1.1rem; }
.pay .ps { display:flex; gap:0.8rem; padding:0.4rem 0; }
.pay .ps .n { width:24px; height:24px; border-radius:50%; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); font-size:0.76rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pay .ps .tx { font-size:0.9rem; line-height:1.45; color:#cfd2d8; }
.pay .ps .tx b { color:var(--text); }
.numbox { display:flex; align-items:center; justify-content:space-between; margin:0.6rem 0 0.2rem 2.4rem; padding:0.75rem 0.5rem 0.75rem 1rem; background:var(--hover); border-radius:11px; }
.numbox .v { font-weight:800; font-size:1.1rem; letter-spacing:0.03em; }
.numbox button { background:none; border:none; color:var(--accent); font:inherit; font-weight:700; font-size:0.82rem; padding:0.4rem 0.7rem; }
.trust { margin:1.3rem 1.3rem 0; display:flex; align-items:flex-start; gap:0.6rem; color:var(--muted); font-size:0.82rem; line-height:1.45; }
.trust svg { width:16px; height:16px; color:var(--green); flex-shrink:0; margin-top:0.1rem; }

.consent { display:flex; align-items:flex-start; gap:0.6rem; margin:1.1rem 1.3rem 0; color:var(--muted); font-size:0.84rem; line-height:1.45; cursor:pointer; }
.consent input { width:18px; height:18px; flex-shrink:0; margin-top:0.12rem; accent-color:var(--accent); }
.consent a { color:var(--text); text-decoration:underline; }
.checkout-aside .consent { margin:1rem 0 0; }

.urgency { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.1rem 1.3rem 0; }
.urgency .u-chip { display:inline-flex; align-items:center; gap:.35rem; font-size:0.82rem; font-weight:600; padding:.42rem .75rem; border-radius:999px; background:var(--surface); color:var(--muted); border:1px solid var(--line); }
.urgency .u-chip svg { width:14px; height:14px; }
.urgency .u-chip.hot { color:var(--amber); border-color:color-mix(in srgb,var(--amber) 35%,transparent); background:color-mix(in srgb,var(--amber) 12%,var(--surface)); }

/* Notification d'erreur en haut (mieux vue qu'en bas) */
.toast-err { position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; gap:.6rem; padding:.9rem 1.1rem; padding-top:max(.9rem,env(safe-area-inset-top)); background:var(--red); color:#fff; font-size:0.9rem; font-weight:600; line-height:1.35; box-shadow:0 8px 24px -8px rgba(0,0,0,0.55); animation:bbSlideDown .22s ease-out; }
.toast-err svg { width:18px; height:18px; flex-shrink:0; }
.toast-err span { flex:1; }
.toast-err .x { background:rgba(255,255,255,0.22); border:none; color:#fff; width:26px; height:26px; border-radius:50%; font-size:1.05rem; line-height:1; flex-shrink:0; cursor:pointer; }
@keyframes bbSlideDown { from { transform:translateY(-100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .toast-err { animation:none; } }

/* Accessibilité : focus clavier visible */
.method:focus-visible, .btn-cta:focus-visible, button:focus-visible, .consent input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ===== CONFIRMATION ===== */
.conf { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1.6rem; text-align:center; }
.conf .ico { width:84px; height:84px; border-radius:50%; background:rgba(245,166,35,0.14); display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; position:relative; }
.conf .ico::before { content:''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(245,166,35,0.18); }
.conf .ico svg { width:38px; height:38px; color:var(--amber); }
.conf h1 { font-size:1.7rem; font-weight:800; letter-spacing:-0.03em; line-height:1.1; }
.conf .sub { color:var(--amber); font-weight:600; font-size:0.95rem; margin-top:0.5rem; }
.conf .txt { color:var(--muted); font-size:0.95rem; line-height:1.6; margin-top:1rem; max-width:320px; }
.card { width:100%; max-width:360px; margin-top:1.8rem; background:var(--surface); border-radius:16px; overflow:hidden; }
.card .r { display:flex; justify-content:space-between; align-items:center; padding:0.95rem 1.1rem; font-size:0.9rem; }
.card .r + .r { border-top:1px solid var(--line); }
.card .r .k { color:var(--muted); }
.card .r .v { font-weight:700; }
.card .r .v.ref { color:var(--accent); letter-spacing:0.02em; }
.wa { display:flex; align-items:center; gap:0.55rem; margin-top:1.3rem; color:var(--muted); font-size:0.84rem; }
.wa svg { width:16px; height:16px; color:var(--green); }

/* ===== animations ===== */
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes slideUp { from { opacity:0; transform:translateY(100%); } to { opacity:1; transform:none; } }
@keyframes kenburns { from { transform:scale(1); } to { transform:scale(1.12); } }
.rise-1 { animation:rise 0.55s 0.10s ease-out both; }
.rise-2 { animation:rise 0.55s 0.18s ease-out both; }
.rise-3 { animation:rise 0.55s 0.26s ease-out both; }
.rise-4 { animation:rise 0.55s 0.34s ease-out both; }
.bar { animation:slideUp 0.45s 0.15s cubic-bezier(0.2,0.7,0.2,1) both; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }

/* ===== ticket panel (desktop) + skeletons + pulse ===== */
.ticket-panel { display:none; }
.panel-tot { display:flex; justify-content:space-between; align-items:baseline; margin:1.2rem 0 1rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.panel-tot .l { color:var(--muted); font-size:0.85rem; }
.panel-tot .v { font-size:1.4rem; font-weight:800; letter-spacing:-0.02em; }
.skel { height:84px; margin:0.65rem 1.3rem; border-radius:16px; background:linear-gradient(100deg,var(--surface) 30%,var(--hover) 50%,var(--surface) 70%); background-size:200% 100%; animation:shimmer 1.3s infinite; }
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
.conf .ico::before { animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform:scale(1); opacity:0.5; } 50% { transform:scale(1.14); opacity:0.12; } }

/* ===== robustesse responsive (rien ne déborde) ===== */
html, body { overflow-x:hidden; max-width:100%; }
.hero h1, .evhead .t, .intro h1, .conf h1, .sec p, .conf .txt, .mrow .mt, .mrow .ms, .checkout-aside .evmini .et, .checkout-aside .evmini .es { overflow-wrap:break-word; word-break:break-word; }
/* lieu long : retour à la ligne dans « ta commande » (max 2 lignes) au lieu de déborder */
.checkout-aside .evmini > div { min-width:0; flex:1; }
.checkout-aside .evmini .et { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bar .grow { min-width:0; }
.bar .grow .v, .bar .grow .l { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-cta { flex-shrink:0; max-width:100%; }
.recap .r .k, .checkout-aside .r .k { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recap .r .v, .checkout-aside .r .v { flex-shrink:0; white-space:nowrap; }
.recap .r, .checkout-aside .r { gap:0.6rem; }
.method .mn { min-width:0; } .method .mn small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.field input { max-width:100%; }
.numbox { gap:0.5rem; } .numbox .v { overflow:hidden; text-overflow:ellipsis; }
.tier .info { min-width:0; } .tier .nm { flex-wrap:wrap; }
.evhead .d, .panel-tot .l, .csec .cst h2 { overflow:hidden; text-overflow:ellipsis; }

/* ===== transition de vue (opacity — sûr avec la barre fixe) ===== */
.screen { animation:viewFade 0.26s ease both; }
@keyframes viewFade { from { opacity:0; } to { opacity:1; } }

/* ===== checkout combiné ===== */
.checkout-screen { padding-bottom:2rem; }
.checkout-grid { padding-bottom:1rem; }
.csec { margin:1.2rem 1.3rem 0; }
.csec .cst { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.9rem; }
.csec .cst .n { width:24px; height:24px; border-radius:50%; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); font-size:0.78rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.csec .cst h2 { font-size:1.02rem; font-weight:700; }
.csec .field { margin:0.9rem 0 0; }
.csec .method, .csec .pay { margin-left:0; margin-right:0; }
.checkout-aside { margin:1.4rem 1.3rem 0; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.4rem; }
.checkout-aside h3 { font-size:0.76rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); font-weight:700; margin-bottom:1rem; }
.checkout-aside .evmini { display:flex; gap:0.8rem; align-items:center; padding-bottom:1rem; margin-bottom:0.4rem; border-bottom:1px solid var(--line); }
.checkout-aside .evmini .th { width:48px; height:48px; border-radius:11px; background:#16181D center/cover no-repeat; flex-shrink:0; }
.checkout-aside .evmini .et { font-weight:700; font-size:0.92rem; line-height:1.25; }
.checkout-aside .evmini .es { color:var(--muted); font-size:0.78rem; margin-top:0.2rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.checkout-aside .r { display:flex; justify-content:space-between; padding:0.55rem 0; font-size:0.9rem; }
.checkout-aside .r .k small { color:var(--muted); }
.checkout-aside .r.tot { font-weight:800; font-size:1.1rem; padding-top:0.9rem; margin-top:0.4rem; border-top:1px solid var(--line); }
.checkout-aside .r.tot .v { color:var(--accent); }
.checkout-aside .btn-cta { margin-top:1.2rem; }
.checkout-aside .trust { margin:1rem 0 0; }

/* petits écrans : on resserre la barre */
@media (max-width:360px) {
  .bar { padding-left:1rem; padding-right:1rem; gap:0.6rem; }
  .btn-cta { padding-left:1.1rem; padding-right:1.1rem; }
}

/* ===== desktop ===== */
@media (min-width:760px) {
  .screen { max-width:560px; margin:0 auto; min-height:100vh; }
  .event-screen { max-width:none; }
  .hero { border-radius:0 0 24px 24px; }
  .event-screen .hero { border-radius:0; }
  .event-body { max-width:1040px; margin:0 auto; padding:2.4rem 1.3rem 3rem; display:grid; grid-template-columns:1fr 360px; gap:3rem; align-items:start; }
  .event-info .meta { padding:0; }
  .event-info .sec { padding:1.6rem 0 0; }
  .event-info .org { margin:1.5rem 0 0; }
  .ticket-panel { display:block; position:sticky; top:1.5rem; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.4rem; }
  .ticket-panel h3 { font-size:1.1rem; font-weight:800; margin-bottom:1.1rem; }
  .ticket-panel .tier { margin:0 0 0.7rem; }
  .ticket-panel .skel { margin:0 0 0.7rem; height:72px; }
  .event-bar { display:none; }
  .event-screen.pad-bottom { padding-bottom:0; }
  .bar { left:50%; transform:translateX(-50%); width:560px; max-width:100%; }
  .conf .card { max-width:420px; }
  /* checkout combiné 2-colonnes */
  .checkout-screen { max-width:none; }
  .checkout-grid { max-width:940px; margin:0 auto; padding:2rem 1.3rem 4rem; display:grid; grid-template-columns:1fr 340px; gap:2.6rem; align-items:start; }
  .csec { margin-left:0; margin-right:0; }
  .checkout-aside { position:sticky; top:1.5rem; margin:0; }
}