/* Services — animations internes des tuiles sur mobile (≤900px), déclenchées à l'arrivée à l'écran (aperçu local) */
@media (max-width:900px){
 html body #services .bento>.tile{position:relative;overflow:hidden;padding:20px 20px 22px!important}
 html body #services .bento>.tile>div{position:relative;z-index:1}
 html body #services .bento>.tile h3{margin-bottom:8px}
 html body #services .bento>.tile.t1{padding-bottom:46px!important}
 html body #services .bento>.tile.t1>.mock{display:block!important;position:absolute!important;z-index:0;right:-34px!important;bottom:-50px!important;left:auto!important;top:auto!important;width:54%!important;margin:0!important;transform:rotate(-4deg)!important;box-shadow:0 12px 26px rgba(13,57,36,.18);pointer-events:none}
 html body #services .t2 .chat,html body #services .t4 .mbars{margin-top:18px!important;margin-bottom:0!important}
 html body #services .t3 .cal{max-width:168px;margin-top:14px}
 html body #services .t4 .mbars{height:56px}
 html body #services .t4 .note{margin-top:12px!important}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
 .svm #services .mock i{position:relative;overflow:hidden}
 .svm #services .mock i::after{content:"";position:absolute;inset:0;background:#668961;border-radius:inherit;transform:scaleX(0);transform-origin:left}
 .svm #services .t1.play .mock i::after{animation:sv-fill .5s cubic-bezier(.4,0,.2,1) calc(var(--i,0)*.35s + .2s) forwards}
 @keyframes sv-fill{to{transform:scaleX(1)}}
 .svm #services .chat{position:relative}
 .svm #services .chat .u,.svm #services .chat .b{opacity:0;transform:translateY(8px) scale(.96)}
 .svm #services .t2.play .chat .u{animation:sv-pop .35s ease-out .2s forwards}
 .svm #services .t2.play .chat .b{animation:sv-pop .4s ease-out 1.9s forwards}
 .svm #services .chat .typ{display:inline-flex;position:absolute;left:0;bottom:0;gap:4px;padding:11px 13px;border-radius:14px;background:#EBE3D2;opacity:0}
 .svm #services .t2.play .chat .typ{animation:sv-typ 1.4s linear .6s forwards}
 .svm #services .chat .typ b{width:6px;height:6px;border-radius:50%;background:#668961;animation:sv-dot .9s ease-in-out infinite}
 .svm #services .chat .typ b:nth-child(2){animation-delay:.15s}.svm #services .chat .typ b:nth-child(3){animation-delay:.3s}
 @keyframes sv-pop{to{opacity:1;transform:none}}
 @keyframes sv-typ{0%{opacity:0}10%,85%{opacity:1}100%{opacity:0}}
 @keyframes sv-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
 .svm #services .cal i.on{position:relative}
 .svm #services .cal i.on::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#668961;opacity:0;transform:scale(.6)}
 .svm #services .t3.play .cal i.on::after{animation:sv-on .3s ease-out calc(var(--i,0)*.22s + .2s) forwards}
 @keyframes sv-on{to{opacity:1;transform:none}}
 .svm #services .mbars i{position:relative}
 .svm #services .mbars i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#668961;opacity:0}
 .svm #services .t4.play .mbars i::after{animation:sv-bar .4s steps(1,end) calc(var(--i,0)*.4s + .2s)}
 .svm #services .t4.play .mbars i.last::after{background:#0D3924;animation:sv-end .2s ease-out calc(var(--i,0)*.4s + .2s) forwards}
 @keyframes sv-bar{0%,100%{opacity:1}}
 @keyframes sv-end{to{opacity:1}}
 /* dark */
 html[data-theme=dark] .svm #services .mock i::after,html[data-theme=dark].svm #services .mock i::after,html[data-theme=dark].svm #services .cal i.on::after,html[data-theme=dark].svm #services .mbars i::after{background:#8DBF5A}
 html[data-theme=dark].svm #services .t4.play .mbars i.last::after{background:#CFE1C8}
 html[data-theme=dark].svm #services .chat .typ{background:#2A5A41;border:1px solid #3A6E52}
 html[data-theme=dark].svm #services .chat .typ b{background:#8DBF5A}
 html[data-theme=dark] body #services .t1 .mock{box-shadow:0 12px 26px rgba(0,0,0,.35)}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference) and (prefers-color-scheme:dark){
 html:not([data-theme=light]).svm #services .mock i::after,html:not([data-theme=light]).svm #services .cal i.on::after,html:not([data-theme=light]).svm #services .mbars i::after{background:#8DBF5A}
 html:not([data-theme=light]).svm #services .t4.play .mbars i.last::after{background:#CFE1C8}
 html:not([data-theme=light]).svm #services .chat .typ{background:#2A5A41;border:1px solid #3A6E52}
 html:not([data-theme=light]).svm #services .chat .typ b{background:#8DBF5A}
}
/* sv3 : les cases .on étaient déjà vertes (bento-vert) → l'animation ::after (même couleur) était invisible. On part d'une case neutre. */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
 html.svm body #services .t3 .cal i.on{background-color:rgba(13,57,36,.08)!important}
 html.svm body #services .t3 .cal i.on::after{z-index:1}
 html[data-theme=dark].svm body #services .t3 .cal i.on{background-color:rgba(245,239,227,.1)!important}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference) and (prefers-color-scheme:dark){
 html:not([data-theme=light]).svm body #services .t3 .cal i.on{background-color:rgba(245,239,227,.1)!important}
}