:root{--night:#08142e;--deep:#0f2146;--deep2:#16305f;--paper:#eef4fc;--mute:#b1c2e3;--soft:#c4d2ec;--cube:#2f8bff;--ice:#8fdcff;--leaf:#7ccf3f;--wave:#2fd4b5;--accent-blue:#6fb4ff;--fox:#ff8a3d;--nav:rgba(15,33,70,.7);--nav-solid:rgba(8,20,46,.9);--nav-line:rgba(143,220,255,.2);--nav-btn:#0b1a3a;--nav-btn-hover:#12285a;--nav-btn-line:rgba(143,220,255,.35);--footer:#050d20;--old-2:#12234a;--tag-bg:rgba(255,255,255,.1);--block:#0f2146;--block-alt:#16305f;--block-line:rgba(143,220,255,.45);--shadow:rgba(0,0,0,.4);--f1:'Arial Black','Arial Bold',Gadget,Impact,sans-serif;--f2:'Figtree',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;color-scheme:dark}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--night);color:var(--paper);font:400 1.05rem/1.65 var(--f2);overflow-x:hidden}
main{flex:1 0 auto}
a{color:inherit}img{max-width:100%}
:focus-visible{outline:3px solid var(--ice);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f1);font-weight:400;line-height:1.12;letter-spacing:-.02em;overflow-wrap:break-word;hyphens:auto}
.wrap{width:min(1100px,90%);margin:auto}
section{padding:clamp(60px,9vw,100px) 0}
.sec-title{font-size:clamp(1.7rem,4.6vw,2.7rem);margin-bottom:14px}
.sub{color:var(--mute);max-width:56ch;margin-bottom:44px}
/* nav */
nav{position:fixed;inset:0 0 auto;z-index:30;padding:12px 0;transition:background .3s,box-shadow .3s}
nav.solid{background:rgba(8,20,46,.88);backdrop-filter:blur(10px);box-shadow:0 6px 30px rgba(0,0,0,.35)}
nav .wrap{display:flex;justify-content:space-between;align-items:center}
.logo{font:400 1.4rem var(--f1);text-decoration:none;display:flex;gap:10px;align-items:center}
.logo img{width:36px;height:36px;border-radius:10px}
.menu{display:flex;gap:24px;list-style:none;padding:0}
.menu a{text-decoration:none;color:var(--mute);font-weight:600;position:relative;padding:6px 0}
.menu a::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--cube);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.menu a:hover{color:var(--paper)}.menu a:hover::after{transform:scaleX(1)}
.burger{display:none;width:44px;height:44px;border:0;border-radius:12px;background:var(--deep);cursor:pointer;position:relative}
.burger i,.burger i::before,.burger i::after{position:absolute;left:12px;width:20px;height:2px;background:var(--paper);border-radius:2px;content:"";transition:.25s}
.burger i{top:21px}.burger i::before{top:-7px;left:0}.burger i::after{top:7px;left:0}
.burger[aria-expanded=true] i{background:transparent}
.burger[aria-expanded=true] i::before{top:0;rotate:45deg}.burger[aria-expanded=true] i::after{top:0;rotate:-45deg}
@media(max-width:720px){
 .burger{display:block}
 .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--deep);padding:8px 5%;clip-path:inset(0 0 100% 0);transition:clip-path .3s}
 .menu.open{clip-path:inset(0)}
 .menu a{display:block;padding:14px 0;font-size:1.1rem}
}
/* boutons */
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-block;padding:14px 26px;border-radius:999px;font:600 1rem var(--f2);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px var(--shadow)}
.btn.main{background:var(--cube);color:#fff}
.btn.ghost{border-color:var(--mute);background:none;color:var(--paper)}
.btn.leaf{background:var(--leaf);color:#0f1f08}.btn.wave{background:var(--wave);color:#06231e}
/* hero */
.hero{min-height:100svh;display:grid;align-items:center;position:relative;padding:120px 0 130px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(2rem,6.2vw,4.3rem);font-weight:400}
.hero p{color:var(--mute);max-width:46ch;margin:22px 0 32px;font-size:1.15rem}
.hero .in-up{animation:up .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n)*120ms)}
@keyframes up{from{opacity:0;translate:0 30px}}
.art{position:relative;width:min(340px,70vw);aspect-ratio:1;margin:auto;transition:transform .2s}
.hero-logo{width:100%;height:100%;border-radius:15%;box-shadow:0 0 0 2px rgba(143,220,255,.4),0 30px 80px rgba(47,139,255,.5);animation:bob 5s ease-in-out infinite,pop 1s cubic-bezier(.2,.9,.3,1.3) both;position:relative;z-index:2}
@keyframes bob{50%{translate:0 -14px}}@keyframes pop{from{scale:.5;opacity:0;rotate:-12deg}}
.ring{position:absolute;border-radius:50%;border:2px dashed rgba(143,220,255,.3);animation:rot 28s linear infinite}
.ring::after{content:"";position:absolute;width:16px;height:16px;top:-9px;left:calc(50% - 8px);background:var(--c,var(--ice));border-radius:4px;rotate:45deg}
.r1{inset:-9%}.r2{inset:-22%;animation-direction:reverse;animation-duration:42s;border-color:rgba(124,207,63,.3);--c:var(--leaf)}
@keyframes rot{to{rotate:360deg}}
.bits{position:absolute;inset:0;pointer-events:none;z-index:1}
.bit{position:absolute;border-radius:5px;opacity:.3;animation:drift var(--d) ease-in-out infinite alternate}
@keyframes drift{to{translate:24px -50px;rotate:90deg}}
.blocks{position:absolute;inset:auto 0 0;height:112px;display:flex;align-items:flex-end;z-index:3}
.blocks i{flex:1;height:var(--h);background:var(--c);border-top:4px solid var(--block-line);transform-origin:bottom;animation:rise .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(600ms + var(--i)*30ms)}
@keyframes rise{from{transform:scaleY(0)}}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;text-align:center;gap:60px}.hero p{margin-inline:auto}.btns{justify-content:center}.art{order:-1;width:min(240px,60vw)}}
/* cartes */
.rv{transition:opacity .7s,translate .7s cubic-bezier(.2,.8,.2,1)}
.js .rv{opacity:0;translate:0 36px}.js .rv.in{opacity:1;translate:0 0}
.cards{display:grid;grid-template-columns:1.25fr .75fr;gap:26px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card{position:relative;padding:clamp(24px,4vw,36px);background:var(--deep);overflow:hidden;isolation:isolate;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px var(--shadow)}
.card::before,.card::after{content:"";position:absolute;z-index:-1;background:var(--c);opacity:.16}
.vul{--c:var(--leaf);border-radius:28px 28px 28px 80px;border-top:4px solid var(--leaf)}
.vul::before{width:220px;height:220px;right:-60px;top:-60px;clip-path:polygon(50% 0,100% 100%,0 100%);animation:rot 40s linear infinite}
.vul::after{width:90px;height:90px;left:-30px;bottom:-30px;border-radius:50% 0 50% 0;rotate:20deg}
.riv{--c:var(--wave);border-radius:28px 80px 28px 28px;border-top:4px solid var(--wave)}
.riv::before{width:150px;height:150px;right:-40px;top:-40px;border-radius:50%;animation:bob 6s ease-in-out infinite}
.riv::after{width:50px;height:50px;left:30px;bottom:30px;border-radius:50%;animation:bob 4s ease-in-out infinite reverse}
.card h3{font-size:clamp(1.5rem,3.6vw,2rem);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tag{font:600 .8rem var(--f2);padding:4px 12px;border-radius:999px;background:var(--tag-bg);letter-spacing:0}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#44e08a;margin-right:6px;animation:pulse 1.8s infinite}
.dot.off{background:#e0b044;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(68,224,138,.6)}100%{box-shadow:0 0 0 10px rgba(68,224,138,0)}}
.card p{color:var(--mute);margin:14px 0}
.lore{font-style:italic;color:var(--paper)!important;border-left:3px solid var(--leaf);padding-left:14px}
.vlogo{width:96px;height:96px;border-radius:24px;float:right;margin:0 0 12px 16px;border:3px solid var(--leaf);box-shadow:0 10px 30px rgba(124,207,63,.3);rotate:4deg;transition:rotate .3s,scale .3s}
.card:hover .vlogo{rotate:-4deg;scale:1.06}
.rlogo{border-color:var(--wave);box-shadow:0 10px 30px rgba(47,212,181,.35)}
.ip{display:inline-flex;align-items:center;gap:12px;margin:10px 0 22px;padding:10px 12px 10px 18px;border-radius:14px;background:var(--night);font:600 1.05rem ui-monospace,Menlo,monospace;max-width:100%}
.ip button{border:0;border-radius:9px;padding:8px 14px;background:var(--leaf);color:#0f1f08;font:600 .9rem var(--f2);cursor:pointer}
details{margin:6px 0 22px}summary{cursor:pointer;font-weight:600;color:var(--leaf)}
details ul{list-style:none;padding:14px 0 0;display:grid;gap:10px;color:var(--mute)}details li strong{color:var(--paper)}
/* etapes */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.steps li{list-style:none;position:relative;padding:28px 24px 24px;border-radius:20px;background:var(--deep);counter-increment:s}
.steps li::before{content:counter(s);position:absolute;top:-18px;left:20px;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--leaf);color:#0f1f08;font:400 1.1rem var(--f1);rotate:-6deg}
.steps strong{display:block;font:400 1.2rem var(--f1);margin-bottom:6px}.steps span{color:var(--mute)}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:34px}}
/* a propos */
.about{background:var(--deep);clip-path:polygon(0 36px,100% 0,100% calc(100% - 36px),0 100%);padding:clamp(80px,10vw,120px) 0}
.about .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:760px){.about .wrap{grid-template-columns:1fr}}
.about h3{font-size:1.25rem;margin-bottom:8px}.about p{color:var(--mute)}
.shape{width:52px;height:52px;margin-bottom:16px;animation:bob 5s ease-in-out infinite}
.about div:nth-child(2) .shape{animation-delay:-1.5s}.about div:nth-child(3) .shape{animation-delay:-3s}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dcard{--c:var(--cube);position:relative;display:flex;flex-direction:column;gap:18px;padding:26px 24px 22px;background:var(--deep);border-radius:28px;border-top:4px solid var(--c);text-decoration:none;color:var(--paper);overflow:hidden;isolation:isolate;transition:transform .3s,box-shadow .3s}
.dcard.grp{--c:var(--cube);grid-column:1 / -1;flex-direction:row;align-items:center;gap:22px;padding:28px 32px}
.dcard.srv{--c:var(--leaf)}.dcard.dev{--c:var(--wave)}
.dcard::before{content:"";position:absolute;z-index:-1;width:150px;height:150px;right:-46px;top:-58px;border-radius:42%;background:var(--c);opacity:.16;rotate:18deg}
.dcard:hover{transform:translateY(-6px);box-shadow:0 24px 50px var(--shadow)}
.dmark{flex:0 0 auto;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,var(--night));color:var(--c)}
.dbody{flex:1;min-width:0}
.dcard h3{font-size:clamp(1.45rem,2.4vw,1.8rem);color:var(--c);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dcard p{color:var(--mute);margin:8px 0 0}
.dcard .go{align-self:flex-start;padding:11px 20px;border-radius:999px;background:var(--c);color:#fff;font:600 .95rem var(--f2)}
.dcard.grp .go{margin-left:auto}
.dcard.srv .go{color:#0f1f08}.dcard.dev .go{color:#06231e}
@media(max-width:760px){.dgrid{grid-template-columns:1fr}.dcard.grp{flex-direction:column;align-items:flex-start;padding:26px 22px}.dcard.grp .go{margin-left:0}}
/* pied de page + legal */
footer{position:relative;overflow:hidden;padding:52px 0 22px;background:var(--footer);color:var(--mute);font-size:.95rem}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--cube),var(--ice),var(--wave),var(--leaf),transparent)}
.fmark{position:absolute;left:0;width:100%;height:auto;top:50%;translate:0 -50%;margin:0;color:var(--paper);opacity:.07;pointer-events:none;user-select:none}
.fmark text{fill:currentColor}
.fgrid{position:relative;display:grid;grid-template-columns:minmax(280px,1.3fr) repeat(3,1fr);gap:34px 28px;align-items:start}
.fbrand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper);font:400 1.7rem var(--f1)}
.fbrand img{width:48px;height:48px;border-radius:14px}
.fcopy{margin-top:26px;color:var(--mute);font-size:.92rem;white-space:nowrap}
.fcol{position:static;inset:auto;translate:none;z-index:auto;width:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none}
.fcol h2{margin:0 0 14px;font:600 .78rem var(--f2);letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
.fcol a{display:block;width:fit-content;margin:9px 0;color:var(--mute);text-decoration:none;font-weight:500}
.fcol a:hover{color:var(--ice)}
.fbot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-top:38px;padding-top:18px;border-top:1px solid var(--nav-line)}
.flegal{position:static;inset:auto;translate:none;z-index:auto;width:auto;display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none}
.flegal a{color:var(--mute);text-decoration:none;font-size:.9rem}
.flegal a:hover{color:var(--paper)}
.fsocial{display:flex;gap:10px}
.fsocial a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--paper);background:color-mix(in srgb,var(--paper) 8%,transparent);border:1px solid var(--nav-line);text-decoration:none}
.fsocial a:hover{background:var(--cube);border-color:var(--cube);color:#fff}
.stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:128px 20px 72px;overflow:hidden}
.stage .bits{z-index:0}
.orbit{position:relative;z-index:1;width:min(210px,54vw);aspect-ratio:1;display:grid;place-items:center;margin-bottom:52px}
.stage .r1{inset:-2%}
.stage .r2{inset:-15%}
.orbit img{position:relative;z-index:2;width:48%;height:auto;border-radius:24%;box-shadow:0 0 0 2px rgba(143,220,255,.45),0 18px 46px rgba(47,139,255,.38);animation:bob 5s ease-in-out infinite}
.stagebox{position:relative;z-index:2;display:grid;justify-items:center;gap:12px;max-width:560px}
.stagelabel{margin:0;padding:5px 14px;border-radius:999px;background:color-mix(in srgb,var(--deep) 86%,var(--cube));color:var(--ice);font:600 .82rem var(--f2);letter-spacing:.08em;text-transform:uppercase}
.stage h1,.misscode{margin:0;font-size:clamp(2.1rem,6vw,3.4rem);background:linear-gradient(100deg,#fff 0%,#8fdcff 42%,#2fd4b5 72%,#7ccf3f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.stage p{color:var(--mute);max-width:44ch;margin:0}
.stage .btns{justify-content:center;margin-top:6px}
.miss .misscode{position:absolute;z-index:0;left:50%;top:42%;translate:-50% -50%;font:400 clamp(8rem,28vw,16rem)/.8 var(--f1);opacity:.13;pointer-events:none;white-space:nowrap}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}.fside{grid-column:1 / -1}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr;text-align:center}.fbrand{justify-content:center}.fcopy{white-space:normal}.fcol a{margin-inline:auto}.fbot{justify-content:center}}
.legal{padding:130px 0 70px}.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(1.9rem,5.5vw,3rem);margin-bottom:10px}
.legal h2{font-size:1.25rem;margin:40px 0 10px;padding-left:16px;border-left:5px solid var(--cube)}
.legal p,.legal li{color:var(--mute);margin-bottom:10px}.legal li{margin-left:20px}.legal strong{color:var(--paper)}.legal a{color:var(--ice)}
.legalnav{position:static;inset:auto;translate:none;z-index:auto;width:auto;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 28px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none}
.legalnav a{text-decoration:none;padding:8px 16px;border-radius:999px;background:var(--deep);color:var(--mute);font-weight:600;font-size:.92rem;border:2px solid var(--deep2)}
.legalnav a:hover{color:var(--paper)}
.legalnav a.on{background:var(--cube);border-color:var(--cube);color:#fff}
.toast{position:fixed;bottom:24px;left:50%;translate:-50% 120px;background:var(--paper);color:var(--night);padding:12px 22px;border-radius:999px;font-weight:600;transition:translate .3s;z-index:50}.toast.on{translate:-50% 0}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.js .rv{opacity:1;translate:none}}

/* projet terminé */
.dot.end{background:#8a96b0;animation:none}
.old{--c:var(--fox);margin-top:26px;border-radius:28px;border:2px dashed color-mix(in srgb,var(--fox) 50%,transparent);background:linear-gradient(135deg,var(--deep),var(--old-2));display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,34px);align-items:center}
.old::before,.old::after{clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.14}
.old::before{width:90px;height:90px;right:40px;top:-46px}.old::after{width:60px;height:60px;right:140px;top:-30px}
.old p{margin:8px 0 0}
.foxico{width:clamp(150px,24vw,200px);height:auto;border-radius:18px;box-shadow:0 10px 26px rgba(255,138,61,.28);transition:rotate .4s,scale .4s}.old:hover .foxico{rotate:-4deg;scale:1.04}
@media(max-width:560px){.old{grid-template-columns:1fr}}
/* equipe */
.member{position:relative;isolation:isolate;display:grid;grid-template-columns:168px 1fr;align-items:center;gap:8px 28px;max-width:820px;padding:28px 44px 28px 24px;border-radius:36px;background:var(--deep);border-top:4px solid var(--cube);overflow:hidden;transition:transform .3s,box-shadow .3s}
.member::after{content:"";position:absolute;z-index:0;width:130px;height:130px;right:-48px;top:-48px;border-radius:28px;background:var(--cube);opacity:.16;rotate:18deg}
.member:hover{transform:translateY(-6px);box-shadow:0 20px 44px var(--shadow)}
.bust{position:relative;z-index:1;display:grid;justify-items:center;align-items:center}
.bust img{width:128px;height:128px;border-radius:22px;image-rendering:pixelated;background:var(--deep2);box-shadow:0 0 0 4px color-mix(in srgb,var(--cube) 35%,transparent);transition:translate .35s,scale .35s}
.member:hover .bust img{translate:0 -6px;scale:1.04}
.who{position:relative;z-index:1;align-self:center;padding:4px 0}
.member h3{font-size:clamp(1.8rem,3vw,2.3rem)}
.roles{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.role{padding:4px 12px;border-radius:999px;background:rgba(47,139,255,.2);color:var(--ice);font-weight:600;font-size:.9rem}
.member p{color:var(--mute);margin-top:16px;max-width:46ch}
.skills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0 0}
.skills li{padding:7px 14px;border-radius:12px;background:var(--night);color:var(--paper);font-weight:600;font-size:.9rem}
.skills li.fox{background:color-mix(in srgb,var(--fox) 22%,var(--night));color:var(--fox)}
.skills li.vulpine{background:color-mix(in srgb,var(--leaf) 22%,var(--night));color:var(--leaf)}
.skills li.rivalys{background:color-mix(in srgb,var(--wave) 22%,var(--night));color:var(--wave)}
@media(max-width:640px){
 .member{grid-template-columns:1fr;justify-items:stretch;text-align:center;border-radius:28px;padding:0 22px 28px}
 .who{min-width:0;padding:4px 0 0}
 .roles,.skills{justify-content:center}
 .member p{margin-inline:auto;max-width:none}
 .bust img{width:112px;height:112px}
}

/* couleurs des textes et titres */
.hero h1,.legal h1{background:linear-gradient(100deg,#fff 0%,#8fdcff 40%,#2fd4b5 70%,#7ccf3f 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 9s ease-in-out infinite alternate}
@keyframes shine{to{background-position:100% 0}}
#serveurs .sec-title{color:var(--ice)}#rejoindre .sec-title{color:var(--leaf)}#equipe .sec-title{color:var(--accent-blue)}#discord .sec-title{color:var(--wave)}
.sub{color:var(--soft)}
.vul h3{color:var(--leaf)}.riv h3{color:var(--wave)}.old h3{color:var(--fox)}
.tag{color:var(--paper)}
.about div:nth-child(1) h3{color:var(--leaf)}.about div:nth-child(2) h3{color:var(--accent-blue)}.about div:nth-child(3) h3{color:var(--wave)}
.steps strong{color:var(--ice)}.member h3{color:var(--ice)}
.legal h2{color:var(--ice)}.legal h1{font-size:clamp(1.9rem,5.5vw,3rem)}
.hero p{color:var(--soft)}
.card strong{color:var(--paper)}

/* banlist */
.legal .wrap.wide{max-width:1000px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0 24px}
.tile{--c:#ff6b6b;position:relative;text-align:left;padding:18px 18px 16px;border-radius:20px;border:2px solid transparent;background:var(--deep);color:var(--paper);cursor:pointer;display:grid;gap:2px;overflow:hidden;font:600 .9rem var(--f2);transition:transform .25s,border-color .25s,background .25s}
.tile[data-type="all"]{--c:#6fb4ff}.tile[data-type="bans"]{--c:#ff6b6b}.tile[data-type="mutes"]{--c:#ffc24a}.tile[data-type="kicks"]{--c:#8fdcff}
.tile::before{content:"";position:absolute;width:90px;height:90px;right:-28px;top:-28px;border-radius:50%;background:var(--c);opacity:.18;transition:scale .3s}
.tile:hover{transform:translateY(-4px)}.tile:hover::before{scale:1.35}
.tile.on{border-color:var(--c);background:linear-gradient(135deg,var(--deep2),var(--deep))}
.tile svg{width:26px;height:26px;color:var(--c);margin-bottom:8px}
.tile b{font:400 1.9rem/1.1 var(--f1);color:var(--c)}
.tile span{color:var(--mute)}
.bar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-bottom:20px}
.search{position:relative;flex:1 1 260px;max-width:380px}
.search svg{position:absolute;left:16px;top:50%;translate:0 -50%;width:18px;color:var(--mute)}
.search input{width:100%;padding:13px 18px 13px 44px;border-radius:999px;border:2px solid var(--deep2);background:var(--deep);color:var(--paper);font:400 1rem var(--f2)}
.search input:focus{border-color:var(--cube);outline:0}
.seg{display:flex;padding:4px;border-radius:999px;background:var(--deep)}
.seg button{border:0;background:none;color:var(--mute);padding:9px 18px;border-radius:999px;font:600 .92rem var(--f2);cursor:pointer;transition:background .2s}
.seg button.on{background:var(--cube);color:#fff}
.count{margin-left:auto;color:var(--mute);font-size:.92rem}
.ban{--c:#8a96b0;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:16px 18px 16px 22px;margin-bottom:12px;border-radius:20px;background:var(--deep);position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.ban::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)}
.ban:hover{transform:translateX(4px);box-shadow:0 12px 30px var(--shadow)}
.s-active{--c:#ff6b6b}.s-removed{--c:var(--leaf)}.s-kick{--c:#ffc24a}.s-expired{--c:#8a96b0}
.ban .face{width:52px;height:52px;border-radius:12px;image-rendering:pixelated;background:var(--deep2);box-shadow:0 0 0 3px var(--c);display:block}
.btop{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.btop strong{font:400 1.1rem var(--f1);color:var(--paper);overflow-wrap:anywhere}
.btop a,.meta a{color:inherit;text-decoration:none}
.btop a:hover,.meta a:hover{color:var(--ice)}
.back{margin:0 0 18px}.back a{color:var(--ice);font-weight:600;text-decoration:none}
.phead{display:flex;align-items:center;gap:22px;margin:4px 0 8px}
.pface{width:112px;height:112px;border-radius:26px;image-rendering:pixelated;background:var(--deep2);box-shadow:0 0 0 4px color-mix(in srgb,var(--cube) 35%,transparent)}
.phead h1{margin:0}
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pchip{padding:5px 12px;border-radius:999px;background:var(--deep);border:2px solid var(--deep2);font-weight:600;font-size:.9rem;color:var(--paper)}
.pchip.on{background:color-mix(in srgb,var(--cube) 18%,var(--deep));border-color:transparent;color:var(--ice)}
.psec{margin:32px 0 14px}
@media(max-width:640px){.phead{align-items:flex-start}.pface{width:88px;height:88px}}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;font-weight:600;font-size:.8rem;color:var(--paper);background:color-mix(in srgb,var(--c) 28%,transparent)}
.chip.kind{background:var(--deep2)}
.s-active .chip.stat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);animation:pr 1.8s infinite}
@keyframes pr{0%{box-shadow:0 0 0 0 rgba(255,107,107,.6)}100%{box-shadow:0 0 0 8px rgba(255,107,107,0)}}
.why{margin:8px 0 6px!important;color:var(--paper)!important;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.open .why{display:block;-webkit-line-clamp:unset}
.meta{display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--mute);font-size:.88rem}.meta b{color:var(--paper);font-weight:600}
.sk{height:88px;border-radius:20px;margin-bottom:12px;background:linear-gradient(100deg,var(--deep) 30%,var(--deep2) 50%,var(--deep) 70%);background-size:200% 100%;animation:sk 1.3s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.bl-msg{padding:40px 20px;text-align:center;background:var(--deep);border-radius:20px;color:var(--mute)}
.pager{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin-top:24px;color:var(--mute)}
.pager button{border:0;border-radius:999px;padding:10px 22px;background:var(--cube);color:#fff;font:600 .95rem var(--f2);cursor:pointer;transition:transform .2s}.pager button:hover:not(:disabled){transform:translateY(-2px)}.pager button:disabled{opacity:.35;cursor:default}
@media(max-width:760px){.tiles{grid-template-columns:repeat(2,1fr)}.count{margin-left:0;width:100%}.ban{padding:14px 14px 14px 18px;gap:12px}.ban .face{width:44px;height:44px}}

/* navbar flottante */
nav{inset:16px auto auto 50%;translate:-50% 0;width:min(1100px,calc(100% - 24px));padding:8px 10px 8px 20px;border-radius:999px;background:var(--nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--nav-line);box-shadow:0 12px 40px var(--shadow);animation:navin .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes navin{from{opacity:0;margin-top:-40px}}
nav.solid{background:var(--nav-solid);box-shadow:0 16px 50px var(--shadow)}
nav .wrap{width:100%;margin:0;gap:16px}
.menu{margin-inline:auto}
.navr{display:flex;align-items:center;gap:10px}
.sanc,.theme{position:relative;width:46px;height:46px;flex:0 0 46px;border-radius:15px;display:grid;place-items:center;background:var(--nav-btn);border:2px solid var(--nav-btn-line);color:var(--ice);text-decoration:none;transition:background .2s,border-color .2s,transform .2s;padding:0;cursor:pointer}
.sanc:hover,.theme:hover{border-color:var(--ice);background:var(--nav-btn-hover);transform:translateY(-2px)}
.sanc:hover svg,.theme:hover svg{animation:hit .5s ease-out}
@keyframes hit{40%{rotate:-30deg}70%{rotate:8deg}}
.sanc.on{background:var(--cube);border-color:var(--cube);color:#fff}
.sanc::after,.theme::after{content:attr(data-tip);position:absolute;top:calc(100% + 12px);right:0;padding:5px 12px;border-radius:8px;background:var(--paper);color:var(--night);font:600 .8rem var(--f2);opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap}
.sanc:hover::after,.sanc:focus-visible::after,.theme:hover::after,.theme:focus-visible::after{opacity:1}
.theme .moon{display:none}
.burger{width:46px;height:46px;border-radius:15px;background:var(--nav-btn);border:2px solid var(--nav-line)}
@media(max-width:1000px){.menu{gap:16px}.menu a{font-size:.92rem}}
@media(max-width:860px){
 .burger{display:block}
 .menu{margin:0;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;gap:0;background:var(--deep);padding:8px 24px;border-radius:26px;border:1px solid var(--nav-line);box-shadow:0 20px 50px var(--shadow);clip-path:inset(0 0 100% 0 round 26px);transition:clip-path .3s}
 .menu.open{clip-path:inset(0 round 26px)}
 .menu a{display:block;padding:14px 0;font-size:1.1rem}
 .navr{margin-left:auto}
}

/* thème clair */
html[data-theme="light"]{color-scheme:light;--night:#f3f6fb;--deep:#fff;--deep2:#e3ebf6;--paper:#14233f;--mute:#4a5e80;--soft:#4a5e80;--cube:#1d6fe6;--ice:#0c6eae;--leaf:#2f7d12;--wave:#0c7d6c;--accent-blue:#1d6fe6;--fox:#c65a12;--nav:rgba(255,255,255,.9);--nav-solid:rgba(255,255,255,.97);--nav-line:rgba(20,40,80,.12);--nav-btn:#eef3fb;--nav-btn-hover:#e2ebf8;--nav-btn-line:rgba(20,40,80,.16);--footer:#e6eef8;--old-2:#fff6ee;--tag-bg:rgba(20,40,80,.08);--block:#d5e3f5;--block-alt:#c5d6ee;--block-line:rgba(255,255,255,.85);--shadow:rgba(20,40,80,.14)}
html[data-theme="light"] .hero h1,html[data-theme="light"] .legal h1,html[data-theme="light"] .stage h1,html[data-theme="light"] .misscode{background:linear-gradient(100deg,#16325c 0%,#1d6fe6 42%,#0c7d6c 72%,#2f7d12 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="light"] .btn.leaf,html[data-theme="light"] .btn.wave,html[data-theme="light"] .dcard.srv .go,html[data-theme="light"] .dcard.dev .go,html[data-theme="light"] .ip button,html[data-theme="light"] .steps li::before{color:#fff}
html[data-theme="light"] .tile[data-type="all"]{--c:#1d6fe6}
html[data-theme="light"] .tile[data-type="bans"]{--c:#d93636}
html[data-theme="light"] .tile[data-type="mutes"]{--c:#a87408}
html[data-theme="light"] .tile[data-type="kicks"]{--c:#0c6eae}
html[data-theme="light"] .card,html[data-theme="light"] .dcard,html[data-theme="light"] .steps li,html[data-theme="light"] .member,html[data-theme="light"] .tile,html[data-theme="light"] .ban{box-shadow:0 1px 2px rgba(20,40,80,.04),0 10px 24px rgba(20,40,80,.06)}
html[data-theme="light"] .theme .sun{display:none}
html[data-theme="light"] .theme .moon{display:block}