/* Layout : en-tête fixe (logo / nav en pilule / actions), une vue par onglet, cartes sombres avec halo corail sur les boutons — fidèle à la maquette Figma Ryusei. Thème sombre unique, choisi volontairement. */
:root{
  --bg:#171717;
  --card:#1c1c1c;
  --card-hi:#222121;
  --line:#2a2928;
  --fg:#ffffff;
  --muted:#8c8a88;
  --coral:#ff705c;
  --coral-glow:rgba(255,112,92,.45);
  --moon:#7fe6a4;
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font:inherit;cursor:pointer;border:0}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:8px}

/* En-tête */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-block:22px}
.logo{display:block;width:clamp(127.5px,9.36vw,169.92px)}
.logo img{display:block;width:100%;height:auto}
nav{display:flex;gap:4px;background:var(--card);border-radius:999px;padding:6px}
nav a{color:var(--muted);text-decoration:none;font-size:clamp(12.75px,0.9vw,15.84px);padding:10px clamp(11.9px,1.3vw,24.48px);border-radius:999px;transition:color .2s}
nav a:hover{color:#cfcdcb}
nav a[aria-current="page"]{color:var(--fg)}
.actions{display:flex;align-items:center;justify-content:flex-end;gap:clamp(10.2px,1.08vw,18.72px)}
.cart{position:relative;background:none;color:var(--fg);padding:4px;display:grid;place-items:center}
.cart svg{width:30px;height:30px}
.badge{position:absolute;right:-2px;bottom:2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#e8231b;color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.6,1)}
.badge.on{transform:scale(1)}
.login{display:flex;align-items:center;gap:10px}
.btn-pill{background:var(--coral);color:#fff;font-weight:500;font-size:clamp(11.9px,0.83vw,14.4px);padding:6px 16px;border-radius:999px;white-space:nowrap}
.icon-img{display:block;height:auto}
.steam{width:34px}
.discord{width:54px;margin-left:clamp(0px,1.8vw,34.56px)}

/* Vues */
main{padding-block:clamp(23.8px,2.88vw,40.32px) 80px}
.view{animation:in .35s ease both}
@keyframes in{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.head{text-align:center;margin-bottom:clamp(30.6px,3.6vw,51.84px)}
.head h1{font-size:clamp(34px,3.6vw,60.48px);font-weight:600;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
.head h1 em{font-style:normal;color:var(--coral)}
.head p{margin:6px 0 0;font-size:clamp(12.75px,0.94vw,15.84px);color:#e9e7e5}

/* Bouton principal */
.btn{display:inline-flex;justify-content:center;align-items:center;background:var(--coral);color:#fff;font-weight:600;border-radius:8px;box-shadow:0 0 26px 2px var(--coral-glow);transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 36px 6px var(--coral-glow)}
.btn:active{transform:translateY(0)}

/* Accueil */
.hero{text-align:center;padding-bottom:clamp(23.8px,2.52vw,37.44px);border-bottom:1px solid #d8d6d4;margin-bottom:clamp(34px,3.6vw,51.84px)}
.hero h1{font-size:clamp(28.9px,3.31vw,59.04px);font-weight:600;line-height:1.1;margin:0;text-wrap:balance}
.hero .brand{display:block;color:var(--coral);font-size:clamp(54.4px,6.05vw,106.56px);font-weight:600;line-height:1;letter-spacing:.01em}
.hero p{margin:clamp(15.3px,1.8vw,34.56px) 0 0;font-size:clamp(12.75px,1.22vw,21.6px)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,610px));justify-content:space-around;gap:32px}
.tile{background:linear-gradient(180deg,var(--card-hi),var(--card));border-radius:28px;padding:clamp(27.2px,2.88vw,46.08px) clamp(20.4px,2.16vw,40.32px) clamp(23.8px,1.66vw,21.6px);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.tile h2{font-size:clamp(25.5px,2.38vw,41.76px);font-weight:600;margin:0;line-height:1.15}
.tile p{margin:6px auto 0;max-width:30ch;font-size:clamp(11.9px,0.94vw,15.84px);color:#e9e7e5}
.tile .btn{width:100%;max-width:500px;margin-top:clamp(23.8px,2.16vw,37.44px);padding-block:clamp(10.2px,0.94vw,14.4px);font-size:clamp(15.3px,1.44vw,25.92px);text-transform:uppercase}

/* VIP */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(15.3px,2.45vw,51.84px);align-items:stretch}
.plan{position:relative;background:linear-gradient(180deg,var(--card-hi),var(--card));border-radius:32px;padding:clamp(23.8px,1.73vw,33.12px) clamp(18.7px,1.73vw,36px) clamp(23.8px,1.44vw,27.36px);display:flex;flex-direction:column;border:1px solid transparent}
.plan.best{border-color:var(--coral)}
.flag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--coral);color:#fff;font-weight:600;font-size:clamp(11.9px,0.86vw,15.84px);padding:6px clamp(17px,1.8vw,34.56px);border-radius:999px;box-shadow:0 0 26px var(--coral-glow);white-space:nowrap}
.price{font-size:clamp(28.9px,1.87vw,36px);font-weight:600;line-height:1}
.per{display:flex;align-items:center;gap:12px;color:var(--muted);font-weight:500;font-size:clamp(11.9px,0.72vw,14.4px);margin-top:6px;font-variant-numeric:tabular-nums}
.off{background:var(--coral);color:#fff;font-size:12px;font-weight:600;padding:1px 9px;border-radius:999px;box-shadow:0 0 14px var(--coral-glow)}
.perks{list-style:none;margin:clamp(17px,1.44vw,23.04px) 0 0;padding:0;display:grid;gap:8px}
.perks li{display:flex;align-items:center;gap:12px;font-weight:500;font-size:clamp(12.75px,0.83vw,15.84px)}
.perks svg{flex:none;width:18px;height:18px;color:var(--coral)}
.dur{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(10.2px,1.44vw,28.8px);margin:clamp(27.2px,2.16vw,37.44px) clamp(-25.5px,-1.15vw,-5.76px) 0}
.dur::before,.dur::after{content:"";height:2px;background:#e7e5e3}
.dur span{display:flex;align-items:center;gap:clamp(11.9px,1.15vw,23.04px);font-weight:600;font-size:clamp(15.3px,1.08vw,20.16px);text-transform:uppercase}
.dur b{color:var(--coral);font-size:clamp(35.7px,2.16vw,44.64px);font-weight:600;line-height:1}
.plan .btn{align-self:center;margin-top:auto;padding:clamp(8.5px,0.72vw,11.52px) clamp(18.7px,1.15vw,23.04px);font-size:clamp(15.3px,1.44vw,27.36px)}
.plan .spacer{height:clamp(30.6px,2.88vw,51.84px)}

/* Pierres de lune */
.stones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(17px,2.88vw,64.8px) clamp(15.3px,3.24vw,64.8px)}
.pack{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.pack .cost{font-size:clamp(26px,1.85vw,34px);font-weight:600;font-variant-numeric:tabular-nums;margin-bottom:-0.5em;line-height:1;position:relative;z-index:1}
.pack .box{width:100%;background:linear-gradient(180deg,var(--card-hi),var(--card));border-radius:28px;padding:28px clamp(13.6px,1.15vw,18.72px) 30px;display:flex;flex-direction:column;align-items:center;gap:14px;flex:1;border:1px solid transparent}
.pack .art{height:clamp(102px,6.48vw,122.4px);display:flex;align-items:center;justify-content:center;margin-top:18px;width:100%}
.pack .art img{max-height:clamp(89.25px,5.47vw,104.4px);width:auto;max-width:85%;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(60,190,130,.18));transition:transform .3s}
.pack:hover .art img{transform:translateY(-4px) scale(1.04)}
.amount{display:flex;align-items:center;gap:6px;font-size:clamp(32.3px,2.3vw,44.64px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.amount img{width:clamp(25.5px,1.87vw,34.56px);height:auto}
.pack .off{font-size:13px;min-height:22px;display:inline-grid;place-items:center}
.pack .off.none{visibility:hidden}
.pack .btn{margin-top:4px;padding:10px 14px;font-size:clamp(14.45px,1.08vw,20.16px);width:min(100%,280px)}
.pack.wide{grid-column:1/-1}
.pack.wide .box{flex-direction:row;justify-content:center;gap:clamp(17px,2.88vw,57.6px);padding:30px clamp(17px,2.88vw,43.2px);border-color:var(--coral)}
.pack.wide .art{margin-top:0;height:clamp(127.5px,8.64vw,151.2px);width:auto}
.pack.wide .art img{max-height:clamp(119px,7.92vw,140.4px)}
.pack.wide .info{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pack.wide .flag{top:0}
.pack.wide .cost{margin-bottom:0}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140%);background:#262524;border:1px solid var(--line);color:var(--fg);padding:12px 20px;border-radius:12px;font-weight:500;box-shadow:0 10px 40px rgba(0,0,0,.5);transition:transform .3s;z-index:40;white-space:nowrap}
.toast.on{transform:translate(-50%,0)}
.toast b{color:var(--coral);font-weight:600}

/* Panier */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:50}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--card);border-left:1px solid var(--line);z-index:60;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);padding:calc(22px + env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-right,0px)) calc(22px + env(safe-area-inset-bottom,0px)) 22px;box-shadow:-20px 0 60px rgba(0,0,0,.5)}
.drawer.on{transform:none}
.d-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line)}
.d-head h2{margin:0;font-size:26px;font-weight:600}
.d-head h2 em{font-style:normal;color:var(--coral)}
.x{background:none;color:var(--muted);width:40px;height:40px;border-radius:10px;font-size:26px;line-height:1}
.x:hover{color:var(--fg);background:var(--card-hi)}
.items{flex:1;overflow-y:auto;list-style:none;margin:0;padding:8px 0;display:flex;flex-direction:column}
.item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.thumb{width:64px;height:64px;border-radius:14px;background:var(--card-hi);display:grid;place-items:center;overflow:hidden}
.thumb img{max-width:80%;max-height:80%}
.thumb.vip{color:var(--coral);font-weight:700;font-size:18px}
.item .name{font-weight:600;font-size:15px;line-height:1.3}
.item .unit{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.qty{display:flex;align-items:center;gap:2px;margin-top:6px}
.qty button{width:28px;height:28px;border-radius:8px;background:var(--card-hi);color:var(--fg);font-size:16px;line-height:1}
.qty button:hover{background:#2c2b2a}
.qty span{min-width:28px;text-align:center;font-variant-numeric:tabular-nums;font-weight:500}
.item .right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.item .line{font-weight:600;font-variant-numeric:tabular-nums}
.rm{background:none;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:0}
.rm:hover{color:var(--coral)}
.empty{margin:auto;text-align:center;color:var(--muted);padding:40px 10px;display:grid;gap:14px;justify-items:center}
.empty img{width:90px;opacity:.6}
.empty .btn{padding:10px 22px;font-size:16px}
.promo{padding-top:16px;border-top:1px solid var(--line);display:grid;gap:8px}
.promo label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.promo .row{display:flex;gap:8px}
.promo input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--fg);font:inherit;font-size:15px;padding:11px 14px;text-transform:uppercase}
.promo input::placeholder{text-transform:none;color:#6c6a68}
.promo input:focus{outline:none;border-color:var(--coral)}
.promo .apply{background:var(--card-hi);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:0 18px;font-weight:600}
.promo .apply:hover{border-color:var(--coral)}
.msg{font-size:13px;min-height:18px}
.msg.ok{color:var(--moon)}
.msg.err{color:#ff8a7a}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,112,92,.12);border:1px solid rgba(255,112,92,.4);color:var(--fg);border-radius:999px;padding:4px 6px 4px 12px;font-size:13px;font-weight:600;justify-self:start}
.chip button{background:none;color:var(--muted);font-size:16px;width:22px;height:22px;border-radius:50%}
.chip button:hover{color:var(--fg)}
.totals{display:grid;gap:6px;padding:14px 0;font-variant-numeric:tabular-nums}
.totals div{display:flex;justify-content:space-between;color:#d9d7d5}
.totals .disc{color:var(--moon)}
.totals .grand{color:var(--fg);font-size:22px;font-weight:600;padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
.pay{width:100%;padding:14px;font-size:20px}
.pay[disabled]{opacity:.4;pointer-events:none;box-shadow:none}
.secure{text-align:center;color:var(--muted);font-size:12px;margin-top:10px}
.hint{color:#6c6a68;font-size:12px}

@media (max-width:1100px){
  .stones{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stones .pack:nth-child(13){grid-column:1/-1}
}
@media (max-width:900px){
  .bar{grid-template-columns:auto 1fr;row-gap:14px}
  nav{grid-column:1/-1;grid-row:2;justify-self:center}
  .discord{margin-left:0;width:56px}
  .plans{grid-template-columns:1fr;max-width:560px;margin:0 auto;row-gap:44px}
  .duo{grid-template-columns:1fr}
}
@media (max-width:640px){
  .stones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pack.wide .box{flex-direction:column}
  .pack.wide .info{align-items:center}
  .steam{display:none}
  .discord{width:46px}
  .cart svg{width:32px;height:32px}
  nav a{padding:8px 12px}
}
@media (max-width:420px){
  .login .btn-pill{padding:5px 12px}
  .logo{width:120px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.status{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 10px}
.status.err{color:#ff8a7a}
.who{display:flex;align-items:center;gap:8px;font-weight:500;font-size:clamp(11.05px,0.72vw,12.24px);white-space:nowrap}
.who button{background:none;color:var(--muted);font-size:13px;text-decoration:underline;padding:0}
.btn[disabled]{opacity:.5;pointer-events:none}
.pay-note{color:var(--muted);font-size:12px;text-align:center;margin-top:6px}
html,body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}

a.btn{text-decoration:none}
.plans{max-width:1100px;margin-left:auto;margin-right:auto}
.duo{max-width:1100px;margin-left:auto;margin-right:auto}
.pack.wide .cost{margin-bottom:0}