/* Schémas animés « Comment ça agit » : une coupe de peau, trois temps, 12 s */
.meca{margin:1.8rem 0 0}
.meca svg{display:block;width:100%;height:auto;border:1px solid var(--line);font-family:var(--sans)}
.meca .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin:1rem 0 0;padding:0;list-style:none;counter-reset:s}
.meca .steps li{padding-top:.7rem;border-top:1px solid var(--line);font-size:.92rem;line-height:1.5;color:var(--soft);animation:stp 12s linear infinite}
.meca .steps li::before{content:counter(s);counter-increment:s;display:block;margin-bottom:.4rem;font:500 .72rem/1 var(--sans);letter-spacing:.18em;color:var(--gold-ink)}
.meca .steps li:nth-child(2){animation-delay:4s}.meca .steps li:nth-child(3){animation-delay:8s}
@keyframes stp{0%,31%{color:var(--navy);border-top-color:var(--gold)}34%,100%{color:var(--soft);border-top-color:var(--line)}}
.meca [class*="a-"]{transform-box:fill-box;transform-origin:50% 50%}
.a-ph1{opacity:0;animation:ph1 12s linear infinite}
.a-ph2{opacity:0;animation:ph2 12s linear infinite}
.a-ph3{opacity:0;animation:ph3 12s linear infinite}
.a-gone2{animation:gone2 12s linear infinite}
.a-gone3{animation:gone3 12s linear infinite}
.a-lift2{animation:lift2 12s ease-in-out infinite}
.a-draw3{stroke-dasharray:1;stroke-dashoffset:1;animation:draw3 12s ease-in-out infinite}
.a-pop1{transform:scale(0);animation:pop1 12s ease-out infinite}
.a-grow2{opacity:0;animation:grow2 12s ease-out infinite}
.a-needle1{opacity:0;animation:needle1 12s ease-in-out infinite}
.a-needle2{opacity:0;animation:needle2 12s ease-in-out infinite}
.a-pulse2{opacity:0;animation:pulse2 12s ease-in-out infinite}
.a-shrink2{animation:shrink2 12s ease-in-out infinite}
.a-thick3{animation:thick3 12s ease-in-out infinite}
.a-travel2{opacity:0;animation:travel2 12s ease-in-out infinite}
.a-musc{animation:musc 12s ease-in-out infinite}
.a-fold{opacity:0;animation:fold 12s ease-in-out infinite}
.a-nerve{opacity:.9;animation:nerve 12s ease-in-out infinite}
@keyframes ph1{0%{opacity:0}8%,100%{opacity:1}}
@keyframes ph2{0%,33%{opacity:0}41%,100%{opacity:1}}
@keyframes ph3{0%,66%{opacity:0}74%,100%{opacity:1}}
@keyframes gone2{0%,33%{opacity:1}41%,100%{opacity:0}}
@keyframes gone3{0%,66%{opacity:1}74%,100%{opacity:0}}
@keyframes lift2{0%,33%{opacity:1;transform:none}46%,100%{opacity:0;transform:translateY(-16px)}}
@keyframes draw3{0%,66%{stroke-dashoffset:1;opacity:0}70%{opacity:1}92%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes pop1{0%{transform:scale(0)}10%,100%{transform:scale(1)}}
@keyframes grow2{0%,33%{opacity:0;transform:scale(1)}36%{opacity:.9}62%,100%{opacity:0;transform:scale(5)}}
@keyframes needle1{0%{opacity:1;transform:translateY(-50px)}7%{transform:translateY(0)}20%{opacity:1;transform:translateY(-50px)}26%,100%{opacity:0;transform:translateY(-50px)}}
@keyframes needle2{0%,33%{opacity:0;transform:translate(60px,-60px)}38%{opacity:1;transform:none}48%{opacity:1;transform:none}56%,100%{opacity:0;transform:translate(60px,-60px)}}
@keyframes pulse2{0%,33%{opacity:0}40%{opacity:1}47%{opacity:.4}54%{opacity:1}100%{opacity:1}}
@keyframes shrink2{0%,36%{opacity:1;transform:scale(1)}66%,100%{opacity:0;transform:scale(.25)}}
@keyframes thick3{0%,66%{stroke-width:1.5}92%,100%{stroke-width:4.5}}
@keyframes travel2{0%,33%{opacity:0;transform:none}38%{opacity:1}60%,100%{opacity:0;transform:translate(0,60px)}}
@keyframes musc{0%{transform:scaleX(1)}8%,66%{transform:scaleX(.82)}82%,100%{transform:scaleX(1)}}
@keyframes fold{0%{opacity:0}8%,66%{opacity:1}82%,100%{opacity:0}}
@keyframes nerve{0%,33%{opacity:.9}48%,100%{opacity:.15}}
.m-rides .a-musc{transform-box:view-box;transform-origin:300px 286px}
.m-hair .a-travel2{transform-box:view-box}
@media(max-width:40rem){.meca .steps{grid-template-columns:minmax(0,1fr);gap:.7rem}}
@media(prefers-reduced-motion:reduce){
.meca [class*="a-"],.meca .steps li{animation:none}
.a-ph1,.a-ph2,.a-ph3,.a-pulse2,.a-grow2,.a-needle1,.a-needle2,.a-travel2{opacity:1}
.a-pop1{transform:none}.a-draw3{stroke-dashoffset:0}
.meca .steps li{color:var(--navy)}
}