:root{--bleu:#1B66B5;--fond:#FFFFFF;--texte:#1B2733;--doux:#5A6B7C;--panneau:#FFFFFF;--ligne:#E3E9F0;--survol:#EEF4FB}
.phone[data-theme="sombre"]{--fond:#12161C;--texte:#E8EDF3;--doux:#9AA8B7;--panneau:#1B222B;--ligne:#2A333E;--survol:#222B36}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#D9E0E8;font-family:"Public Sans","Barlow",sans-serif;font-weight:600;display:flex;align-items:center;justify-content:center}
.phone{position:relative;width:min(100vw,calc(100vh*9/16),360px);aspect-ratio:9/16;max-height:100vh;background:var(--fond);color:var(--texte);overflow:hidden;display:flex;flex-direction:column;transition:background .2s,color .2s}
@media (max-width:360px){.phone{width:100vw;height:100vh;aspect-ratio:auto}}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ic{width:26px;height:26px;display:block;flex:none}
.top{height:56px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 16px;border-bottom:1px solid var(--ligne);position:relative;z-index:30;background:var(--fond)}
.top h1{font-size:18px;font-weight:800}
.top .btns{display:flex;gap:4px}
.ibtn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.ibtn:hover,.ibtn:focus-visible{background:var(--survol);outline:none}
.ibtn[aria-expanded="true"]{background:var(--survol)}
main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.screen{padding:14px 14px 18px}
.screen[hidden]{display:none}
.screen h3{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;color:var(--doux);margin:14px 2px 8px}
.screen h3:first-child{margin-top:2px}
.row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:2px solid var(--ligne);border-radius:14px;margin-bottom:8px;background:var(--panneau);font-size:14px;font-weight:700}
.row .grow{flex:1;min-width:0}
.row b{font-weight:800;display:block}
.row small{display:block;color:var(--doux);font-size:12px;font-weight:600;margin-top:1px}
.row .ic{width:34px;height:34px}
.btn{padding:8px 14px;border-radius:10px;background:var(--bleu);color:#fff;font-size:13px;font-weight:800;flex:none}
.btn.ghost{background:transparent;color:var(--bleu);border:2px solid var(--bleu)}
.btn[disabled]{background:var(--ligne);color:var(--doux);border-color:transparent;cursor:default}
.bar2{height:8px;border-radius:4px;background:var(--ligne);overflow:hidden;margin-top:6px}
.bar2 i{display:block;height:100%;background:var(--bleu);border-radius:4px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mc{aspect-ratio:2/3;border:3px solid var(--bleu);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:900;color:var(--bleu);background:var(--panneau)}
.mc strong{font-size:20px}
.mc.rare{background:var(--survol)}
.mc.epic{background:var(--bleu);color:#fff}
.mc.lock{border-style:dashed;opacity:.45}
.mc.sm{width:44px;flex:none;font-size:9px}
.mc.sm strong{font-size:14px}
.minis{display:flex;gap:6px}
.coin{width:20px;height:20px;display:inline-block}
.price{font-weight:900;color:var(--bleu);font-size:14px;display:flex;align-items:center;gap:4px}
.av{width:40px;height:40px;border-radius:50%;background:var(--survol);border:2px solid var(--bleu);display:grid;place-items:center;font-weight:900;color:var(--bleu);flex:none;position:relative}
.dot{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:#2DB37A;border:2px solid var(--panneau)}
.dot.off{background:#9AA8B7}
.badge{min-width:22px;height:22px;border-radius:11px;background:var(--bleu);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center;padding:0 6px}
.hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 4px}
.hero .av{width:84px;height:84px}
.hero .av .ic{width:50px;height:50px}
.hero h2{font-size:22px;font-weight:900}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.stats div{border:2px solid var(--ligne);border-radius:14px;padding:10px 4px;text-align:center;font-size:12px;font-weight:700;color:var(--doux)}
.stats strong{display:block;font-size:20px;font-weight:900;color:var(--bleu)}
.search{display:flex;gap:8px;margin-bottom:6px}
.search input{flex:1;min-width:0;font:inherit;font-weight:700;font-size:14px;padding:10px 12px;border-radius:12px;border:2px solid var(--ligne);background:var(--panneau);color:var(--texte)}
.search input:focus{outline:none;border-color:var(--bleu)}
.locked{opacity:.5}
.chev{color:var(--doux);font-weight:900}
nav.bar{flex:none;height:68px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ligne);background:var(--fond);position:relative;z-index:30}
nav.bar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:900;color:var(--doux);min-width:0;letter-spacing:.1px}
nav.bar button .ic{width:28px;height:28px}
nav.bar button[aria-current="page"]{color:var(--bleu);font-weight:900}
nav.bar button:focus-visible{outline:2px solid var(--bleu);outline-offset:-4px;border-radius:12px}
.scrim{position:absolute;inset:56px 0 0 0;background:rgba(10,20,30,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}
.scrim.on{opacity:1;pointer-events:auto}
.panel{position:absolute;top:56px;background:var(--panneau);border:1px solid var(--ligne);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:20;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}
.panel.open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
#menuPanel{right:8px;margin-top:6px;width:min(240px,calc(100% - 16px));padding:6px}
#menuPanel button{width:100%;display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:12px;font-size:15px;font-weight:800;text-align:left}
#menuPanel button:hover,#menuPanel button:focus-visible{background:var(--survol);outline:none}
#menuPanel .ic{width:28px;height:28px}
#notifPanel{right:8px;left:8px;margin-top:6px;padding:12px;max-height:calc(100% - 56px - 80px);overflow:auto}
.nhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.nhead h3{font-size:17px;font-weight:800}
.opts{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease,margin .35s ease;margin:0}
.opts.show{grid-template-rows:1fr;margin:4px 0 8px}
.optsIn{overflow:hidden;min-height:0;border-radius:12px;background:var(--survol)}
.opts:not(.show) .optsIn{visibility:hidden;transition:visibility 0s .35s}
.orow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;font-size:14px;font-weight:700;border-top:1px solid var(--ligne)}
.orow:first-child{border-top:0}
.orow small{display:block;color:var(--doux);font-size:11.5px;font-weight:600;margin-top:1px}
.orow.sub{padding-left:14px}
.optsIn.off .orow.sub{opacity:.45;pointer-events:none}
.orow.sub{transition:opacity .25s}
.sw{position:relative;width:46px;height:28px;border-radius:14px;background:#B8C3CF;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw[aria-checked="true"]{background:var(--bleu)}
.sw[aria-checked="true"]::after{transform:translateX(18px)}
.feed{list-style:none}
.feed li{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;border-top:1px solid var(--ligne);font-size:13.5px;font-weight:700;line-height:1.35}
.feed li:first-child{border-top:0}
.feed .ic{width:28px;height:28px;margin-top:1px}
.feed small{display:block;color:var(--doux);font-size:12px;font-weight:600;margin-top:2px}
/* animations */
button:active{}
button{transition:transform .12s ease,background .2s}
.pop{animation:pop .3s ease-out}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}
/* 3 barres <-> croix : transition fluide */
#menuIc path{transform-box:view-box;transform-origin:256px 256px;transition:transform .4s cubic-bezier(.6,0,.2,1),opacity .25s}
#menuIc .b1{transform:translateY(-126px) rotate(0deg) scaleX(1)}#menuIc .b2{transform:translateY(0) rotate(0deg) scaleX(1)}#menuIc .b3{transform:translateY(126px) rotate(0deg) scaleX(1)}
#menuBtn[aria-expanded="true"] #menuIc .b1{transform:translateY(0) rotate(45deg) scaleX(1.17)}
#menuBtn[aria-expanded="true"] #menuIc .b3{transform:translateY(0) rotate(-45deg) scaleX(1.17)}
#menuBtn[aria-expanded="true"] #menuIc .b2{opacity:0;transform:translateY(0) rotate(0deg) scaleX(.2)}
.enter{animation:enter .35s ease both}
@keyframes enter{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.panel.open#menuPanel button{animation:slide .3s ease both}
.panel.open#menuPanel button:nth-child(2){animation-delay:.04s}.panel.open#menuPanel button:nth-child(3){animation-delay:.08s}.panel.open#menuPanel button:nth-child(4){animation-delay:.12s}.panel.open#menuPanel button:nth-child(5){animation-delay:.16s}
.panel.open .feed li{animation:slide .3s ease both}
.panel.open .feed li:nth-child(2){animation-delay:.05s}.panel.open .feed li:nth-child(3){animation-delay:.1s}.panel.open .feed li:nth-child(4){animation-delay:.15s}
@keyframes slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
#gearBtn[aria-expanded="true"] .ic{transform:rotate(90deg)}
#gearBtn .ic{transition:transform .35s ease}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#gate{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;text-align:center;background:linear-gradient(180deg,#1B66B5,#0f4a8c);color:#fff;transition:opacity .35s}
#gate.ferme{opacity:0;pointer-events:none}
#gate .gl{width:84px;height:84px;filter:brightness(0) invert(1)}
#gate h2{font-size:24px;font-weight:900}
#gate p{font-size:14px;font-weight:600;opacity:.9;line-height:1.35;max-width:260px}
#gate .gb{width:100%;max-width:280px;min-height:50px;border-radius:12px;background:#5865F2;color:#fff;font-size:15px;font-weight:900;box-shadow:0 4px 0 #3c46b5}
#gate .gb:active{transform:translateY(2px);box-shadow:0 2px 0 #3c46b5}
#gate .gb[disabled]{opacity:.75}
#gate small{font-size:11.5px;font-weight:700;opacity:.8}

/* ---- boutons : pilules, police large et très grasse (principal bleu clair + halo, secondaire sombre transparent) ---- */
.btn,#gate .gb,#menuPanel button{border:0;border-radius:999px;background:#6fbdff;color:#06121f;font-family:"Barlow","Public Sans",sans-serif;font-weight:900;font-stretch:115%;letter-spacing:-.01em;text-shadow:none;
  box-shadow:0 0 16px rgba(111,189,255,.5),0 0 36px rgba(111,189,255,.22);cursor:pointer;overflow:visible;transition:box-shadow .2s ease,background .2s ease,transform .12s ease,opacity .3s}
.btn{padding:9px 18px;font-size:13px}
.btn.ghost{border:1px solid rgba(190,200,215,.32);border-radius:999px;background:rgba(10,16,28,.55);color:#fff;font-family:"Barlow","Public Sans",sans-serif;font-weight:900;font-stretch:115%;letter-spacing:-.01em;text-shadow:none;
  box-shadow:none;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .2s ease,background .2s ease,transform .12s ease,opacity .3s}
@media (hover:hover){.btn:not([disabled]):not(.ghost):hover,#gate .gb:hover,#menuPanel button:hover{background:#86c9ff;box-shadow:0 0 22px rgba(111,189,255,.75),0 0 48px rgba(111,189,255,.35)}.btn.ghost:hover{background:rgba(18,26,42,.7);border-color:rgba(210,220,232,.55)}}
.btn:not([disabled]):not(.ghost):active,#gate .gb:active,#menuPanel button:active{background:#9ad3ff;box-shadow:0 0 28px rgba(111,189,255,.95),0 0 60px rgba(111,189,255,.5)}
.btn.ghost:active{background:rgba(18,26,42,.7);border-color:rgba(210,220,232,.55)}
.btn[disabled]{background:rgba(111,189,255,.25);color:rgba(6,18,31,.5);border:0;box-shadow:none;cursor:default}
#menuPanel{overflow:visible}
#menuPanel button{margin:6px 0;padding:11px 16px;font-size:14.5px}
#menuPanel button:focus-visible{outline:2px solid #06121f;outline-offset:2px;background:#86c9ff;box-shadow:0 0 22px rgba(111,189,255,.75),0 0 48px rgba(111,189,255,.35)}
#menuPanel button .ic{color:#06121f}

/* ---- v14 : tout en majuscules ; Cartes = boosters, Collection = cartes obtenues ---- */
body,button,input{text-transform:uppercase}
input::placeholder{text-transform:uppercase}
main{position:relative}
main.plein{overflow:hidden}
.screen.pl{position:absolute;inset:0;padding:0}
.screen.pl:not([hidden]){display:flex;flex-direction:column}
.screen.pl iframe{display:block;flex:1;min-height:0;width:100%;border:0;background:transparent}
.screen.coll .chead{flex:none;margin:12px 14px 8px}
.chips{flex:none;display:flex;gap:5px;padding:0 14px 8px}
.chips button{flex:1 1 0;min-width:0;padding:8px 0;border-radius:999px;border:2px solid var(--k);color:var(--k);background:transparent;font:800 10.5px/1 "Barlow","Public Sans",sans-serif;letter-spacing:-.02em;text-align:center;white-space:nowrap;overflow:hidden}
.chips button[aria-pressed="true"]{background:var(--k);color:#fff}
.chips button.vide{opacity:.45}
.posS{flex:none;display:flex;align-items:center;gap:8px;font:800 10.5px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.02em;cursor:pointer}
.posS span{opacity:.75}
/* barre du bas : Marché, Collection, Cartes (bouton central), Échange, Amis */
nav.bar{overflow:visible}
nav.bar button.centre{position:relative;justify-content:flex-end;padding-bottom:9px}
nav.bar button.centre .rond{position:absolute;left:50%;top:-20px;width:58px;height:58px;margin-left:-29px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 28%,#5fb2ff,#1B66B5 62%,#124b8c);border:4px solid var(--fond);box-shadow:0 6px 16px rgba(27,102,181,.45),0 0 0 1px var(--ligne);transition:transform .2s cubic-bezier(.2,.9,.3,1.4),box-shadow .2s}
nav.bar button.centre .rond svg{width:30px;height:30px}
nav.bar button.centre:active .rond{}
nav.bar button.centre[aria-current="page"] .rond{box-shadow:0 6px 18px rgba(27,102,181,.55),0 0 0 1px var(--ligne),0 0 22px rgba(95,178,255,.55)}
/* v19 : contour du bouton central blanc en mode jour, noir en mode nuit */
nav.bar button.centre .rond{border-color:#fff}
.phone[data-theme="sombre"] nav.bar button.centre .rond{border-color:#000}
/* barre du bas : au toucher, seule l'icône fait l'animation, le texte ne bouge pas */
nav.bar button.pop{animation:none}
nav.bar button.pop .ic,nav.bar button.pop .rond svg{animation:none}
/* menu (trois barres) : plus d'effet de lueur sur les boutons */
#menuPanel button,#menuPanel button:hover,#menuPanel button:active,#menuPanel button:focus-visible{box-shadow:none}
.porte{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 6px;margin-right:2px;border-radius:999px;background:var(--survol);font:800 14px/1 "Barlow","Public Sans",sans-serif;color:var(--texte);font-variant-numeric:tabular-nums}
.porte .ic{width:24px;height:24px}
.top .btns{display:flex;align-items:center}
.droits{margin:18px 6px 8px;font-size:9.5px;line-height:1.55;font-weight:700;letter-spacing:.02em;color:var(--doux);text-align:center;opacity:.85}

/* v16 : boutons de rareté vivants — holographiques de leur couleur quand ils sont choisis */
.chips button{position:relative;overflow:hidden;background:color-mix(in srgb,var(--k) 12%,transparent);transition:transform .18s cubic-bezier(.2,.9,.3,1.4),box-shadow .25s,color .2s,background .25s,opacity .2s;-webkit-tap-highlight-color:transparent}
.chips button:active{}
.chips button[aria-pressed="true"]{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--k) 0%,var(--k2) 50%,var(--k) 100%);background-size:200% 200%;box-shadow:0 0 12px color-mix(in srgb,var(--k) 65%,transparent);text-shadow:0 1px 1px rgba(0,0,0,.35);animation:chipPop .35s cubic-bezier(.2,.9,.3,1.4),chipFond 3s ease-in-out infinite}
.chips button[aria-pressed="true"]::after{content:"";position:absolute;inset:-2px;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.8) 47%,transparent 64%);mix-blend-mode:overlay;transform:translateX(-110%);animation:chipHolo 2.2s ease-in-out infinite}
.chips button[data-r="ur"][aria-pressed="true"]::after,.chips button[data-r="l"][aria-pressed="true"]::after{background:linear-gradient(105deg,transparent 18%,#ff3b5c 30%,#ff9a2e 37%,#ffe94a 44%,#4dff8a 51%,#36d6ff 58%,#6a7bff 65%,#d65aff 72%,transparent 84%);mix-blend-mode:hard-light;opacity:.7}
@keyframes chipHolo{0%{transform:translateX(-110%)}60%,100%{transform:translateX(110%)}}
@keyframes chipPop{0%{transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes chipFond{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
nav.bar button{font-size:9.6px;letter-spacing:0}
.top h1{letter-spacing:.02em}
.panel.open#menuPanel button:nth-child(6){animation-delay:.2s}
.panel.open#menuPanel button:nth-child(7){animation-delay:.24s}
/* v24 : en-tête — le nom du jeu à gauche, les pièces à droite (nombre complet) ; plus il y en a, plus la bulle s'étend vers la gauche */
.top{gap:10px}
.top h1{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .btns{flex:none;gap:2px}
.porte{white-space:nowrap;flex:none}
/* bouton central : plus de contour bleuté autour du contour blanc en thème clair */
.phone:not([data-theme="sombre"]) nav.bar button.centre .rond,.phone:not([data-theme="sombre"]) nav.bar button.centre[aria-current="page"] .rond{box-shadow:none}

/* ===== v26 ===== */
/* 17. barre du bas : seul l'icône zoome, le texte ne bouge jamais */
nav.bar button:active{}
/* 12. boutons sobres : plus de halo lumineux */
.btn,.btn:not([disabled]):not(.ghost):hover,.btn:not([disabled]):not(.ghost):active{box-shadow:none}
.btn.ghost{background:transparent;color:var(--texte);border:1.5px solid var(--ligne);-webkit-backdrop-filter:none;backdrop-filter:none}
.btn.ghost:active{background:var(--survol)}
/* 13. pastille rouge sur le menu dès qu'il y a une notification */
#menuBtn{position:relative}
.pastille{position:absolute;top:8px;right:7px;width:10px;height:10px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 0 2px var(--fond);pointer-events:none}
.pastille[hidden]{display:none}
#notifBtn .nb{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#ff3b3b;color:#fff;font:800 11px/20px "Barlow","Public Sans",sans-serif;text-align:center}
#notifBtn .nb[hidden]{display:none}
/* cartes dessinées dans les écrans de la maquette */
.cm{position:relative;flex:none;aspect-ratio:2/3;border-radius:7%;overflow:hidden}
.cm svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.rr{font-size:11px;font-weight:800;color:var(--doux);letter-spacing:.03em}
.prix{display:inline-flex;align-items:center;gap:5px;font:800 15px/1 "Barlow","Public Sans",sans-serif;color:var(--texte)}
.prix svg{width:19px;height:19px}
.tag{display:inline-block;margin-top:5px;padding:4px 8px;border-radius:999px;font:800 9.5px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.05em;background:var(--survol);color:var(--doux)}
.tag.ench{background:#fff1d6;color:#9a5b00}
.phone[data-theme="sombre"] .tag.ench{background:#3a2a10;color:#ffc864}
.vide2{padding:26px 10px;text-align:center;color:var(--doux);font-size:12.5px;font-weight:800;border:2px dashed var(--ligne);border-radius:14px}
/* 10. marché */
.mhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 12px}
.mhead b{display:block;font-size:16px;font-weight:900}
.mhead small{display:block;font-size:11.5px;font-weight:700;color:var(--doux);margin-top:2px}
.lot{display:flex;align-items:center;gap:12px;padding:10px 12px;border:2px solid var(--ligne);border-radius:14px;margin-bottom:8px;background:var(--panneau)}
.lot .cm{width:50px}
.lot .grow{flex:1;min-width:0}
.lot .grow b{display:block;font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lot .par{font-size:11px;font-weight:700;color:var(--doux);margin-top:3px}
.lot .droite{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.lot.moi{border-color:color-mix(in srgb,var(--bleu) 45%,var(--ligne))}
/* feuille (ajout en vente, échange) */
.feuille{position:absolute;left:0;right:0;top:56px;bottom:0;z-index:40;display:flex;flex-direction:column;background:var(--fond);transform:translateY(102%);transition:transform .3s cubic-bezier(.2,.85,.25,1);visibility:hidden}
.feuille.on{transform:none;visibility:visible}
.fhead{flex:none;display:flex;align-items:center;gap:8px;padding:10px 10px 8px;border-bottom:1px solid var(--ligne)}
.fhead b{flex:1;min-width:0;font-size:15px;font-weight:900;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fhead button{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:22px;font-weight:700;color:var(--texte)}
.fhead button[hidden]{visibility:hidden;display:grid}
.fcorps{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 16px}
.fpied{flex:none;padding:10px 14px 14px;border-top:1px solid var(--ligne);background:var(--fond)}
.fpied:empty{display:none}
.fpied .btn{width:100%;min-height:46px;font-size:14px}
.outils{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.fchips{display:flex;gap:5px}
.fchips button{flex:1 1 0;min-width:0;padding:7px 0;border-radius:999px;border:1.5px solid var(--k,var(--ligne));color:var(--k,var(--texte));font:800 10px/1 "Barlow","Public Sans",sans-serif;white-space:nowrap}
.fchips button[aria-pressed="true"]{background:var(--k,var(--bleu));border-color:var(--k,var(--bleu));color:#fff}
.tri{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:900;color:var(--doux)}
.tri button{padding:6px 10px;border-radius:999px;border:1.5px solid var(--ligne);font:800 10px/1 "Barlow","Public Sans",sans-serif;color:var(--doux)}
.tri button[aria-pressed="true"]{border-color:var(--bleu);color:var(--bleu);background:var(--survol)}
.gcartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
.gc{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:0;text-align:left;border-radius:10px}
.gc .cm{width:100%}
.gc .v{display:flex;align-items:center;justify-content:space-between;gap:4px;font:800 11.5px/1 "Barlow","Public Sans",sans-serif;color:var(--texte)}
.gc .v span{display:inline-flex;align-items:center;gap:3px}
.gc .v svg{width:14px;height:14px}
.gc .v i{font-style:normal;color:var(--doux);font-size:10.5px}
.gc .ok{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--bleu);color:#fff;display:none;place-items:center;font:800 13px/1 "Barlow","Public Sans",sans-serif;box-shadow:0 0 0 2px var(--fond)}
.gc[aria-pressed="true"] .cm{outline:3px solid var(--bleu);outline-offset:2px}
.gc[aria-pressed="true"] .ok{display:grid}
.gc.off{opacity:.4}
/* formulaire de vente */
.vfiche{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;margin:4px 0 14px}
.vfiche .cm{width:130px;margin-bottom:8px}
.vfiche b{font-size:18px;font-weight:900}
.moyenne{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:14px;background:var(--survol);margin-bottom:12px;font-size:11.5px;font-weight:900;color:var(--doux)}
.lbl{display:block;margin:12px 2px 7px;font-size:10.5px;font-weight:900;letter-spacing:.05em;color:var(--doux)}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:var(--survol)}
.seg2 button{min-height:38px;border-radius:10px;font:800 11.5px/1 "Barlow","Public Sans",sans-serif;color:var(--doux)}
.seg2 button[aria-pressed="true"]{background:var(--panneau);color:var(--texte);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.champ{display:flex;align-items:center;gap:8px;padding:0 14px;min-height:48px;border-radius:14px;border:2px solid var(--ligne);background:var(--panneau)}
.champ svg{width:20px;height:20px;flex:none}
.champ input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--texte);font:800 18px/1 "Barlow","Public Sans",sans-serif}
.durees{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.durees button{min-height:34px;border-radius:10px;border:1.5px solid var(--ligne);font:800 10.5px/1 "Barlow","Public Sans",sans-serif;color:var(--doux)}
.durees button[aria-pressed="true"]{border-color:var(--bleu);background:var(--bleu);color:#fff}
/* 11. échanges */
.ami{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:2px solid var(--ligne);border-radius:14px;margin-bottom:8px;background:var(--panneau);text-align:left}
.ami .grow{flex:1;min-width:0}
.ami b{display:block;font-size:14px;font-weight:900}
.ami small{display:block;font-size:11.5px;font-weight:700;color:var(--doux);margin-top:2px}
.bilan{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:11px;font-weight:900;color:var(--doux)}
.bilan b{color:var(--texte)}
.etat{padding:5px 10px;border-radius:999px;font:800 10px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.04em;white-space:nowrap}
.etat.eq{background:#d9f7e6;color:#127a45}
.etat.deseq{background:#ffe7cc;color:#9a4a00}
.phone[data-theme="sombre"] .etat.eq{background:#123a26;color:#5fe39a}
.phone[data-theme="sombre"] .etat.deseq{background:#3a2610;color:#ffb35c}
.note{font-size:10.5px;font-weight:700;color:var(--doux);text-align:center;margin-top:8px}
.echg{display:flex;align-items:center;gap:8px;margin-top:8px}
.echg .cm{width:30px}
.echg .ic{width:20px;height:20px;margin:0 4px}
/* 12. amis */
.amis-h{display:flex;align-items:center;gap:8px}
.amis-h .pt{width:9px;height:9px;border-radius:50%;background:#2DB37A}
.amis-h .pt.off{background:#9AA8B7}
.ptoast{position:absolute;left:50%;bottom:84px;z-index:60;transform:translate(-50%,16px);opacity:0;padding:11px 16px;border-radius:999px;background:var(--texte);color:var(--fond);font:800 12px/1 "Barlow","Public Sans",sans-serif;white-space:nowrap;pointer-events:none;transition:opacity .25s,transform .25s}
.ptoast.on{opacity:1;transform:translate(-50%,0)}

/* ===== v27 ===== */
/* barre du bas : le trait de séparation s'arrondit au milieu et passe par-dessus le bouton Cartes */
nav.bar{border-top:0;background:transparent}
nav.bar>svg.fondNav{position:absolute;left:0;top:-34px;width:100%;height:calc(100% + 34px);pointer-events:none;z-index:0;overflow:visible}
nav.bar>svg.fondNav path{fill:var(--fond);stroke:var(--ligne);stroke-width:1}
nav.bar button{position:relative;z-index:1;justify-content:flex-end;padding-bottom:11px}
nav.bar button.centre{padding-bottom:11px}
/* bouton Cartes : rond et icône plus grands */
nav.bar button.centre .rond{top:-27px;width:64px;height:64px;margin-left:-32px}
nav.bar button.centre .rond svg{width:38px;height:38px}
/* en haut : boosters et minuteur dans une seule bulle, à gauche des pièces */
.stockH{display:flex;align-items:center;gap:6px;height:34px;padding:0 11px 0 9px;margin-right:6px;border-radius:999px;background:var(--survol);font:800 13.5px/1 "Barlow","Public Sans",sans-serif;color:var(--texte);white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.stockH svg{width:18px;height:18px;flex:none;color:var(--bleu)}
.stockH .sep{width:1px;height:16px;background:var(--ligne);margin:0 2px}
.stockH .t{display:flex;align-items:center;gap:4px;color:var(--doux);font-size:12.5px}
.stockH .t svg{width:14px;height:14px;color:var(--doux)}
.stockH .t[hidden]{display:none}
.porte{padding:0 11px 0 5px}
.top h1{font-size:15px}
.top{padding-left:12px;gap:6px}
.stockH{height:32px;gap:5px;padding:0 9px 0 7px;margin-right:4px;font-size:12.5px}
.stockH svg{width:16px;height:16px}
.stockH .t{font-size:11.5px}
.porte{height:32px;font-size:13px;gap:4px}
.porte .ic{width:21px;height:21px}
.top .btns{gap:0}
/* ---- écran Cartes : catalogue des catégories, puis le booster ---- */
#catalogue{position:absolute;inset:0;z-index:5;overflow-y:auto;overflow-x:hidden;padding:16px 14px 46px;background:var(--fond);transition:opacity .25s ease,transform .25s ease}
#catalogue.cache{opacity:0;transform:translateY(12px);pointer-events:none}
.catTete{display:flex;align-items:flex-end;justify-content:space-between;margin:2px 4px 14px}
.catTete b{font:800 26px/1 "Barlow","Public Sans",sans-serif;letter-spacing:-.01em}
.catTete small{font:800 10.5px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.12em;color:var(--doux)}
.hero{position:relative;border-radius:26px;overflow:hidden;color:#fff;isolation:isolate;
  background:radial-gradient(120% 70% at 50% 0%,rgba(255,183,3,.38),transparent 62%),radial-gradient(90% 60% at 100% 100%,rgba(255,77,109,.35),transparent 70%),radial-gradient(80% 50% at 0% 70%,rgba(77,124,255,.28),transparent 70%),linear-gradient(170deg,#1b1530 0%,#120f1f 55%,#0b0a14 100%);
  box-shadow:0 18px 40px rgba(8,6,20,.28),inset 0 0 0 1px rgba(255,214,120,.22)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M0 22h44M22 0v44'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.12'%3E%3Crect x='20.5' y='20.5' width='3' height='3' rx='.6'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 70%,transparent 100%);mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 70%,transparent 100%)}
.hero::after{content:"";position:absolute;left:-30%;right:-30%;top:-40%;height:70%;z-index:-1;pointer-events:none;background:conic-gradient(from 200deg at 50% 100%,transparent 0 10%,rgba(255,214,120,.16) 14%,transparent 18%,transparent 26%,rgba(255,140,170,.12) 30%,transparent 34%,transparent 42%,rgba(140,190,255,.12) 46%,transparent 50%);animation:heroRay 14s linear infinite;transform-origin:50% 100%}
@keyframes heroRay{to{transform:rotate(360deg)}}
.eventail{position:relative;height:198px;margin-top:6px}
.eventail .cm{position:absolute;left:50%;top:22px;width:112px;margin-left:-56px;border-radius:9px;box-shadow:0 14px 26px rgba(0,0,0,.45)}
.eventail .cm:nth-child(1){transform:translateX(-78px) translateY(10px) rotate(-12deg)}
.eventail .cm:nth-child(2){transform:translateY(-6px) scale(1.06);z-index:2;box-shadow:0 16px 30px rgba(0,0,0,.5),0 0 34px rgba(255,190,60,.45)}
.eventail .cm:nth-child(3){transform:translateX(78px) translateY(10px) rotate(12deg)}
.heroTxt{padding:4px 22px 22px}
.kicker{font:800 11px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.16em;color:#ffcc4d}
.hero h2{margin:10px 0 8px;font:800 34px/1 "Barlow","Public Sans",sans-serif;letter-spacing:-.02em;text-transform:none;background:linear-gradient(180deg,#fff 35%,#ffe3a1);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font:600 13.5px/1.45 "Barlow","Public Sans",sans-serif;color:rgba(255,255,255,.72);text-transform:none}
.chances{margin:16px 0 4px;padding:14px 14px 10px;border-radius:16px;background:rgba(255,255,255,.05)}
.chances .kicker{display:block;color:rgba(255,255,255,.55);font-size:10px;margin-bottom:10px}
.ch{display:grid;grid-template-columns:104px 1fr 44px;white-space:nowrap;align-items:center;gap:10px;margin-bottom:8px;font:800 12px/1 "Barlow","Public Sans",sans-serif}
.ch i{display:flex;align-items:center;gap:7px;font-style:normal;color:var(--k)}
.ch i::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--k);box-shadow:0 0 8px var(--k)}
.ch .b{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.ch .b span{display:block;height:100%;width:var(--v);border-radius:inherit;background:var(--k);box-shadow:0 0 10px var(--k)}
.ch em{font:800 11.5px/1 "Barlow","Public Sans",sans-serif;font-style:normal;text-align:right;color:rgba(255,255,255,.85)}
.heroBtn{display:block;width:100%;margin-top:16px;min-height:54px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffd447,#f5b400);color:#1a1200;font:800 16px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.01em;text-transform:none;box-shadow:0 10px 26px rgba(245,180,0,.35),inset 0 1px 0 rgba(255,255,255,.55);cursor:pointer}
.heroBtn:active{}
.heroBtn2{display:block;width:100%;margin-top:10px;min-height:48px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff;font:800 13.5px/1 "Barlow","Public Sans",sans-serif;cursor:pointer}
.heroInfo{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font:800 10.5px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.08em;color:rgba(255,255,255,.55)}
.bientot{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bientot div{position:relative;height:96px;border-radius:20px;overflow:hidden;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--doux);
  background:linear-gradient(160deg,var(--survol),transparent);border:1px dashed var(--ligne)}
.bientot b{font:800 15px/1.1 "Barlow","Public Sans",sans-serif;text-transform:none;color:var(--texte);opacity:.6}
.bientot small{font:800 9.5px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.14em;margin-top:6px}
#retourCat{position:absolute;left:10px;top:10px;z-index:4;display:flex;align-items:center;gap:6px;height:34px;padding:0 13px 0 9px;border-radius:999px;background:rgba(4,14,28,.55);border:1px solid rgba(150,195,240,.28);color:#fff;font:800 11px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.03em;cursor:pointer}
#retourCat[hidden]{display:none}
#retourCat svg{width:15px;height:15px}
/* marché : achat */
.lot{cursor:pointer}
.achat .vfiche .cm{width:150px}
.solde{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px;font-weight:900;color:var(--doux)}
.manque{margin-top:8px;text-align:center;font-size:11.5px;font-weight:900;color:#d64545}
/* échanges : offre reçue en grand, confirmation, aperçu avant envoi */
.offre{border:0;border-radius:22px;padding:16px;margin-bottom:10px;color:#fff;background:radial-gradient(90% 70% at 100% 0%,rgba(111,189,255,.28),transparent 70%),linear-gradient(160deg,#1a2a44,#0f1726)}
.offre .haut{display:flex;align-items:flex-start;gap:14px}
.offre .qui{flex:none;width:92px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.offre .qui .av{width:46px;height:46px;background:rgba(255,255,255,.1);border-color:#6fbdff;color:#fff}
.offre .qui b{font-size:15px;font-weight:900}
.offre .qui small{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.6)}
.offre .ech{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.offre .lig{display:flex;align-items:center;gap:6px}
.offre .lig span{font:800 9.5px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.06em;color:rgba(255,255,255,.6);margin-right:4px}
.offre .lig .cm{width:44px}
.offre .bts{display:flex;gap:8px;margin-top:14px}
.offre .bts .btn{flex:1;min-height:46px;font-size:14px}
.offre .bts .btn.ghost{color:#fff;border-color:rgba(255,255,255,.25)}
.offre .fin{margin-top:12px;text-align:center;font-size:12px;font-weight:900;color:#7ff0b2}
.recap{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 14px}
.recap .col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border-radius:16px;background:var(--survol)}
.recap .col span{font-size:10px;font-weight:900;letter-spacing:.05em;color:var(--doux);text-align:center}
.recap .cms{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.recap .cms .cm{width:46px}
.recap .col b{font:800 14px/1 "Barlow","Public Sans",sans-serif;display:flex;align-items:center;gap:4px}
.recap .col b svg{width:16px;height:16px}
.recap .fl{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bleu);color:#fff;font:800 18px/1 "Barlow","Public Sans",sans-serif}
.question{text-align:center;font-size:15px;font-weight:900;margin:2px 6px 12px;line-height:1.3}
.annul{margin-top:8px;align-self:flex-start}

/* ===== v28 ===== */
/* 11. polices libres : GC Etroite = TeX Gyre Heros Cn (petits textes), GC Titre = TeX Gyre Adventor (titres) — licence GUST (libre) */


/* 15. logo du jeu en haut à gauche */
.top h1.logo{flex:none;display:flex;align-items:center;height:56px}
.top h1.logo svg{width:30px;height:30px;color:var(--bleu)}
/* 5. en-tête : textes centrés dans leurs cadres, largeurs fixes, rien ne bouge */
.top{justify-content:space-between}
.stockH{width:auto;padding:0 12px;gap:0;justify-content:center}
.stockH>svg{margin-right:6px}
#stockN{display:inline-block;min-width:3.1em;text-align:center}
.stockH .t{display:flex!important;align-items:center;gap:5px;margin-left:8px}
.stockH .t .sep{margin:0 6px 0 0}
#stockC{display:inline-block;min-width:2.6em;text-align:center}
.porte{width:112px;justify-content:center;padding:0 10px}
#pieces{display:inline-block;min-width:0;text-align:center}
/* 3. le petit rond de couleur des raretés reste un rond */
.ch i::before{flex:none}
/* 12-14. écran Ouvrir : nos bleus, nos polices, sans « choisis une catégorie » ni catégories à venir */
.catTete{margin:2px 4px 12px}
.catTete b{font:700 26px/1 "Barlow","Public Sans",sans-serif;letter-spacing:0}
.hero{background:radial-gradient(120% 70% at 50% 0%,rgba(111,189,255,.42),transparent 62%),radial-gradient(90% 60% at 100% 100%,rgba(27,102,181,.55),transparent 70%),radial-gradient(80% 50% at 0% 70%,rgba(80,150,255,.25),transparent 70%),linear-gradient(170deg,#123a6b 0%,#0b2648 55%,#06182f 100%);
  box-shadow:0 18px 40px rgba(6,24,47,.3),inset 0 0 0 1px rgba(150,205,255,.2)}
.hero::after{background:conic-gradient(from 200deg at 50% 100%,transparent 0 10%,rgba(150,210,255,.16) 14%,transparent 18%,transparent 26%,rgba(111,189,255,.12) 30%,transparent 34%,transparent 42%,rgba(200,230,255,.1) 46%,transparent 50%)}
.eventail{height:206px}
.eventail .cm:nth-child(2){box-shadow:0 16px 30px rgba(0,0,0,.5),0 0 34px rgba(111,189,255,.45)}
.heroTxt{padding-top:20px}
.kicker{font:700 13px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.14em;color:#9fd3ff}
.hero h2{font:700 34px/1.05 "Barlow","Public Sans",sans-serif;letter-spacing:-.01em;background-image:linear-gradient(180deg,#fff 35%,#bfe2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.chances .kicker{font-size:11.5px;color:rgba(255,255,255,.55)}
.ch{font:700 13px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.04em}
.ch em{font:700 13px/1 "Barlow","Public Sans",sans-serif}
.heroBtn{background:#6fbdff;color:#06121f;font:700 16px/1 "Barlow","Public Sans",sans-serif;box-shadow:none}
.heroBtn2{font:700 14px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.06em}
.heroInfo{font:700 12px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.08em}
.bientot,.catTete small{display:none}
/* 16. échanges : fenêtres au centre de la page, larges et peu hautes, jamais une nouvelle page */
.feuille.pop{left:50%;right:auto;top:50%;bottom:auto;width:min(94%,600px);max-height:min(82%,640px);border-radius:22px;transform:translate(-50%,-46%) scale(.97);opacity:0;box-shadow:0 26px 70px rgba(5,10,20,.45);transition:transform .22s cubic-bezier(.2,.85,.25,1),opacity .2s,visibility 0s .22s}
.feuille.pop.on{transform:translate(-50%,-50%);opacity:1;transition:transform .22s cubic-bezier(.2,.85,.25,1),opacity .2s}
.feuille.pop .fhead{padding:8px 8px 6px}
.feuille.pop .fcorps{padding:10px 14px 12px}
#popVoile{position:absolute;inset:0;z-index:39;background:rgba(5,10,20,.5);opacity:0;pointer-events:none;transition:opacity .2s}
#popVoile.on{opacity:1;pointer-events:auto}
.recap{margin:2px 0 6px}
.recap .cms{gap:8px}
.vc{display:flex;flex-direction:column;align-items:center;gap:4px}
.vc .cm{width:46px}
.vc em{font:700 11.5px/1 "Barlow","Public Sans",sans-serif;font-style:normal;display:flex;align-items:center;gap:2px;color:var(--texte)}
.vc em svg{width:12px;height:12px}
.pieds{display:flex;gap:8px}
.pieds .btn{flex:1}
.offre .lig .vc em{color:#fff}
.offre .tot{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;font-weight:900;color:rgba(255,255,255,.7)}
.offre .tot b{color:#fff}
/* 17. historique des échanges */
.histo{border:2px solid var(--ligne);border-radius:14px;padding:10px 12px;margin-bottom:8px;background:var(--panneau)}
.histo .h1{display:flex;justify-content:space-between;font-size:12px;font-weight:900}
.histo .h1 small{color:var(--doux);font-weight:700}
.histo .h2{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.histo .h2 .grp{display:flex;gap:6px;align-items:flex-end}
.histo .h3{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;font-weight:900;color:var(--doux)}
.histo .h3 b{color:var(--texte)}

/* ===== v29 ===== */
/* 1. bouton Cartes : aucun contour (thème clair et sombre), aucune lueur ; juste un bouton */
nav.bar button.centre .rond,nav.bar button.centre[aria-current="page"] .rond,.phone[data-theme="sombre"] nav.bar button.centre .rond{border:0!important;box-shadow:none!important}
/* 3. en-tête : chiffres dans une police fixe (TeX Gyre Adventor) et centrés en hauteur dans leur cadre */
.stockH,.porte{font-family:"Barlow","Public Sans",sans-serif;font-weight:700}
#stockN,#stockC,#pieces{position:relative;top:.09em}
#stockC{top:.17em}
/* 18. écran Ouvrir : une seule page, sans défilement ; plus de titre « Ouvrir » ; un petit espace au-dessus de l'arrondi du bouton Cartes */
#catalogue{overflow:hidden;display:flex;flex-direction:column;padding:12px 12px 46px}
.catTete{display:none}
.hero{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.hero::after{display:none}
.eventail{flex:1 1 0;min-height:90px;height:auto;margin-top:0}
.eventail .cm{top:50%;width:var(--cw,112px);margin-left:calc(var(--cw,112px) / -2);margin-top:calc(var(--cw,112px) * -.75)}
.eventail .cm:nth-child(1){transform:translateX(calc(var(--cw,112px) * -.7)) translateY(calc(var(--cw,112px) * .09)) rotate(-12deg)}
.eventail .cm:nth-child(2){transform:translateY(calc(var(--cw,112px) * -.05)) scale(1.06)}
.eventail .cm:nth-child(3){transform:translateX(calc(var(--cw,112px) * .7)) translateY(calc(var(--cw,112px) * .09)) rotate(12deg)}
.heroTxt{flex:none;padding:6px 18px 16px}
.hero h2{margin:6px 0 6px;font-size:30px}
.hero p{font-size:12.5px;line-height:1.4}
.chances{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;margin:12px 0 0;padding:11px 12px 5px}
.chances .kicker{grid-column:1/-1;margin-bottom:8px}
.ch{grid-template-columns:1fr auto;gap:6px;margin-bottom:7px;font-size:12px}
.ch .b{display:none}
.ch em{font-size:12px}
.catBtns{display:flex;gap:10px;margin-top:12px}
.catBtns .heroBtn,.catBtns .heroBtn2{flex:1;margin:0;min-height:50px;font-size:14px;padding:0 8px}
.catBtns .heroBtn2{text-transform:none;font:700 14px/1 "Barlow","Public Sans",sans-serif;letter-spacing:0}
.heroInfo{margin-top:10px}
#catalogue.c1 .hero p{display:none}
#catalogue.c2 .heroInfo{display:none}
#catalogue.c3 .chances{display:none}
/* 2. faisceaux de lumière : centrés sur la carte dorée du milieu, très longs, sans origine ni fin visibles */
.heroRays{position:absolute;left:50%;top:30%;width:2000px;height:2000px;margin:-1000px 0 0 -1000px;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(190,225,255,0) 0deg,rgba(190,225,255,.15) 4.5deg,rgba(190,225,255,0) 9deg,rgba(190,225,255,0) 20deg);
  -webkit-mask:radial-gradient(circle,transparent 0,transparent 40px,#000 140px,rgba(0,0,0,.75) 420px,transparent 1000px);mask:radial-gradient(circle,transparent 0,transparent 40px,#000 140px,rgba(0,0,0,.75) 420px,transparent 1000px);
  animation:heroRay 60s linear infinite;opacity:.5}
/* 19. échanges : panneau coupé en deux par un trait (qui ne touche pas les bords), flèches au milieu, total en bas de chaque côté */
.recap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;margin:4px 0 10px;border-radius:20px;overflow:hidden;color:#fff;
  background:radial-gradient(90% 80% at 0% 0%,rgba(95,227,154,.14),transparent 62%),radial-gradient(90% 80% at 100% 100%,rgba(111,189,255,.2),transparent 62%),linear-gradient(160deg,#1c2d48,#0f1726);
  box-shadow:inset 0 0 0 1px rgba(150,205,255,.16)}
.recap::before{content:"";position:absolute;left:50%;top:18px;bottom:18px;width:1px;margin-left:-.5px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.3) 18%,rgba(255,255,255,.3) 82%,transparent)}
.recap::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%)}
.recap .col{position:relative;justify-content:flex-start;gap:10px;padding:14px 10px 12px;border-radius:0;background:none}
.recap .col span{color:rgba(255,255,255,.66);font:700 11px/1.2 "Barlow","Public Sans",sans-serif;letter-spacing:.08em}
.recap .cms{flex:1;align-content:center;gap:8px}
.recap .vc em{color:#fff}
.recap .col b{margin-top:auto;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff;font:700 12.5px/1 "Barlow","Public Sans",sans-serif;white-space:nowrap}
.recap .fl{position:absolute;left:50%;top:50%;z-index:2;width:58px;height:32px;margin:-16px 0 0 -29px;border-radius:999px;font-size:0;color:transparent;
  background:#6fbdff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' fill='none' stroke='%2306121f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h28M28 3.5l5 4.5-5 4.5M35 16H7M12 11.5L7 16l5 4.5'/%3E%3C/svg%3E") center/34px 21px no-repeat;
  box-shadow:0 0 0 5px rgba(15,23,38,.85),0 6px 16px rgba(0,0,0,.35)}
.offre .recap{margin:14px 0 0;background:radial-gradient(90% 80% at 0% 0%,rgba(95,227,154,.12),transparent 62%),radial-gradient(90% 80% at 100% 100%,rgba(111,189,255,.16),transparent 62%),rgba(255,255,255,.035)}
.offre .haut{align-items:center}
.offre .qui{width:auto;flex:1;display:grid;grid-template-columns:46px 1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:3px;align-items:center}
.offre .qui .av{grid-row:1/3}
.offre .qui .etat{grid-row:1/3;grid-column:3}
/* l arrondi du bouton Cartes ne cache jamais le bas des pages */
main .screen:not(.pl){padding-bottom:56px}
/* 21. historique : chaque échange accepté reste affiché, avec le même panneau */
.histo{padding:10px 10px 6px}
.histo .recap{margin:8px 0 4px}
.histo .recap .vc .cm{width:40px}

/* ===== v30 ===== */
/* plus de textes tout en majuscules : seule la première lettre (et les noms propres) */
html,body,body *,input::placeholder{text-transform:none!important}
/* textes centrés au pixel près dans leur cadre */
.ctx,.ctxf{display:inline-block;line-height:1!important;white-space:nowrap;vertical-align:middle;flex:none}
.ctxt{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.btn,.heroBtn,.heroBtn2,#mAjout,.chips button,.etat,.tag,#retourCat,.seg2 button,.durees button,.mFiltres button{display:inline-flex!important;align-items:center;justify-content:center}
.recap .col b,.lot .prix{display:inline-flex;align-items:center;justify-content:center}
/* en-tête : chiffres dessinés, même hauteur pour les chiffres, « / » et « : », pile au milieu des bulles */
.chfsrc{display:none!important}
.chfv{display:inline-flex;align-items:center;justify-content:center;flex:none}
.chfv svg{display:block}
.stockH .chfv,.porte .chfv{color:var(--texte)}
.stockH .t .chfv{color:var(--doux)}
#stockN+.chfv{min-width:38px}
#stockC+.chfv{min-width:29px}
.porte .chfv{flex:1}
.stockH,.porte{align-items:center}
.top{border-bottom:0!important;box-shadow:0 1px 0 var(--ligne)}
/* écran Ouvrir : éventail et textes remontés, chances en liste, boutons grands */
#catalogue{padding:10px 12px 46px}
.eventail{min-height:78px}
.heroTxt{padding:0 18px 14px}
.kicker{font-size:12px}
.hero h2{margin:4px 0 4px;font-size:28px}
.hero p{font-size:12.5px;line-height:1.35;margin:0}
.chances{display:block;margin:10px 0 0;padding:10px 12px 4px}
.chances .kicker{display:block;margin-bottom:8px}
.ch{display:grid;grid-template-columns:100px 1fr 42px;gap:10px;margin-bottom:6px;font-size:12.5px}
.ch .b{display:block}
.ch em{font-size:12.5px}
.catBtns{margin-top:12px;gap:10px}
.catBtns .heroBtn,.catBtns .heroBtn2{min-height:56px;font-size:16px;padding:0 6px;letter-spacing:0}
#catalogue.c1 .heroInfo{display:none}
#catalogue.c2 .hero p{display:none}
#catalogue.c3 .heroTxt>.kicker{display:none}
#catalogue.c3 .hero h2{font-size:24px}
#catalogue.c3 .chances{display:block!important}
/* pendant l'ouverture, le bouton « Jeux vidéo » s'efface (il ne chevauche plus le compteur) */
.phone.ouvre #retourCat{display:none!important}
/* tout s'assombrit quand une fenêtre est au premier plan (sauf la barre du bas) */
nav.bar{z-index:40}
.feuille{z-index:42}
#popVoile{inset:0 0 68px 0;background:rgba(2,6,14,.62)}
.scrim{inset:0 0 68px 0;z-index:35;background:rgba(2,6,14,.55)}
.panel{z-index:36}
#voileF{position:absolute;left:0;right:0;top:0;bottom:68px;z-index:39;background:rgba(2,6,14,.8);opacity:0;pointer-events:none;transition:opacity .2s ease}
#voileF.on{opacity:1;pointer-events:auto}
/* ---------- marché : les cartes avant tout ---------- */
.mhead{position:relative;overflow:hidden;align-items:center;gap:12px;margin:0 0 12px;padding:16px;border-radius:22px;color:#fff;isolation:isolate;
  background:radial-gradient(120% 90% at 100% 0%,rgba(111,189,255,.35),transparent 60%),linear-gradient(160deg,#143e70,#0b2648 60%,#071a33);box-shadow:inset 0 0 0 1px rgba(150,205,255,.18)}
.mhead::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M0 22h44M22 0v44'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.12'%3E%3Crect x='20.5' y='20.5' width='3' height='3' rx='.6'/%3E%3C/g%3E%3C/svg%3E")}
.mhead b{font:700 24px/1 "Barlow","Public Sans",sans-serif;color:#fff}
.mhead small{margin-top:6px;font:700 12.5px/1.2 "Barlow","Public Sans",sans-serif;letter-spacing:.04em;color:rgba(220,236,255,.72)}
.mhead{flex-direction:column;align-items:stretch}
#mAjout{flex:none;width:100%!important;min-height:48px;padding:0 18px;border-radius:999px;background:#6fbdff;color:#06121f;font:700 15px/1 "Barlow","Public Sans",sans-serif}
.mFiltres{display:flex;gap:6px;margin:0 0 12px}
.mFiltres button{flex:1 1 0;min-width:0;min-height:36px;padding:0 4px;border-radius:999px;border:1.5px solid var(--ligne);background:transparent;color:var(--texte);font:700 12.5px/1 "Barlow","Public Sans",sans-serif;cursor:pointer;white-space:nowrap}
.mFiltres button[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
#mListe{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
#mListe .vide2{grid-column:1/-1}
#mListe .lot{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:10px 10px 12px;border:0;border-radius:20px;color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 60% at 50% 32%,color-mix(in srgb,var(--rc) 42%,transparent),transparent 72%),linear-gradient(170deg,#18263d,#0d1524);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 24px rgba(5,10,20,.18);transition:transform .15s ease}
#mListe .lot:active{transform:scale(.98)}
#mListe .lot.moi{box-shadow:inset 0 0 0 2px #6fbdff,0 10px 24px rgba(5,10,20,.18)}
#mListe .lot .cm{width:78%;margin:4px auto 10px;box-shadow:0 12px 24px rgba(0,0,0,.45)}
#mListe .lot .badge{position:absolute;z-index:3;top:10px;left:10px;padding:5px 9px;border-radius:999px;background:rgba(4,10,20,.72);font:700 11px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.04em;color:#fff;display:inline-flex;align-items:center}
#mListe .lot .badge.ench{background:#ffb35c;color:#2a1600}
#mListe .lot .badge.moi{left:auto;right:10px;background:#6fbdff;color:#06121f}
#mListe .lot b{display:block;font:700 15px/1.1 "Barlow","Public Sans",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mListe .lot .rr{display:block;margin-top:4px;color:rgba(255,255,255,.6);font:700 11.5px/1.2 "Barlow","Public Sans",sans-serif;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mListe .lot .pied{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px}
#mListe .lot .prix{min-height:32px;padding:0 11px;border-radius:999px;background:rgba(111,189,255,.16);box-shadow:inset 0 0 0 1px rgba(111,189,255,.32);color:#fff;font:700 14px/1 "Barlow","Public Sans",sans-serif;gap:5px}
#mListe .lot .prix svg{width:16px;height:16px;color:#6fbdff;flex:none}
#mListe .lot .par{margin:0;font:700 11px/1 "Barlow","Public Sans",sans-serif;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== v31 ===== */


/* 3 polices au maximum : GC Titre partout (police de « Ajouter une carte en vente »), GC Etroite pour les petits textes, Inter pour les chiffres dessinés */

html body .kicker,html body .ch,html body .ch em,html body .heroInfo,html body .mhead small,html body #mListe .lot .rr,html body #mListe .lot .par,html body #mListe .lot .badge,
html body .recap .col span,html body .vc em,html body .rr,html body .lbl{font-family:"Barlow","Public Sans",sans-serif!important}
.ctxfond{position:absolute;pointer-events:none;z-index:3;background-repeat:no-repeat;background-size:100% 100%;border-radius:inherit}
/* écran Ouvrir : grandes cartes d'exemple (+35 %), textes resserrés et remontés */
.eventail{min-height:150px!important;margin-bottom:calc(var(--cw,100px) * .1)}
.heroTxt{padding:0 18px 12px!important}
.kicker{margin:0}
.hero h2{margin:2px 0 3px!important}
.hero p{font-size:12px!important;line-height:1.3!important}
.chances{margin-top:8px!important;padding:8px 12px 3px!important}
.chances .kicker{margin-bottom:5px!important}
.ch{margin-bottom:3px!important}
.catBtns{margin-top:9px!important}
.catBtns .heroBtn,.catBtns .heroBtn2{min-height:52px!important}
.heroInfo{margin-top:7px!important}
#catalogue .hero p,#catalogue .heroInfo,#catalogue .heroTxt>.kicker{display:block!important}
#catalogue .chances{display:block!important}
#catalogue.k1 .heroInfo{display:none!important}
#catalogue.k2 .hero p{display:none!important}
#catalogue.k3 .eventail{min-height:100px!important}
.ch{grid-template-columns:116px 1fr 42px!important}
/* plus de bouton « Jeux vidéo » en haut à gauche (on revient au catalogue avec le bouton Cartes) */
#retourCat{display:none!important}
/* en-tête : chaque nombre a sa place fixe (un 1 ne décale plus rien) et rien n'est jamais coupé */
.stockH,.porte{overflow:visible!important;width:auto!important}
.porte{padding:0 12px 0 6px!important;gap:5px!important}
.stockH{padding:0 10px!important}
.stockH>svg{margin-right:5px!important}
.stockH .t{margin-left:6px!important;gap:4px!important}
.stockH .t .sep{margin:0 5px 0 0!important}
.top{padding-left:10px!important;gap:8px!important;justify-content:flex-start!important}
.top .btns{flex:1 1 auto!important;min-width:0;justify-content:flex-start!important;gap:6px!important}
.top .btns .stockH{margin-right:0!important}
#menuBtn{margin-left:auto!important}
.porte .chfv{flex:none!important}
.stockH .chfv,.porte .chfv{overflow:visible}
/* marché : on peut toujours défiler un peu, et la barre de défilement garde sa place (rien ne se décale) */
#ecran{scrollbar-gutter:stable}
section[data-screen="marche"]{min-height:calc(100% + 48px)}
#mListe .lot{content-visibility:auto;contain-intrinsic-size:auto 260px}
#mPlus{grid-column:1/-1;height:1px}
/* la carte d'une annonce se regarde en grand */
.achat .vfiche .cm{cursor:zoom-in}
#loupe{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:rgba(2,6,14,.8);opacity:0;pointer-events:none;transition:opacity .2s ease}
#loupe.on{opacity:1;pointer-events:auto}
#loupe .cm{width:min(76%,300px);transform:scale(.92);transition:transform .25s cubic-bezier(.2,.85,.25,1);box-shadow:0 30px 60px rgba(0,0,0,.5)}
#loupe.on .cm{transform:none}
/* point rouge visible même quand le menu est ouvert (la croix) */
.scrim.trou{-webkit-clip-path:var(--trou);clip-path:var(--trou)}
/* profil */
.profilDesc{margin:4px 18px 0;text-align:center;font-size:13.5px;line-height:1.4;color:var(--doux);white-space:pre-wrap;word-break:break-word}
.profilDesc:empty{display:none}
#pEdit{margin:12px auto 0;display:inline-flex!important;width:auto!important;padding:0 22px;min-height:44px}
.champE{display:block;width:100%;box-sizing:border-box;margin:6px 0 4px;padding:12px 14px;border-radius:14px;border:2px solid var(--ligne);background:var(--panneau);color:var(--texte);font-size:15px;font-weight:700;resize:none}
.champE:focus{outline:none;border-color:var(--bleu)}
.erreurE{min-height:16px;font-size:12px;font-weight:700;color:#ff6b6b}
/* paramètres */
.droits{font-size:12px!important;line-height:1.55!important;text-align:left!important}
.droits b{color:var(--texte)}
.supprC{margin-top:14px;width:100%;min-height:48px;border-radius:14px;border:2px solid #ff5a5a;background:transparent;color:#ff5a5a;font-size:15px;font-weight:700;cursor:pointer}
.code6{letter-spacing:.4em;text-align:center;font-size:22px!important}
/* messages */
.msgCherche{display:flex;gap:8px;margin-bottom:10px}
.msgCherche input{flex:1;min-width:0;padding:11px 14px;border-radius:14px;border:2px solid var(--ligne);background:var(--panneau);color:var(--texte);font-size:14px;font-weight:700}
.msgCherche input:focus{outline:none;border-color:var(--bleu)}
.conv{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow-y:auto;padding:4px 2px 8px}
.bulle{max-width:78%;padding:9px 12px;border-radius:16px;font-size:14px;line-height:1.35;background:var(--survol);color:var(--texte);align-self:flex-start;word-break:break-word}
.bulle.moi{align-self:flex-end;background:var(--bleu);color:#fff}
.bulle small{display:block;margin-top:3px;font-size:10.5px;opacity:.6}
.envoi{display:flex;gap:8px;width:100%}
.envoi input{flex:1;min-width:0;padding:12px 14px;border-radius:14px;border:2px solid var(--ligne);background:var(--panneau);color:var(--texte);font-size:14px;font-weight:700}
.envoi .btn{flex:none!important;width:auto!important;padding:0 18px}
#menuPanel .nbm{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#ff3b3b;color:#fff;font-size:11px;line-height:20px;text-align:center}
#menuPanel .nbm[hidden]{display:none}

/* ===== v32 ===== */
/* plein écran partout : plus de bande sur la droite (aucune barre de défilement ne prend de place) */
#ecran{scrollbar-gutter:auto!important}
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
/* en-tête : boosters, minuteur et crédits reviennent à droite, à côté du menu (toujours sans décalage ni coupure) */
.top .btns{justify-content:flex-end!important}
#menuBtn{margin-left:0!important}
/* fenêtres (pop) : au centre de la zone entre l'en-tête et la barre du bas, apparition sur place, sans glissement */
.feuille.pop{top:calc(56px + (100% - 124px) / 2)!important;max-height:calc(100% - 144px)!important;transform:translate(-50%,-50%)!important;scale:.96;opacity:0;
  transition:opacity .14s ease,scale .18s cubic-bezier(.2,.85,.25,1),visibility 0s .18s!important;
  border:1px solid rgba(255,255,255,.2)}
.feuille.pop.on{scale:1;opacity:1;transition:opacity .14s ease,scale .18s cubic-bezier(.2,.85,.25,1)!important}
.feuille.pop .fpied{background:transparent!important}
.feuille.pop:has(.achat){width:min(88%,360px)!important}
.fhead b{line-height:1.35!important;padding:2px 0!important;overflow:visible!important}
/* fond derrière les fenêtres : noir à 80 % */


.scrim{background:rgba(0,0,0,.8)!important}
/* cartes affichées comme des images (plus légères) */
.cm img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}
.achat .vfiche .cm{cursor:pointer}
#loupe{display:none!important}
/* aperçu d'une carte du marché : le même que dans la collection */
section.apM{display:flex!important;position:fixed!important;z-index:95!important;padding:0!important;margin:0!important;background:transparent!important;inset:auto}
section.apM>:not(iframe){display:none!important}
section.apM iframe{flex:1;width:100%;height:100%}
/* écran Ouvrir : « Jeux vidéo » au-dessus, « Catégorie · Général » en dessous, tout plus aéré */
#catalogue .heroTxt>h2{margin:0 0 6px!important}
#catalogue .heroTxt>.kicker{display:block!important;margin:0 0 10px!important}
#catalogue .hero p{margin:0!important}
.chances{margin-top:14px!important;padding:12px 14px 6px!important}
.chances .kicker{margin-bottom:10px!important}
.ch{margin-bottom:8px!important}
.catBtns{margin-top:14px!important}
#eventail .cm{will-change:transform}
#eventail .cm:nth-child(1){transform:translateX(calc(var(--cw,112px) * -.62)) translateY(calc(var(--cw,112px) * .08)) rotate(-11deg)!important}
#eventail .cm:nth-child(3){transform:translateX(calc(var(--cw,112px) * .62)) translateY(calc(var(--cw,112px) * .08)) rotate(11deg)!important}
/* derrière les cartes d'exemple : les mêmes faisceaux tournants que derrière le booster, en plus grand */
.hero::after{display:none!important}
.heroRays{width:1800px!important;height:1800px!important;margin:-900px 0 0 -900px!important;opacity:1!important;
  background:repeating-conic-gradient(rgba(120,190,255,.2) 0 6deg,transparent 6deg 24deg)!important;
  -webkit-mask:radial-gradient(circle,#000 0,transparent 34%)!important;mask:radial-gradient(circle,#000 0,transparent 34%)!important;
  animation:heroRay 70s linear infinite!important}
.heroRays::after{content:"";position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;
  background:radial-gradient(circle,rgba(70,160,255,.5) 0%,rgba(27,102,181,.26) 30%,transparent 62%);animation:halo32 4s ease-in-out infinite}
@keyframes halo32{0%,100%{opacity:.75;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
/* échanges : boutons de rareté identiques à ceux de la collection */
#fCorps .fchips.chips{padding:0!important;gap:5px}
#fCorps .fchips.chips button{padding:8px 0!important;border:2px solid var(--k)!important;color:var(--k)!important;background:color-mix(in srgb,var(--k) 12%,transparent)!important;font-size:10.5px!important}
#fCorps .fchips.chips button[aria-pressed="true"]{color:#fff!important;border-color:transparent!important;background:linear-gradient(135deg,var(--k) 0%,var(--k2) 50%,var(--k) 100%)!important;background-size:200% 200%!important}
#fCorps .fchips.chips button.vide{opacity:.45}
/* mes offres : le même panneau qu'une offre reçue, en jaune */
.offre.moi{background:radial-gradient(90% 70% at 100% 0%,rgba(255,201,74,.3),transparent 70%),linear-gradient(160deg,#3a2c10,#1c160b)!important}
.offre.moi .qui .av{border-color:#ffc94a!important}
.offre.moi .recap{background:radial-gradient(90% 80% at 0% 0%,rgba(255,214,102,.14),transparent 62%),radial-gradient(90% 80% at 100% 100%,rgba(255,170,40,.16),transparent 62%),rgba(255,255,255,.035)!important;box-shadow:inset 0 0 0 1px rgba(255,214,120,.2)!important}
.offre.moi .recap .fl{background-color:#ffc94a!important;box-shadow:0 0 0 5px rgba(40,30,12,.9),0 6px 16px rgba(0,0,0,.35)!important}
.offre.moi .bts{justify-content:center}
.offre.moi .bts .btn{flex:0 1 auto;min-width:62%;background:transparent;color:#ffd56b;border:1.5px solid rgba(255,201,74,.65)}
.offre.moi .bts .btn:active{background:rgba(255,201,74,.12)}

/* ===== v33 ===== */
/* fenêtres : panneau noir à 80 %, contour gris clair, points blancs très légers ;
   elles apparaissent et disparaissent de la même façon, sur place : fondu + léger zoom */
#feuille{left:50%!important;right:auto!important;bottom:auto!important;top:calc(56px + (100% - 124px) / 2)!important;
  width:min(94%,600px)!important;max-height:calc(100% - 144px)!important;border-radius:22px!important;
  transform:translate(-50%,-50%) scale(.94)!important;scale:none!important;opacity:0!important;visibility:hidden!important;
  transition:transform .2s cubic-bezier(.2,.85,.25,1),opacity .18s ease,visibility 0s .2s!important;
  border:1px solid rgba(255,255,255,.2)!important}
#feuille.on{transform:translate(-50%,-50%) scale(1)!important;opacity:1!important;visibility:visible!important;
  transition:transform .2s cubic-bezier(.2,.85,.25,1),opacity .14s ease,visibility 0s!important}
#feuille:has(div.achat){width:min(88%,360px)!important}
#feuille .fpied{background:transparent!important}
/* en-tête : nouvelle icône de booster (un sachet avec ses bords crantés et une étoile) */
.stockH>svg{width:18px!important;height:18px!important}
/* amis : les catégories (demandes, en ligne, hors ligne) descendent un peu */
section[data-screen="amis"] .search{margin-bottom:22px!important}
#aListe h3{margin-top:28px!important;margin-bottom:10px!important}
#aListe h3:first-child{margin-top:4px!important}
/* marché : la carte de la fenêtre d'achat se tourne au doigt ; un simple toucher ouvre l'aperçu */
.achat .vfiche .cm{touch-action:none;will-change:transform;transform-style:preserve-3d}
.achat .vfiche .cm::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.4),rgba(255,255,255,0) 58%);opacity:var(--ga,0);transition:opacity .25s ease}

/* ===== v34 ===== */
/* 1-2-6. FOND D'APERÇU : une seule règle commune — noir à 80 %, sans points, sans dégradé, sans flou, sans couleur */
.fondApercu{background:rgba(0, 0, 0, 0.5)!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* échanges : toucher une carte d'un échange l'ouvre en grand */
.recap .cm[data-r],.histo .cm[data-r]{cursor:pointer}
/* 7. NAVIGATION INSTANTANÉE : au démarrage, la Collection est construite en coulisse (invisible), puis simplement cachée */
.screen.pl{overflow:clip!important}
main.plein{overflow:clip!important}
.screen.pl.prechauffe[hidden]{display:flex!important;flex-direction:column!important;visibility:hidden!important;pointer-events:none!important}
.screen.pl.prechauffe[hidden] iframe{display:block!important;flex:1 1 0!important;min-height:0!important;width:100%!important}
section.apM{visibility:visible!important;pointer-events:auto!important}

#fApercu{position:absolute;left:0;top:0;width:100%;height:calc(100% - 68px);border:0;z-index:95;background:transparent;display:none}
#fApercu.on{display:block}

/* ===== v35 ===== */
/* 3. PANNEAU D'APERÇU : une seule règle commune — fond noir à 20 % exactement, aucune autre couche noire */
.panneauApercu{background:transparent!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important}
#feuille .fhead,#feuille .fpied{background:transparent!important}
/* 9. collection : en-tête descendu et un peu plus grand, boutons de rareté descendus (de l'air en haut) */
.screen.coll .chead{margin:20px 14px 12px!important;padding:14px 16px!important;min-height:64px;box-sizing:border-box}
.screen.coll .chead b{font-size:19px!important}
.chips{padding:4px 14px 10px!important}
/* 10. boutons de rareté : petite animation pop (zoom avant puis retour) ; le texte est dessiné en tracés, il reste net */
@keyframes chipPop35{0%{transform:scale(1)}45%{transform:scale(1.1)}100%{transform:scale(1)}}
.chips button.pop35{animation:none}
.chips button[aria-pressed="true"]{animation:chipFond 3s ease-in-out infinite!important;text-shadow:none!important}
.chips button[aria-pressed="true"].pop35{animation:none}
/* 11. changement d'écran instantané (plus d'apparition en fondu) */
.screen.enter,.enter{animation:none!important}
/* 12. menu : il apparaît directement à sa place (simple fondu, aucun glissement) */
.panel{transform:none!important;transition:opacity .16s ease,visibility .16s!important}
/* 13. logo cliquable */
#titre{cursor:pointer}
/* 14. écran Cartes : la liste des boosters, puis le détail en plein écran (fond bleu partout) */
.catListe{display:flex;flex-direction:column;gap:10px}
.catTuile{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border-radius:18px;border:0;color:#fff;cursor:pointer;text-align:left;
  background:radial-gradient(90% 120% at 0% 0%,rgba(111,189,255,.35),transparent 70%),linear-gradient(160deg,#1c4f8f,#0f2a52)}
.catTuile .ctFan{position:relative;flex:none;width:86px;height:78px}
.catTuile .ctFan .cm{position:absolute;top:6px;width:44px;border-radius:5px;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.catTuile .ctFan .cm:nth-child(1){left:2px;transform:rotate(-12deg)}
.catTuile .ctFan .cm:nth-child(2){left:21px;top:2px;z-index:2}
.catTuile .ctFan .cm:nth-child(3){left:40px;transform:rotate(12deg)}
.catTuile .ctTxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.catTuile .ctTxt b{font-size:20px}
.catTuile .ctTxt small{font-size:12px;color:#9fd3ff;letter-spacing:.08em}
.catTuile .ctChev{font-size:26px;opacity:.8}
#catalogue:not(.detail) .hero{display:none!important}
#catalogue.detail{padding:0!important;overflow:hidden!important}
#catalogue.detail .catTete,#catalogue.detail .catListe{display:none!important}
#catalogue.detail .hero{position:absolute!important;inset:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
.heroX{position:absolute;top:10px;right:10px;z-index:8;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.heroX svg{width:18px;height:18px}
/* 15. profil : bannière colorée, photo, nom en grand ; crayon bleu dans le coin pour tout modifier */
.pCarte{position:relative;border-radius:22px;overflow:hidden;background:var(--panneau);border:2px solid var(--ligne);padding:0 0 16px;margin-bottom:10px;display:flex;flex-direction:column;align-items:center}
.pBan{align-self:stretch;height:96px;background:var(--pban,#1B66B5)}
.pCarte .av{width:92px!important;height:92px!important;margin-top:-46px;border:4px solid var(--panneau)!important;background:var(--survol);overflow:hidden}
.pCarte .av img{width:100%;height:100%;object-fit:cover;display:block}
.pCarte h2{font-size:30px!important;font-weight:900;margin:8px 16px 0;text-align:center;word-break:break-word}
.pCrayon{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--panneau);border:0;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pCrayon svg{width:26px;height:26px}
#pEdit{display:none!important}
.pPhoto{display:flex;align-items:center;gap:12px;margin:6px 0 8px}
.pPhoto .av{width:60px;height:60px;overflow:hidden}
.pPhoto .av img{width:100%;height:100%;object-fit:cover}
.pCouleur{display:flex;align-items:center;gap:12px;margin:6px 0 4px}
.pCouleur input[type=color]{width:64px;height:44px;border:2px solid var(--ligne);border-radius:12px;background:none;padding:2px;cursor:pointer}
/* 16. messages : bouton « Envoyer un message » */
#mNouveau{width:100%;min-height:46px;margin-bottom:12px}
/* 17. succès */
.sRec{flex:none;display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:999px;background:var(--survol);font-weight:900;font-size:13px;color:var(--texte);white-space:nowrap}
.sRec svg{width:16px;height:16px}
.row.locked .sRec{opacity:.6}
.sJour{border-color:color-mix(in srgb,var(--bleu) 55%,var(--ligne))!important}
.sJour .btn{flex:none;min-height:38px;padding:0 14px;font-size:13px}
.sGrp{font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--doux);margin:16px 2px 8px}

/* ===== v36 ===== */
/* écran Cartes : plus de liste « Catégorie » ; on arrive directement sur les trois cartes, « Jeux vidéo » et « Ouvrir un booster » */
#catalogue .catTete,#catalogue .catListe,#catalogue .heroX{display:none!important}
#catalogue .hero{display:flex!important}
/* rien ne passe sous le bouton rond du bas, et les cartes d'exemple gardent de la marge sur les côtés */
#catalogue.detail .heroTxt{padding-bottom:40px!important}

/* ===== v37 ===== */
/* la barre du bas (et son bouton rond) reste toujours au-dessus de l'écran assombri */
nav.bar{z-index:100!important}
/* fenêtre d'achat / d'échange : plus aucun contour ni trait de panneau, la carte et les textes reposent sur l'écran assombri */
#feuille.panneauApercu{border:0!important;box-shadow:none!important;outline:0!important}
#feuille.panneauApercu .fhead{border-bottom:0!important}
#feuille.panneauApercu .fpied{border-top:0!important}
/* marché : les filtres prennent la largeur de leur texte (plus serrés sur petit écran) */
.mFiltres button{flex:1 1 auto!important;padding:0 9px!important}
@media (max-width:380px){.mFiltres{gap:4px}.mFiltres button{font-size:11.5px!important;padding:0 7px!important}.lot .rr{font-size:10.5px!important;letter-spacing:.01em!important}}
/* amis : sur téléphone, « Accepter » et « Refuser » passent sous le nom (le texte reste sur une ligne) */
@media (max-width:520px){.row.dem{flex-wrap:wrap;row-gap:10px}.row.dem .grow{flex:1 1 calc(100% - 64px)}.row.dem .btn{flex:1 1 0;min-height:38px}}
/* succès : la récompense et le bouton « Ouvrir » l'un sous l'autre, le texte a toute la place */
.sJourD{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.sJourD .btn{min-height:34px!important}

/* booster journalier : étiquette « Gratuit » en vert */
.sRec.sGratuit{opacity:1!important;background:rgba(46,204,113,.16)!important;color:#5fe39a!important;letter-spacing:.02em}
.sJour small{white-space:nowrap}

/* ===== v38 ===== */
/* 2 et 7. fenêtres (vente, enchère, échange) : panneau sombre et opaque, plus rien ne se voit à travers */
#feuille.panneauApercu{background:rgba(10,14,22,.96)!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:0 18px 50px rgba(0,0,0,.5)!important}
#feuille.panneauApercu .fpied{background:transparent!important}
/* 6. une carte ouverte en grand depuis une fenêtre du marché : la fenêtre et son fond s'effacent, le fond reste identique */
body.sousApercu #feuille,body.sousApercu #popVoile{visibility:hidden!important;opacity:0!important;transition:none!important}
/* 8. échange : ce que je propose s'affiche en jaune dès que je le choisis */
.gcartes[data-g="ed"] .gc[aria-pressed="true"] .cm{outline-color:#ffc94a!important}
.gcartes[data-g="ed"] .gc[aria-pressed="true"] .ok{background:#ffc94a!important;color:#2a1c00!important}
#fCorps .question+.recap{background:radial-gradient(90% 80% at 0% 0%,rgba(255,214,102,.14),transparent 62%),radial-gradient(90% 80% at 100% 100%,rgba(255,170,40,.16),transparent 62%),rgba(255,201,74,.06)!important;box-shadow:inset 0 0 0 1px rgba(255,214,120,.28)!important}
#fCorps .question+.recap .fl{background-color:#ffc94a!important;color:#2a1c00!important}
/* 23. au lancement, chaque écran est dessiné une fois en coulisse (invisible) : la première visite est aussi rapide que les suivantes */
main#ecran{position:relative}
.screen.chaud[hidden]{display:block!important;opacity:.002!important;z-index:-1!important;pointer-events:none!important;position:absolute!important;left:0;right:0;top:0;contain:layout paint}
.screen.pl.chaud[hidden]{display:flex!important;flex-direction:column!important;bottom:0}
.screen.pl.chaud[hidden] iframe{display:block!important;flex:1 1 0!important;min-height:0!important;width:100%!important}
@media (max-width:420px){.lot .rr{font-size:10.5px!important;letter-spacing:.01em!important}}
/* 18. collection : tri (rareté, nom, valeur) */
.cTri{flex:none;margin:0 14px 10px;flex-wrap:wrap}
.cTri button{cursor:pointer;background:transparent}
/* 19. un peu d'air entre « Ma collection » et le compteur */
#collN{display:block;margin-top:6px!important}
/* 20. profil : 2 thèmes avec motif de fond */
.pCarte.th1 .pBan{background-image:radial-gradient(circle,rgba(255,255,255,.28) 0 1.6px,transparent 2.2px),radial-gradient(circle,rgba(255,255,255,.14) 0 1.2px,transparent 1.8px);background-size:16px 16px,16px 16px;background-position:0 0,8px 8px}
.pCarte.th1{background-image:radial-gradient(circle,rgba(255,255,255,.05) 0 1.3px,transparent 1.8px);background-size:16px 16px}
.pCarte.th2 .pBan{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 6px,transparent 6px 16px),repeating-linear-gradient(-45deg,rgba(0,0,0,.12) 0 6px,transparent 6px 16px)}
.pCarte.th2{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 6px,transparent 6px 16px)}
.pThemes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 8px}
.pThemes button{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;border-radius:14px;border:2px solid var(--ligne);background:var(--panneau);color:var(--texte);font:800 13px/1 "Barlow","Public Sans",sans-serif;cursor:pointer}
.pThemes button[aria-pressed="true"]{border-color:var(--bleu);background:var(--survol)}
.pThemes i{display:block;height:46px;border-radius:9px;background-color:var(--pban,#1B66B5)}
.pThemes i.th1{background-image:radial-gradient(circle,rgba(255,255,255,.28) 0 1.6px,transparent 2.2px),radial-gradient(circle,rgba(255,255,255,.14) 0 1.2px,transparent 1.8px);background-size:16px 16px,16px 16px;background-position:0 0,8px 8px}
.pThemes i.th2{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 6px,transparent 6px 16px),repeating-linear-gradient(-45deg,rgba(0,0,0,.12) 0 6px,transparent 6px 16px)}

/* ===== v39 ===== */
/* 5. détail d'une carte par-dessus une fenêtre : la fenêtre reste visible derrière (seul son fond s'efface : un seul fond) */
body.sousApercu #feuille{visibility:visible!important;opacity:1!important}
/* 8. boutons de rareté : plus de zoom / pop, seule la couleur change */
.chips button,.chips button.pop35,.chips button:active,.chips button[aria-pressed="true"]{!important;scale:none!important;translate:none!important}
.chips button.pop35{animation:none}
.chips button[aria-pressed="true"],.chips button[aria-pressed="true"].pop35{animation:none}
/* 9. boutons « Trier » : texte centré au pixel près */
.tri button{display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;min-height:26px;box-sizing:border-box}
/* 10. profil : 4 motifs */
.pCarte.th3 .pBan,.pThemes i.th3{background-image:linear-gradient(rgba(255,255,255,.16) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,255,255,.16) 1.5px,transparent 1.5px);background-size:14px 14px}
.pCarte.th3{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:14px 14px}
.pCarte.th4 .pBan,.pThemes i.th4{background-image:radial-gradient(circle at 50% 100%,transparent 9px,rgba(255,255,255,.2) 10px,rgba(255,255,255,.2) 12px,transparent 13px);background-size:24px 12px}
.pCarte.th4{background-image:radial-gradient(circle at 50% 100%,transparent 9px,rgba(255,255,255,.04) 10px,rgba(255,255,255,.04) 12px,transparent 13px);background-size:24px 12px}
.pThemes{grid-template-columns:1fr 1fr!important}
/* 12-13. série journalière, ouvertures gratuites, panneau de récompense */
.sSerie .bar2{margin-top:6px}
.sJourD .btn.sGrat{min-height:34px!important;padding:0 12px;font-size:12px}
.recomp{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:10px 4px 4px}
.recomp .ico{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#ffe27a,#f2b62a 60%,#b9780c);box-shadow:0 0 30px rgba(255,200,60,.55);font:800 30px/1 "Barlow","Public Sans",sans-serif;color:#3a2400}
.recomp b{font:800 20px/1.2 "Barlow","Public Sans",sans-serif;color:var(--texte)}
.recomp p{margin:0;color:var(--texte);font-size:14px;line-height:1.4}
.pieds2{display:flex;flex-direction:column;gap:8px}
/* 15. lisibilité : texte blanc pur sur fond sombre, texte foncé sur fond clair */
.phone[data-theme="sombre"]{--texte:#fff;--doux:#fff}
.phone[data-theme="sombre"] #mListe .lot .rr,.phone[data-theme="sombre"] #mListe .lot .par,.phone[data-theme="sombre"] .lbl,.phone[data-theme="sombre"] small,.phone[data-theme="sombre"] .note,.phone[data-theme="sombre"] .vide2,.phone[data-theme="sombre"] .sGrp,.phone[data-theme="sombre"] .tri{color:#fff!important}
#mListe .lot .rr,#mListe .lot .par{color:#fff}
.phone[data-theme="sombre"] .av,.phone[data-theme="sombre"] .stats strong,.phone[data-theme="sombre"] .pSolde b,.phone[data-theme="sombre"] .tri button[aria-pressed="true"]{color:#fff!important}
.phone[data-theme="sombre"] .tri button[aria-pressed="true"]{background:var(--bleu)!important;border-color:var(--bleu)!important}
.phone:not([data-theme="sombre"]){--doux:#33414f}
.phone:not([data-theme="sombre"]) .chips button:not([aria-pressed="true"]){color:color-mix(in srgb,var(--k) 62%,#000)!important}
.phone:not([data-theme="sombre"]) .sRec.sGratuit{color:#146c3a!important}
.phone:not([data-theme="sombre"]) .danger,.phone:not([data-theme="sombre"]) #supprCompte{color:#b3261e!important}
.sJour small{white-space:normal!important}
/* succès pas encore débloqués : texte toujours bien lisible, seuls l'icône et la récompense sont atténuées */
.row.locked{opacity:1!important}.row.locked>.ic{opacity:.45}.row.locked .sRec{opacity:.55}
/* textes restés gris ou bleus sur fond sombre */
.offre .recap .col>span{color:#fff!important}
.phone[data-theme="sombre"] #pSolde,.phone[data-theme="sombre"] .price{color:#fff!important}
/* « Proposer un échange » : bouton plein, texte blanc, lisible sur fond clair et sur fond sombre */
#eProposer{background:#1B66B5!important;color:#fff!important;border:0!important}
/* fenêtres : même fond que les panneaux du thème (clair en thème clair, sombre en thème sombre) */
#feuille.panneauApercu{background:var(--panneau)!important;color:var(--texte)}
#feuille #fTitre,#feuille .fhead button{color:var(--texte)!important}
/* 16. échange : titre descendu avec la photo de profil, contenu aéré */
.feuille.pop .fhead{padding-top:16px!important;padding-bottom:10px!important}
#fTitre .fAv{width:30px;height:30px;border-radius:50%;flex:none;display:inline-grid;place-items:center;overflow:hidden;background:var(--survol);border:2px solid var(--bleu);color:var(--texte);font:800 13px/1 "Barlow","Public Sans",sans-serif;margin-right:8px;vertical-align:middle}
#fTitre .fAv img{width:100%;height:100%;object-fit:cover}
#fTitre.avecAv{display:inline-flex!important;align-items:center;justify-content:center}
#fCorps.echE{padding-top:14px!important}
/* 17. plusieurs exemplaires : la carte s'assombrit et un sélecteur « − n + » s'affiche dessus */
.gc.ouvert .cm{filter:brightness(.55)}
.gc .qsel{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:5;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:rgba(6,12,20,.88);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.gc .qsel button{width:30px;height:30px;border-radius:50%;border:0;background:#1B66B5;color:#fff;font:800 18px/1 "Barlow","Public Sans",sans-serif;display:grid;place-items:center;cursor:pointer;padding:0}
.gc .qsel button[disabled]{opacity:.35}
.gc .qsel b{min-width:22px;text-align:center;color:#fff;font:800 15px/1 "Barlow","Public Sans",sans-serif}
.gc{position:relative}
/* 18. échange vide bloqué */
.eVide{margin:8px 0 0;text-align:center;font-weight:800;font-size:13px;color:#ff8a65}
.phone:not([data-theme="sombre"]) .eVide{color:#b3261e}
#eValider[disabled]{opacity:.45;cursor:default}
/* 20. aide */
#aideTxt{width:100%;box-sizing:border-box;min-height:120px}
.rowClic{cursor:pointer}

/* ===== v40 ===== */
/* boutons de rareté : la couleur du texte et du fond change tout de suite au clic (plus de fondu ni de délai) */
.chips button,.chips button *,.chips button .ctxfond{transition:none!important}

/* aperçu par-dessus une fenêtre (vente, enchère, échange) : le fond de la fenêtre reste affiché tel quel ; l'aperçu n'en ajoute pas un deuxième */
body.sousApercu #popVoile{visibility:visible!important;opacity:1!important;transition:none!important}
body.sousApercu #feuille{visibility:visible!important;opacity:1!important}

/* ===== v43 ===== */
/* échange : lettre centrée dans le rond de la photo, titre aligné dessus */
#fTitre .fAv{line-height:1!important;padding:0!important;box-sizing:border-box}
/* sélecteur « − n + » : boutons de la couleur de la rareté, nombre centré */
.gc .qsel button{background:var(--k,#1B66B5)!important;color:var(--kt,#fff)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}
.gc .qsel b{display:inline-flex;align-items:center;justify-content:center;height:30px;line-height:1}
/* résumé des cartes choisies, en bas du panneau (toucher une carte = son aperçu) */
.eSel{display:flex;align-items:center;gap:8px;margin:0 0 8px;min-height:62px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px}
.eSel::-webkit-scrollbar{display:none}
.eSel .eT{flex:none;font:800 11px/1.2 "Barlow","Public Sans",sans-serif;color:var(--texte);max-width:64px}
.eSel .eC{flex:none;position:relative;width:40px;cursor:pointer}
.eSel .eC .cm{width:40px!important;pointer-events:none}
.eSel .eC i{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:var(--k,#1B66B5);color:var(--kt,#fff);font:800 10px/18px "Barlow","Public Sans",sans-serif;text-align:center;font-style:normal}
.eSel .eV{font:600 12px/1.3 "Barlow","Public Sans",sans-serif;color:var(--texte)}

/* ===== v45 ===== */
/* enchères : contour vert quand tu es en tête (avec ta mise), rouge quand quelqu'un a misé plus que toi */
#mListe .lot.enTete{box-shadow:inset 0 0 0 2px #3ddc84,0 0 18px rgba(61,220,132,.28)!important;border-color:transparent!important}
#mListe .lot.depasse{box-shadow:inset 0 0 0 2px #ff5a6e,0 0 18px rgba(255,90,110,.3)!important;border-color:transparent!important}
#mListe .lot.enTete .badge.ench{background:#3ddc84;color:#04200f}
#mListe .lot.depasse .badge.ench{background:#ff5a6e;color:#fff}
#mListe .lot .maMise{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px;padding:6px 10px;border-radius:10px;font:700 11.5px/1.2 "Barlow","Public Sans",sans-serif;letter-spacing:.02em}
#mListe .lot.enTete .maMise{background:rgba(61,220,132,.14);color:#3ddc84}
#mListe .lot.depasse .maMise{background:rgba(255,90,110,.14);color:#ff8a99}
#mListe .lot .maMise .mm{display:inline-flex;align-items:center;gap:4px;font:700 13px/1 "Barlow","Public Sans",sans-serif;color:#fff;white-space:nowrap}
#mListe .lot .maMise .mm svg{width:14px;height:14px;flex:none;color:currentColor}
#mListe .lot.enTete .maMise .mm svg{color:#3ddc84}
#mListe .lot.depasse .maMise .mm svg{color:#ff8a99}
.achat .moyenne.mDep span:first-child{color:#ff8a99}
.feed li.n45 .ic{color:#ff5a6e}

/* ===== v46 ===== */
/* 7-8. marché : sous-filtres des enchères + bouton Historique */
.mSousL{display:flex;align-items:center;gap:5px;margin:-4px 0 12px}
.mSous{flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;touch-action:pan-y;}
.mSous.deborde{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 14px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 14px),transparent);padding-right:12px}
.mSous::-webkit-scrollbar{display:none}
.mSous button{flex:none;min-height:30px;padding:0 8px;border-radius:999px;border:1.5px solid var(--ligne);background:transparent;color:var(--texte);font:700 11px/1 "Barlow","Public Sans",sans-serif;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mSous button[aria-pressed="true"]{background:var(--k,var(--bleu));border-color:var(--k,var(--bleu));color:var(--kt,#fff)}
.mSous button[data-s="mises"]{--k:#ffb35c;--kt:#2a1600}.mSous button[data-s="tete"]{--k:#3ddc84;--kt:#04200f}.mSous button[data-s="depasse"]{--k:#ff5a6e;--kt:#fff}
#mHisto{flex:none;min-height:30px;padding:0 8px 0 7px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--bleu) 60%,transparent);background:color-mix(in srgb,var(--bleu) 12%,transparent);color:var(--texte);font:700 11px/1 "Barlow","Public Sans",sans-serif;display:inline-flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
#mHisto svg{width:16px;height:16px;flex:none;color:var(--bleu)}
/* petit écran : l'icône d'horloge au-dessus du mot, pour que les 4 filtres et le bouton tiennent sur la même ligne */
@media (max-width:400px){#mHisto{flex-direction:column;gap:2px;min-height:38px;padding:3px 7px;border-radius:12px;font-size:9.5px}#mHisto svg{width:15px;height:15px}
  .mSous button{padding:0 7px;font-size:10.5px}.mSousL{margin-top:-6px}}
.hListe{display:flex;flex-direction:column}
.hR{display:flex;align-items:center;gap:10px;padding:10px 2px;border-top:1px solid var(--ligne)}
.hR:first-child{border-top:0}
.hR .cm{width:38px!important;flex:none;margin:0!important}
.hR .hM{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.hR .hM b{font:700 13.5px/1.15 "Barlow","Public Sans",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hR .hM small{font:600 11px/1.2 "Barlow","Public Sans",sans-serif;color:var(--doux)}
.hR .hT{align-self:flex-start;padding:3px 7px;border-radius:999px;font:800 10px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.03em;background:var(--survol);color:var(--texte)}
.hR .hT.achat{background:rgba(111,189,255,.18)}.hR .hT.vente{background:rgba(61,220,132,.18)}.hR .hT.ench{background:rgba(255,179,92,.22)}
.hR .hD{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.hR .hD .mt{font:800 13.5px/1 "Barlow","Public Sans",sans-serif;white-space:nowrap}
.hR .hD .mt.plus{color:#3ddc84}.hR .hD .mt.moins{color:#ff5a6e}
.hR .hD .res{padding:3px 7px;border-radius:999px;font:800 10px/1 "Barlow","Public Sans",sans-serif;white-space:nowrap}
.hR .res.tete{background:rgba(61,220,132,.18);color:#3ddc84}.hR .res.dep{background:rgba(255,90,110,.18);color:#ff8a99}.hR .res.gagne{background:rgba(255,210,63,.2);color:#ffd23f}
.hVide{padding:30px 0;text-align:center;color:var(--doux);font-weight:700}
/* 9. aperçu d'un échange : les cartes restent sur une rangée qu'on fait glisser de gauche à droite (sans barre) */
.recap .cms{flex-wrap:nowrap!important;justify-content:safe center!important;overflow-x:auto;overflow-y:hidden;max-width:100%;scrollbar-width:none;touch-action:pan-y;padding:2px 2px 4px;box-sizing:border-box;align-self:stretch}
.recap .cms::-webkit-scrollbar{display:none}
.recap .cms>*{flex:none}
.eSel{touch-action:pan-y}
.glisse46{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
/* 10. titre de l'échange : même écart entre le rond et le texte sur les deux écrans */
#fTitre.avecAv{gap:10px}
#fTitre.avecAv .fAv{margin:0!important}
#fTitre.avecAv>span:not(.fAv){line-height:1!important;padding:0!important;margin:0!important}

/* ===== v47 ===== */
/* 7. historique : filtres par type et ordre */
.hFil{display:flex;align-items:center;gap:6px;margin:0 0 10px;flex-wrap:wrap}
.hFil .hTy{display:flex;gap:5px;flex:1 1 100%;min-width:0}
.hFil .hTy button{flex:1 1 0;min-width:0;padding:0 4px}
.hFil button{min-height:30px;padding:0 10px;border-radius:999px;border:1.5px solid var(--ligne);background:transparent;color:var(--texte);font:700 11.5px/1 "Barlow","Public Sans",sans-serif;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.hFil .hTy button[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
.hFil #hOrdre{flex:none;padding:0 10px;margin-left:auto}
.hFil #hOrdre svg{width:15px;height:15px;flex:none;color:var(--bleu)}

/* 8. l'icône des boosters de l'en-tête est cliquable : elle ouvre l'écran Cartes */
#stockH{cursor:pointer;-webkit-tap-highlight-color:transparent}
#stockH:active{}
/* 6. « Ma vente » : petite étiquette sous celle du type de vente (elles ne se chevauchent plus) */
#mListe .lot .badge.moi{left:10px!important;right:auto!important;top:38px!important}
/* 9. pastilles de notification : rond rouge plein, contour rouge vif très fin et halo rouge léger (plus de contour noir) */
.pastille,#notifBtn .nb,#menuPanel .nbm{background:#ff3b3b!important;box-shadow:0 0 0 1px #ff6161,0 0 7px rgba(255,59,59,.38)!important;border:0!important;color:#fff!important}
#notifBtn .nb,#menuPanel .nbm{display:inline-flex!important;align-items:center;justify-content:center;line-height:1!important}
#notifBtn .nb[hidden],#menuPanel .nbm[hidden]{display:none!important}

/* ===== v48 ===== */
/* le nombre des pastilles rouges est centré au pixel près dans son rond (3, 18, 500…) */
#notifBtn .nb,#menuPanel .nbm{padding:0 6px!important;font-variant-numeric:tabular-nums}
#notifBtn .nb .pT,#menuPanel .nbm .pT{display:block;line-height:1;white-space:nowrap}

/* ===== v49 ===== */
/* 2. marché : catégories et sous-filtres au premier plan, rien ne coupe leur petit zoom au clic */
.mFiltres{overflow:visible!important;position:relative;z-index:3;padding:6px 0!important;margin:-6px 0 6px!important}
.mSousL{overflow:visible!important;position:relative;z-index:3}
.mSous{overflow:visible!important;flex-wrap:wrap;-webkit-mask:none!important;mask:none!important;padding:6px 0!important;margin:-6px 0!important}
.mFiltres button,.mSous button,#mHisto{position:relative;z-index:1}
.mFiltres button:active,.mSous button:active,#mHisto:active,.mFiltres button.pop,.mSous button.pop,#mHisto.pop{z-index:4}
/* 6. écran Cartes : pastilles et couleurs = les couleurs des raretés des cartes, toutes les pastilles de la même taille */
.ch i::before{display:none!important}
.ch .chP{flex:none;width:10px;height:10px;border-radius:50%;background:var(--k);box-shadow:0 0 4px color-mix(in srgb,var(--k) 55%,transparent)}
.ch i{color:var(--k)!important;line-height:1!important}
.ch .b span{background:var(--k)!important;box-shadow:0 0 5px color-mix(in srgb,var(--k) 45%,transparent)!important}
/* 10. titre de l'échange : rond de taille fixe (réglée au pixel d'écran), texte dessiné pile au milieu */
#fTitre.avecAv .fAv{width:var(--avS,30px)!important;height:var(--avS,30px)!important;min-height:0!important;margin:0!important}
#fTitre.avecAv{min-height:0!important;margin-bottom:0!important;align-items:center!important}
#fTitre.avecAv>span:not(.fAv){line-height:0!important;display:flex!important;align-items:center;min-height:0!important;margin:0!important;padding:0!important}
/* 7. « 10 boosters disponibles » retiré (déjà visible en haut) */
#heroInfo{display:none!important}
/* 11. rangée des cartes choisies : le cadre « Tu prends / Tu offres » reste fixe, les cartes glissent derrière lui */
.eSel.e49{display:block!important;position:relative;overflow:hidden!important;padding:0!important;min-height:66px}
.e49 .eT{position:absolute;left:0;top:0;bottom:0;z-index:3;display:flex;align-items:center;padding:0 10px 0 2px;max-width:none!important;background:var(--fondE49,#141b26)}
.e49 .eT::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:14px;background:linear-gradient(90deg,var(--fondE49,#141b26),transparent);pointer-events:none}
.e49 .eSelV{position:relative;overflow:hidden;touch-action:pan-y;cursor:grab}
.e49 .eSelR{display:flex;align-items:center;gap:8px;width:max-content;padding:8px 6px 4px var(--plE49,80px);will-change:transform;transform:translate3d(0,0,0)}
.e49 .eSelR .eV{white-space:nowrap}

/* ===== v51 ===== */
/* collection : chercher n'importe quelle carte par son nom (même celles qu'on n'a pas) */
.cRech{display:flex;align-items:center;gap:8px;margin:0 14px 10px;padding:0 6px 0 12px;height:40px;border-radius:12px;background:var(--survol);border:1.5px solid var(--ligne);box-sizing:border-box}
.cRech:focus-within{border-color:var(--bleu)}
.cRech svg{width:17px;height:17px;flex:none;color:var(--bleu)}
.cRech input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:none;color:var(--texte);font:600 14px/1 "Barlow","Public Sans",sans-serif;-webkit-appearance:none;appearance:none}
.cRech input::placeholder{color:var(--doux)}
.cRech input::-webkit-search-cancel-button{display:none}
.cRech button{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--doux);font:700 18px/1 "Barlow","Public Sans",sans-serif;cursor:pointer;display:grid;place-items:center}
.cRech button[hidden]{display:none}

/* ===== v54 ===== */
/* bouton « + » dans la pastille des Dragos */
.porte{padding-right:3px!important;gap:6px}
#plusDragos{flex:none;width:26px;height:26px;margin-left:1px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;color:#fff;
  background:radial-gradient(circle at 35% 30%,#7fd0ff,#1f7be0 62%,#1456a8);box-shadow:0 0 0 1.5px rgba(207,230,255,.55),0 2px 8px rgba(31,123,224,.45);-webkit-tap-highlight-color:transparent;transition:transform .08s ease-out}
#plusDragos svg{width:16px;height:16px;display:block}
#plusDragos:active{}
@media (max-width:380px){#plusDragos{width:24px;height:24px}#plusDragos svg{width:15px;height:15px}}
.porte.gagne{animation:porteGagne .9s cubic-bezier(.2,.9,.3,1.2)}
@keyframes porteGagne{0%{box-shadow:0 0 0 0 rgba(255,210,63,.0)}30%{box-shadow:0 0 0 3px rgba(255,210,63,.9),0 0 22px rgba(255,210,63,.7)}100%{box-shadow:0 0 0 0 rgba(255,210,63,0)}}
.plusVole{position:fixed;z-index:200;pointer-events:none;font:700 15px/1 "Barlow","Public Sans",sans-serif;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.6);animation:plusVole 1.3s ease-out forwards}
@keyframes plusVole{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.08)}100%{opacity:0;transform:translate(-50%,-34px) scale(1)}}

/* l'historique et la boutique : toujours la même taille, même avec peu de lignes */
#feuille.fFixe{height:calc(100% - 144px)!important}
#feuille.fFixe .fcorps{flex:1 1 auto;min-height:0}
#feuille.fFixe .hListe{min-height:100%}
#feuille.fFixe .hVide{flex:1;display:flex;align-items:center;justify-content:center}
#feuille.fFixe .fcorps:has(.hListe){display:flex;flex-direction:column}
#feuille.fFixe .fcorps:has(.hListe) .hListe{flex:1 1 auto;min-height:0}

/* ----- boutique de Dragos ----- */
.bq{display:flex;flex-direction:column;gap:12px;padding-bottom:4px}
.bqSolde{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(31,123,224,.28),rgba(31,123,224,.08));border:1px solid rgba(127,208,255,.25)}
.bqSolde svg{width:40px;height:40px;flex:none;filter:drop-shadow(0 3px 8px rgba(31,123,224,.6))}
.bqSolde small{display:block;font:700 11px/1.2 "Barlow","Public Sans",sans-serif;color:var(--doux);letter-spacing:.04em;text-transform:uppercase}
.bqSolde b{display:block;font:700 22px/1.15 "Barlow","Public Sans",sans-serif;font-variant-numeric:tabular-nums}
.bqIntro{margin:0;text-wrap:balance;text-align:center;font:600 12.5px/1.35 "Barlow","Public Sans",sans-serif;color:var(--doux)}
.bqGrille{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bqP{--b:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 8px;border-radius:16px;cursor:pointer;overflow:hidden;
  border:1.5px solid color-mix(in srgb,#ffd23f calc(var(--b) * 180%),rgba(255,255,255,.14));
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,#ffd23f calc(var(--b) * 70%),rgba(31,123,224,.22)),rgba(10,16,28,.5) 70%);color:var(--texte);font:inherit;text-align:center;
  transition:transform .12s ease-out;-webkit-tap-highlight-color:transparent}
.bqP:active{}
.bqP .bqPile{position:relative;height:58px;width:100%;flex:none}
.bqP .bqPile svg{position:absolute;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.bqP .bqQt{font:700 20px/1 "Barlow","Public Sans",sans-serif;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:5px}
.bqP .bqAv{font:700 11.5px/1 "Barlow","Public Sans",sans-serif;color:var(--doux);text-decoration:line-through;text-decoration-thickness:1.5px;min-height:11.5px}
.bqP .bqPx{margin-top:2px;align-self:stretch;height:34px;border-radius:11px;display:grid;place-items:center;font:700 14.5px/1 "Barlow","Public Sans",sans-serif;color:#fff;
  background:linear-gradient(180deg,#3d9bff,#1f6fd1);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 10px rgba(31,111,209,.35)}
.bqP .bqBonus{position:absolute;top:8px;right:-30px;width:104px;transform:rotate(35deg);padding:3px 0;font:800 10.5px/1 "Barlow","Public Sans",sans-serif;color:#2a1600;
  background:linear-gradient(90deg,#ffe27a,#ffb627);box-shadow:0 2px 6px rgba(0,0,0,.35);letter-spacing:.02em}
.bqP .bqTag{position:absolute;top:8px;left:8px;padding:3px 7px;border-radius:999px;font:800 9.5px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.05em;background:#ff5a6e;color:#fff}
/* reflet qui passe sur les packs avec bonus, plus souvent quand le bonus est gros */
.bqP.aBonus::after{content:"";position:absolute;inset:-40% -60%;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);
  transform:translateX(-70%);animation:bqReflet calc(4.2s - var(--b) * 6s) ease-in-out infinite}
@keyframes bqReflet{0%,55%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
/* la meilleure offre : toute la largeur, cadre doré qui tourne */
.bqP.bqTop{grid-column:1 / -1;flex-direction:row;align-items:center;gap:12px;padding:16px 14px 16px 10px;border-color:transparent;
  background:radial-gradient(120% 140% at 0% 50%,rgba(255,210,63,.3),rgba(255,210,63,0) 70%) padding-box,linear-gradient(#171a22,#171a22) padding-box,conic-gradient(from var(--ang,0deg),#ffd23f,#ff7ad9,#7fd0ff,#3ddc84,#ffd23f) border-box;
  border:2px solid transparent;animation:bqTourne 4s linear infinite}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes bqTourne{to{--ang:360deg}}
.bqP.bqTop .bqPile{width:118px;height:72px}
.bqP.bqTop .bqTxt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.bqP.bqTop .bqQt{font-size:25px}
.bqP.bqTop .bqPx{align-self:stretch;height:38px;font-size:16px;background:linear-gradient(180deg,#ffe27a,#ffb627);color:#2a1600;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 12px rgba(255,182,39,.45)}
.bqP.bqTop .bqTag{left:auto;right:10px;top:-1px;border-radius:0 0 9px 9px;background:linear-gradient(90deg,#ffe27a,#ffb627);color:#2a1600;padding:4px 9px}
.bqP.bqTop .bqBonus{display:none}
.bqP.bqTop .bqBL{font:800 12px/1 "Barlow","Public Sans",sans-serif;color:#ffd23f}
.bqNote{margin:2px 0 0;text-wrap:balance;text-align:center;font:600 11px/1.35 "Barlow","Public Sans",sans-serif;color:var(--doux)}
/* confirmation et réussite */
.bqC{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:10px 6px}
.bqC .bqGros{width:96px;height:96px;filter:drop-shadow(0 8px 20px rgba(31,123,224,.6));animation:bqFlotte 2.6s ease-in-out infinite}
@keyframes bqFlotte{50%{transform:translateY(-6px) rotate(-4deg)}}
.bqC small{font:700 11px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--doux)}
.bqC .bqQt{font:700 34px/1 "Barlow","Public Sans",sans-serif;font-variant-numeric:tabular-nums}
.bqC .bqBL{font:800 13px/1 "Barlow","Public Sans",sans-serif;color:#ffd23f}
.bqC .bqPay{margin-top:6px;width:min(100%,300px);height:48px;border:0;border-radius:14px;cursor:pointer;font:700 17px/1 "Barlow","Public Sans",sans-serif;color:#fff;
  background:linear-gradient(180deg,#3d9bff,#1f6fd1);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(31,111,209,.45);transition:transform .08s ease-out}
.bqC .bqPay:active{}
.bqC .bqPay.bqOr{background:linear-gradient(180deg,#ffe27a,#ffb627);color:#2a1600}
.bqC .bqN{max-width:300px;font:600 11.5px/1.4 "Barlow","Public Sans",sans-serif;color:var(--doux)}
.bqC.bqOk .bqGros{animation:bqGagne .9s cubic-bezier(.2,.9,.3,1.3) both,bqFlotte 2.6s ease-in-out .9s infinite}
@keyframes bqGagne{0%{transform:scale(.3) rotate(-30deg);opacity:0}100%{transform:none;opacity:1}}
.bqC .bqEcl{position:relative;width:0;height:0;top:60px;z-index:2}
.bqC .bqEcl i{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px;animation:bqEclat 1.1s cubic-bezier(.15,.7,.3,1) forwards;opacity:0}
.bqC .bqEcl i svg{width:100%;height:100%}
@keyframes bqEclat{0%{opacity:1;transform:translate(0,0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.bqP.aBonus::after,.bqP.bqTop,.bqC .bqGros,.bqC .bqEcl i{animation:none!important}}

/* ===== v55 ===== */
/* 1. champ de recherche : il ne peut plus être écrasé ni recouvert (avant : il rétrécissait quand la hauteur manquait, clavier ouvert) */
.screen.coll>.cRech,.screen.coll>#chips,.screen.coll>.cTri,.screen.coll>.chead{flex:none!important}
.cRech{position:relative;z-index:3;min-height:40px;margin-top:2px!important}
.cRech input{position:relative;line-height:1!important;padding:0!important;margin:0!important}
/* collection : « Trier : » aligné sur les catégories (même bord gauche que les pastilles de rareté) */
.cTri{margin-left:14px!important;padding-left:0!important}
.cTri .triL{flex:none;display:inline-block;line-height:1;align-self:center;position:relative}
/* menu de choix commun (tri de l'historique, catégorie de la collection) */
.gcMenu{position:fixed;z-index:300;min-width:190px;padding:6px;border-radius:14px;background:#1b2330;border:1px solid rgba(255,255,255,.14);color:#e9eef5;box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0;transform-origin:var(--ox,100%) 0;scale:.96;transition:opacity .12s ease,scale .14s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;max-height:min(60vh,360px);overflow:auto;scrollbar-width:none}
.gcMenu.on{opacity:1;scale:1;pointer-events:auto}
.gcMenu button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:#e9eef5;font:700 13px/1 "Barlow","Public Sans",sans-serif;text-align:left;cursor:pointer}
.gcMenu button[aria-checked="true"]{background:rgba(111,189,255,.16);color:#ffffff}
.gcMenu button .ck{width:16px;height:16px;flex:none;color:#6fbdff;opacity:0}
.gcMenu button[aria-checked="true"] .ck{opacity:1}

/* 5. « + » des Dragos : icône seule */
#plusDragos{width:28px!important;height:30px!important;margin-left:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;color:var(--bleu)!important}
#plusDragos svg{width:22px!important;height:22px!important}
@media (max-width:380px){#plusDragos{width:26px!important}#plusDragos svg{width:21px!important;height:21px!important}}
.porte{padding-right:2px!important}
/* 7. historique : taille fixe (celle du filtre « Achats »), le contenu défile à l'intérieur */
#feuille.hFixe .fcorps{flex:1 1 auto;min-height:0;overflow-y:auto}
/* 8. un seul bouton « Trier » */
.hFil #hTrier{flex:none;padding:0 11px;margin-left:auto;gap:5px}
.hFil #hTrier svg{width:15px;height:15px;flex:none;color:var(--bleu)}

/* 11. ouverture : affichage immédiat, petit pop seulement */
#catalogue,#catalogue.cache{transition:none!important}
#catalogue.cache{transform:none!important;opacity:0!important;visibility:hidden}
#fBoost.pop55{animation:pop55 .15s cubic-bezier(.2,.9,.3,1) both}
@keyframes pop55{from{scale:.96}to{scale:1}}
@media (prefers-reduced-motion:reduce){#fBoost.pop55{animation:none}}

.e49 .eT{background:transparent!important}
.e49 .eT::after{content:none!important}
.e49 .eSelV{-webkit-mask:linear-gradient(90deg,transparent 0,transparent calc(var(--plE49,80px) - 16px),#000 calc(var(--plE49,80px) - 2px));mask:linear-gradient(90deg,transparent 0,transparent calc(var(--plE49,80px) - 16px),#000 calc(var(--plE49,80px) - 2px));border:0!important;box-shadow:none!important;outline:0!important}
.e49 .eSelR{border:0!important;box-shadow:none!important;outline:0!important}

/* 16. panneaux : jamais sous le gros bouton rond du menu du bas (12 px d'espace au minimum) */
#feuille{top:calc(56px + 10px + (100% - 66px - var(--basF,110px)) / 2)!important;max-height:calc(100% - 66px - var(--basF,110px))!important}
#feuille.fFixe{height:calc(100% - 66px - var(--basF,110px))!important}
#feuille .fpied .btn{margin-top:4px}
/* 17. conversation : hauteur fixe, les messages défilent dedans */
#feuille.cFixe .fcorps{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#feuille.cFixe .conv{flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto;overscroll-behavior:contain}
/* 18. motif « vagues » : vraies vagues (sinusoïdes douces et régulières), rangées décalées, même couleur qu'avant */
.pCarte.th4 .pBan,.pThemes i.th4{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M-24 6Q-12 0 0 6T24 6T48 6T72 6'/%3E%3Cpath d='M-36 18Q-24 12 -12 18T12 18T36 18T60 18'/%3E%3C/g%3E%3C/svg%3E")!important;background-size:48px 24px!important;background-position:0 0!important}
.pCarte.th4{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.05' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M-24 6Q-12 0 0 6T24 6T48 6T72 6'/%3E%3Cpath d='M-36 18Q-24 12 -12 18T12 18T36 18T60 18'/%3E%3C/g%3E%3C/svg%3E")!important;background-size:48px 24px!important}
/* 19. bouton « Obtenir » / « Obtenu » des succès */
#sListe .sObt{min-height:32px!important;padding:0 14px!important;font-size:12.5px!important}
#sListe .sObt.fait,#sListe .sObt:disabled{background:rgba(46,204,113,.16)!important;color:#5fe39a!important;box-shadow:none!important;cursor:default;opacity:1!important}
/* 20. cartes de succès : un titre, UNE ligne de description, puis la barre ; 8 px entre chaque élément, plus aucun chevauchement */
#sListe .row{align-items:center}
#sListe .row .grow{display:flex;flex-direction:column;gap:8px;min-width:0}
#sListe .row .grow>b{line-height:1.15;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sListe .row .grow>small{display:block;line-height:1.2;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sListe .row .grow>.bar2{margin:0!important;flex:none}

nav.bar button:not(.centre){justify-content:center!important;padding-top:0!important;padding-bottom:0!important}
nav.bar button.centre{padding-bottom:var(--navBas,13px)!important}

/* ===== v56 ===== */
html,body{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}

/* 2. écran Échange : 3 catégories */
.eOnglets{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:10px 0 14px;padding:4px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);isolation:isolate}
.eOnglets .eInd{position:absolute;z-index:0;left:0;top:4px;bottom:4px;border-radius:12px;background:linear-gradient(180deg,#3d9bff,#1f6fd1);box-shadow:0 4px 14px rgba(31,111,209,.4),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .28s cubic-bezier(.2,.9,.25,1),width .28s cubic-bezier(.2,.9,.25,1);pointer-events:none}
.eOnglets button{position:relative;z-index:1;min-height:40px;border:0;border-radius:12px;background:transparent;color:var(--doux);font:800 13px/1 "Barlow","Public Sans",sans-serif;cursor:pointer;transition:color .2s}
.eOnglets button[aria-selected="true"]{color:#fff}
.eOnglets button[data-n]::after{content:attr(data-n);position:absolute;top:3px;right:6px;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:#ff5a6e;color:#fff;font:800 10px/17px "Barlow","Public Sans",sans-serif;text-align:center}
.ePan[hidden]{display:none!important}
.ePan.eEntre{animation:eEntre .26s cubic-bezier(.2,.9,.25,1)}
@keyframes eEntre{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
.eVide{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 16px;border-radius:18px;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,rgba(111,189,255,.14),transparent 70%),rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.14)}
.eVide .ic{width:34px;height:34px;color:#6fbdff;margin-bottom:4px}
.eVide b{font:800 15px/1.2 "Barlow","Public Sans",sans-serif;color:var(--texte)}
.eVide small{font:600 12.5px/1.35 "Barlow","Public Sans",sans-serif;color:var(--doux);max-width:250px}
/* bouton « Refuser l'échange » */
.btn.rouge{background:linear-gradient(180deg,#ff6b7d,#e5485c)!important;color:#fff!important;box-shadow:0 4px 14px rgba(229,72,92,.35)!important}

.catBtns{gap:10px!important}
.catBtns .heroBtn{flex:1.2 1 0!important}
.catBtns .heroBtn2{flex:1 1 0!important}
.catBtns .heroBtn,.catBtns .heroBtn2{min-height:58px!important;padding:0 14px!important;min-width:0}
/* 5. « Ouvrir un booster » : l'ancienne animation revient — la page s'efface en fondu et descend, la page du booster apparaît */
#catalogue{transition:opacity .25s ease,transform .25s ease,visibility 0s linear 0s!important}
#catalogue.cache{opacity:0!important;transform:translateY(12px)!important;visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s!important}

/* ===== v57 ===== */
/* 2. historique : les 4 filtres ont exactement la même taille (4 colonnes égales, même hauteur) */
.hFil .hTy{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.hFil .hTy button{width:100%;height:30px;min-height:30px;padding:0 2px}
#feuille.hFixe{max-width:none!important}

/* 3. puces de rareté : enfoncement 94 % en 80 ms, retour 100 % en 120 ms, sans rester enfoncé */
#chips .gcBtn::before{transition:transform .12s ease-out!important;will-change:transform}
#chips .gcBtn.gcBas::before{transform:scale(.94)!important;transition:transform 80ms ease-out!important}

/* 4. COLLECTION : rareté et tri tout en haut, titre plus petit, cartes visibles tout de suite */
.screen.coll .chead{margin:8px 10px 8px!important;padding:7px 12px!important;min-height:0!important;border-radius:14px!important}
.screen.coll .chead b{font-size:15px!important;line-height:1.15!important}
.screen.coll .chead #collN{font-size:11px!important;margin-top:2px!important;line-height:1.2!important}
.screen.coll .chead .sw{transform-origin:100% 50%}
.screen.coll>#chips{padding:0 10px 8px!important}
.screen.coll>.cTri{margin:0 10px 8px!important}
/* 4-5. barre de recherche unique : mêmes styles que le champ « Ajouter un ami (pseudo) » */
.rech57{position:relative;z-index:40;flex:none;display:flex;gap:6px;margin:0 10px 8px;isolation:isolate}
.rech57 .rBar{flex:1;min-width:0;display:flex;align-items:center;gap:4px;height:37px;box-sizing:border-box;padding:0 3px 0 3px;border-radius:12px;border:2px solid var(--ligne);background:var(--panneau)}
.rech57 .rBar:focus-within{border-color:var(--bleu)}
.rech57 .rTexte{flex:1;min-width:0;height:100%;margin:0;padding:0 4px 0 6px;border:0;outline:none;background:transparent;box-shadow:none;
  font:inherit;font-weight:700;font-size:14px;line-height:normal;color:var(--texte);text-transform:none;-webkit-appearance:none;appearance:none;overflow:visible}
.rech57 .rTexte::-webkit-search-cancel-button,.rech57 .rTexte::-webkit-search-decoration{display:none;-webkit-appearance:none}
.rech57 .rMode{flex:none;height:27px;min-width:0;padding:0 8px;border:0;border-radius:8px;background:rgba(111,189,255,.16);color:var(--bleu);font:800 11px/1 "Barlow","Public Sans",sans-serif;letter-spacing:0;text-transform:none;cursor:pointer}
.rech57 .rEff{flex:none;width:27px;height:27px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--doux);display:grid;place-items:center;cursor:pointer}
.rech57 .rEff[hidden]{display:none}
.rech57 .rEff svg{width:15px;height:15px}
.rech57 .rCats{flex:none;height:37px;padding:0 10px;border-radius:12px;border:2px solid var(--ligne);background:var(--panneau);color:var(--texte);font:800 11.5px/1 "Barlow","Public Sans",sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer}
.rSugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;max-height:min(230px,45vh);overflow:auto;overscroll-behavior:contain;scrollbar-width:none;
  padding:6px;border-radius:14px;background:#1b2330;border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.rSugg[hidden]{display:none}
.rSugg button{display:flex;align-items:center;width:100%;min-height:38px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:#e9eef5;font:700 13px/1 "Barlow","Public Sans",sans-serif;text-transform:none;text-align:left;cursor:pointer}
.rSugg button.prem{background:rgba(111,189,255,.16)}
.rRien{padding:10px;color:#9aa6b6;font:600 12.5px/1.3 "Barlow","Public Sans",sans-serif;text-transform:none}

/* 6. une seule classe pour « Proposer un échange » et les 3 onglets : même forme, même police, même couleur (bleu de l'onglet actif), mêmes effets */
.eTab57{min-height:40px!important;border-radius:12px!important;font:800 13px/1 "Barlow","Public Sans",sans-serif!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer;transition:color .2s,filter .15s}
@media (hover:hover){.eTab57:hover{filter:brightness(1.12)}}
#eProposer.eTab57,.eOnglets .eInd{background:linear-gradient(180deg,#3d9bff,#1f6fd1)!important;box-shadow:0 4px 14px rgba(31,111,209,.4),inset 0 1px 0 rgba(255,255,255,.25)!important}
#eProposer.eTab57{display:flex;align-items:center;justify-content:center;width:100%;padding:0 14px!important;margin:0 0 4px!important;border:0!important;color:#fff!important}
/* 7. pages des onglets : toujours construites ; celle qui n'est pas affichée est simplement invisible (pas de fondu, pas de reconstruction) */
section[data-screen="echange"]{position:relative}
.ePan{animation:none!important}
.ePan.eCache{position:absolute!important;left:0;right:0;top:0;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;visibility:hidden!important;pointer-events:none!important;border:0!important}

/* 9. fondu doux de 250 ms (et la petite descente demandée en v56), calques prêts à l'avance : pas de saccade */
#catalogue{will-change:opacity,transform;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s!important}
#catalogue.cache{transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1),visibility 0s linear .25s!important}
#fBoost{will-change:transform}

html:not(.pc57) .chances{padding:8px 10px 2px!important;margin-top:10px!important}html:not(.pc57) .chances .kicker{margin-bottom:6px!important}


/* 14. succès : aucun bouton « Ouvrir » */
#sListe #sJourBtn,#sListe #sGratBtn,#sListe .sGrat{display:none!important}

/* 15. installation */
.instRow #instBtn{flex:none;min-height:34px;padding:0 16px}
.instIos ol{margin:10px 0 0;padding-left:22px;display:grid;gap:10px;font:600 15px/1.4 "Barlow","Public Sans",sans-serif;text-transform:none}
.instIos p{text-transform:none;font:500 14px/1.45 "Public Sans","Barlow",sans-serif;margin:8px 0 0}
.instIos .icoP{display:inline-grid;place-items:center;width:26px;height:26px;margin-left:6px;vertical-align:middle;border-radius:7px;background:rgba(111,189,255,.16);color:#6fbdff}
.instIos .icoP svg{width:16px;height:16px}

html,body{overscroll-behavior-y:none}   /* pas de rechargement automatique de la page entière par le navigateur */
main#ecran{overscroll-behavior-y:contain}
#ptr57{position:absolute;left:0;right:0;z-index:95;height:0;pointer-events:none;display:none}
#ptr57.on{display:block}
#ptr57 .ptrRond{position:absolute;left:50%;top:0;width:40px;height:40px;margin-left:-20px;opacity:0;transform:translateY(-40px) scale(.6);will-change:transform,opacity;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
#ptr57 .ptrRond svg{display:block;width:100%;height:100%}
#ptr57.retour .ptrRond{transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .2s ease}
#ptr57.tourne .ptrRond svg{animation:ptrTourne .55s linear infinite}
#ptr57.tourne .ptrRond{transition:transform .18s ease-out;opacity:1!important}
@keyframes ptrTourne{to{transform:rotate(360deg)}}

nav.bar button>.ic,nav.bar button>.rond{transform-origin:50% 50%}
nav.bar button>.reb57{animation:reb57 .2s cubic-bezier(.3,.6,.4,1)!important}
@keyframes reb57{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
nav.bar button>.rond svg,nav.bar button>.ic{animation:none}
nav.bar button.gcBtn::before,nav.bar .rond.gcBtn::before{display:none!important}
@media (prefers-reduced-motion:reduce){nav.bar button>.reb57{animation:none!important}}

/* ---------- 8. ordinateur : à partir de 1024 px ---------- */

  html.pc57 body{display:block}
  html.pc57 .phone{border-radius:0!important;box-shadow:none!important;margin:0!important}
  /* en-tête : contenu centré sur 1200 px, plus grand */
  html.pc57 .top{height:72px!important;padding:0 max(24px,calc((100% - 1200px) / 2))!important;gap:14px!important}
  html.pc57 .top h1.logo{height:72px}
  html.pc57 .top h1.logo svg{width:46px;height:46px}
  html.pc57 .top .btns{gap:12px!important}
  html.pc57 .stockH,html.pc57 .porte{height:42px!important;font-size:16px!important}
  html.pc57 .porte{width:146px!important}
  html.pc57 .stockH>svg{width:22px!important;height:22px!important}
  html.pc57 .stockH .t svg{width:18px!important;height:18px!important}
  html.pc57 .porte .ic{width:27px!important;height:27px!important}
  html.pc57 #plusDragos svg{width:26px!important;height:26px!important}
  html.pc57 #menuBtn{width:48px;height:48px}
  html.pc57 #menuBtn svg{width:30px;height:30px}
  /* menu du bas : plus grand, centré */
  html.pc57 nav.bar{height:86px!important;padding:0 max(24px,calc((100% - 760px) / 2))!important}
  html.pc57 nav.bar button{font-size:13.5px!important;gap:5px!important}
  html.pc57 nav.bar button .ic{width:34px!important;height:34px!important}
  html.pc57 nav.bar button.centre .rond{top:-34px!important;width:80px!important;height:80px!important;margin-left:-40px!important}
  html.pc57 nav.bar button.centre .rond svg{width:46px!important;height:46px!important}
  /* écrans : contenu centré, largeur maximale confortable, textes agrandis */
  html.pc57 main .screen:not(.pl){max-width:1200px;margin:0 auto;padding:28px 32px 40px!important;box-sizing:border-box}
  html.pc57 main .screen[data-screen="echange"],html.pc57 main .screen[data-screen="amis"],html.pc57 main .screen[data-screen="messages"],html.pc57 main .screen[data-screen="reglages"],html.pc57 main .screen[data-screen="succes"],html.pc57 main .screen[data-screen="profil"]{max-width:860px}
  html.pc57 main .screen .row b{font-size:17px}
  html.pc57 main .screen .row small{font-size:14px}
  html.pc57 main .screen h3{font-size:19px}
  html.pc57 main .screen .btn{font-size:15.5px}
  html.pc57 .eTab57{min-height:48px!important;font-size:16px!important}
  html.pc57 .eOnglets{margin:14px 0 18px}
  html.pc57 .search input{font-size:16px;padding:13px 16px}
  html.pc57 #feuille{width:min(92%,580px)!important}
  /* marché : grandes cartes sur plusieurs colonnes */
  html.pc57 #mListe{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:18px!important}
  html.pc57 .mhead b{font-size:40px!important}
  html.pc57 .mhead small{font-size:16px!important}
  html.pc57 .mSous button,html.pc57 #mFiltres button{font-size:15px!important;min-height:42px!important}
  /* collection : barre d'outils centrée sur 1200 px, grille plus large (plus de colonnes) */
  html.pc57 .screen.coll>.chead,html.pc57 .screen.coll>#chips,html.pc57 .screen.coll>.cTri,html.pc57 .screen.coll>.rech57{width:calc(100% - 64px);max-width:1200px;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
  html.pc57 .screen.coll>#chips{padding:0 0 10px!important}
  html.pc57 .screen.coll .chead b{font-size:22px!important}
  html.pc57 .screen.coll .chead #collN{font-size:14px!important}
  html.pc57 #chips button{font-size:14px!important;padding:11px 0!important}
  html.pc57 .cTri button{font-size:14.5px!important;min-height:38px}
  html.pc57 .rech57 .rBar,html.pc57 .rech57 .rCats{height:46px}
  html.pc57 .rech57 .rTexte{font-size:16px}
  html.pc57 .rech57 .rMode{height:34px;font-size:13px;padding:0 12px}
  html.pc57 .rech57 .rCats{font-size:14px;padding:0 18px}
  /* écran Cartes : deux colonnes — à gauche les cartes qui tournent (bien plus grandes), à droite le texte, les chances (agrandies, aérées) et les boutons */
  html.pc57 #catalogue{padding:0!important}
  html.pc57 #catalogue.detail .hero{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;column-gap:56px;
    padding:24px max(32px,calc((100% - 1200px) / 2)) 56px!important;box-sizing:border-box}
  html.pc57 #catalogue .eventail{height:min(560px,calc(100% - 40px))!important;min-height:0!important;margin:0!important;align-self:center}
  html.pc57 #catalogue .heroTxt{padding:0!important;align-self:center;max-width:560px}
  html.pc57 .hero h2{font-size:58px!important;margin:0 0 10px!important}
  html.pc57 #catalogue .heroTxt>.kicker{font-size:17px!important;margin:0 0 18px!important}
  html.pc57 #catalogue .hero p{font-size:18px!important;line-height:1.5!important}
  html.pc57 .chances{margin-top:24px!important;padding:22px 26px 14px!important;border-radius:22px!important}
  html.pc57 .chances .kicker{font-size:15px!important;margin-bottom:16px!important}
  html.pc57 .ch{grid-template-columns:170px 1fr 64px!important;gap:18px!important;margin-bottom:14px!important;font-size:17px!important}
  html.pc57 .ch em{font-size:17px!important}
  html.pc57 .ch .b{height:9px!important}
  html.pc57 .ch .chP{width:13px;height:13px}
  html.pc57 .catBtns{margin-top:24px!important;gap:14px!important}
  html.pc57 .catBtns .heroBtn,html.pc57 .catBtns .heroBtn2{min-height:66px!important;font-size:19px!important}
  html.pc57 #catalogue .heroInfo{font-size:14px!important;margin-top:12px}
  html.pc57 .stockH .chfv,html.pc57 .porte .chfv{zoom:1.3}
  html.pc57 .ptoast{bottom:132px!important;font-size:14px!important;padding:13px 20px!important}


/* succès : série de 7 jours en tableau + connexion quotidienne */
.sSerie57{display:block!important;padding:14px 14px 12px!important}
.sSerie57 .srTete{display:flex;align-items:center;gap:12px}
.sSerie57 .srTete .grow{min-width:0}
.sSerie57 .srGrille{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-top:12px}
.sSerie57 .srC{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px 0 6px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1.5px solid var(--ligne);color:var(--doux);min-width:0}
.sSerie57 .srJ{font:800 10px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.02em;text-transform:none}
.sSerie57 .srIco{position:relative;display:grid;place-items:center;height:20px}
.sSerie57 .srI{width:19px;height:19px;color:#6fbdff}
.sSerie57 .srI.coin{width:17px;height:17px}
.sSerie57 .srB{position:absolute;right:-9px;top:-6px;font:800 9px/1 "Barlow","Public Sans",sans-serif;color:#ffd75e}
.sSerie57 .srV{font:800 10.5px/1 "Barlow","Public Sans",sans-serif;color:var(--texte);white-space:nowrap;text-transform:none}
.sSerie57 .srC.sp{border-color:color-mix(in srgb,#ffcc4d 45%,var(--ligne));background:rgba(255,204,77,.07)}
.sSerie57 .srC.sp .srI{color:#ffcc4d}
.sSerie57 .srC.fait{background:rgba(61,220,132,.12);border-color:rgba(61,220,132,.45)}
.sSerie57 .srC.fait .srI,.sSerie57 .srC.fait .srV{opacity:.55}
.sSerie57 .srOk{position:absolute;top:-6px;right:-5px;width:16px;height:16px;border-radius:50%;background:#3ddc84;color:#04200f;font:800 10px/16px "Barlow","Public Sans",sans-serif;text-align:center}
.sSerie57 .srC.cur{border-color:#6fbdff;background:rgba(111,189,255,.14);box-shadow:0 0 0 3px rgba(111,189,255,.18)}
.sSerie57 #srBtn57,.sCo57 #coBtn57{flex:none;min-height:32px!important;padding:0 14px!important}
.sSerie57 .sObt.fait,.sCo57 .sObt.fait{opacity:.55}
.sSerie57 .grow b,.sSerie57 .grow small,.sCo57 .grow b,.sCo57 .grow small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
/* petit message du bas : au-dessus du gros bouton rond (il passait derrière) */
.ptoast{bottom:112px!important}
html.pc57 .sSerie57 .srGrille{gap:10px}
html.pc57 .sSerie57 .srC{padding:12px 0 10px}
html.pc57 .sSerie57 .srJ{font-size:13px}html.pc57 .sSerie57 .srV{font-size:14px}html.pc57 .sSerie57 .srI{width:26px;height:26px}html.pc57 .sSerie57 .srIco{height:28px}

/* historique : barre de recherche (mêmes styles que celle de la collection) + bouton « Catégories » à côté de « Trier » */
.hRech57{margin:0 0 10px!important;z-index:auto}
.rSugg.rSuggFixe{position:fixed;right:auto;z-index:310}

#fond57{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;container-type:size;
  background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);background-size:30px 30px;background-position:-1px -1px}
#fond57 .o{position:absolute;left:0;top:0;width:115cqmax;height:115cqmax;border-radius:50%;will-change:transform;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
#fond57 .o1{width:95cqmax;height:95cqmax;background:radial-gradient(circle,rgba(60,150,240,.5) 0,rgba(47,134,218,.2) 30%,transparent 62%);animation-name:orbe57a;animation-duration:19s}
#fond57 .o2{width:80cqmax;height:80cqmax;background:radial-gradient(circle,rgba(150,205,255,.36) 0,rgba(90,160,255,.14) 30%,transparent 62%);animation-name:orbe57b;animation-duration:24s}
@keyframes orbe57a{0%{transform:translate(calc(18cqw - 50%),calc(14cqh - 50%))}25%{transform:translate(calc(78cqw - 50%),calc(26cqh - 50%))}50%{transform:translate(calc(66cqw - 50%),calc(74cqh - 50%))}75%{transform:translate(calc(22cqw - 50%),calc(62cqh - 50%))}100%{transform:translate(calc(84cqw - 50%),calc(86cqh - 50%))}}
@keyframes orbe57b{0%{transform:translate(calc(84cqw - 50%),calc(80cqh - 50%))}25%{transform:translate(calc(26cqw - 50%),calc(66cqh - 50%))}50%{transform:translate(calc(18cqw - 50%),calc(22cqh - 50%))}75%{transform:translate(calc(74cqw - 50%),calc(18cqh - 50%))}100%{transform:translate(calc(40cqw - 50%),calc(44cqh - 50%))}}
#fond57 .pt{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:.35;animation:pt57 var(--d) ease-in-out infinite alternate}
@keyframes pt57{from{opacity:.12}to{opacity:.5}}
@media (prefers-reduced-motion:reduce){#fond57 .o,#fond57 .pt{animation:none}}
/* tous les écrans laissent voir ce fond */
main#ecran{position:relative;z-index:1;background:transparent!important}
nav.bar{z-index:100!important}
#catalogue{background:transparent!important}
#catalogue .hero,#catalogue.detail .hero{background:transparent!important;box-shadow:none!important}
.heroRays{opacity:.5!important}
.screen.pl iframe{background:transparent!important}
/* le catalogue est maintenant transparent : l'écran d'ouverture (déjà prêt derrière) reste invisible tant que le catalogue est affiché,
   et les deux se croisent en fondu (250 ms) */


.rech57 .rTexte{box-sizing:border-box!important;height:100%!important}
.rech57 .rMode{display:inline-flex;align-items:center;gap:5px;padding:0 8px 0 10px}
.rech57 .rMode .rChev{width:12px;height:12px;flex:none}
/* l'ancien quadrillage du bandeau « En vente » se superposait au nouveau fond : retiré */
.mhead::before{display:none!important}
/* écran Cartes : le halo et les rayons ne cachent plus les lueurs du fond */
.heroRays::after{opacity:.35}
.heroRays{opacity:.4!important}
/* icône Dragos de l'en-tête : une seule couleur (bleu), lisible en sombre comme en clair */
.porte>svg.ic{color:var(--bleu)!important}
/* ---------- thème clair : gris très léger, textes plus foncés, lueurs grises ---------- */
.phone:not([data-theme="sombre"]){--fond:#ffffff;--survol:#eef1f4;--ligne:#dde2e8;--doux:#5f6873}
.phone:not([data-theme="sombre"]) #fond57{background-image:linear-gradient(rgba(20,30,45,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(20,30,45,.075) 1px,transparent 1px)}
.phone:not([data-theme="sombre"]) #fond57 .o1{background:radial-gradient(circle,rgba(118,126,138,.22) 0,rgba(118,126,138,.09) 32%,transparent 64%)}
.phone:not([data-theme="sombre"]) #fond57 .o2{background:radial-gradient(circle,rgba(140,148,160,.22) 0,rgba(140,148,160,.09) 30%,transparent 62%)}
.phone:not([data-theme="sombre"]) #fond57 .pt{background:#7a838f}
.phone:not([data-theme="sombre"]) .hero h2{background-image:linear-gradient(180deg,#1f2731 30%,#56606c)!important}
.phone:not([data-theme="sombre"]) #catalogue .heroTxt>.kicker,.phone:not([data-theme="sombre"]) .heroInfo{color:#6a737e!important}
.phone:not([data-theme="sombre"]) #catalogue .hero p{color:#3f4853!important}
.phone:not([data-theme="sombre"]) .chances{background:rgba(245,247,250,.8)!important;box-shadow:inset 0 0 0 1px rgba(20,30,45,.08)}
.phone:not([data-theme="sombre"]) .chances .kicker{color:#6a737e!important}
.phone:not([data-theme="sombre"]) .ch em{color:#2c343e!important}
.phone:not([data-theme="sombre"]) .ch .b{background:rgba(20,30,45,.09)!important}
.phone:not([data-theme="sombre"]) .catBtns .heroBtn2{color:#1f2731!important;border-color:rgba(20,30,45,.2)!important;background:rgba(255,255,255,.5)!important}
.phone:not([data-theme="sombre"]) .heroRays{background:repeating-conic-gradient(rgba(110,118,130,.16) 0 6deg,transparent 6deg 24deg)!important}
.phone:not([data-theme="sombre"]) .heroRays::after{background:radial-gradient(circle,rgba(150,158,170,.35) 0%,rgba(150,158,170,.15) 30%,transparent 62%)!important}

/* l'ancien quadrillage (44 px) du panneau « Jeux vidéo » se superposait au nouveau : retiré */
.hero::before{display:none!important}
.heroRays{opacity:.28!important}
.heroRays::after{opacity:.2}
/* icône des boosters de l'en-tête : la même que celle des boosters gratuits */
.stockH>svg.ic57b{width:26px!important;height:26px!important;margin-right:4px!important;overflow:visible;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
html.pc57 .stockH>svg.ic57b{width:32px!important;height:32px!important}
/* succès : jour 7 = l'icône des boosters et « ×3 » */
.sSerie57 .srI.bst{width:24px;height:24px}
.sSerie57 .srIco{height:24px}
.sGrp57{color:var(--bleu)!important}

/* le fond (grille + lueurs) couvre toute la fenêtre, quelle que soit sa taille ; le jeu est posé dessus */
body{background:#ffffff!important}
body:has(>.phone[data-theme="sombre"]){background:#12161C!important}
#fond57{position:fixed!important;inset:0!important;z-index:0!important;background-size:calc(30px * var(--z57,1)) calc(30px * var(--z57,1))!important}
.phone{background:transparent!important;z-index:1}
body:has(>.phone:not([data-theme="sombre"])) #fond57{background-image:linear-gradient(rgba(20,30,45,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(20,30,45,.075) 1px,transparent 1px)}
body:has(>.phone:not([data-theme="sombre"])) #fond57 .o1{background:radial-gradient(circle,rgba(118,126,138,.22) 0,rgba(118,126,138,.09) 32%,transparent 64%)}
body:has(>.phone:not([data-theme="sombre"])) #fond57 .o2{background:radial-gradient(circle,rgba(140,148,160,.22) 0,rgba(140,148,160,.09) 30%,transparent 62%)}
body:has(>.phone:not([data-theme="sombre"])) #fond57 .pt{background:#7a838f}

/* écran Cartes ↔ ouverture du booster : la page qui part glisse un peu vers le bas en s'effaçant, puis l'autre apparaît en douceur */
/* v57f : courbes adoucies — la page qui part s'efface vite et glisse doucement vers le bas ; celle qui arrive monte et se pose en ralentissant */
#catalogue{transform:none;transition:opacity .3s cubic-bezier(.2,0,.2,1),transform .42s cubic-bezier(.2,.75,.25,1),visibility 0s linear 0s!important}
#catalogue.cache{opacity:0!important;transform:translateY(14px)!important;visibility:hidden;pointer-events:none;
  transition:opacity .2s cubic-bezier(.2,0,.4,1),transform .26s cubic-bezier(.45,0,.6,1),visibility 0s linear .26s!important}
#fBoost{opacity:1;transform:none;transition:opacity .3s cubic-bezier(.2,0,.2,1),transform .42s cubic-bezier(.2,.75,.25,1)!important}
#fBoost:not(.vu57){opacity:0!important;transform:translateY(14px)!important;pointer-events:none;transition:opacity .18s cubic-bezier(.2,0,.4,1),transform .24s cubic-bezier(.45,0,.6,1)!important}

/* puces de rareté : pendant l'appui, le contour reste entier et rien ne dépasse (l'arc-en-ciel reste dans la puce) */
.gcBtn.gcOv{overflow:hidden}
.gcBtn.gcOv.gcOn{overflow:visible!important;clip-path:inset(0 round var(--gbRad,0px))}
/* UR et L : l'arc-en-ciel passe en continu, deux bandes qui se suivent en boucle */
.chips button[data-r="ur"][aria-pressed="true"]::after,.chips button[data-r="l"][aria-pressed="true"]::after{
  inset:-2px auto -2px -60px!important;width:calc(100% + 64px)!important;
  background:repeating-linear-gradient(105deg,transparent 0 14px,#ff3b5c 17px,#ff9a2e 20px,#ffe94a 23px,#4dff8a 26px,#36d6ff 29px,#6a7bff 32px,#d65aff 35px,transparent 38px 56px)!important;
  animation:arc57 .9s linear infinite!important}
@keyframes arc57{from{transform:translateX(0)}to{transform:translateX(57.98px)}}
@media (prefers-reduced-motion:reduce){.chips button[aria-pressed="true"]::after{animation:none!important}}

/* icône des boosters : une seule couleur (bleu) */
.stockH>svg.ic57b{filter:none!important;color:var(--bleu)!important}
.sSerie57 .srI.bst{color:var(--bleu)!important}

/* ---------- transition Cartes ↔ booster : très fluide ---------- */
#fBoost:not(.vu57):not(.pret57){visibility:hidden}
#catalogue,#fBoost{backface-visibility:hidden}
/* appui doux sur les boutons de l'écran principal : le fond s'enfonce doucement (97 %) et remonte sans rebond */
.catBtns .gcBtn{--gcRel:300}
.catBtns .gcBtn::before{transition:transform .28s cubic-bezier(.25,.8,.3,1)!important}
.catBtns .gcBtn.gcBas::before{transform:scale(.97)!important;transition:transform .16s cubic-bezier(.3,.6,.35,1)!important}

/* ---------- en-tête mobile : rien ne se touche, icônes plus proches de leur texte ---------- */
html:not(.pc57) .top{padding-left:10px!important;padding-right:4px!important;gap:6px!important}html:not(.pc57) .top .btns{gap:6px!important}html:not(.pc57) .stockH{padding:0 10px 0 8px!important;gap:0!important}html:not(.pc57) .stockH>svg.ic57b{width:22px!important;height:22px!important;margin-right:4px!important}html:not(.pc57) .stockH .t{margin-left:7px!important;gap:4px!important}html:not(.pc57) .stockH .t .sep{margin:0 3px 0 0!important}html:not(.pc57) .stockH .t>svg{width:13px!important;height:13px!important}html:not(.pc57) .porte{width:104px!important;padding:0 2px 0 7px!important;gap:4px!important}html:not(.pc57) .porte>svg.ic{width:20px!important;height:20px!important}html:not(.pc57) #plusDragos{width:24px!important}html:not(.pc57) #menuBtn{width:36px!important}html:not(.pc57) /* chiffres collés à leur icône (la place réservée pour « 10:00 » reste à droite,html:not(.pc57) rien ne bouge quand le chiffre change) */
  #stockC+.chfv,html:not(.pc57) #pieces+.chfv{justify-content:flex-start!important}html:not(.pc57) #plusDragos{margin-left:auto!important}


/* ---------- panneau des chances : lignes, barres et pourcentages plus serrés ---------- */
html:not(.pc57) .chances{padding:7px 10px 3px!important;margin-top:8px!important}html:not(.pc57) .chances .kicker{margin-bottom:5px!important}html:not(.pc57) .ch{grid-template-columns:112px 1fr 31px!important;gap:8px!important;margin-bottom:4px!important}

html.pc57 .ch{grid-template-columns:160px 1fr 52px!important;gap:12px!important;margin-bottom:9px!important}
html.pc57 .chances .kicker{margin-bottom:12px!important}

/* ---------- PC : la barre du haut ne fait plus toute la largeur : une barre arrondie, posée et centrée ---------- */
html.pc57 .top{width:min(1200px,calc(100% - 48px))!important;margin:14px auto 0!important;height:64px!important;border-radius:20px!important;
  padding:0 14px 0 14px!important;box-sizing:border-box;align-self:center;
  background:color-mix(in srgb,var(--panneau) 80%,transparent)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.22),inset 0 0 0 1px var(--ligne)!important;border-bottom:0!important}
html.pc57 .top h1.logo{height:64px!important}
/* version ordinateur sur un écran en hauteur (téléphone) : les cartes en grand au-dessus, le texte dessous, le tout centré dans la hauteur */
html.haut57 #catalogue.detail .hero{grid-template-columns:minmax(0,1fr)!important;align-content:center!important;align-items:center!important;
  justify-items:center!important;row-gap:40px!important;padding:24px 80px 40px!important}
html.haut57 #catalogue .eventail{height:600px!important;width:100%!important;max-width:864px!important;align-self:auto!important}
html.haut57 #catalogue .heroTxt{width:100%!important;max-width:864px!important;align-self:auto!important}

/* ---------- succès : textes, images et boutons alignés ---------- */
.sSerie57{padding:12px 12px 12px!important}
#sListe .row .sJourD{align-items:stretch!important}
#sListe .row .sJourD>.sRec{justify-content:center}
.sSerie57 .srI.coin{width:19px!important;height:19px!important}
.sSerie57 .srI:not(.coin):not(.bst){width:22px!important;height:22px!important}
.sSerie57 .srI.bst{width:23px!important;height:23px!important}
.sSerie57 .srIco{height:24px!important}

/* ---------- v57h : marché — l'étiquette « Achat direct / Enchère · 38 h » passe AU-DESSUS de la carte (elle cachait son nom) ---------- */
#mListe .lot>.badge{position:relative!important;top:auto!important;left:auto!important;right:auto!important;display:flex!important;width:max-content;max-width:100%;align-self:flex-start;margin:0 0 6px!important}
#mListe .lot>.cm{margin-top:0!important}

/* ---------- v57h : retour du booster vers l'écran Cartes — l'écran Cartes reste dessiné (presque invisible) pendant l'ouverture,
   au lieu d'être complètement caché : au retour, rien n'est à redessiner, le panneau des chances ne clignote plus ---------- */
#catalogue.cache{visibility:visible!important;opacity:.01!important}
#catalogue.cache,#catalogue.cache *{pointer-events:none!important}
#catalogue.cache *{animation-play-state:paused!important}

/* ---------- v57h : panneau des chances encore plus serré (cadre, textes, écarts) ---------- */
html:not(.pc57) .chances{padding:6px 9px 4px!important;margin-top:6px!important}html:not(.pc57) .chances .kicker{font-size:10.5px!important;margin-bottom:3px!important}html:not(.pc57) .ch{grid-template-columns:106px 1fr 28px!important;gap:6px!important;margin-bottom:2px!important}html:not(.pc57) .ch>i{font-size:12px!important}html:not(.pc57) .ch>em{font-size:11.5px!important}

/* menu : le 8e bouton (« Installer l'appli » ajouté en premier) suit la même cascade */
.panel.open#menuPanel button:nth-child(8){animation-delay:.28s}

/* ---------- marché : étiquette + montant en haut, plus rien sous le nom ---------- */
#mListe .lot>.haut57{display:flex;align-items:center;justify-content:space-between;gap:4px;height:24px;box-sizing:border-box;margin:0 0 7px;padding:0 3px 0 9px;border-radius:999px;
  background:rgba(4,10,20,.72);color:#fff;font:700 11px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.02em;white-space:nowrap;min-width:0}
#mListe .lot>.haut57 .et57{min-width:0;overflow:hidden;text-overflow:ellipsis}
#mListe .lot>.haut57 .mt57{flex:none;display:inline-flex;align-items:center;gap:3px;height:18px;box-sizing:border-box;padding:0 6px 0 5px;border-radius:999px;background:rgba(255,255,255,.14);font:700 12px/1 "Barlow","Public Sans",sans-serif}
#mListe .lot>.haut57 .mt57 svg{width:12px;height:12px;flex:none;display:block}
#mListe .lot>.haut57.ench{background:#ffb35c;color:#2a1600}
#mListe .lot>.haut57.ench .mt57{background:rgba(0,0,0,.13)}
#mListe .lot>.haut57.tete{background:#3ddc84;color:#04200f}
#mListe .lot>.haut57.dep{background:#ff5a6e;color:#fff}
#mListe .lot>.haut57.dep .mt57{background:rgba(255,255,255,.2)}
#mListe .lot .nom57{display:flex;align-items:baseline;justify-content:space-between;gap:6px;min-width:0;margin-top:8px}
#mListe .lot .nom57>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mListe .lot .nom57>.par57{flex:none;font:700 10.5px/1 "Barlow","Public Sans",sans-serif;opacity:.72;white-space:nowrap}
#mListe .lot .nom57>.moi57{color:#6fbdff;opacity:1}
#mListe .lot>.cm{margin-top:0!important}
/* même taille réservée que la vraie case (avant : 282 px réservés pour 268 px réels → petit saut au défilement) */
#mListe .lot{contain-intrinsic-size:auto 246px}
html.pc57 #mListe .lot{contain-intrinsic-size:auto 376px}
html.pc57 #mListe .lot>.haut57{height:30px;padding:0 4px 0 13px;font-size:13.5px;margin-bottom:9px}
html.pc57 #mListe .lot>.haut57 .mt57{height:22px;padding:0 8px 0 6px;font-size:14.5px;gap:4px}
html.pc57 #mListe .lot>.haut57 .mt57 svg{width:14px;height:14px}
html.pc57 #mListe .lot .nom57>.par57{font-size:12.5px}

/* ---------- puces de rareté : la lueur apparaît en même temps que la couleur (elle attendait la fin de l'appui) ---------- */
#chips button.gcBtn.gcOn[aria-pressed="true"],#fCorps .fchips button.gcBtn.gcOn[aria-pressed="true"]{box-shadow:0 0 12px color-mix(in srgb,var(--k) 65%,transparent)!important}
/* UR et L : UNE seule bande arc-en-ciel lumineuse qui traverse la puce (comme la bande blanche des SR), dès le clic */
.chips button[data-r="ur"][aria-pressed="true"]::after,.chips button[data-r="l"][aria-pressed="true"]::after{
  inset:-2px!important;width:auto!important;
  /* une bande nette (cœur blanc) + un halo arc-en-ciel plus large autour : elle brille sans tout délaver */
  background:linear-gradient(105deg,transparent 30%,#ff3b5c 36%,#ff9a2e 40%,#ffe94a 44%,#fff 48.5%,#4dff8a 53%,#36d6ff 57%,#6a7bff 61%,#d65aff 65%,transparent 71%),
    linear-gradient(105deg,transparent 14%,rgba(255,80,160,.38) 28%,rgba(255,230,120,.38) 40%,rgba(120,255,200,.38) 56%,rgba(120,140,255,.38) 70%,transparent 86%)!important;
  mix-blend-mode:normal!important;opacity:.9!important;filter:blur(1.1px) saturate(1.4)!important;
  transform:translateX(-110%);animation:arcUn57 2.2s cubic-bezier(.45,.05,.4,1) -.32s infinite!important}
@keyframes arcUn57{0%{transform:translateX(-110%)}60%,100%{transform:translateX(110%)}}
.chips button[data-r="ur"][aria-pressed="true"],.chips button[data-r="l"][aria-pressed="true"],
#chips button[data-r="ur"].gcBtn.gcOn[aria-pressed="true"],#chips button[data-r="l"].gcBtn.gcOn[aria-pressed="true"]{
  box-shadow:0 0 12px color-mix(in srgb,var(--k) 70%,transparent),0 0 20px rgba(255,140,210,.28),0 0 28px rgba(110,170,255,.22)!important}

/* ---------- écran Cartes pendant l'ouverture d'un booster : vraiment invisible (on le devinait derrière) ---------- */
#catalogue.cache{opacity:.001!important}

/* ---------- champs de recherche : le texte d'aide posé par-dessus, jamais coupé ---------- */
.rTexte::placeholder{color:transparent!important;opacity:0!important}
.rBar{position:relative}
.rPh57{position:absolute;top:0;left:0;margin:0;padding:0;pointer-events:none;white-space:nowrap;z-index:2;color:color-mix(in srgb,currentColor 46%,transparent)}
.rPh57[hidden]{display:none!important}

/* ---------- paramètres : toutes les lignes à la même hauteur ---------- */
section[data-screen="reglages"] .row{min-height:56px;box-sizing:border-box;padding-top:8px!important;padding-bottom:8px!important}
section[data-screen="reglages"] .row>.chev{display:flex!important;align-items:center;align-self:center;line-height:0}
section[data-screen="reglages"] .row>.chev svg{width:4px;height:6px;display:block}

/* ---------- écran de connexion : « Récupérer mon compte » ---------- */
#gate .gb.gbR57{background:rgba(255,255,255,.1)!important;color:#fff!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)!important}
#gate .gbN57{margin-top:2px;opacity:.9}

/* ---------- écran Cartes : page beaucoup plus légère pour la carte graphique du téléphone ----------
   Les faisceaux tournants derrière les cartes étaient dessinés sur un carré de 1 800 px (≈ 120 Mo de mémoire graphique à lui seul
   sur un téléphone, deux fois) alors qu'on n'en voit qu'un rond de 430 px : même dessin, carré de 880 px.
   C'est ce manque de mémoire qui faisait clignoter les textes, les pastilles et les boutons sur téléphone. */
.heroRays{width:880px!important;height:880px!important;margin:-440px 0 0 -440px!important;
  -webkit-mask:radial-gradient(circle 433px,#000 0,transparent 433px)!important;mask:radial-gradient(circle 433px,#000 0,transparent 433px)!important}
/* pendant l'ouverture d'un booster, l'écran Cartes (caché derrière) ne dessine plus ses faisceaux */
#catalogue.cache .heroRays{visibility:hidden!important;transition:visibility 0s linear .26s}

/* ---------- puces de rareté : lueur bien visible, présente dès que la couleur apparaît ; la lumière part tout de suite ---------- */
.chips button[aria-pressed="true"],#chips button.gcBtn[aria-pressed="true"],#chips button.gcBtn.gcOn[aria-pressed="true"],#fCorps .fchips button.gcBtn[aria-pressed="true"]{
  box-shadow:0 0 14px 1px color-mix(in srgb,var(--k) 80%,transparent),0 0 30px 2px color-mix(in srgb,var(--k) 42%,transparent)!important;transition:none!important}
.chips button[aria-pressed="true"]::after{animation-delay:-.32s!important}
/* UR et L : leur couleur + un halo arc-en-ciel autour */
.chips button[data-r="ur"][aria-pressed="true"],.chips button[data-r="l"][aria-pressed="true"],
#chips button[data-r="ur"].gcBtn[aria-pressed="true"],#chips button[data-r="l"].gcBtn[aria-pressed="true"],
#chips button[data-r="ur"].gcBtn.gcOn[aria-pressed="true"],#chips button[data-r="l"].gcBtn.gcOn[aria-pressed="true"]{
  box-shadow:0 0 14px 1px color-mix(in srgb,var(--k) 85%,transparent),-10px 0 26px rgba(255,90,140,.38),10px 0 26px rgba(90,170,255,.38),0 0 34px 3px rgba(255,230,120,.22)!important}

/* ---------- recherche de la collection : « Nom ▾ » / « Catégorie ▾ » : le mot au milieu exact du bouton, la flèche collée à droite ---------- */
.rech57 .rMode{position:relative!important;justify-content:center!important;padding:0 21px!important;gap:0!important}
.rech57 .rMode .rChev{position:absolute!important;right:7px;top:0!important;bottom:0!important;margin:auto 0!important}
html.pc57 .rech57 .rMode{padding:0 27px!important}
html.pc57 .rech57 .rMode .rChev{right:10px}
/* menu Nom / Catégorie : chaque mot au milieu de sa case, la coche reste à gauche */
.gcMenu button{position:relative;justify-content:center!important;text-align:center!important;padding:0 36px!important}
.gcMenu button .ck{position:absolute!important;left:10px;top:0!important;bottom:0!important;margin:auto 0!important}

/* ---------- marché : le haut de « Enchère » n'est plus coupé (la ligne était plus basse que les lettres), texte centré au pixel ---------- */
#mListe .lot>.haut57 .et57{line-height:1.6!important;position:relative;top:var(--et57y,0px)}
/* PC : « Ajouter une carte en vente » à sa taille normale (il prenait toute la largeur) */
html.pc57 #mAjout{width:auto!important;max-width:max-content;align-self:flex-start;min-height:44px!important;padding:0 26px!important}

/* ---------- téléphone, écran Cartes : description plus petite, textes plus bas, les cartes du haut gagnent la place ---------- */
html:not(.pc57) #catalogue .heroTxt>p{font-size:10.5px!important;line-height:1.3!important}
html:not(.pc57) #catalogue .heroTxt>.kicker{margin-bottom:7px!important}

/* ---------- plus de « tirer vers le bas pour rafraîchir » (ni le nôtre, ni celui du navigateur) ---------- */
html,body{overscroll-behavior:none!important}

/* ---------- écran Cartes : directement l'ouverture ; l'ancienne page devient le panneau ⓘ ---------- */
#catalogue.sansAnim57,#catalogue.sansAnim57 *{transition:none!important}
/* caché derrière le booster : plus rien n'est dessiné (mémoire graphique libérée) */
#catalogue.cache:not(.info57){visibility:hidden!important}
#info57{position:absolute;left:12px;top:max(12px,env(safe-area-inset-top));z-index:9;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;
  color:var(--bleu,#1B66B5);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s ease}
#info57 svg{width:30px;height:30px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
#info57.cache57{opacity:0;pointer-events:none}
html.pc57 #info57{left:max(24px,calc((100% - 1200px) / 2))}
#voile57{position:absolute;inset:0;z-index:58;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
#voile57.on{opacity:1;visibility:visible;transition:opacity .2s ease}
/* le panneau : l'ancienne page, sans ses boutons (on revient au booster avec ×) */
#catalogue.info57{visibility:visible!important;position:absolute!important;z-index:59!important;left:10px!important;right:10px!important;top:10px!important;bottom:10px!important;
  width:auto!important;height:auto!important;margin:0!important;border-radius:22px!important;overflow:hidden!important;
  background:var(--panneau,#1b222b)!important;box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 0 0 1px var(--ligne,rgba(255,255,255,.1))!important;
  opacity:0!important;transform:translateY(10px) scale(.985)!important;transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.25,1)!important;pointer-events:none!important}
#catalogue.info57.vu57i{opacity:1!important;transform:none!important;pointer-events:auto!important}
#catalogue.info57 *{pointer-events:auto!important;animation-play-state:running!important}
#catalogue.info57 .heroRays{visibility:visible!important}
#catalogue.info57 .catBtns,#catalogue.info57 .heroInfo{display:none!important}
html.pc57 #catalogue.info57{left:50%!important;right:auto!important;width:min(calc(100% - 48px),1000px)!important;transform:translateX(-50%) translateY(10px) scale(.985)!important;top:16px!important;bottom:16px!important}
html.pc57 #catalogue.info57.vu57i{transform:translateX(-50%)!important}
#infoX57{display:none}
#catalogue.info57 #infoX57{display:grid;place-items:center;position:absolute;right:10px;top:10px;z-index:20;width:36px;height:36px;padding:0;border:0;border-radius:50%;
  background:rgba(4,10,20,.55);color:#fff;cursor:pointer}
#catalogue.info57 #infoX57 svg{width:20px;height:20px}
.phone:not([data-theme="sombre"]) #catalogue.info57 #infoX57{background:rgba(20,30,45,.1);color:#1B2733}

/* ---------- puces de rareté : lueur plus douce, et elle arrive EN MÊME TEMPS que la couleur ----------
   (pendant l'animation de fin d'appui, la puce était découpée à sa forme exacte : la lueur, qui dépasse, était coupée
   jusqu'à la fin de l'animation, puis apparaissait d'un coup) */
#chips .gcBtn.gcOv.gcOn[aria-pressed="true"],.fchips .gcBtn.gcOv.gcOn[aria-pressed="true"]{clip-path:none!important;overflow:hidden!important}
.chips button[aria-pressed="true"],#chips button.gcBtn[aria-pressed="true"],#chips button.gcBtn.gcOn[aria-pressed="true"],#fCorps .fchips button.gcBtn[aria-pressed="true"]{
  box-shadow:0 0 10px color-mix(in srgb,var(--k) 60%,transparent)!important}
.chips button[data-r="ur"][aria-pressed="true"],.chips button[data-r="l"][aria-pressed="true"],
#chips button[data-r="ur"].gcBtn[aria-pressed="true"],#chips button[data-r="l"].gcBtn[aria-pressed="true"],
#chips button[data-r="ur"].gcBtn.gcOn[aria-pressed="true"],#chips button[data-r="l"].gcBtn.gcOn[aria-pressed="true"]{
  box-shadow:0 0 10px color-mix(in srgb,var(--k) 62%,transparent),-6px 0 14px rgba(255,90,140,.2),6px 0 14px rgba(90,170,255,.2)!important}

/* ---------- marché : bandeau du haut plus court ---------- */
html:not(.pc57) .mhead{padding:13px 14px 12px!important;gap:10px!important;margin-bottom:10px!important}
html:not(.pc57) .mhead b{font-size:21px!important}
html:not(.pc57) .mhead small{margin-top:4px!important}
html:not(.pc57) #mAjout{min-height:40px!important}

/* ---------- marché : une seule rangée de filtres, boutons sur fond sombre (on les voyait mal sur le fond) ---------- */
#mSousL{display:none!important}
.mFiltres button,.mFiltres .mX57,.mFiltres .mPlus57{background:rgba(4,10,20,.55)!important;border:1.5px solid rgba(255,255,255,.13)!important;color:#e9eef5!important}
.phone:not([data-theme="sombre"]) .mFiltres button{background:rgba(20,30,45,.07)!important;border-color:rgba(20,30,45,.16)!important;color:#1B2733!important}
.mFiltres button[aria-pressed="true"],.phone:not([data-theme="sombre"]) .mFiltres button[aria-pressed="true"]{background:var(--bleu)!important;border-color:var(--bleu)!important;color:#fff!important}
.mFiltres.mises57 button[data-f]{background:rgba(4,10,20,.55)!important;border-color:rgba(255,255,255,.13)!important;color:#e9eef5!important}
.phone:not([data-theme="sombre"]) .mFiltres.mises57 button[data-f]{background:rgba(20,30,45,.07)!important;border-color:rgba(20,30,45,.16)!important;color:#1B2733!important}
.mFiltres .mX57[aria-pressed="true"],.mFiltres .mPlus57[aria-pressed="true"]{background:#ffb35c!important;border-color:#ffb35c!important;color:#2a1600!important}
.mFiltres .mX57{display:none!important;flex:1 1 auto!important;white-space:nowrap}
.mFiltres .mH57{gap:6px}
.mFiltres .mH57 svg{width:16px;height:16px;flex:none;color:#6fbdff}
.mFiltres .mPlus57{flex:none!important;width:36px!important;padding:0!important;display:inline-flex!important}
.mFiltres .mPlus57 svg{width:18px;height:18px;fill:currentColor}
html.pc57 .mFiltres .mX57{display:inline-flex!important}
html.pc57 .mFiltres .mPlus57{display:none!important}
html:not(.pc57) .mFiltres{gap:4px!important}
html:not(.pc57) .mFiltres button[data-f]{padding:0 6px!important;font-size:11px!important}
.mMenu57{min-width:180px}
.mMenu57 button[aria-checked="true"]{background:rgba(255,179,92,.18);color:#fff}

/* ---------- téléphone : fenêtre d'une carte du marché en un seul coup d'œil ----------
   la carte à gauche, ses infos (nom, vendeur, mises, valeur, tes pièces) à droite ; la mise à placer en dessous, sur toute la largeur */
html:not(.pc57) #fCorps .achat{display:grid!important;grid-template-columns:40% minmax(0,1fr);column-gap:12px;row-gap:0;align-items:start}
html:not(.pc57) #fCorps .achat>.vfiche{display:contents!important}
html:not(.pc57) #fCorps .achat>.vfiche>.cm{grid-column:1;grid-row:1 / span 9;width:100%!important;max-width:none!important;margin:0!important;align-self:start}
html:not(.pc57) #fCorps .achat>.vfiche>b,html:not(.pc57) #fCorps .achat>.vfiche>.rr,
html:not(.pc57) #fCorps .achat>.moyenne,html:not(.pc57) #fCorps .achat>.solde{grid-column:2;text-align:left!important;justify-self:stretch;min-width:0}
html:not(.pc57) #fCorps .achat>.vfiche>b{font-size:19px!important;line-height:1.1!important;margin:0 0 3px!important}
html:not(.pc57) #fCorps .achat>.vfiche>.rr{font-size:11.5px!important;line-height:1.25!important;margin:0 0 1px!important}
html:not(.pc57) #fCorps .achat>.moyenne,html:not(.pc57) #fCorps .achat>.solde{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:3px!important;
  margin:7px 0 0!important;padding:7px 10px!important;min-height:0!important;border-radius:12px!important}
html:not(.pc57) #fCorps .achat>.moyenne>span:first-child,html:not(.pc57) #fCorps .achat>.solde>span:first-child{font-size:10.5px!important;line-height:1.2!important;opacity:.8;white-space:normal!important}
html:not(.pc57) #fCorps .achat>.moyenne .prix,html:not(.pc57) #fCorps .achat>.solde .prix{font-size:15px!important}
html:not(.pc57) #fCorps .achat>.lbl,html:not(.pc57) #fCorps .achat>.champ,html:not(.pc57) #fCorps .achat>.manque{grid-column:1 / -1}
html:not(.pc57) #fCorps .achat>.lbl{margin-top:12px!important}

/* ---------- marché : 3 cartes par rangée sur téléphone, cases un peu moins arrondies, la ligne « série · rareté » remonte ---------- */
#mListe .lot{border-radius:16px!important}
#mListe .lot>.rr{margin-top:2px!important}
html:not(.pc57) #mListe{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
html:not(.pc57) #mListe .lot{padding:6px 6px 7px!important;border-radius:13px!important;contain-intrinsic-size:auto 200px!important}
html:not(.pc57) #mListe .lot>.haut57{height:20px!important;margin:0 0 5px!important;padding:0 2px 0 6px!important;font-size:9px!important;gap:2px!important}
html:not(.pc57) #mListe .lot>.haut57 .mt57{height:15px!important;padding:0 4px 0 3px!important;font-size:10px!important;gap:2px!important}
html:not(.pc57) #mListe .lot>.haut57 .mt57 svg{width:9px!important;height:9px!important}
html:not(.pc57) #mListe .lot>.cm{width:calc(100% - 8px)!important;height:auto!important;aspect-ratio:2/3;margin:0 auto 5px!important}
html:not(.pc57) #mListe .lot>.cm img{width:100%!important;height:100%!important}
html:not(.pc57) #mListe .lot .nom57{margin-top:3px!important;gap:3px!important}
html:not(.pc57) #mListe .lot .nom57>b{font-size:12px!important}
html:not(.pc57) #mListe .lot .nom57>.par57{font-size:8.5px!important;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto!important}
html:not(.pc57) #mListe .lot>.rr{font-size:8.5px!important;margin-top:1px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

html:not(.pc57) #mListe .lot>.haut57 .et57{font-family:"Barlow","Public Sans",sans-serif!important;font-size:10px!important;letter-spacing:0!important}
html:not(.pc57) #mListe .lot{padding:5px 5px 7px!important}
html:not(.pc57) #mListe .lot>.haut57{padding:0 2px 0 5px!important}

html:not(.pc57) #mListe .lot>.rr{font-size:8px!important;letter-spacing:0!important}

html:not(.pc57) #fCorps .achat>.vfiche>.cm{order:0}
html:not(.pc57) #fCorps .achat>.vfiche>b,html:not(.pc57) #fCorps .achat>.vfiche>.rr,html:not(.pc57) #fCorps .achat>.moyenne,html:not(.pc57) #fCorps .achat>.solde{order:1}
html:not(.pc57) #fCorps .achat>.lbl,html:not(.pc57) #fCorps .achat>.champ,html:not(.pc57) #fCorps .achat>.manque{order:2}
html:not(.pc57) #fCorps .achat>.solde{background:rgba(255,255,255,.05)}
/* panneau ⓘ : il s'arrête au-dessus du bouton central de la barre du bas */
html:not(.pc57) #catalogue.info57{bottom:30px!important}

/* tant qu'on n'est pas connecté avec Discord, on ne peut rien toucher d'autre : l'écran de connexion passe au-dessus de tout
   (la barre du bas restait cliquable par-dessus) */
#gate{z-index:2000!important}
#gate.ferme{pointer-events:none!important}
/* boutons de l'écran de connexion : au clic, seul le fond bouge, le texte reste fixe (avant, tout le bouton descendait de 2 px) */
#gate .gb:active{transform:none!important}
#gate .gb{position:relative;max-width:300px!important}
#gate .gb{display:flex!important;align-items:center;justify-content:center}
#gate .gb .gbT57{white-space:nowrap}
#gate .gb .dsc57{position:absolute!important;left:18px;top:0!important;bottom:0!important;margin:auto 0!important;width:24px;height:24px;display:block;pointer-events:none}

/* historique en grand : centré entre l'en-tête et la barre du bas */
#feuille.hGrand57{max-height:none!important}

/* boutique : les dessins des packs */
.bqP .bqPile.ill57{display:block}
.bqP .bqPile.ill57 svg.bqIll{position:static!important;display:block;width:100%;height:100%;filter:none!important;overflow:visible}
.bqP.bqTop .bqPile.ill57{width:132px!important;height:80px!important}

.bqP .bqPile.ill57{height:76px!important}
/* panneau ⓘ : les rayons apparaissent en même temps que tout le reste (ils attendaient la fin d'un délai de 0,26 s) */
#catalogue.info57 .heroRays{transition:none!important}
/* panneau ⓘ (téléphone) : tout le contenu descend un peu, sans changer de taille ; les lignes des chances un peu plus espacées */
html:not(.pc57) #catalogue.info57 .hero{transform:translateY(22px)}
#catalogue.info57 #chances .ch{margin-bottom:5px!important}
#catalogue.info57 #chances .ch:last-child{margin-bottom:0!important}

.bqP .bqPile.ico57{display:grid!important;place-items:center}
.bqP .bqPile.ico57 .bqIco57{position:static!important;width:46px;height:46px;display:block;filter:drop-shadow(0 3px 8px rgba(27,102,181,.55))!important}
.bqP.bqTop .bqPile.ico57 .bqIco57{width:60px;height:60px}

#abo57{cursor:pointer}
/* ---------- page Abonnement ---------- */
#feuille.abo57 .ab57{display:flex;flex-direction:column;gap:10px}
.ab57 .abEt57{font-size:13.5px;font-weight:600;line-height:1.4;opacity:.85;margin:0}
.ab57 .abEt57 b{opacity:1}
.abPer57{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:rgba(127,140,160,.16)}
.abPer57 button{border:0;border-radius:999px;min-height:36px;font:800 12.5px/1.1 "Barlow","Public Sans",sans-serif;background:transparent;color:inherit;cursor:pointer;padding:0 8px}
.abPer57 button[aria-pressed=true]{background:#6fbdff;color:#06121f}
.abC57{border-radius:18px;padding:14px 14px 14px;display:flex;flex-direction:column;gap:8px}
.abC57 .abH57{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.abC57 .abH57 b{font-size:22px;font-weight:900;line-height:1}
.abC57 .abPx57{font-size:17px;font-weight:900;white-space:nowrap}
.abC57 .abPx57 small{font-size:12px;font-weight:700;opacity:.8}
.abC57 ul{margin:0;padding:0 0 0 18px;font-size:13px;font-weight:600;line-height:1.45}
.abC57 .abGo57{width:100%;min-height:44px;margin-top:2px}
.abC57 .abGo57[disabled]{opacity:.6}
.abC57.abhacker{background:linear-gradient(160deg,#5dffa8,#16c784 55%,#0ea5a0);color:#032b1c;box-shadow:0 8px 24px rgba(40,230,140,.3)}
.abC57.abhacker .abGo57{background:#032b1c!important;color:#5dffa8!important}
.abC57.abpro{background:linear-gradient(160deg,#2a7fd6,#124b8c);color:#fff;box-shadow:0 8px 24px rgba(42,127,214,.3)}
.abC57.abpro .abGo57{background:#fff!important;color:#124b8c!important}
.abC57.abnoob{background:rgba(127,140,160,.14);box-shadow:inset 0 0 0 1.5px rgba(127,140,160,.35)}
.abC57.cur{outline:3px solid #ffd45c;outline-offset:-1px}
.ab57 .abNote57{font-size:11.5px;font-weight:600;opacity:.6;text-align:center;margin:2px 0 0}
/* « Résilier » : tout en bas, simple, sans pression */
.ab57 .abRes57{margin:6px auto 4px;background:none;border:0;color:#ff5a5a;font:800 14px/1 "Barlow","Public Sans",sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px 14px}
.ab57 .abAlerte57{margin:0;padding:12px 14px;border-radius:14px;background:rgba(255,77,77,.14);box-shadow:inset 0 0 0 1.5px rgba(255,90,90,.5);font-size:14px;font-weight:600;line-height:1.4}
/* ---------- écran de connexion : récupérer son compte ---------- */
#gate.rec57>:not(#recup57):not(.gl){display:none!important}
#recup57{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
#recup57[hidden]{display:none!important}
#recup57 h2{font-size:22px;font-weight:900;margin:0}
#recup57 p{margin:0}
#recup57 .cpt57{display:flex;gap:8px;justify-content:center;margin:4px 0 6px}
#recup57 .cpt57 span{display:flex;flex-direction:column;align-items:center;justify-content:center;width:62px;height:64px;border-radius:14px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.95}
#recup57 .cpt57 b{font-size:26px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:3px}
#recup57 .gb{width:100%}
#gate #recup57 .gb.recNon57{background:transparent!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)!important;color:#fff!important}
#recup57 small{max-width:280px;line-height:1.35;opacity:.8}

.durees{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.dur57,.frais57{margin:7px 0 0;font:800 11px/1.3 "Barlow","Public Sans",sans-serif;color:var(--doux);text-align:center}
.frais57{text-align:left;margin-top:6px}
/* ---------- badge et pseudo en couleur ---------- */
.bdg57{width:1.05em;height:1.05em;vertical-align:-.16em;margin-left:.3em;display:inline-block;flex:none}
.ps57p{color:var(--c1)!important}
.ps57h{background:linear-gradient(100deg,var(--c1) 0 38%,var(--c2) 50%,var(--c1) 62% 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;
  animation:ps57 2.8s linear infinite;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c2) 55%,transparent))}
@keyframes ps57{0%{background-position:100% 0}100%{background-position:-160% 0}}
#pNom{display:flex;align-items:center;justify-content:center;gap:0}
.pBan.ban57{background-color:#0b1018}
/* ---------- « Modifier le profil » : couleur du pseudo, bannière ---------- */
#sty57 .psA57{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:14px;background:rgba(127,140,160,.14);font:800 22px/1 "Barlow","Public Sans",sans-serif;margin-bottom:8px}
#sty57 .nuT57{display:block;font:800 11.5px/1.2 "Barlow","Public Sans",sans-serif;color:var(--doux);margin:6px 0 5px}
.nu57{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
.nu57 button{aspect-ratio:1;border-radius:50%;border:0;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18);padding:0}
.nu57 button[aria-pressed=true]{box-shadow:0 0 0 2.5px var(--fond),0 0 0 4.5px var(--c)}
.lock57{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(127,140,160,.12);font:700 12.5px/1.3 "Barlow","Public Sans",sans-serif;color:var(--doux)}
.lock57 svg{width:18px;height:18px;flex:none}
.lock57 span{flex:1}
.lock57 .btn{min-height:34px!important;padding:0 14px!important;width:auto!important;flex:none}
.ban57e{display:flex;flex-direction:column;gap:8px}
.banV57{height:74px;border-radius:14px;background:rgba(127,140,160,.14) center/cover no-repeat;display:grid;place-items:center;font:700 12px/1 "Barlow","Public Sans",sans-serif;color:var(--doux)}
.banB57{display:flex;gap:8px}
.banB57 .btn{flex:1;min-height:40px;cursor:pointer}
/* ---------- la fenêtre des abonnements ---------- */
#aboO57{position:absolute;inset:0;z-index:1900;display:flex;flex-direction:column;color:#e9eef5;opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .22s,transform .22s;
  background:radial-gradient(70% 30% at 10% 0%,rgba(111,189,255,.25),transparent 70%),radial-gradient(70% 30% at 95% 2%,rgba(40,230,140,.2),transparent 70%),
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),#0b1018;background-size:auto,auto,28px 28px,28px 28px,auto}
#aboO57.on{opacity:1;pointer-events:auto;transform:none}
.phone:has(#aboO57.on) .ptoast{z-index:1950}
#aboO57 .aoTete57{flex:none;display:flex;align-items:center;justify-content:center;position:relative;height:56px;font:800 18px/1 "Barlow","Public Sans",sans-serif}
#aboO57 .aoX57{position:absolute;right:10px;top:8px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer}
#aboO57 .aoX57 svg{width:20px;height:20px}
#aboO57 .aoCorps57{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 12px 28px}
#aboO57 .aoEt57{margin:0 2px 10px;font:600 12.5px/1.4 "Barlow","Public Sans",sans-serif;color:#b8c7d8;text-align:center}
#aboO57 .aoEt57 b{color:#fff}
#aboO57 .abPer57{background:rgba(255,255,255,.08);margin-bottom:14px}
#aboO57 .abPer57 button{color:#dbe6f2}
#aboO57 .abPer57 button[aria-pressed=true]{color:#06121f}
.aoPlans57{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:14px 0 4px}
.aoPlans57 .aoVideL57{display:none}
.aoC57{position:relative;border-radius:16px;padding:12px 6px 8px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.aoC57 .aoN57{font:800 19px/1 "Barlow","Public Sans",sans-serif;margin-bottom:5px}
.aoC57 .aoPx57{font:800 16px/1 "Barlow","Public Sans",sans-serif}
.aoC57 small{font:700 10.5px/1.2 "Barlow","Public Sans",sans-serif;opacity:.8;margin-bottom:8px}
.aoC57 .aoGo57{width:100%;min-height:36px!important;padding:0 4px!important;font-size:11.5px!important;margin-top:auto}
.aoC57 .aoGo57[disabled]{opacity:1!important;background:rgba(255,255,255,.18)!important;color:inherit!important;box-shadow:none!important}
.aoC57 .aoVide57{display:block;min-height:36px;font:700 10px/36px "Barlow","Public Sans",sans-serif;opacity:.6}
.aoC57.aonoob{background:linear-gradient(160deg,#3a4656,#232c38);box-shadow:inset 0 0 0 1.5px rgba(200,215,230,.35)}
.aoC57.aopro{background:linear-gradient(160deg,#2a7fd6,#124b8c);box-shadow:0 8px 22px rgba(42,127,214,.35),inset 0 0 0 1.5px rgba(159,209,255,.55)}
.aoC57.aopro .aoGo57:not([disabled]){background:#fff!important;color:#124b8c!important}
.aoC57.aohacker{background:linear-gradient(160deg,#5dffa8,#16c784 50%,#0ea5a0);color:#032b1c;box-shadow:0 8px 24px rgba(40,230,140,.35),inset 0 0 0 1.5px rgba(210,255,230,.8)}
.aoC57.aohacker .aoGo57:not([disabled]){background:#032b1c!important;color:#5dffa8!important}
.aoC57.cur{outline:2.5px solid #ffd45c;outline-offset:2px}
.aoC57 .aoTag57{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:#032b1c;color:#5dffa8;font:800 8.5px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.08em;padding:4px 7px;border-radius:999px;white-space:nowrap}
.aoG57{margin:16px 0 7px;display:flex;align-items:center;gap:8px;color:var(--g);font:800 14px/1 "Barlow","Public Sans",sans-serif}
.aoG57 span{display:flex;align-items:center;gap:7px}
.aoG57 span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 10px var(--g)}
.aoG57::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,var(--g),transparent);opacity:.5}
.aoL57{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:9px}
.aoL57 .aoLab57{grid-column:1/-1;font:700 12px/1.25 "Barlow","Public Sans",sans-serif;color:#b8c7d8;padding:0 2px}
.aoV57{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:38px;border-radius:11px;font:800 13.5px/1.15 "Barlow","Public Sans",sans-serif;text-align:center;padding:4px}
.aoV57 small{font:700 9.5px/1.1 "Barlow","Public Sans",sans-serif;opacity:.75}
.aoV57 .bdg57{width:20px;height:20px;margin:0}
.aoV57 .ps57{font-size:15px}
.aoV57.n{background:rgba(200,215,230,.07);box-shadow:inset 0 0 0 1px rgba(200,215,230,.22);color:#cfd9e4}
.aoV57.p{background:rgba(42,127,214,.22);box-shadow:inset 0 0 0 1px rgba(111,189,255,.45);color:#d6ebff}
.aoV57.h{background:rgba(40,230,140,.13);box-shadow:inset 0 0 0 1px rgba(93,255,168,.5);color:#b9ffd9}
.aoV57.vide{opacity:.45}
#aboO57 .abNote57{margin:18px 0 4px;font:600 11px/1.35 "Barlow","Public Sans",sans-serif;color:#8193a8;text-align:center}
#aboO57 .abRes57{display:block;margin:10px auto 0;background:none!important;border:0;box-shadow:none!important;color:#ff6b6b!important;font:800 14px/1 "Barlow","Public Sans",sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:12px 16px}
.aoV57.long{font-size:11.5px;white-space:nowrap;letter-spacing:-.01em}
.aoConf57{position:absolute;inset:0;background:rgba(3,7,14,.6);display:grid;place-items:center;padding:20px}
.aoConf57[hidden]{display:none!important}
.aoBoite57{width:100%;max-width:340px;border-radius:20px;padding:18px;background:#18212f;box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.1);text-align:center}
.aoBoite57>b{display:block;font:800 16px/1.3 "Barlow","Public Sans",sans-serif;margin-bottom:8px}
.aoBoite57 p{margin:0 0 14px;font:600 13px/1.4 "Barlow","Public Sans",sans-serif;color:#b8c7d8}
.aoBoite57 p b{color:#fff}
.aoBoite57 .pieds{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.aoBoite57 .btn{min-height:44px}
html.pc57 #aboO57 .aoCorps57{padding:0 0 40px}
html.pc57 #aboO57 .aoCorps57>*{width:min(860px,calc(100% - 48px));margin-left:auto!important;margin-right:auto!important}
html.pc57 #aboO57 .aoTete57{height:72px;font-size:24px}
html.pc57 #aboO57 .aoX57{right:24px;top:16px}
html.pc57 .aoPlans57,html.pc57 .aoL57{grid-template-columns:1fr 160px 160px 160px;gap:10px}
html.pc57 .aoPlans57 .aoVideL57{display:block}
html.pc57 .aoL57 .aoLab57{grid-column:auto;display:flex;align-items:center;font-size:15px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.045);min-height:44px}
html.pc57 .aoV57{min-height:44px;font-size:15px}
html.pc57 .aoC57{padding:16px 10px 10px}
html.pc57 .aoC57 .aoN57{font-size:24px}
html.pc57 .aoC57 .aoPx57{font-size:19px}
html.pc57 .aoC57 .aoGo57{min-height:40px!important;font-size:13px!important}
html.pc57 .aoG57{font-size:17px;margin-top:22px}

/* ---------- puces de rareté : le bouton n'a plus de fond à lui ; fond, contour et lueur sont dans UN calque (::before),
   le reflet (::after) est dessiné dans la même forme ; à l'appui les deux zooment ensemble, le texte ne bouge pas ---------- */
#chips#chips button,#fCorps#fCorps .fchips button{background:transparent!important;border-color:transparent!important;box-shadow:none!important;outline:0!important;overflow:visible!important;clip-path:none!important;
  animation:none!important;filter:none!important;isolation:isolate!important;transition:none!important}
#chips#chips button::before,#fCorps#fCorps .fchips button::before{content:""!important;position:absolute!important;inset:-2px!important;z-index:-2!important;border-radius:inherit!important;box-sizing:border-box!important;opacity:1!important;
  border:0!important;background:color-mix(in srgb,var(--k) 12%,transparent)!important;background-origin:border-box!important;background-clip:border-box!important;background-repeat:no-repeat!important;background-size:100% 100%!important;
  box-shadow:inset 0 0 0 2px var(--k)!important;filter:none!important;
  transform:scale(1)!important;transform-origin:50% 50%!important;transition:transform .17s cubic-bezier(.25,.9,.3,1.35)!important;will-change:transform}
#chips#chips button[aria-pressed="true"]::before,#fCorps#fCorps .fchips button[aria-pressed="true"]::before{
  background:linear-gradient(135deg,var(--k) 0%,var(--k2,var(--k)) 50%,var(--k) 100%)!important;background-origin:border-box!important;background-size:100% 100%!important;
  box-shadow:0 0 10px color-mix(in srgb,var(--k) 60%,transparent)!important}
#chips#chips button[data-r="ur"][aria-pressed="true"]::before,#chips#chips button[data-r="l"][aria-pressed="true"]::before,
#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]::before{
  box-shadow:0 0 10px color-mix(in srgb,var(--k) 62%,transparent),-6px 0 14px rgba(255,90,140,.2),6px 0 14px rgba(90,170,255,.2)!important}
#chips#chips button[aria-pressed="true"]::after,#fCorps#fCorps .fchips button[aria-pressed="true"]::after{inset:-2px!important;width:auto!important;z-index:-1!important;border-radius:inherit!important;
  background-size:300% 100%!important;background-repeat:no-repeat!important;transform:scale(1)!important;transform-origin:50% 50%!important;
  animation:holo57 2.2s ease-in-out -.32s infinite!important;transition:transform .17s cubic-bezier(.25,.9,.3,1.35)!important;filter:none!important}
@keyframes holo57{0%{background-position:150% 0}60%,100%{background-position:-50% 0}}
#chips#chips button.bas57::before,#chips#chips button.bas57::after,#fCorps#fCorps .fchips button.bas57::before,#fCorps#fCorps .fchips button.bas57::after{transform:scale(.94)!important;transition:transform 80ms ease-out!important}
.phone:not([data-theme="sombre"]) #chips#chips button:not([aria-pressed="true"])::before{background:color-mix(in srgb,var(--k) 10%,#fff)!important}
/* ---------- menu : Abonnement, Installer l'application ---------- */

/* ---------- profil : cadres Cartes / Échanges / Succès et Solde bien foncés (on ne voit plus à travers) ---------- */
.screen[data-screen="profil"] .stats div,.screen[data-screen="profil"]>.row{background:rgba(6,11,20,.9)!important;border:1.5px solid rgba(255,255,255,.13)!important}
.phone:not([data-theme="sombre"]) .screen[data-screen="profil"] .stats div,.phone:not([data-theme="sombre"]) .screen[data-screen="profil"]>.row{background:#fff!important;border-color:rgba(20,30,45,.16)!important}
/* ---------- bannière : motifs refaits en 2 couleurs (--pban = principale, --pb2 = secondaire) ---------- */
#pCarte.pCarte .pBan,#feuille .pThemes i{background-color:var(--pban,#1B66B5)!important}
#pCarte.pCarte.th1 .pBan,#feuille .pThemes i.th1{background-image:
  radial-gradient(circle,color-mix(in srgb,var(--pb2,#fff) 60%,transparent) 0 1.8px,transparent 2.4px),
  radial-gradient(circle,color-mix(in srgb,var(--pb2,#fff) 26%,transparent) 0 1.3px,transparent 1.9px),
  radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--pb2,#fff) 26%,transparent),transparent 60%)!important;
  background-size:16px 16px,16px 16px,100% 100%!important;background-position:0 0,8px 8px,0 0!important}
#pCarte.pCarte.th2 .pBan,#feuille .pThemes i.th2{background-image:
  repeating-linear-gradient(135deg,color-mix(in srgb,var(--pb2,#fff) 34%,transparent) 0 8px,transparent 8px 20px),
  linear-gradient(180deg,color-mix(in srgb,var(--pb2,#fff) 18%,transparent),transparent 75%)!important;background-size:auto,100% 100%!important;background-position:0 0!important}
#pCarte.pCarte.th3 .pBan,#feuille .pThemes i.th3{background-image:
  conic-gradient(color-mix(in srgb,var(--pb2,#fff) 30%,transparent) 0 25%,transparent 0 50%,color-mix(in srgb,var(--pb2,#fff) 30%,transparent) 0 75%,transparent 0),
  linear-gradient(180deg,transparent 30%,color-mix(in srgb,#000 22%,transparent))!important;background-size:22px 22px,100% 100%!important;background-position:0 0!important}
#pCarte.pCarte.th4 .pBan,#feuille .pThemes i.th4{background-image:
  radial-gradient(circle at 50% 100%,transparent 8px,color-mix(in srgb,var(--pb2,#fff) 46%,transparent) 9px 11px,transparent 12px),
  radial-gradient(circle at 50% 100%,transparent 8px,color-mix(in srgb,var(--pb2,#fff) 20%,transparent) 9px 11px,transparent 12px),
  linear-gradient(0deg,color-mix(in srgb,var(--pb2,#fff) 16%,transparent),transparent 70%)!important;
  background-size:24px 12px,24px 12px,100% 100%!important;background-position:0 0,12px 6px,0 0!important}
/* image perso (Pro, Hacker) : elle remplace le motif */
#pCarte.pCarte .pBan.ban57{background-color:#0b1018!important}
/* Hacker : couleurs + lumière qui passe sur la bannière */
.pBan{position:relative;overflow:hidden}
.bfx57{position:absolute;inset:0;pointer-events:none;z-index:0}
.bfx57::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--f1),var(--f2));mix-blend-mode:color;opacity:.55}
.bfx57::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--f1) 75%,#fff 25%) 44%,#fff 50%,color-mix(in srgb,var(--f2) 75%,#fff 25%) 56%,transparent 70%);
  background-size:280% 100%;background-repeat:no-repeat;mix-blend-mode:screen;opacity:.75;animation:banfx57 3.4s ease-in-out infinite}
@keyframes banfx57{0%{background-position:140% 0}65%,100%{background-position:-40% 0}}
@media (prefers-reduced-motion:reduce){.bfx57::after{animation:none;opacity:0}}
/* ---------- « Modifier le profil » ---------- */
.nu57{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
#feuille .nuT57{display:block;font:800 11.5px/1.2 "Barlow","Public Sans",sans-serif!important;color:var(--doux);margin:8px 0 6px}
.nu57 .pip57{position:relative;display:grid;place-items:center;background:conic-gradient(#ff5a8a,#ffd45c,#5dffa8,#36d6ff,#d65aff,#ff5a8a)!important;color:#fff}
.nu57 .pip57.perso{background:var(--c)!important}
.nu57 .pip57 svg{width:55%;height:55%;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.6))}
.nu57 .pip57 input{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;border:0;padding:0}
#sty57 .sw57,#bc57 .sw57{margin:0 0 4px}
#sty57 .lbl,#bc57 .lbl{display:block}
.crop57{display:flex;flex-direction:column;gap:8px}
.crop57[hidden]{display:none!important}
.cropF57{position:relative;width:100%;overflow:hidden;border-radius:12px;background:#0b1018;touch-action:none;cursor:grab;box-shadow:inset 0 0 0 2px rgba(111,189,255,.6)}
.cropF57:active{cursor:grabbing}
.cropF57 img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-drag:none;pointer-events:none}
.cropZ57{display:flex;align-items:center;gap:10px;color:var(--doux)}
.cropZ57 svg{width:20px;height:20px;flex:none}
.cropZ57 input{flex:1;accent-color:#6fbdff}
.banV57[hidden],.banB57[hidden]{display:none!important}
/* ---------- mon pseudo dans le marché, les échanges, les messages ---------- */
.jm57{display:inline-flex;align-items:center;gap:0;font-weight:900;max-width:100%;overflow:hidden}
.jm57 .bdg57{margin-left:.25em;flex:none}
.jm57 .ps57{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.de57{display:flex;align-items:center;gap:6px;margin:6px 0 2px;font:800 12px/1.2 "Barlow","Public Sans",sans-serif}
.de57>span{opacity:.7;font-weight:700}
.bulle .nom57{display:block;font-size:11px;margin-bottom:3px}
/* ---------- fenêtre Abonnement ---------- */
#aboO57 .aoEsprit57{margin:20px 0 0;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);text-align:center}
#aboO57 .aoEsprit57 b{display:block;font:800 14px/1.2 "Barlow","Public Sans",sans-serif;color:#ffd45c;margin-bottom:6px}
#aboO57 .aoEsprit57 p{margin:0;font:600 12.5px/1.45 "Barlow","Public Sans",sans-serif;color:#cfd9e4}
.aoC57 .aoGo57.aoMuet57{visibility:hidden}

/* ---------- v58 ---------- */
/* grille du fond : carrés grands (avant 30 px) */
#fond57{background-size:calc(64px * var(--z57,1)) calc(64px * var(--z57,1))!important}
/* connexion : logo Dragos avec son cercle, bouton qui ne bouge pas */
#gate .gl{width:104px;height:104px}
#gate .gb,#gate .gb:active{transform:none!important}
/* en-tête serré : rien ne déborde, même avec 10 000 Dragos ou plus */
header.top .btns{gap:5px!important}
header.top .stockH{padding:0 8px 0 6px!important}
header.top .porte{padding:0 2px 0 6px!important;gap:3px!important;flex:none}
header.top.serre58 .btns{gap:3px!important}
header.top.serre58 .stockH{font-size:11.5px!important;padding:0 6px 0 3px!important}
header.top.serre58 .stockH>svg.ic57b{width:22px!important;height:22px!important;margin-right:2px!important}
header.top.serre58 .porte{font-size:12px!important;padding:0 0 0 5px!important;gap:2px!important}
header.top.serre58 #plusDragos{width:20px!important}
header.top.serre58 #menuBtn{width:32px!important}
/* boutons ⓘ et abonnement : même disque d'appui */
#info57,#abo58{overflow:visible}
#info57::before,#abo58::before{content:""!important;display:block!important;position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  background:color-mix(in srgb,var(--bleu,#1B66B5) 24%,transparent);opacity:0;transform:scale(.5);transition:opacity .12s ease,transform .17s cubic-bezier(.25,.9,.3,1.35)}
#info57.p58::before,#abo58.p58::before{opacity:1;transform:scale(1)}
#info57 svg,#abo58 svg{position:relative}
#abo58{position:absolute;right:58px;top:max(12px,env(safe-area-inset-top));z-index:9;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;
  color:var(--bleu,#1B66B5);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s ease}
#abo58 svg{width:30px;height:30px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
#abo58.cache57,#info57.ov58,#abo58.ov58{opacity:0;pointer-events:none}
html.pc57 #abo58{right:max(76px,calc((100% - 1200px) / 2 + 52px))}
/* panneau ⓘ : les rayons couvrent toute la hauteur (le haut était coupé par la descente du contenu) */
#catalogue.info57 .hero{overflow:visible!important}
#catalogue.info57 .heroRays{width:1100px!important;height:1100px!important;margin:-550px 0 0 -550px!important;
  -webkit-mask:radial-gradient(circle 540px,#000 0,transparent 540px)!important;mask:radial-gradient(circle 540px,#000 0,transparent 540px)!important}
/* marché : cartes plus courtes, nom / vendeur / catégorie en entier */
#mListe .lot{padding-bottom:6px!important}
#mListe .lot .nom57{margin-top:5px!important;flex-wrap:nowrap}
#mListe .lot .nom57>b{font-size:var(--fz58,inherit)}
#mListe .lot .rr{white-space:nowrap;overflow:visible!important;text-overflow:clip!important;font-size:9px!important;line-height:1.1;margin-top:2px}
/* enchère : carte en haut, mise actuelle à gauche, mise dépassée + joueur à droite, ma mise, bouton en bas */
html:not(.pc57) #fCorps .achat.enc58 .encRow58{grid-column:1 / -1;order:1;margin-top:10px}
html:not(.pc57) #fCorps .achat.enc58>.lbl{margin-top:14px!important}
.encRow58{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
html:not(.pc57) #fCorps .encRow58 .moyenne{margin:0!important;align-items:center!important;text-align:center;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.encRow58 .moyenne small{font:700 11px/1.2 "Barlow","Public Sans",sans-serif;opacity:.75}
.encRow58 .moyenne>span:first-child{white-space:nowrap}

/* abonnements : textes sur une seule ligne, lignes alignées, offre choisie (bleu) et offre payée (or) bien distinctes */
.aoC57{display:grid!important;grid-template-rows:20px 18px 13px 34px;row-gap:4px;justify-items:center;align-items:center;padding:17px 6px 11px!important}
.aoC57 .aoN57,.aoC57 .aoPx57,.aoC57 small{margin:0!important;width:100%;text-align:center;white-space:nowrap;line-height:1!important}
.aoC57 .aoN57{font-size:18px!important}.aoC57 .aoPx57{font-size:15px!important}.aoC57 small{font-size:10.5px!important}
.aoC57 .aoGo57{margin:0!important;align-self:end;min-height:34px!important;white-space:nowrap}
.aoC57 .aoAct58{display:none;position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);background:#ffd45c;color:#2a1c00;font:800 8.5px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.07em;padding:4px 8px;border-radius:999px;white-space:nowrap;z-index:2}
.aoC57.cur .aoAct58{display:block}
.aoC57.sel:not(.cur){outline:2.5px solid #6fbdff;outline-offset:2px;box-shadow:0 0 18px rgba(111,189,255,.5)}
.aoC57{cursor:pointer}
.aoCode58{width:100%;box-sizing:border-box;margin:6px 0;min-height:52px;border-radius:14px;border:1.5px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;text-align:center;font:800 26px/1 "Barlow","Public Sans",sans-serif;letter-spacing:.35em;text-indent:.35em;outline:0}
.aoCode58:focus{border-color:#6fbdff}
.aoErr58{color:#ff7a7a;font-weight:800;margin:0}
.aoBoite57 .pieds{flex-wrap:wrap}

html:not(.pc57) #fCorps .encRow58 .moyenne{padding:5px 8px!important;gap:1px!important;min-height:0!important}
html:not(.pc57) #fCorps .encRow58 .moyenne .prix{font-size:14px!important}
html:not(.pc57) #fCorps .achat.enc58>.champ{min-height:40px!important;height:44px!important}
html:not(.pc57) #fCorps .achat.enc58>.lbl{margin-top:4px!important;margin-bottom:2px!important}
html:not(.pc57) #fCorps .achat.enc58 .encRow58{margin-top:2px}
html:not(.pc57) #fCorps .achat.enc58>.lbl{margin-top:8px!important}

#aboO57 .pieds:has(#aoCodeOk58){display:flex!important;flex-direction:column!important;gap:8px}
#aboO57 .pieds:has(#aoCodeOk58)>button{width:100%!important;max-width:100%!important;box-sizing:border-box!important;white-space:normal}

/* ---------- v59 ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:360px){.phone{height:100vh;height:100dvh}}
/* 2. bouton de connexion : l'icône et le texte ne bougent jamais ; le chargement est dans le bouton */
#gb{position:relative;overflow:hidden}
#gb .dsc57,#gb .gbT57{transition:none!important}
#gb:disabled,#gb.load59{opacity:1!important;filter:none!important}
#gb.load59{pointer-events:none}
#gb.load59::after{content:"";position:absolute;top:0;bottom:0;left:0;width:100%;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-100%);animation:gbSw59 1s ease-in-out infinite;pointer-events:none}
#gb.load59 .dsc57{animation:gbPu59 .9s ease-in-out infinite}
@keyframes gbSw59{to{transform:translateX(100%)}}
@keyframes gbPu59{50%{opacity:.4}}
/* 3. panneau d'information : calque propre, une seule animation */
#catalogue.info57{will-change:opacity,transform;backface-visibility:hidden}
#catalogue.info57 .heroRays{transform:translateZ(0);will-change:transform}
/* 4. chances d'obtention : plus aéré, angles moins ronds */
#catalogue.info57 .heroTxt h2{margin-top:6px!important}
#catalogue.info57 .heroTxt .kicker{margin-top:6px!important}
#catalogue.info57 #chances.chances{border-radius:12px!important;padding:16px 16px 14px!important;margin-top:20px!important}
#catalogue.info57 #chances .kicker{margin:0 0 12px!important;display:block}
#catalogue.info57 #chances .ch{margin-bottom:9px!important}
#catalogue.info57 #chances .ch:last-child{margin-bottom:0!important}
/* 5. en-tête : vrais espaces entre les éléments (plus de pastilles collées) */
html:not(.pc57) header.top.serre58 .btns{gap:8px!important}
html:not(.pc57) header.top.serre58 .stockH{font-size:11px!important;padding:0 6px 0 3px!important;gap:2px!important;flex:0 1 auto!important}
html:not(.pc57) header.top.serre58 .stockH>svg.ic57b{width:19px!important;height:19px!important;margin-right:0!important}
html:not(.pc57) header.top.serre58 .porte{width:auto!important;flex:0 0 auto!important;font-size:12px!important;padding:0 0 0 7px!important;gap:4px!important}
html:not(.pc57) header.top.serre58 #plusDragos{width:26px!important;margin-left:2px!important}
html:not(.pc57) header.top.serre58 #menuBtn{width:32px!important}
header.top #menuBtn{position:relative}
header.top #menuBtn .pastille{top:3px!important;right:3px!important;left:auto!important;bottom:auto!important}
/* 6. couronne : plus petite, mêmes marges que les boutons voisins, même flottement que les boosters */
html:not(.pc57) #info57{left:16px!important}
html:not(.pc57) #abo58{right:58px!important}
html.pc57 #abo58{right:max(66px,calc((100% - 1200px) / 2 + 42px))!important}
#abo58 svg{width:26px!important;height:26px!important;animation:invFlot59 3.4s ease-in-out infinite}
@keyframes invFlot59{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){#abo58 svg{animation:none}}
/* 8. couronne du menu : bleue, comme les autres icônes */
#menuAbo57 svg,#menuAbo57 .ic{color:#1B66B5!important}
/* 9. marché : la liste montre 2 rangées, le reste se déroule */
#mListe{max-height:none!important;overflow:visible!important}
#mListe::-webkit-scrollbar{display:none}
#mListe{justify-items:center}
/* 10. fenêtre « choisis une carte à vendre » : toujours la même taille, 2 cartes par rangée */
#feuille.vente59{height:calc(100% - 66px - var(--basF,110px))!important;max-height:calc(100% - 66px - var(--basF,110px))!important}
#feuille.vente59 #fCorps{display:flex!important;flex-direction:column;overflow:hidden!important}
#feuille.vente59 .outils{flex:none}
#feuille.vente59 .gcartes{flex:1 1 0;min-height:0;overflow-y:auto;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-content:start;gap:14px 12px!important;padding:4px 2px 8px}
#feuille.vente59 #fCorps>.vide2{margin:auto 0}
#feuille.vente59 .gcartes>.vide2{grid-column:1 / -1;align-self:center;margin:auto 0}
.gcartes.chg59 .gc .v{visibility:hidden}
.gc .v,.gc .v *{transform:none!important;animation:none!important;transition:none!important}
/* 11. collection : L doré, UR arc-en-ciel quand ils sont choisis */
#chips#chips button[data-r="l"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]::before{
  background:linear-gradient(135deg,#ffd23f 0%,#ff9d1c 55%,#ffd23f 100%)!important;box-shadow:0 0 12px rgba(255,170,30,.7)!important}
#chips#chips button[data-r="ur"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::before{
  background:linear-gradient(100deg,#ff4f9a,#ffb340,#ffe94d,#4dffa6,#38d4ff,#9a6bff,#ff4f9a)!important;background-size:300% 100%!important;
  animation:ur59 3s linear infinite!important;box-shadow:0 0 12px rgba(255,90,170,.55)!important}
@keyframes ur59{from{background-position:0 0}to{background-position:300% 0}}
#chips#chips button[data-r="l"][aria-pressed="true"],#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]{color:#2b1a00!important}
#chips#chips button[data-r="ur"][aria-pressed="true"],#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.55)}
/* 14. titres des sections : même place, même taille, une phrase */
.tt59{flex:none;margin:0 0 12px}
.tt59 h2{font:800 26px/1.1 "Barlow","Public Sans",sans-serif;color:var(--texte);margin:0 0 6px;letter-spacing:0}
.tt59 p{font:600 13px/1.35 "Barlow","Public Sans",sans-serif;color:var(--doux);margin:0;min-height:2.7em}
.screen.pl .tt59{margin:14px 14px 4px}
#notifPanel .tt59d{margin:0 0 10px;padding:0 4px;font:600 12.5px/1.35 "Barlow","Public Sans",sans-serif;color:var(--doux)}
#notifPanel .feed li.lu59{opacity:.6}
#aboO57 .tt59d{margin:0 16px 8px;text-align:center;font:600 12.5px/1.35 "Barlow","Public Sans",sans-serif;color:#cfd9e4}
html.pc57 .tt59 h2{font-size:34px}
html.pc57 .tt59 p{font-size:15px}


/* ---------- v59b ---------- */
/* gros titres : police très grasse et robuste */
.tt59 h2,.mhead b,.chead b,#feuille #fTitre,#catalogue.info57 .heroTxt h2,#apInfo59 .n,.vfiche>b{font-family:"Barlow","Public Sans",sans-serif!important;font-weight:900!important;letter-spacing:-.01em}
.tt59 h2{font-size:30px;line-height:1.05}
html.pc57 .tt59 h2{font-size:38px}
/* collection / vente : L et UR, l'arc-en-ciel passe sur la puce choisie (comme le flash blanc des autres) */
#chips#chips button[data-r="l"][aria-pressed="true"]::after,#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]::after,
#chips#chips button[data-r="ur"][aria-pressed="true"]::after,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::after{
  background-image:linear-gradient(105deg,transparent 22%,rgba(255,60,120,.85) 32%,rgba(255,200,40,.9) 40%,rgba(80,255,150,.9) 48%,rgba(60,200,255,.9) 56%,rgba(160,100,255,.85) 64%,transparent 76%)!important;
  background-size:300% 100%!important;background-repeat:no-repeat!important;mix-blend-mode:normal!important;opacity:1!important;animation:holo57 1.8s ease-in-out infinite!important}
#chips#chips button[data-r="ur"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::before{animation-duration:2.2s!important}
/* marché : 2 cartes par rangée sur téléphone (plus de place pour le nom, la catégorie et le vendeur) */
html:not(.pc57) #mListe{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
/* carte ouverte en grand depuis une fenêtre du marché : nom et infos en bas, rien ne se chevauche */
#apInfo59{display:none;position:absolute;left:14px;right:14px;bottom:78px;z-index:97;text-align:center;color:#fff;pointer-events:none}
body.sousApercu.ap59 #apInfo59{display:block}
body.sousApercu.ap59 #fApercu{height:calc(100% - 68px - 132px)!important}
body.sousApercu #feuille.panneauApercu:has(.vfiche){visibility:hidden!important}
#apInfo59 .n{font-size:24px;line-height:1.1;margin-bottom:5px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
#apInfo59 .c{font:700 13.5px/1.3 "Barlow","Public Sans",sans-serif;opacity:.95}
#apInfo59 .s{font:600 12.5px/1.3 "Barlow","Public Sans",sans-serif;opacity:.8;margin-top:2px}
#apInfo59 .p{display:inline-block;margin-top:9px;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.16);font:800 13px/1.2 "Barlow","Public Sans",sans-serif}

/* ---------- v59c ---------- */
#chips#chips button[data-r="ur"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::before{
  background:linear-gradient(90deg,#ff3d8f,#ffae2e,#ffe94d,#3dffa0,#2fd0ff,#9a5bff,#ff3d8f)!important;background-size:200% 100%!important;background-repeat:repeat-x!important;
  animation:ur59 2.4s ease-in-out infinite alternate!important;box-shadow:0 0 12px rgba(255,90,170,.55)!important}
@keyframes ur59{from{background-position:0 0}to{background-position:100% 0}}
#chips#chips button[data-r="l"][aria-pressed="true"]::after,#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]::after,
#chips#chips button[data-r="ur"][aria-pressed="true"]::after,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::after{
  background-image:linear-gradient(105deg,transparent 26%,rgba(255,60,130,.95) 34%,rgba(255,200,40,.95) 42%,rgba(70,255,150,.95) 50%,rgba(50,200,255,.95) 58%,rgba(160,100,255,.95) 66%,transparent 74%)!important;
  background-size:220% 100%!important;background-repeat:no-repeat!important;animation:arc59 1.5s ease-in-out infinite alternate!important}
#chips#chips button[data-r="ur"][aria-pressed="true"]::after,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::after{opacity:.55!important}
@keyframes arc59{from{background-position:140% 0}to{background-position:-40% 0}}
html:not(.pc57) #mListe{justify-items:stretch!important}
#apInfo59{left:0!important;right:0!important;bottom:68px!important;padding:56px 16px 14px;background:linear-gradient(180deg,rgba(6,10,18,0),rgba(6,10,18,.94) 42%)}
body.sousApercu.ap59 #fApercu{height:calc(100% - 68px - 150px)!important}

/* ---------- v59d : collection = un seul bloc ---------- */
.screen.coll.un59{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
.screen.coll.un59>#fColl{position:relative!important;flex:none!important;display:block!important;width:100%!important;min-height:300px!important}
.screen.coll.un59>:not(#fColl){transform:none;will-change:auto}

/* v59e : l'arc-en-ciel L/UR repart de zéro à chaque clic et ne reste jamais figé (annule le décalage hérité) */
#chips#chips button[data-r="l"][aria-pressed="true"]::after,#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]::after,
#chips#chips button[data-r="ur"][aria-pressed="true"]::after,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::after{
  transform:none!important;inset:-2px!important;width:auto!important;animation-delay:0s!important;animation-play-state:running!important;mix-blend-mode:normal!important}

/* v59f : L = doré avec une bande arc-en-ciel qui fait l'aller-retour (même mécanisme que UR, qui bouge bien) */
#chips#chips button[data-r="l"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]::before{
  background:linear-gradient(100deg,#ffc933 0%,#ffc933 36%,#ff4f9a 41%,#ffe94d 46%,#4dffa6 50%,#38d4ff 54%,#9a6bff 59%,#ffc933 64%,#ffc933 100%)!important;
  background-size:400% 100%!important;background-repeat:no-repeat!important;
  animation:l59 1.6s ease-in-out infinite alternate!important;box-shadow:0 0 12px rgba(255,170,30,.7)!important}
@keyframes l59{from{background-position:0% 0}to{background-position:100% 0}}
#chips#chips button[data-r="l"][aria-pressed="true"]::after,#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]::after{display:none!important}

/* v59g : cause trouvée — les règles « !important » sur le fond empêchaient l'animation de bouger. On anime donc une variable (--bp59) lue par le fond. */
@property --bp59{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes l59{from{--bp59:0%}to{--bp59:100%}}
@keyframes ur59{from{--bp59:0%}to{--bp59:100%}}
#chips#chips button[data-r="l"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]::before,
#chips#chips button[data-r="ur"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::before{background-position:var(--bp59) 0!important}
#chips#chips button[data-r="ur"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::before{
  background-image:linear-gradient(100deg,#ff3d8f 0%,#ffae2e 12%,#ffe94d 24%,#3dffa0 36%,#2fd0ff 48%,#9a5bff 60%,#ff3d8f 72%,#ffae2e 84%,#ff3d8f 100%)!important;background-size:300% 100%!important;animation:ur59 1.8s ease-in-out infinite alternate!important}
#chips#chips button[data-r="ur"][aria-pressed="true"]::after,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::after{display:none!important}

/* v60 : Syne est plus large que l'ancienne police, on réduit un peu les titres pour qu'ils tiennent toujours dans leur cadre */
#feuille #fTitre{font-size:15px!important;letter-spacing:0!important;white-space:normal!important;text-align:center!important;line-height:1.15!important}

/* v60b : L et UR identiques : la couleur de base reste visible, une bande arc-en-ciel légère fait l'aller-retour par-dessus */
#chips#chips button[data-r="l"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]::before,
#chips#chips button[data-r="ur"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::before{
  background-image:linear-gradient(100deg,transparent 0%,transparent 40%,rgba(255,90,140,.42) 44%,rgba(255,225,90,.42) 47%,rgba(90,255,170,.42) 50%,rgba(80,200,255,.42) 53%,rgba(170,120,255,.42) 56%,transparent 60%,transparent 100%),
    linear-gradient(135deg,var(--k) 0%,var(--k2,var(--k)) 50%,var(--k) 100%)!important;
  background-size:400% 100%,100% 100%!important;background-repeat:no-repeat!important;
  background-position:var(--bp59) 0,0 0!important;
  animation:ur59 1.8s ease-in-out infinite alternate!important}
#chips#chips button[data-r="l"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]::before{box-shadow:0 0 12px rgba(255,170,30,.6)!important}
#chips#chips button[data-r="ur"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::before{box-shadow:0 0 12px rgba(255,90,170,.5)!important}

/* v60c : enchère — carte au milieu, textes dessous, puis ma mise / dépassée par, puis ajouter une mise */
html:not(.pc57) #fCorps .achat.enc58{display:flex!important;flex-direction:column;align-items:center;gap:4px}
html:not(.pc57) #fCorps .achat.enc58>.vfiche{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:2px;width:100%;margin:0!important}
html:not(.pc57) #fCorps .achat.enc58>.vfiche>.cm{width:112px!important;margin:0 0 8px!important;align-self:center!important}
html:not(.pc57) #fCorps .achat.enc58>.vfiche>b{font-size:19px!important;text-align:center!important;margin:0!important}
html:not(.pc57) #fCorps .achat.enc58>.vfiche>.rr{text-align:center!important;font-size:12px!important}
html:not(.pc57) #fCorps .achat.enc58 .encRow58{width:100%}
html:not(.pc57) #fCorps .achat.enc58>.lbl{align-self:stretch;text-align:left}
html:not(.pc57) #fCorps .achat.enc58>.champ{width:100%}
/* les chiffres écrits par le joueur et les prix : police normale, jamais étirée */
#feuille input,#fCorps input,#fCorps .icoT,#fCorps .mm,#fCorps .prix,#mListe .prix{font-family:"Public Sans","Barlow",sans-serif!important;font-stretch:normal!important;font-weight:800;letter-spacing:0}

/* v60d : les notifications sont une vraie page (comme Échange, Amis…) */
#notifPanel.screen{position:static!important;left:auto!important;right:auto!important;margin:0!important;max-height:none!important;overflow:visible!important;
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;width:auto!important;padding:0 0 24px!important;transform:none!important;opacity:1!important;pointer-events:auto!important}
#notifPanel.screen[hidden]{display:none!important}
#notifPanel.screen>.nhead,#notifPanel.screen>.opts,#notifPanel.screen>.feed{margin-left:14px;margin-right:14px}
html.pc57 main .screen[data-screen="notifs"]{max-width:860px}
#notifPanel.screen>.tt59{margin:14px 14px 6px!important}

/* v63 : en-tête de la collection plus haut : le titre a sa propre ligne, les 3 compteurs dessous, « Possédées » à droite */
.screen.coll .row.chead{align-items:flex-start!important;padding:9px 12px 9px!important;margin:8px 10px 8px!important;min-height:0!important}
.screen.coll .row.chead .grow{min-width:0;flex:1 1 auto}
.screen.coll .row.chead .grow>b{display:block!important;font-size:13px!important;line-height:1.3!important;margin:1px 0 6px!important;white-space:nowrap!important}
.screen.coll .row.chead #collN{display:grid!important;gap:2px!important;margin:0!important;font-size:10px!important;line-height:1.2!important}
.screen.coll .row.chead #collN .cn{display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.screen.coll .row.chead #collN .cn i{font-style:normal;opacity:.7;font-weight:500}
.screen.coll .row.chead #collN .cn .v{font:700 11px/1.2 "Barlow","Public Sans",sans-serif!important}
.screen.coll .row.chead .posS{align-self:flex-start;margin-top:4px}

/* v63 */
#chips#chips button[data-r="l"][aria-pressed="true"]::before,#chips#chips button[data-r="ur"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]::before,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::before{
  background-image:linear-gradient(135deg,var(--k) 0%,var(--k2,var(--k)) 50%,var(--k) 100%)!important;background-size:100% 100%!important;background-position:0 0!important;animation:none!important}
#chips#chips button[data-r="l"][aria-pressed="true"]::after,#chips#chips button[data-r="ur"][aria-pressed="true"]::after,#fCorps#fCorps .fchips button[data-f="l"][aria-pressed="true"]::after,#fCorps#fCorps .fchips button[data-f="ur"][aria-pressed="true"]::after{
  content:""!important;display:block!important;position:absolute!important;inset:-2px!important;width:auto!important;pointer-events:none!important;
  background-image:linear-gradient(105deg,transparent 30%,rgba(255,70,120,.85) 38%,rgba(255,200,60,.85) 42%,rgba(110,255,170,.85) 46%,rgba(70,200,255,.85) 50%,rgba(170,110,255,.85) 55%,transparent 64%)!important;
  mix-blend-mode:normal!important;opacity:.9!important;filter:blur(.6px) saturate(1.3)!important;
  background-size:300% 100%!important;background-repeat:no-repeat!important;background-position:var(--hp63) 0!important;transform:none!important;animation:holoU63 2.2s ease-in-out -.32s infinite!important}
@property --hp63{syntax:'<percentage>';inherits:false;initial-value:150%}
@keyframes holoU63{0%{--hp63:150%}60%,100%{--hp63:-50%}}

/* v63 : la fenêtre monte et prend toute la place disponible (moins de marge en haut et en bas) */
html:not(.pc57) #feuille:has(div.achat){top:calc(50px + (100% - 104px) / 2)!important;max-height:calc(100% - 92px)!important}
html:not(.pc57) #feuille:has(div.achat) #fTitre{font-size:15px!important}
html:not(.pc57) #feuille:has(div.achat) .fhead,html:not(.pc57) #feuille:has(div.achat)>header,html:not(.pc57) #feuille:has(div.achat)>.ftete{padding-top:8px!important;padding-bottom:2px!important;min-height:0!important;height:auto!important}
html:not(.pc57) #fCorps .achat.enc58{gap:3px!important;padding-top:2px!important}
html:not(.pc57) #fCorps .achat.enc58>.vfiche>.cm{width:86px!important;margin:0 0 4px!important}
html:not(.pc57) #fCorps .achat.enc58>.vfiche>b{font-size:16px!important;line-height:1.1!important}
html:not(.pc57) #fCorps .achat.enc58>.vfiche>.rr{font-size:11.5px!important;line-height:1.25!important;margin:0!important}
html:not(.pc57) #fCorps .achat.enc58 .encRow58{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;margin:5px 0 0!important}
html:not(.pc57) #fCorps .achat.enc58 .encRow58>.moyenne{margin:0!important;padding:5px 8px!important;min-height:0!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center}
html:not(.pc57) #fCorps .achat.enc58 .encRow58>.moyenne>span:first-child{font-size:10.5px!important;line-height:1.15!important;text-transform:none}
html:not(.pc57) #fCorps .achat.enc58>.solde{width:100%;display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;margin:2px 0 0!important;padding:4px 6px!important;min-height:0!important;background:none!important;border:0!important;box-shadow:none!important}
html:not(.pc57) #fCorps .achat.enc58>.solde>span:first-child{font-size:11px!important}
html:not(.pc57) #fCorps .achat.enc58>.lbl{margin:6px 0 2px!important;font-size:11px!important}
html:not(.pc57) #fCorps .achat.enc58>.champ{height:38px!important;min-height:38px!important}
html:not(.pc57) #feuille:has(div.achat) .fpied{padding:6px 14px 12px!important}
html:not(.pc57) #feuille:has(div.achat) .fpied .btn{min-height:44px!important}

html:not(.pc57) header.top.serre58 .btns{gap:5px!important}
html:not(.pc57) header.top.serre58 .stockH{padding:0 5px 0 2px!important;gap:0!important}
html:not(.pc57) header.top.serre58 .stockH>svg.ic57b{width:17px!important;height:17px!important;margin-right:1px!important}
html:not(.pc57) header.top.serre58 .stockH .t{gap:3px!important}
html:not(.pc57) header.top.serre58 .porte{padding:0 0 0 5px!important;gap:3px!important}
html:not(.pc57) header.top.serre58 .porte>svg.ic{width:21px!important;height:21px!important}
html:not(.pc57) header.top.serre58 #menuBtn{margin-left:-2px!important}

/* v63 : abonnements */
.aoC57 .aoAct58{top:-10px!important;bottom:auto!important}
.aoC57.cur .aoTag57{display:none!important}
.aoC57.cur{outline:none!important}
.aoFrame57{display:none!important;position:absolute;pointer-events:none;border:2.5px solid #ffd45c;border-radius:20px;z-index:0;box-shadow:0 0 14px rgba(255,212,92,.4)}
.aoFrame57[hidden]{display:none}
.aoT57 .aoLab57,.aoT57 .aoG57{position:relative;z-index:1}
.aoT57 .aoV57,.aoT57 .aoPlans57{position:relative;z-index:2}
.aoT57[data-cur="pro"] .aoV57.p{background:linear-gradient(160deg,#2a7fd6,#124b8c)!important;box-shadow:none!important;color:#fff!important;opacity:1!important}
.aoT57[data-cur="hacker"] .aoV57.h{background:linear-gradient(160deg,#5dffa8,#16c784 55%,#0ea5a0)!important;box-shadow:none!important;color:#032b1c!important;opacity:1!important}
.aoT57[data-cur="noob"] .aoV57.n{background:linear-gradient(160deg,#3a4656,#232c38)!important;box-shadow:none!important;color:#fff!important;opacity:1!important}

/* v63 : fenêtre de mise en vente : plus compacte, les frais se voient sans défiler */
#feuille:has(#vPrix) .vfiche>.cm{width:92px!important;margin:0 0 4px!important}
#feuille:has(#vPrix) .vfiche{margin:0 0 6px!important}
#feuille:has(#vPrix) .vfiche b{font-size:16px!important}
#feuille .champ .fraisIn63{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:800 15px/1 "Barlow","Public Sans",sans-serif;color:#ff8a8a;pointer-events:none}
#feuille .frais57{line-height:1.5!important;text-align:left}
#feuille .frais57 b{font-weight:800;color:inherit}

#fPied .recu63{width:100%;text-align:center;font:700 12.5px/1.2 "Barlow","Public Sans",sans-serif;margin:0 0 6px;opacity:.9}
#fPied .recu63 b{font-weight:800}

/* v63b : chaque case de l'offre activée s'allume en jaune, une par une */
.aoT57[data-cur="pro"] .aoV57.p,.aoT57[data-cur="hacker"] .aoV57.h,.aoT57[data-cur="noob"] .aoV57.n{box-shadow:inset 0 0 0 2px #ffd45c,0 0 10px rgba(255,212,92,.55)!important}
.aoC57.cur{outline:2.5px solid #ffd45c!important;outline-offset:2px!important;box-shadow:0 0 16px rgba(255,212,92,.55)!important}

/* v63 : fenêtre de paiement du booster : tout est centré (question, explication, boutons) */
#feuille:has(#a10Ok58) .abEt57,#feuille:has(#a10Ok58) .question{text-align:center!important}
#feuille:has(#a10Ok58) .pieds{justify-content:center}

/* v64 : cases de l'offre active = même bande blanche qui brille que SR dans la collection */
.aoT57[data-cur="pro"] .aoV57.p,.aoT57[data-cur="hacker"] .aoV57.h,.aoT57[data-cur="noob"] .aoV57.n{position:relative;overflow:hidden;isolation:isolate}
.aoT57[data-cur="pro"] .aoV57.p::after,.aoT57[data-cur="hacker"] .aoV57.h::after,.aoT57[data-cur="noob"] .aoV57.n::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2;
  background-image:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 42%,rgba(255,255,255,.9) 50%,rgba(255,255,255,.55) 58%,transparent 70%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:var(--hp64) 0;filter:blur(.6px);
  animation:holoA64 2.2s ease-in-out -.32s infinite}
@property --hp64{syntax:'<percentage>';inherits:false;initial-value:150%}
@keyframes holoA64{0%{--hp64:150%}60%,100%{--hp64:-50%}}


/* v74 : pendant la page de connexion, l'appli derrière est cachée (elle ne dessine plus rien) : plus de saccades ni de clignotements */
.phone:has(#gate:not(.ferme):not([style*="none"]))>*:not(#gate){visibility:hidden!important}
body:has(#gate:not(.ferme):not([style*="none"])) #fond57{visibility:hidden!important}
#gate .bg64,#gate .fan64,#gate .chips64,#gate .idees64{transform:translateZ(0);backface-visibility:hidden}
#gate .ring64 .cd img{image-rendering:auto;transform:translateZ(0)}

/* ====== v64 : page d'accueil ====== */
#gate{overflow:hidden;justify-content:flex-start!important;gap:0!important;padding:0 20px 18px!important;background-color:var(--fond,#12161C)!important;background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px)!important;background-size:64px 64px!important;background-position:-1px -1px!important}
#gate>*{position:relative;z-index:3}
#gate .bg64{position:absolute!important;inset:0;z-index:1!important;pointer-events:none;overflow:hidden;
  }
#gate .bg64::before{content:"";position:absolute;left:50%;top:38%;width:1100px;height:1100px;margin:-550px 0 0 -550px;opacity:.6;will-change:transform;
  background:repeating-conic-gradient(from 0deg,rgba(255,226,140,.12) 0 8deg,rgba(255,226,140,0) 8deg 22deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.8) 42%,rgba(0,0,0,.35) 70%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.8) 42%,rgba(0,0,0,.35) 70%);animation:ray64 55s linear infinite}
#gate .bg64::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(1.6px 1.6px at 10% 14%,#fffc,transparent),radial-gradient(1.4px 1.4px at 84% 9%,#fffc,transparent),radial-gradient(1px 1px at 26% 30%,#fff9,transparent),radial-gradient(1.5px 1.5px at 92% 36%,#fffb,transparent),radial-gradient(1px 1px at 6% 52%,#fff9,transparent),radial-gradient(1.4px 1.4px at 74% 58%,#fff8,transparent),radial-gradient(1px 1px at 40% 8%,#fff8,transparent),radial-gradient(1.4px 1.4px at 58% 46%,#fff7,transparent);animation:twink64 3.2s ease-in-out infinite}
#gate .o64{position:absolute;border-radius:50%;opacity:.34;will-change:transform;backface-visibility:hidden}
#gate .o64:nth-of-type(1){width:260px;height:260px;left:18%;top:20%;margin:-130px;background:radial-gradient(circle,#ffc23a 0,rgba(255,194,58,.4) 38%,transparent 68%);animation:d1 11s ease-in-out infinite}
#gate .o64:nth-of-type(2){width:240px;height:240px;left:2%;top:50%;margin:-120px;background:radial-gradient(circle,#a15bff 0,rgba(161,91,255,.4) 38%,transparent 68%);animation:d2 13s ease-in-out infinite}
#gate .o64:nth-of-type(3){width:240px;height:240px;left:98%;top:44%;margin:-120px;background:radial-gradient(circle,#ff45b5 0,rgba(255,69,181,.4) 38%,transparent 68%);animation:d3 12s ease-in-out infinite}
#gate .o64:nth-of-type(4),#gate .o64:nth-of-type(5){opacity:.75}
#gate .o64:nth-of-type(4){width:280px;height:280px;left:80%;top:12%;margin:-140px;background:#2f8fe8;animation:d4 15s ease-in-out infinite;width:380px;height:380px;margin:-190px;background:radial-gradient(circle,rgba(60,150,240,.9) 0,rgba(47,134,218,.35) 35%,transparent 66%)}
#gate .o64:nth-of-type(5){width:220px;height:220px;left:50%;top:62%;margin:-110px;background:#38d4ff;animation:d5 14s ease-in-out infinite;width:340px;height:340px;margin:-170px;background:radial-gradient(circle,rgba(150,205,255,.7) 0,rgba(90,160,255,.28) 35%,transparent 66%)}
@keyframes d1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,70px) scale(1.25)}}
@keyframes d2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(90px,-90px) scale(.85)}}
@keyframes d3{0%,100%{transform:translate(0,0) scale(.9)}50%{transform:translate(-100px,80px) scale(1.2)}}
@keyframes d4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-110px,110px) scale(1.2)}}
@keyframes d5{0%,100%{transform:translate(0,0) scale(1.15)}50%{transform:translate(-80px,-70px) scale(.85)}}
@keyframes hueR64{to{filter:hue-rotate(360deg)}}
@keyframes hue64{from{filter:blur(46px) hue-rotate(0deg)}to{filter:blur(46px) hue-rotate(360deg)}}
#gate .bg64::before{--h:0}
#gate .gl{position:static!important;margin:30px 0 8px!important;width:62px!important;height:62px!important;filter:brightness(0) invert(1) drop-shadow(0 4px 10px rgba(0,0,0,.35))!important}
#gate h2#gt{margin:0;font-size:22px;line-height:1.15;letter-spacing:0;text-transform:uppercase;color:#fff;text-shadow:0 3px 0 rgba(6,25,59,.55),0 6px 18px rgba(0,0,0,.35)}
#gate h2#gt em{font-style:normal;color:#ffd45c}
#gate .sub64{margin:6px 0 0;font:700 13.5px/1.3 "Barlow","Public Sans",sans-serif;letter-spacing:.2px;opacity:.92}
#gate .fan64{position:relative!important;flex:1 1 150px;min-height:150px;width:100%;margin-top:6px;perspective:900px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#gate .fan64.drag{cursor:grabbing}
#gate .ring64{position:absolute;inset:0;transform-style:preserve-3d}
#gate .ring64 .cd{position:absolute;left:50%;top:46%;height:74%;aspect-ratio:2/3;width:auto;margin:0;transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:9px;box-shadow:0 12px 22px rgba(0,0,0,.55);overflow:hidden;pointer-events:none}
#gate .ring64 .cd img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
#gate .ring64 .cd::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 42%,rgba(255,255,255,.88) 50%,rgba(255,255,255,.5) 58%,transparent 70%);
  background-repeat:no-repeat;transform:translateX(-110%);will-change:transform;animation:swX64 2.6s ease-in-out infinite}
@keyframes swX64{0%{transform:translateX(-110%)}60%,100%{transform:translateX(110%)}}
#gate .ring64 .cd:nth-child(2)::after{animation-delay:-.5s}#gate .ring64 .cd:nth-child(3)::after{animation-delay:-1s}#gate .ring64 .cd:nth-child(4)::after{animation-delay:-1.5s}#gate .ring64 .cd:nth-child(5)::after{animation-delay:-2s}
#gate .fan64 .hint64{position:absolute;left:0;right:0;bottom:0;text-align:center;font:700 10.5px/1 "Barlow","Public Sans",sans-serif;opacity:.75;letter-spacing:.3px;pointer-events:none;transition:opacity .4s}
#gate .fan64.vu .hint64{opacity:0}
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.45));animation:fl64 5.4s ease-in-out var(--d) infinite;transform:translate(-50%,-50%) translateX(var(--x)) rotate(var(--r))}
@keyframes ray64{to{transform:rotate(360deg)}}
@keyframes pulse64{50%{opacity:.6}}
@keyframes twink64{50%{opacity:.4}}
#gate .chips64{margin:8px -12px 0;width:calc(100% + 24px);box-sizing:border-box}
#gate .idees64{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:14px}
#gate .idees64>div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px 8px;border-radius:14px;background:rgba(0,0,0,.66);border:1.5px solid rgba(255,255,255,.16);box-shadow:0 8px 18px rgba(0,0,0,.35);text-align:center}
#gate .idees64 b{font-size:10px;line-height:1.25;letter-spacing:0;text-transform:uppercase}
#gate .idees64 span{font:600 11.5px/1.25 "Barlow","Public Sans",sans-serif;opacity:.9}
#gate .idees64 u{text-decoration:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#ffd45c;color:#3a2200;font:800 14px/1 "Barlow","Public Sans",sans-serif;margin-bottom:2px}
#gate p#gp64,#gate>p:not(.sub64){margin:14px 0 8px;font:600 12.5px/1.3 "Barlow","Public Sans",sans-serif;opacity:.9;max-width:300px;align-self:center}
#gate .gb{margin-top:0}
#gate small{margin-top:8px;font:700 11px/1.2 "Barlow","Public Sans",sans-serif;opacity:.7}
/* la bande blanche du bouton est un DÉGRADÉ DE FOND du bouton lui-même : elle ne peut pas sortir du cadre arrondi */
#gb{clip-path:none!important;overflow:hidden}
#gb.load59::after{display:none!important}
#gb.load59{background-image:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%)!important;background-size:300% 100%!important;background-repeat:no-repeat!important;background-position:var(--gp65) 0!important;animation:gbSw65 1.1s ease-in-out infinite}
@property --gp65{syntax:'<percentage>';inherits:false;initial-value:150%}
@keyframes gbSw65{0%{--gp65:150%}100%{--gp65:-50%}}
#gate.rec57 .gl{margin-top:90px!important}

/* v72 : plus de bouton « + » ni de boutique ; la pastille s'élargit toute seule pour les millions */
#plusDragos{display:none!important}
.porte{padding:0 14px 0 8px!important;gap:5px!important;width:auto!important;min-width:0}

/* v74 : panneau ⓘ plus étiré : barres plus grandes, titre jamais coupé, rayons qui tournent autour des cartes */
#catalogue.info57 .heroTxt h2{line-height:1.3!important;padding:8px 0 6px!important;overflow:visible!important;margin:0!important}
#catalogue.info57 .chances{padding:14px 14px 8px!important}
#catalogue.info57 .ch{margin-bottom:11px!important;font-size:13px!important}
#catalogue.info57 .ch .b{height:9px!important}
#catalogue.info57 .ch.pt72{grid-template-columns:116px 1fr 70px!important}
#catalogue.info57 .chances .kicker.k72{margin-top:8px}
#catalogue.info57 .heroRays{animation-duration:45s!important;animation-play-state:running!important}

/* v74 : en-tête : le contenu des deux pastilles est centré (marges égales à gauche et à droite) */
.phone .btns>.porte.porte.porte.porte.porte.porte{padding:0 10px 0 10px!important;gap:5px!important;width:auto!important}
.phone .btns>.stockH.stockH.stockH.stockH.stockH.stockH{padding:0 0 0 8px!important}
#catalogue.info57 .ch{grid-template-columns:96px 1fr 46px!important}
#catalogue.info57 .hero p{display:none!important}
#catalogue.info57 .heroTxt{width:100%!important;max-width:none!important;box-sizing:border-box!important;padding:0 14px 20px!important;align-self:stretch!important}
#catalogue.info57 #chances{display:block!important;margin:12px 0 0!important;width:100%!important;box-sizing:border-box!important}
#catalogue.info57 .ch{margin-bottom:6px!important}
#catalogue.info57 .chances{padding:12px 16px 8px!important}
#catalogue.info57 .heroTxt{padding-bottom:12px!important}
#catalogue.info57 .chances .kicker.k72{display:none!important}

/* v75 : titre et catégorie plus proches du panneau des chances */
#catalogue.info57 .heroTxt h2{margin-top:2px!important}
#catalogue.info57 .heroTxt #chances{margin-top:2px!important;zoom:.9}
#catalogue.info57 .heroTxt h2{margin-bottom:0!important}

/* v78 : carte ouverte en grand depuis Acheter / Enchérir : la carte en grand, sans texte dessous */
html body.sousApercu.ap59 #fApercu{height:calc(100% - 68px)!important}
html body.sousApercu.ap59 #apInfo59,#apInfo59{display:none!important}

/* v78 : fenêtre « Ouvrir 10 boosters pour 0,99 € » : au centre exact de l'écran, deux boutons de même largeur */
html .feuille.pop:has(#a10Ok58){top:50%!important}
#a10Ok58,#a10Non58{flex:1 1 0!important;min-width:0!important;justify-content:center;text-align:center}

/* v78 : panneau ⓘ : tout visible (le contenu remonte), cartes un peu plus petites */
#catalogue.info57 .hero{height:calc(100% - 26px)!important}
#catalogue.info57 .eventail .cm{--cw:104px!important}

#catalogue.info57 .ch .b{height:10px!important;background:rgba(255,255,255,.07)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
#catalogue.info57 .ch .b span{background:linear-gradient(90deg,color-mix(in srgb,var(--k) 70%,#000),var(--k))!important;box-shadow:0 0 12px var(--k)!important}

.gc .qb{position:absolute;top:-7px;right:-7px;z-index:4;min-width:26px;height:26px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:#06121f;color:#fff;display:grid;place-items:center;font:800 12px/1 "Barlow","Public Sans",sans-serif;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.gc .ok{right:auto!important;left:-7px!important;z-index:5}
.gcartes[data-g="ev"].chg59 .gc .v,.gcartes[data-g="ed"].chg59 .gc .v{visibility:visible!important}

html #feuille.feuille.pop:has(div.achat){width:min(94%,392px)!important}
html #fCorps .achat .moyenne>span:first-child{font-size:12.5px!important;white-space:nowrap!important}
html #fCorps .achat .solde{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}
html #fCorps .achat .solde>span{line-height:1!important;margin:0!important;padding:0!important;display:inline-flex!important;align-items:center!important;align-self:center!important}
html #fCorps .achat .solde>span.prix{gap:4px}

html #fPied .eSel,html #fPied .eSel.e49{height:76px!important;min-height:76px!important;max-height:76px!important;box-sizing:border-box!important}

html #fPied .bilan{min-height:34px!important;box-sizing:border-box!important;align-items:center!important}