/* Login + dashboard privé — base `rem` un peu plus grande pour la lisibilité */
html:has(body.solide-login),
html:has(body.solide-app-dashboard),
html:has(body.solide-app-objectifs-vie),
html:has(body.solide-app-communaute),
html:has(body.solide-app-forum),
html:has(body.solide-app-modules) {
  font-size: 107.5%;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

/* Inter chargée via solide-inter (main.css) ; ui-sans-serif évite le repli « sans-serif » → Arial sur Windows */
body.solide-login,
body.solide-app-dashboard,
body.solide-app-objectifs-vie,
body.solide-app-communaute,
body.solide-app-forum,
body.solide-app-modules {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

body.solide-login input,
body.solide-login textarea,
body.solide-login select,
body.solide-login button,
body.solide-app-dashboard input,
body.solide-app-dashboard textarea,
body.solide-app-dashboard select,
body.solide-app-dashboard button,
body.solide-app-objectifs-vie input,
body.solide-app-objectifs-vie textarea,
body.solide-app-objectifs-vie select,
body.solide-app-objectifs-vie button,
body.solide-app-communaute input,
body.solide-app-communaute textarea,
body.solide-app-communaute select,
body.solide-app-communaute button,
body.solide-app-forum input,
body.solide-app-forum textarea,
body.solide-app-forum select,
body.solide-app-forum button,
body.solide-app-modules input,
body.solide-app-modules textarea,
body.solide-app-modules select,
body.solide-app-modules button {
  font-family: inherit;
}

.solide-login .nav__links,
.solide-app-dashboard .nav__links,
.solide-app-objectifs-vie .nav__links,
.solide-app-communaute .nav__links,
.solide-app-forum .nav__links,
.solide-app-modules .nav__links {
  display: none;
}

.app-auth {
  padding: clamp(52px, 8vw, 96px) 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-x: clip;
}

.app-auth__card {
  width: min(520px, 100%);
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  padding: clamp(24px, 4vw, 34px);
}

.app-auth__eyebrow {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.app-auth__title {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  color: var(--white);
  letter-spacing: -0.02em;
}

.app-auth__lead {
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(244, 246, 250, 0.75);
}

.app-auth__error {
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 102, 120, 0.5);
  background: rgba(255, 102, 120, 0.14);
  padding: 10px 12px;
  font-size: 0.82rem;
  color: #ffc9d0;
}

.app-auth__form {
  display: grid;
  gap: 12px;
}

.app-auth__field {
  display: grid;
  gap: 6px;
}

.app-auth__field span {
  font-size: 0.74rem;
  color: rgba(244, 246, 250, 0.78);
}

.app-auth__field input {
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 15, 29, 0.72);
  color: var(--white);
  padding: 0 12px;
}

.app-auth__field input:focus {
  outline: none;
  border-color: rgba(224, 196, 132, 0.46);
  box-shadow: 0 0 0 3px rgba(224, 196, 132, 0.15);
}

.app-auth__submit {
  justify-content: center;
}

.app-auth__tabs {
  display: flex;
  gap: 0;
  margin: 0 0 18px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.app-auth__tab {
  flex: 1;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(244, 246, 250, 0.62);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.app-auth__tab:hover {
  color: rgba(244, 246, 250, 0.92);
}

.app-auth__tab--on {
  background: rgba(224, 196, 132, 0.16);
  color: var(--gold);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.app-auth__tab:focus-visible {
  outline: 2px solid rgba(224, 196, 132, 0.55);
  outline-offset: 2px;
}

.app-auth__google {
  display: grid;
  gap: 10px;
  margin-bottom: 4px;
}

.app-auth__google--off {
  margin-bottom: 0;
}

.app-auth__google-unavail {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(244, 246, 250, 0.62);
}

.app-auth__google-btn {
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.app-auth__google-btn iframe {
  color-scheme: light;
}

.app-auth__google-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.55);
}

.app-auth__error--google {
  margin-bottom: 0;
}

.app-auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 16px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.42);
}

.app-auth__divider::before,
.app-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.app-auth__toggle-row {
  margin: 14px 0 0;
  text-align: center;
}

.app-auth__toggle {
  background: none;
  border: 0;
  padding: 6px 4px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.app-auth__toggle:hover {
  color: #f0e6c8;
}

.app-auth__register-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
}

.app-auth__terms {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.72);
}

.app-auth__terms input {
  margin-top: 3px;
  flex-shrink: 0;
}

.app-auth__terms a {
  color: var(--gold);
}

/* Dashboard — hero + mosaïque */
.app-auth--dashboard {
  position: relative;
  padding-top: clamp(28px, 4vw, 52px);
  overflow: hidden;
}

@media (max-width: 640px) {
  /* Nav fixe (~60px) + marge : le dashboard réduisait trop le padding haut */
  .app-auth {
    padding-top: clamp(80px, 14vw, 112px);
  }

  .app-auth--dashboard {
    padding-top: clamp(80px, 14vw, 112px);
  }
}

.app-dash-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-dash-shell__mesh {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 100%;
  background: none;
  pointer-events: none;
}

.app-dash-shell__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  opacity: 0.45;
  pointer-events: none;
}

.app-dash-shell__orb--a {
  width: min(420px, 55vw);
  height: min(420px, 55vw);
  top: -80px;
  right: -100px;
  background: rgba(107, 201, 212, 0.35);
}

.app-dash-shell__orb--b {
  width: min(360px, 48vw);
  height: min(360px, 48vw);
  bottom: 10%;
  left: -120px;
  background: rgba(224, 196, 132, 0.22);
}

.app-dash__cta.btn-primary {
  margin-top: auto;
  align-self: center;
  padding: 9px 22px;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  background: #fff;
  color: #0a1020;
  border: 1px solid rgba(10, 16, 32, 0.08);
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

a.app-dash__card:hover .app-dash__cta.btn-primary {
  background: #f4f5f7;
  color: #0a1020;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

a.app-dash__card:focus-visible .app-dash__cta.btn-primary {
  background: #f4f5f7;
  color: #0a1020;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.container--app-dash {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  padding-top: 30px;
}

.app-dash-hero {
  position: relative;
  margin-bottom: clamp(18px, 3vw, 28px);
  padding: clamp(14px, 2.5vw, 20px) clamp(16px, 2.5vw, 24px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 14, 26, 0.5);
  box-shadow: none;
}

.app-dash-hero--minimal {
  backdrop-filter: blur(6px);
}

.app-dash-hero__row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 1;
}

.app-dash-hero__main {
  min-width: 0;
}

.app-dash-hero__crumb {
  margin: 0 0 4px;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(244, 246, 250, 0.42);
}

.app-dash-hero__title {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: rgba(248, 250, 255, 0.9);
}

.app-dash-hero__logout-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: rgba(244, 246, 250, 0.48);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.app-dash-hero__logout-icon:hover,
.app-dash-hero__logout-icon:focus-visible {
  color: rgba(244, 246, 250, 0.88);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.app-dash-hero__logout-icon:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.45);
  outline-offset: 2px;
}

.app-dash-hero__logout-icon svg {
  display: block;
}

button.app-dash-hero__logout-icon {
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.app-dash-logout-dialog {
  position: fixed;
  inset: 0;
  width: fit-content;
  min-width: min(300px, 92vw);
  max-width: min(420px, 94vw);
  height: fit-content;
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: linear-gradient(165deg, #121a2c 0%, #0a0f1a 100%);
  color: var(--white);
  padding: 0;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
}

.app-dash-logout-dialog::backdrop {
  background: rgba(4, 8, 16, 0.72);
  backdrop-filter: blur(4px);
}

.app-dash-logout-dialog__inner {
  padding: clamp(20px, 3vw, 24px);
}

.app-dash-logout-dialog__title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 800;
}

.app-dash-logout-dialog__text {
  margin: 0 0 20px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.72);
}

.app-dash-logout-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* Dashboard : métriques sur les cartes mosaïque */
.app-dash__card-metrics {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 2px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.app-dash__card-metrics--no-bar {
  gap: 2px;
}

.app-dash__card-metrics--check .app-dash__card-kpi-row,
.app-dash__card-metrics--forum .app-dash__card-kpi-row,
.app-dash__card-metrics--sim .app-dash__card-kpi-row {
  align-items: center;
}

.app-dash__card-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.35em;
  height: 1.35em;
  margin-right: 6px;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(120, 255, 200, 0.95);
  text-shadow: 0 0 12px rgba(0, 245, 212, 0.35);
}

.app-dash__card-check--discrete {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0;
  font-size: 0.88rem;
  font-weight: 750;
  color: rgba(130, 220, 185, 0.72);
  text-shadow: none;
}

.app-dash__card-metrics--pat-discrete .app-dash__card-kpi-row {
  min-height: 1.2em;
  align-items: center;
}

.app-dash__card-pat-muted {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(226, 232, 240, 0.38);
}

.app-dash__card-metrics--forum-discrete .app-dash__card-kpi-row {
  justify-content: flex-start;
}

.app-dash__card-forum-msg-note {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(226, 232, 240, 0.42);
}

/* Communauté — aperçu messages (dashboard) */
.app-dash__card-metrics--com-preview {
  gap: 6px;
}

.app-dash__com-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  text-align: center;
}

.app-dash__com-preview-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.88rem;
  line-height: 1;
}

.app-dash__com-preview-emoji {
  display: inline-block;
  line-height: 1;
  filter: saturate(1.08);
}

.app-dash__com-preview-count {
  font-size: clamp(1.18rem, 3.2vw, 1.52rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1;
}

.app-dash__com-preview-label {
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.48);
  line-height: 1.15;
}

.app-dash__card-metrics--sim-discrete .app-dash__card-kpi-row {
  justify-content: flex-start;
}

.app-dash__card-metrics--sim-compound {
  gap: 6px;
}

.app-dash__sim-compound-wrap {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.app-dash__card--sim .app-dash__sim-compound-wrap {
  background: rgba(22, 10, 38, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(200, 160, 255, 0.09),
    inset 0 0 0 1px rgba(200, 150, 255, 0.06);
}

.app-dash__sim-compound {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.app-dash__card-sim-note {
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.4);
}

.app-dash__card-metrics--budget-cf .app-dash__card-kpi {
  font-size: clamp(0.95rem, 2vw, 1.12rem);
}

/* Budget — aperçu type « calcul simplifié » sur la carte dashboard */
.app-dash__card-metrics--budget-snap {
  gap: 5px;
}

.app-dash__budget-snap-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 5px;
  font-variant-numeric: tabular-nums;
  font-size: 0.56rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: rgba(226, 232, 240, 0.42);
  line-height: 1.15;
}

.app-dash__budget-snap-eq__v {
  color: rgba(244, 246, 250, 0.9);
  font-weight: 780;
}

.app-dash__budget-snap-eq__v--cf {
  color: rgba(115, 235, 220, 0.98);
  text-shadow: 0 0 10px rgba(0, 210, 195, 0.22);
}

.app-dash__budget-snap-op {
  opacity: 0.5;
  padding: 0 1px;
  font-weight: 700;
}

.app-dash__budget-snap-bar {
  display: flex;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-dash__budget-snap-bar__exp {
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: 2px;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(235, 130, 95, 0.95), rgba(195, 85, 65, 0.88));
}

.app-dash__budget-snap-bar__cf {
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: 2px;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(80, 210, 200, 0.92), rgba(130, 230, 195, 0.78));
}

.app-dash__budget-snap-pct {
  margin: 0;
  font-size: 0.56rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: rgba(226, 232, 240, 0.36);
  text-align: center;
  line-height: 1.15;
}

/* Triptyque équation (cartes type « actifs − dettes = net » / budget) */
.app-dash__card-metrics--eq-trip {
  gap: 6px;
}

.app-dash__eq-trip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 5px 6px;
  width: 100%;
  box-sizing: border-box;
}

.app-dash__eq-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 8px 9px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-dash__eq-tile--assets {
  border-color: rgba(88, 130, 210, 0.48);
}

.app-dash__eq-tile--debts {
  border-color: rgba(200, 88, 88, 0.48);
}

.app-dash__eq-tile--net {
  border-color: rgba(88, 185, 125, 0.45);
}

.app-dash__eq-tile--inc {
  border-color: rgba(72, 175, 205, 0.52);
}

.app-dash__eq-tile--exp {
  border-color: rgba(205, 105, 88, 0.5);
}

.app-dash__eq-tile--cf {
  border-color: rgba(95, 200, 155, 0.48);
}

.app-dash__eq-tile--neg {
  border-color: rgba(210, 95, 85, 0.55);
}

.app-dash__eq-tile-ico {
  align-self: center;
  font-size: 1.08rem;
  line-height: 1;
  flex-shrink: 0;
}

.app-dash__eq-tile-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
}

.app-dash__eq-tile-lbl {
  font-size: 0.52rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.38);
  line-height: 1.22;
  word-break: normal;
  overflow-wrap: break-word;
}

.app-dash__eq-tile-val {
  display: block;
  font-size: clamp(0.58rem, 1.35vw, 0.76rem);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: rgba(244, 246, 250, 0.94);
  line-height: 1.15;
}

.app-dash__eq-tile--cf:not(.app-dash__eq-tile--neg) .app-dash__eq-tile-val {
  color: rgba(115, 235, 210, 0.96);
  text-shadow: 0 0 10px rgba(0, 195, 175, 0.18);
}

.app-dash__eq-tile-val--neg {
  color: rgba(255, 175, 155, 0.96);
  text-shadow: 0 0 10px rgba(255, 95, 75, 0.12);
}

.app-dash__eq-op {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 12px;
  font-size: 0.8rem;
  font-weight: 750;
  color: rgba(244, 246, 250, 0.7);
  align-self: center;
}

/* Patrimoine — aperçu type synthèse net sur la carte dashboard */
.app-dash__card-metrics--pat-snap {
  gap: 5px;
}

.app-dash__pat-snap-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}

.app-dash__pat-snap-kicker {
  font-size: 0.52rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.4);
}

.app-dash__pat-snap-net {
  font-size: clamp(0.95rem, 2.4vw, 1.18rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: rgba(130, 220, 238, 0.96);
  text-shadow: 0 0 14px rgba(0, 190, 210, 0.2);
  line-height: 1.1;
}

.app-dash__pat-snap-net--neg {
  color: rgba(255, 175, 155, 0.96);
  text-shadow: 0 0 12px rgba(255, 100, 80, 0.18);
}

.app-dash__pat-snap-head--solo .app-dash__pat-snap-kicker {
  margin: 0 0 6px;
}

.app-dash__pat-snap-net--solo {
  margin: 0;
  font-size: clamp(1.12rem, 3.1vw, 1.45rem);
  font-weight: 800;
}

.app-dash__bud-snap-cf {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.app-dash__bud-snap-cf-kicker {
  margin: 0 0 6px;
  font-size: 0.52rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.4);
  line-height: 1.2;
}

.app-dash__bud-snap-cf-val {
  margin: 0;
  font-size: clamp(1.05rem, 2.9vw, 1.38rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: rgba(115, 235, 220, 0.98);
  text-shadow: 0 0 12px rgba(0, 210, 195, 0.2);
  line-height: 1.1;
}

.app-dash__bud-snap-cf-val--neg {
  color: rgba(255, 175, 155, 0.96);
  text-shadow: 0 0 12px rgba(255, 100, 80, 0.16);
}

.app-dash__pat-snap-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 5px;
  font-variant-numeric: tabular-nums;
  font-size: 0.56rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: rgba(226, 232, 240, 0.42);
  line-height: 1.15;
}

.app-dash__pat-snap-eq__v {
  color: rgba(244, 246, 250, 0.88);
  font-weight: 780;
}

.app-dash__pat-snap-eq__v--net {
  color: rgba(244, 246, 250, 0.92);
  font-weight: 800;
}

.app-dash__pat-snap-eq__v--neg {
  color: rgba(255, 185, 165, 0.95);
}

.app-dash__pat-snap-op {
  opacity: 0.5;
  padding: 0 1px;
  font-weight: 700;
}

.app-dash__card-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.app-dash__card-metrics:not(.app-dash__card-metrics--no-bar) .app-dash__card-bar--edu {
  margin-top: 2px;
}

.app-dash__card-bar-fill {
  display: block;
  height: 100%;
  width: var(--dash-card-bar, 0%);
  max-width: 100%;
  border-radius: inherit;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  background: linear-gradient(90deg, rgba(107, 201, 212, 0.95), rgba(160, 230, 200, 0.82), rgba(196, 156, 255, 0.9));
  box-shadow: 0 0 10px rgba(107, 201, 212, 0.25);
}

.app-dash__card-bar-fill--edu {
  background: linear-gradient(90deg, rgba(107, 201, 212, 0.98), rgba(140, 220, 230, 0.85));
  box-shadow: 0 0 10px rgba(107, 201, 212, 0.35);
}

.app-dash__card-bar-fill--pat {
  background: linear-gradient(90deg, rgba(232, 132, 74, 0.95), rgba(255, 190, 120, 0.75));
  box-shadow: 0 0 10px rgba(232, 132, 74, 0.28);
}

.app-dash__card-bar-fill--bud {
  background: linear-gradient(90deg, rgba(0, 245, 212, 0.88), rgba(107, 201, 212, 0.75));
  box-shadow: 0 0 10px rgba(0, 245, 212, 0.22);
}

.app-dash__card-bar-fill--sim {
  background: linear-gradient(90deg, rgba(66, 201, 220, 0.95), rgba(107, 201, 212, 0.8));
  box-shadow: 0 0 10px rgba(66, 201, 220, 0.3);
}

.app-dash__card-bar-fill--life {
  background: linear-gradient(90deg, rgba(196, 156, 255, 0.95), rgba(140, 190, 255, 0.78));
  box-shadow: 0 0 10px rgba(196, 156, 255, 0.32);
}

.app-dash__card-bar-fill--com {
  background: linear-gradient(90deg, rgba(100, 215, 195, 0.95), rgba(150, 200, 255, 0.78));
  box-shadow: 0 0 10px rgba(100, 215, 195, 0.28);
}

.app-dash__card-kpi-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 10px;
}

.app-dash__card-kpi {
  font-size: clamp(1rem, 2.2vw, 1.22rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.15;
  min-width: 0;
}

.app-dash__card-kpi-sub {
  font-size: 0.65rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(226, 232, 240, 0.52);
  text-align: right;
  flex-shrink: 0;
  max-width: 11rem;
}

/* Objectifs de vie — jauges circulaires par période (dashboard) */
.app-dash__card-metrics--life-rings {
  gap: 6px;
}

.app-dash__life-rings-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px 10px;
  width: 100%;
}

.app-dash__life-ring {
  position: relative;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
}

.app-dash__life-ring__svg {
  display: block;
  width: 100%;
  height: auto;
}

.app-dash__life-ring__fg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  padding-top: 1px;
}

.app-dash__life-ring__pct {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(115, 228, 238, 0.98);
  line-height: 1.05;
}

.app-dash__life-ring__frac {
  font-size: 0.5rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: rgba(226, 232, 240, 0.4);
  line-height: 1.05;
}

.app-dash__card--has-metrics .app-dash__card-desc {
  font-size: 0.66rem;
  opacity: 0.82;
}

@property --dash-spin {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

/* Dashboard outils : grille fixe 3 × 2 (6 cartes) */
.app-dash__grid--mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
}

.app-dash-daily-quote {
  margin: clamp(22px, 4vw, 36px) auto 0;
  max-width: 42rem;
  padding: clamp(14px, 2.2vw, 18px) clamp(18px, 2.5vw, 24px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(
    155deg,
    rgba(107, 201, 212, 0.08) 0%,
    rgba(185, 168, 255, 0.06) 48%,
    rgba(8, 14, 26, 0.55) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: clamp(0.82rem, 1.55vw, 0.92rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgba(244, 246, 250, 0.72);
}

a.app-dash__card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.app-dash__card:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.65);
  outline-offset: 3px;
}

.app-dash__card {
  position: relative;
  grid-column: auto;
  --card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.07) 0%, rgba(10, 16, 30, 0.88) 48%, rgba(6, 10, 22, 0.94) 100%);
  --card-border: rgba(255, 255, 255, 0.14);
  --card-border-hover: rgba(255, 255, 255, 0.26);
  --card-glow: rgba(107, 201, 212, 0.32);
  --card-glow-2: transparent;
  --card-hover-glow: rgba(107, 201, 212, 0.15);
  --card-outer-glow: transparent;
  --card-icon-bg: rgba(8, 15, 29, 0.58);
  --card-icon-border: rgba(255, 255, 255, 0.14);
  --card-orbit: rgba(120, 215, 225, 0.95);
  --dash-spin: 0deg;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(12px, 1.8vw, 16px);
  min-height: clamp(220px, 28vw, 260px);
  border-radius: 18px;
  border: 1px solid var(--card-border);
  background: var(--card-surface);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px var(--card-outer-glow);
  padding: clamp(18px, 2.2vw, 22px) clamp(18px, 2.5vw, 24px);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.app-dash__card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.62;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 95% 85% at 12% 8%, var(--card-glow) 0%, transparent 52%),
    radial-gradient(ellipse 70% 60% at 100% 100%, var(--card-glow-2) 0%, transparent 45%);
}

/* Anneau lumineux animé au survol (couleur par --card-orbit) */
.app-dash__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.35s ease;
  padding: 2px;
  background: conic-gradient(
    from var(--dash-spin),
    transparent 0deg,
    transparent 252deg,
    var(--card-orbit) 292deg,
    rgba(255, 255, 255, 0.82) 306deg,
    var(--card-orbit) 320deg,
    transparent 352deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.app-dash__card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-3px);
  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 32px var(--card-hover-glow);
}

.app-dash__card:hover::after,
a.app-dash__card:focus-visible::after {
  opacity: 1;
  animation: app-dash-card-orbit 2.75s linear infinite;
}

@keyframes app-dash-card-orbit {
  to {
    --dash-spin: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-dash__card:hover::after,
  a.app-dash__card:focus-visible::after {
    animation: none;
    opacity: 0.45;
    --dash-spin: 52deg;
  }
}

.app-dash__card--com {
  --card-glow: rgba(120, 220, 200, 0.52);
  --card-glow-2: rgba(185, 168, 255, 0.22);
  --card-surface: linear-gradient(148deg, rgba(90, 200, 185, 0.28) 0%, rgba(55, 40, 110, 0.48) 44%, rgba(10, 12, 26, 0.92) 100%);
  --card-border: rgba(130, 210, 195, 0.42);
  --card-border-hover: rgba(170, 240, 225, 0.52);
  --card-hover-glow: rgba(100, 215, 200, 0.22);
  --card-outer-glow: rgba(120, 200, 190, 0.12);
  --card-icon-bg: linear-gradient(145deg, rgba(95, 195, 175, 0.42), rgba(55, 35, 95, 0.78));
  --card-icon-border: rgba(160, 230, 215, 0.42);
  --card-orbit: rgba(150, 235, 220, 0.96);
}

.app-dash__card--edu {
  --card-glow: rgba(60, 230, 220, 0.5);
  --card-glow-2: rgba(100, 200, 255, 0.2);
  --card-surface: linear-gradient(148deg, rgba(40, 200, 195, 0.35) 0%, rgba(15, 70, 85, 0.5) 45%, rgba(8, 14, 28, 0.92) 100%);
  --card-border: rgba(100, 235, 230, 0.45);
  --card-border-hover: rgba(160, 255, 250, 0.55);
  --card-hover-glow: rgba(80, 220, 215, 0.22);
  --card-outer-glow: rgba(60, 210, 205, 0.14);
  --card-icon-bg: linear-gradient(145deg, rgba(50, 210, 200, 0.5), rgba(12, 55, 70, 0.8));
  --card-icon-border: rgba(120, 240, 235, 0.45);
  --card-orbit: rgba(110, 245, 238, 0.96);
}

.app-dash__card--sim {
  --card-glow: rgba(190, 130, 255, 0.55);
  --card-glow-2: rgba(140, 100, 255, 0.25);
  --card-surface: linear-gradient(148deg, rgba(160, 90, 255, 0.34) 0%, rgba(55, 25, 95, 0.55) 45%, rgba(10, 10, 30, 0.92) 100%);
  --card-border: rgba(200, 150, 255, 0.48);
  --card-border-hover: rgba(220, 190, 255, 0.58);
  --card-hover-glow: rgba(180, 130, 255, 0.25);
  --card-outer-glow: rgba(170, 110, 255, 0.14);
  --card-icon-bg: linear-gradient(145deg, rgba(170, 100, 255, 0.48), rgba(40, 20, 85, 0.82));
  --card-icon-border: rgba(200, 160, 255, 0.5);
  --card-orbit: rgba(210, 165, 255, 0.98);
  /* Mini-graphique cockpit : aligné sur la palette violette de la carte */
  --dash-sim-chart-grid: rgba(200, 160, 255, 0.07);
  --dash-sim-chart-cap: rgba(68, 32, 112, 0.58);
  --dash-sim-chart-int: rgba(130, 72, 195, 0.44);
  --dash-sim-chart-curve: rgba(218, 185, 255, 0.94);
  --dash-sim-chart-euro: rgba(200, 168, 255, 0.13);
}

.app-dash__card--sim .app-dash__sim-compound__grid {
  stroke: var(--dash-sim-chart-grid);
}

.app-dash__card--sim .app-dash__sim-compound__cap {
  fill: var(--dash-sim-chart-cap);
}

.app-dash__card--sim .app-dash__sim-compound__int {
  fill: var(--dash-sim-chart-int);
}

.app-dash__card--sim .app-dash__sim-compound__curve {
  stroke: var(--dash-sim-chart-curve);
  stroke-width: 0.68;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-dash__card--sim .app-dash__sim-compound__euro {
  fill: var(--dash-sim-chart-euro);
}

.app-dash__card--pat {
  --card-glow: rgba(90, 190, 255, 0.52);
  --card-glow-2: rgba(80, 140, 255, 0.22);
  --card-surface: linear-gradient(148deg, rgba(70, 170, 255, 0.32) 0%, rgba(20, 55, 110, 0.52) 45%, rgba(8, 12, 26, 0.92) 100%);
  --card-border: rgba(120, 200, 255, 0.45);
  --card-border-hover: rgba(170, 220, 255, 0.55);
  --card-hover-glow: rgba(100, 185, 255, 0.22);
  --card-outer-glow: rgba(80, 170, 255, 0.12);
  --card-icon-bg: linear-gradient(145deg, rgba(70, 165, 255, 0.48), rgba(15, 45, 95, 0.82));
  --card-icon-border: rgba(130, 200, 255, 0.48);
  --card-orbit: rgba(140, 205, 255, 0.97);
}

.app-dash__card--bud {
  --card-glow: rgba(255, 215, 100, 0.5);
  --card-glow-2: rgba(120, 255, 180, 0.18);
  --card-surface: linear-gradient(148deg, rgba(255, 200, 80, 0.3) 0%, rgba(95, 75, 25, 0.45) 42%, rgba(12, 14, 22, 0.92) 100%);
  --card-border: rgba(255, 210, 120, 0.42);
  --card-border-hover: rgba(255, 230, 160, 0.55);
  --card-hover-glow: rgba(255, 200, 90, 0.2);
  --card-outer-glow: rgba(255, 190, 70, 0.12);
  --card-icon-bg: linear-gradient(145deg, rgba(255, 200, 90, 0.45), rgba(70, 55, 20, 0.78));
  --card-icon-border: rgba(255, 220, 140, 0.45);
  --card-orbit: rgba(255, 225, 140, 0.96);
}

.app-dash__card--life {
  --card-glow: rgba(255, 140, 90, 0.52);
  --card-glow-2: rgba(255, 200, 100, 0.22);
  --card-surface: linear-gradient(148deg, rgba(255, 130, 85, 0.32) 0%, rgba(110, 45, 30, 0.48) 44%, rgba(14, 10, 22, 0.92) 100%);
  --card-border: rgba(255, 170, 120, 0.44);
  --card-border-hover: rgba(255, 200, 160, 0.55);
  --card-hover-glow: rgba(255, 150, 100, 0.22);
  --card-outer-glow: rgba(255, 130, 80, 0.12);
  --card-icon-bg: linear-gradient(145deg, rgba(255, 120, 75, 0.46), rgba(95, 35, 28, 0.78));
  --card-icon-border: rgba(255, 185, 130, 0.46);
  --card-orbit: rgba(255, 175, 125, 0.97);
}

.app-dash__card-top,
.app-dash__card-visual,
.app-dash__card-body,
.app-dash__card-metrics {
  position: relative;
  z-index: 1;
}

.app-dash__card-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 16px);
  flex-shrink: 0;
}

.app-dash__card-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.app-dash__card-visual {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--card-icon-bg);
  border: 1px solid var(--card-icon-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.app-dash__card-icon {
  font-size: clamp(1.55rem, 2.8vw, 1.85rem);
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.app-dash__card-shine {
  position: absolute;
  inset: -269%;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
  transform: rotate(-15deg);
  pointer-events: none;
}

.app-dash__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  align-self: stretch;
  justify-content: flex-start;
}

.app-dash__card-title {
  margin: 0;
  color: var(--white);
  font-size: clamp(1rem, 1.9vw, 1.12rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.app-dash__card-desc {
  margin: 0;
  color: rgba(244, 246, 250, 0.78);
  font-size: 0.7rem;
  line-height: 1.58;
}

.app-dash__card .app-dash__cta {
  margin-top: auto;
  align-self: center;
}

.app-dash__card-body > .badge {
  align-self: center;
  margin-top: auto;
}

@media (max-width: 1024px) {
  .app-dash__grid--mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-dash__grid--mosaic {
    grid-template-columns: 1fr;
  }

  .app-dash__card {
    min-height: 0;
  }
}

/* Psychologie — hub + profils + pages « play » */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-auth--psychologie {
  position: relative;
  padding-bottom: clamp(64px, 10vw, 120px);
  overflow: hidden;
}

.container--app-wide {
  max-width: 1180px;
}

/* Communauté — hub forum (largeur quasi pleine page) */
.container--communaute-fluid {
  width: 100%;
  max-width: min(1720px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

.app-auth--communaute-hub {
  padding-bottom: clamp(48px, 8vw, 88px);
}

.app-com--hub .app-com__ambient {
  opacity: 0.88;
}

.app-com__hub-head {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(14px, 2.2vw, 22px);
}

.app-com__hub-title {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  letter-spacing: -0.02em;
}

.app-com__hub-lead {
  margin: 0;
  max-width: 52rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(244, 246, 250, 0.68);
}

.app-com__hub-panel {
  position: relative;
  z-index: 1;
  padding: clamp(12px, 1.8vw, 18px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

/* Forum hub : sidebar thèmes (type Finary) + fil compact */
.app-forum__shell--hub {
  display: grid;
  grid-template-columns: minmax(196px, 228px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 20px);
  align-items: start;
}

.app-forum__shell--hub .app-forum__feed {
  display: grid;
  grid-template-columns: minmax(200px, min(28vw, 300px)) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  min-width: 0;
}

.app-forum__themes--hub {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
}

.app-forum__themes--hub .app-forum__themes-head {
  padding: 12px 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.app-forum__themes-kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.38);
}

.app-forum__themes--hub .app-forum__themes-title {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 200, 230, 0.85);
}

.app-forum__themes--hub .app-forum__themes-list {
  max-height: min(62vh, 560px);
  padding: 6px 8px 10px;
}

.app-forum__themes--hub .app-forum__theme-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 10px;
}

.app-forum__theme-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: rgba(107, 201, 212, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.app-forum__theme-btn--general .app-forum__theme-dot {
  background: rgba(160, 175, 200, 0.95);
}

.app-forum__theme-btn--etf .app-forum__theme-dot,
.app-forum__theme-btn--bourse .app-forum__theme-dot {
  background: rgba(107, 201, 212, 0.95);
}

.app-forum__theme-btn--crypto .app-forum__theme-dot,
.app-forum__theme-btn--btc .app-forum__theme-dot {
  background: rgba(224, 196, 132, 0.95);
}

.app-forum__theme-btn--immo .app-forum__theme-dot {
  background: rgba(255, 140, 160, 0.9);
}

.app-forum__theme-btn--fiscalite .app-forum__theme-dot {
  background: rgba(130, 200, 150, 0.95);
}

.app-forum__theme-btn--voyages .app-forum__theme-dot {
  background: rgba(168, 160, 255, 0.95);
}

.app-forum__themes--hub .app-forum__theme-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 650;
}

.app-forum__themes--hub .app-forum__theme-count {
  width: 100%;
  margin-top: 0;
  margin-left: 18px;
  font-size: 0.6rem;
  opacity: 0.55;
}

.app-forum__aside--hub {
  border-radius: 12px;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.18);
}

.app-forum__aside--hub .app-forum__aside-head {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 8px;
}

.app-forum__aside--hub .app-forum__aside-title {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  margin: 0;
}

.app-forum__aside--hub .btn-primary.app-life-btn {
  padding: 10px 18px;
  font-size: 0.82rem;
}

.app-forum__list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  padding: 4px 10px 6px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.app-forum__list-head span:last-child {
  text-align: right;
}

.app-forum__aside--hub .app-forum__list-wrap {
  max-height: min(52vh, 480px);
  padding: 4px 6px 8px;
}

.app-forum__list-cell--title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.app-forum__list-cell--stat {
  justify-self: end;
  align-self: center;
}

.app-forum__aside--hub .app-forum__list-title {
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.25;
}

.app-forum__aside--hub .app-forum__list-meta {
  margin-top: 0;
  font-size: 0.62rem;
  color: rgba(244, 246, 250, 0.42);
}

.app-forum__list-replies {
  display: inline-flex;
  min-width: 28px;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255, 185, 150, 0.95);
  background: rgba(255, 140, 100, 0.12);
  border: 1px solid rgba(255, 160, 120, 0.22);
}

.app-forum__main--hub {
  padding: clamp(10px, 1.4vw, 14px);
  border-radius: 12px;
}

.app-forum__main--hub .app-forum__main-head {
  margin-bottom: 10px;
}

.app-forum__main--hub .app-forum__main-kicker {
  font-size: 0.58rem;
}

.app-forum__main--hub .app-forum__thread-h {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  margin-bottom: 6px;
}

.app-forum__main--hub .app-forum__bubble {
  padding: 10px 12px;
  border-radius: 12px;
}

.app-forum__main--hub .app-forum__body {
  font-size: 0.84rem;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .app-forum__shell--hub .app-forum__feed {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .app-forum__shell--hub {
    grid-template-columns: 1fr;
  }

  .app-forum__shell--hub .app-forum__themes--hub {
    max-height: none;
  }

  .app-forum__themes--hub .app-forum__themes-list {
    max-height: min(200px, 38vh);
  }
}

@media (max-width: 820px) {
  .app-forum__shell--hub .app-forum__themes,
  .app-forum__shell--hub .app-forum__feed,
  .app-forum__shell--hub .app-forum__aside--hub,
  .app-forum__shell--hub .app-forum__main--hub {
    grid-area: auto;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    min-width: 0;
  }

  .app-forum__shell--hub .app-forum__feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}

.app-psych__toolbar {
  margin-bottom: 18px;
}

.app-psych-hero {
  margin-bottom: clamp(28px, 5vw, 44px);
  padding-bottom: clamp(12px, 2vw, 20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-psych-hero--splash {
  position: relative;
}

.app-psych-hero__deco {
  position: absolute;
  inset: -30% -15% auto;
  height: 200px;
  background: radial-gradient(ellipse 70% 80% at 30% 0%, rgba(107, 201, 212, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 85% 20%, rgba(224, 196, 132, 0.1) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0.85;
}

.app-psych-hero--splash .app-auth__title,
.app-psych-hero--splash .app-auth__lead {
  position: relative;
  z-index: 1;
}

.app-psych-hero__note {
  margin: 0;
  max-width: 40rem;
  font-size: 0.86rem;
  line-height: 1.65;
  color: rgba(224, 196, 132, 0.82);
  color: color-mix(in srgb, var(--gold) 80%, transparent);
  position: relative;
  z-index: 1;
}

.app-psych-section {
  margin-bottom: clamp(36px, 6vw, 56px);
}

.app-psych-section__head {
  margin-bottom: 18px;
}

.app-psych-section__title {
  margin: 0 0 8px;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--white);
  letter-spacing: -0.02em;
}

.app-psych-section__intro,
.app-psy-bias-hub__intro {
  margin: 0;
  max-width: 46rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(244, 246, 250, 0.72);
}

/* Hub psychologie — rythme plus digeste */
.app-auth--psychologie .app-psych-hero--splash {
  margin-bottom: clamp(32px, 5.5vw, 52px);
  padding-bottom: clamp(16px, 2.8vw, 28px);
}

.app-auth--psychologie .app-auth__lead {
  max-width: 36rem;
}

.app-auth--psychologie .app-psych-section {
  margin-bottom: clamp(40px, 6.5vw, 72px);
}

.app-auth--psychologie .app-psych-section__head {
  margin-bottom: clamp(18px, 2.8vw, 26px);
}

.app-auth--psychologie .app-psych-section__intro,
.app-auth--psychologie .app-psy-bias-hub__intro {
  max-width: 40rem;
  font-size: 0.93rem;
  line-height: 1.72;
}

.app-auth--psychologie .app-psy-prof-grid {
  gap: clamp(14px, 2.2vw, 22px);
}

.app-auth--psychologie .app-psy-croy-hub {
  gap: clamp(14px, 2vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.app-auth--psychologie .app-psy-bias-hub {
  gap: clamp(14px, 2vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* Profils investisseur — grille 5 cartes risque */
.app-psy-prof-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 14px);
  align-items: stretch;
}

.app-psy-prof-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.app-psy-prof-wrap--hi .app-psy-prof--neutre {
  border-color: rgba(244, 246, 250, 0.48);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 50px rgba(0, 0, 0, 0.35);
}

.app-psy-prof-wrap--hi .app-psy-prof--dynamique {
  border-color: rgba(107, 201, 212, 0.55);
  box-shadow: 0 0 0 1px rgba(107, 201, 212, 0.22), 0 20px 50px rgba(0, 0, 0, 0.35);
}

.app-psy-prof__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.app-psy-prof__star {
  flex-shrink: 0;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(224, 196, 132, 0.42);
}

.app-psy-prof {
  --prof-title: rgba(244, 246, 250, 0.96);
  --prof-bar: rgba(107, 201, 212, 0.85);
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(12px, 1.6vw, 16px) clamp(10px, 1.4vw, 14px) clamp(12px, 1.6vw, 16px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(8, 12, 24, 0.94) 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.app-psy-prof--conservateur {
  --prof-title: #d4b8ff;
  --prof-bar: #b18aff;
}

.app-psy-prof--defensif {
  --prof-title: #8fe0b0;
  --prof-bar: #6bce8f;
}

.app-psy-prof--neutre {
  --prof-title: #f0f2f8;
  --prof-bar: rgba(244, 246, 250, 0.72);
}

.app-psy-prof--dynamique {
  --prof-title: #ffb87a;
  --prof-bar: #f09850;
}

.app-psy-prof--agressif {
  --prof-title: #ff9a9a;
  --prof-bar: #e86868;
}

.app-psy-prof__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.app-psy-prof__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--prof-title);
  line-height: 1.15;
}

.app-psy-prof__badge {
  margin: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(18, 22, 32, 0.92);
  background: rgba(244, 246, 250, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.app-psy-prof__alloc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-psy-prof__alloc-h {
  margin: 0 0 2px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.42);
}

.app-psy-prof__alloc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(244, 246, 250, 0.78);
}

.app-psy-prof__alloc-lab {
  min-width: 0;
  line-height: 1.25;
}

.app-psy-prof__alloc-pct {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 246, 250, 0.55);
}

.app-psy-prof__alloc-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  margin-bottom: 2px;
}

.app-psy-prof__alloc-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--prof-bar), rgba(255, 255, 255, 0.25));
  min-width: 2px;
  transition: width 0.4s ease;
}

.app-psy-prof__meta {
  margin: 4px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  align-items: baseline;
  font-size: 0.62rem;
  line-height: 1.35;
}

.app-psy-prof__meta dt {
  margin: 0;
  font-weight: 600;
  color: rgba(244, 246, 250, 0.48);
}

.app-psy-prof__meta dd {
  margin: 0;
  font-weight: 700;
  color: rgba(244, 246, 250, 0.9);
  text-align: right;
}

.app-psy-prof__foot {
  margin: 0;
  padding-top: 6px;
  margin-top: auto;
  font-size: 0.65rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.72);
}

.app-psy-prof__foot-k {
  display: block;
  margin-bottom: 2px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.72);
}

.app-psy-prof-banner {
  margin: clamp(18px, 2.5vw, 26px) 0 12px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  color: rgba(12, 22, 32, 0.95);
  background: linear-gradient(120deg, rgba(140, 230, 255, 0.95) 0%, rgba(107, 201, 212, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.app-psy-prof-banner__ico {
  margin-right: 8px;
  color: var(--gold);
}

.app-psy-prof-disclaimer {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgba(244, 230, 210, 0.82);
  background: linear-gradient(165deg, rgba(88, 62, 38, 0.55) 0%, rgba(24, 18, 12, 0.88) 100%);
  border: 1px solid rgba(224, 196, 132, 0.22);
}

.app-psy-gauge {
  margin-bottom: 0;
  overflow: visible;
}

/* Demi-cercle : hauteur = moitié de la largeur (sinon l’arc est rogné à plat sur le haut) */
.app-psy-gauge__dial {
  --gauge-ring-in: 52%;
  --gauge-ring-out: 99.5%;
  position: relative;
  width: 100%;
  max-width: 140px;
  margin: 0 auto;
  aspect-ratio: 2 / 1;
  height: auto;
}

.app-psy-gauge--strip .app-psy-gauge__dial {
  max-width: min(220px, 100%);
  max-height: 120px;
}

.app-psy-gauge__track {
  position: absolute;
  inset: 0;
  border-radius: 100px 100px 0 0;
  background: conic-gradient(
    from 180deg at 50% 100%,
    rgba(255, 255, 255, 0.07) 0deg,
    rgba(255, 255, 255, 0.1) 90deg,
    rgba(255, 255, 255, 0.07) 180deg
  );
  mask: radial-gradient(
    circle at 50% 100%,
    transparent var(--gauge-ring-in),
    #000 calc(var(--gauge-ring-in) + 0.5%),
    #000 var(--gauge-ring-out),
    transparent calc(var(--gauge-ring-out) + 0.5%)
  );
  -webkit-mask: radial-gradient(
    circle at 50% 100%,
    transparent var(--gauge-ring-in),
    #000 calc(var(--gauge-ring-in) + 0.5%),
    #000 var(--gauge-ring-out),
    transparent calc(var(--gauge-ring-out) + 0.5%)
  );
}

.app-psy-gauge__ticks {
  position: absolute;
  inset: 0;
  border-radius: 100px 100px 0 0;
  background: repeating-conic-gradient(from 180deg at 50% 100%, transparent 0deg 14deg, rgba(255, 255, 255, 0.07) 14deg 15deg);
  mask: radial-gradient(
    circle at 50% 100%,
    transparent var(--gauge-ring-in),
    #000 calc(var(--gauge-ring-in) + 0.5%),
    #000 var(--gauge-ring-out),
    transparent calc(var(--gauge-ring-out) + 0.5%)
  );
  -webkit-mask: radial-gradient(
    circle at 50% 100%,
    transparent var(--gauge-ring-in),
    #000 calc(var(--gauge-ring-in) + 0.5%),
    #000 var(--gauge-ring-out),
    transparent calc(var(--gauge-ring-out) + 0.5%)
  );
  opacity: 0.55;
  pointer-events: none;
}

/* Remplissage coloré jusqu’à l’angle du risque (aligné sur l’aiguille : 0–100 → 0–180°) */
.app-psy-gauge__arc {
  position: absolute;
  inset: 0;
  border-radius: 100px 100px 0 0;
  background: conic-gradient(
    from 180deg at 50% 100%,
    var(--prof-accent) 0deg,
    var(--prof-accent) calc(var(--risk) * 1.8deg),
    transparent calc(var(--risk) * 1.8deg)
  );
  filter: saturate(1.15) drop-shadow(0 0 14px var(--prof-accent2));
  mask: radial-gradient(
    circle at 50% 100%,
    transparent var(--gauge-ring-in),
    #000 calc(var(--gauge-ring-in) + 0.5%),
    #000 var(--gauge-ring-out),
    transparent calc(var(--gauge-ring-out) + 0.5%)
  );
  -webkit-mask: radial-gradient(
    circle at 50% 100%,
    transparent var(--gauge-ring-in),
    #000 calc(var(--gauge-ring-in) + 0.5%),
    #000 var(--gauge-ring-out),
    transparent calc(var(--gauge-ring-out) + 0.5%)
  );
  pointer-events: none;
}

.app-psy-gauge__needle {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3px;
  height: 76%;
  max-height: 88px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--white), rgba(255, 255, 255, 0.45));
  transform-origin: 50% 100%;
  box-shadow: 0 0 10px var(--prof-accent2);
  z-index: 2;
}

.app-psy-gauge__readout {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
  padding: 0 2px;
}

.app-psy-gauge__k {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.45);
}

.app-psy-gauge__n {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--prof-accent);
  letter-spacing: -0.03em;
}

.app-psy-ind {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.app-psy-ind__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.62rem;
  color: rgba(244, 246, 250, 0.55);
}

.app-psy-ind__dots {
  display: flex;
  gap: 4px;
}

.app-psy-ind__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.app-psy-ind__dots i.is-on {
  background: var(--prof-accent);
  box-shadow: 0 0 8px var(--prof-accent2);
}

.app-psy-ind--strip {
  gap: 10px;
  margin-bottom: 0;
}

.app-psy-ind--strip .app-psy-ind__row {
  font-size: 0.68rem;
}

.app-psy-gauge--strip .app-psy-gauge__n {
  font-size: 1.28rem;
}

/* Croyances — cartes */
.app-psy-croy-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.app-psy-croy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  min-height: 150px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-psy-croy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.35);
}

.app-psy-croy-card__line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--croy-line, #e0c484);
}

.app-psy-croy-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  padding-left: 6px;
}

.app-psy-croy-card__hook {
  font-size: 0.8rem;
  line-height: 1.52;
  color: rgba(244, 246, 250, 0.7);
  flex: 1;
  padding-left: 6px;
}

.app-psy-croy-card__more {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.95);
  padding-left: 6px;
}

.app-psy-croy-card--1 {
  background: linear-gradient(135deg, rgba(224, 196, 132, 0.12) 0%, rgba(8, 15, 29, 0.92) 100%);
  --croy-line: #e0c484;
}

.app-psy-croy-card--2 {
  background: linear-gradient(135deg, rgba(107, 201, 212, 0.12) 0%, rgba(8, 15, 29, 0.92) 100%);
  --croy-line: #6bc9d4;
}

.app-psy-croy-card--3 {
  background: linear-gradient(135deg, rgba(185, 168, 255, 0.12) 0%, rgba(8, 15, 29, 0.92) 100%);
  --croy-line: #b9a8ff;
}

.app-psy-croy-card--4 {
  background: linear-gradient(135deg, rgba(255, 160, 140, 0.1) 0%, rgba(8, 15, 29, 0.92) 100%);
  --croy-line: #f0a090;
}

/* Hub biais */
.app-psy-bias-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.app-psy-bias-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 148px;
  padding: 14px 16px 12px;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.app-psy-bias-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.36);
}

.app-psy-bias-card__glyph {
  font-size: 0.75rem;
  opacity: 0.65;
}

.app-psy-bias-card__title {
  font-size: 0.91rem;
  font-weight: 700;
  color: var(--white);
}

.app-psy-bias-card__hook {
  font-size: 0.78rem;
  line-height: 1.52;
  color: rgba(244, 246, 250, 0.68);
  flex: 1;
}

.app-psy-bias-card__more {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
}

.app-psy-bias-card:hover .app-psy-bias-card__more {
  color: var(--gold-2, #f0d9a0);
}

.app-psy-bias-card--a {
  background: linear-gradient(160deg, rgba(107, 201, 212, 0.14) 0%, rgba(8, 15, 29, 0.88) 55%);
}

.app-psy-bias-card--b {
  background: linear-gradient(160deg, rgba(185, 168, 255, 0.12) 0%, rgba(8, 15, 29, 0.88) 55%);
}

.app-psy-bias-card--c {
  background: linear-gradient(160deg, rgba(224, 196, 132, 0.14) 0%, rgba(8, 15, 29, 0.88) 55%);
}

.app-psy-bias-card--d {
  background: linear-gradient(160deg, rgba(255, 160, 120, 0.12) 0%, rgba(8, 15, 29, 0.88) 55%);
}

.app-psy-bias-card--e {
  background: linear-gradient(160deg, rgba(120, 200, 255, 0.12) 0%, rgba(8, 15, 29, 0.88) 55%);
}

/* Pages « play » biais + croyances */
.app-psych-play {
  position: relative;
  padding-bottom: clamp(48px, 8vw, 88px);
}

.app-psych-play__ambient {
  position: absolute;
  inset: -10% -20% auto;
  height: min(55vh, 480px);
  opacity: 0.55;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 20% 0%, rgba(107, 201, 212, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(224, 196, 132, 0.15) 0%, transparent 45%);
}

.app-psych-play__ambient--soft {
  opacity: 0.4;
}

.app-psych-play--bias.app-psych-play--a {
  --bias-accent: #6bc9d4;
  --bias-glow: rgba(107, 201, 212, 0.38);
}

.app-psych-play--bias.app-psych-play--a .app-psych-play__ambient {
  background: radial-gradient(ellipse 60% 50% at 15% 0%, rgba(107, 201, 212, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(224, 196, 132, 0.1) 0%, transparent 45%);
}

.app-psych-play--bias.app-psych-play--b {
  --bias-accent: #b9a8ff;
  --bias-glow: rgba(185, 168, 255, 0.4);
}

.app-psych-play--bias.app-psych-play--b .app-psych-play__ambient {
  background: radial-gradient(ellipse 60% 50% at 15% 0%, rgba(185, 168, 255, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(107, 201, 212, 0.12) 0%, transparent 45%);
}

.app-psych-play--bias.app-psych-play--c {
  --bias-accent: #e0c484;
  --bias-glow: rgba(224, 196, 132, 0.42);
}

.app-psych-play--bias.app-psych-play--c .app-psych-play__ambient {
  background: radial-gradient(ellipse 55% 45% at 30% 0%, rgba(224, 196, 132, 0.18) 0%, transparent 50%);
}

.app-psych-play--bias.app-psych-play--d {
  --bias-accent: #f0a078;
  --bias-glow: rgba(240, 160, 120, 0.4);
}

.app-psych-play--bias.app-psych-play--d .app-psych-play__ambient {
  background: radial-gradient(ellipse 55% 45% at 20% 0%, rgba(255, 160, 120, 0.16) 0%, transparent 50%);
}

.app-psych-play--bias.app-psych-play--e {
  --bias-accent: #78c8ff;
  --bias-glow: rgba(120, 200, 255, 0.4);
}

.app-psych-play--bias.app-psych-play--e .app-psych-play__ambient {
  background: radial-gradient(ellipse 55% 45% at 25% 0%, rgba(120, 200, 255, 0.18) 0%, transparent 50%);
}

.app-psych-play--croy.app-psych-play--c1 .app-psych-play__ambient {
  background: radial-gradient(ellipse 55% 45% at 18% 0%, rgba(107, 201, 212, 0.2) 0%, transparent 52%),
    radial-gradient(ellipse 45% 35% at 88% 12%, rgba(224, 196, 132, 0.12) 0%, transparent 48%);
}

.app-psych-play--croy.app-psych-play--c2 .app-psych-play__ambient {
  background: radial-gradient(ellipse 55% 45% at 22% 0%, rgba(185, 168, 255, 0.2) 0%, transparent 52%),
    radial-gradient(ellipse 45% 35% at 80% 10%, rgba(255, 160, 120, 0.1) 0%, transparent 48%);
}

.app-psych-play--croy.app-psych-play--c3 .app-psych-play__ambient {
  background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(224, 196, 132, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 40% 32% at 12% 18%, rgba(107, 201, 212, 0.1) 0%, transparent 45%);
}

.app-psych-play--croy.app-psych-play--c4 .app-psych-play__ambient {
  background: radial-gradient(ellipse 55% 45% at 25% 0%, rgba(138, 163, 196, 0.22) 0%, transparent 52%),
    radial-gradient(ellipse 45% 35% at 85% 14%, rgba(224, 196, 132, 0.1) 0%, transparent 48%);
}

.app-psych-play__crumb {
  margin-bottom: 20px;
  font-size: 0.74rem;
  color: rgba(244, 246, 250, 0.5);
}

.app-psych-play__crumb a {
  color: rgba(224, 196, 132, 0.88);
  text-decoration: none;
}

.app-psych-play__crumb a:hover {
  text-decoration: underline;
}

.app-psych-play__crsep {
  margin: 0 0.35em;
  opacity: 0.45;
}

.app-psych-play__hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.app-psych-play__index {
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.06);
  letter-spacing: -0.06em;
}

.app-psych-play__kicker {
  margin: 0 0 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.85);
}

.app-psych-play__h1 {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.app-psych-play__h1--quote {
  font-style: italic;
  font-weight: 700;
}

.app-psych-play__lede {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.62;
  color: rgba(244, 246, 250, 0.76);
}

/* Page biais — hero & parcours (niveau croyance) */
.app-psych-play__hero--bias {
  align-items: stretch;
  margin-bottom: clamp(26px, 4vw, 38px);
}

.app-psych-bias-hero__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(16px, 2.5vw, 22px) clamp(14px, 2vw, 18px);
  min-width: clamp(84px, 11vw, 104px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.32) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 48px rgba(0, 0, 0, 0.28);
}

.app-psych-bias-hero__tag {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.42);
}

.app-psych-bias-hero__glyph {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1;
  color: var(--bias-accent, #6bc9d4);
  opacity: 0.9;
}

.app-psych-bias-synth {
  margin: 0 0 clamp(36px, 5vw, 52px);
}

.app-psych-bias-synth__head {
  margin-bottom: clamp(20px, 3vw, 28px);
  max-width: 42rem;
}

.app-psych-bias-synth__title {
  margin: 0 0 10px;
  font-size: clamp(1.08rem, 2.2vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
}

.app-psych-bias-synth__intro {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: rgba(244, 246, 250, 0.66);
}

.app-psych-bias-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 16px);
  max-width: min(52rem, 100%);
}

.app-psych-bias-timeline__item {
  margin: 0;
  padding: 0;
}

.app-psych-bias-timeline__card {
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.5vw, 24px);
  padding-left: clamp(20px, 2.8vw, 26px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--bias-accent, #6bc9d4);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05) 0%, rgba(8, 15, 29, 0.82) 45%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.app-psych-bias-timeline__card p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.68;
  color: rgba(244, 246, 250, 0.88);
}

.app-psych-bias-marks {
  margin: 0 0 clamp(36px, 5vw, 52px);
}

.app-psych-bias-marks__head {
  margin-bottom: clamp(18px, 2.8vw, 26px);
  max-width: 44rem;
}

.app-psych-bias-marks__title {
  margin: 0 0 10px;
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}

.app-psych-bias-marks__intro {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: rgba(244, 246, 250, 0.66);
}

.app-psych-bias-marks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
}

.app-psych-bias-mark-card {
  position: relative;
  padding: clamp(18px, 2.5vw, 24px) clamp(16px, 2vw, 20px) clamp(20px, 2.8vw, 26px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(8, 15, 29, 0.88) 50%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
  min-height: 0;
}

.app-psych-bias-mark-card__p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.62;
  color: rgba(244, 246, 250, 0.82);
}

.app-psych-bias-frame {
  margin: 0 0 clamp(28px, 4vw, 40px);
}

.app-psych-bias-frame__inner {
  padding: clamp(22px, 3.2vw, 32px) clamp(22px, 3vw, 32px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(195deg, rgba(255, 255, 255, 0.07) 0%, rgba(12, 20, 36, 0.92) 55%);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-color: rgba(224, 196, 132, 0.22);
}

.app-psych-bias-frame__label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.95);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(224, 196, 132, 0.28);
}

.app-psych-bias-frame__p {
  margin: 0;
  font-size: clamp(0.92rem, 1.5vw, 1.02rem);
  line-height: 1.68;
  font-style: italic;
  color: rgba(244, 248, 252, 0.9);
}

.app-psych-play__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(16px, 2.5vw, 24px);
  align-items: start;
}

.app-psych-tile {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 15, 29, 0.55);
  padding: 18px 20px;
  margin-bottom: 14px;
}

.app-psych-tile__label {
  margin: 0 0 14px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.45);
}

.app-psych-bubble {
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 14px 14px 14px 4px;
  border-left: 3px solid rgba(107, 201, 212, 0.55);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.89rem;
  line-height: 1.62;
  color: rgba(244, 246, 250, 0.85);
}

.app-psych-bubble--alt {
  border-left-color: rgba(224, 196, 132, 0.55);
  border-radius: 14px 14px 4px 14px;
}

.app-psych-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.app-psych-rail__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.app-psych-rail__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #0b1020;
  background: linear-gradient(145deg, #e0c484, #c4a86a);
}

.app-psych-rail__step p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.58;
  color: rgba(244, 246, 250, 0.78);
}

.app-psych-tile--pull {
  background: linear-gradient(135deg, rgba(224, 196, 132, 0.1) 0%, rgba(8, 15, 29, 0.75) 100%);
  border-color: rgba(224, 196, 132, 0.22);
}

.app-psych-pull {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.65;
  font-style: italic;
  color: rgba(244, 246, 250, 0.88);
}

.app-psych-play__fine {
  margin: 22px 0 14px;
  font-size: 0.74rem;
  line-height: 1.55;
  color: rgba(244, 246, 250, 0.45);
  max-width: 52rem;
}

.app-psych-play__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 2px 0 40px;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: rgba(244, 246, 250, 0.82);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  max-width: 100%;
  box-sizing: border-box;
}

.app-psych-play__back:hover {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(224, 196, 132, 0.32);
  background: rgba(255, 255, 255, 0.05);
}

.app-psych-play__back:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.75);
  outline-offset: 2px;
}

.app-auth--modules .app-psych-play__crumb,
.app-auth--objectifs-vie .app-psych-play__crumb,
.app-auth--communaute .app-psych-play__crumb {
  margin-bottom: 8px;
}

/* Croyance page extras */
.app-psych-play__hero--croy {
  grid-template-columns: 1fr;
}

.app-psych-croy-hero__mark {
  font-size: 4rem;
  line-height: 0.5;
  color: rgba(224, 196, 132, 0.12);
  margin-bottom: -0.2em;
}

.app-psych-croy-spotlight {
  margin: 0 0 clamp(22px, 4vw, 32px);
  padding: clamp(16px, 2.5vw, 22px) clamp(18px, 3vw, 28px);
  border-radius: 18px;
  font-size: clamp(0.95rem, 1.55vw, 1.08rem);
  line-height: 1.68;
  color: rgba(244, 246, 250, 0.92);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.app-psych-croy-spotlight.app-psych-bias-spotlight {
  border-left: 3px solid var(--bias-accent, #6bc9d4);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.22);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.03) 40%, rgba(8, 15, 29, 0.4) 100%);
}

/* Croyance — avant / après (bloc principal) */
.app-psych-croy-versus {
  margin: 0 0 clamp(32px, 5vw, 48px);
}

.app-psych-croy-versus__head {
  margin-bottom: clamp(18px, 3vw, 26px);
}

.app-psych-croy-versus__title {
  margin: 0 0 10px;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
}

.app-psych-croy-versus__lede {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.62;
  color: rgba(244, 246, 250, 0.65);
}

.app-psych-croy-versus__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 100px) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 18px);
  align-items: stretch;
}

.app-psych-croy-versus__panel {
  position: relative;
  padding: clamp(22px, 3.5vw, 36px) clamp(20px, 3vw, 32px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-height: clamp(200px, 28vh, 280px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.app-psych-croy-versus__panel--before {
  background: linear-gradient(165deg, rgba(255, 90, 110, 0.14) 0%, rgba(12, 18, 32, 0.94) 55%);
  border-color: rgba(255, 130, 150, 0.28);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-psych-croy-versus__panel--after {
  background: linear-gradient(195deg, rgba(107, 201, 212, 0.16) 0%, rgba(12, 22, 36, 0.94) 50%);
  border-color: rgba(107, 201, 212, 0.35);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-psych-croy-versus__tag {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: clamp(14px, 2vw, 20px);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 210, 218, 0.95);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 160, 175, 0.35);
}

.app-psych-croy-versus__tag--after {
  color: rgba(200, 245, 252, 0.98);
  border-color: rgba(107, 201, 212, 0.45);
  background: rgba(0, 0, 0, 0.28);
}

.app-psych-croy-versus__myth {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #ffc8d4;
}

.app-psych-croy-versus__shift {
  margin: 0;
  font-size: clamp(0.95rem, 1.9vw, 1.15rem);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: rgba(244, 252, 255, 0.94);
}

.app-psych-croy-versus__bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0;
}

.app-psych-croy-versus__bridge-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.85);
}

.app-psych-croy-versus__bridge-arrow {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 300;
  line-height: 1;
  color: rgba(224, 196, 132, 0.95);
  text-shadow: 0 0 28px rgba(224, 196, 132, 0.35);
}

@media (max-width: 1180px) {
  .app-psy-prof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .app-psy-prof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .app-psy-prof-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  .app-psych-play__layout {
    grid-template-columns: 1fr;
  }

  .app-psych-croy-versus__grid {
    grid-template-columns: 1fr;
  }

  .app-psych-croy-versus__bridge {
    flex-direction: row;
    padding: 12px 0;
    min-height: auto;
  }

  .app-psych-croy-versus__bridge-arrow {
    transform: rotate(90deg);
  }

  .app-psych-croy-versus__panel {
    min-height: 0;
  }

  .app-psych-bias-marks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-psych-play__hero--bias {
    grid-template-columns: 1fr;
    gap: clamp(14px, 3vw, 20px);
  }

  .app-psych-bias-hero__aside {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: clamp(12px, 3vw, 18px);
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    padding: clamp(12px, 2vw, 16px) clamp(16px, 3vw, 22px);
  }

  .app-psych-bias-marks__grid {
    grid-template-columns: 1fr;
  }

  .app-psych-bias-mark-card {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .app-psy-prof-banner {
    font-size: 0.78rem;
    padding: 10px 12px;
  }
}

/* Objectifs de vie — app */
.app-auth--objectifs-vie {
  position: relative;
  overflow: hidden;
}

.app-life__ambient {
  position: absolute;
  inset: -30% -15% auto;
  height: min(85vh, 720px);
  background:
    radial-gradient(ellipse 55% 45% at 18% 12%, rgba(107, 201, 212, 0.18) 0%, transparent 52%),
    radial-gradient(ellipse 50% 40% at 82% 8%, rgba(224, 196, 132, 0.14) 0%, transparent 48%),
    radial-gradient(ellipse 45% 38% at 55% 75%, rgba(185, 168, 255, 0.1) 0%, transparent 50%);
  opacity: 0.95;
  pointer-events: none;
}

.app-life__crumb {
  position: relative;
  z-index: 1;
}

.app-life__hero {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.app-life__title {
  max-width: 22ch;
}

.app-life__lead {
  max-width: 44rem;
}

.app-life__root {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.app-life__fine {
  position: relative;
  z-index: 1;
  margin-top: clamp(36px, 5vw, 52px);
}

/* Communauté — app (forum à venir) */
.app-auth--communaute {
  position: relative;
  overflow: hidden;
}

.app-com__ambient {
  position: absolute;
  inset: -28% -12% auto;
  height: min(78vh, 640px);
  background:
    radial-gradient(ellipse 52% 44% at 12% 12%, rgba(255, 150, 172, 0.16) 0%, transparent 52%),
    radial-gradient(ellipse 48% 40% at 88% 8%, rgba(168, 182, 255, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 44% 38% at 48% 80%, rgba(107, 201, 212, 0.08) 0%, transparent 50%);
  opacity: 0.95;
  pointer-events: none;
}

.app-com__crumb {
  position: relative;
  z-index: 1;
}

.app-com__hero {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(24px, 3.5vw, 36px);
}

.app-com__title {
  max-width: 20ch;
}

.app-com__lead {
  max-width: 44rem;
}

.app-com__panel {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 18px;
  border: 1px solid rgba(255, 175, 190, 0.18);
  background:
    linear-gradient(165deg, rgba(255, 160, 178, 0.07) 0%, rgba(0, 0, 0, 0.24) 48%, rgba(140, 160, 255, 0.04) 100%);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 210, 218, 0.07);
}

.app-com__placeholder {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(244, 246, 250, 0.88);
}

.app-com__note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(244, 246, 250, 0.48);
}

.app-com__panel--forum {
  padding: clamp(18px, 2.5vw, 26px);
}

.app-com__forum-cta {
  margin: clamp(14px, 2.2vw, 22px) 0 0;
}

.app-com__forum-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.app-com__hero--forum-tight .app-com__lead--forum-tight {
  margin-bottom: 0;
  max-width: 44rem;
}

.app-com__panel--forum-only {
  padding: clamp(14px, 2vw, 22px);
}

.app-auth--forum-full .app-forum-root {
  min-height: min(62vh, 640px);
}

.app-com__note--forum-top {
  margin: 0 0 clamp(14px, 2vw, 20px);
}

/* Forum communauté */
.app-forum-root {
  position: relative;
  min-height: min(52vh, 520px);
}

.app-forum__loading {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(244, 246, 250, 0.65);
}

.app-forum__shell {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
  align-items: stretch;
}

.app-forum__shell--3col {
  grid-template-columns: minmax(0, 200px) minmax(0, 260px) minmax(0, 1fr);
}

.app-forum__themes {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.app-forum__themes-head {
  padding: 14px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-forum__themes-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 220, 255, 0.88);
}

.app-forum__themes-list {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: min(58vh, 560px);
  overflow-y: auto;
  padding: 8px;
}

.app-forum__themes-empty {
  margin: 12px 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.5);
}

.app-forum__theme-btn {
  width: 100%;
  margin: 0 0 6px;
  padding: 10px 10px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(244, 246, 250, 0.92);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.app-forum__theme-btn:hover {
  border-color: rgba(140, 200, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}

.app-forum__theme-btn.is-active {
  border-color: rgba(140, 200, 255, 0.45);
  background: rgba(100, 170, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(180, 220, 255, 0.08);
}

.app-forum__theme-name {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
}

.app-forum__theme-count {
  display: block;
  margin-top: 4px;
  font-size: 0.65rem;
  color: rgba(244, 246, 250, 0.42);
}

.app-forum__main-head {
  margin-bottom: 14px;
}

.app-forum__main-kicker {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.45);
}

.app-forum__breadcrumb {
  margin: 0 0 8px;
  font-size: 0.72rem;
  color: rgba(180, 220, 255, 0.75);
}

.app-forum__breadcrumb-theme {
  font-weight: 700;
}

.app-forum__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a8b0c0' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.app-forum__aside {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.app-forum__aside-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-forum__aside-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 200, 210, 0.85);
}

.app-forum__list-wrap {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: min(58vh, 560px);
  overflow-y: auto;
  padding: 8px;
}

.app-forum__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-forum__list-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  margin: 0 0 6px;
  padding: 10px 12px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(244, 246, 250, 0.92);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.app-forum__list-btn:hover {
  border-color: rgba(255, 185, 200, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

.app-forum__list-btn.is-active {
  border-color: rgba(255, 185, 200, 0.38);
  background: rgba(255, 160, 180, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 228, 0.06);
}

.app-forum__list-title {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.app-forum__list-meta {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  color: rgba(244, 246, 250, 0.45);
}

.app-forum__empty {
  margin: 12px 10px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(244, 246, 250, 0.55);
}

.app-forum__main {
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
  padding: clamp(16px, 2.2vw, 22px);
}

.app-forum__placeholder {
  margin: 0;
  padding: clamp(24px, 4vw, 40px) 12px;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(244, 246, 250, 0.55);
}

.app-forum__thread-h {
  margin: 0 0 8px;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
}

.app-forum__op-meta {
  margin: 0 0 16px;
  font-size: 0.78rem;
  color: rgba(244, 246, 250, 0.48);
}

.app-forum__bubble {
  position: relative;
  padding: 12px 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.app-forum__bubble--op {
  border-color: rgba(255, 185, 200, 0.2);
  background: linear-gradient(165deg, rgba(255, 160, 180, 0.08) 0%, rgba(0, 0, 0, 0.12) 100%);
}

.app-forum__author {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 210, 218, 0.9);
  margin-bottom: 8px;
}

.app-forum__time {
  display: block;
  margin: 0 0 8px;
  font-size: 0.65rem;
  color: rgba(244, 246, 250, 0.42);
}

.app-forum__body {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(244, 246, 250, 0.9);
}

.app-forum__body p {
  margin: 0 0 0.75em;
}

.app-forum__body p:last-child {
  margin-bottom: 0;
}

.app-forum__replies {
  margin-top: clamp(22px, 3vw, 28px);
}

.app-forum__replies-h {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.5);
}

.app-forum__reply {
  margin-bottom: 12px;
}

.app-forum__reply:last-child {
  margin-bottom: 0;
}

.app-forum__composer {
  margin-top: clamp(20px, 3vw, 28px);
  padding-top: clamp(16px, 2.5vw, 22px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-forum__label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(244, 246, 250, 0.65);
}

.app-forum__input,
.app-forum__textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* background-color seulement : le <select> garde background-image (chevron) + no-repeat */
  background-color: rgba(0, 0, 0, 0.25);
  color: var(--white);
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.5;
}

.app-forum__textarea {
  resize: vertical;
  min-height: 96px;
}

.app-forum__input:focus-visible,
.app-forum__textarea:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.65);
  outline-offset: 2px;
}

/* Boutons forum : mêmes classes que le reste du site (.btn-primary / .btn-secondary + .app-life-btn) */
.app-forum__composer .btn-primary.app-life-btn {
  margin-top: 6px;
}

.app-forum__live {
  margin: clamp(12px, 2vw, 16px) 0 0;
  min-height: 1.25em;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 200, 200, 0.88);
}

.app-forum-dialog {
  position: fixed;
  inset: 0;
  z-index: 10080;
  width: min(480px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: fit-content;
  max-height: min(90vh, 720px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #0a101c;
  color: var(--white);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}

.app-forum-dialog::backdrop {
  background: rgba(2, 6, 14, 0.72);
  backdrop-filter: blur(4px);
}

.app-forum-dialog__form {
  padding: clamp(16px, 3vw, 22px);
}

.app-forum-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.app-forum-dialog__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.app-forum-dialog__x {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: -6px -6px 0 0;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(244, 246, 250, 0.85);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.app-forum-dialog__x:hover {
  background: rgba(255, 255, 255, 0.1);
}

.app-forum-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 1020px) {
  .app-forum__shell--3col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "themes aside"
      "main main";
  }

  .app-forum__shell--3col .app-forum__themes {
    grid-area: themes;
  }

  .app-forum__shell--3col .app-forum__aside {
    grid-area: aside;
  }

  .app-forum__shell--3col .app-forum__main {
    grid-area: main;
  }

  .app-forum__themes-list {
    max-height: 200px;
  }
}

@media (max-width: 820px) {
  .app-forum__shell {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .app-forum__shell--3col {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  /*
   * Sous 820px, la règle max-width 1020px s’applique encore et laisse grid-area: themes|aside|main
   * sur les enfants alors que le parent n’a plus de zones nommées → chevauchement (surtout mobile).
   */
  .app-forum__shell--3col .app-forum__themes,
  .app-forum__shell--3col .app-forum__aside,
  .app-forum__shell--3col .app-forum__main {
    grid-area: auto;
    grid-row: auto;
    grid-column: auto;
    min-width: 0;
    width: 100%;
  }

  .app-forum__list-wrap {
    max-height: min(38vh, 280px);
  }

  .app-forum__themes-list {
    max-height: min(32vh, 220px);
  }

  .app-forum__main {
    min-height: min(42vh, 360px);
  }

  .app-forum__aside-head .btn-primary.app-life-btn {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .app-forum__themes-list {
    max-height: min(28vh, 200px);
  }

  .app-forum__list-wrap {
    max-height: min(34vh, 260px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-forum__list-btn {
    transition: none;
  }
}

.app-com__fine {
  position: relative;
  z-index: 1;
  margin-top: clamp(28px, 4vw, 44px);
}

/* Communauté — palette claire (hub /app-communaute/) */
body.solide-app-communaute--palette-light {
  color-scheme: light;
  background: #e9ecf2;
  color: #121826;
}

body.solide-app-communaute--palette-light .nav.stuck {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(18, 24, 38, 0.06), 0 12px 40px rgba(18, 24, 38, 0.08);
}

body.solide-app-communaute--palette-light .nav__burger {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(18, 24, 38, 0.12);
  color: #1a2233;
}

body.solide-app-communaute--palette-light .mobile-nav {
  background: rgba(240, 242, 248, 0.92);
}

body.solide-app-communaute--palette-light .mobile-nav__panel {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 247, 252, 0.99) 100%);
  border-color: rgba(18, 24, 38, 0.1);
  box-shadow: 0 18px 48px rgba(18, 24, 38, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.solide-app-communaute--palette-light .mobile-nav__link {
  color: rgba(26, 34, 51, 0.82);
  border-bottom-color: rgba(18, 24, 38, 0.06);
}

body.solide-app-communaute--palette-light .app-auth__title {
  color: #0e1420;
}

body.solide-app-communaute--palette-light .app-com__hub-lead {
  color: rgba(26, 34, 51, 0.62);
}

body.solide-app-communaute--palette-light .app-com__ambient {
  opacity: 0.55;
  filter: saturate(0.92);
}

body.solide-app-communaute--palette-light .app-com__hub-panel {
  border-color: rgba(18, 24, 38, 0.1);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 36px rgba(18, 24, 38, 0.08);
}

body.solide-app-communaute--palette-light .app-psych-play__crumb {
  color: rgba(26, 34, 51, 0.48);
}

body.solide-app-communaute--palette-light .app-psych-play__crumb a {
  color: rgba(140, 100, 40, 0.92);
}

body.solide-app-communaute--palette-light .app-psych-play__kicker {
  color: rgba(140, 100, 40, 0.88);
}

body.solide-app-communaute--palette-light .app-psych-play__back {
  color: rgba(26, 34, 51, 0.82);
  border-color: rgba(18, 24, 38, 0.12);
  background: rgba(255, 255, 255, 0.75);
}

body.solide-app-communaute--palette-light .app-psych-play__back:hover {
  color: #0e1420;
  border-color: rgba(140, 100, 40, 0.35);
  background: #fff;
}

body.solide-app-communaute--palette-light .app-com__fine {
  color: rgba(26, 34, 51, 0.48);
}

body.solide-app-communaute--palette-light .app-forum__loading {
  color: rgba(26, 34, 51, 0.52);
}

body.solide-app-communaute--palette-light .app-forum__themes--hub {
  border-color: rgba(18, 24, 38, 0.1);
  background: rgba(255, 255, 255, 0.72);
}

body.solide-app-communaute--palette-light .app-forum__themes--hub .app-forum__themes-head {
  border-bottom-color: rgba(18, 24, 38, 0.08);
}

body.solide-app-communaute--palette-light .app-forum__themes-kicker {
  color: rgba(26, 34, 51, 0.45);
}

body.solide-app-communaute--palette-light .app-forum__themes--hub .app-forum__themes-title {
  color: rgba(50, 70, 110, 0.88);
}

body.solide-app-communaute--palette-light .app-forum__themes--hub .app-forum__theme-btn {
  background: transparent;
}

body.solide-app-communaute--palette-light .app-forum__themes--hub .app-forum__theme-btn:hover {
  background: rgba(18, 24, 38, 0.04);
}

body.solide-app-communaute--palette-light .app-forum__themes--hub .app-forum__theme-btn.is-active {
  border-color: rgba(140, 100, 40, 0.28);
  background: rgba(224, 196, 132, 0.2);
}

body.solide-app-communaute--palette-light .app-forum__theme-dot {
  box-shadow: 0 0 0 1px rgba(18, 24, 38, 0.12);
}

body.solide-app-communaute--palette-light .app-forum__themes--hub .app-forum__theme-name {
  color: rgba(18, 24, 38, 0.92);
}

body.solide-app-communaute--palette-light .app-forum__themes--hub .app-forum__theme-count {
  color: rgba(26, 34, 51, 0.5);
}

body.solide-app-communaute--palette-light .app-forum__aside--hub {
  border-color: rgba(18, 24, 38, 0.1);
  background: rgba(255, 255, 255, 0.78);
}

body.solide-app-communaute--palette-light .app-forum__list-head {
  color: rgba(26, 34, 51, 0.42);
  border-bottom-color: rgba(18, 24, 38, 0.08);
}

body.solide-app-communaute--palette-light .app-forum__aside--hub .app-forum__list-title {
  color: rgba(18, 24, 38, 0.94);
}

body.solide-app-communaute--palette-light .app-forum__aside--hub .app-forum__list-meta {
  color: rgba(26, 34, 51, 0.48);
}

body.solide-app-communaute--palette-light .app-forum__list-replies {
  color: rgba(180, 75, 45, 0.95);
  background: rgba(255, 130, 90, 0.12);
  border-color: rgba(220, 100, 70, 0.22);
}

body.solide-app-communaute--palette-light .app-forum__main--hub {
  border-color: rgba(18, 24, 38, 0.08);
  background: rgba(255, 255, 255, 0.82);
}

body.solide-app-communaute--palette-light .app-forum__themes {
  border-color: rgba(18, 24, 38, 0.1);
  background: rgba(255, 255, 255, 0.75);
}

body.solide-app-communaute--palette-light .app-forum__themes-head {
  border-bottom-color: rgba(18, 24, 38, 0.08);
}

body.solide-app-communaute--palette-light .app-forum__themes-title {
  color: rgba(50, 70, 110, 0.88);
}

body.solide-app-communaute--palette-light .app-forum__themes-empty {
  color: rgba(26, 34, 51, 0.48);
}

body.solide-app-communaute--palette-light .app-forum__theme-btn {
  background: rgba(18, 24, 38, 0.03);
  color: rgba(18, 24, 38, 0.92);
}

body.solide-app-communaute--palette-light .app-forum__theme-btn:hover {
  border-color: rgba(70, 110, 180, 0.22);
  background: rgba(18, 24, 38, 0.05);
}

body.solide-app-communaute--palette-light .app-forum__theme-btn.is-active {
  border-color: rgba(140, 100, 40, 0.3);
  background: rgba(224, 196, 132, 0.22);
}

body.solide-app-communaute--palette-light .app-forum__aside {
  border-color: rgba(18, 24, 38, 0.1);
  background: rgba(255, 255, 255, 0.78);
}

body.solide-app-communaute--palette-light .app-forum__aside-head {
  border-bottom-color: rgba(18, 24, 38, 0.08);
}

body.solide-app-communaute--palette-light .app-forum__aside-title {
  color: rgba(160, 70, 95, 0.88);
}

body.solide-app-communaute--palette-light .app-forum__list-btn {
  background: rgba(18, 24, 38, 0.03);
  color: rgba(18, 24, 38, 0.92);
}

body.solide-app-communaute--palette-light .app-forum__list-btn:hover {
  border-color: rgba(200, 100, 120, 0.22);
  background: rgba(255, 255, 255, 0.95);
}

body.solide-app-communaute--palette-light .app-forum__list-btn.is-active {
  border-color: rgba(200, 100, 120, 0.35);
  background: rgba(255, 170, 185, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 210, 0.2);
}

body.solide-app-communaute--palette-light .app-forum__list-title {
  color: rgba(18, 24, 38, 0.94);
}

body.solide-app-communaute--palette-light .app-forum__list-meta {
  color: rgba(26, 34, 51, 0.48);
}

body.solide-app-communaute--palette-light .app-forum__empty {
  color: rgba(26, 34, 51, 0.5);
}

body.solide-app-communaute--palette-light .app-forum__main {
  border-color: rgba(18, 24, 38, 0.1);
  background: rgba(255, 255, 255, 0.86);
}

body.solide-app-communaute--palette-light .app-forum__placeholder {
  color: rgba(26, 34, 51, 0.48);
}

body.solide-app-communaute--palette-light .app-forum__main-kicker {
  color: rgba(26, 34, 51, 0.45);
}

body.solide-app-communaute--palette-light .app-forum__breadcrumb {
  color: rgba(50, 80, 140, 0.75);
}

body.solide-app-communaute--palette-light .app-forum__thread-h {
  color: #0e1420;
}

body.solide-app-communaute--palette-light .app-forum__op-meta {
  color: rgba(26, 34, 51, 0.5);
}

body.solide-app-communaute--palette-light .app-forum__bubble {
  border-color: rgba(18, 24, 38, 0.1);
  background: rgba(246, 248, 252, 0.95);
}

body.solide-app-communaute--palette-light .app-forum__bubble--op {
  border-color: rgba(220, 120, 140, 0.25);
  background: linear-gradient(165deg, rgba(255, 210, 218, 0.35) 0%, rgba(255, 255, 255, 0.9) 100%);
}

body.solide-app-communaute--palette-light .app-forum__author {
  color: rgba(150, 60, 85, 0.88);
}

body.solide-app-communaute--palette-light .app-forum__time {
  color: rgba(26, 34, 51, 0.45);
}

body.solide-app-communaute--palette-light .app-forum__body {
  color: rgba(18, 24, 38, 0.9);
}

body.solide-app-communaute--palette-light .app-forum__replies-h {
  color: rgba(26, 34, 51, 0.48);
}

body.solide-app-communaute--palette-light .app-forum__composer {
  border-top-color: rgba(18, 24, 38, 0.08);
}

body.solide-app-communaute--palette-light .app-forum__label {
  color: rgba(26, 34, 51, 0.58);
}

body.solide-app-communaute--palette-light .app-forum__input,
body.solide-app-communaute--palette-light .app-forum__textarea {
  border-color: rgba(18, 24, 38, 0.14);
  background-color: #fff;
  color: #121826;
}

body.solide-app-communaute--palette-light .app-forum-dialog .btn-secondary.app-life-btn {
  border-color: rgba(18, 24, 38, 0.18);
  color: rgba(26, 34, 51, 0.82);
}

body.solide-app-communaute--palette-light .app-forum-dialog .btn-secondary.app-life-btn:hover {
  background: rgba(18, 24, 38, 0.04);
  border-color: rgba(18, 24, 38, 0.28);
  color: #121826;
}

body.solide-app-communaute--palette-light .app-forum__live {
  color: rgba(160, 55, 55, 0.88);
}

body.solide-app-communaute--palette-light .app-forum-dialog {
  border-color: rgba(18, 24, 38, 0.12);
  background: #fff;
  color: #121826;
  box-shadow: 0 28px 80px rgba(18, 24, 38, 0.18);
}

body.solide-app-communaute--palette-light .app-forum-dialog::backdrop {
  background: rgba(12, 18, 30, 0.45);
}

body.solide-app-communaute--palette-light .app-forum-dialog__x {
  background: rgba(18, 24, 38, 0.06);
  color: rgba(18, 24, 38, 0.75);
}

body.solide-app-communaute--palette-light .app-forum-dialog__x:hover {
  background: rgba(18, 24, 38, 0.1);
}

body.solide-app-communaute--palette-light .nav__wp {
  color: rgba(26, 34, 51, 0.72);
  border-color: rgba(18, 24, 38, 0.14);
  background: rgba(255, 255, 255, 0.55);
}

body.solide-app-communaute--palette-light .nav__wp:hover {
  color: rgba(120, 82, 32, 0.95);
  border-color: rgba(180, 130, 50, 0.38);
}

body.solide-app-communaute--palette-light .app-forum__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a6578' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.app-life-ui {
  display: grid;
  gap: clamp(22px, 3.5vw, 32px);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.app-life-period-add {
  display: flex;
  justify-content: center;
  padding: 4px 0 12px;
}

.app-life-period-add--bottom {
  padding: 16px 0 2px;
}

.app-life-bottom-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.app-life-bottom-archives {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 25px;
  padding: 0 0 6px;
}

.app-life-period-add__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(107, 201, 212, 0.45);
  background: rgba(107, 201, 212, 0.12);
  color: var(--white);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.app-life-period-add__btn:hover {
  background: rgba(107, 201, 212, 0.22);
  border-color: rgba(224, 196, 132, 0.5);
  transform: scale(1.04);
}

.app-life-period {
  margin-bottom: clamp(16px, 2.5vw, 24px);
  padding: clamp(16px, 2.2vw, 22px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.035) 0%, rgba(8, 12, 24, 0.72) 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  scroll-margin-top: clamp(72px, 12vh, 120px);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

.app-life-period .app-life-vstep {
  padding-bottom: 0;
}

.app-life-vstep__add-obj {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: clamp(14px, 2.2vw, 20px);
  padding-top: 4px;
}

/* « Ajouter un objectif » : +15 % vs .app-life-btn--sm (0.78rem / 6px 12px) */
.app-life-vstep__add-obj .btn-primary.app-life-btn.app-life-btn--sm.app-life-vstep__add-btn {
  font-size: calc(0.78rem * 1.15);
  line-height: 1.4;
  padding: calc(6px * 1.15) calc(12px * 1.15);
}

.app-life-global-empty--lite {
  padding: clamp(20px, 4vw, 36px) clamp(14px, 2.5vw, 24px);
  background: rgba(0, 0, 0, 0.12);
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.08);
}

.app-life-encode-block--hidden {
  display: none;
}

.app-life-suggestions--hidden {
  display: none;
}

.app-life-examples-row {
  margin: 4px 0 12px;
}

.app-life-examples-row--with-bulb {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 14px;
  margin: 10px 0 8px;
}

.app-life-examples-bulb-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 12rem;
  padding-top: 2px;
}

.app-life-examples-bulb__label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(224, 196, 132, 0.92);
  line-height: 1.25;
}

.app-life-examples-bulb__note {
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.48);
  max-width: min(100%, 26rem);
}

.app-life-examples-bulb {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(224, 196, 132, 0.35);
  background: linear-gradient(160deg, rgba(255, 248, 220, 0.12) 0%, rgba(0, 0, 0, 0.35) 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.app-life-examples-bulb:hover {
  border-color: rgba(255, 230, 160, 0.65);
  transform: scale(1.05);
  box-shadow: 0 0 22px rgba(255, 220, 140, 0.22), 0 8px 24px rgba(0, 0, 0, 0.3);
}

.app-life-examples-bulb:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.85);
  outline-offset: 3px;
}

.app-life-examples-bulb__ico {
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.app-life-examples-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(224, 196, 132, 0.88);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app-life-examples-link:hover {
  color: rgba(244, 246, 250, 0.95);
}

.app-life-emoji-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  max-height: 120px;
  overflow-y: auto;
  padding: 4px 0;
}

.app-life-emoji-bank__btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.app-life-emoji-bank__btn:hover {
  border-color: rgba(107, 201, 212, 0.45);
  background: rgba(107, 201, 212, 0.12);
}

.app-life-emoji-bank--modal {
  max-height: min(200px, 38vh);
  gap: 8px;
  margin: 0 0 6px;
  padding: 6px 2px;
}

.app-life-emoji-bank--modal .app-life-emoji-bank__btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 1.25rem;
}

.app-life-emoji-bank__btn--on {
  border-color: rgba(107, 201, 212, 0.75) !important;
  background: rgba(107, 201, 212, 0.2) !important;
  box-shadow: 0 0 0 1px rgba(107, 201, 212, 0.25);
}

.app-life-emoji-picker-mount {
  min-width: 0;
}

.app-life-btn--sm {
  padding: 6px 12px;
  font-size: 0.78rem;
}

.app-life-main--timeline {
  padding-top: clamp(16px, 2.5vw, 22px);
}

.app-life-steps-nav {
  position: sticky;
  top: 0;
  z-index: 12;
  margin: 0 0 14px;
  padding: 10px 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(10, 16, 30, 0.96) 0%, rgba(8, 12, 22, 0.88) 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.app-life-steps-nav__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.app-life-steps-nav__tab {
  flex: 0 0 auto;
  max-width: min(220px, 72vw);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(244, 246, 250, 0.88);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.app-life-steps-nav__tab:hover {
  border-color: rgba(107, 201, 212, 0.45);
  background: rgba(107, 201, 212, 0.12);
  color: var(--white);
}

.app-life-steps-nav__tab:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.85);
  outline-offset: 3px;
}

.app-life-vwrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.app-life-global-empty {
  text-align: center;
  padding: clamp(28px, 5vw, 48px) clamp(16px, 3vw, 32px);
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.18);
}

.app-life-global-empty__t {
  margin: 0 0 12px;
  font-size: 1.02rem;
  font-weight: 800;
  color: rgba(244, 246, 250, 0.92);
}

.app-life-global-empty__d {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(244, 246, 250, 0.58);
  max-width: 36rem;
  margin-inline: auto;
}

.app-life-vstep {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 18px;
  position: relative;
  padding-bottom: clamp(20px, 3vw, 32px);
}

.app-life-period:not(:last-child) .app-life-vstep__rail::before {
  content: '';
  position: absolute;
  top: 22px;
  bottom: calc(-8px - clamp(16px, 2.5vw, 24px));
  left: 11px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(107, 201, 212, 0.45) 0%, rgba(107, 201, 212, 0.08) 100%);
}

.app-life-vstep__rail {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.app-life-vstep__dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, #6bc9d4 0%, #3a8a9a 100%);
  box-shadow: 0 0 0 4px rgba(8, 14, 28, 0.95), 0 0 18px rgba(107, 201, 212, 0.35);
  flex-shrink: 0;
}

.app-life-vstep__panel {
  min-width: 0;
  padding-bottom: 4px;
}

.app-life-vstep__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 14px;
  position: relative;
}

.app-life-vstep__head-lead {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  flex: 1 1 min(200px, 100%);
  min-width: 0;
}

.app-life-vstep__title-stack {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-life-vstep__title {
  margin: 0;
  min-width: 0;
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
}

.app-life-vstep__end-date {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(224, 196, 132, 0.88);
}

@media (max-width: 640px) {
  .app-life-ui {
    max-width: 100%;
    overflow-x: clip;
  }

  .app-life-steps-nav__inner {
    padding: 0 6px;
    gap: 6px;
  }

  .app-life-steps-nav__tab {
    max-width: min(200px, 78vw);
    padding: 7px 10px;
    font-size: 0.72rem;
  }

  .app-life-period {
    padding: clamp(12px, 3.5vw, 18px) clamp(12px, 3vw, 16px);
  }

  .app-life-vstep {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0 12px;
    padding-bottom: clamp(16px, 4vw, 24px);
  }

  .app-life-vstep__head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .app-life-vstep__head-lead {
    flex-wrap: wrap;
    width: 100%;
  }

  .app-life-vstep__head-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .app-life-vstep__title {
    font-size: clamp(0.98rem, 4.2vw, 1.12rem);
  }

  .app-life-step-pie {
    width: 52px;
    height: 52px;
  }
}

/* Camembert de progression par période (+15 % vs 52px) */
.app-life-step-pie {
  --pct: 0;
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.app-life-step-pie__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    rgba(107, 201, 212, 0.92) calc(var(--pct) * 3.6deg),
    rgba(255, 255, 255, 0.08) 0
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.app-life-step-pie__hole {
  position: absolute;
  inset: 9px;
  z-index: 1;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(12, 18, 32, 0.98) 0%, rgba(6, 10, 20, 0.96) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.app-life-step-pie__label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  text-align: center;
  padding: 2px;
}

.app-life-step-pie__pct {
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(200, 248, 255, 0.95);
  line-height: 1.1;
}

.app-life-step-pie__sub {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(244, 246, 250, 0.42);
  line-height: 1.1;
}

.app-life-vstep__head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Boutons ronds période (↑ ↓ crayon ×) — visibles au survol de toute la carte .app-life-period */
.app-life-period-tool {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.18rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.app-life-period-tool--up,
.app-life-period-tool--down {
  font-size: 1.05rem !important;
}

.app-life-period-tool--edit {
  font-size: 1.12rem !important;
}

.app-life-icon-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: inherit;
}

.app-life-icon-solid svg {
  display: block;
}

.app-life-period-tool--edit .app-life-icon-solid svg {
  width: 1.22rem;
  height: 1.22rem;
}

.app-life-period-tool--del {
  font-size: 1.18rem !important;
  font-weight: 400 !important;
}

.app-life-period-tool--archive {
  font-size: 1.05rem !important;
}

.app-life-period-tool--archive .app-life-icon-solid svg {
  width: 1.22rem;
  height: 1.22rem;
}

.app-life-vstep__hover-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .app-life-period:hover .app-life-vstep__hover-tools,
  .app-life-period:focus-within .app-life-vstep__hover-tools {
    opacity: 1;
  }
}

.app-life-vstep__hover-tools:focus-within {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .app-life-vstep__hover-tools {
    opacity: 0.32;
  }

  .app-life-period:hover .app-life-vstep__hover-tools,
  .app-life-period:active .app-life-vstep__hover-tools,
  .app-life-period:focus-within .app-life-vstep__hover-tools {
    opacity: 1;
  }
}

.app-life-period:hover .app-life-vstep__hover-tools .app-life-period-tool,
.app-life-period:focus-within .app-life-vstep__hover-tools .app-life-period-tool {
  color: rgba(244, 246, 250, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(0, 0, 0, 0.45) !important;
}

.app-life-period:hover .app-life-vstep__hover-tools .app-life-period-tool--del,
.app-life-period:hover .app-life-vstep__hover-tools .app-life-btn--danger.app-life-period-tool,
.app-life-period:focus-within .app-life-vstep__hover-tools .app-life-period-tool--del,
.app-life-period:focus-within .app-life-vstep__hover-tools .app-life-btn--danger.app-life-period-tool {
  border-color: rgba(255, 140, 160, 0.45) !important;
  color: rgba(255, 220, 226, 0.95) !important;
}

.app-life-vstep__hover-tools .app-life-period-tool:disabled,
.app-life-vstep__hover-tools .app-life-period-tool[disabled] {
  opacity: 0.22 !important;
}

.app-life-vstep__empty {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(244, 246, 250, 0.45);
  font-style: italic;
}

.app-life-vstep__cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 18px);
}

@media (max-width: 720px) {
  .app-life-vstep__cats {
    grid-template-columns: 1fr;
  }
}

.app-life-cat.app-life-cat--compact {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.app-life-catalog-list.app-life-catalog-list--pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex-direction: unset;
  gap: 10px 12px;
  max-height: min(35vh, 400px);
}

@media (max-width: 400px) {
  .app-life-catalog-list.app-life-catalog-list--pick {
    grid-template-columns: 1fr;
  }
}

.app-life-catalog-pick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.app-life-catalog-pick:hover {
  border-color: rgba(224, 196, 132, 0.35);
  background: rgba(107, 201, 212, 0.08);
}

.app-life-catalog-pick--on {
  border-color: rgba(107, 201, 212, 0.5);
  background: linear-gradient(145deg, rgba(107, 201, 212, 0.15) 0%, rgba(8, 15, 29, 0.75) 100%);
}

.app-life-catalog-pick__emoji {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}

.app-life-catalog-pick__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.app-life-catalog-pick__t {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--white);
}

.app-life-catalog-pick__d {
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.52);
}

.app-life-suggestions {
  margin-bottom: 8px;
}

.app-life-suggestions__title {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.8);
}

.app-life-suggestions__hint {
  margin: 0 0 10px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.48);
}

.app-life-suggestions__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-life-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(244, 246, 250, 0.88);
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.app-life-chip:hover {
  border-color: rgba(107, 201, 212, 0.4);
  background: rgba(107, 201, 212, 0.1);
}

select.app-life-input {
  cursor: pointer;
  min-height: 42px;
}

.app-life-timeline__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(10px, 1.5vw, 14px);
}

.app-life-timeline__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.app-life-tab {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 15, 29, 0.55);
  color: rgba(244, 246, 250, 0.82);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.app-life-tab:hover {
  border-color: rgba(224, 196, 132, 0.35);
  color: var(--white);
}

.app-life-tab--active {
  border-color: rgba(107, 201, 212, 0.45);
  background: linear-gradient(145deg, rgba(107, 201, 212, 0.2) 0%, rgba(8, 15, 29, 0.75) 100%);
  color: var(--white);
  box-shadow: 0 0 24px rgba(107, 201, 212, 0.12);
}

.app-life-btn--add-step {
  flex: 0 0 auto;
  white-space: nowrap;
}

.app-life-main {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(8, 12, 24, 0.88) 45%);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: clamp(20px, 3vw, 28px) clamp(18px, 2.5vw, 26px);
  display: grid;
  gap: clamp(18px, 2.5vw, 24px);
}

.app-life-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 20px;
}

.app-life-toolbar__title {
  margin: 0;
  font-size: clamp(1.12rem, 2.2vw, 1.38rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
  flex: 1 1 12rem;
}

.app-life-toolbar__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.app-life-btn--danger {
  border-color: rgba(255, 120, 140, 0.35);
  color: rgba(255, 200, 208, 0.95);
}

.app-life-btn--danger:disabled {
  opacity: 0.35;
}

.app-life-bucket-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-life-bucket-head__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
}

.app-life-bucket-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-life-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
}

.app-life-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(24px, 4vw, 36px);
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(244, 246, 250, 0.65);
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.2);
}

.app-life-cat {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(6, 10, 22, 0.82) 50%);
  padding: clamp(16px, 2.2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.app-life-cat__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-life-cat__emoji {
  font-size: 1.65rem;
  line-height: 1;
  flex-shrink: 0;
}

.app-life-cat__titles {
  flex: 1 1 auto;
  min-width: 0;
}

.app-life-cat__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

.app-life-cat__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .app-life-cat:hover .app-life-cat__actions {
    opacity: 1;
  }
}

.app-life-cat__actions:focus-within {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .app-life-cat__actions {
    opacity: 0.28;
  }

  .app-life-cat:hover .app-life-cat__actions,
  .app-life-cat:active .app-life-cat__actions {
    opacity: 1;
  }
}

.app-life-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: rgba(244, 246, 250, 0.85);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.app-life-icon-btn:hover {
  border-color: rgba(224, 196, 132, 0.35);
}

.app-life-icon-btn--danger:hover {
  border-color: rgba(255, 120, 140, 0.45);
  color: #ffc9d0;
}

.app-life-cat__desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.58;
  color: rgba(244, 246, 250, 0.62);
}

.app-life-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-life-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.app-life-item__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.app-life-item__text {
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.9);
}

.app-life-item__emoji {
  display: inline;
  margin-right: 0.12em;
  font-size: 1.08em;
  vertical-align: -0.05em;
}

.app-life-item--done .app-life-item__text {
  text-decoration: line-through;
  opacity: 0.55;
}

.app-life-item__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  max-width: min(100%, 220px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .app-life-item:hover .app-life-item__btns {
    opacity: 1;
  }
}

.app-life-item__btns:focus-within {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .app-life-item__btns {
    opacity: 0.28;
  }

  .app-life-item:hover .app-life-item__btns,
  .app-life-item:active .app-life-item__btns {
    opacity: 1;
  }
}

.app-life-mini-btn {
  padding: 4px 8px;
  font-size: 0.78rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(244, 246, 250, 0.65);
  cursor: pointer;
}

.app-life-mini-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
}

.app-life-mini-btn--icon .app-life-icon-solid svg {
  width: 14px;
  height: 14px;
}

.app-life-mini-btn:hover {
  color: var(--white);
  border-color: rgba(224, 196, 132, 0.3);
}

.app-life-mini-btn--danger:hover {
  border-color: rgba(255, 120, 140, 0.4);
  color: #ffc9d0;
}

.app-life-mini-btn--visual {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 4px 8px;
  border-color: rgba(224, 196, 132, 0.35);
  color: rgba(224, 196, 132, 0.95);
}

.app-life-mini-btn--visual:hover {
  border-color: rgba(224, 196, 132, 0.55);
  color: #fff0d4;
}

.app-life-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(14px, 2.5vw, 22px);
}

.app-life-view-tab {
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 15, 29, 0.45);
  color: rgba(244, 246, 250, 0.55);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.app-life-view-tab--on {
  border-color: rgba(224, 196, 132, 0.45);
  color: #f4f5f7;
  background: rgba(224, 196, 132, 0.12);
}

.app-life-view-pane--hidden {
  display: none !important;
}

/* Onglet Moodboard : pas de FAB / Archives / reset ni du disclaimer sous le root */
.app-life-ui--moodboard .app-life-bottom-stack,
.app-life-ui--moodboard .app-life-footer-tools {
  display: none;
}

.app-life__root.app-life__root--moodboard + .app-life__fine {
  display: none;
}

.app-life-moodboard__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: clamp(10px, 1.8vw, 18px);
}

.app-life-moodboard__file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-life-moodboard__empty {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(244, 246, 250, 0.62);
  padding: clamp(20px, 4vw, 36px) 0;
}

.app-life-moodboard__grid--masonry {
  column-count: 2;
  column-gap: clamp(12px, 2vw, 20px);
}

@media (max-width: 520px) {
  .app-life-moodboard__grid--masonry {
    column-count: 1;
  }
}

.app-life-moodboard__tile {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 clamp(12px, 2vw, 20px);
  break-inside: avoid;
  page-break-inside: avoid;
  vertical-align: top;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 15, 29, 0.55);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.app-life-moodboard__thumb {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
  text-align: left;
}

.app-life-moodboard__thumb:focus-visible {
  outline: 2px solid rgba(224, 196, 132, 0.65);
  outline-offset: 2px;
}

.app-life-moodboard__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: top;
}

.app-life-moodboard__del {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 12, 22, 0.72);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.app-life-moodboard__del:hover {
  border-color: rgba(255, 140, 160, 0.5);
  color: #ffc9d0;
}

.app-life-moodboard__cap {
  padding: 10px 12px 12px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.78);
}

.app-life-visual-recap {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.35;
}

.app-life-visual-file {
  position: relative;
  margin-top: 4px;
}

.app-life-visual-file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.app-life-visual-file__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  width: 100%;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 15, 29, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-life-visual-file__trigger {
  flex: 0 0 auto;
  gap: 8px;
  border-radius: 999px;
  padding-left: 14px;
  padding-right: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.app-life-visual-file__trigger:hover {
  border-color: rgba(224, 196, 132, 0.42);
  color: rgba(255, 252, 245, 0.98);
}

.app-life-visual-file__trigger:focus-visible {
  outline: none;
  border-color: rgba(224, 196, 132, 0.55);
  box-shadow: 0 0 0 3px rgba(224, 196, 132, 0.18);
}

.app-life-visual-file__ico {
  display: flex;
  color: rgba(224, 196, 132, 0.95);
}

.app-life-visual-file__ico svg {
  display: block;
}

.app-life-visual-file__trigger-text {
  font-size: 0.84rem;
}

.app-life-visual-file__filename {
  flex: 1 1 120px;
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: rgba(244, 246, 250, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-life-visual-drop {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
  padding: clamp(18px, 3vw, 26px) clamp(14px, 2.5vw, 22px);
  min-height: min(280px, 52vh);
  border-radius: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: rgba(4, 10, 22, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.app-life-visual-drop--drag {
  border-color: rgba(224, 196, 132, 0.55);
  border-style: solid;
  background: rgba(224, 196, 132, 0.09);
  box-shadow: inset 0 0 0 1px rgba(224, 196, 132, 0.12), 0 0 24px rgba(224, 196, 132, 0.08);
}

.app-life-visual-drop__hint {
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(244, 246, 250, 0.58);
  max-width: 36em;
  align-self: center;
}

.app-life-visual-files-clear {
  align-self: center;
  margin-top: 6px;
  font-size: 0.82rem;
}

.app-life-visual-preview--in-drop {
  flex: 1 1 auto;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

.app-life-visual-preview--in-drop .app-life-visual-preview__img {
  max-height: min(200px, 28vh);
}

@media (prefers-reduced-motion: reduce) {
  .app-life-visual-file__trigger {
    transition: none;
  }

  .app-life-visual-drop {
    transition: none;
  }
}

.app-life-visual-preview {
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  max-height: 220px;
  background: rgba(0, 0, 0, 0.25);
}

.app-life-visual-preview__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
}

.app-life-visual-preview.app-life-visual-preview--in-drop {
  margin-top: 0;
  max-height: none;
}

.app-life-dialog__inner--vision-busy .app-life-field,
.app-life-dialog__inner--vision-busy .app-life-visual-preview,
.app-life-dialog__inner--vision-busy .app-life-visual-file,
.app-life-dialog__inner--vision-busy .app-life-visual-drop {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.app-life-visual-status-wrap {
  min-height: 1px;
}

.app-life-visual-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 20px 16px 10px;
  text-align: center;
  border-radius: 14px;
  background: radial-gradient(
      ellipse 120% 80% at 50% 0%,
      rgba(224, 196, 132, 0.12),
      transparent 55%
    ),
    rgba(4, 10, 22, 0.45);
  border: 1px solid rgba(224, 196, 132, 0.14);
}

.app-life-visual-loading[hidden] {
  display: none !important;
}

.app-life-visual-loading__stage {
  position: relative;
  width: 58px;
  height: 58px;
}

.app-life-visual-loading__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-top-color: rgba(224, 196, 132, 0.92);
  border-right-color: rgba(224, 196, 132, 0.22);
  animation: app-life-vis-orbit 1.05s linear infinite;
}

.app-life-visual-loading__ring--inner {
  inset: 9px;
  border-top-color: rgba(180, 200, 230, 0.45);
  border-right-color: rgba(180, 200, 230, 0.1);
  animation-duration: 1.55s;
  animation-direction: reverse;
}

.app-life-visual-loading__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 248, 230, 0.95) 0%,
    rgba(224, 196, 132, 0.35) 45%,
    transparent 70%
  );
  box-shadow: 0 0 14px rgba(224, 196, 132, 0.55);
  animation: app-life-vis-core-pulse 1.35s ease-in-out infinite;
}

.app-life-visual-loading__bar {
  width: min(220px, 100%);
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.app-life-visual-loading__bar-fill {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(224, 196, 132, 0.15) 20%,
    rgba(224, 196, 132, 0.95) 50%,
    rgba(224, 196, 132, 0.15) 80%,
    transparent
  );
  animation: app-life-vis-shimmer 1.45s ease-in-out infinite;
}

.app-life-visual-loading__label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(244, 246, 250, 0.92);
  line-height: 1.4;
}

@keyframes app-life-vis-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes app-life-vis-core-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.88;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes app-life-vis-shimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-life-dialog__inner--vision-busy .app-life-field,
  .app-life-dialog__inner--vision-busy .app-life-visual-preview,
  .app-life-dialog__inner--vision-busy .app-life-visual-file,
  .app-life-dialog__inner--vision-busy .app-life-visual-drop {
    transition: none;
  }

  .app-life-visual-loading__ring {
    animation: none;
    border-top-color: rgba(224, 196, 132, 0.55);
    border-right-color: rgba(224, 196, 132, 0.2);
  }

  .app-life-visual-loading__core {
    animation: none;
    opacity: 0.95;
  }

  .app-life-visual-loading__bar-fill {
    animation: none;
    transform: translateX(80%);
    opacity: 0.75;
  }
}

.app-life-item-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.app-life-input {
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 15, 29, 0.72);
  color: var(--white);
  padding: 0 12px;
  font-size: 0.88rem;
  flex: 1 1 160px;
  min-width: 0;
}

.app-life-input:focus,
.app-life-textarea:focus {
  outline: none;
  border-color: rgba(224, 196, 132, 0.45);
  box-shadow: 0 0 0 3px rgba(224, 196, 132, 0.12);
}

.app-life-input--full {
  width: 100%;
  flex: 1 1 100%;
}

.app-life-input--emoji {
  max-width: 120px;
  flex: 0 0 auto;
}

.app-life-textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 15, 29, 0.72);
  color: var(--white);
  padding: 10px 12px;
  font-size: 0.88rem;
  resize: vertical;
  min-height: 100px;
}

.app-life-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.app-life-field__l {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.55);
}

.app-life-field__hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.42);
}

.app-life-input--date {
  max-width: 100%;
  color-scheme: dark;
}

.app-life-footer-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;
  padding-top: 4px;
}

.app-life-archives__intro {
  margin: 0 0 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.52);
}

.app-life-archives__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(58vh, 480px);
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 8px;
}

.app-life-archives__empty {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(244, 246, 250, 0.45);
}

.app-life-archives__card {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
}

.app-life-archives__card-title {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 800;
  color: rgba(244, 246, 250, 0.95);
}

.app-life-archives__meta {
  margin: 0 0 8px;
  font-size: 0.74rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.55);
}

.app-life-archives__det-sum {
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(107, 201, 212, 0.95);
  list-style: none;
}

.app-life-archives__det-sum::-webkit-details-marker {
  display: none;
}

.app-life-archives__det-body {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-life-archives__cat {
  margin-bottom: 10px;
}

.app-life-archives__cat-t {
  margin: 0 0 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(224, 196, 132, 0.88);
}

.app-life-archives__items {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.72);
}

.app-life-archives__item--done {
  color: rgba(127, 220, 200, 0.88);
}

.app-life-link-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(244, 246, 250, 0.45);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
}

.app-life-link-btn:hover {
  color: rgba(224, 196, 132, 0.85);
}

.app-life-link-btn--archives {
  color: rgba(224, 196, 132, 0.82);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(224, 196, 132, 0.28);
  background: rgba(224, 196, 132, 0.06);
}

.app-life-link-btn--archives:hover {
  color: rgba(255, 236, 200, 0.95);
  border-color: rgba(224, 196, 132, 0.48);
  background: rgba(224, 196, 132, 0.12);
}

.app-life-link-btn--archives:focus-visible {
  outline: 2px solid rgba(224, 196, 132, 0.55);
  outline-offset: 2px;
}

.app-life-link-btn--reset-muted {
  color: rgba(244, 246, 250, 0.34);
  font-size: 0.72rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app-life-link-btn--reset-muted:hover {
  color: rgba(244, 246, 250, 0.55);
}

.app-life-dialog {
  position: fixed;
  inset: 0;
  width: fit-content;
  min-width: min(320px, calc(100vw - 24px));
  max-width: min(520px, calc(100vw - 24px));
  height: fit-content;
  max-height: min(85vh, 720px);
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: linear-gradient(165deg, #121a2c 0%, #0a0f1a 100%);
  color: var(--white);
  padding: 0;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
}

.app-life-dialog.app-life-dialog--wide {
  max-width: min(660px, calc(100vw - 24px));
}

.app-life-dialog.app-life-dialog--mood-lightbox {
  max-width: min(1120px, calc(100vw - 20px));
  max-height: min(92vh, 900px);
  width: max-content;
  min-width: 0;
  overflow: auto;
}

.app-life-mood-zoom {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(40px, 5vw, 52px) clamp(16px, 2.5vw, 28px) clamp(16px, 2.5vw, 24px);
}

.app-life-mood-zoom__img {
  display: block;
  max-width: min(1040px, calc(100vw - 32px));
  max-height: min(76vh, 680px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.app-life-mood-zoom__cap {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.78);
  text-align: center;
  max-width: min(52ch, calc(100vw - 32px));
}

.app-life-mood-zoom__cap[hidden] {
  display: none !important;
}

.app-life-mood-zoom__x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 12, 22, 0.88);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.app-life-mood-zoom__x:hover {
  border-color: rgba(224, 196, 132, 0.45);
  color: rgba(224, 196, 132, 0.95);
}

.app-life-dialog::backdrop {
  background: rgba(4, 8, 16, 0.72);
  backdrop-filter: blur(4px);
}

.app-life-dialog__inner {
  padding: clamp(20px, 3vw, 26px);
}

.app-life-dialog__title {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 800;
}

.app-life-catalog-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  margin-bottom: 16px;
  padding-right: 4px;
}

.app-life-catalog-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}

.app-life-catalog-row__info {
  flex: 1 1 200px;
  min-width: 0;
}

.app-life-catalog-row__t {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.app-life-catalog-row__d {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.55);
}

.app-life-add-phase--hidden {
  display: none !important;
}

.app-life-add-recap {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(224, 196, 132, 0.22);
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.92rem;
  font-weight: 700;
  color: rgba(244, 246, 250, 0.92);
}

.app-life-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .app-life-categories {
    grid-template-columns: 1fr;
  }
}

/* Outils modules (éducation, simu, patrimoine, budget) */
.app-auth--modules {
  position: relative;
  overflow: hidden;
}

.app-mod__ambient {
  position: absolute;
  left: -12%;
  right: -12%;
  /* Sous le bloc titre / fil d’Ariane : le halo accompagne le panneau, pas le bord viewport */
  top: clamp(112px, 20vh, 200px);
  height: min(68vh, 620px);
  pointer-events: none;
  opacity: 0.82;
}

.app-mod__ambient--edu {
  background:
    radial-gradient(ellipse 58% 50% at 38% 32%, rgba(224, 196, 132, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse 48% 44% at 78% 42%, rgba(107, 201, 212, 0.1) 0%, transparent 50%);
}

.app-mod__ambient--sim {
  background:
    radial-gradient(ellipse 56% 48% at 32% 34%, rgba(107, 201, 212, 0.18) 0%, transparent 52%),
    radial-gradient(ellipse 44% 40% at 76% 44%, rgba(185, 168, 255, 0.1) 0%, transparent 48%);
}

.app-mod__ambient--pat {
  background:
    radial-gradient(ellipse 54% 46% at 68% 36%, rgba(224, 196, 132, 0.12) 0%, transparent 52%),
    radial-gradient(ellipse 46% 42% at 22% 48%, rgba(120, 200, 255, 0.09) 0%, transparent 50%);
}

.app-mod__ambient--bud {
  background:
    radial-gradient(ellipse 54% 46% at 48% 30%, rgba(185, 168, 255, 0.13) 0%, transparent 52%),
    radial-gradient(ellipse 42% 40% at 18% 52%, rgba(107, 201, 212, 0.09) 0%, transparent 48%);
}

.app-mod__crumb,
.app-mod__hero {
  position: relative;
  z-index: 1;
}

.app-mod__hero {
  margin-bottom: clamp(22px, 3.5vw, 34px);
}

.app-mod--pat .app-mod__hero,
.app-mod--bud .app-mod__hero {
  margin-bottom: clamp(10px, 1.8vw, 14px);
}

.app-mod--pat .app-psych-play__kicker,
.app-mod--bud .app-psych-play__kicker {
  margin-bottom: 3px;
}

.app-mod--pat .app-auth__title,
.app-mod--bud .app-auth__title {
  margin-bottom: 0;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
}

.app-mod--pat .app-mod__panel,
.app-mod--bud .app-mod__panel {
  padding: clamp(12px, 1.8vw, 18px) clamp(12px, 2vw, 20px);
  margin-bottom: clamp(12px, 2vw, 20px);
}

.app-mod__panel {
  position: relative;
  z-index: 1;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(8, 12, 24, 0.9) 48%);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: clamp(20px, 3vw, 28px) clamp(18px, 2.5vw, 26px);
  margin-bottom: clamp(20px, 3vw, 28px);
}

.app-mod__fine {
  position: relative;
  z-index: 1;
}

.app-mod-reset {
  margin-top: clamp(18px, 2.5vw, 24px);
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(244, 246, 250, 0.45);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 0;
}

.app-mod-reset:hover {
  color: rgba(224, 196, 132, 0.85);
}

/* Éducation */
.app-mod-edu__head {
  margin-bottom: clamp(18px, 2.5vw, 24px);
}

.app-mod-edu__prog-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.app-mod-edu__prog-lab {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.75);
  margin-bottom: 0;
}

.app-mod-edu__prog-pct {
  flex-shrink: 0;
  font-weight: 800;
  color: rgba(107, 201, 212, 0.95);
  font-size: 0.95rem;
}

.app-mod-edu__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.app-mod-edu__track--global {
  box-shadow: inset 0 0 0 1px rgba(107, 201, 212, 0.06);
}

.app-mod-edu__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e0c484, #6bc9d4);
  transition: width 0.35s ease;
}

.app-mod-edu__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-mod-edu-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  padding: clamp(14px, 2vw, 18px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-mod-edu-card--done {
  border-color: rgba(107, 201, 212, 0.35);
  box-shadow: 0 0 0 1px rgba(107, 201, 212, 0.12);
}

.app-mod-edu-card__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.app-mod-edu-card__row input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: #6bc9d4;
  flex-shrink: 0;
}

.app-mod-edu-card__title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
}

.app-mod-edu-card__p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.62;
  color: rgba(244, 246, 250, 0.72);
}

/* Éducation — parcours modules / leçons */
.app-mod-edu2 {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.5vw, 24px);
}

.app-mod-edu2__head {
  margin-bottom: 0;
}

.app-mod-edu2__main {
  min-height: 200px;
}

.app-mod-edu2-split {
  display: grid;
  grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}

@media (max-width: 768px) {
  .app-mod-edu2-split {
    grid-template-columns: 1fr;
    row-gap: clamp(28px, 5vw, 40px);
  }
}

.app-mod-edu2-aside {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  padding: clamp(12px, 1.8vw, 16px);
  max-height: min(70vh, 640px);
  overflow: auto;
}

@media (max-width: 768px) {
  .app-mod-edu2-aside {
    max-height: none;
  }
}

.app-mod-edu2-aside__title {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.75);
}

.app-mod-edu2-acc {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-mod-edu2-acc:last-child {
  border-bottom: none;
}

.app-mod-edu2-acc__trig {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 12px 8px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.app-mod-edu2-acc__trig:hover {
  background: rgba(255, 255, 255, 0.05);
}

.app-mod-edu2-acc__trig:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.55);
  outline-offset: 2px;
}

.app-mod-edu2-acc__emoji {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}

.app-mod-edu2-acc__mid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-mod-edu2-acc__title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

.app-mod-edu2-acc__meta {
  font-size: 0.7rem;
  color: rgba(244, 246, 250, 0.48);
}

.app-mod-edu2-acc__chev {
  flex-shrink: 0;
  font-size: 0.75rem;
  opacity: 0.55;
  width: 1.2rem;
  text-align: center;
}

/* Progression par module : camembert (donut) */
.app-mod-edu2-pie {
  --edu-pie: 0;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg at 50% 50%,
    rgba(107, 201, 212, 0.92) 0turn calc((var(--edu-pie) / 100) * 1turn),
    rgba(255, 255, 255, 0.12) 0
  );
  position: relative;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.app-mod-edu2-pie::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(8, 12, 22, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.app-mod-edu2-acc__panel {
  padding: 0 4px 12px 8px;
}

.app-mod-edu2-acc__lessons {
  margin-top: 4px;
  gap: 6px;
}

.app-mod-edu2-acc__lessons .app-mod-edu2-lessons__btn {
  padding: 10px 12px;
  font-size: 0.8rem;
}

.app-mod-edu2-reader-col {
  min-width: 0;
}

.app-mod-edu2-reader {
  scroll-margin-top: clamp(72px, 14vw, 100px);
}

.app-mod-edu2-empty {
  margin: 0;
  padding: clamp(24px, 4vw, 40px);
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(244, 246, 250, 0.42);
  text-align: center;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.12);
}

.app-mod-edu2__mod-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 16px);
}

@media (max-width: 640px) {
  .app-mod-edu2__mod-grid {
    grid-template-columns: 1fr;
  }
}

.app-mod-edu2-mod {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: clamp(16px, 2.2vw, 20px) clamp(14px, 2vw, 18px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  font: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.app-mod-edu2-mod:hover {
  border-color: rgba(224, 196, 132, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
}

.app-mod-edu2-mod__emoji {
  font-size: clamp(1.75rem, 3vw, 2.1rem);
  line-height: 1;
  flex-shrink: 0;
}

.app-mod-edu2-mod__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-mod-edu2-mod__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

.app-mod-edu2-mod__meta {
  font-size: 0.76rem;
  color: rgba(244, 246, 250, 0.52);
}

.app-mod-edu2-mod__go {
  flex-shrink: 0;
  font-size: 1.1rem;
  opacity: 0.45;
}

.app-mod-edu2__back {
  margin-bottom: 12px;
  align-self: flex-start;
}

.app-mod-edu2__h2 {
  margin: 0 0 6px;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 800;
  color: var(--white);
}

.app-mod-edu2__sub {
  margin: 0 0 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.65);
}

.app-mod-edu2-lessons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-mod-edu2-lessons__item {
  margin: 0;
}

.app-mod-edu2-lessons__hit {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.app-mod-edu2-lessons__hit .app-mod-edu2-lessons__btn {
  flex: 1 1 auto;
  min-width: 0;
}

.app-mod-edu2-lessons__mark {
  flex-shrink: 0;
  align-self: center;
  margin: 2px 0 2px 2px;
}

.app-mod-edu2-lessons__item--current {
  position: relative;
  padding-left: 12px;
  margin-left: -2px;
}

.app-mod-edu2-lessons__item--current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(107, 201, 212, 0.98) 0%, rgba(224, 196, 132, 0.88) 100%);
  box-shadow: 0 0 16px rgba(107, 201, 212, 0.45);
  pointer-events: none;
}

.app-mod-edu2-lessons__btn {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  text-align: left;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.45;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.18s ease;
}

.app-mod-edu2-lessons__btn:hover {
  border-color: rgba(107, 201, 212, 0.35);
}

.app-mod-edu2-lessons__btn--read {
  border-color: rgba(107, 201, 212, 0.25);
  background: rgba(107, 201, 212, 0.08);
}

.app-mod-edu2-lessons__item--current .app-mod-edu2-lessons__btn,
.app-mod-edu2-lessons__btn--active {
  border-color: rgba(107, 201, 212, 0.55);
  background: linear-gradient(128deg, rgba(107, 201, 212, 0.22) 0%, rgba(224, 196, 132, 0.1) 52%, rgba(8, 14, 26, 0.55) 100%);
  box-shadow:
    0 0 0 1px rgba(107, 201, 212, 0.14),
    0 10px 28px rgba(0, 0, 0, 0.28);
}

.app-mod-edu2-lessons__btn--active.app-mod-edu2-lessons__btn--read {
  border-color: rgba(107, 201, 212, 0.5);
  background: linear-gradient(128deg, rgba(107, 201, 212, 0.26) 0%, rgba(224, 196, 132, 0.12) 48%, rgba(6, 20, 28, 0.5) 100%);
}

.app-mod-edu2-lessons__btn--active:hover {
  border-color: rgba(224, 196, 132, 0.45);
}

.app-mod-edu2-lessons__t {
  flex: 1 1 140px;
  min-width: 0;
  color: rgba(244, 246, 250, 0.92);
}

.app-mod-edu2-lessons__btn--active .app-mod-edu2-lessons__t {
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
}

.app-mod-edu2-lessons__cur {
  flex-shrink: 0;
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(12, 22, 32, 0.95);
  background: linear-gradient(135deg, rgba(107, 201, 212, 0.95) 0%, rgba(200, 248, 255, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 10px rgba(107, 201, 212, 0.25);
}

.app-mod-edu2-lessons__st {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(107, 201, 212, 0.95);
}

.app-mod-edu2-reader {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  padding: clamp(18px, 2.5vw, 24px);
}

.app-mod-edu2-reader__kicker {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(224, 196, 132, 0.8);
}

.app-mod-edu2-reader__h {
  margin: 0 0 16px;
  font-size: clamp(1.08rem, 2.1vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}

.app-mod-edu2-reader__body {
  margin-bottom: clamp(18px, 2.5vw, 24px);
}

.app-mod-edu2-reader__p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(244, 246, 250, 0.78);
}

.app-mod-edu2-reader__p:last-child {
  margin-bottom: 0;
}

.app-mod-edu2-reader__tablewrap {
  margin: 0 0 16px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
}

.app-mod-edu2-reader__table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.82);
}

.app-mod-edu2-reader__table-cap {
  caption-side: top;
  padding: 10px 12px 8px;
  text-align: left;
  font-weight: 700;
  font-size: 0.8rem;
  color: rgba(224, 196, 132, 0.9);
}

.app-mod-edu2-reader__th,
.app-mod-edu2-reader__td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  vertical-align: top;
  text-align: left;
}

.app-mod-edu2-reader__th {
  font-weight: 700;
  color: rgba(107, 201, 212, 0.95);
  background: rgba(255, 255, 255, 0.04);
}

.app-mod-edu2-reader__th--row {
  min-width: 6.5rem;
  color: rgba(244, 246, 250, 0.92);
  background: rgba(255, 255, 255, 0.03);
}

.app-mod-edu2-reader__table tr:last-child .app-mod-edu2-reader__td,
.app-mod-edu2-reader__table tr:last-child .app-mod-edu2-reader__th--row {
  border-bottom: none;
}

.app-mod-edu2-reader__disclaimer {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgba(244, 246, 250, 0.45);
}

.app-mod-edu2-reader__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.app-mod-edu2-read-check {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 6px 8px 6px 2px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: rgba(244, 246, 250, 0.9);
  cursor: pointer;
  text-align: left;
  transition: color 0.18s ease, background 0.18s ease;
}

.app-mod-edu2-read-check:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
}

.app-mod-edu2-read-check:active {
  transform: scale(0.99);
}

.app-mod-edu2-read-check:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.9);
  outline-offset: 3px;
}

.app-mod-edu2-read-check__ring {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(107, 201, 212, 0.55);
  background: rgba(6, 12, 24, 0.55);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.app-mod-edu2-read-check:hover .app-mod-edu2-read-check__ring {
  border-color: rgba(224, 196, 132, 0.55);
}

.app-mod-edu2-read-check__tick {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: rgba(200, 248, 255, 0.98);
  opacity: 0;
  transform: scale(0.5) rotate(-12deg);
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.app-mod-edu2-read-check--on .app-mod-edu2-read-check__ring {
  border-color: rgba(224, 196, 132, 0.72);
  background: linear-gradient(150deg, rgba(107, 201, 212, 0.32) 0%, rgba(224, 196, 132, 0.22) 100%);
  box-shadow: 0 0 20px rgba(107, 201, 212, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.app-mod-edu2-read-check--on .app-mod-edu2-read-check__tick {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.app-mod-edu2-read-check__label {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: inherit;
}

.app-mod-edu2-read-check--on .app-mod-edu2-read-check__label {
  color: rgba(224, 196, 132, 0.95);
}

/* Variante liste (objectifs de vie) : même rond que l’éducation, sans libellé */
.app-mod-edu2-read-check--solo {
  flex-shrink: 0;
  padding: 2px;
  gap: 0;
}

.app-mod-edu2-read-check--solo .app-mod-edu2-read-check__label {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .app-mod-edu2-read-check:active {
    transform: none;
  }

  .app-mod-edu2-read-check__tick {
    transition: none;
  }

  .app-mod-edu2-read-check--on .app-mod-edu2-read-check__tick {
    transform: scale(1) rotate(0deg);
  }
}

.app-mod-edu-confetti {
  position: fixed;
  inset: 0;
  z-index: 10060;
  pointer-events: none;
}

.app-mod-edu-confetti__bit {
  position: fixed;
  width: 7px;
  height: 11px;
  margin: 0;
  border-radius: 2px;
  background: var(--c, #6bc9d4);
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1;
  animation-name: app-mod-edu-confetti-fly;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

@keyframes app-mod-edu-confetti-fly {
  to {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot));
    opacity: 0;
  }
}

.app-mod-edu-fw {
  position: fixed;
  inset: 0;
  z-index: 10070;
  pointer-events: none;
}

/* Rafales à l’intérieur de la modale « module terminé » (au-dessus du texte) */
.app-mod-edu-fw--inmod {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.app-mod-edu-fw--inmod .app-mod-edu-fw__bit {
  position: absolute;
}

.app-mod-edu-fw__bit {
  position: fixed;
  width: 6px;
  height: 10px;
  border-radius: 2px;
  margin: 0;
  background: var(--c, #ffe066);
  box-shadow: 0 0 12px rgba(255, 224, 102, 0.45);
  transform: translate(-50%, -50%);
  opacity: 1;
  animation-name: app-mod-edu-fw-fly;
  animation-timing-function: cubic-bezier(0.12, 0.88, 0.22, 1);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

@keyframes app-mod-edu-fw-fly {
  to {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot));
    opacity: 0;
  }
}

.app-mod-edu-done-dlg {
  position: fixed;
  inset: 0;
  z-index: 10085;
  width: fit-content;
  min-width: min(280px, 90vw);
  max-width: min(420px, 94vw);
  height: fit-content;
  max-height: min(88vh, 560px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: linear-gradient(168deg, #151c30 0%, #0a1020 100%);
  color: var(--white);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}

.app-mod-edu-done-dlg::backdrop {
  background: rgba(4, 8, 18, 0.66);
  backdrop-filter: blur(6px);
}

.app-mod-edu-done-dlg__fx {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  overflow: visible;
}

.app-mod-edu-done-dlg__inner {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 3vw, 30px);
}

.app-mod-edu-done-dlg__title {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 2.4vw, 1.48rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
}

.app-mod-edu-done-dlg__lead {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(244, 246, 250, 0.84);
  text-align: center;
}

.app-mod-edu-done-dlg__next {
  margin: 0 0 22px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(224, 196, 132, 0.95);
  text-align: center;
  font-weight: 600;
}

.app-mod-edu-done-dlg__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.app-mod-edu-done-dlg__btn {
  min-width: 168px;
}

.app-mod-edu2-reader__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Simulateurs — carte composés (inspiration fiche sombre + aires) */
.app-mod-sim-card--compound .app-mod-sim-card__body,
.app-mod-sim-card--passive .app-mod-sim-card__body {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(168deg, rgba(22, 28, 38, 0.98) 0%, rgba(12, 16, 24, 0.98) 52%, rgba(8, 11, 18, 0.99) 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-mod-sim-compound__main {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vw, 14px);
  min-width: 0;
}

.app-mod-sim-compound__right {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.1vw, 10px);
  min-width: 0;
}

.app-mod-sim-compound__form {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 8px 9px 6px;
  border-radius: 12px;
  border: 1px solid rgba(107, 201, 212, 0.18);
  background: linear-gradient(165deg, rgba(107, 201, 212, 0.07) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(0, 0, 0, 0.28) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-mod-sim-compound__form-hint {
  margin: 0 0 6px;
  padding: 0 2px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(186, 230, 253, 0.78);
}

.app-mod-sim-compound__form .app-mod-input {
  font-size: 15px;
  min-height: 36px;
  padding: 0 10px;
  cursor: text;
  caret-color: rgba(125, 211, 252, 0.95);
}

.app-mod-sim-compound-field {
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.app-mod-sim-compound-field--last {
  border-bottom: none;
}

.app-mod-sim-compound-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.app-mod-sim-compound-field__label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.92);
}

.app-mod-sim-compound-field__info {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(148, 163, 184, 0.95);
  font: inherit;
  line-height: 1;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.app-mod-sim-compound-field__info:hover {
  border-color: rgba(107, 201, 212, 0.4);
  color: rgba(200, 248, 255, 0.95);
}

.app-mod-sim-compound-field__info-i {
  font-size: 0.62rem;
  font-weight: 800;
  font-style: italic;
  transform: translateY(0.5px);
}

.app-mod-sim-compound-field__row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 8px;
  border: 1px dashed rgba(107, 201, 212, 0.28);
  background: rgba(0, 0, 0, 0.2);
  cursor: text;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.app-mod-sim-compound-field:hover .app-mod-sim-compound-field__row,
.app-mod-sim-compound-field:focus-within .app-mod-sim-compound-field__row {
  border-style: solid;
  border-color: rgba(107, 201, 212, 0.48);
  background: rgba(107, 201, 212, 0.08);
  box-shadow: 0 0 0 1px rgba(107, 201, 212, 0.12);
}

.app-mod-sim-compound-field__input {
  flex: 1 1 auto;
  min-width: 0;
  height: auto !important;
  min-height: 30px;
  padding: 3px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(0.72rem, 1.55vw, 0.88rem) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(248, 250, 252, 0.98) !important;
  cursor: text;
  caret-color: rgba(125, 211, 252, 0.95);
}

.app-mod-sim-compound-field__input:focus {
  outline: none;
  border: none !important;
  box-shadow: none !important;
}

.app-mod-sim-compound-field__unit {
  flex-shrink: 0;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.88);
}

.app-mod-sim-compound__form > .app-mod-field:not(.app-mod-field--check) {
  margin: 6px 0 0;
  padding: 6px 7px 5px;
  border-radius: 8px;
  border: 1px dashed rgba(107, 201, 212, 0.28);
  background: rgba(0, 0, 0, 0.2);
  cursor: text;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.app-mod-sim-compound__form > .app-mod-field:not(.app-mod-field--check):focus-within {
  border-style: solid;
  border-color: rgba(107, 201, 212, 0.48);
  background: rgba(107, 201, 212, 0.08);
  box-shadow: 0 0 0 1px rgba(107, 201, 212, 0.12);
}

.app-mod-sim-compound__form > .app-mod-field--check {
  margin: 8px 0 0;
  padding: 6px 2px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-mod-sim-compound-field--check {
  margin-top: 0;
  padding-top: 6px;
}

.app-mod-sim-compound__infl-hint {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  font-size: 0.64rem !important;
  line-height: 1.4 !important;
  color: rgba(148, 163, 184, 0.68) !important;
}

.app-mod-sim-compound__kpis {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-mod-sim-compound__hero {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-mod-sim-compound__hero-k {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.88);
}

.app-mod-sim-compound__hero-v {
  margin: 0;
  font-size: clamp(1.12rem, 3.2vw, 1.52rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(248, 250, 252, 0.98);
  font-variant-numeric: tabular-nums;
}

.app-mod-sim-compound__kpi-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 10px;
}

.app-mod-sim-compound__kpi-split .app-mod-sim__stat {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
}

.app-mod-sim-compound__kpi-split .app-mod-sim__stat-k {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.85);
}

.app-mod-sim-compound__kpi-split .app-mod-sim__stat-v {
  font-size: clamp(0.78rem, 1.65vw, 0.92rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: left;
  color: rgba(248, 250, 252, 0.95);
}

.app-mod-sim__sub--compound {
  margin: 0;
}

.app-mod-sim__chart-block--compound {
  flex: 1;
  min-height: 0;
  gap: clamp(8px, 1.2vw, 12px);
}

.app-mod-sim__chart-block--compound .app-mod-sim__legend-title {
  margin-top: 4px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.82);
}

.app-mod-sim-card--compound .app-mod-sim__svg {
  background: rgba(0, 0, 0, 0.32);
  border-color: rgba(255, 255, 255, 0.06);
}

.app-mod-sim-compound__story {
  display: grid;
  gap: clamp(10px, 1.6vw, 14px);
  margin-top: clamp(12px, 2vw, 18px);
  padding: clamp(10px, 1.5vw, 14px);
  border-radius: 14px;
  border: 1px solid rgba(107, 201, 212, 0.22);
  background: linear-gradient(155deg, rgba(107, 201, 212, 0.1) 0%, rgba(8, 14, 28, 0.9) 58%);
  align-items: center;
}

.app-mod-sim-compound__illus {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: min(100%, 300px);
  margin: 0 auto;
}

.app-mod-sim-compound__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(3px, 0.8vw, 6px);
  width: 100%;
  height: clamp(96px, 18vw, 118px);
}

.app-mod-sim-compound__bar {
  --ci: 0;
  --pct: 0.12;
  flex: 1 1 0;
  min-width: 0;
  max-width: clamp(14px, calc(10px + 34px * var(--pct)), 46px);
  height: max(9px, calc(var(--pct) * 100%));
  border-radius: 8px 8px 5px 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(224, 196, 132, 0.55) 0%, rgba(107, 201, 212, 0.35) 55%, rgba(8, 15, 29, 0.75) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform-origin: bottom center;
  transition:
    height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease;
  animation: solideCompoundBarIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--ci) * 0.042s);
}

.app-mod-sim-compound__bar:last-child {
  animation-name: solideCompoundBarIn, solideCompoundBarGlow;
  animation-duration: 0.55s, 3.4s;
  animation-delay: calc(var(--ci) * 0.042s), calc(var(--ci) * 0.042s + 0.62s);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: backwards, none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 22px rgba(107, 201, 212, 0.18);
}

@keyframes solideCompoundBarIn {
  from {
    opacity: 0;
    transform: scaleY(0.2);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes solideCompoundBarGlow {
  0%,
  100% {
    filter: brightness(1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  45% {
    filter: brightness(1.12);
    box-shadow:
      0 0 18px rgba(224, 196, 132, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-mod-sim-compound__bar {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.app-mod-sim-compound__story-copy {
  min-width: 0;
}

.app-mod-sim-compound__story-title {
  margin: 0 0 5px;
  font-size: clamp(0.78rem, 1.35vw, 0.86rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(107, 201, 212, 0.95);
}

.app-mod-sim-compound__story-lead {
  margin: 0 0 5px;
  font-size: 0.7rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.64);
}

.app-mod-sim-compound__story-p {
  margin: 0 0 5px;
  font-size: 0.68rem;
  line-height: 1.48;
  color: rgba(244, 246, 250, 0.6);
}

.app-mod-sim-compound__story-cap {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.44);
  max-width: 40rem;
}

.app-mod-sim-compound__story-p--disclaimer {
  margin-top: 8px;
  font-size: 0.64rem;
  line-height: 1.48;
  color: rgba(226, 232, 240, 0.52);
}

/* Exemple chiffré 10 colonnes — intérêts composés */
.app-mod-sim-compound__example {
  margin-top: 10px;
  padding: clamp(8px, 1.2vw, 12px);
  border-radius: 12px;
  border: 1px solid rgba(224, 196, 132, 0.2);
  background: rgba(8, 14, 28, 0.55);
}

.app-mod-sim-compound__example-kicker {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: rgba(224, 196, 132, 0.92);
  line-height: 1.35;
}

.app-mod-sim-compound__example-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -2px 8px;
  padding: 0 2px;
}

.app-mod-sim-compound__example-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}

.app-mod-sim-compound__example-th,
.app-mod-sim-compound__example-rowhead,
.app-mod-sim-compound__example-td {
  padding: 5px 6px;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.app-mod-sim-compound__example-th--corner {
  min-width: 7.5rem;
  max-width: 9rem;
  padding-left: 0;
  border-bottom-color: transparent;
}

.app-mod-sim-compound__example-th {
  font-weight: 700;
  color: rgba(107, 201, 212, 0.85);
  border-bottom-color: rgba(107, 201, 212, 0.22);
}

.app-mod-sim-compound__example-rowhead {
  text-align: left;
  font-weight: 650;
  color: rgba(244, 246, 250, 0.72);
  line-height: 1.35;
  hyphens: auto;
  white-space: normal;
}

.app-mod-sim-compound__example-td {
  color: rgba(244, 246, 250, 0.88);
}

.app-mod-sim-compound__example-td--compound {
  color: rgba(224, 196, 132, 0.95);
  font-weight: 700;
}

.app-mod-sim-compound__example-note {
  margin: 0;
  font-size: 0.6rem;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.48);
}

@media (min-width: 640px) {
  .app-mod-sim-compound__story {
    grid-template-columns: minmax(180px, min(34vw, 280px)) minmax(0, 1fr);
    align-items: center;
  }

  .app-mod-sim-compound__illus {
    margin: 0;
  }
}

.app-mod-field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.app-mod-field--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.app-mod-field__l {
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(244, 246, 250, 0.7);
}

.app-mod-input {
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 15, 29, 0.72);
  color: var(--white);
  padding: 0 12px;
  font-size: 0.88rem;
  width: 100%;
}

.app-mod-input:focus,
.app-mod-select:focus {
  outline: none;
  border-color: rgba(224, 196, 132, 0.45);
  box-shadow: 0 0 0 3px rgba(224, 196, 132, 0.12);
}

.app-mod-input--sm {
  height: 38px;
  font-size: 0.82rem;
}

.app-mod-input--narrow {
  max-width: 200px;
  width: 100%;
}

.app-mod-input--flex {
  flex: 1 1 140px;
  width: auto;
}

.app-mod-select {
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 15, 29, 0.72);
  color: var(--white);
  padding: 0 10px;
  font-size: 0.82rem;
}

.app-mod-btn-sm {
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
}

.app-mod-sim__hero-k {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.app-mod-sim__hero-k__lbl {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.52);
}

.app-mod-sim__big {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(107, 201, 212, 0.98);
  margin: 0;
}

.app-mod-sim__sub {
  margin: 0 0 8px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.58);
}

.app-mod-sim__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  margin-bottom: 16px;
}

.app-mod-sim__stats--compound {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 520px) {
  .app-mod-sim__stats {
    grid-template-columns: 1fr;
  }

  .app-mod-sim__stats--compound {
    grid-template-columns: 1fr;
  }
}

.app-mod-sim__stat {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-mod-sim__stat-k {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.5);
  line-height: 1.35;
}

.app-mod-sim__stat-v {
  font-size: clamp(0.82rem, 1.65vw, 0.98rem);
  font-weight: 800;
  color: rgba(244, 246, 250, 0.95);
  letter-spacing: -0.02em;
}

.app-mod-sim__stat-v--int {
  color: rgba(224, 196, 132, 0.98);
}

.app-mod-sim__stat-v--fv {
  color: rgba(107, 201, 212, 0.98);
}

.app-mod-sim__svg {
  width: 100%;
  height: auto;
  min-height: 120px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.app-mod-sim__chart-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-mod-sim__chart {
  position: relative;
  cursor: crosshair;
}

.app-mod-pass__chart {
  position: relative;
  cursor: crosshair;
}

.app-mod-sim__svg .app-mod-sim__vline {
  shape-rendering: crispEdges;
}

.app-mod-sim__svg .app-mod-sim__hit-dot {
  shape-rendering: geometricPrecision;
  filter: none;
}

.app-mod-sim__chart-tip {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  max-width: min(280px, calc(100% - 16px));
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 16, 28, 0.96);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.app-mod-sim__chart-tip--on {
  opacity: 1;
  transform: translateY(0);
}

.app-mod-sim__chart-tip[hidden] {
  display: none !important;
}

.app-mod-sim__chart-tip__ann {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.88);
}

.app-mod-sim__chart-tip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.app-mod-sim__chart-tip__swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.app-mod-sim__chart-tip__swatch--compound-pv0 {
  width: 14px;
  height: 3px;
  border-radius: 999px;
  background: rgba(152, 162, 178, 0.88);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.app-mod-sim__chart-tip__swatch--compound-cap {
  background: linear-gradient(180deg, rgba(58, 130, 142, 0.95) 0%, rgba(32, 78, 88, 0.9) 100%);
}

.app-mod-sim__chart-tip__swatch--compound-fv {
  background: linear-gradient(135deg, #4ecf9a 0%, #6bc9d4 100%);
}

.app-mod-sim__chart-tip__swatch--compound-int {
  background: linear-gradient(90deg, rgba(228, 192, 77, 0.95), rgba(78, 207, 154, 0.75));
}

.app-mod-sim__axis-y {
  fill: rgba(244, 246, 250, 0.42);
  font-size: 5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.app-mod-sim__axis-x {
  fill: rgba(244, 246, 250, 0.5);
  font-size: 5px;
  font-weight: 700;
}

.app-mod-sim__chart-tip__swatch--pass-ini {
  background: linear-gradient(90deg, #f2d56a, #d4a820);
}

.app-mod-sim__chart-tip__swatch--pass-ver {
  background: linear-gradient(135deg, #4ecf9a 0%, #5ed4b8 100%);
}

.app-mod-sim__chart-tip__swatch--pass-int {
  background: linear-gradient(135deg, #4ecf9a 0%, #6bc9d4 100%);
}

.app-mod-sim__chart-tip__swatch--pass-rem {
  background: linear-gradient(90deg, #6bc9d4, rgba(107, 201, 212, 0.45));
}

.app-mod-sim__chart-tip__row > .app-mod-sim__chart-tip__k {
  flex: 1;
  min-width: 0;
}

.app-mod-sim__chart-tip__row > .app-mod-sim__chart-tip__v {
  margin-left: auto;
  text-align: right;
}

.app-mod-sim__chart-tip__k {
  font-weight: 600;
  color: rgba(244, 246, 250, 0.55);
}

.app-mod-sim__chart-tip__v {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 246, 250, 0.94);
}

.app-mod-sim__chart-tip__v--int {
  color: rgba(224, 196, 132, 0.98);
}

.app-mod-sim__legend-title {
  margin: 2px 0 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.72);
}

.app-mod-sim__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 6px;
  font-size: 0.7rem;
  color: rgba(244, 246, 250, 0.64);
}

.app-mod-sim__legend--compound {
  margin-top: 0;
}

.app-mod-sim__leg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.app-mod-sim__leg-swatch {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  flex-shrink: 0;
}

.app-mod-sim__leg--cap .app-mod-sim__leg-swatch {
  background: linear-gradient(90deg, #f2d56a, #d4a820);
}

.app-mod-sim__leg--fv .app-mod-sim__leg-swatch {
  background: linear-gradient(135deg, #4ecf9a 0%, #6bc9d4 100%);
}

.app-mod-sim__legend--compound .app-mod-sim__leg-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.app-mod-sim__legend--compound .app-mod-sim__leg--cap .app-mod-sim__leg-swatch {
  height: 12px;
  background: linear-gradient(180deg, rgba(58, 130, 142, 0.95) 0%, rgba(32, 78, 88, 0.9) 100%);
}

.app-mod-sim__legend--compound .app-mod-sim__leg--fv .app-mod-sim__leg-swatch {
  height: 12px;
  background: linear-gradient(180deg, rgba(212, 168, 72, 0.95) 0%, rgba(180, 130, 48, 0.85) 100%);
}

.app-mod-sim__legend--compound .app-mod-sim__leg--pv0 .app-mod-sim__leg-swatch {
  width: 14px;
  height: 3px;
  border-radius: 999px;
  background: rgba(152, 162, 178, 0.88);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.app-mod-sim__legend--compound .app-mod-sim__leg--real .app-mod-sim__leg-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px dashed rgba(185, 168, 255, 0.75);
  background: repeating-linear-gradient(
    135deg,
    rgba(185, 168, 255, 0.55) 0 2px,
    rgba(107, 201, 212, 0.25) 2px 4px
  );
}

.app-mod-sim__leg--real-hide {
  display: none !important;
}

.app-mod-sim__chart-tip__row--pv-ref .app-mod-sim__chart-tip__k {
  color: rgba(244, 246, 250, 0.55);
}

.app-mod-sim__chart-tip__row--muted {
  font-size: 0.72rem;
}

.app-mod-sim__chart-tip__row--muted .app-mod-sim__chart-tip__k {
  font-weight: 600;
  color: rgba(244, 246, 250, 0.48);
}

.app-mod-sim__infl-hint {
  margin: -2px 0 6px;
  font-size: 0.64rem;
  line-height: 1.4;
  color: rgba(244, 246, 250, 0.45);
}

.app-mod-sim-page {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 18px);
}

.app-mod-sim-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.app-mod-sim-tab {
  appearance: none;
  margin: 0;
  cursor: pointer;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(244, 246, 250, 0.72);
  font: inherit;
  font-size: clamp(0.74rem, 1.35vw, 0.84rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  padding: 7px 13px;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.app-mod-sim-tab:hover {
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(244, 246, 250, 0.9);
}

.app-mod-sim-tab:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.85);
  outline-offset: 3px;
}

.app-mod-sim-tab[aria-selected='true'] {
  border-color: rgba(107, 201, 212, 0.45);
  background: linear-gradient(165deg, rgba(107, 201, 212, 0.18) 0%, rgba(8, 14, 28, 0.92) 100%);
  color: rgba(244, 246, 250, 0.96);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.app-mod-sim-tabs[data-sim-tab='passive'] .app-mod-sim-tab[aria-selected='true'] {
  border-color: rgba(224, 196, 132, 0.48);
  background: linear-gradient(165deg, rgba(224, 196, 132, 0.16) 0%, rgba(8, 14, 28, 0.92) 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.app-mod-sim-stage {
  display: block;
  min-width: 0;
}

.app-mod-sim-card[hidden] {
  display: none !important;
}

.app-mod-sim-card > .app-mod-sim-snap {
  margin-top: clamp(12px, 2vw, 18px);
}

.app-mod-sim-snap {
  padding: clamp(10px, 1.5vw, 14px) clamp(12px, 1.6vw, 16px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(160deg, rgba(20, 32, 52, 0.55) 0%, rgba(8, 12, 24, 0.72) 100%);
}

.app-mod-sim-snap__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin-bottom: clamp(14px, 2vw, 18px);
}

.app-mod-sim-snap__name {
  flex: 1 1 200px;
  min-width: 0;
}

.app-mod-sim-snap__save {
  appearance: none;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid rgba(107, 201, 212, 0.42);
  background: linear-gradient(165deg, rgba(107, 201, 212, 0.22) 0%, rgba(8, 14, 28, 0.9) 100%);
  color: rgba(244, 246, 250, 0.95);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 11px 18px;
  white-space: nowrap;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.app-mod-sim-snap__save:hover {
  border-color: rgba(107, 201, 212, 0.65);
}

.app-mod-sim-snap__save:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.85);
  outline-offset: 2px;
}

.app-mod-sim-snap__hist-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.48);
}

.app-mod-sim-snap__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-mod-sim-snap__empty {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.42);
}

.app-mod-sim-snap__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
}

.app-mod-sim-snap__item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 160px;
}

.app-mod-sim-snap__item-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: rgba(244, 246, 250, 0.92);
  word-break: break-word;
}

.app-mod-sim-snap__item-date {
  font-size: 0.76rem;
  color: rgba(244, 246, 250, 0.45);
}

.app-mod-sim-snap__item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.app-mod-sim-snap__load,
.app-mod-sim-snap__remove {
  appearance: none;
  cursor: pointer;
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(224, 196, 132, 0.92);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 12px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.app-mod-sim-snap__load:hover,
.app-mod-sim-snap__remove:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
}

.app-mod-sim-snap__remove {
  color: rgba(244, 246, 250, 0.55);
}

.app-mod-sim-snap__remove:hover {
  color: rgba(255, 180, 160, 0.95);
  border-color: rgba(255, 160, 140, 0.25);
}

.app-mod-sim-snap__load:focus-visible,
.app-mod-sim-snap__remove:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.75);
  outline-offset: 2px;
}

.app-mod-sim-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  container-type: inline-size;
  container-name: simcard;
}

.app-mod-sim-card--compound,
.app-mod-sim-card--passive {
  border: none;
  background: transparent;
  box-shadow: none;
}

@container simcard (min-width: 720px) {
  .app-mod-sim-compound__main {
    display: grid;
    grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
    gap: clamp(10px, 1.6vw, 18px);
    align-items: start;
  }

  .app-mod-pass__main {
    display: grid;
    grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
    gap: clamp(10px, 1.6vw, 18px);
    align-items: start;
  }
}

.app-mod-sim-card__body {
  padding: clamp(11px, 1.5vw, 16px);
  flex: 1;
  min-height: 0;
}

.app-mod-field__hint {
  display: block;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.45);
  font-weight: 500;
  margin-top: 4px;
}

.app-mod-field--check {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.app-mod-field--check input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #6bc9d4;
  flex-shrink: 0;
}

.app-mod-field__l--inline {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(244, 246, 250, 0.8);
}

/* Note explicative liberté financière — bas de carte, animation à gauche */
.app-mod-pass__story {
  margin-top: clamp(12px, 2vw, 20px);
  padding: clamp(18px, 2.8vw, 28px) clamp(14px, 2.2vw, 22px);
  border-radius: 14px;
  border: 1px solid rgba(224, 196, 132, 0.2);
  background: linear-gradient(155deg, rgba(224, 196, 132, 0.07) 0%, rgba(8, 14, 28, 0.9) 58%);
  display: grid;
  gap: clamp(10px, 1.6vw, 14px);
  align-items: start;
  overflow: visible;
}

.app-mod-pass__story-illus {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: min(100%, 400px);
  margin: clamp(8px, 1.2vw, 14px) auto;
}

.app-mod-pass__story-copy {
  min-width: 0;
}

.app-mod-pass__ff-title {
  margin: 0 0 5px;
  font-size: clamp(0.78rem, 1.35vw, 0.86rem);
  font-weight: 800;
  color: rgba(224, 196, 132, 0.95);
}

.app-mod-pass__ff-lead {
  margin: 0 0 5px;
  font-size: 0.7rem;
  color: rgba(244, 246, 250, 0.58);
  line-height: 1.45;
}

.app-mod-pass__ff-p {
  margin: 0 0 5px;
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.62);
}

.app-mod-pass__ff-p--disclaimer {
  margin-top: 8px;
  font-size: 0.64rem;
  line-height: 1.48;
  color: rgba(226, 232, 240, 0.52);
}

.app-mod-pass__wall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 12px);
  max-width: min(100%, 360px);
}

.app-mod-pass__wall--flow {
  --wall-gap: clamp(8px, 1.4vw, 12px);
  --pass-red-exit: 1.45s;
  --pass-after-red: 1s;
  --pass-green-in: 1.2s;
  /* Pause avec le € vert en place avant la boucle (total cycle = somme des quatre) */
  --pass-dwell-end: 1.35s;
  --pass-cycle: calc(var(--pass-red-exit) + var(--pass-after-red) + var(--pass-green-in) + var(--pass-dwell-end));
}

.app-mod-pass__slot-last {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  overflow: visible;
}

.app-mod-pass__wall--flow .app-mod-pass__slot-last .app-mod-pass__brick {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.app-mod-pass__brick {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(107, 201, 212, 0.28);
  background: linear-gradient(160deg, rgba(107, 201, 212, 0.28) 0%, rgba(8, 15, 29, 0.65) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-mod-pass__brick--spent {
  border-color: rgba(224, 196, 132, 0.45);
  background: linear-gradient(160deg, rgba(224, 196, 132, 0.45) 0%, rgba(107, 201, 212, 0.15) 100%);
  box-shadow: 0 0 16px rgba(224, 196, 132, 0.15);
}

/* 24 briques statiques ; dernière case : € rouge sort, pause, € vert arrive, pause — boucle (keyframes % calés sur --pass-red-exit + --pass-after-red + --pass-green-in + --pass-dwell-end = 5s par défaut) */
.app-mod-pass__wall--flow .app-mod-pass__brick {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.6rem, 2vw, 0.76rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  user-select: none;
}

.app-mod-pass__brick--withdraw {
  z-index: 2;
  border-color: rgba(255, 90, 90, 0.65);
  color: rgba(255, 235, 235, 0.98);
  background: linear-gradient(160deg, rgba(255, 72, 72, 0.5) 0%, rgba(88, 18, 28, 0.92) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(255, 60, 60, 0.22);
  transform-origin: center center;
  animation: solidePassRedLoop var(--pass-cycle, 5s) linear infinite;
}

.app-mod-pass__brick--dup {
  z-index: 1;
  border-color: rgba(72, 190, 130, 0.55);
  color: rgba(230, 255, 242, 0.96);
  background: linear-gradient(160deg, rgba(48, 160, 108, 0.52) 0%, rgba(14, 36, 26, 0.94) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
  transform: translateX(-36%);
  opacity: 0;
  transform-origin: center center;
  animation: solidePassGreenLoop var(--pass-cycle, 5s) linear infinite;
}

.app-mod-pass__brick--in {
  --bi: 1;
  border-color: rgba(72, 190, 130, 0.5);
  color: rgba(230, 255, 242, 0.95);
  background: linear-gradient(160deg, rgba(48, 160, 108, 0.42) 0%, rgba(14, 36, 26, 0.94) 100%);
  opacity: 1;
  transform: none;
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: none;
}

/* Phases : 0–29 % sortie rouge ; 29–49 % rouge réinitialisé (invisible) ; 49–73 % entrée verte ; 73–100 % vert visible puis retour masqué (aligné sur 1.45s + 1s + 1.2s + 1.35s = 5s) */
@keyframes solidePassRedLoop {
  0%,
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }

  29% {
    transform: translateX(calc(100% + 34px)) scale(0.9);
    opacity: 0;
  }

  /* Réinitialisation sans interpolation visible (évite un trajet retour du € rouge) */
  29.01%,
  99.5% {
    transform: translateX(0) scale(1);
    opacity: 0;
  }
}

@keyframes solidePassGreenLoop {
  0%,
  100% {
    transform: translateX(-36%);
    opacity: 0;
  }

  49% {
    transform: translateX(-36%);
    opacity: 0;
  }

  73% {
    transform: translateX(0);
    opacity: 1;
  }

  99.5% {
    transform: translateX(0);
    opacity: 1;
  }

  /* Masquage immédiat avant la boucle (évite un fondu retour visible) */
  99.51% {
    transform: translateX(-36%);
    opacity: 0;
  }
}

@media (min-width: 640px) {
  .app-mod-pass__story {
    grid-template-columns: minmax(200px, min(34vw, 300px)) minmax(0, 1fr);
    align-items: center;
  }

  .app-mod-pass__story-illus {
    margin: clamp(6px, 1vw, 12px) 0;
    justify-self: center;
    max-width: min(100%, 340px);
    transform: scale(1.12);
    transform-origin: center center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-mod-pass__brick--in {
    animation: none;
    border-color: rgba(72, 190, 130, 0.5);
    background: linear-gradient(160deg, rgba(48, 160, 108, 0.42) 0%, rgba(14, 36, 26, 0.94) 100%);
    color: rgba(230, 255, 242, 0.95);
  }

  .app-mod-pass__brick--withdraw {
    animation: none;
    transform: translateX(22%);
    opacity: 0.35;
    border-color: rgba(255, 120, 120, 0.55);
    background: linear-gradient(160deg, rgba(200, 60, 60, 0.42) 0%, rgba(48, 14, 22, 0.9) 100%);
    color: rgba(255, 235, 235, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .app-mod-pass__brick--dup {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

.app-mod-pass__brick-cap {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.44);
  max-width: 36rem;
}

.app-mod-pass__main {
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.4vw, 14px);
  min-width: 0;
}

.app-mod-pass__right {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.1vw, 10px);
  min-width: 0;
}

/* Revenus passifs : sous la grille formulaire | colonne droite, pile verticale (notes puis montants + graph + légende) */
.app-mod-pass__split {
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.4vw, 14px);
  min-width: 0;
}

.app-mod-pass__split-meta {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.1vw, 10px);
  min-width: 0;
}

.app-mod-pass__split-chart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.app-mod-pass__split-chart .app-mod-pass__chart-block {
  flex: 1;
  min-height: clamp(140px, 22vw, 200px);
}

.app-mod-pass__summary {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.74);
  max-width: 40rem;
}

.app-mod-pass__chart-block {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-mod-pass__chart-note {
  margin: 0;
  max-width: 44rem;
}

.app-mod-pass__leg--real-hide {
  display: none !important;
}

.app-mod-pass__leg--real .app-mod-pass__leg-swatch {
  background: repeating-linear-gradient(
    90deg,
    rgba(185, 168, 255, 0.88) 0 4px,
    transparent 4px 8px
  );
}

.app-mod-pass__kpis .app-mod-pass__hero {
  margin-bottom: 4px;
}

.app-mod-pass__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 5px;
}

.app-mod-pass__hero-k {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(244, 246, 250, 0.52);
}

.app-mod-pass__hero-v {
  font-size: clamp(0.92rem, 2.1vw, 1.1rem);
  font-weight: 800;
  color: rgba(185, 168, 255, 0.98);
  letter-spacing: -0.03em;
}

.app-mod-pass__hero-u {
  font-size: 0.74rem;
  color: rgba(244, 246, 250, 0.45);
}

.app-mod-pass__stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.app-mod-pass__stat {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 3px 0;
  border: none;
  background: transparent;
  border-radius: 0;
  display: flex;
}

.app-mod-pass__stat-k {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(244, 246, 250, 0.52);
  line-height: 1.35;
}

.app-mod-pass__stat-v {
  font-size: 0.88rem;
  font-weight: 800;
  color: rgba(244, 246, 250, 0.94);
  letter-spacing: -0.02em;
  text-align: right;
}

.app-mod-pass__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 6px;
  font-size: 0.7rem;
  color: rgba(244, 246, 250, 0.68);
}

.app-mod-pass__leg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.app-mod-pass__leg-swatch {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  flex-shrink: 0;
}

.app-mod-pass__leg--cap .app-mod-pass__leg-swatch {
  background: linear-gradient(90deg, rgba(224, 196, 132, 0.95), rgba(224, 196, 132, 0.55));
}

.app-mod-pass__leg--inv .app-mod-pass__leg-swatch {
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(244, 246, 250, 0.55) 0 5px,
    transparent 5px 10px
  );
}

.app-mod-pass__leg--ini .app-mod-pass__leg-swatch {
  background: linear-gradient(90deg, #f2d56a, #d4a820);
}

.app-mod-pass__leg--ver .app-mod-pass__leg-swatch {
  background: linear-gradient(135deg, #4ecf9a 0%, #5ed4b8 100%);
}

.app-mod-pass__leg--int .app-mod-pass__leg-swatch {
  background: linear-gradient(135deg, #4ecf9a 0%, #6bc9d4 100%);
}

/* Patrimoine */
.app-mod-pat__kpi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: clamp(20px, 3vw, 28px);
}

@media (min-width: 720px) {
  .app-mod-pat__kpi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.app-mod-pat__kpi-item {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-mod-pat__kpi-k {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.5);
}

.app-mod-pat__kpi-v {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--white);
}

.app-mod-pat__sec {
  margin-bottom: clamp(22px, 3vw, 30px);
}

.app-mod-pat__h {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 800;
  color: rgba(244, 246, 250, 0.92);
}

.app-mod-pat__table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.app-mod-pat__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.85fr) auto;
  gap: 8px;
  align-items: center;
}

.app-mod-pat__row--debt {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr) auto;
}

@media (max-width: 640px) {
  .app-mod-pat__row,
  .app-mod-pat__row--debt {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .app-mod-pat__row .app-mod-btn-sm,
  .app-mod-pat__row--debt .app-mod-btn-sm {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Patrimoine — vue ludique (v2 UI) */
.app-mod-pat2 {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vw, 22px);
}

.app-mod-pat2--compact {
  gap: clamp(12px, 2vw, 18px);
}

/* Rangée principale : synthèse (gauche) + répartition (droite) */
.app-mod-pat2-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(16px, 2.6vw, 28px);
  align-items: stretch;
}

@media (max-width: 900px) {
  .app-mod-pat2-top {
    grid-template-columns: 1fr;
  }
}

.app-mod-pat2-synopsis {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-mod-pat2-synopsis-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin-top: clamp(14px, 2.2vw, 20px);
}

.app-mod-pat2-synopsis-kpis .app-mod-pat2-kpi {
  flex: 1 1 92px;
}

.app-mod-pat2-synopsis-kpis .app-mod-pat2-kpi-op {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1em;
  font-size: 1.1rem;
  font-weight: 800;
  color: rgba(244, 246, 250, 0.48);
  line-height: 1;
  user-select: none;
}

.app-mod-pat2-rep-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-mod-pat2-rep-panel .app-mod-pat2-rep {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Carte synthèse : gros chiffre + sparkline + donut */
.app-mod-pat2-hero-dash {
  padding: clamp(18px, 2.8vw, 28px) clamp(16px, 2.4vw, 26px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(155deg, rgba(22, 32, 52, 0.95) 0%, rgba(8, 12, 24, 0.92) 55%, rgba(6, 10, 20, 0.96) 100%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-mod-pat2-hero-dash--synopsis {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.app-mod-pat2-hero-dash--synopsis .app-mod-pat2-hero-dash__main {
  flex: 1;
}

.app-mod-pat2-hero-dash__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 200px);
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}

@media (max-width: 720px) {
  .app-mod-pat2-hero-dash__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .app-mod-pat2-hero-dash__main {
    align-items: center;
  }

  .app-mod-pat2-hero-dash__pie {
    width: 100%;
    max-width: 220px;
  }
}

.app-mod-pat2-hero-dash__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.app-mod-pat2-hero-dash__kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.78);
}

.app-mod-pat2-hero-dash__title {
  margin: 0;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(244, 246, 250, 0.98);
  line-height: 1.15;
}

.app-mod-pat2-hero-dash__vlab {
  margin: 4px 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.42);
}

.app-mod-pat2-hero-dash__num {
  margin: 2px 0 0;
  font-size: clamp(2rem, 6vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: rgba(200, 248, 255, 0.98);
  text-shadow: 0 0 40px rgba(107, 201, 212, 0.18);
}

.app-mod-pat2-hero-spark {
  width: 100%;
  max-width: min(100%, 400px);
  margin-top: 12px;
}

.app-mod-pat2-hero-spark__svg {
  display: block;
  width: 100%;
  height: clamp(44px, 10vw, 56px);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.app-mod-pat2-hero-spark__cap {
  margin: 6px 0 0;
  font-size: 0.65rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.38);
}

.app-mod-pat2-hero-dash__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.app-mod-pat2-hero-dash__figure.app-mod-alloc-pie-wrap {
  margin: 0;
}

.app-mod-pat2-hero-dash__figure .app-mod-alloc-pie {
  width: min(152px, 42vw);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}

.app-mod-pat2-hero-dash__figure .app-mod-alloc-pie__v {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
}

.app-mod-pat2-hero-dash__figure .app-mod-alloc-pie__k {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
}

.app-mod-pat2-hero-dash__pie-note {
  margin: 0;
  font-size: 0.65rem;
  line-height: 1.4;
  text-align: center;
  color: rgba(244, 246, 250, 0.45);
  max-width: 12rem;
}

/* Répartition type barres horizontales */
.app-mod-pat2-rep {
  padding: clamp(16px, 2.4vw, 22px) clamp(16px, 2.2vw, 24px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, rgba(18, 26, 44, 0.92) 0%, rgba(6, 10, 20, 0.96) 100%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.app-mod-pat2-rep__title {
  margin: 0 0 14px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.75);
}

.app-mod-pat2-rep__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-mod-pat2-rep__row {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr) minmax(5.5rem, 6.75rem);
  gap: 10px 14px;
  align-items: center;
}

@media (max-width: 520px) {
  .app-mod-pat2-rep__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
  }

  .app-mod-pat2-rep__lab {
    grid-column: 1;
    grid-row: 1;
  }

  .app-mod-pat2-rep__vals {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .app-mod-pat2-rep__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.app-mod-pat2-rep__lab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.app-mod-pat2-rep__emoji {
  font-size: 1.1rem;
  line-height: 1;
}

.app-mod-pat2-rep__name {
  font-size: 0.84rem;
  font-weight: 700;
  color: rgba(244, 246, 250, 0.88);
}

.app-mod-pat2-rep__track {
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.app-mod-pat2-rep__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  min-width: 0;
  transition: width 0.25s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.app-mod-pat2-rep__vals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  text-align: right;
}

.app-mod-pat2-rep__money {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: rgba(244, 246, 250, 0.9);
  line-height: 1.2;
}

.app-mod-pat2-rep__pct {
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 246, 250, 0.55);
  line-height: 1.2;
}

.app-mod-pat2-rep__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.app-mod-pat2-rep__total-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.72);
}

.app-mod-pat2-rep__total-num {
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.94);
}

.app-mod-pat2-details-k {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.38);
}

.app-mod-pat2-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 8px;
  align-items: start;
}

.app-mod-pat2-bar--slim {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
}

@media (max-width: 960px) {
  .app-mod-pat2-bar,
  .app-mod-pat2-bar--slim {
    grid-template-columns: 1fr;
  }
}

.app-mod-pat2-bar__income,
.app-mod-pat2-bar__net {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

@media (min-width: 520px) {
  .app-mod-pat2-bar__income {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
  }

  .app-mod-pat2-bar__income .app-mod-pat2-bar__lab {
    flex: 0 1 auto;
    margin: 0;
  }

  .app-mod-pat2-bar__income .app-mod-pat2-bar__inp {
    flex: 1 1 100px;
    max-width: 200px;
    width: auto;
  }
}

.app-mod-pat2-bar__income {
  border-color: rgba(224, 196, 132, 0.22);
}

.app-mod-pat2-bar__net {
  border-color: rgba(107, 201, 212, 0.28);
}

.app-mod-pat2-bar__lab {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.5);
}

.app-mod-pat2-bar__inp {
  width: 100%;
  max-width: none;
}

.app-mod-pat2-bar__net-k {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.48);
}

.app-mod-pat2-bar__net-v {
  font-size: clamp(1rem, 2.4vw, 1.28rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: rgba(200, 248, 255, 0.96);
}

.app-mod-pat2-bar__net-h {
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(244, 246, 250, 0.45);
}

.app-mod-pat2-bar__kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
  align-content: start;
}

.app-mod-pat2-kpi {
  flex: 1 1 80px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.app-mod-pat2-kpi__ico {
  flex-shrink: 0;
  font-size: 1.28rem;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.app-mod-pat2-kpi__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.app-mod-pat2-kpi--a {
  border-color: rgba(107, 201, 212, 0.22);
}

.app-mod-pat2-kpi--d {
  border-color: rgba(255, 150, 170, 0.22);
}

.app-mod-pat2-kpi--pos {
  border-color: rgba(120, 220, 160, 0.3);
  background: rgba(16, 36, 28, 0.45);
}

.app-mod-pat2-kpi--neg {
  border-color: rgba(255, 140, 140, 0.3);
  background: rgba(36, 18, 22, 0.42);
}

.app-mod-pat2-kpi__k {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.45);
  line-height: 1.25;
}

.app-mod-pat2-kpi__v {
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(244, 246, 250, 0.94);
  letter-spacing: -0.02em;
}

/* Bandeau « vue d’ensemble » (répartition), pleine largeur sous la barre chiffres */
.app-mod-pat2-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 1.35fr);
  gap: clamp(10px, 1.6vw, 18px) clamp(12px, 2vw, 20px);
  align-items: center;
  padding: clamp(10px, 1.5vw, 14px) clamp(12px, 2vw, 18px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, rgba(8, 12, 24, 0.78) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@media (max-width: 900px) {
  .app-mod-pat2-overview {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'head head'
      'pie leg';
    gap: 10px 14px;
  }

  .app-mod-pat2-overview__head {
    grid-area: head;
  }

  .app-mod-pat2-overview__pie {
    grid-area: pie;
  }

  .app-mod-pat2-overview__legend {
    grid-area: leg;
    align-self: center;
  }
}

@media (max-width: 520px) {
  .app-mod-pat2-overview {
    grid-template-columns: 1fr;
    grid-template-areas:
      'head'
      'pie'
      'leg';
  }

  .app-mod-pat2-overview__pie {
    flex-direction: column;
  }
}

.app-mod-pat2-overview__head {
  min-width: 0;
}

.app-mod-pat2-overview__title {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.75);
}

.app-mod-pat2-overview__sub {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.48);
  max-width: 28rem;
}

.app-mod-pat2-overview__muted {
  font-size: 0.75rem;
  color: rgba(244, 246, 250, 0.35);
}

.app-mod-pat2-overview__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.app-mod-pat2-overview__pie-title {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(107, 201, 212, 0.88);
}

.app-mod-pat2-overview .app-mod-alloc-pie-wrap {
  margin: 0;
  max-width: none;
}

.app-mod-pat2-overview .app-mod-alloc-pie {
  width: min(104px, 24vw);
}

.app-mod-pat2-overview__legend {
  min-width: 0;
}

/* Camembert d’allocation (patrimoine + budget) */
.app-mod-alloc-pie-wrap {
  margin: 2px auto 8px;
  max-width: 220px;
}

.app-mod-alloc-pie {
  position: relative;
  width: min(176px, 76vw);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.app-mod-alloc-pie--hoverable {
  cursor: crosshair;
}

.app-mod-alloc-pie-wrap .app-mod-sim__chart-tip {
  z-index: 6;
}

.app-mod-alloc-pie--empty {
  background: repeating-conic-gradient(
    from -90deg,
    rgba(255, 255, 255, 0.05) 0deg 24deg,
    rgba(0, 0, 0, 0.18) 24deg 48deg
  ) !important;
}

.app-mod-alloc-pie__hole {
  position: absolute;
  inset: 22%;
  z-index: 1;
  border-radius: 50%;
  background: linear-gradient(162deg, rgba(14, 20, 36, 0.98) 0%, rgba(6, 10, 22, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.4);
}

.app-mod-alloc-pie__cap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 22%;
  text-align: center;
  pointer-events: none;
}

.app-mod-alloc-pie__k {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.78);
  line-height: 1.2;
}

.app-mod-alloc-pie__v {
  font-size: clamp(0.76rem, 2.1vw, 0.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(200, 248, 255, 0.96);
}

.app-mod-alloc-pie__none {
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(244, 246, 250, 0.36);
}

.app-mod-pat2-stack-legend--aside {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 8px;
  font-size: 0.72rem;
}

.app-mod-pat2-stack-legend--aside.app-mod-pat2-stack-legend--overview {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 0;
  align-items: center;
  align-content: center;
  grid-template-columns: unset;
}

.app-mod-pat2-main {
  min-width: 0;
  padding: 4px 0 0;
}

.app-mod-pat2-mtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.app-mod-pat2-mtab {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: rgba(244, 246, 250, 0.65);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.app-mod-pat2-mtab:hover {
  border-color: rgba(107, 201, 212, 0.35);
  color: rgba(244, 246, 250, 0.88);
}

.app-mod-pat2-mtab--on {
  border-color: rgba(107, 201, 212, 0.45);
  background: rgba(107, 201, 212, 0.12);
  color: rgba(244, 246, 250, 0.95);
}

.app-mod-pat2-panel {
  min-width: 0;
}

.app-mod-pat2-panel__hint {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.5);
}

.app-mod-pat2-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.app-mod-pat2-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(244, 246, 250, 0.82);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  max-width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.app-mod-pat2-pill:not(.app-mod-pat2-pill--on) {
  color: rgba(244, 246, 250, 0.62);
}

.app-mod-pat2-pill:not(.app-mod-pat2-pill--on):hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(244, 246, 250, 0.78);
}

.app-mod-pat2-pill--on:hover {
  filter: brightness(1.06);
}

.app-mod-pat2-pill--on {
  border-color: rgba(224, 196, 132, 0.45);
  background: rgba(224, 196, 132, 0.1);
  color: var(--white);
}

.app-mod-pat2-pill__amt {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.app-mod-pat2-pill:not(.app-mod-pat2-pill--on) .app-mod-pat2-pill__amt {
  color: rgba(244, 246, 250, 0.42);
  font-weight: 600;
}

.app-mod-pat2-pill--on .app-mod-pat2-pill__amt {
  font-weight: 800;
  color: rgba(200, 248, 255, 0.98);
}

.app-mod-pat2-pill--immo.app-mod-pat2-pill--on {
  border-color: rgba(232, 132, 74, 0.72);
  background: linear-gradient(138deg, rgba(232, 132, 74, 0.3) 0%, rgba(18, 14, 10, 0.55) 100%);
  box-shadow: 0 0 0 1px rgba(232, 132, 74, 0.18);
}

.app-mod-pat2-pill--immo.app-mod-pat2-pill--on .app-mod-pat2-pill__amt {
  color: rgba(255, 210, 180, 0.98);
}

.app-mod-pat2-pill--bourse.app-mod-pat2-pill--on {
  border-color: rgba(66, 201, 220, 0.72);
  background: linear-gradient(138deg, rgba(66, 201, 220, 0.28) 0%, rgba(10, 22, 28, 0.58) 100%);
  box-shadow: 0 0 0 1px rgba(66, 201, 220, 0.2);
}

.app-mod-pat2-pill--bourse.app-mod-pat2-pill--on .app-mod-pat2-pill__amt {
  color: rgba(190, 248, 255, 0.98);
}

.app-mod-pat2-pill--crypto.app-mod-pat2-pill--on {
  border-color: rgba(177, 138, 255, 0.72);
  background: linear-gradient(138deg, rgba(177, 138, 255, 0.26) 0%, rgba(16, 12, 28, 0.58) 100%);
  box-shadow: 0 0 0 1px rgba(177, 138, 255, 0.2);
}

.app-mod-pat2-pill--crypto.app-mod-pat2-pill--on .app-mod-pat2-pill__amt {
  color: rgba(230, 220, 255, 0.98);
}

.app-mod-pat2-pill--liq.app-mod-pat2-pill--on {
  border-color: rgba(94, 217, 154, 0.72);
  background: linear-gradient(138deg, rgba(94, 217, 154, 0.24) 0%, rgba(10, 24, 18, 0.58) 100%);
  box-shadow: 0 0 0 1px rgba(94, 217, 154, 0.18);
}

.app-mod-pat2-pill--liq.app-mod-pat2-pill--on .app-mod-pat2-pill__amt {
  color: rgba(200, 255, 220, 0.98);
}

.app-mod-pat2-pill--autre.app-mod-pat2-pill--on {
  border-color: rgba(180, 198, 218, 0.55);
  background: linear-gradient(138deg, rgba(148, 168, 188, 0.22) 0%, rgba(12, 14, 20, 0.58) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.app-mod-pat2-pill--autre.app-mod-pat2-pill--on .app-mod-pat2-pill__amt {
  color: rgba(236, 242, 252, 0.96);
}

.app-mod-pat2-class--single {
  margin-top: 0;
}

.app-mod-pat2-class--single .app-mod-pat2-class__ring {
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
}

.app-mod-pat2-empty {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.45);
}

.app-mod-pat2-debts .app-mod-pat2-debts__h {
  margin-top: 0;
}

.app-mod-pat2-income {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(224, 196, 132, 0.28);
  background: linear-gradient(135deg, rgba(224, 196, 132, 0.12) 0%, rgba(8, 15, 29, 0.75) 55%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.app-mod-pat2-income__icon {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.app-mod-pat2-income__body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.app-mod-pat2-income__lab {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.88);
}

.app-mod-pat2-income__inp {
  max-width: 220px;
}

.app-mod-pat2-hero {
  position: relative;
  border-radius: 16px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid rgba(107, 201, 212, 0.28);
  background: linear-gradient(155deg, rgba(107, 201, 212, 0.14) 0%, rgba(8, 14, 28, 0.92) 55%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-mod-pat2-hero__glow {
  position: absolute;
  width: 180px;
  height: 180px;
  top: -60px;
  right: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 201, 212, 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.app-mod-pat2-hero__inner {
  position: relative;
  z-index: 1;
}

.app-mod-pat2-hero__k {
  margin: 0 0 4px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.55);
}

.app-mod-pat2-hero__num {
  font-size: clamp(1.2rem, 3.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: rgba(200, 248, 255, 0.98);
  text-shadow: 0 0 40px rgba(107, 201, 212, 0.25);
}

.app-mod-pat2-hero__hint {
  margin: 6px 0 0;
  font-size: 0.74rem;
  color: rgba(244, 246, 250, 0.55);
}

.app-mod-pat2-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 560px) {
  .app-mod-pat2-strip {
    grid-template-columns: 1fr;
  }
}

.app-mod-pat2-strip__cell {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-mod-pat2-strip__cell--a {
  border-color: rgba(107, 201, 212, 0.28);
}

.app-mod-pat2-strip__cell--d {
  border-color: rgba(255, 130, 150, 0.28);
}

.app-mod-pat2-strip__cell--pos {
  border-color: rgba(120, 220, 160, 0.35);
  background: rgba(20, 40, 32, 0.45);
}

.app-mod-pat2-strip__cell--neg {
  border-color: rgba(255, 140, 140, 0.35);
  background: rgba(40, 20, 24, 0.4);
}

.app-mod-pat2-strip__k {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.48);
}

.app-mod-pat2-strip__v {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--white);
}

.app-mod-pat2-comp__h {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
}

.app-mod-pat2-stack {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
}

.app-mod-pat2-stack__empty {
  flex: 1;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  color: rgba(244, 246, 250, 0.35);
}

.app-mod-pat2-stack__seg {
  height: 100%;
  min-width: 2px;
  transition: width 0.35s ease;
}

.app-mod-pat2-stack__seg--immo {
  background: linear-gradient(90deg, #e0a878, #c88850);
}

.app-mod-pat2-stack__seg--bourse {
  background: linear-gradient(90deg, #6bc9d4, #3a9aaa);
}

.app-mod-pat2-stack__seg--crypto {
  background: linear-gradient(90deg, #b9a8ff, #8a6fd4);
}

.app-mod-pat2-stack__seg--liq {
  background: linear-gradient(90deg, #8fd4a8, #5cb88a);
}

.app-mod-pat2-stack__seg--autre {
  background: linear-gradient(90deg, rgba(244, 246, 250, 0.45), rgba(244, 246, 250, 0.2));
}

.app-mod-pat2-stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
  font-size: 0.76rem;
  color: rgba(244, 246, 250, 0.58);
}

.app-mod-pat2-stack-legend__it {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.app-mod-pat2-stack-legend__sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.app-mod-pat2-stack-legend__sw--immo {
  background: #e0a878;
}
.app-mod-pat2-stack-legend__sw--bourse {
  background: #6bc9d4;
}
.app-mod-pat2-stack-legend__sw--crypto {
  background: #b9a8ff;
}
.app-mod-pat2-stack-legend__sw--liq {
  background: #8fd4a8;
}
.app-mod-pat2-stack-legend__sw--autre {
  background: rgba(244, 246, 250, 0.45);
}

.app-mod-pat2-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 16px);
}

@media (max-width: 720px) {
  .app-mod-pat2-grid {
    grid-template-columns: 1fr;
  }
}

.app-mod-pat2-class {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: clamp(14px, 2vw, 18px);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(6, 10, 22, 0.88) 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
  overflow: hidden;
}

.app-mod-pat2-class--immo {
  border-color: rgba(232, 132, 74, 0.45);
  background: linear-gradient(168deg, rgba(232, 132, 74, 0.12) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-pat2-class--bourse {
  border-color: rgba(66, 201, 220, 0.45);
  background: linear-gradient(168deg, rgba(66, 201, 220, 0.12) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-pat2-class--crypto {
  border-color: rgba(177, 138, 255, 0.48);
  background: linear-gradient(168deg, rgba(177, 138, 255, 0.12) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-pat2-class--liq {
  border-color: rgba(94, 217, 154, 0.45);
  background: linear-gradient(168deg, rgba(94, 217, 154, 0.1) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-pat2-class--autre {
  border-color: rgba(148, 168, 188, 0.35);
  background: linear-gradient(168deg, rgba(148, 168, 188, 0.08) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-pat2-class__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding-right: 52px;
}

.app-mod-pat2-class__emoji {
  font-size: 1.75rem;
  line-height: 1;
}

.app-mod-pat2-class__titles {
  flex: 1 1 auto;
  min-width: 0;
}

.app-mod-pat2-class__name {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
}

.app-mod-pat2-class__alloc {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(224, 196, 132, 0.75);
}

.app-mod-pat2-class__sum {
  font-size: 1rem;
  font-weight: 800;
  color: rgba(107, 201, 212, 0.95);
  white-space: nowrap;
}

.app-mod-pat2-class__ring {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    rgba(107, 201, 212, 0.9) 0deg,
    rgba(107, 201, 212, 0.9) var(--pat-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--pat-ring, 0deg)
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}

.app-mod-pat2-class--immo .app-mod-pat2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(224, 168, 120, 0.95) 0deg,
    rgba(224, 168, 120, 0.95) var(--pat-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--pat-ring, 0deg)
  );
}
.app-mod-pat2-class--bourse .app-mod-pat2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(107, 201, 212, 0.95) 0deg,
    rgba(107, 201, 212, 0.95) var(--pat-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--pat-ring, 0deg)
  );
}
.app-mod-pat2-class--crypto .app-mod-pat2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(185, 168, 255, 0.95) 0deg,
    rgba(185, 168, 255, 0.95) var(--pat-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--pat-ring, 0deg)
  );
}
.app-mod-pat2-class--liq .app-mod-pat2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(143, 212, 168, 0.95) 0deg,
    rgba(143, 212, 168, 0.95) var(--pat-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--pat-ring, 0deg)
  );
}
.app-mod-pat2-class--autre .app-mod-pat2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(244, 246, 250, 0.55) 0deg,
    rgba(244, 246, 250, 0.55) var(--pat-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--pat-ring, 0deg)
  );
}

.app-mod-pat2-cash {
  margin-bottom: 12px;
  max-width: 200px;
}

.app-mod-pat2-class__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.app-mod-pat2-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, 120px) auto;
  gap: 8px;
  align-items: center;
}

.app-mod-pat2-line--debt {
  grid-template-columns: minmax(0, 1fr) minmax(88px, 120px) auto;
}

.app-mod-pat2-line--stack {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
}

.app-mod-pat2-line__stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.app-mod-pat2-line__subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(5.5rem, 1fr);
  gap: 6px;
  align-items: end;
}

@media (max-width: 520px) {
  .app-mod-pat2-line__subgrid {
    grid-template-columns: 1fr 1fr;
  }

  .app-mod-pat2-line__derived {
    grid-column: 1 / -1;
  }
}

.app-mod-pat2-mini-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.app-mod-pat2-mini-field__l {
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.45);
}

.app-mod-pat2-line__derived {
  font-size: 0.62rem;
  font-weight: 750;
  color: rgba(224, 196, 132, 0.92);
  line-height: 1.25;
  padding: 4px 0 2px;
}

.app-mod-pat2-line__manual-amt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, 140px);
  gap: 8px;
  align-items: end;
}

.app-mod-pat2-line__manual-l {
  font-size: 0.62rem;
  color: rgba(226, 232, 240, 0.5);
}

.app-mod-pat2-line__microhint {
  margin: 0;
  font-size: 0.58rem;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.42);
}

.app-mod-pat2-line__sym-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.app-mod-pat2-line__sym-row .app-mod-pat2-mini-field {
  flex: 1 1 140px;
  min-width: 0;
}

.app-mod-pat2-stock-refresh {
  flex: 0 0 auto;
  margin-bottom: 1px;
  font-size: 0.68rem;
  padding: 6px 10px;
}

.app-mod-pat2-stock-suggest {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.app-mod-pat2-stock-suggest__btn {
  text-align: left;
  font-size: 0.62rem;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(66, 201, 220, 0.2);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(244, 246, 250, 0.88);
  cursor: pointer;
}

.app-mod-pat2-stock-suggest__btn:hover {
  border-color: rgba(66, 201, 220, 0.45);
  color: #fff;
}

.app-mod-pat2-line__spot {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.4;
  color: rgba(66, 201, 220, 0.88);
}

.app-mod-pat2-line__stock-err {
  color: rgba(255, 180, 190, 0.85) !important;
}

.app-mod-pat2-spark {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.app-mod-pat2-spark__cap {
  margin-bottom: 6px !important;
}

.app-mod-pat2-spark__ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.app-mod-pat2-spark__rng {
  font-size: 0.58rem;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.18);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(244, 246, 250, 0.78);
  cursor: pointer;
}

.app-mod-pat2-spark__rng--on {
  border-color: rgba(66, 201, 220, 0.5);
  color: #fff;
}

.app-mod-pat2-spark__plot {
  width: 100%;
  max-width: 320px;
}

.app-mod-pat2-spark__svg {
  width: 100%;
  height: auto;
  display: block;
}

.app-mod-pat2-mcat {
  margin: 6px 0 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.1);
  background: rgba(0, 0, 0, 0.18);
}

.app-mod-pat2-mcat--bourse {
  border-color: rgba(66, 201, 220, 0.2);
}

.app-mod-pat2-mcat--crypto {
  border-color: rgba(177, 138, 255, 0.28);
}

.app-mod-pat2-mcat__title {
  margin: 0 0 8px;
  font-size: 0.62rem;
  color: rgba(226, 232, 240, 0.55);
}

.app-mod-pat2-mcat__k {
  display: block;
  margin-top: 6px;
  margin-bottom: 4px;
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.42);
}

.app-mod-pat2-mcat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.app-mod-pat2-mcat__chip {
  font-size: 0.58rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.16);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(244, 246, 250, 0.88);
  cursor: pointer;
}

.app-mod-pat2-mcat--bourse .app-mod-pat2-mcat__chip:hover {
  border-color: rgba(66, 201, 220, 0.45);
}

.app-mod-pat2-mcat--crypto .app-mod-pat2-mcat__chip:hover {
  border-color: rgba(177, 138, 255, 0.5);
}

.app-mod-pat2-debt-card {
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 140, 160, 0.18);
  background: rgba(0, 0, 0, 0.22);
}

.app-mod-pat2-debt-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.app-mod-pat2-debt-card__head .app-mod-input {
  flex: 1;
  min-width: 0;
}

.app-mod-pat2-debt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.app-mod-pat2-debt-field__l {
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 210, 218, 0.55);
}

.app-mod-pat2-debt-card__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 8px;
  font-size: 0.72rem;
}

.app-mod-pat2-debt-card__pay-k {
  color: rgba(244, 246, 250, 0.55);
}

.app-mod-pat2-debt-card__pay-v {
  color: rgba(255, 224, 200, 0.98);
  font-weight: 800;
}

.app-mod-pat2-debt-card__auto {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 4px;
  font-size: 0.66rem;
  line-height: 1.35;
  color: rgba(244, 246, 250, 0.72);
  cursor: pointer;
}

.app-mod-pat2-debt-card__chk {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: rgba(255, 140, 160, 0.85);
}

.app-mod-pat2-line__amt {
  text-align: right;
}

.app-mod-pat2-line__del {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(244, 246, 250, 0.65);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.app-mod-pat2-line__del:hover {
  border-color: rgba(255, 140, 160, 0.4);
  color: #ffc9d0;
}

.app-mod-pat2-class__add {
  width: 100%;
  justify-content: center;
  font-size: 0.84rem;
}

.app-mod-pat2-debts {
  padding: clamp(18px, 2.5vw, 24px);
  border-radius: 20px;
  border: 1px solid rgba(255, 140, 160, 0.22);
  background: linear-gradient(165deg, rgba(255, 120, 140, 0.08) 0%, rgba(8, 12, 24, 0.9) 100%);
}

.app-mod-pat2-debts__h {
  margin: 0 0 14px;
  font-size: 1.02rem;
  font-weight: 800;
  color: rgba(255, 210, 218, 0.95);
}

.app-mod-pat2-debts__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.app-mod-pat2-debts__add {
  width: 100%;
  justify-content: center;
}

/* Budget — vue par catégories (v2) */
.app-mod-bud2 {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 16px);
}

.app-mod-bud2--compact {
  gap: clamp(10px, 1.6vw, 14px);
}

.app-mod-bud2-prudence {
  margin: 0;
  padding: clamp(10px, 1.6vw, 14px) clamp(12px, 2vw, 16px);
  border-radius: 12px;
  border: 1px solid rgba(224, 196, 132, 0.22);
  background: rgba(224, 196, 132, 0.06);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(244, 246, 250, 0.72);
}

.app-mod-bud2-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.app-mod-bud2-topbar__income,
.app-mod-bud2-topbar__cashflow {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

@media (min-width: 520px) {
  .app-mod-bud2-topbar__income {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
  }

  .app-mod-bud2-topbar__income .app-mod-bud2-topbar__lab {
    flex: 0 1 auto;
    margin: 0;
  }

  .app-mod-bud2-topbar__income .app-mod-bud2-topbar__inp {
    flex: 1 1 100px;
    max-width: 200px;
    width: auto;
  }
}

.app-mod-bud2-topbar__income {
  border-color: rgba(224, 196, 132, 0.22);
}

.app-mod-bud2-topbar__cashflow {
  border-color: rgba(143, 212, 168, 0.32);
}

.app-mod-bud2-topbar__lab {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.5);
}

.app-mod-bud2-topbar__inp {
  width: 100%;
}

.app-mod-bud2-topbar__cf-k {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(143, 212, 168, 0.85);
}

.app-mod-bud2-topbar__cf-v {
  font-size: clamp(0.98rem, 2.3vw, 1.28rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: rgba(210, 255, 228, 0.96);
}

.app-mod-bud2-topbar__cf-meta {
  font-size: 0.66rem;
  line-height: 1.35;
  color: rgba(244, 246, 250, 0.45);
}

.app-mod-bud2-topbar__kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: start;
}

.app-mod-bud2-kpi {
  flex: 1 1 88px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.app-mod-bud2-kpi__ico {
  flex-shrink: 0;
  font-size: 1.22rem;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.app-mod-bud2-kpi__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.app-mod-bud2-kpi__k {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.45);
  line-height: 1.25;
}

.app-mod-bud2-kpi__v {
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(244, 246, 250, 0.94);
  letter-spacing: -0.02em;
}

.app-mod-bud2-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vw, 22px);
}

.app-mod-bud2-sec {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.app-mod-bud2-sec--3 {
  padding: 0;
  border: none;
  background: transparent;
}

.app-mod-bud2-sec__title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.88);
}

.app-mod-bud2-comp-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 22px);
  align-items: flex-start;
}

.app-mod-bud2-comp-row__pie {
  flex: 0 0 auto;
}

.app-mod-bud2-comp-row__meta {
  flex: 1 1 220px;
  min-width: 0;
}

.app-mod-bud2-pie-legend-details__sum,
.app-mod-bud2-sankey-legend-details__sum {
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.48);
  list-style: none;
}

.app-mod-bud2-pie-legend-details__sum::-webkit-details-marker,
.app-mod-bud2-sankey-legend-details__sum::-webkit-details-marker {
  display: none;
}

.app-mod-bud2-pie-legend-details__sum::after,
.app-mod-bud2-sankey-legend-details__sum::after {
  content: " ▾";
  font-size: 0.62rem;
  opacity: 0.75;
}

.app-mod-bud2-pie-legend-details[open] .app-mod-bud2-pie-legend-details__sum::after,
.app-mod-bud2-sankey-legend-details[open] .app-mod-bud2-sankey-legend-details__sum::after {
  content: " ▴";
}

.app-mod-bud2-pie-legend-details__body,
.app-mod-bud2-sankey-legend-details__body {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-mod-bud2-sankey-legend-details__intro {
  margin: 0 0 8px;
  font-size: 0.66rem;
  color: rgba(244, 246, 250, 0.5);
}

.app-mod-bud2-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.72rem;
  color: rgba(244, 246, 250, 0.88);
}

.app-mod-bud2-legend-row--spare .app-mod-bud2-legend-row__txt {
  color: rgba(0, 245, 208, 0.95);
  font-weight: 700;
}

.app-mod-bud2-stack-legend__sw--spare {
  box-shadow: 0 0 12px rgba(0, 245, 208, 0.45);
}

.app-mod-bud2-sankey-legend-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 0.72rem;
}

.app-mod-bud2-sankey-legend-row__k {
  color: rgba(244, 246, 250, 0.58);
}

.app-mod-bud2-sankey-legend-row__v {
  font-weight: 600;
  color: rgba(244, 246, 250, 0.78);
  white-space: nowrap;
}

.app-mod-bud2-sankey-legend-row--spare .app-mod-bud2-sankey-legend-row__k,
.app-mod-bud2-sankey-legend-row--spare .app-mod-bud2-sankey-legend-row__v {
  color: rgba(120, 168, 158, 0.92);
}

.app-mod-bud2-sankey-legend-row--income .app-mod-bud2-sankey-legend-row__k {
  color: rgba(244, 246, 250, 0.5);
}

.app-mod-bud2-calc__eq {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 10px;
  margin-bottom: 12px;
}

.app-mod-bud2-calc__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.app-mod-bud2-calc__k {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.45);
}

.app-mod-bud2-calc__v {
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(244, 246, 250, 0.92);
}

.app-mod-bud2-calc__cell--net {
  border-color: rgba(224, 196, 132, 0.22);
}

.app-mod-bud2-calc__net-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.app-mod-bud2-calc__income-inp {
  width: 100%;
  max-width: min(12rem, 100%);
  margin-top: 2px;
  font-size: clamp(0.92rem, 2.1vw, 1.12rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-align: left;
}

.app-mod-bud2-calc__income-edit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(224, 196, 132, 0.95);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.app-mod-bud2-calc__income-edit .app-life-icon-solid svg {
  width: 18px;
  height: 18px;
}

.app-mod-bud2-calc__income-edit:hover,
.app-mod-bud2-calc__income-edit:focus-visible {
  border-color: rgba(224, 196, 132, 0.45);
  color: #ffe8c4;
  background: rgba(224, 196, 132, 0.1);
  outline: none;
}

.app-mod-bud2-calc__v--flash {
  font-size: clamp(1.05rem, 2.8vw, 1.45rem);
  text-shadow: 0 0 22px rgba(0, 245, 208, 0.55);
  color: #7fffea;
}

.app-mod-bud2-calc__cell--neg .app-mod-bud2-calc__v--flash {
  color: #ffb4a8;
  text-shadow: 0 0 20px rgba(255, 120, 100, 0.45);
}

.app-mod-bud2-calc__op {
  font-size: 1.1rem;
  font-weight: 800;
  color: rgba(244, 246, 250, 0.35);
  padding: 0 2px 4px;
}

.app-mod-bud2-calc__track {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
}

.app-mod-bud2-calc__track__exp {
  display: block;
  height: 100%;
  flex: 0 0 auto;
  background: linear-gradient(90deg, rgba(232, 132, 74, 0.85), rgba(200, 100, 120, 0.75));
  transition: width 0.25s ease;
}

.app-mod-bud2-calc__track__rem {
  display: block;
  height: 100%;
  flex: 0 0 auto;
  background: linear-gradient(90deg, rgba(0, 230, 200, 0.35), rgba(0, 245, 208, 0.72));
  box-shadow: inset 0 0 12px rgba(0, 255, 220, 0.25);
  transition: width 0.25s ease;
}

.app-mod-bud2-calc__meta {
  margin: 0 0 4px;
  font-size: 0.66rem;
  color: rgba(244, 246, 250, 0.42);
}

.app-mod-bud2-calc__hint {
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.4);
}

.app-mod-bud2-entry-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.app-mod-bud2-funnel-band {
  width: 100%;
  min-width: 0;
  padding: 14px 16px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 26, 0.38);
}

.app-mod-bud2-funnel-band--wide {
  padding: 14px 10px 12px;
}

.app-mod-bud2-aside {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

.app-mod-bud2-funnel {
  margin: 0;
  padding: 0;
  border: 0;
}

.app-mod-bud2-funnel__title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.78);
}

.app-mod-bud2-sankey-wrap {
  position: relative;
  margin: 4px 0 2px;
}

.app-mod-bud2-sankey-wrap .app-mod-sim__chart-tip {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-mod-bud2-sankey {
  display: block;
  width: 100%;
  max-height: min(400px, 58vh);
  overflow: visible;
}

.app-mod-bud2-funnel-band--wide .app-mod-bud2-sankey {
  max-height: min(440px, 62vh);
}

.app-mod-bud2-sankey__src {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}

.app-mod-bud2-sankey__axis {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
  stroke-linecap: round;
}

.app-mod-bud2-sankey__flow {
  stroke-width: 0.25;
  filter: saturate(0.82) brightness(1.03);
  transition: opacity 0.28s ease;
}

.app-mod-bud2-sankey__flow--spent {
  stroke: rgba(0, 0, 0, 0.22);
}

.app-mod-bud2-sankey__flow--spare {
  stroke: rgba(90, 130, 125, 0.35);
  stroke-width: 0.3;
}

.app-mod-bud2-sankey__lbl {
  fill: rgba(244, 246, 250, 0.62);
  font-size: 9.5px;
  font-weight: 600;
  pointer-events: none;
}

.app-mod-bud2-sankey__lbl--compact {
  fill: rgba(244, 246, 250, 0.52);
}

.app-mod-bud2-sankey__ribbon-dot {
  stroke: rgba(8, 12, 24, 0.35);
  stroke-width: 0.45;
  pointer-events: none;
}

.app-mod-bud2-sankey__income-lab {
  fill: rgba(244, 246, 250, 0.42);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
}

.app-mod-bud2-sankey__income-val {
  fill: rgba(244, 246, 250, 0.78);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}

.app-mod-bud2-sankey__empty {
  fill: rgba(244, 246, 250, 0.38);
  font-size: 12px;
  font-weight: 600;
}

.app-mod-bud2-sankey__noinc {
  fill: rgba(244, 246, 250, 0.25);
  font-size: 22px;
  font-weight: 700;
}

.app-mod-bud2-sankey__warn {
  margin: 8px 0 0;
  font-size: 0.7rem;
  line-height: 1.45;
  color: rgba(255, 180, 170, 0.92);
}

.app-mod-bud2-sankey-ribbons {
  margin-top: 10px;
  padding: 10px 12px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(6, 10, 20, 0.32);
}

.app-mod-bud2-sankey-ribbons__hint {
  margin: 0 0 8px;
  font-size: 0.64rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.4);
}

.app-mod-bud2-sankey-ribbon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.app-mod-bud2-sankey-ribbon-row:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.app-mod-bud2-sankey-ribbon-row__dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.app-mod-bud2-sankey-ribbon-row__meta {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.app-mod-bud2-sankey-ribbon-row__k {
  font-size: 0.7rem;
  line-height: 1.35;
  color: rgba(244, 246, 250, 0.72);
  min-width: 0;
}

.app-mod-bud2-sankey-ribbon-row__v {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 246, 250, 0.82);
}

.app-mod-bud2-funnel__step {
  margin-bottom: 2px;
}

.app-mod-bud2-funnel__step--final {
  margin-top: 2px;
}

.app-mod-bud2-funnel__step--warn .app-mod-bud2-funnel__step-v {
  color: #ffb8b8;
}

.app-mod-bud2-funnel__step-k {
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(244, 246, 250, 0.55);
  margin-bottom: 2px;
}

.app-mod-bud2-funnel__step-v {
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.app-mod-bud2-funnel__band {
  display: block;
  height: 10px;
  border-radius: 6px;
  transition: width 0.35s ease;
}

.app-mod-bud2-funnel__band--in {
  width: 100%;
  background: linear-gradient(90deg, rgba(224, 196, 132, 0.85), rgba(107, 201, 212, 0.75));
}

.app-mod-bud2-funnel__band--out {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, rgba(255, 170, 150, 0.95), rgba(255, 120, 130, 0.65));
}

.app-mod-bud2-funnel__band--cash {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, rgba(143, 212, 168, 0.92), rgba(107, 201, 212, 0.65));
}

.app-mod-bud2-funnel__band--neg {
  background: linear-gradient(90deg, #e86868, #f0a078);
}

.app-mod-bud2-funnel__ar {
  text-align: center;
  font-size: 0.82rem;
  line-height: 1;
  color: rgba(244, 246, 250, 0.35);
  margin: 0 0 3px;
}

.app-mod-bud2-funnel__pct {
  display: block;
  margin-top: 3px;
  font-size: 0.66rem;
  color: rgba(244, 246, 250, 0.45);
}

.app-mod-bud2-funnel__hint {
  margin: 10px 0 0;
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.4);
}

.app-mod-bud2-aside__h {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.55);
}

.app-mod-bud2-aside__muted {
  font-size: 0.74rem;
  color: rgba(244, 246, 250, 0.35);
}

.app-mod-bud2-stack-legend--aside {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 8px;
  font-size: 0.72rem;
}

.app-mod-bud2-main {
  min-width: 0;
}

.app-mod-bud2-main__hint {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.5);
}

.app-mod-bud2-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.app-mod-bud2-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(244, 246, 250, 0.82);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  max-width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.app-mod-bud2-pill:hover {
  border-color: rgba(143, 212, 168, 0.35);
}

.app-mod-bud2-pill--on {
  border-color: rgba(143, 212, 168, 0.45);
  background: rgba(143, 212, 168, 0.1);
  color: var(--white);
}

.app-mod-bud2-pill__amt {
  font-weight: 800;
  color: rgba(143, 212, 168, 0.92);
  font-variant-numeric: tabular-nums;
}

.app-mod-bud2-pill--on .app-mod-bud2-pill__amt {
  color: rgba(210, 255, 228, 0.98);
}

.app-mod-bud2-pill--logement {
  border-color: rgba(232, 132, 74, 0.38);
  background: linear-gradient(138deg, rgba(232, 132, 74, 0.12) 0%, rgba(0, 0, 0, 0.22) 65%);
}

.app-mod-bud2-pill--alimentation {
  border-color: rgba(107, 206, 143, 0.4);
  background: linear-gradient(138deg, rgba(107, 206, 143, 0.12) 0%, rgba(0, 0, 0, 0.22) 65%);
}

.app-mod-bud2-pill--transport {
  border-color: rgba(74, 184, 232, 0.4);
  background: linear-gradient(138deg, rgba(74, 184, 232, 0.12) 0%, rgba(0, 0, 0, 0.22) 65%);
}

.app-mod-bud2-pill--loisirs {
  border-color: rgba(196, 156, 255, 0.42);
  background: linear-gradient(138deg, rgba(196, 156, 255, 0.12) 0%, rgba(0, 0, 0, 0.22) 65%);
}

.app-mod-bud2-pill--voyage {
  border-color: rgba(62, 207, 159, 0.42);
  background: linear-gradient(138deg, rgba(62, 207, 159, 0.12) 0%, rgba(0, 0, 0, 0.22) 65%);
}

.app-mod-bud2-pill--sante {
  border-color: rgba(240, 139, 168, 0.42);
  background: linear-gradient(138deg, rgba(240, 139, 168, 0.1) 0%, rgba(0, 0, 0, 0.22) 65%);
}

.app-mod-bud2-pill--abonnements {
  border-color: rgba(240, 200, 98, 0.4);
  background: linear-gradient(138deg, rgba(240, 200, 98, 0.12) 0%, rgba(0, 0, 0, 0.22) 65%);
}

.app-mod-bud2-pill--autre {
  border-color: rgba(154, 168, 188, 0.35);
  background: linear-gradient(138deg, rgba(154, 168, 188, 0.08) 0%, rgba(0, 0, 0, 0.22) 65%);
}

.app-mod-bud2-pill--logement.app-mod-bud2-pill--on {
  border-color: rgba(232, 132, 74, 0.72);
  background: linear-gradient(138deg, rgba(232, 132, 74, 0.28) 0%, rgba(18, 14, 10, 0.55) 100%);
  box-shadow: 0 0 0 1px rgba(232, 132, 74, 0.18);
}

.app-mod-bud2-pill--logement.app-mod-bud2-pill--on .app-mod-bud2-pill__amt {
  color: rgba(255, 210, 180, 0.98);
}

.app-mod-bud2-pill--alimentation.app-mod-bud2-pill--on {
  border-color: rgba(107, 206, 143, 0.72);
  background: linear-gradient(138deg, rgba(107, 206, 143, 0.26) 0%, rgba(10, 22, 16, 0.58) 100%);
  box-shadow: 0 0 0 1px rgba(107, 206, 143, 0.18);
}

.app-mod-bud2-pill--alimentation.app-mod-bud2-pill--on .app-mod-bud2-pill__amt {
  color: rgba(200, 255, 218, 0.98);
}

.app-mod-bud2-pill--transport.app-mod-bud2-pill--on {
  border-color: rgba(74, 184, 232, 0.72);
  background: linear-gradient(138deg, rgba(74, 184, 232, 0.26) 0%, rgba(10, 20, 28, 0.58) 100%);
  box-shadow: 0 0 0 1px rgba(74, 184, 232, 0.18);
}

.app-mod-bud2-pill--transport.app-mod-bud2-pill--on .app-mod-bud2-pill__amt {
  color: rgba(190, 236, 255, 0.98);
}

.app-mod-bud2-pill--loisirs.app-mod-bud2-pill--on {
  border-color: rgba(196, 156, 255, 0.72);
  background: linear-gradient(138deg, rgba(196, 156, 255, 0.24) 0%, rgba(16, 12, 26, 0.58) 100%);
  box-shadow: 0 0 0 1px rgba(196, 156, 255, 0.18);
}

.app-mod-bud2-pill--loisirs.app-mod-bud2-pill--on .app-mod-bud2-pill__amt {
  color: rgba(230, 220, 255, 0.98);
}

.app-mod-bud2-pill--voyage.app-mod-bud2-pill--on {
  border-color: rgba(62, 207, 159, 0.72);
  background: linear-gradient(138deg, rgba(62, 207, 159, 0.24) 0%, rgba(10, 22, 18, 0.58) 100%);
  box-shadow: 0 0 0 1px rgba(62, 207, 159, 0.2);
}

.app-mod-bud2-pill--voyage.app-mod-bud2-pill--on .app-mod-bud2-pill__amt {
  color: rgba(200, 255, 230, 0.98);
}

.app-mod-bud2-pill--sante.app-mod-bud2-pill--on {
  border-color: rgba(240, 139, 168, 0.72);
  background: linear-gradient(138deg, rgba(240, 139, 168, 0.22) 0%, rgba(26, 12, 18, 0.58) 100%);
  box-shadow: 0 0 0 1px rgba(240, 139, 168, 0.16);
}

.app-mod-bud2-pill--sante.app-mod-bud2-pill--on .app-mod-bud2-pill__amt {
  color: rgba(255, 210, 224, 0.98);
}

.app-mod-bud2-pill--abonnements.app-mod-bud2-pill--on {
  border-color: rgba(240, 200, 98, 0.72);
  background: linear-gradient(138deg, rgba(240, 200, 98, 0.24) 0%, rgba(22, 18, 8, 0.58) 100%);
  box-shadow: 0 0 0 1px rgba(240, 200, 98, 0.18);
}

.app-mod-bud2-pill--abonnements.app-mod-bud2-pill--on .app-mod-bud2-pill__amt {
  color: rgba(255, 236, 190, 0.98);
}

.app-mod-bud2-pill--autre.app-mod-bud2-pill--on {
  border-color: rgba(180, 198, 218, 0.55);
  background: linear-gradient(138deg, rgba(154, 168, 188, 0.2) 0%, rgba(12, 14, 20, 0.58) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.app-mod-bud2-pill--autre.app-mod-bud2-pill--on .app-mod-bud2-pill__amt {
  color: rgba(236, 242, 252, 0.96);
}

.app-mod-bud2-class--single {
  margin-top: 0;
}

.app-mod-bud2-class--single .app-mod-bud2-class__pie-ring-wrap {
  width: 48px;
  height: 48px;
}

.app-mod-bud2-class--single .app-mod-bud2-class__pie-pct {
  font-size: 0.7rem;
}

.app-mod-bud2-empty {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.45);
}

.app-mod-bud2-income {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(224, 196, 132, 0.32);
  background: linear-gradient(125deg, rgba(224, 196, 132, 0.14) 0%, rgba(8, 15, 29, 0.78) 52%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.app-mod-bud2-income__icon {
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.app-mod-bud2-income__body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.app-mod-bud2-income__lab {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.9);
}

.app-mod-bud2-income__inp {
  max-width: 220px;
}

.app-mod-bud2-hero {
  position: relative;
  border-radius: 16px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid rgba(143, 212, 168, 0.28);
  background: linear-gradient(155deg, rgba(143, 212, 168, 0.12) 0%, rgba(8, 14, 28, 0.92) 55%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-mod-bud2-hero__glow {
  position: absolute;
  width: 200px;
  height: 200px;
  top: -70px;
  right: -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 212, 168, 0.32) 0%, transparent 72%);
  pointer-events: none;
}

.app-mod-bud2-hero__inner {
  position: relative;
  z-index: 1;
}

.app-mod-bud2-hero__k {
  margin: 0 0 4px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.55);
}

.app-mod-bud2-hero__num {
  font-size: clamp(1.2rem, 3.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: rgba(210, 255, 228, 0.98);
  text-shadow: 0 0 36px rgba(143, 212, 168, 0.22);
}

.app-mod-bud2-hero__hint {
  margin: 6px 0 0;
  font-size: 0.74rem;
  color: rgba(244, 246, 250, 0.52);
}

.app-mod-bud2-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 560px) {
  .app-mod-bud2-strip {
    grid-template-columns: 1fr;
  }
}

.app-mod-bud2-strip__cell {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-mod-bud2-strip__cell--env {
  border-color: rgba(224, 196, 132, 0.28);
}

.app-mod-bud2-strip__cell--spent {
  border-color: rgba(255, 160, 140, 0.28);
}

.app-mod-bud2-strip__cell--pos {
  border-color: rgba(120, 220, 160, 0.35);
  background: rgba(18, 36, 28, 0.42);
}

.app-mod-bud2-strip__cell--neg {
  border-color: rgba(255, 140, 140, 0.35);
  background: rgba(36, 18, 22, 0.42);
}

.app-mod-bud2-strip__k {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.48);
}

.app-mod-bud2-strip__v {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.25;
}

.app-mod-bud2-comp__h {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--white);
}

.app-mod-bud2-stack {
  display: flex;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
}

.app-mod-bud2-stack__empty {
  flex: 1;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  color: rgba(244, 246, 250, 0.38);
  padding: 8px 12px;
}

.app-mod-bud2-stack__seg {
  height: 100%;
  min-width: 2px;
  transition: width 0.35s ease;
}

.app-mod-bud2-stack__seg--logement {
  background: linear-gradient(90deg, #e0a878, #c88850);
}

.app-mod-bud2-stack__seg--alimentation {
  background: linear-gradient(90deg, #8fd4a8, #4a9d6e);
}

.app-mod-bud2-stack__seg--transport {
  background: linear-gradient(90deg, #6bc9d4, #3a8a9a);
}

.app-mod-bud2-stack__seg--loisirs {
  background: linear-gradient(90deg, #c4b0ff, #8a6fd4);
}

.app-mod-bud2-stack__seg--sante {
  background: linear-gradient(90deg, #f0a0b8, #c86080);
}

.app-mod-bud2-stack__seg--abonnements {
  background: linear-gradient(90deg, #e8d080, #b89840);
}

.app-mod-bud2-stack__seg--autre {
  background: linear-gradient(90deg, rgba(244, 246, 250, 0.5), rgba(244, 246, 250, 0.18));
}

.app-mod-bud2-stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
  font-size: 0.76rem;
  color: rgba(244, 246, 250, 0.58);
}

.app-mod-bud2-stack-legend__it {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.app-mod-bud2-stack-legend__sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.app-mod-bud2-stack-legend__sw--logement {
  background: #e0a878;
}
.app-mod-bud2-stack-legend__sw--alimentation {
  background: #8fd4a8;
}
.app-mod-bud2-stack-legend__sw--transport {
  background: #6bc9d4;
}
.app-mod-bud2-stack-legend__sw--loisirs {
  background: #c4b0ff;
}
.app-mod-bud2-stack-legend__sw--sante {
  background: #f0a0b8;
}
.app-mod-bud2-stack-legend__sw--abonnements {
  background: #e8d080;
}
.app-mod-bud2-stack-legend__sw--autre {
  background: rgba(244, 246, 250, 0.45);
}

.app-mod-bud2-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 16px);
}

@media (max-width: 900px) {
  .app-mod-bud2-grid {
    grid-template-columns: 1fr;
  }
}

.app-mod-bud2-class {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: clamp(14px, 2vw, 18px);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.05) 0%, rgba(6, 10, 22, 0.9) 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
  overflow: hidden;
}

.app-mod-bud2-class--logement {
  border-color: rgba(232, 132, 74, 0.42);
  background: linear-gradient(168deg, rgba(232, 132, 74, 0.1) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-bud2-class--alimentation {
  border-color: rgba(107, 206, 143, 0.42);
  background: linear-gradient(168deg, rgba(107, 206, 143, 0.1) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-bud2-class--transport {
  border-color: rgba(74, 184, 232, 0.42);
  background: linear-gradient(168deg, rgba(74, 184, 232, 0.1) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-bud2-class--loisirs {
  border-color: rgba(196, 156, 255, 0.45);
  background: linear-gradient(168deg, rgba(196, 156, 255, 0.1) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-bud2-class--voyage {
  border-color: rgba(62, 207, 159, 0.45);
  background: linear-gradient(168deg, rgba(62, 207, 159, 0.1) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-bud2-class--sante {
  border-color: rgba(240, 139, 168, 0.45);
  background: linear-gradient(168deg, rgba(240, 139, 168, 0.09) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-bud2-class--abonnements {
  border-color: rgba(240, 200, 98, 0.42);
  background: linear-gradient(168deg, rgba(240, 200, 98, 0.1) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-bud2-class--autre {
  border-color: rgba(154, 168, 188, 0.35);
  background: linear-gradient(168deg, rgba(154, 168, 188, 0.07) 0%, rgba(6, 10, 22, 0.9) 52%);
}

.app-mod-bud2-class__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding-right: clamp(72px, 22vw, 104px);
}

.app-mod-bud2-class__emoji {
  font-size: 1.75rem;
  line-height: 1;
}

.app-mod-bud2-class__titles {
  flex: 1 1 auto;
  min-width: 0;
}

.app-mod-bud2-class__name {
  margin: 0 0 6px;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--white);
}

.app-mod-bud2-class__sub {
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.52);
}

.app-mod-bud2-class__cat-hint {
  margin: 8px 0 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: rgba(224, 196, 132, 0.78);
}

.app-mod-bud2-class__pie-aside {
  position: absolute;
  top: 10px;
  right: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: min(102px, 30vw);
  text-align: center;
  pointer-events: none;
}

.app-mod-bud2-class__pie-ring-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.app-mod-bud2-class__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    rgba(107, 201, 212, 0.92) 0deg,
    rgba(107, 201, 212, 0.92) var(--bud-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--bud-ring, 0deg)
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}

.app-mod-bud2-class__pie-pct {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  font-size: 0.74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: rgba(244, 246, 250, 0.96);
}

.app-mod-bud2-class__pie-lab {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(244, 246, 250, 0.5);
  max-width: 96px;
}

.app-mod-bud2-class--logement .app-mod-bud2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(224, 168, 120, 0.95) 0deg,
    rgba(224, 168, 120, 0.95) var(--bud-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--bud-ring, 0deg)
  );
}
.app-mod-bud2-class--alimentation .app-mod-bud2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(143, 212, 168, 0.95) 0deg,
    rgba(143, 212, 168, 0.95) var(--bud-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--bud-ring, 0deg)
  );
}
.app-mod-bud2-class--transport .app-mod-bud2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(107, 201, 212, 0.95) 0deg,
    rgba(107, 201, 212, 0.95) var(--bud-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--bud-ring, 0deg)
  );
}
.app-mod-bud2-class--loisirs .app-mod-bud2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(196, 176, 255, 0.95) 0deg,
    rgba(196, 176, 255, 0.95) var(--bud-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--bud-ring, 0deg)
  );
}
.app-mod-bud2-class--voyage .app-mod-bud2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(90, 220, 175, 0.95) 0deg,
    rgba(90, 220, 175, 0.95) var(--bud-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--bud-ring, 0deg)
  );
}
.app-mod-bud2-class--sante .app-mod-bud2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(240, 160, 184, 0.95) 0deg,
    rgba(240, 160, 184, 0.95) var(--bud-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--bud-ring, 0deg)
  );
}
.app-mod-bud2-class--abonnements .app-mod-bud2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(232, 208, 128, 0.95) 0deg,
    rgba(232, 208, 128, 0.95) var(--bud-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--bud-ring, 0deg)
  );
}
.app-mod-bud2-class--autre .app-mod-bud2-class__ring {
  background: conic-gradient(
    from -90deg,
    rgba(244, 246, 250, 0.55) 0deg,
    rgba(244, 246, 250, 0.55) var(--bud-ring, 0deg),
    rgba(255, 255, 255, 0.1) var(--bud-ring, 0deg)
  );
}

.app-mod-bud2-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.app-mod-bud2-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, 120px) 36px;
  gap: 8px;
  align-items: center;
}

.app-mod-bud2-line--hdr {
  margin-bottom: 2px;
}

.app-mod-bud2-line__mini {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.42);
}

.app-mod-bud2-line__num {
  text-align: right;
}

.app-mod-bud2-line__del {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(244, 246, 250, 0.65);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.app-mod-bud2-line__del:hover {
  border-color: rgba(255, 160, 140, 0.4);
  color: #ffd0d4;
}

.app-mod-bud2-class__add {
  width: 100%;
  justify-content: center;
  font-size: 0.84rem;
  margin-bottom: 12px;
}

@media (max-width: 520px) {
  .app-mod-bud2-line:not(.app-mod-bud2-line--hdr) {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 100px) 34px;
    gap: 6px;
  }

  .app-mod-bud2-line--hdr {
    display: none;
  }
}

/* Budget */
.app-mod-bud__top {
  margin-bottom: 16px;
}

.app-mod-bud__kpi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
}

.app-mod-bud__kpi-t {
  font-size: 0.84rem;
  color: rgba(244, 246, 250, 0.75);
}

.app-mod-bud__kpi-t--accent {
  color: rgba(107, 201, 212, 0.95);
  font-weight: 700;
}

.app-mod-bud__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.app-mod-bud-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  padding: clamp(14px, 2vw, 18px);
}

.app-mod-bud-card__head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.app-mod-bud-card__nums {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 10px;
}

@media (max-width: 560px) {
  .app-mod-bud-card__nums {
    grid-template-columns: 1fr 1fr;
  }

  .app-mod-bud-card__lbl {
    grid-column: span 2;
  }
}

.app-mod-bud-card__lbl {
  font-size: 0.72rem;
  color: rgba(244, 246, 250, 0.5);
}

.app-mod-bud-card__bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.app-mod-bud-card__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6bc9d4, #b9a8ff);
  transition: width 0.25s ease;
}

.app-mod-bud-card__fill--over {
  background: linear-gradient(90deg, #f07878, #f0a078);
}

.app-mod-bud-card__hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: rgba(244, 246, 250, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .app-mod-edu__fill,
  .app-mod-bud-card__fill,
  .app-mod-bud2-funnel__band,
  .app-mod-bud2-sankey__flow,
  .app-mod-bud2-stack__seg {
    transition: none;
  }
}