/* Luna Park de Paris · l'enseigne lumineuse 3D (common/js/enseigne3d.js, attribut data-enseigne3d) */
: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'; --lp-f-neon: 'Yellowtail'; --lp-f-text: 'Plus Jakarta Sans'; --lp-f-mono: 'Geist Mono';
}
.lp-ens {
  --f-display: var(--lp-f-display), 'Big Shoulders', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --f-neon: var(--lp-f-neon), 'Pacifico', 'Brush Script MT', cursive;
  --f-text: var(--lp-f-text), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: var(--lp-f-mono), ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  position: relative; isolation: isolate; overflow: hidden; background: var(--lp-night); color: var(--lp-ivory); font-family: var(--f-text);
}
.lp-ens *, .lp-ens *::before, .lp-ens *::after { box-sizing: border-box; }
.ens-stage { position: relative; overflow: hidden; background: radial-gradient(70% 60% at 50% 42%, #1c0f48 0%, var(--lp-night) 72%); }
.lp-ens--accueil .ens-stage { height: 100vh; height: 100svh; min-height: 620px; max-height: 1100px; }
.ens-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: pan-y; cursor: pointer; opacity: 0; transition: opacity 1s ease; }
.ens-stage[data-ready] .ens-canvas { opacity: 1; }
.ens-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--lp-cyan); }
.ens-fallback { position: absolute; left: 50%; top: 46%; width: min(66%, 560px); aspect-ratio: 1600 / 1413; height: auto; translate: -50% -50%; pointer-events: none; transition: opacity .8s ease;
  filter: drop-shadow(0 0 30px rgba(255, 194, 74, .35)) drop-shadow(0 0 80px rgba(255, 46, 154, .25)); }
.ens-stage[data-ready] .ens-fallback { opacity: 0; }
.ens-stage[data-nogl] .ens-replay { display: none; }
.ens-replay { position: absolute; z-index: 3; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px 11px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 194, 74, .45); background: rgba(7, 6, 26, .62); color: var(--lp-gold); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 600 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; transition: background .2s, box-shadow .2s; opacity: 0; }
.ens-stage[data-ready] .ens-replay { opacity: 1; }
.ens-replay svg { width: 17px; height: 17px; filter: drop-shadow(0 0 5px var(--lp-gold)); }
.ens-replay:hover { background: rgba(255, 194, 74, .14); box-shadow: 0 0 24px rgba(255, 194, 74, .25); }
.ens-replay:focus-visible { outline: 2px solid var(--lp-cyan); outline-offset: 3px; }
.ens-stage[data-state="allumage"] .ens-replay svg { animation: ens-twinkle .5s ease-in-out infinite alternate; }
@keyframes ens-twinkle { to { opacity: .35; scale: .85; } }

.ens-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 500 11.5px/1.2 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--lp-gold); }
.ens-kicker::before { content: ''; width: 34px; height: 6px; flex: none; background: radial-gradient(circle, var(--lp-gold) 2px, transparent 2.6px) 0 50% / 9px 6px repeat-x; filter: drop-shadow(0 0 3px rgba(255, 194, 74, .9)); }
.ens-title { margin: 0; font: 800 clamp(40px, 5.2vw, 84px)/.9 var(--f-display); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance;
  background: linear-gradient(180deg, #FFF6E5 0%, #FFE2A6 60%, #E8B04A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .6)); }
.ens-sub { margin: 14px 0 0; font: 400 clamp(22px, 2vw, 30px)/1.2 var(--f-neon); color: #FFE6F3; text-shadow: 0 0 2px #fff, 0 0 10px var(--lp-pink), 0 0 26px rgba(255, 46, 154, .6); }
.ens-text { margin: 18px 0 0; max-width: 46ch; font-size: 15.5px; line-height: 1.65; color: rgba(255, 246, 229, .75); }
.ens-cta { margin: 26px 0 0; }
.ens-btn { --n: 7px; display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; text-decoration: none; border-radius: 6px;
  font: 800 16px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--lp-night); background: linear-gradient(180deg, #FFDA80 0%, var(--lp-gold) 45%, var(--lp-gold-2) 100%);
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 var(--n), #000 calc(var(--n) + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--n), #000 calc(var(--n) + .5px)) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, #0000 var(--n), #000 calc(var(--n) + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--n), #000 calc(var(--n) + .5px)) right / 51% 100% no-repeat; }

/* accueil : l'enseigne en plein écran, le titre posé en bas à gauche */
.lp-ens--accueil .ens-copy { position: absolute; z-index: 2; left: max(24px, 5vw); top: 50%; translate: 0 -50%; max-width: min(30vw, 420px); pointer-events: none; }
.lp-ens--accueil .ens-copy a { pointer-events: auto; }
.lp-ens--accueil .ens-title { font-size: clamp(34px, 3.6vw, 58px); }
.lp-ens--accueil .ens-sub { font-size: clamp(20px, 1.6vw, 26px); }
/* association : texte à gauche, enseigne à droite */
.lp-ens--asso { padding: clamp(70px, 9vw, 130px) 0; background: radial-gradient(60% 70% at 72% 50%, #1a0d44, var(--lp-night) 70%); }
.ens-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(28px, 4vw, 64px); width: min(1240px, 100% - 32px); margin-inline: auto; }
.lp-ens--asso .ens-stage { aspect-ratio: 4 / 3.7; border-radius: 26px; border: 1px solid rgba(255, 194, 74, .28); box-shadow: 0 40px 100px rgba(0, 0, 0, .55), inset 0 0 0 5px rgba(7, 6, 26, .6), inset 0 0 0 6px rgba(255, 194, 74, .12); }
@media (max-width: 899px) {
  .lp-ens--accueil .ens-stage { min-height: 560px; }
  .lp-ens--accueil .ens-copy { left: 16px; right: 16px; top: 22px; translate: none; max-width: none; text-align: center; }
  .lp-ens--accueil .ens-kicker { justify-content: center; }
  .ens-replay { right: 50%; translate: 50% 0; bottom: 18px; }
  .ens-wrap { grid-template-columns: 1fr; }
  .lp-ens--asso .ens-stage { aspect-ratio: 4 / 4.4; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-ens *, .lp-ens *::before, .lp-ens *::after { animation: none !important; transition-duration: .01ms !important; }
}
