/* /assets/style.css */

:root {
  --bg-0: #05070d;
  --bg-1: #0b1020;
  --bg-2: #12192c;
  --bg-3: #1a2440;
  --surface-0: rgba(8, 12, 24, 0.84);
  --surface-1: rgba(13, 18, 36, 0.88);
  --surface-2: rgba(20, 28, 51, 0.92);
  --surface-3: rgba(29, 40, 72, 0.95);
  --line-soft: rgba(255, 255, 255, 0.08);
  --line-mid: rgba(232, 212, 139, 0.18);
  --line-strong: rgba(232, 212, 139, 0.35);
  --gold-0: #f8efc8;
  --gold-1: #e8d48b;
  --gold-2: #c9ab54;
  --gold-3: #8b6a24;
  --txt-0: #f7f3e8;
  --txt-1: rgba(247, 243, 232, 0.92);
  --txt-2: rgba(247, 243, 232, 0.76);
  --txt-3: rgba(247, 243, 232, 0.56);
  --success: #49c98a;
  --danger: #ff6d7a;
  --warning: #ffcb6b;
  --shadow-0: 0 12px 40px rgba(0, 0, 0, 0.28);
  --shadow-1: 0 24px 80px rgba(0, 0, 0, 0.36);
  --shadow-2: 0 28px 90px rgba(0, 0, 0, 0.48);
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --page-max: 1220px;
  --page-gutter: clamp(16px, 2vw, 28px);
  --section-gap: clamp(18px, 2.2vw, 30px);
  --transition-fast: 160ms ease;
  --transition-mid: 240ms ease;
  --transition-slow: 420ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--txt-0);
  background:
    radial-gradient(circle at 20% 20%, rgba(113, 88, 28, 0.16), transparent 34%),
    radial-gradient(circle at 80% 12%, rgba(95, 76, 24, 0.12), transparent 30%),
    radial-gradient(circle at 50% 90%, rgba(72, 88, 142, 0.18), transparent 34%),
    linear-gradient(180deg, #04060b 0%, #0a0f1d 46%, #0f1628 100%);
  font-family:
    "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--gold-1);
  text-decoration: none;
}

a:hover {
  color: var(--gold-0);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

input,
select,
textarea {
  color: var(--txt-0);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(232, 212, 139, 0.16);
  border-radius: 16px;
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(232, 212, 139, 0.52);
  box-shadow:
    0 0 0 4px rgba(232, 212, 139, 0.08),
    0 10px 35px rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

textarea {
  resize: vertical;
  min-height: 140px;
}

.hidden {
  display: none !important;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
}

#etoiles,
#symboles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.etoile {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.8),
    0 0 14px rgba(232, 212, 139, 0.25);
  animation: twinkle 3.4s ease-in-out infinite;
  opacity: 0.38;
}

.symbole-flottant {
  position: absolute;
  color: rgba(232, 212, 139, 0.08);
  text-shadow: 0 0 20px rgba(232, 212, 139, 0.08);
  animation: drift 24s linear infinite;
  user-select: none;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.24; transform: scale(0.85); }
  50% { opacity: 0.8; transform: scale(1.35); }
}

@keyframes drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.04; }
  30% { opacity: 0.13; }
  50% { transform: translate3d(12px, -20px, 0) rotate(7deg); opacity: 0.08; }
  100% { transform: translate3d(-14px, -42px, 0) rotate(-10deg); opacity: 0.02; }
}

body > *:not(#etoiles):not(#symboles):not(#hiramia-toast) {
  position: relative;
  z-index: 1;
}

/* ---------- Structure générale ---------- */

.page {
  display: none;
  min-height: 100vh;
  padding:
    calc(20px + env(safe-area-inset-top, 0px))
    var(--page-gutter)
    calc(40px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.page.active {
  display: block;
}

.page.visible {
  opacity: 1;
  transform: translateY(0);
}

.page > * {
  width: min(100%, var(--page-max));
  margin-inline: auto;
}

.page-shell,
.page-stack,
.page-section,
.hero-grid,
.dashboard-grid,
.history-grid,
.credits-grid,
.onboarding-grid {
  width: min(100%, var(--page-max));
  margin-inline: auto;
}

.page-stack,
.page-section {
  display: grid;
  gap: var(--section-gap);
}

.hero-grid,
.dashboard-grid,
.history-grid,
.credits-grid,
.onboarding-grid {
  display: grid;
  gap: var(--section-gap);
}

.hero-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.dashboard-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.history-grid {
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}

.credits-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.onboarding-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.section-card,
.dashboard-card,
.oracle-panel,
.surface-card,
.glass-card,
.reading-card,
.pricing-card,
.auth-card,
.menu-panel,
.share-drawer-sheet,
.feedback-modal-card {
  position: relative;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)),
    linear-gradient(180deg, var(--surface-1), var(--surface-0));
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-0);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.section-card::before,
.dashboard-card::before,
.oracle-panel::before,
.surface-card::before,
.glass-card::before,
.reading-card::before,
.pricing-card::before,
.auth-card::before,
.menu-panel::before,
.share-drawer-sheet::before,
.feedback-modal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    linear-gradient(
      135deg,
      rgba(232, 212, 139, 0.26),
      rgba(232, 212, 139, 0.06) 32%,
      rgba(255, 255, 255, 0.03) 62%,
      rgba(232, 212, 139, 0.14) 100%
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.section-card,
.dashboard-card,
.oracle-panel,
.surface-card,
.glass-card,
.auth-card,
.pricing-card {
  padding: clamp(18px, 2.2vw, 28px);
}

.reading-card {
  padding: 18px 18px 16px;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.12;
  color: var(--txt-0);
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.35rem, 2.4vw, 2.15rem);
  font-weight: 750;
}

h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 700;
}

p {
  margin: 0;
}

.lead,
.dashboard-copy,
.section-copy,
.support-copy {
  color: var(--txt-2);
  line-height: 1.68;
}

.eyebrow,
.section-kicker,
.panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(232, 212, 139, 0.08);
  border: 1px solid rgba(232, 212, 139, 0.16);
  color: var(--gold-1);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 212, 139, 0.28), transparent);
}

/* ---------- Boutons ---------- */

button,
.btn,
.home-primary-btn,
.home-secondary-btn,
.reason-btn,
.menu-link,
.inline-chip,
.filter-chip,
.paywall-btn,
.pricing-btn,
.auth-cta,
.secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 14px;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast);
}

button:not(.reading-delete-btn),
.btn,
.home-primary-btn,
.auth-cta,
.pricing-btn,
.paywall-btn,
#btn-draw,
#btn-home-start-reading,
#btn-home-go-oracle,
#btn-complete-onboarding,
#buy-starter,
#buy-xl,
#buy-premium,
#buy-premium-annual {
}

button:not(.reading-delete-btn):hover,
.btn:hover,
.home-primary-btn:hover,
.auth-cta:hover,
.pricing-btn:hover,
.paywall-btn:hover,
#btn-draw:hover,
#btn-home-start-reading:hover,
#btn-home-go-oracle:hover,
#btn-complete-onboarding:hover,
#buy-starter:hover,
#buy-xl:hover,
#buy-premium:hover,
#buy-premium-annual:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(232, 212, 139, 0.2);
}

button:disabled,
.btn:disabled,
.home-primary-btn:disabled,
.home-secondary-btn:disabled,
.reason-btn:disabled,
.auth-cta:disabled,
.pricing-btn:disabled,
.paywall-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.home-secondary-btn,
.secondary-cta,
.filter-chip,
.inline-chip,
.menu-link,
#btn-share-seal,
#btn-favorite-current,
#btn-feedback-up,
#btn-feedback-down,
#btn-ask-again,
#btn-close-reading,
#btn-save-reading-action,
#btn-mark-reading-action-done,
#btn-enable-reading-followup,
#btn-create-share-page,
#btn-home-resume-reading,
#btn-home-open-archive,
#btn-home-open-rituals,
#btn-home-mark-action-applied,
#btn-home-edit-action,
#btn-home-share-last,
#btn-copy-referral-code,
#btn-share-referral-link,
#btn-home-save-ritual,
#back-from-history,
#back-from-credits,
#go-oracle-from-history,
#btn-open-credits-contextual,
#btn-open-annual-contextual,
#btn-close-share-drawer,
#btn-copy-share-url,
#btn-native-share-page,
#btn-question-suggest {
  color: var(--txt-1);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(232, 212, 139, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  font-weight: 650;
}

.home-secondary-btn:hover,
.secondary-cta:hover,
.filter-chip:hover,
.inline-chip:hover,
.menu-link:hover,
#btn-share-seal:hover,
#btn-favorite-current:hover,
#btn-feedback-up:hover,
#btn-feedback-down:hover,
#btn-ask-again:hover,
#btn-close-reading:hover,
#btn-save-reading-action:hover,
#btn-mark-reading-action-done:hover,
#btn-enable-reading-followup:hover,
#btn-create-share-page:hover,
#btn-home-resume-reading:hover,
#btn-home-open-archive:hover,
#btn-home-open-rituals:hover,
#btn-home-mark-action-applied:hover,
#btn-home-edit-action:hover,
#btn-home-share-last:hover,
#btn-copy-referral-code:hover,
#btn-share-referral-link:hover,
#btn-home-save-ritual:hover,
#back-from-history:hover,
#back-from-credits:hover,
#go-oracle-from-history:hover,
#btn-open-credits-contextual:hover,
#btn-open-annual-contextual:hover,
#btn-close-share-drawer:hover,
#btn-copy-share-url:hover,
#btn-native-share-page:hover,
#btn-question-suggest:hover {
  transform: translateY(-1px);
  border-color: rgba(232, 212, 139, 0.34);
  background: rgba(255, 255, 255, 0.055);
}

.is-selected,
[data-use-case].is-selected,
[data-ritual-frequency].is-selected,
[data-home-ritual].is-selected {
  color: #15181f !important;
  background:
    linear-gradient(180deg, #f7eebf 0%, #ead48f 45%, #cda85b 100%) !important;
  border-color: transparent !important;
  box-shadow:
    0 12px 38px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.14) inset !important;
}

#btn-favorite-current.is-fav {
  border-color: rgba(232, 212, 139, 0.42);
  color: var(--gold-0);
  background: rgba(232, 212, 139, 0.09);
}

#btn-feedback-up.fb-up {
  color: #081b13;
  background: linear-gradient(180deg, #7ee3b1 0%, #4bc98c 100%);
  border-color: transparent;
}

#btn-feedback-down.fb-down {
  color: #200c11;
  background: linear-gradient(180deg, #ffb0ba 0%, #ff7384 100%);
  border-color: transparent;
}

.btn-pending {
  position: relative;
  overflow: hidden;
}

.btn-pending::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 28%,
      rgba(255, 255, 255, 0.18) 52%,
      transparent 74%
    );
  transform: translateX(-100%);
  animation: sheen 1.1s linear infinite;
}

@keyframes sheen {
  to { transform: translateX(120%); }
}

.inline-actions,
.action-row,
.cta-row,
.chip-row,
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Top bars / navigation ---------- */

.topbar,
.home-topbar,
.oracle-topbar,
.history-topbar,
.credits-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: clamp(18px, 2vw, 26px);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--gold-0);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(232, 212, 139, 0.12), rgba(232, 212, 139, 0.03));
  border: 1px solid rgba(232, 212, 139, 0.18);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
  font-size: 1.1rem;
}

.brand-copy {
  min-width: 0;
}

.brand-copy strong {
  display: block;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  color: var(--gold-0);
}

.brand-copy span {
  display: block;
  color: var(--txt-3);
  font-size: 0.84rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#credits-pill,
#credits-pill-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(232, 212, 139, 0.08);
  border: 1px solid rgba(232, 212, 139, 0.18);
  color: var(--gold-0);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

#credits-pill:hover,
#credits-pill-home:hover {
  border-color: rgba(232, 212, 139, 0.36);
  background: rgba(232, 212, 139, 0.11);
}

#btn-menu,
#btn-menu-home,
#btn-history,
#btn-history-home {
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 14px;
  color: var(--txt-1);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(232, 212, 139, 0.16);
}

#btn-menu:hover,
#btn-menu-home:hover,
#btn-history:hover,
#btn-history-home:hover {
  border-color: rgba(232, 212, 139, 0.3);
  background: rgba(255, 255, 255, 0.07);
}

#menu {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top, 0px) + 56px);
  right: var(--page-gutter);
  width: min(320px, calc(100vw - 2 * var(--page-gutter)));
  z-index: 60;
}

.menu-panel {
  padding: 12px;
}

.menu-panel .menu-link {
  width: 100%;
  justify-content: flex-start;
  margin-top: 8px;
}

.menu-panel .menu-link:first-child {
  margin-top: 0;
}

/* ---------- Loader / toast ---------- */

#global-loader {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(3, 5, 10, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#global-loader.hidden {
  display: none !important;
}

.loader-card {
  width: min(92vw, 380px);
  padding: 28px 24px;
  border-radius: 24px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(12, 17, 32, 0.94), rgba(8, 12, 23, 0.96));
  border: 1px solid rgba(232, 212, 139, 0.18);
  box-shadow: var(--shadow-2);
}

.loader-orbit {
  width: 78px;
  height: 78px;
  margin: 0 auto 18px;
  border-radius: 999px;
  border: 2px solid rgba(232, 212, 139, 0.18);
  border-top-color: rgba(232, 212, 139, 0.92);
  animation: spin 1.1s linear infinite;
  position: relative;
}

.loader-orbit::after {
  content: "✧";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold-0);
  font-size: 1.45rem;
}

#loader-msg {
  color: var(--txt-0);
  font-size: 1.02rem;
  font-weight: 700;
}

#loader-sub {
  color: var(--txt-3);
  margin-top: 8px;
  font-size: 0.92rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#hiramia-toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px);
  z-index: 140;
  min-width: 180px;
  max-width: min(92vw, 520px);
  padding: 14px 18px;
  border-radius: 14px;
  text-align: center;
  color: #171a21;
  background:
    linear-gradient(180deg, #f8efc8 0%, #e8d48b 50%, #c7a554 100%);
  box-shadow: var(--shadow-1);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  font-weight: 800;
}

#hiramia-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Auth ---------- */

#page-auth .hero-grid {
  align-items: center;
  min-height: calc(100vh - 60px);
}

.auth-copy {
  display: grid;
  gap: 18px;
}

.auth-copy h1 {
  max-width: 12ch;
}

.auth-copy p {
  max-width: 60ch;
  color: var(--txt-2);
}

.auth-highlights {
  display: grid;
  gap: 12px;
}

.auth-highlight {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(232, 212, 139, 0.08);
}

.auth-highlight strong {
  display: block;
  color: var(--txt-0);
  margin-bottom: 2px;
}

.auth-highlight span {
  color: var(--txt-3);
  display: block;
}

.auth-card {
  overflow: hidden;
}

.auth-card h2 {
  margin-bottom: 8px;
}

.auth-card .section-copy {
  margin-bottom: 18px;
}

.auth-actions {
  display: grid;
  gap: 12px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  color: var(--txt-3);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, transparent, rgba(232, 212, 139, 0.22), transparent);
}

#google-signin-btn,
#btn-login-facebook,
#btn-login-email,
#submit_google {
  width: 100%;
}

.auth-email-row {
  display: grid;
  gap: 10px;
}

#email-magic-input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
}

#email-magic-status {
  margin-top: 8px;
  color: var(--gold-1);
  font-size: 0.92rem;
}

.auth-legal {
  margin-top: 14px;
  color: var(--txt-3);
  font-size: 0.84rem;
  line-height: 1.6;
}

/* ---------- Onboarding ---------- */

#page-onboarding .page-stack {
  gap: 22px;
}

.onboarding-grid > *:first-child {
  grid-column: span 7;
}

.onboarding-grid > *:last-child {
  grid-column: span 5;
}

.choice-grid,
.ritual-grid,
.template-grid {
  display: grid;
  gap: 12px;
}

.choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ritual-grid,
.template-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-card,
.ritual-card,
.template-card {
  display: grid;
  gap: 8px;
  min-height: 124px;
  align-content: start;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(232, 212, 139, 0.12);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
  text-align: left;
}

.choice-card:hover,
.ritual-card:hover,
.template-card:hover {
  transform: translateY(-1px);
  border-color: rgba(232, 212, 139, 0.28);
  background: rgba(255, 255, 255, 0.05);
}

.choice-card strong,
.ritual-card strong,
.template-card strong {
  color: var(--txt-0);
  font-size: 0.98rem;
}

.choice-card span,
.ritual-card span,
.template-card span {
  color: var(--txt-3);
  font-size: 0.92rem;
  line-height: 1.55;
}

.form-stack {
  display: grid;
  gap: 14px;
}

.form-row {
  display: grid;
  gap: 10px;
}

.form-label {
  color: var(--txt-2);
  font-weight: 700;
  font-size: 0.94rem;
}

.form-input,
.form-select,
.form-textarea,
#onboarding-display-name {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
}

.form-textarea {
  min-height: 140px;
  padding-block: 14px;
}

.consent-list {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.consent-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--txt-2);
}

.consent-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--gold-2);
}

.onboarding-side-stack {
  display: grid;
  gap: 14px;
}

.onboarding-note {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(232, 212, 139, 0.05);
  border: 1px solid rgba(232, 212, 139, 0.14);
}

.onboarding-note strong {
  display: block;
  color: var(--gold-0);
  margin-bottom: 6px;
}

.onboarding-note span {
  color: var(--txt-3);
  display: block;
  line-height: 1.6;
}

/* ---------- Home ---------- */

#page-home .page-stack {
  gap: 20px;
}

#home-main-copy,
#welcome {
  max-width: 900px;
}

#page-home .hero-grid .section-card:first-child {
  min-height: 100%;
}

.dashboard-grid > .span-12 { grid-column: span 12; }
.dashboard-grid > .span-8 { grid-column: span 8; }
.dashboard-grid > .span-7 { grid-column: span 7; }
.dashboard-grid > .span-6 { grid-column: span 6; }
.dashboard-grid > .span-5 { grid-column: span 5; }
.dashboard-grid > .span-4 { grid-column: span 4; }
.dashboard-grid > .span-3 { grid-column: span 3; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stat-tile {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(232, 212, 139, 0.12);
}

.stat-tile strong,
#home-level-value,
#home-xp-value,
#home-streak-value {
  display: block;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  color: var(--gold-0);
  font-weight: 800;
}

.stat-tile span {
  color: var(--txt-3);
  font-size: 0.9rem;
}

.progress-wrap {
  display: grid;
  gap: 10px;
}

.progress-bar-shell {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  border: 1px solid rgba(232, 212, 139, 0.12);
}

.progress-bar-fill,
#home-progress-bar {
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #c59c4d 0%, #e8d48b 45%, #f7efc8 100%);
  box-shadow: 0 0 18px rgba(232, 212, 139, 0.22);
  width: 12%;
  transition: width 420ms ease;
}

#home-progress-copy {
  color: var(--txt-3);
  font-size: 0.92rem;
}

#home-badges-row,
#home-pill-theme,
#home-pill-streak,
#home-pill-level,
#oracle-home-theme-pill,
#oracle-home-action-pill,
#oracle-home-ritual-pill {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(232, 212, 139, 0.08);
  border: 1px solid rgba(232, 212, 139, 0.16);
  color: var(--gold-0);
  font-size: 0.86rem;
  font-weight: 700;
}

.outcome-card,
.resume-card,
.ritual-card-panel,
.referral-card,
.followup-card,
.context-paywall-card {
  display: grid;
  gap: 14px;
}

#home-resume-block,
#home-next-action,
#home-ritual-block,
#home-referral-code,
#oracle-paywall-copy,
#credits-context-copy {
  color: var(--txt-2);
  line-height: 1.7;
}

#home-referral-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  font-size: 1rem;
}

#home-followup-timeline {
  display: grid;
  gap: 12px;
}

.timeline-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(232, 212, 139, 0.08);
}

.timeline-bullet {
  min-width: 52px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-0);
  background: rgba(232, 212, 139, 0.08);
  border: 1px solid rgba(232, 212, 139, 0.16);
  font-weight: 800;
  font-size: 0.84rem;
}

.timeline-copy {
  display: grid;
  gap: 4px;
}

.timeline-copy strong {
  color: var(--txt-0);
  font-size: 0.96rem;
}

.timeline-copy span {
  color: var(--txt-3);
  line-height: 1.55;
}

#oracle-context-paywall {
  border-color: rgba(232, 212, 139, 0.22);
  background:
    linear-gradient(180deg, rgba(232, 212, 139, 0.05), rgba(232, 212, 139, 0.015)),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
}

/* ---------- Oracle ---------- */

#page-oracle .page-stack {
  gap: 20px;
}

.oracle-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
  gap: var(--section-gap);
}

.oracle-side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.oracle-main {
  display: grid;
  gap: 16px;
}

.oracle-composer {
  display: grid;
  gap: 14px;
}

#question {
  width: 100%;
  min-height: 128px;
  padding: 16px 18px;
  line-height: 1.6;
}

#question-hint {
  color: var(--warning);
  font-size: 0.92rem;
  display: none;
}

.question-examples,
.question-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.question-examples > *,
.question-templates > * {
  color: var(--txt-1);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(232, 212, 139, 0.14);
}

#intention {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(232, 212, 139, 0.05);
  border: 1px solid rgba(232, 212, 139, 0.14);
}

#intention-text {
  color: var(--gold-0);
  font-weight: 700;
  line-height: 1.55;
}

#cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.flip-card {
  position: relative;
  width: 100%;
  min-height: 320px;
  perspective: 1200px;
  cursor: pointer;
  animation: cardRise 480ms ease both;
}

@keyframes cardRise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.flip-card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 880ms cubic-bezier(.2, .8, .2, 1);
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: var(--shadow-0);
  border: 1px solid rgba(232, 212, 139, 0.18);
}

.flip-card-front {
  background:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(160deg, #15203a 0%, #0d1426 54%, #070c17 100%);
}

.flip-card-front::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 16px;
  border: 1px solid rgba(232, 212, 139, 0.2);
  opacity: 0.8;
}

.flip-card-front::after {
  content: "✧";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(232, 212, 139, 0.78);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  text-shadow: 0 0 24px rgba(232, 212, 139, 0.2);
}

.flip-card-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
    linear-gradient(180deg, #131d36 0%, #0b1223 100%);
  display: grid;
  grid-template-rows: auto 1fr;
}

.card-position-header {
  padding: 12px 12px 0;
  color: var(--gold-1);
  text-align: center;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.card-image-container {
  position: relative;
  padding: 12px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.card-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

#oracle-interpretation {
  padding: clamp(20px, 2.4vw, 30px);
}

#oracle-interpretation-body {
  color: var(--txt-1);
  line-height: 1.82;
  white-space: pre-wrap;
}

#oracle-actions,
#oracle-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

#oracle-summary-panel,
#oracle-next-action-panel,
#oracle-followup-panel,
#oracle-share-panel {
  display: grid;
  gap: 10px;
}

.reading-outcome-panel {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(232, 212, 139, 0.1);
}

.reading-outcome-panel strong {
  display: block;
  color: var(--gold-0);
  margin-bottom: 6px;
  font-size: 0.94rem;
}

.reading-outcome-panel p,
#oracle-summary-text,
#oracle-next-action-text,
#oracle-followup-copy,
#oracle-share-copy {
  color: var(--txt-2);
  line-height: 1.65;
}

/* ---------- Archives / history ---------- */

#page-history .history-grid {
  align-items: start;
}

.history-grid > *:first-child {
  position: sticky;
  top: 20px;
  align-self: start;
}

.archive-side-stack,
.archive-main-stack {
  display: grid;
  gap: 16px;
}

#history-search,
#history-filter-theme,
#history-filter-sort,
#history-filter-favorites {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
}

#history-list {
  display: grid;
  gap: 14px;
}

#history-empty,
#history-smart-empty {
  padding: 18px;
  border-radius: 18px;
  color: var(--txt-3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(232, 212, 139, 0.18);
}

#history-locked-hint {
  margin-top: 10px;
  color: var(--txt-3);
  font-size: 0.92rem;
}

.reading-card {
  overflow: hidden;
}

.reading-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.reading-card h3 {
  margin-bottom: 6px;
}

.reading-card small {
  color: var(--txt-3);
  display: block;
  margin-bottom: 8px;
}

.reading-delete-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.reading-delete-btn:hover {
  color: #fff;
  transform: translateY(-1px);
  background: rgba(255, 109, 122, 0.14);
  border-color: rgba(255, 109, 122, 0.28);
}

.reading-notes-full {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.reading-notes-paragraph {
  margin: 0;
  color: var(--txt-2);
  line-height: 1.74;
}

.locked-reading {
  padding: 18px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(232, 212, 139, 0.05), rgba(232, 212, 139, 0.015)),
    linear-gradient(180deg, rgba(17, 22, 37, 0.96), rgba(11, 15, 25, 0.96));
  border: 1px dashed rgba(232, 212, 139, 0.22);
  cursor: pointer;
}

.locked-reading:hover {
  border-color: rgba(232, 212, 139, 0.34);
}

.locked-title {
  color: var(--gold-0);
  font-weight: 800;
  margin-bottom: 4px;
}

.locked-sub {
  color: var(--txt-3);
}

.locked-cta {
  margin-top: 10px;
  color: var(--gold-1);
  font-weight: 700;
}

/* ---------- Credits / pricing ---------- */

#page-credits .credits-grid > .span-12 { grid-column: span 12; }
#page-credits .credits-grid > .span-8 { grid-column: span 8; }
#page-credits .credits-grid > .span-6 { grid-column: span 6; }
#page-credits .credits-grid > .span-4 { grid-column: span 4; }

.credit-hero {
  display: grid;
  gap: 12px;
}

.credit-balance {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.credit-pill {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(232, 212, 139, 0.08);
  border: 1px solid rgba(232, 212, 139, 0.16);
  color: var(--gold-0);
  font-weight: 800;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pricing-card {
  display: grid;
  gap: 14px;
  min-height: 100%;
}

.pricing-card.is-featured,
#annual-card {
  border-color: rgba(232, 212, 139, 0.28);
  box-shadow:
    0 26px 90px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(232, 212, 139, 0.08);
}

.pricing-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(232, 212, 139, 0.09);
  border: 1px solid rgba(232, 212, 139, 0.18);
  color: var(--gold-0);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--txt-0);
}

.pricing-price strong {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
}

.pricing-price span {
  color: var(--txt-3);
  font-size: 0.92rem;
}

.pricing-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pricing-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  color: var(--txt-2);
  line-height: 1.55;
}

.pricing-list li::before {
  content: "✧";
  color: var(--gold-1);
  display: inline-block;
}

#annual-anchor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-1);
  font-weight: 700;
}

/* ---------- Drawer de partage ---------- */

#share-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  background: rgba(2, 4, 8, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#share-drawer-overlay.open {
  display: block;
}

.share-drawer-sheet {
  position: absolute;
  right: 0;
  top: 0;
  width: min(520px, 100vw);
  height: 100%;
  padding: 20px;
  border-radius: 28px 0 0 28px;
  transform: translateX(100%);
  transition: transform 260ms ease;
  overflow-y: auto;
}

#share-drawer-overlay.open .share-drawer-sheet {
  transform: translateX(0);
}

.share-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.share-drawer-body {
  display: grid;
  gap: 14px;
}

.share-block {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(232, 212, 139, 0.1);
}

.share-block strong {
  color: var(--gold-0);
  font-size: 0.94rem;
}

#share-drawer-quote,
#share-drawer-url {
  color: var(--txt-2);
  line-height: 1.68;
  word-break: break-word;
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Modal feedback ---------- */

#feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(3, 5, 11, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.feedback-modal-card {
  width: min(92vw, 460px);
  padding: 24px;
}

.feedback-modal-head {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

#feedback-title {
  color: var(--txt-0);
}

.feedback-reasons {
  display: grid;
  gap: 10px;
}

.reason-btn {
  width: 100%;
  justify-content: flex-start;
  color: var(--txt-1);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(232, 212, 139, 0.14);
  font-weight: 700;
}

.reason-btn:hover {
  border-color: rgba(232, 212, 139, 0.32);
  background: rgba(255, 255, 255, 0.06);
}

.feedback-modal-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ---------- Helpers structurels si présents dans le HTML ---------- */

.stack-xs { display: grid; gap: 8px; }
.stack-sm { display: grid; gap: 12px; }
.stack-md { display: grid; gap: 16px; }
.stack-lg { display: grid; gap: 22px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.text-muted { color: var(--txt-3); }
.text-soft { color: var(--txt-2); }
.text-gold { color: var(--gold-1); }

.align-start { align-items: start; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ---------- États de pages par défaut si HTML minimal ---------- */

#page-auth .page-stack,
#page-onboarding .page-stack,
#page-home .page-stack,
#page-oracle .page-stack,
#page-history .page-stack,
#page-credits .page-stack {
  width: min(100%, var(--page-max));
  margin-inline: auto;
}

#page-auth .page-stack,
#page-onboarding .page-stack,
#page-home .page-stack,
#page-oracle .page-stack,
#page-history .page-stack,
#page-credits .page-stack {
  display: grid;
  gap: 20px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .hero-grid,
  .oracle-layout,
  .history-grid {
    grid-template-columns: 1fr;
  }

  .history-grid > *:first-child {
    position: static;
  }

  .onboarding-grid > *:first-child,
  .onboarding-grid > *:last-child,
  #page-credits .credits-grid > .span-8,
  #page-credits .credits-grid > .span-6,
  #page-credits .credits-grid > .span-4 {
    grid-column: span 12;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .dashboard-grid,
  .credits-grid,
  .onboarding-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid > *,
  .credits-grid > *,
  .onboarding-grid > * {
    grid-column: auto !important;
  }

  .choice-grid,
  .ritual-grid,
  .template-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .pricing-grid,
  .stat-grid {
    grid-template-columns: 1fr;
  }

  #cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar,
  .home-topbar,
  .oracle-topbar,
  .history-topbar,
  .credits-topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  :root {
    --page-gutter: 14px;
    --section-gap: 14px;
  }

  .page {
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  h1 {
    font-size: clamp(1.85rem, 10vw, 2.7rem);
  }

  h2 {
    font-size: clamp(1.2rem, 6.8vw, 1.55rem);
  }

  .section-card,
  .dashboard-card,
  .oracle-panel,
  .surface-card,
  .glass-card,
  .auth-card,
  .pricing-card,
  .feedback-modal-card {
    padding: 16px;
    border-radius: 20px;
  }

  .share-drawer-sheet {
    width: 100vw;
    border-radius: 24px 24px 0 0;
    height: auto;
    max-height: 88vh;
    top: auto;
    bottom: 0;
    transform: translateY(100%);
    right: 0;
  }

  #share-drawer-overlay.open .share-drawer-sheet {
    transform: translateY(0);
  }

  #cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .flip-card {
    min-height: 250px;
  }

  .card-position-header {
    font-size: 0.78rem;
    padding: 10px 10px 0;
  }

  .reading-card-head {
    gap: 10px;
  }

  .reading-delete-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .dashboard-pill,
  #credits-pill,
  #credits-pill-home {
    font-size: 0.82rem;
  }

  button,
  .btn,
  .home-primary-btn,
  .home-secondary-btn,
  .reason-btn,
  .menu-link,
  .inline-chip,
  .filter-chip,
  .paywall-btn,
  .pricing-btn,
  .auth-cta,
  .secondary-cta {
    min-height: 46px;
    padding-inline: 14px;
  }
}

@media (max-width: 460px) {
  #cards {
    grid-template-columns: 1fr;
  }

  .flip-card {
    min-height: 360px;
  }

  .brand-copy span {
    display: none;
  }

  .topbar-actions {
    gap: 8px;
  }

  #btn-menu,
  #btn-menu-home,
  #btn-history,
  #btn-history-home {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }
}

/* ---------- Motion safe ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .page {
    opacity: 1 !important;
    transform: none !important;
  }
}