/* ===== mk-heroshot.css - hero-render crossfade carousel (v119) =============
   The /reparation hero has shipped a crossfade stack since v59 (.rs-stack /
   .rs-slide / .rs-dots, driven by the #repHero block in mk-hero.js). This file
   generalises exactly that component so /transfert-dargent and
   /service-dimpression can carry one too, and adds NOTHING new to the visual
   language - same 0.85s opacity+scale dissolve, same dot rail.

   WHY A NEW FILE rather than more rules in mk-mobile.css or mk-svc.css:
     * mk-svc.css is loaded by transfert.html but NOT by impression.html, and
       it carries live .pg-impression rules that have never been active on that
       page. Adding the <link> there would switch them all on at once - a
       regression with no relation to this change.
     * mk-mobile.css is 290 KB and its media contexts are hard to reason about
       statically (the v118 note: a brace-counting scan mis-reported them).
   A small file that both pages load, appended last, avoids both problems.

   SPECIFICITY IS DELIBERATE THROUGHOUT. The single-image rules these slides
   replace are all `!important` at (0,3,1):
       .pg-transfert  .hero .tr-shot  img {max-height:360px!important;...}
       .pg-impression .hero .imp-shot img {max-height:330px!important;...}
   so every override here is written at (0,4,0) - four classes, no element -
   which outranks them on class count and therefore wins outright rather than
   depending on load order. This is the v102/v112 lesson applied up front.  */

/* ---------------------------------------------------------------- engine -- */
.rs-shot{position:relative}

/* The slides are absolutely stacked, so the stack needs a definite height -
   the rules being replaced sized a single render with max-height instead.
   Height is set per page below, because the two heroes are different shapes. */
.rs-shot .rs-stack{position:relative;z-index:1;width:100%}

/* `transform` carries !important for one specific reason: mk-svc.css ends with
   `.pg-transfert .hero .tr-shot img{transform:translateX(-9%)}` at (0,3,1),
   which outranks this rule's (0,2,0) and won on the first live measurement -
   the slides inherited the old off-centre nudge and never scaled. The v103
   declaration carries no !important of its own, so one here settles it at any
   specificity, on this page and on any page that adopts the component later. */
.rs-shot .rs-slide{
  position:absolute;inset:0;
  object-fit:contain;object-position:center center;
  opacity:0;transform:scale(.985)!important;
  transition:opacity .85s cubic-bezier(.4,0,.2,1),transform .85s cubic-bezier(.4,0,.2,1)}
.rs-shot .rs-slide.on{opacity:1;transform:scale(1)!important}

/* Dot rail, in the same language as every other carousel on the site. Scoped
   to .rs-shot: /reparation's own dots are styled at .pg-reparation .rep-shot
   .rs-dots and are not touched by anything in this file. */
.rs-shot .rs-dots{
  position:relative;z-index:3;display:flex;justify-content:center;gap:7px;margin-top:14px}
.rs-shot .rs-dots button{
  position:relative;width:22px;height:14px;padding:0;border:0;background:none;cursor:pointer}
.rs-shot .rs-dots button::after{
  content:"";position:absolute;left:0;top:5px;width:22px;height:4px;border-radius:4px;
  background:rgba(255,255,255,.22);
  transform:scaleX(.5);transform-origin:left center;
  transition:transform .4s cubic-bezier(.4,0,.2,1),background .4s}
.rs-shot .rs-dots button.on::after{transform:scaleX(1)}

/* No auto-rotation under reduced-motion (mk-hero.js already stops the timer);
   make the manual crossfade instant too rather than a long dissolve. */
@media (prefers-reduced-motion:reduce){
  .rs-shot .rs-slide{transition:none!important;transform:none!important}
}

/* ------------------------------------------------- /transfert-dargent ----- */
/* Sizing mirrors what the single render resolved to: the box is max-width:560px
   with a 360px-tall render (mk-svc.css), so the stack simply takes that height
   and the slides fill it. */
.pg-transfert .hero .tr-shot .rs-slide{
  width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.38))}
/* MEASURED, not assumed: the first live pass rendered this box 80px wide.
   mk-svc.css v103 pins `.tr-shot{width:auto!important}` - correct when the box
   held a single <img> whose intrinsic width sized the grid track, but a
   percentage-width .rs-stack gives an auto-width grid nothing to resolve
   against, so the track collapses to min-content. /impression needed no such
   fix: its .imp-shot inherits width:100% from the .hgrid>* rule and never had
   an explicit width:auto.
   `body.pg-transfert` (0,3,1) rather than `.pg-transfert` (0,3,0) so this
   out-specifies the v103 !important outright instead of relying on load order
   - the v102/v112 lesson. max-width:560px still caps it. */
body.pg-transfert .hero .tr-shot{width:100%!important}
.pg-transfert .hero .tr-shot .rs-stack{height:360px}
.pg-transfert .hero .tr-shot .rs-dots button.on::after{
  background:linear-gradient(90deg,#19d67a,#13BE6D)}

/* RETIRES the v103 off-centre correction, which is what its own source note
   asked for: "REPLACE THIS RULE - do not stack a second offset on top of it -
   if the PNG is ever re-cut with the subject centred."
   All three slides are re-cut onto one 1200x760 canvas with the subject
   centred, so translateX(-9%) is now a 9% error rather than a fix. It has to
   go for a second reason as well: `transform` is a single property, and leaving
   it live would fight the scale() the crossfade animates. The glow is moved
   back in step with the artwork, exactly as the v103 note intended. */
.pg-transfert .hero .tr-shot .rep-glow{transform:none}

@media (max-width:840px){
  .pg-transfert .hero .tr-shot .rs-stack{height:240px}
}

/* ------------------------------------------------ /paiement-de-facture --- */
/* v132 - this page had NO carousel at all: its hero was a single <img> of
   hero-facture.jpg, a 3D illustration sitting on FLAT BLACK that only read as
   cut out because the hero behind it is nearly black. It is the same shape as
   /transfert-dargent - a 560px box with a 360px render - so it takes the same
   numbers, and all three slides were re-canvassed onto that page's 1200x760
   so nothing jumps between frames.

   `width:100%` on the shot is NOT redundant, and this is the v119 lesson
   arriving a second time: the box is display:grid with an auto-width track,
   which sized fine off the intrinsic width of a single <img> but gives a
   percentage-width .rs-stack nothing to resolve against, so the track collapses
   to min-content. `body.pg-facture` (0,3,1) to out-specify mk-svc.css's own
   !important outright rather than relying on load order. */
.pg-facture .hero .fac-shot .rs-slide{
  width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.38))}
body.pg-facture .hero .fac-shot{width:100%!important}
.pg-facture .hero .fac-shot .rs-stack{height:360px}
/* amber, matching this page's own --heroGlow and its .kick */
.pg-facture .hero .fac-shot .rs-dots button.on::after{
  background:linear-gradient(90deg,#F7A12B,#F2890E)}

@media (max-width:840px){
  .pg-facture .hero .fac-shot .rs-stack{height:240px}
}

/* ------------------------------------------------ /service-dimpression ---- */
/* The print renders are WIDE (a machine, not a portrait device), so this hero
   is the 820px box with a 330px render rather than transfert's 560/360. */
.pg-impression .hero .imp-shot .rs-slide{
  width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;
  filter:drop-shadow(0 24px 32px rgba(0,0,0,.5)) drop-shadow(0 6px 14px rgba(0,0,0,.34))}
.pg-impression .hero .imp-shot .rs-stack{height:330px}
.pg-impression .hero .imp-shot .rs-dots button.on::after{
  background:linear-gradient(90deg,#6f97ff,#4A7DFF)}

@media (max-width:840px){
  /* .imp-shot is width:min(94vw,420px) with a 200px render down here */
  .pg-impression .hero .imp-shot .rs-stack{height:200px}
}


/* ===========================================================================
   v129 - THE "SIGNATURE" MOTION TREATMENT
   ---------------------------------------------------------------------------
   Chosen by the user from the seven-way lab at effets-impression.html. Three
   gestures, deliberately staggered so no two peak together:

     1. the artwork BREATHES        - 8s, on .rs-stack
     2. each frame ARRIVES          - per-slide, on the .on class change
     3. a specular reflection SWEEPS - 6.5s, masked to the machine itself

   OPT-IN VIA `data-rs-fx="signature"` ON THE SHOT, not via a page class. The
   .rs-shot component is shared with /transfert-dargent (and the file is loaded
   by both), so a `.pg-impression` scope would have been enough today but would
   need rewriting the moment a second page wants the same motion. An attribute
   hook means adopting it later is one word of markup.

   ---------------------------------------------------------------------------
   ⚠️ WHY THE BREATHE IS ON .rs-stack AND NOT ON THE SLIDE
   ---------------------------------------------------------------------------
   The obvious implementation - `animation` on `.rs-slide.on` - CANNOT WORK
   here, and it fails silently. The engine above pins

       .rs-shot .rs-slide.on{transform:scale(1)!important}

   and in the CSS cascade an ANIMATION sits above normal declarations but BELOW
   `!important` ones. So the keyframes' transform would simply never apply, with
   no error and no warning. Only a more specific !important declaration can beat
   it - which is what the entrance rules below do - but you cannot put
   !important inside @keyframes.

   .rs-stack carries no transform at all, so animating it is unobstructed, and
   with exactly one slide visible at a time the result is identical: the
   artwork floats. The lab prototype animated the slide because its mock-up had
   no !important pin; this is the same motion, correctly located.

   ---------------------------------------------------------------------------
   ⚠️ THE SWEEP IS MASKED BY THE ACTIVE FRAME'S OWN ALPHA
   ---------------------------------------------------------------------------
   `mask-image:var(--m)`, and mk-hero.js rewrites --m on every frame change to
   the URL of the slide that just became active. That is what makes the
   highlight ride the silhouette of the Mimaki, or the camera, instead of
   washing a diagonal band across a rectangle. IF --m IS NOT UPDATED PER FRAME
   the light keeps frame 1's shape for the whole cycle - which reads as a bug
   rather than as an effect, because the reflection stops matching the object.

   The mask geometry (contain / center / no-repeat) must stay in step with the
   slides' `object-fit:contain;object-position:center`, and .rs-fx is a sibling
   inside .rs-stack precisely so the two share one box with no maths.
   =========================================================================== */

/* 1 - the artwork breathes, and the halo breathes with it on the same clock */
[data-rs-fx="signature"] .rs-stack{--rsLift:-11px;animation:rsBreathe 8s ease-in-out infinite}
@keyframes rsBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--rsLift,-11px))}}

[data-rs-fx="signature"] .rep-glow{animation:rsHalo 8s ease-in-out infinite}
@keyframes rsHalo{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* 2 - each frame rises into place instead of merely appearing.
   !important at (0,4,0): it has to outrank the engine's own
   `.rs-shot .rs-slide{transform:...!important}` at (0,3,0). Same specificity
   discipline this file opens with - win on count, never on load order. */
[data-rs-fx="signature"] .rs-stack .rs-slide{
  transform:translateY(18px) scale(.968)!important;
  transition:opacity .55s cubic-bezier(.4,0,.2,1),
             transform .95s cubic-bezier(.16,1,.3,1)}
[data-rs-fx="signature"] .rs-stack .rs-slide.on{transform:none!important}

/* 3 - the specular sweep. Delayed 1.2s so it fires AFTER the entrance has
   settled rather than during it; 6.5s so it stays an accent, not a strobe. */
[data-rs-fx="signature"] .rs-fx{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(108deg,transparent 43%,rgba(255,255,255,.5) 50%,transparent 57%);
  background-size:260% 100%;background-repeat:no-repeat;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  animation:rsSweep 6.5s cubic-bezier(.5,0,.2,1) infinite 1.2s}
@keyframes rsSweep{0%{background-position:170% 0}55%,100%{background-position:-70% 0}}

/* Before mk-hero.js has set --m there is no mask, and an unmasked sweep would
   flash a diagonal band across the whole hero box on first paint. Hide it
   until the driver has named a frame. */
[data-rs-fx="signature"]:not([data-rs-init]) .rs-fx{opacity:0}

/* Reduced motion: every gesture off, including the sweep. The engine already
   stops the timer, so the hero settles to a clean static frame 1. */
@media (prefers-reduced-motion:reduce){
  [data-rs-fx="signature"] .rs-stack,
  [data-rs-fx="signature"] .rep-glow,
  [data-rs-fx="signature"] .rs-fx{animation:none!important;transform:none!important}
  [data-rs-fx="signature"] .rs-fx{opacity:0}
  [data-rs-fx="signature"] .rs-stack .rs-slide,
  [data-rs-fx="signature"] .rs-stack .rs-slide.on{
    transform:none!important;transition:opacity .2s linear!important}
}

/* Phone: the hero box is 200px tall down here, so the float is scaled back to
   stay a suggestion rather than a lurch, and the sweep is left as is.
   The distance is a CUSTOM PROPERTY read from inside the keyframe rather than a
   second @keyframes block of the same name inside the media query - redefining
   a named keyframe per breakpoint works, but which definition wins is a rule
   nobody should have to remember when reading this file. */
@media (max-width:840px){
  [data-rs-fx="signature"] .rs-stack{--rsLift:-7px}
}


/* ===== v134 - /transfert-dargent Signature per-slide accents ==============
   Base Signature (breathe + entrance + masked sweep) is the shared
   [data-rs-fx="signature"] engine above. These three accents are transfert-
   only, scoped to .tr-shot, and each is gated to ONE slide by a following-
   sibling selector on that slide's own src - so mk-hero.js needs no change:
   the engine already toggles .on, which is the whole trigger. */
.tr-shot .tr-orbit,.tr-shot .tr-pulse,.tr-shot .tr-rings{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.tr-shot .tr-orbit{z-index:3}
.tr-shot .tr-pulse,.tr-shot .tr-rings{z-index:2;display:grid;place-items:center}
.pg-transfert .hero .tr-shot .tr-orbit .tr-coin{position:absolute;left:50%;top:50%;width:10%!important;height:auto!important;max-height:none!important;aspect-ratio:1;
  margin:-5% 0 0 -5%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));
  will-change:transform,opacity;animation:trCoinFlux 6.5s linear infinite var(--d,0s)}
@keyframes trCoinFlux{0%{transform:translate(-360%,240%) rotate(-8deg) scale(.55);opacity:0}
  12%{opacity:1}50%{transform:translate(0,0) rotate(4deg) scale(1)}88%{opacity:1}
  100%{transform:translate(360%,-240%) rotate(12deg) scale(1.15);opacity:0}}
.tr-shot .tr-pulse span{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(19,190,109,.75);box-shadow:0 0 22px rgba(19,190,109,.5);
  animation:trRing 3.4s ease-out infinite var(--d,0s)}
@keyframes trRing{0%{transform:scale(.28);opacity:0}18%{opacity:.9}100%{transform:scale(1.5);opacity:0}}
.tr-shot .tr-rings span{position:absolute;width:26%;aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(245,130,31,.7);animation:trRing 2.6s ease-out infinite var(--d,0s)}
.tr-shot .tr-rings span:nth-child(2){border-color:rgba(19,190,109,.6)}
[data-rs-fx="signature"] .rs-slide.on[src*="globeb"] ~ .tr-orbit{opacity:1}
[data-rs-fx="signature"] .rs-slide.on[src*="lock2b"] ~ .tr-pulse{opacity:1}
[data-rs-fx="signature"] .rs-slide.on[src*="headsetb"] ~ .tr-rings{opacity:1}
@media (prefers-reduced-motion:reduce){
  .tr-shot .tr-orbit,.tr-shot .tr-pulse,.tr-shot .tr-rings{display:none!important}
}

/* ===== v136 - /paiement-de-facture Signature per-slide accents ============
   A parallel of the transfert v134 block, scoped to .fac-shot / .pg-facture,
   reusing the trCoinFlux + trRing keyframes above. The lock2b -> .tr-pulse and
   headsetb -> .tr-rings gates are NOT page-scoped, so they already fire on this
   page's reused lock/headset slides; only the coin -> .tr-orbit gate is new.
   The .tr-coin sizing must beat mk-svc.css `.pg-facture .hero .fac-shot img
   {max-height:360px!important;width:auto!important}` - (0,5,0)+!important does. */
.fac-shot .tr-orbit,.fac-shot .tr-pulse,.fac-shot .tr-rings{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .55s cubic-bezier(.4,0,.2,1)}
.fac-shot .tr-orbit{z-index:3}
.fac-shot .tr-pulse,.fac-shot .tr-rings{z-index:2;display:grid;place-items:center}
.pg-facture .hero .fac-shot .tr-orbit .tr-coin{position:absolute;left:50%;top:50%;width:10%!important;height:auto!important;max-height:none!important;aspect-ratio:1;
  margin:-5% 0 0 -5%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));
  will-change:transform,opacity;animation:trCoinFlux 6.5s linear infinite var(--d,0s)}
.fac-shot .tr-pulse span{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(19,190,109,.75);box-shadow:0 0 22px rgba(19,190,109,.5);
  animation:trRing 3.4s ease-out infinite var(--d,0s)}
.fac-shot .tr-rings span{position:absolute;width:26%;aspect-ratio:1;border-radius:50%;
  border:2px solid rgba(245,130,31,.7);animation:trRing 2.6s ease-out infinite var(--d,0s)}
.fac-shot .tr-rings span:nth-child(2){border-color:rgba(19,190,109,.6)}
[data-rs-fx="signature"] .rs-slide.on[src*="facture-coin"] ~ .tr-orbit{opacity:1}
@media (prefers-reduced-motion:reduce){
  .fac-shot .tr-orbit,.fac-shot .tr-pulse,.fac-shot .tr-rings{display:none!important}
}

/* ===== v136 - /photocopie-documents wears /service-dimpression's hero =====
   The page keeps its pg-imppro dark treatment everywhere ELSE; only the hero
   shot is swapped from the .mch-shot 4:5 card to /impression's wide .imp-shot
   rs-shot signature carousel + glass badges. These rules are a SELF-CONTAINED
   mirror of the .pg-impression hero rules in mk-mobile.css, scoped to
   .pg-photocopie so no other imp-* page and none of this page's own sections
   are touched. The shot markup drops the `rep-shot` class so the
   `body:not(.pg-reparation) .rep-shot{display:none!important}` guard never
   matches it; the badges keep `rep-badges`, so they are un-hidden here (a
   (0,3,0) selector out-specifies the (0,2,1) guard). The page already loads
   mk-hero.js, which drives every .rs-shot. */
.pg-photocopie .hero .imp-shot{display:grid!important;place-items:center!important;
  max-width:560px!important;margin:34px auto 0!important;width:100%}
.pg-photocopie .hero .rep-badges{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  max-width:560px!important;margin:30px auto 0!important;padding:18px 8px!important}
.pg-photocopie .hero .imp-shot .rs-slide{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  filter:drop-shadow(0 24px 32px rgba(0,0,0,.5)) drop-shadow(0 6px 14px rgba(0,0,0,.34))}
.pg-photocopie .hero .imp-shot .rs-stack{height:330px}
.pg-photocopie .hero .imp-shot .rs-dots button.on::after{
  background:linear-gradient(90deg,#19d67a,#13BE6D)}
@media (max-width:840px){
  .pg-photocopie .hero .imp-shot .rs-stack{height:200px}
}

/* ===== v138 - /transfert-dargent slide 1: animated ARROW over the COINS =====
   Slide 1 is now the coins base (hero-transfert-coins.webp); the Ivorian-marble
   growth arrow is a SEPARATE registered layer (hero-transfert-arrow.webp) laid
   over it and animated for a first-load wow: on load it draws/grows up out of
   the stacks (scale from its tail with a spring overshoot), then a gold gleam
   runs up it and the whole group parallax-floats. Gated to the coins slide by
   the same following-sibling trick as the other transfert accents; the entrance
   `both`-fill animation plays once on load (slide 1 is `.on` by default). */
.tr-shot .tr-growth{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  transition:opacity .6s cubic-bezier(.4,0,.2,1);
  animation:trGrowthFloat 5.4s ease-in-out infinite}
@keyframes trGrowthFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
[data-rs-fx="signature"] .rs-slide.on[src*="transfert-coins"] ~ .tr-growth{opacity:1}
.tr-shot .tr-arrow{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;transform-origin:18% 58%;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));
  animation:trArrowDraw 1.4s cubic-bezier(.34,1.42,.5,1) both}
@keyframes trArrowDraw{0%{opacity:0;transform:scale(.32) rotate(-7deg)}
  55%{opacity:1}100%{opacity:1;transform:scale(1) rotate(0)}}
.tr-shot .tr-arrow-shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(116deg,transparent 42%,rgba(255,242,198,.72) 50%,transparent 58%);
  background-size:230% 100%;background-repeat:no-repeat;
  -webkit-mask:url("/wp-content/uploads/mascot-hero/cut/hero-transfert-arrow4.webp") center/contain no-repeat;
  mask:url("/wp-content/uploads/mascot-hero/cut/hero-transfert-arrow4.webp") center/contain no-repeat;
  animation:trArrowShine 4.8s cubic-bezier(.5,0,.2,1) infinite 1.5s}
@keyframes trArrowShine{0%{background-position:175% 0}55%,100%{background-position:-65% 0}}
@media (prefers-reduced-motion:reduce){
  .tr-shot .tr-growth,.tr-shot .tr-arrow,.tr-shot .tr-arrow-shine{animation:none!important;transform:none!important}
  .tr-shot .tr-arrow{opacity:1}.tr-shot .tr-arrow-shine{opacity:0}
}

/* ===== v146 - /paiement-de-facture: animated growth ARROW over COINS on the
   final slide. Mirrors the transfert v138 .tr-shot block, scoped to .fac-shot;
   reuses the global trGrowthFloat / trArrowDraw / trArrowShine keyframes and the
   global [src*="transfert-coins"] ~ .tr-growth opacity gate. */
.fac-shot .tr-growth{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  transition:opacity .6s cubic-bezier(.4,0,.2,1);animation:trGrowthFloat 5.4s ease-in-out infinite}
.fac-shot .tr-arrow{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  transform-origin:18% 58%;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));
  animation:trArrowDraw 1.4s cubic-bezier(.34,1.42,.5,1) both}
.fac-shot .tr-arrow-shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(116deg,transparent 42%,rgba(255,242,198,.72) 50%,transparent 58%);
  background-size:230% 100%;background-repeat:no-repeat;
  -webkit-mask:url("/wp-content/uploads/mascot-hero/cut/hero-transfert-arrow4.webp") center/contain no-repeat;
  mask:url("/wp-content/uploads/mascot-hero/cut/hero-transfert-arrow4.webp") center/contain no-repeat;
  animation:trArrowShine 4.8s cubic-bezier(.5,0,.2,1) infinite 1.5s}
@media (prefers-reduced-motion:reduce){
  .fac-shot .tr-growth,.fac-shot .tr-arrow,.fac-shot .tr-arrow-shine{animation:none!important;transform:none!important}
  .fac-shot .tr-arrow{opacity:1}.fac-shot .tr-arrow-shine{opacity:0}
}