/* Luna Park de Paris · granderoue3d (préfixe lpr) : scène, récit en trois tickets, motifs de LED, repères de la vue, fiches légères.
   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;
}
.lpr { --e: cubic-bezier(.22, .8, .2, 1); --line: rgba(47, 230, 255, .18); --line-2: rgba(47, 230, 255, .36); --glass: rgba(10, 8, 30, .78);
  --neon-grad: linear-gradient(100deg, var(--lp-electric), var(--lp-pink) 55%, #ff7ac0);
  position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 7.5rem); color: var(--lp-ivory); font-family: var(--lp-f-text);
  background: radial-gradient(60% 50% at 20% 0%, rgba(47, 230, 255, .12), transparent 70%), radial-gradient(60% 50% at 90% 100%, rgba(123, 47, 247, .22), transparent 70%), linear-gradient(180deg, var(--lp-night), var(--lp-deep) 55%, var(--lp-night)); }
.lpr::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 18% 14%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 66% 22%, #fff6 50%, transparent 51%), radial-gradient(1.4px 1.4px at 44% 6%, #cfefffaa 50%, transparent 51%), radial-gradient(1px 1px at 84% 10%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 8% 36%, #fff4 50%, transparent 51%); }
.lpr__wrap { position: relative; width: min(100% - 2 * clamp(1rem, 4vw, 3rem), 96rem); margin-inline: auto; }
.lpr__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); }
.lpr__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-cyan); }
.lpr__kicker::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--lp-cyan); box-shadow: 0 0 0 3px rgba(47, 230, 255, .16), 0 0 14px 2px rgba(47, 230, 255, .8); }
.lpr__title { margin: 0; font: 800 clamp(2.6rem, 1.4rem + 5.2vw, 6.2rem)/.88 var(--lp-f-display); text-transform: uppercase; color: var(--lp-ivory); text-wrap: balance; }
.lpr__title em { display: inline-block; font: 400 1.02em/1 var(--lp-f-neon); text-transform: none; color: #e3fbff; padding: 0 .08em; transform: rotate(-4deg) translateY(.05em);
  text-shadow: 0 0 .04em #fff, 0 0 .14em var(--lp-cyan), 0 0 .38em var(--lp-cyan), 0 0 .8em rgba(47, 230, 255, .6); animation: lpr-neon 6s steps(1) 1.2s 1 both; }
@keyframes lpr-neon { 0% { opacity: .15; } 4% { opacity: 1; } 6% { opacity: .3; } 8%, 100% { opacity: 1; } }
.lpr__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; }

.lpr__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%, #1a1440 0%, #0a0822 60%, #05040f 100%);
  box-shadow: inset 0 0 0 1px var(--line), 0 60px 120px -60px rgba(0, 0, 0, .95), 0 0 90px -40px rgba(123, 47, 247, .5); }
.lpr--compact .lpr__stage { height: clamp(30rem, 52vw, 44rem); }
.lpr__stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(47, 230, 255, .1), inset 0 -120px 120px -60px rgba(5, 4, 15, .7), inset 0 100px 100px -70px rgba(5, 4, 15, .55); }
.lpr__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); }
.lpr__stage > canvas:active { cursor: grabbing; }
.lpr__stage > canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--lp-cyan); }
.lpr__app.is-ready .lpr__stage > canvas { opacity: 1; }
.lpr__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); }
.lpr__load i { width: 5.5rem; height: 5.5rem; border-radius: 50%; background: conic-gradient(var(--lp-electric), var(--lp-pink), var(--lp-gold), var(--lp-cyan), var(--lp-electric)); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 70%, transparent 71%), repeating-conic-gradient(#000 0 4deg, transparent 4deg 15deg); -webkit-mask-composite: source-in; mask: radial-gradient(circle, transparent 62%, #000 63%, #000 70%, transparent 71%) intersect, repeating-conic-gradient(#000 0 4deg, transparent 4deg 15deg); filter: drop-shadow(0 0 6px var(--lp-pink)); animation: lpr-spin 6s linear infinite; }
@keyframes lpr-spin { to { transform: rotate(360deg); } }
.lpr__app.is-ready .lpr__load, .lpr__app.no-gl .lpr__load { opacity: 0; }
.lpr__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; }
.lpr__app.no-gl .lpr__nogl { display: block; }

.lpr__steps { position: absolute; z-index: 4; top: 1rem; left: 1rem; display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; transition: opacity .4s; }
.lpr__steps li { 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; }
.lpr__steps b { font: 500 .62rem/1 var(--lp-f-mono); color: var(--lp-cyan); opacity: .75; }
.lpr__steps li.is-done { color: rgba(255, 246, 229, .8); }
.lpr__steps li.is-on { color: #fff; background: var(--neon-grad); box-shadow: none; }
.lpr__steps li.is-on b { color: #fff; opacity: 1; }

/* ---------- grands boutons du récit ---------- */
.lpr__cta { position: absolute; z-index: 5; left: 50%; bottom: 4.9rem; transform: translateX(-50%); display: none; align-items: center; gap: 1rem; padding: .9rem 1.7rem .9rem 1rem; border: 0; border-radius: 999px; cursor: pointer; color: #fff; text-align: left;
  background: linear-gradient(180deg, rgba(40, 16, 70, .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(123, 47, 247, .1), 0 22px 60px -20px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(255, 46, 154, .55); }
.lpr__cta i { flex: none; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--neon-grad); box-shadow: 0 0 22px rgba(255, 46, 154, .7); }
.lpr__cta i svg { width: 1.6rem; height: 1.6rem; color: #fff; }
.lpr__cta b { display: block; font: 800 1.35rem/1 var(--lp-f-display); letter-spacing: .04em; text-transform: uppercase; }
.lpr__cta small { display: block; margin-top: .3rem; font: 500 .66rem/1.2 var(--lp-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lp-cyan); }
.lpr__cta::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; box-shadow: 0 0 0 1px rgba(255, 46, 154, .55); animation: lpr-ping 2.4s ease-out infinite; pointer-events: none; }
@keyframes lpr-ping { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.1, 1.4); } }
.lpr__cta--feu i { background: radial-gradient(circle at 40% 35%, #fff3c2, var(--lp-gold) 45%, #ff6a2a); box-shadow: 0 0 26px rgba(255, 194, 74, .8); }
.lpr__app.is-ready[data-phase="sol"] .lpr__cta--monter, .lpr__app[data-phase="sommet"] .lpr__cta--feu { display: flex; }
.lpr__app.has-card .lpr__cta { opacity: 0; pointer-events: none; }

/* ---------- barre : récit, motifs, descente ---------- */
.lpr__bar { position: absolute; z-index: 5; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; transition: opacity .4s; }
.lpr__say { flex: 1 1 18rem; margin: 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); }
.lpr__motifs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line); }
.lpr__motifs button { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.6rem; padding: 0 .9rem 0 .7rem; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 246, 229, .75); cursor: pointer; font: 700 .76rem/1 var(--lp-f-display); letter-spacing: .12em; text-transform: uppercase; transition: background .3s, color .3s; }
.lpr__motifs svg { width: 1.15rem; height: 1.15rem; flex: none; }
.lpr__motifs button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.lpr__motifs button[aria-pressed="true"] { color: #fff; background: var(--neon-grad); box-shadow: 0 0 20px -4px rgba(255, 46, 154, .8); }
.lpr__btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.9rem; padding: 0 1.1rem; border: 0; border-radius: 999px; cursor: pointer; background: var(--glass); 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; }
.lpr__btn svg { width: 1.05rem; height: 1.05rem; }
.lpr__btn:hover { background: rgba(47, 230, 255, .14); }
.lpr__app:not([data-phase="sommet"]):not([data-phase="feu"]) [data-act="descendre"] { display: none; }
.lpr__handle { display: none; }
.lpr__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-cyan); opacity: 0; transition: opacity .5s; pointer-events: none; white-space: nowrap; }
.lpr__app[data-phase="montee"] .lpr__hint, .lpr__app[data-phase="sommet"] .lpr__hint { opacity: 1; }
.lpr__app:not([data-phase="sol"]) .lpr__steps { opacity: .0; pointer-events: none; }
.lpr__app[data-phase="sommet"] .lpr__steps, .lpr__app[data-phase="feu"] .lpr__steps { opacity: 1; }

/* ---------- repères des lieux ---------- */
.lpr__pins { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.lpr__pin { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .35rem; height: 2rem; margin: -1rem 0 0 -1rem; padding: 0; border: 0; background: none; color: var(--lp-ivory); cursor: pointer; pointer-events: auto; will-change: transform; transition: opacity .35s; font: inherit; }
.lpr__pin b { position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font: 600 .66rem/1 var(--lp-f-mono); color: #fff; background: radial-gradient(circle at 35% 30%, #d9fbff, var(--lp-cyan) 40%, #0b6f86 100%); box-shadow: 0 0 0 2px rgba(10, 8, 30, .85), 0 0 18px 2px rgba(47, 230, 255, .6); }
.lpr__pin b::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--lp-cyan); animation: lpr-ring 2.8s ease-out infinite; }
@keyframes lpr-ring { 0% { transform: scale(.85); opacity: .9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.lpr__pin span { padding: .4rem .6rem; border-radius: 2px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--line-2); font: 700 .72rem/1 var(--lp-f-display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.lpr__pin:hover b, .lpr__pin.is-on b { background: radial-gradient(circle at 35% 30%, #ffd1ea, var(--lp-pink) 55%, #8a0a4a); }
.lpr__pin.is-off { opacity: 0; pointer-events: none; }

/* ---------- fiche légère ---------- */
.lpr__card { position: absolute; z-index: 6; left: 1rem; bottom: 5.2rem; width: min(23rem, calc(100% - 2rem)); padding: 1.2rem 3.2rem 1.25rem 1.3rem; border-radius: 6px; background: linear-gradient(180deg, rgba(22, 14, 52, .96), rgba(10, 8, 30, .96)); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -30px rgba(0, 0, 0, .95);
  transform: translateY(1rem); opacity: 0; visibility: hidden; transition: transform .5s var(--e), opacity .4s, visibility 0s .5s; }
.lpr__card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(90deg, var(--lp-cyan), var(--lp-electric), var(--lp-pink)); }
.lpr__card.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .5s var(--e), opacity .4s, visibility 0s; }
.lpr__cn { font: 500 .64rem/1.3 var(--lp-f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lp-cyan); }
.lpr__card h3 { margin: .45rem 0 .5rem; font: 800 1.55rem/.95 var(--lp-f-display); text-transform: uppercase; }
.lpr__card p { margin: 0; font-size: .92rem; line-height: 1.58; color: rgba(255, 246, 229, .86); }
.lpr__cx { position: absolute; top: .8rem; right: .8rem; width: 2.2rem; height: 2.2rem; 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; }
.lpr__cx svg { width: .95rem; height: .95rem; }
.lpr__cx:hover { background: var(--lp-cyan); color: #04121a; }
.lpr button:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }

@media (max-width: 1099px) { .lpr__head { grid-template-columns: 1fr; gap: 1.1rem; } }
@media (max-width: 759px) {
  .lpr__wrap { width: calc(100% - 2rem); }
  .lpr__stage, .lpr--compact .lpr__stage { height: min(150vw, 84svh); max-height: none; margin-inline: -.5rem; border-radius: 4px; }
  .lpr__steps { top: .6rem; left: .6rem; right: .6rem; gap: .25rem; }
  .lpr__steps li { flex: 1; justify-content: center; padding: .48rem .3rem; font-size: .6rem; letter-spacing: .08em; }
  .lpr__steps li span { display: none; }
  .lpr__steps li.is-on span { display: inline; }
  .lpr__cta { top: 3.4rem; bottom: auto; padding: .7rem 1.2rem .7rem .7rem; width: max-content; max-width: calc(100% - 2rem); }
  .lpr__cta i { width: 2.8rem; height: 2.8rem; }
  .lpr__cta b { font-size: 1.1rem; }
  .lpr__bar { left: .5rem; right: .5rem; bottom: .5rem; padding: .5rem; 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; }
  .lpr__handle { display: grid; place-items: center; width: 100%; height: 1.1rem; margin: -.2rem 0 0; padding: 0; border: 0; background: none; cursor: pointer; }
  .lpr__handle::before { content: ""; width: 2.6rem; height: 4px; border-radius: 4px; background: rgba(47, 230, 255, .45); }
  .lpr__say { flex-basis: 100%; font-size: .8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lpr__app.is-drawer .lpr__say { -webkit-line-clamp: unset; }
  .lpr__motifs { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 6px; }
  .lpr__motifs button { flex-direction: column; justify-content: center; gap: .25rem; min-height: 3rem; padding: .3rem .2rem; border-radius: 4px; font-size: .58rem; letter-spacing: .06em; }
  .lpr__bar .lpr__btn { width: 100%; justify-content: center; }
  .lpr__app:not(.is-drawer):not([data-phase="sol"]) .lpr__motifs { display: none; }
  .lpr__hint { top: auto; bottom: 10.4rem; font-size: .58rem; }
  .lpr__pin { height: 1.8rem; margin: -.9rem 0 0 -.9rem; }
  .lpr__pin b { width: 1.8rem; height: 1.8rem; }
  .lpr__pin span { display: none; }
  .lpr__card { left: .5rem; right: .5rem; bottom: .5rem; width: auto; z-index: 7; }
}
@media (prefers-reduced-motion: reduce) {
  .lpr__pin b::after, .lpr__cta::after, .lpr__load i, .lpr__title em { animation: none; }
  .lpr__card, .lpr__stage > canvas { transition: none; }
}