:root{
  --bg:#0a0f0d; --bg2:#111111; --bg3:#1a1a1a; --border:#333333;
  --purple:#22c55e; --yellow:#22c55e; --mint:#22c55e;
  --green:#22c55e; --green2:#16a34a; --green-dim:rgba(34,197,94,.08); --green-glow:rgba(34,197,94,.18);
  --text:#ffffff; --text2:#9ca3af; --text3:#6b7280;
  --radius:20px; --radius-sm:12px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

button, a, [onclick] {
  transition: transform 0.1s ease, opacity 0.1s ease;
}
button:active, a:active, [onclick]:active {
  transform: scale(0.96);
  opacity: 0.85;
}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;min-height:100vh;}
.hidden{display:none !important;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

#landing{min-height:100vh;background:
  radial-gradient(ellipse at 70% 0%, rgba(0,230,118,.10) 0%, transparent 55%),
  radial-gradient(ellipse at 10% 90%, rgba(0,230,118,.06) 0%, transparent 50%),
  var(--bg);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;max-width:1100px;margin:0 auto;}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.5px;}
.logo .dot{width:36px;height:36px;background:var(--green-glow);border:1px solid rgba(108,60,233,.3);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.logo em{color:var(--green);font-style:normal;}
.nav-btn{background:var(--green);color:#000;border:none;padding:10px 20px;border-radius:50px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;}

.hero{text-align:center;padding:60px 24px 40px;max-width:680px;margin:0 auto;}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);padding:6px 14px;border-radius:50px;font-size:12px;color:var(--text2);margin-bottom:24px;}
.hero-badge .pulse-dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1px;margin-bottom:16px;}
.hero h1 span{color:var(--green);}
.hero p{color:var(--text2);font-size:16px;line-height:1.6;margin-bottom:32px;}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn-primary{background:var(--green);color:#000;border:none;padding:15px 28px;border-radius:50px;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;box-shadow:0 8px 30px rgba(0,230,118,.25);}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border);padding:15px 28px;border-radius:50px;font-weight:600;font-size:15px;cursor:pointer;font-family:inherit;}
.hero-stats{display:flex;justify-content:center;gap:32px;margin-top:48px;flex-wrap:wrap;}
.hero-stat{text-align:center;}
.hero-stat .val{font-size:24px;font-weight:800;color:var(--green);}
.hero-stat .lbl{font-size:12px;color:var(--text3);margin-top:2px;}

.features{max-width:1000px;margin:60px auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.feature-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.feature-card .icon{width:44px;height:44px;background:var(--green-dim);border:1px solid rgba(0,230,118,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px;}
.feature-card h3{font-size:15px;font-weight:700;margin-bottom:8px;}
.feature-card p{font-size:13px;color:var(--text2);line-height:1.5;}

.pricing{max-width:1000px;margin:60px auto;padding:0 24px;text-align:center;}
.pricing h2{font-size:28px;font-weight:800;margin-bottom:8px;}
.pricing p.sub{color:var(--text2);margin-bottom:36px;}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.plan-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:28px 22px;text-align:left;position:relative;}
.plan-card.popular{border-color:var(--green);box-shadow:0 0 40px rgba(0,230,118,.1);}
.plan-badge{position:absolute;top:-12px;right:20px;background:var(--green);color:#000;font-size:11px;font-weight:800;padding:4px 12px;border-radius:50px;}
.plan-name{font-size:14px;color:var(--text2);font-weight:600;margin-bottom:12px;}
.plan-price{font-size:30px;font-weight:800;margin-bottom:4px;}
.plan-price span{font-size:14px;color:var(--text2);font-weight:500;}
.plan-period{font-size:12px;color:var(--text3);margin-bottom:20px;}
.plan-features{list-style:none;margin-bottom:24px;}
.plan-features li{font-size:13px;color:var(--text2);padding:6px 0;display:flex;align-items:center;gap:8px;}
.plan-features li::before{content:'✓';color:var(--green);font-weight:800;}
.plan-btn{width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);padding:12px;border-radius:var(--radius-sm);font-weight:700;cursor:pointer;font-family:inherit;font-size:14px;}
.plan-card.popular .plan-btn{background:var(--green);color:#000;border:none;}

.footer-cta{text-align:center;padding:60px 24px;max-width:600px;margin:0 auto;}
.footer-cta h2{font-size:26px;font-weight:800;margin-bottom:12px;}
.footer-cta p{color:var(--text2);margin-bottom:24px;}

#onboarding{min-height:100vh;display:flex;flex-direction:column;}
.ob-header{padding:20px 24px;}
.ob-back{background:none;border:none;color:var(--text2);font-size:20px;cursor:pointer;margin-bottom:16px;}
.ob-progress{display:flex;gap:6px;}
.ob-progress-bar{flex:1;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;}
.ob-progress-bar .fill{height:100%;background:var(--green);border-radius:2px;transition:width .3s;}
.ob-step-count{text-align:right;font-size:11px;color:var(--text3);margin-top:6px;}

.ob-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 24px;max-width:460px;margin:0 auto;width:100%;}
.ob-body h2{font-size:24px;font-weight:800;text-align:center;margin-bottom:8px;letter-spacing:-.5px;}
.ob-body p.sub{text-align:center;color:var(--text2);font-size:14px;margin-bottom:32px;}

.ob-options{display:flex;flex-direction:column;gap:10px;}
.ob-option{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px 18px;cursor:pointer;font-size:15px;font-weight:500;transition:all .15s;display:flex;align-items:center;gap:12px;}
.ob-option:hover{border-color:rgba(0,230,118,.3);}
.ob-option.selected{border-color:var(--green);background:var(--green-dim);color:var(--green);}
.ob-option .emoji{font-size:18px;}

.ob-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

.ob-input-group{margin-bottom:16px;}
.ob-input-group label{display:block;font-size:13px;color:var(--text2);margin-bottom:8px;font-weight:500;}
.ob-input-group input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;color:var(--text);font-size:15px;font-family:inherit;outline:none;transition:border-color .15s;}
.ob-input-group input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-dim);}
.ob-phone-row{display:flex;gap:8px;}
.ob-phone-row .country{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 12px;font-size:14px;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.ob-phone-row input{flex:1;}

.ob-footer{padding:20px 24px 32px;max-width:460px;margin:0 auto;width:100%;}
.ob-continue{width:100%;background:var(--green);color:#000;border:none;padding:16px;border-radius:50px;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;opacity:.4;pointer-events:none;transition:opacity .2s;}
.ob-continue.active{opacity:1;pointer-events:all;box-shadow:0 8px 24px rgba(0,230,118,.25);}
.ob-login-link{text-align:center;font-size:13px;color:var(--text2);margin-top:16px;}
.ob-login-link a{color:var(--green);text-decoration:none;font-weight:600;cursor:pointer;}

.ob-summary{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:24px;}
.ob-summary-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.ob-summary-row:last-child{border-bottom:none;}
.ob-summary-row .ic{width:32px;height:32px;background:var(--green-dim);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.ob-summary-row .txt strong{display:block;font-size:13px;}
.ob-summary-row .txt span{font-size:12px;color:var(--text2);}

.error-msg{color:#ff5252;font-size:13px;text-align:center;margin-top:12px;display:none;}

#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
#login .login-box{width:100%;max-width:380px;}

#client-dash{min-height:100vh;}
.cd-topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--border);}
.cd-user{display:flex;align-items:center;gap:10px;}
.cd-avatar{width:42px;height:42px;background:linear-gradient(135deg,var(--green),#00bcd4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#000;font-size:16px;position:relative;z-index:1;}
#subscription-icon{width:46px;height:46px;margin-left:0;z-index:2;position:relative;border:2px solid var(--bg,#0a0f0d);box-sizing:border-box;}
@keyframes cd-wiggle{
  0%, 100% { transform:translateX(0); }
  50% { transform:translateX(-3px); }
}
.cd-logout{background:var(--bg2);border:1px solid var(--border);color:var(--text2);padding:8px 16px;border-radius:50px;font-size:13px;cursor:pointer;font-family:inherit;}

.cd-body{padding:24px;max-width:480px;margin:0 auto;}
.cd-status-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;margin-bottom:20px;}
.cd-status-card.connected{border-color:rgba(0,230,118,.3);}
.status-icon{width:64px;height:64px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px;}
.cd-status-card.connected .status-icon{background:var(--green-dim);border:2px solid var(--green);}
.cd-status-title{font-size:17px;font-weight:700;margin-bottom:4px;}
.cd-status-sub{font-size:13px;color:var(--text2);margin-bottom:20px;}
.cd-qr-box{width:200px;height:200px;background:white;border-radius:12px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;}
.cd-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.cd-stat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 10px;text-align:center;}
.cd-stat .val{font-size:20px;font-weight:800;color:var(--green);}
.cd-stat .lbl{font-size:10px;color:var(--text3);margin-top:4px;}

.cd-section-title{font-size:14px;font-weight:700;margin-bottom:12px;margin-top:24px;}
.cd-plan-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;align-items:center;justify-content:space-between;}
.cd-plan-card .plan-info strong{font-size:15px;}
.cd-plan-card .plan-info span{font-size:12px;color:var(--text2);display:block;margin-top:2px;}
.cd-upgrade-btn{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,230,118,.3);padding:8px 16px;border-radius:50px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;}

@media(max-width:680px){
  .features,.plans{grid-template-columns:1fr;}
  .hero h1{font-size:30px;}
  .ob-grid2{grid-template-columns:1fr;}
            }


/* ===== DESKTOP : sidebar visible, bottom nav cachée ===== */
#fc-bottomnav, #fc-more-drawer, #fc-more-overlay { display: none; }

/* ===== MOBILE (<768px) : sidebar cachée, bottom nav visible ===== */
@media (max-width: 768px) {
  #fc-sidebar { display: none !important; }
  #fc-hamburger, #fc-sidebar-overlay { display: none !important; }
  #client-dash { margin-left: 0 !important; padding-bottom: 70px !important; }
  #credits-badge { top: 12px !important; right: 16px !important; }

  #fc-bottomnav {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #111; border-top: 1px solid #333;
    z-index: 2000; padding: 6px 0;
    justify-content: space-around;
  }
  #fc-bottomnav a, #fc-bottomnav div.bn-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: #9ca3af; text-decoration: none; font-size: 10px; cursor: pointer;
    flex: 1; padding: 4px 0; position: relative;
  }
  #fc-bottomnav a.active, #fc-bottomnav div.bn-item.active { color: #22c55e; }
  #fc-bottomnav a.active svg, #fc-bottomnav div.bn-item.active svg {
    background: rgba(34,197,94,0.12); border-radius: 10px; padding: 4px;
    width: 26px; height: 26px; box-sizing: border-box;
  }
  #fc-bottomnav a.active::before, #fc-bottomnav div.bn-item.active::before {
    content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 24px; height: 3px; border-radius: 0 0 3px 3px; background: #22c55e;
  }

  #fc-more-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2001;
  }
  #fc-more-overlay.active { display: block; }
  #fc-more-drawer {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    background: #111; border-top: 1px solid #333; border-radius: 16px 16px 0 0;
    z-index: 2002; padding: 20px; max-height: 70vh; overflow-y: auto;
  }
  #fc-more-drawer.active { display: block; }
  #fc-more-drawer .more-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 8px; color: #fff; text-decoration: none; font-size: 15px;
  }
  #fc-more-drawer .more-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: #1a1a1a; border: 1px solid #333;
    color: #9ca3af; flex-shrink: 0;
  }

  /* Settings : nav + contenu empilés en colonne */
  .set-layout { flex-direction: column !important; }
  .set-nav { width: 100% !important; min-height: auto !important; border-right: none !important; border-bottom: 1px solid #333 !important; display: flex !important; overflow-x: auto !important; padding: 12px !important; gap: 4px; }
  .set-nav-item { white-space: nowrap !important; margin-bottom: 0 !important; }
  .set-content { max-width: 100% !important; padding: 20px !important; }

  /* Agent detail : layout principal + playground empilés en colonne */
  #client-dash[style*="display:flex"] { flex-direction: column !important; }
  #client-dash > div[style*="width:320px"] { width: 100% !important; height: auto !important; box-sizing: border-box !important; }
  #client-dash > div[style*="display:flex"] { flex-direction: column !important; }
  #client-dash > div[style*="display:flex"] > div { width: 100% !important; max-width: 100% !important; }
  #client-dash > div[style*="border-left"] {
    border-left: none !important; border-top: 1px solid #333 !important;
    height: auto !important; max-height: 60vh !important;
  }
}


/* ===== TABLETTE (769px - 1024px) : sidebar repliable comme sur desktop ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  #client-dash {
    padding: 24px !important;
  }
  .prod-grid, .dash-cards {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  }
  .wiz-modal {
    max-width: 90vw !important;
  }
  #credits-badge {
    right: 16px !important;
  }
  #gift-icon {
    right: 76px !important;
  }
}

/* ===== GRAND ECRAN (>= 1440px) : contenu centre, largeur maximale ===== */
@media (min-width: 1440px) {
  #client-dash {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 96px !important;
  }
  #fc-sidebar {
    left: 0 !important;
  }
  .prod-grid, .dash-cards {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  }
}


/* ===== Modals génériques (confirmation, renommage, etc.) ===== */
.wiz-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:2000;align-items:center;justify-content:center;padding:20px;}
.wiz-overlay.active{display:flex;}
.wiz-modal{background:#1a1a1a;border:1px solid #333;border-radius:16px;padding:24px;max-width:520px;width:100%;box-sizing:border-box;}
.wiz-nav{display:flex;gap:10px;}
.wiz-btn{flex:1;padding:12px;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px;border:none;}
.wiz-btn-secondary{background:#111;border:1px solid #333;color:#fff;}
.wiz-btn-primary{background:#22c55e;color:#000;}
.wiz-btn-danger{background:#ef4444;color:#fff;}

/* ===== Barre latérale dépliable (tablette et desktop, >= 769px) ===== */
@media (min-width: 769px) {
  #fc-sidebar-toggle { display: flex !important; align-items: center; justify-content: center; }
  #fc-sidebar.fc-expanded { width: 220px !important; align-items: stretch; }
  #fc-sidebar.fc-expanded .fc-sidebar-label { opacity: 1 !important; }
  #fc-sidebar.fc-expanded #fc-sidebar-toggle svg { transform: rotate(180deg); transition: transform 0.25s ease; }
  #fc-sidebar-toggle svg { transition: transform 0.25s ease; }
}
#fc-sidebar-link:hover, .fc-sidebar-link:hover { background: rgba(255,255,255,0.05); color: #fff; }

/* ===== SPINNER CIRCULAIRE ANIMÉ UNIVERSEL ===== */
.pro-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid #22c55e;
  border-radius: 50%;
  animation: pro-spin 0.75s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
.pro-spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top: 2px solid #22c55e;
  border-radius: 50%;
  animation: pro-spin 0.75s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
.pro-spinner-lg {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top: 4px solid #22c55e;
  border-radius: 50%;
  animation: pro-spin 0.75s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes pro-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}