:root{--night:#08142e;--deep:#0f2146;--deep2:#16305f;--paper:#eef4fc;--mute:#b1c2e3;--cube:#2f8bff;--ice:#8fdcff;--leaf:#7ccf3f;--wave:#2fd4b5;--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}
body{background:var(--night);color:var(--paper);font:400 1.05rem/1.65 var(--f2);overflow-x:hidden}
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 rgba(0,0,0,.35)}
.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 rgba(143,220,255,.45);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 rgba(0,0,0,.4)}
.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:rgba(255,255,255,.1);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}
.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}
.disc{display:flex;flex-wrap:wrap;gap:14px}.disc .btn:not(.main){background:var(--deep);border-color:var(--deep2)}.disc .btn:not(.main):hover{border-color:var(--cube)}
/* pied de page + legal */
footer{padding:50px 0 60px;background:#050d20;color:var(--mute);font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 50px;justify-content:space-between;align-items:center}
footer ul{display:flex;gap:20px;flex-wrap:wrap;list-style:none;padding:0}footer a:hover{color:var(--paper)}
.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)}
.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:#ff8a3d;margin-top:26px;border-radius:28px;border:2px dashed rgba(255,138,61,.5);background:linear-gradient(135deg,var(--deep),#12234a);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(64px,12vw,92px);filter:saturate(.75);transition:rotate .4s}.old:hover .foxico{rotate:-8deg;scale:1.06}
@media(max-width:560px){.old{grid-template-columns:1fr}}
/* equipe */
.team{display:flex;flex-wrap:wrap;gap:22px}
.member{display:flex;align-items:center;gap:20px;padding:22px 30px 22px 22px;border-radius:22px 22px 22px 60px;background:var(--deep);border-top:4px solid var(--cube);transition:transform .3s,box-shadow .3s}
.member:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.head{width:88px;height:88px;border-radius:16px;image-rendering:pixelated;background:var(--deep2);box-shadow:0 0 0 3px var(--ice),0 10px 26px rgba(47,139,255,.4);rotate:-4deg;transition:rotate .3s,scale .3s}
.member:hover .head{rotate:4deg;scale:1.08}
.member h3{font-size:1.4rem}.role{display:inline-block;margin-top:6px;padding:3px 12px;border-radius:999px;background:rgba(47,139,255,.2);color:var(--ice);font-weight:600;font-size:.9rem}
.member{align-items:flex-start;max-width:640px}
.member p{color:var(--mute);margin-top:12px;max-width:46ch}
@media(max-width:560px){.member{flex-direction:column;border-radius:22px;padding:22px}}

/* 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:#6fb4ff}#discord .sec-title{color:var(--wave)}
.sub{color:#c4d2ec}
.vul h3{color:var(--leaf)}.riv h3{color:var(--wave)}.old h3{color:#ff8a3d}
.tag{color:var(--paper)}
.about div:nth-child(1) h3{color:var(--leaf)}.about div:nth-child(2) h3{color:#6fb4ff}.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:#c4d2ec}
.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::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 rgba(0,0,0,.35)}
.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}
.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)}
.s-active .chip::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:rgba(15,33,70,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(143,220,255,.2);box-shadow:0 12px 40px rgba(0,0,0,.35);animation:navin .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes navin{from{opacity:0;margin-top:-40px}}
nav.solid{background:rgba(8,20,46,.9);box-shadow:0 16px 50px rgba(0,0,0,.5)}
nav .wrap{width:100%;margin:0;gap:16px}
.menu{margin-inline:auto}
.navr{display:flex;align-items:center;gap:10px}
.sanc{position:relative;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:#0b1a3a;border:2px solid rgba(143,220,255,.35);color:var(--ice);text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.sanc:hover{border-color:var(--ice);background:#12285a;transform:translateY(-2px)}
.sanc: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{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}
.sanc:hover::after,.sanc:focus-visible::after{opacity:1}
.burger{width:46px;height:46px;border-radius:15px;background:#0b1a3a;border:2px solid rgba(143,220,255,.2)}
@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 rgba(143,220,255,.2);box-shadow:0 20px 50px rgba(0,0,0,.5);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}
}