/* =====================================================================
   Natz Leads — design « Lumineux » : dégradé violet → prune, cartes
   blanches arrondies, chiffres en couleur, accents dorés.
   (Les couleurs et polices de base sont dans app.css, :root)
   ===================================================================== */

/* Titres et chiffres : police d'affichage */
.card h2, .sheet h2, .cal-head h2, .success h2, .login .brand h2, .kpi b, .rev-value, .tcard .ph {
  font-family: var(--font-display); letter-spacing: -0.01em;
}

/* Cartes, listes, chiffres clés : blanc, arrondi, ombre douce */
.card, .list, .kpi, .tcard, .cal { box-shadow: var(--shadow); border: 1px solid var(--line); }
.card { padding: 16px 16px 14px; }
.section-title { color: var(--brand-dark); opacity: .75; font-weight: 700; }

/* Champs et puces */
.input, select.input, textarea.input { border-radius: 12px; background: #fff; }
.chip { border-radius: 11px; transition: border-color .12s, background .12s; }
.chip.on { box-shadow: 0 2px 8px rgba(106, 71, 232, .16); }
.req.on { font-weight: 600; }
.place { background: var(--brand-softer); border-color: var(--brand-soft); }
.congress-pick { border-radius: 14px; }
.congress-pick .logo, .item .logo { background: var(--brand-soft); color: var(--brand); font-family: var(--font-display); }
.people { border-radius: 14px; }
.person.on { background: var(--brand-softer); }

/* Boutons */
.btn { border-radius: 12px; }
.btn.primary { background: var(--grad); box-shadow: 0 6px 16px rgba(106, 71, 232, .28); }
.btn.primary:active { background: var(--brand-dark); }
.btn.gold { background: var(--gold); color: #3d2600; }
.submit-bar .btn.primary { min-height: 54px; font-size: 17px; }

/* Revenue estimé */
.rev-box { border-radius: 14px; }
.rev-value { color: var(--brand); font-size: 26px; }
#f-rev-range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--brand) var(--fill, 0%), var(--brand-soft) var(--fill, 0%)); }

/* Barre d'onglets : l'onglet actif a une pastille colorée derrière son icône */
.tabbar { box-shadow: 0 -4px 16px rgba(84, 56, 200, .06); }
.tab svg { padding: 3px 14px; width: 52px; height: 30px; border-radius: 15px; box-sizing: border-box; transition: background .15s; }
.tab.active { color: var(--brand); font-weight: 700; }
.tab.active svg { background: var(--brand-soft); }

/* Barre du haut : bouton compte cerclé d'or */
.topbar-avatar { box-shadow: 0 0 0 2px rgba(242, 183, 61, .85); }

/* Onglets segmentés */
.seg { background: #ebe7fa; }
.seg button.on { color: var(--brand); box-shadow: 0 2px 6px rgba(84, 56, 200, .12); }

/* Statistiques et ROI */
.kpi { border-radius: 14px; }
.kpi b { color: var(--brand); font-size: clamp(18px, 5.2vw, 24px); white-space: nowrap; }
.bar > i, .progress > i { background: linear-gradient(90deg, var(--brand), #c24fcf); }
.tag { border-radius: 7px; }

/* Équipe et agenda */
.tcard .ph { background: var(--grad); color: #fff; }
.tcard .acts a { border-radius: 10px; }
.cal .ev { background: var(--grad); }
.cal .day.today .num { background: var(--grad); }

/* Écran de connexion */
.login .brand { padding: 26px 16px 22px; margin: 0 0 16px; border-radius: 22px; background: var(--grad); color: #fff; box-shadow: 0 10px 26px rgba(90, 59, 224, .25); }
.login .brand .muted { color: rgba(255, 255, 255, .85); }
.login .brand img { box-shadow: 0 0 0 4px rgba(242, 183, 61, .9), 0 8px 18px rgba(0, 0, 0, .18); }

/* Confirmation d'envoi */
.success .big { background: var(--grad); color: #fff; box-shadow: 0 0 0 6px var(--gold-soft), 0 10px 24px rgba(106, 71, 232, .3); }
.success .big.wait { background: var(--warn-bg); color: #b26b00; box-shadow: none; }

/* Fenêtres du bas */
.sheet { border-radius: 22px 22px 0 0; }
.sheet .grab { background: #d6d0f0; }

@media (prefers-reduced-motion: reduce) {
  .chip, .tab svg { transition: none; }
}