/* =========================================================
   NEXA UI — Design System 2.0
   Police : Inter (Google Fonts)
   Palette : #0a0a0f fond, #12c2e9 accent cyan, #f64f59 accent red
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --nx-bg:        #0a0a0f;
  --nx-bg2:       #0f0f18;
  --nx-bg3:       #16161f;
  --nx-bg4:       #1e1e2a;
  --nx-border:    rgba(255,255,255,.07);
  --nx-border2:   rgba(255,255,255,.12);

  --nx-accent:    #12c2e9;
  --nx-accent2:   #f64f59;
  --nx-grad:      linear-gradient(135deg, #12c2e9, #c471ed, #f64f59);

  --nx-text:      #f0f0f8;
  --nx-muted:     #8888aa;
  --nx-muted2:    #5c5c7a;

  --nx-green:     #2e7d32;
  --nx-green2:    #4caf50;

  --nx-radius:    12px;
  --nx-radius-lg: 20px;
  --nx-shadow:    0 4px 24px rgba(0,0,0,.4);
  --nx-shadow-lg: 0 12px 48px rgba(0,0,0,.5);
  --nx-glow:      0 0 32px rgba(18,194,233,.2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Inter', 'Segoe UI', sans-serif; background: var(--nx-bg); color: var(--nx-text); line-height: 1.6; min-height: 100vh; }

/* ── SCROLLBAR ──────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--nx-bg); }
::-webkit-scrollbar-thumb { background: var(--nx-bg4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--nx-accent); }

/* ── TOPBAR ─────────────────────────────────────────── */
.nx-topbar {
  background: rgba(10,10,15,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nx-border);
  position: sticky; top: 0; z-index: 1000;
  height: 64px;
}
.nx-topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 2rem;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.nx-logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.nx-logo img { height: 40px; width: auto; }
.nx-logo-text { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.5px; color: var(--nx-text); }
.nx-logo-text span { background: var(--nx-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.nx-nav { display: flex; gap: 2rem; list-style: none; }
.nx-nav a { color: var(--nx-muted); text-decoration: none; font-size: .88rem; font-weight: 500; transition: color .15s; }
.nx-nav a:hover { color: var(--nx-text); }

.nx-topbar-actions { display: flex; gap: .75rem; align-items: center; }
.nx-btn-ghost {
  color: var(--nx-muted); background: transparent; border: 1px solid var(--nx-border2);
  padding: .45rem 1.1rem; border-radius: var(--nx-radius); font-size: .85rem; font-weight: 500;
  text-decoration: none; transition: all .15s; cursor: pointer;
}
.nx-btn-ghost:hover { color: var(--nx-text); border-color: var(--nx-accent); }
.nx-btn-primary {
  background: var(--nx-grad); color: #fff; border: none;
  padding: .5rem 1.3rem; border-radius: var(--nx-radius); font-size: .85rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: opacity .15s, transform .15s;
  display: inline-flex; align-items: center; gap: .4rem;
}
.nx-btn-primary:hover { opacity: .9; transform: translateY(-1px); color: #fff; text-decoration: none; }
.nx-btn-outline {
  background: transparent; color: var(--nx-accent); border: 1.5px solid var(--nx-accent);
  padding: .5rem 1.3rem; border-radius: var(--nx-radius); font-size: .85rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; gap: .4rem;
}
.nx-btn-outline:hover { background: var(--nx-accent); color: #fff; text-decoration: none; }
.nx-btn-green {
  background: var(--nx-green); color: #fff; border: none;
  padding: .5rem 1.3rem; border-radius: var(--nx-radius); font-size: .85rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; gap: .4rem;
}
.nx-btn-green:hover { background: #256329; color: #fff; text-decoration: none; }
.nx-btn-lg { padding: .8rem 2.2rem; font-size: 1rem; border-radius: 14px; }
.nx-btn-danger { background: var(--nx-accent2) !important; }
.nx-btn-danger:hover { opacity: .85 !important; }

/* ── MAIN LAYOUT ────────────────────────────────────── */
.nx-main { max-width: 1280px; margin: 0 auto; padding: 2.5rem 2rem; }
.nx-main-wide { max-width: 1440px; margin: 0 auto; padding: 0 2rem; }
.nx-page-wrap { min-height: calc(100vh - 64px - 72px); }

/* ── FOOTER ─────────────────────────────────────────── */
.nx-footer {
  background: var(--nx-bg2); border-top: 1px solid var(--nx-border);
  padding: 2.5rem 0 1.5rem;
}
.nx-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.nx-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; margin-bottom: 2rem; }
.nx-footer-brand p { color: var(--nx-muted); font-size: .87rem; line-height: 1.7; margin-top: .8rem; max-width: 280px; }
.nx-footer h4 { font-size: .78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--nx-muted2); margin-bottom: 1rem; }
.nx-footer ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.nx-footer ul a { color: var(--nx-muted); text-decoration: none; font-size: .87rem; transition: color .15s; }
.nx-footer ul a:hover { color: var(--nx-accent); }
.nx-footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--nx-border); padding-top: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.nx-footer-bottom p { color: var(--nx-muted2); font-size: .8rem; }

/* ── CARDS ──────────────────────────────────────────── */
.nx-card {
  background: var(--nx-bg3); border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg); padding: 1.8rem;
  transition: border-color .2s, box-shadow .2s;
}
.nx-card:hover { border-color: var(--nx-border2); box-shadow: var(--nx-shadow); }
.nx-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.nx-card-title { font-size: 1rem; font-weight: 700; color: var(--nx-text); }
.nx-card-sub { font-size: .82rem; color: var(--nx-muted); margin-top: .2rem; }

/* ── BADGES ─────────────────────────────────────────── */
.nx-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .7rem; border-radius: 20px; font-size: .72rem; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
}
.nx-badge-green  { background: rgba(46,125,50,.2);   color: #4caf50; }
.nx-badge-red    { background: rgba(246,79,89,.2);    color: #f64f59; }
.nx-badge-blue   { background: rgba(18,194,233,.2);   color: #12c2e9; }
.nx-badge-gray   { background: rgba(136,136,170,.15); color: #8888aa; }
.nx-badge-orange { background: rgba(255,152,0,.2);    color: #ff9800; }
.nx-badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ── FORMS ──────────────────────────────────────────── */
.nx-form-group { margin-bottom: 1.2rem; }
.nx-label { display: block; font-size: .82rem; font-weight: 600; color: var(--nx-muted); margin-bottom: .4rem; letter-spacing: .3px; }
.nx-input, .nx-select, .nx-textarea {
  width: 100%; background: var(--nx-bg4); border: 1px solid var(--nx-border2);
  color: var(--nx-text); border-radius: var(--nx-radius); padding: .75rem 1rem;
  font-size: .9rem; font-family: inherit;
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.nx-input:focus, .nx-select:focus, .nx-textarea:focus {
  border-color: var(--nx-accent); box-shadow: 0 0 0 3px rgba(18,194,233,.1);
}
.nx-input::placeholder, .nx-textarea::placeholder { color: var(--nx-muted2); }
.nx-select option { background: var(--nx-bg3); color: var(--nx-text); }
.nx-textarea { resize: vertical; min-height: 100px; }
.nx-checkbox { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .88rem; color: var(--nx-muted); }
.nx-checkbox input[type="checkbox"] { accent-color: var(--nx-accent); width: 16px; height: 16px; }
.nx-form-error { color: var(--nx-accent2); font-size: .8rem; margin-top: .3rem; }
.nx-form-success { color: var(--nx-green2); font-size: .88rem; padding: .75rem 1rem; background: rgba(46,125,50,.1); border: 1px solid rgba(46,125,50,.3); border-radius: var(--nx-radius); margin-bottom: 1rem; }
.nx-form-danger { color: var(--nx-accent2); font-size: .88rem; padding: .75rem 1rem; background: rgba(246,79,89,.1); border: 1px solid rgba(246,79,89,.3); border-radius: var(--nx-radius); margin-bottom: 1rem; }
.nx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── PAGE HEADER ────────────────────────────────────── */
.nx-page-header { padding: 2rem 0 1.5rem; border-bottom: 1px solid var(--nx-border); margin-bottom: 2rem; }
.nx-page-header h1 { font-size: 1.5rem; font-weight: 800; color: var(--nx-text); }
.nx-page-header p  { color: var(--nx-muted); font-size: .9rem; margin-top: .3rem; }
.nx-breadcrumb { display: flex; gap: .4rem; align-items: center; font-size: .8rem; color: var(--nx-muted2); margin-bottom: .5rem; }
.nx-breadcrumb a { color: var(--nx-muted); text-decoration: none; }
.nx-breadcrumb a:hover { color: var(--nx-accent); }
.nx-breadcrumb span { color: var(--nx-muted2); }

/* ── TABLES ─────────────────────────────────────────── */
.nx-table-wrap { overflow-x: auto; border-radius: var(--nx-radius); border: 1px solid var(--nx-border); }
.nx-table { width: 100%; border-collapse: collapse; }
.nx-table thead th { background: var(--nx-bg4); color: var(--nx-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--nx-border); }
.nx-table tbody td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--nx-border); color: var(--nx-muted); font-size: .87rem; vertical-align: middle; }
.nx-table tbody tr:last-child td { border-bottom: none; }
.nx-table tbody tr:hover td { background: var(--nx-bg4); }

/* ── STATS GRID ─────────────────────────────────────── */
.nx-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.nx-stat {
  background: var(--nx-bg3); border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius); padding: 1.4rem 1.5rem;
}
.nx-stat-icon { font-size: 1.2rem; margin-bottom: .6rem; }
.nx-stat-val { font-size: 1.8rem; font-weight: 800; color: var(--nx-text); line-height: 1; }
.nx-stat-lbl { font-size: .75rem; color: var(--nx-muted); margin-top: .3rem; text-transform: uppercase; letter-spacing: 1px; }

/* ── ALERT BANNER ───────────────────────────────────── */
.nx-alert { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.2rem; border-radius: var(--nx-radius); margin-bottom: 1.2rem; font-size: .88rem; }
.nx-alert-success { background: rgba(46,125,50,.12); border: 1px solid rgba(46,125,50,.3); color: #4caf50; }
.nx-alert-danger  { background: rgba(246,79,89,.12);  border: 1px solid rgba(246,79,89,.3);  color: #f64f59; }
.nx-alert-info    { background: rgba(18,194,233,.12); border: 1px solid rgba(18,194,233,.3); color: #12c2e9; }

/* ── SECTION DIVIDER ────────────────────────────────── */
.nx-section-label { font-size: .72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--nx-muted2); display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.nx-section-label::after { content: ''; flex: 1; height: 1px; background: var(--nx-border); }

/* ── TABS ───────────────────────────────────────────── */
.nx-tabs { display: flex; gap: .25rem; background: var(--nx-bg3); border: 1px solid var(--nx-border); border-radius: var(--nx-radius); padding: .25rem; margin-bottom: 1.5rem; }
.nx-tab { padding: .5rem 1.2rem; border-radius: 8px; font-size: .85rem; font-weight: 500; color: var(--nx-muted); text-decoration: none; transition: all .15s; cursor: pointer; border: none; background: transparent; }
.nx-tab.active, .nx-tab:hover { background: var(--nx-bg4); color: var(--nx-text); }
.nx-tab.active { color: var(--nx-accent); }

/* ── PRICING CARD ───────────────────────────────────── */
.nx-pricing-card {
  background: var(--nx-bg3); border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg); padding: 2.5rem 2rem;
  position: relative; transition: border-color .2s, transform .2s;
}
.nx-pricing-card:hover { border-color: var(--nx-border2); transform: translateY(-4px); }
.nx-pricing-card.featured { border-color: var(--nx-accent); }
.nx-pricing-card.featured::before {
  content: 'Recommandé'; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--nx-grad); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: 1px;
  padding: .3rem 1rem; border-radius: 0 0 10px 10px;
}
.nx-price-amount { font-size: 2.8rem; font-weight: 800; line-height: 1; }
.nx-price-period { font-size: .85rem; color: var(--nx-muted); }
.nx-price-features { list-style: none; margin: 1.5rem 0; display: flex; flex-direction: column; gap: .7rem; }
.nx-price-features li { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--nx-muted); }
.nx-price-features li i { color: var(--nx-accent); font-size: .8rem; }

/* ── MOBILE NAV ─────────────────────────────────────── */
.nx-hamburger { display: none; background: none; border: none; color: var(--nx-text); font-size: 1.3rem; cursor: pointer; }

/* ── UTILITIES ──────────────────────────────────────── */
.nx-divider { border: none; border-top: 1px solid var(--nx-border); margin: 1.5rem 0; }
.nx-text-gradient { background: var(--nx-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nx-glow { box-shadow: var(--nx-glow) !important; }
.nx-mt-1 { margin-top: .5rem; }
.nx-mt-2 { margin-top: 1rem; }
.nx-mt-3 { margin-top: 1.5rem; }
.nx-mt-4 { margin-top: 2rem; }
.nx-mb-1 { margin-bottom: .5rem; }
.nx-mb-2 { margin-bottom: 1rem; }
.nx-flex { display: flex; }
.nx-flex-center { display: flex; align-items: center; }
.nx-flex-between { display: flex; justify-content: space-between; align-items: center; }
.nx-gap-1 { gap: .5rem; }
.nx-gap-2 { gap: 1rem; }
.nx-gap-3 { gap: 1.5rem; }
.nx-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.nx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.nx-text-center { text-align: center; }
.nx-muted { color: var(--nx-muted); }
.nx-w-full { width: 100%; }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 900px) {
  .nx-nav { display: none; }
  .nx-hamburger { display: flex; }
  .nx-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .nx-form-grid { grid-template-columns: 1fr; }
  .nx-grid-2, .nx-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nx-topbar-inner { padding: 0 1rem; }
  .nx-main { padding: 1.5rem 1rem; }
  .nx-btn-lg { padding: .7rem 1.5rem; font-size: .9rem; }
}

/* ── COOKIE BANNER ──────────────────────────────────── */
#nx-cookie {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
  background: var(--nx-bg3); border-top: 1px solid var(--nx-border);
  padding: 1rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .85rem; color: var(--nx-muted);
}
#nx-cookie a { color: var(--nx-accent); }

/* ── CHAT WIDGET ────────────────────────────────────── */
#nx-chat-bubble {
  position: fixed; bottom: 1.8rem; right: 1.8rem; z-index: 9997;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--nx-grad);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 20px rgba(18,194,233,.35);
  font-size: 1.3rem; color: #fff; transition: transform .2s;
}
#nx-chat-bubble:hover { transform: scale(1.1); }
#nx-chat-box {
  position: fixed; bottom: 5rem; right: 1.8rem; z-index: 9996;
  width: 340px; max-height: 480px;
  background: var(--nx-bg3); border: 1px solid var(--nx-border2);
  border-radius: var(--nx-radius-lg); overflow: hidden;
  display: none; flex-direction: column;
  box-shadow: var(--nx-shadow-lg);
  animation: nx-fadeup .25s ease;
}
@keyframes nx-fadeup { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
#nx-chat-header {
  padding: 1rem 1.2rem;
  background: var(--nx-bg4); border-bottom: 1px solid var(--nx-border);
  display: flex; align-items: center; justify-content: space-between;
}
#nx-chat-header span { font-weight: 700; font-size: .9rem; }
#nx-chat-close { cursor: pointer; color: var(--nx-muted); font-size: 1.1rem; }
#nx-chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; background: var(--nx-bg); }
.nx-msg { max-width: 82%; padding: .6rem .9rem; border-radius: 12px; font-size: .84rem; line-height: 1.45; }
.nx-msg.bot { background: var(--nx-bg3); color: var(--nx-text); align-self: flex-start; border-bottom-left-radius: 4px; }
.nx-msg.user { background: var(--nx-accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
#nx-chat-footer { display: flex; border-top: 1px solid var(--nx-border); }
#nx-chat-input { flex: 1; background: var(--nx-bg4); border: none; padding: .8rem 1rem; color: var(--nx-text); font-size: .85rem; outline: none; font-family: inherit; }
#nx-chat-send { background: var(--nx-accent); border: none; color: #fff; padding: 0 1.2rem; cursor: pointer; font-size: 1rem; transition: background .15s; }
#nx-chat-send:hover { background: #0fa8cc; }

/* ── LANG SELECTOR ──────────────────────────────────── */
.nx-lang { display: flex; gap: .4rem; align-items: center; }
.nx-lang a { font-size: 1.3rem; opacity: .6; transition: opacity .15s; text-decoration: none; }
.nx-lang a:hover { opacity: 1; }