/* Luna Park de Paris · carrousel3d (préfixe lpc) : scène, récit en trois tickets, interrupteur du forain, repères, fiches.
   Variables de la charte : redéfinissables par le site (les valeurs ci-dessous ne s'appliquent que par défaut). */
: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', 'Big Shoulders', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --lp-f-neon: 'Yellowtail', 'Brush Script MT', 'Segoe Script', cursive;
  --lp-f-text: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --lp-f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
.lpc { --e: cubic-bezier(.22, .8, .2, 1); --line: rgba(255, 194, 74, .18); --line-2: rgba(255, 194, 74, .38); --glass: rgba(10, 8, 30, .78);
  --gold-grad: linear-gradient(180deg, #fff1c2 0%, var(--lp-gold) 38%, var(--lp-gold-2) 62%, #a8741c 100%);
  position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 7.5rem); color: var(--lp-ivory); font-family: var(--lp-f-text);
  background: radial-gradient(70% 50% at 80% 0%, rgba(123, 47, 247, .22), transparent 70%), radial-gradient(60% 50% at 10% 100%, rgba(255, 46, 154, .12), transparent 70%), linear-gradient(180deg, var(--lp-night), var(--lp-deep) 60%, var(--lp-night)); }
.lpc::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 72% 12%, #fff6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 38% 8%, #ffe9b8aa 50%, transparent 51%), radial-gradient(1px 1px at 88% 32%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 22% 42%, #fff4 50%, transparent 51%), radial-gradient(1.2px 1.2px at 57% 26%, #fff6 50%, transparent 51%); }
.lpc__wrap { position: relative; width: min(100% - 2 * clamp(1rem, 4vw, 3rem), 96rem); margin-inline: auto; }
.lpc__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.4rem 4rem; align-items: end; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.lpc__kicker { display: inline-flex; align-items: center; gap: .8rem; margin: 0 0 1.1rem; font: 500 .72rem/1 var(--lp-f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--lp-gold); }
.lpc__kicker::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--lp-gold); box-shadow: 0 0 0 3px rgba(255, 194, 74, .18), 0 0 14px 2px rgba(255, 194, 74, .8); }
.lpc__title { margin: 0; font: 800 clamp(2.6rem, 1.4rem + 5.2vw, 6.2rem)/.88 var(--lp-f-display); letter-spacing: .005em; text-transform: uppercase; color: var(--lp-ivory); text-wrap: balance; }
.lpc__title em { display: inline-block; font: 400 1.02em/1 var(--lp-f-neon); text-transform: none; letter-spacing: 0; color: #ffe3f1; padding: 0 .08em; transform: rotate(-4deg) translateY(.05em);
  text-shadow: 0 0 .04em #fff, 0 0 .14em var(--lp-pink), 0 0 .38em var(--lp-pink), 0 0 .8em rgba(255, 46, 154, .65); animation: lpc-neon 6s steps(1) 1.2s 1 both; }
@keyframes lpc-neon { 0% { opacity: .15; } 4% { opacity: 1; } 6% { opacity: .3; } 8%, 100% { opacity: 1; } }
.lpc__intro { margin: 0; max-width: 46ch; font-size: clamp(1rem, .95rem + .3vw, 1.14rem); line-height: 1.62; color: rgba(255, 246, 229, .8); text-wrap: pretty; }

/* ---------- scène ---------- */
.lpc__app { position: relative; }
.lpc__stage { position: relative; height: clamp(34rem, 62vw, 54rem); max-height: 88svh; overflow: hidden; isolation: isolate; border-radius: 6px; background: radial-gradient(80% 70% at 50% 40%, #1c1544 0%, #0b0822 60%, #05040f 100%);
  box-shadow: inset 0 0 0 1px var(--line), 0 60px 120px -60px rgba(0, 0, 0, .95), 0 0 80px -40px rgba(255, 194, 74, .35); }
.lpc--compact .lpc__stage { height: clamp(30rem, 52vw, 44rem); }
.lpc__stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 194, 74, .12), inset 0 -120px 120px -60px rgba(5, 4, 15, .75), inset 0 100px 100px -70px rgba(5, 4, 15, .6); }
.lpc__stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; outline: none; opacity: 0; transition: opacity 1.2s var(--e); }
.lpc__stage > canvas:active { cursor: grabbing; }
.lpc__stage > canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--lp-gold); }
.lpc__app.is-ready .lpc__stage > canvas { opacity: 1; }
.lpc__load { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 1.2rem; pointer-events: none; transition: opacity .8s; font: 500 .68rem/1 var(--lp-f-mono); letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 246, 229, .6); }
.lpc__load i { position: relative; width: 5.5rem; height: 5.5rem; border-radius: 50%; }
.lpc__load i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--lp-gold) 0 4%, transparent 4% 12.5%, var(--lp-gold) 12.5% 16.5%, transparent 16.5% 25%, var(--lp-gold) 25% 29%, transparent 29% 37.5%, var(--lp-gold) 37.5% 41.5%, transparent 41.5% 50%, var(--lp-gold) 50% 54%, transparent 54% 62.5%, var(--lp-gold) 62.5% 66.5%, transparent 66.5% 75%, var(--lp-gold) 75% 79%, transparent 79% 87.5%, var(--lp-gold) 87.5% 91.5%, transparent 91.5%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 72%, transparent 73%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 72%, transparent 73%); filter: drop-shadow(0 0 6px var(--lp-gold)); animation: lpc-spin 2.4s linear infinite; }
@keyframes lpc-spin { to { transform: rotate(360deg); } }
.lpc__app.is-ready .lpc__load, .lpc__app.no-gl .lpc__load { opacity: 0; }
.lpc__nogl { display: none; position: absolute; inset: auto 1.2rem 1.2rem; z-index: 4; margin: 0; color: rgba(255, 246, 229, .8); font-size: .92rem; }
.lpc__app.no-gl .lpc__nogl { display: block; }

/* ---------- tickets du récit ---------- */
.lpc__steps { position: absolute; z-index: 4; top: 1rem; left: 1rem; display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; counter-reset: s; transition: opacity .4s, transform .5s var(--e); }
.lpc__steps li { position: relative; display: flex; align-items: center; gap: .55rem; padding: .5rem .85rem .5rem .7rem; background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 700 .7rem/1 var(--lp-f-display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 246, 229, .58);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent .32rem, #000 .34rem) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent .32rem, #000 .34rem) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent .32rem, #000 .34rem) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent .32rem, #000 .34rem) right / 51% 100% no-repeat;
  box-shadow: inset 0 0 0 1px var(--line); transition: color .4s, background .4s; }
.lpc__steps b { font: 500 .62rem/1 var(--lp-f-mono); color: var(--lp-gold); opacity: .7; }
.lpc__steps li.is-done { color: rgba(255, 246, 229, .8); }
.lpc__steps li.is-on { color: #1a0f02; background: var(--gold-grad); box-shadow: none; }
.lpc__steps li.is-on b { color: #5a2a00; opacity: 1; }
.lpc__app.has-fiche .lpc__steps { opacity: 0; transform: translateY(-8px); pointer-events: none; }

/* ---------- le grand interrupteur du forain ---------- */
.lpc__lever { position: absolute; z-index: 5; left: 50%; bottom: clamp(5.5rem, 12%, 7.5rem); transform: translateX(-50%); display: flex; align-items: center; gap: 1.1rem; padding: .85rem 1.6rem .85rem .85rem; border: 0; border-radius: 999px; cursor: pointer; color: var(--lp-ivory); text-align: left;
  background: linear-gradient(180deg, rgba(42, 18, 58, .92), rgba(14, 11, 51, .92)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 6px rgba(255, 194, 74, .06), 0 22px 60px -20px rgba(0, 0, 0, .9), 0 0 50px -10px rgba(255, 194, 74, .45); transition: opacity .6s var(--e), transform .6s var(--e), box-shadow .3s; }
.lpc__lever:hover { box-shadow: inset 0 0 0 1px var(--lp-gold), 0 0 0 6px rgba(255, 194, 74, .12), 0 22px 60px -20px rgba(0, 0, 0, .9), 0 0 70px -6px rgba(255, 194, 74, .7); }
.lpc__lever-plate { position: relative; flex: none; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4cf, var(--lp-gold) 40%, #8a5b12 100%); box-shadow: inset 0 -3px 6px rgba(60, 30, 0, .6), 0 0 0 3px rgba(20, 10, 30, .9), 0 0 0 4px var(--lp-gold-2); }
.lpc__lever-plate::before { content: ""; position: absolute; left: 50%; top: 22%; width: .5rem; height: 56%; margin-left: -.25rem; border-radius: .3rem; background: linear-gradient(90deg, #6b4510, #ffe6a3, #6b4510); transform-origin: 50% 85%; transform: rotate(-38deg); transition: transform .45s cubic-bezier(.5, -0.4, .3, 1.4); }
.lpc__lever-plate::after { content: ""; position: absolute; left: 50%; top: 10%; width: 1rem; height: 1rem; margin-left: -.5rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff6b7d, var(--lp-red) 60%, #5a0010); transform-origin: 50% 230%; transform: rotate(-38deg); transition: transform .45s cubic-bezier(.5, -0.4, .3, 1.4); }
.lpc__lever b { display: block; font: 800 1.35rem/1 var(--lp-f-display); letter-spacing: .04em; text-transform: uppercase; }
.lpc__lever small { display: block; margin-top: .3rem; font: 500 .66rem/1.2 var(--lp-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lp-gold); }
.lpc__lever::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; box-shadow: 0 0 0 1px rgba(255, 194, 74, .5); animation: lpc-ping 2.6s ease-out infinite; pointer-events: none; }
@keyframes lpc-ping { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.12, 1.4); } }
.lpc__app:not([data-phase="off"]) .lpc__lever { opacity: 0; transform: translate(-50%, 1rem); pointer-events: none; }
.lpc__app:not([data-phase="off"]) .lpc__lever-plate::before, .lpc__app:not([data-phase="off"]) .lpc__lever-plate::after { transform: rotate(38deg); }
.lpc__app:not(.is-ready) .lpc__lever { opacity: 0; pointer-events: none; }

/* ---------- barre de commandes (tiroir sur mobile) ---------- */
.lpc__bar { position: absolute; z-index: 5; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; transition: opacity .4s, transform .5s var(--e); }
.lpc__say { flex: 1 1 18rem; margin: 0 .6rem 0 0; min-width: 0; font-size: .9rem; line-height: 1.45; color: rgba(255, 246, 229, .88); text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
.lpc__acts { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.lpc__btn { position: relative; display: inline-flex; align-items: center; gap: .55rem; min-height: 2.9rem; padding: 0 1.05rem; border: 0; border-radius: 3px; cursor: pointer; white-space: nowrap; text-decoration: none;
  background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--lp-ivory);
  font: 700 .82rem/1 var(--lp-f-display); letter-spacing: .14em; text-transform: uppercase; transition: background .3s, color .3s, box-shadow .3s, transform .3s var(--e); }
.lpc__btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
.lpc__btn:hover { background: rgba(255, 194, 74, .14); box-shadow: inset 0 0 0 1px var(--lp-gold); }
.lpc__btn[aria-pressed="true"] { background: var(--gold-grad); color: #1a0f02; box-shadow: 0 0 24px -6px rgba(255, 194, 74, .8); }
.lpc__btn--pink[aria-pressed="true"] { background: linear-gradient(180deg, #ff7ac0, var(--lp-pink)); color: #fff; box-shadow: 0 0 26px -4px rgba(255, 46, 154, .85); }
.lpc__btn[hidden] { display: none; }
.lpc__app[data-phase="ride"] [data-act="descendre"] { display: inline-flex; }
.lpc [data-act="descendre"] { display: none; }
.lpc__handle { display: none; }
.lpc__app.has-fiche .lpc__bar { opacity: 0; pointer-events: none; transform: translateY(8px); }
.lpc__hint { position: absolute; z-index: 4; left: 50%; top: 1.1rem; transform: translateX(-50%); padding: .55rem .95rem; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line); font: 500 .66rem/1 var(--lp-f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--lp-gold); opacity: 0; transition: opacity .5s; pointer-events: none; white-space: nowrap; }
.lpc__app[data-phase="choose"]:not(.has-fiche) .lpc__hint--choose, .lpc__app[data-phase="ride"] .lpc__hint--ride { opacity: 1; }
.lpc__app[data-phase="choose"] .lpc__steps, .lpc__app[data-phase="ride"] .lpc__steps { opacity: 0; pointer-events: none; }

/* ---------- repères numérotés (vue éclatée) ---------- */
.lpc__pins { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.lpc__pin { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; margin: -1.05rem 0 0 -1.05rem; padding: 0; border: 0; background: none; color: var(--lp-ivory); cursor: pointer; pointer-events: auto; will-change: transform; transition: opacity .35s; font: inherit; }
.lpc__pin b { position: relative; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; font: 600 .7rem/1 var(--lp-f-mono); color: #1a0f02; background: radial-gradient(circle at 35% 30%, #fff6d8, var(--lp-gold) 45%, #b47a1c 100%); box-shadow: 0 0 0 2px rgba(10, 8, 30, .85), 0 0 18px 2px rgba(255, 194, 74, .65); }
.lpc__pin b::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--lp-gold); animation: lpc-ring 2.8s ease-out infinite; }
@keyframes lpc-ring { 0% { transform: scale(.85); opacity: .9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.lpc__pin span { padding: .42rem .65rem; border-radius: 2px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2); font: 700 .74rem/1 var(--lp-f-display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.lpc__pin:hover b, .lpc__pin.is-on b { background: radial-gradient(circle at 35% 30%, #ffd1ea, var(--lp-pink) 55%, #8a0a4a); color: #fff; box-shadow: 0 0 0 2px rgba(10, 8, 30, .85), 0 0 22px 4px rgba(255, 46, 154, .7); }
.lpc__pin.is-off { opacity: 0; pointer-events: none; }
.lpc__app.has-fiche .lpc__pin:not(.is-on) { opacity: 0; pointer-events: none; }

/* ---------- fiche ---------- */
.lpc__fiche { position: absolute; z-index: 6; top: 1rem; bottom: 1rem; left: 1rem; width: min(25rem, 44%); display: flex; flex-direction: column; border-radius: 4px;
  background: linear-gradient(180deg, rgba(26, 14, 52, .97), rgba(10, 8, 30, .97)); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -30px rgba(0, 0, 0, .95);
  transform: translateX(calc(-100% - 1.5rem)); visibility: hidden; transition: transform .6s var(--e), visibility 0s .6s; }
.lpc__fiche::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, var(--lp-pink), var(--lp-gold), var(--lp-cyan)); }
.lpc__fiche.is-open { transform: none; visibility: visible; transition: transform .6s var(--e), visibility 0s; }
.lpc__fhead { position: relative; padding: 1.4rem 3.6rem 1.1rem 1.4rem; border-bottom: 1px solid var(--line); }
.lpc__fn { font: 500 .66rem/1.3 var(--lp-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lp-gold); }
.lpc__fhead h3 { margin: .6rem 0 0; font: 800 1.9rem/.95 var(--lp-f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--lp-ivory); text-wrap: balance; }
.lpc__fx { position: absolute; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 246, 229, .06); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--lp-ivory); cursor: pointer; transition: background .3s, color .3s; }
.lpc__fx:hover { background: var(--lp-gold); color: #1a0f02; }
.lpc__fx svg, .lpc__fnav svg { width: 1rem; height: 1rem; }
.lpc__fbody { flex: 1; overflow: auto; padding: 1.15rem 1.4rem; display: grid; gap: 1.05rem; align-content: start; overscroll-behavior: contain; }
.lpc__fsec h4 { margin: 0 0 .4rem; font: 500 .62rem/1.3 var(--lp-f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(47, 230, 255, .85); }
.lpc__fsec p { margin: 0; font-size: .93rem; line-height: 1.6; color: rgba(255, 246, 229, .88); }
.lpc__fsec--or { padding: .85rem .95rem; border-radius: 3px; background: rgba(255, 194, 74, .08); box-shadow: inset 2px 0 0 var(--lp-gold); }
.lpc__fsec--or h4 { color: var(--lp-gold); }
.lpc__ffoot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1rem 1rem 1.4rem; border-top: 1px solid var(--line); }
.lpc__ffoot .lpc__btn--go { background: var(--gold-grad); color: #1a0f02; box-shadow: 0 10px 30px -12px rgba(255, 194, 74, .9); }
.lpc__ffoot .lpc__btn--go:hover { transform: translateY(-1px); }
.lpc__fnav { display: flex; gap: .4rem; margin-left: auto; }
.lpc__fnav button { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 246, 229, .06); box-shadow: inset 0 0 0 1px var(--line); color: var(--lp-ivory); cursor: pointer; transition: background .3s, color .3s; }
.lpc__fnav button:hover { background: var(--lp-gold); color: #1a0f02; }
.lpc button:focus-visible, .lpc a:focus-visible { outline: 2px solid var(--lp-cyan); outline-offset: 2px; }

/* ---------- tablette et mobile ---------- */
@media (max-width: 1099px) { .lpc__head { grid-template-columns: 1fr; gap: 1.1rem; } }
@media (max-width: 759px) {
  .lpc__wrap { width: calc(100% - 2rem); }
  .lpc__stage, .lpc--compact .lpc__stage { height: min(150vw, 84svh); max-height: none; margin-inline: -.5rem; border-radius: 4px; }
  .lpc__steps { top: .6rem; left: .6rem; right: .6rem; gap: .25rem; }
  .lpc__steps li { flex: 1; justify-content: center; padding: .48rem .3rem; font-size: .6rem; letter-spacing: .08em; }
  .lpc__steps li span { display: none; }
  .lpc__steps li.is-on span { display: inline; }
  .lpc__lever { top: 3.4rem; bottom: auto; padding: .7rem 1.2rem .7rem .7rem; gap: .8rem; width: max-content; max-width: calc(100% - 2rem); }
  .lpc__lever-plate { width: 3rem; height: 3rem; }
  .lpc__lever b { font-size: 1.12rem; }
  .lpc__bar { left: .5rem; right: .5rem; bottom: .5rem; padding: .5rem .5rem .55rem; border-radius: 6px; background: rgba(10, 8, 30, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line); gap: .45rem; }
  .lpc__handle { display: grid; place-items: center; width: 100%; height: 1.1rem; margin: -.2rem 0 0; padding: 0; border: 0; background: none; cursor: pointer; }
  .lpc__handle::before { content: ""; width: 2.6rem; height: 4px; border-radius: 4px; background: rgba(255, 194, 74, .45); }
  .lpc__say { flex-basis: 100%; margin: 0; font-size: .8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lpc__app.is-drawer .lpc__say { -webkit-line-clamp: unset; }
  .lpc__acts { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
  .lpc__btn { min-height: 2.7rem; padding: 0 .4rem; justify-content: center; font-size: .66rem; letter-spacing: .08em; white-space: normal; text-align: center; line-height: 1.05; }
  .lpc__btn svg { display: none; }
  .lpc__app:not(.is-drawer) .lpc__acts .lpc__btn--more { display: none; }
  .lpc__app[data-phase="ride"] .lpc__acts { grid-template-columns: 1fr 1fr; }
  .lpc__hint { top: auto; bottom: 8.2rem; font-size: .58rem; }
  .lpc__pin { height: 1.8rem; margin: -.9rem 0 0 -.9rem; }
  .lpc__pin b { width: 1.8rem; height: 1.8rem; font-size: .62rem; }
  .lpc__pin span { display: none; }
  .lpc__fiche { top: auto; left: .5rem; right: .5rem; bottom: .5rem; width: auto; max-height: 64%; transform: translateY(calc(100% + 1rem)); }
  .lpc__fhead { padding: 1.1rem 3.3rem .85rem 1.1rem; }
  .lpc__fhead h3 { font-size: 1.5rem; margin-top: .45rem; }
  .lpc__fx { top: .75rem; right: .75rem; }
  .lpc__fbody { padding: .9rem 1.1rem; gap: .85rem; }
  .lpc__fsec p { font-size: .88rem; }
  .lpc__ffoot { padding: .65rem .7rem .7rem 1.1rem; }
  .lpc__ffoot .lpc__btn { min-height: 2.6rem; padding: 0 .9rem; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lpc__pin b::after, .lpc__lever::after, .lpc__load i::before, .lpc__title em { animation: none; }
  .lpc__fiche, .lpc__fiche.is-open, .lpc__stage > canvas, .lpc__lever, .lpc__bar { transition: none; }
}