/* Titi — mascotte animée TheBoostConcept (yeux qui suivent, clignements, flamme vivante, réactions) */
.titi{position:relative;display:inline-block;width:100%;aspect-ratio:1254/844;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.titi-rig{position:absolute;inset:0;animation:titi-bob 3.6s ease-in-out infinite;transform-origin:55% 60%;will-change:transform}
.titi.is-boost .titi-rig{animation:titi-dash .9s cubic-bezier(.2,.9,.2,1)}
.titi.is-hop .titi-rig{animation:titi-hop .55s cubic-bezier(.3,1.6,.5,1)}
.titi-body{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.titi-eye{position:absolute;overflow:hidden;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.titi-eye .w{position:absolute;inset:0;background:radial-gradient(ellipse at 38% 30%,#fff 0,#fff 45%,#eceaf0 78%,#d9d5df 100%)}
.titi-eye .p{position:absolute;border-radius:50%;background:radial-gradient(circle at 62% 70%,#3a2b22 0,#120c09 38%,#000 70%);box-shadow:0 0 0 1px rgba(0,0,0,.35);transition:transform .14s ease-out;will-change:transform}
.titi-eye .p::after{content:"";position:absolute;width:34%;height:34%;left:20%;top:16%;border-radius:50%;background:#fff;opacity:.95}
.titi-eye .p::before{content:"";position:absolute;width:13%;height:13%;right:24%;bottom:22%;border-radius:50%;background:#fff;opacity:.55}
.titi-eye .l{position:absolute;left:-8%;right:-8%;top:-6%;height:118%;border-bottom:3px solid #b8400a;border-radius:0 0 50% 50%/0 0 34% 34%;background:linear-gradient(180deg,#e9560c 0,#f8751c 70%,#ff8f3a 100%);box-shadow:0 2px 0 #c9470a;transform:translateY(-104%);transition:transform .09s ease-in}
.titi.blink .titi-eye .l,.titi.covered .titi-eye .l{transform:translateY(0)}
.titi.covered .titi-eye .l{transition:transform .25s ease}
.titi.peek .titi-eye.b .l{transform:translateY(-62%)}
.titi.happy .titi-eye .l{transform:translateY(58%) scaleY(-1)}
.titi-flame{position:absolute;left:16.4%;top:52.4%;width:13%;height:40%;transform-origin:50% 0;transform:translate(-50%,0) rotate(45deg) scaleY(var(--flame,1));transition:transform .35s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;filter:drop-shadow(0 0 14px rgba(255,170,40,.75))}
.titi-flame svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.titi-flame .f1{animation:titi-flick .16s ease-in-out infinite alternate;transform-origin:50% 0}
.titi-flame .f2{animation:titi-flick .12s ease-in-out infinite alternate-reverse;transform-origin:50% 0}
.titi-flame .f3{animation:titi-flick .09s ease-in-out infinite alternate;transform-origin:50% 0}
.titi.is-boost .titi-flame{--flame:1.9}
.titi-spark{position:absolute;left:12%;top:62%;width:8px;height:8px;border-radius:50%;background:#ffd34d;pointer-events:none;box-shadow:0 0 8px #ffb020;animation:titi-spark .8s ease-out forwards}
.titi-pop{position:absolute;pointer-events:none;font:800 clamp(12px,2.6vw,16px)/1 'Bricolage Grotesque','Plus Jakarta Sans',sans-serif;color:#16a34a;background:#fff;border-radius:999px;padding:6px 10px;box-shadow:0 10px 24px rgba(10,20,60,.25);white-space:nowrap;animation:titi-pop 1.3s cubic-bezier(.2,.8,.3,1) forwards}
.titi-bubble{position:absolute;right:2%;bottom:96%;max-width:min(260px,70vw);padding:12px 15px;border-radius:20px 20px 20px 6px;background:#fff;color:#1b1530;font:700 13.5px/1.35 'Plus Jakarta Sans',system-ui,sans-serif;box-shadow:0 18px 40px rgba(18,26,74,.28);opacity:0;transform:translateY(8px) scale(.96);transform-origin:0 100%;transition:opacity .25s,transform .25s;pointer-events:none;z-index:3}
.titi-bubble.on{opacity:1;transform:none}
.titi-bubble.left{right:auto;left:30%}
@keyframes titi-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3.2%) rotate(-1.4deg)}}
@keyframes titi-dash{0%{transform:translate(0,0) rotate(0)}35%{transform:translate(4%,-9%) rotate(-6deg)}70%{transform:translate(-1%,1%) rotate(2deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes titi-hop{0%{transform:scale(1)}40%{transform:scale(1.06,.94) translateY(-4%)}100%{transform:scale(1)}}
@keyframes titi-flick{from{transform:scale(1,1)}to{transform:scale(.9,1.12)}}
@keyframes titi-spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.2)}}
@keyframes titi-pop{0%{opacity:0;transform:translate(-50%,0) scale(.6)}15%{opacity:1;transform:translate(-50%,-30%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-260%) scale(.95)}}
@media (prefers-reduced-motion:reduce){.titi-rig,.titi-flame .f1,.titi-flame .f2,.titi-flame .f3{animation:none}.titi.is-boost .titi-rig,.titi.is-hop .titi-rig{animation:none}}
.titi.covered .titi-eye .l::after,.titi.blink .titi-eye .l::after{content:"";position:absolute;left:16%;right:16%;top:50%;height:20%;border-bottom:3px solid #8a2d05;border-radius:0 0 50% 50%;opacity:.85}
.titi.covered .titi-eye .l{background:linear-gradient(180deg,#e9560c 0,#f8751c 60%,#ff8f3a 100%)}