:root{
  --bg:#0a0e1a;
  --bg-soft:#0d1224;
  --card:#0f1526;
  --nav-bg:#0b0f1d;
  --blue:#2f7cf6;
  --blue-light:#4fb3ff;
  --purple:#5b6cf0;
  --text:#ffffff;
  --text-dim:#a9b2c9;
  --pill-border:#1f3a66;
  --green:#22c55e;
  --border:#1b2338;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Filet de sécurité : toute balise <svg> a une taille raisonnable par défaut,
   les règles plus spécifiques plus bas (ex: .stat-icon svg) prennent le dessus */
svg{width:1.15em;height:1.15em;display:inline-block;vertical-align:middle;flex-shrink:0;}
body{
  font-family:'Segoe UI',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:inherit;}

/* fond étoilé */
.stars{
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(79,179,255,0.5), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(79,179,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(79,179,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 30% 80%, rgba(79,179,255,0.4), transparent),
    radial-gradient(2px 2px at 90% 60%, rgba(79,179,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 10% 50%, rgba(79,179,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 45% 45%, rgba(79,179,255,0.35), transparent);
  z-index:0;
  pointer-events:none;
}

/* NAV */
nav{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 40px;
  background:var(--nav-bg);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
  gap:12px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:1.1rem;
  text-decoration:none;
}
.logo-badge{
  width:36px;height:36px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.logo-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
.nav-links a{
  color:var(--text-dim);
  text-decoration:none;
  padding:9px 16px;
  border-radius:8px;
  font-size:0.92rem;
  font-weight:500;
  transition:background 0.2s,color 0.2s;
  display:flex;align-items:center;gap:7px;
  white-space:nowrap;
}
.nav-links a svg{width:16px;height:16px;flex-shrink:0;}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,0.05);}
.nav-links a.active{background:rgba(79,179,255,0.15);color:var(--text);}

/* Auth zone */
#authArea{display:flex;align-items:center;}
.btn-discord{
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;
  padding:10px 20px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  font-size:0.9rem;
  display:flex;align-items:center;gap:9px;
  box-shadow:0 4px 20px rgba(47,124,246,0.35);
  transition:transform 0.2s;
  border:none;
  cursor:pointer;
  font-family:inherit;
}
.btn-discord:hover{transform:translateY(-1px);}
.btn-discord svg{width:18px;height:18px;}

.user-chip{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  padding:6px 14px 6px 6px;
  border-radius:999px;
  position:relative;
  cursor:pointer;
}
.user-chip img{
  width:30px;height:30px;
  border-radius:50%;
  border:1px solid var(--border);
}
.user-chip span{font-size:0.9rem;font-weight:600;}
.user-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  min-width:160px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  display:none;
  overflow:hidden;
}
.user-chip.open .user-menu{display:block;}
.user-menu a, .user-menu button{
  display:flex;align-items:center;gap:8px;
  width:100%;
  padding:11px 14px;
  text-align:left;
  background:none;border:none;
  color:var(--text-dim);
  font-size:0.88rem;
  cursor:pointer;
  font-family:inherit;
  text-decoration:none;
}
.user-menu a:hover, .user-menu button:hover{background:rgba(255,255,255,0.05);color:var(--text);}
.user-menu svg{width:14px;height:14px;}

/* Contenu générique */
main{
  position:relative;
  z-index:1;
  flex:1;
}
.page-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:64px 24px;
}

/* HERO (accueil) */
.hero{
  min-height:calc(100vh - 65px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px 24px;
}
.pill{
  border:1px solid var(--pill-border);
  background:rgba(47,124,246,0.08);
  color:var(--blue-light);
  padding:8px 20px;
  border-radius:999px;
  font-size:0.85rem;
  font-weight:600;
  margin-bottom:32px;
  display:flex;align-items:center;gap:8px;
}
.pill svg{width:14px;height:14px;}
h1{
  font-size:3.2rem;
  font-weight:800;
  line-height:1.15;
  margin-bottom:8px;
}
h1 .accent{color:var(--blue-light);}
.subtitle{
  max-width:640px;
  color:var(--text-dim);
  font-size:1.1rem;
  line-height:1.6;
  margin:24px 0 40px;
}
.subtitle b{color:var(--text);}
.cta-row{
  display:flex;
  gap:16px;
  margin-bottom:40px;
  flex-wrap:wrap;
  justify-content:center;
}
.btn-primary{
  background:var(--blue-light);
  color:#04101f;
  padding:14px 28px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  box-shadow:0 0 30px rgba(79,179,255,0.4);
  display:flex;align-items:center;gap:10px;
  transition:transform 0.2s;
  border:none;cursor:pointer;font-family:inherit;
}
.btn-primary:hover{transform:translateY(-2px);}
.btn-primary svg{width:18px;height:18px;}
.btn-secondary{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  padding:14px 28px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  font-size:1rem;
  display:flex;align-items:center;gap:10px;
  transition:background 0.2s;
  cursor:pointer;font-family:inherit;
}
.btn-secondary:hover{background:rgba(255,255,255,0.05);}
.btn-secondary svg{width:18px;height:18px;}
.checks{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  justify-content:center;
  color:var(--text-dim);
  font-size:0.95rem;
}
.checks span{display:flex;align-items:center;gap:7px;}
.check-dot{
  width:17px;height:17px;
  background:var(--green);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.check-dot svg{width:10px;height:10px;}

/* STATS */
.stats-section{
  position:relative;z-index:1;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-soft);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  padding:36px 24px;
}
.stat-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px 18px;
}
.stat-icon{
  width:34px;height:34px;
  color:var(--blue-light);
  margin-bottom:14px;
}
.stat-icon svg{width:100%;height:100%;}
.stat-number{
  font-size:1.9rem;
  font-weight:800;
  line-height:1;
  margin-bottom:6px;
}
.stat-label{
  color:var(--text-dim);
  font-size:0.85rem;
}

/* BOT PREVIEW CARDS (accueil) */
.bot-preview-card{
  background:var(--card);
  border:1px solid var(--border);
  border-top:3px solid var(--border);
  border-radius:14px;
  padding:26px;
  transition:transform 0.2s,border-color 0.2s;
}
.bot-preview-card:hover{transform:translateY(-3px);}
.bot-preview-card.featured{border-top-color:var(--purple);}
.bot-badge{
  width:48px;height:48px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.bot-badge svg{width:24px;height:24px;color:#fff;}
.badge-orange{background:linear-gradient(135deg,#f97316,#fb923c);}
.badge-pink{background:linear-gradient(135deg,#ec4899,#f472b6);}
.badge-cyan{background:linear-gradient(135deg,#06b6d4,#22d3ee);}
.badge-navy{background:linear-gradient(135deg,#1e3a8a,#3b5bdb);}
.bot-preview-card h3{font-size:1.1rem;margin-bottom:8px;}
.bot-preview-card p{color:var(--text-dim);font-size:0.9rem;line-height:1.55;margin-bottom:16px;}
.bot-feature-list{list-style:none;margin-bottom:20px;}
.bot-feature-list li{
  display:flex;align-items:center;gap:8px;
  color:var(--text-dim);
  font-size:0.85rem;
  padding:4px 0;
}
.bot-feature-list svg{width:14px;height:14px;color:var(--green);flex-shrink:0;}
.bot-preview-actions{display:flex;gap:10px;}
.bot-preview-actions .btn-primary, .bot-preview-actions .btn-secondary{
  padding:10px 16px;font-size:0.85rem;flex:1;justify-content:center;
}

/* WHY US 6-grid */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.why-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:26px;
  text-align:left;
}
.why-icon{
  width:42px;height:42px;
  border-radius:10px;
  background:rgba(79,179,255,0.12);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.why-icon svg{width:20px;height:20px;color:var(--blue-light);}
.why-card h3{font-size:1.02rem;margin-bottom:8px;}
.why-card p{color:var(--text-dim);font-size:0.88rem;line-height:1.55;}

/* DOC PREVIEW */
.doc-preview-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px;
  transition:border-color 0.2s;
}
.doc-preview-card:hover{border-color:var(--blue);}
.doc-preview-card .why-icon{background:rgba(255,255,255,0.05);}
.doc-preview-card h3{font-size:1.02rem;margin-bottom:8px;}
.doc-preview-card p{color:var(--text-dim);font-size:0.88rem;margin-bottom:14px;}
.doc-link{
  color:var(--blue-light);
  text-decoration:none;
  font-size:0.86rem;
  font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
}
.doc-link svg{width:14px;height:14px;transition:transform 0.2s;}
.doc-link:hover svg{transform:translateX(3px);}

/* COMMUNITY */
.community-section{
  position:relative;z-index:1;
  background:var(--bg-soft);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-align:center;
  padding:70px 24px;
}
.community-section h2{font-size:1.9rem;font-weight:800;margin-bottom:10px;}
.community-section p{color:var(--text-dim);max-width:520px;margin:0 auto 36px;}
.discord-mock{
  max-width:300px;
  margin:0 auto 30px;
  background:#12162a;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  text-align:left;
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
}
.discord-mock-head{
  background:linear-gradient(135deg,var(--blue),var(--purple));
  padding:14px 16px;
  display:flex;align-items:center;gap:10px;
}
.discord-mock-head svg{width:20px;height:20px;color:#fff;}
.discord-mock-head div span{display:block;color:#fff;font-weight:700;font-size:0.85rem;}
.discord-mock-head div small{color:rgba(255,255,255,0.75);font-size:0.7rem;}
.discord-mock-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
.discord-mock-row{display:flex;align-items:center;gap:8px;}
.discord-mock-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--blue-light),var(--purple));flex-shrink:0;position:relative;}
.status-dot{position:absolute;bottom:-1px;right:-1px;width:8px;height:8px;border-radius:50%;border:2px solid #12162a;}
.status-online{background:var(--green);}
.status-idle{background:#f5a623;}
.status-dnd{background:#ed4245;}
.discord-mock-row span{font-size:0.78rem;color:var(--text-dim);}

/* FOOTER */
.site-footer{
  position:relative;z-index:1;
  padding:56px 40px 24px;
  border-top:1px solid var(--border);
}
.footer-grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:36px;
}
.footer-brand p{color:var(--text-dim);font-size:0.88rem;margin:14px 0 18px;max-width:280px;line-height:1.55;}
.footer-social{display:flex;gap:10px;}
.footer-social a{
  width:36px;height:36px;
  border-radius:9px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  transition:background 0.2s;
}
.footer-social a:hover{background:rgba(79,179,255,0.15);}
.footer-social svg{width:16px;height:16px;color:var(--text-dim);}
.footer-col h4{font-size:0.85rem;margin-bottom:16px;color:var(--text);}
.footer-col a{display:block;color:var(--text-dim);text-decoration:none;font-size:0.86rem;padding:5px 0;}
.footer-col a:hover{color:var(--blue-light);}
.footer-bottom{
  max-width:1180px;margin:0 auto;
  border-top:1px solid var(--border);
  padding-top:22px;
  text-align:center;
  color:var(--text-dim);
  font-size:0.82rem;
}

@media(max-width:900px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .stats-grid{grid-template-columns:1fr 1fr;}
  .why-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
}

/* section titles */
.section-head{text-align:center;margin-bottom:48px;}
.section-head h2{font-size:2.1rem;font-weight:800;margin-bottom:12px;}
.section-head p{color:var(--text-dim);font-size:1.02rem;max-width:560px;margin:0 auto;}

/* grid cards */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:26px;
  transition:border-color 0.2s,transform 0.2s;
}
.card:hover{border-color:var(--blue);transform:translateY(-3px);}
.card-icon{
  width:46px;height:46px;
  border-radius:11px;
  background:rgba(79,179,255,0.12);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
}
.card-icon svg{width:24px;height:24px;color:var(--blue-light);}
.card h3{font-size:1.1rem;margin-bottom:8px;}
.card p{color:var(--text-dim);font-size:0.92rem;line-height:1.55;}
.card .tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.tag{
  font-size:0.72rem;
  background:rgba(255,255,255,0.06);
  color:var(--text-dim);
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
}
.card .add-btn{
  margin-top:16px;
  width:100%;
  justify-content:center;
  padding:10px;
  font-size:0.88rem;
}

/* footer */
footer{
  position:relative;z-index:1;
  border-top:1px solid var(--border);
  padding:32px 40px;
  text-align:center;
  color:var(--text-dim);
  font-size:0.85rem;
}

/* docs layout */
.docs-layout{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start;}
.docs-sidebar{border-right:1px solid var(--border);padding-right:24px;position:sticky;top:24px;}
.docs-sidebar h4{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);margin:20px 0 10px;}
.docs-sidebar h4:first-child{margin-top:0;}
.docs-sidebar a{display:block;padding:7px 10px;border-radius:7px;color:var(--text-dim);text-decoration:none;font-size:0.9rem;border-left:2px solid transparent;}
.docs-sidebar a:hover{background:rgba(79,179,255,0.1);color:var(--text);}
.docs-sidebar a.active{background:rgba(79,179,255,0.12);color:var(--blue-light);border-left-color:var(--blue-light);font-weight:600;}
.docs-content h2{font-size:1.6rem;margin-bottom:14px;}
.docs-content h3{font-size:1.15rem;margin:26px 0 10px;}
.docs-content p{color:var(--text-dim);line-height:1.7;margin-bottom:12px;}
.docs-content code{background:rgba(255,255,255,0.06);padding:2px 7px;border-radius:5px;font-size:0.88em;color:var(--blue-light);}
.docs-content pre{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px;overflow-x:auto;margin:14px 0;}
.docs-content pre code{background:none;padding:0;color:#c9d6f0;}

/* dashboard */
.dash-locked{
  text-align:center;
  padding:100px 24px;
}
.dash-locked svg{width:56px;height:56px;color:var(--text-dim);margin-bottom:20px;}
.dash-locked h2{font-size:1.6rem;margin-bottom:10px;}
.dash-locked p{color:var(--text-dim);margin-bottom:26px;}
.server-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.server-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;display:flex;align-items:center;gap:14px;}
.server-card .icon{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.server-card .info h4{font-size:0.95rem;margin-bottom:3px;}
.server-card .info p{color:var(--text-dim);font-size:0.8rem;}
.dash-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;flex-wrap:wrap;gap:14px;}
.dash-topbar h2{font-size:1.6rem;}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.contact-info .item{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start;}
.contact-info .item .card-icon{flex-shrink:0;margin-bottom:0;}
.contact-info .item h4{font-size:0.95rem;margin-bottom:4px;}
.contact-info .item p{color:var(--text-dim);font-size:0.88rem;}
form{display:flex;flex-direction:column;gap:14px;}
form label{font-size:0.85rem;color:var(--text-dim);margin-bottom:-8px;}
form input, form textarea{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  color:var(--text);
  font-family:inherit;
  font-size:0.92rem;
}
form input:focus, form textarea:focus{outline:2px solid var(--blue);outline-offset:1px;}
form textarea{resize:vertical;min-height:120px;}

@media(max-width:900px){
  .docs-layout{grid-template-columns:1fr;}
  .docs-sidebar{border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:20px;display:flex;flex-wrap:wrap;gap:4px;}
  .docs-sidebar h4{display:none;}
  .contact-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  nav{padding:14px 20px;}
  .nav-links{display:none;}
  h1{font-size:2.1rem;}
  .checks{gap:14px;font-size:0.85rem;}
  .page-wrap{padding:44px 20px;}
}