/* 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-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%;
}

/* Simulateur crédit */
.app-mod--credit .app-mod__hero--credit,
.app-mod--credit .app-psych-play__kicker {
  text-align: left;
}
.app-mod-credit__disclaimer {
  margin: 14px 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(226, 230, 237, 0.92);
}
.app-mod-credit .app-mod-fire__inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.app-mod-credit .app-mod-fire__inputs label {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(191, 203, 224, 0.86);
}
.app-mod-credit .app-mod-fire__inputs input,
.app-mod-credit .app-mod-fire__inputs select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 12, 22, 0.84);
  color: rgba(240, 244, 255, 0.98);
  padding: 9px 10px;
}
.app-mod-credit .app-mod-fire__results {
  color: rgba(191, 203, 224, 0.86);
  font-size: 0.82rem;
}
.app-mod-credit .app-mod-fire__table-wrap {
  overflow: auto;
}
.app-mod-credit .app-mod-fire__table {
  width: 100%;
  border-collapse: collapse;
}
.app-mod-credit .app-mod-fire__table th,
.app-mod-credit .app-mod-fire__table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px;
  text-align: right;
  font-size: 0.78rem;
}
.app-mod-credit .app-mod-fire__table th:first-child,
.app-mod-credit .app-mod-fire__table td:first-child {
  text-align: left;
}
@media (max-width: 980px) {
  .app-mod-credit .app-mod-fire__inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Objectifs de vie : base `rem` légèrement plus petite pour densifier la page */
html:has(body.solide-app-objectifs-vie),
html:has(body.solide-app-objectif-vie-detail),
html:has(body.solide-app-moodboard) {
  font-size: 100%;
  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-objectif-vie-detail,
body.solide-app-moodboard,
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-objectif-vie-detail input,
body.solide-app-objectif-vie-detail textarea,
body.solide-app-objectif-vie-detail select,
body.solide-app-objectif-vie-detail button,
body.solide-app-moodboard input,
body.solide-app-moodboard textarea,
body.solide-app-moodboard select,
body.solide-app-moodboard 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-objectif-vie-detail .nav__links,
.solide-app-moodboard .nav__links,
.solide-app-communaute .nav__links,
.solide-app-forum .nav__links,
.solide-app-modules .nav__links {
  display: none;
}

@media (max-width: 980px) {
  .solide-login .nav__burger,
  .solide-app-dashboard .nav__burger,
  .solide-app-objectifs-vie .nav__burger,
  .solide-app-objectif-vie-detail .nav__burger,
  .solide-app-moodboard .nav__burger,
  .solide-app-communaute .nav__burger,
  .solide-app-forum .nav__burger,
  .solide-app-modules .nav__burger {
    display: inline-flex;
    flex-shrink: 0;
  }
}

@media (max-width: 980px) {
  .solide-login .mobile-nav__link,
  .solide-app-dashboard .mobile-nav__link,
  .solide-app-objectifs-vie .mobile-nav__link,
  .solide-app-objectif-vie-detail .mobile-nav__link,
  .solide-app-moodboard .mobile-nav__link,
  .solide-app-communaute .mobile-nav__link,
  .solide-app-forum .mobile-nav__link,
  .solide-app-modules .mobile-nav__link {
    text-align: center;
  }

  .solide-login .mobile-nav__link--withico,
  .solide-app-dashboard .mobile-nav__link--withico,
  .solide-app-objectifs-vie .mobile-nav__link--withico,
  .solide-app-objectif-vie-detail .mobile-nav__link--withico,
  .solide-app-moodboard .mobile-nav__link--withico,
  .solide-app-communaute .mobile-nav__link--withico,
  .solide-app-forum .mobile-nav__link--withico,
  .solide-app-modules .mobile-nav__link--withico {
    justify-content: center;
  }
}

/* Forum (routes avec solide-app-forum) : barre nav pleine largeur, logo Solide App au bord gauche */
body.solide-app-forum .nav > .container {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

body.solide-app-forum .nav__inner {
  width: 100%;
}

.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 20px;
  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__success {
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid rgba(120, 214, 170, 0.45);
  background: rgba(120, 214, 170, 0.12);
  padding: 10px 12px;
  font-size: 0.82rem;
  color: #c8f5dc;
}

.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__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

.app-dash-hero__icon-btn,
.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__icon-btn:hover,
.app-dash-hero__icon-btn:focus-visible,
.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__icon-btn:focus-visible,
.app-dash-hero__logout-icon:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.45);
  outline-offset: 2px;
}

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

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

.app-dash-hero__icon-btn--notif {
  position: relative;
}

.app-dash-notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  color: #0a0f1a;
  background: linear-gradient(135deg, #8fd4e0 0%, #6bc9d4 100%);
  border: 1px solid rgba(8, 14, 26, 0.35);
  pointer-events: none;
}

.app-dash-side-dialog {
  width: min(440px, 94vw);
  max-height: min(560px, 86vh);
}

.app-dash-side-dialog__inner {
  display: flex;
  flex-direction: column;
  max-height: min(520px, 82vh);
}

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

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

.app-dash-side-dialog__x:hover,
.app-dash-side-dialog__x:focus-visible {
  color: rgba(244, 246, 250, 0.92);
  background: rgba(255, 255, 255, 0.06);
}

.app-dash-notif__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 12px;
}

.app-dash-notif__mark-all {
  flex: 0 0 auto;
  font-size: 0.82rem;
}

.app-dash-notif__clear-all {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(244, 246, 250, 0.42);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.app-dash-notif__clear-all:hover,
.app-dash-notif__clear-all:focus-visible {
  color: rgba(244, 246, 250, 0.78);
}

.app-dash-notif__clear-all:focus-visible {
  outline: 2px solid rgba(139, 214, 224, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

.app-dash-notif__list {
  flex: 1;
  min-height: 120px;
  overflow: auto;
  padding-right: 4px;
  margin: 0 -4px 0 0;
}

.app-dash-notif__empty,
.app-dash-notif__loading {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(244, 246, 250, 0.55);
}

.app-dash-notif__err {
  color: rgba(255, 196, 186, 0.92);
  line-height: 1.45;
}

.app-dash-notif__item {
  position: relative;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.app-dash-notif__item:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.app-dash-notif__item-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.app-dash-notif__item-main {
  position: relative;
  flex: 1;
  min-width: 0;
}

.app-dash-notif__del {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(244, 246, 250, 0.48);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.app-dash-notif__del-ico {
  display: block;
}

@media (hover: hover) {
  .app-dash-notif__del {
    opacity: 0;
  }

  .app-dash-notif__item:hover .app-dash-notif__del {
    opacity: 1;
  }
}

.app-dash-notif__del:focus-visible {
  opacity: 1;
}

.app-dash-notif__del:hover,
.app-dash-notif__del:focus-visible {
  color: rgba(255, 178, 168, 0.95);
  background: rgba(255, 255, 255, 0.06);
}

/* Non lue : bandeau + pastille, titre plus marqué */
.app-dash-notif__item--unread {
  border-color: rgba(224, 196, 132, 0.28);
  background: linear-gradient(105deg, rgba(224, 196, 132, 0.1) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow: inset 3px 0 0 rgba(224, 196, 132, 0.88);
}

.app-dash-notif__item--unread:hover {
  border-color: rgba(224, 196, 132, 0.38);
  background: linear-gradient(105deg, rgba(224, 196, 132, 0.14) 0%, rgba(255, 255, 255, 0.055) 45%, rgba(255, 255, 255, 0.04) 100%);
}

.app-dash-notif__pip {
  position: absolute;
  top: 2px;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9ee4ed 0%, #6bc9d4 100%);
  box-shadow: 0 0 0 2px rgba(8, 14, 26, 0.55);
  pointer-events: none;
}

.app-dash-notif__item--unread .app-dash-notif__title {
  padding-right: 22px;
  font-weight: 800;
  color: rgba(252, 253, 255, 0.98);
}

.app-dash-notif__item--unread .app-dash-notif__body {
  color: rgba(244, 246, 250, 0.82);
}

/* Lue : visuel atténué (sans opacity globale qui nuit aux liens) */
.app-dash-notif__item--read {
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.018);
  box-shadow: none;
}

.app-dash-notif__item--read:hover {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}

.app-dash-notif__item--read .app-dash-notif__title {
  font-weight: 600;
  color: rgba(220, 226, 240, 0.72);
}

.app-dash-notif__item--read .app-dash-notif__body {
  color: rgba(244, 246, 250, 0.52);
}

.app-dash-notif__item--read .app-dash-notif__link a {
  color: rgba(139, 214, 224, 0.75);
}

.app-dash-notif__title {
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 700;
}

.app-dash-notif__body {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.72);
}

.app-dash-notif__link {
  margin: 0;
  font-size: 0.82rem;
}

.app-dash-notif__link a {
  color: rgba(139, 214, 224, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-dash-account__status {
  min-height: 1.25em;
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: rgba(139, 214, 224, 0.95);
}

.app-dash-account__avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

/* Cercle fixe + overflow : photo toujours rognée en rond (même si l’image source n’est pas carrée) */
.app-dash-account__avatar-crop {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.app-dash-account__avatar-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.app-dash-account__avatar-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.app-dash-account__photo-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid rgba(139, 214, 224, 0.42);
  background: linear-gradient(165deg, rgba(139, 214, 224, 0.14) 0%, rgba(107, 201, 212, 0.08) 100%);
  color: rgba(220, 248, 252, 0.98);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.app-dash-account__photo-pick:hover {
  border-color: rgba(167, 230, 238, 0.55);
  background: linear-gradient(165deg, rgba(155, 224, 232, 0.2) 0%, rgba(120, 210, 220, 0.12) 100%);
  color: #fff;
}

.app-dash-account__photo-pick:focus-visible {
  outline: 2px solid rgba(139, 214, 224, 0.65);
  outline-offset: 2px;
}

.app-dash-account__photo-pick:active {
  transform: scale(0.98);
}

.app-dash-account__hint {
  margin: -8px 0 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.62);
}

.app-dash-account__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.app-dash-account__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(244, 246, 250, 0.52);
}

.app-dash-account__input {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(4, 8, 16, 0.35);
  color: rgba(248, 250, 255, 0.92);
  font: inherit;
  font-size: 0.9rem;
}

.app-dash-account__input--readonly {
  opacity: 0.72;
  cursor: default;
}

.app-dash-account__pw {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-dash-account__pw-title {
  margin: 0 0 10px;
  font-size: 0.88rem;
  font-weight: 700;
}

.app-dash-account__pw .app-dash-account__field:last-of-type {
  margin-bottom: 10px;
}

.app-dash-account__foot {
  margin-top: 18px;
  padding-top: 4px;
}

.app-dash-account__foot .btn-primary {
  margin-bottom: 10px;
}

.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);
}

/* Après .app-dash-logout-dialog : mêmes classes cumulées → largeur réelle des modales compte / notifs */
.app-dash-logout-dialog.app-dash-side-dialog {
  width: min(560px, 96vw);
  max-width: min(560px, 96vw);
  min-width: min(320px, 92vw);
  max-height: min(680px, 90vh);
}

.app-dash-logout-dialog.app-dash-side-dialog .app-dash-side-dialog__inner {
  max-height: min(640px, 86vh);
}

.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: var(--card-check);
  text-shadow: 0 0 12px var(--card-check-glow);
}

.app-dash__card-check--discrete {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0;
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--card-check-discrete);
  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: var(--card-faint);
}

.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: var(--card-faint);
}

/* 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: var(--card-kpi);
  line-height: 1;
}

.app-dash__com-preview-label {
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--card-kpi-sub);
  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: var(--card-faint);
}

.app-dash__card-metrics--budget-cf .app-dash__card-kpi {
  font-size: clamp(0.95rem, 2vw, 1.12rem);
  color: var(--card-kpi);
  text-shadow: none;
}

/* 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: var(--card-faint);
  line-height: 1.15;
}

.app-dash__budget-snap-eq__v {
  color: var(--card-muted);
  font-weight: 780;
}

.app-dash__budget-snap-eq__v--cf {
  color: var(--card-accent);
  text-shadow: 0 0 12px var(--card-accent-glow);
}

.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(42, 185, 145, 0.95), rgba(72, 210, 168, 0.82));
}

.app-dash__budget-snap-pct {
  margin: 0;
  font-size: 0.56rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--card-kpi-sub);
  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: var(--card-faint);
  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: var(--card-kpi);
  line-height: 1.15;
}

.app-dash__eq-tile--cf:not(.app-dash__eq-tile--neg) .app-dash__eq-tile-val {
  color: var(--card-accent);
  text-shadow: 0 0 10px var(--card-accent-glow);
}

.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: var(--card-muted);
  align-self: center;
}

/* Coches circulaires — tout le parcours .app-auth (connexion, modules, dashboard) */
.app-auth input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  min-height: 1.125rem;
  margin: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.38);
  background: rgba(8, 14, 24, 0.55);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  vertical-align: middle;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.app-auth input[type="checkbox"]:checked {
  background: rgba(107, 201, 212, 0.92);
  border-color: rgba(150, 232, 242, 0.95);
}

.app-auth input[type="checkbox"]:checked:not(.app-mod-notes__task-cb)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 8px;
  margin: 0;
  border: solid rgba(6, 10, 18, 0.92);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -58%) rotate(45deg);
  box-sizing: border-box;
}

.app-auth input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.85);
  outline-offset: 2px;
}

.app-auth input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

.app-dash__pat-mattress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 5px;
  max-width: 100%;
  padding: 0 2px;
  box-sizing: border-box;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.app-dash__pat-mattress__ico {
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1;
}

.app-dash__pat-mattress__txt {
  color: rgba(244, 246, 250, 0.62);
}

/* Couleurs ok/warn calées sur la carte (cyan patrimoine / or budget) */
.app-dash__card--pat .app-dash__pat-mattress--warn .app-dash__pat-mattress__ico {
  color: rgba(255, 200, 150, 0.96);
}

.app-dash__card--pat .app-dash__pat-mattress--warn .app-dash__pat-mattress__txt,
.app-dash__card--bud .app-dash__pat-mattress--warn .app-dash__pat-mattress__txt {
  color: var(--card-muted);
}

.app-dash__card--bud .app-dash__pat-mattress--warn .app-dash__pat-mattress__ico {
  color: rgba(255, 175, 125, 0.98);
}

.app-dash__card--pat .app-dash__pat-mattress--ok .app-dash__pat-mattress__ico {
  color: var(--card-check);
}

.app-dash__card--pat .app-dash__pat-mattress--ok .app-dash__pat-mattress__txt {
  color: var(--card-muted);
}

.app-dash__card--bud .app-dash__pat-mattress--ok .app-dash__pat-mattress__ico {
  color: var(--card-accent);
}

.app-dash__card--bud .app-dash__pat-mattress--ok .app-dash__pat-mattress__txt {
  color: var(--card-muted);
}

.app-dash__pat-mattress__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.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: var(--card-kpi-sub);
}

.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: var(--card-accent);
  text-shadow: 0 0 14px var(--card-accent-glow);
  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__card--pat .app-dash__pat-snap-net--neg {
  color: rgba(255, 195, 205, 0.94);
  text-shadow: 0 0 18px rgba(90, 160, 255, 0.22);
}

.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: var(--card-kpi-sub);
  line-height: 1.2;
}

.app-dash__bud-snap-cf-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  width: 100%;
}

.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: var(--card-kpi);
  text-shadow: none;
  line-height: 1.1;
}

/* Cashflow négatif : teinte alerte calée sur la palette budget */
.app-dash__card--bud .app-dash__bud-snap-cf-val--neg {
  color: var(--bud-cf-neg);
  text-shadow: 0 0 14px var(--bud-cf-neg-glow);
}

.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: var(--card-faint);
  line-height: 1.15;
}

.app-dash__pat-snap-eq__v {
  color: var(--card-muted);
  font-weight: 780;
}

.app-dash__pat-snap-eq__v--net {
  color: var(--card-kpi);
  font-weight: 800;
}

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

.app-dash__card--pat .app-dash__pat-snap-eq__v--neg {
  color: rgba(255, 198, 208, 0.92);
  text-shadow: 0 0 12px rgba(80, 150, 230, 0.18);
}

.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: var(--card-kpi);
  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: var(--card-kpi-sub);
  text-align: right;
  flex-shrink: 0;
  max-width: 11rem;
}

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

.app-dash__life-rings-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  gap: 6px 8px;
  width: 100%;
}

.app-dash__life-ring {
  position: relative;
  width: 100%;
  max-width: 62px;
  height: auto;
  aspect-ratio: 1;
  box-sizing: border-box;
}

.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: var(--card-life-pct);
  line-height: 1.05;
}

.app-dash__life-ring__frac {
  font-size: 0.5rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--card-life-frac);
  line-height: 1.05;
}

/* Période 100 % (objectifs de vie) : coche aux couleurs de la carte (.app-dash__card--life, etc.) */
.app-dash__life-ring--complete .app-dash__life-ring__fg {
  padding-top: 0;
}

.app-dash__life-ring__check {
  display: block;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1;
  color: var(--card-check);
  text-shadow: 0 0 14px var(--card-check-glow);
}

.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);
}

/* Outils secondaires (ex. notes) — sous la grille principale, carte plus compacte */
.app-dash-tools-secondary {
  margin-top: clamp(22px, 3.8vw, 36px);
}

.app-dash-tools-secondary__label {
  margin: 0 0 clamp(10px, 1.6vw, 14px);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(228, 234, 248, 0.42);
}

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

.app-dash__grid--mosaic-secondary .app-dash__card {
  min-height: clamp(118px, 17vw, 152px);
  padding: clamp(11px, 1.5vw, 15px) clamp(13px, 1.8vw, 17px);
  gap: clamp(7px, 1.1vw, 10px);
  border-radius: 14px;
}

.app-dash__grid--mosaic-secondary .app-dash__card-top {
  gap: clamp(7px, 1.1vw, 11px);
}

.app-dash__grid--mosaic-secondary .app-dash__card-visual {
  width: clamp(40px, 7vw, 46px);
  height: clamp(40px, 7vw, 46px);
  border-radius: 12px;
}

.app-dash__grid--mosaic-secondary .app-dash__card-icon {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
}

.app-dash__grid--mosaic-secondary .app-dash__card-title {
  font-size: clamp(0.88rem, 1.65vw, 0.98rem);
  font-weight: 750;
}

.app-dash__grid--mosaic-secondary .app-dash__card-desc {
  font-size: clamp(0.65rem, 1.2vw, 0.72rem);
  line-height: 1.42;
}

.app-dash__grid--mosaic-secondary .app-dash__cta {
  font-size: 0.78rem;
  padding: 0.42rem 0.95rem;
}

.app-dash-demo-notice {
  position: relative;
  z-index: 1;
  margin: clamp(18px, 3.5vw, 28px) auto 0;
  max-width: 42rem;
  text-align: center;
}

.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);
}

.app-dash-daily-affirmation-note {
  margin: 0.5rem auto 0;
  max-width: 42rem;
  padding: 0 0.75rem;
  text-align: center;
  font-size: clamp(0.7rem, 1.25vw, 0.78rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: rgba(244, 246, 250, 0.42);
}

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

a.app-dash__card:focus-visible {
  outline: 2px solid var(--card-orbit);
  outline-offset: 3px;
}

.app-dash__card--locked {
  opacity: 0.88;
}

.app-dash__card--locked:hover {
  transform: none;
}

.app-dash__card-lock {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(8, 12, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.78rem;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.app-dash__card-lock--open {
  background: rgba(16, 48, 32, 0.82);
  border-color: rgba(110, 210, 140, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(110, 210, 140, 0.12);
}

.app-dash__lock-badge {
  opacity: 0.9;
}

.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);
  /* Typo & métriques : harmonisées à la teinte de la carte */
  --card-title: rgba(252, 253, 255, 0.98);
  --card-muted: rgba(228, 234, 248, 0.76);
  --card-kpi: rgba(255, 255, 255, 0.97);
  --card-kpi-sub: rgba(215, 224, 245, 0.58);
  --card-faint: rgba(208, 218, 242, 0.46);
  --card-accent: rgba(120, 235, 220, 0.96);
  --card-accent-glow: rgba(0, 200, 185, 0.24);
  --card-check: rgba(130, 255, 210, 0.94);
  --card-check-glow: rgba(0, 245, 200, 0.32);
  --card-check-discrete: rgba(125, 225, 195, 0.76);
  --card-shine-mid: rgba(255, 255, 255, 0.12);
  --card-icon-shadow: rgba(0, 10, 24, 0.45);
  --card-life-pct: rgba(115, 228, 238, 0.98);
  --card-life-frac: rgba(215, 224, 245, 0.44);
  --card-life-ring-prog: rgba(100, 218, 232, 0.96);
  --card-life-ring-track: rgba(255, 255, 255, 0.12);
  --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);
  --card-title: rgba(240, 255, 250, 0.98);
  --card-muted: rgba(175, 235, 218, 0.8);
  --card-kpi: rgba(248, 255, 252, 0.98);
  --card-kpi-sub: rgba(155, 228, 210, 0.65);
  --card-faint: rgba(130, 210, 192, 0.52);
  --card-accent: rgba(185, 252, 235, 0.98);
  --card-accent-glow: rgba(110, 220, 200, 0.3);
  --card-check: rgba(200, 255, 238, 0.96);
  --card-check-glow: rgba(140, 255, 225, 0.38);
  --card-check-discrete: rgba(160, 230, 212, 0.8);
  --card-shine-mid: rgba(200, 255, 245, 0.16);
  --card-icon-shadow: rgba(60, 200, 175, 0.35);
  --card-life-pct: rgba(175, 248, 230, 0.98);
  --card-life-frac: rgba(155, 225, 208, 0.48);
  --card-life-ring-prog: rgba(165, 245, 228, 0.96);
  --card-life-ring-track: rgba(200, 255, 245, 0.14);
}

/* Notes, mind map, journal + Vision boards (secondaires) — cartes discrètes (gris froid doux) */
.app-dash__card--notes,
.app-dash__card--cashflow,
.app-dash__card--mood,
.app-dash__card--mind,
.app-dash__card--proj {
  --card-glow: rgba(150, 165, 190, 0.32);
  --card-glow-2: rgba(100, 115, 140, 0.14);
  --card-surface: linear-gradient(148deg, rgba(120, 135, 165, 0.22) 0%, rgba(35, 42, 58, 0.42) 48%, rgba(10, 12, 20, 0.94) 100%);
  --card-border: rgba(140, 155, 185, 0.28);
  --card-border-hover: rgba(170, 185, 210, 0.38);
  --card-hover-glow: rgba(130, 145, 175, 0.12);
  --card-outer-glow: rgba(100, 115, 145, 0.08);
  --card-icon-bg: linear-gradient(145deg, rgba(110, 125, 155, 0.32), rgba(28, 34, 48, 0.72));
  --card-icon-border: rgba(150, 165, 195, 0.28);
  --card-orbit: rgba(175, 188, 212, 0.75);
  --card-title: rgba(236, 240, 248, 0.92);
  --card-muted: rgba(165, 178, 202, 0.68);
  --card-kpi: rgba(240, 244, 252, 0.92);
  --card-kpi-sub: rgba(150, 165, 190, 0.58);
  --card-faint: rgba(130, 145, 172, 0.42);
  --card-accent: rgba(200, 210, 230, 0.9);
  --card-accent-glow: rgba(120, 135, 165, 0.2);
  --card-check: rgba(210, 218, 235, 0.85);
  --card-check-glow: rgba(140, 155, 185, 0.22);
  --card-check-discrete: rgba(155, 168, 195, 0.65);
  --card-shine-mid: rgba(190, 200, 220, 0.1);
  --card-icon-shadow: rgba(70, 85, 115, 0.28);
  --card-life-pct: rgba(200, 210, 228, 0.88);
  --card-life-frac: rgba(150, 162, 188, 0.45);
  --card-life-ring-prog: rgba(175, 188, 212, 0.72);
  --card-life-ring-track: rgba(160, 172, 198, 0.12);
}

.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);
  --card-title: rgba(225, 255, 252, 0.98);
  --card-muted: rgba(145, 230, 222, 0.8);
  --card-kpi: rgba(236, 255, 253, 0.98);
  --card-kpi-sub: rgba(120, 220, 212, 0.66);
  --card-faint: rgba(105, 210, 200, 0.52);
  --card-accent: rgba(130, 248, 238, 0.98);
  --card-accent-glow: rgba(40, 210, 200, 0.32);
  --card-check: rgba(160, 255, 245, 0.96);
  --card-check-glow: rgba(60, 230, 215, 0.4);
  --card-check-discrete: rgba(125, 225, 215, 0.8);
  --card-shine-mid: rgba(180, 255, 248, 0.18);
  --card-icon-shadow: rgba(30, 200, 190, 0.4);
  --card-life-pct: rgba(120, 240, 232, 0.98);
  --card-life-frac: rgba(130, 218, 208, 0.5);
  --card-life-ring-prog: rgba(105, 235, 225, 0.96);
  --card-life-ring-track: rgba(170, 250, 242, 0.14);
}

.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);
  --card-title: rgba(248, 242, 255, 0.98);
  --card-muted: rgba(210, 185, 252, 0.8);
  --card-kpi: rgba(252, 248, 255, 0.98);
  --card-kpi-sub: rgba(195, 165, 245, 0.66);
  --card-faint: rgba(175, 145, 225, 0.52);
  --card-accent: rgba(228, 200, 255, 0.98);
  --card-accent-glow: rgba(170, 110, 255, 0.32);
  --card-check: rgba(235, 210, 255, 0.96);
  --card-check-glow: rgba(200, 140, 255, 0.38);
  --card-check-discrete: rgba(200, 165, 245, 0.78);
  --card-shine-mid: rgba(230, 200, 255, 0.18);
  --card-icon-shadow: rgba(150, 80, 220, 0.42);
  --card-life-pct: rgba(220, 195, 255, 0.98);
  --card-life-frac: rgba(190, 160, 235, 0.5);
  --card-life-ring-prog: rgba(215, 175, 255, 0.96);
  --card-life-ring-track: rgba(230, 210, 255, 0.14);
}

.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);
  --card-title: rgba(236, 248, 255, 0.98);
  --card-muted: rgba(165, 210, 252, 0.82);
  --card-kpi: rgba(244, 250, 255, 0.98);
  --card-kpi-sub: rgba(130, 195, 245, 0.66);
  --card-faint: rgba(110, 175, 230, 0.52);
  --card-accent: rgba(160, 220, 255, 0.98);
  --card-accent-glow: rgba(70, 160, 255, 0.3);
  --card-check: rgba(185, 235, 255, 0.96);
  --card-check-glow: rgba(90, 190, 255, 0.38);
  --card-check-discrete: rgba(140, 200, 248, 0.8);
  --card-shine-mid: rgba(190, 230, 255, 0.2);
  --card-icon-shadow: rgba(50, 140, 230, 0.42);
  --card-life-pct: rgba(150, 215, 255, 0.98);
  --card-life-frac: rgba(120, 185, 235, 0.52);
  --card-life-ring-prog: rgba(130, 205, 255, 0.96);
  --card-life-ring-track: rgba(180, 225, 255, 0.14);
}

.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);
  --card-title: rgba(255, 248, 232, 0.98);
  --card-muted: rgba(255, 220, 160, 0.82);
  --card-kpi: rgba(255, 252, 240, 0.98);
  --card-kpi-sub: rgba(245, 200, 120, 0.68);
  --card-faint: rgba(235, 185, 95, 0.55);
  --card-accent: rgba(255, 230, 150, 0.98);
  --card-accent-glow: rgba(255, 190, 70, 0.32);
  --card-check: rgba(255, 240, 175, 0.96);
  --card-check-glow: rgba(255, 200, 90, 0.38);
  --card-check-discrete: rgba(240, 200, 110, 0.8);
  --card-shine-mid: rgba(255, 235, 190, 0.22);
  --card-icon-shadow: rgba(220, 150, 40, 0.38);
  --card-life-pct: rgba(255, 225, 155, 0.98);
  --card-life-frac: rgba(240, 195, 110, 0.52);
  --card-life-ring-prog: rgba(255, 210, 120, 0.96);
  --card-life-ring-track: rgba(255, 230, 180, 0.16);
  --bud-cf-neg: rgba(255, 205, 175, 0.96);
  --bud-cf-neg-glow: rgba(255, 150, 90, 0.22);
}

.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);
  --card-title: rgba(255, 244, 238, 0.98);
  --card-muted: rgba(255, 200, 170, 0.82);
  --card-kpi: rgba(255, 250, 245, 0.98);
  --card-kpi-sub: rgba(255, 185, 145, 0.68);
  --card-faint: rgba(255, 165, 125, 0.55);
  --card-accent: rgba(255, 205, 165, 0.98);
  --card-accent-glow: rgba(255, 130, 80, 0.32);
  --card-check: rgba(255, 215, 185, 0.96);
  --card-check-glow: rgba(255, 150, 100, 0.38);
  --card-check-discrete: rgba(245, 175, 135, 0.8);
  --card-shine-mid: rgba(255, 220, 195, 0.2);
  --card-icon-shadow: rgba(230, 90, 50, 0.38);
  --card-life-pct: rgba(255, 195, 155, 0.98);
  --card-life-frac: rgba(245, 170, 130, 0.55);
  --card-life-ring-prog: rgba(255, 170, 120, 0.96);
  --card-life-ring-track: rgba(255, 210, 185, 0.16);
}

.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 10px var(--card-icon-shadow));
}

.app-dash__card-shine {
  position: absolute;
  inset: -269%;
  background: linear-gradient(120deg, transparent 40%, var(--card-shine-mid) 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(--card-title);
  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: var(--card-muted);
  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;
}

.app-dash__card .badge--soon {
  color: var(--card-muted);
  border-color: var(--card-icon-border);
  background: rgba(0, 0, 0, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

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

  .app-dash__grid--mosaic-secondary {
    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;
  }

  .app-dash__grid--mosaic-secondary {
    grid-template-columns: 1fr;
  }
}

/* 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;
}

/* Vision boards : conserver un gabarit aligné aux autres outils de l'app. */
.app-auth--moodboard .container.container--app-wide {
  max-width: min(1180px, 100%);
  width: 100%;
  box-sizing: border-box;
}

/* 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.app-auth--communaute-hub {
  padding-top: clamp(36px, 5.2vw, 72px);
  padding-bottom: clamp(44px, 7vw, 88px);
}

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

/* Hub : même barre que les autres outils (.app-psych-play__topbar) + un peu plus d’air vertical */
.app-auth--communaute-hub .app-com__hub-topbar.app-psych-play__topbar {
  position: relative;
  z-index: 1;
  margin-top: clamp(6px, 1vw, 12px);
  margin-bottom: clamp(20px, 2.8vw, 32px);
}

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

.app-com__hub-title-row {
  margin-bottom: clamp(6px, 1vw, 10px);
}

.app-com__hub-title-row .app-com__hub-title {
  margin: 0;
}

.app-com__hub-lead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.app-com__hub-lead-row .app-com__hub-lead {
  flex: 1 1 220px;
  margin: 0;
  min-width: 0;
}

.app-com__hub-rank-slot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.app-forum__rank-hub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(100%, 200px);
  padding: 5px 11px;
  margin: 0;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(244, 246, 250, 0.45);
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.app-forum__rank-hub:hover {
  color: rgba(244, 246, 250, 0.78);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

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

.app-com__hub-title {
  margin: 0;
  font-size: clamp(1.05rem, 2.1vw, 1.32rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: var(--white);
}

.app-com__hub-lead {
  max-width: 52rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.62);
}

@media (max-width: 520px) {
  .app-com__hub-lead-row {
    flex-direction: column;
    align-items: stretch;
  }

  .app-com__hub-lead-row .app-com__hub-rank-slot {
    margin-left: 0;
    justify-content: flex-start;
  }
}

.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--annonces .app-forum__theme-dot {
  background: rgba(224, 196, 132, 0.95);
}

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

.app-forum__theme-btn--education-financiere .app-forum__theme-dot {
  background: rgba(140, 190, 255, 0.95);
}

.app-forum__theme-btn--finances-personnelles .app-forum__theme-dot {
  background: rgba(130, 210, 170, 0.95);
}

.app-forum__theme-btn--comprendre-investissements .app-forum__theme-dot {
  background: rgba(72, 190, 140, 0.95);
}

.app-forum__theme-btn--objectifs-reflexion .app-forum__theme-dot {
  background: rgba(185, 168, 255, 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 {
  display: inline-flex;
  min-width: 28px;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  margin-top: 0;
  margin-left: auto;
  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);
  opacity: 1;
}

.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 {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  margin: 0;
}

.app-forum__aside--hub .app-forum__aside-actions {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  justify-content: flex-end;
  gap: 8px;
}

.app-forum__aside--hub .app-forum__aside-actions .btn-primary.app-life-btn {
  flex: 0 1 auto;
  min-width: 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-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  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;
}

/* Bouton retour puis fil d’Ariane sur une seule ligne */
.app-psych-play__topbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 14px;
  margin-bottom: clamp(14px, 2.2vw, 22px);
}

.app-psych-play__topbar .app-psych-play__crumb {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.app-psych-play__topbar .app-psych-play__crumb::-webkit-scrollbar {
  display: none;
}

.app-psych-play__topbar .app-psych-play__crumb > * {
  flex-shrink: 0;
}

.app-psych-play__topbar .app-psych-play__back {
  margin: 0;
  flex: 0 0 auto;
}

.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;
}

@media (max-width: 980px) {
  .app-psych-play__back {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }
}

/* 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,
.app-auth--moodboard {
  position: relative;
  overflow: hidden;
}

/* Densité : marges, cartes période et timeline un peu plus serrées */
.app-auth.app-auth--objectifs-vie,
.app-auth.app-auth--moodboard {
  padding: clamp(70px, 5.5vw, 72px) 0;
}

.app-auth--objectifs-vie .app-psych-play__topbar,
.app-auth--moodboard .app-psych-play__topbar {
  margin-bottom: clamp(10px, 1.8vw, 14px);
}

.app-auth--objectifs-vie .app-auth__title,
.app-auth--moodboard .app-auth__title {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 2.6vw, 1.62rem);
}

.app-auth--objectifs-vie .app-auth__lead,
.app-auth--moodboard .app-auth__lead {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.52;
}

.app-auth--moodboard .app-life__intro--vision {
  display: flex;
  flex-direction: column;
  gap: 0.65em;
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

.app-auth--moodboard .app-life__intro--vision .app-life__lead {
  max-width: none;
  width: 100%;
}

.app-auth--moodboard .app-life__title {
  max-width: none;
}

.app-auth--objectifs-vie .app-life__hero {
  margin-bottom: clamp(18px, 3vw, 28px);
}

.app-auth--moodboard .app-life__hero {
  margin-bottom: clamp(18px, 3vw, 28px);
  text-align: left;
}

/* Fonds décoratifs plus excentrés (moins « tout au centre »). */
.app-auth--moodboard .app-life__ambient {
  inset: -36% -52% auto -52%;
  height: min(94vh, 860px);
  opacity: 0.82;
}

.app-auth--objectifs-vie .app-life__fine,
.app-auth--moodboard .app-life__fine {
  margin-top: clamp(22px, 3.5vw, 36px);
  font-size: 0.82rem;
  line-height: 1.5;
}

.app-auth--objectifs-vie .app-life-ui,
.app-auth--moodboard .app-life-ui {
  gap: clamp(14px, 2.5vw, 22px);
}

.app-auth--objectifs-vie .app-life-period,
.app-auth--moodboard .app-life-period {
  margin-bottom: clamp(12px, 2vw, 18px);
  padding: clamp(12px, 1.8vw, 18px);
  border-radius: 16px;
  scroll-margin-top: clamp(52px, 9vh, 88px);
}

.app-auth--objectifs-vie .app-life-main--timeline,
.app-auth--moodboard .app-life-main--timeline {
  padding-top: clamp(12px, 2vw, 16px);
}

.app-auth--objectifs-vie .app-life-steps-nav,
.app-auth--moodboard .app-life-steps-nav {
  margin: 0 0 10px;
  padding: 8px 0 10px;
  border-radius: 12px;
}

.app-auth--objectifs-vie .app-life-steps-nav__inner,
.app-auth--moodboard .app-life-steps-nav__inner {
  gap: 6px;
  padding: 0 8px;
}

.app-auth--objectifs-vie .app-life-steps-nav__tab,
.app-auth--moodboard .app-life-steps-nav__tab {
  padding: 6px 11px;
  font-size: 0.72rem;
}

.app-auth--objectifs-vie .app-life-vstep,
.app-auth--moodboard .app-life-vstep {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0 14px;
  padding-bottom: clamp(14px, 2.5vw, 24px);
}

.app-auth--objectifs-vie .app-life-vstep__head,
.app-auth--moodboard .app-life-vstep__head {
  margin-bottom: 10px;
  gap: 8px 10px;
}

.app-auth--objectifs-vie .app-life-vstep__title,
.app-auth--moodboard .app-life-vstep__title {
  font-size: clamp(0.98rem, 1.85vw, 1.12rem);
}

.app-auth--objectifs-vie .app-life-vstep__add-obj,
.app-auth--moodboard .app-life-vstep__add-obj {
  margin-top: clamp(10px, 1.6vw, 14px);
}

.app-auth--objectifs-vie .app-life-period-add--bottom,
.app-auth--moodboard .app-life-period-add--bottom {
  padding: 12px 0 2px;
}

.app-auth--objectifs-vie .app-life-bottom-archives,
.app-auth--moodboard .app-life-bottom-archives {
  margin-top: 18px;
}

.app-auth--objectifs-vie .app-life-global-empty,
.app-auth--moodboard .app-life-global-empty {
  padding: clamp(20px, 4vw, 36px) clamp(14px, 2.5vw, 24px);
}

.app-auth--objectifs-vie .app-life-global-empty--lite,
.app-auth--moodboard .app-life-global-empty--lite {
  padding: clamp(16px, 3vw, 28px) clamp(12px, 2vw, 20px);
}

.app-auth--objectifs-vie .app-life-step-pie,
.app-auth--moodboard .app-life-step-pie {
  width: 54px;
  height: 54px;
}

/* Vision board: masquer les indicateurs ronds (anneau + pastille). */
.app-auth--moodboard .app-life-step-pie,
.app-auth--moodboard .app-life-period-tool {
  display: none !important;
}

.app-auth--objectifs-vie .app-life-step-pie__hole,
.app-auth--moodboard .app-life-step-pie__hole {
  inset: 8px;
}

.app-auth--objectifs-vie .app-life-period-tool,
.app-auth--moodboard .app-life-period-tool {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  font-size: 1.05rem !important;
}

.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;
}

/* Fiche objectif : dernier segment = libellé dynamique (rempli en JS) */
.app-life__crumb-goal {
  display: inline-block;
  max-width: min(42ch, 58vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-weight: 650;
  color: rgba(244, 246, 250, 0.92);
}

.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;
  display: flex;
  align-items: center;
  gap: 8px 10px;
  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;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
}

.app-forum__theme-count {
  display: inline-flex;
  min-width: 28px;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  margin-top: 0;
  margin-left: auto;
  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-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__aside-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.app-forum__aside-actions .btn-secondary.app-life-btn {
  flex: 0 0 auto;
}

.app-forum__aside-actions .btn-primary.app-life-btn {
  flex: 1 1 auto;
  min-width: min(100%, 140px);
}

.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__op-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  margin: 0 0 14px;
}

.app-forum__op-meta-text {
  flex: 1 1 220px;
  min-width: 0;
}

.app-forum__op-meta-line {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.55);
}

.app-forum__op-meta-line--has-edited .app-forum__edited-k,
.app-forum__op-meta-line--has-edited .app-forum__op-meta-sep ~ time {
  color: rgba(148, 163, 184, 0.92);
}

.app-forum__op-meta-sep {
  font-weight: 600;
  color: rgba(244, 246, 250, 0.32);
}

.app-forum__op-meta-k {
  font-weight: 700;
  color: rgba(244, 246, 250, 0.42);
}

.app-forum__op-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.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__reply .app-forum__bubble {
  padding: 8px 10px 10px;
  border-radius: 12px;
}

.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-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 8px;
}

.app-forum__author-row--op {
  margin-bottom: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 10px 12px;
}

.app-forum__author-row-op-l {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.app-forum__author-row-op-r {
  flex-shrink: 0;
  margin-left: auto;
}

.app-forum__pill-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-forum__pill {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
}

.app-forum__pill-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-forum__pill-initials {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(224, 196, 132, 0.95);
}

.app-forum__author-name {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 210, 218, 0.92);
}

.app-forum__author-sub {
  font-size: 0.6rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(196, 204, 218, 0.68);
}

.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: 0;
}

.app-forum__mention {
  flex-shrink: 0;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(196, 204, 218, 0.9);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.16s ease;
}

.app-forum__mention:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(236, 240, 248, 0.96);
}

.app-forum__mention:focus-visible {
  outline: 2px solid rgba(168, 178, 198, 0.75);
  outline-offset: 2px;
}

.app-forum__mention--reply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
}

.app-forum__reply-ico {
  flex-shrink: 0;
  opacity: 0.92;
}

.app-forum__mention-txt {
  line-height: 1.2;
}

.app-forum__icon-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(224, 196, 132, 0.92);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.app-forum__icon-act:hover {
  border-color: rgba(224, 196, 132, 0.35);
  color: #fff;
}

.app-forum__icon-act--danger {
  border-color: rgba(248, 113, 113, 0.28);
  color: rgba(254, 202, 202, 0.95);
}

.app-forum__icon-act--danger:hover {
  border-color: rgba(252, 165, 165, 0.5);
  color: #fff;
}

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

.app-forum__ic {
  display: block;
  width: 18px;
  height: 18px;
}

.app-forum__reply-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 10px;
  margin-bottom: 6px;
}

.app-forum__reply-head-l {
  flex: 1 1 160px;
  min-width: 0;
}

.app-forum__reply-head-r {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.app-forum__reply-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin-top: 4px;
}

.app-forum__reply-meta .app-forum__time {
  display: inline;
  margin: 0;
  font-size: 0.62rem;
}

.app-forum__reply-meta .app-forum__edited-inline {
  margin: 0;
  font-size: 0.6rem;
}

.app-forum__reply-act {
  display: flex;
  gap: 4px;
}

.app-forum__reactions {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
}

.app-forum__react-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(236, 240, 248, 0.92);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  overflow: visible;
}

.app-forum__react-btn:hover {
  border-color: rgba(224, 196, 132, 0.35);
  background: rgba(224, 196, 132, 0.12);
}

.app-forum__react-btn.is-active {
  border-color: rgba(224, 196, 132, 0.58);
  background: rgba(224, 196, 132, 0.2);
  color: #fff;
}

.app-forum__react-emoji {
  font-size: 0.9rem;
  line-height: 1;
}

.app-forum__react-count {
  flex-shrink: 0;
  min-width: 1ch;
  font-size: 0.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: rgba(244, 246, 250, 0.88);
}

.app-forum__react-btn.is-active .app-forum__react-count {
  color: #fff;
}

/* Émojis identiques à la réaction : ancrage viewport (hors bouton / bulles) + envol + fondu (1s) */
.app-forum__react-floater {
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  animation: app-forum-react-particle-fly 1s cubic-bezier(0.22, 0.75, 0.35, 0.98) both;
}

.app-forum__react-floater--layer {
  position: fixed;
  z-index: 20050;
  margin: 0;
  /* left / top = centre de départ (px), défini en JS (getBoundingClientRect) */
  font-size: 1.86rem;
}

.app-forum__react-floater--heart {
  color: #ff9aad;
  font-size: 1.74rem;
  filter: drop-shadow(0 0 3px rgba(255, 120, 140, 0.5));
}

.app-forum__react-floater--fire {
  font-size: 1.66rem;
  filter: drop-shadow(0 0 4px rgba(255, 150, 60, 0.55));
}

.app-forum__react-floater--thumb {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 3px rgba(220, 200, 140, 0.4));
}

@keyframes app-forum-react-particle-fly {
  0% {
    transform: translate(calc(-50% + 0px), calc(-50% + 0px)) scale(0.5) rotate(var(--rot, 0deg));
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(0.22) rotate(var(--rot, 0deg));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-forum__react-floater {
    display: none;
  }
}

/* Réponses : édition / suppression + « Répondre » visibles au survol (ou focus dans la carte — clavier). */
@media (hover: hover) and (pointer: fine) {
  .app-forum__reply .app-forum__reply-act {
    opacity: 0;
    transition: opacity 0.16s ease;
  }

  .app-forum__reply:hover .app-forum__reply-act,
  .app-forum__reply:focus-within .app-forum__reply-act {
    opacity: 1;
  }

  .app-forum__reply .app-forum__mention--reply,
  .app-forum__op .app-forum__mention--reply {
    opacity: 0;
    transition: opacity 0.16s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }

  .app-forum__reply:hover .app-forum__mention--reply,
  .app-forum__reply:focus-within .app-forum__mention--reply,
  .app-forum__op:hover .app-forum__mention--reply,
  .app-forum__op:focus-within .app-forum__mention--reply {
    opacity: 1;
  }
}

.app-forum__mention-hint {
  margin: -2px 0 10px;
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.45);
}

.app-forum__mention-dd {
  margin: 0;
  padding: 4px;
  max-height: min(42vh, 280px);
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 14, 24, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

.app-forum__mention-dd__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0 0 3px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(244, 246, 250, 0.92);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

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

.app-forum__mention-dd__btn:hover,
.app-forum__mention-dd__btn.is-active {
  border-color: rgba(100, 218, 232, 0.35);
  background: rgba(100, 218, 232, 0.1);
}

.app-forum__mention-dd__lab {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
}

.app-forum__mention-dd__sub {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(130, 220, 235, 0.85);
}

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

.app-forum__body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(244, 246, 250, 0.9);
}

/* Uniformiser le rendu des contenus collés (pas de polices/tailles incohérentes). */
.app-forum__body * {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

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

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

.app-forum__body .app-forum__at-mention {
  font-weight: 700;
}

.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: 8px;
}

.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;
}

.app-forum__rich-wrap {
  margin-bottom: 14px;
}

.app-forum__counter {
  margin: -8px 0 12px;
  text-align: right;
  font-size: 0.76rem;
  color: rgba(244, 246, 250, 0.58);
}

.app-forum__counter--body {
  margin-top: -6px;
}

.app-forum__rich-wrap--notes .app-forum__editor-wrap {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}

/* Galerie d’émojis (position: fixed au clic) : ne pas clipper le panneau */
.app-forum__rich-wrap--notes .app-forum__editor-wrap:has(.solide-emoji-picker__pop:not([hidden])) {
  overflow: visible;
  z-index: 4;
}

.app-forum__rich-wrap--notes .app-mod-notes__editor {
  min-height: 100px;
  max-height: min(42vh, 320px);
}

.app-forum-dialog .app-forum__rich-wrap--notes .app-mod-notes__editor {
  min-height: 140px;
  max-height: min(50vh, 400px);
}

.app-forum__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.app-forum__tb {
  min-width: 2rem;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(244, 246, 250, 0.9);
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.2;
}

.app-forum__tb:hover {
  border-color: rgba(107, 201, 212, 0.45);
  color: rgba(248, 250, 252, 0.98);
}

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

.app-forum__richtext {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  min-height: 120px;
  max-height: min(50vh, 360px);
  overflow-y: auto;
  word-break: break-word;
}

.app-forum__rich-wrap--notes .app-mod-notes__editor.app-forum__richtext {
  font-size: 15px;
}

.app-forum__richtext blockquote {
  margin: 0.5em 0;
  padding: 0.35em 0 0.35em 0.85em;
  border-left: 3px solid rgba(107, 201, 212, 0.55);
  color: rgba(226, 232, 240, 0.88);
}

.app-forum__actions {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-forum__act {
  font-size: 0.78rem !important;
  padding: 7px 12px !important;
}

.app-forum__act--danger {
  border-color: rgba(248, 113, 113, 0.35) !important;
  color: rgba(254, 202, 202, 0.95) !important;
}

.app-forum__edited-note {
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.88);
}

.app-forum__edited-k {
  font-weight: 700;
}

.app-forum__edited-inline {
  margin-left: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.85);
}

.app-forum__reply-actions {
  display: block;
  margin: 4px 0 6px;
  font-size: 0.68rem;
  color: rgba(148, 163, 184, 0.9);
}

.app-forum__linkish {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: inherit;
  color: rgba(107, 201, 212, 0.95);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-forum__linkish:hover {
  color: rgba(248, 250, 252, 0.98);
}

.app-forum__linkish--danger {
  color: rgba(252, 165, 165, 0.95);
}

/* 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;
}

.app-forum-rank__hint {
  margin: 0 0 14px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(244, 246, 250, 0.55);
}

.app-forum-rank__body {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  margin: 0 -4px;
  padding: 4px;
}

.app-forum-rank__loading,
.app-forum-rank__empty,
.app-forum-rank__err {
  margin: 12px 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.62);
}

.app-forum-rank__err {
  color: rgba(255, 160, 170, 0.92);
}

.app-forum-rank__head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 4.5rem;
  gap: 8px 10px;
  align-items: center;
  padding: 6px 8px 8px;
  margin-bottom: 4px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-forum-rank__head-count {
  text-align: right;
}

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

.app-forum-rank__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 4.5rem;
  gap: 8px 10px;
  align-items: center;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.app-forum-rank__item:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

.app-forum-rank__pos {
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(255, 185, 200, 0.75);
  text-align: center;
}

.app-forum-rank__name {
  font-size: 0.9rem;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-forum-rank__count {
  font-size: 0.85rem;
  font-weight: 750;
  text-align: right;
  color: rgba(244, 246, 250, 0.88);
}

@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 .app-forum__aside-actions {
    flex-direction: column;
    width: 100%;
  }

  .app-forum__aside-head .app-forum__aside-actions .app-life-btn {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
}

@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);
}

/* Forum / communauté — disclaimer juridique (pleine largeur de la section, ton discret) */
.app-com__disclaimer {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-top: clamp(22px, 3.5vw, 40px);
  margin-bottom: 0;
  padding: clamp(12px, 2vw, 16px) max(16px, env(safe-area-inset-left, 0px)) clamp(14px, 2.2vw, 20px)
    max(16px, env(safe-area-inset-right, 0px));
  border-radius: 0;
  border: solid rgba(255, 255, 255, 0.06);
  border-width: 1px 0 0;
  background: rgba(6, 10, 18, 0.28);
  box-shadow: none;
}

.app-com__disclaimer-title {
  margin: 0 0 0.55em;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.38);
}

.app-com__disclaimer-body {
  margin: 0;
  max-width: min(52rem, 100%);
  font-size: 0.7rem;
  line-height: 1.55;
  color: rgba(244, 246, 250, 0.4);
}

.app-com__disclaimer-body p {
  margin: 0 0 0.65em;
}

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

/* 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-forum__rank-hub {
  color: rgba(26, 34, 51, 0.42);
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(18, 24, 38, 0.1);
}

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

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-com__disclaimer {
  border-color: rgba(18, 24, 38, 0.07);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

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

body.solide-app-communaute--palette-light .app-com__disclaimer-body {
  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(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__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__theme-count {
  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__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__mention {
  border-color: rgba(18, 24, 38, 0.12);
  background: rgba(18, 24, 38, 0.04);
  color: rgba(78, 88, 108, 0.92);
}

body.solide-app-communaute--palette-light .app-forum__mention:hover {
  border-color: rgba(18, 24, 38, 0.2);
  background: rgba(18, 24, 38, 0.07);
  color: rgba(34, 42, 58, 0.98);
}

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

body.solide-app-communaute--palette-light .app-forum__rich-wrap--notes .app-mod-notes__editor,
body.solide-app-communaute--palette-light .app-forum__rich-wrap--notes .app-mod-notes__editor p,
body.solide-app-communaute--palette-light .app-forum__rich-wrap--notes .app-mod-notes__editor li {
  color: rgba(14, 20, 32, 0.92);
}

body.solide-app-communaute--palette-light .app-forum__rich-wrap--notes .app-mod-notes__editor blockquote,
body.solide-app-communaute--palette-light .app-forum__rich-wrap--notes .app-mod-notes__editor .app-mod-notes__quote {
  color: rgba(14, 20, 32, 0.92);
  border-left-color: rgba(140, 100, 40, 0.38);
  background: rgba(255, 255, 255, 0.55);
}

body.solide-app-communaute--palette-light .app-forum__rich-wrap--notes .app-mod-notes__editor blockquote p,
body.solide-app-communaute--palette-light .app-forum__rich-wrap--notes .app-mod-notes__editor .app-mod-notes__quote p {
  color: rgba(14, 20, 32, 0.92);
}

body.solide-app-communaute--palette-light .app-forum__rich-wrap--notes .app-mod-notes__editor::selection,
body.solide-app-communaute--palette-light .app-forum__rich-wrap--notes .app-mod-notes__editor *::selection {
  background: rgba(30, 130, 150, 0.38);
  color: #0a0f1a;
}

body.solide-app-communaute--palette-light .app-forum__rich-wrap--notes .app-mod-notes__editor::-moz-selection,
body.solide-app-communaute--palette-light .app-forum__rich-wrap--notes .app-mod-notes__editor *::-moz-selection {
  background: rgba(30, 130, 150, 0.38);
  color: #0a0f1a;
}

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

body.solide-app-communaute--palette-light .app-forum__author-name {
  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__mention-dd {
  border-color: rgba(18, 24, 38, 0.12);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 36px rgba(18, 24, 38, 0.18);
}

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

body.solide-app-communaute--palette-light .app-forum__mention-dd__btn:hover,
body.solide-app-communaute--palette-light .app-forum__mention-dd__btn.is-active {
  border-color: rgba(200, 100, 120, 0.35);
  background: rgba(255, 200, 210, 0.18);
}

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

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 .app-forum-rank__hint {
  color: rgba(26, 34, 51, 0.55);
}

body.solide-app-communaute--palette-light .app-forum-rank__loading,
body.solide-app-communaute--palette-light .app-forum-rank__empty {
  color: rgba(26, 34, 51, 0.55);
}

body.solide-app-communaute--palette-light .app-forum-rank__err {
  color: rgba(160, 55, 55, 0.92);
}

body.solide-app-communaute--palette-light .app-forum-rank__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-rank__item:nth-child(even) {
  background: rgba(18, 24, 38, 0.04);
}

body.solide-app-communaute--palette-light .app-forum-rank__pos {
  color: rgba(100, 70, 180, 0.82);
}

body.solide-app-communaute--palette-light .app-forum-rank__name {
  color: #121826;
}

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

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-detail-add .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(320px, 52vh);
  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: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
  padding: 0 10px;
}

.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 0deg,
    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-period-tool--move {
  cursor: grab;
  font-size: 1rem !important;
}

.app-life-period-tool--move:active {
  cursor: grabbing;
}

.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-period--dragging {
  opacity: 0.66;
}

.app-life-period--drop-target .app-life-vstep__panel {
  box-shadow: 0 0 0 2px rgba(224, 196, 132, 0.45);
}

.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 .app-life-icon-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

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

.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;
  cursor: pointer;
}

.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--done .app-life-item__link {
  text-decoration: line-through;
  opacity: 0.55;
}

.app-life-item__link {
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.app-life-item__link:hover,
.app-life-item__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* Camembert compact par objectif (liste) */
.app-life-item-pie {
  --pct: 0;
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.app-life-item-pie__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(224, 196, 132, 0.95) 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-item-pie__hole {
  position: absolute;
  inset: 6px;
  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-item-pie__label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.app-life-item-pie__pct {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(255, 236, 200, 0.95);
  line-height: 1;
}

a.app-life-item__accomplir {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  box-sizing: border-box;
  cursor: pointer;
}

a.app-life-item__accomplir:hover,
a.app-life-item__accomplir:focus-visible {
  text-decoration: none;
}

.app-life-item__accomplir {
  font-size: 0.72rem !important;
  padding: 4px 8px !important;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-color: rgba(224, 196, 132, 0.45) !important;
  color: rgba(255, 244, 220, 0.95) !important;
}

.app-life-item__check--locked {
  cursor: not-allowed;
  opacity: 0.7;
}

.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 Vision boards : 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);
}

/* Vision boards (page outil) : masonry plus aérée et davantage de colonnes sur grand écran. */
.app-auth--moodboard .app-life-moodboard__grid--masonry {
  column-count: 2;
  column-gap: clamp(18px, 3.2vw, 36px);
}

@media (min-width: 680px) {
  .app-auth--moodboard .app-life-moodboard__grid--masonry {
    column-count: 2;
  }
}

@media (min-width: 1120px) {
  .app-auth--moodboard .app-life-moodboard__grid--masonry {
    column-count: 2;
  }
}

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

@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-auth--moodboard .app-life-moodboard__tile {
  margin-bottom: clamp(16px, 2.6vw, 26px);
}

.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__link-obj {
  position: absolute;
  top: 8px;
  right: 116px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(224, 196, 132, 0.45);
  background: rgba(10, 12, 22, 0.78);
  color: rgba(255, 244, 220, 0.95);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, border-color 0.15s ease;
}

.app-life-moodboard__link-obj:hover {
  border-color: rgba(224, 196, 132, 0.75);
}

.app-life-moodboard__move {
  position: absolute;
  top: 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: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, border-color 0.15s ease;
}

.app-life-moodboard__move:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.4);
}

.app-life-moodboard__move:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.app-life-moodboard__move--prev {
  right: 80px;
}

.app-life-moodboard__move--next {
  right: 44px;
}

.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;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, border-color 0.15s ease, color 0.15s ease;
}

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

.app-life-moodboard__tile:hover .app-life-moodboard__link-obj,
.app-life-moodboard__tile:hover .app-life-moodboard__move,
.app-life-moodboard__tile:hover .app-life-moodboard__del,
.app-life-moodboard__tile:focus-within .app-life-moodboard__link-obj,
.app-life-moodboard__tile:focus-within .app-life-moodboard__move,
.app-life-moodboard__tile:focus-within .app-life-moodboard__del {
  opacity: 1;
  pointer-events: auto;
}

/* Fiche objectif : deux colonnes */
.app-life-detail {
  width: 100%;
}

.app-life-detail__back {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: rgba(200, 248, 255, 0.88);
  text-decoration: none;
}

.app-life-detail__back:hover,
.app-life-detail__back:focus-visible {
  text-decoration: underline;
}

.app-life-detail__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin: 0.5rem 0 1.25rem;
}

.app-life-detail-hero-pie {
  --pct: 0;
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

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

.app-life-detail-hero-pie__hole {
  position: absolute;
  inset: 12px;
  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-detail-hero-pie__label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.app-life-detail-hero-pie__pct {
  font-size: 0.95rem;
  font-weight: 800;
  color: rgba(200, 248, 255, 0.95);
}

.app-life-detail__title {
  margin: 0;
  font-size: clamp(1.15rem, 3.5vw, 1.45rem);
  line-height: 1.3;
  font-weight: 800;
  color: rgba(244, 246, 250, 0.96);
  flex: 1 1 220px;
  min-width: 0;
}

.app-life-detail__ro {
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
  color: rgba(255, 220, 160, 0.85);
}

.app-life-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 1.5rem;
  align-items: start;
}

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

.app-life-detail__h {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: rgba(224, 196, 132, 0.95);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

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

.app-life-detail-tasks__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

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

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

.app-life-detail-tasks__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.9);
}

.app-life-detail-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.6rem;
}

.app-life-detail__photos {
  margin-top: 60px;
}

.app-life-detail__ph-grid {
  column-count: 2;
  column-gap: 10px;
}

.app-life-detail__ph-tile {
  display: inline-block;
  position: relative;
  width: 100%;
  margin: 0 0 10px;
  break-inside: avoid;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
}

.app-life-detail__ph-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;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, border-color 0.15s ease, color 0.15s ease;
}

.app-life-detail__ph-tile:hover .app-life-detail__ph-del,
.app-life-detail__ph-tile:focus-within .app-life-detail__ph-del {
  opacity: 1;
  pointer-events: auto;
}

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

@media (hover: none) and (pointer: coarse) {
  .app-life-moodboard__link-obj,
  .app-life-moodboard__move,
  .app-life-moodboard__del,
  .app-life-detail__ph-del {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 640px) {
  .app-life-detail__ph-grid {
    column-count: 1;
  }
}

.app-life-detail__ph-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.app-life-detail__ph-cap {
  display: block;
  padding: 6px 8px;
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(244, 246, 250, 0.65);
}

.app-life-detail__ph-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.6rem;
}

.app-life-detail__empty-note,
.app-life-detail__hint {
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.62);
  margin: 0.35rem 0 0;
}

/* ---------- Objectifs : lisibilité + responsive renforcés ---------- */
@media (max-width: 900px) {
  .app-life-steps-nav {
    padding: 8px 0 10px;
  }

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

  .app-life-steps-nav__tab {
    flex: 0 0 auto;
    max-width: 78vw;
  }

  .app-life-vstep__head {
    margin-bottom: 10px;
  }

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

  .app-life-vstep__hover-tools {
    justify-content: flex-start;
    opacity: 1;
  }
}

@media (max-width: 720px) {
  .app-life-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }

  .app-life-item__main {
    align-items: flex-start;
    gap: 10px;
  }

  .app-life-item__text {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .app-life-item__btns {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    opacity: 1;
  }
}

/* ---------- Objectifs de vie: mobile anti-debordement ---------- */
@media (max-width: 640px) {
  .app-auth--objectifs-vie .container--app-wide,
  .app-auth--objectifs-vie .app-life__root,
  .app-auth--objectifs-vie .app-life-ui,
  .app-auth--objectifs-vie .app-life-main {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
  }

  .app-auth--objectifs-vie .app-auth__title.app-life__title {
    font-size: clamp(1.02rem, 5.4vw, 1.2rem);
    line-height: 1.2;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .app-auth--objectifs-vie .app-life-steps-nav__tab {
    max-width: min(150px, 46vw);
    font-size: 0.66rem;
    padding: 6px 9px;
  }

  .app-auth--objectifs-vie .app-life-main {
    padding: 14px 12px;
    gap: 14px;
  }

  .app-auth--objectifs-vie .app-life-toolbar {
    gap: 10px 12px;
  }

  .app-auth--objectifs-vie .app-life-toolbar__title {
    font-size: clamp(0.96rem, 4.4vw, 1.06rem);
    line-height: 1.22;
    overflow-wrap: anywhere;
    flex: 1 1 10rem;
  }

  .app-auth--objectifs-vie .app-life-bucket-head {
    gap: 8px 10px;
  }

  .app-auth--objectifs-vie .app-life-bucket-head__title {
    font-size: 0.88rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .app-auth--objectifs-vie .app-life-vstep__head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .app-auth--objectifs-vie .app-life-vstep__head-lead {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    align-items: center;
  }

  .app-auth--objectifs-vie .app-life-vstep__title {
    font-size: clamp(0.9rem, 3.8vw, 1rem);
    line-height: 1.22;
    overflow-wrap: anywhere;
  }

  .app-auth--objectifs-vie .app-life-vstep__head-actions {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .app-auth--objectifs-vie .app-life-vstep__hover-tools {
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding-bottom: 2px;
  }

  .app-auth--objectifs-vie .app-life-period-tool {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 0.88rem !important;
  }

  .app-auth--objectifs-vie .app-life-step-pie {
    width: 44px;
    height: 44px;
  }

  .app-auth--objectifs-vie .app-life-step-pie__hole {
    inset: 7px;
  }

  .app-auth--objectifs-vie .app-life-cat__title {
    font-size: 0.86rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .app-auth--objectifs-vie .app-life-detail__title {
    font-size: clamp(1rem, 5vw, 1.2rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
}

/* ---------- Fiche objectif : structure plus lisible ---------- */
@media (min-width: 980px) {
  .app-life-detail__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1.4rem 1.8rem;
  }

  .app-life-detail__photos {
    margin-top: 0;
  }
}

@media (max-width: 680px) {
  .app-life-detail__hero {
    margin-top: 0.25rem;
    margin-bottom: 1rem;
    gap: 0.75rem 0.9rem;
  }

  .app-life-detail-hero-pie {
    width: 64px;
    height: 64px;
  }

  .app-life-detail__title {
    font-size: clamp(1.05rem, 5.3vw, 1.24rem);
    line-height: 1.35;
  }

  .app-life-detail-tasks__item {
    padding: 8px 9px;
    align-items: flex-start;
  }

  .app-life-detail-tasks__main {
    align-items: flex-start;
  }

  .app-life-detail__h {
    margin-bottom: 0.5rem;
  }

  .app-life-detail__photos {
    margin-top: 0.4rem;
  }
}

.app-life-photo-pick,
.app-life-obj-pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(50vh, 360px);
  overflow: auto;
  margin: 0.5rem 0;
  padding: 2px;
}

.app-life-photo-pick__row,
.app-life-obj-pick__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.app-life-photo-pick__thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

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

/* ---------- Fiche patrimoniale planificateur : champs plus esthétiques ---------- */
body.solide-super-admin-fpc #solide-fpc-form label {
  color: rgba(242, 246, 252, 0.94);
}

body.solide-super-admin-fpc #solide-fpc-form input[type='text'],
body.solide-super-admin-fpc #solide-fpc-form input[type='email'],
body.solide-super-admin-fpc #solide-fpc-form input[type='number'],
body.solide-super-admin-fpc #solide-fpc-form input[type='date'],
body.solide-super-admin-fpc #solide-fpc-form select,
body.solide-super-admin-fpc #solide-fpc-form textarea {
  width: 100%;
  max-width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 13, 24, 0.82);
  color: rgba(244, 246, 250, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

body.solide-super-admin-fpc #solide-fpc-form input::placeholder,
body.solide-super-admin-fpc #solide-fpc-form textarea::placeholder {
  color: rgba(197, 208, 226, 0.46);
}

body.solide-super-admin-fpc #solide-fpc-form input:focus,
body.solide-super-admin-fpc #solide-fpc-form select:focus,
body.solide-super-admin-fpc #solide-fpc-form textarea:focus {
  outline: none;
  border-color: rgba(108, 202, 216, 0.72);
  box-shadow: 0 0 0 3px rgba(108, 202, 216, 0.16);
  background: rgba(9, 17, 31, 0.94);
}

body.solide-super-admin-fpc #solide-fpc-form select,
body.solide-super-admin-fpc #solide-fpc-form input[type='date'] {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(228, 235, 247, 0.86) 50%),
    linear-gradient(135deg, rgba(228, 235, 247, 0.86) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 10px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

body.solide-super-admin-fpc #solide-fpc-form input[type='date']::-webkit-calendar-picker-indicator {
  opacity: 0.22;
  cursor: pointer;
  filter: invert(0.9);
}

body.solide-super-admin-fpc #solide-fpc-form input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 999px;
  border: 1px solid rgba(140, 197, 210, 0.75);
  background: transparent;
  vertical-align: -3px;
  position: relative;
  cursor: pointer;
}

body.solide-super-admin-fpc #solide-fpc-form input[type='checkbox']:checked {
  background: rgba(107, 201, 212, 0.22);
  border-color: rgba(107, 201, 212, 0.96);
}

body.solide-super-admin-fpc #solide-fpc-form input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: rgba(188, 244, 252, 0.98);
}

body.solide-super-admin-fpc #solide-fpc-form .fpc-table input,
body.solide-super-admin-fpc #solide-fpc-form .fpc-table select {
  margin-top: 0;
  padding: 7px 8px;
  min-height: 34px;
  font-size: 0.84rem;
}

.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: 12px;
  margin-top: 6px;
  padding: 18px 16px 12px;
  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__bar {
  width: min(300px, 92%);
  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-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__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-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.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));
}

/* Notes: modale plus large sur desktop */
.app-life-dialog.app-life-dialog--wide.app-mod-notes__dlg {
  max-width: min(1180px, calc(100vw - 24px));
}

@media (min-width: 761px) {
  .app-life-dialog.app-life-dialog--wide.app-mod-notes__dlg {
    width: min(1180px, calc(100vw - 24px));
    max-height: min(94vh, 980px);
    overflow: hidden;
  }

  .app-life-dialog.app-life-dialog--wide.app-mod-notes__dlg .app-life-dialog__inner {
    display: flex;
    flex-direction: column;
    height: min(88vh, 900px);
    gap: 10px;
  }

  .app-life-dialog.app-life-dialog--wide.app-mod-notes__dlg .app-life-field {
    margin: 0;
  }

  .app-life-dialog.app-life-dialog--wide.app-mod-notes__dlg .app-mod-notes__editor-wrap {
    min-height: clamp(240px, 42vh, 520px);
    max-height: none;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .app-life-dialog.app-life-dialog--wide.app-mod-notes__dlg .app-mod-notes__editor {
    min-height: 0;
  }

  .app-life-dialog.app-life-dialog--wide.app-mod-notes__dlg .app-life-dialog__foot {
    margin-top: 10px;
  }
}

/* Suivi patrimoine — modale « Ajouter / modifier un actif » (Bourse / Crypto) */
.app-life-dialog.app-life-dialog--wide.app-mod-pat2-asset-dlg {
  max-width: min(920px, calc(100vw - 20px));
  width: min(100%, min(920px, calc(100vw - 20px)));
  max-height: min(92vh, 920px);
}

.app-life-dialog.app-life-dialog--wide.app-mod-pat2-asset-dlg .app-mod-pat2-asset-dlg__body {
  max-height: min(78vh, 780px);
}

.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__ambient--notes {
  background:
    radial-gradient(ellipse 56% 48% at 72% 28%, rgba(155, 170, 200, 0.08) 0%, transparent 52%),
    radial-gradient(ellipse 40% 36% at 18% 58%, rgba(120, 135, 165, 0.06) 0%, transparent 50%);
}

.app-mod__crumb,
.app-mod__hero {
  position: relative;
  z-index: 1;
}

.app-mod__hero {
  margin-bottom: clamp(22px, 3.5vw, 34px);
}

/* Suivi patrimoine — titre + export PDF (hors panneau) */
.app-mod__hero--pat-pdf .app-mod__hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
}

.app-mod__hero--pat-pdf .app-mod__hero-main {
  flex: 1 1 220px;
  min-width: 0;
}

.app-mod__hero--pat-pdf .app-mod__hero-actions {
  flex: 0 0 auto;
  align-self: flex-end;
  padding-bottom: 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.app-mod-pat-ccy {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  border-radius: 10px;
  background: rgba(8, 14, 28, 0.55);
  border: 1px solid rgba(66, 201, 220, 0.22);
  gap: 2px;
}

.app-mod-pat-ccy__btn {
  margin: 0;
  padding: 0.38rem 0.72rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(168, 188, 210, 0.92);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.app-mod-pat-ccy__btn:hover {
  color: rgba(230, 248, 252, 0.95);
  background: rgba(66, 201, 220, 0.12);
}

.app-mod-pat-ccy__btn.is-active {
  color: #0b1220;
  background: rgba(66, 201, 220, 0.92);
}

.app-mod-pat-ccy__btn:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.85);
  outline-offset: 2px;
}

.app-mod-pat-export-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.42rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(230, 248, 252, 0.95);
  background: rgba(66, 201, 220, 0.16);
  border: 1px solid rgba(66, 201, 220, 0.42);
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.app-mod-pat-export-pdf:hover {
  background: rgba(66, 201, 220, 0.28);
  border-color: rgba(120, 230, 240, 0.55);
  color: #fff;
}

.app-mod-pat-export-pdf:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.85);
  outline-offset: 2px;
}

.app-mod-pat-export-pdf:disabled {
  opacity: 0.45;
  cursor: wait;
}

@media (max-width: 520px) {
  .app-mod__hero--pat-pdf .app-mod__hero-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}

.app-mod--pat .app-mod__hero,
.app-mod--bud .app-mod__hero,
.app-mod--notes .app-mod__hero,
.app-mod--mindmap .app-mod__hero,
.app-mod--proj .app-mod__hero {
  margin-bottom: clamp(10px, 1.8vw, 14px);
}

.app-mod--pat .app-psych-play__kicker,
.app-mod--bud .app-psych-play__kicker,
.app-mod--notes .app-psych-play__kicker,
.app-mod--mindmap .app-psych-play__kicker,
.app-mod--proj .app-psych-play__kicker {
  margin-bottom: 3px;
}

.app-mod--pat .app-auth__title,
.app-mod--bud .app-auth__title,
.app-mod--notes .app-auth__title,
.app-mod--mindmap .app-auth__title,
.app-mod--proj .app-auth__title {
  margin-bottom: 0;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
}

.app-mod--proj .app-mod-proj__intro {
  margin-top: clamp(10px, 1.8vw, 18px);
  width: 100%;
  max-width: none;
  text-align: left;
}

.app-mod--proj .app-mod-proj__intro-p {
  margin: 0 0 0.7em;
  max-width: 52rem;
  font-size: 0.88rem;
  line-height: 1.58;
  color: rgba(200, 210, 230, 0.88);
}

.app-mod--proj .app-mod-proj__intro-p:last-child {
  margin-bottom: 0;
}

.app-mod--pat .app-mod__panel,
.app-mod--bud .app-mod__panel,
.app-mod--notes .app-mod__panel,
.app-mod--mindmap .app-mod__panel,
.app-mod--proj .app-mod__panel {
  padding: clamp(12px, 1.8vw, 18px) clamp(12px, 2vw, 20px);
  margin-bottom: clamp(12px, 2vw, 20px);
}

.app-mod__fine--notes {
  font-size: 0.78rem;
  opacity: 0.72;
}

.app-mod__panel--notes {
  min-height: min(72vh, 720px);
}

.app-mod__panel--mindmap {
  min-height: min(58vh, 620px);
  padding: clamp(14px, 2.2vw, 22px) clamp(14px, 2.4vw, 24px);
}

.app-mod__panel--proj {
  min-height: min(52vh, 520px);
}

/* Mind map + journal de projection (secondaires, objectifs de vie) */
.app-mod-life-secondary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: rgba(230, 235, 248, 0.92);
}

.app-mod-life-secondary__hint {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(185, 198, 220, 0.72);
}

.app-mod-life-secondary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.app-mod-life-secondary__cta {
  flex: 0 1 auto;
}

.app-mod-life-secondary__link {
  text-decoration: none;
}

.app-mod-life-secondary__disc {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(165, 178, 205, 0.68);
}

.app-mod-life-secondary__warn {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(255, 200, 140, 0.88);
}

.app-mod-life-secondary__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.app-mod-life-secondary.app-mod-mindmap {
  gap: clamp(18px, 2.8vw, 30px);
}

.app-mod-mindmap__view--airy .app-mod-mindmap__tree {
  margin-bottom: clamp(8px, 1.5vw, 16px);
}

.app-mod-mindmap__toolbar {
  margin-top: clamp(10px, 2vw, 18px);
}

.app-mod-life-secondary__btn--muted {
  opacity: 0.88;
}

/* Mind map — organigramme radial (hub + branches) */
@keyframes app-mod-mindmap-spoke-in {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: rotate(var(--a)) scale(0.92);
  }
  to {
    opacity: 1;
    filter: none;
    transform: rotate(var(--a)) scale(1);
  }
}

.app-mod-mindmap__radial {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto clamp(20px, 3.5vw, 36px);
  min-height: clamp(440px, 98vw, 860px);
  --spoke-count: 1;
  --spoke-radius: min(268px, 44vw);
  padding: clamp(24px, 4vw, 44px) clamp(12px, 2.5vw, 28px);
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .app-mod-mindmap__radial {
    --spoke-radius: min(220px, 58vw);
    min-height: clamp(400px, 125vw, 720px);
    padding: clamp(18px, 5vw, 28px) 6px;
  }
}

.app-mod-mindmap__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(88%, calc(var(--spoke-radius) * 2.62));
  max-width: 620px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(224, 196, 132, 0.28);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%, rgba(107, 201, 212, 0.06) 0%, transparent 62%);
}

.app-mod-mindmap__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  min-width: min(10.5rem, 52vw);
  max-width: 13.5rem;
  padding: 18px 20px;
  border-radius: 22px;
  border: 2px solid rgba(224, 196, 132, 0.5);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 186, 140, 0.22), transparent 45%),
    radial-gradient(circle at 72% 78%, rgba(168, 182, 255, 0.2), transparent 48%),
    radial-gradient(circle at 32% 22%, rgba(224, 196, 132, 0.32), rgba(18, 22, 38, 0.96) 62%),
    linear-gradient(165deg, rgba(107, 201, 212, 0.14), transparent 55%);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-weight: 800;
  font-size: clamp(0.86rem, 2.2vw, 1.05rem);
  text-align: center;
  line-height: 1.4;
  color: rgba(248, 244, 236, 0.98);
  letter-spacing: -0.02em;
}

.app-mod-mindmap__spokes {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.app-mod-mindmap__spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(236px, 48vw);
  height: var(--spoke-radius);
  margin-left: calc(min(236px, 48vw) * -0.5);
  transform-origin: 50% 0%;
  --a: calc((360deg / var(--spoke-count)) * var(--spoke-index) - 90deg);
  transform: rotate(var(--a));
  list-style: none;
  pointer-events: none;
  animation: app-mod-mindmap-spoke-in 0.65s ease-out both;
  animation-delay: calc(0.06s * var(--spoke-index));
}

.app-mod-mindmap__spoke-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: rotate(calc(-1 * var(--a)));
  pointer-events: auto;
}

.app-mod-mindmap__spoke-card {
  border-radius: 18px;
  padding: 14px 14px 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 14, 26, 0.88);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
}

.app-mod-mindmap__spoke:nth-child(6n + 1) .app-mod-mindmap__spoke-card {
  border-color: rgba(255, 150, 172, 0.35);
  background: linear-gradient(165deg, rgba(255, 150, 172, 0.1), rgba(10, 14, 26, 0.92));
}

.app-mod-mindmap__spoke:nth-child(6n + 2) .app-mod-mindmap__spoke-card {
  border-color: rgba(255, 186, 140, 0.38);
  background: linear-gradient(165deg, rgba(255, 186, 140, 0.1), rgba(10, 14, 26, 0.92));
}

.app-mod-mindmap__spoke:nth-child(6n + 3) .app-mod-mindmap__spoke-card {
  border-color: rgba(168, 182, 255, 0.38);
  background: linear-gradient(165deg, rgba(168, 182, 255, 0.12), rgba(10, 14, 26, 0.92));
}

.app-mod-mindmap__spoke:nth-child(6n + 4) .app-mod-mindmap__spoke-card {
  border-color: rgba(107, 201, 212, 0.4);
  background: linear-gradient(165deg, rgba(107, 201, 212, 0.12), rgba(10, 14, 26, 0.92));
}

.app-mod-mindmap__spoke:nth-child(6n + 5) .app-mod-mindmap__spoke-card {
  border-color: rgba(224, 196, 132, 0.42);
  background: linear-gradient(165deg, rgba(224, 196, 132, 0.12), rgba(10, 14, 26, 0.92));
}

.app-mod-mindmap__spoke:nth-child(6n + 6) .app-mod-mindmap__spoke-card {
  border-color: rgba(190, 230, 200, 0.32);
  background: linear-gradient(165deg, rgba(190, 230, 200, 0.1), rgba(10, 14, 26, 0.92));
}

.app-mod-mindmap__spoke-branch {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.92);
  margin-bottom: 12px;
  line-height: 1.35;
}

.app-mod-mindmap__spoke-goal {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.app-mod-mindmap__spoke-goal:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.app-mod-mindmap__spoke-goal-label {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
  color: rgba(236, 240, 250, 0.96);
}

.app-mod-mindmap__spoke-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 9px;
  margin-top: 10px;
}

.app-mod-mindmap__chip {
  display: inline-block;
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.4;
  color: rgba(218, 228, 250, 0.95);
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.app-mod-mindmap__empty-tree {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(185, 198, 220, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  .app-mod-mindmap__spoke {
    animation: none;
  }
}

.app-mod-proj__editor {
  width: 100%;
  min-height: min(48vh, 420px);
  resize: vertical;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(236, 240, 250, 0.95);
  padding: 14px 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  box-sizing: border-box;
}

.app-mod-proj__editor:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(224, 196, 132, 0.22);
}

.app-mod-notes {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 20px);
  align-items: stretch;
  min-height: min(68vh, 640px);
}

.app-mod-notes__sidebar {
  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.22);
  overflow: hidden;
}

.app-mod-notes__sb-head {
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.app-mod-notes__sb-title {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 210, 230, 0.55);
}

.app-mod-notes__new {
  width: 100%;
  justify-content: center;
  font-size: 0.78rem;
  padding: 8px 12px;
}

.app-mod-notes__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 6px 10px;
}

.app-mod-notes__list-empty {
  margin: 10px 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(200, 210, 230, 0.45);
}

.app-mod-notes__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 8px 8px 10px;
  margin-bottom: 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.app-mod-notes__row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.app-mod-notes__row--active {
  border-color: rgba(180, 195, 220, 0.22);
  background: rgba(224, 196, 132, 0.06);
}

.app-mod-notes__row-top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.app-mod-notes__pin-ico {
  flex-shrink: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  opacity: 0.85;
}

.app-mod-notes__row-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(244, 246, 250, 0.9);
  line-height: 1.35;
  word-break: break-word;
}

.app-mod-notes__row-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.app-mod-notes__row-ic {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  color: rgba(230, 235, 248, 0.75);
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
}

.app-mod-notes__row-ic:hover {
  border-color: rgba(224, 196, 132, 0.25);
  color: #fff;
}

.app-mod-notes__row-ic--danger:hover {
  border-color: rgba(255, 140, 160, 0.35);
  color: #ffc9d0;
}

.app-mod-notes__main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(4, 8, 16, 0.35);
  overflow: hidden;
}

.app-mod-notes__headbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.app-mod-notes__back {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  margin: 0 2px 0 0;
  padding: 0 12px 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(230, 235, 248, 0.92);
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.app-mod-notes__back:not([hidden]) {
  display: inline-flex;
}

.app-mod-notes__back-ico {
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.92;
}

.app-mod-notes__back-txt {
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.app-mod-notes__back:hover {
  border-color: rgba(224, 196, 132, 0.35);
  color: #fff;
}

.app-mod-notes__title-input {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(252, 253, 255, 0.98);
}

/* Titre en lecture seule (panneau principal) : 18px, sans cadre hérité de .app-mod-input */
.app-mod-notes .app-mod-notes__headbar .app-mod-notes__title-input.app-mod-input:disabled {
  height: auto;
  min-height: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: rgba(252, 253, 255, 0.98);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  opacity: 1;
  -webkit-text-fill-color: rgba(252, 253, 255, 0.98);
}

.app-mod-notes .app-mod-notes__headbar .app-mod-notes__title-input.app-mod-input:disabled:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.app-mod-notes__title-input::placeholder {
  color: rgba(180, 190, 212, 0.65);
}

.app-mod-notes__head-del {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  color: rgba(230, 235, 248, 0.8);
}

.app-mod-notes__head-del:hover {
  border-color: rgba(255, 140, 160, 0.4);
  color: #ffc9d0;
}

.app-mod-notes__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.15);
}

.app-mod-notes__toolbar:has(.solide-emoji-picker__pop:not([hidden])) {
  overflow: visible;
  z-index: 6;
}

/* Zone d’édition seule : overlay « aucune note » ne recouvre plus titre + barre d’outils */
.app-mod-notes__editor-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: min(52vh, 480px);
  max-height: min(70vh, 720px);
  min-width: 0;
}

.app-mod-notes__tb {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 12, 22, 0.55);
  color: rgba(236, 240, 248, 0.88);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.app-mod-notes__tb:hover {
  border-color: rgba(224, 196, 132, 0.35);
  color: #fff;
}

.app-mod-notes__tb--task {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
}

.app-mod-notes__tb--quote {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Galerie d’émojis (notes + forum) */
.solide-emoji-picker {
  position: relative;
  display: inline-flex;
  vertical-align: top;
}

.solide-emoji-picker__pop {
  /* Position finale définie en JS (fixed) pour éviter le clip overflow barre / wrap forum */
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
  padding: 10px;
  width: min(288px, calc(100vw - 32px));
  min-width: 200px;
  max-width: min(288px, 92vw);
  max-height: 228px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 14, 26, 0.98);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.solide-emoji-picker__pop[hidden] {
  display: none !important;
}

.solide-emoji-picker__item {
  margin: 0;
  padding: 4px 2px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 1.28rem;
  line-height: 1.2;
  cursor: pointer;
  color: inherit;
}

.solide-emoji-picker__item:hover,
.solide-emoji-picker__item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.app-mod-notes__editor {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 20px;
  font-size: 0.96rem;
  line-height: 1.62;
  color: #fff;
  outline: none;
}

/* Lecture seule (vue principale) : corps de note à 15px */
.app-mod-notes__main .app-mod-notes__editor[contenteditable='false'] {
  font-size: 15px;
  line-height: 1.62;
  box-shadow: none;
}

.app-mod-notes__main .app-mod-notes__editor[contenteditable='false']:focus {
  box-shadow: none;
}

.app-mod-notes__editor:focus {
  box-shadow: inset 0 0 0 1px rgba(224, 196, 132, 0.12);
}

.app-mod-notes__editor h2 {
  margin: 0.6em 0 0.35em;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}

.app-mod-notes__editor h3 {
  margin: 0.5em 0 0.3em;
  font-size: 1.05rem;
  font-weight: 750;
  color: #fff;
}

.app-mod-notes__editor p {
  margin: 0.35em 0;
  color: #fff;
}

.app-mod-notes__editor ul {
  margin: 0.4em 0 0.4em 1.1em;
  padding: 0;
  color: #fff;
}

.app-mod-notes__editor li {
  margin: 0.2em 0;
  color: #fff;
}

.app-mod-notes__editor blockquote,
.app-mod-notes__editor .app-mod-notes__quote {
  margin: 0.65em 0;
  padding: 0.55em 0.85em 0.55em 1.05em;
  border-left: 3px solid rgba(224, 196, 132, 0.55);
  border-radius: 0 10px 10px 0;
  background: rgba(0, 0, 0, 0.22);
  font-style: italic;
  color: #fff;
}

.app-mod-notes__editor blockquote p,
.app-mod-notes__editor .app-mod-notes__quote p {
  margin: 0.25em 0;
  color: #fff;
}

.app-mod-notes__editor strong,
.app-mod-notes__editor b {
  color: #fff;
  font-weight: 750;
}

.app-mod-notes__editor a.app-mod-notes__auto-link {
  font-weight: 800;
  color: rgba(107, 201, 212, 0.98);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.app-mod-notes__editor a.app-mod-notes__auto-link:hover {
  color: rgba(150, 228, 238, 1);
}

/* Sélection / surbrillance : texte toujours lisible (forum + notes) */
.app-mod-notes__editor::selection,
.app-mod-notes__editor *::selection {
  background: rgba(107, 201, 212, 0.42);
  color: #0a0f1a;
}

.app-mod-notes__editor::-moz-selection,
.app-mod-notes__editor *::-moz-selection {
  background: rgba(107, 201, 212, 0.42);
  color: #0a0f1a;
}

.app-mod-notes__task {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0.35em 0;
  list-style: none;
}

.app-mod-notes__task-lab {
  flex-shrink: 0;
  margin: 0.15em 0 0;
  cursor: pointer;
}

.app-mod-notes__task-cb {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid rgba(198, 208, 228, 0.55);
  background: rgba(8, 12, 22, 0.92);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.app-mod-notes__task-cb:hover {
  border-color: rgba(224, 196, 132, 0.55);
}

.app-mod-notes__task-cb:checked {
  background: rgba(224, 196, 132, 0.95)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%231a1510' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3.5 3.5L11 1'/%3E%3C/svg%3E")
    center / 11px 9px no-repeat;
  border-color: rgba(236, 214, 160, 0.98);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

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

.app-mod-notes__task-txt {
  flex: 1;
  min-width: 0;
  outline: none;
  color: #fff;
}

.app-mod-notes__empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 8, 16, 0.72);
  pointer-events: none;
}

.app-mod-notes__empty[hidden] {
  display: none !important;
}

.app-mod-notes__empty-t {
  margin: 0;
  max-width: 28ch;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(210, 218, 235, 0.72);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .app-mod-notes {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
  }

  /* Mobile : liste OU éditeur pleine largeur (pas les deux empilés). */
  .app-mod-notes:not(.app-mod-notes--m-editor) .app-mod-notes__main {
    display: none;
  }

  .app-mod-notes.app-mod-notes--m-editor .app-mod-notes__sidebar {
    display: none;
  }

  .app-mod-notes:not(.app-mod-notes--m-editor) .app-mod-notes__sidebar {
    max-height: none;
    min-height: min(52vh, 480px);
  }

  .app-mod-notes.app-mod-notes--m-editor .app-mod-notes__main {
    min-height: min(74vh, 680px);
  }

  .app-mod-notes__list {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  .app-mod-notes__editor-wrap {
    min-height: 46vh;
    max-height: none;
    flex: 1;
  }

  .app-mod-notes__editor {
    min-height: 0;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }

  .app-mod-notes__toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 8px;
    padding: 10px 10px 12px;
    overscroll-behavior-x: contain;
  }

  .app-mod-notes__toolbar::-webkit-scrollbar {
    height: 5px;
  }

  .app-mod-notes__toolbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
  }

  .app-mod-notes__row {
    min-height: 48px;
    padding: 10px 10px 10px 12px;
    align-items: center;
  }

  .app-mod-notes__row-ic {
    width: 40px;
    height: 40px;
    font-size: 0.88rem;
  }

  .app-mod-notes__tb {
    min-width: 40px;
    height: 40px;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .app-mod-notes__task-cb {
    width: 22px;
    height: 22px;
  }

  .app-mod-notes__head-del {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 380px) {
  .app-mod-notes__back-txt {
    display: none;
  }

  .app-mod-notes__back {
    padding: 0 10px;
  }
}

.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 0deg 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__h3 {
  margin: 20px 0 10px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: rgba(224, 196, 132, 0.95);
}

.app-mod-edu2-reader__h3:first-child {
  margin-top: 0;
}

.app-mod-edu2-reader__ol,
.app-mod-edu2-reader__ul {
  margin: 0 0 14px;
  padding-left: 1.35rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(244, 246, 250, 0.78);
}

.app-mod-edu2-reader__li {
  margin: 0 0 8px;
}

.app-mod-edu2-reader__li:last-child {
  margin-bottom: 0;
}

.app-mod-edu2-reader__p strong,
.app-mod-edu2-reader__li strong {
  font-weight: 700;
  color: rgba(244, 246, 250, 0.92);
}

.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__disclaimer--context {
  font-style: normal;
}

.app-mod-edu2-reader__disclaimer--context em {
  font-style: italic;
  color: rgba(244, 246, 250, 0.52);
}

.app-mod-edu2-global-foot {
  margin-top: clamp(12px, 2vw, 20px);
  padding: 14px 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
}

.app-mod-edu2-global-foot__p {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.6;
  color: rgba(244, 246, 250, 0.42);
}

.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;
  justify-content: center;
  text-align: center;
}

.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-section-title {
  margin: 0 0 8px;
  padding: 12px 2px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-mod-sim-compound__form-section-title--finance {
  color: rgba(186, 230, 253, 0.88);
}

.app-mod-sim-compound__form-section-title--immo {
  margin-top: 6px;
  color: rgba(224, 196, 132, 0.92);
  border-bottom-color: rgba(224, 196, 132, 0.18);
}

.app-mod-sim-compound__form-section-title--projection {
  margin-top: 6px;
  color: rgba(196, 210, 254, 0.88);
}

.app-mod-sim-compound__immo-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.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 {
  position: relative;
  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, background 0.15s ease;
}

.app-mod-sim-compound-field__info::before,
.app-mod-sim-compound-field__info::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 12;
}

.app-mod-sim-compound-field__info::before {
  content: "";
  bottom: calc(100% + 4px);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(10, 16, 30, 0.96) transparent transparent transparent;
}

.app-mod-sim-compound-field__info::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(320px, 70vw);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 30, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  color: rgba(236, 242, 252, 0.95);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
}

.app-mod-sim-compound-field__info:hover,
.app-mod-sim-compound-field__info:focus-visible {
  border-color: rgba(107, 201, 212, 0.4);
  background: rgba(107, 201, 212, 0.08);
  color: rgba(200, 248, 255, 0.95);
  outline: none;
}

.app-mod-sim-compound-field__info:hover::before,
.app-mod-sim-compound-field__info:hover::after,
.app-mod-sim-compound-field__info:focus-visible::before,
.app-mod-sim-compound-field__info:focus-visible::after,
.app-mod-sim-compound-field__info.is-tooltip-open::before,
.app-mod-sim-compound-field__info.is-tooltip-open::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.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__prefill {
  width: 100%;
  margin: 8px 0 0;
  padding: 9px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  text-align: center;
  color: rgba(224, 196, 132, 0.98);
  background: rgba(28, 24, 12, 0.38);
  border: 1px solid rgba(224, 196, 132, 0.34);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.app-mod-sim-compound__prefill:hover {
  color: rgba(248, 250, 252, 0.98);
  border-color: rgba(224, 196, 132, 0.55);
  background: rgba(62, 48, 22, 0.45);
}

.app-mod-sim-compound__prefill:focus-visible {
  outline: 2px solid rgba(224, 196, 132, 0.75);
  outline-offset: 2px;
}

.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-fisc {
  margin: 0 0 2px;
  max-width: 22rem;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(203, 213, 225, 0.72);
}

.app-mod-sim-compound__hero-valrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}

.app-mod-sim-compound__hero-unit {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(148, 163, 184, 0.88);
}

.app-mod-sim-pass__cap-note {
  margin: -4px 0 10px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(203, 213, 225, 0.68);
}

.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__hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.app-mod-sim-compound__estimate-passive {
  flex: 1 1 auto;
  min-width: min(100%, 12rem);
  margin: 0;
  padding: 7px 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  text-align: center;
  color: rgba(107, 201, 212, 0.98);
  background: rgba(8, 18, 28, 0.55);
  border: 1px solid rgba(107, 201, 212, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.app-mod-sim-compound__estimate-passive:hover {
  color: rgba(248, 250, 252, 0.98);
  border-color: rgba(107, 201, 212, 0.55);
  background: rgba(32, 78, 88, 0.45);
}

.app-mod-sim-compound__estimate-passive:focus-visible {
  outline: 2px solid rgba(107, 201, 212, 0.75);
  outline-offset: 2px;
}

.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-compound__kpi-split .app-mod-sim__stat-v--immo {
  color: rgba(224, 196, 132, 0.98);
}

.app-mod-sim-compound__hero-sub {
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.88);
  text-align: center;
}

.app-mod-sim-compound__immo-hint {
  margin: 6px 0 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.78);
}

.app-mod-sim-compound__immo-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.app-mod-sim-compound__immo-block[hidden] {
  display: none;
}

.app-mod-sim-compound-field__row--select .app-mod-sim-compound-field__select {
  width: 100%;
  max-width: 100%;
}

.app-mod-sim__legend--compound .app-mod-sim__leg--immo .app-mod-sim__leg-swatch {
  background: rgba(224, 196, 132, 0.85);
}

.app-mod-sim__legend--compound .app-mod-sim__leg--total .app-mod-sim__leg-swatch {
  background: rgba(244, 246, 250, 0.45);
}

.app-mod-sim__chart-tip__swatch--immo {
  background: rgba(224, 196, 132, 0.9);
}

.app-mod-sim__chart-tip__swatch--total {
  background: rgba(244, 246, 250, 0.5);
}

.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é (périodes clés) — 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: 480px;
  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);
  white-space: pre-line;
}

@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--pass-cap-line {
  background: linear-gradient(90deg, #f0d78a, #e0a84a);
}

.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-y--right {
  fill: rgba(240, 215, 170, 0.58);
  font-size: 4.75px;
}

.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__swatch--pass-pre {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f5e4a8, #d4a820);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.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__leg--pass-cap .app-mod-sim__leg-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f0d78a, #e0a84a);
  box-shadow: 0 0 0 1px rgba(8, 12, 22, 0.18);
}

.app-mod-sim__legend--compound .app-mod-sim__leg--pass-cap .app-mod-sim__leg-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f0d78a, #e0a84a);
}

.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%);
}

/* Revenus passifs : la courbe revenu est vert / cyan (pas le doré de la courbe FV composés). */
.app-mod-sim__legend--passive.app-mod-sim__legend--compound .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--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'] {
  margin-top: 2px;
  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 {
  --pat2-pos-border: rgba(107, 201, 212, 0.42);
  --pat2-pos-bg: rgba(10, 28, 42, 0.52);
  --pat2-neg-border: rgba(255, 165, 195, 0.4);
  --pat2-neg-bg: rgba(26, 14, 32, 0.48);
  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-mattress {
  margin-top: 0;
  padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.4vw, 24px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(158deg, rgba(22, 34, 52, 0.9) 0%, rgba(8, 12, 22, 0.96) 100%);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.app-mod-pat2-mattress__kicker {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.72);
}

.app-mod-pat2-mattress__title {
  margin: 0 0 14px;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(244, 246, 250, 0.96);
}

.app-mod-pat2-mattress__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(230, 236, 248, 0.88);
}

.app-mod-pat2-mattress__row--formula {
  align-items: baseline;
}

.app-mod-pat2-mattress__lab {
  flex: 1 1 100%;
  font-weight: 650;
  color: rgba(200, 210, 230, 0.82);
}

/* Libellé long (mois de charges) : toute la largeur au-dessus de la formule */
.app-mod-pat2-mattress__row--formula .app-mod-pat2-mattress__lab {
  flex: 1 1 100%;
  max-width: 100%;
}

.app-mod-pat2-mattress--page-foot {
  margin-top: clamp(22px, 3.5vw, 40px);
}

.app-mod-pat2-mattress__val {
  font-variant-numeric: tabular-nums;
  color: rgba(200, 248, 255, 0.98);
}

.app-mod-pat2-mattress__link {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(107, 201, 212, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-mod-pat2-mattress__link:hover {
  color: rgba(160, 232, 242, 1);
}

.app-mod-pat2-mattress__mult {
  width: 4.25rem;
  flex-shrink: 0;
}

.app-mod-pat2-mattress__times,
.app-mod-pat2-mattress__equals {
  font-weight: 800;
  color: rgba(244, 246, 250, 0.55);
}

.app-mod-pat2-mattress__muted {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 246, 250, 0.72);
}

.app-mod-pat2-mattress__target {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(224, 196, 132, 0.98);
}

.app-mod-pat2-mattress__row--check {
  margin-bottom: 14px;
}

.app-mod-pat2-mattress__check-lab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
  color: rgba(244, 246, 250, 0.9);
}

.app-mod-pat2-mattress__cb {
  flex-shrink: 0;
  cursor: pointer;
}

.app-mod-pat2-mattress__disclaimer {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgba(180, 192, 214, 0.55);
}

.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-portfolio {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(16px, 2.6vw, 24px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top right, rgba(224, 196, 132, 0.08), transparent 32%),
    linear-gradient(155deg, rgba(16, 24, 40, 0.94), rgba(8, 12, 24, 0.98));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-mod-pat2-portfolio__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.app-mod-pat2-portfolio__titles {
  min-width: 0;
  flex: 1 1 320px;
}

.app-mod-pat2-portfolio__kicker {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.78);
}

.app-mod-pat2-portfolio__title {
  margin: 4px 0 0;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(244, 246, 250, 0.98);
}

.app-mod-pat2-portfolio__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-mod-pat2-portfolio__info {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(200, 210, 230, 0.8);
  font-size: 0.68rem;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.app-mod-pat2-portfolio__info::before,
.app-mod-pat2-portfolio__info::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 8;
}

.app-mod-pat2-portfolio__info::before {
  content: "";
  bottom: calc(100% + 4px);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(10, 16, 30, 0.96) transparent transparent transparent;
}

.app-mod-pat2-portfolio__info::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(320px, 70vw);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 30, 0.96);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  color: rgba(236, 242, 252, 0.95);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
}

.app-mod-pat2-portfolio__info:hover,
.app-mod-pat2-portfolio__info:focus-visible {
  border-color: rgba(107, 201, 212, 0.4);
  background: rgba(107, 201, 212, 0.08);
  color: rgba(210, 246, 255, 0.96);
  outline: none;
}

.app-mod-pat2-portfolio__info:hover::before,
.app-mod-pat2-portfolio__info:hover::after,
.app-mod-pat2-portfolio__info:focus-visible::before,
.app-mod-pat2-portfolio__info:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.app-mod-pat2-portfolio__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.app-mod-pat2-portfolio__metric {
  min-width: 118px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.app-mod-pat2-portfolio__metric-k {
  display: block;
  margin-bottom: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.42);
}

.app-mod-pat2-portfolio__metric-v {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.94rem;
  line-height: 1.35;
  color: rgba(244, 246, 250, 0.95);
}

.app-mod-pat2-portfolio__metric-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.app-mod-pat2-portfolio__metric-tag--up {
  color: rgba(210, 255, 224, 0.98);
  border-color: rgba(107, 206, 143, 0.55);
  background: rgba(107, 206, 143, 0.18);
}

.app-mod-pat2-portfolio__metric-tag--down {
  color: rgba(255, 218, 226, 0.98);
  border-color: rgba(240, 139, 168, 0.55);
  background: rgba(240, 139, 168, 0.18);
}

.app-mod-pat2-portfolio__metric-tag--flat {
  color: rgba(244, 246, 250, 0.88);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.app-mod-pat2-portfolio__ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.app-mod-pat2-portfolio__plot {
  position: relative;
  min-height: clamp(180px, 20vh, 260px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.app-mod-pat2-portfolio__svg {
  display: block;
  width: 100%;
  height: clamp(180px, 20vh, 260px);
}

.app-mod-pat2-portfolio__state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(214, 222, 238, 0.76);
  background: rgba(8, 12, 24, 0.68);
  backdrop-filter: blur(4px);
}

.app-mod-pat2-portfolio__state[hidden] {
  display: none !important;
}

.app-mod-pat2-portfolio__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.72rem;
  color: rgba(244, 246, 250, 0.42);
}

.app-mod-pat2-portfolio__edge {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .app-mod-pat2-portfolio__metric {
    flex: 1 1 100px;
    min-width: 0;
  }

  .app-mod-pat2-portfolio__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

.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;
}

.app-mod-pat2-rep__row--interactive {
  cursor: pointer;
  border-radius: 12px;
  padding: 8px 10px;
  margin: 0 -6px;
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
  outline: none;
}

.app-mod-pat2-rep__row--interactive:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.app-mod-pat2-rep__row--interactive:focus-visible {
  border-color: rgba(107, 201, 212, 0.45);
  box-shadow: 0 0 0 2px rgba(107, 201, 212, 0.2);
}

.app-mod-pat2-rep__row--interactive.app-mod-pat2-rep__row--active {
  border-color: rgba(224, 196, 132, 0.38);
  background: rgba(224, 196, 132, 0.07);
}

@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: var(--pat2-pos-border);
  background: var(--pat2-pos-bg);
}

.app-mod-pat2-kpi--neg {
  border-color: var(--pat2-neg-border);
  background: var(--pat2-neg-bg);
}

.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 0deg,
    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-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: var(--pat2-pos-border);
  background: var(--pat2-pos-bg);
}

.app-mod-pat2-strip__cell--neg {
  border-color: var(--pat2-neg-border);
  background: var(--pat2-neg-bg);
}

.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-wrap {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  pointer-events: none;
}

.app-mod-pat2-class--single .app-mod-pat2-class__ring-wrap {
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
}

.app-mod-pat2-class__ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    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__ring-pct {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  z-index: 1;
  max-width: 94%;
  font-size: 0.56rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-align: center;
  color: rgba(244, 246, 250, 0.96);
}

.app-mod-pat2-class--immo .app-mod-pat2-class__ring {
  background: conic-gradient(
    from 0deg,
    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 0deg,
    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 0deg,
    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 0deg,
    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 0deg,
    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-asset-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}

.app-mod-pat2-asset-row__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-mod-pat2-asset-row__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.app-mod-pat2-asset-row__thumb {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  display: grid;
  place-items: center;
}

.app-mod-pat2-asset-row__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.app-mod-pat2-asset-row__thumb--empty {
  opacity: 0.35;
}

.app-mod-pat2-asset-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.45em;
  font-size: 0.84rem;
  font-weight: 650;
  color: rgba(244, 246, 250, 0.92);
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;
}

.app-mod-pat2-asset-row__title .app-mod-pat2-asset-row__name {
  font-size: 0.84rem;
  font-weight: 650;
  color: rgba(244, 246, 250, 0.92);
}

.app-mod-pat2-asset-row__title .app-mod-pat2-asset-row__ticker {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(168, 182, 204, 0.68);
}

.app-mod-pat2-asset-row__title .app-mod-pat2-asset-row__rp-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.95);
  background: rgba(224, 196, 132, 0.12);
  border: 1px solid rgba(224, 196, 132, 0.28);
  vertical-align: middle;
}

.app-mod-pat2-line__rp-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(244, 246, 250, 0.82);
  cursor: pointer;
}

.app-mod-pat2-line__rp-chk {
  margin-top: 3px;
  flex-shrink: 0;
}

.app-mod-pat2-asset-row__ev {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.app-mod-pat2-asset-row__ev--pos {
  color: rgba(110, 210, 140, 0.98);
}

.app-mod-pat2-asset-row__ev--neg {
  color: rgba(248, 113, 113, 0.98);
}

.app-mod-pat2-asset-row__ev--flat {
  color: rgba(226, 232, 240, 0.55);
}

.app-mod-pat2-asset-row__ev--na {
  color: rgba(226, 232, 240, 0.45);
  font-weight: 700;
}

.app-mod-pat2-asset-row__metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px 10px;
}

.app-mod-pat2-asset-row__metrics--fin {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.app-mod-pat2-asset-row__metrics--solo {
  grid-template-columns: minmax(0, max-content);
  margin-left: auto;
  justify-items: end;
  text-align: right;
}

.app-mod-pat2-asset-row__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.app-mod-pat2-asset-row__metric-k {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.45);
  line-height: 1.25;
}

.app-mod-pat2-asset-row__metric-v {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 246, 250, 0.88);
  line-height: 1.3;
  word-break: break-word;
}

.app-mod-pat2-asset-row__metric-v--pos {
  color: rgba(110, 210, 140, 0.98);
}

.app-mod-pat2-asset-row__metric-v--neg {
  color: rgba(248, 113, 113, 0.98);
}

.app-mod-pat2-asset-row__metric-v--flat {
  color: rgba(226, 232, 240, 0.55);
}

.app-mod-pat2-asset-row__metric--value-hero .app-mod-pat2-asset-row__metric-v {
  font-size: clamp(0.92rem, 2.4vw, 1.12rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(244, 246, 250, 0.96);
}

.app-mod-pat2-asset-row__val {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(189, 222, 196, 0.92);
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .app-mod-pat2-asset-row__metrics:not(.app-mod-pat2-asset-row__metrics--solo) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-mod-pat2-asset-row__metrics--fin:not(.app-mod-pat2-asset-row__metrics--solo) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .app-mod-pat2-asset-row__metrics:not(.app-mod-pat2-asset-row__metrics--solo) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.app-mod-pat2-asset-row__sub {
  font-size: 0.62rem;
  color: rgba(226, 232, 240, 0.5);
  line-height: 1.3;
}

.app-mod-pat2-asset-row__amt {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  color: rgba(189, 222, 196, 0.95);
  letter-spacing: 0.02em;
}

.app-mod-pat2-asset-row__btns {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.app-mod-pat2-asset-row__act {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 14, 22, 0.55);
  color: rgba(248, 250, 252, 0.96);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.app-mod-pat2-asset-row__act:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

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

.app-mod-pat2-asset-row__act:disabled {
  opacity: 0.26;
  cursor: default;
}

.app-mod-pat2-asset-row__act--del {
  border-color: rgba(255, 130, 155, 0.65);
  color: rgba(255, 245, 248, 0.98);
}

.app-mod-pat2-asset-row__act--del:hover:not(:disabled) {
  border-color: rgba(255, 160, 178, 0.9);
  background: rgba(255, 90, 120, 0.14);
  color: #fff;
}

.app-mod-pat2-asset-row__act-icon,
.app-mod-pat2-asset-row__act .app-life-icon-solid {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.app-mod-pat2-asset-row__act-icon svg,
.app-mod-pat2-asset-row__act .app-life-icon-solid svg {
  display: block;
  width: 14px;
  height: 14px;
}

.app-mod-pat2-asset-row__act--del .app-mod-pat2-asset-row__act-icon svg {
  width: 12px;
  height: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .app-mod-pat2-asset-row:hover .app-mod-pat2-asset-row__btns {
    opacity: 1;
  }
}

.app-mod-pat2-asset-row__btns:focus-within {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .app-mod-pat2-asset-row__btns {
    opacity: 0.28;
  }

  .app-mod-pat2-asset-row:hover .app-mod-pat2-asset-row__btns,
  .app-mod-pat2-asset-row:active .app-mod-pat2-asset-row__btns {
    opacity: 1;
  }
}

.app-mod-pat2-asset-dlg__body {
  max-height: min(72vh, 640px);
  overflow-y: auto;
  padding-right: 2px;
}

.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: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}

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

/* Crypto / Bourse — une ligne : saisies + valeurs dérivées sans cadre */
.app-mod-pat2-line__metrics-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  width: 100%;
  row-gap: 6px;
}

.app-mod-pat2-mini-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}

.app-mod-pat2-mini-field--inline .app-mod-pat2-mini-field__l {
  flex: 0 0 auto;
  max-width: 10.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  font-weight: 650;
  color: rgba(226, 232, 240, 0.48);
}

.app-mod-pat2-mini-field--inline .app-mod-input--sm {
  min-width: 4.25rem;
  max-width: 7.5rem;
}

.app-mod-pat2-inline-seg {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 4px;
  flex: 0 1 auto;
  min-width: 0;
}

.app-mod-pat2-inline-k {
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: rgba(226, 232, 240, 0.45);
  white-space: nowrap;
}

.app-mod-pat2-inline-v {
  font-size: 0.76rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 246, 250, 0.92);
  line-height: 1.25;
}

.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-amt--quote {
  grid-template-columns: minmax(110px, 1fr) minmax(88px, 132px) auto;
  align-items: center;
}

.app-mod-pat2-line__amt-readonly {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.78rem;
  font-weight: 750;
  color: rgba(244, 246, 250, 0.9);
  letter-spacing: 0.02em;
}

.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: min(42vh, 360px);
  overflow-y: auto;
}

.app-mod-pat2-stock-suggest__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  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__thumb {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.app-mod-pat2-stock-suggest__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.app-mod-pat2-stock-suggest__thumb--empty {
  opacity: 0.35;
}

.app-mod-pat2-stock-suggest__label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.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-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-date-wrap {
  position: relative;
}

.app-mod-pat2-debt-date-wrap .app-mod-pat2-debt-date {
  width: 100%;
  box-sizing: border-box;
  padding-right: 42px;
  color-scheme: dark;
}

.app-mod-pat2-debt-date-wrap .app-mod-pat2-debt-date::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 36px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: none;
}

.app-mod-pat2-debt-date__cal {
  position: absolute;
  top: 50%;
  right: 5px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 210, 218, 0.92);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.app-mod-pat2-debt-date__cal:hover,
.app-mod-pat2-debt-date__cal:focus-visible {
  background: rgba(255, 140, 160, 0.22);
  color: #fff;
  outline: none;
}

.app-mod-pat2-debt-date__cal:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 140, 160, 0.45);
}

.app-mod-pat2-debt-date__cal svg {
  display: block;
  flex-shrink: 0;
}

.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;
}

.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;
}

.app-mod-pat2-debt-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 160, 176, 0.12);
  position: relative;
}

.app-mod-pat2-debt-row__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  margin: -4px;
  padding: 4px;
}

.app-mod-pat2-debt-row__main:hover {
  background: rgba(255, 255, 255, 0.04);
}

.app-mod-pat2-debt-row__main:focus-visible {
  outline: 2px solid rgba(255, 186, 200, 0.55);
  outline-offset: 2px;
}

.app-mod-pat2-debt-row__title {
  font-size: 0.84rem;
  font-weight: 650;
  color: rgba(255, 236, 240, 0.95);
  line-height: 1.35;
}

.app-mod-pat2-debt-row__sub {
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 210, 218, 0.72);
  line-height: 1.35;
}

.app-mod-pat2-debt-row__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .app-mod-pat2-debt-row:hover .app-mod-pat2-debt-row__btns {
    opacity: 1;
  }
}

.app-mod-pat2-debt-row__btns:focus-within {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .app-mod-pat2-debt-row__btns {
    opacity: 0.28;
  }

  .app-mod-pat2-debt-row:hover .app-mod-pat2-debt-row__btns,
  .app-mod-pat2-debt-row:active .app-mod-pat2-debt-row__btns {
    opacity: 1;
  }
}

/* Patrimoine — desktop : lignes plus compactes (moins de défilement) */
@media (min-width: 721px) {
  .app-mod-pat2-grid {
    gap: clamp(10px, 1.4vw, 14px);
  }

  .app-mod-pat2-class {
    padding: clamp(10px, 1.4vw, 14px);
  }

  .app-mod-pat2-class__head {
    margin-bottom: 6px;
    gap: 10px;
  }

  .app-mod-pat2-class__emoji {
    font-size: 1.45rem;
  }

  .app-mod-pat2-class__name {
    margin: 0 0 2px;
    font-size: 0.88rem;
  }

  .app-mod-pat2-class__list {
    gap: 5px;
    margin-bottom: 10px;
  }

  .app-mod-pat2-asset-row {
    padding: 5px 10px;
    gap: 8px;
    border-radius: 10px;
  }

  .app-mod-pat2-asset-row__main {
    gap: 3px;
  }

  .app-mod-pat2-asset-row__head {
    gap: 8px;
  }

  .app-mod-pat2-asset-row__thumb {
    width: 24px;
    height: 24px;
    border-radius: 5px;
  }

  .app-mod-pat2-asset-row__title {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .app-mod-pat2-asset-row__title .app-mod-pat2-asset-row__name {
    font-size: 0.8rem;
  }

  .app-mod-pat2-asset-row__title .app-mod-pat2-asset-row__ticker {
    font-size: 0.62rem;
  }

  .app-mod-pat2-asset-row__ev {
    font-size: 0.74rem;
  }

  .app-mod-pat2-asset-row__metrics {
    gap: 3px 8px;
  }

  .app-mod-pat2-asset-row__metric {
    gap: 0;
  }

  .app-mod-pat2-asset-row__metric-k {
    font-size: 0.54rem;
    line-height: 1.12;
  }

  .app-mod-pat2-asset-row__metric-v {
    font-size: 0.68rem;
    line-height: 1.12;
  }

  .app-mod-pat2-asset-row__metric--value-hero .app-mod-pat2-asset-row__metric-v {
    font-size: 0.88rem;
    letter-spacing: -0.01em;
  }

  .app-mod-pat2-asset-row__val {
    font-size: 0.68rem;
  }

  .app-mod-pat2-asset-row__sub {
    font-size: 0.58rem;
    line-height: 1.15;
  }

  .app-mod-pat2-asset-row__amt {
    margin-top: 2px;
    font-size: 0.72rem;
  }

  .app-mod-pat2-asset-row__act {
    width: 32px;
    height: 32px;
  }

  .app-mod-pat2-debts {
    padding: clamp(14px, 2vw, 20px);
  }

  .app-mod-pat2-debts__h {
    margin: 0 0 10px;
  }

  .app-mod-pat2-debts__list {
    gap: 5px;
    margin-bottom: 10px;
  }

  .app-mod-pat2-debt-row {
    padding: 5px 10px;
    gap: 8px;
    border-radius: 10px;
  }

  .app-mod-pat2-debt-row__main {
    gap: 2px;
  }

  .app-mod-pat2-debt-row__title {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .app-mod-pat2-debt-row__sub {
    font-size: 0.68rem;
    line-height: 1.2;
  }
}

.app-mod-pat2-debt-dlg__body {
  max-height: min(72vh, 640px);
  overflow-y: auto;
  padding-right: 2px;
}

.app-mod-pat2-debt-read__title {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 800;
  color: rgba(255, 228, 232, 0.98);
  line-height: 1.3;
}

.app-mod-pat2-debt-read__row {
  display: grid;
  grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
  gap: 8px 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.86rem;
  align-items: start;
}

.app-mod-pat2-debt-read__row:last-of-type {
  border-bottom: none;
}

.app-mod-pat2-debt-read__k {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 210, 218, 0.45);
  line-height: 1.4;
}

.app-mod-pat2-debt-read__v {
  font-weight: 650;
  color: rgba(248, 250, 255, 0.92);
  line-height: 1.45;
  word-break: break-word;
}

.app-mod-pat2-debt-dlg__del {
  border-color: rgba(255, 140, 160, 0.45) !important;
  color: rgba(255, 200, 208, 0.95) !important;
}

.app-mod-pat2-debt-dlg__del:hover {
  border-color: rgba(255, 120, 140, 0.65) !important;
  color: #fff !important;
}

/* Budget — vue par catégories (v2) */
.app-mod-bud2 {
  --bud2-pos-border: rgba(224, 196, 132, 0.42);
  --bud2-pos-bg: rgba(36, 30, 12, 0.52);
  --bud2-neg-border: rgba(255, 185, 140, 0.42);
  --bud2-neg-bg: rgba(40, 22, 14, 0.5);
  --bud2-warn-text: rgba(255, 215, 190, 0.94);
  --bud2-funnel-warn-v: rgba(255, 205, 175, 0.96);
  --bud2-pos-flash: rgba(255, 225, 155, 0.98);
  --bud2-pos-flash-glow: rgba(224, 196, 132, 0.4);
  --bud2-neg-flash: rgba(255, 195, 170, 0.98);
  --bud2-neg-flash-glow: rgba(255, 150, 90, 0.35);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 16px);
}

.app-mod-bud2--compact {
  gap: clamp(10px, 1.6vw, 14px);
}

.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(224, 196, 132, 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(224, 196, 132, 0.88);
}

.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(255, 225, 155, 0.98);
  text-shadow: 0 0 20px rgba(224, 196, 132, 0.35);
}

.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.6rem;
  color: rgba(244, 246, 250, 0.38);
}

.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: 0;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.66rem;
}

.app-mod-bud2-sankey-legend-row__k {
  color: rgba(244, 246, 250, 0.74);
}

.app-mod-bud2-sankey-legend-row__v {
  font-weight: 500;
  color: rgba(244, 246, 250, 0.88);
  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(88, 200, 162, 0.95);
}

.app-mod-bud2-sankey-legend-row--income .app-mod-bud2-sankey-legend-row__k {
  color: rgba(224, 196, 132, 0.94);
}

.app-mod-bud2-sankey-legend-row--income {
  margin-bottom: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(224, 196, 132, 0.3);
  background: linear-gradient(120deg, rgba(224, 196, 132, 0.14) 0%, rgba(8, 15, 29, 0.5) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-mod-bud2-sankey-legend-row--income .app-mod-bud2-sankey-legend-row__k,
.app-mod-bud2-sankey-legend-row--income .app-mod-bud2-sankey-legend-row__v {
  font-weight: 700;
}

.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);
  color: var(--bud2-pos-flash);
  text-shadow: 0 0 22px var(--bud2-pos-flash-glow);
}

.app-mod-bud2-calc__cell--neg .app-mod-bud2-calc__v--flash {
  color: var(--bud2-neg-flash);
  text-shadow: 0 0 20px var(--bud2-neg-flash-glow);
}

.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(180, 150, 90, 0.55), rgba(255, 215, 140, 0.82));
  box-shadow: inset 0 0 12px rgba(224, 196, 132, 0.28);
  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: 12px 12px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(ellipse 110% 100% at 0% 0%, rgba(33, 92, 158, 0.18) 0%, transparent 58%),
    linear-gradient(170deg, rgba(5, 11, 24, 0.96) 0%, rgba(3, 8, 18, 0.88) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 42px rgba(0, 0, 0, 0.28);
}

.app-mod-bud2-funnel-band--wide {
  padding: 12px 8px 10px;
}

.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(560px, 74vh);
  overflow: visible;
}

.app-mod-bud2-funnel-band--wide .app-mod-bud2-sankey {
  max-height: min(528px, 74vh);
}

@media (max-width: 640px) {
  .app-mod-bud2-funnel-band--wide {
    padding-left: 0;
    padding-right: 0;
  }

  .app-mod-bud2-sankey-wrap {
    margin-left: 0;
    margin-right: 0;
  }

  .app-mod-bud2-sankey {
    width: 100%;
  }
}

.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.94) brightness(1.04);
  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.68);
  font-size: 8.6px;
  font-weight: 500;
  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: var(--bud2-warn-text);
}

.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: var(--bud2-funnel-warn-v);
}

.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(255, 215, 140, 0.92), rgba(224, 196, 132, 0.65));
}

.app-mod-bud2-funnel__band--neg {
  background: linear-gradient(90deg, rgba(255, 150, 95, 0.92), rgba(255, 195, 130, 0.72));
}

.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-split {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(165deg, rgba(6, 11, 24, 0.92) 0%, rgba(8, 15, 29, 0.76) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.24);
}

.app-mod-bud2-split__title {
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.84);
}

.app-mod-bud2-split__stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.app-mod-bud2-split__stat {
  display: grid;
  gap: 2px;
}

.app-mod-bud2-split__stat--pleasures {
  text-align: right;
}

.app-mod-bud2-split__pct {
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 700;
}

.app-mod-bud2-split__stat--needs .app-mod-bud2-split__pct {
  color: #6bce8f;
  text-shadow: 0 0 18px rgba(107, 206, 143, 0.28);
}

.app-mod-bud2-split__stat--pleasures .app-mod-bud2-split__pct {
  color: #c49cff;
  text-shadow: 0 0 18px rgba(196, 156, 255, 0.28);
}

.app-mod-bud2-split__lab {
  font-size: 0.62rem;
  color: rgba(244, 246, 250, 0.72);
}

.app-mod-bud2-split__bar {
  display: flex;
  width: 100%;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.app-mod-bud2-split__bar-needs {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(107, 206, 143, 0.95) 0%, rgba(99, 199, 154, 0.95) 100%);
}

.app-mod-bud2-split__bar-pleasures {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(162, 114, 234, 0.95) 0%, rgba(196, 156, 255, 0.95) 100%);
}

.app-mod-bud2-split__lines {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.app-mod-bud2-split__line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.app-mod-bud2-split__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.app-mod-bud2-split__dot--needs {
  background: #6bce8f;
}

.app-mod-bud2-split__dot--pleasures {
  background: #a272ea;
}

.app-mod-bud2-split__txt {
  font-size: 0.62rem;
  color: rgba(244, 246, 250, 0.72);
}

.app-mod-bud2-split__amt {
  font-size: 0.96rem;
  line-height: 1.1;
  font-weight: 600;
  color: rgba(244, 246, 250, 0.95);
}

.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--funnel-head {
  margin: 0 0 10px;
}

.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-income__val {
  font-size: 1.38rem;
  font-weight: 700;
  line-height: 1.1;
  color: rgba(244, 246, 250, 0.95);
  text-shadow: 0 0 20px rgba(224, 196, 132, 0.32);
}

.app-mod-bud2-hero {
  position: relative;
  border-radius: 16px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid rgba(224, 196, 132, 0.3);
  background: linear-gradient(155deg, rgba(224, 196, 132, 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-bud2-hero__glow {
  position: absolute;
  width: 200px;
  height: 200px;
  top: -70px;
  right: -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 196, 132, 0.28) 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(255, 225, 155, 0.98);
  text-shadow: 0 0 32px rgba(224, 196, 132, 0.32);
}

.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: var(--bud2-pos-border);
  background: var(--bud2-pos-bg);
}

.app-mod-bud2-strip__cell--neg {
  border-color: var(--bud2-neg-border);
  background: var(--bud2-neg-bg);
}

.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 0deg,
    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 0deg,
    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 0deg,
    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 0deg,
    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 0deg,
    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 0deg,
    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 0deg,
    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 0deg,
    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 0deg,
    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(120px, 220px) 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, 1.8fr) minmax(88px, 1fr) 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;
  }
}

/* ─── Cashflow immobilier ─── */
.app-mod--cashflow .app-mod__hero--cashflow,
.app-mod--cashflow .app-psych-play__kicker {
  text-align: left;
}
.app-mod--cashflow .app-mod__panel--cashflow {
  margin-top: clamp(8px, 1.5vw, 16px);
}
.app-mod__ambient--cashflow {
  background:
    radial-gradient(ellipse 70% 50% at 85% 10%, rgba(224, 196, 132, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(107, 201, 212, 0.06) 0%, transparent 50%);
}
.app-mod-cf {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
  min-width: 0;
}
.app-mod-cf__badge {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(224, 196, 132, 0.95);
  background: rgba(224, 196, 132, 0.1);
  border: 1px solid rgba(224, 196, 132, 0.28);
  padding: 6px 14px;
  border-radius: 20px;
}
.app-mod-cf__prop-bar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  align-items: center;
  padding: clamp(12px, 1.8vw, 16px) clamp(14px, 2vw, 18px);
  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-cf__prop-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(244, 246, 250, 0.5);
  white-space: nowrap;
}
.app-mod-cf__prop-input {
  min-width: 0;
}
.app-mod-cf__kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .app-mod-cf__kpi-bar {
    grid-template-columns: 1fr 1fr;
  }
}
.app-mod-cf__kpi {
  padding: clamp(14px, 2vw, 18px) clamp(14px, 2vw, 20px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(160deg, rgba(20, 32, 52, 0.5) 0%, rgba(8, 12, 24, 0.68) 100%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.app-mod-cf__kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.app-mod-cf__kpi--gold {
  border-color: rgba(224, 196, 132, 0.35);
  background: linear-gradient(160deg, rgba(32, 28, 18, 0.55) 0%, rgba(8, 12, 24, 0.72) 100%);
}
.app-mod-cf__kpi--pos {
  border-color: rgba(80, 200, 140, 0.35);
}
.app-mod-cf__kpi--neg {
  border-color: rgba(255, 120, 100, 0.3);
}
.app-mod-cf__kpi-emoji {
  font-size: 1.25rem;
  display: block;
  margin-bottom: 6px;
}
.app-mod-cf__kpi-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(244, 246, 250, 0.48);
  margin-bottom: 6px;
}
.app-mod-cf__kpi-val {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(244, 246, 250, 0.95);
  line-height: 1.1;
}
.app-mod-cf__kpi--pos .app-mod-cf__kpi-val { color: rgba(100, 220, 160, 0.98); }
.app-mod-cf__kpi--neg .app-mod-cf__kpi-val { color: rgba(255, 140, 120, 0.98); }
.app-mod-cf__kpi--gold .app-mod-cf__kpi-val { color: rgba(224, 196, 132, 0.98); }
.app-mod-cf__kpi-unit {
  font-size: 0.72rem;
  color: rgba(244, 246, 250, 0.42);
  margin-top: 4px;
}
.app-mod-cf__kpi-sub {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(100, 220, 160, 0.9);
  margin-top: 5px;
}
.app-mod-cf__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .app-mod-cf__grid {
    grid-template-columns: 1fr;
  }
}
.app-mod-cf__card {
  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%);
  overflow: hidden;
  min-width: 0;
}
.app-mod-cf__card-head {
  padding: 13px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}
.app-mod-cf__card-body {
  padding: 4px 16px 14px;
}
.app-mod-cf__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.app-mod-cf__field:last-child {
  border-bottom: none;
}
.app-mod-cf__field-label {
  font-size: 0.84rem;
  color: rgba(244, 246, 250, 0.62);
  flex: 1;
  min-width: 0;
}
.app-mod-cf__field-label small {
  display: block;
  font-size: 0.68rem;
  color: rgba(244, 246, 250, 0.38);
  margin-top: 2px;
}
.app-mod-cf__field-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.app-mod-cf__num {
  width: 110px;
  text-align: right;
  -moz-appearance: textfield;
}
.app-mod-cf__num::-webkit-inner-spin-button,
.app-mod-cf__num::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.app-mod-cf__select {
  min-width: 168px;
  max-width: 100%;
  text-align: right;
  padding-right: 28px;
  cursor: pointer;
}
.app-mod-cf__field-unit {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(244, 246, 250, 0.38);
  width: 38px;
}
.app-mod-cf__field-computed {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(244, 246, 250, 0.88);
  text-align: right;
  flex-shrink: 0;
}
.app-mod-cf__field-computed--accent {
  color: rgba(224, 196, 132, 0.95);
}
.app-mod-cf__field-computed--neg {
  color: rgba(255, 140, 120, 0.95);
}
.app-mod-cf__table-wrap {
  min-width: 0;
}
.app-mod-cf__table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.app-mod-cf__table-title {
  font-size: 0.88rem;
  font-weight: 700;
}
.app-mod-cf__table-controls {
  display: flex;
  gap: 6px;
}
.app-mod-cf__toggle {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 246, 250, 0.55);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.app-mod-cf__toggle:hover {
  border-color: rgba(224, 196, 132, 0.4);
  color: rgba(224, 196, 132, 0.95);
}
.app-mod-cf__toggle--active {
  background: rgba(224, 196, 132, 0.12);
  border-color: rgba(224, 196, 132, 0.45);
  color: rgba(224, 196, 132, 0.98);
}
.app-mod-cf__amort {
  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%);
  overflow: hidden;
}
.app-mod-cf__amort-scroll {
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.app-mod-cf__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.app-mod-cf__table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(12, 18, 32, 0.98);
}
.app-mod-cf__table th {
  padding: 11px 14px;
  text-align: right;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(244, 246, 250, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.app-mod-cf__table td {
  padding: 8px 14px;
  text-align: right;
  font-size: 0.8rem;
  color: rgba(244, 246, 250, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.app-mod-cf__table td:first-child,
.app-mod-cf__table th:first-child {
  text-align: left;
}
.app-mod-cf__table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
.app-mod-cf__year-row td {
  background: rgba(224, 196, 132, 0.1) !important;
  color: rgba(224, 196, 132, 0.95) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.app-mod-cf__total-row td {
  background: rgba(0, 0, 0, 0.25);
  font-weight: 700;
  color: rgba(244, 246, 250, 0.9) !important;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
}
.app-mod-cf__td-bal { color: rgba(244, 246, 250, 0.92) !important; font-weight: 700; }
.app-mod-cf__td-int { color: rgba(255, 140, 120, 0.95) !important; }
.app-mod-cf__td-cap { color: rgba(100, 220, 160, 0.95) !important; }
.app-mod-cf__td-cf-pos { color: rgba(100, 220, 160, 0.98) !important; font-weight: 700; }
.app-mod-cf__td-cf-neg { color: rgba(255, 140, 120, 0.98) !important; font-weight: 700; }
.app-mod-cf__snap-link {
  font-size: 0.72rem;
  color: rgba(107, 201, 212, 0.9);
  word-break: break-all;
  text-decoration: none;
}
.app-mod-cf__snap-link:hover {
  text-decoration: underline;
}
.app-mod-cf__disc {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.38);
  text-align: center;
}
.app-mod-sim-snap--cashflow {
  margin-top: 4px;
}

/* ─── Suivi des habitudes ─── */
.app-mod--habitudes .app-mod__hero--habitudes,
.app-mod--habitudes .app-psych-play__kicker {
  text-align: left;
}
.app-mod--habitudes .app-mod__panel--habitudes {
  margin-top: clamp(8px, 1.5vw, 16px);
}
.app-mod__ambient--habitudes {
  background:
    radial-gradient(ellipse 65% 45% at 88% 12%, rgba(120, 200, 160, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 8% 75%, rgba(107, 201, 212, 0.07) 0%, transparent 50%);
}
.app-mod-hab {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
  min-width: 0;
}
.app-mod-hab__boot-err {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(224, 120, 100, 0.45);
  background: rgba(224, 80, 80, 0.12);
  color: rgba(255, 200, 190, 0.95);
  font-size: 0.88rem;
  line-height: 1.45;
}
.app-mod-hab__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  padding: clamp(12px, 2vw, 16px) clamp(14px, 2.5vw, 20px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(160deg, rgba(20, 32, 52, 0.65) 0%, rgba(8, 12, 24, 0.82) 100%);
}
.app-mod-hab__nav {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(244, 246, 250, 0.95);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}
.app-mod-hab__nav:hover {
  background: rgba(255, 255, 255, 0.2);
}
.app-mod-hab__month {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 10rem;
  text-align: center;
  color: rgba(244, 246, 250, 0.95);
}
.app-mod-hab__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 10px;
  margin-left: auto;
}
.app-mod-hab__copy-prev {
  font-size: 0.78rem;
  white-space: normal;
  text-align: center;
  max-width: 16rem;
  line-height: 1.3;
}
.app-mod-hab__copy-prev:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.app-mod-hab__dlg-lead {
  margin: 0 0 4px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(244, 246, 250, 0.82);
}
@media (max-width: 720px) {
  .app-mod-hab__actions {
    margin-left: 0;
    width: 100%;
    justify-content: stretch;
  }
  .app-mod-hab__actions .btn-secondary {
    flex: 1 1 auto;
    min-width: 0;
  }
}
@media (max-width: 520px) {
  .app-mod-hab__copy-prev {
    max-width: none;
  }
}
.app-mod-hab__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: clamp(12px, 2vw, 16px) clamp(16px, 2.5vw, 22px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 18, 32, 0.55);
}
.app-mod-hab__stat {
  text-align: center;
  min-width: 4.5rem;
}
.app-mod-hab__stat-n {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(224, 196, 132, 0.98);
}
.app-mod-hab__stat-l {
  margin-top: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 246, 250, 0.45);
}
.app-mod-hab__stat-prog {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 280px;
}
.app-mod-hab__stat-prog-lab {
  margin-top: 6px;
  font-size: 0.68rem;
  text-align: center;
  color: rgba(244, 246, 250, 0.5);
}
.app-mod-hab__card {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(165deg, rgba(18, 28, 48, 0.75) 0%, rgba(6, 10, 20, 0.9) 100%);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.app-mod-hab__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.app-mod-hab__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  min-width: 640px;
}
.app-mod-hab__th-section {
  background: rgba(26, 39, 68, 0.95);
  color: rgba(244, 246, 250, 0.98);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 12px 16px;
  text-align: left;
}
.app-mod-hab__tr-week th {
  background: rgba(232, 237, 245, 0.08);
  padding: 6px 4px;
  text-align: center;
  font-weight: 700;
  font-size: 0.68rem;
  color: rgba(244, 246, 250, 0.75);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(208, 216, 234, 0.15);
}
.app-mod-hab__th-habit {
  text-align: left !important;
  padding-left: 16px !important;
  min-width: 150px;
}
.app-mod-hab__th-obj {
  min-width: 44px;
}
.app-mod-hab__th-total {
  min-width: 52px;
  background: rgba(240, 242, 247, 0.06) !important;
}
.app-mod-hab__th-week-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.58rem;
  font-weight: 500;
  opacity: 0.65;
  letter-spacing: 0.03em;
}
.app-mod-hab__th-day {
  min-width: 26px;
  width: 26px;
  font-size: 0.65rem;
}
.app-mod-hab__th-day--week-end {
  border-right: 2px solid rgba(208, 216, 234, 0.2);
}
.app-mod-hab__tr-habit {
  border-bottom: 1px solid rgba(237, 240, 247, 0.06);
  transition: background 0.15s;
}
.app-mod-hab__tr-habit:hover {
  background: rgba(248, 249, 252, 0.04);
}
.app-mod-hab__td-name {
  padding: 8px 8px 8px 12px;
  font-weight: 600;
  font-style: italic;
  color: rgba(244, 246, 250, 0.92);
}
.app-mod-hab__name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.app-mod-hab__inp-name {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  font-style: italic;
  color: inherit;
  outline: none;
}
.app-mod-hab__inp-name:focus {
  background: rgba(58, 82, 152, 0.2);
  border-radius: 4px;
  padding: 2px 4px;
}
.app-mod-hab__del {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(192, 200, 216, 0.5);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: 4px;
}
.app-mod-hab__del:hover {
  color: rgba(224, 80, 80, 0.95);
}
.app-mod-hab__td-obj {
  text-align: center;
  padding: 8px 4px;
  background: rgba(58, 82, 152, 0.12);
  border-left: 1px solid rgba(237, 240, 247, 0.06);
  border-right: 1px solid rgba(237, 240, 247, 0.06);
}
.app-mod-hab__inp-obj {
  width: 2.25rem;
  text-align: center;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(107, 201, 212, 0.95);
  outline: none;
}
.app-mod-hab__inp-obj:focus {
  background: rgba(58, 82, 152, 0.25);
  border-radius: 4px;
}
.app-mod-hab__td-check {
  text-align: center;
  padding: 6px 2px;
  border-right: 1px solid rgba(240, 242, 247, 0.05);
}
.app-mod-hab__td-check--week-end {
  border-right: 2px solid rgba(208, 216, 234, 0.18);
}
.app-mod-hab__check {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(200, 208, 224, 0.35);
  border-radius: 5px;
  background: rgba(8, 12, 24, 0.5);
  color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 0.8rem;
  transition: border-color 0.15s, background 0.15s;
}
.app-mod-hab__check:hover {
  border-color: rgba(107, 201, 212, 0.6);
  background: rgba(58, 82, 152, 0.2);
}
.app-mod-hab__check--on {
  background: rgba(26, 39, 68, 0.95);
  border-color: rgba(107, 201, 212, 0.7);
  color: rgba(244, 246, 250, 0.98);
}
.app-mod-hab__td-total {
  text-align: center;
  font-weight: 800;
  background: rgba(240, 242, 247, 0.05);
  border-left: 2px solid rgba(208, 216, 234, 0.15);
  padding: 8px;
  vertical-align: middle;
}
.app-mod-hab__total-n {
  font-size: 0.82rem;
  color: rgba(244, 246, 250, 0.95);
}
.app-mod-hab__total-d {
  font-size: 0.62rem;
  color: rgba(138, 155, 192, 0.8);
  font-weight: 500;
}
.app-mod-hab__progress {
  background: rgba(232, 237, 245, 0.12);
  border-radius: 20px;
  height: 4px;
  margin-top: 4px;
  overflow: hidden;
}
.app-mod-hab__progress-fill {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(26, 39, 68, 0.95), rgba(107, 201, 212, 0.85));
  transition: width 0.3s;
}
.app-mod-hab__td-week {
  text-align: center;
  padding: 8px 6px;
  border-right: 2px solid rgba(208, 216, 234, 0.12);
  vertical-align: top;
}
.app-mod-hab__week-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.app-mod-hab__inp-note {
  width: 100%;
  max-width: 7rem;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.65rem;
  font-style: italic;
  text-align: center;
  color: rgba(244, 246, 250, 0.8);
  outline: none;
  padding: 2px;
  border-bottom: 1px dashed transparent;
}
.app-mod-hab__inp-note:focus {
  border-bottom-color: rgba(107, 201, 212, 0.6);
}
.app-mod-hab__inp-note::placeholder {
  color: rgba(192, 200, 216, 0.35);
}
.app-mod-hab__tr-add td {
  padding: 10px 16px;
  border-top: 2px dashed rgba(224, 229, 240, 0.12);
}
.app-mod-hab__add {
  background: none;
  border: none;
  color: rgba(107, 201, 212, 0.9);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.2s;
}
.app-mod-hab__add:hover {
  color: rgba(224, 196, 132, 0.98);
}

/* Simulateur FIRE */
.app-mod--fire .app-mod__hero--fire,
.app-mod--fire .app-psych-play__kicker {
  text-align: left;
}
.app-mod__ambient--fire {
  background:
    radial-gradient(ellipse 62% 42% at 86% 12%, rgba(201, 168, 76, 0.11) 0%, transparent 56%),
    radial-gradient(ellipse 56% 48% at 12% 80%, rgba(107, 201, 212, 0.08) 0%, transparent 52%);
}
.app-mod-fire__access {
  margin: 8px 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(224, 196, 132, 0.88);
}
.app-mod-fire {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.app-mod-fire__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.app-mod-fire__label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: rgba(184, 150, 62, 0.9);
}
.app-mod-fire__title {
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 900;
}
.app-mod-fire__sub {
  margin: 0;
  color: rgba(148, 163, 184, 0.9);
}
.app-mod-fire__theory,
.app-mod-fire__simulate {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(14px, 2.2vw, 20px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.app-mod-fire__theory {
  background: linear-gradient(165deg, rgba(14, 16, 28, 0.92), rgba(10, 12, 22, 0.88));
}
.app-mod-fire__simulate {
  background: linear-gradient(165deg, rgba(17, 17, 24, 0.96), rgba(12, 14, 26, 0.9));
  box-shadow: inset 3px 0 0 var(--fire-accent, rgba(224, 196, 132, 0.55));
}
.app-mod-fire__section-title,
.app-mod-fire__simulate-title {
  margin: 0;
  font-size: clamp(1.02rem, 2.1vw, 1.28rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(244, 246, 250, 0.96);
}
.app-mod-fire__simulate-title {
  color: var(--fire-accent, rgba(224, 196, 132, 0.98));
}
.app-mod-fire__section-lead {
  margin: -4px 0 0;
  font-size: clamp(0.78rem, 1.35vw, 0.86rem);
  line-height: 1.5;
  color: rgba(148, 163, 184, 0.88);
  max-width: 62ch;
}
.app-mod-fire__profiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 980px) {
  .app-mod-fire__profiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.app-mod-fire__profile {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  padding: 12px 11px;
  background: linear-gradient(165deg, rgba(17, 17, 24, 0.95), rgba(10, 12, 22, 0.92));
  text-align: left;
  display: grid;
  gap: 6px;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.app-mod-fire__profile:hover {
  border-color: var(--fire-accent, rgba(255,255,255,0.2));
  transform: translateY(-1px);
}
.app-mod-fire__profile.is-active {
  border-color: var(--fire-accent, rgba(255,255,255,0.32));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fire-accent) 30%, transparent);
}
.app-mod-fire__profile-num { font-size: 0.58rem; color: rgba(148, 163, 184, 0.72); letter-spacing: 0.08em; }
.app-mod-fire__profile-emoji { font-size: 1.25rem; }
.app-mod-fire__profile-name { font-size: 0.85rem; font-weight: 800; color: var(--fire-accent, #e2e8f0); }
.app-mod-fire__profile-desc { font-size: 0.7rem; color: rgba(148, 163, 184, 0.88); }
.app-mod-fire__profile-pitch {
  margin: 2px 0 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.82);
}
.app-mod-fire__profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.app-mod-fire__profile-chip {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fire-accent) 35%, transparent);
  background: color-mix(in srgb, var(--fire-accent) 10%, transparent);
  font-size: 0.58rem;
  line-height: 1.2;
  color: rgba(244, 246, 250, 0.88);
}
.app-mod-fire__profile-kpis {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.app-mod-fire__profile-kpi {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(10, 14, 26, 0.72);
  padding: 6px 7px;
}
.app-mod-fire__profile-kpi-k {
  display: block;
  font-size: 0.54rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.78);
}
.app-mod-fire__profile-kpi-v {
  display: block;
  margin-top: 1px;
  font-size: 0.9rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fire-accent, rgba(224, 196, 132, 0.98));
}
.app-mod-fire__detail {
  margin: 0;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 17, 24, 0.8);
  display: grid;
  gap: 10px;
}
.app-mod-fire__detail-main {
  margin: 0;
  font-size: clamp(0.95rem, 1.8vw, 1.08rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fire-accent, rgba(224, 196, 132, 0.98));
}
.app-mod-fire__detail-vibe {
  margin: 0;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.88);
}
.app-mod-fire__detail-block {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.9);
}
.app-mod-fire__detail-label {
  margin: 4px 0 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.88);
}
.app-mod-fire__focus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.app-mod-fire__focus-chip {
  appearance: none;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  padding: 7px 12px;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  color: rgba(226, 232, 240, 0.78);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.app-mod-fire__focus-chip:hover {
  border-color: color-mix(in srgb, var(--fire-accent) 45%, transparent);
  color: rgba(244, 246, 250, 0.92);
}
.app-mod-fire__focus-chip.is-active {
  border-color: color-mix(in srgb, var(--fire-accent) 55%, transparent);
  background: color-mix(in srgb, var(--fire-accent) 14%, transparent);
  color: rgba(244, 246, 250, 0.96);
}
.app-mod-fire__vision {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 12, 24, 0.55);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(244, 246, 250, 0.92);
}
.app-mod-fire__vision:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--fire-accent) 50%, transparent);
}
.app-mod-fire__detail-rule {
  margin: 4px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.62rem;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.72);
}
.app-mod-fire__detail-mini {
  margin: 0;
  font-size: clamp(0.78rem, 1.35vw, 0.86rem);
  line-height: 1.5;
  color: rgba(148, 163, 184, 0.88);
}
.app-mod-fire__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
}
@media (max-width: 920px) {
  .app-mod-fire__form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .app-mod-fire__form { grid-template-columns: 1fr; }
}
.app-mod-fire__field { display: grid; gap: 5px; }
.app-mod-fire__field-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.9);
}
.app-mod-fire__field-suffix { font-size: 0.63rem; color: rgba(148, 163, 184, 0.65); }
.app-mod-fire__field--inactive {
  opacity: 0.55;
}
.app-mod-fire__field--inactive .app-mod-fire__field-label {
  color: rgba(148, 163, 184, 0.55);
}
.app-mod-fire__exp-switch {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 4px 0 2px;
}
.app-mod-fire__exp-switch-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.88);
}
.app-mod-fire__exp-toggle {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 246, 250, 0.55);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.app-mod-fire__exp-toggle:hover {
  border-color: rgba(224, 196, 132, 0.4);
  color: rgba(224, 196, 132, 0.95);
}
.app-mod-fire__exp-toggle--active {
  background: rgba(224, 196, 132, 0.12);
  border-color: rgba(224, 196, 132, 0.45);
  color: rgba(224, 196, 132, 0.98);
}
.app-mod-fire__prefill {
  align-self: end;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.app-mod-fire__objectif {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}
.app-mod-fire__objectif .app-mod-fire__field-label {
  align-self: end;
}
.app-mod-fire__objectif-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--fire-accent, rgba(224, 196, 132, 0.95));
  text-align: right;
  align-self: end;
  justify-self: end;
  white-space: nowrap;
}
.app-mod-fire__objectif-range,
.app-mod-fire__objectif-slider,
.app-mod-fire__objectif-annual {
  grid-column: 1 / -1;
}
.app-mod-fire__objectif-range,
.app-mod-fire__objectif-annual {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.88);
}
.app-mod-fire__objectif-slider {
  width: 100%;
  margin: 2px 0 0;
  accent-color: var(--fire-accent, #e0c484);
  cursor: pointer;
}
.app-mod-fire__check {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 2px 0;
}
.app-mod-fire__check-input {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--fire-accent, #e0c484);
  flex-shrink: 0;
}
.app-mod-fire__check-text {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.88);
}
.app-mod-fire__disclaimer {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.35);
  font-size: 0.68rem;
  line-height: 1.5;
  color: rgba(148, 163, 184, 0.92);
}

.app-prefill-btn--unchanged {
  border-color: rgba(148, 163, 184, 0.45) !important;
  color: rgba(148, 163, 184, 0.92) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.app-mod-sim-compound__prefill.app-prefill-btn--unchanged {
  color: rgba(148, 163, 184, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
.app-mod-fire__dashboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-mod-fire__overview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 16px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(17, 17, 24, 0.95), rgba(10, 12, 22, 0.92));
  padding: 14px 16px;
}
@media (max-width: 640px) {
  .app-mod-fire__overview {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}
.app-mod-fire__overview-ring {
  --fire-pct: 0%;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(farthest-side, rgba(10, 12, 22, 0.98) 72%, transparent 73%) center / 100% 100%,
    conic-gradient(rgba(224, 196, 132, 0.95) var(--fire-pct), rgba(255, 255, 255, 0.08) 0);
  flex-shrink: 0;
}
.app-mod-fire__overview-pct {
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(224, 196, 132, 0.98);
  letter-spacing: -0.02em;
}
.app-mod-fire__overview-body {
  display: grid;
  gap: 4px;
}
.app-mod-fire__overview-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: rgba(244, 246, 250, 0.96);
}
.app-mod-fire__overview-desc {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: rgba(148, 163, 184, 0.9);
}
.app-mod-fire__results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 760px) {
  .app-mod-fire__results { grid-template-columns: 1fr; }
}
.app-mod-fire__kpi {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(17, 17, 24, 0.95), rgba(10, 12, 22, 0.92));
  padding: 12px 13px;
}
.app-mod-fire__kpi-label {
  display: block;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(148, 163, 184, 0.88);
  margin-bottom: 4px;
}
.app-mod-fire__kpi-value {
  display: block;
  font-size: clamp(0.95rem, 2.2vw, 1.25rem);
  color: rgba(224, 196, 132, 0.98);
}
.app-mod-fire__kpi-sub {
  display: block;
  margin-top: 3px;
  color: rgba(148, 163, 184, 0.78);
  font-size: 0.67rem;
}
.app-mod-fire__compare {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(12, 16, 30, 0.75);
  padding: 12px 13px;
}
.app-mod-fire__compare-title,
.app-mod-fire__chart-title {
  margin: 0 0 6px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
}
.app-mod-fire__compare-intro {
  margin: 0 0 10px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.82);
}
.app-mod-fire__compare-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 760px) {
  .app-mod-fire__compare-list {
    grid-template-columns: 1fr;
  }
}
.app-mod-fire__compare-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(17, 17, 24, 0.86);
  padding: 10px 11px;
  display: grid;
  gap: 6px;
}
.app-mod-fire__compare-card.is-done {
  border-color: rgba(99, 227, 109, 0.28);
}
.app-mod-fire__compare-card--info {
  grid-column: 1 / -1;
}
.app-mod-fire__compare-k {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.82);
}
.app-mod-fire__compare-vals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}
.app-mod-fire__compare-col {
  display: grid;
  gap: 2px;
}
.app-mod-fire__compare-col--cur {
  text-align: left;
  justify-items: start;
}
.app-mod-fire__compare-col--tgt {
  text-align: right;
  justify-items: end;
}
.app-mod-fire__compare-col-label {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.68);
}
.app-mod-fire__compare-col-v {
  display: block;
  font-size: 0.92rem;
  line-height: 1.15;
}
.app-mod-fire__compare-col-v--cur {
  color: rgba(244, 246, 250, 0.96);
}
.app-mod-fire__compare-col-v--tgt {
  color: rgba(224, 196, 132, 0.98);
}
.app-mod-fire__compare-track {
  background: rgba(232, 237, 245, 0.1);
  border-radius: 20px;
  height: 6px;
  overflow: hidden;
}
.app-mod-fire__compare-fill {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(184, 150, 62, 0.85), rgba(224, 196, 132, 0.95));
  transition: width 0.35s ease;
}
.app-mod-fire__compare-fill--invert {
  background: linear-gradient(90deg, rgba(107, 201, 212, 0.75), rgba(53, 214, 255, 0.9));
}
.app-mod-fire__compare-gap {
  font-size: 0.65rem;
  color: rgba(148, 163, 184, 0.78);
}
.app-mod-fire__compare-gap.is-done {
  color: rgba(99, 227, 109, 0.92);
}
.app-mod-fire__compare-info-v {
  font-size: 1.05rem;
  color: rgba(224, 196, 132, 0.98);
}
.app-mod-fire__targets {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(12, 16, 30, 0.75);
  padding: 12px 13px;
}
.app-mod-fire__targets-title {
  margin: 0 0 8px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.9);
}
.app-mod-fire__targets-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 760px) {
  .app-mod-fire__targets-list {
    grid-template-columns: 1fr;
  }
}
.app-mod-fire__target-row {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: rgba(17, 17, 24, 0.86);
  padding: 8px 10px;
  display: grid;
  gap: 1px;
}
.app-mod-fire__target-k {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.82);
}
.app-mod-fire__target-v {
  font-size: 0.95rem;
  color: rgba(224, 196, 132, 0.98);
}
.app-mod-fire__target-s {
  font-size: 0.65rem;
  color: rgba(148, 163, 184, 0.78);
}
.app-mod-fire__chart-wrap {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(12, 16, 30, 0.75);
  padding: 14px;
  display: grid;
  gap: 8px;
}
.app-mod-fire__chart-inner {
  min-height: 360px;
  height: 360px;
  position: relative;
}
.app-mod-fire__chart {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none;
}
.app-mod-fire__chart-hint {
  margin: 8px 0 0;
  color: rgba(248, 113, 113, 0.95);
  font-size: 0.72rem;
}
/* Impression — suivi des habitudes : paysage, pleine largeur, lignes compactes */
@media print {
  @page {
    size: A4 landscape;
    margin: 4mm 3mm;
  }

  body:has(.app-mod--habitudes) {
    background: #fff !important;
    color: #111 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body:has(.app-mod--habitudes) header,
  body:has(.app-mod--habitudes) footer,
  body:has(.app-mod--habitudes) .app-mod__ambient,
  body:has(.app-mod--habitudes) .app-psych-play__topbar,
  body:has(.app-mod--habitudes) .app-mod__hero,
  body:has(.app-mod--habitudes) .app-demo-tool-notice,
  body:has(.app-mod--habitudes) .app-mod-hab__toolbar .app-mod-hab__nav,
  body:has(.app-mod--habitudes) .app-mod-hab__copy-prev,
  body:has(.app-mod--habitudes) .app-mod-hab__print,
  body:has(.app-mod--habitudes) .app-mod-hab__del,
  body:has(.app-mod--habitudes) .app-mod-hab__add,
  body:has(.app-mod--habitudes) .app-mod-hab__stat-prog,
  body:has(.app-mod--habitudes) .app-mod-hab__progress {
    display: none !important;
  }

  body:has(.app-mod--habitudes) .container--app-wide {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body:has(.app-mod--habitudes) .app-mod__panel--habitudes {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab {
    gap: 2mm !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__toolbar {
    display: flex !important;
    justify-content: center !important;
    padding: 0 0 1mm !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__month {
    font-size: 9pt !important;
    min-width: 0 !important;
    color: #111 !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__stats {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 3mm !important;
    padding: 1mm 0 2mm !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__stat {
    min-width: 0 !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__stat-n {
    font-size: 9pt !important;
    color: #111 !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__stat-l {
    font-size: 5.5pt !important;
    margin-top: 0 !important;
    color: #444 !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__card {
    break-inside: auto;
    page-break-inside: auto;
    margin: 0 0 2mm !important;
    padding: 0 !important;
    border: 1px solid #bbb !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    overflow: visible !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__scroll {
    overflow: visible !important;
    width: 100% !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    font-size: 5pt !important;
    line-height: 1.05 !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__table thead {
    display: table-header-group;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__tr-habit {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__th-section {
    padding: 1mm 2mm !important;
    font-size: 6pt !important;
    background: #1a2744 !important;
    color: #fff !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__tr-week th {
    padding: 0.5mm 0.3mm !important;
    font-size: 4.5pt !important;
    line-height: 1 !important;
    background: #e8edf5 !important;
    color: #111 !important;
    border-bottom: 1px solid #999 !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__th-week-sub {
    display: none !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__th-habit {
    width: 13% !important;
    min-width: 0 !important;
    padding-left: 1.5mm !important;
    text-align: left !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__th-obj,
  body:has(.app-mod--habitudes) .app-mod-hab__td-obj {
    width: 4% !important;
    min-width: 0 !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__th-total,
  body:has(.app-mod--habitudes) .app-mod-hab__td-total {
    width: 5.5% !important;
    min-width: 0 !important;
    padding: 0.5mm !important;
    font-size: 5pt !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__th-day,
  body:has(.app-mod--habitudes) .app-mod-hab__td-check {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0.4mm 0.2mm !important;
    font-size: 4.5pt !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__th-week,
  body:has(.app-mod--habitudes) .app-mod-hab__td-week {
    width: auto !important;
    min-width: 0 !important;
    padding: 0.5mm 0.3mm !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__td-name {
    padding: 0.4mm 0.5mm 0.4mm 1mm !important;
    font-size: 5pt !important;
    font-style: normal !important;
    color: #111 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__inp-name,
  body:has(.app-mod--habitudes) .app-mod-hab__inp-obj,
  body:has(.app-mod--habitudes) .app-mod-hab__inp-note {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    font-style: normal !important;
    color: #111 !important;
    -webkit-appearance: none;
    appearance: none;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__check {
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
    border-width: 1px !important;
    border-radius: 2px !important;
    font-size: 6px !important;
    line-height: 1 !important;
    background: #fff !important;
    border-color: #888 !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__check--on {
    background: #1a2744 !important;
    border-color: #1a2744 !important;
    color: #fff !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__total-n,
  body:has(.app-mod--habitudes) .app-mod-hab__total-d {
    font-size: 4.5pt !important;
    line-height: 1.05 !important;
    color: #111 !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__week-cell {
    gap: 0.5mm !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__inp-note {
    font-size: 4pt !important;
    max-width: none !important;
  }

  body:has(.app-mod--habitudes) .app-mod-hab__tr-add {
    display: none !important;
  }
}