/* ===== Polices auto-hébergées (RGPD : aucun appel à Google Fonts) ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/crimson-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/crimson-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/crimson-italic.woff2') format('woff2');
}

:root {
  --bg-deep: rgba(10, 10, 15, 0.75);        /* Top navbar & server list */
  --bg-sidebar: rgba(15, 15, 21, 0.72);      /* Module sidebar */
  --bg-main: #0c0c12;                       /* Main content area */
  --bg-card: rgba(24, 24, 36, 0.45);        /* Inner cards */
  --primary: #00f0ff;        /* Neon cyan primary */
  --primary-hover: #00d0df;
  --primary-glow: rgba(0, 240, 255, 0.4);
  --accent: #bd00ff;         /* Neon purple/magenta */
  --accent-glow: rgba(189, 0, 255, 0.45);
  --text-light: #ffffff;
  --text-muted: #8e9bb0;
  --border-color: #262637;

  --discord-blue: #5865F2;
  --discord-bg: rgba(28, 29, 39, 0.5);
  --discord-embed: rgba(35, 37, 51, 0.6);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-main);
  color: var(--text-light);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Dashboard uniquement : hauteur fixe pour que le scroll
   interne de main-content fonctionne correctement */
body.dashboard-body {
  height: 100vh;
  background-image: linear-gradient(rgba(8, 8, 12, 0.8), rgba(8, 8, 12, 0.92)), url('dashboard_bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


h1, h2, h3, h4, h5 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* NAVBAR */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 70px;
  /* Pas de backdrop-filter ici : sur Chrome, le flou fait persister
     d'anciens textes en "fantôme" dans le menu déroulant (couche GPU).
     Fond plus opaque pour compenser. */
  background-color: rgba(10, 10, 15, 0.88);
  border-bottom: 1px solid var(--border-color);
  position: fixed; /* Keep it on top when scrolling */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.logo-icon {
  color: var(--primary);
  font-size: 2rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--primary);
}

.btn-outline {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: rgba(0, 240, 255, 0.04); /* Translucent cyan */
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.25s ease;
  box-shadow: 0 0 5px rgba(0, 240, 255, 0.15);
}
.btn-outline:hover {
  background: var(--primary);
  color: #0a0a0f;
  box-shadow: 0 0 15px var(--primary-glow);
  transform: translateY(-1px);
}

/* LAYOUT */
.dashboard-layout {
  display: flex;
  flex: 1;
  height: calc(100vh - 70px);
  margin-top: 70px;
  overflow: hidden;
}

/* SIDEBARS */
.sidebar-servers {
  width: 80px;
  min-width: 80px;
  flex-shrink: 0;
  background-color: var(--bg-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
  gap: 1rem;
  overflow-y: auto;
  min-height: 0;
  border-right: 1px solid var(--border-color);
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
}
.sidebar-servers::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.server-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-radius 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.server-icon:hover, .server-icon.active {
  border-radius: 15px;
  background: var(--primary);
}

.sidebar-modules {
  width: 250px;
  min-width: 250px;
  flex-shrink: 0;
  background-color: var(--bg-sidebar);
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-modules::-webkit-scrollbar { display: none; }

.module-header {
  padding: 2rem 1rem 1rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}
.module-header img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  margin-bottom: 0.5rem;
}

.module-list {
  padding: 1rem 0;
  list-style: none;
}
.module-item {
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.2s;
}
.module-item:hover {
  color: var(--text-light);
  background: rgba(255,255,255,0.05);
}
.module-item.active {
  color: var(--text-light);
  background: rgba(0, 240, 255, 0.04);
  border-left: 4px solid var(--primary);
  box-shadow: inset 4px 0 10px rgba(0, 240, 255, 0.05);
}

/* MAIN CONTENT */
.main-content {
  flex: 1;
  min-height: 0;    /* Permet au flex child de scroller sans gonfler le body */
  padding: 3rem;
  overflow-y: auto;
}

/* SETTINGS GROUP */
.settings-group {
  margin-bottom: 3rem;
}
.settings-group h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.settings-group p.desc {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color);
}
.settings-row:last-child {
  border-bottom: none;
}

/* TOGGLE SWITCH */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--border-color);
  transition: .4s;
  border-radius: 24px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--primary);
}
input:checked + .slider:before {
  transform: translateX(26px);
}

/* INPUTS */
.input-group {
  margin-top: 1rem;
}
.input-group label {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.input-group input[type="text"], .input-group select, .input-group textarea {
  width: 100%;
  padding: 0.8rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-light);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.95rem;
}
.input-group input:focus, .input-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}

/* DISCORD EMBED PREVIEW */
.discord-preview {
  background: var(--discord-bg);
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
  max-width: 450px;
  font-family: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.discord-message {
  display: flex;
  gap: 1rem;
}
.discord-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
}
.discord-content {
  flex: 1;
}
.discord-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.discord-name {
  font-weight: 500;
  color: white;
}
.discord-bot-tag {
  background: var(--discord-blue);
  color: white;
  font-size: 0.65rem;
  padding: 2px 4px;
  border-radius: 3px;
  text-transform: uppercase;
}
.discord-time {
  font-size: 0.75rem;
  color: #72767d;
}
.discord-text {
  color: #dcddde;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  white-space: pre-wrap;
}
.discord-embed-box {
  border-left: 4px solid var(--primary);
  background: var(--discord-embed);
  border-radius: 4px;
  padding: 1rem;
  margin-top: 0.5rem;
}
.discord-embed-title {
  font-weight: 600;
  color: white;
  margin-bottom: 0.5rem;
}
.discord-embed-img {
  width: 100%;
  border-radius: 4px;
  margin-top: 0.5rem;
}

.btn-primary {
  background-color: var(--primary);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  font-family: inherit;
}
.btn-primary:hover {
  background-color: var(--primary-hover);
}

/* PREMIUM PAGE */
.premium-hero {
  background:
    linear-gradient(rgba(8, 8, 12, 0.85), rgba(8, 8, 12, 0.98)),
    url('bg_clean.webp');
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: 10rem 2rem 6rem 2rem;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}
.premium-title {
  font-size: 4rem;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.premium-subtitle {
  color: var(--text-muted);
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto 3rem auto;
  line-height: 1.8;
}
.pricing-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2.5rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}
.price-box {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: white;
  padding: 2.5rem 2rem;
  border-radius: 12px;
  text-align: center;
  width: 280px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.price-box:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px var(--primary-glow);
}
.price-box h4 {
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--primary);
  letter-spacing: 1px;
}
.price-box .price {
  font-size: 2.4rem;
  font-weight: 900;
  color: white;
}
.price-box .sub-price {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.feature-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
}
.feature-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 25px var(--primary-glow);
  transform: translateY(-4px);
}
.feature-card h3 {
  color: white;
  margin-bottom: 1rem;
}
.feature-card p {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
}

/* LANDING PAGE (2026 NEON CYBERPUNK OVERHAUL) */
.home-hero {
  background:
    linear-gradient(90deg, #08080c 40%, rgba(8, 8, 12, 0.45) 70%, rgba(8, 8, 12, 0.1) 100%),
    url('bg_clean.webp');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  padding: 10rem 2rem 8rem 2rem;
  text-align: left;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  z-index: 1;
  pointer-events: none;
}
.hero-glow-1 {
  width: 600px;
  height: 600px;
  background: var(--primary);
  top: -15%;
  left: -10%;
  animation: pulse-glow-left 10s infinite ease-in-out alternate;
}
.hero-glow-2 {
  width: 600px;
  height: 600px;
  background: #c084fc; /* Purple glow */
  bottom: -15%;
  right: -10%;
  animation: pulse-glow-right 14s infinite ease-in-out alternate;
}

@keyframes pulse-glow-left {
  0% { transform: scale(1) translate(0, 0); opacity: 0.16; }
  100% { transform: scale(1.15) translate(5%, 2%); opacity: 0.25; }
}

@keyframes pulse-glow-right {
  0% { transform: scale(1) translate(0, 0); opacity: 0.14; }
  100% { transform: scale(1.2) translate(-3%, -5%); opacity: 0.22; }
}
.bot-part {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (max-width: 968px) {
  .bot-part {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }
}

.hero-left-content {
  display: flex;
  flex-direction: column;
}

@media (max-width: 968px) {
  .hero-left-content {
    align-items: center;
  }
}

.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
}

.bot-logo {
  width: 110px;
  height: 110px;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  border: 3px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.3);
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.bot-title h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800;
  color: white;
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
}
.gradient-title-text {
  background: linear-gradient(135deg, #ffffff 40%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.25));
}
.bot-description {
  font-size: 1.25rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  font-weight: 500;
}
.bot-activities {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--primary);
  position: relative;
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
  overflow: hidden;
  text-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}
@media (max-width: 968px) {
  .bot-activities {
    justify-content: center;
  }
}
.bot-activities span {
  position: absolute;
  inset: 0 auto auto 0;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bot-activities span.visible {
  opacity: 1;
  transform: translateY(0);
}
.bot-activities span.hidden {
  opacity: 0;
  transform: translateY(-15px);
}
@media (max-width: 600px) {
  .bot-title {
    width: 100%;
  }
  .bot-title h1 {
    font-size: clamp(2rem, 10vw, 2.7rem);
    line-height: 1.12;
    text-wrap: balance;
  }
  .bot-description {
    margin: 0.35rem 0 0.55rem;
    font-size: 1rem;
  }
  .bot-activities {
    height: 4.6rem;
    margin-top: 0.45rem;
    margin-bottom: 1.6rem;
    font-size: clamp(1.3rem, 6.2vw, 1.6rem);
    align-items: flex-start;
  }
  .bot-activities span {
    inset: 0 0 auto;
    line-height: 1.22;
    text-align: center;
    text-wrap: balance;
  }
}
.bot-invite {
  background: rgba(0, 240, 255, 0.12); /* Translucent neon cyan */
  backdrop-filter: blur(8px); /* Glassmorphism blur */
  -webkit-backdrop-filter: blur(8px);
  color: white !important;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 1.1rem 2.8rem;
  border-radius: 35px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.25);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(0, 240, 255, 0.35);
  cursor: pointer;
}
.bot-invite:hover {
  transform: translateY(-4px) scale(1.03);
  background: rgba(0, 240, 255, 0.22);
  box-shadow: 0 8px 25px rgba(0, 240, 255, 0.4), 0 0 15px var(--primary-glow);
  border-color: rgba(0, 240, 255, 0.85);
}
.bot-invite:active {
  transform: translateY(-1px) scale(0.98);
}
.bot-invite svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* INTERACTIVE CHAT SANDBOX Widget */
.chat-sandbox {
  background: rgba(20, 20, 23, 0.8);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  height: 380px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 5;
}
.chat-sandbox-header {
  background: rgba(47, 49, 54, 0.4);
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.chat-sandbox-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-light);
  letter-spacing: 1px;
}
.chat-sandbox-messages {
  flex: 1;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  overflow-y: auto;
  font-family: 'gg sans', sans-serif;
  font-size: 0.9rem;
}
.chat-msg {
  display: flex;
  gap: 0.8rem;
  animation: fadeIn 0.4s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--border-color);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.chat-msg-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.chat-msg-content {
  flex: 1;
}
.chat-msg-author {
  font-weight: 600;
  color: white;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.chat-bot-tag {
  background: var(--primary);
  color: white;
  font-size: 0.65rem;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 700;
}
.chat-msg-text {
  color: #dcddde;
  line-height: 1.5;
  white-space: pre-wrap;
}
.chat-embed {
  background: #2f3136;
  border-left: 4px solid var(--primary);
  border-radius: 4px;
  padding: 0.8rem;
  margin-top: 0.4rem;
  max-width: 90%;
}
.chat-embed-title {
  color: white;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

/* BENTO GRID FEATURES */
.bento-container {
  max-width: 1200px;
  margin: 6rem auto;
  padding: 0 2rem;
}
.bento-header {
  text-align: center;
  margin-bottom: 4rem;
}
.bento-header h2 {
  font-size: 2.5rem;
  color: white;
  margin-bottom: 0.8rem;
  letter-spacing: -0.02em;
}
.bento-header p {
  color: var(--text-muted);
  font-size: 1.1rem;
}
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(260px, auto);
  gap: 1.5rem;
}
@media (max-width: 968px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
}
.bento-card {
  background: rgba(30, 30, 35, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 2.2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s, box-shadow 0.4s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bento-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.12);
}
.bento-card.span-2 {
  grid-column: span 2;
}
@media (max-width: 968px) {
  .bento-card.span-2 {
    grid-column: span 1;
  }
}
.bento-card-bg-glow {
  position: absolute;
  width: 150px;
  height: 150px;
  background: var(--primary);
  filter: blur(80px);
  opacity: 0.06;
  top: -20px;
  right: -20px;
  pointer-events: none;
}
.bento-icon {
  font-size: 2.8rem;
  margin-bottom: 1.5rem;
  transition: transform 0.3s;
}
.bento-card:hover .bento-icon {
  transform: scale(1.1) rotate(4deg);
}
.bento-title {
  font-size: 1.4rem;
  color: white;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.bento-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* STATS ROW */
.stats-banner {
  background: radial-gradient(circle at 50% 50%, rgba(10, 11, 16, 0.6) 0%, rgba(3, 4, 6, 0.97) 100%),
              linear-gradient(rgba(0, 242, 254, 0.03) 1px, transparent 1px),
              linear-gradient(90deg, rgba(0, 242, 254, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;
  border-top: 1px solid rgba(0, 242, 254, 0.15);
  border-bottom: 1px solid rgba(0, 242, 254, 0.15);
  padding: 3rem 1rem;
  position: relative;
  overflow: hidden;
}

/* Background animated glow lines behind stats banner */
.stats-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: bannerPulse 10s ease-in-out infinite alternate;
}

@keyframes bannerPulse {
  0% { transform: scale(0.9) translate(-3%, -3%); }
  100% { transform: scale(1.05) translate(3%, 3%); }
}

.stats-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  position: relative;
  z-index: 1;
}

.stat-item {
  text-align: center;
  background: linear-gradient(145deg, rgba(20, 22, 30, 0.6), rgba(8, 10, 15, 0.8));
  border: 1px solid rgba(0, 242, 254, 0.15);
  border-radius: 14px;
  padding: 1.5rem 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 242, 254, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

/* Glass shine reflection */
.stat-item::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: skewX(-20deg);
  transition: all 0.7s ease;
  pointer-events: none;
}
.stat-item:hover::after {
  left: 150%;
}

/* HUD Corners */
.tech-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: rgba(0, 242, 254, 0.5);
  border-style: solid;
  transition: all 0.3s ease;
}
.tech-corner.tl { top: 8px; left: 8px; border-width: 1.5px 0 0 1.5px; }
.tech-corner.tr { top: 8px; right: 8px; border-width: 1.5px 1.5px 0 0; }
.tech-corner.bl { bottom: 8px; left: 8px; border-width: 0 0 1.5px 1.5px; }
.tech-corner.br { bottom: 8px; right: 8px; border-width: 0 1.5px 1.5px 0; }

.stat-item:hover .tech-corner {
  border-color: rgba(0, 242, 254, 1);
  width: 16px;
  height: 16px;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

/* Scanline Sweeper */
.scanline {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 242, 254, 0.8);
  box-shadow: 0 0 10px rgba(0, 242, 254, 1), 0 20px 20px rgba(0, 242, 254, 0.15);
  animation: scan 4s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

@keyframes scan {
  0% { top: -10%; }
  100% { top: 110%; }
}

/* System tags at top */
.sys-tag {
  font-family: monospace;
  font-size: 0.6rem;
  color: var(--text-muted);
  text-align: left;
  opacity: 0.55;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Tech icons wrapper */
.tech-icon {
  margin: 0.3rem auto 0.5rem auto;
  width: 24px;
  height: 24px;
  color: rgba(0, 242, 254, 0.6);
  filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.2));
  transition: all 0.4s ease;
}

.stat-item:hover .tech-icon {
  transform: scale(1.1);
  color: rgba(236, 72, 153, 0.85);
  filter: drop-shadow(0 0 12px rgba(236, 72, 153, 0.5));
}

.stat-item:hover {
  transform: translateY(-8px) scale(1.02);
  background: linear-gradient(145deg, rgba(25, 30, 45, 0.8), rgba(10, 15, 25, 0.95));
  border-color: rgba(0, 242, 254, 0.4);
  box-shadow: 0 15px 40px rgba(0, 242, 254, 0.2), inset 0 0 25px rgba(0, 242, 254, 0.1);
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #00f0ff, #bd00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 2px 8px rgba(0, 240, 255, 0.3));
  transition: all 0.4s;
}

/* Individual neon gradients for stats */
#bot-servers {
  background: linear-gradient(135deg, #00f2fe, #4facfe);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(79, 172, 254, 0.4));
}

#bot-users {
  background: linear-gradient(135deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(245, 87, 108, 0.4));
}

#bot-ping {
  background: linear-gradient(135deg, #df9eff, #ff8bf3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(223, 158, 255, 0.4));
}

#bot-status {
  background: linear-gradient(135deg, #00ff87, #60efff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 255, 135, 0.4));
  position: relative;
  display: inline-block;
}

/* Status indicator pulse dot inside the stat item */
.status-dot {
  width: 10px;
  height: 10px;
  background-color: #00ff87;
  border-radius: 50%;
  box-shadow: 0 0 12px #00ff87;
  animation: pulseDot 1.5s infinite;
  display: inline-block;
  transition: all 0.3s;
}

@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 18px #00ff87; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
}

/* Technical Details at bottom */
.tech-details {
  font-family: monospace;
  font-size: 0.55rem;
  color: var(--text-muted);
  opacity: 0.45;
  margin-top: 0.6rem;
  letter-spacing: 1px;
}

/* FOOTER DRAFTBOT STYLE */
.footer-wrapper {
  background-color: var(--bg-deep);
  border-top: 1px solid var(--border-color);
  position: relative;
  margin-top: auto;
}
.footer-shadow-svg {
  width: 100%;
  height: 40px;
  display: block;
  fill: var(--bg-deep);
  position: absolute;
  top: -40px;
  left: 0;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 2rem 2rem 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}
@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-item, .feature-item:nth-child(even) {
    flex-direction: column;
    gap: 2rem;
  }
}
@media (max-width: 480px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
}
/* Les titres de colonne sont passes de h4 a h3 : la page sautait de h2 a h4,
   ce qui casse la hierarchie pour les lecteurs d'ecran et les moteurs. Les deux
   selecteurs coexistent pour que le rendu reste strictement identique. */
.footer-col h4,
.footer-col h3 {
  color: white;
  font-size: 0.95rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}
.footer-col ul {
  list-style: none;
}
.footer-col ul li {
  margin-bottom: 0.75rem;
}
.footer-col ul li a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.footer-col ul li a:hover {
  color: var(--primary);
}
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
/* (la colonne de logo du pied n'utilise plus de SVG : voir .footer-logo-mark) */

/* COMMANDS PAGE SPECIFIC STYLES */
.commands-hero {
  background:
    linear-gradient(rgba(8, 8, 12, 0.85), rgba(8, 8, 12, 0.98)),
    url('bg_clean.webp');
  background-size: cover;
  background-position: center;
  padding: 10rem 2rem 5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
}
.commands-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
.commands-hero h1 {
  font-size: 3rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}
.commands-hero p {
  color: var(--text-muted);
  font-size: 1.15rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}
.commands-page-container {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 2rem;
}
.commands-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.commands-top h1 {
  font-size: 2.5rem;
  color: white;
}
.commands-search-wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.commands-search-input {
  width: 100%;
  padding: 0.85rem 3rem 0.85rem 1.2rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: white;
  border-radius: 30px;
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}
.commands-search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(0, 240, 255,0.2);
}
.commands-search-icon {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.commands-search-input:focus + .commands-search-icon {
  color: var(--primary);
}

.commands-layout {
  display: flex;
  gap: 3rem;
}
.commands-sidebar-nav {
  width: 250px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
  height: fit-content;
}
.commands-sidebar-nav h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: 1rem;
  font-weight: 700;
}
.commands-cat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.commands-cat-item {
  padding: 0.8rem 1.2rem;
  border-radius: 10px;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  margin-bottom: 0.3rem;
}
.commands-cat-item:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.025);
  transform: translateX(3px);
}
.commands-cat-item.active {
  color: var(--primary);
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.08) 0%, rgba(0, 240, 255, 0.01) 100%);
  border: 1px solid transparent;
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0; /* Flush left, rounded right */
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.01);
}
.commands-cat-count {
  font-size: 0.75rem;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 8px;
  font-weight: 700;
  transition: all 0.25s ease;
}
.commands-cat-item.active .commands-cat-count {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #0a0a0f;
}

.commands-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.command-group-section {
  scroll-margin-top: 100px;
}
.command-group-title {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.command-group-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.2rem;
  background-color: var(--primary);
  border-radius: 2px;
}
.commands-grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}
.command-item-card {
  background-color: var(--bg-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.command-item-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 240, 255, 0.08);
}
.command-item-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
}
.command-item-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.commands-no-results {
  text-align: center;
  padding: 5rem 2rem;
  color: var(--text-muted);
}
.commands-no-results svg {
  width: 80px;
  height: 80px;
  color: var(--border-color);
  margin-bottom: 1.5rem;
}

/* =====================================================
   DASHBOARD MODULE PAGES — classe .section
   Utilisée par toutes les pages de module du dashboard
   (Captcha, Rôles-Réactions, Autorole, Social, etc.)
   ===================================================== */
.section {
  padding: 0;
}

.section h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: white;
}

.section > p.desc,
.section .desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .commands-layout {
    flex-direction: column;
  }
  .commands-sidebar-nav {
    width: 100%;
    position: relative;
    top: 0;
    margin-bottom: 2rem;
  }
  .commands-cat-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
  .commands-cat-item {
    white-space: nowrap;
  }
}


/* =========================================================================
   RESPONSIVE DESIGN (Mobile compatibility improvements)
   ========================================================================= */

@media (max-width: 900px) {
  nav {
    padding: 0 1.25rem;
  }

  /* Compensation for fixed navbar (70px) in hero sections */
  .home-hero, .premium-hero, .commands-hero {
    padding: 6.5rem 1.5rem 4rem !important;
  }
}

@media (max-width: 768px) {
  /* NOTE : l'ancien layout mobile "barres horizontales" (sidebars en lignes de
     55-70px) a été retiré — le dashboard utilise désormais le tiroir coulissant
     défini dans dashboard.html (bloc AMELIORATIONS PANEL, @media 900px). */

  /* Form layouts stacking */
  #welcome-config,
  .dashboard-grid,
  .grid-2col,
  .grid-3col,
  [style*="display:grid"],
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Image/Preview box constraint */
  .discord-preview {
    max-width: 100% !important;
  }

  /* Pricing and features */
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }
}

@media (max-width: 600px) {
  .settings-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  .settings-row label.switch {
    align-self: flex-end !important;
  }
  .settings-group h2 {
    font-size: 1.3rem !important;
  }
}

/* Make tables responsive */
table, .doc-table {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}

/* SMOOTH SCROLL EFFECTS */
html {
  scroll-behavior: smooth;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll Progress Bar at the top of the screen */
.scroll-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 1000;
  pointer-events: none;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 8px var(--primary-glow);
  transition: width 0.1s ease-out;
}

/* Bouncing Scroll indicator at the bottom of Hero */
.hero-scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.3s;
}

.hero-scroll-indicator:hover {
  color: var(--primary);
}

.mouse-icon {
  width: 24px;
  height: 40px;
  border: 2px solid currentColor;
  border-radius: 12px;
  position: relative;
}

.mouse-wheel {
  width: 4px;
  height: 8px;
  background-color: currentColor;
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollMouse 1.6s infinite;
}

@keyframes scrollMouse {
  0% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 15px); }
}

/* PREMIUM LOCK OVERLAY */
.premium-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 15, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9999;
  cursor: not-allowed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.premium-lock-badge {
  background: #fbbf24;
  color: #1e1b4b;
  font-weight: 800;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  font-size: 1.1rem;
  box-shadow: 0 10px 25px rgba(251, 191, 36, 0.35);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: transform 0.2s ease;
}
.premium-lock-badge:hover {
  transform: scale(1.05);
}

/* INDIVIDUAL PREMIUM LOCKED OPTIONS */
.premium-locked-option {
  position: relative;
  opacity: 0.65;
  filter: grayscale(35%);
  cursor: not-allowed !important;
}
.premium-locked-option * {
  cursor: not-allowed !important;
}
.premium-locked-option::after {
  content: "🔒 Premium";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  z-index: 10;
  pointer-events: none;
}

.animated-dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s !important;
  /* Pas de scale ni d'animation de bordure infinie : combinés au
     backdrop-filter, ils font dédoubler/flouter le texte sur Chrome */
  border: 1px solid rgba(0, 240, 255, 0.45) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 240, 255, 0.18) !important;
}

/* Hover-based user profile dropdown triggers */
#user-dropdown-container:hover #user-dropdown-menu,
.animated-dropdown-menu.active-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

#user-dropdown-container:hover #dropdown-arrow,
#user-dropdown-container.active-arrow #dropdown-arrow {
  transform: rotate(180deg) !important;
}

/* Glowing effects on hover */
#user-dropdown-container:hover #nav-avatar {
  box-shadow: 0 0 12px var(--primary-glow) !important;
  border-color: var(--primary) !important;
}

#user-dropdown-container:hover #nav-username {
  text-shadow: 0 0 8px var(--primary-glow) !important;
}

/* Transparent bridge to prevent menu closing when moving cursor over the gap */
#user-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 15px;
  background: transparent;
}

/* Item hover : couleurs uniquement, AUCUN transform (textes fantômes GPU) */
.animated-dropdown-menu a,
.animated-dropdown-menu #dashboard-lang-toggle,
.animated-dropdown-menu #navbar-lang-toggle,
.animated-dropdown-menu #dashboard-logout-btn,
.animated-dropdown-menu #navbar-logout-btn {
  transition: background 0.2s ease, color 0.2s ease !important;
  transform: none !important;
}

/* Les items du menu ne doivent pas hériter du style UPPERCASE des liens navbar */
.animated-dropdown-menu a {
  text-transform: none !important;
  letter-spacing: normal !important;
}

.animated-dropdown-menu a:hover,
.animated-dropdown-menu #dashboard-lang-toggle:hover,
.animated-dropdown-menu #navbar-lang-toggle:hover {
  color: var(--primary) !important;
}

.animated-dropdown-menu #dashboard-logout-btn:hover,
.animated-dropdown-menu #navbar-logout-btn:hover {
  color: #f87171 !important;
}

/* Blindage anti-fantômes : aucun effet de texte dans le menu */
.np-dropdown,
.np-dropdown * {
  text-shadow: none !important;
}
.np-dropdown {
  isolation: isolate;
}

@keyframes borderGlow {
  0% {
    border-color: var(--primary) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.55), 0 0 8px rgba(0, 240, 255, 0.25) !important;
  }
  50% {
    border-color: #bd00ff !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.55), 0 0 16px rgba(189, 0, 255, 0.45) !important;
  }
  100% {
    border-color: var(--primary) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.55), 0 0 8px rgba(0, 240, 255, 0.25) !important;
  }
}


/* ================================================
   NAVBAR DROPDOWN — NovaPulse Premium Style
   ================================================ */

.np-nav-trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: 50px;
  transition: background 0.2s;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}
.np-nav-trigger:hover { background: rgba(0, 240, 255, 0.06); }

.np-avatar-wrap { position: relative; display: flex; }
.np-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  transition: box-shadow 0.3s;
  object-fit: cover;
}
.np-nav-trigger:hover .np-avatar { box-shadow: 0 0 14px var(--primary-glow); }

.np-avatar-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--primary), var(--accent)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
}
.np-nav-trigger:hover .np-avatar-ring { opacity: 1; }

.np-username {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: text-shadow 0.3s;
}
.np-nav-trigger:hover .np-username { text-shadow: 0 0 8px var(--primary-glow); }

.np-arrow {
  font-size: 0.55rem;
  color: var(--primary);
  opacity: 0.75;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}
#user-dropdown-container.active-arrow .np-arrow { transform: rotate(180deg); }

/* Dropdown panel */
.np-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 220px;
  background: #0b0c14; /* opaque : texte net garanti, pas d'artefact de blur */
  border-radius: 14px;
  z-index: 99999;
  overflow: hidden;
  padding: 0;
}

/* User header */
.np-drop-user-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
  background: linear-gradient(135deg, rgba(0,240,255,0.08), rgba(189,0,255,0.05));
}
.np-drop-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 10px var(--primary-glow);
}
.np-drop-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-drop-tag {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.8;
  margin-top: 0.1rem;
}

/* Divider */
.np-drop-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  margin: 0.2rem 0;
}

/* Menu item */
.np-drop-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.62rem 1rem;
  color: rgba(255,255,255,0.82);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, transform 0.18s;
  border: none;
  background: transparent;
  width: 100%;
}
.np-drop-item:hover {
  background: rgba(0,240,255,0.07);
  color: var(--primary);
  /* pas de transform : provoque des textes fantômes sur certains GPU */
}
.np-drop-icon {
  font-size: 0.95rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Language */
.np-drop-lang { justify-content: flex-start; }
.np-drop-chevron {
  margin-left: auto;
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: transform 0.2s, color 0.2s;
  line-height: 1;
}
.np-drop-item.np-drop-lang:hover .np-drop-chevron {
  color: var(--primary);
  transform: rotate(90deg);
}

.np-lang-submenu {
  padding: 0.3rem 0.75rem 0.5rem 2.6rem;
  background: rgba(0,0,0,0.18);
  border-left: 2px solid rgba(0,240,255,0.18);
  margin: 0 0.6rem 0.3rem;
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.np-lang-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
}
.np-lang-btn:hover { background: rgba(0,240,255,0.07); color: white; }
.np-lang-active { color: var(--primary) !important; }
.np-lang-badge {
  font-size: 0.62rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), #00c4cc);
  color: #0a0a0f;
  padding: 0.08rem 0.45rem;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

/* Logout */
.np-drop-logout { color: rgba(248,113,113,0.88) !important; }
.np-drop-logout:hover {
  background: rgba(239,68,68,0.08) !important;
  color: #f87171 !important;
}

/* ── AMELIORATIONS GLOBAL DE DESIGN (NovaPulse Overhaul) ── */
body {
  opacity: 0;
  animation: pageFadeIn 0.6s ease-out 0.1s forwards;
}
@keyframes pageFadeIn {
  to { opacity: 1; }
}

#particles-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.particle {
  position: absolute;
  border-radius: 50%;
  animation: particleFloat linear infinite;
  box-shadow: 0 0 6px currentColor;
}
@keyframes particleFloat {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { transform: translateY(-110vh) translateX(60px) scale(0.2); opacity: 0; }
}

.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--primary, #00f0ff);
  margin-left: 4px;
  animation: cursorBlink 0.7s step-end infinite;
  vertical-align: text-bottom;
}
@keyframes cursorBlink {
  50% { opacity: 0; }
}

.stat-item {
  position: relative;
  overflow: hidden;
  /* Fond sombre net (le fond translucide laissait passer les effets = rendu délavé) */
  background: linear-gradient(160deg, #10131d 0%, #0a0c13 100%) !important;
}
/* Anneau dégradé animé — UNIQUEMENT sur la bordure grâce au mask */
.stat-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--glow-angle, 0deg),
    rgba(0, 240, 255, 0.9),
    transparent 25%,
    transparent 45%,
    rgba(189, 0, 255, 0.9) 55%,
    transparent 75%,
    rgba(0, 240, 255, 0.9)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: glowRotate 5s linear infinite;
  opacity: 0.4;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}
.stat-item:hover::before {
  opacity: 1;
}
@keyframes glowRotate {
  to { --glow-angle: 360deg; }
}
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Chiffres nets : dégradé blanc → cyan, halo discret qui suit les lettres */
.stats-banner .stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(180deg, #ffffff 25%, #9ff8ff 65%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.35));
  text-shadow: none;
}

/* Le statut garde sa couleur verte/rouge (pilotée en JS) */
.stats-banner #bot-status {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  filter: none;
}

/* Icônes plus présentes */
.stats-banner .tech-icon {
  width: 32px;
  height: 32px;
  color: rgba(0, 242, 254, 0.85);
  filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.35));
}

/* Scanline plus discrète (elle écrasait la carte) */
.stats-banner .scanline {
  height: 1px;
  opacity: 0.25;
  box-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
}

/* Halo doux en haut de carte */
.stat-item .sys-tag {
  position: relative;
  z-index: 3;
}

/* ================================================
   BANDEAU STATS — STYLE SAAS PRO (nouvelle version)
   ================================================ */
.stats-strip {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006) 40%),
    #0b0d15;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 1.8rem 2.4rem;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  position: relative;
  z-index: 1;
}
/* Fine ligne dégradée en haut du bandeau */
.stats-strip::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.6), rgba(189, 0, 255, 0.5), transparent);
}

.stat-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0.4rem 0.5rem;
}

.stat-chip {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
  background: linear-gradient(160deg, rgba(0, 240, 255, 0.12), rgba(189, 0, 255, 0.07));
  border: 1px solid rgba(0, 240, 255, 0.22);
  box-shadow: inset 0 0 14px rgba(0, 240, 255, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.stat-chip svg {
  width: 24px;
  height: 24px;
}
.stat-block:hover .stat-chip {
  transform: translateY(-3px);
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.18), inset 0 0 14px rgba(0, 240, 255, 0.1);
}

.stat-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.stat-value {
  font-size: 1.9rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.stat-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Statut : dot pulsant + texte piloté en JS */
.stat-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.35rem;
}
.stats-strip .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  50%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

.stat-divider {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

/* Skeleton adapté au nouveau bandeau */
.stat-value.skeleton {
  color: transparent !important;
  display: inline-block;
  width: 96px;
  height: 1.9rem;
  border-radius: 8px;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(0, 240, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.06) 60%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}

/* Responsive : 2 colonnes puis 1 */
@media (max-width: 900px) {
  .stats-strip {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 0.5rem;
    padding: 1.6rem 1.2rem;
  }
  .stat-divider { display: none; }
  .stat-block { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .stats-strip { grid-template-columns: 1fr; }
  .stat-value { font-size: 1.7rem; }
}

.bento-card {
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.4), box-shadow 0.35s ease !important;
  position: relative;
}
.bento-card:hover {
  transform: translateY(-6px) scale(1.015) !important;
  box-shadow: 0 12px 40px rgba(0, 240, 255, 0.12), 0 0 0 1px rgba(0, 240, 255, 0.15) !important;
}
.bento-card .bento-card-bg-glow {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.bento-card:hover .bento-card-bg-glow {
  opacity: 1;
}
.bento-card .bento-icon {
  transition: transform 0.35s cubic-bezier(.22,.68,0,1.4);
  display: inline-block;
}
.bento-card:hover .bento-icon {
  transform: scale(1.2) rotate(-5deg);
}

.footer-wrapper a {
  transition: color 0.25s ease, transform 0.25s ease, padding-left 0.25s ease;
  display: inline-block;
}
.footer-wrapper a:hover {
  color: var(--primary, #00f0ff) !important;
  transform: translateX(4px);
}
.footer-col h4,
.footer-col h3 {
  position: relative;
  padding-bottom: 0.5rem;
  margin-bottom: 0.8rem;
}
.footer-col h4::after,
.footer-col h3::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 24px; height: 2px;
  background: var(--primary, #00f0ff);
  border-radius: 1px;
  transition: width 0.3s ease;
}
.footer-col:hover h4::after,
.footer-col:hover h3::after {
  width: 48px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
}
/* (idem : l'effet de survol du logo du pied vit desormais sur .footer-logo-mark) */

/* ================================================
   MENU BURGER MOBILE (injecté par navbar.js)
   ================================================ */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 9px;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 10px;
  cursor: pointer;
  z-index: 1102;
  transition: background 0.2s, box-shadow 0.2s;
}
.nav-burger:hover {
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 12px var(--primary-glow);
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 10, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1100;
}
body.nav-locked .nav-overlay {
  opacity: 1;
  pointer-events: auto;
}
body.nav-locked {
  overflow: hidden;
}
/* La nav ouverte doit passer au-dessus de l'overlay */
nav.nav-open {
  z-index: 1102;
}

@media (max-width: 900px) {
  .nav-burger { display: flex; }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 5.5rem 1.5rem 2rem;
    background: rgba(10, 10, 18, 0.92);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-left: 1px solid rgba(0, 240, 255, 0.15);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.55);
    transform: translateX(105%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1101;
  }
  nav.nav-open .nav-links {
    transform: translateX(0);
  }
  .nav-links a.link {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    font-size: 1rem;
  }
  .nav-links a.link:hover {
    background: rgba(0, 240, 255, 0.07);
  }
  .nav-links .btn-outline {
    margin-top: 0.75rem;
    width: 100%;
  }
  .nav-links #user-dropdown-container {
    margin-left: 0 !important;
    margin-top: 0.75rem;
  }
}

/* ================================================
   HERO — DOUBLE CTA
   ================================================ */
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.btn-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.8rem;
  border-radius: 50px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-light);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.btn-secondary-cta:hover {
  border-color: var(--accent);
  background: rgba(189, 0, 255, 0.08);
  box-shadow: 0 0 18px rgba(189, 0, 255, 0.25);
  transform: translateY(-2px);
}
@media (max-width: 968px) {
  .hero-cta-row { justify-content: center; }
}

/* ================================================
   SECTION TÉMOIGNAGES
   ================================================ */
.testimonials-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2rem 3rem;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 240, 255, 0.35);
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.08);
}
.testimonial-stars {
  color: #fbbf24;
  font-size: 0.95rem;
  letter-spacing: 2px;
}
.testimonial-text {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: #0a0a0f;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  flex-shrink: 0;
}
.testimonial-name {
  font-weight: 700;
  font-size: 0.9rem;
}
.testimonial-role {
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* ================================================
   SECTION FAQ (ACCORDÉON)
   ================================================ */
.faq-section {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}
.faq-section .faq-item {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  margin-bottom: 1rem;
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.faq-section .faq-item.open {
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.06);
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  background: transparent;
  border: none;
  color: var(--text-light);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s;
}
.faq-section .faq-item.open .faq-question,
.faq-question:hover {
  color: var(--primary);
}
.faq-chevron {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--primary);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-section .faq-item.open .faq-chevron {
  transform: rotate(180deg);
}
.faq-section .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s;
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.7;
  padding: 0 1.5rem;
}
.faq-section .faq-item.open .faq-answer {
  max-height: 320px;
  padding: 0 1.5rem 1.3rem;
}

/* ================================================
   SKELETON LOADERS (stats en attente)
   ================================================ */
.stat-number.skeleton {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  /* Annule le background-clip:text hérité, sinon le shimmer est invisible */
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  position: relative;
  border-radius: 10px;
  width: 110px;
  height: 2.4rem;
  margin: 0 auto 0.4rem;
  filter: none !important;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(0, 240, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.06) 60%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  to { background-position: -200% 0; }
}

/* ================================================
   BENTO CARDS — TILT 3D + BORDURE DÉGRADÉE ANIMÉE
   ================================================ */
.bento-grid {
  perspective: 1200px;
}
.bento-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.bento-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--glow-angle, 0deg),
    transparent 0%,
    var(--primary) 12%,
    transparent 25%,
    transparent 50%,
    var(--accent) 62%,
    transparent 75%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: glowRotate 4s linear infinite;
  pointer-events: none;
}
.bento-card:hover::after {
  opacity: 1;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .bento-card::after { animation: none; }
}

/* ================================================
   HERO — RANGÉE DE CONFIANCE
   ================================================ */
.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.trust-stars {
  color: #fbbf24;
  letter-spacing: 1.5px;
  font-size: 0.9rem;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}
.trust-icon { font-size: 0.95rem; }
.trust-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.15);
}
@media (max-width: 968px) {
  .hero-trust-row { justify-content: center; }
  .trust-sep { display: none; }
}

/* ================================================
   BANDEAU "NOVAPULSE EN DIRECT"
   ------------------------------------------------
   La page ne portait aucun chiffre : rien ne prouvait au visiteur que le bot
   tournait vraiment au moment ou il lisait. Ce bandeau affiche l'etat releve a
   l'instant (/api/stats et /api/commands) juste apres le hero, la ou la
   question « est-ce que ca marche encore, ce truc ? » se pose.

   Il est masque par defaut (attribut hidden dans le HTML) : c'est le script qui
   le revele une fois les donnees obtenues. Aucun display n'est declare sur
   .live-band, sinon il ecraserait le hidden du navigateur.
   ================================================ */
.live-band {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 2rem 0;
}
.live-band[hidden] { display: none; }

.live-band-inner {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 2rem 1.75rem 1.6rem;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(0, 240, 255, 0.07), transparent 60%),
    var(--bg-card);
  overflow: hidden;
}
/* Liseret degrade en haut de la carte, rappel de la palette de marque. */
.live-band-inner::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
  opacity: 0.75;
}

.live-band-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 0 1.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Pastille de presence : elle bat comme un pouls, d'ou le nom du bot. */
.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: livePouls 2.2s ease-out infinite;
}
@keyframes livePouls {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
/* Service injoignable : la pastille passe a l'ambre et cesse de battre. */
.live-band.est-hors-ligne .live-dot {
  background: #f59e0b;
  animation: none;
  box-shadow: none;
}

.live-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}
.live-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.1rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: rgba(10, 10, 18, 0.45);
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.live-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 12px 30px rgba(0, 240, 255, 0.09);
}
/* HTML impose <dt> avant <dd> ; l'ordre visuel voulu est l'inverse. */
.live-tile dt { order: 2; }
.live-tile dd { order: 1; }

/* Entree en cascade, declenchee par le script quand le bandeau arrive a l'ecran.
   Le decalage est porte par --retard pour que l'animation reste declarative.
   Etat par defaut volontairement VISIBLE : si le script n'ajoute jamais la
   classe, les tuiles s'affichent quand meme au lieu de rester transparentes. */
@keyframes liveApparait {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.live-tile.live-apparait {
  animation: liveApparait 0.55s var(--np-spring) both;
  animation-delay: var(--retard, 0ms);
}

.live-tile dt {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-muted);
}
.live-value {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;   /* le compteur ne fait plus sautiller la tuile */
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.live-value-text {
  font-size: 1.35rem;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #22c55e;
}
.live-band.est-hors-ligne .live-value-text { color: #f59e0b; }
.live-unit {
  margin-left: 0.15rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.live-note {
  margin: 1.3rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.8;
}

@media (max-width: 860px) {
  .live-band { padding: 2.5rem 1rem 0; }
  .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-band-inner { padding: 1.5rem 1.1rem 1.2rem; }
  .live-value { font-size: 1.6rem; }
  .live-value-text { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .live-tile { transition: none; }
  .live-tile:hover { transform: none; }
  /* Le contenu reste integralement lisible, seule l'entree disparait. */
  .live-tile.live-apparait { animation: none; opacity: 1; transform: none; }
}

/* ================================================
   SECTION "COMMENT ÇA MARCHE"
   ================================================ */
.steps-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2rem 2rem;
}
.steps-grid {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  margin-top: 2.5rem;
}
.step-card {
  flex: 1;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 2.25rem 1.75rem 1.75rem;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 12px 35px rgba(0, 240, 255, 0.08);
}
.step-number {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: #0a0a0f;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 18px var(--primary-glow);
}
.step-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}
.step-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}
.step-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}
.step-connector {
  align-self: center;
  width: 42px;
  height: 2px;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  opacity: 0.5;
  position: relative;
}
.step-connector::after {
  content: '›';
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 800;
}
@media (max-width: 900px) {
  .steps-grid {
    flex-direction: column;
    gap: 2rem;
  }
  .step-connector {
    width: 2px;
    height: 34px;
    margin: 0 auto;
    background: linear-gradient(180deg, var(--primary), var(--accent));
  }
  .step-connector::after {
    content: '⌄';
    right: 50%;
    top: auto;
    bottom: -12px;
    transform: translateX(50%);
  }
}

/* ================================================
   BANDEAU CTA FINAL
   ================================================ */
.final-cta-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 2rem 6rem;
}
.final-cta-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 4rem 2rem;
  border-radius: 24px;
  border: 1px solid rgba(0, 240, 255, 0.25);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 240, 255, 0.1), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(189, 0, 255, 0.12), transparent 55%),
    var(--bg-card);
}
.final-cta-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 140px;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.22), transparent 70%);
  pointer-events: none;
}
.final-cta-card h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  margin-bottom: 0.9rem;
  background: linear-gradient(135deg, #ffffff 40%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.final-cta-card p {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto 2.25rem;
  line-height: 1.7;
}
.final-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* Preuve sociale top.gg (bouton Voter + badge auto-masqué) */
.topgg-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
}
.topgg-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #ff3366, #bd00ff);
  border: 1px solid rgba(255, 51, 102, 0.5);
  box-shadow: 0 6px 20px rgba(255, 51, 102, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.topgg-vote-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 51, 102, 0.42);
}
.topgg-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text, #e8e8f0);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.topgg-badge-num {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--primary, #00f0ff);
}
.topgg-badge-tag {
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ================================================
   BOUTON RETOUR EN HAUT (toutes les pages)
   ================================================ */
#np-back-to-top {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(0, 240, 255, 0.35);
  background: rgba(10, 10, 18, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--primary);
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
  z-index: 1050;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
#np-back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#np-back-to-top:hover {
  background: rgba(0, 240, 255, 0.12);
  box-shadow: 0 0 18px var(--primary-glow);
}

/* ================================================
   EFFETS "ÇA EN JETTE" ✨
   ================================================ */

/* 1. Aurora animée dans le hero */
.home-hero {
  position: relative;
  overflow: hidden;
}
.home-hero::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(0, 240, 255, 0.06) 60deg,
    transparent 120deg,
    rgba(189, 0, 255, 0.07) 200deg,
    transparent 280deg,
    rgba(0, 240, 255, 0.05) 340deg,
    transparent 360deg
  );
  animation: auroraSpin 26s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes auroraSpin {
  to { transform: rotate(360deg); }
}

/* 2. Titre au dégradé vivant */
.gradient-title-text {
  background: linear-gradient(
    120deg,
    #ffffff 20%,
    var(--primary) 40%,
    #7dd3fc 50%,
    var(--accent) 65%,
    #ffffff 85%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleFlow 7s ease-in-out infinite alternate;
}
@keyframes titleFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* 3. Sweep lumineux sur le bouton d'invitation */
.bot-invite {
  position: relative;
  overflow: hidden;
}
.bot-invite::before {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: btnShine 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShine {
  0%, 60% { left: -80%; }
  100% { left: 130%; }
}

/* 4. Soulignement néon animé des liens navbar */
.nav-links a.link {
  position: relative;
  padding-bottom: 3px;
}
.nav-links a.link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 8px var(--primary-glow);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a.link:hover::after {
  width: 100%;
}

/* 5. Chiffres des stats : le style néon net est défini plus bas
   (.stats-banner .stat-number) — un text-shadow ici rendait les chiffres flous */

/* 6. Logo navbar : glow au survol */
nav .logo img {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
nav .logo:hover img {
  box-shadow: 0 0 16px var(--primary-glow);
  transform: rotate(-8deg) scale(1.08);
}

/* 7. Spotlight qui suit la souris sur les cartes */
.np-spot {
  position: relative;
}
.np-spot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 240, 255, 0.09),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
.np-spot:hover::before {
  opacity: 1;
}

/* 8. Bandeau marquee de fonctionnalités — version pro
   Double rangée, sens opposés, fondu latéral au mask, boucle sans couture */
.marquee-band {
  overflow: hidden;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(0, 240, 255, 0.12);
  border-bottom: 1px solid rgba(189, 0, 255, 0.12);
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.03), rgba(189, 0, 255, 0.03));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Fondu propre sur les bords, quel que soit le fond derrière */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row {
  overflow: hidden;
  width: 100%;
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee-track.marquee-left {
  animation: marqueeScroll 36s linear infinite;
}
.marquee-track.marquee-right {
  animation: marqueeScroll 46s linear infinite reverse;
}
.marquee-row:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  /* margin-right au lieu de gap : espacement identique au point de bouclage */
  margin-right: 1rem;
  padding: 0.6rem 1.3rem;
  border-radius: 50px;
  border: 1px solid rgba(0, 240, 255, 0.18);
  background: rgba(20, 22, 32, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-light);
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.marquee-chip:hover {
  border-color: var(--primary);
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 4px 18px rgba(0, 240, 255, 0.22);
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .marquee-track.marquee-left  { animation-duration: 24s; }
  .marquee-track.marquee-right { animation-duration: 30s; }
}

/* ================================================
   DASHBOARD — SKIN PRO ✦
   (surcouche CSS pure, aucune modif du JS)
   ================================================ */

/* --- Colonne serveurs : style Discord premium --- */
body.dashboard-body .sidebar-servers {
  background: linear-gradient(180deg, rgba(8, 9, 14, 0.95), rgba(10, 11, 18, 0.9));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 1.25rem;
  gap: 0.85rem;
}
body.dashboard-body .server-icon {
  position: relative;
  border: 2px solid transparent;
  /* pas d'overflow:hidden : l'img hérite du border-radius, et
     l'indicateur ::before doit dépasser à gauche */
  transition: border-radius 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
body.dashboard-body .server-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
body.dashboard-body .server-icon:hover {
  border-radius: 16px;
  background: var(--bg-card);
  border-color: rgba(0, 240, 255, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 240, 255, 0.15);
}
body.dashboard-body .server-icon.active {
  border-radius: 16px;
  background: var(--bg-card);
  border-color: var(--primary);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
}
/* Petit indicateur lumineux à gauche du serveur actif */
body.dashboard-body .server-icon.active::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  box-shadow: 0 0 8px var(--primary-glow);
}

/* --- Colonne modules --- */
body.dashboard-body .sidebar-modules {
  background: linear-gradient(180deg, rgba(13, 14, 22, 0.92), rgba(11, 12, 19, 0.88));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}
body.dashboard-body .module-header {
  background:
    radial-gradient(ellipse at 50% -20%, rgba(0, 240, 255, 0.1), transparent 65%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}
body.dashboard-body .module-header img {
  border: 2px solid rgba(0, 240, 255, 0.4);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.18);
}

/* Items de module : pilules arrondies avec accent */
body.dashboard-body .module-item {
  margin: 0.15rem 0.6rem;
  padding: 0.68rem 1rem;
  border-radius: 10px;
  font-size: 0.92rem;
  border-left: 3px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
body.dashboard-body .module-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(3px);
}
body.dashboard-body .module-item.active {
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.12), rgba(0, 240, 255, 0.03));
  border-left: 3px solid var(--primary);
  box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.04);
  color: #fff;
}

/* --- Zone principale --- */
body.dashboard-body .main-content {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(0, 240, 255, 0.04), transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(189, 0, 255, 0.04), transparent 50%);
}

/* Scrollbar stylée (zone principale + sidebars visibles) */
body.dashboard-body .main-content::-webkit-scrollbar {
  width: 9px;
}
body.dashboard-body .main-content::-webkit-scrollbar-track {
  background: transparent;
}
body.dashboard-body .main-content::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.18);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
body.dashboard-body .main-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 255, 0.35);
  background-clip: padding-box;
}

/* Titres de sections */
body.dashboard-body .settings-group h2 {
  position: relative;
  padding-bottom: 0.6rem;
  letter-spacing: -0.01em;
}
body.dashboard-body .settings-group h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

/* Lignes de réglages : hover doux */
body.dashboard-body .settings-row {
  border-radius: 10px;
  padding: 1rem 0.9rem;
  margin: 0 -0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease;
}
body.dashboard-body .settings-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

/* --- Champs de formulaire : focus ring pro --- */
body.dashboard-body .main-content input[type="text"],
body.dashboard-body .main-content input[type="number"],
body.dashboard-body .main-content input[type="url"],
body.dashboard-body .main-content textarea,
body.dashboard-body .main-content select {
  background: rgba(8, 9, 14, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.dashboard-body .main-content input:focus,
body.dashboard-body .main-content textarea:focus,
body.dashboard-body .main-content select:focus {
  outline: none !important;
  border-color: rgba(0, 240, 255, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.12) !important;
}

/* --- Toggles : glow quand activé --- */
body.dashboard-body .slider {
  background-color: rgba(255, 255, 255, 0.12);
}
body.dashboard-body input:checked + .slider {
  background: linear-gradient(90deg, var(--primary), #00c4cc);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

/* --- Boutons du dashboard --- */
body.dashboard-body .main-content button {
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
body.dashboard-body .main-content button:hover {
  filter: brightness(1.12);
}
body.dashboard-body .main-content button:active {
  transform: scale(0.97);
}

/* Onglets du comparatif */
body.dashboard-body #comp-tabs .tab-btn:hover {
  border-color: rgba(0, 240, 255, 0.4) !important;
  color: #fff !important;
}

/* Écran d'accueil du panel */
body.dashboard-body #page-home h1 {
  background: linear-gradient(135deg, #fff 30%, var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: none !important;
  font-size: 2.3rem !important;
  letter-spacing: -0.02em;
}

/* Cartes internes (comparatif, panneaux) : liseré supérieur dégradé */
body.dashboard-body #page-home > div > div[style*="border-radius:14px"] {
  position: relative;
  overflow: hidden;
}

/* ================================================
   PASSE DE FINITION — COMMANDES / PREMIUM / CLASSEMENT
   ================================================ */

/* Cartes de commandes : accent latéral + nom en style code */
.command-item-card {
  position: relative;
  border-left: 3px solid transparent !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}
.command-item-card:hover {
  border-left-color: var(--primary) !important;
  transform: translateX(4px);
  box-shadow: 0 6px 22px rgba(0, 240, 255, 0.1) !important;
}
.command-item-name {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  color: var(--primary) !important;
}
.command-item-card:hover .command-item-name {
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

/* Cartes tarifs Premium : lift + liseré supérieur dégradé */
.price-box {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.price-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.price-box:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 240, 255, 0.5) !important;
  box-shadow: 0 18px 45px rgba(0, 240, 255, 0.14);
}
.price-box:hover::before {
  opacity: 1;
}
.price-box .price {
  background: linear-gradient(135deg, #ffffff 30%, var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Podium du classement : couronne lumineuse sur le 1er */
.podium-step {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.podium-step:hover {
  transform: translateY(-6px);
}

/* Focus clavier visible partout (accessibilité pro) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sélection de texte aux couleurs du site */
::selection {
  background: rgba(0, 240, 255, 0.28);
  color: #ffffff;
}

/* Page 404 */
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.error-code {
  font-size: clamp(6rem, 18vw, 11rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(0, 240, 255, 0.25));
  animation: errorFloat 4s ease-in-out infinite;
}
@keyframes errorFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.error-page h1 {
  font-size: 1.6rem;
  margin: 1rem 0 0.6rem;
}
.error-page p {
  color: var(--text-muted);
  max-width: 440px;
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* ================================================
   PANEL — SIDEBAR 2.0 (recherche + catégories)
   ================================================ */
.module-search-wrap {
  padding: 0.9rem 0.9rem 0.4rem;
  position: relative;
}
.module-search {
  width: 100%;
  padding: 0.55rem 3.4rem 0.55rem 2.2rem;
  background: rgba(8, 9, 14, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.module-search::placeholder { color: var(--text-muted); }
.module-search:focus {
  outline: none;
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1);
}
.module-search-icon {
  position: absolute;
  left: 1.55rem;
  top: 50%;
  transform: translateY(-38%);
  font-size: 0.8rem;
  opacity: 0.6;
  pointer-events: none;
}
.module-search-kbd {
  position: absolute;
  right: 1.55rem;
  top: 50%;
  transform: translateY(-38%);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  padding: 0.1rem 0.4rem;
  pointer-events: none;
}

.module-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.4rem 0.3rem;
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
  transition: color 0.2s ease;
}
.module-group-header:hover { color: var(--primary); }
.module-group-chevron {
  font-size: 0.75rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.module-group.collapsed .module-group-chevron { transform: rotate(-90deg); }
.module-group.collapsed .module-group-items { display: none; }

/* Mobile : on aplatit les groupes pour garder la barre horizontale */
@media (max-width: 768px) {
  .module-search-wrap { display: none !important; }
  .module-group-header { display: none !important; }
  .module-group, .module-group-items { display: contents !important; }
}

/* ================================================
   PANEL — SKELETON AU CHANGEMENT DE SERVEUR
   ================================================ */
#np-skeleton-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(10, 11, 17, 0.97);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  opacity: 1;
  transition: opacity 0.3s ease;
}
#np-skeleton-overlay.fade { opacity: 0; }
.np-sk-bar {
  height: 20px;
  width: 85%;
  border-radius: 8px;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(0, 240, 255, 0.13) 50%,
    rgba(255, 255, 255, 0.05) 60%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
}
.np-sk-bar.big { height: 110px; }

/* ================================================
   PANEL — EN-TÊTE DE MODULE UNIFORME
   ================================================ */
#np-module-banner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.8rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 240, 255, 0.18);
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.09), rgba(189, 0, 255, 0.05) 55%, transparent);
  animation: bannerIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bannerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.np-banner-icon {
  font-size: 1.6rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.25);
  flex-shrink: 0;
}
.np-banner-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.np-banner-cat {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.2rem;
}
@media (max-width: 768px) {
  #np-module-banner { padding: 0.9rem 1rem; margin-bottom: 1.2rem; }
  .np-banner-icon { width: 42px; height: 42px; font-size: 1.3rem; }
  .np-banner-title { font-size: 1.05rem; }
}

/* ================================================
   PANEL — HARMONISATION GLOBALE (surcouche CSS)
   ================================================ */

/* --- Boutons primaires : cyan lisible + glow --- */
body.dashboard-body .btn-primary {
  background: linear-gradient(135deg, var(--primary), #00c4cc) !important;
  color: #061014 !important;
  border-radius: 10px !important;
  padding: 0.7rem 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.22);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
body.dashboard-body .btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.35);
  transform: translateY(-1px);
}
body.dashboard-body .btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Boutons secondaires / danger repérés par leur couleur inline */
body.dashboard-body button[style*="ef4444"],
body.dashboard-body button[style*="#e74c3c"] {
  border-radius: 10px !important;
  transition: filter 0.2s ease, transform 0.15s ease !important;
}
body.dashboard-body button[style*="ef4444"]:hover { filter: brightness(1.1); }

/* --- Labels de champs : moins criards --- */
body.dashboard-body .input-group label {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.82rem !important;
  color: #b9c4d6 !important;
  font-weight: 600 !important;
}

/* --- Champs : rayon + focus ring homogènes (renforce le skin existant) --- */
body.dashboard-body .input-group input[type="text"],
body.dashboard-body .input-group input[type="number"],
body.dashboard-body .input-group input[type="url"],
body.dashboard-body .input-group select,
body.dashboard-body .input-group textarea {
  border-radius: 10px !important;
  padding: 0.7rem 0.85rem !important;
}

/* --- Cartes de réglages homogènes (rayon 16px, ombre douce) --- */
body.dashboard-body .settings-group,
body.dashboard-body .section > .settings-group {
  border-radius: 16px !important;
}
body.dashboard-body .settings-group[style*="background"] {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
}

/* Titres de section (h2 en tête de module) */
body.dashboard-body .section > h2 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
body.dashboard-body .section > p.desc {
  color: var(--text-muted);
  margin-bottom: 1.6rem;
}

/* --- Badge Premium unifié : remplace visuellement les "💎" des labels --- */
body.dashboard-body .input-group label {
  position: relative;
}

/* ================================================
   PANEL — BARRE DE SAUVEGARDE FLOTTANTE
   ================================================ */
#np-save-bar {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 150%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.7rem 0.8rem 0.7rem 1.4rem;
  border-radius: 14px;
  background: rgba(13, 15, 23, 0.96);
  border: 1px solid rgba(0, 240, 255, 0.25);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 240, 255, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: calc(100vw - 2rem);
}
#np-save-bar.visible {
  transform: translate(-50%, 0);
}
.np-save-txt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.np-save-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fbbf24;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  animation: statusPulse 2s ease-in-out infinite;
}
.np-save-btn {
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1.4rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: #061014;
  background: linear-gradient(135deg, var(--primary), #00c4cc);
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}
.np-save-btn:hover { filter: brightness(1.1); }
.np-save-btn:active { transform: scale(0.97); }
@media (max-width: 600px) {
  .np-save-txt span:last-child { display: none; } /* garde juste le point + bouton */
}
@media (prefers-reduced-motion: reduce) {
  .home-hero::after,
  .gradient-title-text,
  .bot-invite::before,
  .marquee-track {
    animation: none;
  }
}

/* 9. Constellation en fond (toutes les pages) */
#np-constellation {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* 10. Compteurs odomètre */
.odo-digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: bottom;
}
.odo-strip {
  display: flex;
  flex-direction: column;
  transition: transform 1.6s cubic-bezier(0.22, 0.68, 0.2, 1);
}
.odo-strip span {
  height: 1em;
  line-height: 1;
  display: block;
}




/* ══════════════════════════════════════════════════════════════
   PRO POLISH LAYER — harmonisation professionnelle du panel
   ══════════════════════════════════════════════════════════════ */

/* --- Boutons primaires : dégradé, relief, micro-interactions --- */
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: #05161c;
  border-radius: 10px;
  padding: 0.8rem 1.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px var(--primary-glow);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px var(--primary-glow);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px var(--primary-glow);
}

/* --- Inputs, selects, textareas : arrondis, focus ring doux --- */
.input-group input[type="text"],
.input-group input[type="number"],
.input-group select,
.input-group textarea {
  background: var(--bg-deep);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-group input[type="text"]:hover,
.input-group select:hover,
.input-group textarea:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.12);
}

/* Portée forcée sur la page Arrivées/Départs (styles inline existants) */
#page-welcome input[type="text"],
#page-welcome textarea,
#page-welcome select {
  border-radius: 10px !important;
  background: var(--bg-deep) !important;
  border: 1px solid var(--border-color) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#page-welcome input[type="text"]:focus,
#page-welcome textarea:focus,
#page-welcome select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.12) !important;
  outline: none !important;
}

/* --- Selects : flèche personnalisée --- */
.input-group select,
#page-welcome select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238e9bb0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.9rem center !important;
  background-size: 12px !important;
  padding-right: 2.5rem !important;
}

/* --- Sliders (range) : piste fine + curseur néon --- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
  cursor: grab;
  transition: transform 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--primary);
  box-shadow: 0 0 10px var(--primary-glow); cursor: grab;
}

/* --- Toggles : glow à l'activation --- */
.slider { background-color: rgba(255, 255, 255, 0.12); }
input:checked + .slider { box-shadow: 0 0 12px var(--primary-glow); }

/* --- Sidebar modules : items arrondis, actif en dégradé --- */
.module-item {
  border-radius: 10px;
  margin: 0.15rem 0.75rem;
  padding: 0.7rem 1rem;
  transition: all 0.18s ease;
}
.module-item:hover { transform: translateX(2px); }
.module-item.active {
  border-left: none;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.14), rgba(0, 240, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.25);
  color: var(--primary);
}

/* --- Titres de sections : barre d'accent --- */
.settings-group h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}
.settings-group h2::before {
  content: '';
  width: 4px;
  height: 1.15em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--primary), transparent);
  flex-shrink: 0;
}

/* --- Cartes de réglages (blocs à fond) : bordure + ombre + verre --- */
.settings-group[style*="background"] {
  border: 1px solid var(--border-color);
  border-radius: 14px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* --- Labels : plus lisibles --- */
.input-group label { letter-spacing: 0.05em; }

/* --- Scrollbars discrètes --- */
.main-content::-webkit-scrollbar,
.modules-sidebar::-webkit-scrollbar { width: 8px; }
.main-content::-webkit-scrollbar-track,
.modules-sidebar::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb,
.modules-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
.main-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }

/* ══════════════════════════════════════════════════════════════
   SECTION WELCOME CARD — présentation pro style MEE6
   ══════════════════════════════════════════════════════════════ */

/* Sous-titres de sections dans la config welcome */
.wc-section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.premium-chip {
  font-size: 0.66rem;
  background: linear-gradient(135deg, #ffd700, #ff9d00);
  color: #231a00;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(255, 180, 0, 0.35);
}

/* Palettes de couleurs : pastilles interactives */
.color-swatch {
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.color-swatch:hover {
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

/* Aperçu : colonne collante + cadre premium */
#welcome-config > div:nth-child(2) {
  position: sticky;
  top: 0.5rem;
  align-self: start;
}
#welcome-config .discord-preview {
  max-width: none;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
#welcome-canvas-preview {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Responsive : la grille welcome passe en 1 colonne sur écran étroit */
@media (max-width: 1100px) {
  #welcome-config { grid-template-columns: 1fr !important; }
  #welcome-config > div:nth-child(2) { position: static; }
}

/* ══════════════════════════════════════════════════════════════
   PRO POLISH LAYER 2 — tableaux, cartes KPI, généralisation
   ══════════════════════════════════════════════════════════════ */

/* --- Inputs harmonisés sur TOUTES les pages du panel --- */
.main-content input[type="text"],
.main-content input[type="number"],
.main-content textarea,
.main-content select {
  border-radius: 10px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.main-content input[type="text"]:focus,
.main-content input[type="number"]:focus,
.main-content textarea:focus,
.main-content select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.12) !important;
  outline: none !important;
}

/* --- Cartes génériques (blocs à fond bg-card) : relief uniforme --- */
.main-content div[style*="background:var(--bg-card)"] {
  border: 1px solid var(--border-color);
  border-radius: 14px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

/* --- Tableaux : conteneur arrondi, header raffiné, survol des lignes --- */
.main-content table {
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}
.main-content table thead tr {
  background: rgba(255, 255, 255, 0.035);
}
.main-content table th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem !important;
}
.main-content table tbody tr {
  transition: background 0.15s ease;
}
.main-content table tbody tr:hover {
  background: rgba(0, 240, 255, 0.045);
}
.main-content table tbody td {
  border-top: 1px solid var(--border-color);
}

/* --- Cartes KPI (stats tickets & co) --- */
.np-kpi {
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.np-kpi:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 240, 255, 0.35) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

/* --- Boutons secondaires (outline) au niveau du reste --- */
.main-content .btn-outline {
  border-radius: 10px;
  transition: all 0.18s ease;
}
.main-content .btn-outline:hover {
  box-shadow: 0 0 14px var(--primary-glow);
  transform: translateY(-1px);
}

/* --- Badge LIVE (page stats) --- */
.np-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}
.np-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  animation: np-pulse 1.6s ease-in-out infinite;
}
@keyframes np-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}

/* --- Boutons outline : lisibles sur TOUS les thèmes --- */
.main-content .btn-outline {
  color: var(--text-light) !important;
  border: 1.5px solid var(--primary) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  text-transform: none !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.main-content .btn-outline:hover {
  background: var(--primary) !important;
  color: #0a0a0f !important;
}

/* === FILIGRANE MASCOTTES EN FOND (pages publiques, hors dashboard) === */
body:not(.dashboard-body)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.12;
  filter: blur(1.5px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-image:
    url('char_blob_blue.webp'),
    url('char_robot.webp'),
    url('char_alien_green.webp'),
    url('char_blob_orange.webp');
  background-position: 5% 84%, 27% 16%, 72% 80%, 94% 24%;
  background-size: 200px, 140px, 170px, 130px;
}
@media (max-width: 768px) {
  body:not(.dashboard-body)::before {
    opacity: 0.08;
    background-size: 110px, 80px, 95px, 75px;
  }
}

/* Le hero devient un contexte d'empilement pour contenir les mascottes derrière le contenu */
.home-hero, .premium-hero, .commands-hero { isolation: isolate; }

/* === PERSONNAGES ANIMÉS (flottement doux) — NovaPulse === */
.hero-characters {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero-characters .hc {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  will-change: transform;
}
.premium-hero .hero-characters .hc,
.commands-hero .hero-characters .hc {
  background-position: center;
}
.hc-blue   { background-image: url('char_blob_blue.webp');   animation: npFloatBlue   8s   cubic-bezier(0.37, 0, 0.63, 1) infinite; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.40)) drop-shadow(0 0 20px rgba(56,189,248,0.40)); }
.hc-robot  { background-image: url('char_robot.webp');       animation: npFloatRobot  6.8s cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: -1.7s; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.40)) drop-shadow(0 0 20px rgba(168,85,247,0.42)); }
.hc-alien  { background-image: url('char_alien_green.webp'); animation: npFloatAlien  9s   cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: -3.4s; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.40)) drop-shadow(0 0 20px rgba(74,222,128,0.42)); }
.hc-orange { background-image: url('char_blob_orange.webp'); animation: npFloatOrange 6s   cubic-bezier(0.37, 0, 0.63, 1) infinite; animation-delay: -0.9s; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.40)) drop-shadow(0 0 20px rgba(251,146,60,0.45)); }

/* Apparition en fondu + légère montée au chargement (rendu premium) */
.hero-characters { animation: npCharsReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes npCharsReveal {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Flottement organique fluide (translate3d = GPU, easing sinusoïdal doux) */
@keyframes npFloatBlue {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(3px, -7px, 0); }
  40%  { transform: translate3d(4px, -13px, 0); }
  60%  { transform: translate3d(0, -15px, 0); }
  80%  { transform: translate3d(-4px, -7px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes npFloatRobot {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-3px, -6px, 0); }
  50%  { transform: translate3d(0, -10px, 0); }
  75%  { transform: translate3d(3px, -5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes npFloatAlien {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(3px, -8px, 0); }
  45%  { transform: translate3d(5px, -14px, 0); }
  65%  { transform: translate3d(-2px, -11px, 0); }
  85%  { transform: translate3d(-4px, -5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes npFloatOrange {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-3px, -6px, 0); }
  50%  { transform: translate3d(2px, -11px, 0); }
  75%  { transform: translate3d(4px, -5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Accessibilité : respecte "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  .hero-characters, .hero-characters .hc { animation: none !important; }
}
/* === APERÇU CHAT — FINITION PRO === */
.chat-sandbox {
  background: linear-gradient(180deg, rgba(24,25,30,0.92), rgba(16,17,22,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,240,255,0.05),
              inset 0 1px 0 rgba(255,255,255,0.04);
}
.chat-sandbox-header {
  background: linear-gradient(180deg, rgba(40,42,50,0.55), rgba(30,32,40,0.35));
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
/* Anneau coloré sur l'avatar du bot */
.chat-msg-avatar.is-bot {
  box-shadow: 0 0 0 2px rgba(0,240,255,0.55), 0 0 12px rgba(0,240,255,0.25);
}
/* Ligne de message : léger surlignage au survol (façon Discord) */
.chat-msg {
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.chat-msg:hover { background: rgba(255,255,255,0.03); }
/* Horodatage discret */
.chat-msg-time {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.75;
  margin-left: 0.2rem;
}
/* Tag "APP" façon Discord (blurple) */
.chat-bot-tag {
  background: #5865F2;
  color: #fff;
  border-radius: 4px;
  font-size: 0.62rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 1px 5px;
  position: relative;
  top: -1px;
}
/* Indicateur "en train d'écrire" : 3 points qui rebondissent */
.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0 2px;
}
.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.5;
  animation: chatTyping 1.3s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes chatTyping {
  0%,60%,100% { transform: translateY(0); opacity: 0.4; }
  30%         { transform: translateY(-5px); opacity: 1; }
}
/* Scrollbar totalement masquée, tous navigateurs (le chat défile automatiquement) */
/* 1) Masquage natif (Chromium / Firefox / Edge) */
.chat-sandbox-messages { scrollbar-width: none; -ms-overflow-style: none; }
.chat-sandbox-messages::-webkit-scrollbar { width: 0; height: 0; display: none; background: transparent; }
/* 2) Repli universel : la barre est poussée hors cadre puis découpée par .chat-sandbox (overflow:hidden) */
.chat-sandbox { overflow: hidden; }
.chat-sandbox-messages {
  padding-right: calc(1.2rem + 24px);
  margin-right: -24px;
  overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
  .chat-typing span { animation: none !important; }
}

/* ================================================================
   🌸 NAVBAR « ANIME » — pétales sakura + animations ressort (nova20)
   Ajouté PAR-DESSUS l'existant : rien n'est remplacé. Palette qui
   marie le rose sakura avec ton néon cyan/violet.
   ================================================================ */
:root {
  --sakura: #ff9ecb;
  --sakura-2: #ffc4e0;
  --sakura-glow: rgba(255, 158, 203, 0.55);
  --np-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Angle animable pour les anneaux/bordures coniques rotatifs.
   (Chrome/Edge : @property OK ; ailleurs, dégradé statique en secours.) */
@property --ring {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes npRingSpin { to { --ring: 360deg; } }

/* Entrée en ressort de la barre (pas de fill-mode : aucun transform
   résiduel, pour ne pas casser le positionnement du menu mobile) */
nav {
  /* La barre prend la teinte du thème : dégradé twilight + lueur sakura.
     (Volontairement SANS backdrop-filter : évite le bug de "fantômes"
      dans le menu déroulant sur Chrome que tu avais noté.) */
  background: linear-gradient(90deg,
    rgba(28, 13, 42, 0.92) 0%,
    rgba(14, 11, 22, 0.88) 50%,
    rgba(34, 15, 48, 0.92) 100%);
  border-bottom: 1px solid rgba(255, 158, 203, 0.18);
  box-shadow: 0 4px 26px rgba(18, 6, 28, 0.35);
  animation: npNavBounce 1s var(--np-spring);
  transition: height 0.5s var(--np-spring), background 0.45s ease,
              box-shadow 0.45s ease, border-color 0.45s ease;
}

/* Le mot « NOVAPULSE » prend le dégradé sakura → cyan, et il coule doucement */
nav .logo span {
  background: linear-gradient(96deg, #ffffff, var(--sakura-2) 35%, var(--primary) 65%, #ffffff);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 18px rgba(255, 158, 203, 0.22);
  animation: npWordFlow 8s linear infinite;
}
@keyframes npWordFlow {
  to { background-position: 220% center; }
}
@keyframes npNavBounce {
  0%   { transform: translateY(-110%); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}

/* Liseré aurora animé (rose → cyan → violet) sous la barre */
nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sakura), var(--primary), var(--accent), transparent);
  background-size: 200% 100%;
  opacity: 0.65;
  pointer-events: none;
  animation: npAurora 7s linear infinite;
}
@keyframes npAurora {
  from { background-position: 0 0; }
  to   { background-position: 200% 0; }
}

/* État condensé au scroll (classe .np-scrolled posée par navbar.js) */
nav.np-scrolled {
  height: 60px;
  background: linear-gradient(90deg,
    rgba(30, 14, 45, 0.96) 0%,
    rgba(16, 12, 24, 0.94) 50%,
    rgba(36, 16, 50, 0.96) 100%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 22px var(--sakura-glow);
}
nav.np-scrolled::after { opacity: 1; height: 2px; }

/* Logo : flottement doux (sur le <a>) + halo qui respire (sur l'img,
   via filter pour ne pas écraser ton box-shadow de survol existant) */
nav .logo { position: relative; animation: npLogoFloat 4.5s ease-in-out infinite; }
@keyframes npLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* Anneau conique arc-en-ciel qui tourne autour du logo (halo ~3px) */
nav .logo::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: conic-gradient(from var(--ring), var(--sakura), var(--primary), var(--accent), var(--sakura));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  filter: drop-shadow(0 0 6px var(--sakura-glow));
  animation: npRingSpin 5s linear infinite;
  pointer-events: none;
  z-index: -1;
}
nav .logo img {
  filter: drop-shadow(0 0 6px var(--sakura-glow));
  animation: npLogoGlow 3.2s ease-in-out infinite;
}
@keyframes npLogoGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 158, 203, 0.35)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255, 158, 203, 0.7)); }
}

/* Liens : soulignement rose→néon en ressort + fleur ✿ qui « pop » */
.nav-links a.link::after {
  background: linear-gradient(90deg, var(--sakura), var(--primary), var(--accent));
  transition: width 0.4s var(--np-spring);
}
.nav-links a.link::before {
  content: "✿";
  position: absolute;
  top: -11px; right: -9px;
  font-size: 0.7rem;
  color: var(--sakura);
  text-shadow: 0 0 6px var(--sakura-glow);
  opacity: 0;
  transform: scale(0) rotate(-40deg);
  transition: opacity 0.3s ease, transform 0.45s var(--np-spring);
  pointer-events: none;
}
.nav-links a.link:hover::before,
.nav-links a.link:focus-visible::before {
  opacity: 1;
  transform: scale(1) rotate(8deg);
}

/* Bouton Panel : bordure conique rotative + reflet qui balaie + rebond */
.nav-links .btn-outline {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* transform en ease-out doux : le bouton suit la souris de façon fluide,
     sans le rebond du ressort qui le faisait "trembloter" */
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease,
              color 0.3s ease, box-shadow 0.35s ease;
  will-change: transform;
}
/* Bordure dégradée rotative (anneau masqué au bord du bouton) */
.nav-links .btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--ring), var(--sakura), var(--primary), var(--accent), var(--sakura));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: npRingSpin 4.5s linear infinite;
}
.nav-links .btn-outline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.4) 50%, transparent 68%);
  transform: translateX(-175%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.nav-links .btn-outline:hover::after { transform: translateX(175%); }
/* Survol : PLUS de bleu vif — teinte sakura douce + texte blanc + halo rose.
   (!important + préfixe nav pour battre aussi le hover bleu du thème clair.) */
nav .nav-links .btn-outline:hover {
  background: rgba(255, 158, 203, 0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 24px var(--sakura-glow);
}
nav .nav-links .btn-outline:hover::before {
  filter: brightness(1.3) drop-shadow(0 0 7px var(--sakura-glow));
}

/* Canvas des pétales de sakura (créé par navbar.js) — devant le
   contenu, DERRIÈRE la navbar (1000) et les modales, clics non bloqués */
#np-sakura {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

/* Flash « speed-lines » façon manga au passage en mode condensé */
.np-speedlines {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 70px;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.09) 22px 24px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.np-speedlines.np-flash { animation: npSpeed 0.55s ease-out; }
@keyframes npSpeed {
  0%   { opacity: 0; transform: translateX(-28px); }
  40%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateX(28px); }
}

/* Respect du « mouvement réduit » : on calme tout */
@media (prefers-reduced-motion: reduce) {
  nav, nav .logo, nav .logo img, nav .logo span,
  nav::after, .nav-links .btn-outline::before { animation: none !important; }
  #np-sakura, .np-speedlines, nav .logo::before { display: none !important; }
}

/* ================================================================
   AUDIT 2026 — clarté, conversion, accessibilité et mobile
   ================================================================ */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid #ff9ecb;
  outline-offset: 3px;
}

.home-hero {
  padding: 6.5rem 2rem 4.5rem;
}

.home-hero::after {
  animation: none;
  opacity: 0.45;
}

.home-hero .hero-glow-2,
.home-hero .hc-blue,
.home-hero .hc-alien,
.home-hero .hc-orange {
  display: none;
}

.home-hero .bot-part {
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  gap: 3rem;
}

.home-hero .bot-logo {
  width: 84px;
  height: 84px;
  margin-bottom: 1.15rem;
  animation: none;
}

.home-hero .bot-title h1 {
  max-width: 720px;
  font-size: clamp(2.45rem, 4vw, 3.45rem);
  line-height: 1.08;
}

.home-hero .gradient-title-text,
.home-hero .bot-invite::before {
  animation: none;
}

.home-hero .bot-description {
  max-width: 680px;
  margin-top: 0.65rem;
  font-size: 1.12rem;
  line-height: 1.55;
  color: #c7cedb;
}

.hero-benefits {
  display: grid;
  gap: 0.65rem;
  max-width: 680px;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
  color: #e9edf5;
}

.hero-benefits li {
  position: relative;
  padding-left: 1.65rem;
  line-height: 1.45;
}

.hero-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-weight: 800;
}

.home-hero .hero-cta-row {
  margin-top: 1.6rem;
}

.home-hero .hero-trust-row {
  margin-top: 1.25rem;
}

.hero-privacy-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin-top: 0.8rem;
  color: #9da8ba;
  font-size: 0.76rem;
  line-height: 1.45;
}

.hero-privacy-note a {
  color: #bff8ff;
  text-underline-offset: 3px;
}

.home-hero .chat-sandbox {
  height: 340px;
}

#demo-nova {
  scroll-margin-top: 90px;
}

.hero-scroll-indicator {
  border: 0;
  background: transparent;
  font-family: inherit;
}

.stats-banner {
  padding-top: 2.25rem;
}

.testimonials-section {
  padding-top: 4rem;
}

.testimonial-text {
  color: #c6cdda;
}

/* Les catégories défilent dans leur propre zone, jamais dans la page entière. */
.commands-page-container,
.commands-layout,
.commands-sidebar-nav,
.commands-main-content,
.commands-cat-list {
  min-width: 0;
  max-width: 100%;
}

.commands-cat-item {
  padding: 0;
  flex: 0 0 auto;
}

.commands-cat-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.2rem;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.commands-cat-item.active .commands-cat-button {
  color: var(--primary);
}

/* Le tableau Premium défile localement sans élargir le body. */
.premium-content {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.premium-content > *,
.premium-content .features-grid {
  min-width: 0;
  max-width: 100%;
}

.premium-compare-scroll {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

table.premium-compare-table {
  display: table !important;
  width: 100% !important;
  min-width: 720px;
  white-space: normal !important;
  overflow: visible !important;
}

.premium-faq-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.premium-faq-button .faq-chevron {
  transition: transform 0.2s ease;
}

.faq-item.open .premium-faq-button {
  color: var(--primary);
}

.faq-item.open .premium-faq-button .faq-chevron {
  transform: rotate(180deg);
}

.premium-hero .premium-state-note {
  max-width: 760px;
  margin: 1.1rem auto 0;
  color: #cbd3e1;
  font-size: 0.9rem;
  line-height: 1.55;
}

.premium-global-active .premium-purchase-copy {
  display: none !important;
}

@media (max-width: 968px) {
  .home-hero {
    padding: 6.2rem 1.25rem 3rem;
  }

  .home-hero .bot-part {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }

  .home-hero .hero-left-content,
  .home-hero .bot-description {
    align-items: center;
    text-align: center;
  }

  .hero-benefits {
    width: min(100%, 620px);
    text-align: left;
  }

  .hero-privacy-note {
    justify-content: center;
  }

  .home-hero .chat-sandbox {
    width: min(100%, 680px);
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .home-hero .hero-characters,
  .premium-hero .hero-characters,
  .commands-hero .hero-characters {
    display: none;
  }

  .hero-scroll-indicator {
    display: none;
  }

  .commands-page-container {
    width: 100%;
    overflow: hidden;
    padding-inline: 1rem;
  }

  .commands-sidebar-nav {
    width: 100%;
    overflow: hidden;
  }

  .commands-cat-list {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.7rem;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .commands-cat-button {
    width: auto;
    min-height: 48px;
  }

  .premium-content {
    padding: 1.5rem 1rem 3rem !important;
  }

  .premium-compare-scroll {
    padding: 0.75rem !important;
  }
}

@media (max-width: 600px) {
  .home-hero {
    padding: 5.7rem 1rem 2.5rem;
  }

  .home-hero .tech-badge {
    margin-bottom: 1rem;
    font-size: 0.7rem;
    letter-spacing: 1px;
  }

  .home-hero .bot-logo {
    width: 72px;
    height: 72px;
    margin-bottom: 1rem;
  }

  .home-hero .bot-title h1 {
    font-size: clamp(2rem, 10vw, 2.6rem);
  }

  .home-hero .bot-description {
    font-size: 1rem;
  }

  .hero-benefits {
    gap: 0.55rem;
    margin-top: 1.1rem;
    font-size: 0.9rem;
  }

  .home-hero .hero-cta-row {
    width: 100%;
    margin-top: 1.3rem;
  }

  .home-hero .hero-cta-row > a {
    width: 100%;
    justify-content: center;
  }

  .home-hero .hero-trust-row {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    width: min(100%, 330px);
  }

  .home-hero .chat-sandbox {
    height: 300px;
  }

  table.premium-compare-table {
    min-width: 660px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ================================================================
   IDENTITÉ NOVAPULSE 2026 — logo, mascotte Nova et visuels de marque
   ================================================================ */
/* Le logo du pied etait un ::before decoratif, qui masquait un SVG hexagone
   laisse dans le HTML. Le vrai logo est desormais une <img class="footer-logo-mark">
   (voir plus bas) : une balise reelle, avec son alt, et le meme fichier que la
   navbar. Le SVG mort a ete retire du HTML, ces deux regles n'ont plus d'objet. */

.hero-characters .hc {
  inset: auto;
  width: 300px;
  height: 360px;
  background-size: contain;
  background-position: center;
  opacity: 0.34;
}

.home-hero .hero-characters .hc-robot {
  display: block;
  top: 7.5rem;
  right: -4.5rem;
  width: clamp(280px, 27vw, 430px);
  height: clamp(340px, 35vw, 520px);
  opacity: 0.3;
}

.premium-hero .hc-blue,
.commands-hero .hc-blue {
  left: clamp(-5rem, -3vw, -1rem);
  bottom: -5rem;
}

.premium-hero .hc-robot,
.commands-hero .hc-robot {
  right: clamp(-5rem, -3vw, -1rem);
  top: 5rem;
}

.premium-hero .hc-alien,
.commands-hero .hc-alien {
  right: 14%;
  bottom: -7rem;
  width: 240px;
  height: 300px;
  opacity: 0.22;
}

.premium-hero .hc-orange,
.commands-hero .hc-orange {
  left: 14%;
  top: 5rem;
  width: 220px;
  height: 280px;
  opacity: 0.2;
}

nav .logo img,
.bot-logo,
.nova-assistant img,
.chat-msg-avatar.is-bot img {
  object-fit: cover;
}

@media (max-width: 1100px) {
  .home-hero .hero-characters .hc-robot {
    right: -8rem;
    opacity: 0.2;
  }

  .premium-hero .hc-alien,
  .premium-hero .hc-orange,
  .commands-hero .hc-alien,
  .commands-hero .hc-orange {
    display: none;
  }
}

/* ================================================================
   IMPACT IMMÉDIAT — mise en scène cinématographique du premier écran
   ================================================================ */
.home-hero {
  min-height: min(900px, 100svh);
  background:
    linear-gradient(90deg, rgba(3, 6, 18, 0.98) 0%, rgba(3, 6, 18, 0.88) 38%, rgba(3, 6, 18, 0.42) 68%, rgba(3, 6, 18, 0.12) 100%),
    url("bg_clean.webp");
  background-size: cover;
  background-position: center;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 42%, rgba(168, 85, 247, 0.28) 0%, rgba(69, 244, 255, 0.12) 18%, transparent 43%),
    linear-gradient(115deg, transparent 56%, rgba(69, 244, 255, 0.08) 72%, transparent 88%);
  mix-blend-mode: screen;
  animation: npWowPortal 5.5s ease-in-out infinite alternate;
}

.home-hero::after {
  opacity: 0.7;
  mix-blend-mode: screen;
  animation: auroraSpin 24s linear infinite;
}

.home-hero .hero-characters {
  z-index: 1;
}

.home-hero .hero-characters .hc-robot {
  top: 4.25rem;
  right: -5rem;
  width: clamp(390px, 34vw, 560px);
  height: clamp(470px, 44vw, 680px);
  opacity: 0.58;
  filter:
    drop-shadow(0 28px 38px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 30px rgba(69, 244, 255, 0.42))
    drop-shadow(0 0 56px rgba(124, 58, 237, 0.34));
}

.home-hero .bot-part {
  width: min(100%, 1280px);
  max-width: 1280px;
}

.home-hero .tech-badge {
  border-color: rgba(69, 244, 255, 0.58);
  background: linear-gradient(115deg, rgba(8, 16, 38, 0.86), rgba(76, 29, 149, 0.34));
  box-shadow:
    0 0 0 1px rgba(69, 244, 255, 0.08) inset,
    0 0 24px rgba(69, 244, 255, 0.16);
  animation: npWowReveal 0.7s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero .bot-logo {
  animation:
    npWowReveal 0.75s 0.14s cubic-bezier(0.22, 1, 0.36, 1) both,
    npWowLogo 4.6s 1s ease-in-out infinite !important;
  border-color: rgba(69, 244, 255, 0.72);
  box-shadow:
    0 0 0 6px rgba(69, 244, 255, 0.05),
    0 0 0 12px rgba(124, 58, 237, 0.035),
    0 0 30px rgba(69, 244, 255, 0.42),
    0 0 64px rgba(124, 58, 237, 0.24);
}

.home-hero .gradient-title-text {
  background:
    linear-gradient(105deg, #ffffff 8%, #dffcff 26%, #45f4ff 43%, #a855f7 62%, #ffffff 82%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    npWowReveal 0.8s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both,
    titleFlow 6s 1.2s ease-in-out infinite alternate !important;
  filter:
    drop-shadow(0 0 18px rgba(69, 244, 255, 0.22))
    drop-shadow(0 8px 34px rgba(0, 0, 0, 0.38));
}

.home-hero .bot-description,
.home-hero .hero-benefits,
.home-hero .hero-cta-row,
.home-hero .hero-trust-row,
.home-hero .hero-privacy-note {
  animation: npWowReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero .bot-description { animation-delay: 0.32s; }
.home-hero .hero-benefits { animation-delay: 0.4s; }
.home-hero .hero-cta-row { animation-delay: 0.48s; }
.home-hero .hero-trust-row { animation-delay: 0.56s; }
.home-hero .hero-privacy-note { animation-delay: 0.62s; }

.home-hero .bot-invite {
  background: linear-gradient(115deg, #00bfd9 0%, #2563eb 45%, #7c3aed 100%);
  background-size: 180% 100%;
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff !important;
  box-shadow:
    0 12px 30px rgba(0, 184, 245, 0.28),
    0 0 28px rgba(124, 58, 237, 0.24);
  animation: npWowCta 4s ease-in-out infinite alternate;
}

.home-hero .bot-invite::before {
  animation: btnShine 3.2s 0.8s ease-in-out infinite;
}

.home-hero .btn-secondary-cta {
  background: rgba(5, 8, 22, 0.66);
  border-color: rgba(167, 139, 250, 0.38);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}

.home-hero .chat-sandbox {
  border-color: rgba(103, 232, 249, 0.34);
  background:
    linear-gradient(180deg, rgba(17, 24, 46, 0.9), rgba(7, 10, 25, 0.94));
  backdrop-filter: blur(20px) saturate(125%);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(124, 58, 237, 0.22),
    0 0 42px rgba(69, 244, 255, 0.15),
    0 0 90px rgba(124, 58, 237, 0.13);
  transform-origin: center;
  animation:
    npWowChatReveal 0.95s 0.26s cubic-bezier(0.16, 1, 0.3, 1) both,
    npWowChatAura 4.8s 1.25s ease-in-out infinite alternate;
}

.home-hero .chat-sandbox::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(69, 244, 255, 0.9), transparent 28%, transparent 68%, rgba(168, 85, 247, 0.85));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.home-hero .hero-trust-row {
  width: fit-content;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(3, 6, 18, 0.42);
  backdrop-filter: blur(12px);
}

@keyframes npWowPortal {
  from { opacity: 0.72; transform: scale(1); }
  to { opacity: 1; transform: scale(1.035); }
}

@keyframes npWowReveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes npWowLogo {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-7px) scale(1.035); filter: brightness(1.12); }
}

@keyframes npWowCta {
  from { background-position: 0% 50%; box-shadow: 0 12px 30px rgba(0, 184, 245, 0.28), 0 0 26px rgba(124, 58, 237, 0.2); }
  to { background-position: 100% 50%; box-shadow: 0 16px 38px rgba(0, 184, 245, 0.38), 0 0 38px rgba(124, 58, 237, 0.34); }
}

@keyframes npWowChatReveal {
  from { opacity: 0; transform: perspective(1100px) translateY(34px) rotateY(-7deg) scale(0.96); }
  to { opacity: 1; transform: perspective(1100px) translateY(0) rotateY(-2deg) scale(1); }
}

@keyframes npWowChatAura {
  from {
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(124, 58, 237, 0.22), 0 0 38px rgba(69, 244, 255, 0.13), 0 0 74px rgba(124, 58, 237, 0.1);
  }
  to {
    box-shadow: 0 38px 100px rgba(0, 0, 0, 0.68), 0 0 0 1px rgba(69, 244, 255, 0.3), 0 0 55px rgba(69, 244, 255, 0.2), 0 0 105px rgba(124, 58, 237, 0.17);
  }
}

@media (max-width: 1100px) {
  .home-hero .hero-characters .hc-robot {
    right: -10rem;
    opacity: 0.34;
  }
}

@media (max-width: 968px) {
  .home-hero {
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(3, 6, 18, 0.95) 0%, rgba(3, 6, 18, 0.78) 58%, rgba(3, 6, 18, 0.5) 100%),
      url("bg_clean.webp");
    background-size: cover;
    background-position: 68% center;
  }

  .home-hero .hero-characters {
    display: none;
  }

  .home-hero .chat-sandbox {
    transform: none;
  }
}

@media (max-width: 600px) {
  .home-hero::after {
    opacity: 0.35;
  }

  .home-hero .hero-trust-row {
    width: min(100%, 350px);
  }
}

/* Effet de survol de la CTA Premium.
   Etait porte par onmouseover/onmouseout inline : deux gestionnaires JS pour de
   la pure presentation, qui obligeaient a garder 'unsafe-inline' dans la CSP.
   En CSS, c'est plus court, plus fluide (transition GPU) et sans JS. */
.np-cta-lift {
  transition: filter 0.2s ease, transform 0.2s ease;
}
.np-cta-lift:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .np-cta-lift { transition: none; }
  .np-cta-lift:hover { transform: none; }
}

/* =============================================================================
   LOGO DU PIED DE PAGE
   -----------------------------------------------------------------------------
   Le pied affichait un SVG hexagonal qui n'etait PAS la marque : le logo
   NovaPulse est un anneau degrade cyan -> violet avec un N anguleux bicolore et
   un noyau lumineux. Deux identites differentes cohabitaient sur la meme page.
   On sert desormais le meme fichier que la navbar : une seule source de verite,
   et zero octet de plus puisqu'il est deja en cache.
   ========================================================================== */
.footer-logo-mark {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--primary);
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.18);
  transition: transform 0.4s ease;
}
.footer-logo-col:hover .footer-logo-mark {
  transform: scale(1.06);
}

/* =============================================================================
   SELECTEUR DE LANGUE PUBLIC (navbar)
   -----------------------------------------------------------------------------
   Le seul selecteur FR/EN existant etait construit dans le menu deroulant de
   l'utilisateur CONNECTE : un visiteur anonyme n'avait donc aucun moyen de lire
   le site en anglais, alors que les traductions etaient deja ecrites. Le
   « FR / EN » du pied de page, lui, n'etait qu'un <span> decoratif.
   ========================================================================== */
.np-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.np-lang-opt {
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 0.25rem 0.55rem;
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.np-lang-opt:hover {
  color: var(--text-light);
}
.np-lang-opt.is-active {
  color: #04121a;
  background: var(--primary);
}
.np-lang-opt:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Sous 968 px la navbar passe en menu compact : le selecteur reste accessible
   mais se resserre pour ne pas pousser le bouton Panel hors de l'ecran. */
@media (max-width: 968px) {
  .np-lang-toggle { gap: 0; }
  .np-lang-opt { padding: 0.22rem 0.4rem; font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-logo-mark { transition: none; }
  .footer-logo-col:hover .footer-logo-mark { transform: none; }
}

/* =============================================================================
   RYTHME VISUEL DES PAGES DE CONTENU
   -----------------------------------------------------------------------------
   Constat mesure avant ecriture de ce bloc : la page d'accueil animait 26 blocs
   au defilement (.scroll-reveal), tandis que documentation.html et
   commands.html en animaient ZERO et reglement.html seulement 2. Les pages ou
   l'on passe le plus de temps a lire etaient donc les plus statiques du site,
   ce qui donnait l'impression de quitter la marque en changeant de page.

   Tout ce qui suit est purement decoratif : si le visiteur a demande moins
   d'animations, le bloc @media en fin de section rend chaque etat final
   immediat. Aucune information n'est portee par le mouvement seul.
   ========================================================================== */

/* --- Documentation : rendre les tableaux reellement lisibles ---------------
   Plus haut dans cette feuille, un correctif « Make tables responsive » cible
   « table, .doc-table » et impose display:block, overflow-x:auto et surtout
   white-space:nowrap, le tout en !important.

   L'intention etait bonne, l'effet non :
     - display:block retire au tableau son algorithme de mise en page, si bien
       que table-layout et les largeurs declarees sur les <th> sont ignores ;
     - white-space:nowrap interdit tout retour a la ligne, donc la colonne
       « Description » devient aussi large que sa plus longue phrase (jusqu'a
       1 019 px pour une colonne disposant de 405 px) ;
     - l'overflow-x pose sur le tableau lui-meme ne servait a rien, la piste de
       grille « 1fr » s'elargissant a la demande, et body{overflow-x:clip}
       coupait le surplus sans barre de defilement.
   Resultat mesure : sur 7 volets sur 9, la colonne Description etait tronquee
   et rigoureusement inatteignable.

   On retablit ici un vrai tableau, uniquement a l'interieur de l'enveloppe
   .doc-table-zone. Le reste du site (16 tableaux du panel notamment) garde le
   comportement precedent : la portee de ce correctif est volontairement etroite.
   ========================================================================== */
.doc-table-zone > table,
.doc-table-zone > .doc-table {
  display: table !important;
  width: 100% !important;
  white-space: normal !important;
  overflow-x: visible !important;
}

/* --- Documentation : apparition en cascade des blocs d'un volet ------------ */
@keyframes docApparait {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.doc-apparait {
  opacity: 0;
  animation: docApparait 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--retard, 0ms);
}

/* Le volet lui-meme n'a plus besoin d'animer son entree : ce sont ses enfants
   qui apparaissent. Sans cette regle, les deux animations se superposaient et
   le contenu paraissait « rebondir ». */
.doc-section.active { animation: none; }

/* Reperage du volet courant dans le menu : un liseret qui se deploie du haut
   vers le bas plutot qu'une bordure qui apparait d'un coup. */
.doc-menu-item a {
  position: relative;
  border-left: 3px solid transparent;
  padding-left: 1rem;
}
.doc-menu-item a::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 50%;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  border-radius: 3px;
  transform: translateY(-50%);
  transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.doc-menu-item.active a::before,
.doc-menu-item a:hover::before { height: 100%; }
.doc-menu-item:not(.active) a:hover { transform: translateX(2px); }
.doc-menu-item a { transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; }

/* --- Documentation : liens precedent / suivant en fin de volet -------------- */
.doc-nav-volets {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-color);
}
.doc-nav-lien {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
/* Le lien « suivant » s'aligne a droite : la direction du texte redit la
   direction de la navigation. */
.doc-nav-suiv { text-align: right; }
.doc-nav-sens {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}
.doc-nav-titre {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-light);
}
.doc-nav-lien:hover {
  border-color: var(--primary);
  background: rgba(0, 240, 255, 0.06);
}
.doc-nav-prec:hover { transform: translateX(-4px); }
.doc-nav-suiv:hover { transform: translateX(4px); }
.doc-nav-lien:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

@media (max-width: 720px) {
  .doc-nav-volets { flex-direction: column; }
  .doc-nav-suiv { text-align: left; }
}

/* --- Commandes : arrivee en cascade des cartes ------------------------------ */
/* 110 cartes apparaissaient d'un bloc a la fin du chargement. Le decalage est
   plafonne a 12 crans pour que la derniere carte n'attende jamais plus de
   ~0,4 s, quelle que soit la taille de la categorie. */
@keyframes cmdApparait {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cmd-anime {
  opacity: 0;
  animation: cmdApparait 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--retard, 0ms);
}

/* --- Reglement : sommaire d'entree ------------------------------------------ */
/* La charte fait plus de 4 000 px de haut. Sans sommaire, retrouver la clause
   sur les donnees personnelles imposait de tout parcourir. */
.rules-sommaire {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.rules-sommaire h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.9rem;
}
.rules-sommaire ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.35rem 1rem;
  counter-reset: sommaire;
}
.rules-sommaire a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.rules-sommaire a:hover {
  color: var(--text-light);
  background: rgba(0, 240, 255, 0.07);
  transform: translateX(3px);
}
.rules-sommaire a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* La section visee s'eclaire brievement apres un saut depuis le sommaire :
   sur un mur de texte, c'est ce qui permet de savoir ou l'on a atterri. */
@keyframes rulesCible {
  0%   { background: rgba(0, 240, 255, 0.10); }
  100% { background: transparent; }
}
.rules-section {
  scroll-margin-top: 110px;
  border-radius: 10px;
}
.rules-section.est-cible { animation: rulesCible 1.6s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .doc-apparait,
  .cmd-anime {
    opacity: 1;
    animation: none;
  }
  .doc-menu-item a::before { transition: none; }
  .doc-menu-item:not(.active) a:hover,
  .doc-nav-prec:hover,
  .doc-nav-suiv:hover,
  .rules-sommaire a:hover { transform: none; }
  .doc-nav-lien { transition: none; }
  .rules-section.est-cible { animation: none; }
}

/* =============================================================================
   HERO — LES DEUX BOUTONS ET L'EN-TETE DE LA CARTE DE DEMO
   -----------------------------------------------------------------------------
   Constats mesures sur la page servie, avant ce bloc :

   1. Les deux boutons n'avaient ni la meme hauteur ni la meme taille de texte
      (1,1rem/1,15rem contre 0,95rem/0,95rem). Cote a cote, le secondaire
      paraissait rate plutot que secondaire.
   2. Le bouton principal portait DEUX animations infinies : npWowCta faisait
      glisser un degrade de 180 % de large, et btnShine passait un reflet toutes
      les 3,2 s. Resultat : la couleur du bouton changeait en permanence et le
      violet de fin de degrade restait le plus souvent hors cadre -- on voyait un
      bouton bleu, pas le cyan -> violet de la marque.
   3. Le survol du bouton secondaire ne faisait RIEN sur l'accueil : la regle
      .btn-secondary-cta:hover et la regle .home-hero .btn-secondary-cta ont la
      meme specificite, et la seconde, plus bas dans la feuille, ecrasait la
      premiere. Le bouton etait donc inerte au passage de la souris.
   4. Le premier message visible de la carte de demo etait tranche net sous
      l'en-tete : le conteneur defile jusqu'en bas et coupait la ligne en deux,
      ce qui se lisait comme un bug d'affichage.
   ========================================================================== */

/* --- 1. Un seul gabarit pour les deux boutons ------------------------------
   La hauteur est portee par min-height et non par le padding vertical : les deux
   libelles n'ont pas la meme taille de police, donc a padding egal ils auraient
   quand meme fini a des hauteurs differentes. */
.hero-cta-row > a,
.final-cta-buttons > a {
  min-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1.02rem;
  line-height: 1;
  border-radius: 999px;
  justify-content: center;
}
.hero-cta-row .bot-invite,
.final-cta-buttons .bot-invite { padding-left: 2.1rem; padding-right: 2.1rem; }
.hero-cta-row .btn-secondary-cta,
.final-cta-buttons .btn-secondary-cta { padding-left: 1.9rem; padding-right: 1.9rem; }

.hero-cta-row .bot-invite svg,
.final-cta-buttons .bot-invite svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* --- 2. Le degrade s'arrete de bouger --------------------------------------
   background-size revient a 100 % : le cyan, le bleu et le violet sont tous les
   trois visibles en meme temps, ce qui est precisement la palette du site. */
.home-hero .bot-invite {
  background-size: 100% 100%;
  animation: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.home-hero .bot-invite:hover {
  filter: saturate(1.06) brightness(1.05);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 16px 40px rgba(0, 184, 245, 0.34), 0 0 34px rgba(124, 58, 237, 0.28);
}

/* --- 3. Le reflet ne balaie plus qu'au survol ------------------------------
   Un reflet qui repasse tout seul toutes les 3 s attire l'oeil en continu sans
   jamais rien annoncer. Declenche par le survol, il repond a une intention. */
.home-hero .bot-invite::before {
  animation: none;
  left: -80%;
}
.home-hero .bot-invite:hover::before {
  animation: btnShine 1s ease-out;
}

/* --- 4. Le bouton secondaire redevient un vrai bouton ---------------------- */
.home-hero .btn-secondary-cta {
  border-color: rgba(167, 139, 250, 0.55);
  background: rgba(12, 16, 38, 0.72);
  color: #fff;
}
.home-hero .btn-secondary-cta:hover {
  border-color: var(--accent);
  background: rgba(189, 0, 255, 0.14);
  box-shadow: 0 0 22px rgba(189, 0, 255, 0.3);
  transform: translateY(-2px);
}

/* --- 5. En-tete de salon Discord ------------------------------------------ */
.chat-hash {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.85;
}
.chat-sandbox-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}
/* margin-left:auto pousse l'etiquette a droite : elle informe (ceci est une
   demonstration, pas un vrai serveur) sans voler la premiere lecture au nom du
   salon, contrairement a l'ancien « DÉMO — #GÉNÉRAL » qui criait « demo » en
   premier et en capitales. */
.chat-sandbox-tag {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary);
  border: 1px solid rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.08);
  border-radius: 6px;
  padding: 2px 7px;
}

/* --- 6. Le haut de la conversation se fond au lieu d'etre tranche ---------
   Le conteneur defile automatiquement vers le bas : sans masque, la ligne qui
   sort du cadre est coupee en deux a hauteur d'x. Le degrade de masque la fait
   disparaitre progressivement sous l'en-tete, ce que fait tout client de
   messagerie. Le padding du haut est augmente pour que la premiere ligne
   vraiment lisible ne commence qu'apres le fondu. */
.chat-sandbox-messages {
  padding-top: 1.7rem;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 100%);
}

/* --- 7. La conversation reste alignee a gauche sur mobile -----------------
   Sous 968 px, .bot-part passe en text-align:center pour centrer la colonne de
   texte du hero. La carte de demo heritait de ce centrage : les messages
   Discord apparaissaient centres sous un pseudo et un horodatage, eux, alignes
   a gauche. Aucun client de messagerie ne ressemble a ca. */
.chat-sandbox { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .home-hero .bot-invite,
  .home-hero .btn-secondary-cta { transition: none; }
  .home-hero .bot-invite:hover::before { animation: none; }
  .home-hero .btn-secondary-cta:hover { transform: none; }
}

/* =============================================================================
   CARTE DE DEMO : PLUS BASSE ET PLUS TRANSPARENTE
   -----------------------------------------------------------------------------
   Le bouton « Voir la démo » a ete retire du hero : il ne reste qu'un seul appel
   a l'action, « Ajouter à mon serveur ». La carte parle d'elle-meme, la
   conversation se joue toute seule des qu'elle entre a l'ecran.

   .bot-part est en align-items:center : la marge haute suffit donc a decaler la
   carte vers le bas sans toucher a l'alignement de la colonne de texte. Elle
   n'est appliquee qu'au-dessus de 968 px ; en dessous, la mise en page passe sur
   une seule colonne et la carte se retrouve deja sous le texte.
   ========================================================================== */
@media (min-width: 969px) {
  .home-hero .chat-sandbox { margin-top: 3rem; }
}

/* Fond allege : la couche de flou (backdrop-filter) reste en place, c'est elle
   qui garde le texte lisible malgre le decor charge du hero. Sans ce flou,
   descendre l'opacite du fond ferait passer le robot en arriere-plan a travers
   les messages. */
.home-hero .chat-sandbox {
  background: linear-gradient(180deg, rgba(17, 24, 46, 0.62), rgba(7, 10, 25, 0.7));
}
.chat-sandbox-header {
  background: linear-gradient(180deg, rgba(40, 42, 50, 0.36), rgba(30, 32, 40, 0.2));
}

/* Horodatage : mesure faite sur le rendu compose, pixel de fond le plus clair de
   la carte. Il etait deja sous le seuil AA AVANT d'alleger le fond (4,48:1 avec
   un fond opaque, et meme moins une fois l'opacite 0,75 prise en compte : un
   texte a opacite reduite est peint melange au fond). Alleger le fond l'aurait
   fait tomber a 3,89:1. Plutot que de renoncer a la transparence demandee, on
   corrige la vraie cause : une couleur un peu plus claire, a pleine opacite.
   L'horodatage reste nettement en retrait du pseudo, qui est blanc pur. */
.chat-msg-time {
  color: rgb(175, 184, 200);
  opacity: 1;
}