/* ===== Nos offres : bandeau compact animé + cartes plus vivantes ===== */
section[data-view="offres"] .vip-hero{display:none}
.ofx-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.5fr .5fr;gap:14px;align-items:center;padding:20px 26px;margin:6px 0 16px;border-radius:22px;color:#fff;background:radial-gradient(120% 140% at 0% 0%,#3a2a00 0%,#14151a 50%,#3a0f2e 100%);box-shadow:0 26px 52px -34px rgba(20,21,26,.8)}
.ofx-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}.ofx-bg i{position:absolute;border-radius:50%;filter:blur(44px);opacity:.5;animation:ofxDrift 12s ease-in-out infinite alternate}
.ofx-bg i:nth-child(1){width:300px;height:300px;left:-80px;top:-140px;background:#ffd400;opacity:.35}.ofx-bg i:nth-child(2){width:280px;height:280px;right:-60px;bottom:-150px;background:#e0137a;animation-delay:-6s}
@keyframes ofxDrift{to{transform:translate(50px,40px) scale(1.2)}}
.ofx-eye{display:inline-flex;gap:6px;font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:#ffd400;color:#14151a}
.ofx-hero h2{font-family:var(--f-display);font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.06;margin:8px 0 6px;color:#fff}
.ofx-hero h2 em{font-style:normal;background:linear-gradient(90deg,#ffd400,#ff8fc7,#ffd400);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ofxShine 5s linear infinite}
@keyframes ofxShine{to{background-position:200% 0}}
.ofx-tx>p{margin:0 0 10px;font-size:.93rem;line-height:1.5;opacity:.9}
.ofx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.ofx-chips>span{font-weight:700;font-size:.8rem;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}.ofx-chips b{color:#ffd400}
.ofx-cta{display:flex;flex-wrap:wrap;gap:8px}
.ofx-b{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.86rem;padding:9px 13px;border-radius:11px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);transition:transform .2s,background .2s}
.ofx-b:hover,.ofx-b:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.22)}.ofx-b:focus-visible{outline:2px solid #ffd400;outline-offset:2px}.ofx-b.pri{background:#ffd400;color:#14151a;border-color:#ffd400}
.ofx-art svg{width:100%;max-width:220px;height:auto;display:block;margin:0 auto;overflow:visible}
/* animation : le cadeau tremble, s'ouvre, les surprises en sortent (cycle de 5 s) */
.ofx-box{transform-box:fill-box;transform-origin:center bottom;animation:ofxBox 5s ease-in-out infinite}
@keyframes ofxBox{0%,8%,16%,24%{transform:rotate(0)}4%,12%,20%{transform:rotate(-3deg)}6%,14%,22%{transform:rotate(3deg)}28%{transform:scaleY(.94)}32%,100%{transform:none}}
.ofx-lid{transform-box:fill-box;transform-origin:20% 100%;animation:ofxLid 5s cubic-bezier(.3,1.5,.5,1) infinite}
@keyframes ofxLid{0%,8%,16%,24%{transform:translateY(0) rotate(0)}4%,12%,20%{transform:rotate(-3deg)}6%,14%,22%{transform:rotate(3deg)}34%,78%{transform:translate(-14px,-34px) rotate(-24deg)}90%,100%{transform:none}}
.ofx-tag{animation:ofxTag 5s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes ofxTag{0%,30%{transform:translate(116px,120px) scale(.3) rotate(0);opacity:0}42%{transform:translate(196px,46px) scale(1.08) rotate(10deg);opacity:1}50%,76%{transform:translate(200px,52px) scale(1) rotate(8deg);opacity:1}86%,100%{transform:translate(116px,120px) scale(.3);opacity:0}}
.ofx-cp{animation:ofxCp 5s cubic-bezier(.3,1.4,.5,1) infinite}
@keyframes ofxCp{0%,34%{transform:translate(112px,120px) scale(.3) rotate(0);opacity:0}46%{transform:translate(22px,40px) scale(1.06) rotate(-12deg);opacity:1}54%,76%{transform:translate(26px,46px) scale(1) rotate(-10deg);opacity:1}86%,100%{transform:translate(112px,120px) scale(.3);opacity:0}}
.ofx-cf rect{transform-box:fill-box;transform-origin:center;opacity:0;animation:ofxCf 5s ease-out infinite}
.ofx-cf rect:nth-child(1){--x:-90px;--y:-70px;--r:200deg}.ofx-cf rect:nth-child(2){--x:-40px;--y:-95px;--r:-160deg}.ofx-cf rect:nth-child(3){--x:10px;--y:-100px;--r:240deg}.ofx-cf rect:nth-child(4){--x:60px;--y:-85px;--r:-220deg}.ofx-cf rect:nth-child(5){--x:100px;--y:-55px;--r:180deg}.ofx-cf rect:nth-child(6){--x:-110px;--y:-30px;--r:-200deg}
@keyframes ofxCf{0%,30%{opacity:0;transform:translate(0,0) rotate(0)}34%{opacity:1}70%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}82%,100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 40px)) rotate(var(--r))}}
.ofx-sp path{transform-box:fill-box;transform-origin:center;animation:ofxTw 2.4s ease-in-out infinite}.ofx-sp path:nth-child(2){animation-delay:1.2s}@keyframes ofxTw{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1.15);opacity:1}}
/* onglets et cartes d'offres */
section[data-view="offres"] .of-tabs button{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
section[data-view="offres"] .of-tabs button:hover{transform:translateY(-2px)}
section[data-view="offres"] .vip-list>*{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
section[data-view="offres"] .vip-list>*:hover{transform:translateY(-6px) rotate(-.3deg);box-shadow:0 26px 44px -26px rgba(20,21,26,.55)}
section[data-view="offres"] .vip-list>*:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:ofxSweep 6s ease-in-out infinite}
section[data-view="offres"] .vip-list>*:nth-child(2):after{animation-delay:1.5s}section[data-view="offres"] .vip-list>*:nth-child(3):after{animation-delay:3s}section[data-view="offres"] .vip-list>*:nth-child(4):after{animation-delay:4.5s}
@keyframes ofxSweep{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
section[data-view="offres"] .vip-list img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}section[data-view="offres"] .vip-list>*:hover img{transform:scale(1.06)}
.ofx-flash{animation:ofxFlash 1.2s ease}@keyframes ofxFlash{30%{box-shadow:0 0 0 4px #ffd400}}
@media (min-width:961px) and (max-width:1220px){.ofx-chips>span:nth-child(3){display:none}.ofx-art svg{max-width:180px}}
@media (max-width:960px){.ofx-hero{grid-template-columns:1fr;padding:16px}.ofx-art{order:-1}.ofx-art svg{max-width:170px}}
@media (max-width:560px){.ofx-hero{border-radius:20px}.ofx-hero h2{font-size:1.35rem}.ofx-chips>span:nth-child(3){display:none}.ofx-cta{display:grid;grid-template-columns:1fr 1fr}.ofx-cta .ofx-b{justify-content:center;font-size:.82rem;padding:10px 8px;text-align:center}.ofx-cta .ofx-b.pri{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.ofx-bg i,.ofx-hero h2 em,section[data-view="offres"] .vip-list>*:after{animation:none!important}}