/* ═══════════════════════════════════════════════
   SOLINAE APP — Styles complets
   Mobile-first PWA, dark theme
═══════════════════════════════════════════════ */
:root {
  --bg:         #0a061e;
  --bg2:        #120e30;
  --bg3:        #1a1545;
  --gold:       #c9a227;
  --gold-l:     #e8c04a;
  --gold-dim:   rgba(201,162,39,.12);
  --gold-glow:  rgba(201,162,39,.25);
  --gold-border:rgba(201,162,39,.3);
  --violet:     #7b4fa2;
  --violet-l:   #9b6fc2;
  --violet-dim: rgba(123,79,162,.15);
  --white:      #ffffff;
  --soft:       rgba(255,255,255,.75);
  --muted:      rgba(255,255,255,.45);
  --border:     rgba(255,255,255,.08);
  --card:       rgba(255,255,255,.04);
  --card-hover: rgba(255,255,255,.07);
  --radius:     16px;
  --radius-sm:  10px;
  --radius-lg:  24px;
  --nav-h:      68px;
  --header-h:   60px;
  --trans:      .25s cubic-bezier(.4,0,.2,1);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; }
body { font-family:'Raleway',sans-serif; background:var(--bg); color:var(--white); overscroll-behavior:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }
input,select,textarea { font-family:inherit; }
a { text-decoration:none; color:inherit; }

/* ── Canvas étoiles ── */
#stars { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.6; }

/* ── App container ── */
#app { position:fixed; inset:0; z-index:1; display:flex; flex-direction:column; }

/* ════════════════════════════════════════════
   SCREENS
════════════════════════════════════════════ */
.screen {
  flex:1; display:flex; flex-direction:column;
  height:100%; overflow:hidden;
  animation: screen-in .3s ease both;
}
@keyframes screen-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

.screen-scroll {
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 1rem);
}
.screen-scroll::-webkit-scrollbar { display:none; }

/* ── Header ── */
.app-header {
  height:var(--header-h);
  padding:0 1.25rem;
  padding-top:var(--safe-top);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
  background:rgba(10,6,30,.7);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  position:relative; z-index:10;
}
.header-logo { display:flex; align-items:center; gap:.4rem;
  font-family:'Cinzel',serif; font-size:1.1rem; font-weight:600; }
.header-logo .star { color:var(--gold); font-size:.9rem;
  animation:spin 12s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.header-back { width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--border); color:var(--soft); }
.header-action { width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--soft); }

/* ── Bottom Navigation ── */
.bottom-nav {
  height:calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  display:flex; align-items:stretch;
  background:rgba(10,6,30,.92);
  backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
  flex-shrink:0; z-index:10;
}
.nav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; padding:.5rem 0;
  color:var(--muted); font-size:.6rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  transition:color var(--trans);
}
.nav-btn svg { transition:all var(--trans); }
.nav-btn.active { color:var(--gold); }
.nav-btn.active svg { filter:drop-shadow(0 0 6px rgba(201,162,39,.5)); }
.nav-btn:not(.active):hover { color:var(--soft); }

/* ════════════════════════════════════════════
   SPLASH
════════════════════════════════════════════ */
.splash {
  height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.5rem;
}
.splash-logo { font-family:'Cinzel',serif; font-size:3.5rem; font-weight:700;
  background:linear-gradient(135deg,#fff 0%,var(--gold-l) 50%,var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:pulse-logo 2s ease infinite; }
@keyframes pulse-logo {
  0%,100%{opacity:.9;transform:scale(1)}
  50%{opacity:1;transform:scale(1.02)}
}
.splash-star { font-size:2rem; color:var(--gold); animation:float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.splash-dots { display:flex; gap:.5rem; }
.splash-dot { width:6px; height:6px; border-radius:50%; background:var(--gold);
  animation:dot-bounce 1.4s ease-in-out infinite; }
.splash-dot:nth-child(2){animation-delay:.2s}
.splash-dot:nth-child(3){animation-delay:.4s}
@keyframes dot-bounce { 0%,80%,100%{transform:scale(0);opacity:.3} 40%{transform:scale(1);opacity:1} }

/* ════════════════════════════════════════════
   ONBOARDING
════════════════════════════════════════════ */
.onboard {
  height:100%; display:flex; flex-direction:column;
  padding:calc(var(--safe-top) + 1.5rem) 1.5rem calc(2rem + var(--safe-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.onboard-progress { display:flex; gap:.4rem; margin-bottom:2rem; }
.progress-pip { flex:1; height:3px; border-radius:2px; background:var(--border); transition:background var(--trans); }
.progress-pip.done { background:var(--gold); }
.progress-pip.active { background:var(--violet-l); }

.onboard-body { flex:1 0 auto; display:flex; flex-direction:column; gap:1.25rem; }
.onboard-badge { display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .9rem; background:var(--violet-dim);
  border:1px solid rgba(123,79,162,.3); border-radius:50px;
  font-size:.7rem; font-weight:700; color:var(--violet-l);
  letter-spacing:.08em; text-transform:uppercase; }
.onboard-title { font-family:'Cinzel',serif; font-size:1.75rem; font-weight:600;
  line-height:1.25; color:var(--white); }
.onboard-title em { color:var(--gold); font-style:italic; }
.onboard-sub { font-size:.9rem; color:var(--soft); line-height:1.6; }

/* ── Form fields ── */
.field { display:flex; flex-direction:column; gap:.4rem; }
.field label { font-size:.75rem; font-weight:700; color:var(--soft); letter-spacing:.04em; }
.field input, .field select {
  width:100%; padding:.85rem 1rem;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--white);
  font-size:.95rem; font-family:'Raleway',sans-serif;
  outline:none; transition:border-color var(--trans), box-shadow var(--trans);
  -webkit-appearance:none; appearance:none;
}
.field input::placeholder { color:var(--muted); }
.field select option { background:var(--bg2); color:var(--white); }
.field input:focus, .field select:focus {
  border-color:var(--gold-border);
  box-shadow:0 0 0 3px rgba(201,162,39,.1);
}
.field-hint { font-size:.72rem; color:var(--muted); margin-top:.2rem; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

/* ── Time unknown toggle ── */
.time-unknown { display:flex; align-items:center; gap:.5rem;
  padding:.5rem 0; cursor:pointer; }
.time-unknown input[type=checkbox] { accent-color:var(--gold); width:16px; height:16px; }
.time-unknown span { font-size:.8rem; color:var(--muted); }

/* ── Objective options ── */
.objective-grid { display:flex; flex-direction:column; gap:.5rem; }
.obj-opt {
  display:flex; align-items:center; gap:1rem;
  padding:1rem; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--card);
  cursor:pointer; transition:all var(--trans);
}
.obj-opt:hover { border-color:var(--gold-border); background:var(--gold-dim); }
.obj-opt.selected { border-color:var(--gold); background:var(--gold-dim);
  box-shadow:0 0 0 1px rgba(201,162,39,.2); }
.obj-icon { font-size:1.4rem; flex-shrink:0; }
.obj-text { font-size:.9rem; font-weight:500; color:var(--white); }
.obj-opt input { display:none; }

/* ── Buttons ── */
.onboard-footer { margin-top:auto; padding-top:1rem; }
.btn-gold {
  width:100%; padding:1rem; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--gold) 0%,#a8841e 100%);
  color:var(--bg); font-size:.95rem; font-weight:700;
  font-family:'Raleway',sans-serif;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  transition:all var(--trans);
}
.btn-gold:hover { transform:translateY(-1px); box-shadow:0 6px 24px var(--gold-glow); }
.btn-gold:disabled { opacity:.5; transform:none; cursor:not-allowed; }
.btn-ghost-sm {
  padding:.6rem 1.2rem; border-radius:50px;
  border:1px solid var(--border); color:var(--muted);
  font-size:.8rem; font-weight:500;
  transition:all var(--trans);
}
.btn-ghost-sm:hover { border-color:rgba(255,255,255,.2); color:var(--soft); }

/* ════════════════════════════════════════════
   GÉNÉRATION PROFIL (loading)
════════════════════════════════════════════ */
.generating {
  height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2rem;
  padding:2rem;
}
.gen-symbol {
  font-size:4rem; color:var(--gold);
  animation:spin 4s linear infinite;
  text-shadow: 0 0 40px var(--gold-glow);
}
.gen-title { font-family:'Cinzel',serif; font-size:1.5rem; font-weight:600;
  color:var(--white); text-align:center; }
.gen-steps { display:flex; flex-direction:column; gap:.75rem; width:100%; max-width:280px; }
.gen-step {
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--card);
  font-size:.85rem; color:var(--muted);
  transition:all .5s ease;
}
.gen-step.done { border-color:var(--gold-border); color:var(--gold-l); background:var(--gold-dim); }
.gen-step.active { border-color:rgba(123,79,162,.4); color:var(--violet-l); background:var(--violet-dim);
  animation:pulse-border 1s ease infinite; }
@keyframes pulse-border { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 12px var(--violet-dim)} }
.gen-step-icon { font-size:1rem; }

/* ════════════════════════════════════════════
   PROFIL RÉVÉLATION
════════════════════════════════════════════ */
.reveal {
  height:100%; overflow-y:auto;
  padding:calc(var(--safe-top) + 1rem) 1.25rem 2rem;
  -webkit-overflow-scrolling:touch;
}
.reveal::-webkit-scrollbar { display:none; }
.reveal-header { text-align:center; margin-bottom:2rem; }
.reveal-greeting { font-size:.85rem; color:var(--muted); margin-bottom:.4rem; }
.reveal-name { font-family:'Cinzel',serif; font-size:1.8rem; font-weight:700; color:var(--white); }
.reveal-sub { font-size:.9rem; color:var(--soft); margin-top:.4rem; }

.reveal-cards { display:flex; flex-direction:column; gap:1rem; margin-bottom:1.5rem; }
.reveal-card {
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border);
  animation:card-reveal .5s ease both;
}
.reveal-card:nth-child(2){animation-delay:.15s}
.reveal-card:nth-child(3){animation-delay:.3s}
@keyframes card-reveal { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

.reveal-card-header {
  padding:.75rem 1.25rem;
  display:flex; align-items:center; gap:.6rem;
  font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.rc-num  { background:rgba(201,162,39,.12); border-bottom:1px solid rgba(201,162,39,.15); color:var(--gold); }
.rc-astro{ background:rgba(74,123,206,.12); border-bottom:1px solid rgba(74,123,206,.2); color:#7baae8; }
.rc-hd   { background:rgba(123,79,162,.12); border-bottom:1px solid rgba(123,79,162,.2); color:var(--violet-l); }

.reveal-card-body { padding:1.25rem; background:var(--card); }
.reveal-number { font-family:'Cinzel',serif; font-size:2.8rem; font-weight:700;
  color:var(--gold); line-height:1; margin-bottom:.25rem; }
.reveal-essence { font-size:.8rem; font-weight:700; color:var(--gold-l);
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:.5rem; }
.reveal-desc { font-size:.85rem; color:var(--soft); line-height:1.6; }
.reveal-signs { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:.5rem; }
.sign-badge {
  display:flex; align-items:center; gap:.4rem;
  padding:.35rem .75rem; border-radius:50px;
  background:rgba(74,123,206,.1); border:1px solid rgba(74,123,206,.2);
  font-size:.8rem; color:#7baae8;
}
.hd-type-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .75rem; border-radius:50px;
  background:var(--violet-dim); border:1px solid rgba(123,79,162,.3);
  font-size:.8rem; color:var(--violet-l);
  margin-bottom:.5rem;
}
.hd-detail { font-size:.8rem; color:var(--muted); margin-top:.4rem; }

/* ════════════════════════════════════════════
   DASHBOARD
════════════════════════════════════════════ */
.dash-content { padding:1rem 1.25rem; display:flex; flex-direction:column; gap:1rem; }

.dash-greeting { margin-bottom:.25rem; }
.dash-hello { font-size:.85rem; color:var(--muted); }
.dash-name  { font-family:'Cinzel',serif; font-size:1.5rem; font-weight:600; color:var(--white); }
.dash-date  { font-size:.75rem; color:var(--muted); margin-top:.15rem; }

/* ── Guidance du jour ── */
.guidance-card {
  border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(201,162,39,.08) 0%,rgba(123,79,162,.06) 100%);
  border:1px solid var(--gold-border);
  padding:1.25rem;
  position:relative; overflow:hidden;
}
.guidance-card::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.12) 0%,transparent 70%);
  pointer-events:none;
}
.guidance-label { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.6rem; display:flex; align-items:center; gap:.4rem; }
.guidance-moon { font-size:.8rem; }
.guidance-text { font-size:.95rem; color:var(--white); line-height:1.65; font-weight:300; }
.guidance-day { margin-top:.75rem; display:flex; gap:.5rem; }
.day-pill {
  padding:.25rem .65rem; border-radius:50px; font-size:.65rem; font-weight:600;
  border:1px solid var(--border); color:var(--muted);
}

/* ── Stats rapides ── */
.quick-stats { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.stat-card {
  border-radius:var(--radius-sm); padding:1rem;
  background:var(--card); border:1px solid var(--border);
  display:flex; flex-direction:column; gap:.3rem;
  transition:all var(--trans);
}
.stat-card:hover { border-color:var(--gold-border); background:var(--gold-dim); }
.stat-card-label { font-size:.6rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }
.stat-card-value { font-family:'Cinzel',serif; font-size:1.5rem; font-weight:700; color:var(--gold); line-height:1; }
.stat-card-sub { font-size:.72rem; color:var(--soft); }

/* ── Ask question ── */
.ask-card {
  border-radius:var(--radius); padding:1.1rem;
  background:var(--card); border:1px solid var(--border);
  cursor:pointer; transition:all var(--trans);
  display:flex; align-items:center; gap:1rem;
}
.ask-card:hover { border-color:var(--violet); background:var(--violet-dim); }
.ask-icon { width:44px; height:44px; border-radius:50%;
  background:var(--violet-dim); border:1px solid rgba(123,79,162,.3);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.ask-text { flex:1; }
.ask-title { font-size:.9rem; font-weight:600; color:var(--white); margin-bottom:.2rem; }
.ask-sub   { font-size:.75rem; color:var(--muted); }
.ask-arrow { color:var(--muted); font-size:.8rem; }

/* Carte d'accueil proactive du coach (dashboard) — mise en avant */
.coach-welcome-card {
  border-radius:var(--radius); padding:1.15rem 1.15rem 1.05rem;
  margin-bottom:1rem;
  background:linear-gradient(135deg, var(--gold-dim), var(--violet-dim));
  border:1px solid var(--gold-border);
  box-shadow:0 0 0 1px rgba(201,162,39,.05), 0 8px 30px -12px var(--gold-glow);
  display:flex; gap:.9rem; align-items:flex-start;
  animation:cwIn .5s ease both;
}
@keyframes cwIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.cw-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 30% 30%, var(--gold-l), var(--gold));
  color:#1a1206; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:0 0 16px var(--gold-glow); }
.cw-body { flex:1; }
.cw-title { font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gold-l); margin-bottom:.35rem; }
.cw-text { font-size:.85rem; line-height:1.5; color:var(--white); margin-bottom:.85rem; }
.cw-cta {
  width:100%; padding:.7rem 1rem; border:none; border-radius:calc(var(--radius) - 4px);
  background:linear-gradient(135deg, var(--gold-l), var(--gold));
  color:#1a1206; font-weight:700; font-size:.85rem; cursor:pointer;
  transition:filter var(--trans), transform var(--trans); }
.cw-cta:hover { filter:brightness(1.08); transform:translateY(-1px); }
.cw-cta:active { transform:translateY(0); }

/* ── Suggestions rapides ── */
.quick-questions { display:flex; flex-direction:column; gap:.5rem; }
.section-label { font-size:.65rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.25rem; }
.qq-chip {
  padding:.6rem 1rem; border-radius:50px;
  background:var(--card); border:1px solid var(--border);
  font-size:.82rem; color:var(--soft); cursor:pointer;
  transition:all var(--trans); text-align:left; white-space:normal;
  display:flex; align-items:center; gap:.6rem;
}
.qq-chip:hover { border-color:var(--gold-border); color:var(--white); background:var(--gold-dim); }
.qq-chip-icon { font-size:.9rem; flex-shrink:0; }

/* ════════════════════════════════════════════
   PROFIL
════════════════════════════════════════════ */
.profile-header { padding:1.25rem 1.25rem .5rem; }
.profile-name { font-family:'Cinzel',serif; font-size:1.3rem; font-weight:600; }
.profile-sub  { font-size:.8rem; color:var(--muted); margin-top:.15rem; }

/* ── Tabs ── */
.tabs {
  display:flex; gap:.5rem; padding:.5rem 1.25rem;
  overflow-x:auto; flex-shrink:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none; }
.tab-btn {
  padding:.5rem 1rem; border-radius:50px; flex-shrink:0;
  font-size:.78rem; font-weight:600; letter-spacing:.03em;
  border:1px solid var(--border); color:var(--muted);
  transition:all var(--trans);
}
.tab-btn.active {
  background:var(--gold-dim); border-color:var(--gold-border);
  color:var(--gold);
}

/* ── Profile sections ── */
.profile-section { padding:1rem 1.25rem; border-top:1px solid var(--border); }
.psec-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.psec-icon { font-size:1.4rem; }
.psec-title { font-family:'Cinzel',serif; font-size:1rem; font-weight:600; }
.psec-sub   { font-size:.75rem; color:var(--muted); margin-top:.1rem; }

.number-row { display:flex; align-items:baseline; gap:.5rem; margin-bottom:.3rem; }
.big-number { font-family:'Cinzel',serif; font-size:2.5rem; font-weight:700; color:var(--gold); line-height:1; }
.big-number.master { color:var(--gold-l); text-shadow:0 0 20px rgba(201,162,39,.4); }
.number-name { font-size:.85rem; font-weight:600; color:var(--gold-l); }
.number-desc { font-size:.85rem; color:var(--soft); line-height:1.6; margin-bottom:.75rem; }
.keywords-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.75rem; }
.kw-tag { padding:.2rem .6rem; border-radius:50px;
  background:var(--gold-dim); border:1px solid rgba(201,162,39,.2);
  font-size:.68rem; font-weight:600; color:var(--gold-l); }

.numbers-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.75rem; }
.num-mini { padding:.75rem; border-radius:var(--radius-sm);
  background:var(--card); border:1px solid var(--border); }
.num-mini-label { font-size:.6rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.2rem; }
.num-mini-val { font-family:'Cinzel',serif; font-size:1.4rem; font-weight:700; color:var(--gold); }
.num-mini-name { font-size:.68rem; color:var(--soft); margin-top:.1rem; }

/* ── Astrology ── */
.planet-row {
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem 0; border-bottom:1px solid var(--border);
}
.planet-row:last-child { border-bottom:none; }
.planet-symbol { font-size:1.2rem; width:28px; text-align:center; flex-shrink:0; }
.planet-name { font-size:.75rem; color:var(--muted); width:70px; flex-shrink:0; }
.planet-sign { font-size:.88rem; font-weight:600; color:var(--white); flex:1; }
.planet-degree { font-size:.72rem; color:var(--muted); }

/* ── Maisons & aspects ── */
.houses-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem; }
.house-cell {
  display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--soft);
  padding:.45rem .6rem; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.house-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  background:var(--gold-dim); color:var(--gold); font-size:.7rem; font-weight:700;
}
.aspects-list { display:flex; flex-direction:column; gap:.3rem; }
.aspect-row {
  font-size:.82rem; color:var(--soft); padding:.4rem .2rem;
  border-bottom:1px solid var(--border);
}
.aspect-row:last-child { border-bottom:none; }
.aspect-row strong { color:var(--white); }
.aspect-sym { color:var(--gold); margin-right:.2rem; }

/* ── HD ── */
.hd-type-display { text-align:center; padding:1.5rem 1rem; }
.hd-type-name { font-family:'Cinzel',serif; font-size:1.8rem; font-weight:700; color:var(--white); }
.hd-type-pct  { font-size:.75rem; color:var(--muted); margin-bottom:1rem; }
.hd-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.hd-cell { padding:.85rem; border-radius:var(--radius-sm);
  background:var(--card); border:1px solid var(--border); }
.hd-cell-label { font-size:.6rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.25rem; }
.hd-cell-val { font-size:.88rem; font-weight:600; color:var(--violet-l); }

/* ── Centers diagram (simplified) ── */
.centers-row { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.75rem; }
.center-dot {
  padding:.3rem .7rem; border-radius:50px;
  font-size:.68rem; font-weight:600;
  border:1px solid;
}
.center-dot.defined { background:var(--violet-dim); border-color:rgba(123,79,162,.4); color:var(--violet-l); }
.center-dot.undefined { background:var(--card); border-color:var(--border); color:var(--muted); }

/* ════════════════════════════════════════════
   COACH / CHAT
════════════════════════════════════════════ */
.chat-screen { display:flex; flex-direction:column; height:100%; }
.chat-messages {
  flex:1; overflow-y:auto; padding:1rem 1.25rem;
  display:flex; flex-direction:column; gap:.75rem;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.chat-messages::-webkit-scrollbar { display:none; }

/* Messages */
.msg { display:flex; gap:.6rem; animation:msg-in .25s ease both; max-width:90%; }
@keyframes msg-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.msg.user { flex-direction:row-reverse; align-self:flex-end; }
.msg.ai   { align-self:flex-start; }
.msg-avatar {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
  align-self:flex-end;
}
.msg.ai   .msg-avatar { background:linear-gradient(135deg,var(--violet),var(--gold)); font-size:.9rem; }
.msg.user .msg-avatar { background:var(--bg3); border:1px solid var(--border); font-size:.75rem; color:var(--soft); }

.msg-bubble { padding:.75rem 1rem; border-radius:14px; line-height:1.6; font-size:.88rem; }
.msg-bubble p { margin:0 0 .5rem; }
.msg-bubble p:last-child { margin-bottom:0; }
.msg-bubble .md-h { font-family:'Cinzel',serif; font-weight:600; color:var(--gold);
  font-size:.95rem; margin:.7rem 0 .35rem; }
.msg-bubble .md-q { margin:.5rem 0; padding:.4rem .75rem; font-style:italic;
  border-left:2px solid var(--gold-border); background:var(--gold-dim); border-radius:0 8px 8px 0; }
.msg-bubble .md-ul { margin:.3rem 0 .5rem; padding-left:1.1rem; }
.msg-bubble .md-ul li { margin:.15rem 0; }
.msg.ai   .msg-bubble {
  background:rgba(123,79,162,.15); border:1px solid rgba(123,79,162,.2);
  border-bottom-left-radius:4px; color:var(--white);
}
.msg.user .msg-bubble {
  background:var(--gold-dim); border:1px solid var(--gold-border);
  border-bottom-right-radius:4px; color:var(--white);
}

/* Bouton lecture vocale (réponses du coach) */
.msg-speak {
  align-self:flex-end; flex-shrink:0;
  width:30px; height:30px; border-radius:50%;
  background:var(--card); border:1px solid var(--border);
  color:var(--gold); font-size:.8rem; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--trans); opacity:.65;
}
.msg-speak:hover { opacity:1; background:var(--gold-dim); border-color:var(--gold-border); }
.msg-speak.speaking { opacity:1; background:var(--gold-dim); border-color:var(--gold-border);
  animation:speak-pulse 1.3s ease-in-out infinite; }
@keyframes speak-pulse { 0%,100%{box-shadow:0 0 0 0 var(--gold-glow)} 50%{box-shadow:0 0 0 5px transparent} }

.msg-typing { display:flex; gap:.3rem; padding:.5rem .75rem;
  background:rgba(123,79,162,.1); border-radius:14px; border-bottom-left-radius:4px;
  border:1px solid rgba(123,79,162,.15); }
.typing-dot { width:6px; height:6px; border-radius:50%; background:var(--violet-l);
  animation:typing 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes typing { 0%,80%,100%{transform:scale(.8);opacity:.4} 40%{transform:scale(1);opacity:1} }

/* Chat suggestions */
.chat-suggestions {
  padding:.5rem 1.25rem; display:flex; gap:.5rem;
  overflow-x:auto; flex-shrink:0;
  -webkit-overflow-scrolling:touch;
}
.chat-suggestions::-webkit-scrollbar { display:none; }
.sug-chip {
  padding:.45rem .9rem; border-radius:50px; flex-shrink:0;
  background:var(--card); border:1px solid var(--border);
  font-size:.75rem; color:var(--soft); cursor:pointer;
  transition:all var(--trans); white-space:nowrap;
}
.sug-chip:hover { border-color:var(--violet); color:var(--white); background:var(--violet-dim); }

/* Chat input */
.chat-input-bar {
  padding:.75rem 1.25rem;
  padding-bottom:calc(.75rem + var(--safe-bottom));
  background:rgba(10,6,30,.9); backdrop-filter:blur(20px);
  border-top:1px solid var(--border); flex-shrink:0;
  display:flex; gap:.6rem; align-items:flex-end;
}
.chat-input {
  flex:1; padding:.75rem 1rem; border-radius:22px;
  background:var(--card); border:1px solid var(--border);
  color:var(--white); font-size:.9rem; font-family:'Raleway',sans-serif;
  outline:none; resize:none; max-height:120px; min-height:44px;
  line-height:1.4; transition:border-color var(--trans);
  -webkit-appearance:none;
}
.chat-input::placeholder { color:var(--muted); }
.chat-input:focus { border-color:var(--gold-border); }
.chat-send {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),#a8841e);
  display:flex; align-items:center; justify-content:center;
  color:var(--bg); transition:all var(--trans);
}
.chat-send:hover { transform:scale(1.05); box-shadow:0 4px 16px var(--gold-glow); }
.chat-send:disabled { opacity:.4; transform:none; cursor:not-allowed; }
.chat-mic {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--soft); cursor:pointer; transition:all var(--trans);
}
.chat-mic:hover { color:var(--gold); border-color:var(--gold-border); }
.chat-mic.listening {
  color:var(--bg); background:linear-gradient(135deg,var(--gold),#a8841e); border-color:transparent;
  animation:mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse { 0%,100%{box-shadow:0 0 0 0 var(--gold-glow)} 50%{box-shadow:0 0 0 8px transparent} }

/* ════════════════════════════════════════════
   PREMIUM SCREEN
════════════════════════════════════════════ */
.premium-screen { padding:1.5rem 1.25rem; display:flex; flex-direction:column; gap:1.25rem; }
.premium-hero { text-align:center; padding:1.5rem 0; }
.premium-star { font-size:3rem; color:var(--gold); margin-bottom:.75rem;
  animation:float 3s ease-in-out infinite; }
.premium-title { font-family:'Cinzel',serif; font-size:1.6rem; font-weight:700; margin-bottom:.5rem; }
.premium-sub { font-size:.9rem; color:var(--soft); line-height:1.6; }
.premium-price-card {
  border-radius:var(--radius); padding:1.5rem;
  background:linear-gradient(135deg,rgba(201,162,39,.1),rgba(123,79,162,.06));
  border:1px solid var(--gold-border);
}
.premium-price { font-family:'Cinzel',serif; font-size:2.5rem; font-weight:700; color:var(--gold); }
.premium-price span { font-size:1rem; color:var(--muted); }
.premium-features { display:flex; flex-direction:column; gap:.6rem; margin-top:.75rem; }
.pf-item { display:flex; gap:.6rem; font-size:.85rem; color:var(--soft); align-items:flex-start; }
.pf-check { color:var(--gold); font-size:.7rem; flex-shrink:0; margin-top:.15rem; }
.premium-cta-btn {
  width:100%; padding:1rem; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--gold),#a8841e);
  color:var(--bg); font-weight:700; font-size:.95rem;
  font-family:'Raleway',sans-serif;
  transition:all var(--trans);
}
.premium-cta-btn:hover { transform:translateY(-1px); box-shadow:0 6px 24px var(--gold-glow); }
.premium-note { text-align:center; font-size:.75rem; color:var(--muted); }

/* ── Offres : cartes par tier ── */
.premium-trial-banner {
  text-align:center; font-size:.8rem; color:var(--gold);
  padding:.7rem 1rem; border-radius:var(--radius-sm);
  background:var(--gold-dim); border:1px solid var(--gold-border);
}
.plan-card {
  position:relative; border-radius:var(--radius); padding:1.5rem 1.25rem;
  background:var(--card); border:1px solid var(--border);
  display:flex; flex-direction:column; gap:1rem;
}
.plan-card.featured {
  background:linear-gradient(135deg,rgba(201,162,39,.1),rgba(123,79,162,.07));
  border-color:var(--gold-border);
}
.plan-card.current { border-color:var(--violet-l); }
.plan-ribbon {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  padding:.25rem .85rem; border-radius:50px; white-space:nowrap;
  background:linear-gradient(135deg,var(--gold),#a8841e); color:var(--bg);
  font-size:.65rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.plan-head { text-align:center; }
.plan-name { font-family:'Cinzel',serif; font-size:1.25rem; font-weight:700; color:var(--white); }
.plan-tagline { font-size:.78rem; color:var(--muted); margin:.2rem 0 .6rem; }
.plan-price { font-family:'Cinzel',serif; font-size:2rem; font-weight:700; color:var(--gold); }
.plan-price span { font-size:.85rem; color:var(--muted); font-family:'Raleway',sans-serif; }
.plan-features { display:flex; flex-direction:column; gap:.55rem; }
.plan-cta {
  width:100%; padding:.85rem; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--card-hover); border:1px solid var(--gold-border);
  color:var(--gold); font-weight:700; font-size:.9rem;
  font-family:'Raleway',sans-serif; transition:all var(--trans);
}
.plan-cta.gold { background:linear-gradient(135deg,var(--gold),#a8841e); color:var(--bg); border:none; }
.plan-cta:hover:not(.disabled) { transform:translateY(-1px); box-shadow:0 6px 20px var(--gold-glow); }
.plan-cta.disabled { opacity:.5; cursor:default; }

/* ── Badge offre (dashboard) ── */
.plan-badge {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1rem; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--gold-dim); border:1px solid var(--gold-border);
  color:var(--gold); font-size:.82rem; font-weight:600;
  transition:all var(--trans); text-align:left;
}
.plan-badge.free { background:var(--card); border-color:var(--border); color:var(--soft); }
.plan-badge:hover { transform:translateY(-1px); }
.plan-badge-arrow { font-size:1rem; flex-shrink:0; margin-left:.5rem; }

/* ── Bannière lunaire (dashboard) ── */
.lunar-banner {
  width:100%; display:flex; align-items:center; gap:.8rem; text-align:left; cursor:pointer;
  padding:.85rem 1rem; border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(123,79,162,.28),rgba(201,162,39,.12));
  border:1px solid var(--gold-border); color:var(--white);
  transition:all var(--trans);
}
.lunar-banner:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(123,79,162,.3); }
.lunar-sym { font-size:1.7rem; flex-shrink:0; }
.lunar-txt { flex:1; font-size:.9rem; line-height:1.35; }
.lunar-sub { color:var(--soft); font-size:.78rem; }
.lunar-arrow { font-size:1.1rem; color:var(--gold); flex-shrink:0; }

/* ── Bouton compte (profil) ── */
.profile-account-btn {
  margin-top:.75rem; padding:.45rem 1rem; border-radius:50px; cursor:pointer;
  background:var(--card); border:1px solid var(--border); color:var(--soft);
  font-size:.8rem; font-family:'Raleway',sans-serif; transition:all var(--trans);
}
.profile-account-btn:hover { border-color:var(--gold-border); color:var(--gold); }
.profile-account-btn.gold { background:var(--gold-dim); border-color:var(--gold-border); color:var(--gold); font-weight:600; }

/* ── Liens légaux (réglages) ── */
.legal-links { display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:center; padding:.5rem 0; }
.legal-links a { color:var(--muted); font-size:.78rem; text-decoration:none; }
.legal-links a:hover { color:var(--gold); }

/* ── Bannière d'installation (PWA) ── */
.install-banner {
  width:100%; display:flex; align-items:center; gap:.6rem;
  padding:.7rem .9rem; border-radius:var(--radius-sm); cursor:pointer; text-align:left;
  background:linear-gradient(135deg,rgba(123,79,162,.18),rgba(201,162,39,.1));
  border:1px solid var(--gold-border); color:var(--white); font-size:.82rem; font-weight:600;
  transition:all var(--trans);
}
.install-banner:hover { transform:translateY(-1px); }
.install-ico { font-size:1.1rem; flex-shrink:0; }
.install-txt { flex:1; }
.install-x { flex-shrink:0; color:var(--muted); font-size:.9rem; padding:.2rem .4rem; border-radius:50px; }
.install-x:hover { color:var(--white); background:rgba(255,255,255,.1); }

/* ── Mon abonnement ── */
.sub-status-card {
  border-radius:var(--radius); padding:1.5rem;
  background:linear-gradient(135deg,rgba(123,79,162,.12),rgba(201,162,39,.06));
  border:1px solid var(--gold-border);
}
.sub-status-label { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.sub-status-plan { font-family:'Cinzel',serif; font-size:1.7rem; font-weight:700; color:var(--gold); margin:.2rem 0; }
.sub-trial { font-size:.8rem; color:var(--gold); margin-bottom:.75rem; }
.sub-row { display:flex; justify-content:space-between; font-size:.85rem; color:var(--soft); margin-top:.75rem; }
.quota-bar { height:6px; border-radius:50px; background:var(--card); margin-top:.5rem; overflow:hidden; }
.quota-fill { height:100%; background:linear-gradient(90deg,var(--violet-l),var(--gold)); border-radius:50px; transition:width .4s; }

/* ── Compteur quota Coach ── */
.coach-quota {
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem 1rem; font-size:.75rem; color:var(--muted);
  background:var(--card); border-bottom:1px solid var(--border);
}
.coach-quota.low { color:var(--gold); background:var(--gold-dim); }
.coach-quota-cta {
  font-size:.72rem; font-weight:700; color:var(--gold); cursor:pointer;
  background:none; border:none; padding:0;
}

/* ── Section verrouillée (profil) ── */
.locked-section { opacity:.92; }
.locked-section .psec-header { position:relative; }
.locked-lock { margin-left:auto; font-size:1rem; opacity:.6; }

/* ════════════════════════════════════════════
   UTILITIES
════════════════════════════════════════════ */
.divider { height:1px; background:var(--border); margin:.25rem 0; }
.badge-master {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .6rem; border-radius:50px;
  background:var(--gold-dim); border:1px solid var(--gold-border);
  font-size:.65rem; font-weight:700; color:var(--gold);
  letter-spacing:.06em; text-transform:uppercase;
}
.freemium-lock {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; border-radius:var(--radius-sm);
  background:var(--card); border:1px solid var(--border);
  margin-top:.5rem;
}
.lock-text { font-size:.8rem; color:var(--muted); }
.lock-btn {
  padding:.35rem .85rem; border-radius:50px;
  background:var(--gold-dim); border:1px solid var(--gold-border);
  font-size:.72rem; font-weight:700; color:var(--gold);
  cursor:pointer; transition:all var(--trans);
}
.lock-btn:hover { background:var(--gold); color:var(--bg); }

.empty-chat {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem;
  padding:2rem; text-align:center;
}
.empty-chat-icon { font-size:3rem; opacity:.4; }
.empty-chat-title { font-family:'Cinzel',serif; font-size:1.1rem; font-weight:600; color:var(--soft); }
.empty-chat-sub { font-size:.85rem; color:var(--muted); line-height:1.6; }

/* ── Toasts ── */
.toast {
  position:fixed; bottom:calc(var(--nav-h) + var(--safe-bottom) + 1rem); left:50%;
  transform:translateX(-50%) translateY(10px);
  padding:.6rem 1.2rem; border-radius:50px;
  background:rgba(10,6,30,.95); border:1px solid var(--border);
  font-size:.82rem; color:var(--white); white-space:nowrap;
  backdrop-filter:blur(16px); z-index:100;
  animation:toast-in .3s ease both;
}
@keyframes toast-in { from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ── Responsive ── */
@media(min-width:480px){
  #app { max-width:480px; margin:0 auto;
    box-shadow:0 0 80px rgba(0,0,0,.5); }
  body { background:#050312; }
}