/* ==========================================================================
   DeaX — nouvel accueil
   Chargé après css/core.css (menu, pied de page, boutons du site).
   Préfixe nx- : aucune collision avec les classes du site.
   ========================================================================== */
body.nx {
  --nx-black: #050505;
  --nx-ink: #f4f1ea;
  --nx-mute: #a8a49c;
  --nx-line: rgba(244, 241, 234, .14);
  --nx-paper: #ecebe5;
  --nx-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --nx-spring: cubic-bezier(.3, 1.35, .45, 1);
  --nx-gut: clamp(18px, 5.5vw, 88px);
  background: var(--nx-black);
  color: var(--nx-ink);
}
body.nx ::selection { background: var(--orange); color: #000; }

/* ---------- Menu DeaX sur fond noir (mêmes éléments, mêmes interactions) ---------- */
.nx .nav.glass {
  --glass-bg: linear-gradient(180deg, rgba(34, 34, 34, .52), rgba(12, 12, 12, .36));
  border-color: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 44px -20px rgba(0, 0, 0, .9);
  color: var(--nx-ink);
}
.nx .nav.glass::before { opacity: .08; }
.nx .nav.glass::after { background: rgba(14, 14, 14, .86); }
.nx .nav__logo, .nx .nav__link, .nx .nav__meeting { color: var(--nx-ink); }
.nx .nav__link:hover, .nx .nav__link[aria-expanded="true"], .nx .nav__meeting:hover { background: rgba(255, 255, 255, .08); }
.nx .dropdown.glass { --glass-bg: linear-gradient(180deg, rgba(40, 40, 40, .5), rgba(14, 14, 14, .4)); background-color: rgba(16, 16, 16, .7); border-color: rgba(255, 255, 255, .1); color: var(--nx-ink); }
.nx .nav.glass:is(:hover, :focus-within) .dropdown.glass, .nx .nav__item.is-open .dropdown.glass { background-color: rgba(16, 16, 16, .92); border-color: rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.nx .dropdown.glass::before { opacity: .06; }
.nx .dropdown__link span { color: rgba(244, 241, 234, .58); }
.nx .dropdown__link:hover, .nx .dropdown__link:focus-visible { background: rgba(255, 255, 255, .07); }
.nx .nav__burger { color: var(--nx-ink); }
.nx .nav__burger .bars { background: var(--nx-ink); }
.nx .nav__burger .bars i { background: #000; }
.nx .mobile-menu__backdrop { background: rgba(6, 6, 6, .97); }
.nx .mobile-menu { color: var(--nx-ink); --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .26); --ink-2: rgba(244, 241, 234, .6); }
.nx .mobile-menu__top[aria-expanded="true"] .plus { background: var(--nx-ink); color: #000; border-color: var(--nx-ink); }
.nx .mobile-menu__more a { background: rgba(255, 255, 255, .08); }
.nx .float-cta.glass { --glass-bg: linear-gradient(180deg, rgba(34, 34, 34, .8), rgba(12, 12, 12, .7)); border-color: rgba(255, 255, 255, .12); color: var(--nx-ink); }
.nx .float-cta.glass::before { opacity: .1; }

.nx .site-header.is-hidden .nav { box-shadow: none; }
.nx .site-footer { background: var(--nx-black); color: rgba(244, 241, 234, .7); border-top: 1px solid var(--nx-line); }
.nx .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--orange) 50%, transparent); opacity: .7; }
.nx .site-footer .shell { padding-top: clamp(20px, 3vw, 40px); }
.nx .footer__grid { gap: 44px 28px; padding-bottom: clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--nx-line); }
.nx .footer__brand { gap: 22px; }
.nx .footer__brand .logo { font-size: 1.6rem; }
.nx .footer__brand p { font-family: var(--nx-serif); font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.25; letter-spacing: -.01em; color: rgba(244, 241, 234, .82); }
.nx .footer__title { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--nx-mute); margin-bottom: 18px; }
.nx .footer__col ul { gap: 12px; }
.nx .footer__col a { display: inline-flex; align-items: center; gap: 0; font-size: .95rem; color: rgba(244, 241, 234, .82); transition: color .3s, gap .4s var(--ease); }
.nx .footer__col a::before { content: "→"; display: inline-block; width: 0; overflow: hidden; color: var(--orange); transition: width .4s var(--ease); }
.nx .footer__col a:hover { color: #fff; gap: 6px; }
.nx .footer__col a:hover::before { width: 1em; }
.nx .footer__col .footer__cta { display: inline-flex; padding: 9px 16px; border-radius: 999px; background: var(--nx-ink); color: #000 !important; font-weight: 600; }
.nx .footer__col .footer__cta::before { display: none; }
.nx .footer__col .footer__cta:hover { background: #fff; }
.nx .footer__hours { color: rgba(244, 241, 234, .45); }
.nx .footer__social { gap: 8px; }
.nx .footer__social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--nx-line); background: transparent; transition: background .35s, color .35s, transform .45s var(--ease), border-color .35s; }
.nx .footer__social a:hover { background: var(--nx-ink); border-color: var(--nx-ink); color: #000; transform: translateY(-3px); }
.nx .footer__member { display: block; margin: clamp(28px, 4vw, 44px) 0 0; max-width: 72ch; font-size: .86rem; line-height: 1.6; color: rgba(244, 241, 234, .5); }
.nx .footer__member a { color: rgba(244, 241, 234, .85); text-decoration: underline; text-underline-offset: .2em; }
.nx .footer__word { position: relative; font-size: clamp(76px, 15vw, 230px); margin: clamp(40px, 6vw, 80px) 0 0 -.03em; padding-bottom: .02em; overflow: hidden; line-height: .78; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--nx-ink); color: var(--nx-ink); letter-spacing: -.055em; }
.nx .footer__word span { -webkit-text-fill-color: var(--nx-ink); background: none; }
.nx .footer__word span::after { content: "."; -webkit-text-fill-color: var(--orange); }
.nx .footer__word::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, var(--nx-black)); pointer-events: none; }
.nx .footer__legal { border-top-color: var(--nx-line); color: rgba(244, 241, 234, .5); }
.nx .footer__legal a:hover { color: var(--orange); }

/* ---------- Éléments communs ---------- */
.nx-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-mute); }
.nx-kicker--dark { color: rgba(10, 10, 10, .62); }
.nx-o { color: var(--orange); }
.nx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 122, 26, .16); }
.nx em { font-family: var(--nx-serif); font-style: italic; font-weight: 400; }
.nx-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.nx-link i { font-style: normal; transition: transform var(--dur) var(--ease); }
.nx-link:hover i { transform: translateX(5px); }
.nx-btn {
  --bf: var(--nx-ink); --bt: #000;                 /* couleur qui remplit le bouton au survol, texte au survol */
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 6px 0 24px; border-radius: 200px;
  font-size: .97rem; font-weight: 560; letter-spacing: -.01em; white-space: nowrap;
  transition: color .4s var(--ease), box-shadow .4s, transform .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* Pastille : un cercle orange avec la flèche ; au survol il s'étend sous tout le bouton */
.nx-btn__ico { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: #000; }
.nx-btn__ico::before { content: ""; position: absolute; z-index: -1; right: 0; top: 0; width: 40px; height: 40px; border-radius: 20px; background: var(--bf); transition: width .55s var(--ease), height .55s var(--ease), right .55s var(--ease), top .55s var(--ease), border-radius .55s var(--ease); }
.nx-btn__ico > span { display: flex; width: 16px; overflow: hidden; }
.nx-btn__ico svg { flex: none; width: 16px; height: 16px; transition: transform .5s var(--ease); }
.nx-btn__ico svg + svg { margin-left: 8px; }
.nx-btn__t { position: relative; transition: transform .5s var(--ease); }
.nx-btn:is(:hover, :focus-visible) { color: var(--bt); }
.nx-btn:is(:hover, :focus-visible) .nx-btn__ico::before { width: var(--bw, 300px); height: 52px; right: -6px; top: -6px; border-radius: 26px; }
.nx-btn:is(:hover, :focus-visible) .nx-btn__ico svg { transform: translateX(-24px); }   /* la flèche sort à droite, une autre entre */
.nx-btn:is(:hover, :focus-visible) .nx-btn__t { transform: translateX(4px); }
.nx-btn:active { transform: scale(.97); }
.nx-btn--line { box-shadow: inset 0 0 0 1.5px rgba(244, 241, 234, .55); color: var(--nx-ink); }
.nx-btn--plain { padding: 0 28px; justify-content: center; }
.nx-btn--plain::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--bf); transform: scaleX(0); transform-origin: left center; transition: transform .55s var(--ease); }
.nx-btn--plain:is(:hover, :focus-visible)::before { transform: none; }
.nx-btn--plain:is(:hover, :focus-visible) .nx-btn__t { transform: none; }
.nx-btn--line:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1.5px var(--nx-ink); }
.nx-btn--solid { --bf: #111; --bt: var(--nx-ink); background: var(--nx-ink); color: #000; }
.nx-btn--solid .nx-btn__ico { color: var(--orange); }
.nx-btn--orange { --bf: var(--nx-ink); background: var(--orange); color: #000; }
.nx-btn--orange .nx-btn__ico { color: var(--orange); }
.nx-btn--orange .nx-btn__ico::before { background: #000; }
.nx-btn--orange:is(:hover, :focus-visible) .nx-btn__ico::before { background: var(--nx-ink); }
.nx-btn--orange:is(:hover, :focus-visible) .nx-btn__ico { color: #000; }
/* Écrans tactiles : pas de survol collant, le bouton se remplit pendant l'appui */
@media (hover: none) {
  .nx-btn:hover { color: inherit; }
  .nx-btn:hover .nx-btn__ico::before { width: 40px; height: 40px; right: 0; top: 0; border-radius: 20px; }
  .nx-btn:hover .nx-btn__ico svg, .nx-btn:hover .nx-btn__t { transform: none; }
  .nx-btn:active { color: var(--bt); }
  .nx-btn--plain:hover::before { transform: scaleX(0); }
  .nx-btn--plain:active::before { transform: none; transition-duration: .25s; }
  .nx-btn:active .nx-btn__ico::before { width: var(--bw, 300px); height: 52px; right: -6px; top: -6px; border-radius: 26px; transition-duration: .3s; }
}

/* Découpes (mots) */
.nx-w { display: inline-block; }

/* ==========================================================================
   01 · HERO (composition AUREX)
   ========================================================================== */
.nx-hero { position: relative; z-index: 1; overflow: hidden; }
.nx-hero__in { min-height: 100svh; padding: 124px 16px 34px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.nx-hero__title { max-width: 980px; margin: 0 auto; font-family: var(--nx-serif); font-weight: 400; font-size: clamp(44px, 5.2vw, 78px); line-height: .98; letter-spacing: -.03em; }
.nx-hero__l2 { color: var(--nx-ink); }
.nx-hero__text { max-width: 600px; margin: 22px auto 0; font-size: 16px; line-height: 1.6; color: #b5b5b5; text-wrap: pretty; }

/* Bandeau de visuels */
.nx-strip { position: relative; width: 100%; max-width: 1000px; height: 280px; margin: 18px auto 0; }
.nx-sc { position: absolute; left: 50%; top: 52%; width: 184px; height: 184px; margin: -92px 0 0 -92px; border-radius: 18px; overflow: hidden; background: #111; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .05); transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) rotate(calc(var(--r) * 1deg)); transition: transform 1.1s var(--nx-spring), opacity .5s ease, box-shadow .4s; will-change: transform; }
.nx-sc img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.nx-who { position: absolute; z-index: 9; left: 50%; top: 50%; padding: 8px 12px; border-radius: 12px; font-size: 18px; line-height: 1.2; white-space: nowrap; pointer-events: none; transition: opacity .5s, scale .6s var(--nx-spring); }
.nx-who::after { content: ""; position: absolute; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.nx-who--a { margin: -162px 0 0 -356px; background: #262626; color: #fff; rotate: -6deg; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.nx-who--a::after { left: 22px; }
.nx-who--b { margin: -150px 0 0 300px; background: #e9e9e9; color: #050505; rotate: 14deg; }
.nx-who--b::after { left: 18px; }
.nx-hero__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.nx-logos { width: 100%; max-width: 900px; margin: 46px auto 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.nx-logos__track { display: flex; width: max-content; animation: nx-marquee 34s linear infinite; }
.nx-logos__set { display: flex; align-items: center; gap: 90px; padding: 0 90px 0 0; margin: 0; list-style: none; }
.nx-logos__set li { flex: none; display: grid; place-items: center; height: 80px; }
.nx-logos__set img { width: auto; height: 34px; max-width: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: 1; }
.nx-logos__set li:nth-child(3) img { height: 46px; }
@keyframes nx-marquee { to { transform: translateX(-50%); } }

/* Entrée (uniquement si les animations sont autorisées) */
.nx-anim [data-nx-split] .nx-w { opacity: 0; filter: blur(10px); transform: translateY(12px); transition: opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease); }
.nx-anim .nx-hero__title .nx-w { transition-delay: calc(.15s + var(--i) * .06s); }
.nx-anim .nx-hero__text .nx-w { transition-delay: calc(.95s + var(--i) * .018s); }
.nx-anim .nx-sc { opacity: 0; transform: translate(0, 40px) scale(.86); }
.nx-anim .nx-who { opacity: 0; scale: .6; }
.nx-anim .nx-hero__cta { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease) 1.2s, transform .8s var(--ease) 1.2s; }
.nx-anim .nx-logos { opacity: 0; transition: opacity 1.2s ease 1.4s; }
.nx-anim.nx-loaded .nx-hero__cta { opacity: 1; transform: none; }
.nx-anim.nx-loaded [data-nx-split] .nx-w { opacity: 1; filter: none; transform: none; }
.nx-anim.nx-loaded .nx-sc { opacity: 1; }
.nx-anim.nx-loaded .nx-logos { opacity: 1; }
.nx-anim .nx-strip.is-fanned .nx-sc { transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) rotate(calc(var(--r) * 1deg)) scale(1); }
.nx-strip.is-fanned .nx-sc:nth-of-type(1), .nx-strip.is-fanned .nx-sc:nth-of-type(7) { transition-delay: .16s; }
.nx-strip.is-fanned .nx-sc:nth-of-type(2), .nx-strip.is-fanned .nx-sc:nth-of-type(6) { transition-delay: .08s; }
.nx-anim .nx-strip.is-fanned .nx-who { opacity: 1; scale: 1; transition-delay: .9s; animation: nx-bob 5s ease-in-out 1.6s infinite; }
.nx-strip.is-fanned .nx-who--b { animation-delay: 2.4s; }
@keyframes nx-bob { 50% { translate: 0 -6px; } }
/* Survol : le visuel se soulève, ses voisins s'écartent */
.nx-strip.is-fanned .nx-sc.is-lift { transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px - 18px)) rotate(calc(var(--r) * .4deg)) scale(1.06); transition-delay: 0s; box-shadow: 0 30px 60px -20px #000, 0 0 0 1px rgba(255, 255, 255, .1); }
.nx-strip.is-fanned .nx-sc.is-push-l { transform: translate(calc(var(--x) * 1px - 14px), calc(var(--y) * 1px)) rotate(calc(var(--r) * 1deg)); transition-delay: 0s; }
.nx-strip.is-fanned .nx-sc.is-push-r { transform: translate(calc(var(--x) * 1px + 14px), calc(var(--y) * 1px)) rotate(calc(var(--r) * 1deg)); transition-delay: 0s; }

/* ==========================================================================
   02 · EXPERTISES — trois panneaux
   Ordinateur : le panneau survolé (ou au centre de l'écran) s'étire et dévoile sa capture.
   Mobile : trois blocs empilés, titre, texte et lien toujours visibles.
   ========================================================================== */
.nx-exp { position: relative; z-index: 2; background: var(--nx-black); padding: clamp(100px, 11vw, 160px) var(--nx-gut) clamp(40px, 5vw, 70px); }
.nx-exp__head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 1100px; }
.nx-exp__title { font-family: var(--nx-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 72px); line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
.nx-exp__title em { color: var(--nx-mute); }
.nx-tri { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; height: clamp(460px, 68vh, 640px); }
.nx-tri__item { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; background: #0f0f0f; box-shadow: inset 0 0 0 1px var(--nx-line); transition: flex-grow .8s var(--ease), box-shadow .5s; }
.nx-tri__item.is-on { flex-grow: 2.3; box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .28); }
.nx-tri__link { position: absolute; inset: 0; display: block; color: var(--nx-ink); }
.nx-tri__media { position: absolute; inset: 0; }
.nx-tri__media > img:not(.nx-tri__jj), .nx-tri__media picture img { width: 100%; height: 100%; object-fit: cover; object-position: top left; filter: grayscale(1) brightness(.6); transform: scale(1.12); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
.nx-tri__item.is-on .nx-tri__media > img:not(.nx-tri__jj), .nx-tri__item.is-on .nx-tri__media picture img { filter: none; transform: scale(1); }
.nx-tri__media::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, .15) 15%, rgba(5, 5, 5, .7) 52%, rgba(5, 5, 5, .97) 80%); }
.nx-tri__phone { position: absolute; z-index: 1; right: 7%; top: 9%; width: clamp(70px, 8.5vw, 132px); aspect-ratio: 780 / 1688; border-radius: 14px; overflow: hidden; border: 3px solid #0b0b0b; background: #0b0b0b; box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .85); opacity: 0; transform: translateY(40px) rotate(9deg); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.nx-tri__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.nx-tri__item.is-on .nx-tri__phone { opacity: 1; transform: rotate(5deg); transition-delay: .15s; }
.nx-tri__jj { position: absolute; z-index: 1; width: clamp(46px, 5vw, 86px); height: auto; filter: drop-shadow(0 16px 20px rgba(4, 40, 90, .5)); opacity: 0; transition: opacity .6s, scale .8s var(--nx-spring); scale: .4; }
.nx-tri__item.is-on .nx-tri__jj { opacity: 1; scale: 1; }
.nx-tri__jj--1 { left: 38%; top: 6%; animation: nx-float 6s ease-in-out infinite; transition-delay: .2s; }
.nx-tri__jj--2 { left: 8%; top: 30%; width: clamp(38px, 3.8vw, 66px); animation: nx-float 7s ease-in-out -2s infinite; transition-delay: .3s; }
.nx-tri__jj--3 { right: 26%; top: 40%; animation: nx-float 5.5s ease-in-out -1s infinite; transition-delay: .4s; }
.nx-tri__jj--4 { right: 6%; top: 8%; width: clamp(44px, 4.6vw, 80px); animation: nx-float 6.5s ease-in-out -3s infinite; transition-delay: .25s; }
.nx-tri__jj--5 { right: 12%; top: 24%; width: clamp(36px, 3.6vw, 62px); animation: nx-float 5s ease-in-out -2.5s infinite; transition-delay: .35s; }
.nx-tri__jj--6 { left: 22%; top: 16%; width: clamp(34px, 3.2vw, 56px); animation: nx-float 7.5s ease-in-out -4s infinite; transition-delay: .45s; }
.nx-tri__n { position: absolute; z-index: 1; left: 22px; top: 18px; font-family: var(--f-display); font-weight: 800; font-size: clamp(56px, 6vw, 104px); line-height: .9; letter-spacing: -.05em; font-variation-settings: "wdth" 70; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .55); transition: color .6s, -webkit-text-stroke-color .6s; }
.nx-tri__item.is-on .nx-tri__n { color: var(--nx-ink); -webkit-text-stroke-color: var(--nx-ink); }
.nx-tri__body { position: absolute; left: 22px; right: 22px; bottom: 24px; display: grid; gap: 10px; }
.nx-tri__kind { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-mute); }
.nx-tri__name { font-family: var(--nx-serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 44px); line-height: 1; letter-spacing: -.02em; }
.nx-tri__text { max-width: 44ch; color: rgba(244, 241, 234, .76); line-height: 1.5; font-size: .98rem; }
.nx-tri__go { display: inline-flex; align-items: center; gap: 10px; width: max-content; margin-top: 4px; padding: 10px 16px; border-radius: 999px; background: var(--nx-ink); color: #000; font-weight: 600; font-size: .92rem; }
.nx-tri__go i { color: var(--orange-deep); }
.nx-tri__go i { font-style: normal; transition: transform .4s var(--ease); }
.nx-tri__link:hover .nx-tri__go i { transform: translateX(5px); }
/* Panneaux repliés : seul le titre reste visible */
@media (min-width: 810px) {
  .nx-tri__text, .nx-tri__go { opacity: 0; max-height: 0; overflow: hidden; transform: translateY(10px); transition: opacity .4s, transform .6s var(--ease), max-height .6s var(--ease); }
  .nx-tri__item.is-on .nx-tri__text, .nx-tri__item.is-on .nx-tri__go { opacity: 1; max-height: 9em; transform: none; transition-delay: .2s; }
  .nx-tri__item:not(.is-on) .nx-tri__name { font-size: clamp(22px, 1.9vw, 32px); }
}
.nx-anim .nx-tri__item { opacity: 0; transform: translateY(40px); }
.nx-anim .nx-tri.is-in .nx-tri__item { opacity: 1; transform: none; transition: flex-grow .8s var(--ease), box-shadow .5s, opacity .9s var(--ease) calc(var(--k) * .1s), transform .9s var(--ease) calc(var(--k) * .1s); }

/* ==========================================================================
   03 · RÉALISATIONS
   ========================================================================== */
.nx-works { position: relative; z-index: 2; background: var(--nx-black); }
.nx-works__intro { position: relative; display: grid; place-content: center; justify-items: center; gap: 22px; min-height: 62vh; padding: 70px var(--nx-gut) 80px; text-align: center; overflow: hidden; }
.nx-works__disc { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; border-radius: 50%; background: #9b4733; transform: scale(var(--disc, 1)); }
.nx-works__intro > :not(.nx-works__disc) { position: relative; }
.nx-works__intro .nx-kicker { color: rgba(243, 239, 230, .7); }
.nx-works__title { font-family: var(--nx-serif); font-weight: 400; font-size: clamp(48px, 8.6vw, 150px); line-height: .92; letter-spacing: -.035em; color: #f3efe6; max-width: 12ch; }
.nx-works__title em { color: #f3c5ad; }
.nx-works__lead { max-width: 30ch; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5; color: rgba(243, 239, 230, .78); }
/* Indication qui suit la galerie (ordinateur) : « Continuez, il y a d'autres créations » */
.nx-works__next { display: none; }
.nx-works.is-h .nx-works__next { position: absolute; z-index: 5; right: var(--nx-gut); bottom: 46px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: calc(1 - var(--wp, 0) * 1.25); pointer-events: none; }
.nx-works__next b { font-variant-numeric: tabular-nums; }
.nx-works__next svg { width: 16px; height: 16px; animation: nx-nudge 1.4s var(--ease) infinite; }
@keyframes nx-nudge { 50% { transform: translateX(6px); } }
/* Mobile : une main qui fait glisser, tant que personne n'a encore swipé */
.nx-works__swipe { display: none; }
.nx-works.is-swipe.is-teasing .nx-works__swipe { position: absolute; z-index: 5; left: 50%; top: 52%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; pointer-events: none; animation: nx-swipe 1.6s var(--ease) infinite; }
.nx-works.is-swipe .nx-works__swipe svg { width: 30px; height: 30px; }
@keyframes nx-swipe { 0% { transform: translateX(40px); opacity: 0; } 18% { transform: translateX(40px); opacity: 1; } 60% { transform: translateX(-40px); opacity: 1; } 78%, 100% { transform: translateX(-40px); opacity: 0; } }
/* La carte suit la main, puis revient à sa place : on comprend le geste sans changer de démo */
.nx-works.is-teasing .nx-works__track { animation: nx-tease 1.6s var(--ease) infinite; }
@keyframes nx-tease { 0%, 18% { transform: none; } 60% { transform: translateX(-56px); } 85%, 100% { transform: none; } }
.nx-works__pin { position: relative; }
.nx-works__track { display: grid; }
.nx-works__bar, .nx-works__dots, .nx-works__more { display: none; }
.nx-pj > :not(.nx-fx) { position: relative; z-index: 1; }
.nx-pj .nx-pj__phone { position: absolute; z-index: 3; }
.nx-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Rayonne : l'arc-en-ciel du festival en fond, qui s'élève et tourne au défilement */
.nx-fx--arcs i { position: absolute; left: 50%; top: 100%; width: calc(var(--s) * 1%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: clamp(18px, 3.4vw, 54px) solid var(--c); transform: translateY(calc(var(--pd, 0) * 24%)) rotate(calc(var(--pd, 0) * -30deg)) scale(calc(1 - var(--pa, 0) * .15)); }
.nx-fx--arcs i:nth-child(1) { --s: 150; --c: #ff5a1f; }
.nx-fx--arcs i:nth-child(2) { --s: 128; --c: #ff8fb1; }
.nx-fx--arcs i:nth-child(3) { --s: 106; --c: #ffc12e; }
.nx-fx--arcs i:nth-child(4) { --s: 84; --c: #6bb7a5; }
.nx-fx--arcs i:nth-child(5) { --s: 62; --c: #f7efe2; }
/* Bloum : bonbons en 3D qui flottent autour de la capture */
.nx-jj { position: absolute; width: clamp(70px, 9vw, 170px); height: auto; filter: drop-shadow(0 22px 26px rgba(4, 40, 90, .45)); transform: translate3d(calc(var(--pd, 0) * var(--vx) * 1px), calc(var(--pd, 0) * var(--vy) * 1px), 0) rotate(calc(var(--pd, 0) * var(--vr) * 1deg)); }
.nx-jj > * { display: block; }
.nx-jj--1 { left: 47%; top: 8%; --vx: -260; --vy: 120; --vr: -50; animation: nx-float 6s ease-in-out infinite; }
.nx-jj--2 { right: 4%; top: 6%; --vx: 300; --vy: -80; --vr: 60; animation: nx-float 7s ease-in-out -2s infinite; }
.nx-jj--3 { right: 9%; bottom: 10%; --vx: 220; --vy: 160; --vr: 40; animation: nx-float 5.5s ease-in-out -1s infinite; }
.nx-jj--4 { left: 40%; bottom: 6%; --vx: -180; --vy: -140; --vr: -70; width: clamp(54px, 6.5vw, 120px); animation: nx-float 6.5s ease-in-out -3s infinite; }
@keyframes nx-float { 50% { translate: 0 -14px; rotate: 8deg; } }
/* Cap Aure : la boussole 3D pivote au rythme du défilement, l'aiguille désigne le projet */
.nx-fx--compass { overflow: visible; }
.nx-compass { position: absolute; left: 36%; top: 50%; width: clamp(150px, 19vw, 340px); aspect-ratio: 1; translate: -50% -50%; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .45)); transform: perspective(900px) rotateX(calc(18deg + var(--pd, 0) * 30deg)) rotateY(calc(var(--pd, 0) * -50deg)) rotate(calc(var(--pd, 0) * 220deg)); }
.nx-compass img { width: 100%; height: 100%; }
.nx-compass__ring { position: absolute; left: 36%; top: 50%; width: clamp(240px, 30vw, 540px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px dashed rgba(23, 21, 15, .3); transform: rotate(calc(var(--pd, 0) * -90deg)); }
.nx-compass__ring::before { content: "N"; position: absolute; left: 50%; top: -10px; translate: -50% 0; padding: 0 6px; background: var(--bg); font-family: var(--f-display); font-weight: 700; font-size: 14px; color: #17150f; }
/* Tolva : coloris qui se succèdent dans la capture */
.nx-pj__shot--swap img { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.nx-pj__shot--swap img.is-on { position: relative; opacity: 1; }
.nx-swatch { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nx-swatch button { width: 26px; height: 26px; border-radius: 50%; background: var(--c); font-size: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.nx-swatch button:hover { transform: scale(1.12); }
.nx-swatch button.is-on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 0 0 3px var(--bg), 0 0 0 4.5px var(--fg); }

/* Panneau projet — version empilée (mobile, sans JS) */
.nx-pj { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 90px var(--nx-gut) 100px; background: var(--bg); color: var(--fg); overflow: hidden; }
.nx-pj__meta { display: flex; align-items: center; gap: 14px; }
.nx-pj__n { font-family: var(--f-display); font-weight: 700; font-size: .95rem; font-variation-settings: "wdth" 100; }
.nx-pj__kind { padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); font-size: .8rem; font-weight: 560; }
.nx-pj__kind--live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .2); vertical-align: 1px; }
.nx-pj__name { font-family: var(--f-display); font-weight: 800; font-size: clamp(48px, 15vw, 260px); line-height: .86; letter-spacing: -.055em; font-variation-settings: "wdth" 100; }
.nx-pj__text { max-width: 400px; line-height: 1.55; opacity: .82; }
.nx-pj__cta { display: inline-flex; align-items: center; gap: 12px; width: max-content; padding: 12px 20px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 600; transition: transform .45s var(--ease), background .3s; }
.nx-pj__cta i { font-style: normal; transition: transform .45s var(--ease); }
.nx-pj__cta:hover { background: var(--ac); color: #000; }
.nx-pj__cta:hover i { transform: translateX(4px); }
.nx-pj__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: rgba(0, 0, 0, .2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.nx-pj__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.2s var(--ease); }
.nx-pj__phone { position: absolute; z-index: 2; width: 26%; max-width: 150px; aspect-ratio: 780 / 1688; border-radius: 16px; overflow: hidden; border: 3px solid #0b0b0b; background: #0b0b0b; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.nx-pj__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.nx-pj .nx-pj__shot { margin-top: 10px; }
.nx-pj__phone { right: calc(var(--nx-gut) - 6px); bottom: 70px; }
.nx-pj--all { min-height: 60vh; place-content: center; }
.nx-all { display: grid; gap: 12px; justify-items: start; }
.nx-all__k { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-mute); }
.nx-all__t { font-family: var(--f-display); font-weight: 800; font-size: clamp(54px, 11vw, 190px); line-height: .84; letter-spacing: -.05em; font-variation-settings: "wdth" 80; transition: font-variation-settings .8s var(--ease), color .3s; }
.nx-all__arrow { font-size: clamp(40px, 6vw, 90px); color: var(--orange); transition: transform .6s var(--ease); }
.nx-all:hover .nx-all__t { font-variation-settings: "wdth" 120; color: var(--orange); }
.nx-all:hover .nx-all__arrow { transform: translateX(24px); }

/* ---- version horizontale (ordinateur) ---- */
.nx-works.is-h .nx-works__pin { height: 100vh; overflow: hidden; background: #9b4733; }
.nx-works.is-h .nx-works__track { display: flex; height: 100%; width: max-content; will-change: transform; }
.nx-works.is-h .nx-pj { flex: none; width: 100vw; height: 100vh; padding: 0; display: block; background: var(--bg); }
.nx-works.is-h .nx-pj__meta { position: absolute; left: var(--nx-gut); top: 112px; }
.nx-works.is-h .nx-pj__text { position: absolute; left: var(--nx-gut); top: 170px; width: 340px; }
.nx-works.is-h .nx-pj__cta { position: absolute; left: var(--nx-gut); top: 290px; }
.nx-works.is-h .nx-swatch { position: absolute; left: var(--nx-gut); top: 362px; }
.nx-works.is-h .nx-pj__name { position: absolute; z-index: 1; left: var(--nx-gut); bottom: 5vh; font-size: clamp(90px, 15vw, 280px); white-space: nowrap; transform: translateX(var(--nx, 0px)); will-change: transform; }
.nx-works.is-h .nx-pj__shot { position: absolute; z-index: 2; right: 7vw; top: 50%; width: 52vw; margin: -16.25vw 0 0; transform: perspective(1400px) rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); transform-origin: center; will-change: transform; }
.nx-works.is-h .nx-pj__shot:hover img { transform: scale(1.04); }
.nx-works.is-h .nx-pj__phone { right: auto; left: calc(41vw - 4vw); bottom: auto; top: calc(50% + 2vw); width: 9.5vw; max-width: none; transform: translateY(var(--py, 0px)); will-change: transform; }
.nx-works.is-h .nx-pj--all { display: grid; padding: 0 var(--nx-gut); }
.nx-works.is-h .nx-pj--aure .nx-pj__shot { right: 5vw; width: 46vw; margin-top: -14.4vw; }
.nx-works.is-h .nx-pj--aure .nx-pj__phone { left: auto; right: 4vw; top: calc(50% + 4vw); }
.nx-works.is-h .nx-compass, .nx-works.is-h .nx-compass__ring { left: 34%; top: 56%; }
.nx-works.is-h .nx-works__bar { display: block; position: absolute; left: var(--nx-gut); right: var(--nx-gut); bottom: 26px; height: 1px; background: rgba(255, 255, 255, .18); mix-blend-mode: difference; }
.nx-works__bar i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--wp, 0)); }

/* ==========================================================================
   Transition réalisations → logiciels : le texte s'allume mot à mot sur un fond qui s'assombrit
   ========================================================================== */
/* Transition « changement de dimension » : sur fond clair, le point de « Maintenant, place aux logiciels »
   devient un cercle noir qui envahit l'écran ; de l'autre côté, la section logiciels commence. */
.nx-bridge { position: relative; z-index: 2; background: var(--nx-black); }
.nx-bridge__pin { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 90px var(--nx-gut); overflow: hidden; background: var(--nx-paper); color: #0d0d0d; }
.nx-bridge__a, .nx-bridge__b { grid-area: 1 / 1; display: grid; justify-items: center; gap: clamp(22px, 3vw, 34px); max-width: 980px; text-align: center; }
.nx-bridge__past { font-family: var(--nx-serif); font-size: clamp(30px, 3.8vw, 60px); line-height: 1.08; letter-spacing: -.025em; color: #0d0d0d; text-wrap: balance; }
.nx-bridge__past { font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: .02em; color: rgba(13, 13, 13, .5); }
.nx-bridge__now { font-family: var(--nx-serif); font-size: clamp(40px, 6.4vw, 104px); line-height: 1; letter-spacing: -.03em; color: #0d0d0d; text-wrap: balance; }
/* Le « ? » se transforme en « ! » pendant le défilement ; le zoom noir part du point du « ! » */
.nx-qm { position: relative; display: inline-block; width: .5em; height: 1em; margin-left: .08em; vertical-align: -.1em; }
.nx-qm i { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-style: normal; transition: none; }
.nx-qm i:first-child { opacity: calc(1 - var(--m, 0)); transform: rotate(calc(var(--m, 0) * 70deg)) scale(calc(1 - var(--m, 0) * .4)); }
.nx-qm i:last-child { opacity: var(--m, 0); transform: rotate(calc((1 - var(--m, 0)) * -70deg)) scale(calc(.6 + var(--m, 0) * .4)); }
.nx-qm::after { content: ""; position: absolute; left: 50%; bottom: .14em; width: .12em; height: .12em; translate: -50% 0; }
.nx-bridge__portal { position: absolute; z-index: 1; left: var(--px, 50%); top: var(--py, 50%); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--nx-black); transform: scale(var(--ps, 120)); }
.nx-bridge__b { position: relative; z-index: 2; color: var(--nx-ink); }
.nx-bridge__t { max-width: 18ch; font-family: var(--nx-serif); font-size: clamp(36px, 5.2vw, 84px); line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
.nx-bridge__t em { display: block; margin-top: .2em; color: var(--nx-mute); }
.nx-bridge__down { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--nx-line); animation: nx-bob 2.2s ease-in-out infinite; }
.nx-bridge__down svg { width: 18px; height: 18px; }
/* Sans animation : directement l'état final (fond noir) */
html:not(.nx-anim) .nx-bridge__a { visibility: hidden; }
.nx-works.is-swipe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 140px; background: linear-gradient(transparent, var(--nx-paper)); pointer-events: none; }

/* ==========================================================================
   04 · LOGICIELS MÉTIER — modules flottants qui s'assemblent en un logiciel
   Grille 12 × 6 (≥ 810 px) ou 2 colonnes (mobile) ; chaque mode réorganise les modules.
   ========================================================================== */
.sx { position: relative; z-index: 2; background: var(--nx-black); overflow: clip; }
.sx__pin { display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 30px); min-height: 100vh; padding: clamp(92px, 12vh, 118px) var(--nx-gut) 28px; }
.sx__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.sx__title { margin-top: 12px; max-width: 18ch; font-family: var(--nx-serif); font-weight: 400; font-size: clamp(34px, 3.7vw, 60px); line-height: 1; letter-spacing: -.025em; }
.sx__title em { color: var(--nx-mute); }
.sx__side { display: grid; justify-items: start; gap: 16px; }
.sx__line { font-size: 1.02rem; color: rgba(244, 241, 234, .76); }
.sx__stage { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; }
.sx__note { position: absolute; right: 0; bottom: -20px; font-size: .72rem; letter-spacing: .06em; color: rgba(244, 241, 234, .4); }

.sx-app { position: relative; display: grid; grid-template-columns: 11.5em 1fr; grid-template-rows: 2.6em 4.2em 1fr; width: min(1120px, 100%); height: clamp(440px, calc(100vh - 290px), 640px); font-size: clamp(10px, .82vw, 13px); color: #e9e7e2; }
.sx-app__frame { position: absolute; inset: 0; border-radius: 14px; background: #0f0f10; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 70px 140px -60px rgba(255, 122, 26, .22), 0 40px 90px -40px #000; }
.sx-app__bar { position: relative; grid-column: 1 / -1; display: flex; align-items: center; gap: .6em; padding: 0 1.1em; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.sx-app__bar i { width: .8em; height: .8em; border-radius: 50%; background: #333; }
.sx-app__bar span { margin: 0 auto; padding: .25em 1.6em; border-radius: .5em; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .45); font-size: .9em; }
.sx-app__side { position: relative; grid-row: 2 / 4; display: flex; flex-direction: column; gap: .25em; padding: 1.2em .9em; border-right: 1px solid rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .5); }
.sx-app__logo { width: 2.3em; height: 2.3em; margin: 0 0 1.2em .3em; border-radius: .6em; background: linear-gradient(135deg, #f4f1ea, #9b958a); }
.sx-nav { padding: .65em .8em; border-radius: .55em; transition: background .4s, color .4s; }
.sx-nav.is-on { background: rgba(255, 255, 255, .08); color: #fff; }
.sx-nav.is-on::before { content: ""; display: inline-block; width: .45em; height: .45em; margin-right: .6em; border-radius: 50%; background: var(--orange); vertical-align: .1em; }
.sx-nav--off { margin-top: auto; opacity: .5; }
.sx-app__top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0 1.2em; }
.sx-tabs { position: relative; display: inline-flex; padding: .3em; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sx-tabs button { position: relative; z-index: 1; padding: .7em 1.3em; border-radius: 999px; font-size: 1.08em; font-weight: 600; color: rgba(255, 255, 255, .6); transition: color .35s; }
.sx-tabs button[aria-selected="true"] { color: #000; }
.sx-tabs::before { content: ""; position: absolute; top: .3em; bottom: .3em; left: var(--tx, .3em); width: var(--tw, 0); border-radius: 999px; background: var(--nx-ink); transition: left .55s var(--ease), width .55s var(--ease); }
.sx-tabs button:not([aria-selected="true"]):hover { color: #fff; }
.sx-app__me { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #26262a; font-size: .9em; font-weight: 700; color: rgba(255, 255, 255, .7); }

.sx-grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, 1fr); gap: .9em; padding: 0 1.2em 1.2em; min-height: 0; }
.sx-cell { position: relative; min-width: 0; min-height: 0; transform-origin: 0 0; }
.sx-mod { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: .9em; background: #17171a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -30px rgba(0, 0, 0, .9); will-change: transform; }
.sx-mod__h { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .9em 1.1em .6em; white-space: nowrap; }
.sx-mod__h b { font-size: 1.12em; font-weight: 650; color: #fff; }
.sx-mod__h b::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .55em; border-radius: 2px; background: var(--mc, #888); }
.sx-mod__h em { font-style: normal; font-size: .9em; color: rgba(255, 255, 255, .45); }
.sx-mod__body { flex: 1; min-height: 0; padding: 0 1.1em 1em; overflow: hidden; }
.sx-cell[data-m="clients"] { --mc: #ff9a4d; }
.sx-cell[data-m="resa"] { --mc: #8fa8ff; }
.sx-cell[data-m="stocks"] { --mc: #6bb7a5; }
.sx-cell[data-m="planning"] { --mc: #ff8fb1; }
.sx-cell[data-m="stats"] { --mc: #e9d36a; }
/* Mise en page de chaque mode (grille 12 × 6) */
.sx-app[data-mode="clients"] [data-m="clients"]  { grid-area: 1 / 1 / 7 / 8; }
.sx-app[data-mode="clients"] [data-m="stats"]    { grid-area: 1 / 8 / 3 / 13; }
.sx-app[data-mode="clients"] [data-m="resa"]     { grid-area: 3 / 8 / 5 / 13; }
.sx-app[data-mode="clients"] [data-m="stocks"]   { grid-area: 5 / 8 / 7 / 10; }
.sx-app[data-mode="clients"] [data-m="planning"] { grid-area: 5 / 10 / 7 / 13; }
.sx-app[data-mode="resa"] [data-m="resa"]        { grid-area: 1 / 1 / 5 / 9; }
.sx-app[data-mode="resa"] [data-m="planning"]    { grid-area: 5 / 1 / 7 / 9; }
.sx-app[data-mode="resa"] [data-m="clients"]     { grid-area: 1 / 9 / 3 / 13; }
.sx-app[data-mode="resa"] [data-m="stats"]       { grid-area: 3 / 9 / 5 / 13; }
.sx-app[data-mode="resa"] [data-m="stocks"]      { grid-area: 5 / 9 / 7 / 13; }
.sx-app[data-mode="gestion"] [data-m="stats"]    { grid-area: 1 / 1 / 5 / 7; }
.sx-app[data-mode="gestion"] [data-m="stocks"]   { grid-area: 1 / 7 / 5 / 13; }
.sx-app[data-mode="gestion"] [data-m="planning"] { grid-area: 5 / 1 / 7 / 5; }
.sx-app[data-mode="gestion"] [data-m="resa"]     { grid-area: 5 / 5 / 7 / 9; }
.sx-app[data-mode="gestion"] [data-m="clients"]  { grid-area: 5 / 9 / 7 / 13; }
/* Module mis en avant : un fin liseré */
.sx-app[data-mode="clients"] [data-m="clients"] .sx-mod, .sx-app[data-mode="resa"] [data-m="resa"] .sx-mod, .sx-app[data-mode="gestion"] [data-m="stats"] .sx-mod { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 60px -30px rgba(0, 0, 0, .9); }

/* Contenus */
.sx-search { padding: .7em .9em; margin-bottom: .7em; border-radius: .6em; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .4); }
.sx-crm, .sx-stock, .sx-gantt { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.sx-crm li { display: grid; grid-template-columns: 2.4em 1fr auto auto; align-items: center; gap: .9em; padding: .55em .6em; border-radius: .6em; transition: background .3s; }
.sx-crm li:hover { background: rgba(255, 255, 255, .05); }
.sx-crm i, .sx-gantt i { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--c); color: #111; font-size: .85em; font-style: normal; font-weight: 700; }
.sx-crm b { display: block; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-crm small { display: block; color: rgba(255, 255, 255, .45); font-size: .88em; }
.sx-crm em { font-style: normal; font-size: .85em; padding: .3em .8em; border-radius: 999px; }
.sx-crm em.is-new { background: rgba(143, 168, 255, .16); color: #b8c6ff; }
.sx-crm em.is-quote { background: rgba(255, 154, 77, .16); color: #ffbd8a; }
.sx-crm em.is-won { background: rgba(61, 220, 132, .14); color: #7deaa9; }
.sx-crm strong { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8); font-weight: 600; min-width: 5em; text-align: right; }
.sx-cal { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(2.4em, 1fr); gap: .35em; height: 100%; }
.sx-cal__d { color: rgba(255, 255, 255, .45); font-size: .85em; text-align: center; }
.sx-cal i { border-radius: .45em; background: rgba(255, 255, 255, .03); font-style: normal; font-size: .82em; padding: .45em .55em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: transparent; }
.sx-cal i.on { background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 3px 0 0 var(--c); color: #fff; }
.sx-stock li { display: grid; grid-template-columns: minmax(6em, 1fr) 2fr auto; align-items: center; gap: .9em; padding: .4em 0; }
.sx-stock span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, .8); }
.sx-stock i { position: relative; height: .55em; border-radius: 1em; background: rgba(255, 255, 255, .07); overflow: hidden; }
.sx-stock i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: #6bb7a5; }
.sx-stock li.is-low i::after { background: var(--orange); }
.sx-stock b { font-variant-numeric: tabular-nums; font-weight: 600; }
.sx-gantt li { display: grid; grid-template-columns: 2.4em 1fr; align-items: center; gap: .8em; }
.sx-gantt span { position: relative; height: 2.2em; border-radius: .5em; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 20%); }
.sx-gantt b { position: absolute; top: .3em; bottom: .3em; left: var(--a); width: var(--w); display: flex; align-items: center; padding: 0 .7em; border-radius: .4em; background: color-mix(in srgb, var(--mc) 30%, #222); box-shadow: inset 3px 0 0 var(--mc); font-size: .82em; font-weight: 600; white-space: nowrap; overflow: hidden; }
.sx-kpi { display: flex; align-items: baseline; gap: .7em; }
.sx-kpi b { font-family: var(--f-display); font-size: 2.6em; font-weight: 700; letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.sx-kpi em { font-style: normal; color: #7deaa9; font-weight: 600; }
.sx-chart { display: block; width: 100%; height: calc(100% - 7.2em); min-height: 3em; margin: .6em 0; overflow: visible; }
.sx-chart__line { fill: none; stroke: var(--orange); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sx-mini { display: flex; gap: 1.6em; color: rgba(255, 255, 255, .5); font-size: .88em; }
.sx-mini b { display: block; font-size: 1.4em; color: #fff; }

/* Mobile : logiciel en 2 colonnes, le module principal en grand */
@media (max-width: 809px) {
  .sx__pin { min-height: 0; padding-top: 90px; padding-bottom: 80px; }
  .sx__title { font-size: clamp(34px, 9.6vw, 44px); }
  .sx__side .nx-btn { width: 100%; }
  .sx__side { width: 100%; }
  .sx__stage { margin-top: 10px; }
  .sx__note { bottom: -26px; }
  .sx-app { grid-template-columns: 1fr; grid-template-rows: 2.6em auto auto; height: auto; font-size: clamp(9px, 2.6vw, 11px); }
  .sx-app__side { display: none; }
  .sx-app__top { padding: .9em 1em; }
  .sx-tabs { width: 100%; }
  .sx-tabs button { flex: 1; padding: .8em .4em; }
  .sx-app__me { display: none; }
  .sx-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 30em 8.6em 8.6em; gap: .7em; padding: 0 1em 1em; }
  .sx-app[data-mode="clients"] [data-m="clients"]  { grid-area: 1 / 1 / 2 / 3; }
  .sx-app[data-mode="clients"] [data-m="stats"]    { grid-area: 2 / 1 / 3 / 2; }
  .sx-app[data-mode="clients"] [data-m="resa"]     { grid-area: 2 / 2 / 3 / 3; }
  .sx-app[data-mode="clients"] [data-m="stocks"]   { grid-area: 3 / 1 / 4 / 2; }
  .sx-app[data-mode="clients"] [data-m="planning"] { grid-area: 3 / 2 / 4 / 3; }
  .sx-app[data-mode="resa"] [data-m="resa"]        { grid-area: 1 / 1 / 2 / 3; }
  .sx-app[data-mode="resa"] [data-m="planning"]    { grid-area: 2 / 1 / 3 / 2; }
  .sx-app[data-mode="resa"] [data-m="clients"]     { grid-area: 2 / 2 / 3 / 3; }
  .sx-app[data-mode="resa"] [data-m="stats"]       { grid-area: 3 / 1 / 4 / 2; }
  .sx-app[data-mode="resa"] [data-m="stocks"]      { grid-area: 3 / 2 / 4 / 3; }
  .sx-app[data-mode="gestion"] [data-m="stats"]    { grid-area: 1 / 1 / 2 / 3; }
  .sx-app[data-mode="gestion"] [data-m="stocks"]   { grid-area: 2 / 1 / 3 / 2; }
  .sx-app[data-mode="gestion"] [data-m="planning"] { grid-area: 2 / 2 / 3 / 3; }
  .sx-app[data-mode="gestion"] [data-m="resa"]     { grid-area: 3 / 1 / 4 / 2; }
  .sx-app[data-mode="gestion"] [data-m="clients"]  { grid-area: 3 / 2 / 4 / 3; }
  .sx-crm li { grid-template-columns: 2.4em 1fr auto; }
  .sx-crm strong { display: none; }
}

/* ==========================================================================
   05 · NOTRE APPROCHE (clair)
   ========================================================================== */
.nx-way { overflow-x: clip; position: relative; z-index: 3; background: var(--nx-paper); color: #0d0d0d; clip-path: polygon(0 var(--wa, 0%), 100% 0, 100% 100%, 0 100%); }
.nx-way__in { padding: clamp(110px, 14vw, 200px) var(--nx-gut) clamp(90px, 10vw, 150px); }
.nx-five { position: relative; }
.nx-anim .nx-five { height: 300vh; }   /* piste de défilement : le téléphone reste à l'écran pendant toute la démo */
.nx-five__sticky { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(30px, 6vw, 100px); }
.nx-anim .nx-five__sticky { position: sticky; top: 0; height: 100svh; }
.nx-five__steps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nx-five__steps li { display: flex; align-items: center; height: 36px; padding: 0 4px; border-radius: 999px; border: 1px solid rgba(13, 13, 13, .2); color: rgba(13, 13, 13, .45); font-weight: 600; font-size: .9rem; transition: background .4s, color .4s, border-color .4s, padding .5s var(--ease); }
.nx-five__steps b { display: grid; place-items: center; min-width: 26px; font-size: .72rem; }
.nx-five__steps span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .55s var(--ease), opacity .35s, margin .5s var(--ease); }
.nx-five__steps li.is-on { padding: 0 16px 0 6px; background: #0d0d0d; border-color: #0d0d0d; color: #fff; }
.nx-five__steps li.is-on span { max-width: 16em; opacity: 1; margin-left: 4px; }
.nx-five__txt .nx-btn { margin-top: 26px; }
.nx-btn--ink { --bf: #2a2a2a; --bt: #fff; background: #0d0d0d; color: #fff; }
html:not(.nx-anim) .nx-five__steps { display: none; }
.nx-five__stage { position: relative; display: grid; place-items: center; justify-self: center; width: 100%; }
/* Téléphone épuré : écran d'accueil façon iOS, cinq applications qui fusionnent en une seule */
.ip { --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  position: relative; width: min(300px, 62vw, calc((100svh - 120px) * .47)); aspect-ratio: 9 / 19.2; border-radius: 48px; padding: 0 22px; overflow: hidden;
  background: linear-gradient(165deg, #fbfaf8 0%, #f1efea 55%, #e8e5de 100%);
  box-shadow: 0 0 0 9px #111, 0 0 0 10.5px #2b2b2b, 0 50px 80px -30px rgba(0, 0, 0, .45); font-family: var(--sf); color: #111; }
.ip__island { position: absolute; left: 50%; top: 11px; width: 31%; height: 26px; translate: -50% 0; border-radius: 20px; background: #0a0a0a; z-index: 3; }
.ip__status { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 4px 8px 0; font-size: 13px; }
.ip__status b { font-weight: 600; }
.ip__status span { display: flex; gap: 3px; align-items: flex-end; }
.ip__status i { width: 3px; border-radius: 1px; background: #111; }
/* Comme sur un vrai iPhone : l'îlot de la caméra et la barre d'état restent au-dessus de tous les écrans (application, appel) */
.ip__island { z-index: 12 !important; }
.ip__status { position: relative; z-index: 12; transition: color .3s; }
.ip__status i { background: currentColor !important; }
.ip.is-dark .ip__status { color: #fff; }
.ip__status i:nth-child(1) { height: 5px; } .ip__status i:nth-child(2) { height: 7px; } .ip__status i:nth-child(3) { height: 9px; }
.ip__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; gap: 22px 10px; margin-top: 30px; }
.ip-app, .ip-one { display: grid; justify-items: center; gap: 6px; }
.ip-app i, .ip-one > i { display: grid; place-items: center; width: 100%; max-width: 62px; aspect-ratio: 1; border-radius: 23%; color: #fff; font-style: normal;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c)); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--c) 80%, #000), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ip-app svg { width: 52%; height: 52%; }
.ip-app b, .ip-one b { font-size: 11px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: #2a2a2a; }
.ip-one { position: absolute; left: 50%; top: 46%; width: 30%; translate: -50% -50%; opacity: 0; }
.ip-one > i { max-width: none; width: 100%; background: #111; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); }
.ip-one__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9%; width: 64%; aspect-ratio: 3 / 2; }
.ip-one__g u { border-radius: 30%; background: var(--c); }
.ip-one__plus { background: transparent !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.ip-one b { font-size: 12px; font-weight: 600; }
.ip__notif { position: absolute; left: 10px; right: 10px; top: 54px; z-index: 4; display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 18px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .35); font-size: 11.5px; line-height: 1.35; color: #333; opacity: 0; }
.ip__notif i { flex: none; width: 26px; height: 26px; border-radius: 7px; background: #111; }
.ip__notif b { display: block; font-size: 12px; font-weight: 600; color: #111; }
/* Appel entrant (reproduction de l'écran iOS verrouillé) : on glisse pour répondre */
.ip { container-type: inline-size; }
.ip-call { position: absolute; inset: -8px; z-index: 7; display: flex; flex-direction: column; padding: calc(8px + 24cqw) calc(8px + 8cqw) calc(8px + 11cqw); border-radius: inherit; color: #fff; font-family: var(--sf); visibility: hidden; opacity: 0;
  background: radial-gradient(90% 55% at 20% 18%, rgba(255, 140, 70, .35), transparent 70%), radial-gradient(80% 60% at 85% 85%, rgba(80, 110, 255, .32), transparent 70%), linear-gradient(180deg, #2a2a30, #121216 70%); }
.ip-call::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, .18); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: -1; }
.ip-call__top { display: grid; justify-items: center; text-align: center; }
.ip-call__ava { display: grid; place-items: center; width: 24cqw; height: 24cqw; border-radius: 50%; background: linear-gradient(180deg, #a6a6ac, #707076); font-size: 9cqw; font-weight: 500; letter-spacing: .02em; }
.ip-call__name { margin-top: 4.5cqw; font-size: 10.5cqw; font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
.ip-call__sub, .ip-call__timer { margin-top: 1.4cqw; max-width: 60cqw; font-size: 4.6cqw; line-height: 1.3; color: rgba(235, 235, 245, .62); }
.ip-call__timer { display: none; font-variant-numeric: tabular-nums; }
.ip-call__bottom { margin-top: auto; display: grid; gap: 8cqw; }
.ip-call__acts, .ip-slide { transition: opacity .35s, transform .45s var(--ease); }
.ip-call__acts { display: flex; justify-content: space-between; padding: 0 5cqw; }
.ip-call__acts span, .ip-call__grid span { display: grid; justify-items: center; gap: 2.2cqw; font-size: 3.7cqw; color: #fff; }
.ip-call__acts i, .ip-call__grid i { display: grid; place-items: center; width: 13cqw; height: 13cqw; border-radius: 50%; background: rgba(255, 255, 255, .2); font-style: normal; }
.ip-call__acts svg { width: 6.5cqw; height: 6.5cqw; }
.ip-slide { position: relative; height: 22cqw; border-radius: 999px; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); --kx: 0px; --kp: 0; }
.ip-slide__txt { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 19cqw; font-size: 5.2cqw; white-space: nowrap; opacity: calc(1 - var(--kp) * 1.8);
  color: transparent; background: linear-gradient(90deg, rgba(255, 255, 255, .42) 38%, #fff 50%, rgba(255, 255, 255, .42) 62%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; animation: nx-shine 2.6s linear infinite; }
@keyframes nx-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ip-slide__knob { position: absolute; left: 1.7cqw; top: 1.7cqw; display: grid; place-items: center; width: 18.6cqw; height: 18.6cqw; border-radius: 50%; background: #fff; color: #34c759; transform: translateX(var(--kx)); transition: transform .45s cubic-bezier(.2, .9, .3, 1.2); cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.ip-slide__knob svg { width: 8.6cqw; height: 8.6cqw; pointer-events: none; }
.ip-slide.is-drag .ip-slide__knob { transition: none; cursor: grabbing; }
/* Vibration de l'appel */
.ip.is-ringing { animation: nx-ring 1.6s ease-in-out infinite; }
@keyframes nx-ring { 0%, 40%, 100% { transform: none; } 4%, 12%, 20%, 28% { transform: translateX(-1.5px) rotate(-.6deg); } 8%, 16%, 24%, 32% { transform: translateX(1.5px) rotate(.6deg); } }
.ip.is-ringing .ip-call__ava { animation: nx-ava 1.6s ease-out infinite; }
@keyframes nx-ava { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); } 70%, 100% { box-shadow: 0 0 0 5cqw rgba(255, 255, 255, 0); } }
/* Appel décroché : écran « en communication » */
.ip-call__live { position: absolute; left: calc(8px + 9cqw); right: calc(8px + 9cqw); bottom: calc(8px + 12cqw); display: grid; justify-items: center; gap: 10cqw; opacity: 0; transform: translateY(6cqw); pointer-events: none; transition: opacity .4s .15s, transform .5s var(--ease) .15s; }
.ip-call__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7cqw 8cqw; width: 100%; }
.ip-call__grid i { width: 18cqw; height: 18cqw; background: rgba(255, 255, 255, .16); }
.ip-call__grid svg { width: 8cqw; height: 8cqw; }
.ip-call__end i { display: grid; place-items: center; width: 18cqw; height: 18cqw; border-radius: 50%; background: #ff3b30; color: #fff; }
.ip-call__end svg { width: 9cqw; height: 9cqw; transform: rotate(135deg); }
.ip-call.is-answered .ip-call__acts, .ip-call.is-answered .ip-slide { opacity: 0; transform: translateY(8cqw); pointer-events: none; }
.ip-call.is-answered .ip-call__live { opacity: 1; transform: none; }
.ip-call.is-answered .ip-call__sub { display: none; }
.ip-call.is-answered .ip-call__timer { display: block; }
.ip-call.is-answered .ip-call__ava { width: 18cqw; height: 18cqw; font-size: 7cqw; }
/* Pendant l'appel, le bouton de la page s'efface */
.nx-five__txt .nx-btn { transition: opacity .35s, visibility .35s, transform .4s var(--ease); }
.nx-five__txt .nx-btn.is-hidden { opacity: 0; visibility: hidden; transform: translateY(8px); }
.ip__bar { position: absolute; left: 50%; bottom: 9px; width: 36%; height: 5px; translate: -50% 0; border-radius: 3px; background: #111; }
/* Sans animation : directement l'application unique */
/* Écran de l'application (s'ouvre depuis l'icône) */
.ip-scr { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; padding: 52px 14px 30px; border-radius: inherit; background: #f6f5f2; opacity: 0; transform-origin: 50% 46%; }
.ip-scr__head small { display: block; font-size: 11px; color: #8a8a8e; font-weight: 500; }
.ip-scr__title { position: relative; display: block; height: 30px; overflow: hidden; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.ip-scr__title span { position: absolute; left: 0; top: 0; transform: translateY(calc((var(--pi, 0) - var(--k)) * -100%)); transition: transform .5s var(--ease); }
.ip-scr__title span:nth-child(1) { --k: 0; } .ip-scr__title span:nth-child(2) { --k: 1; } .ip-scr__title span:nth-child(3) { --k: 2; }
.ip-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 10px 0 12px; padding: 2px; border-radius: 9px; background: rgba(118, 118, 128, .14); font-size: 11px; font-weight: 600; text-align: center; }
.ip-seg span { position: relative; z-index: 1; padding: 5px 0; }
.ip-seg i { position: absolute; top: 2px; bottom: 2px; left: calc(2px + var(--pi, 0) * (100% - 4px) / 3); width: calc((100% - 4px) / 3); border-radius: 7px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); transition: left .5s var(--ease); }
.ip-scr__body { position: relative; flex: 1; overflow: hidden; }
.ip-pane { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 8px; transform: translateX(calc((var(--k) - var(--pi, 0)) * 110%)); transition: transform .55s var(--ease); }
.ip-pane--clients { --k: 0; } .ip-pane--resa { --k: 1; } .ip-pane--stats { --k: 2; }
.ip-pane--clients li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; background: #fff; }
.ip-pane--clients i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); font-style: normal; font-size: 10px; font-weight: 700; }
.ip-pane b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-pane small { display: block; font-size: 10px; color: #8a8a8e; }
.ip-pane--clients em { font-style: normal; font-size: 9.5px; font-weight: 600; padding: 3px 7px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); }
.ip-pane--resa li { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 8px; }
.ip-pane--resa time { font-size: 10.5px; color: #8a8a8e; font-variant-numeric: tabular-nums; }
.ip-pane--resa span { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--c) 12%, #fff); box-shadow: inset 3px 0 0 var(--c); }
.ip-big { padding: 12px; border-radius: 14px; background: #fff; }
.ip-big b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.ip-big em { font-style: normal; font-size: 10.5px; color: #30a14e; font-weight: 600; }
.ip-chart { display: block; width: 100%; height: 70px; margin: 8px 0; }
.ip-chart__area { fill: rgba(255, 122, 26, .14); }
.ip-chart__line { fill: none; stroke: var(--orange); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ip-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 9.5px; color: #8a8a8e; }
.ip-mini span { padding: 8px; border-radius: 10px; background: #fff; }
.ip-mini b { display: block; font-size: 13px; color: #111; }
.ip-tab { display: flex; justify-content: space-around; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, .06); }
.ip-tab i { width: 18px; height: 18px; border-radius: 6px; background: #c7c7cc; }
.ip-tab i.is-on { background: #111; }
/* Doigt fantôme : montre où l'on touche */
.ip-tap { position: absolute; z-index: 9; left: 50%; top: 46%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(0, 0, 0, .18); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); opacity: 0; pointer-events: none; }
@keyframes nx-ready { 50% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 6px rgba(17, 17, 17, .08), 0 10px 24px -16px rgba(0, 0, 0, .35); } }
html:not(.nx-anim) .ip__grid { opacity: .25; }
html:not(.nx-anim) .ip-one, html:not(.nx-anim) .ip__notif { opacity: 1; }
.nx-five__title { font-family: var(--nx-serif); font-weight: 400; font-size: clamp(40px, 5.4vw, 92px); line-height: .98; letter-spacing: -.03em; }
.sh { display: none; }
.nx-five__n { display: inline-block; min-width: .62em; font-variant-numeric: tabular-nums; }
.nx-five__title em { font-family: var(--f-display); font-style: normal; font-weight: 800; letter-spacing: -.05em; }
.nx-five__sub { margin-top: 22px; max-width: 30ch; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; color: #4a4844; }
.nx-quote { margin: clamp(56px, 7vw, 100px) auto 0; text-align: center; }
.nx-quote blockquote { margin: 0; }
.nx-quote p { font-family: var(--nx-serif); font-style: italic; font-size: clamp(40px, 6.6vw, 118px); line-height: .95; letter-spacing: -.03em; }
.nx-quote figcaption { margin-top: 26px; color: #4a4844; }
.nx-quote a { color: #0d0d0d; border-bottom: 1px solid currentColor; }
.nx-quote a:hover { color: var(--orange-deep); }

/* ==========================================================================
   06 · CONCLUSION
   ========================================================================== */
.nx-end { position: relative; z-index: 2; display: grid; justify-items: center; gap: 26px; padding: clamp(120px, 16vw, 230px) var(--nx-gut) clamp(110px, 14vw, 200px); text-align: center; background: var(--nx-black); overflow: hidden; }
.nx-end__glow { position: absolute; left: 50%; top: 58%; width: 70vmax; height: 70vmax; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 122, 26, .22), rgba(255, 122, 26, .05) 55%, transparent); pointer-events: none; transition: left .9s var(--ease), top .9s var(--ease); }
.nx-end > :not(.nx-end__glow) { position: relative; }
/* Chaque ligne est d'abord dessinée au trait, puis se remplit de gauche à droite pendant le défilement */
.nx-end__title { display: grid; justify-items: center; font-family: var(--f-display); font-weight: 800; font-size: clamp(44px, 9.4vw, 176px); line-height: .9; letter-spacing: -.05em; font-variation-settings: "wdth" 84; }
.nx-fill { position: relative; display: block; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px rgba(244, 241, 234, .32); }
.nx-fill::after { content: attr(data-t); position: absolute; inset: 0; color: var(--nx-ink); -webkit-text-stroke: 1.2px currentColor; clip-path: inset(-10% calc(100% - var(--f, 100%)) -10% 0); }
.nx-fill .nx-o { -webkit-text-stroke: 0; }
.nx-fill::before { content: ""; position: absolute; left: var(--f, 100%); top: 8%; bottom: 8%; width: 3px; margin-left: 4px; background: var(--nx-ink); border-radius: 2px; opacity: var(--cur-o, 0); }
.nx-end__text { max-width: 460px; color: var(--nx-mute); font-size: 1.08rem; line-height: 1.55; }
.nx-end__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.nx-end__btn { min-height: 52px; padding-inline: 26px; font-size: 1rem; }
.nx-end__btn svg { width: 18px; height: 18px; }
.nx-end .nx-btn--line { height: 52px; }
.nx-end__contact { display: flex; gap: 14px; color: var(--nx-mute); font-size: .95rem; flex-wrap: wrap; justify-content: center; }
.nx-end__contact a:hover { color: var(--nx-ink); }

/* ==========================================================================
   Tablette
   ========================================================================== */
@media (max-width: 1100px) {
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 809px) {
  .nx-hero__in { padding-top: 104px; }
  .nx-hero__title { max-width: 360px; font-size: clamp(40px, 11.6vw, 50px); }
  .nx-strip { height: 260px; margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); overflow-x: clip; }
  .nx-who { font-size: 15px; }
  .nx-who--a { margin: -132px 0 0 -170px; }
  .nx-who--b { margin: -126px 0 0 50px; }
  .nx-hero__text { max-width: 350px; font-size: 15px; }
  .nx-hero__cta .nx-btn { min-width: 280px; }
  .nx-hero__cta .nx-btn--solid { min-width: 236px; height: 46px; font-size: .92rem; }
  .nx-hero__cta { flex-direction: column; align-items: center; }
  .nx-logos { margin-top: 34px; }
  .nx-logos__set { gap: 54px; padding-right: 54px; }
  .nx-logos__set img { height: 26px; }
  .nx-logos__set li:nth-child(3) img { height: 36px; }

  .nx-exp { padding-top: 90px; }
  .nx-tri { flex-direction: column; height: auto; gap: 14px; }
  .nx-tri__item, .nx-tri__item.is-on { flex: none; }
  .nx-tri__link { position: relative; display: grid; }
  .nx-tri__media { position: relative; aspect-ratio: 16 / 10; }
  .nx-tri__media > img:not(.nx-tri__jj), .nx-tri__media picture img { filter: none; transform: none; }
  .nx-tri__phone, .nx-tri__jj { opacity: 1; transform: rotate(5deg); scale: 1; }
  .nx-tri__phone { width: 21%; right: 5%; top: 7%; }
  .nx-tri__jj { width: 13vw; }
  .nx-tri__jj--5, .nx-tri__jj--6 { width: 9vw; }
  /* Cartes mobile : image intacte, puis un bloc de texte aéré et hiérarchisé */
  .nx-tri__item { border-radius: 20px; background: #101011; }
  .nx-tri__media::after { background: linear-gradient(180deg, transparent 70%, rgba(16, 16, 17, .55)); }
  .nx-tri__n { top: 12px; left: 12px; padding: 6px 11px; border-radius: 999px; background: rgba(10, 10, 10, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--f-text); font-size: .74rem; font-weight: 600; letter-spacing: .08em; line-height: 1; color: #fff !important; -webkit-text-stroke: 0 !important; font-variation-settings: normal; }
  .nx-tri__body { position: relative; left: 0; right: 0; bottom: 0; gap: 0; padding: 22px 20px 6px; }
  .nx-tri__kind { order: 0; font-size: .7rem; letter-spacing: .16em; color: rgba(244, 241, 234, .5); }
  .nx-tri__name { margin-top: 8px; font-size: clamp(30px, 8.6vw, 38px); line-height: 1.02; }
  .nx-tri__text { margin-top: 12px; font-size: .95rem; line-height: 1.6; color: rgba(244, 241, 234, .68); }
  .nx-tri__go { display: flex; justify-content: space-between; width: auto; margin: 20px -20px 0; padding: 16px 20px; border-radius: 0; background: transparent; border-top: 1px solid var(--nx-line); color: var(--nx-ink); font-size: .95rem; }
  .nx-tri__go i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nx-ink); color: #000; font-size: .9rem; }
  .nx-tri__link:active .nx-tri__go i { transform: translateX(4px); }

  .nx-works__intro { min-height: 0; padding: 70px var(--nx-gut) 60px; }



  .nx-five__sticky { grid-template-columns: 1fr; gap: 18px; align-content: center; justify-items: center; }
  /* Téléphone en plein écran : le téléphone et la phrase restent épinglés,
     le bouton arrive après la démo (les étapes, simple repère, sont masquées) */
  .nx-anim .nx-five__sticky { position: static; display: flex; flex-direction: column; align-items: center; gap: 0; height: 100%; padding: 0; }
  .nx-anim .nx-five__txt { display: contents; }
  /* La phrase reste affichée, en petit, dans la bande libre au-dessus du téléphone (le menu se replie au défilement).
     Sa marge basse (annulée par celle du téléphone) la fait remonter avec lui à la fin de la démo */
  .nx-anim .nx-five__title { order: -1; position: sticky; top: 24px; z-index: 2; font-size: 24px; margin-bottom: calc(100svh + 18px); }
  .nx-five-pin .site-header { transform: translateY(-120%); }
  .nx-anim .nx-five__steps { display: none; }
  .nx-anim .nx-five__stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; margin: calc(-100svh - 8px) 0 76px; padding-top: 74px; }
  .nx-anim .nx-five__txt .nx-btn { margin-top: auto; }
  .nx-anim .nx-five__txt .nx-btn.is-hidden { opacity: 1; visibility: visible; transform: none; }
  .ip { width: min(86vw, 360px, max(220px, calc((100svh - 108px) * .469))) !important; }
  .nx-five__txt { text-align: center; }
  .nx-five__title { font-size: clamp(30px, 8.4vw, 40px); }
  .nx-five__sub { margin: 10px auto 0; font-size: .95rem; }
  .nx-five__steps { justify-content: center; margin-top: 14px; }
  .ip .lg { display: none; }
  .ip .sh { display: inline; }
  .nx-five__stage { margin-bottom: 8px; }
  .ip { padding: 0 16px !important; }
  /* Icônes et libellés proportionnels à la largeur du téléphone (cqw) au lieu de tailles fixes minuscules */
  .ip__grid { gap: 7cqw 3cqw; margin-top: 8cqw; }
  .ip-app i { max-width: 22cqw; }
  .ip-app b { font-size: max(9px, 4.1cqw); letter-spacing: -.02em; }
  .ip-one b { font-size: max(10px, 4.6cqw); }
  .nx-five__steps li { height: 32px; }
  .nx-five__steps li.is-on { padding: 0 12px 0 4px; }
  .nx-five__sub { display: none; }
  .nx-five__web { justify-content: center; margin: 12px auto 0; font-size: .86rem; text-align: center; }
  .nx-five__txt .nx-btn { margin-top: 14px; }
  .nx-end { gap: 22px; }
  .nx-end__cta { flex-direction: column; width: 100%; max-width: 340px; }
  .nx-end__cta > * { width: 100%; justify-content: space-between; }
}

/* Animations réduites : tout est visible et statique */
@media (prefers-reduced-motion: reduce) {
  .nx-logos__track, .nx-who, .ip-slide__txt, .ip.is-ringing, .nx-jj, .nx-tri__jj,   .nx-way { clip-path: none; }
}

/* ==========================================================================
   03 bis · RÉALISATIONS SUR MOBILE ET TABLETTE — carrousel 3D au doigt
   Défilement horizontal natif (scroll-snap) : la page défile normalement à la verticale,
   les cartes s'inclinent et reculent selon leur distance au centre.
   ========================================================================== */
.nx-works.is-swipe .nx-works__pin { position: relative; z-index: 1; padding: 8px 0 26px; background: transparent; }
.nx-works.is-swipe { background: var(--cur, #9b4733); transition: background-color .6s var(--ease); }
.nx-works.is-swipe .nx-works__disc { display: none; }
.nx-works.is-swipe .nx-works__intro { z-index: 1; overflow: visible; }
.nx-works.is-swipe .nx-works__more { position: relative; z-index: 1; }
.nx-works.is-swipe .nx-works__title { color: var(--cur-fg, #f3efe6); transition: color .6s var(--ease); }
.nx-works.is-swipe .nx-works__title em { color: var(--cur-ac, #f3c5ad); transition: color .6s var(--ease); }
.nx-works.is-swipe .nx-works__lead { color: color-mix(in srgb, var(--cur-fg, #f3efe6) 80%, transparent); transition: color .6s; }
.nx-works.is-swipe .nx-works__dots i { background: color-mix(in srgb, var(--cur-fg, #fff) 40%, transparent); }
.nx-works.is-swipe .nx-works__dots i.is-on { background: var(--cur-fg, #fff); }
/* Effets plus présents sur mobile : arc-en-ciel qui tourne, bonbons qui dansent, boussole dans les nuages */
.nx-works.is-swipe .nx-fx--arcs i { animation: nx-spin 22s linear infinite; }
.nx-works.is-swipe .nx-fx--arcs i:nth-child(even) { animation-direction: reverse; animation-duration: 30s; }
.nx-works.is-swipe .nx-pj.is-front .nx-fx--arcs i { border-width: 30px; }
@keyframes nx-spin { to { rotate: 360deg; } }
.nx-works.is-swipe .nx-jj { animation-duration: 3.6s; }
.nx-works.is-swipe .nx-compass { animation: nx-spin 26s linear infinite; }
.nx-cloud { position: absolute; z-index: 3; width: 46%; height: auto; opacity: .95; pointer-events: none; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .12)); }
.nx-cloud--a { left: -8%; bottom: 8%; animation: nx-drift 9s ease-in-out infinite; }
.nx-cloud--b { left: 22%; bottom: -4%; width: 38%; animation: nx-drift 11s ease-in-out -4s infinite reverse; }
@keyframes nx-drift { 50% { translate: 26px -6px; } }
.nx-works.is-h .nx-cloud--a { left: 18%; bottom: 14%; width: 22%; }
.nx-works.is-h .nx-cloud--b { left: 34%; bottom: 8%; width: 18%; }
.nx-works.is-swipe .nx-cloud--a { left: auto; right: -4%; bottom: -3%; width: 48%; }
.nx-works.is-swipe .nx-cloud--b { left: auto; right: 26%; bottom: -6%; width: 34%; }
.nx-works.is-swipe .nx-works__track { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 30px 8vw 34px; perspective: 1000px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.nx-works.is-swipe .nx-works__track::-webkit-scrollbar { display: none; }
.nx-works.is-swipe .nx-pj { flex: none; width: 84vw; max-width: 520px; margin-right: -2vw; scroll-snap-align: center; display: grid; gap: 12px; align-content: start; padding: 22px 18px 20px; border-radius: 24px; min-height: 0;
  box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .6), inset 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent);
  transform: rotateY(calc(var(--o, 0) * -26deg)) translateZ(calc(var(--ao, 0) * -110px)) scale(calc(1 - var(--ao, 0) * .04));
  opacity: calc(1 - var(--ao, 0) * .35); will-change: transform; }
.nx-works.is-swipe .nx-pj--all { display: grid; place-content: center; min-height: 300px; margin-right: 0; }
.nx-works.is-swipe .nx-all__t { font-size: clamp(40px, 12vw, 64px); }
.nx-works.is-swipe .nx-pj__name { font-size: clamp(44px, 13vw, 76px); line-height: .9; }
.nx-works.is-swipe .nx-pj__text { font-size: .93rem; line-height: 1.45; max-width: 100%; }
.nx-works.is-swipe .nx-pj__shot { margin-top: 4px; }
.nx-works.is-swipe .nx-pj__phone { width: 24%; max-width: 116px; right: 12px; bottom: 12px; top: auto; }
.nx-works.is-swipe .nx-swatch { margin-top: 2px; }
.nx-works.is-swipe .nx-jj { width: clamp(52px, 14vw, 96px); }
.nx-works.is-swipe .nx-fx--candy, .nx-works.is-swipe .nx-fx--compass { z-index: 2; }
.nx-works.is-swipe .nx-jj--1 { left: auto; right: 3%; top: auto; bottom: 44%; }
.nx-works.is-swipe .nx-jj--2 { right: auto; left: 2%; top: auto; bottom: 30%; width: 13vw; }
.nx-works.is-swipe .nx-pj--bloum .nx-pj__phone { display: none; }
.nx-works.is-swipe .nx-jj--3 { right: auto; left: 34%; bottom: 2%; width: 12vw; }
.nx-works.is-swipe .nx-jj--4 { left: auto; right: 6%; bottom: 3%; }
.nx-works.is-swipe .nx-compass { left: 80%; top: auto; bottom: 2%; translate: -50% 0; width: 34%; }
.nx-works.is-swipe .nx-compass__ring { display: none; }
.nx-works.is-swipe .nx-pj--aure .nx-pj__phone { display: none; }
.nx-works.is-swipe .nx-works__dots { display: flex; justify-content: center; gap: 6px; }
.nx-works__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .45); transition: width .4s var(--ease), background .4s; }
.nx-works__dots i.is-on { width: 22px; background: #fff; }

.nx-works.is-swipe .nx-works__more { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(100% - 36px, 420px); height: 58px; margin: 6px auto 84px; padding: 0 8px 0 24px; border-radius: 999px; background: var(--cur-fg, #f3efe6); color: var(--cur, #111); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55); transition: opacity .45s var(--ease), transform .55s var(--ease), background-color .6s, color .6s; }
.nx-works.is-swipe .nx-works__more b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cur, #111); color: var(--cur-fg, #fff); font-size: 1.3rem; font-weight: 400; transition: transform .5s var(--ease), background-color .6s, color .6s; }
.nx-works.is-swipe .nx-works__more:active { transform: scale(.97); }
.nx-works.is-swipe .nx-works__more:active b { transform: rotate(90deg); }
.nx-works.is-swipe.is-end .nx-works__more { opacity: 0; transform: translateY(14px); pointer-events: none; }

/* ==========================================================================
   03 ter · MONDES (mobile) — chaque création transforme toute la section
   Rayonne : arcs-en-ciel, soleil, confettis · Bloum : bonbons, bulles, nuages
   Cap Aure : rose des vents, anneaux, nuages qui passent · Tolva : fond uni
   À chaque changement de carte, le décor repart de zéro et réapparaît.
   ========================================================================== */
.nx-worlds { display: none; }
.nx-works.is-swipe { position: relative; overflow: hidden; }
.nx-works.is-swipe .nx-worlds { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nx-world { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
.nx-world.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.nx-world > * { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; scale: 0; transition: scale .25s ease-in; }
.nx-world.is-on > * { scale: 1; transition: scale .9s var(--nx-spring) calc(var(--d, 0) * 1s); }
/* Rayonne */
.w-arcs { width: 130vw; aspect-ratio: 1; }
.w-arcs i { position: absolute; inset: calc(var(--k) * 9%); border-radius: 50%; border: 6.5vw solid var(--c); animation: nx-spin 24s linear infinite; }
.w-arcs i:nth-child(1) { --k: 0; --c: #ff5a1f; }
.w-arcs i:nth-child(2) { --k: 1; --c: #ff8fb1; animation-direction: reverse; }
.w-arcs i:nth-child(3) { --k: 2; --c: #ffc12e; filter: brightness(1.08); }
.w-arcs i:nth-child(4) { --k: 3; --c: #6bb7a5; animation-direction: reverse; }
.w-arcs i:nth-child(5) { --k: 4; --c: #f7efe2; }
.w-arcs i { border-top-color: transparent; border-left-color: transparent; }
.w-arcs--b i { border-top-color: var(--c); border-left-color: var(--c); border-bottom-color: transparent; border-right-color: transparent; }
.w-sun { width: 38vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffe08a 0 38%, rgba(255, 224, 138, .35) 39% 52%, transparent 53%); animation: nx-pulse-s 4s ease-in-out infinite; }
@keyframes nx-pulse-s { 50% { transform: scale(1.08); } }
.w-dot { width: calc(var(--z) * 1px); aspect-ratio: 1; border-radius: 50%; background: var(--c); animation: nx-bob-w 4s ease-in-out calc(var(--d) * -6s) infinite; }
@keyframes nx-bob-w { 50% { transform: translateY(-12px) rotate(8deg); } }
/* Bloum */
.w-jj { width: calc(var(--z) * 1vw); height: auto; rotate: calc(var(--r) * 1deg); filter: drop-shadow(0 14px 18px rgba(4, 40, 90, .45)); animation: nx-bob-w 5s ease-in-out calc(var(--d) * -8s) infinite; }
.w-bub { width: calc(var(--z) * 1px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .9), rgba(140, 230, 255, .35) 45%, rgba(255, 255, 255, .08) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); animation: nx-rise calc(var(--t) * 1s) linear calc(var(--d) * -10s) infinite; }
@keyframes nx-rise { from { transform: translateY(40px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(-260px); opacity: 0; } }
.w-cloud { width: calc(var(--z) * 1vw); height: auto; opacity: .9; }
/* Cap Aure */
.w-rose { width: 150vw; max-width: none; height: auto; opacity: .16; mix-blend-mode: multiply; animation: nx-spin 90s linear infinite; }
.w-ring { width: calc(var(--z) * 1vw); aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(23, 21, 15, .3); animation: nx-spin 60s linear infinite reverse; }
.w-cloud--drift { animation: nx-drift-w 14s ease-in-out calc(var(--d) * -20s) infinite; }
@keyframes nx-drift-w { 50% { transform: translateX(14vw); } }
.w-cardinal { font-family: var(--f-display); font-weight: 800; font-size: 15px; color: rgba(23, 21, 15, .55); }
/* La carte qui arrive au premier plan « réapparaît » : décor et capture rejouent leur entrée */
.nx-works.is-swipe .nx-pj.is-front .nx-fx { animation: nx-pop .9s var(--nx-spring); }
.nx-works.is-swipe .nx-pj.is-front .nx-pj__shot { animation: nx-up .8s var(--ease); }
.nx-works.is-swipe .nx-pj.is-front .nx-pj__name { animation: nx-up .7s var(--ease) .05s backwards; }
@keyframes nx-pop { from { scale: .6; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes nx-up { from { translate: 0 22px; opacity: .2; } to { translate: 0 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nx-worlds { display: none !important; } }