/* Base */
:root{
  /* EliteBoost palette: Noir & Or */
  --bg:#0A0A0A;
  --bg-alt:#0D0D0D;
  --text:#F3F6FB;
  --muted:#C0C0C0; /* texte secondaire gris argenté */
  --primary:#D4AF37; /* or */
  --accent:#F5E6A1; /* or pâle pour dégradés */
  --card:#111111;
  --border:rgba(255,255,255,0.14);
  --success:#27ae60;
  --shadow: 0 16px 38px rgba(0,0,0,0.5);
  --focus: rgba(212,175,55,0.6);
  --ring: 0 0 0 3px rgba(212,175,55,0.2);
}

/* Nav style */
.nav{background:rgba(7,12,26,0.8)}

/* Button primary halo */
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--accent));position:relative;isolation:isolate}
.btn-primary::before{
  content:"";position:absolute;inset:-8px;border-radius:14px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(212,175,55,0.35), rgba(245,230,161,0.0) 70%),
    radial-gradient(60% 60% at 60% 40%, rgba(245,230,161,0.25), rgba(212,175,55,0.0) 75%);
  filter:blur(10px);z-index:-1;animation:glowPulse 2.8s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.6}50%{opacity:.9}}
@media (prefers-reduced-motion: reduce){ .btn-primary::before{animation:none} }

/* Badge */
.badge{ border-color: var(--border); }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}
h1,h2,h3{font-family:'Poppins','Inter',sans-serif}
img{max-width:100%;display:block}
a{color:var(--text);text-decoration:none}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:80px 0}
.section.alt{background:var(--bg)}
.section__title{font-size:32px;margin:0 0 24px}
.lead{color:var(--muted)}
.small{font-size:12px}
.muted{color:var(--muted)}

/* Header */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,10,10,0.78);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav__row{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.logo{font-size:20px}
.brand__logo{height:52px;width:auto;display:block;object-fit:contain;border-radius:0;position:relative;z-index:1}
.brand__logoWrap{display:inline-block;position:relative;width:auto;height:auto;border-radius:0;padding:0;background:none}
.brand__logoWrap::after{display:none}
.brand__name{letter-spacing:0.3px}
.menu{display:flex;align-items:center;gap:14px}
.menu a{opacity:0.9}
.menu a:hover{opacity:1;color:var(--primary)}
.nav__toggle{display:none;background:transparent;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 12px;position:relative}
.nav__toggle:focus-visible{outline:2px solid var(--accent)}
.nav__burger{position:relative;display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:opacity .2s ease}
.nav__burger::before,.nav__burger::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--text);border-radius:2px;transition:transform .2s ease, top .2s ease}
.nav__burger::before{top:-6px}
.nav__burger::after{top:6px}
body.nav-open .nav__burger{opacity:0}
body.nav-open .nav__burger::before{top:0;transform:rotate(45deg)}
body.nav-open .nav__burger::after{top:0;transform:rotate(-45deg)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.nav__drawer{position:fixed;top:0;right:-100%;width:78%;max-width:340px;height:100vh;background:rgba(10,10,10,0.95);backdrop-filter:blur(8px);border-left:1px solid var(--border);box-shadow: -10px 0 30px rgba(0,0,0,0.4);transition:right .25s ease;z-index:90;padding:16px}
.nav__drawer .menu{flex-direction:column;align-items:flex-start;gap:10px}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);opacity:0;visibility:hidden;transition:opacity .2s ease, visibility .2s ease;z-index:80}
.backdrop.show{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}
body.nav-open .nav__drawer{right:0}
.nav__drawer.open{right:0}

/* Active nav link */
.menu a.active{color:var(--primary);opacity:1}
.nav__drawer .menu a.active{background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:10px;padding:8px 12px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:10px 16px;border:1px solid transparent;cursor:pointer;transition:transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;will-change:transform}
.btn:hover{transform:translateY(-1.5px);box-shadow:0 8px 22px rgba(0,0,0,0.28)}
.btn:active{transform:translateY(0);box-shadow:0 4px 12px rgba(0,0,0,0.18)}
.btn:focus-visible{outline:2px solid var(--focus); box-shadow: var(--ring)}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--accent));color:#121212}
.btn-primary:hover{filter:brightness(1.04)}
.btn-outline{border-color:var(--accent);color:var(--text)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn-discord{background:#5865F2;color:#fff;border-color:#5865F2}
.btn-discord:hover{filter:brightness(1.05)}

/* Layout helpers */
.grid-2{display:grid;grid-template-columns:1.1fr 0.9fr;gap:32px;align-items:center}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}
.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.footer__row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 0;border-top:1px solid var(--border)}
.footer__links{display:flex;gap:14px}
.footer__links a{opacity:0.9}
.footer__links a:hover{opacity:1}

/* Hero */
.hero h1{font-size:40px;margin:0 0 12px}
.gradient-text{background:linear-gradient(135deg,var(--text), rgba(255,255,255,0.75)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero{position:relative;overflow:hidden}
.hero__bg{position:absolute;inset:-10%;background:
  radial-gradient(1200px 600px at -10% 10%, rgba(212,175,55,0.18), transparent 60%),
  radial-gradient(800px 500px at 110% 10%, rgba(245,230,161,0.14), transparent 60%),
  radial-gradient(900px 500px at 50% 120%, rgba(212,175,55,0.10), transparent 60%);
  filter:saturate(110%);
  pointer-events:none;z-index:0}
.hero .container{position:relative;z-index:1}
.hween-decor{display:none}
:root[data-theme="halloween"] .hween-decor{display:block;position:absolute;inset:0;pointer-events:none;z-index:0;color:var(--accent)}
:root[data-theme="halloween"] .hween-web{position:absolute;top:0;left:0;width:180px;height:180px;opacity:.65}
:root[data-theme="halloween"] .hween-bat{position:absolute;top:30px;right:40px;width:72px;height:36px;animation:batFloat 4.5s ease-in-out infinite}
:root[data-theme="halloween"] .hween-bat--tr2{top:70px;right:90px;transform:scale(.8);animation-duration:5.2s;opacity:.8}
:root[data-theme="halloween"] .hween-pumpkin{position:absolute;right:20px;bottom:-10px;width:160px;height:160px;animation:pumpFloat 6s ease-in-out infinite; color:var(--primary)}
@keyframes batFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pumpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion: reduce){
  :root[data-theme="halloween"] .hween-bat,
  :root[data-theme="halloween"] .hween-pumpkin{animation:none}
}
.cta{display:flex;gap:12px;margin:18px 0 8px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{background:rgba(255,255,255,0.08);padding:6px 10px;border-radius:8px;border:1px solid var(--border)}
.badge:hover{background:rgba(255,255,255,0.12); border-color: rgba(245,230,161,0.35)}
:root[data-theme="halloween"] .badge.hween{
  border-color: rgba(255,122,0,0.35);
  background: linear-gradient(135deg, rgba(255,122,0,0.18), rgba(142,45,226,0.18));
  color: var(--text);
}
.stats{display:flex;gap:20px;margin-top:24px}
.stat{display:flex;flex-direction:column;align-items:flex-start}
.stat__number{font-size:28px;font-weight:800;background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__label{color:var(--muted);font-size:13px}

/* Separators */
.separator{line-height:0}
.separator svg{display:block;width:100%;height:80px}
.separator path{fill:var(--bg);opacity:.9}
.separator--flip svg{transform:scaleY(-1)}

/* CTA halo */
.btn--halo{position:relative}
.btn--halo::before{content:"";position:absolute;inset:-8px;border-radius:14px;background:radial-gradient(60% 60% at 50% 50%, rgba(212,175,55,0.22), rgba(245,230,161,0.0));filter:blur(8px);z-index:-1}

/* Cards */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);transition:transform .12s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,0.45); border-color: rgba(245,230,161,0.25)}
.card .card__header{padding:14px 16px;border-bottom:1px solid var(--border)}
.card .card__body{padding:16px}
.card .card__footer{padding:12px 16px;border-top:1px solid var(--border)}
.demo-card{min-height:220px}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,0.04);padding:12px;border-radius:10px}
.kpi:hover{background:rgba(255,255,255,0.06)}
.kpi__label{color:var(--muted);font-size:12px}
.kpi__value{font-size:20px;font-weight:700}

/* Features */
.feature{padding:16px}
.feature__icon{font-size:24px;margin-bottom:10px}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.testimonial{padding:16px}
.testimonial__header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;border:1px solid var(--border);flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.name{font-weight:600}
.stars{color:var(--accent);letter-spacing:2px;font-size:14px}
.quote{color:var(--text)}

/* Testimonials carousel */
.testimonials-carousel{position:relative;overflow:hidden}
.carousel-track{display:flex;gap:0;will-change:transform;transition:transform .55s ease}
.slide{min-width:100%}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.carousel-controls .btn{padding:6px 10px}
.dots{display:flex;gap:6px}
.dot{width:8px;height:8px;border-radius:10px;background:rgba(255,255,255,0.25);transition:all .2s ease}
.dot.active{background:var(--accent);width:18px}

/* Pricing */
.billing-toggle{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 22px}
.billing-toggle__label{color:var(--muted);font-size:14px}
.switch{position:relative;display:inline-block;width:52px;height:28px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#24344A;border:1px solid var(--border);transition:.3s;border-radius:30px}
.slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;top:2.5px;background:white;border-radius:50%;transition:.3s}
.switch input:checked + .slider{background:linear-gradient(135deg,var(--primary),var(--accent))}
.switch input:checked + .slider:before{transform:translateX(24px)}

.price-card{padding:16px;position:relative}
.price-card .price{display:flex;align-items:baseline;gap:6px;margin:10px 0}
.price__value{font-size:30px;font-weight:800;background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.price__currency{opacity:0.9}
.price__period{color:var(--muted);font-size:14px}
.price-card.featured{outline:2px solid var(--primary)}
.price-card .ribbon{position:absolute;top:12px;right:-8px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#121212;font-weight:800;padding:6px 10px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.25)}
.price-card:hover .ribbon{filter:saturate(115%) brightness(1.05)}

/* Halloween ribbon styling */
:root[data-theme="halloween"] .price-card .ribbon{
  background:linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow:0 10px 26px rgba(212,175,55,0.25), 0 6px 14px rgba(245,230,161,0.22);
}
.list{padding-left:18px}
.list li{margin:6px 0}

/* Forms */
.form{padding:16px}
.form__row{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.form__row.inline{flex-direction:row;gap:20px;align-items:center}
.form input[type="text"], .form input[type="email"], .form select, .form textarea{
  background:#121212;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 12px;outline:none;
}
.form input[type="text"]:focus, .form input[type="email"]:focus, .form select:focus, .form textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}
.form .btn{box-shadow:none}
.form input[type="range"]{width:100%}
.range-output{color:var(--muted);font-size:12px}
.form .total{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.04);padding:12px;border-radius:10px;border:1px solid var(--border)}
.total__value{font-weight:800}

/* Floating labels (form--float) */
.form--float .form__row{position:relative}
.form--float label{position:absolute;left:12px;top:11px;pointer-events:none;color:var(--muted);transition:transform .18s ease, top .18s ease, color .18s ease;transform-origin:left top;background:transparent}
.form--float input[type="text"],
.form--float input[type="email"],
.form--float textarea{padding-top:22px}
.form--float input[type="text"]:focus + label,
.form--float input[type="email"]:focus + label,
.form--float textarea:focus + label,
.form--float input[type="text"]:not(:placeholder-shown) + label,
.form--float input[type="email"]:not(:placeholder-shown) + label,
.form--float textarea:not(:placeholder-shown) + label{
  top:6px; transform:scale(0.88) translateY(-10px); color:var(--accent);
}

/* Testimonials subtle hover */
.avatar{transition:transform .2s ease}
.avatar:hover{transform:scale(1.03)}

/* Auth layout */
.auth-wrap{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 120px)}
.auth-card{display:grid;grid-template-columns:1.1fr 0.9fr;gap:0;background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.auth-aside{padding:28px;background:radial-gradient(600px 300px at -10% 10%, rgba(212,175,55,0.14), transparent 60%), radial-gradient(600px 320px at 110% 10%, rgba(245,230,161,0.10), transparent 60%)}
.auth-aside h2{margin:0 0 8px}
.auth-aside p{color:var(--muted);margin:0 0 12px}
.auth-aside .bullets{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.auth-aside .bullets li{list-style:none;display:flex;gap:8px;align-items:flex-start}
.auth-aside .bullets li::before{content:"✓";color:var(--primary);margin-top:2px}
.auth-form{padding:28px}
.divider-text{display:flex;align-items:center;gap:10px;color:var(--muted);margin:12px 0}
.divider-text::before,.divider-text::after{content:"";flex:1;height:1px;background:var(--border)}

/* FAQ */
summary{cursor:pointer}
summary::-webkit-details-marker{display:none}

/* Footer */
.footer{background:var(--bg-alt)}
/* Animations */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* Links underline on hover for better affordance */
a:hover{text-decoration:underline}

/* Temporary highlight for payment instructions */
.highlight-flash{animation:flashHighlight 2.2s ease-in-out; outline:2px solid var(--primary);} 
@keyframes flashHighlight{
  0%{box-shadow:0 0 0 0 rgba(252,163,17,0.0)}
  20%{box-shadow:0 0 0 8px rgba(252,163,17,0.25)}
  60%{box-shadow:0 0 0 0 rgba(252,163,17,0.0)}
  100%{box-shadow:0 0 0 0 rgba(252,163,17,0.0)}
}

/* Toast */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#111111;color:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 14px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s ease;z-index:100}
.toast.show{opacity:1;visibility:visible}

/* Responsive */
@media (max-width: 960px){
  .grid-2{grid-template-columns:1fr}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .nav__row{height:auto;gap:10px;padding:10px 0;flex-wrap:wrap}
  .menu{display:none}
  .nav__toggle{display:inline-flex}
}

/* Quick mobile polish */
@media (max-width: 600px){
  .section{padding:56px 0}
  .cta{flex-direction:column}
  .form__row.inline{flex-direction:column;align-items:stretch;gap:10px}
  /* Full-width CTAs inside forms and pricing cards */
  .form .btn, .price-card .btn{width:100%}
  /* Larger touch targets for range */
  .form input[type="range"]{height:32px}
  /* Smaller headings */
  h1{font-size:28px}
  h2{font-size:22px}
  /* Sticky CTA bar on pricing */
  .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(10,10,10,0.95);backdrop-filter:blur(8px);border-top:1px solid var(--border);padding:10px calc(env(safe-area-inset-right, 0) + 10px) calc(env(safe-area-inset-bottom, 0) + 10px) calc(env(safe-area-inset-left, 0) + 10px)}
  .sticky-cta .container{display:flex;gap:10px}
  .sticky-cta .btn{flex:1}
  body{padding-bottom:72px} /* ensure content not hidden */
  /* Responsive logo */
  .brand__logo{height:42px}
}