/* Patch 2026-05-04 · cadre public commun pour l'espace famille */
body.family-framed-page,
body.family-auth-framed-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 0 0, rgba(199,155,58,.12), transparent 28rem),
    radial-gradient(circle at 100% 12rem, rgba(0,75,63,.08), transparent 30rem),
    #f7f1e5 !important;
  color: #17231d;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.family-framed-page > main,
body.family-auth-framed-page > main,
body.family-framed-page > .wrap,
body.family-framed-page > .profile-shell,
body.family-framed-page > .plan-shell {
  flex: 1 0 auto;
}

body.family-auth-framed-page .login-card,
body.family-auth-framed-page .card-wrap {
  max-width: 460px;
  width: min(100% - 32px, 460px);
  margin: 52px auto;
}

body.family-auth-framed-page .card,
body.family-framed-page .section-card,
body.family-framed-page .card,
body.family-framed-page .bucket,
body.family-framed-page .hero-pay {
  border-radius: 24px !important;
  border: 1px solid rgba(0,75,63,.10) !important;
  box-shadow: 0 22px 60px rgba(0,45,38,.075) !important;
}

body.family-auth-framed-page .btn-primary,
body.family-framed-page .btn-primary,
body.family-framed-page .btn:not(.btn-ghost):not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-outline-primary) {
  background: var(--ps-primary, #004b3f) !important;
  border-color: var(--ps-primary, #004b3f) !important;
}

body.family-framed-page .topbar,
body.family-framed-page .profile-shell > .d-flex:first-child,
body.family-framed-page .plan-shell > .d-flex:first-child {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(0,75,63,.10) !important;
  border-radius: 24px !important;
  padding: 18px 20px !important;
  box-shadow: 0 18px 44px rgba(0,45,38,.06) !important;
}

body.family-framed-page .hero-pay {
  background: linear-gradient(135deg, var(--ps-primary, #004b3f), color-mix(in srgb, var(--ps-primary, #004b3f) 72%, white)) !important;
}

.ps-family-global-header {
  flex: 0 0 auto;
}

.ps-family-global-footer {
  flex: 0 0 auto;
  margin-top: 42px;
}

.ps-family-space-link {
  background: rgba(0,75,63,.07);
  color: var(--ps-primary, #004b3f) !important;
}

.ps-family-space-link.is-active {
  background: var(--ps-primary, #004b3f) !important;
  color: #fff !important;
}

@media (max-width: 720px) {
  body.family-auth-framed-page .login-card,
  body.family-auth-framed-page .card-wrap {
    margin: 28px auto;
  }
  .ps-family-global-footer {
    margin-top: 28px;
  }
}

/* PATCH 2026-05-05 — espace famille homogène avec le site public */
body.family-framed-page,
body.family-auth-framed-page {
  --sp-primary: var(--ps-primary, #004b3f) !important;
  --sp-text: #17231d !important;
  --sp-muted: #66736c !important;
  --sp-border: rgba(23,35,29,.12) !important;
  --sp-bg: #f7f1e5 !important;
}

body.family-framed-page .wrap,
body.family-framed-page .profile-shell,
body.family-framed-page .plan-shell {
  width: min(1120px, calc(100% - 48px)) !important;
  max-width: 1120px !important;
  margin: 24px auto 0 !important;
  padding: 0 0 48px !important;
}

body.family-auth-framed-page .login-card,
body.family-auth-framed-page .card-wrap {
  margin: 36px auto !important;
}

body.family-framed-page .topbar,
body.family-framed-page .profile-shell > .d-flex:first-child,
body.family-framed-page .plan-shell > .d-flex:first-child {
  margin-bottom: 18px !important;
  padding: 14px 16px !important;
  border-radius: 20px !important;
}

body.family-framed-page .topbar-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: var(--ps-primary, #004b3f) !important;
  font-size: 17px !important;
}

body.family-framed-page .topbar h1,
body.family-framed-page .profile-shell h1,
body.family-framed-page .plan-shell h1 {
  color: var(--ps-primary-3, #06372f) !important;
  font-size: 1.12rem !important;
  letter-spacing: -.02em !important;
}

body.family-framed-page .btn,
body.family-auth-framed-page .btn,
body.family-framed-page button.btn,
body.family-auth-framed-page button.btn {
  border-radius: 999px !important;
  min-height: 40px !important;
  padding: 9px 15px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

body.family-framed-page .btn-primary,
body.family-auth-framed-page .btn-primary,
body.family-framed-page .btn-success,
body.family-framed-page .btn:not(.btn-ghost):not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-outline-primary) {
  background: var(--ps-primary, #004b3f) !important;
  border-color: var(--ps-primary, #004b3f) !important;
  color: #fff !important;
}

body.family-framed-page .btn-ghost,
body.family-framed-page .btn-outline,
body.family-framed-page .btn-outline-secondary,
body.family-framed-page .btn-outline-primary,
body.family-auth-framed-page .btn-outline-secondary,
body.family-auth-framed-page .btn-outline-primary {
  background: #fff !important;
  color: var(--ps-primary-3, #06372f) !important;
  border-color: rgba(0,75,63,.18) !important;
}

body.family-framed-page .hero-pay {
  border-radius: 22px !important;
  padding: clamp(20px, 3vw, 28px) !important;
  margin-bottom: 18px !important;
  background: linear-gradient(135deg, var(--ps-primary, #004b3f), color-mix(in srgb, var(--ps-primary, #004b3f) 78%, #000)) !important;
}

body.family-framed-page .hero-pay-amount {
  font-size: clamp(2.05rem, 5vw, 3.1rem) !important;
  margin-bottom: 10px !important;
}

body.family-framed-page .hero-pay-sub {
  margin-bottom: 16px !important;
}

body.family-framed-page .buckets {
  gap: 14px !important;
  margin-bottom: 18px !important;
}

body.family-framed-page .bucket,
body.family-framed-page .card,
body.family-framed-page .section-card,
body.family-auth-framed-page .card {
  border-radius: 20px !important;
  padding: 18px !important;
  margin-bottom: 16px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(0,75,63,.10) !important;
  box-shadow: 0 18px 44px rgba(0,45,38,.06) !important;
}

body.family-framed-page .bucket {
  border-top-width: 0 !important;
  box-shadow: inset 0 4px 0 rgba(0,75,63,.12), 0 18px 44px rgba(0,45,38,.06) !important;
}

body.family-framed-page .bucket-amount {
  font-size: clamp(1.45rem, 3vw, 2rem) !important;
}

body.family-framed-page .card h2,
body.family-framed-page .section-card h3,
body.family-framed-page .section-card h2 {
  color: var(--ps-primary-3, #06372f) !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
}

body.family-framed-page .form-control,
body.family-framed-page .form-select,
body.family-auth-framed-page .form-control,
body.family-auth-framed-page .form-select {
  min-height: 42px !important;
  border-radius: 13px !important;
  border-color: rgba(0,75,63,.14) !important;
}

body.family-framed-page table,
body.family-framed-page .payments-table {
  font-size: .86rem !important;
}

body.family-framed-page .installment-option {
  border-radius: 16px !important;
  border-color: rgba(0,75,63,.13) !important;
}

body.family-framed-page .installment-option:hover,
body.family-framed-page .installment-option.active {
  border-color: var(--ps-primary, #004b3f) !important;
  background: rgba(0,75,63,.055) !important;
}

.ps-family-global-header .ps-nav .ps-family-space-link.is-active {
  background: rgba(0,75,63,.075) !important;
  color: var(--ps-primary-3, #06372f) !important;
}

.ps-family-global-footer {
  margin-top: 24px !important;
}

@media (max-width: 720px) {
  body.family-framed-page .wrap,
  body.family-framed-page .profile-shell,
  body.family-framed-page .plan-shell {
    width: min(100% - 24px, 1120px) !important;
    margin-top: 16px !important;
    padding-bottom: 32px !important;
  }
  body.family-framed-page .topbar,
  body.family-framed-page .profile-shell > .d-flex:first-child,
  body.family-framed-page .plan-shell > .d-flex:first-child {
    display: grid !important;
    align-items: start !important;
  }
}

/* PATCH 2026-05-05 — espace famille : menu aligné sur le style doré public */
.ps-family-global-header .ps-nav .ps-family-space-link,
.ps-family-global-header .ps-nav .ps-family-space-link.is-active {
  background: transparent !important;
  color: var(--ps-primary-3, #06372f) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}