* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; max-width:100%; overflow-x:hidden; height:100%; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#0D0D1A; color:white; }

:root {
  --violet: #582583;
  --violet-light: #7B3FC4;
  --violet-dark: #3D1A5C;
  --violet-pale: #F0EAF8;
  --violet-pale2: #E6DAFF;
  --gold: #C9A84C;
  --gold-light: #E8C76A;
  --green-jeriko: #27A065;
  --green: #22C55E;
  --red: #EF4444;
  --bg: #F5F4F8;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FAF8FF;
  --border: #E8E2F2;
  --border-violet: rgba(88,37,131,0.15);
  --text: #1A1033;
  --text-muted: #7A6E8A;
  --text-dim: #B0A8C0;
  --shadow: 0 2px 12px rgba(88,37,131,0.08);
  --shadow-md: 0 4px 20px rgba(88,37,131,0.12);
  --safe-bottom: env(safe-area-inset-bottom, 16px);
}

/* SCROLLBAR */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(88,37,131,0.15); border-radius:2px; }

/* APP SHELL */
.app { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--bg); }
.screen { flex:1; padding:16px 16px calc(80px + var(--safe-bottom)); overflow-y:auto; }

/* BOTTOM NAV */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:#FFFFFF; border-top:1px solid var(--border); display:flex; padding:8px 0 calc(8px + var(--safe-bottom)); z-index:100; box-shadow:0 -2px 12px rgba(88,37,131,0.06); }
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 0; cursor:pointer; opacity:0.4; transition:opacity 0.2s; }
.nav-item.active { opacity:1; }
.nav-item.active .nav-icon { color:var(--violet); }
.nav-item.active .nav-label { color:var(--violet); }
.nav-icon { font-size:20px; color:var(--text-muted); }
.nav-label { font-size:10px; color:var(--text-muted); }

/* TOP BAR */
.top-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.app-logo { font-size:20px; font-weight:700; color:var(--violet); letter-spacing:-0.5px; }
.app-logo span { color:var(--gold); }
.app-sub { font-size:10px; color:var(--text-dim); }
.user-av { width:36px; height:36px; border-radius:50%; background:var(--violet); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; color:white; flex-shrink:0; cursor:pointer; }

/* CARDS */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:12px; box-shadow:var(--shadow); }
.card-gold { border-color:rgba(201,168,76,0.25); background:#FFFDF5; }
.card-violet { border-color:var(--border-violet); background:var(--violet-pale); }
.slabel { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:8px; }

/* VITALITY */
.vitality-card { background:linear-gradient(135deg, var(--violet) 0%, var(--violet-light) 100%); border:none; border-radius:16px; padding:16px; margin-bottom:12px; box-shadow:var(--shadow-md); }
.vit-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.vit-lbl { font-size:12px; color:rgba(255,255,255,0.7); }
.vit-badge { font-size:11px; background:rgba(255,255,255,0.2); color:white; padding:3px 8px; border-radius:20px; }
.vit-score { font-size:52px; font-weight:700; line-height:1; margin-bottom:10px; color:white; }
.vit-score span { font-size:20px; color:rgba(255,255,255,0.5); font-weight:400; }
.vit-bar-wrap { height:6px; background:rgba(255,255,255,0.2); border-radius:3px; margin-bottom:8px; overflow:hidden; }
.vit-bar { height:100%; border-radius:3px; background:white; transition:width 1s ease; }
.vit-sub { font-size:11px; color:rgba(255,255,255,0.6); }

/* STATS */
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:12px 8px; text-align:center; box-shadow:var(--shadow); }
.stat-val { font-size:17px; font-weight:700; color:var(--text); }
.stat-lbl { font-size:10px; color:var(--text-muted); margin:2px 0; }
.stat-delta { font-size:10px; color:var(--green-jeriko); }

/* OBJECTIF BARS */
.obj-item { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.obj-item:last-child { margin-bottom:0; }
.obj-text { font-size:12px; color:var(--text-muted); width:80px; flex-shrink:0; }
.obj-bar-wrap { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.obj-bar { height:100%; border-radius:3px; background:var(--violet); transition:width 1s ease; }
.obj-pct { font-size:11px; color:var(--gold); width:36px; text-align:right; flex-shrink:0; }

/* CONTACTS BADGE */
.contacts-badge { display:flex; justify-content:space-between; align-items:center; background:var(--violet-pale); border:1px solid var(--border-violet); border-radius:14px; padding:12px 14px; margin-bottom:12px; }
.cb-text { font-size:13px; font-weight:500; color:var(--text); }
.cb-auto { font-size:10px; color:var(--text-dim); margin-top:2px; }
.cb-count { font-size:32px; font-weight:700; color:var(--violet); }

/* CTA BUTTONS */
.cta-btn { display:flex; justify-content:space-between; align-items:center; background:var(--violet); border-radius:14px; padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:opacity 0.2s; box-shadow:var(--shadow-md); }
.cta-btn:active { opacity:0.85; }
.cta-btn-gold { background:var(--bg-card); border:1px solid rgba(201,168,76,0.3); box-shadow:var(--shadow); }
.cta-left { display:flex; align-items:center; gap:12px; }
.cta-icon { font-size:22px; }
.cta-title { font-size:14px; font-weight:600; color:white; }
.cta-btn-gold .cta-title { color:var(--text); }
.cta-sub { font-size:11px; color:rgba(255,255,255,0.65); margin-top:2px; }
.cta-btn-gold .cta-sub { color:var(--text-muted); }
.cta-arrow { font-size:18px; color:rgba(255,255,255,0.4); }
.cta-btn-gold .cta-arrow { color:var(--text-dim); }

/* FORMS */
.form-group { margin-bottom:16px; }
.form-label { font-size:12px; color:var(--text-muted); margin-bottom:6px; display:block; text-transform:uppercase; letter-spacing:0.5px; }
.form-input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:14px 16px; color:var(--text); font-size:15px; outline:none; transition:border-color 0.2s; }
.form-input:focus { border-color:var(--violet); background:white; }
.form-input::placeholder { color:var(--text-dim); }
select.form-input option { background:white; color:var(--text); }

/* BUTTONS */
.btn { width:100%; padding:16px; border-radius:14px; border:none; font-size:16px; font-weight:600; cursor:pointer; transition:opacity 0.2s; }
.btn:active { opacity:0.85; }
.btn-primary { background:var(--violet); color:white; box-shadow:var(--shadow-md); }
.btn-secondary { background:white; color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow); }
.btn-gold { background:var(--gold); color:white; }

/* BADGES */
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:500; }
.badge-green { background:rgba(39,160,101,0.12); color:var(--green-jeriko); }
.badge-violet { background:var(--violet-pale); color:var(--violet); }
.badge-gold { background:rgba(201,168,76,0.15); color:#A07820; }
.badge-red { background:rgba(239,68,68,0.1); color:var(--red); }

/* JERRY FLOAT BUTTON */
.jerry-float { position:fixed; bottom:calc(80px + var(--safe-bottom)); right:16px; z-index:150; }
.jerry-float-btn { width:62px; height:62px; border-radius:50%; background:var(--violet); border:3px solid white; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 20px rgba(88,37,131,0.35); transition:transform 0.2s; position:relative; overflow:hidden; }
.jerry-float-btn:active { transform:scale(0.92); }
.jerry-float-btn img { width:62px; height:62px; border-radius:50%; object-fit:cover; display:block; }
.jerry-float-pulse { position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:50%; background:var(--green); border:2px solid white; z-index:2; }
.jerry-float-pulse-ring { position:absolute; width:100%; height:100%; border-radius:50%; background:var(--violet); animation:pulse-ring 2s infinite; z-index:-1; }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:0.5} 100%{transform:scale(1.5);opacity:0} }

/* LOADING */
.loading { display:flex; align-items:center; justify-content:center; padding:40px; color:var(--text-muted); font-size:14px; }
.spinner { width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--violet); border-radius:50%; animation:spin 0.8s linear infinite; margin-right:10px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* EMPTY STATE */
.empty-state { text-align:center; padding:48px 24px; color:var(--text-muted); }
.empty-icon { font-size:48px; margin-bottom:12px; }
.empty-text { font-size:14px; line-height:1.6; }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(26,16,51,0.5); backdrop-filter:blur(4px); z-index:200; display:none; align-items:flex-end; }
.modal-overlay.show { display:flex; }
.modal { background:white; border-radius:24px 24px 0 0; padding:24px; width:100%; max-height:85vh; overflow-y:auto; box-shadow:0 -8px 40px rgba(88,37,131,0.15); }
.modal-handle { width:40px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 20px; }
.modal-title { font-size:18px; font-weight:600; margin-bottom:16px; color:var(--text); }
.hidden { display:none !important; }

/* UTILITAIRES */
.text-green { color:var(--green-jeriko); }
.bg-green-soft { background:rgba(39,160,101,0.08); border-color:rgba(39,160,101,0.2); }
.fill-green-jeriko { background:var(--green-jeriko); }
.badge-success { background:rgba(39,160,101,0.1); color:var(--green-jeriko); border:1px solid rgba(39,160,101,0.2); border-radius:10px; padding:3px 8px; font-size:11px; }

/* ── THÈME SOMBRE ────────────────────────────────────────────────────────────
   Surcharge les variables :root quand data-theme="dark" est posé sur <html>  */
[data-theme="dark"] {
  --bg: #0D0D1A;
  --bg-card: rgba(255,255,255,0.05);
  --bg-card-hover: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.08);
  --border-violet: rgba(88,37,131,0.3);
  --violet-pale: rgba(88,37,131,0.15);
  --violet-pale2: rgba(88,37,131,0.25);
  --text: #FFFFFF;
  --text-muted: rgba(255,255,255,0.5);
  --text-dim: rgba(255,255,255,0.3);
  --shadow: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
}

[data-theme="dark"] body { background:#0D0D1A; color:white; }
[data-theme="dark"] .bottom-nav { background:#151525; box-shadow:none; }
[data-theme="dark"] .modal { background:#1A1A2E; }
[data-theme="dark"] .form-input { background:rgba(255,255,255,0.07); color:white; }
[data-theme="dark"] .form-input:focus { background:rgba(255,255,255,0.1); }
[data-theme="dark"] .btn-secondary { background:rgba(255,255,255,0.06); color:white; }
[data-theme="dark"] .card-gold { background:rgba(201,168,76,0.06); }
[data-theme="dark"] select.form-input option { background:#1A1A2E; color:white; }
[data-theme="dark"] .jerry-float-pulse { border-color:#0D0D1A; }

/* Thème clair — explicite pour éviter tout héritage involontaire */
[data-theme="light"] body { background:#F5F4F8; color:#1A1033; }
[data-theme="light"] .bottom-nav { background:white; }
[data-theme="light"] .modal { background:white; }

/* ── CORRECTIONS MODE CLAIR — textes hardcodés ──────────────────────────────
   Certains composants ont color:white dans leur CSS propre.
   En mode clair, on les remet en couleur lisible SAUF s'ils sont sur fond coloré. */
[data-theme="light"] .slabel { color:var(--text-muted); }
[data-theme="light"] .modal-title { color:var(--text); }
[data-theme="light"] .form-label { color:var(--text-muted); }
[data-theme="light"] .section-title { color:var(--text); }

/* Cards sur fond blanc — titres et valeurs */
[data-theme="light"] .stat-val { color:var(--text); }
[data-theme="light"] .cb-text { color:var(--text); }

/* Bottom nav labels */
[data-theme="light"] .nav-label { color:var(--text-muted); }
[data-theme="light"] .nav-item.active .nav-label { color:var(--violet); }
[data-theme="light"] .nav-item.active .nav-icon { color:var(--violet); }