:root{
  --b:#000;--w:#fff;--g:#a6a6a6;
  --glass:rgba(255,255,255,.07);
  --glass-hi:rgba(255,255,255,.14);
  --edge:rgba(255,255,255,.2);
  --pad:clamp(1.25rem,5vw,4rem);
  --r:28px
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:"Bricolage Grotesque",system-ui,sans-serif;background:var(--b);color:var(--w);line-height:1.55;font-size:1.0625rem;min-height:100vh;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* fond : halos blancs flous derrière le verre */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#000}
.orb{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.o1{width:46vw;height:46vw;left:-10vw;top:-8vw;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 68%);animation:d1 22s ease-in-out infinite alternate}
.o2{width:40vw;height:40vw;right:-8vw;top:30vh;background:radial-gradient(circle,rgba(255,255,255,.4),rgba(255,255,255,0) 68%);animation:d2 28s ease-in-out infinite alternate}
.o3{width:52vw;height:52vw;left:20vw;bottom:-20vw;background:radial-gradient(circle,rgba(200,200,200,.35),rgba(255,255,255,0) 68%);animation:d1 32s ease-in-out infinite alternate-reverse}
@keyframes d1{to{transform:translate(12vw,10vh) scale(1.15)}}
@keyframes d2{to{transform:translate(-14vw,-8vh) scale(.9)}}

/* verre */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  border:1px solid var(--edge);
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 20px 60px -20px rgba(0,0,0,.8)
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(40,40,40,.92)}}

section{padding:clamp(3rem,8vw,6rem) var(--pad)}
.wrap{max-width:1180px;margin:0 auto}

/* nav flottante */
nav.top{position:fixed;top:1rem;left:50%;transform:translateX(-50%);width:min(960px,calc(100% - 2rem));z-index:10;display:flex;justify-content:space-between;align-items:center;padding:.6rem .7rem .6rem 1.4rem;border-radius:999px}
nav.top .logo{font-weight:800;font-size:1.2rem;text-decoration:none;letter-spacing:-.02em}
nav.top ul{display:flex;gap:1.5rem;list-style:none;padding:0;align-items:center}
nav.top a{text-decoration:none}
nav.top li a:not(.btn):hover{text-decoration:underline;text-underline-offset:6px}

/* boutons */
.btn{display:inline-block;padding:.85rem 1.6rem;border-radius:999px;font-weight:700;text-decoration:none;border:1px solid var(--edge);transition:background .2s,color .2s,transform .2s}
.btn.fill{background:var(--w);color:var(--b);border-color:var(--w);box-shadow:0 0 40px rgba(255,255,255,.35)}
.btn.fill:hover{background:rgba(255,255,255,.8)}
.btn.line{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn.line:hover{background:var(--glass-hi)}
nav.top .btn{padding:.55rem 1.2rem;font-size:.95rem}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:6.5rem}
.hero .panel{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:center;padding:clamp(1.75rem,5vw,4.5rem);width:100%}
h1{font-size:clamp(3rem,8vw,6.8rem);line-height:.93;font-weight:800;letter-spacing:-.045em;font-variation-settings:"opsz" 96}
.lead{max-width:32rem;margin:1.5rem 0 2.25rem;font-size:1.2rem;color:#d4d4d4}
.cta{display:flex;gap:.9rem;flex-wrap:wrap}
.scarab-wrap{justify-self:center;width:100%;max-width:380px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.02) 70%);border:1px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.scarab{width:68%;filter:drop-shadow(0 0 22px rgba(255,255,255,.55));animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.95)}to{opacity:1;transform:none}}

/* titres */
h2{font-size:clamp(2rem,4.5vw,3.5rem);line-height:1.02;font-weight:800;letter-spacing:-.035em;max-width:17ch}
.head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:2.5rem}
.head p{color:var(--g);max-width:30rem}

/* fonctionnalités */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.card{padding:1.75rem;transition:background .25s,transform .25s,border-color .25s}
.card:hover{background:var(--glass-hi);border-color:rgba(255,255,255,.4);transform:translateY(-4px)}
.card h3{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem}
.card p{color:var(--g)}

/* commandes */
.cmds{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:2.5rem}
.cmd{padding:1.4rem 1.6rem;border-radius:20px}
.cmd b{display:block;font-size:1.3rem;font-weight:700;margin-bottom:.2rem}
.cmd span{color:var(--g)}

/* fin */
.end .panel{text-align:center;padding:clamp(2.5rem,7vw,5.5rem) var(--pad)}
.end h2{margin:0 auto 1.1rem;max-width:14ch}
.end p{max-width:34rem;margin:0 auto 2.25rem;color:#d4d4d4}

footer{padding:0 var(--pad) 2rem}
footer .glass{max-width:1180px;margin:0 auto;border-radius:999px;padding:1rem 1.75rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--g);font-size:.95rem}
footer nav{display:flex;gap:1.5rem}
footer a{color:var(--w)}

@media(max-width:860px){
  .hero .panel,.head{grid-template-columns:1fr}
  .scarab-wrap{max-width:220px;order:-1;justify-self:start}
  .grid{grid-template-columns:1fr 1fr}
  .cmds{grid-template-columns:1fr}
}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.orb,.scarab{animation:none}html{scroll-behavior:auto}*{transition:none!important}}

/* pages séparées */
.page{padding-top:8.5rem}
.ph{font-size:clamp(2.5rem,6vw,4.8rem);line-height:.98;font-weight:800;letter-spacing:-.04em;max-width:16ch}
.sub{color:var(--g);max-width:34rem;margin:1.25rem 0 2.75rem;font-size:1.15rem}
nav.top li a[aria-current]:not(.btn){text-decoration:underline;text-underline-offset:6px}
.tease{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.5rem}
.tease a{display:block;text-decoration:none;padding:2rem;transition:background .25s,transform .25s,border-color .25s}
.tease a:hover{background:var(--glass-hi);border-color:rgba(255,255,255,.4);transform:translateY(-4px)}
.tease h3{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem}
.tease p{color:var(--g);margin-bottom:1.25rem}
.tease u{text-underline-offset:5px;font-weight:600}
@media(max-width:860px){.tease{grid-template-columns:1fr}}
@media(max-width:560px){nav.top li:last-child{display:none}nav.top ul{gap:1rem}nav.top{padding-left:1.1rem}}

/* logo image : garde les proportions, rond comme le cercle */
img.scarab{width:68%;height:auto;aspect-ratio:1/1;object-fit:contain;border-radius:50%;filter:drop-shadow(0 0 22px rgba(255,255,255,.35))}

/* le logo remplit tout le rond */
.scarab-wrap{border:0;background:none;box-shadow:0 0 70px rgba(255,255,255,.28)}
img.scarab{width:100%;height:100%;filter:none}

/* zoom : le disque noir du logo remplit tout le rond */
.scarab-wrap{overflow:hidden}
img.scarab{transform:scale(1.28)}
@media(prefers-reduced-motion:no-preference){img.scarab{animation:none}}

/* vitrine : texte + aperçu Discord en alternance */
.shows{margin-top:2rem}
.show{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center;padding:2.5rem 0}
.show:nth-child(even) .txt{order:2}
.show h3{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:.8rem}
.show p{color:var(--g);max-width:30rem;margin-bottom:1.5rem}
.dc{padding:1.2rem 1.3rem;border-radius:20px;font-size:.95rem}
.msg{display:grid;grid-template-columns:40px 1fr;gap:.85rem}
.av{width:40px;height:40px;border-radius:50%;background:#000 url(logo.png) center/cover;border:1px solid var(--edge)}
.who{font-weight:700}
.badge{display:inline-block;background:#fff;color:#000;font-size:.65rem;font-weight:800;padding:.05rem .35rem;border-radius:4px;margin-left:.4rem;vertical-align:middle}
.time{color:var(--g);font-size:.75rem;margin-left:.5rem;font-weight:400}
.mention{background:rgba(255,255,255,.18);border-radius:4px;padding:0 .3rem}
.emb{border-left:4px solid #fff;background:rgba(255,255,255,.06);border-radius:6px;padding:.75rem .95rem;margin-top:.45rem}
.emb b{display:block;margin-bottom:.15rem}
.fields{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:.5rem}
.fields small{display:block;color:var(--g);font-size:.72rem;font-weight:700}
.dbtn{display:inline-block;background:rgba(255,255,255,.14);border:1px solid var(--edge);border-radius:6px;padding:.35rem .85rem;font-size:.85rem;font-weight:600;margin:.5rem .4rem 0 0}
.dbtn.w{background:#fff;color:#000;border-color:#fff}
.lvl{background:#000;border:1px solid var(--edge);border-radius:10px;padding:.9rem 1.1rem;margin-top:.5rem;max-width:340px}
.lvl span{color:var(--g);font-size:.85rem}
.bar{height:10px;border-radius:99px;background:rgba(255,255,255,.2);margin-top:.6rem;overflow:hidden}
.bar i{display:block;height:100%;width:78%;background:#fff;border-radius:99px}
@media(max-width:860px){.show{grid-template-columns:1fr;gap:1.5rem}.show:nth-child(even) .txt{order:0}}

/* tes captures dans la vitrine */
.shot{padding:.6rem;border-radius:24px}
.shot img{display:block;width:100%;height:auto;border-radius:18px}

/* page commandes : 3 colonnes */
.cmds.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.cmds.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cmds.three{grid-template-columns:1fr}}

/* mobile : 3 liens dans la barre */
@media(max-width:560px){nav.top ul{gap:.75rem;font-size:.85rem}nav.top .logo{font-size:1rem}}

/* premium */
.prem{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);padding:clamp(2rem,5vw,4rem);align-items:center}
.prem h2{max-width:12ch;margin-bottom:1rem}
.prem p{color:#d4d4d4;max-width:28rem}
.price{font-size:2.8rem;font-weight:800;letter-spacing:-.04em;margin:1.5rem 0 1.5rem;line-height:1}
.price small{font-size:1rem;color:var(--g);font-weight:500;letter-spacing:0}
.perks{list-style:none;padding:0;display:grid;gap:1rem}
.perks li{display:flex;gap:.8rem;align-items:flex-start}
.perks li::before{content:"✓";display:grid;place-items:center;width:1.6rem;height:1.6rem;flex:none;border-radius:50%;background:#fff;color:#000;font-weight:800;font-size:.85rem;margin-top:.1rem}
.fine{margin-top:1.25rem;font-size:.9rem;color:var(--g)}
@media(max-width:860px){.prem{grid-template-columns:1fr}}

/* 3 abonnements */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.plan{padding:2rem;display:flex;flex-direction:column;gap:1.25rem}
.plan h3{font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.plan .price{margin:0}
.plan .perks{flex:1}
.plan .btn{text-align:center}
#premium .fine a{color:var(--w)}
@media(max-width:860px){.plans{grid-template-columns:1fr}}

/* mobile : 4 liens au lieu de 5 (le logo mène déjà à l'accueil) */
@media(max-width:560px){nav.top li:first-child{display:none}}

/* animation d'apparition au scroll (fade + slide + léger zoom, comme le .fade-in d'Arcane) */
.fade-in{opacity:0;transform:translateY(28px) scale(.94);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.fade-in.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fade-in{opacity:1;transform:none;transition:none}}