@font-face{font-family:Lexend;font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/lexend-latin.woff2) format('woff2-variations')} :root{color-scheme:light;--paper:#EDF0F6;--surface:#fff;--soft:#F3F6FB;--ink:#0E1628;--ink2:#343B4B;--ink3:#676E80;--line:#E3E9F2; --brand:#1873BF;--sky:#3AAEEF;--mark:#0B4F82;--bar:#2F86D6;--bar2:#9CC9EE;--good:#2E9E6B;--bad:#D24C5A; --shadow:0 1px 2px rgba(14,22,40,.04),0 8px 24px -14px rgba(14,22,40,.16);--glass:rgba(255,255,255,.7)} html.dark{color-scheme:dark;--paper:#0B0F18;--surface:#151B28;--soft:#1B2332;--ink:#EEF2F9;--ink2:#BEC7D6;--ink3:#8B94A6;--line:#283246; --brand:#5EB2F0;--mark:#2F72CF;--bar:#4FA3EA;--bar2:#2A5B8A;--good:#4CC08A;--bad:#F07A86; --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -16px rgba(0,0,0,.6);--glass:rgba(35,47,70,.85)} *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink2);font:15px/1.6 Lexend,system-ui,sans-serif;-webkit-font-smoothing:antialiased} a{color:var(--brand)} .wrap{max-width:76rem;margin:0 auto;padding:0 16px 48px} .bar{position:sticky;top:12px;z-index:10;display:flex;justify-content:center;padding:12px 0} .capsule{display:flex;align-items:center;gap:10px;width:100%;max-width:76rem;padding:8px 8px 8px 16px;border-radius:999px;background:var(--glass); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow)} .logo{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:700;font-size:1.15rem;text-decoration:none} .logo svg{width:28px;height:28px}.logo .eu{color:var(--sky);font-weight:500} .tag{margin-left:4px;font-size:.78rem;color:var(--ink3)} .sp{flex:1} .who{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink2)} .who img{width:28px;height:28px;border-radius:50%} .icon{width:36px;height:36px;border:0;border-radius:999px;background:transparent;color:var(--ink2);display:grid;place-items:center;cursor:pointer} .icon:hover{background:var(--soft)} .out{font-size:.85rem;color:var(--ink3);text-decoration:none;padding:6px 10px;border-radius:999px}.out:hover{background:var(--soft);color:var(--ink)} h1{margin:22px 0 4px;color:var(--ink);font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:600;letter-spacing:-.01em} .sub{margin:0 0 18px;color:var(--ink3)} .filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px} .seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow)} .seg button{border:0;background:transparent;color:var(--ink2);font:inherit;font-size:.88rem;padding:7px 14px;border-radius:999px;cursor:pointer} .seg button[aria-pressed="true"]{background:var(--brand);color:#fff} .grid{display:grid;gap:14px} .kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .card{background:var(--surface);border-radius:1.1rem;box-shadow:var(--shadow);padding:18px 20px;min-width:0} .kpi .n{font-size:2rem;font-weight:600;color:var(--ink);line-height:1.1} .kpi .k{font-size:.86rem;color:var(--ink3);margin-top:4px} .kpi .d{font-size:.8rem;margin-top:6px;color:var(--ink3)} .up{color:var(--good)}.down{color:var(--bad)} .two{grid-template-columns:1fr} @media(min-width:900px){.two{grid-template-columns:3fr 2fr}} h2{margin:0 0 4px;font-size:1.02rem;font-weight:600;color:var(--ink)} .hint{margin:0 0 12px;font-size:.82rem;color:var(--ink3)} .sec{margin:26px 0 12px;font-size:1.25rem;color:var(--ink);font-weight:600} svg.chart{display:block;width:100%;height:auto;overflow:visible} .hbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;font-size:.86rem} .hbar .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)} .hbar .val{color:var(--ink);font-variant-numeric:tabular-nums;text-align:right} .hbar .track{grid-column:1/3;height:8px;border-radius:4px;background:var(--soft);margin-bottom:6px} .hbar .fill{height:100%;border-radius:4px;background:var(--bar)} table{width:100%;border-collapse:collapse;font-size:.88rem} th{text-align:left;font-weight:500;color:var(--ink3);font-size:.78rem;padding:6px 8px;border-bottom:1px solid var(--line)} td{padding:8px;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:middle} tr:last-child td{border-bottom:0} td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)} .u{display:flex;align-items:center;gap:8px;min-width:0} .u img,.u .ph{width:26px;height:26px;border-radius:50%;flex:none;background:var(--soft)} .u span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.76rem;background:var(--soft);color:var(--ink2)} .note{border-radius:1rem;padding:12px 16px;background:var(--soft);color:var(--ink2);font-size:.86rem;margin-bottom:14px} .empty{color:var(--ink3);font-size:.88rem;padding:10px 0} .tip{position:fixed;pointer-events:none;z-index:50;background:var(--ink);color:var(--paper);font-size:.8rem;padding:6px 10px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-120%);opacity:0;transition:opacity .1s} .legend{display:flex;gap:14px;font-size:.8rem;color:var(--ink3);margin-bottom:6px} .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px} .scroll{overflow-x:auto} #t-recent table{min-width:620px} @media(max-width:380px){.seg button{padding:7px 10px;font-size:.82rem}.logo span{display:none}} @media(max-width:640px){.tag,.who span{display:none}.capsule{padding-left:12px}.out{padding:6px 8px}.kpi .n{font-size:1.6rem}} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} html{color-scheme:light;--paper:#EEF1F5;--surface:#FFFFFF;--soft:#E4E9EF;--ink:#0E1628;--ink2:#343B4B;--ink3:#5B6577;--line:#D8DEE6; --brand:#1873BF;--acc:#3AAEEF;--acct:#1468B0;--acc2:#1873BF;--mark:#0B4F82;--bar:#3AAEEF;--good:#1E8A5A;--bad:#C93A4B;--shadow:0 1px 2px rgba(14,22,40,.05),0 10px 30px -18px rgba(14,22,40,.25); --deep:#E9EDF2;--rd:#9AA3B0;--rdbg:#fff;--uline:#C5CCD6;--hov:#F7F9FB;--btnh:#D7DDE6;--barbg:rgba(238,241,245,.88);--stripe:rgba(14,22,40,.03);--glow:rgba(58,174,239,.16);--draft:#9A6700;--stage:radial-gradient(circle at 50% 38%,#F4F8FD,#D3E1F0);--blob:#DCEAF7} html.dark{color-scheme:dark;--paper:#101216;--surface:#171A20;--soft:#20242C;--ink:#F3F5F8;--ink2:#C4CAD4;--ink3:#959CA9;--line:#262B34; --brand:#3AAEEF;--acc:#3AAEEF;--acct:#3AAEEF;--acc2:#1873BF;--mark:#2F72CF;--bar:#3AAEEF;--good:#4CC08A;--bad:#F07A86;--shadow:none; --deep:#0D0F13;--rd:#4A505B;--rdbg:#0B0D10;--uline:#2E333D;--hov:#1B1F26;--btnh:#2A303A;--barbg:rgba(16,18,22,.86);--stripe:rgba(255,255,255,.018);--glow:rgba(58,174,239,.13);--draft:#F5CF7A;--stage:#0D0F13;--blob:#1A2333} body{font:16px/1.6 Barlow,system-ui,sans-serif;background:var(--paper); } /* Fond rayé sur un calque fixe à part : le navigateur ne le repeint plus à chaque défilement (fluidité, surtout sur grand écran zoomé). */ html{overflow-x:clip} body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(60rem 30rem at 85% -10%,var(--glow),transparent 60%),repeating-linear-gradient(135deg,var(--stripe) 0 2px,transparent 2px 14px)} body{overflow-x:clip} h1,h2,h3,.cond,.hh1{font-family:'Oxanium',Barlow,sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--ink)} h1,.hh1{font-weight:800;line-height:.92}.hh1{position:relative;width:fit-content;max-width:100%}.logo .eu{color:var(--acct)}h2{font-size:1.5rem;font-weight:800;margin:0 0 10px} a{color:var(--acct)} /* barre du haut */ .bar{top:0;padding:0;background:var(--barbg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:0} @media(min-width:1600px){.bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--paper) 96%,transparent)}.mdl,html.dark .mdl{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.mdl{background:rgba(8,10,14,.78)}html.dark .mdl{background:rgba(1,2,4,.93)}} .capsule{border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:12px 16px;gap:4px} .logo{font-family:'Oxanium',sans-serif;font-size:1.45rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em} .tag{display:inline-flex;align-items:center;line-height:1;font-family:'Oxanium',sans-serif;text-transform:uppercase;font-weight:800;font-size:1.45rem;color:var(--acct);margin-left:10px;padding-left:12px;border-left:2px solid var(--line)} .out{font-family:'Oxanium',sans-serif;text-transform:uppercase;font-weight:700;font-size:1rem;letter-spacing:.04em;color:var(--ink3);border-radius:0;padding:6px 10px} .out:hover{background:none;color:var(--ink)} .who{font-size:.92rem}.who img{border-radius:2px} /* boutons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:0;padding:12px 22px;font:800 1.05rem/1 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border:0;cursor:pointer;transition:filter .2s,background .2s,color .2s} .btn:disabled{opacity:.5;cursor:not-allowed} .btn-primary{background:linear-gradient(180deg,#2A98DD 0%,#2A98DD 45%,#1468B0 100%);color:#fff}.btn-primary:hover{filter:brightness(1.12)} .btn-line{background:var(--soft);color:var(--ink)}.btn-line:hover{background:var(--btnh)} .btn-discord{background:#5865F2;color:#fff}.btn-discord:hover{filter:brightness(1.1)} .btn-sm{padding:8px 12px;font-size:.92rem} .buy{width:100%;padding:22px;font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:.1em} .card{border-radius:2px;background:var(--surface);box-shadow:var(--shadow)} .icon{border-radius:0}.icon:hover{background:none;color:var(--ink)} .kpi .n{font-family:'Oxanium',sans-serif;font-weight:800;font-size:2.3rem} .sec{font-family:'Oxanium',sans-serif;text-transform:uppercase;font-weight:800;font-size:1.6rem;letter-spacing:.02em} .hint{font-size:.9rem} /* catalogue */ .hero{margin:44px 0 26px}.hero h1,.hero .hh1{font-size:clamp(3.2rem,11vw,7.5rem);margin:0} .hero p{margin:14px 0 0;color:var(--ink2);max-width:40rem;font-size:1.08rem} .hero.big{display:grid;align-items:center;gap:10px;margin:26px 0 30px}@media(min-width:900px){.hero.big{grid-template-columns:1.4fr 1fr}} .bag-hero{position:relative;width:100%;max-width:27rem;aspect-ratio:5/4;margin:0 auto} .bag-hero .lyr{position:absolute;inset:0;pointer-events:none;will-change:transform} .bag-hero .lyr>svg{display:block;width:100%;height:100%;overflow:visible} .bag-hero .stage{position:absolute;inset:10% 2% 6% 10%;background:var(--stage);clip-path:polygon(9% 0,100% 0,91% 100%,0 100%)} html.dark .bag-hero .stage{background:#1A1E26} .bag-hero .stage::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(58,174,239,.09) 0 2px,transparent 2px 13px)} @keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -8px}} .bag-hero .hpp,.bag-hero .coin,.bag-hero .hbadge{position:absolute;animation:flotte 6s ease-in-out infinite} .bag-hero .hpp{right:3%;top:4%;rotate:8deg;animation-delay:.6s}.bag-hero .hpp .logo-tile{height:34px;box-shadow:0 14px 26px -12px rgba(14,22,40,.55)} .bag-hero .lyr>svg.coin{width:17%;height:auto} .bag-hero .coin.c1{left:0;top:58%;animation-delay:1.4s} /* Mascotte : Opi (la mascotte d'oparia.eu) en astronaute, qui dérive l'air choqué (bras en l'air, « ! », yeux qui cherchent), relié au sac par son câble. */ .bag-hero .lyr>svg.astro{position:absolute;left:-3%;top:-8%;width:46%;height:auto;overflow:visible} .astro .astro-b{transform-box:fill-box;transform-origin:50% 45%;animation:astro 7s ease-in-out infinite} .astro .astro-x{animation:astro-x 1.6s steps(2,jump-none) infinite} @media(max-width:640px){.bag-hero .lyr>svg.astro{top:3%;left:0;width:40%}} .astro .suit{stroke:#EEF2F7}.astro .suit-d{stroke:#AEBACB}.astro .rim{stroke:#EEF2F7} html:not(.dark) .astro .suit{stroke:#F7F9FB}html:not(.dark) .astro .suit-d{stroke:#8E9DB2}html:not(.dark) .astro .rim{stroke:#C9D3E0} .astro .oa-h1,.astro .oa-h2,.astro .oa-f1,.astro .oa-f2{transform-box:fill-box;transform-origin:center} .astro .oa-h1{animation:oa-bob 3.1s ease-in-out infinite}.astro .oa-h2{animation:oa-bob 3.6s -1.2s ease-in-out infinite} .astro .oa-f1{animation:oa-bob 3.4s -.6s ease-in-out infinite}.astro .oa-f2{animation:oa-bob 2.9s -2s ease-in-out infinite} @keyframes oa-bob{0%,100%{translate:0 0}50%{translate:0 -6px}} @keyframes astro{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(4px,-10px) rotate(3deg)}} @keyframes astro-x{0%{opacity:1}100%{opacity:.35}} .astro .opi-pup{animation:opi-look 4.2s steps(1,end) infinite} @keyframes opi-look{0%,38%{transform:none}40%,62%{transform:translateX(-7px)}64%,86%{transform:translateX(7px)}88%,100%{transform:none}} .bag-hero .lyr>svg.hdeco{position:absolute;inset:0} .hdeco .fl{animation:flotte 6.5s ease-in-out infinite}html:not(.dark) .hdeco [stroke="#fff"]{stroke:#9FB0C6}html:not(.dark) .hdeco [fill="#fff"]{fill:#9FB0C6} .bag-hero .coin.c2{width:14%;left:20%;bottom:2%;rotate:-8deg;animation-delay:2.6s} .hbadge{right:0;top:40%;display:inline-flex;align-items:center;gap:6px;padding:6px 16px 6px 18px;rotate:-6deg;background:linear-gradient(180deg,#FFD45C,#F5B82E);color:#2A1A00;font:800 1rem/1 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.08em;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);animation-delay:2s} .hcard{position:absolute;pointer-events:auto;border-radius:2px;background:var(--surface);box-shadow:0 22px 40px -18px rgba(11,79,130,.45),0 2px 6px rgba(14,22,40,.06)} html.dark .hcard{box-shadow:0 22px 40px -18px rgba(0,0,0,.8)} .hc1{left:0;top:0;width:56%;padding:6px} .hc1 .t{margin:4px 4px 6px;padding:1px 8px;border-left:3px solid var(--acc);font:800 .95rem/1.2 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)} .hrow{display:flex;align-items:center;gap:8px;padding:5px 6px;text-decoration:none;color:var(--ink);transition:background .2s} a.hrow:hover{background:var(--soft)} .hrow .ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:2px;background:var(--stage)} .hrow .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:.86rem} .hrow b{font:800 1.05rem/1 'Oxanium',sans-serif;white-space:nowrap} .hc2{right:4%;bottom:0;width:54%;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 16px;background:#0E1628;color:#fff;border-left:4px solid var(--acc)}html.dark .hc2{background:#202B42} .hc2 .on{flex:none;width:10px;height:10px;background:#3BD07A;transform:rotate(45deg)} .hc2 b{display:block;font:800 1.05rem/1.1 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.04em}.hc2 span{font-size:.78rem;color:rgba(255,255,255,.7)} @media(prefers-reduced-motion:reduce){.bag-hero .hpp,.bag-hero .coin,.bag-hero .hbadge,.astro .astro-b,.astro .astro-x,.astro .opi-pup,.astro .oa-h1,.astro .oa-h2,.astro .oa-f1,.astro .oa-f2,.hdeco .fl{animation:none}} @media(max-width:640px){.bag-hero{max-width:20rem;aspect-ratio:10/9}.hc1{width:68%}.hc2{width:70%;right:0}.bag-hero .coin.c1{left:0;top:44%}.bag-hero .coin.c2{left:3%;bottom:16%}.hbadge{font-size:.85rem;padding:5px 12px 5px 14px}.bag-hero .hpp .logo-tile{height:28px;min-width:52px}} .how{display:grid;gap:12px;margin:10px 0 40px}@media(min-width:760px){.how{grid-template-columns:repeat(3,1fr)}} .how>div{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--surface);box-shadow:var(--shadow)} .how .n{font:800 2.6rem/1 'Oxanium',sans-serif;color:transparent;-webkit-text-stroke:1.5px var(--ink3)} .how svg{flex:none;color:var(--acct)}.how b{display:block;font:800 1.25rem/1.1 'Oxanium',sans-serif;text-transform:uppercase;color:var(--ink)}.how span{font-size:.92rem;color:var(--ink3)} .paystrip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:44px}.paystrip .logo-tile{height:32px;min-width:52px;font-size:.9rem} .paystrip .lbl{width:100%;text-align:center;font:700 .95rem 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);margin-bottom:4px} .ghost{color:var(--ink);-webkit-text-fill-color:transparent;-webkit-text-stroke:2px #7A8190} .tabs{display:flex;gap:4px 22px;flex-wrap:wrap;margin-bottom:22px;border-bottom:2px solid var(--line)} .tabs button{border:0;background:none;color:var(--ink3);font:700 1.15rem/1 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:10px 0 12px;margin-bottom:-2px;border-bottom:3px solid transparent;cursor:pointer} .tabs button:hover{color:var(--ink)}.tabs button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--acc)} .products{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))} .prod{position:relative;display:flex;flex-direction:column;gap:10px;padding:0 0 20px;height:100%;text-decoration:none;color:inherit;background:var(--surface);box-shadow:var(--shadow);border-bottom:4px solid var(--soft);transition:border-color .2s,background .2s,transform .2s;overflow:hidden} .prod:hover{border-bottom-color:var(--acc);background:var(--hov);transform:translateY(-3px)} .prod>:not(.art):not(.ribbon){margin-left:22px;margin-right:22px} .prod .art{display:block;width:100%;aspect-ratio:400/220;height:auto;background:var(--stage);margin-bottom:6px;transition:transform .35s}.prod:hover .art{transform:scale(1.04)} .prod h3{margin:0;font-size:1.9rem;font-weight:800;line-height:1} .prod .desc{margin:0;color:var(--ink3);font-size:.95rem;flex:1;white-space:pre-line} .prod .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px} .prod .price{font-family:'Oxanium',sans-serif;font-size:2.2rem;font-weight:800;color:var(--ink);line-height:1} .prod .go{font-family:'Oxanium',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--acct)} .meta{font-family:'Oxanium',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;color:var(--ink3)} .meta i{font-style:normal;color:var(--acct);margin:0 8px} .ribbon{position:absolute;z-index:1;top:0;right:0;padding:5px 14px 5px 20px;background:var(--acc);color:#06121C;font:800 .9rem/1.2 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.06em;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%)} .draft{color:var(--draft)} .chip{font-family:'Oxanium',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.85rem;color:var(--ink3)} .chip.draft{color:var(--draft)} /* page produit */ .back{display:inline-block;margin-top:22px;font-family:'Oxanium',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);text-decoration:none}.back:hover{color:var(--ink)} .pp{display:grid;gap:34px;margin-top:18px} @media(min-width:960px){.pp{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px}.pp-info{position:sticky;top:90px;align-self:start}} .pp-info h1{font-size:clamp(3rem,7vw,5.6rem);margin:10px 0 0;overflow-wrap:anywhere} .pp-info .art{display:block;width:100%;height:auto;aspect-ratio:400/240;background:var(--stage);box-shadow:var(--shadow);margin-bottom:22px} .bigprice{font-family:'Oxanium',sans-serif;font-weight:800;font-size:clamp(2.6rem,5vw,3.6rem);color:var(--acct);line-height:1;margin:16px 0 18px} .pp-info .desc{white-space:pre-line;color:var(--ink2);font-size:1.05rem;margin:0} .pp-info .note{color:var(--ink3);font-size:.95rem;margin:18px 0 0;padding:0 0 0 14px;background:none;border:0;border-left:3px solid var(--acc);border-radius:0;box-shadow:none} .panel{background:var(--surface);box-shadow:var(--shadow);padding:30px clamp(18px,4vw,40px) 34px} .panel>h2{font-size:clamp(2.4rem,6vw,4rem);line-height:.92;margin:0 0 12px} .panel .for{color:var(--ink3);margin:0 0 26px}.panel .for b{color:var(--ink)} .blk{margin:0 0 26px}.blk>h3{font-size:1.35rem;font-weight:800;margin:0 0 14px} .band{margin:0 calc(-1 * clamp(18px,4vw,40px)) 26px;padding:24px clamp(18px,4vw,40px);background:var(--deep)} .opt{display:flex;align-items:center;gap:16px;padding:9px 0;cursor:pointer} .opt .txt{font-family:'Oxanium',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.15rem;color:var(--ink2)} .opt .sm{font-size:.95rem;color:var(--ink3)} .opt .mb{display:flex;flex-direction:column;gap:6px} .opt:hover .txt,.opt input:checked~.txt{color:var(--ink)} .logos{display:flex;flex-wrap:wrap;gap:8px} .logo-tile{box-shadow:0 0 0 1px rgba(14,22,40,.08);display:inline-flex;align-items:center;justify-content:center;gap:3px;height:38px;min-width:62px;padding:0 10px;border-radius:3px;font:italic 800 1.05rem/1 Barlow,sans-serif} .logo-tile svg{display:block} input.rd{appearance:none;-webkit-appearance:none;flex:none;width:30px;height:30px;margin:0;border-radius:50%;border:2px solid var(--rd);background:var(--rdbg);cursor:pointer;transition:border-color .15s} input.rd:hover{border-color:var(--ink3)} input.rd:checked{border-color:var(--ink);background:radial-gradient(circle,var(--acc) 0 7px,var(--rdbg) 8px)} input.rd:focus-visible,input.ck:focus-visible{outline:2px solid var(--acc);outline-offset:3px} input.ck{appearance:none;-webkit-appearance:none;flex:none;width:28px;height:28px;margin:0;border:2px solid var(--rd);background:var(--rdbg);cursor:pointer} input.ck:checked{border-color:var(--acc);background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306121C' stroke-width='3.5' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/20px no-repeat} #pay{margin-top:18px} .ppnote{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--surface);border-left:4px solid #0079C1;color:var(--ink2);font-size:.98rem;line-height:1.5} .ppnote>b{font:800 1.15rem/1.1 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)} .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px} .field label{font-family:'Oxanium',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:1.05rem;color:var(--ink)} .field label small,.field>small{font-family:Barlow,sans-serif;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink3);font-size:.85rem} .field input,.field textarea,.field select{font:inherit;font-size:1rem;color:var(--ink);background:var(--deep);border:0;border-radius:0;padding:13px 14px;width:100%;box-shadow:inset 0 -2px 0 var(--uline)} .field textarea{resize:none;min-height:9rem} /* Ce que le client tape : police « jeu » (angles coupés), comme les champs de carte Stripe. */ .field input:not([type=radio]):not([type=checkbox]),.field textarea{font-family:'Chakra Petch',Barlow,sans-serif;font-weight:500;letter-spacing:.02em} .field input::placeholder,.field textarea::placeholder{font-family:'Chakra Petch',Barlow,sans-serif;color:var(--ink3);opacity:.8} .field input:focus,.field textarea:focus,.field select:focus{outline:0;box-shadow:inset 0 -2px 0 var(--acc)} .radios{display:flex;gap:8px;flex-wrap:wrap}.radios label{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--soft);cursor:pointer;font:600 1rem Barlow,sans-serif;text-transform:none;letter-spacing:0;color:var(--ink);white-space:nowrap} .radios input{accent-color:var(--acc)} .field input[type=radio],.field input[type=checkbox],.check input{width:auto;padding:0;flex:none;box-shadow:none} .check{display:flex;gap:14px;align-items:flex-start;font-size:.95rem;color:var(--ink2);margin-bottom:16px;cursor:pointer}.check input{accent-color:var(--acc)}.check input.ck{width:28px;height:28px;margin:0}.check span{padding-top:2px} .total{display:flex;justify-content:space-between;align-items:baseline;margin:24px 0 16px;font-family:'Oxanium',sans-serif;text-transform:uppercase;font-weight:700;letter-spacing:.05em;font-size:1.2rem;color:var(--ink3)} .total b{font-size:2.4rem;font-weight:800;color:var(--ink);letter-spacing:0} .err{color:var(--bad);font-size:.95rem;min-height:1.2em;margin:10px 0} /* Validation : bordure rouge nette et message sous le champ (même style que le reste : angles vifs, pas de lueur). */ .field input.bad,.field textarea.bad{box-shadow:inset 0 0 0 2px var(--bad)}.check input.bad{outline:2px solid var(--bad);outline-offset:2px} .ferr{position:relative;margin:6px 0 0;padding:5px 10px 5px 12px;font-size:.85rem;font-weight:600;color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent);border-left:3px solid var(--bad)} .check+.ferr{margin:-4px 0 10px} .btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.4)} /* Boutons d'action : icône + texte, flèche qui avance au survol, état « Traitement en cours… » avec un losange qui tourne. */ .wnext,.buy{display:inline-flex;align-items:center;justify-content:center;gap:10px} .wnext .ic,.buy .ic{width:1.05em;height:1.05em;flex:none} /* Cadenas au survol : l'anse se soulève (déverrouillé), puis retombe et claque ; le corps encaisse d'un petit rebond. */ .wnext .ic,.buy .ic{overflow:visible}.wnext .ic path,.wnext .ic rect,.buy .ic path,.buy .ic rect{transform-box:fill-box} .wnext .ic path,.buy .ic path{transform-origin:100% 100%}.wnext .ic rect,.buy .ic rect{transform-origin:50% 100%} .btn:not([disabled]):hover .ic path{animation:lk-anse .7s cubic-bezier(.3,0,.3,1)} .btn:not([disabled]):hover .ic rect{animation:lk-corps .7s cubic-bezier(.3,0,.3,1)} @keyframes lk-anse{0%{transform:none}30%{transform:translateY(-3px) rotate(-28deg)}55%{transform:translateY(-3px) rotate(-28deg)}75%{transform:translateY(1px)}88%{transform:translateY(-1px)}100%{transform:none}} @keyframes lk-corps{0%,70%{transform:none}78%{transform:scale(1.12,.86)}90%{transform:scale(.96,1.05)}100%{transform:none}} @media(prefers-reduced-motion:reduce){.btn:hover .ic path,.btn:hover .ic rect{animation:none}} .wnext .arw{display:inline-block;transition:transform .18s}.wnext:hover .arw{transform:translateX(4px)} .btn-primary:not([disabled]):hover{filter:brightness(1.12);transform:translateY(-1px)}.btn-primary:not([disabled]):active{transform:translateY(1px)} .btn.loading{opacity:1;filter:none;cursor:progress} .spin{width:14px;height:14px;flex:none;border:3px solid currentColor;border-right-color:transparent;transform:rotate(45deg);animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(405deg)}} @media(prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}} .tsbox:not(:empty){margin:4px 0 12px} .free-tag{display:inline-block;position:relative;padding:6px 18px 6px 20px;background:#FF8A2B;color:#2A1200;font:800 1.05rem/1 'Oxanium',sans-serif;letter-spacing:.12em;text-transform:uppercase;clip-path:polygon(9px 0,100% 3px,calc(100% - 10px) 100%,0 calc(100% - 4px));box-shadow:none} .free-tag::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 46%,rgba(255,255,255,.5) 53%,transparent 61%) no-repeat;background-size:260% 100%;background-position:120% 0;animation:bv-shine2 2.8s 1s cubic-bezier(.5,0,.3,1) infinite} .free-tag.big{font-size:1.5rem;padding:8px 26px 8px 28px} .free-panel{position:relative}.free-big{display:inline-block;margin:0 0 14px;padding:8px 28px 8px 30px;background:#FF8A2B;color:#2A1200;font:800 1.6rem/1 'Oxanium',sans-serif;letter-spacing:.14em;text-transform:uppercase;rotate:-3deg;clip-path:polygon(12px 0,100% 4px,calc(100% - 14px) 100%,0 calc(100% - 5px));filter:drop-shadow(8px 7px 0 rgba(255,138,43,.3))} .mdl.hw .hw-deco{position:absolute;inset:0;pointer-events:none;z-index:4} .hw-deco>*{position:absolute} .hw-web{left:0;top:0;width:110px;height:110px;z-index:4} .hw-hang{top:0;display:flex;flex-direction:column;align-items:center;transform-origin:top center;animation:hw-swing 3.6s ease-in-out infinite} .hw-hang i{width:1.5px;height:var(--l,60px);background:rgba(255,255,255,.55)}.hw-hang svg{width:40px;height:40px;margin-top:-5px} .hw-hang.h1{left:46%;--l:-46px;top:-6px}.hw-hang.h2{right:22%;--l:-30px;top:-6px;animation-duration:4.4s;animation-delay:-1.3s} .hw-hang.h1{--l:150px;top:-110px}.hw-hang.h2{--l:96px;top:-70px} .hw-hang .lg{animation:hw-legs .5s steps(2,end) infinite} @keyframes hw-swing{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(10px)}} @keyframes hw-legs{50%{transform:scaleY(.86);transform-origin:20px 22px}} .hw-bat{width:60px;height:30px}.hw-bat .w{transform-origin:30px 16px;animation:hw-flap .32s ease-in-out infinite alternate} .hw-bat.b1{left:-90px;top:12%;animation:hw-fly 7s ease-in-out infinite}.hw-bat.b2{right:-84px;top:36%;width:48px;animation:hw-fly 8.5s -2s ease-in-out infinite reverse}.hw-bat.b3{left:-56px;bottom:14%;width:38px;animation:hw-fly 6s -4s ease-in-out infinite} @keyframes hw-flap{to{transform:scaleY(.35)}} @keyframes hw-fly{0%,100%{translate:0 0;rotate:-6deg}25%{translate:14px -18px;rotate:4deg}50%{translate:-6px -30px;rotate:-2deg}75%{translate:10px -10px;rotate:6deg}} .hw-ghost{right:-64px;bottom:12%;width:54px;height:62px;opacity:.92;animation:hw-ghost 5s ease-in-out infinite} @keyframes hw-ghost{0%,100%{translate:0 0;rotate:4deg}50%{translate:-8px -16px;rotate:-4deg}} .hw-pump{left:-30px;bottom:-26px;width:74px;height:62px;rotate:-10deg;animation:hw-bob 3s ease-in-out infinite} @keyframes hw-bob{50%{translate:0 -6px;rotate:-4deg}} .hw-dot{width:8px;height:8px;background:#FF8A2B;transform:rotate(45deg);animation:hw-tw 2.6s ease-in-out infinite}.hw-dot.d1{right:-30px;top:10%}.hw-dot.d2{left:-24px;top:54%;background:#8B5CF6;animation-delay:-.9s}.hw-dot.d3{right:16%;bottom:-22px;background:#fff;animation-delay:-1.7s} @keyframes hw-tw{50%{opacity:.25;transform:rotate(45deg) scale(.6)}} /* Boutons en mode Halloween : orange franc, bandes violettes en biais qui défilent au survol. */ .mdl.hw .btn-primary{position:relative;overflow:hidden;background:#1A1424;color:#FFA463;box-shadow:inset 4px 0 0 #FF8A2B;transition:transform .15s,box-shadow .15s,background .15s} .mdl.hw .btn-primary::after{content:'';position:absolute;left:0;right:0;top:30%;height:5px;background:#FF8A2B;opacity:0;pointer-events:none} .mdl.hw .btn-primary:not([disabled]):is(:hover,:focus-visible){filter:none;background:#221A2E;color:#FFB27A;transform:translate(3px,-2px);box-shadow:inset 4px 0 0 #FF8A2B,-5px 4px 0 #8B5CF6;animation:hw-bug .3s steps(1,end)} .mdl.hw .btn-primary:not([disabled]):is(:hover,:focus-visible) .lbl{animation:hw-rgb .3s steps(1,end) forwards} .mdl.hw .btn-primary:not([disabled]):is(:hover,:focus-visible)::after{animation:hw-slice .3s steps(1,end)} @keyframes hw-bug{0%{transform:translate(-4px,1px) skewX(-6deg)}25%{transform:translate(5px,-1px)}50%{transform:translate(-2px,0) skewX(4deg)}75%{transform:translate(4px,-3px)}} @keyframes hw-rgb{0%{text-shadow:-3px 0 #8B5CF6,3px 0 #FF8A2B}35%{text-shadow:2px 0 #8B5CF6,-2px 0 #FF8A2B}70%{text-shadow:-2px 1px #8B5CF6,1px 0 #FF8A2B}100%{text-shadow:-1px 0 rgba(139,92,246,.8)}} @keyframes hw-slice{0%{opacity:.85;top:22%}30%{opacity:.6;top:64%;height:3px}60%{opacity:.8;top:40%;height:7px}90%{opacity:0}} .mdl.hw .cg-free{background:#FF8A2B;color:#1A1424}.mdl.hw .cg-price{background:#8B5CF6;color:#fff} @media(prefers-reduced-motion:reduce){.mdl.hw .btn-primary,.mdl.hw .btn-primary *,.mdl.hw .btn-primary::after{animation:none!important}} .mdl.hw .btn-line:hover{background:#2A2440;color:#fff} .hw-spider{position:absolute;left:0;top:0;z-index:70;width:26px;height:26px;pointer-events:none;will-change:transform} .hw-spider svg{width:100%;height:100%;display:block}.hw-spider.walk .lg{animation:hw-legs .12s steps(2,end) infinite} @keyframes hw-run{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1;transform:translate(0,0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.9)}} @media(max-width:760px){.hw-bat,.hw-ghost,.hw-dot.d1,.hw-dot.d2{display:none}.hw-pump{left:6px}} @media(prefers-reduced-motion:reduce){.hw-deco *,.hw-spider{animation:none!important}} /* Thème Noël : voir src/shop/noelTheme.js */ .mdl.nl{background:rgba(3,6,12,.9)} .mdl.nl .mdl-box{--acc:#F6C445;--acct:#F6C445;--acc2:#D9263C;--brand:#F6C445;--paper:#232833;--surface:#2B313D;--deep:#1C2029;--soft:#343B48;--rdbg:#161A21;--rd:#5A6270;--ink:#F3F5F8;--ink2:#C4CAD4;--ink3:#A2AAB8;--line:#3A414E;--hov:#343B48;--uline:#4A5261;background:var(--paper);box-shadow:0 50px 140px -10px rgba(0,0,0,1)} @media(min-width:1121px){.mdl.nl .mdl-box{max-height:min(calc(86vh / var(--vz,1)),800px)}.mdl.nl .panel{padding-bottom:48px}.mdl.nl .pp-info .pad{padding-bottom:40px}} .mdl.nl .mdl-box::before{width:7px;background:repeating-linear-gradient(115deg,#D9263C 0 9px,#F3F5F8 9px 18px)} .mdl.nl .mdl-box :focus-visible{outline:2px solid #F6C445;outline-offset:2px} .mdl.nl .mdl-x{z-index:5;background:#F3F5F8;color:#141822} .mdl.nl .mdl-x:hover,.mdl.nl .mdl-x:focus-visible{background:repeating-linear-gradient(115deg,#D9263C 0 10px,#A81B2C 10px 20px) 0 0/200% 100%;color:#fff} canvas.nl-neige{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .mdl .pp-info .art.nl-art{aspect-ratio:400/262;background:#101626} .nl-tampon{position:absolute;left:18px;z-index:2;display:none;padding:6px 18px 6px 16px;background:#D9263C;color:#fff;font:800 .86rem/1 'Oxanium',sans-serif;letter-spacing:.12em;text-transform:uppercase;rotate:-3deg;clip-path:polygon(9px 0,100% 3px,calc(100% - 10px) 100%,0 calc(100% - 4px))} .mdl.nl .nl-tampon{display:block;top:calc(var(--nl-art,240px) - 40px)} .nl-tampon::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.45) 46%,rgba(255,255,255,.45) 53%,transparent 61%) no-repeat;background-size:260% 100%;background-position:120% 0;animation:bv-shine2 3.4s 1.4s cubic-bezier(.5,0,.3,1) infinite} .mdl.nl .bigprice{display:inline-block;margin:8px 0 12px;padding:6px 22px 6px 20px;background:#F6C445;color:#1A1405;font:800 1.5rem/1 'Oxanium',sans-serif;letter-spacing:.02em;rotate:-2deg;clip-path:polygon(9px 0,100% 3px,calc(100% - 10px) 100%,0 calc(100% - 4px))} .nl-liste{margin-top:14px} .nl-lt{display:block;margin-bottom:8px;font:800 .78rem/1 'Oxanium',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)} .nl-liste ul{display:grid;gap:3px;margin:0;padding:0;list-style:none} .nl-liste li{display:flex;align-items:center;gap:10px;min-height:29px;padding:1px 18px 1px 10px;background:var(--deep);border-left:3px solid #D9263C;font:700 .82rem/1.15 'Oxanium',sans-serif;color:var(--ink);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:translate .22s cubic-bezier(.3,1.5,.5,1),background .15s} .nl-liste li:nth-child(even){border-left-color:#F6C445} .nl-liste li:hover{translate:5px 0;background:var(--soft)} .nl-liste img{flex:none;width:24px;height:24px} .mdl.nl .bigprice:has(.free-tag){background:none;padding:0;clip-path:none;rotate:none} .mdl.nl :is(.free-tag,.free-big){background:#F6C445;color:#1A1405} .mdl.nl .free-tag::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 46%,rgba(255,255,255,.6) 53%,transparent 61%) no-repeat;background-size:260% 100%;background-position:120% 0} .mdl.nl .hpack{border-left-color:#D9263C}.mdl.nl .hpack::after{background:#F6C445} .mdl.nl .hpack::before{background:repeating-linear-gradient(115deg,rgba(246,196,69,.14) 0 10px,transparent 10px 24px) 0 0/52px 100%} .mdl.nl .with-pack .hpack{background:color-mix(in srgb,#F6C445 14%,var(--surface));border-left-color:#F6C445} .mdl.nl .hp-tag{background:#D9263C;color:#fff}.mdl.nl :is(.hp-price,.hp-link .hp-price){color:#F6C445} .mdl.nl .cg-free{background:#1A1405;color:#F6C445}.mdl.nl .cg-price{background:#1A1405;color:#F6C445} .prod:has(.nl-art) .free-tag,.prod:has(.nl-art):has(.free-tag)::after{background:#F6C445;color:#1A1405} .nl-cadre{position:absolute;inset:0;pointer-events:none;z-index:4} .nl-gw{position:absolute;left:-12px;right:-12px;top:-32px} .nl-guir{display:block;width:100%;height:auto;overflow:visible} .nl-lu{animation:nl-lu 2.7s steps(1,end) infinite}.nl-lu.n1{animation-delay:-.9s}.nl-lu.n2{animation-delay:-1.8s} @keyframes nl-lu{0%,100%{opacity:1}66%{opacity:.6}} .nl-front{position:absolute;left:0;right:0;bottom:0;display:block;pointer-events:none;width:100%} .nl-bois{position:absolute;bottom:calc(var(--nl-bas,100px) - 62px);width:460px;height:auto;pointer-events:none}.nl-bois.g{left:calc(50% - 860px)}.nl-bois.d{left:calc(50% + 400px)} .nl-bhn{position:absolute;left:-112px;bottom:-22px;width:118px;transform-origin:50% 100%} .nl-tas{position:absolute;right:-146px;bottom:-22px;width:158px;transform-origin:50% 100%} .nl-bhn svg,.nl-tas svg{display:block;width:100%;height:auto;overflow:visible} .nl-susp{position:absolute;inset:0 0 auto;height:0;pointer-events:none} .nl-f{position:absolute;top:-4px;left:calc(50% + var(--o))} .nl-p{display:block;width:var(--t);transform-origin:50% 0} .nl-p i{display:block;width:2px;height:var(--l);margin:0 auto -3px;background:rgba(243,245,248,.42)} .nl-p svg{display:block;width:100%;height:auto} .mdl.nl .btn-primary{position:relative;isolation:isolate;overflow:visible;background:#D9263C;color:#fff;box-shadow:inset 5px 0 0 #F6C445;transition:transform .26s cubic-bezier(.3,1.5,.5,1),box-shadow .18s,background .18s} .mdl.nl .btn-primary:not([disabled]):is(:hover,:focus-visible){filter:none;background:#E8434F;transform:translate(3px,-2px);box-shadow:inset 5px 0 0 #F6C445,-6px 5px 0 #F6C445} .mdl.nl .btn-primary:not([disabled]):active{transform:scale(.97);box-shadow:inset 5px 0 0 #F6C445,-2px 2px 0 #F6C445} .mdl.nl .btn-primary[disabled]{background:#3A2A30;color:#C4CAD4;box-shadow:inset 5px 0 0 #A81B2C} .mdl.nl .btn-primary[disabled] .nl-bt{opacity:.22}.mdl.nl .btn-primary[disabled] .nl-bt *{animation-play-state:paused}.mdl.nl .btn-primary[disabled] .nl-nd{filter:grayscale(1);opacity:.5} .mdl.nl .btn-primary.nl-ok[disabled]{background:#F6C445;color:#1A1405;box-shadow:inset 5px 0 0 #D9263C,-6px 5px 0 #D9263C;opacity:1} .mdl.nl .btn-primary.nl-ok .nl-bt{opacity:1}.mdl.nl .btn-primary.nl-ok .nl-bt *{animation-play-state:running}.mdl.nl .btn-primary.nl-ok .nl-rub{background:#D9263C;box-shadow:inset 3px 0 0 #A81B2C}.mdl.nl .btn-primary.nl-ok .nl-nd{filter:none;opacity:1} .nl-bt{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .nl-bt>*{position:absolute} .nl-pap{top:0;bottom:0;left:-40px;right:-40px;background:repeating-linear-gradient(115deg,rgba(0,0,0,.11) 0 16px,transparent 16px 32px);animation:nl-pap 3.4s linear infinite} @keyframes nl-pap{to{transform:translateX(35.31px)}} .nl-nv{inset:0}.nl-nv i{position:absolute;top:-8px;left:var(--x);width:var(--t);height:var(--t);background:#fff;opacity:.62;transform:rotate(45deg);animation:nl-nv var(--d) linear var(--w) infinite} @keyframes nl-nv{to{translate:var(--g) 86px}} .nl-rub{top:-6px;bottom:-6px;right:22px;width:13px;background:#F6C445;box-shadow:inset 3px 0 0 #D9A21F;transform:skewX(-25deg);transition:translate .34s cubic-bezier(.3,1.5,.5,1)} .btn-primary:not([disabled]):is(:hover,:focus-visible) .nl-rub{translate:-9px 0} .nl-gl{inset:-6px 0;background:linear-gradient(115deg,transparent 46%,rgba(255,255,255,.24) 46% 54%,transparent 54%);transform:translateX(-100%);animation:nl-gl 4.6s cubic-bezier(.5,0,.3,1) infinite} @keyframes nl-gl{0%{transform:translateX(-100%)}30%,100%{transform:translateX(100%)}} .nl-ray{top:-6px;bottom:-6px;left:0;width:72px;background:rgba(255,255,255,.1);transform:translateX(var(--nl-px,-100px)) skewX(-25deg);opacity:0;transition:opacity .2s} .btn-primary:not([disabled]):is(:hover,:focus-visible) .nl-ray{opacity:1} .nl-nd{position:absolute;top:-15px;right:0;z-index:1;width:42px;pointer-events:none;transform-origin:50% 90%}.nl-nd svg{display:block;width:100%;height:auto;overflow:visible} .nl-m{display:inline-block;white-space:nowrap}.nl-l{display:inline-block} .mdl.nl .hpack{transition:background .2s} .mdl.nl .hpack>.nl-pk{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .nl-pk>*{position:absolute} .nl-pk .g{inset:0;background:linear-gradient(115deg,transparent 46%,rgba(246,196,69,.2) 46% 53%,transparent 53%);transform:translateX(-100%);animation:nl-gl 5.8s 1.2s cubic-bezier(.5,0,.3,1) infinite} .nl-pk .r{top:-14px;bottom:-14px;left:0;width:30px;background:#F6C445;box-shadow:inset 5px 0 0 #D9A21F;opacity:0;transform:skewX(-25deg)} .nl-pk .t{left:var(--x);top:var(--y);width:var(--t);height:var(--t);background:#F6C445;rotate:45deg;scale:0;animation:nl-sc 2.6s var(--w) ease-in-out infinite} .nl-pk .t.plus{display:none}.with-pack .nl-pk .t.plus,.hpack:hover .nl-pk .t.plus{display:block} @keyframes nl-sc{0%,100%{scale:0}50%{scale:1}} .mdl.nl .hpack::before{opacity:.5}.mdl.nl .hpack:hover::before,.mdl.nl .hpack:hover::after{opacity:1}.mdl.nl .with-pack .hpack::before{opacity:.75} .mdl.nl .hp-row{gap:7px} .mdl.nl .hp-row img{transition:transform .3s cubic-bezier(.3,1.7,.5,1);animation:nl-hop 5s calc(var(--i) * 150ms) ease-in-out infinite} @keyframes nl-hop{0%,12%,100%{translate:0 0;rotate:0deg}5%{translate:0 -6px;rotate:-8deg}9%{translate:0 1px;rotate:4deg}} .mdl.nl .hpack:hover .hp-row img{transform:scale(1.2) rotate(-6deg)}.mdl.nl .hpack:hover .hp-row img:nth-child(even){transform:scale(1.2) rotate(6deg)} .mdl.nl .with-pack .hp-row img{animation:nl-flot 2.2s calc(var(--i) * 130ms) ease-in-out infinite} @keyframes nl-flot{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -5px;rotate:4deg}} .mdl.nl .hpack.pop .hp-row img{animation:hp-jump .5s calc(var(--i) * 60ms) cubic-bezier(.2,.9,.3,1.5)} .mdl.nl .hpack.pop .hp-price{animation:nl-prix .5s .1s cubic-bezier(.2,.9,.3,1.35)} @keyframes nl-prix{0%,100%{scale:1}45%{scale:1.22}} .mdl.nl .with-pack .hp-tag{animation:none;background:#F6C445;color:#1A1405} .mdl.nl .hpack input.ck:not(:checked){animation:nl-invite 2.6s ease-out infinite} @keyframes nl-invite{0%{box-shadow:0 0 0 0 rgba(246,196,69,.75)}60%,100%{box-shadow:0 0 0 10px rgba(246,196,69,0)}} .nl-choc{position:fixed;z-index:70;width:26px;height:26px;margin:-13px 0 0 -13px;border:3px solid #F6C445;pointer-events:none;box-sizing:border-box} .mdl.nl .btn-line:hover{background:var(--soft);color:#fff} .nl-etin{position:fixed;z-index:70;width:var(--t,10px);height:var(--t,10px);background:var(--c,#fff);pointer-events:none;transform:rotate(45deg);animation:nl-etin .85s cubic-bezier(.15,.7,.3,1) forwards} @keyframes nl-etin{0%{opacity:1;translate:0 0;scale:.4}100%{opacity:0;translate:var(--tx) var(--ty);scale:1}} .mdl.closing :is(.nl-cadre,.nl-susp,.nl-bois,.nl-front,canvas.nl-neige){opacity:0;transition:opacity .14s} @media(min-width:900px){.mdl.nl .panel{padding-top:62px}.mdl.nl .panel>h2{padding-right:46px}} @media(max-height:780px){.mdl.nl .pp-info{position:static}} @media(max-width:1240px){.nl-susp{display:none}} @media(max-width:1120px){.nl-front,.nl-bois,.nl-bhn,.nl-tas{display:none}} @media(max-width:760px){.mdl.nl .mdl-box::before{width:100%;height:5px}.mdl .pp-info .art.nl-art{aspect-ratio:400/230}.nl-gw{top:-11px;left:-6px;right:-6px}} @media(prefers-reduced-motion:reduce){.nl-lu,.nl-tampon::after,.nl-etin,.nl-bt *,.nl-pk *,.mdl.nl .hp-row img,.mdl.nl .hpack input.ck,.mdl.nl .hpack::before{animation:none!important}.nl-gl,.nl-pk .g,.nl-nv,.nl-pk .r{display:none}.mdl.nl .btn-primary,.nl-liste li,.nl-rub,.mdl.nl .hp-row img{transition:none}} .nl-bt{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .nl-bt>*{position:absolute} .nl-pap{top:0;bottom:0;left:-40px;right:-40px;background:repeating-linear-gradient(115deg,rgba(0,0,0,.11) 0 16px,transparent 16px 32px);animation:nl-pap 3.4s linear infinite} @keyframes nl-pap{to{transform:translateX(35.31px)}} .nl-nv{inset:0}.nl-nv i{position:absolute;top:-8px;left:var(--x);width:var(--t);height:var(--t);background:#fff;opacity:.62;transform:rotate(45deg);animation:nl-nv var(--d) linear var(--w) infinite} @keyframes nl-nv{to{translate:var(--g) 86px}} .nl-rub{top:-6px;bottom:-6px;right:22px;width:13px;background:#F6C445;box-shadow:inset 3px 0 0 #D9A21F;transform:skewX(-25deg)} .nl-gl{inset:-6px 0;background:linear-gradient(115deg,transparent 46%,rgba(255,255,255,.24) 46% 54%,transparent 54%);transform:translateX(-100%);animation:nl-gl 4.6s cubic-bezier(.5,0,.3,1) infinite} @keyframes nl-gl{0%{transform:translateX(-100%)}30%,100%{transform:translateX(100%)}} .nl-ray{top:-6px;bottom:-6px;left:0;width:72px;background:rgba(255,255,255,.12);transform:translateX(var(--nl-px,-100px)) skewX(-25deg);opacity:0;transition:opacity .2s} .nl-nd{position:absolute;top:-14px;right:0;z-index:1;width:40px;pointer-events:none;transform-origin:50% 80%} .nl-nd svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 80%;animation:nb-bal 2.6s ease-in-out infinite alternate} @keyframes nb-bal{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}} .nl-m{display:inline-block;white-space:nowrap}.nl-l{display:inline-block} /* Pris en main par le moteur : plus aucune transition CSS sur le mouvement (sinon chaque image arrive en retard). */ .nb{transition:background-color .18s,color .18s!important;transform-style:flat} .nb .nl-rub,.nb .nl-nd{translate:none!important;transition:none!important} .nb .lbl{display:inline-block} .nb.nb-h .nl-ray{opacity:1} .nb.nb-v{box-shadow:inset 5px 0 0 #F6C445,var(--nb-ox,0px) var(--nb-oy,0px) 0 #F6C445!important} .nb-e{position:fixed;z-index:90;width:var(--t,9px);height:var(--t,9px);margin:calc(var(--t,9px) / -2) 0 0 calc(var(--t,9px) / -2);background:var(--c,#F6C445);pointer-events:none;rotate:45deg} .nb-c{position:fixed;z-index:90;width:24px;height:24px;margin:-12px 0 0 -12px;border:3px solid #F6C445;pointer-events:none} @media(prefers-reduced-motion:reduce){.nl-pap,.nl-nv i,.nl-gl,.nl-nd svg{animation:none!important}.nl-gl,.nl-nv{display:none}} .hpack{display:flex;align-items:center;gap:12px;margin:4px 0 14px;padding:9px 14px;cursor:pointer;background:var(--deep);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);border-left:4px solid #8B5CF6;transition:background .2s;position:relative} .hpack>*{position:relative;z-index:1} .hpack::before,.hpack::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s} .hpack::after{z-index:2;background:#8B5CF6;clip-path:polygon(evenodd,0 0,100% 0,calc(100% - 12px) 100%,0 100%,0 0,0 2px,0 calc(100% - 2px),calc(100% - 13.6px) calc(100% - 2px),calc(100% - 2.4px) 2px,0 2px)} .hpack::before{background:repeating-linear-gradient(115deg,rgba(139,92,246,.16) 0 10px,transparent 10px 24px) 0 0/52px 100%;animation:hp-hatch 1.4s linear infinite} .with-pack .hpack::before,.with-pack .hpack::after{opacity:1} .with-pack .hp-row img{animation:hp-wave 2s calc(var(--i) * 130ms) ease-in-out infinite} .with-pack .hp-tag{animation:hp-tag 2s steps(1,end) infinite} @keyframes hp-hatch{to{background-position:52px 0}} @keyframes hp-wave{0%,55%,100%{transform:none}20%{transform:translateY(-5px) rotate(-7deg)}38%{transform:translateY(1px) rotate(3deg)}} @keyframes hp-tag{0%,88%{transform:none}90%{transform:translate(-2px,1px)}94%{transform:translate(2px,-1px)}} .hpack:hover{background:var(--hov)}.with-pack .hpack{background:color-mix(in srgb,#8B5CF6 18%,var(--surface))} .hp-body{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}.hp-body b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:800 .95rem/1.15 'Oxanium',sans-serif;text-transform:uppercase;color:var(--ink)}.hp-body b small{font:600 .78rem Barlow,sans-serif;text-transform:none;color:var(--ink3)} .hp-tag{align-self:flex-start;padding:3px 12px 3px 13px;background:#8B5CF6;color:#fff;font:800 .68rem/1.2 'Oxanium',sans-serif;letter-spacing:.12em;text-transform:uppercase;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)} .hp-row{display:flex;gap:5px}.hp-row img{width:28px;height:28px;object-fit:contain;transition:transform .2s} .hpack:hover .hp-row img{transform:translateY(-3px) rotate(-6deg)}.hpack:hover .hp-row img:nth-child(even){transform:translateY(-3px) rotate(6deg)} .hp-price{font:800 1.15rem 'Oxanium',sans-serif;color:#A78BFA;white-space:nowrap} .hpack.pop{animation:hp-pop .45s cubic-bezier(.2,.9,.3,1.35)}.hpack.pop .hp-row img{animation:hp-jump .5s calc(var(--i) * 60ms) cubic-bezier(.2,.9,.3,1.5)}.hpack.pop .hp-price{animation:pk-bump .5s .1s cubic-bezier(.2,.9,.3,1.35)} @keyframes hp-pop{0%{transform:scale(1)}30%{transform:scale(.96)}65%{transform:scale(1.025)}100%{transform:none}} @keyframes hp-jump{0%{transform:none}40%{transform:translateY(-10px) rotate(-10deg) scale(1.2)}70%{transform:translateY(2px) rotate(4deg)}100%{transform:none}} .with-pack .hpack{border-left-color:#A78BFA} .cg-free{display:inline-block;margin-left:12px;padding:4px 12px 4px 13px;background:#1A1424;color:#FF8A2B;font:800 .78rem/1 'Oxanium',sans-serif;letter-spacing:.12em;text-transform:uppercase;rotate:-4deg;clip-path:polygon(5px 0,100% 2px,calc(100% - 6px) 100%,0 calc(100% - 3px))} .cg-price{color:#C4B5FD} .mdl #claimgo{font-size:1rem;letter-spacing:.05em;padding:15px 18px}@media(min-width:600px){#claimgo .lbl{white-space:nowrap}} #claimgo.press{animation:cg-press .38s cubic-bezier(.2,.9,.3,1.4)}@keyframes cg-press{0%{transform:none}30%{transform:scale(.95,.88)}65%{transform:scale(1.03,1.06)}100%{transform:none}} #claimgo.swap .lbl,#claimgo.swap .cg-free{animation:cg-swap .3s cubic-bezier(.2,.9,.3,1.3)}@keyframes cg-swap{0%{transform:translateY(8px);opacity:0}100%{transform:none;opacity:1}} @media(prefers-reduced-motion:reduce){.hpack.pop,.hpack *,.hpack::before,#claimgo.press,#claimgo.swap *{animation:none!important}} /* ── Programme de fidélité : or (#F5B83D), losange du logo, plaques en biais, comme le reste de la boutique ── */ .lvchip{display:inline-flex;align-items:center;gap:7px;padding:4px 8px;margin:0 2px;text-decoration:none;color:var(--ink)} .lvchip b{display:grid;place-items:center;width:26px;height:26px;background:#F5B83D;color:#1A1424;font:800 .82rem/1 'Oxanium',sans-serif;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:transform .2s} .lvchip:hover b{transform:rotate(90deg) scale(1.08)}.lvchip:hover b span{display:inline-block;transform:rotate(-90deg)} .lvbar{display:block;width:44px;height:6px;background:var(--line);transform:skewX(-20deg);overflow:hidden}.lvbar i{display:block;height:100%;background:#F5B83D} @media(max-width:640px){.lvbar{display:none}.lvchip{padding:4px 2px}} .blk.loy{position:relative;padding:14px 16px 12px;margin:0 0 14px;background:color-mix(in srgb,#F5B83D 7%,var(--surface));border-left:4px solid #F5B83D} .blk.loy h3{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}.blk.loy h3 a{font:800 .78rem 'Oxanium',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#E8A82A;text-decoration:none}html.dark .blk.loy h3 a{color:#F5B83D} .loy-row{display:flex;align-items:center;gap:12px;margin:0 0 8px;font-size:.95rem}.loy-pct,.loy-tk{flex:none;padding:4px 12px 4px 13px;background:#F5B83D;color:#1A1424;font:800 .85rem/1.1 'Oxanium',sans-serif;letter-spacing:.06em;text-transform:uppercase;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)} .loy-opt{position:relative;margin:0 0 8px!important}.loy-opt .txt small{display:block;margin-top:2px;font:500 .82rem/1.35 Barlow,sans-serif;letter-spacing:0;text-transform:none;color:var(--ink3)} #buy.free .blk.band{display:none}.loy-opt .loy-tk{margin-left:auto;background:var(--soft);color:var(--ink3);transition:background .2s,color .2s} .loy-opt:has(:checked) .loy-tk{background:#F5B83D;color:#1A1424} /* Coupon / spot offert choisis : petites flammes jaunes (formes pleines, sans lueur) qui montent du ticket en continu. */ .loy-tk{position:relative}.loy-fl{position:absolute;bottom:calc(100% - 4px);width:10px;height:14px;pointer-events:none;z-index:2;animation:loy-flame .9s cubic-bezier(.3,.6,.4,1) forwards} .loy-fl svg{display:block;width:100%;height:100%;fill:currentColor} @keyframes loy-flame{0%{transform:translate(0,8px) scale(.4);opacity:0}20%{opacity:1;transform:translate(0,0) scale(1)}70%{opacity:1;transform:translate(var(--sw),-12px) scale(.7) rotate(var(--rt))}100%{transform:translate(calc(var(--sw) * -.5),-20px) scale(.1);opacity:0}} @keyframes loy-run{to{background-position:40px 0}} .loy-opt.hit .loy-tk{animation:loy-stamp .4s cubic-bezier(.2,.9,.3,1.4)} @keyframes loy-stamp{0%{transform:scale(1.5);opacity:.4}55%{transform:scale(.94);opacity:1}100%{transform:none}} .loy-none{margin:0;font-size:.92rem;color:var(--ink2)} .xpgain{margin:-4px 0 12px;text-align:right;font:700 .82rem 'Oxanium',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}.xpgain b{color:#E8A82A}html.dark .xpgain b{color:#F5B83D} .lv-me{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,20rem);gap:26px;align-items:center;padding:26px 28px;background:var(--surface);border-left:5px solid #F5B83D;margin:0 0 10px} @media(max-width:860px){.lv-me{grid-template-columns:auto minmax(0,1fr);padding:20px}.lv-side{grid-column:1/-1}} .lv-dia{display:grid;place-items:center;width:104px;height:104px;background:#F5B83D;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:lv-in .6s cubic-bezier(.2,.9,.3,1.4) both} .lv-dia b{font:800 2.6rem/1 'Oxanium',sans-serif;color:#1A1424}.lv-dia::after{content:'';position:absolute} @keyframes lv-in{0%{transform:scale(.3) rotate(-90deg);opacity:0}100%{transform:none;opacity:1}} .lv-kick{font:700 .8rem 'Oxanium',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}.lv-main h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:2px 0 6px} .lv-xp{font:800 1.2rem 'Oxanium',sans-serif;color:var(--ink2)}.lv-xp b{font-size:1.7rem;color:var(--ink)} .lv-prog{height:14px;margin:10px 0 10px;background:var(--line);transform:skewX(-20deg);overflow:hidden} .lv-prog i{display:block;height:100%;width:100%;background:repeating-linear-gradient(115deg,#F5B83D 0 12px,#FFCF5C 12px 24px) 0 0/48px 100%;transform-origin:0 50%} @keyframes lv-fill{from{transform:scaleX(0)}} .lv-main p{margin:0;color:var(--ink2)} .lv-side{display:flex;flex-direction:column;gap:10px} .lv-perk{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--deep);font-size:.92rem}.lv-perk b{display:block;color:var(--ink)}.lv-perk span{color:var(--ink3)}.lv-perk.off{opacity:.55} .lv-perk .loy-tk{min-width:4.6rem;text-align:center;color:#1A1424}.lv-perk.wait .loy-tk{color:var(--ink2)}.lv-perk.ok .loy-tk{background:#4CC08A}.lv-perk.wait .loy-tk{background:var(--soft);color:var(--ink2)} .lv-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} @media(max-width:980px){.lv-track{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.lv-track{grid-template-columns:1fr}} .lv-card{position:relative;padding:18px 18px 16px;background:var(--surface);border-top:4px solid var(--line)} .lv-card .lv-n{font:800 2rem/1 'Oxanium',sans-serif;color:transparent;-webkit-text-stroke:1.5px var(--ink3)}.lv-card>b{display:block;margin:8px 0 2px;font:800 1.15rem 'Oxanium',sans-serif;text-transform:uppercase;color:var(--ink)} .lv-card .lv-at{font:700 .8rem 'Oxanium',sans-serif;letter-spacing:.06em;color:var(--ink3)} .lv-card ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:.9rem;color:var(--ink2)}.lv-card li{padding-left:16px;position:relative}.lv-card li::before{content:'';position:absolute;left:0;top:.5em;width:7px;height:7px;background:#F5B83D;transform:rotate(45deg)} .lv-card.done{border-top-color:#F5B83D}.lv-card.done .lv-n{-webkit-text-stroke-color:#F5B83D} .lv-card.now{border-top-color:#F5B83D;background:color-mix(in srgb,#F5B83D 10%,var(--surface))}.lv-card.now .lv-n{color:#F5B83D;-webkit-text-stroke:0} .lv-card.now em{position:absolute;top:-4px;right:0;padding:4px 12px 4px 14px;background:#F5B83D;color:#1A1424;font:800 .7rem 'Oxanium',sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(6px 0,100% 0,100% 100%,0 100%)} .lv-card.todo li::before{background:var(--ink3)} .lv-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}@media(max-width:700px){.lv-rules{grid-template-columns:1fr}} .lv-rules div{padding:16px 18px;background:var(--surface)}.lv-rules b{display:block;font:800 1rem 'Oxanium',sans-serif;text-transform:uppercase;color:var(--ink);margin-bottom:4px}.lv-rules p{margin:0;font-size:.93rem;color:var(--ink2)} .lv-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 26px;background:var(--surface);border-left:5px solid #F5B83D;margin:0 0 10px}.lv-cta p{margin:0;color:var(--ink2)} .xp-plus{font:800 .95rem 'Oxanium',sans-serif;color:#4CC08A}.xp-minus{color:var(--ink3);text-decoration:line-through} /* Carte « Ton niveau » plus basse (−30 %) : tout est plus compact, les détails des avantages passent au survol. */ .lv-me{padding:18px 24px;gap:22px} .lv-me .lv-dia{width:82px;height:82px}.lv-me .lv-dia b{font-size:2.1rem} .lv-main h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin:0 0 2px}.lv-xp{font-size:1rem}.lv-xp b{font-size:1.4rem} .lv-progw{margin:7px 0}.lv-main p{font-size:.92rem} .lv-side{gap:7px}.lv-perk{padding:7px 12px;font-size:.88rem}.lv-perk>div>span{display:none}.lv-perk .loy-tk{min-width:4rem} .cp-btn{padding:9px 12px}.cp-txt small{font-size:.8rem} /* Parallaxe : couche de losanges derrière tout le contenu de la page du programme. */ .lvp{position:relative}.lvp>*:not(.lvp-par){position:relative;z-index:1} .lvp-par{position:absolute;inset:-40px -60px;z-index:0;pointer-events:none;overflow:hidden} .pz{position:absolute;display:block;background:#F5B83D;opacity:.22;transform:translate3d(0,0,0) rotate(45deg);will-change:transform} .pz.b{background:#3AAEEF}.pz.o{background:none;border:2px solid #F5B83D;opacity:.32}.pz.o.b{border-color:#3AAEEF} @media(prefers-reduced-motion:reduce){.pz{will-change:auto}} .lv-band{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:48px 0 44px;padding:16px 22px;background:var(--surface);border-left:5px solid #F5B83D;text-decoration:none;color:var(--ink2);clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);transition:background .2s} .lv-band:hover{background:var(--hov)} /* Bandeau fidélité : « télé qui capte mal » au survol (sauts en escalier, lignes de balayage, bandes qui glissent, texte dédoublé bleu / or), petit décrochage qui revient tant qu'on reste dessus ; au clic, extinction de vieille télé. */ .lv-band>*{position:relative;z-index:1} .lv-band::before,.lv-band::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2} .lv-band::before{background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px)} .lv-band::after{background:linear-gradient(180deg,transparent 0 20%,rgba(245,184,61,.26) 20% 26%,transparent 26% 57%,rgba(58,174,239,.24) 57% 61%,transparent 61% 80%,rgba(255,255,255,.08) 80% 82%,transparent 82%)} .lv-band:hover{animation:lvb-tv .36s steps(1,end)} .lv-band:hover::before{opacity:1;transition:opacity .1s} .lv-band:hover::after{animation:lvb-bars .36s steps(1,end),lvb-bars-idle 2.8s .6s steps(1,end) infinite} .lv-band:hover>span:nth-child(2){animation:lvb-rgb .36s steps(1,end),lvb-rgb-idle 2.8s .6s steps(1,end) infinite} .lv-band:hover .lv-dia{animation:lvb-dia .5s steps(1,end) forwards} .lv-band .go{transition:transform .2s}.lv-band:hover .go{transform:translateX(5px);animation:lvb-rgb .36s steps(1,end)} @keyframes lvb-tv{0%{transform:translateX(-9px) skewX(-5deg)}18%{transform:translateX(7px)}36%{transform:translate(-4px,2px)}54%{transform:translateX(3px) skewX(3deg)}72%{transform:translateX(-1px)}100%{transform:none}} @keyframes lvb-bars{0%{opacity:1;transform:translateY(-28%)}25%{transform:translateY(22%)}50%{opacity:.7;transform:translateY(-12%)}75%{opacity:1;transform:translateY(38%)}100%{opacity:0}} @keyframes lvb-bars-idle{0%,86%{opacity:0;transform:none}88%{opacity:1;transform:translateY(-18%)}92%{transform:translateY(26%)}95%,100%{opacity:0}} @keyframes lvb-rgb{0%{text-shadow:-3px 0 #3AAEEF,3px 0 rgba(245,184,61,.85);transform:translateX(3px)}25%{text-shadow:3px 0 #3AAEEF,-2px 0 rgba(245,184,61,.85);transform:translateX(-2px)}50%{text-shadow:-2px 0 #3AAEEF;transform:none}75%{text-shadow:2px 0 rgba(245,184,61,.85)}100%{text-shadow:none;transform:none}} @keyframes lvb-rgb-idle{0%,86%{text-shadow:none;transform:none}88%{text-shadow:-3px 0 #3AAEEF,2px 0 rgba(245,184,61,.85);transform:translateX(2px)}92%{text-shadow:2px 0 #3AAEEF;transform:translateX(-1px)}95%,100%{text-shadow:none;transform:none}} @keyframes lvb-dia{0%{transform:translate(-4px,2px) scale(1.12)}20%{transform:translate(4px,-2px) rotate(20deg)}40%{transform:translate(-2px,0) rotate(45deg) scale(.9)}60%{transform:rotate(70deg) scale(1.08)}80%,100%{transform:rotate(90deg)}} .lv-band:hover .lv-dia b{animation:lvb-dia-b .5s steps(1,end) forwards}@keyframes lvb-dia-b{0%,60%{transform:none}80%,100%{transform:rotate(-90deg)}} .lv-band.off{animation:lvb-off .42s cubic-bezier(.6,0,.4,1) forwards!important;pointer-events:none} .lv-band.off::before{opacity:1} @keyframes lvb-off{0%{transform:none;filter:none}30%{transform:scaleY(.07);filter:brightness(2.4)}65%{transform:scaleY(.05) scaleX(.04);filter:brightness(3.2)}100%{transform:scaleY(.05) scaleX(0);opacity:0}} @media(prefers-reduced-motion:reduce){.lv-band,.lv-band *,.lv-band::after{animation:none!important}}.lv-band .lv-dia{width:46px;height:46px;animation:none}.lv-band .lv-dia b{font-size:1.15rem}.lv-band strong{display:block;font:800 1.05rem 'Oxanium',sans-serif;text-transform:uppercase;color:var(--ink)}.lv-band .go{margin-left:auto;font:800 .85rem 'Oxanium',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--acct)} .tr-xp{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 0;padding:10px 14px;background:color-mix(in srgb,#F5B83D 10%,var(--deep));border-left:4px solid #F5B83D}.tr-xp b{font:800 1.1rem 'Oxanium',sans-serif;color:#E8A82A}html.dark .tr-xp b{color:#F5B83D}.tr-xp a{font:700 .8rem 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.06em;text-decoration:none} @media(prefers-reduced-motion:reduce){.lv-dia,.lv-prog i,.loy-opt .loy-tk{animation:none!important}} /* « Voir mes coupons » : bouton avec pastille du nombre de coupons ; au clic, les coupons s'en échappent en arc. */ .cp-btn{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;background:var(--deep);border:0;color:var(--ink2);text-align:left;font:inherit;font-size:.92rem;cursor:pointer;transition:transform .18s,box-shadow .18s,background .2s} .cp-btn .loy-tk{min-width:4.6rem;text-align:center;color:#1A1424}.cp-txt b{display:block;color:var(--ink)}.cp-txt small{display:block;font-size:.85rem;color:var(--ink3)} .cp-btn:not(.off):hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 #F5B83D}.cp-btn:not(.off):hover .cp-txt b{animation:lvb-rgb .36s steps(1,end)} .cp-btn.off{cursor:default;opacity:.6}.cp-btn[aria-expanded=true]{box-shadow:6px 6px 0 #F5B83D;transform:translate(-3px,-3px)} .cp-notif{position:absolute;top:-9px;right:-9px;min-width:24px;height:24px;padding:0 7px;display:grid;place-items:center;background:#F04A4A;color:#fff;font:800 .8rem/1 'Oxanium',sans-serif;font-style:normal;border-radius:999px;box-shadow:0 0 0 3px var(--surface);animation:cp-ping 2.4s ease-in-out infinite} @keyframes cp-ping{0%,82%,100%{transform:none}88%{transform:scale(1.25)}94%{transform:scale(.95)}} .cp-layer{position:fixed;inset:0;z-index:60;pointer-events:none} /* Voile : la page s'assombrit et se floute derrière les coupons. */ .cp-veil{position:absolute;inset:0;background:rgba(5,6,10,.72);-webkit-backdrop-filter:blur(9px) saturate(.6);backdrop-filter:blur(9px) saturate(.6);opacity:0;transition:opacity .18s ease-out;pointer-events:auto} .cp-layer.on .cp-veil{opacity:1}.cp-layer.off .cp-veil{opacity:0;transition-duration:.25s} .cp-ghost .cp-notif{display:none} .cp-notif.gone{animation:cp-gone .3s cubic-bezier(.5,0,.7,.4) forwards}@keyframes cp-gone{40%{transform:scale(1.3)}100%{transform:scale(0);opacity:0}} .cp-ghost{z-index:4;pointer-events:auto;box-shadow:6px 6px 0 #F5B83D;background:var(--deep);transition:transform .34s cubic-bezier(.2,.9,.3,1.12);will-change:transform} .cp-wave{width:60px;height:60px;margin:-30px 0 0 -30px;border-width:4px} .cp-t{position:absolute;z-index:2;width:158px;padding:11px 14px 10px 17px;background:#F5B83D;color:#1A1424;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);pointer-events:auto;cursor:default;text-align:left;overflow:hidden; transform:translate(-50%,-50%) scale(.2);opacity:0;animation:cp-out .44s cubic-bezier(.18,1.25,.35,1) forwards} .cp-t.hi{background:#FFCF5C}.cp-t b{display:block;font:800 1.5rem/1 'Oxanium',sans-serif}.cp-t span{display:block;margin-top:3px;font:600 .8rem/1.2 Barlow,sans-serif}.cp-t small{display:block;margin-top:6px;padding-top:5px;border-top:1px solid rgba(26,20,36,.18);font:700 .6rem/1.2 'Oxanium',sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.7} /* Reflet blanc qui traverse le coupon quand il se pose. */ .cp-t::before{content:'';position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;background:rgba(255,255,255,.65);transform:skewX(-20deg);pointer-events:none} .cp-t.land::before{animation:cp-sweep .5s .05s ease-out} @keyframes cp-sweep{to{left:130%}} @keyframes cp-out{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(var(--spin))} 55%{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rot)) scale(1.14)} 68%{transform:translate(calc(-50% + var(--x) + 6px),calc(-50% + var(--y) - 2px)) rotate(var(--rot)) scale(.96) skewX(-7deg)} 80%{transform:translate(calc(-50% + var(--x) - 3px),calc(-50% + var(--y))) rotate(var(--rot)) scale(1.03) skewX(3deg)} 100%{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rot))}} /* Posés : position fixée (plus d'animation de vol, qui repartait de zéro au survol), ils flottent doucement (propriété translate, indépendante de la position) ; le survol agrandit le coupon sur une plaque décalée, en douceur. */ .cp-t.in{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rot));animation:cp-bob var(--bob) ease-in-out infinite;transition:transform .18s cubic-bezier(.2,.9,.3,1.3),filter .18s} @keyframes cp-bob{0%,100%{translate:0 0}50%{translate:0 -5px}} .cp-t.in:hover{transform:translate(calc(-50% + var(--x) - 4px),calc(-50% + var(--y) - 4px)) rotate(0deg) scale(1.08);filter:drop-shadow(6px 6px 0 #1A1424);animation-play-state:paused} .cp-t.in:hover b{animation:lvb-rgb .36s steps(1,end)} .cp-t.back{animation:cp-back .22s calc(var(--j) * 18ms) cubic-bezier(.5,0,.75,.3) forwards} @keyframes cp-back{0%{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rot))}100%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(calc(var(--spin) * -.5))}} @media(prefers-reduced-motion:reduce){.cp-t,.cp-t.in{animation:none;opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))}.cp-notif{animation:none}.cp-veil{-webkit-backdrop-filter:none;backdrop-filter:none}} /* ── Page du programme : ouverture « télé qui capte mal », route des paliers, déblocages ── */ .lvp .hero h1{animation:lvp-tv .5s steps(1,end) backwards,lvp-idle 7s 2s steps(1,end) infinite} .lvp .hero p{animation:lvp-up .45s .3s cubic-bezier(.2,.8,.2,1) backwards} .lvp .lv-me,.lvp .lv-cta{animation:lvp-soft .34s .15s steps(1,end) backwards} @keyframes lvp-soft{0%{opacity:0;transform:translateX(-5px)}20%{opacity:1;transform:translateX(3px);clip-path:inset(0 0 70% 0)}40%{transform:translateX(-2px);clip-path:inset(0)}60%{transform:translateX(1px)}100%{transform:none;clip-path:inset(0);opacity:1}} @keyframes lvp-tv{0%{opacity:0;transform:translateX(-16px);clip-path:inset(45% 0 45% 0)}10%{opacity:1;transform:translateX(12px) skewX(-6deg);clip-path:inset(0 0 60% 0)}22%{transform:translateX(-7px);clip-path:inset(35% 0 0 0)}34%{opacity:.4;transform:none;clip-path:inset(0)}46%{opacity:1;transform:translate(5px,-3px);clip-path:inset(15% 0 50% 0)}60%{transform:translateX(-3px);clip-path:inset(0)}74%{transform:translate(2px,2px);clip-path:inset(62% 0 6% 0)}86%,100%{transform:none;clip-path:inset(0);opacity:1}} @keyframes lvp-up{from{opacity:0;transform:translateY(10px)}} @keyframes lvp-idle{0%,93%{text-shadow:none;transform:none}94%{text-shadow:-4px 0 #3AAEEF,3px 0 rgba(245,184,61,.9);transform:translateX(3px)}96%{text-shadow:3px 0 #3AAEEF,-2px 0 rgba(245,184,61,.9);transform:translateX(-2px) skewX(-3deg)}98%,100%{text-shadow:none;transform:none}} .lv-me{position:relative;overflow:hidden}.lv-me>*:not(.lv-fl){position:relative;z-index:1} .lv-fl{position:absolute;width:16px;height:16px;border:2px solid #F5B83D;opacity:.32;transform:rotate(45deg);animation:lv-float 7s ease-in-out infinite;pointer-events:none} .lv-fl.f1{left:38%;top:14%}.lv-fl.f2{left:62%;bottom:16%;width:10px;height:10px;border-color:#3AAEEF;animation-delay:-2s}.lv-fl.f3{left:8%;bottom:10%;width:9px;height:9px;background:#F5B83D;border:0;animation-delay:-4s}.lv-fl.f4{right:30%;top:10%;width:7px;height:7px;background:#3AAEEF;border:0;animation-delay:-5.5s} @keyframes lv-float{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(-14px) rotate(135deg)}} .lv-progw{position:relative;margin:10px 0}.lv-progw .lv-prog{margin:0;position:relative} .lv-prog .lv-fill{position:relative;animation:loy-run 1.4s linear infinite;transform:scaleX(var(--p))} /* Double bleu décalé derrière la barre : visible seulement quand elle « bugue » (remplissage, petits décrochages). */ .lv-prog .lv-gh{position:absolute;inset:0;background:#3AAEEF;opacity:0;transform-origin:0 50%;transform:scaleX(var(--p));animation:none} .lv-me.filling .lv-fill{animation:loy-run .45s linear infinite} .lv-me.filling .lv-tip{scale:1.2} /* Au repos : un petit losange blanc parcourt la barre jusqu'à sa tête, qui rebondit et lâche un losange. */ .lv-run{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;background:#FFFFFF;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);pointer-events:none;z-index:2;animation:lv-runner .9s cubic-bezier(.55,0,.35,1) forwards} @keyframes lv-runner{0%{left:0;opacity:0}15%{opacity:1}92%{opacity:1}100%{left:calc(var(--p) * 100%);opacity:0}} .lv-tip.pop{animation:lv-tip 1.4s ease-in-out infinite,lv-tippop .4s cubic-bezier(.2,.9,.3,1.6)}@keyframes lv-tippop{0%{scale:1}40%{scale:1.6}100%{scale:1}} .lv-me.filling .lv-tip{opacity:1} .lv-me.filling .lv-tip,.lv-me.filling .lv-fill{transition:none} .lv-sh.trail{animation:lv-trail .75s cubic-bezier(.2,.7,.3,1) forwards} @keyframes lv-trail{0%{transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:1}100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(calc(45deg + var(--r))) scale(.3);opacity:0}} .lv-me.pre .lv-fill,.lv-me.pre .lv-gh{transform:scaleX(0)} .lv-prog::after{content:'';position:absolute;top:0;bottom:0;left:-90px;width:70px;background:rgba(255,255,255,.6);pointer-events:none} .lv-me.swept .lv-prog::after{animation:lv-sweep .65s ease-out}@keyframes lv-sweep{to{left:110%}} .lv-tip{position:absolute;top:50%;left:calc(var(--p) * 100%);width:20px;height:20px;margin:-10px 0 0 -10px;background:#FFCF5C;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:left 1s cubic-bezier(.2,.8,.2,1),opacity .2s;animation:lv-tip 1.4s ease-in-out infinite} .lv-me.pre:not(.filling) .lv-tip{left:0;opacity:0}@keyframes lv-tip{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}} .lv-road{position:relative;height:48px;margin:4px 0 6px} .lv-road-bar{position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;background:var(--line);transform:skewX(-20deg);overflow:hidden} .lv-road-bar i{display:block;height:100%;width:100%;background:repeating-linear-gradient(115deg,#F5B83D 0 12px,#FFCF5C 12px 24px) 0 0/48px 100%;transform-origin:0 50%;transform:scaleX(0);animation:loy-run 1.4s linear infinite} .lv-node{position:absolute;left:var(--x);top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;display:grid;place-items:center;background:var(--line);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:background .2s} .lv-node b{display:grid;place-items:center;width:28px;height:28px;background:var(--paper);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);font:800 .82rem/1 'Oxanium',sans-serif;color:var(--ink3);transition:background .2s,color .2s} .lv-node.on{background:#FFCF5C;animation:lv-pop .5s cubic-bezier(.2,.9,.3,1.5)}.lv-node.on b{background:#F5B83D;color:#1A1424} .lv-node.peek{animation:lv-pop .45s cubic-bezier(.2,.9,.3,1.5)} @keyframes lv-pop{0%{transform:scale(1)}35%{transform:scale(1.75)}65%{transform:scale(.88)}100%{transform:none}} .lv-ring{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border:3px solid #F5B83D;pointer-events:none;transform:rotate(45deg) scale(.6);animation:lv-ring .65s cubic-bezier(.2,.7,.3,1) forwards;z-index:3} @keyframes lv-ring{to{transform:rotate(45deg) scale(3.4);opacity:0}} .lv-sh{position:absolute;background:#F5B83D;pointer-events:none;z-index:3;animation:lv-sh .8s cubic-bezier(.2,.7,.3,1) forwards}.lv-sh.b{background:#3AAEEF}.lv-sh.o{background:none;border:2px solid #F5B83D}.lv-sh.o.b{border-color:#3AAEEF} @keyframes lv-sh{0%{transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:1}100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(calc(45deg + var(--r))) scale(.35);opacity:0}} .lv-sh.drift{animation:lv-drift 1.3s ease-out forwards}@keyframes lv-drift{0%{transform:translate(-50%,-50%) rotate(45deg);opacity:0}20%{opacity:.9}100%{transform:translate(calc(-50% + var(--tx) * .4),calc(-50% - 46px)) rotate(225deg);opacity:0}} .lv-card{transition:transform .18s,box-shadow .18s,background .3s} .lv-card::before{content:'';position:absolute;left:0;right:0;top:-4px;height:4px;background:#F5B83D;transform-origin:0 50%;transform:scaleX(0);transition:transform .45s .08s cubic-bezier(.2,.8,.2,1)} .lv-card.done::before,.lv-card.now::before{transform:scaleX(1)} .lv-card.wait{border-top-color:var(--line);background:var(--surface)}.lv-card.wait::before{transform:scaleX(0)}.lv-card.wait .lv-n{color:transparent;-webkit-text-stroke:1.5px var(--ink3)}.lv-card.wait em{opacity:0}.lv-card.wait li::before{background:var(--ink3)} .lv-card.unlock{animation:lvp-tv .42s steps(1,end)}.lv-card.unlock .lv-n{animation:lvb-rgb .4s steps(1,end)} .lv-card.appear{animation:lvp-tv .42s steps(1,end) backwards} .lv-card.stamp em{animation:loy-stamp .5s cubic-bezier(.2,.9,.3,1.5)} .lv-ban{position:absolute;left:50%;top:44%;z-index:4;padding:6px 16px 6px 18px;background:#F5B83D;color:#1A1424;font:800 .9rem/1 'Oxanium',sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);pointer-events:none;animation:lv-ban 1.1s cubic-bezier(.2,.9,.3,1.2) forwards} @keyframes lv-ban{0%{transform:translate(-50%,-50%) scale(2.2) rotate(-10deg);opacity:0}18%{transform:translate(-50%,-50%) scale(.94) rotate(-4deg);opacity:1}30%,70%{transform:translate(-50%,-50%) rotate(-4deg);opacity:1}100%{transform:translate(30%,-50%) rotate(-4deg);opacity:0}} .lv-card:hover{transform:translate(-4px,-4px);box-shadow:7px 7px 0 var(--line)}.lv-card.done:hover,.lv-card.now:hover{box-shadow:7px 7px 0 #F5B83D}.lv-card:hover .lv-n{animation:lvb-rgb .36s steps(1,end)} .lv-rules>div{transition:transform .18s,box-shadow .18s}.lv-rules>div:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 #3AAEEF}.lv-rules>div:hover b{animation:lvb-rgb .36s steps(1,end)} .rv{opacity:0}.rv.in{opacity:1;animation:lvp-tv .42s steps(1,end)} @media(max-width:980px){.lv-road{display:none}} @media(prefers-reduced-motion:reduce){.lvp *,.lvp .hero h1{animation:none!important;transition:none!important}.lv-fl{display:none}} /* ── Encart « Fidélité » du paiement : en-tête (niveau · économie) + tickets façon coupons détachables (partie valeur | encoches | libellé). Actif = valeur dorée ; décoché = ticket éteint. ── */ .blk.loy{padding:14px 16px 16px;background:var(--deep);border-left:4px solid #F5B83D} .loy-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px} .loy-lv{display:inline-flex;align-items:center;gap:12px;text-decoration:none} .loy-lv .lv-dia{width:34px;height:34px;animation:none;flex:none}.loy-lv .lv-dia b{font-size:.9rem}.loy-lv:hover .lv-dia{animation:lvb-dia .5s steps(1,end) forwards} .loy-nm,.loy-sv{display:flex;flex-direction:column;line-height:1.05}.loy-nm small,.loy-sv small{font:700 .66rem/1.2 'Oxanium',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)} .loy-nm em{font:800 1.05rem/1.1 'Oxanium',sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:#E8A82A}html.dark .loy-nm em{color:#F5B83D} .loy-sv{align-items:flex-end;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}.loy-sv.on{opacity:1;transform:none} .loy-save{font:800 1.3rem/1.1 'Oxanium',sans-serif;color:#2FA56B;white-space:nowrap}html.dark .loy-save{color:#4CC08A}.loy-save.bump{animation:pk-bump .5s cubic-bezier(.2,.9,.3,1.35)} .loy-tks{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;padding:0 4px} .loy-c{position:relative;display:block;margin:0!important;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.loy-c.fixed{cursor:default} .loy-c input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} /* Talon de ticket : valeur en haut, libellé en bas, encoches de la ligne prédécoupée sur les côtés ; en biais (skew). */ .loy-c .loy-tk,.loy-c.loy-opt .loy-tk,.loy-c.loy-opt:has(:checked) .loy-tk{display:flex;flex-direction:column;align-items:stretch;margin:0;min-width:0;padding:0;background:none;clip-path:none;transform:skewX(-9deg);transition:transform .18s cubic-bezier(.2,.9,.3,1.4),filter .2s,opacity .2s} .loy-c .loy-tk b>span,.loy-c .loy-tk small>span{display:inline-block;transform:skewX(9deg)} .loy-c .loy-tk b{position:relative;display:flex;align-items:center;justify-content:center;height:42px;padding:0 8px;background:#F5B83D;color:#1A1424;font:800 1.2rem/1 'Oxanium',sans-serif;letter-spacing:.01em;white-space:nowrap;transition:background .2s,color .2s} .loy-c .loy-tk small{display:flex;align-items:center;justify-content:center;height:24px;padding:0 6px;margin:0;background:var(--soft);color:var(--ink);font:700 .64rem/1 'Oxanium',sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;transition:color .2s} /* Encoches découpées (masque) : on voit le fond à travers, sans rond posé par-dessus. */ .loy-c .loy-tk b{-webkit-mask:radial-gradient(circle at 0 100%,transparent 6px,#000 6.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 6px,#000 6.5px) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 100%,transparent 6px,#000 6.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 6px,#000 6.5px) right/51% 100% no-repeat} .loy-c .loy-tk small{-webkit-mask:radial-gradient(circle at 0 0,transparent 6px,#000 6.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent 6px,#000 6.5px) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 0,transparent 6px,#000 6.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent 6px,#000 6.5px) right/51% 100% no-repeat} .loy-c .loy-tk{position:relative} .loy-c.fixed .loy-tk b{background:#FFCF5C} .loy-c.idle .loy-tk b,.loy-opt:not(:has(:checked)) .loy-tk b{background:var(--soft);color:var(--ink3)}.loy-c.idle .loy-tk small{color:var(--ink3)}.loy-c.idle .loy-tk{opacity:.7}.loy-opt:not(:has(:checked)) .loy-tk small{color:var(--ink3)}.loy-opt:not(:has(:checked)) .loy-tk{opacity:.7} .loy-opt:hover .loy-tk{transform:skewX(-9deg) translate(-2px,-3px);filter:drop-shadow(3px 4px 0 rgba(0,0,0,.35))} .loy-opt:has(:focus-visible) .loy-tk{outline:3px solid #3AAEEF;outline-offset:2px} .loy-c.loy-opt.hit .loy-tk{animation:loy-stamp-sk .42s cubic-bezier(.2,.9,.3,1.4)} /* « Tampon » au clic : le ticket garde son biais du début à la fin. */ @keyframes loy-stamp-sk{0%{transform:skewX(-9deg) scale(1.35);opacity:.5}55%{transform:skewX(-9deg) scale(.95);opacity:1}100%{transform:skewX(-9deg)}} .loy-c .loy-tk{overflow:visible}.loy-c .loy-tk b .loy-fl{z-index:2} .ppnote.free{border-left-color:#F5B83D}.ppnote.free b{color:#E8A82A}html.dark .ppnote.free b{color:#F5B83D} /* ── Carte du créateur (code créateur) : avatar en losange avec losanges en orbite, « Tu soutiens… », gain qui défile, tampon « Soutenu » ; elle apparaît en se retournant avec un léger décrochage. ── */ /* « CODE CRÉATEUR » bien en avant : grande étiquette orange penchée (avec losange) qui frappe en premier. */ .cwrap.cc>.ct-tag{display:block;left:-12px;top:-23px;z-index:4;padding:9px 22px 9px 20px;font-size:.92rem;letter-spacing:.18em;rotate:-5deg} .cwrap.cc>.ct-tag::before{content:'';display:inline-block;width:9px;height:9px;margin:0 11px 1px 0;background:#2A1200;transform:rotate(45deg)} .cwrap.cc.hit>.ct-tag{animation:cc-tag .5s .04s cubic-bezier(.3,0,.3,1.5) backwards} @keyframes cc-tag{0%{transform:scale(2.4) rotate(-12deg);opacity:0}55%{transform:scale(.92);opacity:1}75%{transform:translateX(5px) skewX(-8deg)}88%{transform:translateX(-2px)}100%{transform:none}} .cc-code{align-self:flex-start;padding:3px 10px 3px 11px;background:#F5B82E;color:#2A1A00;font:800 .8rem/1 'Oxanium',sans-serif;letter-spacing:.14em;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);margin-bottom:3px} .cwrap.cc .cbanner{font-size:1.4rem;padding:11px 30px 11px 32px;animation:cbanner 1.35s cubic-bezier(.3,0,.3,1) forwards,cc-rgb .55s .1s steps(1,end)} @keyframes cc-rgb{0%{text-shadow:-4px 0 #3AAEEF,4px 0 #fff}20%{text-shadow:3px 0 #3AAEEF,-3px 0 #fff}45%{text-shadow:-2px 1px #3AAEEF,1px 0 #fff}70%{text-shadow:2px 0 #3AAEEF}100%{text-shadow:none}} /* Coup de lame : bande dorée + trait blanc qui traversent la fenêtre en diagonale. */ .cc-boom{position:absolute;z-index:61;width:56px;height:56px;margin:-28px 0 0 -28px;background:#F5B82E;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);pointer-events:none;animation:cc-boom .6s cubic-bezier(.15,.8,.3,1) forwards} .cc-boom i{position:absolute;inset:30%;background:#fff;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} @keyframes cc-boom{0%{transform:scale(.2) rotate(-45deg);opacity:1}35%{transform:scale(1.5) rotate(0);opacity:1}100%{transform:scale(3.4) rotate(15deg);opacity:0}} .cf-ring.cc-ring{border-width:5px;border-color:#FFCF5C!important} .cc-slash{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden} .cc-slash i{position:absolute;top:-40%;bottom:-40%;left:-35%;width:16%;background:rgba(245,184,46,.32);transform:skewX(-24deg);animation:cc-slash .5s cubic-bezier(.55,0,.2,1) forwards} .cc-slash i::after{content:'';position:absolute;top:0;bottom:0;left:46%;width:4px;background:#fff} @keyframes cc-slash{to{left:125%}} .mdl-body.cc-flash{animation:cc-flash .3s cubic-bezier(.2,.7,.3,1)} @keyframes cc-flash{0%{filter:none}18%{filter:brightness(2.1) saturate(1.35) contrast(1.1)}100%{filter:none}} .cc-slash::before{content:'';position:absolute;inset:0;background:#fff;opacity:0;animation:cc-wflash .32s .19s ease-out} @keyframes cc-wflash{0%{opacity:0}15%{opacity:.42}100%{opacity:0}} @media(prefers-reduced-motion:reduce){.mdl-body.cc-flash,.cc-slash::before{animation:none}.cc-boom{display:none}} .cwrap.cc .cticket{flex-wrap:nowrap;gap:14px;padding:28px 24px 16px 32px;background:color-mix(in srgb,#F5B82E 13%,#15120C)}html:not(.dark) .cwrap.cc .cticket{background:#FFF3D2} .cc-av{position:relative;flex:none;width:48px;height:48px} .cc-av img,.cc-av i{display:grid;place-items:center;width:48px;height:48px;object-fit:cover;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:#F5B82E;color:#2A1A00;font:800 1.2rem/1 'Oxanium',sans-serif;font-style:normal} .cc-orb{position:absolute;inset:-9px;animation:cc-orb 7s linear infinite;pointer-events:none} .cc-orb s{position:absolute;width:6px;height:6px;background:#F5B82E;transform:rotate(45deg)}.cc-orb s:nth-child(1){left:50%;top:0;margin-left:-3px}.cc-orb s:nth-child(2){right:2px;bottom:8px;width:5px;height:5px;background:none;border:1.5px solid #F5B82E}.cc-orb s:nth-child(3){left:3px;bottom:6px;width:4px;height:4px;background:#3AAEEF} @keyframes cc-orb{to{transform:rotate(360deg)}} .cc-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .cc-txt small{font:700 .66rem/1.2 'Oxanium',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)} .cc-txt b{font:800 1.02rem/1.15 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)} .cc-gain,.cc-note{font-style:normal;font-size:.84rem;color:var(--ink2)}.cc-gain span{font-weight:700;color:#B7791F}html.dark .cc-gain span{color:#F5B82E} .cc-stamp{position:absolute;z-index:3;right:22px;top:-12px;padding:5px 13px 5px 15px;background:#F5B82E;color:#2A1A00;font:800 .7rem/1 'Oxanium',sans-serif;font-style:normal;letter-spacing:.16em;text-transform:uppercase;rotate:-7deg;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)} .cwrap.cc .cticket{overflow:visible} .cwrap.cc.hit .cticket{animation:cc-flip .62s cubic-bezier(.2,.9,.3,1.15)} @keyframes cc-flip{0%{transform:perspective(700px) rotateY(82deg);opacity:0}45%{transform:perspective(700px) rotateY(-10deg);opacity:1}58%{transform:translateX(6px) skewX(-6deg)}70%{transform:translateX(-3px) skewX(2deg)}100%{transform:none}} .cwrap.cc.hit .cc-stamp{animation:cc-stamp .42s .3s cubic-bezier(.3,0,.3,1.45) backwards} @keyframes cc-stamp{0%{transform:scale(2.6) rotate(-14deg);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:none}} .cwrap.cc.hit .cc-av{animation:cc-av .5s .18s cubic-bezier(.2,.9,.3,1.5) backwards}@keyframes cc-av{0%{transform:scale(.2) rotate(-90deg);opacity:0}100%{transform:none;opacity:1}} /* Version sobre et compacte : mêmes codes (biais, plaques et ombres dures décalées), en plus petit et plus fin. */ .cwrap.cc{rotate:-.6deg;margin-top:16px} .cwrap.cc>.ct-tag{left:-8px;top:-13px;padding:5px 13px 5px 12px;font-size:.66rem;letter-spacing:.16em;rotate:-4deg} .cwrap.cc>.ct-tag::before{width:6px;height:6px;margin:0 8px 1px 0} .cwrap.cc .cticket{gap:12px;padding:18px 18px 12px 26px;background:color-mix(in srgb,#F5B82E 8%,var(--surface))}html:not(.dark) .cwrap.cc .cticket{background:#FFF8E6} .cc-av{width:38px;height:38px}.cc-av img,.cc-av i{width:38px;height:38px;font-size:1rem}.cc-orb{inset:-7px} .cc-av img,.cc-av i{position:relative;z-index:1} .cc-av::before,.cc-av::after{content:'';position:absolute;inset:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} /* Plaques tournées (pas juste décalées) : le débord forme des coins en biseau, comme la plaque derrière la croix de fermeture. */ .cc-av::before{background:#05070A;opacity:.45;transform:translate(3px,4px) rotate(11deg) scale(1.04)}.cc-av::after{background:#FF8A2B;transform:translate(-2px,-1px) rotate(-13deg) scale(1.07)} .cc-code{position:relative;isolation:isolate;background:none!important;clip-path:none!important;padding:2px 8px 2px 9px;font-size:.66rem;margin-bottom:2px} .cc-code::before,.cc-code::after{content:'';position:absolute;inset:0;z-index:-1;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)} .cc-code::after{background:#F5B82E}.cc-code::before{z-index:-2;background:#FF8A2B;transform:translate(2px,2px)} .cc-txt b{font-size:.88rem;text-shadow:2px 2px 0 rgba(0,0,0,.3)}html:not(.dark) .cc-txt b{text-shadow:2px 2px 0 rgba(245,184,46,.35)} .cc-gain,.cc-note{font-size:.78rem} .cc-gain span{display:inline-block;padding:0 6px;margin-right:2px;background:#F5B82E;color:#2A1A00!important;transform:skewX(-10deg);box-shadow:2px 2px 0 rgba(5,7,10,.7)} .cwrap.cc .ct-save{font-size:1.05rem;text-shadow:2px 2px 0 rgba(0,0,0,.35)}html:not(.dark) .cwrap.cc .ct-save{text-shadow:2px 2px 0 rgba(245,184,46,.35)} /* « Soutenu » : petit ruban sous l'avatar du créateur, comme sur un badge de jeu. */ .cc-stamp{right:auto!important;top:auto!important;left:12px;bottom:-8px;rotate:-6deg!important;padding:3px 9px 3px 10px!important;font-size:.56rem!important;letter-spacing:.14em!important} .cwrap.cc .cc-stamp{filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35))} .cwrap.cc .cbanner{font-size:1.1rem;padding:8px 22px 8px 24px} /* Carte épurée : moins d'éléments, un seul niveau de lecture (nom), une ligne secondaire discrète. */ .cwrap.cc .cticket{padding:16px 20px 13px 26px} .cc-txt{gap:3px}.cc-txt b{font-size:.98rem;text-shadow:2px 2px 0 rgba(0,0,0,.3)} .cc-gain,.cc-note{font-style:normal;font-size:.8rem;color:var(--ink3)} .cc-gain span{display:inline;padding:0;margin:0;background:none;transform:none;box-shadow:none;font-weight:700;color:#B7791F!important}html.dark .cc-gain span{color:#F5B82E!important} @media(max-width:480px){.cwrap.cc .cticket{padding:16px 16px 14px 26px;gap:12px}.cwrap.cc .ct-save{display:none}} @media(prefers-reduced-motion:reduce){.cc-orb,.cwrap.cc.hit .cticket,.cwrap.cc.hit .cc-stamp,.cwrap.cc.hit .cc-av,.cwrap.cc.hit>.ct-tag{animation:none}.cc-slash{display:none}} .mail-pick{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--deep);border-left:4px solid var(--acc)} .mail-pick[hidden]{display:none} /* Fenêtre d'une offre / paiement : texte courant en Chakra Petch (angles coupés, esprit boutique de jeu) ; titres en Oxanium. */ .mdl-box{font-family:'Chakra Petch',Barlow,system-ui,sans-serif;letter-spacing:.005em} .mdl-box .cc-gain,.mdl-box .cc-note,.mdl-box .cp-t span,.mdl-box .loy-opt .txt small{font-family:'Chakra Petch',Barlow,sans-serif} .mp-ic{flex:none;width:12px;height:12px;background:var(--acc);transform:rotate(45deg)} .mp-to{flex:1;min-width:0;font-size:.92rem;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mp-to b{color:var(--ink);font-weight:600} .mp-edit{flex:none;border:0;background:none;color:var(--acct);font:700 .82rem 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}.mp-edit:hover{text-decoration:underline} .rnd-pick{position:relative;--c:#FF8A2B;--ci:#2A1200;display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 10px} .rnd-b{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:110px;padding:10px 16px 8px;background:var(--deep);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:transform .12s,opacity .12s,background .12s} .rnd-b img{width:56px;height:56px;object-fit:contain}.rnd-b small{font:800 .72rem/1.1 'Oxanium',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)} .rnd-or{font:800 .78rem 'Oxanium',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)} .rnd-odds{margin:0 0 2px;text-align:center;font-size:.9rem;color:var(--ink2)}.rnd-odds b{color:#E07A1F}html.dark .rnd-odds b{color:#FF8A2B} .rnd-end{margin:0 0 14px;text-align:center;font-size:.8rem;color:var(--ink3)} .rnd-pick.rolling .rnd-b{opacity:.4;transform:scale(.92)}.rnd-pick.rolling .rnd-b.on{opacity:1;transform:scale(1.06);background:color-mix(in srgb,#FF8A2B 24%,var(--deep))} .rnd-b.win{opacity:1;transform:scale(1.14);background:#FF8A2B;animation:loy-stamp .45s cubic-bezier(.2,.9,.3,1.4)}.rnd-b.win small{color:#2A1200}.rnd-b.lose{opacity:.25;filter:grayscale(1);transform:scale(.88)} .rnd-ban{top:auto;bottom:-22px} @media(max-width:520px){.rnd-pick{gap:6px}.rnd-b{min-width:0;padding:8px 10px 6px}.rnd-b img{width:44px;height:44px}.rnd-b small{font-size:.62rem}.rnd-or{font-size:.66rem}} /* ── Mini-jeu « roulette » (badge tiré au sort) : présenté comme un jeu, pas comme un achat ── */ .free-panel.rg{display:flex;flex-direction:column;gap:14px;min-width:0;max-width:100%} .rg-reel,.rg-win{min-width:0;max-width:100%;contain:inline-size} .rg-kick{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;padding:5px 14px 5px 12px;background:#FF8A2B;color:#2A1200;font:800 .72rem/1 'Oxanium',sans-serif;letter-spacing:.16em;text-transform:uppercase;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)} .rg-kick i{width:7px;height:7px;background:#2A1200;transform:rotate(45deg);animation:rg-blink 1.2s steps(2,end) infinite}@keyframes rg-blink{50%{opacity:.25}} .rg-title{margin:0;font-size:clamp(1.35rem,3vw,1.75rem);line-height:1.08} .rg-reel{--iw:118px;position:relative;margin:4px 0 2px;padding:14px 0;background:#0E1016;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);overflow:hidden} html:not(.dark) .rg-reel{background:#1A1D25} .rg-win{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)} .rg-strip{display:flex;gap:10px;width:max-content;will-change:transform;animation:rg-idle calc(var(--n,3) * 1.6s) linear infinite} @keyframes rg-idle{to{transform:translateX(calc(var(--n,3) * -128px))}} .rg-reel.fast .rg-strip{animation-duration:calc(var(--n,3) * .22s)} .rg-it{display:flex;flex-direction:column;align-items:center;gap:6px;width:var(--iw);padding:10px 0 8px;background:#1C2029;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:opacity .3s,transform .3s,background .3s} .rg-dia{display:grid;place-items:center;width:70px;height:70px}.rg-dia img{width:64px;height:64px;object-fit:contain} .rg-it small{font:800 .64rem/1 'Oxanium',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#AEB6C4;white-space:nowrap} .rg-mark{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:#FF8A2B;z-index:2} .rg-mark::before,.rg-mark::after{content:'';position:absolute;left:50%;width:16px;height:10px;margin-left:-8px;background:#FF8A2B} .rg-mark::before{top:0;clip-path:polygon(0 0,100% 0,50% 100%)}.rg-mark::after{bottom:0;clip-path:polygon(50% 0,100% 100%,0 100%)} .rg-reel.landing .rg-mark{animation:rg-tick .16s steps(2,end) infinite}@keyframes rg-tick{50%{transform:scaleY(.86)}} .rg-it.win{background:#FF8A2B;transform:scale(1.08)}.rg-it.win small{color:#2A1200}.rg-it.win .rg-dia{animation:loy-stamp .45s cubic-bezier(.2,.9,.3,1.4)} .rg-it.lose{opacity:.28} .rg-reel.done .rg-mark{opacity:0;transition:opacity .2s} .rg-fx{position:absolute;z-index:1;width:7px;height:7px;background:#FF8A2B;transform:rotate(45deg);opacity:.5;pointer-events:none;animation:rg-float 5s ease-in-out infinite} .rg-fx.f1{left:6%;top:18%}.rg-fx.f2{right:8%;bottom:16%;width:5px;height:5px;background:#8B5CF6;animation-delay:-1.7s}.rg-fx.f3{left:30%;bottom:10%;width:6px;height:6px;background:none;border:1.5px solid #FF8A2B;animation-delay:-3.2s} @keyframes rg-float{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(-10px) rotate(225deg)}} .rg-ban{--c:#FF8A2B;--ci:#2A1200;top:50%;font-size:1.05rem;white-space:nowrap} .rg-loot{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .rg-lt{width:100%;font:800 .66rem/1 'Oxanium',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)} .rg-chip{flex:1 1 0;min-width:0;justify-content:center;display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 8px;background:var(--deep);clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)} .rg-chip img{width:26px;height:26px;object-fit:contain;flex:none}.rg-chip b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:700 .78rem/1 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}.rg-chip em{font-style:normal;font:800 .72rem/1 'Oxanium',sans-serif;color:#E07A1F}html.dark .rg-chip em{color:#FF8A2B} .rg-go{animation:rg-pulse 2.2s ease-in-out infinite}@keyframes rg-pulse{0%,100%{transform:none}50%{transform:scale(1.015)}}.rg-go[disabled]{animation:none} .rg-foot{margin:-4px 0 0;text-align:center;font-size:.78rem;color:var(--ink3)}.rg-foot b{color:var(--ink2)} @media(max-width:520px){.rg-chip{flex-direction:column;gap:3px;padding:6px 6px 5px}.rg-chip b{font-size:.62rem}.rg-reel{--iw:96px}.rg-dia{width:56px;height:56px}.rg-dia img{width:50px;height:50px}@keyframes rg-idle{to{transform:translateX(calc(var(--n,3) * -106px))}}} @media(prefers-reduced-motion:reduce){.rg-strip,.rg-fx,.rg-go,.rg-kick i{animation:none}} /* Liste simple (déconnecté, déjà récupéré) : cartes de même hauteur, noms sur une ligne. */ .rnd-pick{align-items:stretch}.rnd-b{justify-content:center}.rnd-b small{white-space:nowrap} /* ── Grade personnalisé : nom, couleur (pastilles en losange) et aperçu façon liste des membres Discord ── */ .gr-in{width:100%;font:inherit;font-size:1.05rem;color:var(--ink);background:var(--deep);border:0;padding:13px 14px;box-shadow:inset 3px 0 0 var(--acc)} .gr-in:focus{outline:0;box-shadow:inset 3px 0 0 var(--acc),0 2px 0 var(--acc)} /* Création du grade (DA boutique : losanges, parallélogrammes, décalés, aucune lueur). Uni / Dégradé, cases en losange ; au clic : la case est frappée, ondes + éclats aux couleurs choisies, une bande balaie l'aperçu et la ligne du membre claque. Le dégradé glisse sur le pseudo exactement comme dans le panneau du grade d'Akona. */ .gr-mode{position:relative;display:inline-flex;margin:0 0 16px;background:var(--deep);isolation:isolate;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)} .gr-mode button{position:relative;z-index:1;border:0;background:none;cursor:pointer;padding:9px 0;min-width:112px;font:700 .82rem/1 'Oxanium',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);transition:color .2s} .gr-mode button:hover:not(.on){color:var(--ink)} .gr-mode button.on{color:#06121C} .gr-mode button:focus-visible{outline:2px solid #3AAEEF;outline-offset:-2px} .gr-mode button[data-m=grad]:not(.on) span{background:linear-gradient(90deg,#F2A7C9,#8B5CF6,#3AAEEF,#F2A7C9) 0 50%/300% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gr-slide3 4s linear infinite} @keyframes gr-slide3{to{background-position:150% 50%}} .gr-mi{position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--acc);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:transform .4s cubic-bezier(.3,1.4,.4,1)} .gr-mode[data-m=grad] .gr-mi{transform:translateX(100%)} /* Sélecteur de couleur : le même que le panneau du grade d'Akona (carré saturation/luminosité, glissière de teinte, #hex), aux angles et ombres de la boutique. Posé à côté de la case, l'aperçu reste visible pendant le choix. */ .gp-ov{position:fixed;inset:0;z-index:3000}.gp-ov[hidden]{display:none} .gp{position:absolute;width:272px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:14px;background:#fff;color:#0E1626;box-shadow:inset 3px 0 0 #3AAEEF,7px 7px 0 rgba(6,18,28,.18),0 24px 50px -20px rgba(0,0,0,.35);opacity:0;transform:translateY(-8px);transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease;font-family:'Chakra Petch',Barlow,system-ui,sans-serif} html.dark .gp{background:#2B313D;color:#F3F5F8;box-shadow:inset 3px 0 0 #3AAEEF,7px 7px 0 rgba(0,0,0,.45),0 24px 50px -20px rgba(0,0,0,.8)} .gp-ov.on .gp{opacity:1;transform:none} .gp-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px} .gp-head span{font:700 .72rem/1 'Oxanium',sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.75} .gp-x{border:0;background:none;color:inherit;opacity:.6;cursor:pointer;width:24px;height:24px;font-size:18px;line-height:1;padding:0}.gp-x:hover{opacity:1} .gp-sv{position:relative;width:100%;aspect-ratio:16/11;cursor:crosshair;touch-action:none;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent)} .gp-svh{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 1px 4px rgba(0,0,0,.35);transform:translate(-50%,-50%);pointer-events:none} .gp-hue{position:relative;height:12px;margin-top:14px;cursor:pointer;touch-action:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)} .gp-hh{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 1px 4px rgba(0,0,0,.35);transform:translate(-50%,-50%);pointer-events:none} .gp-hex{display:flex;align-items:center;gap:2px;margin-top:14px;padding:0 12px;background:#E9EDF2;box-shadow:inset 3px 0 0 #3AAEEF}html.dark .gp-hex{background:#1C2029} .gp-hex b{opacity:.55;font-weight:600} .gp-hex input{flex:1;min-width:0;border:0;background:none;padding:10px 2px;color:inherit;font:600 .95rem/1 'Oxanium',sans-serif;letter-spacing:.06em;text-transform:uppercase}.gp-hex input:focus{outline:none} @media(prefers-reduced-motion:reduce){.gp{transition:none}} /* Bascule Uni ↔ Dégradé : la zone est tranchée en bandes qui partent de biais, la nouvelle palette apparaît derrière avec un court sursaut. */ .gr-cut{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none} .gr-cut-b{position:absolute;inset:0;padding:inherit;background:var(--deep);will-change:transform,opacity} .gr-cut .gr-c,.gr-cut .gr-c i{animation:none!important;transition:none!important} .gr-cut .gr-c.sel::before,.gr-cut .gr-c.sel::after{opacity:1;transform:none} .gr-cut-l{position:absolute;left:0;right:0;height:2px;margin-top:-1px;background:var(--acc);z-index:2} .gr-cut-s{position:absolute;left:0;right:0;top:0;height:3px;background:var(--acc);opacity:0;z-index:2} .gr-pal{position:relative;background:var(--deep);padding:10px 10px 12px} .gr-pal .gr-c::after{background:var(--deep)} .gr-sw{display:flex;flex-wrap:wrap;gap:13px;padding:6px 4px}.gr-sw[hidden]{display:none} .gr-c{position:relative;display:block;flex:none;width:34px;height:34px;cursor:pointer;-webkit-tap-highlight-color:transparent} .gr-c input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:0;cursor:pointer;z-index:2} .gr-c i{position:absolute;inset:0;z-index:1;background:var(--c);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:transform .2s cubic-bezier(.2,.9,.3,1.5)} .gr-c:hover i{transform:translateY(-3px) rotate(8deg) scale(1.1)} .gr-c:active i{transform:scale(.8);transition-duration:.06s} .gr-c::before,.gr-c::after{content:'';position:absolute;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);pointer-events:none;opacity:0;transition:opacity .15s,transform .3s cubic-bezier(.2,.9,.3,1.6)} .gr-c::before{inset:-7px;background:var(--ink);transform:scale(.55) rotate(-45deg)} .gr-c::after{inset:-4px;background:var(--paper)} .gr-c:has(input:checked)::before,.gr-c:has(input:checked)::after{opacity:1}.gr-c:has(input:checked)::before{transform:none} .gr-c:has(input:focus-visible)::before{opacity:1;transform:none;background:#3AAEEF} .gr-c.hit::before{animation:gr-frame .42s cubic-bezier(.2,.9,.3,1.4)} @keyframes gr-frame{0%{transform:scale(1.8) rotate(45deg);opacity:0}55%{transform:scale(.92);opacity:1}100%{transform:none;opacity:1}} .gr-c.hit i{animation:gr-pop .5s cubic-bezier(.2,.9,.3,1.3)} @keyframes gr-pop{0%{scale:.5;rotate:-30deg}45%{scale:1.3;rotate:6deg}72%{scale:.94;rotate:0deg}100%{scale:1;rotate:0deg}} /* dégradé choisi : il glisse dans sa case, comme sur le pseudo */ /* même glissement que le pseudo, sans jointure visible */ .gr-sw[data-m=grad] .gr-c i{background:linear-gradient(90deg,var(--a),var(--b),var(--a),var(--b),var(--a)) 0 50%/400% 100%} .gr-sw[data-m=grad] .gr-c:has(input:checked) i{animation:gr-bg 2.6s linear infinite} .gr-sw[data-m=grad] .gr-c.hit:has(input:checked) i{animation:gr-pop .5s cubic-bezier(.2,.9,.3,1.3),gr-bg 2.6s linear infinite} @keyframes gr-bg{to{background-position:66.667% 50%}} /* cases « au choix » : un + au centre */ .gr-free i{background:conic-gradient(#F2A7C9,#FF8A2B,#F5B82E,#4CC08A,#3AAEEF,#8B5CF6,#F2A7C9)}.gr-free.on i{background:var(--c)} .gr-free i::after,.gr-cust i::after{content:'';position:absolute;inset:0;background:linear-gradient(#fff,#fff) 50% 50%/11px 3px no-repeat,linear-gradient(#fff,#fff) 50% 50%/3px 11px no-repeat;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.55))} .wstep:not([hidden]) .gr-sw .gr-c{animation:gr-in .5s calc(var(--i,0) * 34ms + .1s) cubic-bezier(.2,.9,.3,1.4) backwards} @keyframes gr-in{0%{transform:translateY(16px) scale(0) rotate(-140deg);opacity:0}100%{transform:none;opacity:1}} /* mon dégradé : départ → arrivée */ .gr-two{display:flex;align-items:center;gap:12px;margin:12px 4px 0;font:700 .72rem/1 'Oxanium',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);animation:gr-up .32s cubic-bezier(.2,.9,.3,1.3)}.gr-two[hidden]{display:none} @keyframes gr-up{from{opacity:0;transform:translateY(8px)}} .gr-two .gr-c{width:30px;height:30px}.gr-two .gr-c::before,.gr-two .gr-c::after{display:none} .gr-bar{flex:0 1 150px;min-width:50px;height:10px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);background:linear-gradient(90deg,var(--a),var(--b),var(--a),var(--b),var(--a)) 0 50%/400% 100%;animation:gr-slide 2.6s linear infinite} /* éclats (créés en JS) */ .gr-fx{position:absolute;left:0;top:0;z-index:4;pointer-events:none;box-sizing:border-box;will-change:transform,opacity} /* aperçu façon liste des membres Discord */ .gr-list{position:relative;overflow:hidden;padding:14px 16px 12px 20px;background:#1E1F22;--ga:#F2A7C9;--gb:#F2A7C9;--lb:#1E1F22} html:not(.dark) .gr-list{background:#F2F3F5;--lb:#F2F3F5} .gr-list::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--ga),var(--gb))} .wstep:not([hidden]) .gr-list{animation:gr-wipe .6s .45s cubic-bezier(.2,.7,.2,1) backwards} @keyframes gr-wipe{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0)}} .gr-list .gr-sec{display:block;margin:-.45em 0 calc(8px - .45em);padding:.45em 0;font:700 .72rem/1 'Oxanium',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#949BA4;opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html:not(.dark) .gr-list .gr-sec{color:#5C5E66} .gr-mem{display:flex;align-items:center;gap:12px;min-width:0} .gr-av{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:#5865F2;color:#fff;display:grid;place-items:center;font:700 .9rem/1 'Oxanium',sans-serif} .gr-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block} .gr-av i{position:absolute;right:-3px;bottom:-3px;width:10px;height:10px;border-radius:50%;background:#23A55A;border:3px solid var(--lb)} /* marge haute/basse compensée : les caractères spéciaux des pseudos (ʒ, ꧁, accents empilés…) ne sont jamais rognés */ .gr-nm{display:inline-block;max-width:100%;min-width:0;padding:.3em 2px .4em 0;margin:-.3em -2px -.4em 0;font-weight:600;font-size:1rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* identique au panneau du grade d'Akona (utils/gradeWeb.js, .grad-text) */ /* même mouvement que .grad-text d'Akona (une période = 2 largeurs, 2,6 s) ; motif 2 périodes sur 400 % : la jointure n'est jamais visible */ .gr-nm.gt{background-size:400% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:gr-slide 2.6s linear infinite} @keyframes gr-slide{0%{background-position:0% 50%}100%{background-position:66.667% 50%}} .gr-band{position:absolute;top:-6px;bottom:-6px;left:0;z-index:3;pointer-events:none} .gr-until{display:block;margin-top:10px;font-size:.84rem;color:var(--ink3)} @media(prefers-reduced-motion:reduce){.wstep .gr-sw .gr-c,.gr-c.hit i,.gr-c.hit::before,.wstep .gr-list,.gr-two,.gr-mi{animation:none;transition:none}.gr-sw[data-m=grad] .gr-c:has(input:checked) i,.gr-nm.gt,.gr-bar,.gr-mode button span{animation:none}.gr-fx,.gr-band{display:none}} .hp-link{text-decoration:none;color:inherit;margin-top:6px}.hp-link .hp-price{color:#C4B5FD} .free-done{margin:6px 0 16px;padding:12px 16px;background:color-mix(in srgb,#4CC08A 16%,var(--surface));border-left:4px solid #4CC08A;font-weight:700;color:var(--ink)} .prod:has(.free-tag)::after{content:'GRATUIT';position:absolute;top:14px;right:-6px;z-index:2;padding:5px 16px 5px 18px;background:#FF8A2B;color:#2A1200;font:800 .78rem/1 'Oxanium',sans-serif;letter-spacing:.14em;rotate:4deg;clip-path:polygon(8px 0,100% 3px,calc(100% - 9px) 100%,0 calc(100% - 4px))} @media(prefers-reduced-motion:reduce){.free-tag::after{animation:none}} .hpf{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .testbar{margin-top:14px;padding:10px 16px;font-size:.92rem;color:#1B1405;background:repeating-linear-gradient(135deg,#F5CF7A 0 16px,#EFC25C 16px 32px)} .testbar b{font-family:'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;margin-right:6px} /* fenêtre d'une offre */ html.mdl-on{overflow:hidden} .mdl{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,10,14,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .22s} .mdl[hidden]{display:none}.mdl.on{opacity:1} .mdl-box{position:relative;width:100%;max-width:50rem;max-height:min(calc(82vh / var(--vz,1)),720px);display:flex;background:var(--paper);box-shadow:0 30px 80px -20px rgba(0,0,0,.6);transform:translateY(22px);transition:transform .28s cubic-bezier(.2,.8,.2,1)} .mdl.on .mdl-box{transform:none} .mdl-box:focus{outline:0} /* Thème sombre : fond plus noir et flouté, fenêtre plus claire et ombre profonde, pour bien la détacher (sans effet néon). */ html.dark .mdl{background:rgba(1,2,4,.9);-webkit-backdrop-filter:blur(6px) saturate(.4);backdrop-filter:blur(6px) saturate(.4)} html.dark .mdl-box{--paper:#232833;--surface:#2B313D;--deep:#1C2029;--soft:#343B48;--rdbg:#161A21;--rd:#5A6270;background:var(--paper);box-shadow:0 50px 140px -10px rgba(0,0,0,1),0 20px 50px -20px rgba(0,0,0,.9)} html.dark .mdl-box::before{width:5px} html.dark .mdl-x{background:#F3F5F8;color:#101216} .mdl-box::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc);z-index:2} .mdl-body{flex:1;overflow-y:auto;overscroll-behavior:contain} .mdl-x{position:absolute;top:0;right:0;z-index:3;width:40px;height:40px;display:grid;place-items:center;border:0;background:var(--ink);color:var(--paper);cursor:pointer;clip-path:polygon(12px 0,100% 0,100% 100%,0 100%);padding-left:8px;transition:width .22s cubic-bezier(.2,.9,.3,1.3),height .22s cubic-bezier(.2,.9,.3,1.3),padding .22s,clip-path .22s,background .2s,color .2s} .mdl-x svg{transition:transform .25s cubic-bezier(.2,.9,.3,1.3)} .mdl-x:hover,.mdl-x:focus-visible{width:58px;height:52px;padding-left:16px;clip-path:polygon(20px 0,100% 0,100% 100%,0 100%)} .mdl-x:hover svg{transform:scale(1.15) rotate(90deg)} .mdl-x:active{width:52px;height:46px} .mdl-x:hover{background:var(--acc2);color:#fff} /* Croix au survol, en continu : bandes en biais qui défilent dans le fond (deux bleus, arêtes franches), la croix tournée d'un quart de tour qui « bat » doucement. */ .mdl-x:hover,.mdl-x:focus-visible{background:repeating-linear-gradient(115deg,#1873BF 0 10px,#1468B0 10px 20px) 0 0/200% 100%;animation:mx-stripes .9s linear infinite} html.dark .mdl-x:hover{background:repeating-linear-gradient(115deg,#1873BF 0 10px,#1468B0 10px 20px) 0 0/200% 100%} .mdl-x:hover svg{animation:mx-beat 1.1s .25s ease-in-out infinite} @keyframes mx-stripes{to{background-position:-43px 0}} @keyframes mx-beat{0%,100%{transform:scale(1.15) rotate(90deg)}50%{transform:scale(1.28) rotate(90deg)}} /* Clic : la croix fait un tour complet en grossissant, la fenêtre « claque » et se replie en biais. */ .mdl.closing .mdl-x svg{animation:mx-spin .32s cubic-bezier(.3,0,.3,1) forwards} @keyframes mx-spin{0%{transform:scale(1.15) rotate(90deg)}100%{transform:scale(.4) rotate(450deg);opacity:0}} /* Fermeture « découpe en deux », version épurée : un trait fin trace la diagonale, puis les deux moitiés s'écartent de part et d'autre de la coupe en glissant, et s'effacent. ~0,3 s, sans rotation ni éclat. */ .mdl-half{will-change:transform,opacity} .mdl-half.top{z-index:2;clip-path:polygon(0 0,100% 0,100% 34%,0 66%)} .mdl-half.bot{z-index:3;clip-path:polygon(0 66%,100% 34%,100% 100%,0 100%)} .mdl-half.bot *{animation:none!important;transition:none!important} .mdl.cut .mdl-half.top{animation:half-up .24s cubic-bezier(.2,.7,.2,1) forwards} .mdl.cut .mdl-half.bot{animation:half-down .24s cubic-bezier(.2,.7,.2,1) forwards} @keyframes half-up{0%{transform:none;opacity:1}55%{opacity:1}100%{transform:translate(-14px,-42px);opacity:0}} @keyframes half-down{0%{transform:none;opacity:1}55%{opacity:1}100%{transform:translate(14px,42px);opacity:0}} .mdl-blade{position:absolute;z-index:5;height:2px;margin-top:-1px;background:#fff;pointer-events:none;transform-origin:0 50%;animation:blade .26s cubic-bezier(.3,.8,.3,1) forwards} @keyframes blade{0%{transform:rotate(var(--a)) scaleX(0);opacity:1}40%{transform:rotate(var(--a)) scaleX(1);opacity:1}100%{transform:rotate(var(--a)) scaleX(1);opacity:0}} .mdl.closing{background:rgba(8,10,14,0)!important;transition:background .24s .06s;-webkit-backdrop-filter:none!important;backdrop-filter:none!important} @media(prefers-reduced-motion:reduce){.mdl-x:hover,.mdl-x:hover svg{animation:none}} html.dark .mdl-x:hover{background:var(--acc2);color:#fff}.mdl-x:focus-visible{outline:2px solid var(--acc);outline-offset:-4px} .mdl-load{padding:80px 24px;text-align:center;font:700 1.2rem 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)} .mdl-grid{display:grid} @media(min-width:900px){.mdl-grid{grid-template-columns:minmax(0,4fr) minmax(0,6fr);align-items:start}.mdl .pp-info{position:sticky;top:0}} .mdl .pp-info .art{margin:0;box-shadow:none;aspect-ratio:400/190} .mdl .pp-info .pad{padding:16px 20px 20px} .mdl .meta{font-size:.82rem}.mdl .pp-info .desc{font-size:.92rem}.mdl .pp-info .note{font-size:.84rem;margin-top:12px} .mdl .pp-info h1{font-size:clamp(1.9rem,3.4vw,2.5rem);margin:6px 0 0} .mdl .bigprice{font-size:clamp(1.9rem,3.4vw,2.4rem);margin:8px 0 10px} .mdl .panel{box-shadow:none;min-height:100%;padding:22px 24px 24px} .mdl .panel .for{margin-bottom:16px}.mdl .blk{margin-bottom:16px}.mdl .blk>h3{font-size:1.1rem;margin-bottom:8px} .mdl .band{margin:0 -24px 16px;padding:16px 24px}.mdl .opt{padding:5px 0;gap:12px}.mdl input.rd{width:24px;height:24px}.mdl input.rd:checked{background:radial-gradient(circle,var(--acc) 0 5px,var(--rdbg) 6px)} .mdl .logo-tile{height:30px;min-width:48px;padding:0 7px;font-size:.85rem}.mdl .logo-tile svg{max-width:38px;max-height:20px}.mdl .opt .txt{font-size:1rem}.mdl .opt .sm{font-size:.82rem} .mdl .field{margin-bottom:12px}.mdl .check{font-size:.86rem;margin-bottom:10px}.mdl input.ck{width:22px;height:22px}.mdl input.ck:checked{background-size:16px} .mdl .total{margin:14px 0 10px}.mdl .total b{font-size:1.9rem}.mdl .buy{padding:15px;font-size:1.25rem}.mdl .hint{font-size:.8rem} .mdl .panel>h2{font-size:clamp(1.6rem,3vw,2.1rem);padding-right:40px;margin-bottom:6px} @media(max-width:760px){.mdl{padding:0;align-items:flex-end}.mdl-box{max-height:calc(86vh / var(--vz,1));max-width:none;transform:translateY(100%)}.mdl-box::before{width:100%;height:4px;bottom:auto}.mdl .pp-info .art{aspect-ratio:400/140}.mdl .panel{padding:18px 16px 20px}.mdl .band{margin:0 -16px 16px;padding:14px 16px}} @media(prefers-reduced-motion:reduce){.mdl,.mdl-box,.mdl-x,.mdl-x svg{transition:none}} /* Croix de fermeture : au survol, le trapèze bleu sort du coin et une plaque décalée (blanche en sombre, foncée en clair) surgit derrière avec un effet de « bug » (sauts saccadés, tranches décalées), puis se pose ; un mini-bug revient de temps en temps. La croix fait un quart de tour. */ .mdl .mdl-x,html.dark .mdl .mdl-x{background:none;clip-path:none;isolation:isolate;overflow:visible;transition:width .18s,height .18s,padding .18s} .mdl .mdl-x::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--ink);clip-path:polygon(12px 0,100% 0,100% 100%,0 100%);transition:transform .2s cubic-bezier(.2,.9,.3,1.4),background .15s} html.dark .mdl .mdl-x::before{background:#F3F5F8} .mdl .mdl-x::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;clip-path:polygon(18px 0,100% 0,100% 100%,0 calc(100% - 6px));background:linear-gradient(180deg,transparent 0 49%,rgba(255,255,255,.9) 49% 51%,transparent 51%) no-repeat;background-size:100% 300%;background-position:0 -100%;opacity:0} .mx-pl::before{content:'';position:absolute;inset:0;background:#3AAEEF;clip-path:inherit;opacity:0} .mx-pl{position:absolute;inset:0;z-index:-2;pointer-events:none;background:#0E1628;clip-path:polygon(18px 0,100% 0,100% 100%,0 calc(100% - 6px));opacity:0} html.dark .mx-pl{background:#fff} .mdl .mdl-x:hover,.mdl .mdl-x:focus-visible,html.dark .mdl .mdl-x:hover{background:none;color:#fff;animation:none;width:52px;height:48px;padding-left:14px} .mdl .mdl-x:hover::before,.mdl .mdl-x:focus-visible::before,html.dark .mdl .mdl-x:hover::before{background:#1873BF;clip-path:polygon(18px 0,100% 0,100% 100%,0 calc(100% - 6px));transform:translate(5px,-5px);animation:mx-pop .3s cubic-bezier(.2,.9,.3,1.45)} @keyframes mx-pop{0%{transform:translate(0,0) scale(.9)}55%{transform:translate(7px,-7px) scale(1.06)}100%{transform:translate(5px,-5px) scale(1)}} /* Trait de balayage blanc qui traverse le trapèze à l'entrée, puis à chaque mini-bug. */ .mdl .mdl-x:hover::after{transform:translate(5px,-5px);animation:mx-scan .26s .05s linear,mx-scan-idle 2.8s 1.2s linear infinite} @keyframes mx-scan{0%{opacity:1;background-position:0 -100%}100%{opacity:1;background-position:0 200%}} @keyframes mx-scan-idle{0%,86%{opacity:0;background-position:0 -100%}87%{opacity:1;background-position:0 -100%}95%{opacity:1;background-position:0 200%}96%,100%{opacity:0}} /* Copie cyan de la plaque, décalée pendant les sauts (effet d'écran qui décroche). */ .mdl .mdl-x:hover .mx-pl::before{animation:pl-rgb .36s steps(1,end) forwards,pl-rgb-idle 2.8s 1.2s steps(1,end) infinite} @keyframes pl-rgb{0%,100%{opacity:0;transform:none}12%{opacity:.9;transform:translate(7px,-3px)}26%{opacity:0}40%{opacity:.9;transform:translate(-6px,2px)}54%{opacity:0}70%{opacity:.7;transform:translate(5px,0)}84%{opacity:0}} @keyframes pl-rgb-idle{0%,86%,96%,100%{opacity:0;transform:none}89%{opacity:.85;transform:translate(6px,-2px)}92%{opacity:0}94%{opacity:.7;transform:translate(-5px,2px)}} .mdl .mdl-x:hover .mx-pl,.mdl .mdl-x:focus-visible .mx-pl{opacity:1;transform:translate(-3px,4px);animation:pl-glitch .36s steps(1,end) forwards,pl-glitch-idle 2.8s 1.2s steps(1,end) infinite} @keyframes pl-glitch{0%{opacity:0;transform:translate(5px,-5px)}12%{opacity:1;transform:translate(-9px,6px);clip-path:polygon(18px 0,100% 0,100% 40%,7px 40%)}26%{transform:translate(2px,-1px);clip-path:polygon(18px 0,100% 0,100% 100%,0 calc(100% - 6px))}40%{opacity:.4;transform:translate(-12px,9px);clip-path:polygon(9px 55%,100% 55%,100% 100%,0 calc(100% - 6px))}54%{opacity:1;transform:translate(-1px,2px);clip-path:polygon(18px 0,100% 0,100% 100%,0 calc(100% - 6px))}70%{transform:translate(-6px,7px);clip-path:polygon(18px 0,100% 0,100% 62%,4px 62%)}84%,100%{opacity:1;transform:translate(-3px,4px);clip-path:polygon(18px 0,100% 0,100% 100%,0 calc(100% - 6px))}} @keyframes pl-glitch-idle{0%,86%,100%{transform:translate(-3px,4px);clip-path:polygon(18px 0,100% 0,100% 100%,0 calc(100% - 6px))}89%{transform:translate(-8px,7px);clip-path:polygon(18px 0,100% 0,100% 45%,6px 45%)}92%{transform:translate(1px,1px);clip-path:polygon(10px 50%,100% 50%,100% 100%,0 calc(100% - 6px))}95%{transform:translate(-5px,6px);clip-path:polygon(18px 0,100% 0,100% 100%,0 calc(100% - 6px))}} .mdl .mdl-x:hover svg{transform:translate(5px,-5px) rotate(90deg);transition:transform .2s cubic-bezier(.2,.9,.3,1.3);animation:none} .mdl .mdl-x:active svg{transform:translate(5px,-5px) rotate(90deg) scale(.85)} @media(prefers-reduced-motion:reduce){.mdl .mdl-x:hover .mx-pl,.mdl .mdl-x:hover .mx-pl::before,.mdl .mdl-x:hover::after,.mdl .mdl-x:hover::before{animation:none}} /* cadeau, code promo */ .switch{display:inline-flex;align-items:center;gap:14px;cursor:pointer;user-select:none} .switch input{position:absolute;opacity:0;width:1px;height:1px} .switch .sw{position:relative;flex:none;width:48px;height:26px;background:var(--rd);transition:background .2s} .switch .sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;transition:transform .2s cubic-bezier(.2,.8,.2,1)} .switch input:checked+.sw{background:var(--acc)}.switch input:checked+.sw::after{transform:translateX(22px)} .switch input:focus-visible+.sw{outline:2px solid var(--acc);outline-offset:3px} .switch .txt{font:700 1.1rem 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)} .giftbox{margin-top:12px}.giftbox .field{margin-bottom:8px} .gres{display:flex;flex-direction:column;gap:4px} .gmem,.gpick{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:var(--deep);color:var(--ink);font:inherit;text-align:left;cursor:pointer} .gmem:hover{background:var(--soft)}.gmem img,.gpick img{width:30px;height:30px;border-radius:2px;flex:none} .gmem span{display:flex;flex-direction:column;line-height:1.2;min-width:0}.gmem b{font-weight:600}.gmem i,.gpick i{font-style:normal;font-size:.82rem;color:var(--ink3)} .gpick{cursor:default;border-left:4px solid var(--acc)}.gpick span{flex:1;min-width:0} .gpick button{border:0;background:none;color:var(--acct);font:700 .95rem 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.05em;cursor:pointer} .gnone{margin:0;font-size:.88rem;color:var(--ink3)} .crow{display:flex;gap:8px}.crow input{flex:1;text-transform:uppercase}.crow .btn{flex:none}.crow input#f-invite{text-transform:none} .cmsg{min-height:1.2em}.cmsg.ok{color:var(--good)}.cmsg.bad{color:var(--bad)} /* Ticket du code appliqué : bloc en biais, étiquette, code en grand, économie à droite ; reflet en continu. */ .field.promo{position:relative}.field.promo:has(.cwrap) .cmsg{display:none} /* Conteneur décalé : plaque de couleur et ombre dure en biais derrière le ticket ; elles « respirent » en continu. */ .cwrap{--c:#4CC08A;--ci:#04140C;position:relative;margin:12px 16px 16px 0}.cwrap.crea{--c:#F5B82E;--ci:#2A1A00} .cwrap::before,.cwrap::after{content:'';position:absolute;inset:0;clip-path:polygon(16px 0,100% 5px,calc(100% - 20px) 100%,0 calc(100% - 7px));pointer-events:none} .cwrap::after{background:var(--c);opacity:.38;transform:translate(8px,7px);animation:cw-drift 2.6s ease-in-out infinite} .cwrap::before{background:#05070A;opacity:.45;transform:translate(15px,13px);animation:cw-drift2 2.6s ease-in-out infinite} html:not(.dark) .cwrap::before{opacity:.12} @keyframes cw-drift{50%{transform:translate(11px,9px)}}@keyframes cw-drift2{50%{transform:translate(19px,16px)}} .cwrap .cticket{z-index:1} .cticket{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:0;padding:12px 30px 13px 30px;overflow:hidden; background:color-mix(in srgb,var(--c) 16%,var(--surface));clip-path:polygon(16px 0,100% 5px,calc(100% - 20px) 100%,0 calc(100% - 7px))} /* Trapèze déformé : le bord gauche penche aussi, souligné par une bande de couleur qui suit la pente. */ .cticket::before{content:'';position:absolute;left:0;top:0;bottom:0;width:26px;background:var(--c);clip-path:polygon(16px 0,24px 0,8px calc(100% - 6px),0 calc(100% - 7px));pointer-events:none} .cticket::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 46%,rgba(255,255,255,.28) 53%,transparent 61%) no-repeat;background-size:260% 100%;background-position:120% 0;animation:bv-shine2 2.8s 1s cubic-bezier(.5,0,.3,1) infinite} .ct-tag{position:absolute;z-index:2;left:-8px;top:-15px;rotate:-4deg;padding:6px 18px 6px 16px;background:var(--c);color:var(--ci);font:800 .74rem/1.1 'Oxanium',sans-serif;letter-spacing:.12em;text-transform:uppercase; clip-path:polygon(9px 0,100% 3px,calc(100% - 10px) 100%,0 calc(100% - 4px));pointer-events:none} .cwrap.crea>.ct-tag{background:#FF8A2B;color:#2A1200} .cwrap .cticket{padding-top:20px} .ct-code{font:800 1.2rem/1 'Oxanium',sans-serif;letter-spacing:.06em;color:var(--ink)} .ct-who{flex-basis:100%;order:3;font-size:.82rem;color:var(--ink3)} .ct-save{margin-left:auto;font:800 1.25rem/1 'Oxanium',sans-serif;color:var(--c)} html:not(.dark) .cwrap.crea .ct-save{color:#B7791F}html:not(.dark) .cwrap.promo .ct-save{color:var(--good)} .cwrap.hit .cticket{animation:ct-hit .6s cubic-bezier(.3,0,.3,1.3)} .cwrap.hit::after{animation:cw-in .7s .12s cubic-bezier(.2,.9,.3,1.5) backwards,cw-drift 2.6s .9s ease-in-out infinite} .cwrap.hit::before{animation:cw-in2 .7s .2s cubic-bezier(.2,.9,.3,1.5) backwards,cw-drift2 2.6s .9s ease-in-out infinite} .cwrap.hit .ct-tag{animation:bv-stamp2 .45s .18s cubic-bezier(.3,0,.3,1.4) backwards}.cwrap.hit .ct-code{animation:ct-code .5s .24s cubic-bezier(.2,.9,.3,1.4) backwards} .cwrap.out{animation:ct-out .28s ease-in forwards} @keyframes ct-hit{0%{transform:translate(-60px,-46px) skewX(-14deg) scale(1.3);opacity:0}28%{transform:translate(4px,3px) skewX(4deg) scale(.94);opacity:1}48%{transform:translate(-2px,-1px) scale(1.04)}66%{transform:scale(.99)}100%{transform:none}} @keyframes cw-in{0%{transform:translate(0,0);opacity:0}60%{transform:translate(14px,12px);opacity:.5}100%{transform:translate(8px,7px)}} @keyframes cw-in2{0%{transform:translate(0,0);opacity:0}60%{transform:translate(24px,21px)}100%{transform:translate(15px,13px)}} @keyframes ct-code{0%{transform:scale(1.8);opacity:0;letter-spacing:.4em}60%{transform:scale(.95);opacity:1}100%{transform:none}} /* Bannière « CODE ACTIVÉ ! » : claque en travers du ticket puis file vers la droite. */ .cbanner{position:absolute;z-index:3;left:50%;top:50%;padding:7px 22px 7px 24px;background:var(--c);color:var(--ci);font:800 1.15rem/1 'Oxanium',sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none; clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);box-shadow:none;transform:translate(-50%,-50%) rotate(-6deg);animation:cbanner 1.25s cubic-bezier(.3,0,.3,1) forwards} @keyframes cbanner{0%{transform:translate(-50%,-50%) rotate(-6deg) scale(2.4);opacity:0}16%{transform:translate(-50%,-50%) rotate(-6deg) scale(.92);opacity:1}24%{transform:translate(-50%,-50%) rotate(-6deg) scale(1.05)}30%,66%{transform:translate(-50%,-50%) rotate(-6deg) scale(1)}100%{transform:translate(120%,-50%) rotate(-6deg) scale(1);opacity:0}} .cf-ring{border-width:3px} @keyframes ct-out{to{transform:scale(.9);opacity:0}} #tot.bump{display:inline-block;animation:pk-bump .5s cubic-bezier(.2,.9,.3,1.35)} .cf-float{top:-18px} @media(prefers-reduced-motion:reduce){.cticket::after,.cwrap::before,.cwrap::after,.cwrap.hit .cticket,.cwrap.hit .ct-tag,.cwrap.hit .ct-code{animation:none}.cbanner{display:none}} .tv{display:flex;align-items:baseline;gap:10px}.tv s{font:700 1.2rem 'Oxanium',sans-serif;color:var(--ink3)} .addons .opt{justify-content:flex-start}.addons .ap{margin-left:auto;font:800 1.1rem 'Oxanium',sans-serif;color:var(--acct)}.addons .hint{display:block;margin-top:6px} .feat{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:7px} .feat li{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:600;color:var(--ink)} .feat .fi{flex:none;display:grid;place-items:center;width:26px;height:26px;background:var(--soft);color:var(--acct)} .prod .desc{flex:none}.prod .feat{flex:1;margin-bottom:6px} .mdl .feat{margin:14px 0 4px} .from{font-size:.5em;margin-right:6px;letter-spacing:.04em;color:var(--ink3);vertical-align:.35em} .cfg .opt{justify-content:flex-start}.cfg .ap,.addons .ap{margin-left:auto;font:800 1.05rem 'Oxanium',sans-serif;color:var(--acct)}.ap.inc{color:var(--ink3);font-weight:700} .chips2{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px} .chip2 input{position:absolute;opacity:0;width:1px;height:1px} .chip2 span{display:flex;flex-direction:column;gap:2px;padding:9px 10px;background:var(--deep);cursor:pointer;box-shadow:inset 0 -3px 0 transparent;transition:box-shadow .2s} .chip2 b{font:800 1.05rem/1 'Oxanium',sans-serif;text-transform:uppercase;color:var(--ink)}.chip2 i{font-style:normal;font-size:.82rem;color:var(--ink3)} .chip2 input:checked+span{box-shadow:inset 0 -3px 0 var(--acc)}.chip2 input:checked+span i{color:var(--acct)}.chip2 input:focus-visible+span{outline:2px solid var(--acc)} .wprog{display:flex;gap:5px;margin:0 0 8px}.wprog span{flex:1;height:5px;background:var(--soft);transform:skewX(-20deg);transition:background .25s}.wprog span.on{background:var(--acc)} .wlabel{margin:0 0 16px;font:700 .95rem 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)} .testtag{font:800 .85rem/1 'Oxanium',sans-serif;letter-spacing:.1em;padding:6px 9px;background:var(--acc);color:#04121C} .lsl-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:2px 0 14px} .lsl-d b,.lsl-p b{display:block;font:800 2.1rem/1 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.01em}.lsl-d b{color:var(--ink)}.lsl-p b{color:var(--acct)} .lsl-d small,.lsl-p small{display:block;margin-top:5px;min-height:1.2em;font-size:.88rem;color:var(--ink3)}.lsl-p{text-align:right} .lsl-off{font-style:normal;font-weight:800;color:var(--good);margin-left:8px} .lsl-track{position:relative;height:34px}.lsl-rail,.lsl-fill{position:absolute;left:0;top:14px;height:6px}.lsl-rail{right:0;background:var(--deep)}.lsl-fill{background:var(--acc);width:calc(11px + (100% - 22px) * var(--p))} .lsl-in{-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:34px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y} .lsl-in::-webkit-slider-runnable-track{height:34px;background:transparent}.lsl-in::-moz-range-track{height:34px;background:transparent} .lsl-in::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:6px;border-radius:0;background:var(--acc);border:4px solid var(--surface);transform:rotate(45deg);transition:transform .15s} .lsl-in::-moz-range-thumb{width:14px;height:14px;border-radius:0;background:var(--acc);border:4px solid var(--surface);transform:rotate(45deg);transition:transform .15s} .lsl-in:hover::-webkit-slider-thumb{transform:rotate(45deg) scale(1.1)}.lsl-in:active::-webkit-slider-thumb{transform:rotate(45deg) scale(1.2)} .lsl-in:hover::-moz-range-thumb{transform:rotate(45deg) scale(1.1)}.lsl-in:active::-moz-range-thumb{transform:rotate(45deg) scale(1.2)} .lsl-in:focus-visible{outline:2px solid var(--acct);outline-offset:3px} .lsl-ticks{position:relative;height:40px;margin-top:2px} .lsl-tk{position:absolute;top:0;left:calc(11px + (100% - 22px) * var(--k));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;padding:2px 6px;background:none;border:0;cursor:pointer;color:var(--ink3);font:700 .82rem/1 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} .lsl-tk.first{transform:translateX(-11px);align-items:flex-start;padding-left:0}.lsl-tk.last{transform:translateX(calc(11px - 100%));align-items:flex-end;padding-right:0} .lsl-tk i{width:2px;height:7px;background:var(--line)}.lsl-tk.first i{margin-left:10px}.lsl-tk.last i{margin-right:10px} .lsl-tk:hover{color:var(--ink)}.lsl-tk.on{color:var(--acct)}.lsl-tk.on i{background:var(--acc)}.lsl-tk:focus-visible{outline:2px solid var(--acct)} @media(max-width:460px){.lsl-d b,.lsl-p b{font-size:1.6rem}.lsl-tk{letter-spacing:0;font-size:.74rem;padding:2px 3px}} .wstep[hidden]{display:none}.wstep .blk.cfg{min-height:8rem} .mdl .panel:has(.wbar){display:flex;flex-direction:column} .wback{border:0;background:none;padding:0;margin:0 0 16px;color:var(--acct);font:700 1rem 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.05em;cursor:pointer} .wbar{position:sticky;bottom:-24px;z-index:2;display:flex;align-items:center;gap:12px;margin:auto -24px -24px;padding:14px 24px;background:var(--surface);box-shadow:0 -10px 24px -14px rgba(14,22,40,.35)} .wbar[hidden]{display:none} .wstep:not([hidden])+.wstep,.wstep{margin-bottom:0} .wprev{border:0;background:none;padding:6px 0;white-space:nowrap;color:var(--ink3);font:700 1rem 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}.wprev:hover{color:var(--ink)} .wtot{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1}.wtot span{font:700 .8rem 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}.wtot b{font:800 1.9rem 'Oxanium',sans-serif;color:var(--ink)} .wnext{padding:13px 18px;font-size:1.05rem;white-space:nowrap} @media(max-width:760px){.mdl:has(.wbar) .pp-info .art{aspect-ratio:400/90}.mdl:has(.wbar) .pp-info :is(.feat,.note,.desc){display:none}.mdl:has(.wbar) .pp-info .pad{padding:12px 16px}.mdl:has(.wbar) .pp-info h1{font-size:1.7rem}.mdl:has(.wbar) .bigprice{font-size:1.6rem;margin:4px 0 0} .wbar{margin:auto -16px -20px;padding:12px 16px;bottom:-20px;gap:8px}.wnext{padding:12px 12px;font-size:.95rem}.wtot b{font-size:1.6rem}} /* petits téléphones : « Retour » se réduit à sa flèche, pour que le bouton principal ne déborde jamais de l'écran */ @media(max-width:440px){.wprev span{display:none}.wprev{font-size:1.35rem;padding:6px 6px 6px 0}.wnext{padding:12px 10px;font-size:.9rem}.wtot b{font-size:1.45rem}} .invchk{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:8px;font-size:.92rem} .invchk.wait{color:var(--ink3)}.invchk.bad{color:var(--bad);font-weight:600} .field:has(.invchk){position:relative} /* Carte du serveur trouvé : même langage que le ticket des codes (trapèze déformé, plaques décalées, étiquette qui déborde). */ .invchk.ok{position:relative;display:block;margin:22px 16px 26px 0;padding:0} .invchk.ok .iv-n{display:inline} .invchk.ok::before,.invchk.ok::after{content:'';position:absolute;left:0;right:0;top:0;height:var(--ivh,64px);clip-path:polygon(16px 0,100% 5px,calc(100% - 20px) 100%,0 calc(100% - 7px));pointer-events:none} .invchk.ok::after{background:var(--acc);opacity:.35;transform:translate(8px,7px);animation:cw-drift 2.6s ease-in-out infinite} .invchk.ok::before{background:#05070A;opacity:.45;transform:translate(15px,13px);animation:cw-drift2 2.6s ease-in-out infinite} html:not(.dark) .invchk.ok::before{opacity:.12} .iv-card{position:relative;z-index:1;display:flex;align-items:center;gap:16px;height:var(--ivh,64px);padding:0 34px 0 30px;overflow:hidden;background:color-mix(in srgb,var(--acc) 16%,var(--surface));clip-path:polygon(16px 0,100% 5px,calc(100% - 20px) 100%,0 calc(100% - 7px))} .iv-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:26px;background:var(--acc);clip-path:polygon(16px 0,24px 0,8px calc(100% - 6px),0 calc(100% - 7px))} .iv-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.25) 46%,rgba(255,255,255,.25) 53%,transparent 61%) no-repeat;background-size:260% 100%;background-position:120% 0;animation:bv-shine2 3s 1.2s cubic-bezier(.5,0,.3,1) infinite} .iv-ico{flex:none;width:40px;height:40px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--acc)} .iv-ico img,.iv-ico .ph{display:block;width:100%;height:100%;border-radius:0;object-fit:cover;clip-path:polygon(50% 3px,calc(100% - 3px) 50%,50% calc(100% - 3px),3px 50%)} .iv-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}.iv-txt b{font:800 1.08rem/1.15 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .iv-txt i{font-style:normal;font-size:.84rem;color:var(--ink3)}.iv-n{font-weight:700;color:var(--acct)} .iv-tag{position:absolute;z-index:2;right:22px;top:-13px;rotate:3deg;padding:5px 16px 5px 14px;background:#4CC08A;color:#04140C;font:800 .72rem/1.1 'Oxanium',sans-serif;letter-spacing:.12em;text-transform:uppercase;clip-path:polygon(9px 0,100% 3px,calc(100% - 10px) 100%,0 calc(100% - 4px))} /* Carte du serveur : même style que la carte du code créateur (biais, losange à plaques tournées, étiquette en haut à gauche), aux couleurs bleu + vert menthe. */ .invchk.ok{--ivh:62px;--mint:#4CC08A;margin:28px 16px 22px 0;rotate:-.6deg} .invchk.ok::after{background:var(--mint);opacity:.3} .iv-card{gap:13px;padding:0 20px 0 28px;background:color-mix(in srgb,var(--mint) 9%,var(--surface))} .iv-card::before{background:var(--mint)}.invchk.ok::after{background:var(--mint)} .iv-ico{position:relative;width:36px;height:36px;clip-path:none;background:none} .iv-ico img,.iv-ico .ph{position:relative;z-index:1;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} .iv-ico::before,.iv-ico::after{content:'';position:absolute;inset:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} .iv-ico::before{background:#05070A;opacity:.45;transform:translate(3px,4px) rotate(11deg) scale(1.04)}.iv-ico::after{background:var(--mint);transform:translate(-2px,-1px) rotate(-13deg) scale(1.07)} .iv-txt{gap:2px}.iv-txt b{font-size:.98rem;text-shadow:2px 2px 0 rgba(0,0,0,.3)}html:not(.dark) .iv-txt b{text-shadow:2px 2px 0 rgba(76,192,138,.3)} .iv-txt i{font-size:.8rem}.iv-n{color:var(--mint)!important}html:not(.dark) .iv-n{color:#2E9E6B!important} .iv-tag,.invchk.ok .iv-tag{display:block;white-space:nowrap;left:-8px;right:auto;top:-13px;rotate:-4deg;padding:5px 13px 5px 12px;font-size:.66rem;letter-spacing:.16em;background:var(--mint)} .iv-tag::before{content:'';display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;background:#04140C;transform:rotate(45deg)} /* Serveur validé : une barre vert menthe en biais balaie le texte d'aide de gauche à droite et l'efface sur son passage ; ensuite sa place se referme en douceur et la carte du serveur remonte (pas de saut). */ .field.iv-done>small{position:relative;display:block;overflow:visible;max-height:6em;animation:hint-wipe .46s cubic-bezier(.65,0,.25,1) forwards,hint-collapse .34s .42s cubic-bezier(.4,0,.2,1) forwards} .field.iv-done>small::after{content:'';position:absolute;top:-3px;bottom:-3px;left:0;width:5px;background:#4CC08A;transform:skewX(-14deg);animation:hint-bar .46s cubic-bezier(.65,0,.25,1) forwards} @keyframes hint-wipe{from{clip-path:inset(-6px -12px -6px 0)}to{clip-path:inset(-6px -12px -6px 100%)}} @keyframes hint-bar{0%{left:0;opacity:1}90%{opacity:1}100%{left:100%;opacity:0}} @keyframes hint-collapse{from{max-height:6em}to{max-height:0;margin-top:0;margin-bottom:0}} /* La carte arrive en glissant depuis l'emplacement du texte. */ .invchk.ok.hit{animation:iv-rise .5s .12s cubic-bezier(.2,.9,.3,1.1) backwards} @keyframes iv-rise{from{opacity:0;transform:translateY(14px)}} @media(prefers-reduced-motion:reduce){.field.iv-done>small{animation:none;display:none}} .invchk.ok em{display:block;margin:20px 0 0;width:auto} .iv-banner{--c:#4CC08A;--ci:#04140C;top:32px} .invchk.ok.hit .iv-card{animation:ct-hit .6s cubic-bezier(.3,0,.3,1.3)} .invchk.ok.hit::after{animation:cw-in .7s .12s cubic-bezier(.2,.9,.3,1.5) backwards,cw-drift 2.6s .9s ease-in-out infinite} .invchk.ok.hit::before{animation:cw-in2 .7s .2s cubic-bezier(.2,.9,.3,1.5) backwards,cw-drift2 2.6s .9s ease-in-out infinite} .invchk.ok.hit .iv-ico{animation:iv-ico .7s .15s cubic-bezier(.2,.9,.3,1.35) backwards} .invchk.ok.hit .iv-tag{animation:bv-stamp2 .45s .35s cubic-bezier(.3,0,.3,1.4) backwards} @keyframes iv-ico{0%{transform:rotate(-180deg) scale(.2);opacity:0}70%{transform:rotate(12deg) scale(1.12);opacity:1}100%{transform:none}} @media(prefers-reduced-motion:reduce){.invchk.ok::before,.invchk.ok::after,.iv-card::after,.invchk.ok.hit .iv-card,.invchk.ok.hit .iv-ico,.invchk.ok.hit .iv-tag{animation:none}} .invchk img,.invchk .ph{width:34px;height:34px;border-radius:50%;flex:none;background:var(--soft)} .invchk.ok span{display:flex;flex-direction:column;line-height:1.25}.invchk b{color:var(--ink)}.invchk i{font-style:normal;font-size:.82rem;color:var(--ink3)} .invchk em{font-style:normal;font-size:.85rem;width:100%;color:#B26B00}.invchk em.g{width:auto;margin-left:auto;color:var(--good);font-weight:700} /* Éléments cliquables : pas de surlignage du texte quand on clique plusieurs fois. */ .bar,.bar *,.opt,.chip2,.check,.switch,.radios label,.tabs button,.prod,.gmem,.gpick,.wbar,.wback,.btn,.presets,.hrow,.mdl-x,.logo-tile{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} .ps{position:relative;display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:12px 26px 12px 0;background:none;font-size:.95rem;color:var(--ink2)} .ps b{flex:none;align-self:stretch;margin:-6px 0 -6px -16px;display:grid;place-items:center;padding:0 14px 0 20px;background:var(--acc);color:#06121C;font:800 1rem/1 'Oxanium',sans-serif;letter-spacing:.06em;clip-path:polygon(14px 0,100% 0,calc(100% - 10px) 100%,0 100%)} /* Encadrés d'info en parallélogramme (côtés en biais, style jeu) : le fond est un calque découpé. */ .ps::before{content:'';position:absolute;inset:0;z-index:0;background:var(--deep);clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);transition:background .25s} .ps>:not(.pk-bub):not(.pk-ring){position:relative;z-index:1} /* Apparition : le fond se déroule depuis la gauche, l'étiquette bleue glisse avec un rebond, puis le texte monte. */ .ps::before{transform-origin:left center;animation:ps-bg .28s .02s cubic-bezier(.2,.8,.2,1) backwards} .ps b{animation:ps-tag .34s .12s cubic-bezier(.2,1.3,.4,1) backwards} /* Sur les encadrés simples, l'étiquette bleue est tranchée en deux : les deux moitiés arrivent en biais depuis des côtés opposés, s'emboîtent d'un coup (frappe + petite secousse), puis l'étiquette « s'implante » et le texte apparaît. */ .ps{animation:ps-tv .34s steps(1,end) backwards,ps-shake .36s .3s linear} /* Apparition « télé qui capte mal » : quelques images saccadées — bandes horizontales décalées, petits sauts latéraux, image qui saute d'un cran puis se cale. Pas de flou ni de lueur : arêtes franches, couleurs de la boutique. */ @keyframes ps-tv{ 0%{opacity:0;transform:translateX(-14px);clip-path:inset(46% 0 46% 0)} 8%{opacity:1;transform:translateX(10px) skewX(-6deg);clip-path:inset(0 0 62% 0)} 16%{transform:translateX(-6px);clip-path:inset(38% 0 0 0)} 24%{opacity:.35;transform:translateX(0);clip-path:inset(0)} 32%{opacity:1;transform:translate(4px,-3px);clip-path:inset(18% 0 52% 0)} 40%{transform:translateX(-3px);clip-path:inset(0 0 0 0)} 52%{transform:translate(2px,2px);clip-path:inset(60% 0 8% 0)} 62%{transform:none;clip-path:inset(0)} 78%{transform:translateX(-2px);clip-path:inset(0)} 100%{transform:none;clip-path:inset(0);opacity:1}} /* Texte : double image bleue / blanche décalée pendant les sauts, comme un signal qui décroche. */ .ps>span:not(.pk-tag){animation:ps-txt .26s .22s cubic-bezier(.2,.8,.2,1) backwards,ps-tvtxt .34s steps(1,end)} @keyframes ps-tvtxt{0%,24%,62%,100%{text-shadow:none}8%{text-shadow:-4px 0 #3AAEEF,3px 0 rgba(255,255,255,.55)}32%{text-shadow:3px 0 #3AAEEF,-2px 0 rgba(255,255,255,.5)}52%{text-shadow:-2px 0 #3AAEEF}} .ps>b,.ps .pk-tag>b{background:none;clip-path:none;position:relative;isolation:isolate;animation:ps-slam .36s .04s cubic-bezier(.2,.8,.2,1) backwards,ps-ink .36s .04s linear backwards} .ps>b::before,.ps>b::after,.ps .pk-tag>b::before,.ps .pk-tag>b::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--tagbg,var(--acc))} .ps>b::before,.ps .pk-tag>b::before{clip-path:polygon(14px 0,60% 0,40% 100%,0 100%);animation:ps-halfA .36s .04s backwards} .ps>b::after,.ps .pk-tag>b::after{clip-path:polygon(59.6% 0,100% 0,calc(100% - 10px) 100%,39.6% 100%);animation:ps-halfB .36s .04s backwards} /* le texte attend la frappe */ .ps>span:not(.pk-tag){animation-delay:.2s,0s}.ps>span.pk-tag{animation:none} @keyframes ps-halfA{0%{transform:translate(-60px,-10px);animation-timing-function:cubic-bezier(.6,0,1,.5)}50%,100%{transform:none}} @keyframes ps-halfB{0%{transform:translate(60px,11px);animation-timing-function:cubic-bezier(.6,0,1,.5)}50%,100%{transform:none}} @keyframes ps-slam{0%,50%{transform:none}58%{transform:scale(1.08) rotate(-1deg)}78%{transform:scale(.98)}100%{transform:none}} @keyframes ps-ink{0%,52%{color:transparent}60%,100%{color:#06121C}} @keyframes ps-shake{0%,50%{transform:none}56%{transform:translate(2px,-1px)}62%{transform:translate(-1px,1px)}70%{transform:translate(1px,0)}80%,100%{transform:none}} .ps>span{animation:ps-txt .26s .22s cubic-bezier(.2,.8,.2,1) backwards} @keyframes ps-bg{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}} @keyframes ps-tag{0%{transform:translateX(-90px) skewX(-18deg) scaleX(1.25);opacity:0;filter:brightness(2)}45%{opacity:1}75%{transform:translateX(6px) skewX(3deg)}100%{transform:none;filter:none}} @keyframes ps-txt{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.ps,.ps::before,.ps b,.ps>span,.ps>b::before,.ps>b::after,.ps .pk-tag>b::before,.ps .pk-tag>b::after,.ps .pk-tag::after{animation:none}} .chips2{padding-top:16px}.chip2{position:relative} .bestb{position:absolute;top:-15px;left:50%;translate:-50% 0;z-index:1;white-space:nowrap;padding:3px 10px 3px 12px;background:var(--acc);color:#06121C;font:800 .78rem/1.2 'Oxanium',sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.06em;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);pointer-events:none} .chip2.best span{box-shadow:inset 0 0 0 2px var(--acc)}.chip2.best input:checked+span{box-shadow:inset 0 0 0 2px var(--acc),inset 0 -5px 0 var(--acc)} .ps.deal b{font-size:.95rem;padding:0 10px}.ps.deal strong{color:var(--ink)} .opt .txt .pd{display:block;font:500 .82rem Barlow,sans-serif;text-transform:none;letter-spacing:0;color:var(--ink3);margin-top:2px} .tagb{display:inline-block;margin-left:10px;padding:2px 9px 2px 10px;background:var(--acc);color:#06121C;font:800 .74rem/1.3 'Oxanium',sans-serif;font-style:normal;letter-spacing:.06em;vertical-align:2px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)} /* « Meilleure valeur » sélectionnée : la case encaisse le choix (écrasement puis rebond), le badge tombe et se plante, la rangée tremble au contact, deux cadres bleus nets s'échappent, des éclats en biais partent du badge, un reflet passe. */ .chip2.best input:checked+span{position:relative;overflow:hidden;animation:bv-hit .5s cubic-bezier(.2,.9,.3,1.25)} .chip2.best input:checked+span::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 44%,rgba(255,255,255,.4) 53%,transparent 62%) no-repeat;background-size:250% 100%;background-position:120% 0;animation:bv-shine .55s .16s ease-out forwards,bv-shine2 3.2s 1.6s cubic-bezier(.5,0,.3,1) infinite} .chip2.best input:checked+span b,.chip2.best input:checked+span i{display:inline-block;transform-origin:left center;animation:bv-txt .45s .14s cubic-bezier(.2,.9,.3,1.5) backwards} .chip2.best::before,.chip2.best::after{content:'';position:absolute;inset:0;pointer-events:none;outline:2px solid var(--acc);opacity:0} .chip2.best:has(input:checked)::before{animation:bv-ring .5s .14s cubic-bezier(.2,.7,.3,1),bv-pulse 2.4s 1.1s cubic-bezier(.2,.7,.3,1) infinite} .chip2.best:has(input:checked)::after{animation:bv-ring2 .6s .22s cubic-bezier(.2,.7,.3,1)} .chip2.best:has(input:checked) .bestb{animation:bv-stamp .42s cubic-bezier(.3,0,.3,1.4)} .chips2.bv-shake,.opt.bv-shake{animation:bv-shake .3s .14s linear} .bv-bit{position:absolute;z-index:3;width:var(--w,12px);height:3px;margin-top:-1px;background:var(--acc);pointer-events:none;transform-origin:left center;animation:bv-bit .5s cubic-bezier(.15,.7,.3,1) forwards} .bv-bit.w{background:#fff} .bv-dia{position:absolute;z-index:3;pointer-events:none;background:var(--acc);transform:translate(-50%,-50%) rotate(45deg);animation:bv-dia .9s cubic-bezier(.15,.7,.3,1) forwards} .bv-dia.o{background:none;border:2px solid #fff;box-sizing:border-box}html:not(.dark) .bv-dia.o{border-color:var(--acc2)} @keyframes bv-dia{0%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(calc(45deg + var(--r))) scale(.6)}} @keyframes bv-hit{0%{transform:scale(1)}28%{transform:scale(.9)}62%{transform:scale(1.05)}82%{transform:scale(.99)}100%{transform:none}} @keyframes bv-shine{to{background-position:-30% 0}} /* En continu tant que « 14 jours » est choisi : un cadre fin s'échappe à intervalle régulier, un reflet repasse sur la case et sur le badge, un éclat part parfois du badge. */ .opt.hot{position:relative} /* pas d'overflow:hidden ici : sur un inline-block il déplace la ligne de base et fait monter le badge ; le reflet est déjà coupé par le clip-path. */ .opt.hot .tagb{position:relative}.opt.hot:has(input:checked) .tagb{animation:bv-stamp2 .42s cubic-bezier(.3,0,.3,1.4)} .opt.hot:has(input:checked) .tagb::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.55) 52%,transparent 62%) no-repeat;background-size:250% 100%;background-position:120% 0;animation:bv-shine .5s .2s ease-out forwards,bv-shine2 3.2s 1.6s cubic-bezier(.5,0,.3,1) infinite} .opt.hot input:checked{animation:bv-hit .45s cubic-bezier(.2,.9,.3,1.25)} .opt.hot input:checked~.ap{animation:bv-txt .45s .18s cubic-bezier(.2,.9,.3,1.5) backwards;transform-origin:right center} .bv-rg{position:absolute;z-index:2;pointer-events:none;border:2px solid var(--acc);transform:skewX(-18deg);animation:bv-rg .5s cubic-bezier(.2,.7,.3,1) forwards} .bv-rg.big{border-width:2px}.bv-rg:not(.big){border-width:1px;opacity:.6} @keyframes bv-rg{0%{transform:skewX(-18deg) scale(1);opacity:1}100%{transform:skewX(-18deg) scale(1.35,1.9);opacity:0}} @keyframes bv-stamp2{0%{transform:translateY(-18px) scale(1.5) rotate(-6deg);opacity:0}35%{transform:translateY(2px) scale(.92) rotate(1deg);opacity:1}60%{transform:translateY(-1px) scale(1.04)}100%{transform:none}} @keyframes bv-shine2{0%{background-position:120% 0}28%,100%{background-position:-30% 0}} @keyframes bv-pulse{0%{opacity:.55;outline-offset:0;outline-width:1px}45%,100%{opacity:0;outline-offset:11px;outline-width:1px}} .chip2.best:has(input:checked) .bestb::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.55) 52%,transparent 62%) no-repeat;background-size:250% 100%;background-position:120% 0;animation:bv-shine2 3.2s 1.75s cubic-bezier(.5,0,.3,1) infinite} @keyframes bv-txt{0%{transform:scale(.7);opacity:.3}70%{transform:scale(1.12)}100%{transform:none;opacity:1}} @keyframes bv-ring{0%{opacity:1;outline-offset:0}100%{opacity:0;outline-offset:14px}} @keyframes bv-ring2{0%{opacity:.6;outline-offset:0;outline-width:1px}100%{opacity:0;outline-offset:26px;outline-width:1px}} @keyframes bv-stamp{0%{translate:-50% -26px;scale:1.5;rotate:-6deg;opacity:0}35%{translate:-50% 3px;scale:.92;rotate:1deg;opacity:1}60%{translate:-50% -2px;scale:1.04;rotate:0deg}100%{translate:-50% 0;scale:1;rotate:0deg}} @keyframes bv-shake{0%,100%{transform:none}25%{transform:translateY(3px)}50%{transform:translateY(-2px)}75%{transform:translateY(1px)}} @keyframes bv-bit{0%{opacity:1;transform:rotate(var(--a)) translateX(0) scaleX(1)}55%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d,40px)) scaleX(.3)}} @media(prefers-reduced-motion:reduce){.opt.hot:has(input:checked) .tagb,.opt.hot:has(input:checked) .tagb::after,.opt.hot input:checked,.opt.hot input:checked~.ap{animation:none}.bv-rg{display:none}} @media(prefers-reduced-motion:reduce){.chip2.best input:checked+span,.chip2.best input:checked+span::after,.chip2.best input:checked+span b,.chip2.best input:checked+span i,.chip2.best:has(input:checked)::before,.chip2.best:has(input:checked)::after,.chip2.best:has(input:checked) .bestb,.chip2.best:has(input:checked) .bestb::after,.chips2.bv-shake{animation:none}.bv-bit,.bv-dia{display:none}} /* Parcours par étapes : la fenêtre ne défile plus ; seule la colonne de droite défile si besoin (étape paiement), et la barre du prix reste toujours visible en bas. */ .mdl-box:has(.wbar) .mdl-body{overflow:hidden;display:flex} .mdl-box:has(.wbar) .mdl-grid{flex:1;min-height:0;align-items:stretch} .mdl-box:has(.wbar) .pp-info{position:static;overflow-y:auto;min-height:0} .mdl-box:has(.wbar) .panel{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding-bottom:0} .mdl-box:has(.wbar) .wbar{position:sticky;bottom:0;margin:auto -24px 0} .mdl-box:has(.wbar) .wstep.wpay{padding-bottom:24px} @media(min-width:900px){.mdl-box:has(.wbar){height:min(calc(82vh / var(--vz,1)),720px)}.mdl-box:has(.wbar) .mdl-grid{grid-template-rows:minmax(0,1fr)}} @media(max-width:899px){.mdl-box:has(.wbar){height:calc(86vh / var(--vz,1))}.mdl-box:has(.wbar) .mdl-grid{grid-template-rows:auto minmax(0,1fr)}.mdl-box:has(.wbar) .wbar{margin:auto -16px 0}} .ps.pack{transition:background .25s}.ps.pack.on::before{background:color-mix(in srgb,var(--good) 14%,var(--deep))}.ps.pack.on{--tagbg:var(--good)}.ps.pack.on b{color:#04140C}.ps.pack i{font-style:normal} .ps.pack{position:relative;overflow:visible}.ps.pack>:not(.pk-ring):not(.pk-bub){position:relative;z-index:1} .pk-ring.top{position:fixed;z-index:60} /* Pack actif, style « butin rare » : des échos du tag se propagent en biais, un reflet balaie l'étiquette et des losanges montent. Tout en arêtes franches. */ .pk-tag{display:flex;flex:none;align-self:stretch;position:relative;margin:-6px 0 -6px -16px}.pk-tag>b{margin:0} .pk-aura{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none} .pk-aura i{position:absolute;inset:0;background:var(--good);clip-path:polygon(14px 0,100% 0,calc(100% - 10px) 100%,0 100%);opacity:0;animation:pk-echo 1.9s cubic-bezier(.2,.6,.3,1) infinite} .pk-aura i:nth-child(2){animation-delay:.95s} @keyframes pk-echo{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.5,1.9)}} .ps.pack.on .pk-tag::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:polygon(14px 0,100% 0,calc(100% - 10px) 100%,0 100%);background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 46%,rgba(255,255,255,.6) 54%,transparent 62%) no-repeat;background-size:260% 100%;background-position:100% 0;animation:pk-shine 2.6s .4s cubic-bezier(.5,0,.3,1) infinite} @keyframes pk-shine{0%{background-position:100% 0}38%,100%{background-position:0 0}} .pk-bub{position:absolute;z-index:4;pointer-events:none;background:#4CC08A;opacity:0;animation:pk-bub var(--t,1.6s) ease-out forwards} .pk-bub.w{background:#E6FFF1} @keyframes pk-bub{0%{opacity:0;transform:translate(-50%,0) rotate(45deg) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),var(--dy,-70px)) rotate(225deg) scale(.2)}} .ps.pack.pop b{animation:pk-stamp .45s cubic-bezier(.2,.9,.3,1.35)} @keyframes pk-stamp{0%{transform:scale(2.6) rotate(-14deg);opacity:0}45%{transform:scale(.86) rotate(2deg);opacity:1}70%{transform:scale(1.06)}100%{transform:none}} .pk-ring{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border:3px solid var(--good);border-radius:8px;transform:rotate(45deg) scale(.3);opacity:0;pointer-events:none;animation:pk-ring .7s cubic-bezier(.15,.7,.3,1) forwards} @keyframes pk-ring{0%{transform:rotate(45deg) scale(.3);opacity:1}100%{transform:rotate(45deg) scale(4.2);opacity:0;border-width:1px}} .mdl-box.shake{animation:pk-shake .32s cubic-bezier(.36,.07,.19,.97)} @keyframes pk-shake{15%{transform:translate(-5px,1px)}30%{transform:translate(5px,-1px)}45%{transform:translate(-3px,0)}60%{transform:translate(3px,0)}80%{transform:translate(-1px,0)}100%{transform:none}} .ap s{font-weight:600;color:var(--ink3);margin-right:6px;text-decoration-thickness:2px} .ap.cut{animation:pk-cut .45s cubic-bezier(.2,.9,.3,1.4)} @keyframes pk-cut{0%{transform:scale(1.25);color:var(--good)}100%{transform:none}} .wtot{position:relative}.pk-float{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font:800 1.05rem 'Oxanium',sans-serif;color:var(--good);white-space:nowrap;pointer-events:none;animation:pk-float 1s cubic-bezier(.2,.8,.3,1) forwards} @keyframes pk-float{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-34px) scale(1)}} .ps.pack.pop::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 0 40%,rgba(255,255,255,.16) 40% 50%,transparent 50%) no-repeat;background-size:300% 100%;background-position:100% 0;animation:pk-wipe .55s .12s ease-out forwards} @keyframes pk-wipe{to{background-position:0 0}} .wtot b.bump{display:inline-block;animation:pk-bump .5s cubic-bezier(.2,.9,.3,1.35)} @keyframes pk-bump{30%{transform:scale(1.14);color:var(--good)}100%{transform:none}} @media(prefers-reduced-motion:reduce){.pk-aura,.pk-bub{display:none}.ps.pack.on .pk-tag::after{animation:none;background:none}.ps.pack.pop b,.ps.pack.pop::after,.wtot b.bump,.pk-ring,.mdl-box.shake,.ap.cut,.pk-float{animation:none}.pk-ring,.pk-float{display:none}} /* Police « jeu » (Oxanium) : plus large que l'ancienne police condensée → tailles ajustées. */ .hero h1,.hero .hh1{font-size:clamp(2.5rem,7.4vw,5.2rem);line-height:1}.hero.big h1,.hero.big .hh1{line-height:1.02} .prod h3{font-size:1.45rem}.prod .price{font-size:1.7rem}.prod .go,.meta{font-size:.8rem;letter-spacing:.05em} .mdl .pp-info h1,.pp-info h1{font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.05} .mdl .bigprice,.bigprice{font-size:clamp(1.6rem,2.6vw,2.1rem)} .mdl .panel>h2,.panel>h2{font-size:clamp(1.25rem,2.3vw,1.65rem);line-height:1.05} .faq>h2{font-size:clamp(1.6rem,4vw,2.4rem)}.sec{font-size:1.3rem} .how b{font-size:1.05rem}.how .n{font-size:2.1rem}.tabs button{font-size:.95rem} .logo{font-size:1.2rem}.tag{font-size:.95rem}.out{font-size:.85rem}.btn{font-size:.92rem;letter-spacing:.05em}.buy{font-size:clamp(1.05rem,2.4vw,1.35rem)} .wtot b,.total b{font-size:1.55rem}.blk>h3{font-size:1.05rem}.opt .txt{font-size:.98rem}.state{font-size:1.6rem}.kpi .n{font-size:1.9rem} .wlabel,.field label{font-size:.9rem}.chip2 b,.preset b{font-size:.95rem}.cfg .ap,.addons .ap,.ap{font-size:.95rem} .faq summary{font-size:1rem}.ps b{font-size:.9rem}.feat li{font-size:.9rem} /* Carte d'offre compacte : illustration moins haute, textes et espacements resserrés, points forts en pastilles sur 2 colonnes. */ .prod{gap:7px;padding-bottom:14px}.prod>:not(.art):not(.ribbon){margin-left:18px;margin-right:18px} .prod .art{aspect-ratio:400/150;margin-bottom:2px} .prod h3{font-size:1.25rem;line-height:1.05}.prod .meta{font-size:.72rem} .prod .desc{font-size:.86rem;line-height:1.45} .prod .feat{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin:2px 0 4px} .prod .feat li{gap:7px;font-size:.78rem;line-height:1.25}.prod .feat .fi{width:20px;height:20px}.prod .feat .fi svg{width:13px;height:13px} .prod .price{font-size:1.45rem}.prod .foot{align-items:center}.prod .go{font-size:.74rem} /* Plus aéré : plus d'espace entre les blocs, et points forts sur une colonne quand la carte est étroite. */ .prod{container-type:inline-size;gap:11px;padding-bottom:20px}.prod>:not(.art):not(.ribbon){margin-left:22px;margin-right:22px} .prod .art{margin-bottom:6px}.prod h3{margin-top:-2px} .prod .feat{gap:9px 14px;margin:4px 0 8px}.prod .feat li{line-height:1.3} .prod .foot{padding-top:12px;border-top:1px solid var(--line)} @container (max-width:420px){.prod .feat{grid-template-columns:1fr}} /* FAQ */ .faq{margin-top:56px}.faq>h2{font-size:clamp(2rem,5vw,3rem);margin:0 0 16px} .faq details{background:var(--surface);box-shadow:var(--shadow);margin-bottom:8px;border-left:4px solid transparent;transition:border-color .2s} .faq details[open]{border-left-color:var(--acc)} .faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;cursor:pointer;list-style:none;user-select:none;-webkit-user-select:none;font:800 1.15rem/1.2 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'';flex:none;width:12px;height:12px;border-right:3px solid var(--acct);border-bottom:3px solid var(--acct);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s} .faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)} .faq details p{margin:0;padding:0 20px 18px;color:var(--ink2)} /* commande */ .trk-wrap{max-width:68rem;margin:30px auto 0} .trk-head{position:relative;overflow:hidden;padding:28px 30px 26px;background:#101216;color:#F3F5F8;border-left:5px solid var(--acc)} /* Pas de rayures propres : elles se superposaient en biais différent à celles du fond de page (effet de moiré). */ .trk-head::before{content:none} .trk-head::after{content:'';position:absolute;right:-40px;top:0;bottom:0;width:150px;background:var(--acc);clip-path:polygon(60px 0,100% 0,100% 100%,0 100%);opacity:.9} .trk-head>*{position:relative;z-index:1}.trk-head h1{margin:14px 0 6px;font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1.05;color:#fff;max-width:calc(100% - 120px)}.trk-head p{margin:0;max-width:calc(100% - 120px);color:#AEB6C4;font-size:.95rem}.trk-head p b{color:#fff} .trk-tag{display:inline-block;padding:6px 20px 6px 22px;background:var(--acc);color:#06121C;font:800 .82rem/1 'Oxanium',sans-serif;letter-spacing:.12em;text-transform:uppercase;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)} .trk-tag.delivered{background:#4CC08A;color:#04140C}.trk-tag.review{background:#F5B82E;color:#2A1A00}.trk-tag.failed{background:var(--bad);color:#fff}.trk-tag.pending_payment,.trk-tag.refunded,.trk-tag.canceled{background:#C4CAD4;color:#101216} .trk-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:16px} @media(max-width:820px){.trk-grid{grid-template-columns:1fr}.trk-head{padding:22px 18px}.trk-head::after{width:70px}.trk-head h1,.trk-head p{max-width:calc(100% - 50px)}} .trk-card{background:var(--surface);padding:24px 26px}.trk-card h2{margin:0 0 18px;font:800 1.05rem/1 'Oxanium',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .trk{list-style:none;margin:0;padding:0} .trk li{position:relative;display:flex;gap:18px;padding:0 0 22px}.trk li:last-child{padding-bottom:0} .trk li::before{content:'';position:absolute;left:8px;top:22px;bottom:-2px;width:3px;background:var(--soft)}.trk li:last-child::before{display:none} .trk li::after{content:'';position:absolute;left:8px;top:22px;bottom:-2px;width:3px;background:var(--acc);transform-origin:50% 0;transform:scaleY(0)}.trk li:last-child::after{display:none} /* Étape terminée → la suivante aussi : trait plein (il se remplit à l'ouverture). */ .trk li.done:has(+li.done,+li.bad)::after{transform:none;animation:trk-fill .55s cubic-bezier(.3,.7,.3,1) backwards} /* Étape suivante en cours : le trait se charge lentement, à rayures qui défilent, sans jamais atteindre le losange suivant. */ .trk li.done:has(+li.now)::after{background:repeating-linear-gradient(180deg,var(--acc) 0 7px,color-mix(in srgb,var(--acc) 45%,transparent) 7px 14px) 0 0/100% 28px;transform:scaleY(.72);animation:trk-load 7s cubic-bezier(.15,.6,.25,1) backwards,trk-run .7s linear infinite} @keyframes trk-fill{from{transform:scaleY(0)}} @keyframes trk-load{from{transform:scaleY(.04)}} @keyframes trk-run{to{background-position:0 28px}} @media(prefers-reduced-motion:reduce){.trk li::after{animation:none!important}} .trk li>i{flex:none;width:19px;height:19px;margin-top:2px;transform:rotate(45deg) scale(.82);border:3px solid var(--uline);background:var(--surface);box-sizing:border-box} .trk li.done>i{background:var(--acc);border-color:var(--acc)}.trk li.bad>i{background:var(--bad);border-color:var(--bad)} .trk li.now>i{border-color:var(--acc);animation:trk-now 1.6s ease-in-out infinite} @keyframes trk-now{50%{transform:rotate(45deg) scale(1)}} .trk li b{display:flex;align-items:center;gap:10px;font:800 1.02rem/1.2 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)} .trk li.todo b{color:var(--ink3)}.trk li em{font-style:normal;padding:3px 10px 3px 11px;background:var(--acc);color:#06121C;font-size:.68rem;letter-spacing:.1em;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)} .trk li time{display:block;margin-top:3px;font-size:.82rem;color:var(--acct);font-weight:600}.trk li p{margin:4px 0 0;font-size:.92rem;color:var(--ink2);line-height:1.5}.trk li.todo p{color:var(--ink3)} .tr-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.93rem} .tr-row span{display:flex;align-items:center;gap:10px;color:var(--ink3)}.tr-row span::before{content:'';width:7px;height:7px;background:var(--acc);flex:none}.tr-row b{color:var(--ink);text-align:right} .tr-tot{display:flex;justify-content:space-between;align-items:center;margin:16px 0;padding:16px 18px;background:#101216} .tr-tot span{font:800 .85rem 'Oxanium',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#C4CAD4}.tr-tot b{font:800 1.8rem/1 'Oxanium',sans-serif;color:var(--acc)} .trk-go{display:flex;justify-content:center;gap:8px;width:100%;margin-top:10px}.trk-sum .hint{margin:14px 0 0} @media(prefers-reduced-motion:reduce){.trk li.now>i{animation:none}} .steps{display:flex;gap:6px;margin:22px 0 14px}.steps span{flex:1;height:8px;background:var(--soft);transform:skewX(-20deg)}.steps span.on{background:var(--acc)} @keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}} .panel>.art{display:block;width:calc(100% + 2 * clamp(18px,4vw,40px));max-width:none;height:auto;aspect-ratio:400/200;margin:-30px calc(-1 * clamp(18px,4vw,40px)) 18px;background:var(--stage);animation:pop .5s ease-out} .state{font-family:'Oxanium',sans-serif;text-transform:uppercase;font-size:2rem;font-weight:800;color:var(--ink);line-height:1.1}.state.ok{color:var(--good)}.state.bad{color:var(--bad)} dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:20px 0 0;font-size:1rem}dt{color:var(--ink3);font-family:'Oxanium',sans-serif;text-transform:uppercase;font-weight:700;letter-spacing:.04em}dd{margin:0;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere} .legal h2{margin:26px 0 6px;font-size:1.35rem}.legal p,.legal li{color:var(--ink2);font-size:1rem} .adm-grid{display:grid;gap:10px 14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .st{display:inline-flex;align-items:center;gap:7px;font:700 .95rem 'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);white-space:nowrap} .st::before{content:'';width:9px;height:9px;background:var(--ink3);transform:rotate(45deg)} .st.ok::before{background:var(--good)}.st.bad::before{background:var(--bad)}.st.info::before{background:var(--acc)} th{font-family:'Oxanium',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem} .actions{display:flex;gap:6px;flex-wrap:wrap} .foot-links{margin-top:48px;text-align:center;font-size:.9rem;color:var(--ink3)}.foot-links a{color:var(--ink3)}.foot-links a:hover{color:var(--ink)} .hidden{display:none} @media(max-width:640px){.mob-x{display:none}.capsule:has(.who) .logo>span{display:none}.capsule{padding:10px 12px}.tag{display:none}.out{padding:6px 5px;font-size:.88rem;white-space:nowrap}.logo{font-size:1.25rem}.logo svg{width:24px;height:24px}.who img{width:24px;height:24px}.out.desk{display:none}.who span{display:none} .opt{gap:12px}.logos{gap:6px}.logo-tile{height:32px;min-width:50px;padding:0 7px;font-size:.92rem}.logo-tile svg{max-width:40px}}