/* MRE 26 — immersive welcome scene. Each layer's wrapper takes the parallax transform, its child plays the intro. */
.immersive { --p:0; --tx:0; --ty:0; --h:100svh; position:relative; height:100svh; min-height:600px; max-height:940px; overflow:hidden; isolation:isolate; background:#07061a; }
.im-layer { position:absolute; pointer-events:none; will-change:transform; }

/* Sky, stadium and city: slowest layer, drifts down and zooms slightly as the visitor scrolls into the light. */
.im-sky { left:-14px; right:-14px; top:-9%; height:112%; transform:translate3d(calc(var(--tx) * -7px), calc(var(--p) * var(--h) * .5 + var(--ty) * -4px), 0); scale:calc(1 + var(--p) * .14); transform-origin:50% 62%; }
.im-sky-img { position:absolute; inset:0; background:url('/assets/immersion-ciel.webp') 50% 100% / cover no-repeat; animation:im-sky-in 2.4s cubic-bezier(.2,.7,.2,1) backwards; }
.im-sky:after { content:''; position:absolute; inset:0; background:linear-gradient(#07061af2 0%, #07061ad9 17%, #07061a73 34%, transparent 50%, transparent 78%, #07061a99 100%); }

/* Pillars of light: they descend on arrival, shimmer, then brighten as the visitor scrolls. */
.im-rays { inset:0 0 18%; mix-blend-mode:screen; transform:translate3d(calc(var(--tx) * -4px), calc(var(--p) * var(--h) * .42), 0); opacity:calc(.8 + var(--p) * .8); }
.im-rays-inner { position:absolute; inset:0; animation:im-rays-in 2.6s .5s cubic-bezier(.3,.6,.2,1) backwards; }
.im-rays i { position:absolute; top:-6%; bottom:0; border-radius:50%; background:linear-gradient(#fff0 0%, #fff4e81c 20%, #ffe8d066 58%, #ffd7b8aa 82%, #fff0 100%); filter:blur(5px); transform-origin:50% 100%; animation:im-shimmer 4s ease-in-out infinite alternate; }
.im-rays i:nth-child(1) { left:47%; width:6%; animation-duration:3.4s; }
.im-rays i:nth-child(2) { left:53.5%; width:3%; animation-duration:2.6s; animation-delay:-1s; }
.im-rays i:nth-child(3) { left:41%; width:4%; opacity:.7; animation-duration:4.6s; animation-delay:-2s; background:linear-gradient(#fff0, #e9c9ff30 30%, #f0b8ff55 80%, #fff0); }
.im-rays i:nth-child(4) { left:60%; width:5%; opacity:.75; animation-duration:3.9s; animation-delay:-.5s; background:linear-gradient(#fff0, #ffc1e030 30%, #ff9fd055 80%, #fff0); }
.im-rays i:nth-child(5) { left:36%; width:30%; opacity:.5; filter:blur(22px); animation-duration:6s; background:linear-gradient(#fff0 10%, #b98cff1c 50%, #ffd6f040 85%, #fff0); }

.im-particles { inset:0; width:100%; height:100%; transform:translate3d(calc(var(--tx) * -3px), calc(var(--p) * var(--h) * .36), 0); animation:im-fade 2s .4s backwards; }

/* Where the light touches the stadium. */
.im-halo { left:8%; right:8%; top:52%; height:22%; transform:translate3d(calc(var(--tx) * -5px), calc(var(--p) * var(--h) * .5), 0); opacity:calc(.75 + var(--p)); }
.im-halo:before { content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(ellipse at 50% 45%, #fff3de88 0%, #ffc49a3a 28%, #ff5aa81c 52%, transparent 72%); mix-blend-mode:screen; animation:im-halo-in 1.6s 1.7s ease-out backwards, im-breathe 5s 3.3s ease-in-out infinite alternate; }

/* The bottom of the scene melts into the page so the call to action stays readable. */
.immersive:after { content:''; position:absolute; left:0; right:0; bottom:0; height:36%; z-index:1; pointer-events:none; background:linear-gradient(transparent, #110f24b3 45%, var(--paper) 92%); }

/* Words: over the dark top of the sky, sinking slowly and fading out on scroll. */
.im-copy { position:absolute; left:28px; right:28px; top:104px; z-index:2; transform:translate3d(calc(var(--tx) * 4px), calc(var(--p) * var(--h) * .6), 0); opacity:calc(1 - var(--p) * 1.9); will-change:transform,opacity; }
.im-copy>* { animation:im-reveal 1.1s cubic-bezier(.2,.7,.2,1) backwards; }
.im-copy .eyebrow { animation-delay:.25s; }
.im-copy h1 { margin:14px 0 12px; font-size:35px; font-weight:780; line-height:1.08; letter-spacing:-1.4px; color:#fff; text-shadow:0 2px 30px #07061a; animation-delay:.45s; }
.im-copy h1 em { display:block; font-size:inherit; color:#ff64aa; text-shadow:0 0 28px #ff3c9a55, 0 2px 30px #07061a; }
.im-copy .subtitle { color:#e2daf2; text-shadow:0 1px 14px #07061a; animation-delay:.7s; }

.im-bottom { position:absolute; left:28px; right:28px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:3; animation:im-fade 1.2s 2s backwards; }
.im-bottom .event-meta { justify-content:center; padding:0 0 12px; color:#ddd3ee; text-shadow:0 1px 10px #07061a; }
.im-cta { box-shadow:0 0 0 1px #ff8cc255, 0 8px 34px #ff2d8f55; }
.im-cta .arrow { animation:im-nudge 1.8s ease-in-out infinite; }

/* The header floats over the scene; the fixed form bar steps aside while the scene fills the screen. */
body.immersive-page .brand-header { position:absolute; top:0; left:0; right:0; z-index:5; border-bottom-color:#ffffff1a; animation:im-fade 1.2s .2s backwards; }
.action-bar { transition:transform .45s cubic-bezier(.2,.7,.2,1); }
body.hero-in-view .action-bar { transform:translate(-50%, 130%); }
.form-view { padding-top:28px; }


@keyframes im-sky-in { from { opacity:0; transform:scale(1.2); filter:brightness(.3) saturate(.6); } }
@keyframes im-rays-in { from { opacity:0; clip-path:inset(0 0 100% 0); } to { opacity:1; clip-path:inset(0 0 0 0); } }
@keyframes im-shimmer { from { opacity:.55; transform:scaleX(.7); } to { opacity:1; transform:scaleX(1.25); } }
@keyframes im-halo-in { from { opacity:0; transform:scale(.4); } 60% { opacity:1; transform:scale(1.15); } }
@keyframes im-breathe { from { opacity:.7; transform:scale(.94); } to { opacity:1; transform:scale(1.06); } }
@keyframes im-rise { from { transform:translateY(75%); } }
@keyframes im-rise-back { from { transform:scaleX(-1) translateY(70%); } }
@keyframes im-reveal { from { opacity:0; transform:translateY(22px); filter:blur(12px); } }
@keyframes im-fade { from { opacity:0; } }
@keyframes im-nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(4px); } }

@media(max-width:359px) { .im-copy { left:20px; right:20px; top:92px; } .im-copy h1 { font-size:30px; } .im-bottom { left:20px; right:20px; } }
@media(max-height:680px) { .im-copy { top:92px; } .im-copy h1 { font-size:30px; } .im-copy .subtitle { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .im-layer, .im-copy { will-change:auto; } }

/* ---- Ticket page: the celebration. Everything arrives in sequence, then keeps breathing. */
.celebration { position:fixed; inset:0; width:100%; height:100%; z-index:30; pointer-events:none; }
.ticket-view { position:relative; isolation:isolate; }
.ticket-view .reserved-tag { animation:tk-pop .7s .25s cubic-bezier(.3,1.6,.5,1) backwards; }
.ticket-view .reserved-tag .icon { stroke-dasharray:60; stroke-dashoffset:60; animation:tk-draw .9s .55s ease-out forwards; }
.ticket-view h1, .ticket-view .subtitle { animation:im-reveal 1s cubic-bezier(.2,.7,.2,1) backwards; }
.ticket-view .subtitle { animation-delay:.85s; }
.ticket-view h1 { animation-delay:.45s; font-size:min(30px, calc((100vw - 56px) / 11.6)); letter-spacing:-.05em; line-height:1.18; }
.ticket-view h1 em { display:block; }
.ticket-view .subtitle { max-width:330px; font-size:13.5px; line-height:1.6; }
.ticket-view h1 em { animation:im-reveal 1s .65s cubic-bezier(.2,.7,.2,1) backwards; text-shadow:0 0 30px #ff3c9a55; }
.countdown { perspective:700px; }
.countdown-cell { overflow:hidden; animation:tk-flip .8s cubic-bezier(.2,.8,.2,1) backwards; }
.countdown-cell:nth-child(1) { animation-delay:1.05s; } .countdown-cell:nth-child(2) { animation-delay:1.17s; } .countdown-cell:nth-child(3) { animation-delay:1.29s; } .countdown-cell:nth-child(4) { animation-delay:1.41s; }
.countdown-cell:before { box-shadow:0 0 12px 1px #ff5aa8; animation:tk-glowline 2.4s ease-in-out infinite alternate; }
.countdown-cell strong { display:block; }
.countdown-cell strong.tick { animation:tk-roll .45s cubic-bezier(.2,.8,.2,1); }
.tk-count-title { display:flex; align-items:center; justify-content:center; gap:10px; margin:24px 0 0; color:#72b0ff; font-size:12px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; text-shadow:0 0 16px #3d8bff66; animation:im-fade 1s .95s backwards; }
.tk-count-title:before, .tk-count-title:after { content:''; width:22px; height:1px; background:linear-gradient(90deg, transparent, #72b0ff); }
.tk-count-title:after { transform:scaleX(-1); }
.ticket-view .countdown { margin-top:12px; }
.ticket-stage { --rx:0deg; --ry:0deg; perspective:1100px; margin:25px auto 22px; }
.ticket-stage .ticket { margin:0; transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .12s linear; animation:tk-rise 1.2s 1.5s cubic-bezier(.2,.8,.2,1) backwards; box-shadow:0 30px 60px -20px #ff2d8f33, 0 12px 35px #0006; }
.tk-rays { position:absolute; inset:0; overflow:hidden; pointer-events:none; mix-blend-mode:screen; }
.tk-rays i { position:absolute; top:-30%; bottom:0; border-radius:50%; filter:blur(5px); transform-origin:50% 100%; background:linear-gradient(#fff0 0%, #fff4e828 30%, #ffe8d066 70%, #fff0 100%); animation:im-shimmer 4s ease-in-out infinite alternate; }
.tk-rays i:nth-child(1) { left:62%; width:9%; animation-duration:3.6s; }
.tk-rays i:nth-child(2) { left:70%; width:4%; animation-duration:2.8s; animation-delay:-1.2s; background:linear-gradient(#fff0, #ffc1e030 30%, #ff9fd066 75%, #fff0); }
.tk-rays i:nth-child(3) { left:52%; width:22%; opacity:.5; filter:blur(18px); animation-duration:5.5s; background:linear-gradient(#fff0 10%, #b98cff1c 50%, #ffd6f040 85%, #fff0); }
.qr-lock span { animation:tk-lock 2.4s 2.8s ease-in-out infinite alternate; }
.ticket-view #calendar, .ticket-reminder, .ticket-view .mock-note { animation:im-fade 1s 2.4s backwards; }
@keyframes tk-pop { from { opacity:0; transform:scale(.5); } }
@keyframes tk-draw { to { stroke-dashoffset:0; } }
@keyframes tk-flip { from { opacity:0; transform:rotateX(-95deg) translateY(18px); } }
@keyframes tk-glowline { from { opacity:.45; width:30%; left:35%; } to { opacity:1; width:64%; left:18%; } }
@keyframes tk-roll { from { opacity:0; transform:translateY(-55%); } }
@keyframes tk-rise { from { opacity:0; transform:rotateX(22deg) translateY(70px) scale(.92); } }
@keyframes tk-lock { to { box-shadow:0 3px 22px 4px #ff5aa855; transform:scale(1.06); } }
@media(prefers-reduced-motion:reduce) { .celebration { display:none; } .ticket-view .reserved-tag .icon { stroke-dashoffset:0; } }

.ticket-unlock { line-height:1.5; }
.ticket-unlock strong { color:#ffc0e0; }

/* ---- The visitor's space: four panels under one bottom tab bar. */
.tab-bar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(100%, 480px); display:flex; z-index:20; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:#110f24fa; border-top:1px solid #3b304a; }
.tab-bar button { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-height:54px; padding:7px 4px 5px; border:0; border-radius:12px; background:none; color:#a79bb7; font-size:10.5px; font-weight:650; letter-spacing:.2px; transition:color .2s, background .2s; }
.tab-bar button .icon { width:22px; height:22px; transition:transform .25s cubic-bezier(.3,1.6,.5,1); }
.tab-bar button[aria-selected="true"] { color:#ff64aa; background:#2a1c3a; }
.tab-bar button[aria-selected="true"] .icon { transform:translateY(-1px) scale(1.12); }
.tab-bar button:active .icon { transform:scale(.9); }
.ticket-page .page-footer { padding-bottom:110px; }
.tab-panel.tab-enter { animation:im-reveal .45s cubic-bezier(.2,.7,.2,1); }
.tab-head { text-align:left; margin-bottom:22px; }
.tab-head h1 { font-size:30px; margin:12px 0 0; line-height:1.15; letter-spacing:-1.2px; }
.faq-head { margin-top:30px; }
.faq-head h1 { font-size:24px; }
.info-block { text-align:left; background:#1c1630; border:1px solid #3f3252; border-radius:14px; padding:16px; margin-bottom:12px; }
.info-block.accent { background:#2b1a33; border-color:#6b3a66; }
.info-block h2 { display:flex; align-items:center; gap:9px; font-size:15px; margin-bottom:8px; color:#fff; }
.info-block h2 .icon { width:18px; height:18px; color:#ff8fc8; flex-shrink:0; }
.info-block p { font-size:13px; line-height:1.6; color:#c9bfd8; }
.info-block p strong { color:#fff; font-size:15px; }
.info-list { margin:0; padding-left:18px; font-size:13px; line-height:1.7; color:#c9bfd8; }
.zone-map { margin:14px -6px 0; }
.zone-map .seat-plan { animation:none; transform:none; }
.zone-map .seat-plan * { animation:none !important; pointer-events:none; }
.zone-map .frozen .zone { cursor:default; }
.status-card { text-align:left; background:#1c1630; border:1px solid #3f3252; border-radius:14px; padding:16px; margin-bottom:14px; }
.status-steps { list-style:none; margin:14px 0 0; padding:0; font-size:13px; color:#c9bfd8; }
.status-steps li { position:relative; padding:5px 0 5px 24px; }
.status-steps li:before { content:''; position:absolute; left:4px; top:10px; width:9px; height:9px; border-radius:50%; border:2px solid #7d7699; }
.status-steps li.done:before { background:#6fdc9d; border-color:#6fdc9d; }
.status-steps li.done { color:#e9e2f3; }
.account-list { margin:0 0 12px; text-align:left; }
.account-list div { display:flex; justify-content:space-between; gap:14px; padding:12px 2px; border-bottom:1px solid #33294a; font-size:13px; }
.account-list dt { color:#a79bb7; flex-shrink:0; }
.account-list dd { margin:0; color:#fff; font-weight:650; text-align:right; overflow-wrap:anywhere; }
.account-note { font-size:11.5px; line-height:1.6; color:#a79bb7; text-align:left; margin-bottom:18px; }
/* Installable app: the card in the Compte tab and the "new version" bar */
.install-card { display:flex; gap:14px; align-items:flex-start; text-align:left; padding:14px; border-radius:16px; background:#1c1630; border:1px solid #3f3252; margin:0 0 18px; }
.install-card img { flex:none; border-radius:13px; box-shadow:0 6px 18px #0006; }
.install-card strong { display:flex; align-items:center; gap:6px; font-size:14px; }
.install-card strong .icon { width:16px; height:16px; color:#6fdc9d; }
.install-card p { margin:4px 0 0; font-size:12.5px; line-height:1.55; color:#c9bfd8; }
.install-card .install-how .icon { width:14px; height:14px; vertical-align:-2px; }
.install-card .primary { margin:10px 0 0; min-height:40px; padding:0 14px; font-size:13px; display:inline-flex; align-items:center; gap:8px; width:auto; }
.install-card .primary .icon { width:16px; height:16px; }
.pwa-toast { position:fixed; left:16px; right:16px; bottom:calc(env(safe-area-inset-bottom) + 78px); z-index:80; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:14px; background:#1d1934; border:1px solid #ff60a566; color:#fff; font-size:13px; box-shadow:0 12px 30px #0009; animation:im-fade .3s; }
.pwa-toast button { flex:none; border:0; border-radius:10px; padding:8px 12px; background:#ff2d8f; color:#fff; font-weight:700; font-size:13px; }
.faq { text-align:left; margin-bottom:14px; }
.faq details { background:#1c1630; border:1px solid #3f3252; border-radius:12px; margin-bottom:8px; overflow:hidden; }
.faq summary { list-style:none; cursor:pointer; padding:14px 40px 14px 16px; font-size:14px; font-weight:650; color:#fff; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:after { content:'+'; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:20px; color:#ff8fc8; transition:transform .25s; }
.faq details[open] summary:after { transform:translateY(-50%) rotate(45deg); }
.faq p { padding:0 16px 14px; font-size:13px; line-height:1.65; color:#c9bfd8; animation:im-fade .3s; }
.faq p strong { color:#fff; }
.wa-link { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; min-height:44px; padding:10px 14px; border-radius:8px; background:#1f8a4c; color:#fff; font-size:13px; font-weight:650; text-decoration:none; }
.wa-link:hover { background:#25a35a; }
.wa-link .icon { width:16px; height:16px; }

/* Access only: daylight 3D navigation inside the existing account. */
.access-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin:2px 0 18px; text-align:left; }
.access-heading h1 { font-size:26px; letter-spacing:-1px; margin:9px 0 0; line-height:1.14; }
.access-heading h1 em { color:#9ec5ff; }
.access-mode { margin-top:4px; flex-shrink:0; padding:6px 7px; border:1px solid #628bcc45; border-radius:5px; color:#a5c8ff; font-size:8px; font-weight:750; letter-spacing:.65px; }
.guide { position:relative; margin:0 0 14px; border:1px solid #c8d5e2; border-radius:22px; overflow:hidden; background:#d4e2eb; box-shadow:0 14px 38px #0003; text-align:left; isolation:isolate; }
.guide-stage { position:relative; height:clamp(500px,70svh,650px); overflow:hidden; background:linear-gradient(#b3cfe9,#edf2f5 52%,#cedbdb); }
.guide-stage canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.guide-stage:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(#273a5410,transparent 24%,transparent 69%,#192c441c); }
.guide-direction { position:absolute; top:14px; left:12px; right:12px; display:flex; gap:12px; align-items:center; padding:14px 13px; border-radius:15px; background:#175deb; color:white; box-shadow:0 8px 22px #124aba30; }
.guide-turn { display:grid; place-items:center; flex:0 0 38px; line-height:1; }
.guide-turn .icon { width:34px; height:34px; }
.guide-direction>div { min-width:0; }
.guide-kicker { display:block; font-size:8px; font-weight:750; letter-spacing:1.25px; color:#d0e3ff; margin-bottom:5px; }
.guide-hud { display:block; font-size:16px; font-weight:750; line-height:1.25; letter-spacing:-.3px; }
.guide-instruction { display:block; margin-top:5px; font-size:10px; line-height:1.45; color:#e4edff; }
.guide-simulation { position:absolute; top:126px; left:15px; background:#f7fafce8; border-radius:6px; padding:5px 7px; color:#53647a; font-size:7px; letter-spacing:.6px; font-weight:800; }
/* Optional day / night switch (not in the markup for now): a small round button under the overview button. */
.guide-theme { position:absolute; right:26px; top:236px; width:36px; height:36px; padding:0; display:grid; place-items:center; border:1px solid #ffffff55; border-radius:50%; background:#ffffffb0; color:#19457e; }
.guide-theme span { display:none; }
.guide-theme .icon { width:18px; height:18px; }
.guide-overview { position:absolute; right:12px; top:164px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:64px; min-height:64px; border:1px solid #fff; border-radius:13px; background:#ffffffed; color:#19457e; box-shadow:0 4px 16px #30496618; }
.guide-overview .icon { width:22px; height:22px; }
.guide-overview span { max-width:58px; text-align:center; font-size:9px; line-height:1.2; }
.guide-overview[aria-pressed="true"] { background:#e7f0ff; border-color:#6b9cfc; }
.guide-minimap { position:absolute; right:12px; bottom:154px; width:100px; height:111px; border:3px solid #fff; border-radius:14px; background:#f2f6f9ed; overflow:hidden; box-shadow:0 4px 18px #1b36552b; pointer-events:none; }
.guide-minimap svg { display:block; height:92px; width:100%; }
.guide-minimap>span { display:block; text-align:center; font-size:6px; font-weight:800; letter-spacing:.8px; color:#5c6d81; }
.mini-road { fill:none; stroke:#c7d1dd; stroke-width:45; }
.mini-bowl { fill:#bdd5c8; stroke:#9ba9b7; stroke-width:24; }
.mini-route { fill:none; stroke:#2468ef; stroke-width:26; stroke-linejoin:round; stroke-linecap:round; }
.mini-end { fill:#fff; stroke:#155be2; stroke-width:17; }
.mini-you { fill:#164ebc; stroke:#fff; stroke-width:17; }
.guide-dashboard { position:absolute; left:10px; right:10px; bottom:10px; border:1px solid #fff; border-radius:16px; padding:13px 13px 9px; background:#fffffff5; color:#182c45; box-shadow:0 8px 24px #172c4524; }
.guide-destination { display:flex; align-items:center; gap:9px; }
.guide-destination-icon { display:grid; place-items:center; width:31px; height:31px; flex-shrink:0; background:#e9f1ff; color:#2260d5; border-radius:10px; }
.guide-destination-icon .icon { width:17px; height:17px; }
.guide-destination>div { flex:1; min-width:0; }
.guide-destination small { display:block; font-size:7px; font-weight:800; letter-spacing:1.1px; color:#6a7890; margin-bottom:3px; }
.guide-destination strong { display:block; font-size:12px; line-height:1.3; }
.guide-progress-label { color:#3972d2; font-size:12px; font-weight:750; white-space:nowrap; font-variant-numeric:tabular-nums; }
.guide-progress { --progress:0%; display:block; width:100%; margin:7px 0 2px; height:24px; padding:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; }
.guide-progress::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:linear-gradient(to right,#2368f0 var(--progress),#dde6f1 var(--progress)); }
.guide-progress::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; margin-top:-5px; width:14px; height:14px; border-radius:50%; background:#2466e9; border:3px solid white; box-shadow:0 0 0 1px #aac7fc; }
.guide-progress::-moz-range-track { height:4px; background:#dde6f1; }
.guide-progress::-moz-range-progress { height:4px; background:#2368f0; }
.guide-progress::-moz-range-thumb { width:9px; height:9px; border:3px solid white; border-radius:50%; background:#2466e9; }
.guide-controls { display:flex; align-items:center; gap:7px; }
.guide-controls button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:36px; border:0; border-radius:9px; background:#edf3fd; color:#1d58ba; font-size:12px; font-weight:750; padding:6px 10px; }
.guide-controls .icon { width:18px; height:18px; flex-shrink:0; }
.guide-controls .guide-replay { min-width:36px; padding:0; background:transparent; }
.guide-controls .guide-replay .icon { width:22px; height:22px; }
.guide-phase { flex:1; text-align:center; color:#738198; font-size:10px; }
.guide button:focus-visible,.guide input:focus-visible { outline:3px solid #234fac; outline-offset:3px; }
.gd-label { position:absolute; left:0; top:0; width:0; height:0; pointer-events:none; transition:opacity .15s; }
.gd-label span { position:absolute; bottom:9px; transform:translateX(-50%); white-space:nowrap; padding:6px 9px; border-radius:8px; background:#fff; border:1px solid #c1d1e3; color:#244264; font:750 10px "Segoe UI",Arial,sans-serif; box-shadow:0 3px 10px #23456220; }
.gd-label span:after { content:''; position:absolute; left:50%; top:100%; margin-left:-4px; border:4px solid transparent; border-top-color:#fff; }
.gd-seat span { color:white; background:#1765e9; border-color:#1765e9; }
.gd-seat span:after { border-top-color:#1765e9; }
.gd-street span { color:#4d637b; font-size:8px; font-weight:650; padding:3px 6px; background:#ffffffe0; border:0; box-shadow:none; }
.gd-street span:after { display:none; }
.guide-details { border:1px solid #3f3252; border-radius:14px; margin:0 0 14px; overflow:hidden; background:#1c1630; }
.guide-details summary { padding:15px 13px; cursor:pointer; font-size:12px; font-weight:650; color:#d5d9ed; text-align:center; }
.guide-steps { list-style:none; padding:0 9px 9px; margin:0; text-align:left; }
.guide-steps li { display:flex; gap:10px; padding:10px 8px; border-radius:8px; color:#aaa4bd; font-size:11px; line-height:1.5; text-align:left; }
.guide-steps li > span:last-child { flex:1; min-width:0; }
.guide-steps strong { display:block; font-size:12px; color:#d9dded; margin-bottom:3px; }
.guide-steps li.active { background:#29334e; color:#d7e3ff; }
.gd-num { display:grid; place-items:center; flex:0 0 24px; height:24px; background:#2b2943; color:#b9c7e0; border-radius:8px; font-size:10px; font-weight:750; }
.guide-steps .active .gd-num { background:#2165e9; color:#fff; }
.guide-steps .done .gd-num { background:#214537; color:#bef1d9; }
.guide-static { position:absolute; inset:165px 12px 160px; display:grid; place-items:center; }
.guide-static svg { width:100%; max-height:100%; }
.guide-fallback { position:absolute; left:20px; right:20px; bottom:145px; color:#354e6c; font-size:11px; line-height:1.4; }
@media(max-width:359px) { .guide-hud { font-size:14px; } .guide-direction { gap:7px; padding:12px 9px; } .guide-kicker { letter-spacing:.6px; } .access-heading h1 { font-size:23px; } .access-mode { font-size:7px; } }
/* Night mode: same layout, dark scene and dark cards; the blue direction card stays. */
.guide.night { border-color:#3f3252; background:#0b0917; box-shadow:0 14px 38px #0006; }
.guide.night .guide-stage { background:linear-gradient(#2a1d4d,#1a1433 38%,#0b0917 70%); }
.guide.night .guide-stage:after { background:linear-gradient(#0b091733,transparent 24%,transparent 69%,#0b091766); }
.guide.night .guide-simulation { background:#110f24e0; color:#b9b0cc; }
.guide.night .guide-overview { background:#151229f2; border-color:#3f3252; color:#d9d1e8; box-shadow:0 4px 16px #00000040; }
.guide.night .guide-theme { background:#15122999; border-color:#ffffff22; color:#b9b0cc; }
.guide.night .guide-overview[aria-pressed="true"] { background:#25204a; border-color:#6b9cfc; }
.guide.night .guide-minimap { background:#151229f2; border-color:#3f3252; }
.guide.night .guide-minimap>span { color:#9d94b5; }
.guide.night .mini-road { stroke:#3a3155; }
.guide.night .mini-bowl { fill:#2b3a4a; stroke:#4a4266; }
.guide.night .mini-route { stroke:#ff4fa0; }
.guide.night .mini-end { fill:#151229; stroke:#ff4fa0; }
.guide.night .mini-you { stroke:#151229; fill:#ff8fc8; }
.guide.night .guide-dashboard { background:#151229f5; border-color:#3f3252; color:#e9e2f3; box-shadow:0 8px 24px #00000055; }
.guide.night .guide-destination-icon { background:#25204a; color:#9ec5ff; }
.guide.night .guide-destination small { color:#9d94b5; }
.guide.night .guide-progress-label { color:#ff8fc8; }
.guide.night .guide-progress::-webkit-slider-runnable-track { background:linear-gradient(to right,#ff4fa0 var(--progress),#2b2645 var(--progress)); }
.guide.night .guide-progress::-webkit-slider-thumb { background:#ff4fa0; border-color:#151229; box-shadow:0 0 0 1px #ff4fa0; }
.guide.night .guide-progress::-moz-range-track { background:#2b2645; }
.guide.night .guide-progress::-moz-range-progress { background:#ff4fa0; }
.guide.night .guide-progress::-moz-range-thumb { background:#ff4fa0; border-color:#151229; }
.guide.night .guide-controls button { background:#25204a; color:#c9d8ff; }
.guide.night .guide-controls .guide-replay { background:transparent; }
.guide.night .guide-phase { color:#9d94b5; }
.guide.night .gd-label span { background:#151229f2; border-color:#4a4266; color:#e9e2f3; box-shadow:0 3px 10px #00000060; }
.guide.night .gd-label span:after { border-top-color:#151229; }
.guide.night .gd-seat span { background:#1765e9; border-color:#1765e9; }
.guide.night .gd-seat span:after { border-top-color:#1765e9; }
.guide.night .gd-street span { background:#110f24cc; color:#c9bfd8; }
.guide.night .guide-fallback { color:#c9bfd8; }
@media(prefers-reduced-motion:reduce) { .guide * { animation:none!important; transition:none!important; } }

/* ---- Voice call with the ticketing assistant: laid out like a phone's call screen */
.call-button { margin-top:10px; }
.call-note { font-size:11px !important; color:#a79bb7 !important; margin-top:8px !important; }
body.call-open { overflow:hidden; }
/* Call screen: a phone call, dressed up. Three aurora blobs drift behind a grain layer (built once at mount, so state
   changes never restart them); the assistant's photo sits in a rotating halo that breathes with her voice (--level, 0 to
   1, set by call.js from an analyser) and the bars under the timer follow her voice too; a green ring around the micro
   button lights up when the caller speaks (--mic); the ring around the photo empties during the five-second countdown
   after the hang-up. */
.call { position:fixed; inset:0; z-index:70; background:#0b0917; color:#f7f5ff; animation:im-fade .3s; overflow:hidden; contain:paint; isolation:isolate; }
.call audio { display:none; }
.call-sky { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.call-blob { position:absolute; width:55vmax; height:55vmax; border-radius:50%; filter:blur(48px); opacity:.5; will-change:transform; }
.call-blob.b1 { left:-25vmax; top:-30vmax; background:radial-gradient(circle at 40% 40%, #ff2d8f, transparent 62%); animation:call-drift1 26s ease-in-out infinite alternate; }
.call-blob.b2 { right:-30vmax; top:10vmax; background:radial-gradient(circle at 50% 50%, #6a3df5, transparent 62%); animation:call-drift2 31s ease-in-out infinite alternate; }
.call-blob.b3 { left:-10vmax; bottom:-35vmax; background:radial-gradient(circle at 50% 50%, #1fb6c9, transparent 62%); animation:call-drift3 37s ease-in-out infinite alternate; opacity:.35; }
@keyframes call-drift1 { to { transform:translate(18vmax, 12vmax) scale(1.15); } }
@keyframes call-drift2 { to { transform:translate(-16vmax, 18vmax) scale(.9); } }
@keyframes call-drift3 { to { transform:translate(20vmax, -14vmax) scale(1.1); } }
.call-grain { position:absolute; inset:0; pointer-events:none; opacity:.05; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.call-screen { position:relative; height:100%; z-index:1; }
.call-body { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:max(22px, env(safe-area-inset-top)) 24px max(36px, calc(env(safe-area-inset-bottom) + 28px)); text-align:center; --level:0; --mic:0; }
.call-head { display:flex; justify-content:center; width:100%; animation:call-rise .5s both; }
.call-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:20px; background:#ffffff14; border:1px solid #ffffff22; backdrop-filter:blur(10px); font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:#e9e2f3; }
.call-chip i { width:7px; height:7px; border-radius:50%; background:#ff2d8f; box-shadow:0 0 10px #ff2d8f; }
.call-live .call-chip i { background:#6fdc9d; box-shadow:0 0 10px #6fdc9d; animation:call-breathe 1.6s ease-in-out infinite; }
.call-top { display:flex; flex-direction:column; align-items:center; animation:call-rise .6s .08s both; }
.call-avatar { position:relative; width:156px; height:156px; margin:0 auto 22px; display:grid; place-items:center; }
.call-halo { position:absolute; inset:-14px; border-radius:50%; opacity:.55; transform:scale(calc(.94 + var(--level) * .22)); transition:transform .12s, opacity .3s; }
.call-halo::before { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, #ff2d8f, #7c4dff, #22c1d6, #ff2d8f); filter:blur(16px); animation:call-spin 7s linear infinite; }
.call-live .call-halo { opacity:calc(.5 + var(--level) * .5); }
.call-photo { position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; border:3px solid #ffffffcc; box-shadow:0 18px 50px #00000066; background:#1c1630; transform:scale(calc(1 + var(--level) * .05)); transition:transform .1s; }
.call-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.call-ended .call-photo img, .call-error .call-photo img, .call-quota .call-photo img { filter:grayscale(1) brightness(.75); }
.call-ended .call-halo, .call-error .call-halo, .call-quota .call-halo { opacity:.18; transform:none; }
.call-ring { position:absolute; inset:-8px; border-radius:50%; border:2px solid #ff64aa88; opacity:0; }
.call-ringing .call-ring, .call-connecting .call-ring { animation:call-ring 2.4s ease-out infinite; }
.call-ringing .call-ring.r2, .call-connecting .call-ring.r2 { animation-delay:.8s; }
.call-ringing .call-ring.r3, .call-connecting .call-ring.r3 { animation-delay:1.6s; }
.call-connecting .call-ring { animation-duration:1.3s; border-color:#6fdc9d88; }
@keyframes call-ring { from { transform:scale(.92); opacity:.9; } to { transform:scale(1.75); opacity:0; } }
@keyframes call-spin { to { transform:rotate(1turn); } }
@keyframes call-breathe { 50% { transform:scale(1.12); opacity:.4; } }
.call-badge { position:absolute; right:4px; bottom:6px; width:38px; height:38px; border-radius:50%; background:linear-gradient(145deg,#ff2d8f,#ff6fb5); color:#fff; display:grid; place-items:center; border:3px solid #0b0917; box-shadow:0 6px 18px #ff2d8f66; }
.call-badge .icon { width:18px; height:18px; }
.call-live .call-badge { background:linear-gradient(145deg,#1f9d5a,#6fdc9d); box-shadow:0 6px 18px #6fdc9d55; }
.call-count { position:absolute; inset:-8px; width:calc(100% + 16px); height:calc(100% + 16px); transform:rotate(-90deg); }
.call-count circle { fill:none; stroke:#ff2d8f; stroke-width:3; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; animation:call-count 5s linear forwards; }
@keyframes call-count { to { stroke-dashoffset:1; } }
.call-body h1 { font-size:28px; letter-spacing:-.8px; margin:0 0 6px; text-shadow:0 2px 24px #ff2d8f33; }
.call-status { font-size:17px; color:#c9bfd8; margin:0; font-variant-numeric:tabular-nums; display:flex; align-items:center; justify-content:center; gap:6px; }
.call-live .call-status { color:#fff; font-size:38px; font-weight:700; letter-spacing:1px; line-height:1.1; margin-top:2px; }
.call-dots { display:inline-flex; gap:3px; margin-left:2px; }
.call-dots i { width:5px; height:5px; border-radius:50%; background:#f593c2; animation:call-dot 1.2s ease-in-out infinite; }
.call-dots i:nth-child(2) { animation-delay:.2s; }
.call-dots i:nth-child(3) { animation-delay:.4s; }
@keyframes call-dot { 0%, 60%, 100% { transform:translateY(0); opacity:.4; } 30% { transform:translateY(-4px); opacity:1; } }
.call-sub { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#8ee8b5; margin:10px 0 0; letter-spacing:.4px; }
.call-sub::before { content:''; width:6px; height:6px; border-radius:50%; background:#6fdc9d; box-shadow:0 0 8px #6fdc9d; }
.call-wave { display:flex; align-items:center; justify-content:center; gap:4px; height:44px; margin-top:18px; --l1:0; --l2:0; --l3:0; --l4:0; --l5:0; --l6:0; --l7:0; --l8:0; --l9:0; }
.call-wave i { width:4px; border-radius:2px; background:linear-gradient(180deg,#ff8fc8,#ff2d8f); height:calc(5px + var(--l) * 36px); transition:height .09s; box-shadow:0 0 8px #ff2d8f66; }
.call-wave i:nth-child(1) { --l:var(--l1); } .call-wave i:nth-child(2) { --l:var(--l2); } .call-wave i:nth-child(3) { --l:var(--l3); } .call-wave i:nth-child(4) { --l:var(--l4); } .call-wave i:nth-child(5) { --l:var(--l5); } .call-wave i:nth-child(6) { --l:var(--l6); } .call-wave i:nth-child(7) { --l:var(--l7); } .call-wave i:nth-child(8) { --l:var(--l8); } .call-wave i:nth-child(9) { --l:var(--l9); }
.call-ringing .call-wave i, .call-connecting .call-wave i { animation:call-idle 1.6s ease-in-out infinite; }
.call-ringing .call-wave i:nth-child(2n), .call-connecting .call-wave i:nth-child(2n) { animation-delay:.3s; }
.call-ringing .call-wave i:nth-child(3n), .call-connecting .call-wave i:nth-child(3n) { animation-delay:.6s; }
@keyframes call-idle { 50% { height:16px; } }
.call-message { font-size:14px; line-height:1.6; color:#c9bfd8; margin:16px 0 0; max-width:320px; }
.call-bottom { width:100%; display:flex; flex-direction:column; align-items:center; animation:call-rise .6s .16s both; }
/* One row: Micro, Raccrocher (bigger, in the middle), Haut-parleur. Every disc sits in the same 78 px slot so the three
   centres line up, the labels too; shadows are symmetric so no disc looks off-centre. */
.call-controls { display:flex; justify-content:center; align-items:flex-start; gap:12px; margin-bottom:0; }
.call-round { display:flex; flex-direction:column; align-items:center; gap:10px; width:96px; border:0; background:transparent; color:#e9e2f3; font-size:12px; padding:0; }
.call-slot { display:grid; place-items:center; width:78px; height:78px; }
.call-disc { position:relative; display:grid; place-items:center; width:66px; height:66px; border-radius:50%; background:#ffffff14; border:1px solid #ffffff26; backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 #ffffff22, 0 0 24px #00000040; transition:background .2s, color .2s, transform .15s; }
.call-disc .icon { width:26px; height:26px; }
.call-round:active .call-disc { transform:scale(.92); }
.call-round.on .call-disc { background:#f7f5ff; color:#110f24; }
.call-round[data-act="mute"] .call-disc::before { content:''; position:absolute; inset:-7px; border-radius:50%; border:2px solid #6fdc9d; opacity:var(--mic); transform:scale(calc(1 + var(--mic) * .1)); transition:opacity .15s, transform .15s; pointer-events:none; }
.call-hangup .call-disc { width:78px; height:78px; border:0; background:linear-gradient(160deg,#ff3d5a,#d5183a); color:#fff; backdrop-filter:none; box-shadow:0 0 34px #e0243f77, inset 0 1px 0 #ffffff44; animation:call-glow 2.6s ease-in-out infinite; }
.call-hangup .call-disc .icon { width:34px; height:34px; }
@keyframes call-glow { 50% { box-shadow:0 0 48px #e0243fbb, inset 0 1px 0 #ffffff44; } }
.call-after { width:100%; max-width:360px; }
.call-after .wa-link { margin-bottom:10px; }
.call-closing { font-size:13px; color:#a79bb7; margin:0; text-align:center; }
.call-closing b { color:#fff; font-variant-numeric:tabular-nums; }
@keyframes call-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .call-ring, .call-blob, .call-halo::before, .call-dots i, .call-wave i, .call-hangup .call-disc, .call-chip i, .call-head, .call-top, .call-bottom { animation:none !important; } }