/* Home canonique V25 : motion design (demande du 2026-10-03, v25-8). Chargée après neoo-home-v25.css.
   Même système que la page : fond nuit, maillage bleu de Forge, violet Neoo, rose des problèmes, vert des réponses.
   Règles :
   - le balisage décrit l'état final ; toute animation passe par html.v25-motion (posée par neoo-home-v25-motion.js hors
     mouvement réduit) : sans JavaScript ou en mouvement réduit, chaque illustration est complète et immobile ;
   - un mouvement différent par intention : des flux qui circulent (hero, illustration de la bascule, Peppol), des tracés
     qui se dessinent (frise, coches, rature, pictogrammes), des balayages (captures, colonne Neoo) ;
   - les boucles des illustrations ne tournent qu'à l'écran ([data-v25-live].is-live) et s'arrêtent après trois cycles sur
     leur état final ; celles de la hero suivent la boucle vidéo : le bouton pause de l'écran les arrête aussi. */
@property --v25m-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --v25m-fill { syntax: "<percentage>"; inherits: false; initial-value: 100%; }

/* ---------- Hero : flux des cartes modules vers l'écran Neoo (tracés posés par le pilote) ---------- */
.v25-streams { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.v25-stream { --flow: #a9b8ff; }
.v25-stream--crm { --flow: #9b84ff; }
.v25-stream--sales { --flow: #6f97ff; }
.v25-stream--stock { --flow: #ffbd52; }
.v25-stream--projects { --flow: #3fd08a; }
.v25-stream--finance { --flow: #3ddbb0; }
.v25-stream--support { --flow: #5aa2ff; }
.v25-stream--automation { --flow: #b27dff; }
.v25-stream--forge { --flow: #a08aff; }
/* Rails lumineux pleins (visuel du 2026-10-05) : un trait clair et son halo bleu, de chaque carte au bord de l’écran. */
.v25-stream__rail { fill: none; stroke: rgba(176, 200, 255, .5); stroke-width: 1.4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(96, 140, 255, .9)); }
.v25-stream__port { fill: var(--flow); stroke: #0a0d22; stroke-width: 2; }
.v25-stream__pulse { fill: none; stroke: var(--flow); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 16 100; stroke-dashoffset: 16; opacity: 0; }
html.v25-motion .v25-stream__pulse { filter: drop-shadow(0 0 5px var(--flow)); transition: opacity .6s ease; animation: v25m-stream 3.8s linear infinite paused; animation-delay: calc(var(--i, 0) * -.83s); }
html.v25-motion .v25-stream__port { transform-box: fill-box; transform-origin: center; animation: v25m-port 3.8s ease-out infinite paused; animation-delay: calc(var(--i, 0) * -.83s); }
html.v25-motion .v25-hero:has(.v25-film.is-playing) .v25-stream__pulse { opacity: 1; }
html.v25-motion .v25-hero:has(.v25-film.is-playing) :is(.v25-stream__pulse, .v25-stream__port) { animation-play-state: running; }
/* L'impulsion part de la carte et atteint le bord de l'écran à 60 % du cycle : le port s'allume à son arrivée. */
@keyframes v25m-stream { 0% { stroke-dashoffset: 16; } 70%, 100% { stroke-dashoffset: -100; } }
@keyframes v25m-port { 0%, 56% { transform: none; } 62% { transform: scale(2.1); } 80%, 100% { transform: none; } }

/* Liseré de l'écran : un éclat fait le tour du cadre pendant la lecture. */
.v25-screen::after { content: ""; position: absolute; inset: 0; z-index: 3; padding: 2px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .8s ease;
  background: conic-gradient(from var(--v25m-turn), transparent 0deg 285deg, rgba(150, 185, 255, .45) 328deg, #f4f7ff 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
html.v25-motion .v25-screen::after { animation: v25m-turn 8s linear infinite paused; }
html.v25-motion .v25-hero:has(.v25-film.is-playing) .v25-screen::after { opacity: 1; animation-play-state: running; }
@keyframes v25m-turn { to { --v25m-turn: 360deg; } }

/* Faisceaux : les deux anneaux oscillent lentement pendant la lecture. */
html.v25-motion .v25-beams::before { animation: v25m-sway-l 16s ease-in-out infinite alternate paused; }
html.v25-motion .v25-beams::after { animation: v25m-sway-r 16s ease-in-out -8s infinite alternate paused; }
html.v25-motion .v25-hero:has(.v25-film.is-playing) .v25-beams::before,
html.v25-motion .v25-hero:has(.v25-film.is-playing) .v25-beams::after { animation-play-state: running; }
@keyframes v25m-sway-l { from { transform: rotate(8deg); } to { transform: rotate(4deg) translate3d(2%, 1%, 0); } }
@keyframes v25m-sway-r { from { transform: rotate(-8deg); } to { transform: rotate(-4deg) translate3d(-2%, 1%, 0); } }

/* H1 : un reflet traverse une fois les mots en dégradé, après l'entrée du titre. */
html.v25-motion .neoo-home--v25 #v25-title .v25-grad { background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%), linear-gradient(95deg, #f3ecff 0%, #cdbcff 100%); background-repeat: no-repeat; background-size: 260% 100%, 100% 100%; background-position: 100% 0, 0 0; animation: v25m-sheen 1.5s var(--v24-ease) 1.1s both; }
html.v25-motion .neoo-home--v25 #v25-title .v25-line + .v25-line .v25-grad { background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%), linear-gradient(95deg, #8d6dff 0%, #a88cff 48%, #c7b6ff 100%); animation-delay: 1.3s; }
@keyframes v25m-sheen { from { background-position: 100% 0, 0 0; } to { background-position: 0 0, 0 0; } }

/* Annotations : chaque ligne s'écrit à la main, puis la flèche se trace vers sa carte. */
html.v25-motion .v25-note > span { animation: v25m-write .8s cubic-bezier(.4, 0, .2, 1) both; animation-delay: var(--w, 1.7s); }
.v25-note--left > span:nth-child(2) { --w: 2.15s; }
.v25-note--right > span:nth-child(1) { --w: 2s; }
.v25-note--right > span:nth-child(2) { --w: 2.45s; }
html.v25-motion .v25-note__arrow path { stroke-dasharray: 1; animation: v25m-draw .7s var(--v24-ease) 2.65s both; }
html.v25-motion .v25-note--right .v25-note__arrow path { animation-delay: 2.95s; }
@keyframes v25m-write { from { clip-path: inset(-25% 100% -25% -6%); } to { clip-path: inset(-25% -6% -25% -6%); } }
@keyframes v25m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Piliers : le pictogramme se dessine (l'éclair se remplit ensuite) et sa pastille émet une onde. */
.v25-pillar:nth-child(2) { --p: 1; }
.v25-pillar:nth-child(3) { --p: 2; }
html.v25-motion .v25-pillar__icon { animation: v25m-glow 1.4s ease-out both; animation-delay: calc(1.35s + var(--p, 0) * .2s); }
html.v25-motion .v25-pillar__icon path { stroke-dasharray: 1; animation: v25m-draw 1.2s var(--v24-ease) both; animation-delay: calc(1.3s + var(--p, 0) * .2s); }
html.v25-motion .v25-pillar:nth-child(2) .v25-pillar__icon path { animation-name: v25m-draw-fill; }
@keyframes v25m-draw-fill { 0% { stroke-dashoffset: 1; fill-opacity: 0; } 70% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes v25m-glow { from { box-shadow: 0 0 0 0 rgba(141, 109, 255, .55); } to { box-shadow: 0 0 0 16px rgba(141, 109, 255, 0); } }

/* ---------- Une semaine type : la frise se trace, les jours s'allument, chaque moment a son pictogramme animé ---------- */
html.v25-motion .v25-week[data-v24-reveal]::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.8s var(--v24-ease) .2s; }
html.v25-motion .v25-week[data-v24-reveal].is-in::before { transform: none; }
html.v25-motion .v25-week[data-v24-reveal].is-in .v25-week__dot { animation: v25m-dot 1s var(--v24-ease) both; animation-delay: calc(.3s + var(--i, 0) * .38s); }
@keyframes v25m-dot { 0% { transform: scale(0); } 45% { transform: scale(1.35); box-shadow: 0 0 0 12px rgba(255, 138, 160, 0); } 100% { transform: none; box-shadow: 0 0 0 4px rgba(255, 138, 160, .16); } }

.v25-glyph { display: block; flex: none; width: 84px; height: 51px; margin: 0 0 16px; }
.neoo-home--v25 #main .v25-week .v25-glyph svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: none; }
.v25-glyph svg * { transform-box: fill-box; transform-origin: center; }
.v25-glyph :is(.g-base, .g-warn, .g-ok) { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v25-glyph .g-base { stroke: rgba(226, 230, 245, .55); }
.v25-glyph .g-warn { stroke: var(--v25-warn); }
.v25-glyph .g-ok { stroke: var(--nf-success, #34c48f); stroke-width: 1.9; }
.v25-glyph .g-dot { stroke-width: 3.2; }
.v25-glyph .g-type { stroke-width: 2; stroke-dasharray: 1; }
.v25-glyph .g-cell { fill: rgba(255, 179, 193, .6); transform-origin: 0 50%; }
.v25-glyph .g-hand { transform-origin: 50% 100%; }
.v25-glyph .g-badge circle { fill: var(--v25-warn); }
.v25-glyph .g-badge text { fill: #2a0f1a; font: 700 9px/1 system-ui, sans-serif; }
/* Trois cycles, un pictogramme après l'autre, seulement à l'écran ; l'état final est le dessin complet. */
html.v25-motion .v25-week[data-v24-reveal] .v25-glyph * { animation-duration: 4.4s; animation-timing-function: var(--v24-ease); animation-iteration-count: 3; animation-fill-mode: both; animation-delay: calc(.9s + var(--i, 0) * .4s); animation-play-state: paused; }
html.v25-motion .v25-week[data-v24-reveal].is-in.is-live .v25-glyph * { animation-play-state: running; }
/* Lundi : le devis accepté est retapé ligne à ligne dans la facture ; la deuxième ligne est fausse. */
html.v25-motion .v25-glyph--retype .g-type--1 { animation-name: v25m-type-1; }
html.v25-motion .v25-glyph--retype .g-type--2 { animation-name: v25m-type-2; }
html.v25-motion .v25-glyph--retype .g-type--3 { animation-name: v25m-type-3; }
html.v25-motion .v25-glyph--retype .g-x { animation-name: v25m-pop-late; }
@keyframes v25m-type-1 { 0%, 8% { stroke-dashoffset: 1; } 22%, 100% { stroke-dashoffset: 0; } }
@keyframes v25m-type-2 { 0%, 26% { stroke-dashoffset: 1; } 40%, 100% { stroke-dashoffset: 0; } }
@keyframes v25m-type-3 { 0%, 56% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes v25m-pop-late { 0%, 42% { opacity: 0; transform: scale(0); } 48% { opacity: 1; transform: scale(1.5); } 54%, 100% { opacity: 1; transform: none; } }
/* Mardi : le client relance une deuxième fois ; personne ne répond. */
html.v25-motion .v25-glyph--chase .g-b1 { animation-name: v25m-in-early; }
html.v25-motion .v25-glyph--chase .g-b2 { animation-name: v25m-pop-mid; }
html.v25-motion .v25-glyph--chase .g-b2 .g-dot { animation-name: v25m-typing; }
html.v25-motion .v25-glyph--chase .g-badge { animation-name: v25m-badge; }
@keyframes v25m-in-early { 0% { opacity: 0; transform: translateY(5px); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes v25m-pop-mid { 0%, 24% { opacity: 0; transform: scale(.5); } 32% { opacity: 1; transform: scale(1.08); } 38%, 100% { opacity: 1; transform: none; } }
@keyframes v25m-typing { 0%, 36% { opacity: 0; } 44% { opacity: 1; } 52% { opacity: .3; } 60% { opacity: 1; } 68% { opacity: .3; } 76%, 100% { opacity: 1; } }
@keyframes v25m-badge { 0%, 50% { opacity: 0; transform: scale(0); } 56% { opacity: 1; transform: scale(1.4); } 62% { transform: none; } 68% { transform: rotate(-14deg); } 74% { transform: rotate(12deg); } 80% { transform: rotate(-6deg); } 86%, 100% { opacity: 1; transform: none; } }
/* Jeudi : on appelle pour savoir qui part chez quel client. */
html.v25-motion .v25-glyph--call .g-phone { animation-name: v25m-ring; }
html.v25-motion .v25-glyph--call .g-wave--1 { animation-name: v25m-wave-1; }
html.v25-motion .v25-glyph--call .g-wave--2 { animation-name: v25m-wave-2; }
html.v25-motion .v25-glyph--call .g-pin { animation-name: v25m-bob; }
@keyframes v25m-ring { 0%, 6% { transform: none; } 9% { transform: rotate(-14deg); } 12% { transform: rotate(12deg); } 15% { transform: rotate(-12deg); } 18% { transform: rotate(10deg); } 21% { transform: rotate(-6deg); } 24%, 36% { transform: none; } 39% { transform: rotate(-14deg); } 42% { transform: rotate(12deg); } 45% { transform: rotate(-10deg); } 48% { transform: rotate(6deg); } 51%, 100% { transform: none; } }
@keyframes v25m-wave-1 { 0%, 6% { opacity: 0; } 12% { opacity: 1; } 24% { opacity: .15; } 36% { opacity: 0; } 42% { opacity: 1; } 54%, 100% { opacity: 1; } }
@keyframes v25m-wave-2 { 0%, 10% { opacity: 0; } 16% { opacity: 1; } 28% { opacity: .15; } 40% { opacity: 0; } 46% { opacity: 1; } 58%, 100% { opacity: 1; } }
@keyframes v25m-bob { 0%, 60% { transform: none; } 66% { transform: translateY(-6px); } 72% { transform: none; } 77% { transform: translateY(-2px); } 82%, 100% { transform: none; } }
/* Vendredi soir : les cellules du tableur se remplissent une à une pendant que l'heure tourne. */
html.v25-motion .v25-week[data-v24-reveal] .v25-glyph .g-cell { animation-name: v25m-cell; animation-delay: calc(.9s + var(--i, 0) * .4s + var(--k, 0) * .2s); }
html.v25-motion .v25-glyph--sheet .g-hand { animation-name: v25m-spin; animation-timing-function: linear; }
@keyframes v25m-cell { 0%, 6% { opacity: 0; transform: scaleX(0); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes v25m-spin { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }

/* ---------- La bascule : quatre problèmes emmêlés entrent dans Neoo, quatre réponses en sortent ---------- */
.v25-merge { width: 100%; max-width: 1160px; margin: clamp(44px, 5vw, 64px) auto 0; }
.v25-merge svg { display: block; width: 100%; height: auto; overflow: visible; }
.v25-merge :is(.v25-merge__mess, .v25-merge__flow, .v25-merge__pulse) { fill: none; stroke-linecap: round; }
.v25-merge__mess { stroke: rgba(255, 138, 160, .42); stroke-width: 1.5; }
.v25-merge__flow { stroke: rgba(181, 164, 255, .62); stroke-width: 2; }
.v25-merge__node > circle { stroke-width: 1.5; }
.v25-merge__node > g :is(path, rect) { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.v25-merge__node--pain > circle { fill: rgba(255, 138, 160, .08); stroke: rgba(255, 138, 160, .5); }
.v25-merge__node--pain > g { stroke: var(--v25-warn); }
.v25-merge__node--done > circle { fill: rgba(106, 88, 255, .2); stroke: rgba(201, 191, 255, .62); }
.v25-merge__node--done > g:not(.v25-merge__ok) { stroke: #e6e0ff; }
.v25-merge__ok circle { fill: var(--nf-success, #34c48f); stroke: var(--v25-bg); stroke-width: 2.5; }
.neoo-home--v25 .v25-merge__ok path { stroke: #fff; stroke-width: 2.2; }
.v25-merge__halo { fill: none; stroke: rgba(201, 191, 255, .3); stroke-width: 1.2; }
.v25-merge__disc { fill: var(--nf-accent, #6a58ff); stroke: rgba(255, 255, 255, .28); stroke-width: 1; filter: drop-shadow(0 0 22px rgba(106, 88, 255, .7)); }
.v25-merge__core text { fill: #fff; font: 600 25px/1 "Cerebri Sans", Inter, system-ui, sans-serif; letter-spacing: -.065em; }
.v25-merge__ping { fill: none; stroke: rgba(201, 191, 255, .7); stroke-width: 2; opacity: 0; }
.v25-merge__pulse { stroke-width: 3; stroke-dasharray: 9 100; stroke-dashoffset: 9; opacity: 0; }
.v25-merge__pulse--in { stroke: #ff9fb2; }
.v25-merge__pulse--out { stroke: #d3caff; }
html.v25-motion .v25-merge [class*="v25-merge__"] { transform-box: fill-box; transform-origin: center; }
html.v25-motion .v25-merge.is-in .v25-merge__node { animation: v25m-node .6s var(--v24-ease) both; animation-delay: calc(.15s + var(--k, 0) * .12s); }
html.v25-motion .v25-merge.is-in .v25-merge__mess { stroke-dasharray: 1; animation: v25m-draw 1.3s cubic-bezier(.5, 0, .3, 1) both; animation-delay: calc(.45s + var(--k, 0) * .1s); }
html.v25-motion .v25-merge.is-in .v25-merge__core { animation: v25m-node .7s var(--v24-ease) 1.2s both; }
html.v25-motion .v25-merge.is-in .v25-merge__flow { stroke-dasharray: 1; animation: v25m-draw .9s var(--v24-ease) both; animation-delay: calc(1.65s + var(--k, 0) * .1s); }
html.v25-motion .v25-merge.is-in .v25-merge__node--done { animation-delay: calc(2.1s + var(--k, 0) * .14s); }
html.v25-motion .v25-merge.is-in .v25-merge__ok { animation: v25m-pop .5s var(--v24-ease) both; animation-delay: calc(2.4s + var(--k, 0) * .14s); }
html.v25-motion .v25-merge.is-in .v25-merge__ping { animation: v25m-ping 2.6s ease-out 1.6s 3 both paused; }
html.v25-motion .v25-merge.is-in .v25-merge__pulse { animation: v25m-pulse 2.6s cubic-bezier(.45, 0, .55, 1) 3 both paused; }
html.v25-motion .v25-merge.is-in .v25-merge__pulse--in { animation-delay: calc(2.8s + var(--k, 0) * .3s); }
html.v25-motion .v25-merge.is-in .v25-merge__pulse--out { animation-delay: calc(4s + var(--k, 0) * .3s); }
html.v25-motion .v25-merge.is-in.is-live :is(.v25-merge__pulse, .v25-merge__ping) { animation-play-state: running; }
@keyframes v25m-node { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes v25m-pop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: none; } }
@keyframes v25m-ping { 0% { opacity: .8; transform: none; } 80%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes v25m-pulse { 0% { stroke-dashoffset: 9; opacity: 0; } 10%, 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }

/* ---------- Avec Neoo : rature qui se trace, capture balayée, loupe qui pulse, coches dessinées ---------- */
html.v25-motion .v25-story[data-v24-reveal] .v25-story__before s { text-decoration: none; background: linear-gradient(rgba(255, 138, 160, .8), rgba(255, 138, 160, .8)) no-repeat 0 58% / 0 1.5px; transition: background-size 1s var(--v24-ease) .9s; }
html.v25-motion .v25-story[data-v24-reveal].is-in .v25-story__before s { background-size: 100% 1.5px; }
.v25-story__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(106, 88, 255, .08) 60%, rgba(106, 88, 255, .3) 96%, rgba(255, 255, 255, .95) 99%, transparent 100%) no-repeat 0 -70% / 100% 40%; }
.v25-story__play { z-index: 2; }
html.v25-motion .v25-story[data-v24-reveal].is-in .v25-story__frame::after { animation: v25m-scan 1.7s cubic-bezier(.5, 0, .3, 1) .8s both; }
@keyframes v25m-scan { 0% { opacity: 1; background-position: 0 -70%; } 90% { opacity: 1; } 100% { opacity: 0; background-position: 0 170%; } }
html.v25-motion .v25-story[data-v24-reveal].is-in .v25-story__zoom { animation: v25m-loupe 1.5s ease-out 1.4s 2 both; }
@keyframes v25m-loupe { from { outline: 2px solid rgba(201, 191, 255, .9); outline-offset: 4px; } to { outline: 2px solid rgba(201, 191, 255, 0); outline-offset: 22px; } }
html.v25-motion .v25-story[data-v24-reveal] .v25-story__points path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .6s var(--v24-ease) 1s; }
html.v25-motion .v25-story[data-v24-reveal] .v25-story__points li:nth-child(2) path { transition-delay: 1.2s; }
html.v25-motion .v25-story[data-v24-reveal] .v25-story__points li:nth-child(3) path { transition-delay: 1.4s; }
html.v25-motion .v25-story[data-v24-reveal].is-in .v25-story__points path { stroke-dashoffset: 0; }

/* ---------- Visite : les chapitres du film se posent sur une frise au bas de l'affiche ---------- */
.v25-tour__chapters { position: absolute; left: clamp(16px, 2.4vw, 32px); right: clamp(16px, 2.4vw, 32px); bottom: clamp(14px, 2vw, 26px); z-index: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .24); pointer-events: none; }
.v25-tour__chapters i { position: absolute; top: 50%; left: var(--at); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(106, 88, 255, .6); }
html.v25-motion .v25-tour__stage[data-v24-reveal] .v25-tour__chapters { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--v24-ease) .3s; }
html.v25-motion .v25-tour__stage[data-v24-reveal] .v25-tour__chapters i { opacity: 0; transform: scale(0); transition: opacity .3s ease, transform .5s var(--v24-ease); transition-delay: calc(.4s + var(--n, 0) * 90ms); }
html.v25-motion .v25-tour__stage[data-v24-reveal].is-in .v25-tour__chapters,
html.v25-motion .v25-tour__stage[data-v24-reveal].is-in .v25-tour__chapters i { opacity: 1; transform: none; }

/* ---------- Pourquoi Neoo : une vague de lumière descend la colonne Neoo, les coches se tracent ---------- */
.v25-compare__table tbody tr:nth-child(2) { --r: 1; }
.v25-compare__table tbody tr:nth-child(3) { --r: 2; }
.v25-compare__table tbody tr:nth-child(4) { --r: 3; }
.v25-compare__table tbody tr:nth-child(5) { --r: 4; }
.v25-compare__table tbody tr:nth-child(6) { --r: 5; }
html.v25-motion .v25-compare__wrap[data-v24-reveal].is-in .v25-compare__neoo { animation: v25m-wave-head 1.1s ease-out .2s both; }
html.v25-motion .v25-compare__wrap[data-v24-reveal].is-in .v25-compare__cell--neoo { animation: v25m-wave 1.1s ease-out both; animation-delay: calc(.4s + var(--r, 0) * .22s); }
html.v25-motion .v25-compare__wrap[data-v24-reveal] .v25-compare__cell--neoo svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .6s var(--v24-ease); transition-delay: calc(.55s + var(--r, 0) * .22s); }
html.v25-motion .v25-compare__wrap[data-v24-reveal].is-in .v25-compare__cell--neoo svg path { stroke-dashoffset: 0; }
@keyframes v25m-wave-head { 0%, 100% { background-color: rgba(106, 88, 255, .22); } 35% { background-color: rgba(140, 120, 255, .44); } }
@keyframes v25m-wave { 0%, 100% { background-color: rgba(106, 88, 255, .12); } 35% { background-color: rgba(140, 120, 255, .34); } }

/* ---------- Peppol : la facture traverse le réseau, du logiciel Neoo jusqu'au client ---------- */
.v25-route { max-width: 600px; margin-top: clamp(26px, 3vw, 36px); }
.v25-route svg { display: block; width: 100%; height: auto; overflow: visible; }
.v25-route__rail { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.v25-route__trace { fill: none; stroke: var(--v25-sky); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; filter: drop-shadow(0 0 6px rgba(159, 216, 255, .6)); }
.v25-route__net path { fill: none; stroke: rgba(159, 216, 255, .24); stroke-width: 1.2; }
.v25-route__net circle { fill: rgba(159, 216, 255, .55); }
.v25-route__label { fill: var(--v25-sky); font: 600 13px/1 var(--v24-display); letter-spacing: .16em; text-transform: uppercase; }
.v25-route__paper { fill: #eef1fb; }
.v25-route__head, .v25-route__total { fill: var(--nf-accent, #6a58ff); }
.v25-route__brand { fill: #fff; font: 600 11px/1 "Cerebri Sans", Inter, system-ui, sans-serif; letter-spacing: -.04em; }
.v25-route__ln { fill: #c6cce0; }
.v25-route__ring { fill: #0b1030; stroke: rgba(159, 216, 255, .75); stroke-width: 1.6; }
.v25-route__core { fill: var(--v25-sky); }
.v25-route__chip { opacity: 0; transform: translate(88px, 66px); }
.v25-route__chip rect { fill: #fff; }
.v25-route__chip-head { fill: var(--nf-accent, #6a58ff); }
.v25-route__chip-ln { fill: none; stroke: #c6cce0; stroke-width: 2; stroke-linecap: round; }
.v25-route__check circle { fill: var(--nf-success, #34c48f); stroke: var(--v25-surface); stroke-width: 3; }
.v25-route__check path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html.v25-motion .v25-peppol__card.is-in .v25-route :is(.v25-route__trace, .v25-route__chip, .v25-route__ap, .v25-route__check) { transform-box: fill-box; transform-origin: center; animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: 3; animation-fill-mode: both; animation-delay: .8s; animation-play-state: paused; }
html.v25-motion .v25-peppol__card.is-in .v25-route.is-live :is(.v25-route__trace, .v25-route__chip, .v25-route__ap, .v25-route__check) { animation-play-state: running; }
html.v25-motion .v25-peppol__card.is-in .v25-route .v25-route__trace { animation-name: v25m-trace; }
html.v25-motion .v25-peppol__card.is-in .v25-route .v25-route__chip { transform-box: view-box; transform-origin: 0 0; animation-name: v25m-chip; }
html.v25-motion .v25-peppol__card.is-in .v25-route .v25-route__ap--send { animation-name: v25m-ap-send; }
html.v25-motion .v25-peppol__card.is-in .v25-route .v25-route__ap--recv { animation-name: v25m-ap-recv; }
html.v25-motion .v25-peppol__card.is-in .v25-route .v25-route__check { animation-name: v25m-check; }
/* Le tracé : 122 unités jusqu'au premier point d'accès, 244 pour l'arc Peppol, 126 jusqu'au client. */
@keyframes v25m-trace { 0%, 6% { stroke-dashoffset: 1; } 28% { stroke-dashoffset: .752; } 64% { stroke-dashoffset: .256; } 80%, 100% { stroke-dashoffset: 0; } }
@keyframes v25m-chip {
  0% { opacity: 0; transform: translate(88px, 66px) scale(.2); }
  6% { opacity: 1; transform: translate(88px, 66px) scale(1); }
  24% { transform: translate(190px, 66px) scale(1); }
  28% { transform: translate(210px, 66px) scale(1); }
  31% { transform: translate(227px, 50px) scale(1); }
  36% { transform: translate(258px, 32px) scale(1); }
  46% { transform: translate(320px, 21px) scale(1); }
  56% { transform: translate(382px, 32px) scale(1); }
  61% { transform: translate(413px, 50px) scale(1); }
  64% { transform: translate(430px, 66px) scale(1); }
  68% { transform: translate(450px, 66px) scale(1); }
  80% { opacity: 1; transform: translate(560px, 66px) scale(1); }
  86%, 100% { opacity: 0; transform: translate(596px, 66px) scale(.3); }
}
@keyframes v25m-ap-send { 0%, 20% { opacity: .4; transform: none; } 24% { opacity: 1; transform: scale(1.3); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes v25m-ap-recv { 0%, 64% { opacity: .4; transform: none; } 68% { opacity: 1; transform: scale(1.3); } 74%, 100% { opacity: 1; transform: none; } }
@keyframes v25m-check { 0%, 82% { opacity: 0; transform: scale(0); } 88% { opacity: 1; transform: scale(1.25); } 93%, 100% { opacity: 1; transform: none; } }

/* ---------- Appel final : les étapes se complètent l'une après l'autre ; des particules montent du maillage ---------- */
.v25-steps li:nth-child(2) { --s: 1; }
.v25-steps li:nth-child(3) { --s: 2; }
.v25-steps__num { position: relative; }
.v25-steps__num::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; background: conic-gradient(var(--v25-violet) var(--v25m-fill), rgba(201, 191, 255, .14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); }
html.v25-motion .v25-final .v24-shell[data-v24-reveal] .v25-steps__num::before { --v25m-fill: 0%; }
html.v25-motion .v25-final .v24-shell[data-v24-reveal].is-in .v25-steps__num::before { animation: v25m-fill 1s cubic-bezier(.6, 0, .3, 1) both; animation-delay: calc(.6s + var(--s, 0) * .75s); }
html.v25-motion .v25-final .v24-shell[data-v24-reveal].is-in .v25-steps__num { animation: v25m-num .7s var(--v24-ease) both; animation-delay: calc(1.5s + var(--s, 0) * .75s); }
@keyframes v25m-fill { from { --v25m-fill: 0%; } to { --v25m-fill: 100%; } }
@keyframes v25m-num { 0%, 100% { background-color: rgba(106, 88, 255, .2); } 40% { background-color: rgba(141, 114, 255, .7); color: #fff; } }
.v25-sparks { position: absolute; inset: 0; z-index: 0; display: none; overflow: hidden; pointer-events: none; }
html.v25-motion .v25-sparks { display: block; }
.v25-sparks i { position: absolute; bottom: 6%; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #cfe0ff; box-shadow: 0 0 10px 1px rgba(110, 160, 255, .85); opacity: 0; }
html.v25-motion .v25-sparks i { animation: v25m-rise var(--t) linear var(--d) 3 both paused; }
html.v25-motion .v25-sparks.is-live i { animation-play-state: running; }
@keyframes v25m-rise { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 12% { opacity: .85; } 65% { opacity: .45; } 100% { opacity: 0; transform: translate3d(var(--dx, 0), -440px, 0); } }

/* ---------- Responsive ---------- */
/* Téléphones : l'illustration de la bascule (lisible à partir d'une tablette) laisse la place à la phrase. */
@media (max-width: 720px) {
  .v25-merge { display: none; }
  .v25-glyph { width: 72px; height: 44px; margin-bottom: 12px; }
}
@media (max-width: 420px) {
  .v25-route__label { display: none; }
}