/* Robot compagnon Arivex Agents.
   Layout : le parent fixe la largeur. L'acteur reprend le film (380 x 493 unités, tête et corps superposés à l'identique)
   et occupe --ac-wn % du parent, décalé de --ac-xn %. Les rubans couvrent --ac-rib % du parent depuis son bord gauche :
   le cadre du film n'impose plus la taille de l'acteur. Le mouvement n'existe qu'une fois le script monté (data-motion)
   et sans demande de réduction. */
.ac-root{
 --ac-wn:70;
 --ac-xn:15;
 --ac-rib:100;
 --ac-w:calc(var(--ac-wn) * 1%);
 --ac-x:calc(var(--ac-xn) * 1%);
 --ac-tilt:-2deg;
 --ac-gx:0;
 --ac-gy:0;
 --ac-visor:.35;
 --ac-look-k:0;
 --ac-happy:1;
 --ac-lift:0;
 --ac-flat:0;
 --ac-bubble-gap:calc(var(--ac-w) * -.06);
 --ac-play:running;
 --ac-ease:cubic-bezier(.45,0,.2,1);
 --ac-accent:var(--heading-accent,linear-gradient(100deg,#e6b8b5,#bea7ee 85%));
 position:relative;
 display:block;
 width:100%;
 min-width:0;
 isolation:isolate;
 container:ac / inline-size;
 font-family:Inter,Arial,sans-serif;
 font-size:var(--type-body-size,1rem);
}
.ac-root[hidden]{display:none}

/* Tailles : part du parent occupée par l'acteur. Large en fait le protagoniste, centré par défaut.
   À côté des cartes (.ap-orbit-cards), il se décale à gauche et les rubans filent sous elles ;
   sous 900 px la page masque ces cartes, l'acteur revient au centre. */
.ac-root[data-size="large"]:has(~ .ap-orbit-cards){--ac-xn:5;--ac-rib:110}
@media (max-width:900px){.ac-root[data-size="large"]:has(~ .ap-orbit-cards){--ac-xn:15;--ac-rib:100}}
.ac-root[data-size="medium"]{--ac-wn:76;--ac-xn:12}
.ac-root[data-size="small"]{--ac-wn:88;--ac-xn:6}
.ac-root[data-size="avatar"]{--ac-wn:100;--ac-xn:0}

/* États fournis par la page : inclinaison, regard (en % de la zone des yeux), expression. */
.ac-root[data-state="observe"]{--ac-tilt:calc(var(--ac-side,1) * -6deg);--ac-gx:calc(var(--ac-side,1) * 5);--ac-gy:-14;--ac-look-k:1;--ac-happy:0;--ac-flat:1}
.ac-root[data-state="prepare"]{--ac-tilt:4deg;--ac-gx:6;--ac-gy:26;--ac-happy:0;--ac-flat:1}
.ac-root[data-state="listen"]{--ac-tilt:0deg;--ac-gy:-6;--ac-visor:.5;--ac-happy:0;--ac-lift:1}
.ac-root[data-state="help"]{--ac-tilt:8deg;--ac-gx:-3;--ac-gy:10;--ac-look-k:.6;--ac-happy:0;--ac-flat:1}
.ac-root[data-state="confirm"]{--ac-visor:.45}
.ac-root[data-motion="paused"]{--ac-play:paused}

.ac-art{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:calc(var(--ac-w) * .03)}
.ac-puppet{position:relative;flex:none;width:var(--ac-w);margin-left:var(--ac-x);aspect-ratio:380/493;container-type:inline-size}

/* Rubans derrière l'acteur, centrés sur sa hauteur comme dans le film : image 1,279:1, centre à 47,3 % de l'acteur. */
.ac-ribbons{position:absolute;z-index:0;left:calc(var(--ac-xn) / var(--ac-wn) * -100%);top:calc(47.3% - var(--ac-rib) / var(--ac-wn) * 30.14%);display:block;width:calc(var(--ac-rib) / var(--ac-wn) * 100%);max-width:none;height:auto;pointer-events:none;user-select:none}

.ac-shadow{position:absolute;z-index:1;left:18.42%;top:95.33%;width:65.79%;height:6.9%;border-radius:50%;background:radial-gradient(ellipse,rgba(80,54,140,.22),transparent 70%);filter:blur(.25em);filter:blur(1.05cqw);pointer-events:none}
.ac-float{position:absolute;inset:0;z-index:2}
.ac-body{position:absolute;left:12.11%;top:44.02%;display:block;width:82.89%;max-width:none;height:auto}
.ac-head{position:absolute;left:0;top:0;width:100%;aspect-ratio:1;transform-origin:58% 82%;transform:rotate(calc(var(--ac-tilt) + var(--ac-px,0) * 2deg))}
.ac-nod{position:absolute;inset:0;transform-origin:58% 82%}
.ac-head-img{display:block;width:100%;max-width:none;height:auto}
.ac-visor{position:absolute;left:30%;top:28%;width:58%;height:46%;border-radius:44%;background:radial-gradient(ellipse at 55% 55%,rgba(178,120,255,.55),transparent 62%);mix-blend-mode:screen;opacity:var(--ac-visor);transition:opacity .4s ease;pointer-events:none}

/* Yeux posés sur la visière, sans visage dessiné derrière. */
.ac-gaze{position:absolute;left:38%;top:43%;width:45%;height:18%;transform:translate(calc((var(--ac-gx) + var(--ac-px,0) * 5 + var(--ac-look,0) * var(--ac-look-k) * 6) * 1%),calc((var(--ac-gy) + var(--ac-py,0) * 12) * 1%))}
.ac-blink{position:absolute;inset:0;transform-origin:50% 55%}
.ac-eyes{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 60%;forced-color-adjust:none;filter:drop-shadow(0 0 .25em #b278ff) drop-shadow(0 0 .7em #9c61ee);filter:drop-shadow(0 0 1.05cqw #b278ff) drop-shadow(0 0 2.9cqw #9c61ee)}
.ac-eye{transition:opacity .28s ease}
.ac-eye-happy{opacity:var(--ac-happy)}
.ac-eye-lift{opacity:var(--ac-lift)}
.ac-eye-flat{opacity:var(--ac-flat)}

/* Avatar : tête seule, sans boucle ni bulle. */
.ac-root[data-size="avatar"] .ac-art{padding-bottom:0}
.ac-root[data-size="avatar"] .ac-puppet{aspect-ratio:1}
.ac-root[data-size="avatar"] .ac-float{transform:scale(1.12)}
.ac-root[data-size="avatar"] .ac-head,
.ac-root[data-size="avatar"] .ac-nod{transform-origin:50% 50%}

/* Bulle : décorative, elle ne remplace pas le statut accessible de la page. Elle mord sur le vide au-dessus de la tête. */
.ac-bubble{position:relative;z-index:3;flex:none;box-sizing:border-box;width:max-content;max-width:100%;margin:0 auto var(--ac-bubble-gap);padding:.75em 1.15em;border:thin solid transparent;border-radius:1.2em;background:linear-gradient(#fff,#fff) padding-box,var(--ac-accent) border-box;box-shadow:0 1.25em 2.5em -1.5em rgba(41,37,61,.35),0 .125em .5em rgba(41,37,61,.06);color:#11121b;font-family:inherit;font-size:var(--type-body-size,1rem);font-weight:500;line-height:1.4;letter-spacing:-.011em;text-align:center;text-wrap:balance;overflow-wrap:anywhere}
.ac-bubble::after{content:"";position:absolute;left:calc(50% - .4375em);top:calc(100% - .4375em);box-sizing:border-box;width:.875em;height:.875em;border:inherit;border-radius:0 0 .2em 0;background:inherit;clip-path:polygon(100% 0,100% 100%,0 100%);transform:rotate(45deg)}
.ac-root[data-size="large"] .ac-bubble{margin-inline:calc(var(--ac-x) + var(--ac-w) * .38) 0;max-width:calc(100% - var(--ac-x) - var(--ac-w) * .38);text-align:start}
.ac-root[data-size="large"] .ac-bubble::after{left:1.5em}

/* Commande de pause : seule partie exposée, discrète. */
.ac-pause{position:absolute;z-index:4;right:0;bottom:0;display:inline-grid;place-items:center;box-sizing:border-box;width:2.25em;height:2.25em;margin:0;padding:0;border:thin solid rgba(17,18,27,.14);border-radius:50%;background:rgba(255,255,255,.72);color:#3d4152;font:inherit;line-height:1;cursor:pointer;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s ease,background-color .2s ease,color .2s ease}
.ac-pause[hidden]{display:none}
.ac-pause:hover{background:#fff;color:#11121b}
.ac-pause:focus:not(:focus-visible){outline:none}
.ac-pause:focus-visible{outline:.125em solid #8458e8;outline-offset:.1875em;background:#fff;color:#11121b}
.ac-pause:active{transform:scale(.97)}
.ac-pause-icon{display:block;width:.875em;height:.875em;fill:currentColor}
.ac-pause[data-paused="true"] .ac-icon-pause,
.ac-pause:not([data-paused="true"]) .ac-icon-play{display:none}
.ac-root[data-size="large"] .ac-pause{right:auto;left:calc(var(--ac-x) + var(--ac-w) + .5em)}

/* Parent étroit : la bulle décorative laisse la place à l'acteur, la pause se range dans le coin. */
@container ac (max-width:20rem){
 .ac-bubble{display:none}
 .ac-root[data-size="large"] .ac-pause{left:auto;right:0}
}

/* Mouvement : transform et opacity seulement, suspendu hors écran, onglet masqué ou pause.
   Réveil et hochement d'entrée : seulement sur un acteur neuf (sans data-cue). Ensuite, seul un passage réel
   à confirm rejoue un hochement (data-cue="nod") ; data-cue="rest" garde l'acteur au repos. */
@media (prefers-reduced-motion:no-preference){
 .ac-head{transition:transform .6s var(--ac-ease)}
 .ac-gaze{transition:transform .45s var(--ac-ease)}
 .ac-root:is([data-motion="running"],[data-motion="paused"]):not([data-size="avatar"]) .ac-float{animation:ac-float 5.2s ease-in-out infinite;animation-play-state:var(--ac-play)}
 .ac-root:is([data-motion="running"],[data-motion="paused"]):not([data-size="avatar"]) .ac-shadow{animation:ac-shadow 5.2s ease-in-out infinite;animation-play-state:var(--ac-play)}
 .ac-root:is([data-motion="running"],[data-motion="paused"]):not([data-size="avatar"]) .ac-blink{animation:ac-blink 3.6s linear infinite;animation-play-state:var(--ac-play)}
 .ac-root:is([data-motion="running"],[data-motion="paused"]):not([data-cue])[data-state="welcome"] .ac-eyes{animation:ac-wake .45s cubic-bezier(.22,1,.36,1) .15s backwards;animation-play-state:var(--ac-play)}
 .ac-root:is([data-motion="running"],[data-motion="paused"]):not([data-cue])[data-state="welcome"] .ac-visor{animation:ac-visor-wake 1.05s ease-out .1s backwards;animation-play-state:var(--ac-play)}
 .ac-root:is([data-motion="running"],[data-motion="paused"]):not([data-cue="rest"])[data-state="confirm"] .ac-nod{animation:ac-nod .9s var(--ac-ease) .1s backwards;animation-play-state:var(--ac-play)}
 .ac-root:is([data-motion="running"],[data-motion="paused"]):not([data-cue="rest"])[data-state="confirm"] .ac-visor{animation:ac-visor-glow .9s ease-out .1s backwards;animation-play-state:var(--ac-play)}
}
@media (prefers-reduced-motion:reduce){
 .ac-root .ac-pause{display:none}
}

@media (forced-colors:active){
 .ac-bubble,.ac-bubble::after{background:Canvas;border-color:CanvasText;color:CanvasText}
 .ac-pause{border-color:ButtonText;background:ButtonFace;color:ButtonText}
}

@keyframes ac-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2.03%,0)}}
@keyframes ac-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.86);opacity:.7}}
@keyframes ac-blink{0%,94.7%{transform:scaleY(1);animation-timing-function:cubic-bezier(.55,0,1,.45)}96.6%{transform:scaleY(.08);animation-timing-function:cubic-bezier(0,.55,.45,1)}100%{transform:scaleY(1)}}
@keyframes ac-wake{0%{transform:scale(.05,.2);opacity:0}100%{transform:none;opacity:1}}
@keyframes ac-visor-wake{0%{opacity:0}22%{opacity:.9}100%{opacity:.35}}
@keyframes ac-nod{0%,100%{transform:none}32%{transform:rotate(8deg)}68%{transform:rotate(-1.5deg)}}
@keyframes ac-visor-glow{0%{opacity:.35}35%{opacity:.75}100%{opacity:.45}}