/* Luna Park de Paris · tamponneuses3d : la piste d'autos tamponneuses jouable (modes adulte et enfant).
   Variables de la charte avec valeurs par défaut : le site peut les redéfinir sur :root. */
:where(:root) {
  --lp-night: #07061A;
  --lp-deep: #0E0B33;
  --lp-violet: #6A1FA0;
  --lp-electric: #7B2FF7;
  --lp-pink: #FF2E9A;
  --lp-gold: #FFC24A;
  --lp-gold-2: #E8B04A;
  --lp-cyan: #2FE6FF;
  --lp-red: #C8102E;
  --lp-ivory: #FFF6E5;
  --lp-f-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --lp-f-neon: "Yellowtail", "Brush Script MT", "Segoe Script", cursive;
  --lp-f-text: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lp-f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --lp-ease: cubic-bezier(.22, 1, .36, 1);
}

.t3d {
  --acc: var(--lp-pink); --acc2: var(--lp-cyan);
  --line: color-mix(in srgb, var(--lp-gold) 22%, transparent);
  --soft: color-mix(in srgb, var(--lp-ivory) 70%, transparent);
  --glass: color-mix(in srgb, var(--lp-night) 72%, transparent);
  position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 9vw, 8rem);
  color: var(--lp-ivory); font-family: var(--lp-f-text);
  background: radial-gradient(70% 55% at 12% 6%, color-mix(in srgb, var(--lp-cyan) 12%, transparent), transparent 62%), radial-gradient(60% 50% at 95% 95%, color-mix(in srgb, var(--lp-pink) 14%, transparent), transparent 70%), linear-gradient(180deg, var(--lp-night), var(--lp-deep) 55%, var(--lp-night));
}
.t3d--enfant { --acc: #ff8fcf; --acc2: #9fe6ff; background: radial-gradient(70% 55% at 12% 6%, #9fe6ff26, transparent 62%), radial-gradient(60% 50% at 95% 95%, #ff8fcf2e, transparent 70%), linear-gradient(180deg, #120d33, #221a55 55%, #120d33); }
.t3d *, .t3d *::before, .t3d *::after { box-sizing: border-box; }
.t3d [hidden] { display: none !important; }
.t3d button { font: inherit; color: inherit; }
.t3d svg { display: block; }
.t3d__wrap { width: min(100% - 2 * clamp(1rem, 4vw, 4rem), 94rem); margin-inline: auto; }

/* en-tête */
.t3d__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(1.8rem, 3.5vw, 3rem); }
.t3d__kicker { display: inline-flex; align-items: center; gap: .9rem; font: 500 .72rem/1 var(--lp-f-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--lp-gold); }
.t3d__kicker::before { content: ""; width: 2.6rem; height: 1px; background: linear-gradient(90deg, transparent, var(--lp-gold)); }
.t3d__title { margin: 1rem 0 0; font-family: var(--lp-f-display); font-weight: 800; font-size: clamp(2.8rem, 1.5rem + 5.4vw, 6.4rem); line-height: .88; text-transform: uppercase; text-wrap: balance; }
.t3d__title em { display: inline-block; font-family: var(--lp-f-neon); font-weight: 400; font-style: normal; text-transform: none; line-height: 1; padding-right: .08em; color: #e6fdff; text-shadow: 0 0 .04em #fff, 0 0 .12em var(--acc2), 0 0 .3em var(--acc2), 0 0 .7em color-mix(in srgb, var(--acc2) 70%, transparent), 0 0 1.4em color-mix(in srgb, var(--acc2) 40%, transparent); animation: t3d-neon 3.2s steps(1) 1 both; }
@keyframes t3d-neon { 0%, 6%, 11%, 15% { opacity: .25; text-shadow: none; } 5%, 9%, 13%, 100% { opacity: 1; } }
.t3d__intro { margin: 0; max-width: 54ch; font-size: clamp(1rem, .95rem + .3vw, 1.16rem); line-height: 1.62; color: var(--soft); text-wrap: pretty; }

/* application */
.t3d__app { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); gap: clamp(1rem, 1.6vw, 1.5rem); }
.t3d__stage { position: relative; overflow: hidden; height: clamp(34rem, 74vh, 52rem); border-radius: 4px; background: radial-gradient(80% 70% at 50% 40%, #1a0f3d, var(--lp-night)); box-shadow: 0 0 0 1px var(--line), 0 40px 120px -40px color-mix(in srgb, var(--acc) 45%, transparent), 0 30px 80px -30px #000; user-select: none; -webkit-user-select: none; }
.t3d__stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: pan-y; opacity: 0; transition: opacity 1.2s var(--lp-ease); }
.t3d__stage > canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--lp-gold); }
.t3d__app.is-ready .t3d__stage > canvas { opacity: 1; }
.t3d__frame { position: absolute; inset: .7rem; pointer-events: none; z-index: 3; }
.t3d__frame b { position: absolute; width: 1.4rem; height: 1.4rem; border: 0 solid var(--lp-gold-2); opacity: .8; }
.t3d__frame b:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.t3d__frame b:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.t3d__frame b:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.t3d__frame b:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.t3d__lbl { font: 500 .6rem/1 var(--lp-f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--lp-gold); }

/* compteurs */
.t3d__hud { position: absolute; z-index: 5; top: 1.3rem; left: 1.4rem; right: 1.4rem; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; transition: opacity .5s, transform .6s var(--lp-ease); }
.t3d__score, .t3d__timer { position: relative; display: grid; gap: .35rem; padding: .7rem 1.1rem .75rem; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); }
.t3d__score { padding-left: 1.4rem; -webkit-mask: radial-gradient(circle .5rem at 0 50%, #0000 98%, #000); mask: radial-gradient(circle .5rem at 0 50%, #0000 98%, #000); }
.t3d__score b { font: 900 clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem)/.85 var(--lp-f-display); letter-spacing: .02em; color: #fff; text-shadow: 0 0 .3em color-mix(in srgb, var(--acc) 70%, transparent); transform-origin: left center; }
.t3d__app.is-pop .t3d__score b { animation: t3d-pop .45s var(--lp-ease); }
@keyframes t3d-pop { 0% { transform: scale(1.45); color: var(--lp-gold); } 100% { transform: none; } }
.t3d__timer { justify-items: end; min-width: 8.5rem; }
.t3d__timer b { font: 600 1.7rem/1 var(--lp-f-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.t3d__timer i { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--acc2), var(--acc)); transform-origin: left; transform: scaleX(var(--t)); box-shadow: 0 0 8px var(--acc); }
.t3d__app[data-phase="veille"] .t3d__hud, .t3d__app[data-phase="fin"] .t3d__hud { opacity: 0; transform: translateY(-.6rem); }

/* repères */
.t3d__pins { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.t3d__pin { --c: var(--acc); position: absolute; left: 0; top: 0; margin: -1.05rem 0 0 -1.05rem; display: flex; align-items: center; gap: .55rem; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transition: opacity .35s; will-change: transform; }
.t3d__pin.is-check { --c: var(--lp-gold); }
.t3d__pin.is-off { opacity: 0; pointer-events: none; }
.t3d__pin b { position: relative; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: color-mix(in srgb, var(--lp-night) 70%, transparent); border: 1px solid var(--c); font: 700 .74rem/1 var(--lp-f-display); color: var(--lp-ivory); box-shadow: 0 0 1rem color-mix(in srgb, var(--c) 55%, transparent); transition: background .3s, color .3s, transform .4s var(--lp-ease); }
.t3d__pin b::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--c); opacity: 0; animation: t3d-ping 2.6s var(--lp-ease) infinite; }
@keyframes t3d-ping { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.t3d__pin span { padding: .4rem .6rem; background: var(--glass); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); font: 500 .66rem/1.1 var(--lp-f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateX(-.3rem); transition: opacity .3s, transform .4s var(--lp-ease); }
.t3d__pin:hover span, .t3d__pin:focus-visible span, .t3d__pin.is-on span { opacity: 1; transform: none; }
.t3d__pin:hover b, .t3d__pin.is-on b { background: var(--c); color: var(--lp-night); transform: scale(1.08); }
.t3d__pin:focus-visible, .t3d__token:focus-visible, .t3d__panel button:focus-visible { outline: 2px solid var(--lp-cyan); outline-offset: 3px; }

/* jeton */
.t3d__attract { position: absolute; z-index: 6; left: 50%; bottom: 2rem; transform: translateX(-50%); display: grid; justify-items: center; gap: .9rem; text-align: center; transition: opacity .5s, transform .6s var(--lp-ease); }
.t3d__neon { font: 400 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1 var(--lp-f-neon); color: #ffe6f4; text-shadow: 0 0 .05em #fff, 0 0 .15em var(--acc), 0 0 .45em var(--acc), 0 0 1em color-mix(in srgb, var(--acc) 50%, transparent); }
.t3d__token {
  position: relative; display: inline-flex; align-items: center; gap: 1rem; min-height: 4.2rem; padding: .6rem 1.8rem .6rem .7rem; border: 0; cursor: pointer; color: var(--lp-night);
  background: linear-gradient(180deg, #ffe39a, var(--lp-gold) 48%, var(--lp-gold-2)); box-shadow: 0 0 0 1px #fff4 inset, 0 0 2.4rem color-mix(in srgb, var(--lp-gold) 45%, transparent), 0 18px 40px -16px #000;
  -webkit-mask: radial-gradient(circle .55rem at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle .55rem at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle .55rem at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle .55rem at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  transition: transform .35s var(--lp-ease), filter .3s; animation: t3d-float 3.4s ease-in-out infinite;
}
.t3d__token::after { content: ""; position: absolute; top: .45rem; bottom: .45rem; left: 4.9rem; border-left: 2px dashed color-mix(in srgb, var(--lp-night) 35%, transparent); }
@keyframes t3d-float { 50% { transform: translateY(-4px); } }
.t3d__token:hover { filter: brightness(1.08); }
.t3d__token:active { transform: scale(.97); }
.t3d__coin { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1c2, #e8b04a 55%, #a8741e); box-shadow: inset 0 0 0 3px #c99234, inset 0 0 0 5px #ffe3a0, 0 2px 6px #0006; }
.t3d__coin i { font: 900 1rem/1 var(--lp-f-display); font-style: normal; letter-spacing: .04em; color: #7a4d10; }
.t3d__tk { display: grid; gap: .2rem; text-align: left; padding-left: .6rem; }
.t3d__tk b { font: 900 1.7rem/1 var(--lp-f-display); letter-spacing: .1em; text-transform: uppercase; }
.t3d__tk small { font: 600 .6rem/1.2 var(--lp-f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.t3d__token--sm { min-height: 3.4rem; animation: none; }
.t3d__token--sm .t3d__coin { width: 2.4rem; height: 2.4rem; }
.t3d__token--sm::after { left: 4.1rem; }
.t3d__token--sm .t3d__tk b { font-size: 1.25rem; }
.t3d__how { display: inline-flex; align-items: center; gap: .7rem; margin: 0; padding: .45rem .8rem; background: var(--glass); border: 1px solid color-mix(in srgb, var(--lp-ivory) 14%, transparent); font: 500 .62rem/1 var(--lp-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.t3d__how svg { width: 1rem; height: 1rem; }
.t3d__kbd { display: inline-flex; gap: .2rem; }
.t3d__kbd svg { width: 1.25rem; height: 1.25rem; padding: .15rem; border: 1px solid color-mix(in srgb, var(--lp-ivory) 40%, transparent); border-radius: 3px; color: var(--lp-ivory); }
.t3d__how--touch { display: none; }
.t3d__app:not([data-phase="veille"]) .t3d__attract { opacity: 0; pointer-events: none; transform: translate(-50%, 1rem); }

/* compte à rebours */
.t3d__cd { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .3s; }
.t3d__cd span { font: 400 clamp(4rem, 3rem + 6vw, 8rem)/1 var(--lp-f-neon); color: #fff; text-shadow: 0 0 .05em #fff, 0 0 .15em var(--lp-gold), 0 0 .45em var(--lp-gold), 0 0 1.2em color-mix(in srgb, var(--lp-gold) 50%, transparent); }
.t3d__app[data-phase="depart"] .t3d__cd { opacity: 1; }

/* fin du tour */
.t3d__end { position: absolute; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -44%); display: grid; justify-items: center; gap: .6rem; padding: 1.8rem 2.4rem 2rem; text-align: center; background: color-mix(in srgb, var(--lp-night) 78%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); box-shadow: 0 30px 80px -20px #000; opacity: 0; pointer-events: none; transition: opacity .7s .5s, transform .9s .5s var(--lp-ease); }
.t3d__end::before { content: ""; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--lp-gold) 14%, transparent); pointer-events: none; }
.t3d__endk { font: 400 clamp(2.2rem, 1.6rem + 2vw, 3.2rem)/1 var(--lp-f-neon); color: #ffe6f4; text-shadow: 0 0 .05em #fff, 0 0 .15em var(--acc), 0 0 .45em var(--acc); }
.t3d__endn { display: flex; align-items: baseline; gap: .6rem; margin: .2rem 0 0; }
.t3d__endn b { font: 900 4.2rem/.9 var(--lp-f-display); color: var(--lp-gold); text-shadow: 0 0 .4em color-mix(in srgb, var(--lp-gold) 50%, transparent); }
.t3d__endn span { font: 700 1.2rem/1 var(--lp-f-display); letter-spacing: .12em; text-transform: uppercase; }
.t3d__endb { margin: 0 0 .8rem; font: 500 .66rem/1.3 var(--lp-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.t3d__endb b { color: var(--lp-ivory); }
.t3d__app[data-phase="fin"] .t3d__end { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }

/* joystick (écrans tactiles) */
.t3d__joy { position: absolute; z-index: 6; left: 1.2rem; bottom: 1.2rem; width: 8.4rem; height: 8.4rem; border-radius: 50%; display: none; place-items: center; touch-action: none; background: radial-gradient(circle, color-mix(in srgb, var(--lp-night) 30%, transparent) 40%, color-mix(in srgb, var(--lp-night) 65%, transparent)); border: 1px solid color-mix(in srgb, var(--lp-gold) 45%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--lp-gold) 8%, transparent), inset 0 0 2rem color-mix(in srgb, var(--acc) 22%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.t3d__joy::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--lp-ivory) 22%, transparent); }
.t3d__knob { position: relative; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff3, transparent 50%), radial-gradient(circle at 50% 50%, var(--acc), color-mix(in srgb, var(--acc) 55%, #000)); box-shadow: 0 0 1.4rem color-mix(in srgb, var(--acc) 70%, transparent), 0 4px 10px #0008; transition: transform .25s var(--lp-ease); }
.t3d__joy.is-on .t3d__knob { transition: none; }

.t3d__drawer-btn { display: none; }
.t3d__load { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 1rem; pointer-events: none; font: 500 .66rem/1 var(--lp-f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--lp-gold); transition: opacity .8s; }
.t3d__load i { width: 9rem; height: 1px; background: color-mix(in srgb, var(--lp-gold) 25%, transparent); position: relative; overflow: hidden; }
.t3d__load i::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--lp-gold); box-shadow: 0 0 8px var(--lp-gold); animation: t3d-load 1.3s var(--lp-ease) infinite; }
@keyframes t3d-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.t3d__app.is-ready .t3d__load, .t3d__app.no-gl .t3d__load { opacity: 0; }
.t3d__nogl { display: none; position: absolute; inset: auto 1.5rem 50% 1.5rem; z-index: 8; margin: 0; text-align: center; color: var(--soft); }
.t3d__app.no-gl .t3d__nogl { display: block; }
.t3d__app.no-gl .t3d__attract, .t3d__app.no-gl .t3d__hud, .t3d__app.no-gl .t3d__joy { display: none; }

/* panneau */
.t3d__panel { position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.4rem; border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--acc2) 6%, transparent), color-mix(in srgb, var(--lp-night) 40%, transparent)); }
.t3d__panel::before { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--lp-gold) 10%, transparent); pointer-events: none; }
.t3d__phead { display: flex; align-items: center; justify-content: space-between; }
.t3d__close { display: none; }
.t3d__rules { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--soft); }
.t3d__tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.t3d__tabs button { min-height: 3.1rem; padding: .55rem .7rem; border: 0; background: none; cursor: pointer; font: 700 .86rem/1.1 var(--lp-f-display); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--lp-ivory) 60%, transparent); transition: color .3s, background .3s; text-wrap: balance; }
.t3d__tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--lp-gold) 92%, transparent); color: var(--lp-night); }
.t3d__list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.t3d__list li { border-bottom: 1px solid var(--line); }
.t3d__list button { display: flex; align-items: center; gap: .9rem; width: 100%; padding: .85rem .1rem; border: 0; background: none; cursor: pointer; text-align: left; font: 600 1rem/1.25 var(--lp-f-text); color: color-mix(in srgb, var(--lp-ivory) 86%, transparent); transition: color .3s, padding .4s var(--lp-ease); }
.t3d__list button b { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--acc) 60%, transparent); font: 700 .7rem/1 var(--lp-f-display); color: var(--acc); transition: background .3s, color .3s, box-shadow .3s; }
.t3d__list[data-t3d-list="verifie"] button b { border-color: color-mix(in srgb, var(--lp-gold) 60%, transparent); color: var(--lp-gold); }
.t3d__list button span { flex: 1; }
.t3d__list button i { width: .7rem; height: .7rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: .6; transition: transform .4s var(--lp-ease); }
.t3d__list button:hover { color: var(--lp-ivory); padding-left: .35rem; }
.t3d__list button[aria-expanded="true"] { color: var(--lp-ivory); }
.t3d__list button[aria-expanded="true"] b { background: var(--acc); color: var(--lp-night); box-shadow: 0 0 1rem color-mix(in srgb, var(--acc) 60%, transparent); }
.t3d__list[data-t3d-list="verifie"] button[aria-expanded="true"] b { background: var(--lp-gold); }
.t3d__list button[aria-expanded="true"] i { transform: rotate(-135deg) translate(-2px, -2px); }
.t3d__txt { margin: 0 0 1rem 2.8rem; font-size: .95rem; line-height: 1.6; color: var(--soft); text-wrap: pretty; animation: t3d-in .5s var(--lp-ease); }
@keyframes t3d-in { from { opacity: 0; transform: translateY(-.3rem); } }
.t3d__note { margin: auto 0 0; padding-top: .8rem; font-size: .76rem; line-height: 1.5; color: color-mix(in srgb, var(--lp-ivory) 48%, transparent); }

@media (pointer: coarse) {
  .t3d__joy { display: grid; }
  .t3d__how--keys { display: none; }
  .t3d__how--touch { display: inline-flex; }
}
@media (max-width: 1099px) {
  .t3d__head { grid-template-columns: 1fr; }
  .t3d__app { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .t3d__stage { height: clamp(32rem, 84svh, 46rem); border-radius: 0; margin-inline: calc(-1 * clamp(1rem, 4vw, 4rem)); }
  .t3d__frame { inset: .45rem; }
  .t3d__hud { top: .9rem; left: .9rem; right: .9rem; }
  .t3d__score, .t3d__timer { padding: .55rem .8rem .6rem; }
  .t3d__score { padding-left: 1.1rem; }
  .t3d__timer { min-width: 0; }
  .t3d__timer b { font-size: 1.3rem; }
  .t3d__attract { bottom: 10.4rem; width: calc(100% - 2rem); }
  .t3d__app:not([data-phase="veille"]) .t3d__attract { transform: translate(-50%, 1rem); }
  .t3d__joy { width: 8.8rem; height: 8.8rem; left: 50%; bottom: 1rem; margin-left: -4.4rem; }
  .t3d__pin { margin: -.95rem 0 0 -.95rem; }
  .t3d__pin b { width: 1.9rem; height: 1.9rem; }
  .t3d__pin span { display: none; }
  .t3d__end { width: calc(100% - 2rem); padding: 1.4rem 1rem 1.6rem; }
  .t3d__drawer-btn { position: absolute; z-index: 6; top: .9rem; left: .9rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.4rem; padding: 0 .8rem; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; font: 500 .62rem/1 var(--lp-f-mono); letter-spacing: .14em; text-transform: uppercase; transition: opacity .4s; }
  .t3d__drawer-btn svg { width: 1rem; height: 1rem; color: var(--lp-gold); }
  .t3d__app:not([data-phase="veille"]):not([data-phase="fin"]) .t3d__drawer-btn { opacity: 0; pointer-events: none; }
  .t3d__panel { position: absolute; z-index: 9; left: calc(-1 * clamp(1rem, 4vw, 4rem)); right: calc(-1 * clamp(1rem, 4vw, 4rem)); bottom: 0; max-height: 80%; overflow: auto; overscroll-behavior: contain; padding: 1rem 1.1rem 1.4rem; border-radius: 1.1rem 1.1rem 0 0; background: linear-gradient(180deg, #1b1240, var(--lp-night)); box-shadow: 0 -24px 60px -10px #000c; transform: translateY(105%); visibility: hidden; transition: transform .55s var(--lp-ease), visibility 0s .55s; }
  .t3d__panel::before { inset: .5rem 42% auto; height: 4px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--lp-ivory) 25%, transparent); }
  .t3d__app.is-drawer .t3d__panel { transform: none; visibility: visible; transition: transform .55s var(--lp-ease), visibility 0s; }
  .t3d__phead { padding-top: .6rem; }
  .t3d__close { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--line); background: none; cursor: pointer; }
  .t3d__close svg { width: 1rem; height: 1rem; }
  .t3d__tabs button { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .t3d__title em, .t3d__token, .t3d__app.is-pop .t3d__score b { animation: none !important; }
  .t3d__pin b::after, .t3d__load i::after { animation: none; }
  .t3d__panel, .t3d__end, .t3d__attract { transition-duration: .01s !important; }
}