/* Une regle a connaitre avant de toucher a ce fichier.
   Les etats du schema s ecrivent en deux temps : une regle de base qui eteint, et une regle
   d etape qui allume. Les deux doivent porter le meme prefixe. Sans cela la regle de base,
   qui compte souvent une classe de plus, garde la main a specificite egale et rien ne
   s allume : c est arrive trois fois, sur les faisceaux, sur les imagettes et sur le decalage
   des robots, et cela ne se voit pas a la lecture du fichier. Regle pratique : si une regle
   d etat ne prend pas, comparer le nombre de classes des deux selecteurs avant tout le reste.

   Deuxieme regle : ce qui reste allume une fois passe s ecrit par nom d etape
   (data-reached, data-active) et jamais par numero. Ajouter ou retirer une etape au milieu
   d un parcours ne doit pas decaler la feuille de style en silence. */

/* Short, finite sequences; every piece of content remains available without motion. */
.mv-hero .mv-hero-image video{display:block;width:100%;height:100%;object-fit:cover;object-position:43% center}
.mv-cinema{position:relative;isolation:isolate;min-height:580px;display:flex;align-items:center;overflow:hidden;background:#18201d}
.mv-site .mv-cinema-film{position:absolute;inset:0;margin:0;z-index:-2}
.mv-cinema-film video{display:block;width:100%;height:100%;object-fit:cover}
.mv-cinema::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,27,22,.85),rgba(15,27,22,.38) 55%,rgba(15,27,22,.06))}
.mv-cinema-copy{padding:100px 5.5%;max-width:780px}
.mv-site .mv-cinema h2,.mv-site .mv-cinema .mv-eyebrow{color:white}
.mv-site .mv-cinema h2{font-size:clamp(42px,5vw,72px)}
.mv-site .mv-cinema mark{color:#90e377}
.mv-video-toggle{position:absolute;right:5.5%;bottom:26px;z-index:4;border:1px solid #ffffff88;background:#18201de6;color:white;border-radius:24px;padding:10px 17px;font:inherit;font-size:12px;line-height:1.5;cursor:pointer}
.mv-video-toggle:hover{background:#303d3a}
.mv-intro{display:none;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
 .mv-intro{display:grid;place-items:center;position:fixed;inset:0;background:#f2f2f2;z-index:10000;animation:mv-intro-out 1.05s ease forwards}
 .mv-intro svg{width:144px;height:128px;overflow:visible}
 .mv-intro .mv-mark-m,.mv-intro .mv-mark-v{animation:none;transform:none;opacity:1}
 .mv-intro .mv-trace{stroke-dasharray:1000;stroke-dashoffset:1000;animation:mv-circular-trace .65s linear .04s both}
 @keyframes mv-circular-trace{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
 @keyframes mv-intro-out{0%,78%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
}
@media(max-width:800px){.mv-cinema{min-height:440px}.mv-cinema-copy{padding:75px 6% 110px}.mv-hero .mv-video-toggle{right:6%;bottom:18px}}
.mv-language{display:flex;align-items:center;gap:10px;white-space:nowrap}
.mv-language a{padding:8px 2px;border-bottom:2px solid transparent}
.mv-language a[aria-current]{border-color:var(--mv-green-ui)}
.mv-replay{display:none;background:transparent;border:0;border-bottom:1px solid currentColor;border-radius:0;color:inherit;padding:6px 0;margin-top:24px;font:inherit;font-size:13px;cursor:pointer}
.mv-motion .mv-replay{display:inline-block}
.mv-article-image{display:block;overflow:hidden;background:var(--mv-ground);margin-bottom:24px;aspect-ratio:16/10}
.mv-site .mv-article-image img{display:block;width:100%;height:100%;object-fit:cover}
.mv-site .mv-article-graphic img{object-fit:contain}
.mv-site .mv-sorting-video{margin:35px 0 0}
.mv-sorting-video video{display:block;width:100%;max-height:650px;background:#18201d;object-fit:contain}
.mv-sorting-video figcaption{font-size:13px;text-align:left;margin-top:12px}
.mv-site .mv-founder-photo{margin:0 0 24px}
.mv-site .mv-founder-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}
.mv-founders .mv-step .mv-eyebrow{display:none}
.mv-site .mv-team-photo{margin:0 0 45px;max-width:720px}
.mv-team-photo img{display:block;width:100%;height:auto}
.mv-partner-grid>.wp-block-group__inner-container>.mv-inner,.mv-partner-grid>.wp-block-group__inner-container{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:center}
.mv-partner-grid{margin-top:40px}
.mv-site .mv-partner-logo{margin:0;padding:22px;background:#fff;border:1px solid #ddd;height:145px;display:flex;align-items:center;justify-content:center}
.mv-site .mv-partner-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:800px){.mv-partner-grid>.wp-block-group__inner-container>.mv-inner,.mv-partner-grid>.wp-block-group__inner-container{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.mv-site .mv-partner-logo{height:110px;padding:15px}}
@media(prefers-reduced-motion:no-preference){
 .mv-article-image img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
 .mv-article-image:hover img,.mv-article-image:focus-visible img{transform:scale(1.035)}
 .mv-motion .mv-observe{transition:opacity .65s ease var(--mv-delay,0ms),transform .65s cubic-bezier(.2,.7,.2,1) var(--mv-delay,0ms)}
 .mv-subhero h1{animation:mv-title-in .85s cubic-bezier(.2,.7,.2,1) both}
 .mv-hero-image img{animation:mv-photo-settle 1.5s cubic-bezier(.2,.6,.2,1) both}
 .mv-nav li a{position:relative}
 .mv-nav li a::after{content:'';position:absolute;bottom:3px;left:0;right:0;height:1px;background:var(--mv-green-ui);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
 .mv-nav li a:hover::after,.mv-nav li a:focus-visible::after{transform:scaleX(1)}
 .mv-nav-call,.mv-text-link span,.mv-solution-row>span{transition:transform .25s ease,background-color .25s ease}
 .mv-text-link span{display:inline-block}
 .mv-nav-call:hover{transform:translateY(-2px)}
 .mv-text-link:hover span,.mv-solution-row:hover>span{transform:translate(3px,-3px)}
 .mv-solution-row{transition:background-color .25s ease,padding-left .25s ease}
 .mv-solution-row:hover{background:var(--mv-pale);padding-left:16px}
 .mv-two-col figure{overflow:hidden}
 .mv-two-col figure img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
 .mv-two-col figure:hover img{transform:scale(1.035)}
 .mv-flow-run .mv-step::before{content:'';position:absolute;top:-2px;left:0;right:0;height:3px;background:var(--mv-green);transform:scaleX(0);transform-origin:left;animation:mv-signal .85s ease calc(var(--mv-step)*.85s) forwards}
 .mv-green .mv-flow-run .mv-step::before{background:var(--mv-light)}
 .mv-flow-run .mv-step h3{animation:mv-step-focus .85s ease calc(var(--mv-step)*.85s)}
 @keyframes mv-title-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
 @keyframes mv-photo-settle{from{transform:scale(1.045)}to{transform:scale(1)}}
 @keyframes mv-signal{to{transform:scaleX(1)}}
 @keyframes mv-step-focus{50%{transform:translateY(-4px)}}
 @media(max-width:800px){.mv-nav.is-open{animation:mv-menu-in .25s ease both}@keyframes mv-menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}}
}
@media(prefers-reduced-motion:reduce){
 .mv-site *, .mv-site *::before,.mv-site *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .mv-site .mv-observe{opacity:1;transform:none}
 .mv-replay{display:none!important}
}

/* Tracé des icônes. Même langage que l'introduction du logo : la forme se dessine
   au lieu d'apparaître. L'ordre suit celui d'un dessin technique — les lignes de
   construction d'abord, puis le trait principal, puis les points d'ancrage.
   --mv-step décale les icônes d'une rangée, en phase avec le filet vert de mv-signal. */
@media(prefers-reduced-motion:no-preference){
 .mv-motion .mv-icon[data-mv-armed] .c{opacity:0}
 .mv-motion .mv-icon[data-mv-armed] .m{stroke-dashoffset:var(--mv-len,120)}
 .mv-motion .mv-icon[data-mv-armed] .a{opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box}
 .mv-motion .mv-icon.mv-drawn .c{animation:mv-icon-guides .38s ease calc(var(--mv-step,0)*.16s) both}
 .mv-motion .mv-icon.mv-drawn .m{animation:mv-icon-trace .62s cubic-bezier(.35,.05,.2,1) calc(var(--mv-step,0)*.16s + .18s) both}
 .mv-motion .mv-icon.mv-drawn .a{animation:mv-icon-anchor .3s cubic-bezier(.2,1.4,.4,1) calc(var(--mv-step,0)*.16s + .68s) both}
 @keyframes mv-icon-guides{from{opacity:0}to{opacity:.75}}
 @keyframes mv-icon-trace{from{stroke-dashoffset:var(--mv-len,120)}to{stroke-dashoffset:0}}
 @keyframes mv-icon-anchor{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
}

/* Icônes d'un bloc d'étapes : elles n'ont plus de rythme propre.
   mv-signal dure .85s et se décale de .85s par étape ; les trois temps de l'icône se
   logent dans cette fenêtre et se terminent avec le filet de leur propre étape, au lieu
   de courir sur un décalage de .16s qui les faisait dériver devant la séquence. */
@media(prefers-reduced-motion:no-preference){
 .mv-motion .mv-flow-run .mv-step .mv-icon .c{animation:mv-icon-guides .22s ease calc(var(--mv-step,0)*.85s) both}
 .mv-motion .mv-flow-run .mv-step .mv-icon .m{animation:mv-icon-trace .62s ease calc(var(--mv-step,0)*.85s + .06s) both}
 .mv-motion .mv-flow-run .mv-step .mv-icon .a{animation:mv-icon-anchor .22s cubic-bezier(.2,1.4,.4,1) calc(var(--mv-step,0)*.85s + .63s) both}
}

/* Ce que le schéma montre au passage de la matière.
   Règle du brief : une seule chose se déplace vraiment, la matière ; tout le reste
   s'allume quand elle passe dessous, et s'éteint après. Hors mouvement, tout reste
   visible : l'état final doit se lire sans animation. */
@media(prefers-reduced-motion:no-preference){
 .mv-motion .mv-scrolly.is-live .mv-pieces{transform:translateX(calc(var(--mv-feed,0) * 1px));transition:transform .75s cubic-bezier(.2,.7,.2,1)}
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-beam,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-laser-line,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-sightline,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-plasma{opacity:0;transition:opacity .35s ease}
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-window{opacity:.25;transition:opacity .35s ease}
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-station,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-robot,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-bins,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-thumb{transition:opacity .35s ease,color .35s ease}

 /* L'étape courante met en avant un groupe ; le reste s'estompe sans disparaître. */
 .mv-motion .mv-diagram[data-active] .mv-station,
 .mv-motion .mv-diagram[data-active] .mv-robot,
 .mv-motion .mv-diagram[data-active] .mv-bins{opacity:.45}
 .mv-motion .mv-diagram[data-active] .mv-window{opacity:1}
 .mv-motion .mv-diagram[data-active="conveyor"] .mv-station,
 .mv-motion .mv-diagram[data-active="conveyor"] .mv-robot,
 .mv-motion .mv-diagram[data-active="conveyor"] .mv-bins{opacity:.45}

 .mv-motion .mv-diagram[data-active="station-3d"] .mv-station-3d,
 .mv-motion .mv-diagram[data-active="station-rgb"] .mv-station-rgb,
 .mv-motion .mv-diagram[data-active="station-xrt"] .mv-station-xrt,
 .mv-motion .mv-diagram[data-active="station-libs"] .mv-station-libs,
 .mv-motion .mv-diagram[data-active="station-hs"] .mv-station-hs{opacity:1;color:var(--mv-green-ui)}
 .mv-motion .mv-diagram[data-active="robot"] .mv-robot,
 .mv-motion .mv-diagram[data-active="bins"] .mv-bins,
 .mv-motion .mv-diagram[data-active="bins"] .mv-robot{opacity:1;color:var(--mv-green-ui)}
 .mv-motion .mv-diagram[data-active="sensing"] .mv-station{opacity:1;color:var(--mv-green-ui)}

 /* Le faisceau de la station mise en avant, et lui seul. Meme prefixe que la regle qui
    les eteint : a un point de classe pres, elle gardait la main et rien ne s allumait. */
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="station-3d"] .mv-beam-laser,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="station-3d"] .mv-laser-line,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="station-3d"] .mv-sightline,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="station-rgb"] .mv-station-rgb .mv-beam,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="station-xrt"] .mv-beam-xray,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="station-libs"] .mv-beam-libs,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="station-libs"] .mv-plasma,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="station-hs"] .mv-station-hs .mv-beam,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="sensing"] .mv-beam{opacity:1;color:var(--mv-green-ui)}

 /* Le vert n'est jamais le vert de fond : sur section verte, on éclaire en vert clair. */
 .mv-green .mv-motion .mv-diagram[data-active] [class*="mv-station"],
 .mv-green .mv-diagram[data-active="robot"] .mv-robot{color:var(--mv-light)}
}

/* Le cadrage se déplace d'une étape à l'autre, pas image par image : une vue qui se pose
   se lit, une vue qui glisse en permanence ne se lit pas. Seule la matière avance en
   continu. */
@media(prefers-reduced-motion:no-preference){
 .mv-motion .mv-scrolly.is-live .mv-diagram svg{transition:transform .75s cubic-bezier(.2,.7,.2,1)}
}

/* Schéma Sense : ce que le défilement raconte.
   Une seule pièce traverse le bloc et se présente sous chaque station ; les imagettes
   n'apparaissent qu'à la fin, toutes ensemble, parce que c'est leur simultanéité qui est
   l'argument ; puis elles entrent dans le modèle, et le modèle rend le rapport. */
@media(prefers-reduced-motion:no-preference){
 /* La pièce suivie se distingue dès qu'on est sous une station. */
 .mv-motion .mv-diagram[data-active^="station-"] .mv-piece-focus{color:var(--mv-green-ui)}
 .mv-motion .mv-scrolly.is-live .mv-piece-focus{transition:color .4s ease}

 /* Le tir de rayons X traverse la pièce, de la source au détecteur. */
 .mv-motion .mv-diagram[data-active="station-xrt"] .mv-beam-xray *{stroke-dasharray:26 22;animation:mv-xray-shot .9s linear infinite}
 @keyframes mv-xray-shot{from{stroke-dashoffset:96}to{stroke-dashoffset:0}}

 /* La sonde de profil court sur le dessus de la pièce : c'est ce que mesure le laser. */
 .mv-motion .mv-scrolly.is-live .mv-probe{opacity:0;transform:translateX(calc(var(--mv-feed,0) * 1px));transition:opacity .35s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
 .mv-motion .mv-diagram[data-active="station-3d"] .mv-probe{opacity:1;color:var(--mv-green-ui)}
 .mv-motion .mv-diagram[data-active="station-3d"] .mv-probe circle{animation:mv-probe-sweep 2.4s ease-in-out infinite}
 @keyframes mv-probe-sweep{
  0%{transform:translate(-9px,4px)}
  25%{transform:translate(-4px,-2px)}
  50%{transform:translate(1px,-5px)}
  75%{transform:translate(6px,-1px)}
  100%{transform:translate(9px,4px)}
 }
 /* Le vert marque l etape en cours, et elle seule. Ce qui est deja passe reste a l ecran,
    a l encre : c est le meme vocabulaire que les stations, qui s estompent une fois vues.
    Ces etats s ecrivent par nom d etape et non par numero, sinon retirer une etape au
    milieu du parcours decalerait toute la suite en silence. */

 /* La bande tourne des l etape de presentation. Translater les pieces d exactement une
    longueur de motif redonne le dessin de depart et le train amont comble derriere : la
    boucle ne se voit pas. La longueur vient du schema, elle n est pas ecrite ici. */
 @keyframes mv-belt-run{from{transform:translateX(0)}to{transform:translateX(calc(var(--mv-pattern,0) * 1px))}}
 .mv-motion .mv-scrolly.is-live.is-onscreen .mv-diagram[data-active="conveyor"]:not([data-reached~="thumbs"]) .mv-belt-run{animation:mv-belt-run 9s linear infinite}

 /* Les imagettes restent vides jusqu a leur etape, puis apparaissent toutes ensemble. */
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-thumb{opacity:0;transition:opacity .4s ease,color .4s ease}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="thumbs"] .mv-thumb{opacity:1}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="thumbs"] .mv-thumb{color:var(--mv-green-ui);animation:mv-thumb-pop .55s cubic-bezier(.2,1.5,.4,1) both}
 @keyframes mv-thumb-pop{from{opacity:0;transform:translateY(7px) scale(.9)}to{opacity:1;transform:none}}

 /* Les liaisons se tracent vers le modele dans l ordre des capteurs, et la donnee continue
    d y couler tant qu on est sur l etape : un trait qui se fige laisse croire qu il ne se
    passe plus rien, et l etape se traverse sans avoir ete vue. */
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-datalink{opacity:0;stroke-dasharray:1800;stroke-dashoffset:1800;stroke-width:2.6;transition:opacity .45s ease,color .45s ease}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="ai"] .mv-datalink{opacity:.45;animation:mv-link-draw 1.1s ease both}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="ai"] .mv-datalink{opacity:1;color:var(--mv-green-ui);animation:mv-link-draw 1.1s ease both,mv-link-flow 1.2s linear 1.25s infinite}
 .mv-motion .mv-datalinks .mv-datalink:nth-child(2){animation-delay:.1s,1.35s}
 .mv-motion .mv-datalinks .mv-datalink:nth-child(3){animation-delay:.2s,1.45s}
 .mv-motion .mv-datalinks .mv-datalink:nth-child(4){animation-delay:.3s,1.55s}
 .mv-motion .mv-datalinks .mv-datalink:nth-child(5){animation-delay:.4s,1.65s}
 @keyframes mv-link-draw{to{stroke-dashoffset:0}}
 @keyframes mv-link-flow{from{stroke-dasharray:18 14;stroke-dashoffset:64}to{stroke-dasharray:18 14;stroke-dashoffset:0}}

 /* Le modele, puis le rapport. Avant leur tour ils sont la mais en retrait ; apres, ils
    reviennent a l encre et laissent le vert a l etape en cours. Au verdict, le rapport de
    composition est donc seul en vert. */
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-ai,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-ailink,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-report,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-verdicts{opacity:.3;transition:opacity .45s ease,color .45s ease}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="ai"] .mv-ai{opacity:.55}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="ai"] .mv-ai{opacity:1;color:var(--mv-green-ui)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="report"] .mv-ailink{opacity:.55}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="report"] .mv-report,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="report"] .mv-verdicts{opacity:1;color:var(--mv-green-ui)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="report"] .mv-check{stroke-dasharray:40;stroke-dashoffset:40;animation:mv-check-draw .4s ease both}
 .mv-motion .mv-verdicts .mv-check:nth-of-type(2){animation-delay:.15s}
 .mv-motion .mv-verdicts .mv-check:nth-of-type(3){animation-delay:.3s}
 @keyframes mv-check-draw{to{stroke-dashoffset:0}}
}

/* Lignes de tri, Refine et Grade : le modele donne une couleur a chaque piece a la sortie
   du bloc de detection, les robots prennent ce qui n a rien a faire la, les bacs se
   remplissent, et la ligne edite le rapport de chaque sortie sans s arreter de tourner.
   Une piece qui reste a l encre est une piece qui reste sur la bande : c est le propos
   meme d une ligne de purification, et il se lit sans legende. */
@media(prefers-reduced-motion:no-preference){
 /* Une piece identifiee est pleine et non cerclee : a l echelle du dessin, un contour de
    couleur se perd dans la file des autres pieces, un aplat se voit du premier coup. */
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-cls-a,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-cls-b,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-cls-c,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-cls-d,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-cls-e,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-cls-f,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-cls-g,
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-cls-h{transition:color .5s ease}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-a{color:var(--mv-cls-a)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-b{color:var(--mv-cls-b)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-c{color:var(--mv-cls-c)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-d{color:var(--mv-cls-d)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-e{color:var(--mv-cls-e)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-f{color:var(--mv-cls-f)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-g{color:var(--mv-cls-g)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-h{color:var(--mv-cls-h)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-a polygon,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] rect.mv-cls-a,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] polygon.mv-cls-a,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-b polygon,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] rect.mv-cls-b,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] polygon.mv-cls-b,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-c polygon,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] rect.mv-cls-c,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] polygon.mv-cls-c,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-d polygon,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] rect.mv-cls-d,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] polygon.mv-cls-d,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-e polygon,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] rect.mv-cls-e,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] polygon.mv-cls-e,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-f polygon,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] rect.mv-cls-f,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] polygon.mv-cls-f,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-g polygon,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] rect.mv-cls-g,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] polygon.mv-cls-g,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-cls-h polygon,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] rect.mv-cls-h,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] polygon.mv-cls-h{fill:currentColor}

 /* Les trajets de depose n apparaissent qu au moment ou l on parle de la prise. */
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-drop{opacity:0;transition:opacity .4s ease}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="robot"] .mv-drop{opacity:1}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="robot"] .mv-drop line,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="bins"] .mv-drop line,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="outputs"] .mv-drop line{animation:mv-drop-flow 1.1s linear infinite}
 @keyframes mv-drop-flow{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}

 /* Le bras s allonge, il ne largue pas sa pince. Un delta ne descend pas son prehenseur :
    il deploie son parallelogramme. Une mise a l echelle verticale depuis le point d ancrage
    donne ce geste sans qu aucun organe ne quitte le suivant, et la platine reste sous son
    rail. Les robots ne partent pas ensemble : une ligne ou tout bouge au meme instant ne
    ressemble a aucune ligne. */
 @keyframes mv-reach{0%,8%{transform:scaleY(1)}34%,46%{transform:scaleY(1.13)}72%,100%{transform:scaleY(1)}}
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-robot{transform-box:fill-box;transform-origin:top center}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="robot"] .mv-robot,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="bins"] .mv-robot,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="outputs"] .mv-robot{animation:mv-reach 2.4s ease-in-out infinite}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active] .mv-robot[data-i="1"]{animation-delay:.35s}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active] .mv-robot[data-i="2"]{animation-delay:.70s}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active] .mv-robot[data-i="3"]{animation-delay:1.05s}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active] .mv-robot[data-i="4"]{animation-delay:.20s}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active] .mv-robot[data-i="5"]{animation-delay:.55s}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active] .mv-robot[data-i="6"]{animation-delay:.90s}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active] .mv-robot[data-i="7"]{animation-delay:1.25s}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active] .mv-robot[data-i="8"]{animation-delay:.40s}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active] .mv-robot[data-i="9"]{animation-delay:.75s}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active] .mv-robot[data-i="10"]{animation-delay:1.10s}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active] .mv-robot[data-i="11"]{animation-delay:.15s}

 /* Un bac vide ne dit pas ce que fait un robot. Chaque poste a trois compartiments et
    chaque compartiment sa classe : le robot n est pas dedie a une classe, il dessert les
    trois, et c est ce qui rend une repartition intelligente possible. */
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-binfill{opacity:0}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="bins"] .mv-binfill{animation:mv-bin-fill .55s cubic-bezier(.2,1.4,.4,1) both}
 .mv-motion .mv-bins g.mv-binfill:nth-of-type(2){animation-delay:.18s}
 .mv-motion .mv-bins g.mv-binfill:nth-of-type(3){animation-delay:.36s}
 @keyframes mv-bin-fill{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

 /* Le rapport de production. La ligne ne s arrete pas pour l editer : a cette etape la
    bande tourne et les bras travaillent, et c est precisement ce que la phrase dit. */
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-outputs{opacity:.3;transition:opacity .45s ease,color .45s ease}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="outputs"] .mv-outputs{opacity:1;color:var(--mv-green-ui)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="outputs"] .mv-robot,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="outputs"] .mv-bins{opacity:1}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="outputs"] .mv-outrow{animation:mv-bin-fill .5s ease both}
 .mv-motion .mv-outputs g.mv-outrow:nth-of-type(2){animation-delay:.12s}
 .mv-motion .mv-outputs g.mv-outrow:nth-of-type(3){animation-delay:.24s}
 .mv-motion .mv-outputs g.mv-outrow:nth-of-type(4){animation-delay:.36s}
 .mv-motion .mv-scrolly.is-live.is-onscreen .mv-diagram[data-active="outputs"] .mv-belt-run{animation:mv-belt-run 9s linear infinite}
 /* Une piece dans chaque pince, et pas la meme d un poste a l autre : un bras qui monte
    et descend les mains vides ne dit pas ce qu il fait. */
 .mv-motion .mv-scrolly.is-live .mv-diagram .mv-heldpiece{opacity:0;transition:opacity .35s ease}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="robot"] .mv-heldpiece,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="bins"] .mv-heldpiece,
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="outputs"] .mv-heldpiece{opacity:1}

 /* La bande tourne aussi sous les capteurs : une mesure au passage, ce n est une mesure au
    passage que si quelque chose passe. */
 .mv-motion .mv-scrolly.is-live.is-onscreen .mv-diagram[data-active="sensing"] .mv-belt-run{animation:mv-belt-run 9s linear infinite}

 /* Le modele a sa place sur le schema : la couleur ne tombe pas du ciel sur les pieces,
    elle descend de la. Le trait qui l en relie a la bande coule pendant toute l etape. */
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-ai{opacity:1;color:var(--mv-green-ui)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-reached~="classified"] .mv-ailink{opacity:1;color:var(--mv-green-ui)}
 .mv-motion .mv-scrolly.is-live .mv-diagram[data-active="classified"] .mv-ailink{animation:mv-ai-flow 1s linear infinite}
 @keyframes mv-ai-flow{from{stroke-dashoffset:28}to{stroke-dashoffset:0}}
}

/* Silhouettes des cartes produits. Une silhouette immobile se regarde une fois ; une
   machine qui tourne se regarde deux fois, et c est tout ce qu on demande a une carte.
   Un echantillon traverse la bande, les bras se detendent au moment ou il passe devant
   eux, et la course vient du dessin : elle est publiee en variable par la miniature. */
@media(prefers-reduced-motion:no-preference){
 .mv-motion .mv-mini svg{color:var(--mv-ink)}
 /* Les pieces sont posees a pas constant et la bande ne se translate que d un pas : a l oeil
    c est un defilement continu, et la boucle ne se voit pas puisque le dessin d arrivee est
    celui du depart. Le pas vient du schema, pas d ici. */
 .mv-motion .mv-mini .mv-mini-belt{color:var(--mv-green-ui);animation:mv-mini-run .55s linear infinite}
 @keyframes mv-mini-run{from{transform:translateX(0)}to{transform:translateX(calc(var(--mv-run,0) * 1px))}}
 .mv-motion .mv-mini .mv-robot{transform-box:fill-box;transform-origin:top center;animation:mv-mini-reach 4.5s ease-in-out infinite}
 @keyframes mv-mini-reach{0%,100%{transform:scaleY(1)}42%,50%{transform:scaleY(1.11)}62%{transform:scaleY(1)}}
 .mv-motion .mv-mini .mv-robot[data-i="1"]{animation-delay:.25s}
 .mv-motion .mv-mini .mv-robot[data-i="2"]{animation-delay:.5s}
 .mv-motion .mv-mini .mv-robot[data-i="3"]{animation-delay:.75s}
 .mv-motion .mv-mini .mv-robot[data-i="4"]{animation-delay:1s}
 .mv-motion .mv-mini .mv-robot[data-i="5"]{animation-delay:1.25s}
 .mv-motion .mv-mini .mv-robot[data-i="6"]{animation-delay:1.5s}
 .mv-motion .mv-mini .mv-robot[data-i="7"]{animation-delay:1.75s}
 .mv-motion .mv-mini .mv-robot[data-i="8"]{animation-delay:2s}
 .mv-motion .mv-mini .mv-robot[data-i="9"]{animation-delay:2.25s}
 .mv-motion .mv-mini .mv-robot[data-i="10"]{animation-delay:2.5s}
 .mv-motion .mv-mini .mv-robot[data-i="11"]{animation-delay:2.75s}
}

/* Case de partenaire sans logo. Elle occupe la meme place qu un logo et se lit comme un
   nom, le temps que l image arrive. */
.mv-partner-logo.mv-partner-name{font-family:var(--mv-mono);font-size:15px;letter-spacing:.04em;
  text-transform:uppercase;text-align:center;color:var(--mv-ink);line-height:1.5}

/* Avant, apres : un flux se separe (mv-split.php).
   Sans classe d etat, la scene est dans son etat final : c est ce qu on voit sans script et
   quand le visiteur a demande moins de mouvement. Le script pose `is-ready` et retire
   `is-sorted` pour revenir au tas melange, puis remet `is-sorted` pour jouer la separation.
   Le retour au melange est instantane : seul l aller est une animation. */
.mv-split{margin:38px 0 0;padding:0}
.mv-split-stage{position:relative;width:100%;max-width:980px;margin:0 auto}
.mv-split svg{display:block;width:100%;height:100%;overflow:visible}
.mv-split .sol{display:none}
.mv-split .p{fill:var(--c);transform:translate(var(--sx),var(--sy));transition:transform 1.5s cubic-bezier(.22,.8,.24,1);transition-delay:calc(var(--i) * 7ms)}
.mv-split.is-ready:not(.is-sorted) .p{transform:translate(var(--mx),var(--my));transition:none}
.mv-split-label{position:absolute;transform:translateX(-50%);font-family:var(--mv-mono);font-size:clamp(9px,1.25vw,12px);line-height:1.25;letter-spacing:.04em;text-transform:uppercase;text-align:center;color:#33403b;max-width:30%;opacity:1;transition:opacity .6s ease 1.7s}
.mv-split.is-ready:not(.is-sorted) .mv-split-label{opacity:0;transition:none}
.mv-green .mv-split-label{color:#fff}
.mv-split-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:22px auto 0;max-width:980px;font-size:13px;color:#5d6b65}
.mv-split-etat{font-family:var(--mv-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mv-green-ui)}
.mv-split-avant{display:none}
.mv-split.is-ready:not(.is-sorted) .mv-split-avant{display:inline}
.mv-split.is-ready:not(.is-sorted) .mv-split-apres{display:none}
.mv-split-replay{font:inherit;font-family:var(--mv-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 3px;color:#33403b;cursor:pointer}
.mv-split-replay:hover{color:var(--mv-green-ui)}
.mv-split-note{flex-basis:100%;font-size:13px}
/* Sense : les pieces ne bougent pas, elles prennent leur couleur ; des cadres et un rapport arrivent. */
.mv-split--sense .p{transition:fill .5s ease;transition-delay:calc(var(--i) * 11ms)}
.mv-split--sense.is-ready:not(.is-sorted) .p{fill:#a9b2af;transition:none}
.mv-split--sense .cadre{fill:none;stroke:var(--mv-green-ui);stroke-width:1.4;opacity:1;transition:opacity .35s ease;transition-delay:calc(var(--i) * 11ms + .2s)}
.mv-split--sense.is-ready:not(.is-sorted) .cadre{opacity:0;transition:none}
.mv-split--sense .fiche{fill:#fff;stroke:#b8c5bf;stroke-width:1}
.mv-split--sense .rapport{opacity:1;transition:opacity .6s ease 1.1s}
.mv-split--sense.is-ready:not(.is-sorted) .rapport{opacity:0;transition:none}
.mv-split--sense .barre{transform-box:fill-box;transform-origin:left center;transform:scaleX(1);transition:transform .9s cubic-bezier(.22,.8,.24,1);transition-delay:calc(var(--i) * 120ms + 1.3s)}
.mv-split--sense.is-ready:not(.is-sorted) .barre{transform:scaleX(0);transition:none}
.mv-split-label--barre,.mv-split-label--titre{transform:none;text-align:left;max-width:30%}
.mv-split-label--titre{font-size:clamp(10px,1.4vw,13px);color:#18201d}
@media(max-width:700px){.mv-split-label{font-size:8.5px;letter-spacing:0;max-width:24%}.mv-split-note{font-size:12px}}
@media(prefers-reduced-motion:reduce){.mv-split .p,.mv-split .cadre,.mv-split .rapport,.mv-split .barre,.mv-split-label{transition:none}}

/* Le flux dans son tableau (mv_flow_*). Meme logique d etats que mv-split : sans classe,
   l etat final ; `is-ready` sans `is-sorted`, le tas melange. Les categories quittent le tas
   du haut l une apres l autre (--k) pendant que le tas de leur ligne se remplit. */
.mv-flow{margin:34px 0 0}
.mv-flow-source{margin:0 0 8px;padding:0}
.mv-flow-source svg{display:block;width:100%;max-width:620px;height:auto;margin:0 auto;overflow:visible}
.mv-flow-source .mv-split-bar{margin-top:14px;max-width:none}
.mv-flow.is-ready:not(.is-sorted) .mv-split-avant{display:inline}
.mv-flow.is-ready:not(.is-sorted) .mv-split-apres{display:none}
.mv-flow-pile{display:block;width:100%;max-width:170px}
.mv-flow-pile svg{display:block;width:100%;height:auto;overflow:visible}
.mv-flow-head >.wp-block-group__inner-container,.mv-flow-row >.wp-block-group__inner-container{display:grid;grid-template-columns:170px 1.15fr 1.6fr 1.1fr .7fr;gap:10px 28px;align-items:center}
.mv-flow-c3 .mv-flow-head >.wp-block-group__inner-container,.mv-flow-c3 .mv-flow-row >.wp-block-group__inner-container{grid-template-columns:170px 1.15fr 1.9fr .9fr}
.mv-flow-head{margin-top:26px;padding:0 0 12px;border-bottom:1px solid #18201d}
.mv-flow-head p{margin:0;font-family:var(--mv-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#33403b}
.mv-flow-head p:first-child{grid-column:2}
.mv-flow-row{padding:16px 0;border-bottom:1px solid #b8c5bf}
.mv-site .mv-flow-row h3{font-size:19px;line-height:1.25;margin:0}
.mv-site .mv-flow-row p{font-size:15px;line-height:1.5;margin:0;max-width:none}
@media(max-width:900px){
 .mv-flow-head{display:none}
 .mv-flow-row >.wp-block-group__inner-container,.mv-flow-c3 .mv-flow-row >.wp-block-group__inner-container{grid-template-columns:96px 1fr;gap:6px 18px;align-items:start}
 .mv-flow-row .mv-flow-pile{grid-row:1 / span 5;align-self:center}
 .mv-flow-row >.wp-block-group__inner-container >*:not(.mv-flow-pile){grid-column:2}
}
@media(prefers-reduced-motion:reduce){.mv-flow .p{transition:none}}
.mv-flow-pile{margin:0}
/* Le tas melange a droite du paragraphe d introduction, sa legende dessous. */
.mv-flow-top >.wp-block-group__inner-container{display:grid;grid-template-columns:1.25fr 1fr;gap:20px 56px;align-items:center}
.mv-flow-top .mv-flow-source{margin:0}
.mv-flow-top .mv-flow-source svg{max-width:360px}
.mv-flow-top .mv-split-bar{justify-content:center;text-align:center}
.mv-flow-top .mv-split-note{text-align:center}
.mv-section .mv-flow{margin-top:0}
@media(max-width:900px){.mv-flow-top >.wp-block-group__inner-container{grid-template-columns:1fr}}
/* Les pieces volent du tas a leur ligne (matvision.js mesure l ecart et le pose dans --fx, --fy).
   Le tas du haut ne sert que de repere : ce sont les pieces des lignes qui le dessinent. */
.mv-flow .p{transition:transform 1.05s cubic-bezier(.5,.05,.2,1)}
.mv-flow-source .p{opacity:.14}
.mv-flow.is-ready .mv-flow-source .p{opacity:0}
.mv-flow.is-ready.is-sorted .mv-flow-source .p{opacity:.1;transition:opacity .9s ease 3s}
.mv-flow-pile .p{transform:translate(0,0);transition-delay:calc(var(--k) * 380ms + var(--i) * 16ms)}
.mv-flow.is-ready:not(.is-sorted) .mv-flow-pile .p{transform:translate(var(--fx,0px),var(--fy,0px));transition:none}
.mv-flow.is-measuring .p{transition:none!important}
.mv-flow-row{position:relative}
/* Tableaux alleges des pages de cas (revue du 20/09). */
@media(min-width:901px){
 .mv-flow-c3 .mv-flow-head >.wp-block-group__inner-container,.mv-flow-c3 .mv-flow-row >.wp-block-group__inner-container{grid-template-columns:170px 1.1fr 1.5fr 1.5fr}
 .mv-flow-c2 .mv-flow-head >.wp-block-group__inner-container,.mv-flow-c2 .mv-flow-row >.wp-block-group__inner-container{grid-template-columns:170px 1fr 2fr}
}
/* Rapport de lot de Sense : un en-tete (lot, date, masse, granulometrie, qualite) au-dessus des barres. */
.mv-split--sense .filet{stroke:#b8c5bf;stroke-width:1}
.mv-split-label--meta,.mv-split-label--val{transform:none;text-align:left;max-width:16%;white-space:nowrap}
.mv-split-label--meta{color:#6f7b77}
.mv-split-label--val{color:#18201d;text-transform:none;letter-spacing:0;font-family:inherit;font-size:clamp(9px,1.3vw,13px)}