/* Neoo : couche motion design partagée des pages publiques (2026-10-03). Voir neoo-motion.js.
   Même système que la home V25 : fond nuit, violet Neoo #6a58ff, ciel #9fd8ff, vert des réponses, ambre et rose pour
   les alertes ; tracés fins, surfaces vitrées, documents clairs.
   Toute animation passe par html.nm-motion (posée hors mouvement réduit) : sans elle, l'illustration est complète et
   immobile. Entrées sous .nm-ill.is-on (illustration visible) ; boucles limitées à trois cycles et seulement à l'écran
   (.is-live). */
.nm-ill { position: absolute; z-index: 1; pointer-events: none; aspect-ratio: 420 / 300; }
.nm-ill svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nm-ill * { transform-box: fill-box; transform-origin: center; }
html.nm-motion .nm-ill.is-pending { opacity: 0; }
html.nm-motion .nm-ill.is-on { animation: nm-in .6s ease-out both; }
@keyframes nm-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Palette et surfaces ---------- */
.nm-ill .nm-panel { fill: rgba(255, 255, 255, .045); stroke: rgba(150, 170, 255, .3); stroke-width: 1.2; }
.nm-ill .nm-panel--solid { fill: #151a33; }
.nm-ill .nm-window { fill: rgba(21, 26, 51, .72); }
.nm-ill .nm-paper { fill: #eef1fb; }
.nm-ill .nm-ink { fill: #c6cce0; }
.nm-ill .nm-dim { fill: rgba(226, 230, 245, .24); }
.nm-ill .nm-head { fill: rgba(255, 255, 255, .7); }
.nm-ill .nm-dot { fill: rgba(226, 230, 245, .28); }
.nm-ill .nm-grid { fill: none; stroke: rgba(150, 170, 255, .14); stroke-width: 1; }
.nm-ill .nm-row { fill: rgba(255, 255, 255, .05); stroke: rgba(150, 170, 255, .2); }
.nm-ill .nm-pill { fill: rgba(255, 255, 255, .06); stroke: rgba(150, 170, 255, .24); }
.nm-ill .nm-fill-violet { fill: #6a58ff; }
.nm-ill .nm-fill-sky { fill: #6fb8ff; }
.nm-ill .nm-fill-mint { fill: #34c48f; }
.nm-ill .nm-bar--violet { fill: #7b67ff; }
.nm-ill .nm-bar--sky { fill: #5aa2ff; }
.nm-ill .nm-bar--mint { fill: #2fbf8c; }
.nm-ill .nm-bar--amber { fill: #f5a841; }
.nm-ill .nm-bar--rose { fill: #f0708c; }
.nm-ill .nm-bar--flag { fill: none; stroke: #ff8aa0; stroke-width: 2.5; }
.nm-ill .nm-ghost { fill-opacity: .24; }
.nm-ill .nm-slot { fill: none; stroke: rgba(150, 170, 255, .3); stroke-width: 1.2; stroke-dasharray: 4 5; }
.nm-ill .nm-face, .nm-ill .nm-stroke { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.nm-ill .nm-stroke { stroke: rgba(226, 230, 245, .6); stroke-width: 1.6; stroke-linejoin: round; }
.nm-ill .nm-icon { fill: none; stroke: #eef0ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nm-ill .nm-node > circle { fill: rgba(21, 26, 51, .9); stroke: rgba(150, 170, 255, .45); stroke-width: 1.4; }
.nm-ill .nm-node--done > circle { fill: rgba(52, 196, 143, .18); stroke: rgba(52, 196, 143, .7); }
.nm-ill .nm-disc { fill: #6a58ff; stroke: rgba(255, 255, 255, .28); filter: drop-shadow(0 0 18px rgba(106, 88, 255, .7)); }
.nm-ill .nm-halo { fill: none; stroke: rgba(201, 191, 255, .3); }
.nm-ill .nm-ping { fill: none; stroke: rgba(201, 191, 255, .7); stroke-width: 2; opacity: 0; }
.nm-ill .nm-orbit { fill: none; stroke: rgba(150, 170, 255, .16); stroke-dasharray: 2 7; }
.nm-ill .nm-brand { fill: #fff; font-family: "Cerebri Sans", Inter, system-ui, sans-serif; font-weight: 600; letter-spacing: -.065em; }
.nm-ill .nm-label { fill: #9fd8ff; font: 600 12px/1 "Cerebri Sans", Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.nm-ill .nm-rail { fill: none; stroke: rgba(150, 175, 255, .34); stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; }
.nm-ill .nm-wire { fill: none; stroke: rgba(181, 164, 255, .75); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; }
.nm-ill .nm-arc { fill: none; stroke: #9fd8ff; stroke-width: 1.6; stroke-dasharray: 1; opacity: .8; }
.nm-ill .nm-beat { fill: none; stroke: #9fd8ff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; filter: drop-shadow(0 0 6px rgba(159, 216, 255, .55)); }
.nm-ill .nm-signline { fill: none; stroke: #c6cce0; stroke-width: 1.2; }
.nm-ill .nm-sign { fill: none; stroke: #4b3bd6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.nm-ill .nm-pulse { fill: none; stroke: #ffb3c1; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 100; stroke-dashoffset: 10; opacity: 0; }
.nm-ill .nm-pulse--out, .nm-ill--invoice .nm-pulse, .nm-ill--monitor .nm-pulse { stroke: #d3caff; }
.nm-ill .nm-stage > circle:first-child { fill: rgba(106, 88, 255, .25); stroke: #8d76ff; stroke-width: 1.6; }
.nm-ill .nm-stage__core { fill: #c9bfff; }
.nm-ill .nm-stage--done > circle:first-child { fill: rgba(52, 196, 143, .25); stroke: #34c48f; }
.nm-ill .nm-stage--done .nm-stage__core { fill: #34c48f; }
.nm-ill .nm-ok circle { fill: #34c48f; stroke: #10111b; stroke-width: 3; }
.nm-ill .nm-ok path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nm-ill .nm-coin { fill: rgba(52, 196, 143, .16); stroke: #34c48f; stroke-width: 2; }
.nm-ill .nm-coin__inner { fill: none; stroke: rgba(52, 196, 143, .45); stroke-dasharray: 3 4; }
.nm-ill .nm-coin__sign { fill: #c8f5e3; font: 300 38px/1 "Cerebri Sans", Inter, system-ui, sans-serif; }
.nm-ill .nm-coin__sign--small { font-size: 26px; }
.nm-ill .nm-status { fill: #f5a841; }
.nm-ill .nm-status--solved { fill: #34c48f; }
.nm-ill .nm-cell { fill: rgba(255, 255, 255, .05); stroke: rgba(150, 170, 255, .2); }
.nm-ill .nm-cell--booked { fill: #6a58ff; stroke: #8d76ff; }
.nm-ill .nm-clock circle { fill: rgba(21, 26, 51, .9); stroke: rgba(150, 170, 255, .5); stroke-width: 1.6; }
.nm-ill .nm-clock path { fill: none; stroke: #c9bfff; stroke-width: 2.2; stroke-linecap: round; }
.nm-ill .nm-hand { transform-origin: 50% 100%; }
.nm-ill .nm-today path { fill: none; stroke: #c9bfff; stroke-width: 1.6; stroke-dasharray: 3 4; }
.nm-ill .nm-today circle { fill: #c9bfff; }
.nm-ill .nm-led { fill: #34c48f; }
.nm-ill .nm-led--alert { fill: #34c48f; }
.nm-ill .nm-bell .nm-icon { stroke: #ffbd52; }
.nm-ill .nm-endpoint { fill: #9fd8ff; stroke: #10111b; stroke-width: 3; }
.nm-ill .nm-chip rect { fill: #7b67ff; }
.nm-ill .nm-chip, .nm-ill .nm-coinlet, .nm-ill .nm-click { opacity: 0; }
.nm-ill .nm-coinlet circle { fill: #34c48f; }
.nm-ill .nm-cursor path { fill: #fff; stroke: #10111b; stroke-width: 1.4; stroke-linejoin: round; }
.nm-ill .nm-cursor { transform: translate(218px, 160px); transform-box: view-box; transform-origin: 0 0; }
.nm-ill .nm-click { fill: none; stroke: #c9bfff; stroke-width: 2; }

/* ---------- Entrées (une fois, quand l'illustration est visible) ---------- */
html.nm-motion .nm-ill.is-on :is(.nm-pop, .nm-draw, .nm-grow, .nm-rise, .nm-fade, .nm-slide, .nm-block, .nm-today, .nm-bell, .nm-flash, .nm-cursor, .nm-click, .nm-cell--booked, .nm-led--alert, .nm-status--solved, .nm-hand) { animation-duration: var(--t, .6s); animation-timing-function: cubic-bezier(.22, 1, .36, 1); animation-fill-mode: both; animation-delay: var(--d, 0s); }
html.nm-motion .nm-ill.is-pending :is(.nm-pop, .nm-draw, .nm-grow, .nm-rise, .nm-fade, .nm-slide, .nm-block) { visibility: hidden; }
html.nm-motion .nm-ill.is-on .nm-pop { animation-name: nm-pop; }
html.nm-motion .nm-ill.is-on .nm-draw { --t: 1s; animation-name: nm-draw; }
html.nm-motion .nm-ill.is-on .nm-grow { --t: .9s; transform-origin: 0 50%; animation-name: nm-grow; }
html.nm-motion .nm-ill.is-on .nm-rise { --t: .8s; transform-origin: 50% 100%; animation-name: nm-rise; }
html.nm-motion .nm-ill.is-on .nm-fade { --t: .8s; animation-name: nm-fade; }
html.nm-motion .nm-ill.is-on .nm-slide { --t: .9s; animation-name: nm-slide; }
html.nm-motion .nm-ill.is-on .nm-block { --t: .9s; animation-name: nm-block; }
html.nm-motion .nm-ill.is-on .nm-today { --t: 2.6s; animation-name: nm-today; animation-timing-function: ease-in-out; }
html.nm-motion .nm-ill.is-on .nm-flash { --t: 1.2s; animation-name: nm-flash; }
html.nm-motion .nm-ill.is-on .nm-bell { --t: 1s; animation-name: nm-ring; }
html.nm-motion .nm-ill.is-on .nm-cell--booked { --t: .7s; animation-name: nm-pop, nm-book; animation-duration: .6s, .7s; animation-delay: var(--d), var(--b, 1.4s); }
html.nm-motion .nm-ill.is-on .nm-led--alert { --t: 3.4s; --d: .6s; animation-name: nm-alert; animation-timing-function: linear; }
html.nm-motion .nm-ill.is-on .nm-status--solved { --t: 2.9s; --d: 0s; animation-name: nm-solve; animation-timing-function: linear; }
html.nm-motion .nm-ill.is-on .nm-cursor { --t: 1s; animation-name: nm-cursor; }
html.nm-motion .nm-ill.is-on .nm-click { --t: .8s; animation-name: nm-click; }
html.nm-motion .nm-ill.is-on .nm-hand { --t: 6s; --d: .4s; animation-name: nm-spin; animation-timing-function: linear; animation-iteration-count: 2; }
@keyframes nm-pop { 0% { opacity: 0; transform: scale(.55); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes nm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nm-grow { from { opacity: .2; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes nm-rise { from { opacity: .2; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes nm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nm-slide { from { opacity: 0; transform: translate3d(70px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes nm-block { from { opacity: 0; transform: translate(var(--fx, -150px), var(--fy, 0)) rotate(var(--fr, 0deg)) scale(.85); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes nm-today { from { transform: translateX(-150px); } to { transform: none; } }
@keyframes nm-flash { 0%, 30% { opacity: 0; } 45% { opacity: 1; } 60% { opacity: .3; } 75%, 100% { opacity: 1; } }
@keyframes nm-ring { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 25% { transform: rotate(-16deg); } 40% { transform: rotate(14deg); } 55% { transform: rotate(-10deg); } 70% { transform: rotate(6deg); } 85%, 100% { opacity: 1; transform: none; } }
@keyframes nm-book { from { fill: rgba(255, 255, 255, .05); stroke: rgba(150, 170, 255, .2); } to { fill: #6a58ff; stroke: #8d76ff; } }
@keyframes nm-alert { 0%, 50% { fill: #34c48f; } 55%, 90% { fill: #ffbd52; } 100% { fill: #34c48f; } }
@keyframes nm-solve { 0%, 88% { fill: #f5a841; } 100% { fill: #34c48f; } }
@keyframes nm-cursor { from { opacity: 0; transform: translate(330px, 270px); } to { opacity: 1; transform: translate(218px, 160px); } }
@keyframes nm-click { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes nm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- Boucles (trois cycles, seulement à l'écran) ---------- */
html.nm-motion .nm-ill.is-on .nm-loop { animation-duration: 2.8s; animation-timing-function: linear; animation-iteration-count: 3; animation-fill-mode: both; animation-delay: var(--d, 2s); animation-play-state: paused; }
html.nm-motion .nm-ill.is-on.is-live .nm-loop { animation-play-state: running; }
html.nm-motion .nm-ill.is-on .nm-pulse { animation-name: nm-pulse; }
html.nm-motion .nm-ill.is-on .nm-ping { animation-name: nm-ping; animation-timing-function: ease-out; }
html.nm-motion .nm-ill.is-on .nm-chip { animation-name: nm-chip; animation-duration: 4.2s; transform-box: view-box; transform-origin: 0 0; }
html.nm-motion .nm-ill.is-on .nm-coinlet { animation-name: nm-coinlet; animation-duration: 4.2s; transform-box: view-box; transform-origin: 0 0; }
@keyframes nm-pulse { 0% { stroke-dashoffset: 10; opacity: 0; } 10%, 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes nm-ping { 0% { opacity: .8; transform: none; } 80%, 100% { opacity: 0; transform: scale(1.6); } }
/* Module livré : partenaire → Neoo → client. */
@keyframes nm-chip { 0% { opacity: 0; transform: translate(318px, 206px); } 8% { opacity: 1; } 45% { transform: translate(210px, 116px); } 55% { transform: translate(210px, 116px); } 92% { opacity: 1; transform: translate(102px, 206px); } 100% { opacity: 0; transform: translate(102px, 206px); } }
/* Revenu : client → partenaire, le long du bas du triangle. */
@keyframes nm-coinlet { 0% { opacity: 0; transform: translate(118px, 236px); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(302px, 236px); } }

/* ---------- Mode bande : l'illustration suit le bloc de titre d'une section, dans le flux ---------- */
.nm-ill.nm-ill--band { position: relative; display: block; width: min(100%, 520px); margin: clamp(28px, 3vw, 40px) 0 clamp(36px, 4vw, 56px); }
.nm-ill.nm-ill--band.is-centered { margin-inline: auto; }

/* ---------- Micro-animations transverses ---------- */
/* Pictogrammes au trait des listes : tracés à l'arrivée à l'écran, un élément après l'autre. */
html.nm-motion .nm-draw-icon :is(path, polyline, line) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.22, 1, .36, 1) var(--nm-delay, 0s); }
html.nm-motion .nm-draw-icon.is-drawn :is(path, polyline, line) { stroke-dashoffset: 0; }
/* Vraies captures encadrées : un balayage lumineux, une seule fois. */
.nm-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent 0%, rgba(106, 88, 255, .06) 62%, rgba(106, 88, 255, .26) 96%, rgba(255, 255, 255, .85) 99.4%, transparent 100%) no-repeat 0 -70% / 100% 36%; }
html.nm-motion .nm-scan.is-drawn { animation: nm-scan 1.7s cubic-bezier(.5, 0, .3, 1) .25s both; }
@keyframes nm-scan { 0% { opacity: 1; background-position: 0 -70%; } 90% { opacity: 1; } 100% { opacity: 0; background-position: 0 170%; } }

/* ---------- Illustrations du lot 2 : tarifs, vidéos, démarrage, ressources ---------- */
.nm-ill .nm-tick { fill: none; stroke: #34c48f; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.nm-ill .nm-plus { fill: #10111b; stroke: rgba(201, 191, 255, .6); stroke-width: 1.4; }
.nm-ill .nm-plus__sign { fill: none; stroke: #c9bfff; stroke-width: 2; stroke-linecap: round; }
.nm-ill .nm-track { fill: rgba(255, 255, 255, .14); }
.nm-ill .nm-tickmark { fill: #fff; stroke: rgba(106, 88, 255, .7); stroke-width: 3; }
.nm-ill .nm-thumb { fill: rgba(255, 255, 255, .05); stroke: rgba(150, 170, 255, .26); }
.nm-ill .nm-step { fill: #fff; font: 300 26px/1 "Cerebri Sans", Inter, system-ui, sans-serif; }
.nm-ill .nm-image { fill: #d9def0; }
.nm-ill .nm-highlight { fill: rgba(255, 189, 82, .38); }
.nm-ill .nm-bookmark { fill: #6a58ff; }

/* ---------- Téléphones : bande compacte, centrée, sous un titre de section ---------- */
.nm-ill.nm-ill--phone { width: min(100%, 340px); margin: 24px auto 32px; }