/* ══════════════════════════════════════════════════════════════════════════
   career-adapter.css — couche « Carrière Horizon 2050 » par-dessus le sandbox.
   Injecté uniquement par la route /play/career/sandbox/. N'affecte ni le
   Sandbox ni la Salle de Marché (fichiers servis sans ce CSS).
   ══════════════════════════════════════════════════════════════════════════ */

:root { --career-accent: #6c8cff; }

/* Barre de bascule deux vues — en haut à DROITE du header */
#career-toggle-bar {
  position: fixed; top: 12px; right: 16px;
  z-index: 9500; display: flex; gap: 4px; padding: 4px;
  background: rgba(13, 21, 38, .92); border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}
.career-tab {
  border: none; background: transparent; cursor: pointer;
  color: #94a3b8; font: 700 13px Inter, system-ui, sans-serif;
  padding: 8px 16px; border-radius: 999px; transition: background .15s, color .15s;
}
.career-tab:hover { color: #f1f5fb; }
.career-tab.active { color: #fff; background: var(--career-accent); }

/* Sidebar défilable — au fil de la progression la carrière ajoute des menus
   (Pilotage, Finpédia, Famille, Développement) qui
   débordaient et poussaient « Tour suivant » hors de l'écran. On rend la nav
   scrollable : l'en-tête et les actions du bas restent toujours visibles.
   min-height:0 est indispensable pour qu'un enfant flex puisse défiler. */
aside nav.flex-1 {
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}
aside nav.flex-1::-webkit-scrollbar { width: 8px; }
aside nav.flex-1::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14); border-radius: 999px;
}
aside nav.flex-1::-webkit-scrollbar-track { background: transparent; }

/* Overlay narratif (vue Carrière) — HUD de jeu spatial */
#career-narrative {
  position: fixed; inset: 0; z-index: 9400;
  display: flex; align-items: center; justify-content: center;
  padding: 72px 28px 32px; overflow-y: auto;
  background:
    radial-gradient(1100px 720px at 72% -8%, color-mix(in srgb, var(--career-accent) 14%, transparent), transparent),
    radial-gradient(900px 600px at 0% 112%, rgba(108,140,255,.06), transparent),
    #070912;
}
.cna-stage {
  width: 100%; max-width: 1080px;
  display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 28px; align-items: start;
}
@media (max-width: 880px) { .cna-stage { grid-template-columns: 1fr; gap: 18px; } }

.cna-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cna-chapter { display: flex; align-items: center; justify-content: space-between; }
.cna-badge {
  font: 700 11px Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--career-accent); background: rgba(255,255,255,.05); border: 1px solid var(--career-accent);
  padding: 5px 14px; border-radius: 999px;
}
.cna-turn { font: 600 12px Inter, system-ui, sans-serif; color: #64748b; }

/* Dialogue — scène centrale */
.cna-dialogue {
  display: flex; gap: 20px; align-items: flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent), #11182b;
  border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 28px 30px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.cna-guide-avatar {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 18px; font-size: 34px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--career-accent) 22%, transparent), rgba(255,255,255,.04));
  border: 2px solid var(--career-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--career-accent) 10%, transparent);
}
.cna-speech { flex: 1; min-width: 0; }
.cna-guide-name { font: 700 11px Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--career-accent); margin-bottom: 6px; }
.cna-guide-title { font: 800 24px/1.18 Inter, system-ui, sans-serif; color: #f1f5fb; margin-bottom: 9px; letter-spacing: -.015em; }
.cna-guide-text { font: 400 16px/1.72 Inter, system-ui, sans-serif; color: #e8edf6; max-width: 62ch; }

.cna-action { display: flex; flex-direction: column; gap: 10px; }

/* Rail HUD (droite) */
.cna-rail { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 881px) { .cna-rail { position: sticky; top: 8px; } }
.cna-hud { background: #0e1524; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px 16px; }
.cna-hud-h { font: 700 11px Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(241,245,251,.5); margin-bottom: 8px; }
.cna-stat { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font: 500 13px Inter, system-ui, sans-serif; color: #94a3b8; border-bottom: 1px solid rgba(255,255,255,.05); }
.cna-stat:last-child { border-bottom: none; }
.cna-stat span:last-child { color: #f1f5fb; font-weight: 700; }

.cna-cta {
  width: 100%; padding: 15px; border: none; border-radius: 13px; cursor: pointer;
  background: var(--career-accent); color: #06101e;
  font: 800 14px Inter, system-ui, sans-serif; letter-spacing: .02em;
  transition: filter .15s, transform .12s;
}
.cna-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cna-hint { text-align: center; font: 400 12px/1.55 Inter, system-ui, sans-serif; color: #64748b; }

/* Encadré conseil tutoriel */
.cna-tip {
  background: rgba(245,200,66,.07); border: 1px solid rgba(245,200,66,.25);
  border-radius: 14px; padding: 14px 16px; font: 400 13.5px/1.6 Inter, system-ui, sans-serif; color: #e8d9a8;
}
.cna-tip-k { font-weight: 800; color: #f5c842; }
.cna-choices-label { font: 700 11px Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(241,245,251,.45); margin-top: 2px; }

/* Choix de scène — cartes en grille */
.cna-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cna-choices:has(.cna-cta) { grid-template-columns: 1fr; }
@media (max-width: 640px) { .cna-choices { grid-template-columns: 1fr; } }
.cna-choice {
  text-align: left; cursor: pointer; width: 100%;
  background: rgba(255,255,255,.03); border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 15px; padding: 16px 18px; color: #f1f5fb;
  display: flex; flex-direction: column; gap: 5px; transition: background .15s, border-color .15s, transform .12s;
}
.cna-choice:hover { background: rgba(255,255,255,.05); border-color: var(--career-accent); transform: translateY(-2px); }
.cna-choice-label { font: 700 15px Inter, system-ui, sans-serif; line-height: 1.3; }
.cna-choice-desc { font: 400 12.5px/1.5 Inter, system-ui, sans-serif; color: #94a3b8; }

/* ── Écran-titre d'arc (full-screen, jeu vidéo) ─────────────────────────── */
#career-arc-splash {
  position: fixed; inset: 0; z-index: 100040; display: none;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(900px 600px at 50% 35%, color-mix(in srgb, var(--arc-color) 22%, transparent), transparent), #05070e;
  transition: opacity .32s ease; font-family: Inter, system-ui, sans-serif;
}
.cas-inner { display: flex; flex-direction: column; align-items: center; padding: 24px; }
.cas-emoji { font-size: 64px; margin-bottom: 8px; filter: drop-shadow(0 0 24px var(--arc-color)); }
.cas-arcnum { font: 900 14px Inter; letter-spacing: .42em; text-transform: uppercase; color: var(--arc-color); margin-bottom: 6px; padding-left: .42em; }
.cas-name { font: 900 clamp(40px, 9vw, 78px)/0.95 Inter; letter-spacing: -.03em; color: #fff; text-shadow: 0 0 40px color-mix(in srgb, var(--arc-color) 60%, transparent); margin-bottom: 14px; }
.cas-sub { font: 500 17px Inter; color: #cbd5e1; margin-bottom: 34px; }
.cas-btn { border: none; cursor: pointer; padding: 15px 40px; border-radius: 13px; background: var(--arc-color); color: #05070e; font: 800 15px Inter; letter-spacing: .02em; transition: filter .15s, transform .12s; }
.cas-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
/* Animation d'entrée */
#career-arc-splash.cas-in .cas-emoji { animation: casPop .5s cubic-bezier(.34,1.56,.64,1) both; }
#career-arc-splash.cas-in .cas-arcnum { animation: casUp .5s ease both .08s; }
#career-arc-splash.cas-in .cas-name { animation: casUp .55s cubic-bezier(.2,.7,.3,1) both .14s; }
#career-arc-splash.cas-in .cas-sub { animation: casUp .5s ease both .26s; }
#career-arc-splash.cas-in .cas-btn { animation: casUp .5s ease both .4s; }
@keyframes casPop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes casUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Objectifs (quêtes) — conteneur simple dans le rail HUD */
.cna-obj { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0; font: 500 12.5px/1.4 Inter, system-ui, sans-serif; color: #94a3b8; border-bottom: 1px solid rgba(255,255,255,.05); }
.cna-obj:last-child { border-bottom: none; }
.cna-obj.done { color: #22c55e; }
.cna-obj span:last-child { font-weight: 700; }
.cna-obj-h { font: 800 10px Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(241,245,251,.4); margin: 10px 0 2px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }

/* ── Modal Fiscalité ────────────────────────────────────────────────────── */
#career-fisc-overlay {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,16,.82); backdrop-filter: blur(7px);
}
.cfx-modal {
  width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto;
  background: #0e1524; border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
}
.cfx-head {
  display: flex; align-items: center; gap: 14px; padding: 20px 22px;
  background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(108,140,255,.10) 70%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cfx-head-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.4);
}
.cfx-head-txt { flex: 1; min-width: 0; }
.cfx-title { font: 800 18px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cfx-sub { font: 400 12px Inter, system-ui, sans-serif; color: #94a3b8; margin-top: 2px; }
.cfx-close { background: none; border: none; color: #94a3b8; font-size: 24px; cursor: pointer; line-height: 1; }
.cfx-close:hover { color: #f1f5fb; }
.cfx-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 12px; }

/* Cartes fiscalité */
.cfx-card {
  background: #11182b; border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid rgba(255,255,255,.18); border-radius: 14px; padding: 14px 16px;
}
.cfx-card-blue  { border-left-color: #5b9bd5; }
.cfx-card-green { border-left-color: #4eca7f; }
.cfx-card-plain { border-left-color: #a07ad5; }
.cfx-card-h {
  display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
  font: 800 14px Inter, system-ui, sans-serif; color: #f1f5fb;
}
.cfx-card-ic { font-size: 17px; }
.cfx-pill { margin-left: auto; font: 800 11px Inter, system-ui, sans-serif; padding: 4px 10px; border-radius: 999px; }
.cfx-pill-amber { color: #f59e0b; background: rgba(245,158,11,.13); border: 1px solid rgba(245,158,11,.3); }
.cfx-pill-green { color: #22c55e; background: rgba(34,197,94,.13); border: 1px solid rgba(34,197,94,.3); }
.cfx-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font: 500 13px Inter, system-ui, sans-serif; color: #cbd5e1; border-bottom: 1px solid rgba(255,255,255,.05); }
.cfx-row:last-child { border-bottom: none; }
.cfx-row-v { font-weight: 800; color: #f1f5fb; }
.cfx-row-strong { font-weight: 700; color: #f1f5fb; border-bottom: none; margin-top: 2px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }

/* Comparatif CTO vs PEA */
.cfx-vs { display: flex; align-items: stretch; gap: 8px; margin: 4px 0 12px; }
.cfx-vs-col { flex: 1; border-radius: 12px; padding: 12px; text-align: center; }
.cfx-vs-cto { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.28); }
.cfx-vs-pea { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.28); }
.cfx-vs-tag { font: 700 10.5px Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin-bottom: 6px; }
.cfx-vs-cto .cfx-vs-amt { color: #ef4444; }
.cfx-vs-pea .cfx-vs-amt { color: #22c55e; }
.cfx-vs-amt { font: 900 21px Inter, system-ui, sans-serif; }
.cfx-vs-sub { font: 400 10.5px/1.4 Inter, system-ui, sans-serif; color: #94a3b8; margin-top: 4px; }
.cfx-vs-arrow { align-self: center; font: 800 12px Inter, system-ui, sans-serif; color: #64748b; }
.cfx-econ {
  text-align: center; font: 600 13px Inter, system-ui, sans-serif; color: #cbd5e1;
  background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.25);
  border-radius: 10px; padding: 9px 12px;
}
.cfx-econ b { color: #22c55e; font-weight: 900; }
.cfx-note { padding: 11px 13px; background: rgba(108,140,255,.07); border: 1px solid rgba(108,140,255,.2); border-radius: 10px; font: 400 12px/1.6 Inter, system-ui, sans-serif; color: #94a3b8; }

/* ══ INTRO Horizon 2050 ══════════════════════════════════════════════════ */
#career-intro {
  position: fixed; inset: 0; z-index: 100050; display: flex;
  align-items: center; justify-content: center; padding: 24px; text-align: center;
  background: radial-gradient(1000px 600px at 50% 0%, rgba(108,140,255,.14), transparent), #060810;
  font-family: Inter, system-ui, sans-serif;
}
.cin-wrap { width: 100%; max-width: 560px; }
.cin-eyebrow { font: 700 12px Inter; letter-spacing: .16em; text-transform: uppercase; color: var(--career-accent); margin-bottom: 18px; }
.cin-title { font: 900 clamp(48px, 11vw, 92px)/0.9 Inter; letter-spacing: -.04em; color: #f1f5fb; margin-bottom: 18px; }
.cin-sub { font: 400 15px/1.65 Inter; color: #94a3b8; max-width: 460px; margin: 0 auto 28px; }
.cin-h { font: 800 24px Inter; color: #f1f5fb; margin-bottom: 10px; }
.cin-p { font: 400 14px/1.6 Inter; color: #94a3b8; max-width: 460px; margin: 0 auto 24px; }
.cin-btn {
  border: none; cursor: pointer; padding: 15px 38px; border-radius: 13px;
  background: var(--career-accent); color: #fff; font: 800 15px Inter; letter-spacing: .02em;
  transition: filter .15s, transform .12s;
}
.cin-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cin-goals { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 0 auto; }
.cin-goal {
  cursor: pointer; padding: 18px 22px; border-radius: 16px; text-align: left;
  background: #11182b; border: 1.5px solid rgba(255,255,255,.1); color: #f1f5fb;
  font: 700 16px Inter; transition: border-color .15s, background .15s, transform .12s;
}
.cin-goal:hover { border-color: var(--g); background: rgba(255,255,255,.04); transform: translateY(-2px); }
.cin-guide { display: flex; gap: 14px; align-items: flex-start; text-align: left; background: #11182b; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 20px; max-width: 480px; margin: 0 auto 24px; }
.cin-guide-av { width: 50px; height: 50px; flex-shrink: 0; border-radius: 13px; font-size: 26px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border: 1.5px solid var(--career-accent); }
.cin-guide-name { font: 700 11px Inter; letter-spacing: .06em; text-transform: uppercase; color: var(--career-accent); margin-bottom: 6px; }
.cin-guide-txt { font: 400 14px/1.65 Inter; color: #f1f5fb; }

/* ══ Gestion des dépenses ════════════════════════════════════════════════ */
#career-gestion-overlay {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,16,.82); backdrop-filter: blur(7px); font-family: Inter, system-ui, sans-serif;
}
.cg-modal { width: 100%; max-width: 540px; max-height: 92vh; display: flex; flex-direction: column; background: #0e1524; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.65); overflow: hidden; }
.cg-head {
  display: flex; align-items: center; gap: 14px; padding: 20px 22px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(34,197,94,.20), rgba(108,140,255,.08) 70%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cg-head-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,197,94,.16); border: 1px solid rgba(34,197,94,.4);
}
.cg-head-txt { flex: 1; min-width: 0; }
.cg-title { font: 800 18px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cg-sub { font: 400 12px Inter, system-ui, sans-serif; color: #94a3b8; margin-top: 2px; }
.cg-close { background: none; border: none; color: #94a3b8; font-size: 24px; cursor: pointer; line-height: 1; }
.cg-close:hover { color: #f1f5fb; }

/* Hero — économies récupérées */
.cg-hero { padding: 16px 22px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.015); }
.cg-hero-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.cg-hero-label { font: 700 12px Inter, system-ui, sans-serif; color: #cbd5e1; }
.cg-hero-val { font: 900 22px Inter, system-ui, sans-serif; color: #f59e0b; }
.cg-hero-val span { font: 600 12px Inter, system-ui, sans-serif; color: #64748b; }
.cg-hero.reached .cg-hero-val { color: #22c55e; }
.cg-hero-track { height: 9px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.cg-hero-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, #22c55e); transition: width .45s ease; }
.cg-hero-note { font: 400 11.5px/1.5 Inter, system-ui, sans-serif; color: #94a3b8; margin-top: 9px; }

.cg-body { padding: 14px 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

/* Carte de poste de dépense (accent couleur via --c) */
.cg-card {
  background: #11182b; border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--c, #6c8cff); border-radius: 14px; padding: 13px 15px;
}
.cg-card-head { display: flex; align-items: center; gap: 11px; }
.cg-card-icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.cg-card-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cg-card-label { font: 700 13.5px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cg-card-cat { font: 600 10.5px Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--c); margin-top: 1px; }
.cg-card-amt { text-align: right; font: 800 16px Inter, system-ui, sans-serif; color: #f1f5fb; white-space: nowrap; }
.cg-card-amt s { font: 600 12px Inter, system-ui, sans-serif; color: #64748b; }
.cg-card-per { font: 600 10px Inter, system-ui, sans-serif; color: #64748b; }
.cg-card-badgerow { margin: 9px 0 10px; }
.cg-line-badge { font: 800 11px Inter, system-ui, sans-serif; color: #22c55e; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); border-radius: 999px; padding: 3px 10px; }
.cg-line-todo { font: 700 11px Inter, system-ui, sans-serif; color: #f59e0b; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.28); border-radius: 999px; padding: 3px 10px; }

.cg-opts { display: flex; flex-direction: column; gap: 7px; }
.cg-opt {
  display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; width: 100%;
  background: #0b1120; border: 1.5px solid rgba(255,255,255,.08); border-radius: 11px;
  padding: 10px 13px; color: #cbd5e1; transition: border-color .14s, background .14s, transform .12s;
}
.cg-opt:hover { border-color: var(--c, var(--career-accent)); transform: translateY(-1px); }
.cg-opt.active { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, #0b1120); }
.cg-opt-radio {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.22); transition: border-color .14s, box-shadow .14s;
}
.cg-opt.active .cg-opt-radio { border-color: var(--c); background: var(--c); box-shadow: inset 0 0 0 3px #0b1120; }
.cg-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cg-opt-label { font: 700 12.5px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cg-opt-desc { font: 400 11px/1.45 Inter, system-ui, sans-serif; color: #94a3b8; }
.cg-opt-save { flex-shrink: 0; font: 800 12px Inter, system-ui, sans-serif; color: #22c55e; background: rgba(34,197,94,.1); border-radius: 7px; padding: 4px 8px; }
.cg-opt-keep { flex-shrink: 0; font: 700 11px Inter, system-ui, sans-serif; color: #64748b; }

/* ══ Budget vivant : point d'alerte, sections, suspects, activité ════════ */
/* Point rouge sur le menu Banque / Gestion quand un mouvement non vu attend */
.cg-dot {
  position: absolute; top: 6px; right: 8px; min-width: 9px; height: 9px; padding: 0 4px;
  border-radius: 99px; background: #ef4444; box-shadow: 0 0 0 2px #0e1524, 0 0 8px rgba(239,68,68,.7);
  color: #fff; font: 800 10px Inter, system-ui, sans-serif; line-height: 9px; text-align: center;
  animation: cg-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes cg-dot-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .75; } }

/* Bandeau de statistiques sous le héros */
.cg-stats { display: flex; gap: 8px; margin-top: 12px; }
.cg-stat {
  flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 8px 6px; border-radius: 11px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}
.cg-stat.danger { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.28); }
.cg-stat-v { font: 900 16px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cg-stat.danger .cg-stat-v { color: #f87171; }
.cg-stat-l { font: 600 9.5px Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #64748b; text-align: center; }

/* Sections du corps */
.cg-section { margin-bottom: 18px; }
.cg-section:last-child { margin-bottom: 0; }
.cg-section-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 800 12px Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em;
  color: #94a3b8; margin: 4px 2px 10px;
}
.cg-section-count { font: 800 10.5px Inter, system-ui, sans-serif; color: #f87171; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); border-radius: 999px; padding: 3px 9px; text-transform: none; letter-spacing: 0; }
.cg-section-suspect .cg-section-h { color: #f87171; }
.cg-body > .cg-section { display: flex; flex-direction: column; }
.cg-body > .cg-section > .cg-card { margin-bottom: 10px; }

/* Bandeau d'alerte en tête de corps */
.cg-suspect-banner {
  font: 700 12px/1.5 Inter, system-ui, sans-serif; color: #fecaca;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.32);
  border-radius: 12px; padding: 10px 13px; margin-bottom: 14px;
}

/* Carte « prélèvement suspect » */
.cg-card.cg-suspect {
  border: 1px solid rgba(239,68,68,.4); background: rgba(239,68,68,.05);
  box-shadow: 0 0 0 1px rgba(239,68,68,.08), 0 8px 22px rgba(239,68,68,.08);
}
.cg-card.cg-suspect .cg-card-icon { background: rgba(239,68,68,.14); }
.cg-card.cg-suspect .cg-card-cat { color: #f87171; }
.cg-card.cg-suspect.kept { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.02); box-shadow: none; opacity: .8; }
.cg-card.cg-suspect.kept .cg-card-cat { color: #64748b; }
.cg-suspect-hint { font: 400 12px/1.55 Inter, system-ui, sans-serif; color: #cbd5e1; margin: 9px 0 6px; }
.cg-suspect-leak { font: 700 11.5px Inter, system-ui, sans-serif; color: #f59e0b; margin-bottom: 10px; }
.cg-suspect-actions { display: flex; gap: 8px; }
.cg-kill {
  flex: 1; cursor: pointer; border: none; border-radius: 10px; padding: 10px 12px;
  background: #ef4444; color: #fff; font: 800 12.5px Inter, system-ui, sans-serif;
  transition: filter .15s, transform .12s;
}
.cg-kill:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cg-keep {
  cursor: pointer; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 10px 14px;
  background: rgba(255,255,255,.04); color: #cbd5e1; font: 700 12.5px Inter, system-ui, sans-serif;
  transition: background .15s, border-color .15s;
}
.cg-keep:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }

/* Ruban « NOUVEAU » sur une charge fraîchement arrivée */
.cg-card { position: relative; }
.cg-card.cg-fresh { border-color: color-mix(in srgb, var(--c) 55%, #0b1120); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.cg-ribbon {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  font: 900 9.5px Inter, system-ui, sans-serif; letter-spacing: .08em; color: #06121e;
  background: linear-gradient(90deg, #fbbf24, #f59e0b); border-radius: 999px; padding: 3px 9px;
  box-shadow: 0 2px 8px rgba(245,158,11,.4);
}

/* Flux « activité récente » */
.cg-feed { display: flex; flex-direction: column; gap: 2px; }
.cg-feed-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px;
  font: 500 12px/1.4 Inter, system-ui, sans-serif; color: #cbd5e1; background: rgba(255,255,255,.02);
}
.cg-feed-ic { flex-shrink: 0; font-size: 14px; width: 18px; text-align: center; }
.cg-feed-txt { flex: 1; min-width: 0; }
.cg-feed-when { flex-shrink: 0; font: 600 10px Inter, system-ui, sans-serif; color: #64748b; }
.cg-feed-suspect { color: #fca5a5; background: rgba(239,68,68,.07); }
.cg-feed-good { color: #86efac; }
.cg-feed-new { color: #93c5fd; }
.cg-feed-drift { color: #fcd34d; }
.cg-feed-empty { font: 400 12px Inter, system-ui, sans-serif; color: #64748b; padding: 8px 2px; }

/* ══ Prélèvement résilié (petit écran de satisfaction) ═══════════════════ */
#career-phantom-pop {
  position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center;
  padding: 20px; pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
#career-phantom-pop.cpk-show { opacity: 1; }
.cpk-card {
  max-width: 340px; text-align: center; padding: 22px 24px 20px; border-radius: 18px;
  background: #0e1524; border: 1px solid rgba(34,197,94,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(34,197,94,.12);
  transform: scale(.9); transition: transform .3s cubic-bezier(.2,1.3,.4,1);
}
#career-phantom-pop.cpk-show .cpk-card { transform: scale(1); }
.cpk-emoji { font-size: 40px; }
.cpk-kicker { font: 800 11px Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #22c55e; margin-top: 4px; }
.cpk-name { font: 800 17px Inter, system-ui, sans-serif; color: #f1f5fb; margin-top: 4px; }
.cpk-gain { font: 900 15px Inter, system-ui, sans-serif; color: #22c55e; margin-top: 8px; }
.cpk-leak { font: 600 12px/1.5 Inter, system-ui, sans-serif; color: #f59e0b; margin-top: 8px; }
.cpk-leak b { color: #fbbf24; }
.cpk-lesson { font: 400 11.5px/1.55 Inter, system-ui, sans-serif; color: #94a3b8; margin-top: 12px; background: rgba(108,140,255,.07); border: 1px solid rgba(108,140,255,.18); border-radius: 10px; padding: 9px 11px; }

/* ══ HUD : Score Finvesta + bien-être ════════════════════════════════════ */
.cna-score-row { display: flex; align-items: center; gap: 12px; }
.cna-score-grade {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font: 900 24px Inter, system-ui, sans-serif; color: #7f1d1d;
  background: rgba(255,255,255,.04); border: 2px solid #7f1d1d;
}
.cna-score-meta { flex: 1; min-width: 0; }
.cna-score-num { font: 700 12px Inter, system-ui, sans-serif; color: #94a3b8; margin-bottom: 6px; }
.cna-wb-label { font: 600 11px Inter, system-ui, sans-serif; color: #cbd5e1; margin-bottom: 4px; }
.cna-wb-label span { font-weight: 800; color: #f1f5fb; }
.cna-wb-track { height: 6px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.cna-wb-fill { height: 100%; width: 70%; border-radius: 99px; background: #22c55e; transition: width .4s ease, background .3s; }
.cna-inflation { font: 500 11px/1.4 Inter, system-ui, sans-serif; color: #f59e0b; margin-top: 10px; }

/* ══ HUD : sparkline patrimoine + journal de décisions ═══════════════════ */
.cna-spark { width: 100%; height: 64px; display: block; }
.cna-log { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.cna-log-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 500 11.5px/1.35 Inter, system-ui, sans-serif; color: #94a3b8; }
.cna-log-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cna-log-imp { flex-shrink: 0; font-weight: 800; }
.cna-log-imp.pos { color: #22c55e; }
.cna-log-imp.neg { color: #ef4444; }
.cna-log-imp.neu { color: #64748b; }

/* ══ Fiscalité : section PEA prise de date ═══════════════════════════════ */
.cfx-pea { padding: 4px 0 2px; }
.cfx-pea-txt { font: 400 12px/1.55 Inter, system-ui, sans-serif; color: #94a3b8; margin-bottom: 10px; }
.cfx-pea-btn {
  width: 100%; border: none; cursor: pointer; padding: 11px 14px; border-radius: 11px;
  background: #4eca7f; color: #06121e; font: 800 13px Inter, system-ui, sans-serif;
  transition: filter .15s, transform .12s;
}
.cfx-pea-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cfx-pea-status { font: 700 12.5px Inter, system-ui, sans-serif; margin-bottom: 8px; }
.cfx-pea-track { height: 7px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.cfx-pea-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f59e0b, #4eca7f); transition: width .5s ease; }

/* ══ Événement de vie (imprévu) ══════════════════════════════════════════ */
#career-life-event {
  position: fixed; inset: 0; z-index: 100020; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,16,.82); backdrop-filter: blur(6px); font-family: Inter, system-ui, sans-serif;
}
.cle-card {
  width: 100%; max-width: 430px; text-align: center;
  background: #11182b; border: 1px solid rgba(245,158,11,.35); border-radius: 18px;
  padding: 28px 26px; box-shadow: 0 24px 64px rgba(0,0,0,.6); animation: cleIn .3s ease;
}
@keyframes cleIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.cle-emoji { font-size: 40px; margin-bottom: 8px; }
.cle-title { font: 800 18px Inter, system-ui, sans-serif; color: #f1f5fb; margin-bottom: 10px; }
.cle-body { font: 400 13.5px/1.65 Inter, system-ui, sans-serif; color: #cbd5e1; margin-bottom: 12px; }
.cle-impact { font: 800 14px Inter, system-ui, sans-serif; color: #ef4444; margin-bottom: 8px; }
.cle-cushion { font: 600 12px/1.5 Inter, system-ui, sans-serif; border-radius: 9px; padding: 8px 12px; margin-bottom: 10px; }
.cle-cushion.ok { color: #22c55e; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.22); }
.cle-cushion.ko { color: #ef4444; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.22); }
.cle-guide { font: 400 12.5px/1.6 Inter, system-ui, sans-serif; color: #94a3b8; background: rgba(108,140,255,.07); border: 1px solid rgba(108,140,255,.18); border-radius: 10px; padding: 11px 13px; margin-bottom: 16px; text-align: left; }
.cle-choices { display: flex; flex-direction: column; gap: 8px; }
.cle-choice {
  width: 100%; cursor: pointer; padding: 12px 16px; border-radius: 11px;
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.12); color: #f1f5fb;
  font: 700 13px Inter, system-ui, sans-serif; transition: background .15s, border-color .15s, transform .12s;
}
.cle-choice:hover { background: rgba(255,255,255,.07); border-color: var(--career-accent); transform: translateY(-1px); }

/* ══ Game over : interdit bancaire ═══════════════════════════════════════ */
#career-gameover {
  position: fixed; inset: 0; z-index: 100060; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(5,7,14,.96); backdrop-filter: blur(6px); font-family: Inter, system-ui, sans-serif;
}
.cgo-card {
  max-width: 520px; width: 100%; text-align: center;
  background: #11182b; border: 1px solid rgba(224,90,90,.35); border-radius: 20px; padding: 36px 32px;
}
.cgo-emoji { font-size: 52px; margin-bottom: 10px; }
.cgo-kicker { font: 800 13px Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #e05a5a; margin-bottom: 8px; }
.cgo-title { font: 800 24px Inter, system-ui, sans-serif; color: #f1f5fb; margin: 0 0 14px; }
.cgo-text { font: 400 14px/1.65 Inter, system-ui, sans-serif; color: rgba(241,245,251,.75); margin: 0 0 18px; }
.cgo-stats { display: flex; justify-content: center; gap: 22px; padding: 14px; background: rgba(255,255,255,.04); border-radius: 12px; margin-bottom: 18px; }
.cgo-stats > div { display: flex; flex-direction: column; gap: 2px; }
.cgo-stats span { font: 600 11px Inter, system-ui, sans-serif; color: rgba(241,245,251,.45); text-transform: uppercase; letter-spacing: .06em; }
.cgo-stats b { font: 800 17px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cgo-lesson { font: 400 13px/1.6 Inter, system-ui, sans-serif; color: rgba(241,245,251,.6); margin: 0 0 24px; }
.cgo-btn {
  padding: 14px 32px; border: none; border-radius: 12px; cursor: pointer;
  background: #5b9bd5; color: #fff; font: 800 15px Inter, system-ui, sans-serif;
}
.cgo-btn:hover { filter: brightness(1.08); }

/* ══ Bilan final Horizon 2050 (mois 48) ══════════════════════════════════ */
#career-finale {
  position: fixed; inset: 0; z-index: 100070; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(5,7,14,.96); backdrop-filter: blur(6px); font-family: Inter, system-ui, sans-serif;
  overflow-y: auto;
}
.cfn-card {
  max-width: 620px; width: 100%; text-align: center; margin: auto;
  background: #11182b; border: 1px solid rgba(34,197,94,.35); border-radius: 20px; padding: 34px 32px;
  max-height: 92vh; overflow-y: auto;
}
.cfn-emoji { font-size: 52px; margin-bottom: 8px; }
.cfn-kicker { font: 800 13px Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #22c55e; margin-bottom: 8px; }
.cfn-title { font: 800 24px Inter, system-ui, sans-serif; color: #f1f5fb; margin: 0 0 16px; }
.cfn-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; padding: 14px; background: rgba(255,255,255,.04); border-radius: 12px; margin-bottom: 18px; }
.cfn-stats > div { display: flex; flex-direction: column; gap: 2px; }
.cfn-stats span { font: 600 11px Inter, system-ui, sans-serif; color: rgba(241,245,251,.45); text-transform: uppercase; letter-spacing: .06em; }
.cfn-stats b { font: 800 17px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cfn-section { text-align: left; margin-bottom: 16px; }
.cfn-h { font: 800 12px Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(241,245,251,.55); margin-bottom: 8px; }
.cfn-built { display: flex; flex-direction: column; gap: 5px; }
.cfn-built-row { font: 500 13px/1.5 Inter, system-ui, sans-serif; color: #cbd5e1; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 9px; padding: 8px 12px; }
.cfn-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; margin-bottom: 6px; background: rgba(108,140,255,.06); border: 1px solid rgba(108,140,255,.16); }
.cfn-step.done { background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.22); }
.cfn-step-n { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font: 800 12px Inter, system-ui, sans-serif; color: #0b1220; background: #6c8cff; border-radius: 999px; }
.cfn-step.done .cfn-step-n { background: transparent; font-size: 15px; }
.cfn-step-txt { font: 400 13px/1.6 Inter, system-ui, sans-serif; color: #cbd5e1; }
.cfn-step-txt b { color: #f1f5fb; }
.cfn-step-txt em { color: #22c55e; font-style: normal; font-weight: 600; }
.cfn-note { font: 400 11.5px/1.6 Inter, system-ui, sans-serif; color: rgba(241,245,251,.45); margin: 0 0 18px; }
.cfn-btn {
  padding: 14px 32px; border: none; border-radius: 12px; cursor: pointer;
  background: #22c55e; color: #05070e; font: 800 15px Inter, system-ui, sans-serif;
}
.cfn-btn:hover { filter: brightness(1.08); }

/* ══ Animation de déblocage de badge ═════════════════════════════════════ */
#career-badge-pop {
  position: fixed; inset: 0; z-index: 100080; display: flex;
  align-items: flex-start; justify-content: center; padding-top: 9vh; pointer-events: none;
  opacity: 0; transition: opacity .3s ease; font-family: Inter, system-ui, sans-serif;
}
#career-badge-pop.cbp-show { opacity: 1; }
.cbp-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 34px; border-radius: 22px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(245,200,66,.16), rgba(17,24,43,.96) 60%);
  border: 1px solid rgba(245,200,66,.4);
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 60px rgba(245,200,66,.18);
  transform: scale(.6); opacity: 0;
}
#career-badge-pop.cbp-show .cbp-card { animation: cbpCard .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes cbpCard { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

.cbp-medal { position: relative; width: 96px; height: 96px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.cbp-emoji {
  position: relative; z-index: 2; width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 40px;
  background: radial-gradient(circle at 50% 35%, #fff3cf, #f5c842 55%, #d99a1c);
  box-shadow: 0 6px 18px rgba(217,154,28,.5), inset 0 2px 6px rgba(255,255,255,.6);
}
#career-badge-pop.cbp-show .cbp-emoji { animation: cbpMedal .7s cubic-bezier(.34,1.56,.64,1) both .08s; }
@keyframes cbpMedal { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.18) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
/* Rayons tournants derrière la médaille */
.cbp-rays {
  position: absolute; inset: -14px; z-index: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(245,200,66,.5), transparent 22deg, rgba(245,200,66,.5) 45deg, transparent 67deg, rgba(245,200,66,.5) 90deg, transparent 112deg, rgba(245,200,66,.5) 135deg, transparent 157deg, rgba(245,200,66,.5) 180deg, transparent 202deg, rgba(245,200,66,.5) 225deg, transparent 247deg, rgba(245,200,66,.5) 270deg, transparent 292deg, rgba(245,200,66,.5) 315deg, transparent 337deg);
  -webkit-mask: radial-gradient(circle, transparent 36px, #000 38px); mask: radial-gradient(circle, transparent 36px, #000 38px);
  opacity: 0;
}
#career-badge-pop.cbp-show .cbp-rays { animation: cbpRaysIn .4s ease both .1s, cbpRaysSpin 9s linear infinite .1s; }
@keyframes cbpRaysIn { from { opacity: 0; } to { opacity: .9; } }
@keyframes cbpRaysSpin { to { transform: rotate(360deg); } }
/* Étincelles qui jaillissent */
.cbp-spark {
  position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: #ffe08a; box-shadow: 0 0 8px #f5c842; opacity: 0;
}
#career-badge-pop.cbp-show .cbp-spark { animation: cbpSpark .7s ease-out both .12s; }
@keyframes cbpSpark {
  0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.2); opacity: 0; }
}

.cbp-kicker { font: 800 11px Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #f5c842; margin-bottom: 5px; }
.cbp-name { font: 900 22px Inter, system-ui, sans-serif; color: #f1f5fb; letter-spacing: -.01em; }
.cbp-xp { margin-top: 8px; font: 800 12px Inter, system-ui, sans-serif; color: #06121e; background: #22c55e; padding: 4px 12px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  #career-badge-pop.cbp-show .cbp-card,
  #career-badge-pop.cbp-show .cbp-emoji,
  #career-badge-pop.cbp-show .cbp-rays,
  #career-badge-pop.cbp-show .cbp-spark { animation: none; }
  .cbp-card { transform: scale(1); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — éviter le « trop zoomé » / contenu rogné sur écrans portables
   et avec la mise à l'échelle Windows (125–150 %), qui réduisent la hauteur
   CSS utile. Ce bloc ne concerne QUE le mode Carrière : ce fichier n'est
   chargé que sur /play/career/… → aucun impact sur le Sandbox ni la Salle.
   ══════════════════════════════════════════════════════════════════════════ */

/* La scène narrative est centrée verticalement par défaut : dès que la hauteur
   se réduit, ce centrage rogne le haut (badge d'arc) et le bas (quêtes). On
   l'ancre alors en haut — le scroll interne (#career-narrative) prend le relais. */
@media (max-height: 860px) {
  #career-narrative { align-items: flex-start; }
}

/* Écrans courts : compactage des paddings, de l'avatar et de la typographie
   pour que toute la scène tienne sans rognage. */
@media (max-height: 760px) {
  #career-narrative { padding: 52px 24px 22px; }
  .cna-stage { gap: 20px; }
  .cna-dialogue { padding: 20px 22px; gap: 16px; border-radius: 18px; }
  .cna-guide-avatar { width: 52px; height: 52px; font-size: 28px; border-radius: 15px; }
  .cna-guide-title { font-size: 21px; line-height: 1.2; margin-bottom: 7px; }
  .cna-guide-text { font: 400 15px/1.6 Inter, system-ui, sans-serif; }
  .cna-hud { padding: 11px 13px; }
  .cna-tip { padding: 11px 13px; }
  .cna-choice { padding: 13px 15px; }
}

/* Largeurs intermédiaires (portables 13–14") : on resserre le rail droit pour
   laisser respirer la scène de dialogue. Borne basse à 881px pour ne pas
   écraser le passage en 1 colonne (≤ 880px, défini plus haut). */
@media (min-width: 881px) and (max-width: 1200px) {
  .cna-stage { grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; }
}

/* Splash d'intro / d'arc : titres pilotés par la HAUTEUR pour ne pas saturer
   l'écran sur les petits portables (sinon clamp en vw → trop gros). */
@media (max-height: 720px) {
  .cin-title { font-size: clamp(40px, 9vh, 72px); }
  .cas-name  { font-size: clamp(34px, 8vh, 64px); }
}

/* ══ Fiscalité : carte immobilier + état vide ════════════════════════════ */
.cfx-card-orange { border-left-color: #e0853a; }
.cfx-empty { font: 400 12px/1.55 Inter, system-ui, sans-serif; color: #94a3b8; padding: 2px 0; }

/* ══ Avis d'imposition (conséquence : débit du compte) ═══════════════════ */
#career-tax-bill {
  position: fixed; inset: 0; z-index: 100020; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,16,.82); backdrop-filter: blur(7px); font-family: Inter, system-ui, sans-serif;
}
.ctb-card {
  width: 100%; max-width: 430px; text-align: center;
  background: #11182b; border: 1px solid rgba(245,158,11,.4); border-radius: 18px;
  padding: 26px 26px; box-shadow: 0 24px 64px rgba(0,0,0,.6); animation: cleIn .3s ease;
}
.ctb-emoji { font-size: 40px; margin-bottom: 6px; }
.ctb-kicker { font: 800 11px Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #f59e0b; margin-bottom: 4px; }
.ctb-title { font: 800 19px Inter, system-ui, sans-serif; color: #f1f5fb; margin-bottom: 14px; }
.ctb-rows { display: flex; flex-direction: column; gap: 2px; text-align: left; margin-bottom: 4px; }
.ctb-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; font: 500 13px Inter, system-ui, sans-serif; color: #cbd5e1; border-bottom: 1px solid rgba(255,255,255,.05); }
.ctb-row span:last-child { font-weight: 800; }
.ctb-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0 4px; font: 800 14px Inter, system-ui, sans-serif; color: #f1f5fb; }
.ctb-total b { color: #ef4444; font-size: 18px; }
.ctb-nudge { margin: 12px 0 4px; padding: 11px 13px; text-align: left; font: 400 12px/1.55 Inter, system-ui, sans-serif; color: #cbd5e1; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.22); border-radius: 10px; }
.ctb-btn {
  width: 100%; margin-top: 16px; padding: 13px; border: none; border-radius: 12px; cursor: pointer;
  background: #f59e0b; color: #06121e; font: 800 14px Inter, system-ui, sans-serif;
  transition: filter .15s, transform .12s;
}
.ctb-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ══ Ouverture de compte PEA / CTO (sésame du marché) ════════════════════ */
#career-account-overlay {
  position: fixed; inset: 0; z-index: 100010; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,16,.82); backdrop-filter: blur(7px); font-family: Inter, system-ui, sans-serif;
}
.cac-modal {
  width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto;
  background: #0e1524; border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
}
.cac-head {
  display: flex; align-items: center; gap: 14px; padding: 20px 22px;
  background: linear-gradient(135deg, rgba(108,140,255,.20), transparent 70%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cac-head-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; font-size: 22px; display: flex; align-items: center; justify-content: center; background: rgba(108,140,255,.16); border: 1px solid rgba(108,140,255,.4); }
.cac-head-txt { flex: 1; min-width: 0; }
.cac-title { font: 800 18px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cac-sub { font: 400 12px/1.5 Inter, system-ui, sans-serif; color: #94a3b8; margin-top: 3px; }
.cac-close { background: none; border: none; color: #94a3b8; font-size: 24px; cursor: pointer; line-height: 1; }
.cac-close:hover { color: #f1f5fb; }
.cac-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; }
@media (max-width: 560px) { .cac-cards { grid-template-columns: 1fr; } }
.cac-card { border: 1.5px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; background: #11182b; }
.cac-pea { border-top: 3px solid #4eca7f; }
.cac-cto { border-top: 3px solid #5b9bd5; }
.cac-card.focus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.cac-h { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.cac-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; font-size: 20px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); }
.cac-name { font: 900 18px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cac-tag { font: 500 11px Inter, system-ui, sans-serif; color: #94a3b8; }
.cac-open { margin-left: auto; font: 800 12px Inter, system-ui, sans-serif; color: #22c55e; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); border-radius: 999px; padding: 4px 10px; }
.cac-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.cac-list li { font: 400 12.5px/1.45 Inter, system-ui, sans-serif; color: #cbd5e1; }
.cac-list li b { color: #f1f5fb; font-weight: 700; }
.cac-note { font: 600 12px Inter, system-ui, sans-serif; color: #94a3b8; padding: 8px 0 2px; }
.cac-btn { width: 100%; border: none; cursor: pointer; padding: 11px 14px; border-radius: 11px; font: 800 13px Inter, system-ui, sans-serif; color: #06121e; transition: filter .15s, transform .12s; }
.cac-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cac-btn-green { background: #4eca7f; }
.cac-btn-blue { background: #5b9bd5; }
.cac-continue { display: block; width: calc(100% - 36px); margin: 0 18px 18px; padding: 13px; border: none; border-radius: 12px; cursor: pointer; background: var(--career-accent); color: #06101e; font: 800 14px Inter, system-ui, sans-serif; transition: filter .15s, transform .12s; }
.cac-continue:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cac-hint { text-align: center; font: 400 12px/1.5 Inter, system-ui, sans-serif; color: #64748b; padding: 0 18px 18px; }

/* ══ P0 — Intro : prénom, reprise de partie ═════════════════════════════ */
.cin-actions { display: flex; flex-direction: column; gap: 11px; align-items: center; }
.cin-btn-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.18); color: #cbd5e1; }
.cin-btn-ghost:hover { border-color: #f1f5fb; color: #f1f5fb; filter: none; }
.cin-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.cin-input {
  display: block; width: min(320px, 80vw); margin: 0 auto 18px; padding: 13px 16px;
  border-radius: 12px; border: 1.5px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); color: #f1f5fb;
  font: 600 16px Inter, system-ui, sans-serif; text-align: center; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.cin-input:focus { border-color: var(--career-accent, #ca8a30); box-shadow: 0 0 0 3px rgba(202,138,48,.15); }
.cin-input::placeholder { color: #64748b; font-weight: 400; }

/* ══ P0 — Écran d'ellipse « X années plus tard » ════════════════════════ */
#career-ellipse {
  position: fixed; inset: 0; z-index: 100040; display: none;
  align-items: center; justify-content: center; padding: 24px; text-align: center;
  background: radial-gradient(900px 540px at 50% 30%, rgba(108,140,255,.12), transparent), #05070c;
  font-family: Inter, system-ui, sans-serif;
}
#career-ellipse.cep-in .cep-inner { animation: cep-rise .55s cubic-bezier(.2,.9,.3,1) both; }
@keyframes cep-rise { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
.cep-inner { width: 100%; max-width: 520px; }
.cep-clock { font-size: 54px; margin-bottom: 14px; animation: cep-tick 2.2s ease-in-out infinite; }
@keyframes cep-tick { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.cep-kicker { font: 700 12px Inter; letter-spacing: .16em; text-transform: uppercase; color: var(--career-accent, #ca8a30); margin-bottom: 10px; }
.cep-title { font: 900 clamp(34px, 7vw, 54px)/1 Inter; letter-spacing: -.03em; color: #f1f5fb; margin-bottom: 12px; }
.cep-sub { font: 400 14px/1.65 Inter; color: #94a3b8; max-width: 420px; margin: 0 auto 16px; }
.cep-now { font: 700 13px Inter; color: #cbd5e1; margin-bottom: 18px; }
.cep-stats {
  display: flex; flex-direction: column; gap: 8px; max-width: 380px; margin: 0 auto 22px;
  background: #11182b; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 14px 16px;
}
.cep-stats > div { display: flex; justify-content: space-between; align-items: baseline; }
.cep-stats span { font: 500 12.5px Inter; color: #94a3b8; }
.cep-stats b { font: 800 14px Inter; color: #f1f5fb; }
.cep-btn {
  border: none; cursor: pointer; padding: 15px 38px; border-radius: 13px;
  background: var(--career-accent, #ca8a30); color: #fff; font: 800 15px Inter; letter-spacing: .02em;
  transition: filter .15s, transform .12s;
}
.cep-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ══ M4 — Mon cap ═══════════════════════════════════════════════════════ */
.cna-cap-goal { font: 800 13px Inter, system-ui, sans-serif; color: var(--career-accent, #ca8a30); margin-bottom: 8px; }
.cna-cap-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cna-cap-row span { font: 500 12px Inter, system-ui, sans-serif; color: #94a3b8; }
.cna-cap-row b { font: 900 16px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cna-cap-track { height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 7px; }
.cna-cap-fill { height: 100%; border-radius: 99px; background: var(--career-accent, #ca8a30); transition: width .5s ease; }
.cna-cap-remain { font: 700 11.5px Inter, system-ui, sans-serif; color: #cbd5e1; margin-bottom: 3px; }
.cna-cap-hint { font: 400 10.5px Inter, system-ui, sans-serif; color: #64748b; }

/* ══ M3 — Piliers du score ══════════════════════════════════════════════ */
.cna-pillars { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.cna-pill { display: flex; align-items: center; gap: 7px; }
.cna-pill-l { flex: 0 0 108px; font: 600 10.5px Inter, system-ui, sans-serif; color: #94a3b8; white-space: nowrap; overflow: hidden; }
.cna-pill-track { flex: 1; height: 5px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.cna-pill-fill { display: block; height: 100%; border-radius: 99px; transition: width .5s ease; }
.cna-pill-v { flex: 0 0 24px; text-align: right; font: 700 10.5px Inter, system-ui, sans-serif; color: #cbd5e1; }

/* ══ M1 — Bandeau découvert / plan BdF ══════════════════════════════════ */
.cna-odalert {
  margin-top: 10px; padding: 8px 10px; border-radius: 10px;
  background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.3);
  font: 700 11.5px/1.45 Inter, system-ui, sans-serif; color: #fca5a5;
}

/* ══ M5 — Mini-bilan de fin de tour ═════════════════════════════════════ */
#career-bilan {
  position: fixed; left: 18px; bottom: 18px; z-index: 99990; width: 290px;
  background: #0d1322; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  padding: 12px 14px; font-family: Inter, system-ui, sans-serif;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .3s, transform .3s;
}
#career-bilan.cbl-show { opacity: 1; transform: none; pointer-events: auto; }
.cbl-head { display: flex; align-items: center; justify-content: space-between; font: 800 12px Inter, system-ui, sans-serif; color: #f1f5fb; margin-bottom: 8px; }
.cbl-x { background: none; border: none; color: #64748b; font-size: 16px; cursor: pointer; line-height: 1; padding: 0 2px; }
.cbl-x:hover { color: #f1f5fb; }
.cbl-row { display: flex; justify-content: space-between; font: 500 12px Inter, system-ui, sans-serif; color: #94a3b8; padding: 2.5px 0; }
.cbl-row b { font-weight: 800; }
.cbl-row b.pos { color: #22c55e; } .cbl-row b.neg { color: #ef4444; }
.cbl-events { margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(255,255,255,.1); font: 400 11px/1.5 Inter, system-ui, sans-serif; color: #94a3b8; }

/* ══ M2 — Finpédia ══════════════════════════════════════════════════════ */
#career-finpedia-overlay {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,16,.82); backdrop-filter: blur(7px); font-family: Inter, system-ui, sans-serif;
}
.cfp-modal { width: 100%; max-width: 720px; max-height: 86vh; display: flex; flex-direction: column; background: #0d1322; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; overflow: hidden; }
.cfp-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cfp-head-ic { font-size: 24px; }
.cfp-head-txt { flex: 1; }
.cfp-title { font: 900 18px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cfp-sub { font: 400 12px Inter, system-ui, sans-serif; color: #94a3b8; margin-top: 2px; }
.cfp-close { background: none; border: none; color: #94a3b8; font-size: 24px; cursor: pointer; line-height: 1; }
.cfp-close:hover { color: #f1f5fb; }
.cfp-body { padding: 16px 18px; overflow-y: auto; }
.cfp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cfp-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px; border-radius: 13px; text-align: left; cursor: pointer;
  background: #11182b; border: 1.5px solid rgba(255,255,255,.09);
  transition: border-color .15s, transform .12s;
}
.cfp-card:hover { border-color: var(--career-accent, #ca8a30); transform: translateY(-2px); }
.cfp-card.locked { cursor: default; opacity: .45; }
.cfp-card.locked:hover { border-color: rgba(255,255,255,.09); transform: none; }
.cfp-card.unread { border-color: rgba(202,138,48,.5); }
.cfp-card-emoji { font-size: 20px; }
.cfp-card-title { font: 700 12.5px/1.3 Inter, system-ui, sans-serif; color: #f1f5fb; }
.cfp-card-state { font: 600 10.5px Inter, system-ui, sans-serif; color: #94a3b8; }
.cfp-card.unread .cfp-card-state { color: var(--career-accent, #ca8a30); }
.cfp-back { background: none; border: none; color: #94a3b8; font: 700 12.5px Inter, system-ui, sans-serif; cursor: pointer; padding: 0 0 12px; }
.cfp-back:hover { color: #f1f5fb; }
.cfp-fiche { background: #11182b; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; padding: 20px; }
.cfp-fiche-emoji { font-size: 34px; margin-bottom: 8px; }
.cfp-fiche-title { font: 900 20px Inter, system-ui, sans-serif; color: #f1f5fb; margin-bottom: 10px; }
.cfp-fiche-text { font: 400 13.5px/1.7 Inter, system-ui, sans-serif; color: #cbd5e1; margin: 0 0 14px; }
.cfp-fiche-retenir {
  padding: 11px 13px; border-radius: 11px; font: 600 12.5px/1.55 Inter, system-ui, sans-serif; color: #f1f5fb;
  background: rgba(202,138,48,.12); border: 1px solid rgba(202,138,48,.35);
}
.cfp-fiche-read { margin-top: 10px; font: 700 12px Inter, system-ui, sans-serif; color: #22c55e; }

/* ══ M13 — Historique ═══════════════════════════════════════════════════ */
#career-histo-overlay {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,16,.82); backdrop-filter: blur(7px); font-family: Inter, system-ui, sans-serif;
}
.chi-modal { width: 100%; max-width: 660px; max-height: 86vh; display: flex; flex-direction: column; background: #0d1322; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; overflow: hidden; }
.chi-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.chi-head-ic { font-size: 24px; }
.chi-head-txt { flex: 1; }
.chi-title { font: 900 18px Inter, system-ui, sans-serif; color: #f1f5fb; }
.chi-sub { font: 400 12px Inter, system-ui, sans-serif; color: #94a3b8; margin-top: 2px; }
.chi-close { background: none; border: none; color: #94a3b8; font-size: 24px; cursor: pointer; line-height: 1; }
.chi-close:hover { color: #f1f5fb; }
.chi-body { padding: 10px 18px 16px; overflow-y: auto; }
.chi-row {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.chi-when { flex: 0 0 86px; font: 700 11px Inter, system-ui, sans-serif; color: #cbd5e1; display: flex; flex-direction: column; }
.chi-when em { font: 400 10px Inter, system-ui, sans-serif; color: #64748b; font-style: normal; }
.chi-arc { flex: 0 0 auto; font: 700 10px Inter, system-ui, sans-serif; color: var(--career-accent, #ca8a30); background: rgba(202,138,48,.1); border: 1px solid rgba(202,138,48,.25); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.chi-txt { flex: 1; font: 500 12.5px/1.45 Inter, system-ui, sans-serif; color: #f1f5fb; }
.chi-imp { font: 800 12px Inter, system-ui, sans-serif; white-space: nowrap; }
.chi-imp.pos { color: #22c55e; } .chi-imp.neg { color: #ef4444; }
.chi-empty { padding: 30px 0; text-align: center; font: 400 13px Inter, system-ui, sans-serif; color: #64748b; }
@media (max-width: 560px) { .chi-arc { display: none; } }

/* ══ Crédit immobilier (simulation) — modale csc (ex-S8) ════════════════ */
#career-loansim-overlay {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,16,.82); backdrop-filter: blur(7px); font-family: Inter, system-ui, sans-serif;
}
.csc-modal { width: 100%; max-width: 520px; max-height: 86vh; display: flex; flex-direction: column; background: #0d1322; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; overflow: hidden; }
.csc-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.csc-head-ic { font-size: 24px; }
.csc-head-txt { flex: 1; }
.csc-title { font: 900 18px Inter, system-ui, sans-serif; color: #f1f5fb; }
.csc-sub { font: 400 12px/1.5 Inter, system-ui, sans-serif; color: #94a3b8; margin-top: 2px; }
.csc-close { background: none; border: none; color: #94a3b8; font-size: 24px; cursor: pointer; line-height: 1; }
.csc-close:hover { color: #f1f5fb; }
.csc-body { padding: 16px 18px; overflow-y: auto; }
.csc-holding { background: #11182b; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; padding: 13px 15px; margin-bottom: 14px; }
.csc-row { display: flex; justify-content: space-between; padding: 3px 0; font: 500 12.5px Inter, system-ui, sans-serif; color: #94a3b8; }
.csc-row b { font-weight: 800; color: #f1f5fb; }
.csc-note { font: 400 11.5px/1.55 Inter, system-ui, sans-serif; color: #64748b; }

/* ══ S9 — Rapport mensuel ═══════════════════════════════════════════════ */
#career-rapport-overlay {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,16,.82); backdrop-filter: blur(7px); font-family: Inter, system-ui, sans-serif;
}
.crp-modal { width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; background: #0d1322; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; overflow: hidden; }
.crp-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.crp-head-ic { font-size: 24px; }
.crp-head-txt { flex: 1; }
.crp-title { font: 900 18px Inter, system-ui, sans-serif; color: #f1f5fb; }
.crp-sub { font: 400 12px/1.5 Inter, system-ui, sans-serif; color: #94a3b8; margin-top: 2px; }
.crp-close { background: none; border: none; color: #94a3b8; font-size: 24px; cursor: pointer; line-height: 1; }
.crp-close:hover { color: #f1f5fb; }
.crp-body { padding: 14px 18px 18px; overflow-y: auto; }
.crp-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; margin-bottom: 8px;
  border-radius: 12px; background: #11182b; border: 1px solid rgba(255,255,255,.08);
}
.crp-row.crp-bon { border-left: 3px solid #22c55e; }
.crp-row.crp-moyen { border-left: 3px solid #f59e0b; }
.crp-row.crp-alerte { border-left: 3px solid #ef4444; background: rgba(239,68,68,.06); }
.crp-ic { font-size: 15px; }
.crp-l { flex: 1; font: 600 12.5px Inter, system-ui, sans-serif; color: #f1f5fb; display: flex; flex-direction: column; }
.crp-l em { font: 400 10.5px Inter, system-ui, sans-serif; color: #64748b; font-style: normal; margin-top: 2px; }
.crp-v { font: 900 14px Inter, system-ui, sans-serif; color: #f1f5fb; white-space: nowrap; }
.crp-note { text-align: center; font: 400 11.5px/1.5 Inter, system-ui, sans-serif; color: #64748b; font-style: italic; margin-top: 6px; }

/* ══ M11 — Prologue 2050 ════════════════════════════════════════════════ */
.cin-prologue { position: relative; }
.cin-city {
  position: absolute; inset: -40px -60px; z-index: -1; opacity: .5; pointer-events: none;
  background:
    radial-gradient(2px 2px at 12% 30%, #f1f5fb 40%, transparent 41%),
    radial-gradient(1.6px 1.6px at 28% 55%, #ca8a30 40%, transparent 41%),
    radial-gradient(2px 2px at 43% 25%, #5b9bd5 40%, transparent 41%),
    radial-gradient(1.4px 1.4px at 58% 60%, #f1f5fb 40%, transparent 41%),
    radial-gradient(2px 2px at 71% 35%, #ca8a30 40%, transparent 41%),
    radial-gradient(1.6px 1.6px at 86% 50%, #5b9bd5 40%, transparent 41%),
    radial-gradient(1.4px 1.4px at 20% 75%, #f1f5fb 40%, transparent 41%),
    radial-gradient(2px 2px at 65% 80%, #f59e0b 40%, transparent 41%),
    radial-gradient(1.6px 1.6px at 90% 72%, #f1f5fb 40%, transparent 41%),
    linear-gradient(180deg, transparent 40%, rgba(13,19,34,.9) 100%);
  animation: cin-twinkle 4s ease-in-out infinite alternate;
}
@keyframes cin-twinkle { from { opacity: .35; } to { opacity: .6; } }
.cin-silhouette { font-size: 64px; margin-bottom: 10px; filter: brightness(.25) contrast(1.3); }
.cin-prologue-year { font: 900 clamp(40px, 8vw, 64px)/1 Inter, system-ui, sans-serif; letter-spacing: .12em; color: #f1f5fb; margin-bottom: 16px; text-shadow: 0 0 34px rgba(202,138,48,.35); }
.cin-prologue-txt { font: 400 13.5px/1.7 Inter, system-ui, sans-serif; color: #94a3b8; max-width: 460px; margin: 0 auto 18px; }
.cin-prologue-quote {
  font: 500 15px/1.75 Georgia, 'Times New Roman', serif; font-style: italic; color: #e2e8f0;
  max-width: 480px; margin: 0 auto 22px; padding: 16px 20px;
  border-left: 3px solid var(--career-accent, #ca8a30);
  background: rgba(255,255,255,.03); border-radius: 0 14px 14px 0; text-align: left;
}
.cin-prologue-quote b { color: #f1f5fb; }

/* ══ M7/M9 — Modales Famille & Développement ════════════════════════════ */
#career-famille-overlay, #career-dev-overlay, #career-retraite-overlay {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,16,.82); backdrop-filter: blur(7px); font-family: Inter, system-ui, sans-serif;
}
.cfa-modal, .crt-modal { width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; background: #0d1322; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; overflow: hidden; }
.cfa-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.cfa-head-ic { font-size: 24px; }
.cfa-head-txt { flex: 1; }
.cfa-title { font: 900 18px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cfa-sub { font: 400 12px/1.5 Inter, system-ui, sans-serif; color: #94a3b8; margin-top: 2px; }
.cfa-close { background: none; border: none; color: #94a3b8; font-size: 24px; cursor: pointer; line-height: 1; }
.cfa-close:hover { color: #f1f5fb; }
.cfa-body { padding: 14px 18px 18px; overflow-y: auto; }
.cfa-card { background: #11182b; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.cfa-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 800 13.5px Inter, system-ui, sans-serif; color: #f1f5fb; margin-bottom: 7px; }
.cfa-price { font: 700 11px Inter, system-ui, sans-serif; color: var(--career-accent, #ca8a30); background: rgba(202,138,48,.1); border: 1px solid rgba(202,138,48,.3); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.cfa-p { font: 400 12px/1.6 Inter, system-ui, sans-serif; color: #94a3b8; margin: 0 0 10px; }
.cfa-val { font: 600 12.5px Inter, system-ui, sans-serif; color: #cbd5e1; margin-bottom: 9px; }
.cfa-val b { color: #22c55e; font-weight: 900; }
.cfa-on { font: 700 12.5px Inter, system-ui, sans-serif; color: #22c55e; padding: 6px 0 2px; }
.cfa-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cfa-amt {
  flex: 1; min-width: 90px; padding: 9px 8px; border: 1.5px solid rgba(255,255,255,.14); border-radius: 10px;
  background: transparent; color: #f1f5fb; font: 700 12px Inter, system-ui, sans-serif; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cfa-amt:hover { border-color: var(--career-accent, #ca8a30); background: rgba(202,138,48,.08); }
.cfa-act {
  padding: 9px 16px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--career-accent, #ca8a30); color: #fff; font: 800 12px Inter, system-ui, sans-serif;
  transition: filter .15s;
}
.cfa-act:hover { filter: brightness(1.1); }
.cfa-act.stop { background: rgba(239,68,68,.85); }
.cdv-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed rgba(255,255,255,.08); }
.cdv-row:first-child { border-top: none; }
.cdv-row.on { background: rgba(34,197,94,.05); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.cdv-row-txt { flex: 1; font: 500 12px/1.5 Inter, system-ui, sans-serif; color: #cbd5e1; }
.cdv-row-txt b { color: #f1f5fb; }
.cdv-row-txt em { display: block; font: 400 10.5px Inter, system-ui, sans-serif; color: #64748b; font-style: normal; }
.cdv-gain { color: #22c55e; font-weight: 800; }
.cdv-loan { padding: 9px 10px; border: 1px dashed rgba(255,255,255,.2); border-radius: 10px; background: transparent; color: #64748b; font: 600 11px Inter, system-ui, sans-serif; cursor: pointer; }
.cdv-loan:hover { color: #f1f5fb; border-color: var(--career-accent, #ca8a30); }
.cdv-note { margin-top: 8px; font: 600 11.5px Inter, system-ui, sans-serif; color: #94a3b8; }

/* ══ M10 — Simulateur retraite ══════════════════════════════════════════ */
.crt-body { padding: 16px 18px; overflow-y: auto; }
.crt-slider { margin-bottom: 14px; }
.crt-slider label { display: block; font: 600 12.5px Inter, system-ui, sans-serif; color: #cbd5e1; margin-bottom: 6px; }
.crt-slider label b { color: var(--career-accent, #ca8a30); }
.crt-slider input[type=range] { width: 100%; accent-color: var(--career-accent, #ca8a30); }
.crt-result { background: #11182b; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 13px 15px; margin-top: 6px; }
.crt-r-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3.5px 0; font: 500 12.5px Inter, system-ui, sans-serif; color: #94a3b8; }
.crt-r-row b { font-weight: 900; color: #f1f5fb; }
.crt-r-row b em { font: 400 10.5px Inter, system-ui, sans-serif; color: #64748b; font-style: normal; }
.crt-verdict { margin-top: 9px; padding-top: 9px; border-top: 1px dashed rgba(255,255,255,.1); font: 700 12.5px/1.55 Inter, system-ui, sans-serif; color: #f1f5fb; }

/* ══ M12 — Épilogue Horizon 2050 ════════════════════════════════════════ */
#career-epilogue {
  position: fixed; inset: 0; z-index: 100060; display: none;
  align-items: center; justify-content: center; padding: 24px; text-align: center;
  background: radial-gradient(1000px 620px at 50% 0%, rgba(108,140,255,.13), transparent), #05070c;
  font-family: Inter, system-ui, sans-serif; overflow-y: auto;
}
.cep-ep-wrap { width: 100%; max-width: 620px; margin: auto; }
.cep-ep { animation: cep-rise .5s cubic-bezier(.2,.9,.3,1) both; }
.cep-ep-kicker { font: 700 11.5px Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--career-accent, #ca8a30); margin-bottom: 12px; }
.cep-ep-h { font: 900 clamp(24px, 5vw, 34px)/1.15 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #f1f5fb; margin-bottom: 12px; }
.cep-ep-p { font: 400 13.5px/1.7 Inter, system-ui, sans-serif; color: #94a3b8; max-width: 520px; margin: 0 auto 18px; }
.cep-ep-note { font: 400 11.5px/1.6 Inter, system-ui, sans-serif; color: #64748b; max-width: 480px; margin: 14px auto 16px; }
.cep2-list { display: flex; flex-direction: column; gap: 7px; max-width: 540px; margin: 0 auto 20px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.cep2-card {
  display: flex; align-items: baseline; gap: 10px; text-align: left;
  background: #0d1322; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; padding: 9px 13px;
}
.cep2-when { flex: 0 0 76px; font: 700 10.5px Inter, system-ui, sans-serif; color: var(--career-accent, #ca8a30); }
.cep2-txt { flex: 1; font: 500 12px/1.5 Inter, system-ui, sans-serif; color: #e2e8f0; }
.cep2-imp { font: 800 11.5px Inter, system-ui, sans-serif; white-space: nowrap; }
.cep2-imp.pos { color: #22c55e; } .cep2-imp.neg { color: #ef4444; }
.cep3-icon { font-size: 52px; margin-bottom: 10px; }
.cep3-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px; max-width: 460px; margin: 0 auto 22px;
}
.cep3-stats > div { background: #0d1322; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.cep3-stats span { font: 500 10.5px Inter, system-ui, sans-serif; color: #64748b; }
.cep3-stats b { font: 900 16px Inter, system-ui, sans-serif; color: #f1f5fb; }
.cep5-list { display: flex; flex-direction: column; gap: 6px; max-width: 540px; margin: 0 auto 8px; max-height: 44vh; overflow-y: auto; padding-right: 4px; text-align: left; }
.cep5-item {
  display: flex; gap: 10px; align-items: baseline; font: 500 12px/1.55 Inter, system-ui, sans-serif; color: #cbd5e1;
  background: #0d1322; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px 12px;
}
.cep5-item.done { border-color: rgba(34,197,94,.3); }
.cep5-item em { color: #22c55e; font-style: normal; font-size: 10.5px; }
.cep5-n { flex: 0 0 22px; font: 800 12px Inter, system-ui, sans-serif; color: var(--career-accent, #ca8a30); text-align: center; }

/* ══ C5 — Sélecteur de difficulté (intro) ═══════════════════════════════ */
.cin-mode { display: flex; gap: 10px; max-width: 480px; margin: 0 auto 20px; }
.cin-mode-btn {
  flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 12px 10px; border-radius: 13px; cursor: pointer; text-align: center;
  background: #11182b; border: 1.5px solid rgba(255,255,255,.1);
  color: #f1f5fb; font: 800 13.5px Inter, system-ui, sans-serif;
  transition: border-color .15s, background .15s;
}
.cin-mode-btn span { font: 400 10.5px/1.4 Inter, system-ui, sans-serif; color: #94a3b8; }
.cin-mode-btn.active { border-color: var(--career-accent, #ca8a30); background: rgba(202,138,48,.09); }
.cin-mode-btn:hover { border-color: rgba(255,255,255,.3); }

/* ══ C6 — Cartes profils New Game+ ══════════════════════════════════════ */
.cin-goal-desc { display: block; font: 400 11.5px/1.5 Inter, system-ui, sans-serif; color: #94a3b8; margin-top: 4px; }

/* ══ C5 — Pulse « show don't tell » (mode Découverte, 30 s d'inactivité) ═ */
.career-pulse { animation: career-pulse 1.1s ease-in-out 5; border-radius: 10px; }
@keyframes career-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(202,138,48,0); }
  50% { box-shadow: 0 0 0 5px rgba(202,138,48,.35); }
}

/* == C5 - Reformulation du Guide (90 s) == */
.cna-rehint {
  margin-top: 10px; padding: 9px 13px; border-radius: 11px;
  font: italic 500 12.5px/1.6 Georgia, serif; color: #cbd5e1;
  background: rgba(202,138,48,.07); border-left: 3px solid var(--career-accent, #ca8a30);
  animation: cep-rise .4s ease both;
}

/* == ex-S8 - Verdict de la simulation de credit == */
.cls-verdict {
  margin: 4px 0 10px; padding: 12px 14px; border-radius: 12px;
  font: 500 12.5px/1.6 Inter, system-ui, sans-serif; color: #e2e8f0;
}
.cls-verdict.ok { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.3); }
.cls-verdict.ko { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); }
.cls-verdict b { color: #f1f5fb; }

/* ══ Fiscalité V2 : boutons compacts, carte verrouillée, actions ═════════ */
.cfx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cfx-btn-sm {
  border: 1px solid rgba(255,255,255,.16); border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.05); color: #cbd5e1; padding: 6px 11px;
  font: 700 11.5px Inter, system-ui, sans-serif; transition: border-color .15s, color .15s, background .15s;
}
.cfx-btn-sm:hover { border-color: #f1f5fb; color: #f1f5fb; }
.cfx-btn-sm.active { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.5); color: #f59e0b; }
.cfx-locked { opacity: .62; }
.cfx-locked .cfx-card-h { filter: grayscale(.4); }

/* ══ Déclaration de mai (avant l'avis d'imposition) ══════════════════════ */
#career-declaration {
  position: fixed; inset: 0; z-index: 100020; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,7,16,.82); backdrop-filter: blur(7px); font-family: Inter, system-ui, sans-serif;
}
#career-declaration .ctb-card { max-width: 470px; max-height: 92vh; overflow-y: auto; }
.cdx-rows { display: flex; flex-direction: column; gap: 6px; text-align: left; margin-bottom: 4px; }
.cdx-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.cdx-ic { font-size: 17px; flex-shrink: 0; line-height: 1.3; }
.cdx-txt { flex: 1; min-width: 0; font: 500 13px/1.45 Inter, system-ui, sans-serif; color: #cbd5e1; }
.cdx-txt b { color: #f1f5fb; }
.cdx-txt em { display: block; font: 400 11px/1.4 Inter, system-ui, sans-serif; color: #64748b; font-style: normal; margin-top: 2px; }
.cdx-right { font: 800 13px Inter, system-ui, sans-serif; color: #f1f5fb; white-space: nowrap; }
.cdx-choice { padding: 11px 13px; margin: 6px 0; text-align: left; background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.28); border-radius: 11px; }
.cdx-choice-q { font: 500 12.5px/1.5 Inter, system-ui, sans-serif; color: #cbd5e1; margin-bottom: 9px; }
.cdx-choice-q b { color: #f1f5fb; }
.cdx-opt { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font: 400 12px/1.5 Inter, system-ui, sans-serif; color: #cbd5e1; }
.cdx-opt:hover { background: rgba(255,255,255,.05); }
.cdx-opt b { color: #f1f5fb; }
.cdx-opt input { margin-top: 3px; accent-color: #f59e0b; flex-shrink: 0; }