/* Mascotte Jolibot - rig animé + 20 états (régénéré, accessoires agrandis) */
:root{
  --mc:#001E49; --cy:5; --amp:1;
  --clay:#C2603D; --clay-deep:#A24E30; --cream:#F4EFE7;
  --serif:"Source Serif 4",Georgia,serif;
}
.masc{display:block;color:var(--mc);overflow:visible}

/* ══════════ attente & repos (01-05) ══════════ */
/* ════ RIG COMMUN - chaque groupe = un calque Lottie ════ */
  .masc g{transform-box:view-box}
  .m-body {transform-origin:353px 420px;animation:mascBreathe calc(var(--cy)*1s) ease-in-out infinite}
  .m-head {transform-origin:353px 300px;animation:mascTilt    calc(var(--cy)*1s) ease-in-out infinite}
  .m-eyes {transform-origin:353px 235px;animation:mascBlink   calc(var(--cy)*1s) linear infinite}
  .m-look {transform-origin:353px 235px}
  .m-mouth{transform-box:view-box;transform-origin:353px 315px}
  .m-tentL{transform-origin:245px 357px;animation:mascSway    calc(var(--cy)*1s) ease-in-out infinite}
  .m-tentR{transform-origin:461px 357px;animation:mascSway    calc(var(--cy)*1s) ease-in-out infinite;animation-delay:calc(var(--cy)*-0.5s)}
  .m-wristL{transform-origin:121.5px 448px;animation:mascSwayTip calc(var(--cy)*1s) ease-in-out infinite;animation-delay:calc(var(--cy)*-0.06s)}
  .m-tipL {transform-origin:120px 420px;animation:mascSwayTip calc(var(--cy)*1s) ease-in-out infinite;animation-delay:calc(var(--cy)*-0.12s)}
  .m-wristR{transform-origin:584.5px 448px;animation:mascSwayTip calc(var(--cy)*1s) ease-in-out infinite;animation-delay:calc(var(--cy)*-0.56s)}
  .m-tipR {transform-origin:586px 420px;animation:mascSwayTip calc(var(--cy)*1s) ease-in-out infinite;animation-delay:calc(var(--cy)*-0.62s)}
  .m-j    {transform-origin:353px 420px;animation:mascSwayJ   calc(var(--cy)*1s) ease-in-out infinite;animation-delay:calc(var(--cy)*-0.25s)}
  .m-eyes-closed,.m-zzz,.m-sigh,.m-waves{display:none}

  @keyframes mascBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(calc(var(--amp)*-7px)) scale(calc(1 + var(--amp)*0.013))}}
  @keyframes mascTilt{0%,100%{transform:rotate(0deg)}30%{transform:rotate(calc(var(--amp)*0.8deg))}72%{transform:rotate(calc(var(--amp)*-0.7deg))}}
  @keyframes mascSway{0%,100%{transform:rotate(calc(var(--amp)*-2.2deg))}50%{transform:rotate(calc(var(--amp)*2.2deg))}}
  @keyframes mascSwayTip{0%,100%{transform:rotate(calc(var(--amp)*-1.7deg))}50%{transform:rotate(calc(var(--amp)*1.7deg))}}
  @keyframes mascSwayJ{0%,100%{transform:rotate(calc(var(--amp)*-2.8deg))}50%{transform:rotate(calc(var(--amp)*2.8deg))}}
  @keyframes mascBlink{0%,52%{transform:scaleY(1)}54%{transform:scaleY(0.07)}56.5%,100%{transform:scaleY(1)}}

  /* ════ 02 · DORT ════ */
  .st-sleep .m-body{animation-name:slBreathe}
  .st-sleep .m-head{animation-name:slHead}
  .st-sleep .m-eyes{display:none}
  .st-sleep .m-eyes-closed{display:inline}
  .st-sleep .m-mouth{transform:scale(.6)}
  .st-sleep .m-tentL,.st-sleep .m-tentR{animation-name:slSway}
  .st-sleep .m-tipL,.st-sleep .m-tipR,.st-sleep .m-wristL,.st-sleep .m-wristR{animation-name:slSwayTip}
  .st-sleep .m-j{animation-name:slSway}
  .st-sleep .m-zzz{display:inline}
  @keyframes slBreathe{0%,100%{transform:translateY(6px) rotate(-6deg) scale(1)}50%{transform:translateY(-1px) rotate(-7.2deg) scale(1.024)}}
  @keyframes slHead{0%,100%{transform:rotate(-0.4deg)}50%{transform:rotate(-1.2deg)}}
  @keyframes slSway{0%,100%{transform:rotate(-0.9deg)}50%{transform:rotate(0.9deg)}}
  @keyframes slSwayTip{0%,100%{transform:rotate(-0.8deg)}50%{transform:rotate(0.8deg)}}
  .m-zzz .z{font-family:var(--serif);font-style:italic;font-weight:800;fill:var(--clay-deep);opacity:0;
    transform-box:fill-box;transform-origin:center;animation:zRise calc(var(--cy)*1s) linear infinite}
  .m-zzz .z1{font-size:84px}
  .m-zzz .z2{font-size:115px;animation-delay:calc(var(--cy)*-0.33s)}
  .m-zzz .z3{font-size:143px;animation-delay:calc(var(--cy)*-0.66s)}
  @keyframes zRise{
    0%{opacity:0;transform:translate(0,0) scale(.5)}
    15%{opacity:1}
    58%{opacity:.95}
    100%{opacity:0;transform:translate(44px,-110px) scale(1.1)}
  }

  /* ════ 03 · ATTEND ════ */
  .st-wait .m-head{animation-name:waitHead}
  .st-wait .m-look{animation:waitLook calc(var(--cy)*1s) ease-in-out infinite}
  .st-wait .m-j{animation-name:waitTap;animation-delay:0s;animation-timing-function:ease-out}
  .st-wait .m-tentL,.st-wait .m-tentR{animation-name:waitSway}
  @keyframes waitLook{
    0%,6%{transform:translate(0,0)}
    13%,42%{transform:translate(-17px,9px)}
    50%,56%{transform:translate(0,0)}
    63%,84%{transform:translate(15px,9px)}
    92%,100%{transform:translate(0,0)}
  }
  @keyframes waitHead{
    0%,6%{transform:rotate(0deg)}
    13%,42%{transform:rotate(-2deg)}
    50%,56%{transform:rotate(0deg)}
    63%,84%{transform:rotate(1.8deg)}
    92%,100%{transform:rotate(0deg)}
  }
  @keyframes waitTap{
    0%,26%{transform:rotate(0deg)}
    29%{transform:rotate(-6.5deg)}32%{transform:rotate(0deg)}
    35%{transform:rotate(-6.5deg)}38%{transform:rotate(0deg)}
    41%{transform:rotate(-6.5deg)}44%,100%{transform:rotate(0deg)}
  }
  @keyframes waitSway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}

  /* ════ 04 · S'ENNUIE ════ */
  .st-bored .m-body{animation-name:boredSigh}
  .st-bored .m-head{animation-name:boredHead}
  .st-bored .m-eyes{animation-name:boredBlink}
  .st-bored .m-look{animation:boredLook calc(var(--cy)*1s) ease-in-out infinite}
  .st-bored .m-tipR{animation-name:boredTwirl;animation-delay:calc(var(--cy)*0.02s)}
  .st-bored .m-wristR{animation-name:boredTwirl;animation-delay:0s}
  .st-bored .m-tentR{animation-name:boredArm;animation-delay:0s}
  .st-bored .m-tentL{animation-name:waitSway}
  .st-bored .m-sigh{display:inline}
  @keyframes boredSigh{
    0%{transform:translateY(2px) scale(1)}
    30%,38%{transform:translateY(-8px) scale(1.02)}
    50%{transform:translateY(3px) scale(.996)}
    100%{transform:translateY(2px) scale(1)}
  }
  @keyframes boredHead{
    0%{transform:rotate(1.6deg)}
    30%,38%{transform:rotate(0.3deg)}
    52%{transform:rotate(2.8deg)}
    100%{transform:rotate(1.6deg)}
  }
  @keyframes boredBlink{0%,50%{transform:scaleY(.55)}54%{transform:scaleY(.08)}58%,100%{transform:scaleY(.55)}}
  @keyframes boredLook{0%,100%{transform:translate(7px,7px)}50%{transform:translate(-8px,7px)}}
  @keyframes boredTwirl{0%,100%{transform:rotate(-4.5deg)}25%{transform:rotate(7.5deg)}50%{transform:rotate(-4.5deg)}75%{transform:rotate(7.5deg)}}
  @keyframes boredArm{0%,100%{transform:rotate(-1.6deg)}25%{transform:rotate(2.4deg)}50%{transform:rotate(-1.6deg)}75%{transform:rotate(2.4deg)}}
  .m-sigh circle{fill:var(--clay-deep);opacity:0;transform-box:fill-box;transform-origin:center;animation:sighPuff calc(var(--cy)*1s) ease-out infinite}
  .m-sigh .b2{animation-delay:calc(var(--cy)*0.05s)}
  @keyframes sighPuff{
    0%,42%{opacity:0;transform:translate(0,0) scale(.4)}
    48%{opacity:1}
    76%{opacity:0;transform:translate(34px,-44px) scale(1.05)}
    100%{opacity:0;transform:translate(34px,-44px) scale(1.05)}
  }

  /* ════ 05 · ÉCOUTE ════ */
  .st-listen .m-body{animation-name:listenBody}
  .st-listen .m-head{animation-name:listenNod}
  .st-listen .m-eyes{animation-name:listenBlink}
  .st-listen .m-tipL,.st-listen .m-wristL{animation-name:perkL;animation-delay:0s}
  .st-listen .m-tipR,.st-listen .m-wristR{animation-name:perkR;animation-delay:0s}
  .st-listen .m-waves{display:inline}
  @keyframes listenBody{
    0%,100%{transform:rotate(3.5deg) translateY(0) scale(1)}
    50%{transform:rotate(3.5deg) translateY(-6px) scale(1.012)}
  }
  @keyframes listenNod{
    0%,16%{transform:rotate(0.8deg)}
    24%{transform:rotate(3deg)}
    32%{transform:rotate(0.8deg)}
    46%{transform:rotate(3deg)}
    56%,100%{transform:rotate(0.8deg)}
  }
  @keyframes listenBlink{0%,76%{transform:scale(1.1)}79%{transform:scale(1.1,.08)}82%,100%{transform:scale(1.1)}}
  @keyframes perkL{0%,100%{transform:rotate(4.5deg)}50%{transform:rotate(6.75deg)}}
  @keyframes perkR{0%,100%{transform:rotate(-4.5deg)}50%{transform:rotate(-6.75deg)}}
  .m-waves path{stroke:var(--clay-deep);stroke-width:20;opacity:0;transform-box:fill-box;transform-origin:center;animation:wavePulse calc(var(--cy)*1s) ease-out infinite}
  .m-waves .w2{animation-delay:calc(var(--cy)*0.07s)}
  @keyframes wavePulse{
    0%{opacity:0;transform:scale(.82)}
    10%{opacity:1}
    28%{opacity:0;transform:scale(1.08)}
    44%{opacity:0;transform:scale(.82)}
    54%{opacity:1}
    72%{opacity:0;transform:scale(1.08)}
    100%{opacity:0;transform:scale(.82)}
  }
  body.paused .masc *{animation-play-state:paused}
  @media(prefers-reduced-motion:reduce){.masc *{animation:none}}

/* ══════════ réflexion & travail (06-12) ══════════ */
  .m-think,.m-spark,.m-loupe,.m-doc,.m-list,.m-load{display:none}

  .pupL,.pupR{transform-box:fill-box;transform-origin:center}
/* ════ 06 · RÉFLÉCHIT ════ */
  .st-think .m-head{animation-name:thinkHead}
  .st-think .m-look{animation:thinkLook calc(var(--cy)*1s) ease-in-out infinite}
  .st-think .m-wristR,.st-think .m-tipR{animation-name:thinkPerk;animation-delay:0s}
  .st-think .m-think{display:inline}
  @keyframes thinkHead{0%,6%{transform:rotate(0deg)}13%,82%{transform:rotate(-2.2deg)}92%,100%{transform:rotate(0deg)}}
  @keyframes thinkLook{0%,6%{transform:translate(0,0)}13%,82%{transform:translate(-13px,-10px)}92%,100%{transform:translate(0,0)}}
  @keyframes thinkPerk{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(-6deg)}}
  .m-think .tb{fill:var(--clay-deep);opacity:0;transform-box:fill-box;transform-origin:center;animation:thinkBub calc(var(--cy)*1s) ease-out infinite}
  .m-think .tb2{animation-delay:calc(var(--cy)*0.06s)}
  .m-think .tb3{animation-delay:calc(var(--cy)*0.12s)}
  @keyframes thinkBub{0%,10%{opacity:0;transform:scale(.3)}18%{opacity:1;transform:scale(1)}76%{opacity:1;transform:scale(1)}84%,100%{opacity:0;transform:scale(1.3)}}

  /* ════ 07 · TRAVAILLE ════ */
  .st-work .m-body{animation-name:workBody}
  .st-work .m-look{transform:translate(0,9px)}
  .st-work .m-tentL{animation-name:workArm;animation-delay:0s}
  .st-work .m-tentR{animation-name:workArm;animation-delay:calc(var(--cy)*-0.1s)}
  .st-work .m-wristL,.st-work .m-tipL{animation-name:workTip;animation-delay:calc(var(--cy)*-0.02s)}
  .st-work .m-wristR,.st-work .m-tipR{animation-name:workTip;animation-delay:calc(var(--cy)*-0.12s)}
  .st-work .m-j{animation-name:workTap;animation-delay:calc(var(--cy)*-0.05s)}
  .st-work .m-spark{display:inline}
  @keyframes workBody{0%,20%,40%,60%,80%,100%{transform:translateY(1px) rotate(1.6deg)}10%,30%,50%,70%,90%{transform:translateY(-5px) rotate(1.6deg)}}
  @keyframes workArm{0%,20%,40%,60%,80%,100%{transform:rotate(-1.6deg)}10%,30%,50%,70%,90%{transform:rotate(1.6deg)}}
  @keyframes workTip{0%,20%,40%,60%,80%,100%{transform:rotate(-4deg)}10%,30%,50%,70%,90%{transform:rotate(4deg)}}
  @keyframes workTap{0%,20%,40%,60%,80%,100%{transform:rotate(0deg)}10%,30%,50%,70%,90%{transform:rotate(-2.5deg)}}
  .m-spark circle{fill:var(--clay-deep);opacity:0;animation:sparkBlink calc(var(--cy)*1s) linear infinite}
  .m-spark .sp2{animation-delay:calc(var(--cy)*0.05s)}
  .m-spark .sp3{animation-delay:calc(var(--cy)*0.10s)}
  .m-spark .sp4{animation-delay:calc(var(--cy)*0.15s)}
  @keyframes sparkBlink{0%,20%,40%,60%,80%{opacity:0}3%,23%,43%,63%,83%{opacity:1}8%,28%,48%,68%,88%{opacity:0}100%{opacity:0}}

  /* ════ 08 · CHERCHE ════ */
  .st-search .m-head{animation-name:searchHead}
  .st-search .m-loupe{display:inline;animation:loupeSweep calc(var(--cy)*1s) ease-in-out infinite}
  .st-search .pupL{animation:pupGrowL calc(var(--cy)*1s) ease-in-out infinite}
  .st-search .pupR{animation:pupGrowR calc(var(--cy)*1s) ease-in-out infinite}
  .m-loupe circle,.m-loupe path{stroke:var(--clay-deep)}
  @keyframes searchHead{0%,10%{transform:rotate(-1.5deg)}30%,55%{transform:rotate(1.5deg)}75%,100%{transform:rotate(-1.5deg)}}
  @keyframes loupeSweep{0%,10%{transform:translate(276px,258px)}30%,55%{transform:translate(429px,258px)}75%,100%{transform:translate(276px,258px)}}
  @keyframes pupGrowL{0%,10%{transform:scale(1.45)}30%,55%{transform:scale(1)}75%,100%{transform:scale(1.45)}}
  @keyframes pupGrowR{0%,10%{transform:scale(1)}30%,55%{transform:scale(1.45)}75%,100%{transform:scale(1)}}

  /* ════ 09 · LIT ════ */
  .st-read .m-head{animation-name:readHead}
  .st-read .m-look{animation:readLook calc(var(--cy)*1s) linear infinite}
  .st-read .m-wristL,.st-read .m-tipL{animation-name:readHoldL;animation-delay:0s}
  .st-read .m-wristR,.st-read .m-tipR{animation-name:readHoldR;animation-delay:0s}
  .st-read .m-doc{display:inline;animation:docBob calc(var(--cy)*1s) ease-in-out infinite}
  @keyframes readHead{0%,100%{transform:rotate(1deg)}50%{transform:rotate(0.4deg)}}
  @keyframes readLook{
    0%{transform:translate(-11px,5px)}24%{transform:translate(11px,5px)}
    26%{transform:translate(-11px,9px)}50%{transform:translate(11px,9px)}
    52%{transform:translate(-11px,13px)}76%{transform:translate(11px,13px)}
    82%,100%{transform:translate(-11px,5px)}
  }
  @keyframes readHoldL{0%,100%{transform:rotate(4deg)}50%{transform:rotate(5.5deg)}}
  @keyframes readHoldR{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(-5.5deg)}}
  @keyframes docBob{0%,100%{transform:translate(353px,505px) rotate(-3deg)}50%{transform:translate(353px,497px) rotate(-2deg)}}
  .m-doc rect{stroke:var(--clay-deep);fill:var(--cream)}
  .m-doc .doc-lines{stroke:var(--clay-deep);opacity:.55}
  .m-doc .doc-in{transform-box:fill-box;transform-origin:center;animation:readFlip calc(var(--cy)*1s) ease-in infinite}
  @keyframes readFlip{0%,80%{transform:scaleX(1)}85%{transform:scaleX(0.06)}90%,100%{transform:scaleX(1)}}

  /* ════ 10 · CALCULE ════ */
  .st-calc .m-head{animation-name:calcHead}
  .st-calc .m-look{transform:translate(11px,-3px)}
  .st-calc .m-list{display:inline}
  @keyframes calcHead{0%,12%,19%,30%,37%,48%,55%,100%{transform:rotate(0deg)}15%,33%,51%{transform:rotate(1.8deg)}}
  .m-list .ln{stroke:var(--clay-deep);opacity:.35;stroke-width:14;stroke-linecap:round}
  .m-list .ck{stroke:var(--clay-deep);stroke-width:16;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;transform-box:fill-box;transform-origin:center}
  .st-calc .ck1{animation:calcCk1 calc(var(--cy)*1s) ease-out infinite}
  .st-calc .ck2{animation:calcCk2 calc(var(--cy)*1s) ease-out infinite}
  .st-calc .ck3{animation:calcCk3 calc(var(--cy)*1s) ease-out infinite}
  @keyframes calcCk1{0%,10%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(1.15)}19%{transform:scale(1)}84%{opacity:1}92%,100%{opacity:0}}
  @keyframes calcCk2{0%,28%{opacity:0;transform:scale(.3)}33%{opacity:1;transform:scale(1.15)}37%{transform:scale(1)}84%{opacity:1}92%,100%{opacity:0}}
  @keyframes calcCk3{0%,46%{opacity:0;transform:scale(.3)}51%{opacity:1;transform:scale(1.15)}55%{transform:scale(1)}84%{opacity:1}92%,100%{opacity:0}}

  /* ════ 11 · MULTITÂCHE ════ */
  .st-multi .m-body{animation-name:multiBody}
  .st-multi .m-head{animation-name:multiHead}
  .st-multi .m-look{animation:multiLook calc(var(--cy)*1s) ease-in-out infinite}
  .st-multi .m-tentL{animation-name:workArm;animation-delay:0s}
  .st-multi .m-wristL,.st-multi .m-tipL{animation-name:workTip;animation-delay:calc(var(--cy)*-0.02s)}
  .st-multi .m-wristR,.st-multi .m-tipR{animation-name:multiTwirl;animation-delay:0s}
  .st-multi .m-j{animation-name:workTap;animation-delay:calc(var(--cy)*-0.05s)}
  @keyframes multiBody{0%,20%,40%,60%,80%,100%{transform:translateY(0)}10%,30%,50%,70%,90%{transform:translateY(-3px)}}
  @keyframes multiHead{0%,16%{transform:rotate(-2.2deg)}26%,66%{transform:rotate(2.2deg)}78%,100%{transform:rotate(-2.2deg)}}
  @keyframes multiLook{0%,16%{transform:translate(-12px,4px)}26%,66%{transform:translate(12px,4px)}78%,100%{transform:translate(-12px,4px)}}
  @keyframes multiTwirl{0%,100%{transform:rotate(-4deg)}25%{transform:rotate(7deg)}50%{transform:rotate(-4deg)}75%{transform:rotate(7deg)}}

  /* ════ 12 · CHARGE ════ */
  .st-load .m-eyes{animation-name:loadEyes}
  .st-load .m-mouth{transform:scale(.85)}
  .st-load .m-j{animation-name:loadPend;animation-delay:0s}
  .st-load .m-tentL,.st-load .m-tentR{animation-name:loadSway}
  .st-load .m-wristL,.st-load .m-wristR,.st-load .m-tipL,.st-load .m-tipR{animation-name:loadSwayTip}
  .st-load .m-load{display:inline}
  @keyframes loadEyes{0%,50%{transform:scaleY(.72)}54%{transform:scaleY(.08)}58%,100%{transform:scaleY(.72)}}
  @keyframes loadPend{0%,50%,100%{transform:rotate(-5deg)}25%,75%{transform:rotate(5deg)}}
  @keyframes loadSway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
  @keyframes loadSwayTip{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
  .m-load .ld{fill:var(--clay-deep);opacity:.25;transform-box:fill-box;transform-origin:center;animation:loadDot calc(var(--cy)*1s) ease-in-out infinite}
  .m-load .ld2{animation-delay:calc(var(--cy)*0.08s)}
  .m-load .ld3{animation-delay:calc(var(--cy)*0.16s)}
  @keyframes loadDot{0%{opacity:.25;transform:scale(.85)}10%{opacity:1;transform:scale(1.2)}22%,50%{opacity:.25;transform:scale(.85)}60%{opacity:1;transform:scale(1.2)}72%,100%{opacity:.25;transform:scale(.85)}}

    
/* ══════════ connexions & communication (13-17) ══════════ */
  .m-node,.m-sync,.m-cwaves,.m-plane,.m-env,.m-spk{display:none}

/* ════ 13 · SE CONNECTE ════ */
  .st-connect .m-head{animation-name:connectHead}
  .st-connect .m-look{animation:connectLook calc(var(--cy)*1s) ease-in-out infinite}
  .st-connect .m-mouth{animation:connectMouth calc(var(--cy)*1s) ease-in-out infinite}
  .st-connect .m-tentR{animation-name:connectArm;animation-delay:0s}
  .st-connect .m-wristR,.st-connect .m-tipR{animation-name:connectPerk;animation-delay:0s}
  .st-connect .m-node{display:inline}
  @keyframes connectHead{0%,6%{transform:rotate(0deg)}16%,78%{transform:rotate(1.8deg)}90%,100%{transform:rotate(0deg)}}
  @keyframes connectLook{0%,6%{transform:translate(0,0)}16%,78%{transform:translate(13px,2px)}90%,100%{transform:translate(0,0)}}
  @keyframes connectMouth{0%,14%{transform:scale(1)}24%,78%{transform:scale(1.12)}90%,100%{transform:scale(1)}}
  @keyframes connectArm{0%,6%{transform:rotate(0deg)}16%,78%{transform:rotate(-2deg)}90%,100%{transform:rotate(0deg)}}
  @keyframes connectPerk{0%,6%{transform:rotate(-1deg)}16%,78%{transform:rotate(-5.5deg)}90%,100%{transform:rotate(-1deg)}}
  .m-node .nd{stroke:var(--clay-deep);stroke-width:14;fill:none}
  .m-node .nd-fill{fill:var(--clay-deep);opacity:0;transform-box:fill-box;transform-origin:center;animation:connectFill calc(var(--cy)*1s) ease-out infinite}
  .m-node .rg{stroke:var(--clay-deep);stroke-width:11;fill:none;opacity:0;transform-box:fill-box;transform-origin:center;animation:connectRing calc(var(--cy)*1s) ease-out infinite}
  .m-node .rg2{animation-delay:calc(var(--cy)*0.07s)}
  @keyframes connectFill{0%,16%{opacity:0;transform:scale(.3)}22%,82%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.3)}}
  @keyframes connectRing{0%,20%{opacity:0;transform:scale(.55)}30%{opacity:.9;transform:scale(1)}44%,100%{opacity:0;transform:scale(1.28)}}

  /* ════ 14 · SYNCHRONISE ════ */
  .st-sync .m-head{animation-name:syncHead}
  .st-sync .m-look{animation:syncLook calc(var(--cy)*1s) ease-in-out infinite}
  .st-sync .m-wristL,.st-sync .m-tipL{animation-name:syncTipL;animation-delay:0s}
  .st-sync .m-wristR,.st-sync .m-tipR{animation-name:syncTipR;animation-delay:0s}
  .st-sync .m-sync{display:inline}
  @keyframes syncHead{0%,13%,20%,61%,68%,100%{transform:scale(1)}16%{transform:scale(1.035)}64%{transform:scale(1.035)}}
  @keyframes syncLook{0%,8%{transform:translate(-12px,2px)}20%,56%{transform:translate(12px,2px)}70%,100%{transform:translate(-12px,2px)}}
  @keyframes syncTipL{0%,6%,16%,66%,76%,100%{transform:rotate(1.5deg)}10%,12%{transform:rotate(5deg)}70%,72%{transform:rotate(5deg)}}
  @keyframes syncTipR{0%,18%,28%,54%,64%,100%{transform:rotate(-1.5deg)}22%,24%{transform:rotate(-5deg)}58%,60%{transform:rotate(-5deg)}}
  .m-sync .sn{stroke:var(--clay-deep);stroke-width:13;fill:none}
  .m-sync .snf{fill:var(--clay-deep);opacity:0;transform-box:fill-box;transform-origin:center}
  .st-sync .snLf{animation:syncNodeL calc(var(--cy)*1s) ease-out infinite}
  .st-sync .snRf{animation:syncNodeR calc(var(--cy)*1s) ease-out infinite}
  @keyframes syncNodeL{0%{opacity:0;transform:scale(.5)}4%{opacity:1;transform:scale(1)}14%{opacity:0;transform:scale(1.15)}74%{opacity:0;transform:scale(.5)}78%{opacity:1;transform:scale(1)}88%,100%{opacity:0;transform:scale(1.15)}}
  @keyframes syncNodeR{0%,24%{opacity:0;transform:scale(.5)}28%{opacity:1;transform:scale(1)}38%{opacity:0;transform:scale(1.15)}50%{opacity:0;transform:scale(.5)}54%{opacity:1;transform:scale(1)}64%,100%{opacity:0;transform:scale(1.15)}}

  /* ════ 15 · TÉLÉPHONE ════ */
  .st-call .m-head{animation-name:callHead}
  .st-call .m-look{transform:translate(8px,-4px)}
  .st-call .m-mouth{animation:callMouth calc(var(--cy)*1s) ease-in-out infinite}
  .st-call .m-tentR{animation-name:callArmR;animation-delay:0s}
  .st-call .m-wristR,.st-call .m-tipR{animation-name:callHold;animation-delay:0s}
  .st-call .m-cwaves{display:inline}
  @keyframes callHead{0%,100%{transform:rotate(2deg)}30%{transform:rotate(2.8deg)}60%{transform:rotate(1.4deg)}}
  @keyframes callMouth{0%,16%,33%,50%,66%,83%,100%{transform:scale(1,1)}9%,25%,41%,58%,75%,91%{transform:scale(.92,.62)}}
  @keyframes callArmR{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(-4.8deg)}}
  @keyframes callHold{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(-11.6deg)}}
  .m-cwaves path{stroke:var(--clay-deep);stroke-width:18;fill:none;opacity:0;transform-box:fill-box;transform-origin:center;animation:callWave calc(var(--cy)*1s) ease-out infinite}
  .m-cwaves .cw2{animation-delay:calc(var(--cy)*0.06s)}
  @keyframes callWave{
    0%{opacity:0;transform:scale(.82)}7%{opacity:1}20%{opacity:0;transform:scale(1.08)}
    33%{opacity:0;transform:scale(.82)}40%{opacity:1}53%{opacity:0;transform:scale(1.08)}
    66%{opacity:0;transform:scale(.82)}73%{opacity:1}86%{opacity:0;transform:scale(1.08)}
    100%{opacity:0;transform:scale(.82)}
  }

  /* ════ 16 · ENVOIE UN MESSAGE ════ */
  .st-send .m-head{animation-name:sendHead}
  .st-send .m-look{animation:sendLook calc(var(--cy)*1s) ease-in-out infinite}
  .st-send .m-wristL,.st-send .m-tipL{animation-name:sendTipL;animation-delay:0s}
  .st-send .m-wristR,.st-send .m-tipR{animation-name:sendTipR;animation-delay:0s}
  .st-send .m-plane{display:inline;animation:sendFly calc(var(--cy)*1s) ease-in-out infinite}
  @keyframes sendHead{0%,36%{transform:rotate(0.8deg)}50%,66%{transform:rotate(-1.6deg)}80%,100%{transform:rotate(0.8deg)}}
  @keyframes sendLook{0%,36%{transform:translate(3px,10px)}44%{transform:translate(10px,2px)}56%,72%{transform:translate(14px,-7px)}84%,100%{transform:translate(3px,10px)}}
  @keyframes sendTipL{0%,30%,44%,100%{transform:rotate(1deg)}36%{transform:rotate(6deg)}}
  @keyframes sendTipR{0%,30%,44%,100%{transform:rotate(-1deg)}36%{transform:rotate(-6deg)}}
  .m-plane path{stroke:var(--clay-deep);stroke-width:12;stroke-linejoin:round;stroke-linecap:round}
  .m-plane .pl-body{fill:var(--cream)}
  @keyframes sendFly{
    0%{transform:translate(420px,468px) rotate(-4deg) scale(1);opacity:1}
    8%{transform:translate(420px,468px) rotate(-4deg) scale(.95);opacity:1}
    16%{transform:translate(420px,468px) rotate(-4deg) scale(1);opacity:1}
    24%{transform:translate(420px,468px) rotate(-4deg) scale(.95);opacity:1}
    32%{transform:translate(406px,476px) rotate(-12deg) scale(1);opacity:1}
    38%{transform:translate(422px,460px) rotate(-2deg) scale(1);opacity:1}
    56%{transform:translate(720px,150px) rotate(16deg) scale(1);opacity:1}
    58%{transform:translate(740px,130px) rotate(16deg) scale(1);opacity:0}
    76%{transform:translate(420px,468px) rotate(-4deg) scale(.3);opacity:0}
    84%{transform:translate(420px,468px) rotate(-4deg) scale(1.06);opacity:1}
    92%,100%{transform:translate(420px,468px) rotate(-4deg) scale(1);opacity:1}
  }

  /* ════ 17 · REÇOIT UNE NOTIFICATION ════ */
  .st-notif .m-body{animation-name:notifBody}
  .st-notif .m-eyes{animation-name:notifEyes}
  .st-notif .m-mouth{animation:notifMouth calc(var(--cy)*1s) ease-in-out infinite}
  .st-notif .m-look{animation:notifLook calc(var(--cy)*1s) ease-in-out infinite}
  .st-notif .m-tentR{animation-name:notifArmR;animation-delay:0s}
  .st-notif .m-wristR,.st-notif .m-tipR{animation-name:notifCatch;animation-delay:0s}
  .st-notif .m-env{display:inline;animation:notifDrop calc(var(--cy)*1s) linear infinite}
  .st-notif .m-spk{display:inline}
  @keyframes notifBody{0%,26%{transform:translateY(0) scale(1)}30%{transform:translateY(-13px) scale(1.012)}35%{transform:translateY(2px) scale(1)}42%,64%{transform:translateY(0)}78%{transform:translateY(-3px)}100%{transform:translateY(0)}}
  @keyframes notifEyes{0%,26%{transform:scale(1)}31%,78%{transform:scale(1.12)}86%,100%{transform:scale(1)}}
  @keyframes notifMouth{0%,26%{transform:scale(1)}31%,80%{transform:scale(1.16)}88%,100%{transform:scale(1)}}
  @keyframes notifLook{0%,8%{transform:translate(10px,-9px)}24%,80%{transform:translate(13px,4px)}90%,100%{transform:translate(10px,-9px)}}
  @keyframes notifArmR{0%,20%{transform:rotate(0deg)}27%,84%{transform:rotate(-2deg)}94%,100%{transform:rotate(0deg)}}
  @keyframes notifCatch{0%,20%{transform:rotate(-1deg)}26%{transform:rotate(-7deg)}33%,80%{transform:rotate(-5.5deg)}92%,100%{transform:rotate(-1deg)}}
  .m-env rect{stroke:var(--clay-deep);stroke-width:12;fill:var(--cream)}
  .m-env .flap{stroke:var(--clay-deep);stroke-width:11;fill:none;stroke-linecap:round;stroke-linejoin:round}
  @keyframes notifDrop{
    0%,5%{transform:translate(600px,-80px) rotate(5deg);opacity:0}
    8%{opacity:1}
    24%{transform:translate(616px,306px) rotate(-7deg);opacity:1}
    29%{transform:translate(619px,290px) rotate(3deg)}
    34%,84%{transform:translate(617px,302px) rotate(0deg);opacity:1}
    93%,100%{transform:translate(617px,302px) rotate(0deg);opacity:0}
  }
  .m-spk path{fill:var(--clay-deep);opacity:0;transform-box:fill-box;transform-origin:center;animation:notifSpark calc(var(--cy)*1s) ease-out infinite}
  @keyframes notifSpark{0%,30%{opacity:0;transform:scale(.2) rotate(0deg)}35%{opacity:1;transform:scale(1) rotate(18deg)}46%{opacity:1;transform:scale(.92) rotate(38deg)}54%,100%{opacity:0;transform:scale(.3) rotate(55deg)}}

    
/* ══════════ résultats & émotions (18-20) ══════════ */
  .m-happy,.m-conf,.m-worried,.m-sweat,.m-lant{display:none}

/* ════ 18 · RÉUSSITE ════ */
  .st-done .m-body{animation-name:doneJump}
  .st-done .m-eyes{animation-name:doneEyesHide}
  .st-done .m-happy{display:inline}
  .st-done .m-conf{display:inline}
  .st-done .m-mouth{animation:doneMouth calc(var(--cy)*1s) ease-in-out infinite}
  .st-done .m-tentL{animation-name:doneArmL;animation-delay:0s}
  .st-done .m-tentR{animation-name:doneArmR;animation-delay:0s}
  .st-done .m-wristL,.st-done .m-tipL{animation-name:doneTipL;animation-delay:0s}
  .st-done .m-wristR,.st-done .m-tipR{animation-name:doneTipR;animation-delay:0s}
  .st-done .m-j{animation-name:doneJ;animation-delay:0s}
  @keyframes doneJump{
    0%{transform:translateY(0) scale(1,1)}
    7%{transform:translateY(5px) scale(1.01,.98)}
    13%{transform:translateY(-25px) scale(1,1)}
    20%{transform:translateY(-28px) scale(1,1)}
    27%{transform:translateY(3px) scale(1.012,.982)}
    33%{transform:translateY(0) scale(1,1)}
    62%{transform:translateY(-3px) scale(1,1)}
    100%{transform:translateY(0) scale(1,1)}
  }
  @keyframes doneEyesHide{0%,28%{opacity:1}31%,84%{opacity:0}88%,100%{opacity:1}}
  .m-happy path{stroke:currentColor;stroke-width:15;stroke-linecap:round;fill:none;opacity:0}
  .st-done .m-happy path{animation:doneHappyShow calc(var(--cy)*1s) linear infinite}
  @keyframes doneHappyShow{0%,28%{opacity:0}31%,84%{opacity:1}88%,100%{opacity:0}}
  @keyframes doneMouth{0%,28%{transform:scale(1)}33%,84%{transform:scale(1.18)}92%,100%{transform:scale(1)}}
  @keyframes doneArmL{0%,4%,90%,100%{transform:rotate(0deg)}12%,76%{transform:rotate(3deg)}}
  @keyframes doneArmR{0%,4%,90%,100%{transform:rotate(0deg)}12%,76%{transform:rotate(-3deg)}}
  @keyframes doneTipL{0%,4%,88%,100%{transform:rotate(1deg)}12%,76%{transform:rotate(9deg)}}
  @keyframes doneTipR{0%,4%,88%,100%{transform:rotate(-1deg)}12%,76%{transform:rotate(-9deg)}}
  @keyframes doneJ{0%,8%,34%,100%{transform:rotate(0deg)}14%,24%{transform:rotate(-5deg)}}
  .m-conf circle,.m-conf rect{fill:var(--clay-deep);opacity:0}
  .st-done .cf1{animation:doneConf1 calc(var(--cy)*1s) ease-out infinite}
  .st-done .cf2{animation:doneConf2 calc(var(--cy)*1s) ease-out infinite}
  .st-done .cf3{animation:doneConf3 calc(var(--cy)*1s) ease-out infinite}
  .st-done .cf4{animation:doneConf4 calc(var(--cy)*1s) ease-out infinite}
  @keyframes doneConf1{0%,16%{opacity:0;transform:translate(0,0)}22%{opacity:1;transform:translate(-26px,-38px)}40%{opacity:1;transform:translate(-44px,-16px)}56%,100%{opacity:0;transform:translate(-52px,12px)}}
  @keyframes doneConf2{0%,16%{opacity:0;transform:translate(0,0)}22%{opacity:1;transform:translate(30px,-42px)}40%{opacity:1;transform:translate(48px,-18px)}56%,100%{opacity:0;transform:translate(56px,12px)}}
  @keyframes doneConf3{0%,16%{opacity:0;transform:translate(0,0) rotate(0deg)}22%{opacity:1;transform:translate(-8px,-56px) rotate(40deg)}40%{opacity:1;transform:translate(-12px,-28px) rotate(80deg)}56%,100%{opacity:0;transform:translate(-14px,2px) rotate(110deg)}}
  @keyframes doneConf4{0%,16%{opacity:0;transform:translate(0,0) rotate(0deg)}22%{opacity:1;transform:translate(38px,-28px) rotate(-40deg)}40%{opacity:1;transform:translate(56px,-4px) rotate(-80deg)}56%,100%{opacity:0;transform:translate(64px,24px) rotate(-105deg)}}

  /* ════ 19 · OUPS ════ */
  .st-oops .m-head{animation-name:oopsHead}
  .st-oops .m-eyes{animation-name:oopsEyesHide}
  .st-oops .m-worried{display:inline}
  .st-oops .m-sweat{display:inline}
  .st-oops .m-mouth{animation:oopsMouth calc(var(--cy)*1s) ease-in-out infinite}
  .st-oops .m-tentL{animation-name:oopsArmL;animation-delay:0s}
  .st-oops .m-wristL,.st-oops .m-tipL{animation-name:oopsScratch;animation-delay:0s}
  @keyframes oopsHead{0%,6%{transform:rotate(0deg)}12%,55%{transform:rotate(-2.2deg)}62%{transform:rotate(0deg)}67%{transform:rotate(2.6deg)}72%{transform:rotate(0.4deg)}77%{transform:rotate(2.2deg)}84%,100%{transform:rotate(0deg)}}
  @keyframes oopsEyesHide{0%,6%{opacity:1}10%,62%{opacity:0}70%,100%{opacity:1}}
  .m-worried path{stroke:currentColor;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0}
  .st-oops .m-worried path{animation:oopsWorriedShow calc(var(--cy)*1s) linear infinite}
  @keyframes oopsWorriedShow{0%,6%{opacity:0}10%,62%{opacity:1}70%,100%{opacity:0}}
  @keyframes oopsMouth{0%,6%{transform:scale(1)}12%,58%{transform:scale(.62)}70%,88%{transform:scale(1.06)}96%,100%{transform:scale(1)}}
  @keyframes oopsArmL{0%,6%,70%,100%{transform:rotate(0deg)}12%,60%{transform:rotate(3deg)}}
  @keyframes oopsScratch{
    0%,6%{transform:rotate(1deg)}
    12%{transform:rotate(10deg)}
    16%{transform:rotate(12.5deg)}20%{transform:rotate(9.5deg)}
    24%{transform:rotate(12.5deg)}28%{transform:rotate(9.5deg)}
    32%{transform:rotate(12.5deg)}36%{transform:rotate(9.5deg)}
    40%{transform:rotate(12.5deg)}
    50%,58%{transform:rotate(11deg)}
    70%,100%{transform:rotate(1deg)}
  }
  .m-sweat path{fill:var(--clay-deep);opacity:0;animation:oopsSweat calc(var(--cy)*1s) ease-in infinite}
  @keyframes oopsSweat{
    0%,8%{opacity:0;transform:translate(0,0) scale(.5)}
    14%{opacity:1;transform:translate(2px,8px) scale(1)}
    38%{opacity:1;transform:translate(6px,34px) scale(1)}
    48%,100%{opacity:0;transform:translate(8px,48px) scale(.9)}
  }

  /* ════ 20 · VEILLE ════ */
  .st-watch .m-head{animation-name:watchHead}
  .st-watch .m-eyes{animation-name:watchEyes}
  .st-watch .m-look{animation:watchLook calc(var(--cy)*1s) ease-in-out infinite}
  .st-watch .m-mouth{transform:scale(.8)}
  .st-watch .m-tentL,.st-watch .m-tentR{animation-name:watchSway}
  .st-watch .m-wristL,.st-watch .m-tipL{animation-name:watchSwayTip}
  .st-watch .m-wristR,.st-watch .m-tipR{animation:none}
  .st-watch .m-j{animation-name:watchSway}
  .st-watch .m-lant{display:inline}
  @keyframes watchHead{0%,12%{transform:rotate(-1.2deg)}45%,60%{transform:rotate(1.2deg)}92%,100%{transform:rotate(-1.2deg)}}
  @keyframes watchEyes{0%,40%{transform:scaleY(.85)}42%{transform:scaleY(.07)}44%,100%{transform:scaleY(.85)}}
  @keyframes watchLook{0%,12%{transform:translate(-13px,2px)}45%,60%{transform:translate(13px,2px)}92%,100%{transform:translate(-13px,2px)}}
  @keyframes watchSway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
  @keyframes watchSwayTip{0%,100%{transform:rotate(-0.9deg)}50%{transform:rotate(0.9deg)}}
  .lant-sw{transform-origin:687px 424px;animation:lantSwing calc(var(--cy)*1s) ease-in-out infinite}
  @keyframes lantSwing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
  .m-lant .hook{stroke:var(--clay-deep);stroke-width:10;stroke-linecap:round;fill:none}
  .m-lant rect{stroke:var(--clay-deep);stroke-width:11;fill:var(--cream)}
  .m-lant .lum{fill:var(--clay-deep);animation:lumPulse calc(var(--cy)*1s) ease-in-out infinite}
  @keyframes lumPulse{0%,50%,100%{opacity:.45}25%,75%{opacity:1}}

    

/* ══════════ MODE BADGE - petites tailles (≤ 36 px, classe masc--sm) ══════════
   Les accessoires passent à l'échelle ×1.7-2.4 et se comportent comme des
   pastilles de statut ; les grands déplacements (chute d'enveloppe) sont gelés. */
.masc--sm .m-zzz,.masc--sm .m-think,.masc--sm .m-waves,.masc--sm .m-sigh,
.masc--sm .m-list,.masc--sm .m-load,.masc--sm .m-node,.masc--sm .m-cwaves,
.masc--sm .m-conf,.masc--sm .m-sweat,.masc--sm .m-lant,.masc--sm .m-env,
.masc--sm .loupe-in,.masc--sm .doc-zoom{transform-box:view-box;transform-origin:0px 0px}
.masc--sm .m-zzz{transform:translate(520px,110px) scale(2) translate(-520px,-110px)}
.masc--sm .m-think{transform:translate(575px,125px) scale(1.9) translate(-575px,-125px)}
.masc--sm .m-waves{transform:translate(105px,200px) scale(1.8) translate(-105px,-200px)}
.masc--sm .m-sigh{transform:translate(455px,325px) scale(1.9) translate(-455px,-325px)}
.masc--sm .m-list{transform:translate(-20px,0) translate(660px,202px) scale(1.7) translate(-660px,-202px)}
.masc--sm .m-load{transform:translate(-45px,0) translate(628px,268px) scale(2.4) translate(-628px,-268px)}
.masc--sm .m-node{transform:translate(656px,322px) scale(2.2) translate(-656px,-322px)}
.masc--sm .m-cwaves{transform:translate(625px,280px) scale(1.8) translate(-625px,-280px)}
.masc--sm .m-conf{transform:translate(370px,45px) scale(1.6) translate(-370px,-45px)}
.masc--sm .m-sweat{transform:translate(492px,116px) scale(1.8) translate(-492px,-116px)}
.masc--sm .m-lant{transform:translate(683px,450px) scale(2) translate(-683px,-450px)}
.masc--sm .loupe-in{transform:scale(2)}
.masc--sm .doc-zoom{transform:scale(1.6)}
/* enveloppe : chute gelée → badge fixe en haut à droite, petit balancement */
.masc--sm .m-env{animation:none;transform:translate(565px,165px) scale(2.4)}
.masc--sm .env-in{animation:smEnvBob calc(var(--cy)*1s) ease-in-out infinite}
@keyframes smEnvBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
.masc--sm .m-spk{display:none}


/* ══════════ HALO BLANC des accessoires (parité avec l'export Lottie) ══════════ */
.masc .m-zzz,.masc .m-think,.masc .m-spark,.masc .m-loupe,.masc .m-doc,
.masc .m-list,.masc .m-load,.masc .m-node,.masc .m-sync,.masc .m-cwaves,
.masc .m-plane,.masc .m-env,.masc .m-spk,.masc .m-conf,.masc .m-sweat,
.masc .m-lant,.masc .m-sigh,.masc .m-waves{filter:url(#jbHalo)}