:root{
  --header-h: 90px;
  --wrap-max: 1200px;
  --block-max: 1040px;
  --r: 14px;
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --bg-0: #0a0d12;
  --bg-1: #0f141a;
  --bg-2: #151b22;
  --glass: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.08);
  --txt: #e8eef7;
  --muted: #9aa6b2;
  --accent: #7c3aed;
  --accent-2: #4c1d95;
  --sh-1: 0 6px 18px rgba(0,0,0,.35);
  --sh-2: 0 12px 36px rgba(0,0,0,.45);
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:100%; }
body{
  margin:0; min-height:100vh;
  color:var(--txt); font-family:var(--font); line-height:1.6;
  background:
    radial-gradient(1200px 600px at 5% -10%, rgba(124,58,237,.12), transparent 60%),
    radial-gradient(1200px 600px at 100% 0%, rgba(76,29,149,.10), transparent 60%),
    linear-gradient(180deg, #090c10 0%, var(--bg-0) 18%, var(--bg-0) 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body::before,
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
}
body::before{
  background:
    radial-gradient(120vw 90vh at 50% 20%, transparent 40%, rgba(0,0,0,.35) 100%);
  mix-blend-mode:multiply;
}
body::after{
  background-image:
    radial-gradient(1px 1px at 25% 12%, rgba(255,255,255,.03) 0, transparent 80%),
    radial-gradient(1px 1px at 75% 48%, rgba(255,255,255,.025) 0, transparent 80%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.02) 0, transparent 80%),
    linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:auto, auto, auto, 100% 2px;
  opacity:.35;
}
.page-ambient-sweep{
  position:fixed; inset:auto -40% 10% -40%;
  height:140px; z-index:-1; pointer-events:none; filter:blur(16px);
  background: radial-gradient(800px 120px at 50% 50%, rgba(124,58,237,.12), transparent 60%);
  animation: sweep 5.5s linear infinite;
}
@keyframes sweep{
  0%{ transform:translateX(-40%) }
  100%{ transform:translateX(40%) }
}

.container{
  width:100%; max-width:var(--wrap-max);
  margin: calc(var(--header-h) + 32px) auto 32px;
  padding: 0 24px;
}
.container > h1,
.container > .subtitle,
.container > hr,
.container > .content{
  max-width:var(--block-max); margin-left:auto; margin-right:auto;
}
h1{
  font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.2rem);
  font-weight:800; letter-spacing:.2px; margin:0 0 var(--sp-2);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.subtitle{
  font-size:.98rem; color:var(--muted);
  margin:0 0 var(--sp-5); letter-spacing:.02em;
}
hr{
  border:0; height:1px; position:relative; margin: var(--sp-5) 0;
  background: linear-gradient(90deg, transparent, var(--stroke), transparent);
}
hr::after{
  content:""; position:absolute; left:0; top:-1px; width:84px; height:3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  filter: drop-shadow(0 0 10px rgba(124,58,237,.35));
}
.content{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:var(--sp-6); margin-top:2.25rem;
}
.sidebar{
  display:flex; flex-direction:column; gap:var(--sp-4);
  position:sticky; top:calc(var(--header-h) + 16px); align-self:start;
}
.menu-button{
  position:relative; overflow:hidden;
  border:1px solid var(--stroke);
  background:
    linear-gradient(180deg, var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)) border-box;
  color:var(--muted);
  padding:.9rem 1rem; font-size:.98rem; font-weight:700; text-align:left;
  border-radius:12px; cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, background .25s ease, color .2s ease;
  will-change:transform; outline:none;
}
.menu-button:hover{
  transform:translateY(-2px);
  color:#fff; border-color:rgba(255,255,255,.14);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.menu-button:focus-visible{
  color:#fff; border-color:rgba(124,58,237,.65);
  box-shadow:0 0 0 3px rgba(124,58,237,.18);
}
.menu-button.active{
  color:#fff; border-color:rgba(124,58,237,.6);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(124,58,237,.12), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.menu-button.active::before{
  content:""; position:absolute; left:-2px; top:10px; bottom:10px; width:3px;
  border-radius:2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  filter: drop-shadow(0 0 8px rgba(124,58,237,.55));
}
.main-content{
  display:flex; flex-direction:column; gap:var(--sp-6);
}
.card{
  position:relative; overflow:clip;
  background: color-mix(in srgb, var(--bg-1) 92%, var(--accent) 0%);
  border:1px solid var(--stroke); border-radius:var(--r);
  padding: clamp(1rem, .7rem + .8vw, 1.5rem);
  box-shadow:var(--sh-1); backdrop-filter: blur(8px); transform:translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .2s ease, background .25s ease;
}
.card::before{
  content:""; position:absolute; inset:-1px -1px auto auto; width:140px; height:140px;
  background: radial-gradient(120px 120px at 100% 0%, rgba(124,58,237,.12), transparent 60%);
  filter: blur(18px); pointer-events:none;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: rgba(255,255,255,.12);
}
.input-group{
  display:flex; flex-direction:column; gap:var(--sp-2);
  margin-bottom:var(--sp-4);
}
.input-label{
  font-size:.85rem; color:var(--muted); user-select:none; letter-spacing:.02em;
}
input[type="text"],
input[type="email"]{
  width:100%; padding:.85rem 1rem; font-size:1rem; color:var(--txt);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:1px solid var(--stroke); border-radius:12px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .25s ease, transform .06s ease;
}
input[type="text"]:hover,
input[type="email"]:hover{ border-color: rgba(255,255,255,.14); }
input[type="text"]:focus,
input[type="email"]:focus{
  border-color: rgba(124,58,237,.65);
  box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}
input[readonly]{ opacity:.85; cursor:default; }
.save-row{
  margin-top:var(--sp-4);
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
}
.save-btn{
  appearance:none; border:0; border-radius:12px;
  padding:.9rem 1.25rem; font-size:1rem; font-weight:800; letter-spacing:.02em;
  color:#fff; cursor:pointer; transform:translateZ(0);
  background:
    radial-gradient(160% 120% at 0% 0%, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 6px 16px rgba(124,58,237,.25), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .12s ease, box-shadow .18s ease, filter .2s ease, background .25s ease;
  position:relative; overflow:hidden;
}
.save-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(124,58,237,.35), inset 0 0 0 1px rgba(255,255,255,.1);
  filter:brightness(1.03);
}
.save-btn:active{ transform:translateY(0); }
.save-btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.save-loader{
  width:26px; height:26px;
  border:3px solid rgba(255,255,255,.18); border-top-color:#fff;
  border-radius:50%; animation: spin .7s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.25));
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.save-status{ font-size:.92rem; color:var(--muted); letter-spacing:.01em; }
.save-status.ok{ color:#3ddb76; }
.save-status.err{ color:#ff5252; }
.info-text{ margin-top:var(--sp-4); color:var(--muted); font-size:.95rem; }
.premium-header{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.05rem; font-weight:800; color:var(--txt);
}
.premium-header svg{ width:20px; height:20px; color:var(--accent); }
.premium-text{ margin-top:.5rem; font-size:.98rem; color:var(--muted); }
.new-premium{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--sp-6); margin-top:var(--sp-4); align-items:stretch;
}
.plan-card{
  height:100%; display:flex; flex-direction:column; position:relative; overflow:clip;
  padding:clamp(1rem, .7rem + .8vw, 1.5rem);
  border-radius:16px;
  background:var(--glass);
  border:1px solid var(--stroke);
  box-shadow:var(--sh-1); backdrop-filter: blur(8px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .2s ease, background .25s ease;
}
.plan-card::before{
  content:""; position:absolute; inset:auto -20% -30% auto; width:220px; height:220px;
  background: radial-gradient(140px 140px at 100% 100%, rgba(124,58,237,.15), transparent 60%);
  filter:blur(18px); pointer-events:none;
}
.plan-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-2);
  border-color:rgba(255,255,255,.12);
}
.plan-card.highlight {
  border: 2px solid var(--accent);
  box-shadow: 0 0 25px rgba(124,58,237,.45), 0 10px 28px rgba(0,0,0,.55);
  z-index: 2;
  position: relative;
}

.plan-card.highlight::after {
  content: "Populaire";
  position: absolute;
  top: 10px;
  right: 10px; /* bien à l’intérieur, pas collé dehors */
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .3rem .8rem;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}

.plan-head{ margin-bottom:var(--sp-4); }
.plan-title{ font-size:1.25rem; font-weight:900; margin:0 0 .25rem; letter-spacing:.01em; }
.plan-price{ font-size:1.05rem; color:var(--accent); font-weight:800; margin:0; }
.plan-price span{ font-size:.9rem; opacity:.8; }
.plan-features{
  list-style:none; margin:var(--sp-4) 0 var(--sp-6); padding:0;
  font-size:.98rem; line-height:1.5; color:var(--txt);
}
.plan-features li{
  position:relative; padding-left:1.3rem; margin-bottom:.5rem;
}
.plan-features li::before{
  content:""; position:absolute; left:0; top:.45rem; width:.6rem; height:.6rem; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, #fff, #fff0 40%),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 0 10px rgba(124,58,237,.4);
}
.plan-cta{
  margin-top:auto; width:100%; padding:.9rem 1rem;
  font-size:1rem; font-weight:900; border:0; border-radius:12px; color:#fff; cursor:pointer;
  background:
    radial-gradient(160% 120% at 0% 0%, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow:0 8px 22px rgba(124,58,237,.28), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .12s ease, box-shadow .18s ease, filter .2s ease;
}
.plan-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(124,58,237,.36), inset 0 0 0 1px rgba(255,255,255,.12);
  filter:brightness(1.04);
}
.skeleton{
  position:relative; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.06);
}
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  transform:translateX(-100%); animation: shimmer 1.1s linear infinite;
}
.hidden { display: none; }
.discord-btn {
  background: linear-gradient(90deg, #5865F2, #4752C4);
  border: none;
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.discord-btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* --- SUPPORT SECTION --- */
.support-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.25rem, 1rem + 0.6vw, 1.75rem);
  background: color-mix(in srgb, var(--bg-1) 92%, var(--accent) 0%);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  backdrop-filter: blur(8px);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .2s ease, background .25s ease;
  position: relative;
  overflow: clip;
}

/* effet violet brillant dans le coin supérieur droit */
.support-card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto auto;
  width: 140px;
  height: 140px;
  background: radial-gradient(120px 120px at 100% 0%, rgba(124, 58, 237, .12), transparent 60%);
  filter: blur(18px);
  pointer-events: none;
}

/* hover identique aux autres .card */
.support-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: rgba(255, 255, 255, .12);
}

/* --- Texte --- */
.support-title {
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  margin: 0;
}

.support-desc {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* --- Bouton Discord (identique à ton style global violet) --- */
.discord-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .9rem 1.2rem;
  font-weight: 800;
  font-size: .98rem;
  border: 0;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transform: translateZ(0);
  background:
    radial-gradient(160% 120% at 0% 0%, rgba(255, 255, 255, .12), transparent 40%),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 6px 16px rgba(124, 58, 237, .25), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .12s ease, box-shadow .18s ease, filter .2s ease, background .25s ease;
}

.discord-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(124, 58, 237, .35), inset 0 0 0 1px rgba(255, 255, 255, .1);
  filter: brightness(1.03);
}

.discord-btn i {
  font-size: 18px;
}

@media (max-width: 700px) {
  .support-card {
    text-align: center;
  }
  .discord-btn {
    align-self: center;
    justify-content: center;
    width: 100%;
  }
}

@keyframes shimmer{ to{ transform:translateX(100%) } }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.03); }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #1b2129, #141a22);
  border:2px solid transparent; background-clip:padding-box; border-radius:10px;
}
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, #202732, #161d26); }
@media (max-width: 1100px){
  .content{ grid-template-columns:1fr; gap:var(--sp-5); }
  .sidebar{ position:static; flex-direction:row; flex-wrap:wrap; gap:var(--sp-3); }
  .menu-button{ flex:1 1 180px; text-align:center; padding:.85rem 1rem; }
}
@media (max-width: 745px){
  .container{ padding:0 16px; }
  .card{ padding:1rem; }
  .save-row{ flex-direction:column; align-items:stretch; gap:var(--sp-3); }
  .save-btn{ width:100%; }
  .new-premium{ grid-template-columns:1fr; }
}
:focus-visible{
  outline:3px solid rgba(124,58,237,.25);
  outline-offset:2px; border-radius:10px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}
.hidden{ display:none !important; }