/* Services bento — inner illustration animations on hover only (desktop, fine pointer, motion OK). Static otherwise. */
.chat .typ{display:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
/* 1. Design web: lines fill green in sequence */
.sa-js #services .mock i{position:relative;overflow:hidden}
.sa-js #services .mock i::after{content:"";position:absolute;inset:0;background:#668961;border-radius:inherit;transform:scaleX(0);transform-origin:left}
.sa-js #services .t1:hover .mock i:first-child{background:rgba(13,57,36,.12)!important}
.sa-js #services .t1:hover .mock i::after{animation:sa-fill .5s cubic-bezier(.4,0,.2,1) calc(var(--i,0)*.35s + .1s) forwards}
@keyframes sa-fill{to{transform:scaleX(1)}}
/* 2. Agent IA: question, typing dots, reply */
.sa-js #services .t2:hover .chat .u{animation:sa-pop .35s ease-out .1s both}
.sa-js #services .t2:hover .chat .typ{display:inline-flex;gap:4px;align-self:flex-start;padding:11px 13px;border-radius:14px;background:#EBE3D2;animation:sa-typ 1.5s linear .5s both}
.sa-js #services .chat .typ b{width:6px;height:6px;border-radius:50%;background:#668961;animation:sa-dot .9s ease-in-out infinite}
.sa-js #services .chat .typ b:nth-child(2){animation-delay:.15s}.sa-js #services .chat .typ b:nth-child(3){animation-delay:.3s}
.sa-js #services .t2:hover .chat .b{animation:sa-pop2 1.8s ease-out .5s both}
@keyframes sa-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sa-typ{0%{opacity:0}10%,85%{opacity:1}100%{opacity:0;display:none}}
@keyframes sa-pop2{0%,72%{opacity:0;transform:translateY(8px) scale(.96);max-height:0;padding-block:0}73%{max-height:200px;padding-block:9px}100%{opacity:1;transform:none;max-height:200px;padding-block:9px}}
@keyframes sa-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
/* 3. Réservation: green squares appear one after another (rang3 colors are !important, so animate an overlay) */
.sa-js #services .cal i.on{position:relative}
.sa-js #services .cal i.on::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#668961;opacity:0}
.sa-js #services .t3:hover .cal i.on{background:rgba(13,57,36,.08)!important}
.sa-js #services .t3:hover .cal i.on::after{animation:sa-on .3s ease-out calc(var(--i,0)*.22s + .1s) forwards}
@keyframes sa-on{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* 4. Marketing: one bar lit at a time (sage), last stays (forest) */
.sa-js #services .mbars i{position:relative}
.sa-js #services .mbars i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#668961;opacity:0}
.sa-js #services .mbars i.last::after{background:#0D3924}
.sa-js #services .t4:hover .mbars i{background:rgba(102,137,97,.35)!important}
.sa-js #services .t4:hover .mbars i::after{animation:sa-bar .4s steps(1,end) calc(var(--i,0)*.4s + .1s)}
.sa-js #services .t4:hover .mbars i.last::after{animation:sa-bar-end .2s ease-out calc(var(--i,0)*.4s + .1s) forwards}
@keyframes sa-bar{0%{opacity:1}100%{opacity:1}}
@keyframes sa-bar-end{to{opacity:1}}
}