:root,
[data-theme="dark"] {
  --deep: #05020F;
  --deep-2: #0c071c;
  --gold: #C9A84C;
  --gold-light: #E8CF88;
  --gold-dim: #7A5F28;
  --cream: #F5EDD8;
  --violet: #2D1870;
  --muted: #9080A8;
  --card: rgba(45, 24, 112, .28);
  --stroke: rgba(201, 168, 76, .28);
  --card-grad: linear-gradient(160deg, rgba(54, 30, 132, .58), rgba(10, 5, 30, .90));
  --input-bg: rgba(10, 5, 28, .85);
  --input-border: rgba(107, 79, 160, .35);
  --nav-bg: rgba(5, 2, 15, .78);
  --sheet-scrim: rgba(0, 0, 0, .42);
  --btn-ink: #05020F;
  --avatar-bg: rgba(45, 24, 112, .4);
  --banner-bg: linear-gradient(135deg, rgba(45, 24, 112, .35), rgba(12, 6, 32, .45));
  --pause-bg: linear-gradient(160deg, rgba(45, 24, 112, .55), rgba(12, 6, 32, .7));
  --wait-bg: linear-gradient(135deg, rgba(45, 24, 112, .4), rgba(12, 6, 32, .5));
  --wait-err-bg: linear-gradient(135deg, rgba(80, 24, 40, .35), rgba(12, 6, 32, .5));
  --wait-err-border: rgba(200, 120, 120, .35);
  --ia-bot-bg: rgba(45, 24, 112, .22);
  --pdf-scrim: rgba(5, 2, 15, .78);
  --acct-line: rgba(107, 79, 160, .22);
  --acct-line-soft: rgba(107, 79, 160, .12);
  --auto-bg: rgba(8, 4, 24, 0.98);
  --auto-hover: rgba(45, 24, 112, .5);
  --auto-shadow: 0 8px 32px rgba(0, 0, 0, .6);
  --natal-frame-bg: rgba(5, 2, 15, .55);
  --screen-edge: rgba(201, 168, 76, .12);
  --theme-meta: #05020F;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --nav-h: calc(68px + var(--safe-bot));
}

[data-theme="light"] {
  --deep: #F4EFE4;
  --deep-2: #EBE3D4;
  --gold: #A8842E;
  --gold-light: #8F6F22;
  --gold-dim: #C4A45A;
  --cream: #1C1724;
  --violet: #D9CFBE;
  --muted: #6A6174;
  --card: rgba(255, 252, 246, .78);
  --stroke: rgba(168, 132, 46, .32);
  --card-grad: linear-gradient(160deg, rgba(255, 253, 248, .99), rgba(222, 209, 184, .96));
  --input-bg: rgba(255, 252, 246, .95);
  --input-border: rgba(168, 132, 46, .28);
  --nav-bg: rgba(244, 239, 228, .9);
  --sheet-scrim: rgba(28, 23, 36, .28);
  --btn-ink: #1C1724;
  --avatar-bg: rgba(255, 252, 246, .85);
  --banner-bg: linear-gradient(135deg, rgba(255, 252, 246, .9), rgba(232, 220, 190, .75));
  --pause-bg: linear-gradient(160deg, rgba(255, 248, 232, .95), rgba(236, 224, 200, .88));
  --wait-bg: linear-gradient(135deg, rgba(255, 250, 236, .95), rgba(236, 226, 204, .85));
  --wait-err-bg: linear-gradient(135deg, rgba(250, 230, 228, .95), rgba(236, 220, 210, .85));
  --wait-err-border: rgba(160, 80, 70, .35);
  --ia-bot-bg: rgba(232, 220, 190, .45);
  --pdf-scrim: rgba(244, 239, 228, .88);
  --acct-line: rgba(168, 132, 46, .2);
  --acct-line-soft: rgba(168, 132, 46, .12);
  --auto-bg: rgba(255, 252, 246, .98);
  --auto-hover: rgba(232, 220, 190, .65);
  --auto-shadow: 0 8px 28px rgba(28, 23, 36, .12);
  --natal-frame-bg: rgba(255, 252, 246, .7);
  --screen-edge: rgba(168, 132, 46, .18);
  --theme-meta: #F4EFE4;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
@supports (height: 100dvh) { html, body { height: 100dvh; } }
body {
  background: var(--deep);
  color: var(--cream);
  font-family: 'Cormorant Garamond', Georgia, serif;
  overflow: hidden;
  transition: background-color .25s ease, color .2s ease;
}
#app { height: 100%; }
.hidden { display: none !important; }

.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: var(--deep);
}
.sky-nebula {
  position: absolute; inset: -12%;
  background:
    radial-gradient(ellipse 70% 45% at 18% 82%, rgba(72, 28, 130, .38), transparent 62%),
    radial-gradient(ellipse 55% 40% at 88% 12%, rgba(28, 52, 140, .28), transparent 58%),
    radial-gradient(ellipse 40% 30% at 52% 38%, rgba(90, 40, 110, .16), transparent 70%),
    radial-gradient(ellipse 30% 22% at 70% 70%, rgba(201, 168, 76, .07), transparent 72%);
  animation: nebula-breathe 18s ease-in-out infinite;
}
[data-theme="light"] .sky-nebula {
  background:
    radial-gradient(ellipse 70% 45% at 18% 82%, rgba(201, 168, 76, .14), transparent 62%),
    radial-gradient(ellipse 55% 40% at 88% 12%, rgba(180, 160, 120, .12), transparent 58%),
    radial-gradient(ellipse 40% 30% at 52% 38%, rgba(212, 190, 150, .1), transparent 70%),
    radial-gradient(ellipse 30% 22% at 70% 70%, rgba(201, 168, 76, .08), transparent 72%);
  opacity: .9;
}
.sky-dust {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12px 18px, rgba(245,237,216,.28), transparent),
    radial-gradient(1px 1px at 48px 92px, rgba(245,237,216,.16), transparent),
    radial-gradient(1.2px 1.2px at 110px 44px, rgba(232,207,136,.22), transparent),
    radial-gradient(1px 1px at 170px 130px, rgba(245,237,216,.14), transparent),
    radial-gradient(1px 1px at 210px 22px, rgba(245,237,216,.2), transparent),
    radial-gradient(1.4px 1.4px at 258px 168px, rgba(232,207,136,.18), transparent),
    radial-gradient(1px 1px at 40px 200px, rgba(245,237,216,.12), transparent),
    radial-gradient(1px 1px at 300px 80px, rgba(245,237,216,.18), transparent);
  background-size: 320px 280px, 360px 310px, 280px 300px, 400px 340px, 340px 260px, 380px 320px, 300px 360px, 420px 290px;
  opacity: .85;
}
[data-theme="light"] .sky-dust {
  background-image:
    radial-gradient(1px 1px at 12px 18px, rgba(168,132,46,.22), transparent),
    radial-gradient(1px 1px at 48px 92px, rgba(140,110,50,.12), transparent),
    radial-gradient(1.2px 1.2px at 110px 44px, rgba(184,148,58,.18), transparent),
    radial-gradient(1px 1px at 170px 130px, rgba(140,110,50,.1), transparent),
    radial-gradient(1px 1px at 210px 22px, rgba(168,132,46,.16), transparent),
    radial-gradient(1.4px 1.4px at 258px 168px, rgba(184,148,58,.14), transparent),
    radial-gradient(1px 1px at 40px 200px, rgba(140,110,50,.08), transparent),
    radial-gradient(1px 1px at 300px 80px, rgba(168,132,46,.14), transparent);
  opacity: .55;
}
.sky-stars { position: absolute; inset: 0; }
.sky-star {
  position: absolute;
  display: block;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #F5EDD8;
  opacity: .55;
  animation: twinkle 3.6s ease-in-out infinite;
}
[data-theme="light"] .sky-star {
  background: #A8842E;
  opacity: .35;
}
.sky-star.sm { width: 1px; height: 1px; opacity: .35; }
.sky-star.md { width: 2px; height: 2px; box-shadow: 0 0 4px rgba(245,237,216,.45); }
.sky-star.lg {
  width: 3px; height: 3px;
  box-shadow: 0 0 8px rgba(245,237,216,.75), 0 0 16px rgba(232,207,136,.28);
}
[data-theme="light"] .sky-star.md { box-shadow: 0 0 4px rgba(168,132,46,.35); }
[data-theme="light"] .sky-star.lg {
  box-shadow: 0 0 6px rgba(168,132,46,.4), 0 0 12px rgba(184,148,58,.18);
}
.sky-star.gold {
  background: #E8CF88;
  box-shadow: 0 0 7px rgba(201,168,76,.8), 0 0 18px rgba(201,168,76,.28);
}
[data-theme="light"] .sky-star.gold {
  background: #A8842E;
  box-shadow: 0 0 5px rgba(168,132,46,.55), 0 0 12px rgba(184,148,58,.2);
}
@keyframes twinkle {
  0%, 100% { opacity: .18; transform: scale(.7); }
  40% { opacity: .95; transform: scale(1); }
  70% { opacity: .4; transform: scale(.85); }
}
@keyframes nebula-breathe {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 1; }
  50% { transform: scale(1.06) translate(1.2%, -1%); opacity: .88; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-star, .sky-nebula, .star { animation: none !important; }
  .sky-star { opacity: .55; }
}

.screen {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column;
}
.scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(18px + var(--safe-top)) 20px calc(24px + var(--nav-h));
}
.scroll.noshift { padding-bottom: calc(28px + var(--safe-bot)); }
/* Centrage par marges auto : si le contenu dépasse, le haut reste atteignable (contrairement à justify-content:center). */
.scroll.auth-scroll { min-height: 0; }
.scroll.auth-scroll > :first-child { margin-top: auto; }
.scroll.auth-scroll > :last-child { margin-bottom: auto; }

.brand { text-align: center; padding-top: 8px; }
.star {
  display: block; color: var(--gold); font-size: 1.6rem;
  text-shadow: 0 0 24px rgba(201,168,76,.5);
  animation: pulse 3s ease-in-out infinite;
}
[data-theme="light"] .star { text-shadow: 0 0 16px rgba(168,132,46,.28); }
@keyframes pulse { 50% { transform: scale(1.08); opacity: 1; } 0%,100% { opacity: .75; } }
h1 {
  font-family: 'Cinzel', serif; font-weight: 400; letter-spacing: .08em;
  font-size: 1.55rem; margin: .4rem 0 .2rem;
  text-shadow: 0 0 28px rgba(201,168,76,.18);
}
[data-theme="light"] h1 { text-shadow: none; }
h1 span { color: var(--gold-light); }
.brand-oneline { white-space: nowrap; font-size: clamp(1.15rem, 6vw, 1.55rem); }
.brand-oneline .star { display: inline-block; font-size: 1.1rem; vertical-align: .08em; }
.lede { font-style: italic; color: var(--muted); line-height: 1.55; }

.label {
  font-family: 'Inter', sans-serif; font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); opacity: .8;
}
.kicker {
  font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); text-align: center;
}

.card {
  background: var(--card-grad);
  border: 1px solid color-mix(in srgb, var(--gold) 48%, var(--stroke)); border-radius: 8px;
  padding: 1.15rem 1.1rem; position: relative;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.card::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.card h2 {
  font-family: 'Cinzel', serif; font-size: 1.02rem; font-weight: 400;
  letter-spacing: .04em; margin: .35rem 0 .45rem;
}
.card p { line-height: 1.55; color: var(--cream); font-size: 1.05rem; }
.card p.muted { color: var(--muted); font-style: italic; font-size: .98rem; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.lang-field { margin-bottom: .15rem; }
.lang-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.voice-choose {
  margin-bottom: 10px;
}
.voice-choose-label {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .55rem;
}
.voice-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.voice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  text-align: left;
  padding: .7rem .8rem;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--cream);
  border-radius: 1px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.voice-card:hover {
  border-color: rgba(201, 168, 76, .45);
}
.voice-card.active {
  border-color: rgba(201, 168, 76, .65);
  background: rgba(201, 168, 76, .16);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, .2);
}
[data-theme="light"] .voice-card.active {
  border-color: rgba(168, 132, 46, .55);
  background: rgba(168, 132, 46, .12);
  box-shadow: inset 0 0 0 1px rgba(168, 132, 46, .18);
}
.voice-card .voice-name {
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--cream);
}
.voice-card.active .voice-name {
  color: var(--gold-light);
}
[data-theme="light"] .voice-card.active .voice-name {
  color: var(--gold);
}
.voice-card .voice-trait {
  font-size: .88rem;
  line-height: 1.3;
  color: var(--muted);
  font-style: italic;
}
#acct-voice-block #acct-tts-preview {
  width: 100%;
  margin-top: 2px;
}
[dir="rtl"] .voice-card {
  align-items: flex-end;
  text-align: right;
}
[dir="rtl"] .lang-select {
  background-position: 18px calc(50% - 3px), 12px calc(50% - 3px);
  padding-right: 1rem;
  padding-left: 2.2rem;
}
.lang-warn {
  margin: .15rem 0 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--gold-light, #F3DD9E);
  font-style: italic;
}
[data-theme="light"] .lang-warn { color: var(--gold, #A8842E); }
.input {
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: 1px; padding: .85rem 1rem; color: var(--cream);
  font-family: 'Cormorant Garamond', serif; font-size: 1.12rem; outline: none; width: 100%;
}
.input:focus { border-color: rgba(201,168,76,.55); }
.textarea {
  min-height: 88px; resize: vertical; line-height: 1.45;
}

.btn {
  width: 100%; border: none; cursor: pointer;
  font-family: 'Cinzel', serif; letter-spacing: .14em; text-transform: uppercase;
  font-size: .72rem; font-weight: 600; padding: 1.05rem 1.2rem;
  background: linear-gradient(135deg, var(--gold), var(--gold-light) 50%, var(--gold));
  color: var(--btn-ink); border-radius: 1px;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: wait; transform: none; }
.input:disabled { opacity: .65; cursor: not-allowed; }
.btn.ghost {
  background: transparent; color: var(--gold);
  border: 1px solid rgba(201,168,76,.4);
}
.btn.small { padding: .7rem 1rem; font-size: .66rem; width: auto; }
a.btn { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
.muted { color: var(--muted); font-style: italic; font-size: .92rem; line-height: 1.5; }
.link {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-family: inherit; font-style: italic; font-size: .95rem; text-align: center;
}

.hero-month { text-align: center; padding: 8px 0 18px; }
.hero-month .month {
  font-family: 'Cinzel', serif; font-size: 1.35rem; letter-spacing: .05em;
  line-height: 1.35; text-shadow: 0 0 32px rgba(201,168,76,.16);
  max-width: 22rem; margin: 0 auto;
}
[data-theme="light"] .hero-month .month { text-shadow: none; }
.de-ta-vie, .de-ce-mois {
  display: inline;
  font-weight: 600;
  letter-spacing: .14em;
  font-size: 1.08em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.card h2 .de-ta-vie,
.card h2 .de-ce-mois,
.pdf-body h2 .de-ta-vie,
.pdf-body h2 .de-ce-mois {
  font-size: 1.06em;
}
.quote {
  font-style: italic; color: var(--gold-light); line-height: 1.5;
  text-align: center; font-size: 1.12rem; padding: 0 8px;
}

.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.pill {
  font-family: 'Inter', sans-serif; font-size: .68rem; letter-spacing: .08em;
  color: var(--gold-light); border: 1px solid var(--stroke);
  padding: .35rem .6rem; display: inline-block;
}

.transit { display: flex; gap: 12px; align-items: flex-start; }
.transit .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  margin-top: 8px; flex-shrink: 0; box-shadow: 0 0 10px rgba(201,168,76,.6);
}

.lock {
  opacity: .55; position: relative;
}
.pause-banner {
  border-color: rgba(201,168,76,.45);
  background: var(--pause-bg);
}
.pause-banner h2 { font-size: 1.15rem; }
.natal-wait {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(201, 168, 76, .28);
  background: var(--wait-bg);
}
.natal-wait > p:first-child {
  margin: 0;
  color: var(--gold-light);
  font-style: italic;
  line-height: 1.5;
}
.natal-wait > p.muted {
  margin: 8px 0 0;
}
.natal-wait-error {
  border-color: var(--wait-err-border);
  background: var(--wait-err-bg);
}
.natal-wait-error > p:first-child {
  color: var(--cream);
}
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--nav-bg); border-top: 1px solid var(--stroke);
  padding: 6px 4px var(--safe-bot);
  backdrop-filter: blur(12px);
}
.nav button {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .55rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 8px 2px 10px; display: flex;
  flex-direction: column; align-items: center; gap: 4px;
}
.nav button .ic { font-size: 1.05rem; color: var(--gold-dim); }
.nav button.active { color: var(--gold-light); }
.nav button.active .ic { color: var(--gold-light); }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + var(--safe-top)) 20px 8px;
  position: relative; z-index: 1;
  gap: 10px;
}
.topbar-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.theme-chip {
  font-family: 'Inter', sans-serif;
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--stroke);
  padding: .38rem .55rem;
  cursor: pointer;
  border-radius: 1px;
  line-height: 1;
  opacity: .85;
}
.theme-chip:hover { opacity: 1; border-color: var(--gold); }
.free-quota-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 20px 4px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(201, 168, 76, .22);
  background: var(--banner-bg);
  backdrop-filter: blur(8px);
}
.free-quota-banner .free-quota-star {
  color: var(--gold);
  font-size: .85rem;
  line-height: 1.45;
  text-shadow: 0 0 12px rgba(201, 168, 76, .4);
  flex-shrink: 0;
}
.free-quota-banner p {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .98rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--cream);
  opacity: .92;
}
.free-quota-banner .free-quota-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.free-quota-banner .free-quota-upgrade {
  font-size: .72rem;
  padding: .55rem 1rem;
}
@media (min-width: 520px) {
  .free-quota-banner { max-width: 480px; margin-left: auto; margin-right: auto; }
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold-light);
  display: grid; place-items: center; font-family: 'Cinzel', serif; font-size: .85rem;
  background: var(--avatar-bg); cursor: pointer;
}

.sheet {
  position: fixed; inset: 0; z-index: 20; background: var(--sheet-scrim);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet .panel {
  width: 100%; max-width: 480px;
  background: var(--deep-2); border-top: 1px solid var(--stroke);
  padding: 18px 20px calc(24px + var(--safe-bot));
  max-height: min(92vh, 720px); overflow: auto;
}
.sheet h3 { font-family: 'Cinzel', serif; font-weight: 400; margin-bottom: 4px; letter-spacing: .06em; }

.account-panel { gap: 14px; display:flex; flex-direction:column; }
.acct-block {
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--acct-line);
}
.acct-block:last-of-type { border-bottom: none; }
.acct-block .label { margin-bottom: .45rem; }
.acct-value {
  font-family: 'Cinzel', serif; font-size: 1.05rem; letter-spacing: .04em;
  color: var(--cream); margin: 0 0 .2rem; line-height: 1.35;
}
.acct-email {
  font-family: 'Cormorant Garamond', serif; font-size: 1.05rem;
  color: var(--muted); font-style: italic; margin: 0; word-break: break-all;
}
.acct-hint { margin: 0 0 10px; line-height: 1.55; }
.acct-rows {
  display: flex; flex-direction: column; gap: 0;
  border-bottom: 1px solid var(--acct-line);
  padding-bottom: 4px;
}
.acct-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--acct-line-soft);
}
.acct-row:last-child { border-bottom: none; }
.acct-row .label { flex-shrink: 0; }
.acct-row-val {
  text-align: right; color: var(--cream); font-size: .98rem; line-height: 1.4;
  font-family: 'Cormorant Garamond', serif;
}

.theme-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--stroke);
  border-radius: 1px;
  overflow: hidden;
}
.theme-toggle button {
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .7rem .5rem;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.theme-toggle button + button {
  border-left: 1px solid var(--stroke);
}
.theme-toggle button.active {
  background: rgba(201, 168, 76, .18);
  color: var(--gold-light);
}
[data-theme="light"] .theme-toggle button.active {
  background: rgba(168, 132, 46, .16);
  color: var(--gold);
}

.install-steps { color: var(--muted); font-style: italic; line-height: 1.6; font-size: 1.02rem; }
.install-steps b { color: var(--cream); font-style: normal; font-family: 'Cinzel', serif; font-weight: 400; }
.install-steps-sm { font-size: .92rem; line-height: 1.55; }
.install-pc-alt { opacity: .85; padding-top: .9rem; padding-bottom: .9rem; }
.install-pc-alt .label { font-size: .7rem; }

.vault-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  cursor: pointer;
}
.vault-item small { font-family: 'Inter', sans-serif; font-size: .65rem; color: var(--muted); letter-spacing: .08em; }

.q { margin-top: 8px; }
.saved { font-size: .85rem; color: var(--gold); font-style: italic; min-height: 1.1em; }

/* Inline manuscript (same tab) — no separate full-screen reader page. */
.pdf-view,
.ms-inline {
  position: relative;
  inset: auto;
  z-index: auto;
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  border: 1px solid var(--stroke);
  border-radius: 2px;
  background: var(--card-grad);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.pdf-view header,
.ms-inline-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(0, 0, 0, .18);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
html[data-theme="light"] .pdf-view header,
html[data-theme="light"] .ms-inline-bar {
  background: rgba(255, 252, 246, .55);
}
.pdf-view header .pdf-back,
.ms-inline-bar .pdf-back {
  background: transparent;
  border: 1px solid var(--stroke);
  color: var(--gold);
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  letter-spacing: .04em;
  cursor: pointer;
  padding: .45rem .75rem;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  pointer-events: auto;
}
.pdf-view header .pdf-back:hover,
.pdf-view header .pdf-back:focus-visible,
.ms-inline-bar .pdf-back:hover,
.ms-inline-bar .pdf-back:focus-visible {
  border-color: rgba(201,168,76,.7);
  background: rgba(201,168,76,.22);
}
.pdf-view header .theme-chip {
  margin-left: auto;
  flex-shrink: 0;
}

/* VIE — page-count hierarchy */
.pages-badge {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  margin: .55rem 0 .35rem;
  padding: .45rem .85rem .4rem;
  border-radius: 2px;
  border: 1px solid rgba(201,168,76,.45);
  background: linear-gradient(135deg, rgba(201,168,76,.16), transparent 70%);
  line-height: 1;
}
.pages-badge-num {
  font-family: 'Cinzel', serif;
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--gold-light);
}
.pages-badge-unit {
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pages-badge--natal .pages-badge-num { font-size: 1.55rem; }
.pages-badge--ultime {
  border-color: rgba(201,168,76,.75);
  background: linear-gradient(135deg, rgba(201,168,76,.28), rgba(201,168,76,.06) 65%);
  box-shadow: 0 0 24px rgba(201,168,76,.12);
}
.pages-badge--ultime .pages-badge-num {
  font-size: 2.35rem;
  color: var(--gold);
}
.card.lock .pages-badge { opacity: .92; }
.ia-quota-line {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--gold);
  margin: .35rem 0 0;
}
.ia-quota-line.is-low { color: #e8b45a; }
.ia-quota-line.is-out { color: #d4a574; }
.ia-upgrade-cta { margin-top: .65rem; }

/* Full-manuscript Écouter — bar just below the iframe (end of reading area). */
.ms-tts-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: .9rem 0 1.1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(201,168,76,.35);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(201,168,76,.12), transparent 55%),
    rgba(12, 7, 28, .55);
}
html[data-theme="light"] .ms-tts-footer {
  background:
    linear-gradient(135deg, rgba(168,132,46,.12), transparent 55%),
    rgba(255, 252, 246, .72);
  border-color: rgba(168,132,46,.35);
}
.ms-tts-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  max-width: 100%;
}
.ms-tts-btn {
  background: linear-gradient(135deg, rgba(201,168,76,.22), rgba(201,168,76,.08));
  border: 1px solid rgba(201,168,76,.65);
  color: var(--gold-light);
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: .65rem 1.25rem;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  pointer-events: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.ms-tts-btn:hover,
.ms-tts-btn:focus-visible {
  border-color: rgba(201,168,76,.9);
  background: linear-gradient(135deg, rgba(201,168,76,.32), rgba(201,168,76,.14));
  filter: brightness(1.05);
}
.ms-tts-btn.is-loading {
  opacity: .9;
  cursor: wait;
  border-color: rgba(201,168,76,.55);
  text-transform: none;
  letter-spacing: .03em;
  font-weight: 500;
  font-size: .85rem;
}
.ms-tts-btn.is-playing,
.ms-tts-btn.is-paused {
  border-color: rgba(201,168,76,.85);
  background: rgba(201,168,76,.28);
}
.ms-tts-btn.ms-tts-lock {
  color: var(--muted);
  border-style: dashed;
  border-color: rgba(201,168,76,.4);
  background: transparent;
  font-size: .8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: .03em;
  box-shadow: none;
  max-width: min(92vw, 420px);
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.ms-tts-trial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  max-width: 100%;
  text-align: center;
}
.ms-tts-trial-note {
  margin: 0;
  color: var(--gold-light);
  font-size: .85rem;
  line-height: 1.4;
}
html[data-theme="light"] .ms-tts-trial-note { color: #5c4818; }
.ms-tts-trial .ms-tts-trial-cta { margin-top: 0; }
.ms-tts-trial-sub { margin: 0; font-size: .8rem; line-height: 1.4; }
.ms-tts-stop {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(201,168,76,.55);
  background: rgba(201,168,76,.1);
  color: var(--gold-light);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.ms-tts-stop:hover,
.ms-tts-stop:focus-visible {
  border-color: rgba(201,168,76,.85);
  background: rgba(201,168,76,.22);
}
html[data-theme="light"] .ms-tts-btn {
  color: #5c4818;
  background: linear-gradient(135deg, rgba(168,132,46,.2), rgba(255,252,246,.85));
  box-shadow: 0 4px 14px rgba(92,72,24,.12);
}
html[data-theme="light"] .ms-tts-stop {
  background: rgba(255,255,255,.7);
  color: #5c4818;
}

/* Plein écran = uniquement le cadre du manuscrit (pas toute la page lecteur). */
html.pdf-fs-active,
html.pdf-fs-active body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.natal-frame-wrap {
  position: relative;
  width: 100%;
  margin-top: .75rem;
  overflow: visible;
}
.natal-frame-wrap .natal-frame {
  display: block;
  width: 100%;
  min-height: 55vh;
  height: 62vh;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: var(--natal-frame-bg);
  margin: 0;
}
.ms-fs-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,.65);
  background: rgba(8, 5, 22, .88);
  color: var(--gold-light);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
html[data-theme="light"] .ms-fs-btn {
  background: rgba(255, 252, 246, .94);
  color: #5c4818;
  border-color: rgba(168,132,46,.55);
}
.ms-fs-btn:hover,
.ms-fs-btn:focus-visible {
  border-color: rgba(201,168,76,.9);
  filter: brightness(1.08);
}
.ms-fs-btn[aria-pressed="true"] {
  background: rgba(201,168,76,.28);
}
.natal-frame-wrap.is-ms-fs,
.natal-frame-wrap:fullscreen,
.natal-frame-wrap:-webkit-full-screen {
  position: fixed;
  inset: 0;
  z-index: 90;
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  background: var(--deep);
  display: flex;
  flex-direction: column;
}
.natal-frame-wrap.is-ms-fs .natal-frame,
.natal-frame-wrap:fullscreen .natal-frame,
.natal-frame-wrap:-webkit-full-screen .natal-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
}
.natal-frame-wrap.is-ms-fs .ms-fs-btn,
.natal-frame-wrap:fullscreen .ms-fs-btn,
.natal-frame-wrap:-webkit-full-screen .ms-fs-btn {
  right: calc(14px + var(--safe-bot, 0px));
  bottom: calc(14px + var(--safe-bot, 0px));
  z-index: 95;
}
.pdf-view header .kicker {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pdf-body,
.ms-inline-body {
  flex: 1;
  overflow: visible;
  padding: 16px 14px 20px;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}
.pdf-body h2 { font-family: 'Cinzel', serif; font-weight: 400; text-align: center; margin: 8px 0 16px; }
.pdf-body p { line-height: 1.7; margin-bottom: 1rem; font-size: 1.12rem; }
.manuscript-protect {
  -webkit-user-select: text;
  user-select: text;
}
.manuscript-protect .reader-ia,
.manuscript-protect .reader-ia * {
  -webkit-user-select: text;
  user-select: text;
}

.ms-sel-bar {
  position: fixed;
  left: 10px;
  right: 10px;
  top: 10px;
  z-index: 96;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.ms-sel-bar[hidden] { display: none !important; }
.natal-frame-wrap.is-ms-fs .ms-sel-bar,
.natal-frame-wrap:fullscreen .ms-sel-bar,
.natal-frame-wrap:-webkit-full-screen .ms-sel-bar {
  top: calc(12px + var(--safe-top, 0px));
  z-index: 100;
}
.ms-sel-btn {
  pointer-events: auto;
  max-width: 540px;
  width: 100%;
  min-height: 52px;
  padding: 1rem 1.25rem;
  border: 2px solid rgba(232, 201, 106, .95);
  border-radius: 12px;
  background: #E8C96A;
  color: #1a1230;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,252,245,.35) inset;
  text-align: center;
}
html[data-theme="light"] .ms-sel-btn {
  background: #2a1f55;
  color: #fff8e8;
  border-color: #1a1230;
  box-shadow: 0 10px 24px rgba(40,30,10,.22);
}
.ms-sel-btn:hover,
.ms-sel-btn:focus-visible {
  filter: brightness(1.06);
  border-color: #f0d88a;
}

.ia-dock { margin-top: 16px; }
.ia-panel { min-height: 52vh; }
.ia-chat { gap: 12px; }
.ia-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(52vh, 420px);
  min-height: 180px;
  overflow: auto;
  padding: 4px 2px;
  -webkit-overflow-scrolling: touch;
}
.ia-empty { margin: auto 0; text-align: center; padding: 1.5rem .5rem; }
.ia-bubble {
  padding: .75rem .9rem;
  border: 1px solid var(--stroke);
  font-size: 1.02rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.ia-bubble.me,
.ia-bubble-me { border-color: rgba(201,168,76,.45); color: var(--gold-light); align-self: flex-end; max-width: 92%; }
.ia-bubble.bot,
.ia-bubble-bot { background: var(--ia-bot-bg); align-self: flex-start; max-width: 92%; }
.ia-bubble-head {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.ia-bubble-me .ia-bubble-head { justify-content: flex-end; }
.ia-bubble-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(201,168,76,.25);
}
.ia-bubble-name {
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.ia-bubble-me .ia-bubble-name {
  color: var(--gold-light);
  letter-spacing: .1em;
}
.ia-bubble-body,
.ia-bubble-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.ia-speak {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .1rem 0 0;
  padding: .28rem .55rem;
  border: 1px solid rgba(201,168,76,.35);
  background: transparent;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .9;
  line-height: 1;
}
.ia-speak:hover,
.ia-speak:focus-visible {
  opacity: 1;
  border-color: var(--gold);
  color: var(--gold-light);
  outline: none;
}
.ia-speak[aria-pressed="true"],
.ia-speak.is-speaking {
  opacity: 1;
  border-color: rgba(201, 168, 76, .7);
  color: var(--gold-light);
  background: rgba(201,168,76,.12);
}
.ia-speak.is-loading {
  opacity: .75;
  cursor: wait;
  border-color: rgba(201, 168, 76, .45);
}
.ia-speak-ic { display: block; flex-shrink: 0; }
.ia-portrait {
  width: 88px;
  height: 88px;
  margin: 0 auto .35rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(201,168,76,.28), 0 8px 24px rgba(5, 2, 15, .35);
}
.ia-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.ia-portrait--sm {
  width: 52px;
  height: 52px;
  margin: 0;
  flex-shrink: 0;
}
.reader-ia-head {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.reader-ia-head .label { margin-bottom: .15rem; }
.ia-card .ia-portrait { margin-bottom: .5rem; }
.ia-compose { display: flex; flex-direction: column; gap: 10px; }
.ia-q-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.ia-q-row .input {
  flex: 1;
  min-width: 0;
}
.ia-mic {
  flex-shrink: 0;
  width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(201,168,76,.35);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  line-height: 1;
  transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
.ia-mic:hover,
.ia-mic:focus-visible {
  border-color: var(--gold);
  color: var(--gold-light);
  outline: none;
}
.ia-mic:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.ia-mic.is-listening,
.ia-mic[aria-pressed="true"] {
  color: var(--gold-light);
  border-color: rgba(201, 168, 76, .75);
  background: rgba(201,168,76,.14);
  animation: ia-mic-pulse 1.25s ease-in-out infinite;
}
.ia-mic-ic { display: block; }
@keyframes ia-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, .4); }
  50% { box-shadow: 0 0 0 7px rgba(201, 168, 76, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ia-mic.is-listening,
  .ia-mic[aria-pressed="true"] { animation: none; }
}

@media (min-width: 720px) {
  .screen { max-width: 480px; margin: 0 auto; border-left: 1px solid var(--screen-edge); border-right: 1px solid var(--screen-edge); }
  .nav, .topbar, .sheet .panel { max-width: 480px; left: 50%; transform: translateX(-50%); width: 100%; }
  .nav, .topbar { left: 50%; }
}

.gender-row {
  display: flex; flex-wrap: wrap; gap: .55rem .85rem;
  margin-top: .15rem;
}
.gender-opt {
  font-family: Inter, system-ui, sans-serif;
  font-size: .82rem;
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
}
.gender-opt input { accent-color: var(--gold); }

/* Autocomplete ville (Photon / OSM — même source que GENERATIONS) */
.autocomplete-wrap {
  position: relative;
  width: 100%;
}
.autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--auto-bg);
  border: 1px solid rgba(201,168,76,.35);
  border-radius: 2px;
  z-index: 40;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  box-shadow: var(--auto-shadow);
}
.autocomplete-dropdown.open { display: block; }
.autocomplete-item {
  padding: .65rem 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--cream);
  cursor: pointer;
  border-bottom: 1px solid rgba(201,168,76,.08);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.focused {
  background: var(--auto-hover);
}
.autocomplete-item .city-name {
  color: var(--cream);
  font-size: 1rem;
}
.autocomplete-item .city-country {
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  color: var(--muted);
  font-style: normal;
}
.autocomplete-loading,
.autocomplete-empty {
  padding: .65rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  color: var(--muted);
  font-style: italic;
}
.autocomplete-dropdown::-webkit-scrollbar { width: 4px; }
.autocomplete-dropdown::-webkit-scrollbar-track { background: transparent; }
.autocomplete-dropdown::-webkit-scrollbar-thumb { background: rgba(201,168,76,.3); border-radius: 2px; }

/* Attente génération — rosace sacrée + livre 3D + cosmos (craft pages de vente) */
.natal-cosmos {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 12px;
  padding: 32px 18px 24px;
  border: 1px solid rgba(201,168,76,.32);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 18%, rgba(55,32,110,.55), transparent 58%),
    radial-gradient(ellipse 70% 50% at 18% 78%, rgba(201,168,76,.1), transparent 55%),
    linear-gradient(165deg, #0c0720 0%, #050210 48%, #0a0618 100%);
  text-align: center;
  min-height: 340px;
  box-shadow:
    inset 0 1px 0 rgba(255,252,245,.06),
    0 0 40px rgba(45,24,112,.25);
}
.natal-cosmos-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.natal-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: .9;
}
.natal-nebula-a {
  width: 72%;
  height: 58%;
  left: 14%;
  top: 6%;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(124,79,196,.38) 0%, transparent 62%),
    radial-gradient(ellipse 45% 40% at 30% 40%, rgba(201,168,76,.18) 0%, transparent 55%);
  animation: natal-nebula-drift 22s ease-in-out infinite alternate;
}
.natal-nebula-b {
  width: 55%;
  height: 48%;
  right: -8%;
  bottom: 8%;
  background: radial-gradient(ellipse at 40% 50%, rgba(90,50,180,.32) 0%, rgba(232,201,106,.08) 40%, transparent 68%);
  animation: natal-nebula-drift 28s ease-in-out infinite alternate-reverse;
  animation-delay: -6s;
}
.natal-nebula-c {
  width: 42%;
  height: 36%;
  left: -6%;
  top: 42%;
  background: radial-gradient(ellipse at 60% 40%, rgba(160,120,255,.22) 0%, transparent 60%);
  animation: natal-nebula-drift 19s ease-in-out infinite alternate;
  animation-delay: -11s;
}
.natal-stars {
  position: absolute;
  inset: -4%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.natal-stars-far {
  opacity: .7;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,.55) 0, rgba(255,255,255,.55) .6px, transparent 1.1px),
    radial-gradient(circle at 22% 72%, rgba(230,220,255,.4) 0, rgba(230,220,255,.4) .5px, transparent 1px),
    radial-gradient(circle at 38% 12%, rgba(255,255,255,.35) 0, rgba(255,255,255,.35) .45px, transparent .9px),
    radial-gradient(circle at 55% 88%, rgba(255,248,220,.45) 0, rgba(255,248,220,.45) .5px, transparent 1px),
    radial-gradient(circle at 72% 28%, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) .55px, transparent 1px),
    radial-gradient(circle at 88% 64%, rgba(200,180,255,.4) 0, rgba(200,180,255,.4) .5px, transparent 1px),
    radial-gradient(circle at 12% 48%, rgba(255,255,255,.3) 0, rgba(255,255,255,.3) .4px, transparent .85px),
    radial-gradient(circle at 94% 14%, rgba(255,255,255,.4) 0, rgba(255,255,255,.4) .45px, transparent .9px),
    radial-gradient(circle at 46% 42%, rgba(255,255,255,.28) 0, rgba(255,255,255,.28) .4px, transparent .8px),
    radial-gradient(circle at 66% 76%, rgba(240,220,255,.35) 0, rgba(240,220,255,.35) .45px, transparent .9px);
  animation: natal-stars-breathe 11s ease-in-out infinite alternate;
}
.natal-stars-mid {
  opacity: .85;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.9) 0, rgba(255,255,255,.9) 1px, transparent 1.6px),
    radial-gradient(circle at 78% 22%, rgba(240,208,138,.85) 0, rgba(240,208,138,.85) 1.1px, transparent 1.8px),
    radial-gradient(circle at 42% 68%, rgba(255,255,255,.75) 0, rgba(255,255,255,.75) .9px, transparent 1.5px),
    radial-gradient(circle at 90% 78%, rgba(255,255,255,.65) 0, rgba(255,255,255,.65) .85px, transparent 1.4px),
    radial-gradient(circle at 28% 90%, rgba(201,168,76,.7) 0, rgba(201,168,76,.7) 1px, transparent 1.6px),
    radial-gradient(circle at 62% 14%, rgba(255,255,255,.7) 0, rgba(255,255,255,.7) .8px, transparent 1.35px),
    radial-gradient(circle at 5% 82%, rgba(220,210,255,.55) 0, rgba(220,210,255,.55) .7px, transparent 1.2px);
  animation: natal-stars-twinkle 4.2s ease-in-out infinite alternate, natal-stars-parallax 26s ease-in-out infinite alternate;
}
.natal-stars-near {
  opacity: .95;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 50% 8%, rgba(255,246,214,.7) 0, rgba(255,246,214,.7) .9px, transparent 1.6px),
    radial-gradient(circle at 92% 42%, rgba(255,255,255,.8) 0, rgba(255,255,255,.8) 1.15px, transparent 1.9px),
    radial-gradient(circle at 18% 58%, rgba(232,201,106,.75) 0, rgba(232,201,106,.75) 1.2px, transparent 2.1px),
    radial-gradient(circle at 70% 92%, rgba(255,255,255,.6) 0, rgba(255,255,255,.6) .85px, transparent 1.5px),
    radial-gradient(circle at 34% 24%, rgba(200,180,255,.65) 0, rgba(200,180,255,.65) .95px, transparent 1.7px);
  animation: natal-stars-twinkle 3.1s ease-in-out infinite alternate-reverse, natal-stars-parallax 18s ease-in-out infinite alternate-reverse;
}
.natal-dust {
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.12) 0, transparent 2px),
    radial-gradient(circle at 70% 55%, rgba(232,201,106,.1) 0, transparent 2.5px),
    radial-gradient(circle at 48% 78%, rgba(180,160,255,.1) 0, transparent 2px);
  animation: natal-dust-drift 16s linear infinite;
}

/* Rosace sacrée — même craft que pages de vente (glow + drift + vibrance) */
.natal-sacred {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: min(300px, 78vw);
  z-index: 1;
  pointer-events: none;
  animation: natal-sacred-breath 14s ease-in-out infinite alternate;
}
.natal-sacred-spin {
  width: 100%;
  transform-origin: 50% 50%;
  animation: natal-sacred-drift 78s linear infinite;
  animation-delay: -22s;
}
.natal-sacred-vibrance {
  width: 100%;
  animation: natal-sacred-vibrance 3.2s ease-in-out infinite alternate;
}
.natal-rosace {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  opacity: .88;
  filter:
    drop-shadow(0 0 6px rgba(255,252,245,.32))
    drop-shadow(0 0 16px rgba(201,168,76,.42))
    drop-shadow(0 0 32px rgba(107,79,160,.38))
    drop-shadow(0 0 48px rgba(232,201,106,.12));
  animation: natal-sacred-glow 3.6s ease-in-out infinite alternate;
}

/* Livre 3D flottant qui pivote */
.natal-book-stage {
  position: relative;
  z-index: 2;
  height: 158px;
  margin: 4px auto 20px;
  perspective: 920px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.natal-book-aura {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(232,201,106,.28) 0%, rgba(124,79,196,.18) 42%, transparent 70%);
  filter: blur(8px);
  animation: natal-aura-pulse 4.8s ease-in-out infinite alternate;
  pointer-events: none;
}
.natal-book-pivot {
  position: relative;
  width: 112px;
  height: 138px;
  transform-style: preserve-3d;
  animation: natal-book-orbit 9.5s ease-in-out infinite;
}
.natal-book {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(12deg) rotateY(-22deg);
  animation: natal-book-open 5.6s ease-in-out infinite;
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(201,168,76,.28));
}
.nb-cover,
.nb-spine,
.nb-page {
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.nb-cover {
  width: 78px;
  height: 118px;
  top: 10px;
  left: 16px;
  border-radius: 2px 5px 5px 2px;
  border: 1px solid rgba(232,201,106,.45);
  background:
    linear-gradient(145deg, rgba(232,201,106,.14) 0%, transparent 28%),
    linear-gradient(160deg, #2a1860 0%, #15102e 48%, #1a1240 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,252,245,.06),
    inset -10px 0 18px rgba(0,0,0,.25);
}
.nb-front {
  transform-origin: left center;
  z-index: 5;
  animation: natal-cover-front 5.6s ease-in-out infinite;
}
.nb-back {
  transform: translateZ(-10px) rotateY(0deg);
  background:
    linear-gradient(160deg, #1c1248 0%, #100c22 60%, #181030 100%);
  border-color: rgba(201,168,76,.28);
  z-index: 1;
}
.nb-spine {
  width: 12px;
  height: 118px;
  top: 10px;
  left: 10px;
  border-radius: 2px;
  background: linear-gradient(180deg, #e8c96a 0%, #c9a84c 35%, #7a5a1e 100%);
  box-shadow:
    0 0 14px rgba(201,168,76,.4),
    inset 1px 0 0 rgba(255,252,245,.35),
    inset -1px 0 0 rgba(0,0,0,.35);
  transform: rotateY(-90deg) translateZ(6px);
  transform-origin: right center;
  z-index: 4;
}
.nb-emblem {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 1px solid rgba(232,201,106,.65);
  box-shadow:
    0 0 10px rgba(201,168,76,.35),
    inset 0 0 8px rgba(232,201,106,.2);
  background:
    radial-gradient(circle at 50% 50%, rgba(232,201,106,.35) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(201,168,76,.45) 40%, transparent 42%);
}
.nb-title-line {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,201,106,.7), transparent);
  box-shadow: 0 0 6px rgba(201,168,76,.35);
}
.nb-pages {
  position: absolute;
  top: 16px;
  left: 18px;
  width: 70px;
  height: 106px;
  transform-style: preserve-3d;
  z-index: 3;
}
.nb-page {
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f7efd8 0%, #efe4c4 55%, #e8dcb4 100%);
  border: 1px solid rgba(120,90,40,.22);
  border-left: none;
  transform-origin: left center;
  box-shadow: inset -6px 0 10px rgba(90,60,20,.08);
}
.nb-page.p1 { animation: natal-page-turn 5.6s ease-in-out infinite; }
.nb-page.p2 { animation: natal-page-turn 5.6s ease-in-out .45s infinite; opacity: .95; }
.nb-page.p3 { animation: natal-page-turn 5.6s ease-in-out .9s infinite; opacity: .88; }
.nb-page.p4 { transform: rotateY(-4deg); opacity: .8; }

.natal-cosmos-copy {
  position: relative;
  z-index: 3;
  padding: 0 4px;
  text-shadow: 0 1px 12px rgba(5,2,15,.65);
}
.natal-cosmos-title {
  font-family: 'Cinzel', serif;
  color: #E8CF88;
  font-size: 1.08rem;
  letter-spacing: .02em;
  margin: 0 0 8px;
}
.natal-cosmos-step {
  margin: 0 0 14px;
  font-size: .98rem;
  line-height: 1.45;
  color: rgba(255,248,230,.94);
}
.natal-cosmos-bar {
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
  max-width: 260px;
  margin: 0 auto 12px;
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.12);
}
.natal-cosmos-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #9a7430, #c9a84c, #f0d78c);
  border-radius: 99px;
  transition: width .6s ease;
  box-shadow: 0 0 10px rgba(232,201,106,.45);
}
.natal-cosmos-hint {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(200,185,220,.78) !important;
}

/* Cosmos panel stays dark in light theme for contrast */
html[data-theme="light"] .natal-cosmos {
  border-color: rgba(168,132,46,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,252,245,.05),
    0 8px 28px rgba(28,23,36,.12);
}
html[data-theme="light"] .natal-cosmos-title { color: #E8CF88; }
html[data-theme="light"] .natal-cosmos-step { color: rgba(255,248,230,.94); }
html[data-theme="light"] .natal-cosmos-bar { background: rgba(255,255,255,.12); }
html[data-theme="light"] .natal-cosmos-hint { color: rgba(200,185,220,.78) !important; }

@keyframes natal-nebula-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(4%, 3%, 0) scale(1.08); }
}
@keyframes natal-stars-breathe {
  from { opacity: .45; transform: scale(1); }
  to { opacity: .85; transform: scale(1.03); }
}
@keyframes natal-stars-twinkle {
  from { opacity: .55; }
  to { opacity: 1; }
}
@keyframes natal-stars-parallax {
  from { transform: translate3d(-1.5%, 0, 0); }
  to { transform: translate3d(1.5%, -1%, 0); }
}
@keyframes natal-dust-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}
@keyframes natal-sacred-breath {
  from { opacity: .62; }
  to { opacity: 1; }
}
@keyframes natal-sacred-drift {
  to { transform: rotate(360deg); }
}
@keyframes natal-sacred-vibrance {
  0%, 100% { opacity: .82; filter: brightness(.92) contrast(1.02); }
  50% { opacity: 1; filter: brightness(1.28) contrast(1.06); }
}
@keyframes natal-sacred-glow {
  from {
    filter:
      drop-shadow(0 0 4px rgba(255,252,245,.14))
      drop-shadow(0 0 10px rgba(201,168,76,.22))
      drop-shadow(0 0 18px rgba(107,79,160,.16))
      drop-shadow(0 0 28px rgba(232,201,106,.06));
  }
  to {
    filter:
      drop-shadow(0 0 12px rgba(255,252,245,.5))
      drop-shadow(0 0 26px rgba(201,168,76,.58))
      drop-shadow(0 0 44px rgba(180,160,255,.35))
      drop-shadow(0 0 64px rgba(232,201,106,.2));
  }
}
@keyframes natal-aura-pulse {
  from { opacity: .55; transform: scale(.92); }
  to { opacity: 1; transform: scale(1.08); }
}
@keyframes natal-book-orbit {
  0%, 100% { transform: translateY(0) rotateY(-18deg) rotateX(6deg); }
  25% { transform: translateY(-8px) rotateY(8deg) rotateX(10deg); }
  50% { transform: translateY(-4px) rotateY(22deg) rotateX(4deg); }
  75% { transform: translateY(-10px) rotateY(-6deg) rotateX(12deg); }
}
@keyframes natal-book-open {
  0%, 100% { transform: rotateX(12deg) rotateY(-18deg); }
  50% { transform: rotateX(8deg) rotateY(-8deg); }
}
@keyframes natal-cover-front {
  0%, 100% { transform: rotateY(-8deg); }
  45%, 55% { transform: rotateY(-42deg); }
}
@keyframes natal-page-turn {
  0%, 100% { transform: rotateY(-6deg); }
  40% { transform: rotateY(-68deg); }
  55% { transform: rotateY(-68deg); }
}

@media (prefers-reduced-motion: reduce) {
  .natal-nebula,
  .natal-stars,
  .natal-dust,
  .natal-sacred,
  .natal-sacred-spin,
  .natal-sacred-vibrance,
  .natal-rosace,
  .natal-book-aura,
  .natal-book-pivot,
  .natal-book,
  .nb-front,
  .nb-page {
    animation: none !important;
  }
  .natal-book-pivot { transform: rotateY(-12deg) rotateX(8deg); }
  .nb-front { transform: rotateY(-22deg); }
}

.reader-ia {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--stroke);
}
.reader-ia.lock {
  opacity: .92;
}
.reader-ia .ia-log {
  max-height: min(36vh, 280px);
  min-height: 120px;
}
.pdf-body .reader-ia { max-width: 100%; }

.ia-card .ia-portrait {
  margin: 0 auto 6px;
}
.ia-portrait {
  width: 112px;
  height: 112px;
  margin: 0 auto 4px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(201,168,76,.45);
  box-shadow:
    0 0 0 3px rgba(201,168,76,.12),
    0 10px 28px rgba(0,0,0,.28);
  background: radial-gradient(circle at 35% 25%, rgba(201,168,76,.2), transparent 55%),
    rgba(8, 5, 22, .55);
  flex-shrink: 0;
}
.ia-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.ia-portrait--sm {
  width: 64px;
  height: 64px;
  margin: 0;
  box-shadow:
    0 0 0 2px rgba(201,168,76,.14),
    0 6px 16px rgba(0,0,0,.22);
}
.reader-ia-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.reader-ia-head .ia-guide-line {
  margin: 4px 0 0;
  font-size: .9rem;
  line-height: 1.35;
}
html[data-theme="light"] .ia-portrait {
  border-color: rgba(168,132,46,.4);
  box-shadow:
    0 0 0 3px rgba(168,132,46,.1),
    0 8px 20px rgba(40,30,10,.12);
  background: radial-gradient(circle at 35% 25%, rgba(201,168,76,.15), transparent 55%),
    rgba(255,252,246,.9);
}

/* ——— Mode IA live ——— */
.ia-live-launch {
  margin: 0 0 10px;
}
.ia-live-btn {
  width: 100%;
}
.ia-live-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(201,168,76,.18), transparent 55%),
    rgba(4, 2, 14, .92);
  backdrop-filter: blur(10px);
}
.ia-live-sheet {
  width: min(420px, 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ia-live-portrait {
  position: relative;
  width: min(220px, 56vw);
  height: min(220px, 56vw);
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(201,168,76,.5);
  box-shadow:
    0 0 0 4px rgba(201,168,76,.12),
    0 18px 48px rgba(0,0,0,.45);
  background: radial-gradient(circle at 35% 25%, rgba(201,168,76,.22), transparent 55%),
    rgba(8, 5, 22, .7);
}
.ia-live-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  position: relative;
  z-index: 1;
}
.ia-live-glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.35), transparent 68%);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
  animation: ia-live-breathe 3.6s ease-in-out infinite;
}
.ia-live-portrait.is-speaking .ia-live-glow {
  opacity: .9;
  animation: ia-live-speak 1.4s ease-in-out infinite;
}
.ia-live-portrait.is-speaking img {
  animation: ia-live-breathe 2.2s ease-in-out infinite;
}
.ia-live-portrait.is-connecting {
  opacity: .82;
}
@keyframes ia-live-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes ia-live-speak {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.12); opacity: 1; }
}
.ia-live-title {
  margin: 8px 0 0;
  font-size: 1.35rem;
  letter-spacing: .02em;
}
.ia-live-status {
  margin: 0;
  font-size: 1.05rem;
  color: rgba(245, 230, 180, .95);
}
.ia-live-quota {
  margin: 0;
  font-size: .92rem;
  color: rgba(201,168,76,.95);
}
.ia-live-quota.is-out {
  color: #e8a0a0;
}
.ia-live-hint,
.ia-live-voice {
  margin: 0;
  max-width: 34ch;
  font-size: .86rem;
  line-height: 1.4;
}
.ia-live-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.ia-live-actions .btn {
  min-width: 7.5rem;
}
#ia-live-audio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
html[data-theme="light"] .ia-live-overlay {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(201,168,76,.2), transparent 55%),
    rgba(250, 246, 238, .94);
}
html[data-theme="light"] .ia-live-status {
  color: #5a4818;
}

/* ??? Quota IA / Divin+ upsell modal ??? */
.ia-quota-modal {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(201,168,76,.16), transparent 55%),
    rgba(4, 2, 14, .88);
  backdrop-filter: blur(8px);
}
.ia-quota-sheet {
  width: min(400px, 100%);
  text-align: center;
  gap: 12px;
  margin: 0;
}
.ia-quota-sheet h2 {
  margin: 0;
  font-size: 1.25rem;
}
.ia-quota-sheet p {
  margin: 0;
  line-height: 1.45;
}
.ia-quota-ctas {
  width: 100%;
  gap: 8px;
}
.ia-quota-ctas .btn {
  width: 100%;
}
html[data-theme="light"] .ia-quota-modal {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(201,168,76,.18), transparent 55%),
    rgba(250, 246, 238, .94);
}

/* ??? Desktop ? phone retention nudge ??? */
.desktop-phone-nudge {
  position: fixed;
  inset: 0;
  z-index: 13100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(201,168,76,.16), transparent 55%),
    rgba(4, 2, 14, .88);
  backdrop-filter: blur(8px);
}
.desktop-phone-nudge-sheet {
  width: min(420px, 100%);
  text-align: center;
  gap: 12px;
  margin: 0;
  max-height: min(92vh, 720px);
  overflow-y: auto;
}
.desktop-phone-nudge-sheet h2 {
  margin: 0;
  font-size: 1.25rem;
}
.desktop-phone-nudge-sheet p {
  margin: 0;
  line-height: 1.45;
}
.desktop-nudge-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}
.desktop-nudge-qr img {
  width: 168px;
  height: 168px;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  box-sizing: border-box;
}
.desktop-nudge-qr-hint {
  font-size: .88rem !important;
  margin: 0 !important;
}
.desktop-nudge-homescreen {
  font-size: .9rem !important;
  margin: 0 !important;
}
.desktop-nudge-ctas {
  width: 100%;
  gap: 8px;
}
.desktop-nudge-ctas .btn {
  width: 100%;
}
html[data-theme="light"] .desktop-phone-nudge {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(201,168,76,.18), transparent 55%),
    rgba(250, 246, 238, .94);
}

/* ——— Tutoriel guidé (1re connexion, plan Gratuit) ——— */
.tuto-root { position: fixed; inset: 0; z-index: 11000; pointer-events: none; }
.tuto-mask {
  position: fixed; inset: 0; pointer-events: auto;
  background: rgba(3, 1, 12, .66);
  opacity: 0; transition: opacity .25s ease;
}
.tuto-ring {
  position: fixed; pointer-events: none; border-radius: 6px;
  border: 1.5px solid var(--gold-light);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, .22), 0 0 22px rgba(232, 207, 136, .45);
  opacity: 0; transition: opacity .25s ease;
  animation: tuto-pulse 2.2s ease-in-out infinite;
}
.tuto-bubble {
  position: fixed; pointer-events: auto; box-sizing: border-box;
  width: calc(100vw - 24px); max-width: 360px;
  padding: 1rem 1.05rem .85rem;
  background: var(--deep-2); background-image: var(--card-grad);
  border: 1px solid var(--gold); border-radius: 4px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 26px rgba(201, 168, 76, .18);
  color: var(--cream); text-align: start;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.tuto-root.is-in .tuto-mask,
.tuto-root.is-in .tuto-ring,
.tuto-root.is-in .tuto-bubble { opacity: 1; }
.tuto-root.is-in .tuto-bubble { transform: none; }
.tuto-arrow {
  position: absolute; width: 14px; height: 14px; display: none;
  background: var(--deep-2); border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.tuto-arrow.is-up { display: block; top: -8px; border-right: 0; border-bottom: 0; }
.tuto-arrow.is-down { display: block; bottom: -8px; border-left: 0; border-top: 0; }
.tuto-step {
  font-family: 'Inter', sans-serif; font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); opacity: .85;
}
.tuto-dots { display: flex; gap: 5px; margin: .4rem 0 .15rem; }
.tuto-dots i {
  display: block; width: 18px; height: 3px; border-radius: 2px;
  background: rgba(201, 168, 76, .25);
}
.tuto-dots i.past { background: rgba(201, 168, 76, .6); }
.tuto-dots i.on { background: var(--gold-light); box-shadow: 0 0 6px rgba(232, 207, 136, .6); }
.tuto-title {
  font-family: 'Cinzel', serif; font-weight: 400; font-size: 1rem;
  letter-spacing: .03em; color: var(--gold-light); margin: .45rem 0 .35rem;
}
.tuto-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.06rem; line-height: 1.45; color: var(--cream); margin: 0;
}
.tuto-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-top: .85rem;
}
.tuto-skip {
  background: none; border: 0; padding: .5rem .2rem; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .7rem; letter-spacing: .08em;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.tuto-skip:hover, .tuto-skip:focus-visible { color: var(--gold-light); }
.tuto-bubble .btn.tuto-next { flex: 0 0 auto; min-width: 7.5rem; }
.tuto-bubble.tuto-nudge { animation: tuto-nudge .35s ease; }
.tuto-replay { font-size: .78rem; }
@keyframes tuto-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201, 168, 76, .22), 0 0 18px rgba(232, 207, 136, .35); }
  50% { box-shadow: 0 0 0 5px rgba(201, 168, 76, .12), 0 0 28px rgba(232, 207, 136, .6); }
}
@keyframes tuto-nudge {
  0%, 100% { transform: none; }
  30% { transform: translateX(-5px); }
  70% { transform: translateX(5px); }
}
[data-theme="light"] .tuto-mask { background: rgba(28, 20, 44, .5); }
[data-theme="light"] .tuto-bubble { box-shadow: 0 12px 34px rgba(40, 28, 70, .28); }
@media (min-width: 768px) {
  .tuto-bubble { padding: 1.15rem 1.25rem 1rem; }
  .tuto-title { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tuto-ring, .tuto-bubble.tuto-nudge { animation: none; }
  .tuto-mask, .tuto-ring, .tuto-bubble { transition: none; }
}

/* ============================================================
   CELESTE V1 — typographie & enrichissements (interface uniquement)
   Les documents/manuscrits générés restent autonomes et inchangés.
   ============================================================ */
body, button, input, textarea, select {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.brand h1, .hero-month .month, .hero-month h1, .card h2, .card h3,
.sheet h2, .sheet h3, .ia-card h2, .reader-ia h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.cc-toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translate(-50%,12px);opacity:0;z-index:30000;max-width:min(420px,calc(100vw - 28px));padding:10px 14px;border:1px solid var(--stroke);border-radius:999px;background:var(--deep-2);color:var(--cream);box-shadow:0 12px 34px rgba(0,0,0,.25);font:600 11px/1.35 Inter,sans-serif;transition:opacity .22s ease,transform .22s ease;backdrop-filter:blur(12px)}
.cc-toast.show{opacity:1;transform:translate(-50%,0)}.cc-toast.warn{border-color:rgba(180,110,110,.55)}.cc-toast.info{border-color:var(--gold)}
.cc-semantic-note{margin:.45rem 0 0!important;font-size:.72rem!important;opacity:.72}
.cc-daily-focus,.cc-resume-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 16px}
.cc-daily-focus h3,.cc-resume-card h3{margin:.12rem 0 .25rem;font:600 23px/1.05 'Cormorant Garamond',Georgia,serif}
.cc-daily-focus p,.cc-resume-card p{margin:0}.cc-focus-actions{display:flex;gap:8px;flex-wrap:wrap}
.cc-reader-toolbar{margin-bottom:8px;padding:10px 12px;border:1px solid var(--stroke);border-radius:10px;background:var(--deep-2);display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:8px;z-index:4;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.cc-reader-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font:600 9px/1.2 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}.cc-reader-progress-text{color:var(--gold-light)}
.cc-reader-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.cc-reader-actions button,.cc-speed{border:1px solid var(--stroke);background:transparent;color:var(--cream);border-radius:999px;padding:7px 10px;font:600 10px/1 Inter,sans-serif;cursor:pointer}.cc-reader-actions button:hover,.cc-reader-actions button:focus-visible,.cc-speed:focus-within{border-color:var(--gold);color:var(--gold-light)}
.cc-speed{display:inline-flex;align-items:center;gap:5px}.cc-speed select{border:0;background:transparent;color:inherit;outline:0;font:600 10px Inter,sans-serif}.cc-speed option{background:var(--deep-2);color:var(--cream)}
.cc-toc-popover{position:fixed;right:18px;top:72px;z-index:31000;width:min(360px,calc(100vw - 36px));max-height:min(70vh,560px);overflow:auto;padding:12px;border:1px solid var(--stroke);border-radius:12px;background:var(--deep-2);box-shadow:0 18px 44px rgba(0,0,0,.32);opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease}.cc-toc-popover.show{opacity:1;transform:none}
.cc-toc-title{color:var(--gold-light);font:700 10px/1.2 Inter,sans-serif;letter-spacing:.12em;margin:2px 2px 8px}.cc-toc-popover button{display:block;width:100%;border:0;border-top:1px solid var(--stroke);padding:9px 6px;background:transparent;color:var(--cream);text-align:left;cursor:pointer;font:500 14px/1.35 Inter,sans-serif}.cc-toc-popover button:hover,.cc-toc-popover button:focus-visible{color:var(--gold-light)}
.cc-account-extras{border-top:1px solid var(--acct-line);margin-top:10px;padding-top:4px}.cc-account-extras .acct-block{padding-top:13px;margin-top:13px;border-top:1px solid var(--acct-line)}.cc-account-extras .acct-block:first-child{border-top:0}.cc-account-extras .btn,.cc-account-extras .link{margin-top:7px}
.cc-collection-filter{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}.cc-collection-filter button{border:1px solid var(--stroke);background:transparent;color:var(--muted);border-radius:999px;padding:6px 9px;cursor:pointer;font:600 9px/1 Inter,sans-serif}.cc-collection-filter button.active,.cc-collection-filter button:hover{color:var(--gold-light);border-color:var(--gold)}
.cc-bookmark-list{display:grid;gap:7px}.cc-bookmark{width:100%;text-align:left;border:1px solid var(--stroke);border-radius:8px;background:transparent;color:var(--cream);padding:9px 10px;cursor:pointer}.cc-bookmark:hover,.cc-bookmark:focus-visible{border-color:var(--gold)}.cc-bookmark span{display:block;font:400 15px/1.35 'Cormorant Garamond',Georgia,serif}.cc-bookmark small{display:block;margin-top:4px;color:var(--muted);font:600 9px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em}
.cc-install-notify{display:grid;gap:10px;margin-top:12px;padding-top:14px;border-top:1px solid var(--stroke)}.cc-install-notify p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}.cc-install-notify strong{font:600 20px/1.05 'Cormorant Garamond',Georgia,serif;color:var(--cream)}
.cc-privacy-note{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--stroke);font-size:.78rem;line-height:1.5}.cc-ultime-progress{margin-top:12px;padding-top:11px;border-top:1px solid var(--stroke)}
.cc-ultime-progress-head{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font:600 9px/1.2 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}.cc-ultime-progress-head strong{color:var(--gold-light)}.cc-ultime-progress-track{height:4px;margin-top:8px;border-radius:99px;overflow:hidden;background:rgba(144,128,168,.16)}.cc-ultime-progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-dim),var(--gold-light))}
.cc-couple-guide{margin-bottom:16px}.cc-couple-guide h3{margin:.1rem 0 .25rem;font:600 24px/1.05 'Cormorant Garamond',Georgia,serif}.cc-couple-topics{display:flex;flex-wrap:wrap;gap:7px}.cc-topic-button{padding:7px 10px;border:1px solid var(--stroke);border-radius:999px;color:var(--muted);background:transparent;cursor:pointer;font:600 9px/1 Inter,sans-serif;letter-spacing:.06em}.cc-topic-button:hover,.cc-topic-button:focus-visible{color:var(--gold-light);border-color:var(--gold)}
.cc-session-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--stroke)}.cc-session-row strong{display:block;font:600 13px/1.2 Inter,sans-serif;color:var(--cream)}.cc-session-row small{display:block;margin-top:3px;color:var(--muted);font:500 10px/1.3 Inter,sans-serif}.cc-session-current{color:var(--gold-light);font:700 9px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.cc-timeline{display:grid;gap:0}.cc-timeline-item{position:relative;display:flex;gap:10px;padding:8px 0}.cc-timeline-dot{width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.12);flex:0 0 auto}.cc-timeline-item strong{display:block;font:600 13px/1.2 Inter,sans-serif;text-transform:capitalize}.cc-timeline-item small{display:block;margin-top:3px;color:var(--muted);font:500 10px/1.3 Inter,sans-serif}
.cc-usage{display:grid;gap:7px}.cc-usage-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--stroke);font:500 11px/1.3 Inter,sans-serif;color:var(--muted)}.cc-usage-row strong{color:var(--cream);font-weight:600}
@media(max-width:700px){.cc-daily-focus,.cc-resume-card{align-items:flex-start;flex-direction:column}.cc-focus-actions{width:100%}.cc-focus-actions .btn{flex:1}.cc-reader-toolbar{position:static;flex-direction:column;align-items:flex-start}.cc-reader-actions{width:100%;justify-content:flex-start}.cc-toc-popover{left:12px;right:12px;top:64px;width:auto}}
@media(prefers-reduced-motion:reduce){.cc-toast,.cc-toc-popover{transition:none}}

.cc-bookmark-row{display:flex;align-items:stretch;gap:6px}.cc-bookmark-row .cc-bookmark{flex:1}.cc-bookmark-remove{flex:0 0 auto;align-self:center;color:var(--muted);font-size:16px}.cc-bookmark-remove:hover,.cc-bookmark-remove:focus-visible{color:var(--gold-light)}
.cc-pwa-update{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:32000;display:flex;align-items:center;gap:12px;width:min(520px,calc(100vw - 24px));padding:11px 12px;border:1px solid var(--gold);border-radius:12px;background:var(--deep-2);color:var(--cream);box-shadow:0 14px 40px rgba(0,0,0,.3);font:500 11px/1.35 Inter,sans-serif}.cc-pwa-update .btn{margin-left:auto;white-space:nowrap}

/* Account sheet: close control always reachable + actions at bottom. */
.account-head { display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:-18px; z-index:3; padding:4px 0 10px; background:var(--deep-2); }
.account-head h3 { margin:0; }
.account-close-x { width:38px; height:38px; border-radius:50%; border:1px solid var(--stroke); background:transparent; color:var(--cream); font-size:24px; line-height:1; cursor:pointer; display:grid; place-items:center; flex:0 0 auto; }
.account-close-x:hover,.account-close-x:focus-visible { border-color:var(--gold); color:var(--gold-light); }
.account-footer-actions { display:flex; flex-direction:column; gap:8px; margin-top:auto; padding:16px 0 calc(10px + var(--safe-bot)); position:sticky; bottom:0; background:var(--deep-2); border-top:1px solid var(--acct-line); z-index:4; }

/* Manuscript reader: progress, contents and selected-passage actions are separate. */
.cc-reader-toolbar { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.cc-reader-progress-block { padding:12px 14px; border:1px solid var(--stroke); border-radius:10px; background:var(--card-bg); }
.cc-reader-meta { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.cc-reader-progress-text { color:var(--gold-light); font-weight:700; }
.cc-reader-progress-track { height:5px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); margin-top:9px; }
.cc-reader-progress-fill { display:block; width:0; height:100%; border-radius:inherit; background:var(--gold); transition:width .25s ease; }
.cc-reader-toc-block { display:flex; justify-content:flex-start; margin:0 0 4px; }
.cc-reader-toc-btn { border:1px solid rgba(201,168,76,.55); background:rgba(201,168,76,.12); color:var(--gold-light); border-radius:8px; padding:.52rem .82rem; cursor:pointer; font:600 .72rem/1.1 Inter,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
[data-theme="light"] .cc-reader-toc-btn { background:rgba(168,132,46,.1); color:var(--gold); }
.cc-reader-toc-btn:hover,.cc-reader-toc-btn:focus-visible { border-color:var(--gold); color:var(--gold-light); }
.cc-selection-actions { position:static !important; inset:auto !important; width:100%; max-width:none; padding:12px 14px; border:1px solid var(--stroke); border-radius:10px; background:var(--card-bg); box-sizing:border-box; display:block; }
.cc-selection-actions[hidden] { display:none !important; }
.cc-selection-hint { margin:0 0 9px; color:var(--muted); font:500 .62rem/1.45 Inter,sans-serif; letter-spacing:.01em; }
.cc-selection-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.cc-selection-btn { border:1px solid var(--stroke); background:transparent; color:var(--cream); border-radius:8px; padding:.55rem .8rem; cursor:pointer; }
.cc-selection-btn:hover,.cc-selection-btn:focus-visible { border-color:var(--gold); color:var(--gold-light); }

.ms-tts-footer { flex-wrap:wrap; }
.ms-tts-group { flex-wrap:wrap; justify-content:center; }
.ms-tts-speed { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--stroke); border-radius:8px; padding:.45rem .55rem; color:var(--muted); font-size:.78rem; }
.ms-tts-speed select { border:0; outline:0; background:transparent; color:var(--cream); font:inherit; cursor:pointer; }
html[data-theme="light"] .ms-tts-speed select { color:#1c1724; }
@media (max-width:520px) {
  .cc-selection-buttons > * { flex:1 1 30%; min-width:0; }
  .cc-reader-toc-block { justify-content:stretch; }
  .cc-reader-toc-btn { width:100%; }
}

/* Manuscript illustrations — single V1 visual direction. */
.cc-manuscript-art{margin:10px 0 14px;padding:8px;border:1px solid var(--stroke);border-radius:14px;background:rgba(255,252,246,.045);overflow:hidden}
.cc-manuscript-art-head{display:none}
.cc-manuscript-art-label{display:none}
.cc-manuscript-art-img{display:block;width:100%;height:auto;max-height:270px;object-fit:contain;border-radius:10px}

/* TTS controls: speed and chapter are real sliders, kept next to ÉCOUTER. */
.ms-tts-group{display:flex;align-items:center;gap:8px;width:100%}
.ms-tts-speed,.ms-tts-chapter{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--stroke);border-radius:10px;padding:7px 9px;color:var(--muted);font:600 10px/1 Inter,sans-serif;background:transparent}
.ms-tts-speed span,.ms-tts-chapter span{white-space:nowrap}
.ms-tts-speed strong,.ms-tts-chapter strong{color:var(--gold-light);font-weight:700}
.ms-tts-speed input,.ms-tts-chapter input{width:115px;accent-color:var(--gold);cursor:pointer}
.ms-tts-chapter{flex:1;min-width:180px}
.ms-tts-chapter input{flex:1;min-width:70px}
@media(max-width:620px){.ms-tts-group{align-items:stretch;flex-wrap:wrap}.ms-tts-btn{flex:1 1 150px}.ms-tts-speed,.ms-tts-chapter{flex:1 1 100%;justify-content:space-between}.ms-tts-speed input,.ms-tts-chapter input{width:min(180px,45vw)}}

/* Selection actions live outside the iframe so they remain reliably clickable. */
.cc-selection-actions{position:relative !important;z-index:20;pointer-events:auto !important}
.cc-selection-buttons[hidden]{display:none !important}
\n\n/* v108: manuscript selection actions float directly above the selected passage. */\n.cc-selection-hint-block{margin:0 0 4px;padding:0 2px;}\n.cc-selection-hint{margin:0;color:var(--muted);font:500 .64rem/1.4 Inter,sans-serif;letter-spacing:.01em;}\n.cc-selection-actions{position:fixed !important;left:50%;top:20%;width:auto;max-width:min(92vw,520px);padding:0;border:0;background:transparent;box-shadow:none;z-index:100000;pointer-events:none;transform:translate(-50%,-100%);}\n.cc-selection-actions[hidden]{display:none !important;}\n.cc-selection-buttons{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:nowrap;padding:7px;background:var(--deep-2);border:1px solid rgba(201,168,76,.48);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.28);pointer-events:auto;}\n.cc-selection-btn{display:inline-flex;align-items:center;justify-content:center;min-height:34px;white-space:nowrap;border:1px solid var(--stroke);background:rgba(255,255,255,.035);color:var(--cream);border-radius:8px;padding:7px 10px;cursor:pointer;font:600 9px/1.1 Inter,sans-serif;text-align:center;box-sizing:border-box;}\n.cc-selection-btn:hover,.cc-selection-btn:focus-visible{border-color:var(--gold);color:var(--gold-light);background:rgba(201,168,76,.09);}\n.cc-resume-card{gap:8px;}\n.cc-resume-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--stroke);}\n.cc-resume-row-title{min-width:0;color:var(--muted);font:600 10px/1.2 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;}\n.cc-resume-row-title strong{color:var(--gold-light);font-weight:700;}\n.cc-resume-mini{flex:0 0 auto;border:1px solid rgba(201,168,76,.45);background:rgba(201,168,76,.08);color:var(--gold-light);border-radius:7px;padding:6px 9px;cursor:pointer;font:600 8px/1 Inter,sans-serif;letter-spacing:.03em;}\n.cc-resume-mini:hover,.cc-resume-mini:focus-visible{border-color:var(--gold);background:rgba(201,168,76,.14);}\n@media(max-width:520px){.cc-selection-buttons{max-width:calc(100vw - 16px);gap:4px;padding:6px;}.cc-selection-btn{flex:1 1 0;min-width:0;padding:8px 5px;font-size:8px;}.cc-resume-row-title{font-size:9px}.cc-resume-mini{padding:6px 7px;font-size:7.5px;}}\n
/* v108: account actions anchored at the bottom of the account sheet. */
.account-sheet,.account-panel,.account-card{display:flex;flex-direction:column;}
.account-footer-actions{margin-top:auto !important;position:sticky;bottom:0;z-index:50;}
/* v111: bloc « Continuer ma lecture » (app principale uniquement). */
#app .cc-resume-card{display:block;padding:1rem 1.05rem .55rem;margin:0 0 16px}
#app .cc-resume-card>.label{margin:0 0 .5rem}
#app .cc-resume-row{display:flex;align-items:center;gap:14px;padding:.75rem 0;border-top:1px solid var(--stroke)}
#app .cc-resume-card>.label+.cc-resume-row{border-top:0;padding-top:.25rem}
#app .cc-resume-info{flex:1 1 auto;min-width:0}
#app .cc-resume-row-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 .5rem;font:400 .74rem/1.2 'Cinzel',serif;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
#app .cc-resume-row-title strong{color:var(--gold-light);font:600 .8rem/1 Inter,sans-serif;letter-spacing:0}
#app .cc-resume-track{height:4px;border-radius:4px;background:color-mix(in srgb,var(--gold) 18%,transparent);overflow:hidden}
#app .cc-resume-track span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-light))}
#app .cc-resume-go{flex:0 0 auto;width:auto;min-width:7rem;padding:.75rem 1.05rem;box-shadow:0 6px 18px color-mix(in srgb,var(--gold) 24%,transparent)}
#app .install-after{margin:.2rem 0 0;font-size:.92rem}

/* === BLOCS MANUSCRITS — présentation unifiée (texte / image / boutons) ===
   Portée : .ms-block (cartes JOUR, MOIS, VIE, ULTIME, COUPLE) et .ms-hero.
   Une seule anatomie pour les cinq cartes : surtitre, titre, illustration,
   ligne d'infos, texte, état, actions. */
#app .ms-hero { padding: 2px 0 14px; }
#app .ms-hero .label { display: block; margin-bottom: .45rem; }
#app .ms-hero .lede { font-size: 1rem; line-height: 1.5; }

#app .ms-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 1.1rem 1.1rem 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(201, 168, 76, .34);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}
[data-theme="light"] #app .ms-block {
  border-color: rgba(168, 132, 46, .34);
  box-shadow: 0 8px 22px rgba(28, 23, 36, .08);
}

/* Rythme vertical : une seule échelle (6 / 10 / 12 / 14 / 16 / 18 px). */
#app .ms-block > * { margin-top: 14px; }
#app .ms-block > *:first-child { margin-top: 0; }
#app .ms-block > h2 { margin-top: .4rem; }
#app .ms-block > p { margin-top: 10px; }
#app .ms-block > .ms-meta { margin-top: 12px; }
#app .ms-block > .cc-manuscript-art { margin: 16px 0 0; }
#app .ms-block > .pages-badge { margin: 16px 0 0; }
#app .ms-block > .natal-wait { margin-top: 14px; }
#app .ms-block > .btn,
#app .ms-block > a.btn { margin-top: 18px; }
#app .ms-block > .btn + .btn,
#app .ms-block > a.btn + a.btn { margin-top: 10px; }
#app .ms-block > .free-quota-banner { margin: 18px 0 0; }

/* Surtitre : même graisse, même interlettrage sur toutes les cartes. */
#app .ms-block > .label {
  align-self: flex-start;
  font: 600 .66rem/1.1 "Inter", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 1;
}

/* Titre : une seule taille, un seul style, retour à la ligne propre. */
#app .ms-block > h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: .01em;
  color: var(--cream);
  text-wrap: balance;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
/* « DE TA VIE », « DE CE MOIS » : doré, mais sans rupture de taille. */
#app .ms-block > h2 .de-ta-vie,
#app .ms-block > h2 .de-ce-mois {
  font-size: 1em;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold-light);
}

/* Illustration : même cadrage 3/2 pour les cinq manuscrits. */
#app .ms-block .cc-manuscript-art {
  position: relative;
  padding: 0;
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(201, 168, 76, .26);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(201, 168, 76, .14), rgba(201, 168, 76, .03) 70%);
  overflow: hidden;
}
[data-theme="light"] #app .ms-block .cc-manuscript-art { border-color: rgba(168, 132, 46, .28); }
#app .ms-block .cc-manuscript-art::after {
  content: "\2726";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: rgba(201, 168, 76, .5);
  z-index: 0;
}
#app .ms-block .cc-manuscript-art-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
#app .ms-block .cc-manuscript-art-img.is-missing { display: none; }

/* Compteur de pages : pastille compacte alignée à gauche (plus étirée). */
#app .ms-block > .pages-badge {
  align-self: flex-start;
  gap: .4rem;
  padding: .45rem .85rem .4rem;
  border-radius: 999px;
}
#app .ms-block > .pages-badge .pages-badge-num { font-size: 1.5rem; }
#app .ms-block > .pages-badge--ultime .pages-badge-num { font-size: 1.75rem; }
#app .ms-block > .pages-badge .pages-badge-unit { font-size: .68rem; }

/* Ligne d'infos (pages, quota) : même traitement sur les cinq cartes. */
#app .ms-block > .ms-meta {
  font: 500 .72rem/1.5 "Inter", sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--muted);
}

/* Texte courant : une seule taille, une seule interligne. */
#app .ms-block > p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.04rem;
  line-height: 1.6;
  font-style: normal;
  color: var(--cream);
}
#app .ms-block > p.muted {
  font-size: .98rem;
  font-style: italic;
  color: var(--muted);
}

/* Boutons : hiérarchie claire, un seul rayon, cible tactile >= 48 px. */
#app .ms-block .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: .9rem 1.1rem;
  border-radius: 10px;
  font: 600 .72rem/1.2 "Cinzel", serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
}
#app .ms-block .btn.ghost {
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(201, 168, 76, .45);
  box-shadow: none;
}
[data-theme="light"] #app .ms-block .btn.ghost { border-color: rgba(168, 132, 46, .5); }
#app .ms-block .btn.ghost:hover { border-color: var(--gold); color: var(--gold-light); }
[data-theme="light"] #app .ms-block .btn.ghost:hover { color: var(--gold); }
#app .ms-block .link { min-height: 44px; }
#app .ms-block .btn:focus-visible,
#app .ms-block .link:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
[data-theme="light"] #app .ms-block .btn:focus-visible,
[data-theme="light"] #app .ms-block .link:focus-visible { outline-color: var(--gold); }
#app .ms-block .free-quota-banner .btn { width: auto; min-height: 44px; }

/* Manuscrit non accessible : le texte reste lisible, seule l'illustration
   s'efface, et le surtitre devient une pastille « accès ». */
#app .ms-block.lock {
  opacity: 1;
  border-color: rgba(201, 168, 76, .2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
[data-theme="light"] #app .ms-block.lock { border-color: rgba(168, 132, 46, .24); }
#app .ms-block.lock .cc-manuscript-art-img { opacity: .6; filter: saturate(.5); }
#app .ms-block.lock > .label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border: 1px solid rgba(201, 168, 76, .4);
  border-radius: 999px;
  background: rgba(201, 168, 76, .1);
}
[data-theme="light"] #app .ms-block.lock > .label {
  border-color: rgba(168, 132, 46, .42);
  background: rgba(168, 132, 46, .1);
}
#app .ms-block.lock > .label::before { content: "\2726"; font-size: .9em; line-height: 1; }

@media (min-width: 701px) {
  #app .ms-block { padding: 1.3rem 1.3rem 1.45rem; }
  #app .ms-block > h2 { font-size: 1.38rem; }
}

/* Selection actions inside the manuscript frame, next to the selected passage (top/left set inline by celeste-enhancements.js). */
.natal-frame-wrap > .ms-sel-bar.cc-selection-actions { position: absolute !important; left: 50% !important; right: auto !important; bottom: auto !important; width: max-content; max-width: calc(100% - 16px); transform: translateX(-50%) !important; z-index: 40; padding: 0; border: 0; background: transparent; box-shadow: none; pointer-events: none; display: block; }
.natal-frame-wrap > .ms-sel-bar.cc-selection-actions.is-docked { left: 8px !important; right: 8px !important; width: auto; max-width: none; transform: none !important; }
.natal-frame-wrap > .ms-sel-bar .cc-selection-buttons { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 6px; max-width: none; padding: 6px; background: var(--deep-2); border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .38); pointer-events: auto; }
.natal-frame-wrap > .ms-sel-bar .cc-selection-buttons[hidden] { display: none !important; }
.natal-frame-wrap > .ms-sel-bar .cc-selection-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--stroke); border-radius: 10px; background: rgba(201, 168, 76, .14); color: var(--cream); font: 600 13px/1.15 Inter, sans-serif; white-space: nowrap; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.natal-frame-wrap > .ms-sel-bar .cc-selection-btn:hover, .natal-frame-wrap > .ms-sel-bar .cc-selection-btn:focus-visible { border-color: var(--gold); color: var(--gold-light); background: rgba(201, 168, 76, .24); }
@media (max-width: 420px) { .natal-frame-wrap > .ms-sel-bar .cc-selection-btn { padding: 8px 6px; font-size: 12.5px; } }
/* Offre Divin -60 % membres Céleste */
.divin-promo-badge { display: inline-block; margin-left: .45em; padding: .1em .55em; border-radius: 999px; font-size: .78em; font-weight: 700; line-height: 1.4; letter-spacing: .02em; background: #1a1426; color: #f3e3b0; border: 1px solid rgba(232, 207, 136, .55); vertical-align: middle; white-space: nowrap; }
.divin-promo-hint { margin: .5rem 0 0; color: var(--gold-light); }
.acct-divin-auto.divin-promo-hint { margin: 0 0 10px; }
.ia-bubble-time {
  font-size: .72rem;
  font-style: normal;
  line-height: 1.2;
  color: var(--muted);
  opacity: .85;
  letter-spacing: .01em;
  margin-top: -.1rem;
  unicode-bidi: plaintext;
}
.ia-bubble-me .ia-bubble-time { align-self: flex-end; text-align: end; }
.ia-bubble-bot .ia-bubble-time { align-self: flex-start; text-align: start; }