.neoo-needs-page .ns-shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.neoo-needs-page .ns-hero { padding-block: 120px 64px; }
.neoo-needs-page .ns-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; color: var(--nf-text-2); font-size: 14px; margin-bottom: 48px; }
.neoo-needs-page .ns-eyebrow { color: var(--nf-text-2); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.neoo-needs-page h1, .neoo-needs-page h2 { font-family: "Cerebri Sans", sans-serif; font-weight: 300; letter-spacing: -.052em; line-height: 1.06; color: var(--nf-text); text-wrap: balance; }
.neoo-needs-page h1 { max-width: 950px; font-size: clamp(40px, 5.6vw, 76px); margin: 24px 0; }
.neoo-needs-page h2 { font-size: clamp(32px, 3.6vw, 48px); margin: 0 0 24px; }
.neoo-needs-page h3 { font-size: 23px; font-weight: 400; line-height: 1.3; color: var(--nf-text); margin: 0 0 12px; }
.neoo-needs-page p { max-width: 880px; font-size: 17px; line-height: 1.7; color: var(--nf-text-2); }
.neoo-needs-page .ns-lead { font-size: clamp(19px, 1.7vw, 23px); }
.neoo-needs-page .ns-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.neoo-needs-page a { color: var(--nf-text); }
.neoo-needs-page .ns-text-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; }
.neoo-needs-page .ns-section { padding-block: 56px; border-top: 1px solid var(--nf-line); scroll-margin-top: 88px; }
.neoo-needs-page .ns-note { font-size: 14px; }
.neoo-needs-page .ns-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; margin: 32px 0 0; padding: 0; counter-reset: needs-step; }
.neoo-needs-page .ns-flow li { counter-increment: needs-step; border-top: 2px solid var(--nf-accent); padding-top: 24px; }
.neoo-needs-page .ns-flow li::before { content: "0" counter(needs-step); display: block; color: var(--nf-text-2); font-size: 14px; margin-bottom: 20px; }
.neoo-needs-page .ns-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.neoo-needs-page .ns-offers article { padding: 28px; border: 1px solid var(--nf-line); border-radius: 16px; background: var(--nf-surface-1); }
.neoo-needs-page .ns-faq details { border-top: 1px solid var(--nf-line); padding-block: 16px; }
.neoo-needs-page .ns-faq summary { cursor: pointer; min-height: 44px; padding-block: 10px; font-size: 19px; color: var(--nf-text); }
.neoo-needs-page .ns-related { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.neoo-needs-page .ns-related a { min-height: 44px; padding-block: 12px; text-decoration: underline; text-underline-offset: 5px; }
.neoo-needs-page .ns-final { padding-bottom: 88px; }
.neoo-needs-page #main :is(a, summary):focus-visible { outline: 3px solid #b9c8ff; outline-offset: 5px; }
@media (max-width: 767px) {
  .neoo-needs-page .ns-shell { width: calc(100% - 32px); }
  .neoo-needs-page .ns-hero { padding-block: 100px 40px; }
  .neoo-needs-page .ns-breadcrumb { margin-bottom: 32px; }
  .neoo-needs-page .ns-section { padding-block: 40px; }
  .neoo-needs-page .ns-flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .neoo-needs-page .ns-flow li { padding-top: 16px; }
  .neoo-needs-page .ns-flow li::before { margin-bottom: 12px; }
}

/* Real screens (pilot: /solutions/crm-ventes, 2026-10-03). Reference: the "with Neoo" stories of the home V25 (real
   screen in a light frame, native-resolution zoom over a corner, "real screen · anonymised" caption).
   Plan: stacked hero (text column, then the offer list at shell-wide width with a zoom on the side panel); dark "In
   Neoo" band with four alternating 7/5 rows (screen + zoom, eyebrow, display h3 in Cerebri Light, text, three checks);
   five-step flow. Light surfaces use --nf-paper so the night adapter (neoo-fusion-families.css) keeps them light.
   Motion: hero screen and its zoom rise once on load; nothing else moves; reduced motion disables it. */
.neoo-needs-page .ns-hero--screens { padding-block: 120px 0; }
.neoo-needs-page #main .ns-terms { margin: 22px 0 0; color: var(--nf-text-2); font-size: 14px; line-height: 1.55; }
.neoo-needs-page .ns-hero__media { width: var(--nf-shell-wide); margin: 64px auto 0; }
.neoo-needs-page .ns-screen { position: relative; margin: 0; }
.neoo-needs-page .ns-screen__stage { position: relative; }
.neoo-needs-page .ns-screen__stage::before { content: ""; position: absolute; inset: 8% 6% -6% 6%; border-radius: 40px; background: radial-gradient(closest-side, rgba(106, 88, 255, .38), transparent); filter: blur(40px); pointer-events: none; }
.neoo-needs-page .ns-screen__frame { position: relative; overflow: hidden; border: 1px solid var(--nf-line-strong); border-radius: 20px; background: var(--nf-paper); box-shadow: 0 34px 90px rgba(0, 0, 0, .5); }
.neoo-needs-page .ns-screen__frame img { display: block; width: 100%; height: auto; }
.neoo-needs-page .ns-screen__zoom { position: absolute; z-index: 2; left: -28px; bottom: -30px; display: block; width: min(var(--zw, 400px), 64%); height: auto; border: 1px solid var(--nf-paper); border-radius: 14px; background: var(--nf-paper); box-shadow: 0 0 0 6px rgba(106, 88, 255, .3), 0 26px 60px rgba(0, 0, 0, .55); }
.neoo-needs-page :is(.ns-screen--hero, .ns-story--flip .ns-screen) .ns-screen__zoom { left: auto; right: -28px; }
.neoo-needs-page .ns-screen--zoom-below .ns-screen__zoom { bottom: auto; top: calc(100% - 6px); }
.neoo-needs-page .ns-screen.ns-screen--zoom-left .ns-screen__zoom { left: -28px; right: auto; }
.neoo-needs-page #main .ns-screen figcaption { margin-top: 46px; color: var(--nf-text-3); font-size: 13px; line-height: 1.45; text-align: right; }
.neoo-needs-page #main :is(.ns-screen--hero, .ns-story--flip .ns-screen) figcaption { text-align: left; }
.neoo-needs-page #main .ns-screen--zoom-below figcaption { margin-top: 92px; }
.neoo-needs-page #main .ns-screen--plain figcaption { margin-top: 18px; }
.neoo-needs-page #main .ns-screen--hero.ns-screen--zoom-left figcaption { text-align: right; }
.neoo-needs-page .ns-band { position: relative; margin-top: 112px; padding-block: 104px 128px; border-top: 1px solid var(--nf-line); background: radial-gradient(52% 26% at 50% 0%, var(--nf-halo-violet), transparent 72%), var(--nf-bg-1); scroll-margin-top: 64px; }
.neoo-needs-page .ns-band__head { max-width: 820px; margin-bottom: 96px; }
.neoo-needs-page .ns-band__head h2 { margin: 20px 0 0; }
.neoo-needs-page .ns-stories { display: grid; gap: clamp(96px, 10vw, 144px); }
.neoo-needs-page .ns-story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 76px); align-items: center; scroll-margin-top: 96px; }
.neoo-needs-page .ns-story--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.neoo-needs-page .ns-story--flip .ns-screen { order: 2; }
/* Variants: "portrait" keeps a tall crop in the narrow column; "wide" puts the text above a full-width screen. */
.neoo-needs-page .ns-story--portrait { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.neoo-needs-page .ns-story--portrait.ns-story--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.neoo-needs-page .ns-story--wide { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.neoo-needs-page .ns-story--wide .ns-screen { order: 2; }
.neoo-needs-page .ns-story--wide .ns-story__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 76px); align-items: start; }
.neoo-needs-page .ns-story--wide .ns-story__copy > p { margin: 0; }
.neoo-needs-page .ns-story h3 { margin: 16px 0 0; font-family: "Cerebri Sans", sans-serif; font-size: clamp(30px, 2.8vw, 42px); font-weight: 300; letter-spacing: -.052em; line-height: 1.06; text-wrap: balance; }
.neoo-needs-page .ns-story__copy > p { margin: 18px 0 0; }
.neoo-needs-page .ns-points { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.neoo-needs-page .ns-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--nf-text); font-size: 16px; line-height: 1.45; }
.neoo-needs-page .ns-points svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--nf-success); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.neoo-needs-page .ns-flow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.neoo-needs-page .ns-flow--5 h3 { font-size: 20px; }
.neoo-needs-page .ns-flow--5 p { font-size: 15.5px; line-height: 1.6; }
@keyframes ns-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes ns-pop { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .neoo-needs-page .ns-hero__media { animation: ns-rise .9s var(--nf-ease) .12s both; }
  .neoo-needs-page .ns-hero__media .ns-screen__zoom { animation: ns-pop .7s var(--nf-ease) .7s both; }
}
@media (max-width: 1100px) {
  .neoo-needs-page .ns-flow--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
}
@media (max-width: 900px) {
  .neoo-needs-page .ns-story, .neoo-needs-page .ns-story--flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .neoo-needs-page .ns-story--flip .ns-screen, .neoo-needs-page .ns-story--wide .ns-screen { order: 0; }
  .neoo-needs-page .ns-story--portrait, .neoo-needs-page .ns-story--portrait.ns-story--flip, .neoo-needs-page .ns-story--wide { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .neoo-needs-page .ns-story--portrait .ns-screen { max-width: 460px; }
  .neoo-needs-page .ns-story--wide .ns-story__body { display: block; }
  .neoo-needs-page .ns-story--wide .ns-story__copy > p { margin: 18px 0 0; }
  .neoo-needs-page .ns-story--flip .ns-screen .ns-screen__zoom { left: -28px; right: auto; }
  .neoo-needs-page #main .ns-story--flip .ns-screen figcaption { text-align: right; }
}
@media (max-width: 767px) {
  .neoo-needs-page .ns-hero--screens { padding-block: 100px 0; }
  .neoo-needs-page .ns-hero__media { width: calc(100% - 32px); margin-top: 40px; }
  .neoo-needs-page .ns-screen__frame { border-radius: 12px; }
  .neoo-needs-page .ns-screen .ns-screen__zoom, .neoo-needs-page :is(.ns-screen--hero, .ns-story--flip .ns-screen) .ns-screen__zoom { position: relative; inset: auto; width: min(var(--zw, 400px), 92%); margin: -28px 0 0 12px; border-radius: 10px; box-shadow: 0 0 0 4px rgba(106, 88, 255, .3), 0 18px 40px rgba(0, 0, 0, .5); }
  .neoo-needs-page .ns-screen.ns-screen--zoom-below .ns-screen__zoom { margin-top: 10px; }
  .neoo-needs-page .ns-screen .ns-screen__zoom { max-width: min(92%, 200px * var(--zr, 3)); }
  .neoo-needs-page .ns-hero__media .ns-screen--hero .ns-screen__zoom { width: min(var(--zw, 400px), 62%); margin: -40px 12px 0 auto; }
  .neoo-needs-page #main .ns-screen figcaption, .neoo-needs-page #main :is(.ns-screen--hero, .ns-story--flip .ns-screen, .ns-screen--zoom-below) figcaption { margin-top: 12px; text-align: left; }
  .neoo-needs-page .ns-band { margin-top: 72px; padding-block: 72px 88px; }
  .neoo-needs-page .ns-band__head { margin-bottom: 56px; }
  .neoo-needs-page .ns-stories { gap: 72px; }
  .neoo-needs-page .ns-flow--5 { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
}