/* ColorLoop agents: five decorative ink characters (test, October 2026). */
.agents-row,.agents-perch{--agent:clamp(64px,7.4vw,112px);display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.agent{position:relative;flex:none;width:calc(var(--agent)*var(--s,1));margin:0 calc(var(--agent)*-.07);transform-origin:50% 100%;animation:agent-breathe 4.6s ease-in-out calc(var(--i,0)*-1.1s) infinite;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.agent img{position:relative;z-index:1;display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.agent::after{content:"";position:absolute;left:8%;right:8%;bottom:-4%;height:13%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,20,22,.26),rgba(20,20,22,0))}
.agent-vert{z-index:0;margin-bottom:calc(var(--agent)*.12)}
.agent-bleu,.agent-rose{z-index:1}.agent-jaune{z-index:2}
.agent:hover,.agent.is-hop{animation:agent-hop .8s cubic-bezier(.33,.9,.4,1) both}
.is-greeting .agent{animation:agent-hop .8s cubic-bezier(.33,.9,.4,1) calc(var(--i,0)*.12s) both}
@keyframes agent-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
@keyframes agent-hop{0%{transform:scale(1,1)}14%{transform:scale(1.1,.88)}42%{transform:translateY(-24%) scale(.95,1.06)}70%{transform:translateY(0) scale(1.08,.92)}86%{transform:scale(.98,1.02)}100%{transform:scale(1,1)}}
/* one agent as an avatar (enquiry button) */
.agent-avatar{display:block;width:38px;height:auto;flex:none;transform-origin:50% 100%;animation:agent-breathe 4.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.agent,.agent:hover,.agent.is-hop,.is-greeting .agent,.agent-avatar{animation:none}}
html[data-motion="paused"] .agent,html[data-motion="paused"] .agent-avatar{animation:none!important}