/* 100 palabras : animations d'ouverture */


/* ---------- commun ---------- */
.card{width:230px;height:310px;box-sizing:border-box;border-radius:20px;background:#fff;padding:18px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 22px 50px rgba(20,8,60,.28),0 2px 6px rgba(20,8,60,.12)}
.card img{width:150px;height:auto;margin-top:22px}
.card p{margin:0;font-family:'Baskerville Italic',Georgia,serif;font-style:italic;font-size:18px;line-height:1.4;color:#1A1033;text-align:center}
.stage{position:relative;width:330px;height:480px;display:flex;align-items:center;justify-content:center}
.float{animation:float 3.4s ease-in-out 1.6s infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(.6deg)}}
.hint-tap{position:absolute;width:60px;height:60px;margin:-30px;border-radius:50%;border:3px solid rgba(255,255,255,.95);pointer-events:none;animation:hint 1.7s ease-out infinite}
@keyframes hint{0%{transform:scale(.45);opacity:.95}100%{transform:scale(1.7);opacity:0}}
.abs{position:absolute}

/* ---------- AMOUR : le coeur qui bat ---------- */
.am-warm{position:absolute;left:-60px;right:-60px;top:-200px;bottom:-200px;background:radial-gradient(circle at 50% 50%,rgba(255,170,220,.85),rgba(167,116,227,0) 60%);transition:opacity .5s ease;pointer-events:none}
.am-aura{position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,246,.95),rgba(231,201,255,.35) 35%,rgba(167,116,227,0) 65%);transition:opacity .4s ease,transform .5s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.am-btn{position:relative;width:220px;height:220px;padding:0;background:transparent;transition:transform .35s cubic-bezier(.3,1.9,.5,1);filter:drop-shadow(0 18px 26px rgba(80,20,120,.35))}
.am-beat{width:220px;height:220px;animation:am-beat var(--beat) ease-in-out infinite}
.am-hit{width:220px;height:220px;animation:am-hit .45s ease,am-beat var(--beat) ease-in-out .45s infinite}
.am-hit2{width:220px;height:220px;animation:am-hit2 .45s ease,am-beat var(--beat) ease-in-out .45s infinite}
@keyframes am-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(.99)}36%{transform:scale(1.05)}50%{transform:scale(1)}}
@keyframes am-hit{0%{transform:scale(1)}22%{transform:scale(.84,.9)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes am-hit2{0%{transform:scale(1)}22%{transform:scale(.84,.9)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
.am-ring{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px;border-radius:50%;border:5px solid rgba(255,255,255,.9);pointer-events:none;animation:am-ring .9s cubic-bezier(.1,.6,.3,1) both}
.am-ring2{animation-name:am-ring2}
@keyframes am-ring{from{transform:scale(.7);opacity:1}to{transform:scale(2.2);opacity:0;border-width:1px}}
@keyframes am-ring2{from{transform:scale(.7);opacity:1}to{transform:scale(2.2);opacity:0;border-width:1px}}
.am-flash{position:absolute;left:-80px;right:-80px;top:-220px;bottom:-220px;background:radial-gradient(circle,#fff 0,rgba(255,240,250,.9) 25%,rgba(255,255,255,0) 60%);pointer-events:none;animation:am-flash .9s ease-out both}
@keyframes am-flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.am-pop{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px;animation:am-pop .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes am-pop{0%{transform:scale(1.15);opacity:1}100%{transform:scale(2.1);opacity:0}}
.am-h{position:absolute;left:50%;top:50%;animation:am-fly 1.6s cubic-bezier(.15,.7,.35,1) both}
@keyframes am-fly{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}40%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(calc(var(--r) * .4)) scale(1);opacity:1}100%{transform:translate(calc(-50% + var(--dx) * 1.15),calc(-50% + var(--dy2))) rotate(var(--r)) scale(.8);opacity:0}}
.am-fl{position:absolute;bottom:-30px;animation:am-rise linear infinite both;opacity:0}
@keyframes am-rise{0%{transform:translateY(0) translateX(0) rotate(-8deg);opacity:0}15%{opacity:.85}50%{transform:translateY(-260px) translateX(14px) rotate(8deg)}100%{transform:translateY(-540px) translateX(-10px) rotate(-6deg);opacity:0}}
.am-card{position:relative;animation:am-card 1s cubic-bezier(.2,1.45,.4,1) .3s both}
@keyframes am-card{from{transform:scale(.1) rotate(-10deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

/* ---------- AVEUX : le sceau de cire ---------- */
.av-back{position:absolute;left:25px;top:200px;width:280px;height:190px;border-radius:12px;z-index:1;background:linear-gradient(180deg,#4E1857 0%,#6E2777 45%,#8E3497 100%)}
.av-pocket{position:absolute;left:0;top:0;width:330px;height:389px;overflow:hidden;z-index:2;pointer-events:none}
.av-rise{position:absolute;left:50px;top:215px;animation:av-rise 1.2s cubic-bezier(.45,0,.2,1) 1s both}
@keyframes av-rise{0%{transform:translateY(0)}100%{transform:translateY(-190px)}}
.av-front{position:absolute;left:25px;top:200px;width:280px;height:190px;border-radius:12px;z-index:3;clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);background:linear-gradient(180deg,#A24CAB 0%,#9A3FA3 60%,#8A3393 100%);box-shadow:0 20px 40px rgba(30,0,50,.3)}
.av-front i{position:absolute;inset:0;clip-path:polygon(0 0,50% 58%,0 100%);background:linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,0))}
.av-front b{position:absolute;inset:0;clip-path:polygon(100% 0,50% 58%,100% 100%);background:linear-gradient(270deg,rgba(0,0,0,.12),rgba(0,0,0,0))}
.av-fw{position:absolute;left:25px;top:200px;width:280px;height:190px;z-index:4;perspective:900px}
.av-fw-open{animation:av-z 0s linear .55s both,av-exit .7s cubic-bezier(.5,0,.8,.4) 2.2s both}
@keyframes av-z{to{z-index:1}}
.av-flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 62%);background:linear-gradient(180deg,#7E2D88 0%,#6B2274 100%);transform-origin:50% 0}
.av-flap-open{animation:av-flap .8s cubic-bezier(.5,0,.3,1) .15s both}
@keyframes av-flap{0%{transform:rotateX(0);filter:brightness(1)}50%{filter:brightness(.55)}100%{transform:rotateX(180deg);filter:brightness(.85)}}
.av-exit{animation:av-exit .7s cubic-bezier(.5,0,.8,.4) 2.2s both}
@keyframes av-exit{to{transform:translateY(300px);opacity:0}}
.av-seal{position:absolute;left:123px;top:276px;width:84px;height:84px;padding:0;background:transparent;z-index:5;touch-action:none;filter:drop-shadow(0 6px 8px rgba(40,0,10,.45))}
.av-tremble{animation:av-tremble .09s linear infinite}
@keyframes av-tremble{0%{transform:translate(0,0)}25%{transform:translate(1.2px,-1px) rotate(1deg)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px) rotate(-1deg)}100%{transform:translate(0,0)}}
.av-breathe{animation:av-breathe 2s ease-in-out infinite}
@keyframes av-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.av-piece{position:absolute;left:123px;top:276px;width:84px;height:84px;z-index:6;pointer-events:none}
.av-pl{clip-path:polygon(0 0,50% 0,45% 22%,55% 41%,44% 61%,53% 79%,47% 100%,0 100%);animation:av-pl 1s cubic-bezier(.4,0,.8,.5) both}
.av-pr{clip-path:polygon(50% 0,100% 0,100% 100%,47% 100%,53% 79%,44% 61%,55% 41%,45% 22%);animation:av-pr 1s cubic-bezier(.4,0,.8,.5) both}
@keyframes av-pl{0%{transform:none}15%{transform:translateX(-8px) rotate(-12deg)}100%{transform:translate(-90px,330px) rotate(-120deg);opacity:0}}
@keyframes av-pr{0%{transform:none}15%{transform:translateX(8px) rotate(12deg)}100%{transform:translate(90px,330px) rotate(130deg);opacity:0}}
.av-crumb{position:absolute;left:165px;top:318px;border-radius:50%;background:#B4443D;z-index:6;animation:av-crumb .9s cubic-bezier(.2,.6,.6,1) both}
@keyframes av-crumb{0%{transform:translate(0,0);opacity:1}35%{transform:translate(var(--dx),var(--dy))}100%{transform:translate(calc(var(--dx) * 1.3),var(--dy2));opacity:0}}
.av-final{position:absolute;left:50px;top:25px;z-index:7;animation:av-settle .8s cubic-bezier(.3,1.2,.5,1) both}
@keyframes av-settle{from{transform:translateY(0)}to{transform:translateY(60px)}}
.caret{display:inline-block;width:2px;height:1em;background:#1A1033;margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- PENSEES : le polaroid ---------- */
.pe-cam{position:absolute;left:40px;top:0;width:250px;height:160px;z-index:3;animation:pe-in .6s cubic-bezier(.3,1.5,.5,1) both,pe-out .55s cubic-bezier(.5,0,.8,.4) 2.55s both}
@keyframes pe-in{from{transform:translateY(-280px)}to{transform:translateY(0)}}
@keyframes pe-out{from{transform:translateY(0)}to{transform:translateY(-340px)}}
.pe-body{position:absolute;inset:0;border-radius:28px;background:linear-gradient(180deg,#3A1A9A 0%,#24007A 55%,#1A0060 100%);box-shadow:0 16px 30px rgba(10,0,40,.4),inset 0 2px 0 rgba(255,255,255,.18)}
.pe-stripe{position:absolute;left:150px;top:0;width:40px;height:160px;display:flex}
.pe-stripe span{flex:1}
.pe-lens{position:absolute;left:28px;top:30px;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#7D86C9 0 6%,#2A2F5C 14%,#0D0B1E 46%,#2B2350 58%,#120E2C 66%,#3C3474 72%,#1B1440 100%);box-shadow:0 0 0 6px #160050,0 0 0 9px #3A1A9A}
.pe-vf{position:absolute;left:204px;top:22px;width:28px;height:22px;border-radius:6px;background:#0D0B1E;box-shadow:inset 0 0 0 3px #3A1A9A}
.pe-fw{position:absolute;left:204px;top:58px;width:30px;height:46px;border-radius:6px;background:linear-gradient(180deg,#5C64A8,#2A2F5C);animation:pe-fw .45s ease .95s both}
@keyframes pe-fw{0%{background:#5C64A8;box-shadow:none}25%{background:#ffffff;box-shadow:0 0 30px 14px rgba(255,255,255,.9)}100%{background:#5C64A8;box-shadow:none}}
.pe-slot{position:absolute;left:30px;top:146px;width:190px;height:8px;border-radius:4px;background:#0D0B1E}
.pe-flash{position:absolute;left:-60px;right:-60px;top:-220px;bottom:-220px;background:#fff;z-index:9;pointer-events:none;animation:pe-flash .7s ease-out 1s both}
@keyframes pe-flash{0%{opacity:0}8%{opacity:.95}100%{opacity:0}}
.pe-clip{position:absolute;left:0;top:150px;width:330px;height:330px;overflow:hidden;z-index:2}
.pe-move{position:absolute;left:45px;top:6px;animation:pe-eject 1.3s cubic-bezier(.35,.05,.35,1) 1.3s both}
@keyframes pe-eject{0%{transform:translateY(-330px)}20%{transform:translateY(-270px)}23%{transform:translateY(-268px)}60%{transform:translateY(-90px)}63%{transform:translateY(-88px)}100%{transform:translateY(0)}}
.pe-settle{animation:pe-settle .8s cubic-bezier(.3,1.4,.5,1) 2.7s both}
@keyframes pe-settle{from{transform:rotate(0)}to{transform:rotate(-4deg) translateY(-4px)}}
.po{width:240px;box-sizing:border-box;background:#FCFBF7;padding:14px 14px 22px;border-radius:5px;box-shadow:0 20px 44px rgba(20,8,60,.32);display:flex;flex-direction:column;gap:16px;text-align:left}
.po-wig{animation:po-wig .6s ease}
.po-wig2{animation:po-wig2 .6s ease}
@keyframes po-wig{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg) translateX(-6px)}45%{transform:rotate(5deg) translateX(6px)}70%{transform:rotate(-3deg)}}
@keyframes po-wig2{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg) translateX(-6px)}45%{transform:rotate(5deg) translateX(6px)}70%{transform:rotate(-3deg)}}
.po-photo{position:relative;height:210px;background:#EEF0FA;display:flex;align-items:center;justify-content:center;overflow:hidden}
.po-photo img{width:150px;height:auto;animation:po-dev 3.6s ease 3s both}
@keyframes po-dev{0%{filter:blur(9px) saturate(0);opacity:.25}60%{filter:blur(2px) saturate(.6);opacity:.85}100%{filter:blur(0) saturate(1);opacity:1}}
.po-veil{position:absolute;inset:0;background:#160050;animation:po-veil 3.2s ease 2.9s both}
.po-veil2{position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,rgba(36,0,122,.9) 0 18%,transparent 36%),radial-gradient(circle at 72% 64%,rgba(36,0,122,.85) 0 16%,transparent 34%),radial-gradient(circle at 60% 22%,rgba(142,52,151,.6) 0 12%,transparent 28%);animation:po-veil 2.4s ease 4.3s both}
@keyframes po-veil{0%{opacity:1}100%{opacity:0}}
.po p{margin:0;min-height:50px;font-family:'Baskerville Italic',Georgia,serif;font-style:italic;font-size:18px;line-height:1.4;color:#1A1033;text-align:center;animation:po-txt 1.2s ease 5.6s both}
@keyframes po-txt{from{opacity:0;letter-spacing:.12em;filter:blur(3px)}to{opacity:1;letter-spacing:0;filter:blur(0)}}

/* ---------- MOTIVATION : le booster ---------- */
.bo-tilt{position:relative;width:240px;height:340px;transition:transform .18s ease-out;transform-style:preserve-3d}
.bo-pack{position:relative;width:240px;height:340px}
.bo-idle{animation:bo-idle 3s ease-in-out infinite}
@keyframes bo-idle{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
.bo-shake{animation:bo-shake .4s ease-in-out .05s both}
@keyframes bo-shake{0%,100%{transform:none}20%{transform:rotate(-5deg) scale(1.03)}45%{transform:rotate(5deg) scale(1.05)}70%{transform:rotate(-3deg) scale(1.02)}}
.bo-body{position:absolute;left:0;top:52px;width:240px;height:288px;z-index:2;overflow:hidden;background:linear-gradient(160deg,#FFC896 0%,#F1A266 38%,#E3864A 100%);display:flex;align-items:center;justify-content:center;gap:0}
.bo-body img{width:96px;height:auto;position:relative;z-index:1}
.bo-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(36,0,122,.12) 1.4px,transparent 1.6px);background-size:14px 14px}
.bo-band{position:absolute;left:0;right:0;bottom:34px;height:30px;background:#24007A;display:flex;justify-content:center;align-items:center;gap:6px}
.bo-band span{width:10px;height:10px;border-radius:50%}
.bo-holo{position:absolute;inset:0;z-index:2;mix-blend-mode:soft-light;background:linear-gradient(115deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.9) 40%,rgba(167,116,227,.8) 48%,rgba(110,147,219,.8) 54%,rgba(255,255,255,0) 66%);background-size:320% 100%;animation:bo-holo 3s linear infinite}
@keyframes bo-holo{from{background-position:140% 0}to{background-position:-80% 0}}
.bo-drop{animation:bo-drop .7s cubic-bezier(.5,0,.8,.4) 1.3s both}
@keyframes bo-drop{to{transform:translateY(560px) rotate(9deg);opacity:0}}
.bo-strip{position:absolute;left:0;top:0;width:240px;height:54px;z-index:3;touch-action:none;cursor:grab;padding:0;background:transparent}
.bo-piece{position:absolute;inset:0}
.bo-paper{position:absolute;inset:0;background:linear-gradient(180deg,#FFC896,#F6B07A);box-shadow:inset 0 -3px 0 rgba(0,0,0,.05)}
.bo-dash{position:absolute;left:8px;right:8px;bottom:6px;border-bottom:2px dashed rgba(36,0,122,.55)}
.bo-arrow{position:absolute;left:12px;top:10px;pointer-events:none;animation:bo-arrow 1.6s ease-in-out infinite}
@keyframes bo-arrow{0%{transform:translateX(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(176px);opacity:0}}
.bo-spark{position:absolute;top:44px;width:2px;height:2px;pointer-events:none}
.bo-spark i{position:absolute;width:4px;height:7px;border-radius:2px;background:#FFF3DF;animation:bo-bit .45s ease-out both}
.bo-spark2 i{animation-name:bo-bit2}
.bo-spark i:nth-child(1){--dx:-14px;--dy:-16px}
.bo-spark i:nth-child(2){--dx:10px;--dy:-20px}
.bo-spark i:nth-child(3){--dx:2px;--dy:-26px}
.bo-spark i:nth-child(4){--dx:-6px;--dy:10px}
@keyframes bo-bit{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(160deg);opacity:0}}
@keyframes bo-bit2{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(-160deg);opacity:0}}
.bo-gone{position:absolute;left:0;top:0;width:240px;height:54px;z-index:3;transform-origin:0 100%;animation:bo-tear .7s cubic-bezier(.2,.7,.4,1) both}
@keyframes bo-tear{0%{transform:none}40%{transform:translate(40px,-60px) rotate(-14deg)}100%{transform:translate(200px,-260px) rotate(-60deg);opacity:0}}
.bo-leak{position:absolute;left:10px;top:-70px;width:220px;height:150px;z-index:2;border-radius:50%;background:radial-gradient(ellipse at 50% 100%,rgba(255,250,220,1) 0,rgba(255,226,160,.7) 30%,rgba(255,200,120,0) 70%);transform-origin:50% 100%;animation:bo-leak 1.1s ease-out .25s both;pointer-events:none}
@keyframes bo-leak{0%{transform:scale(.2,0);opacity:0}40%{opacity:1}100%{transform:scale(1.2,1.4);opacity:0}}
.bo-rays{position:absolute;left:50%;top:50%;width:600px;height:600px;margin:-300px;border-radius:50%;background:repeating-conic-gradient(rgba(255,244,214,.55) 0 6deg,rgba(255,244,214,0) 6deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 66%);mask-image:radial-gradient(circle,#000 20%,transparent 66%);animation:bo-rays 9s linear infinite,bo-raysin .8s ease 1.6s both;pointer-events:none}
@keyframes bo-rays{to{transform:rotate(360deg)}}
@keyframes bo-raysin{from{opacity:0}to{opacity:1}}
.bo-star{position:absolute;left:50%;top:50%;animation:bo-star 1.3s cubic-bezier(.15,.7,.3,1) both;pointer-events:none}
@keyframes bo-star{0%{transform:translate(-50%,-50%) scale(0) rotate(0);opacity:1}60%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--r));opacity:0}}
.bo-card{position:absolute;left:5px;top:20px;z-index:1;perspective:1100px;animation:bo-peek .7s cubic-bezier(.3,.7,.4,1) .55s both,bo-shoot .8s cubic-bezier(.2,.9,.3,1.15) 1.3s both}
@keyframes bo-peek{from{transform:translateY(40px)}to{transform:translateY(-46px)}}
@keyframes bo-shoot{0%{transform:translateY(-46px) scale(1)}45%{transform:translateY(-240px) scale(.96)}100%{transform:translateY(0) scale(1.06)}}
.bo-flip{position:relative;width:230px;height:310px;transform-style:preserve-3d;animation:bo-flip .9s cubic-bezier(.3,1.25,.5,1) 2s both}
@keyframes bo-flip{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.bo-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px}
.bo-back{background:radial-gradient(circle at 50% 50%,#F1A266 0 16%,rgba(0,0,0,0) 17%),repeating-conic-gradient(from 0deg at 50% 50%,#24007A 0 12deg,#33119A 12deg 24deg);box-shadow:inset 0 0 0 7px #F1A266,inset 0 0 0 11px #24007A,0 20px 40px rgba(20,8,60,.35);display:flex;align-items:center;justify-content:center}
.bo-back img{width:58px;height:auto}
.bo-front{transform:rotateY(180deg)}
.holo{position:absolute;inset:-5px;border-radius:25px;background:linear-gradient(120deg,#F1A266,#FFE3B8,#A774E3,#6E93DB,#C9534B,#F1A266,#FFE3B8,#A774E3);background-size:300% 300%;animation:holo 3s linear infinite;box-shadow:0 0 36px rgba(255,190,120,.75)}
@keyframes holo{from{background-position:0% 50%}to{background-position:100% 50%}}
.bo-front .card{position:relative}

/* ---------- SEXY : la fermeture eclair ---------- */
.zp-stage{position:relative;width:270px;height:400px}
.zp-card{position:absolute;left:20px;top:45px;z-index:1;filter:brightness(.55);transition:filter .6s ease}
.zp-pop{filter:brightness(1);animation:zp-pop .9s cubic-bezier(.2,1.5,.4,1) .25s both}
@keyframes zp-pop{0%{transform:scale(.94)}100%{transform:scale(1.04)}}
.zp-hw{position:absolute;top:0;width:135px;height:400px;z-index:2;filter:drop-shadow(0 0 6px rgba(50,0,10,.55))}
.zp-hwl{left:0}
.zp-hwr{left:135px}
.zp-half{position:absolute;inset:0;background:linear-gradient(115deg,#A93A34 0%,#D9645B 22%,#B5423B 42%,#E3746A 58%,#AE3D37 78%,#C9534B 100%);background-size:220% 100%;animation:satin 6s ease-in-out infinite alternate}
.zp-half::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
@keyframes satin{from{background-position:0% 0}to{background-position:100% 0}}
.zp-l{border-radius:20px 0 0 20px}
.zp-r{border-radius:0 20px 20px 0}
.zp-out-l{animation:zp-out-l 1s cubic-bezier(.55,0,.75,.4) both}
.zp-out-r{animation:zp-out-r 1s cubic-bezier(.55,0,.75,.4) both}
@keyframes zp-out-l{0%{transform:none}25%{transform:translateX(-10px) rotate(-3deg)}100%{transform:translate(-200px,180px) rotate(-24deg) skewY(8deg);opacity:0}}
@keyframes zp-out-r{0%{transform:none}25%{transform:translateX(10px) rotate(3deg)}100%{transform:translate(200px,180px) rotate(24deg) skewY(-8deg);opacity:0}}
.zp-teeth{position:absolute;top:0;width:8px;z-index:3;transform-origin:50% 0;background:repeating-linear-gradient(180deg,#F2D48C 0 3px,#8A2E28 3px 6px);border-radius:2px}
.zp-track{position:absolute;left:129px;width:12px;bottom:0;z-index:3;background:repeating-linear-gradient(180deg,#F2D48C 0 3px,#8A2E28 3px 6px);border-radius:2px;box-shadow:0 0 0 2px rgba(80,10,10,.25)}
.zp-pull{position:absolute;left:113px;width:44px;height:70px;z-index:4;touch-action:none;cursor:grab;padding:0;background:transparent;filter:drop-shadow(0 4px 5px rgba(40,0,0,.45))}
.zp-swing{transform-origin:22px 12px;animation:zp-swing 2.4s ease-in-out infinite}
@keyframes zp-swing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.zp-chev{position:absolute;left:119px;z-index:4;pointer-events:none;animation:zp-chev 1.5s ease-in-out infinite}
@keyframes zp-chev{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(26px);opacity:0}}
.zp-kiss{position:absolute;right:12px;top:14px;width:74px;height:auto;z-index:2;animation:zp-kiss .4s cubic-bezier(.3,1.7,.5,1) 1.1s both}
@keyframes zp-kiss{from{transform:scale(2.6) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(-14deg);opacity:.92}}

/* ---------- MOQUERIE : la carte qui se moque ---------- */
.mo-stage{position:relative;width:330px;height:470px}
.mo-back{position:absolute;width:150px;height:200px;border-radius:18px;padding:0;transition:left .42s cubic-bezier(.3,1.5,.5,1),top .42s cubic-bezier(.3,1.5,.5,1);background:#E8D7A6;box-shadow:0 14px 30px rgba(20,8,60,.28),inset 0 0 0 6px #E8D7A6,inset 0 0 0 8px rgba(20,16,42,.15)}
.mo-back::before{content:"";position:absolute;inset:12px;border-radius:12px;background-image:radial-gradient(rgba(20,16,42,.09) 1.5px,transparent 1.7px);background-size:12px 12px}
.mo-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.mo-hop{animation:mo-hop 1.1s ease-in-out infinite}
@keyframes mo-hop{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
.mo-tired{animation:mo-tired 2.4s ease-in-out infinite}
@keyframes mo-tired{0%,100%{transform:translateY(8px) rotate(9deg) scale(1,.96)}50%{transform:translateY(10px) rotate(9deg) scale(1,.93)}}
.mo-sq-a{animation:mo-sq-a .5s ease both}
.mo-sq-b{animation:mo-sq-b .5s ease both}
@keyframes mo-sq-a{0%{transform:none;filter:blur(0)}20%{transform:scale(1.3,.7);filter:blur(1.5px)}55%{transform:scale(.85,1.15) rotate(10deg);filter:blur(0)}100%{transform:none}}
@keyframes mo-sq-b{0%{transform:none;filter:blur(0)}20%{transform:scale(1.3,.7);filter:blur(1.5px)}55%{transform:scale(.85,1.15) rotate(-10deg);filter:blur(0)}100%{transform:none}}
.mo-puff{position:absolute;width:2px;height:2px;pointer-events:none}
.mo-puff i{position:absolute;width:26px;height:26px;margin:-13px;border-radius:50%;background:rgba(255,255,255,.85);animation:mo-puff .6s ease-out both}
.mo-puff2 i{animation-name:mo-puff2}
.mo-puff i:nth-child(1){--dx:-34px;--dy:10px}
.mo-puff i:nth-child(2){--dx:30px;--dy:16px}
.mo-puff i:nth-child(3){--dx:-6px;--dy:-30px}
.mo-puff i:nth-child(4){--dx:20px;--dy:-18px}
@keyframes mo-puff{from{transform:translate(0,0) scale(.4);opacity:.9}to{transform:translate(var(--dx),var(--dy)) scale(1.3);opacity:0}}
@keyframes mo-puff2{from{transform:translate(0,0) scale(.4);opacity:.9}to{transform:translate(var(--dx),var(--dy)) scale(1.3);opacity:0}}
.mo-reveal{position:absolute;left:50px;top:80px;animation:mo-reveal 1.1s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes mo-reveal{0%{transform:scale(.3) rotate(-560deg);opacity:0}100%{transform:none;opacity:1}}
.mo-conf{position:absolute;top:-30px;border-radius:2px;animation:mo-conf cubic-bezier(.25,.4,.5,1) both;pointer-events:none}
@keyframes mo-conf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),560px) rotate(var(--r));opacity:.9}}

/* QUESTIONS : bouteille a la mer */
.q-text{margin:0;font-family:'Baskerville Italic',Georgia,serif;font-style:italic;font-size:21px;line-height:1.4;color:#1A1033;text-align:center}
.q-input{width:100%;box-sizing:border-box;height:96px;resize:none;border-radius:14px;padding:12px 14px;font-family:'Baskerville Italic',Georgia,serif;font-style:italic;font-size:17px;color:#1A1033;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 2px rgba(36,0,122,.18);outline:none}
.q-input:focus{box-shadow:inset 0 0 0 2px #24007A}
.q-send{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:14px;background:#24007A;color:#ffffff;font-size:16px;text-decoration:none}
.q-send svg{flex-shrink:0}

/* BOUTEILLE A LA MER */
.qb-sea{position:absolute;left:-30px;right:-30px;bottom:-10px;height:170px;overflow:hidden;pointer-events:none}
.qb-wave{position:absolute;left:0;width:780px;animation:qb-wave linear infinite}
@keyframes qb-wave{from{transform:translateX(0)}to{transform:translateX(-390px)}}
.qb-bottle{position:absolute;left:110px;top:230px;width:110px;height:200px;padding:0;background:transparent;z-index:2;animation:qb-bob 3s ease-in-out infinite}
@keyframes qb-bob{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-12px) rotate(8deg)}}
.qb-bottle-out{animation:qb-out .9s cubic-bezier(.5,0,.8,.4) .35s both}
@keyframes qb-out{0%{transform:rotate(0)}30%{transform:translateY(-30px) rotate(-25deg) scale(1.05)}100%{transform:translateY(200px) rotate(-60deg) scale(.6);opacity:0}}
.qb-cork{position:absolute;left:44px;top:0;width:22px;height:24px;border-radius:5px;background:linear-gradient(90deg,#8A5A2B,#C08A50,#8A5A2B);z-index:3}
.qb-cork-pop{animation:qb-cork .8s cubic-bezier(.2,.6,.4,1) both}
@keyframes qb-cork{0%{transform:none}100%{transform:translate(90px,-260px) rotate(540deg);opacity:0}}
.qb-scroll{position:absolute;left:25px;top:40px;width:280px;height:400px;z-index:3}
.qb-paper{position:absolute;left:10px;right:10px;top:12px;bottom:12px;background:linear-gradient(90deg,#EFE2C2,#FBF4E2 12%,#FBF4E2 88%,#EFE2C2);box-shadow:0 18px 40px rgba(20,8,60,.3);padding:26px 22px 22px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;justify-content:center;animation:qb-unroll 1s cubic-bezier(.3,.7,.3,1) .6s both}
@keyframes qb-unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.qb-rod{position:absolute;left:0;right:0;height:24px;border-radius:12px;background:linear-gradient(180deg,#E3CF9E,#C8AE73 55%,#A88C52);box-shadow:0 4px 8px rgba(60,30,0,.3)}
.qb-rod-top{top:0;animation:qb-fade .4s ease .5s both}
.qb-rod-bot{top:0;animation:qb-fade .4s ease .5s both,qb-rodmove 1s cubic-bezier(.3,.7,.3,1) .6s both}
@keyframes qb-fade{from{opacity:0;transform:scale(.6)}to{opacity:1}}
@keyframes qb-rodmove{from{transform:translateY(0)}to{transform:translateY(376px)}}
.qb-rollup .qb-paper{animation:qb-roll .7s ease-in both}
.qb-rollup .qb-rod-bot{animation:qb-rodback .7s ease-in both}
@keyframes qb-roll{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes qb-rodback{from{transform:translateY(376px)}to{transform:translateY(0)}}
.qb-rollup{animation:qb-away 1.6s cubic-bezier(.5,0,.6,1) .7s both}
@keyframes qb-away{0%{transform:none}35%{transform:translateY(300px) scale(.25)}100%{transform:translate(360px,300px) scale(.2);opacity:0}}
.qb-drift{position:absolute;left:110px;top:230px;width:110px;height:200px;z-index:2;animation:qb-drift 3.2s cubic-bezier(.4,0,.6,1) 1.6s both}
@keyframes qb-drift{0%{transform:translateY(40px) rotate(-10deg) scale(.4);opacity:0}15%{transform:translateY(0) rotate(-10deg) scale(.7);opacity:1}50%{transform:translate(90px,-10px) rotate(10deg) scale(.6)}100%{transform:translate(300px,-30px) rotate(-6deg) scale(.4);opacity:0}}
.qb-splash{position:absolute;left:165px;top:330px;width:2px;height:2px;z-index:1}
.qb-splash i{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:#DCEBFF;animation:qb-drop .9s cubic-bezier(.2,.6,.4,1) .35s both}
.qb-splash i:nth-child(1){--dx:-50px}.qb-splash i:nth-child(2){--dx:-20px}.qb-splash i:nth-child(3){--dx:18px}.qb-splash i:nth-child(4){--dx:48px}.qb-splash i:nth-child(5){--dx:0px}
@keyframes qb-drop{0%{transform:translate(0,0);opacity:1}45%{transform:translate(var(--dx),-70px)}100%{transform:translate(calc(var(--dx) * 1.4),40px);opacity:0}}


/* ajouts site */
.stage-wrap.stage{display:flex;align-items:center;justify-content:center}
.po .po-clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;min-height:0;font-size:16px}
.mini-card{justify-content:center}
.mini-card img{width:190px;height:190px;object-fit:contain;margin:0}
.mini-card .ph{width:190px;height:190px;border-radius:14px;background:#F3F1FA;display:flex;align-items:center;justify-content:center}
.mini-card .ph img{width:120px;height:auto;opacity:.5}
.po .po-blank{min-height:44px;animation:none}

/* dos des cartes et retournement */
.verso-card{position:relative;width:230px;height:310px;border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 40px rgba(20,8,60,.3)}
.verso-card::before,.verso-photo::before{content:"";position:absolute;inset:9px;border-radius:14px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);background-image:radial-gradient(rgba(255,255,255,.16) 1.4px,transparent 1.6px);background-size:14px 14px}
.verso-card.ink::before,.verso-photo.ink::before{box-shadow:inset 0 0 0 2px rgba(20,16,42,.22);background-image:radial-gradient(rgba(20,16,42,.1) 1.4px,transparent 1.6px)}
.verso-photo::before{inset:7px;border-radius:4px}
.vduo{position:relative;display:flex;align-items:flex-end}
.vduo .vg{width:92px;height:auto;transform:rotate(-6deg)}
.vduo .vl{width:82px;height:auto;margin-left:2px;margin-bottom:4px;transform:rotate(6deg)}
.verso-photo .vduo .vg{width:80px}.verso-photo .vduo .vl{width:70px;margin-left:2px}
.vshine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);background-size:300% 100%;animation:vshine 2.6s ease-in-out infinite;pointer-events:none}
@keyframes vshine{0%{background-position:130% 0}100%{background-position:-70% 0}}
.flip-out{animation:flipout .45s cubic-bezier(.5,0,.9,.5) both!important}
@keyframes flipout{from{transform:perspective(900px) rotateY(0)}to{transform:perspective(900px) rotateY(90deg) scale(1.05)}}
/* booster : la carte sort directement de dos, c'est le retournement final qui devoile le message */
.bo-flip{animation:none!important}
.bo-back{display:none}
.bo-front{transform:none}