/* Mille et Toi — veillée nocturne : encre, or, papier. */

:root {
  --night: #14112e;
  --night-2: #1d1840;
  --night-3: #2a2257;
  --gold: #f0c46c;
  --gold-soft: #f7dca4;
  --paper: #f9f1df;
  --paper-edge: #e8d9bb;
  --ink: #2c2347;
  --rose: #e8927c;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Mulish", -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }

/* Navigation fluide (View Transitions API) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease; }

/* révélation au défilement */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.section-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.section-reveal.in { opacity: 1; transform: none; }

body {
  background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 55%, var(--night-3) 100%);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---------- navigation ---------- */
.topnav {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 1.6rem;
  padding: .8rem clamp(1rem, 4vw, 2.4rem);
  background: rgba(20, 17, 46, .72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(240, 196, 108, .14);
}
.topnav-brand {
  font-family: var(--serif); font-weight: 700; font-size: 1.1rem;
  color: var(--gold); text-decoration: none; letter-spacing: .04em;
}
.topnav-links { display: flex; gap: 1.3rem; margin: 0 auto; flex-wrap: wrap; }
.topnav-links a {
  color: #cfc6e6; text-decoration: none; font-size: .92rem; font-weight: 600;
  transition: color .15s;
}
.topnav-links a:hover, .topnav-links a[aria-current] { color: var(--gold-soft); }
.topnav-cta {
  background: var(--gold); color: var(--ink); font-weight: 700; font-size: .9rem;
  text-decoration: none; padding: .55rem 1.2rem; border-radius: 999px;
  transition: transform .15s, box-shadow .15s; white-space: nowrap;
}
.topnav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(240, 196, 108, .35); }
.topnav-lang {
  background: none; border: 1.5px solid rgba(180,169,214,.25);
  color: rgba(180,169,214,.6); border-radius: 999px;
  font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  padding: .3rem .65rem; cursor: pointer; transition: all .15s;
}
.topnav-lang:hover { border-color: rgba(247,220,164,.45); color: var(--gold-soft); }
.trial-badge {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: 100px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-decoration: none; flex-shrink: 0; transition: opacity .2s;
}
.trial-badge-ok   { background: rgba(126,203,138,.15); color: #7ecb8a; border: 1px solid rgba(126,203,138,.25); }
.trial-badge-warn { background: rgba(240,196,108,.15); color: var(--gold); border: 1px solid rgba(240,196,108,.25); }
.trial-badge-urgent { background: rgba(232,146,124,.15); color: #e8927c; border: 1px solid rgba(232,146,124,.25); animation: trial-pulse 2s ease-in-out infinite; }
@keyframes trial-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.topnav-hamburger {
  display: none;
  flex-direction: column; gap: 5px; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  padding: 7px 5px; border-radius: 8px;
  -webkit-tap-highlight-color: transparent; flex-shrink: 0;
}
.topnav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--cream); border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
  transform-origin: center;
}
.topnav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topnav-hamburger.open span:nth-child(2) { opacity: 0; }
.topnav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 760px) {
  .topnav-hamburger { display: flex; }
  .topnav-links {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(14, 12, 36, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    z-index: 200;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 2.2rem; padding: 2rem;
  }
  .topnav-links.open { display: flex; }
  .topnav-links a { font-size: 1.3rem !important; color: var(--cream) !important; font-weight: 600; padding: .4rem 1rem; }
  .topnav { justify-content: space-between; }
}

/* ---------- ciel ---------- */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sky::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 76% 14%, rgba(240, 196, 108, .075), transparent 62%),
    radial-gradient(760px 560px at 12% 68%, rgba(122, 110, 222, .11), transparent 62%),
    radial-gradient(620px 420px at 58% 88%, rgba(232, 146, 124, .055), transparent 62%);
}
.sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stars { position: absolute; inset: 0; background-repeat: repeat; }
.stars-a {
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, var(--gold-soft) 50%, transparent 51%),
    radial-gradient(1px 1px at 130px 80px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 240px 150px, var(--gold) 50%, transparent 51%),
    radial-gradient(1px 1px at 320px 40px, #fff9 50%, transparent 51%);
  background-size: 380px 220px;
  animation: twinkle 5s ease-in-out infinite alternate;
}
.stars-b {
  background-image:
    radial-gradient(1px 1px at 60px 120px, #ffffffaa 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 200px 50px, var(--gold-soft) 50%, transparent 51%),
    radial-gradient(1px 1px at 300px 190px, #fff7 50%, transparent 51%);
  background-size: 340px 240px;
  animation: twinkle 7s ease-in-out 1.2s infinite alternate;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }

.shooting-star {
  position: absolute; top: 12%; left: -8%;
  width: 130px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
  transform: rotate(-18deg);
  animation: shoot 9s ease-in 3s infinite;
  opacity: 0;
}
@keyframes shoot {
  0% { opacity: 0; transform: translateX(0) rotate(-18deg); }
  3% { opacity: 1; }
  9% { opacity: 0; transform: translateX(60vw) translateY(18vh) rotate(-18deg); }
  100% { opacity: 0; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; z-index: 1;
  min-height: 88vh;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 5rem; padding: 4rem clamp(1.5rem, 5vw, 4rem) 5rem;
}
.hero-body {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; max-width: 600px; flex: 1 1 340px;
}
.hero-illustration {
  flex: 0 0 300px; max-width: 300px;
  position: relative; display: none;
}
@media (min-width: 900px) {
  .hero-illustration { display: block; }
  .moon { right: 3%; top: 6%; }
}
@media (max-width: 899px) {
  .hero {
    flex-direction: column;
    gap: 2rem;
    min-height: auto;
    padding-bottom: 3rem;
  }
  .hero-has-stories .hero-illustration {
    display: block;
    flex: none;
    width: min(300px, 86vw);
    max-width: min(300px, 86vw);
    margin: 0 auto;
  }
}
.hi-card {
  background: rgba(249,241,223,.07);
  border: 1px solid rgba(240,196,108,.25);
  border-radius: 22px; padding: 1.8rem 1.6rem;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(240,196,108,.08);
  animation: rise .9s ease .6s both;
  cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.hi-card:hover {
  border-color: rgba(240,196,108,.45);
  box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(240,196,108,.15), 0 0 30px rgba(240,196,108,.08);
}
.hi-eyebrow {
  font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 1rem; text-align: center;
}
.hi-title {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 700;
  color: var(--cream); line-height: 1.3; text-align: center;
  margin-bottom: .5rem;
}
.hi-meta { font-size: .78rem; color: #9c91c4; text-align: center; margin-bottom: 1.2rem; }
.hi-player {
  display: flex; align-items: center; gap: .7rem;
  background: rgba(240,196,108,.08); border-radius: 12px; padding: .7rem .9rem;
  margin-bottom: 1rem;
}
.hi-play {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
}
.hi-bar {
  flex: 1; height: 4px; background: rgba(240,196,108,.2); border-radius: 2px; overflow: hidden;
}
.hi-progress {
  width: 38%; height: 100%; background: var(--gold); border-radius: 2px;
  animation: hi-scan 4s ease-in-out infinite alternate;
}
@keyframes hi-scan { from { width: 28%; } to { width: 65%; } }
.hi-time { font-size: .72rem; color: #9c91c4; white-space: nowrap; }
.hi-waves {
  display: flex; gap: 3px; align-items: flex-end; justify-content: center; height: 28px;
  opacity: .55;
}
.hi-waves i {
  width: 4px; background: var(--gold); border-radius: 2px;
  animation: hi-wave 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.hi-waves i:nth-child(1) { height: 8px; animation-delay: 0s; }
.hi-waves i:nth-child(2) { height: 18px; animation-delay: .15s; }
.hi-waves i:nth-child(3) { height: 24px; animation-delay: .3s; }
.hi-waves i:nth-child(4) { height: 14px; animation-delay: .45s; }
.hi-waves i:nth-child(5) { height: 20px; animation-delay: .6s; }
.hi-waves i:nth-child(6) { height: 10px; animation-delay: .75s; }
.hi-waves i:nth-child(7) { height: 22px; animation-delay: .9s; }
.hi-waves i:nth-child(8) { height: 16px; animation-delay: .05s; }
@keyframes hi-wave { 0%, 100% { transform: scaleY(.6); opacity: .6; } 50% { transform: scaleY(1); opacity: 1; } }
.hero-illustration.playing .hi-waves { opacity: 1; }
.hero-illustration.playing .hi-waves i { animation-duration: .8s; }
.hero-illustration.playing .hi-bar .hi-progress { animation-duration: 2.5s; }
.hero-illustration.playing .hi-card {
  border-color: rgba(240,196,108,.45);
  box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(240,196,108,.15), 0 0 40px rgba(240,196,108,.08);
}
.hi-stars span {
  position: absolute; color: var(--gold); font-size: .85rem;
  animation: starFloat 4s ease-in-out infinite;
  opacity: 0;
}
.hi-stars span:nth-child(1) { animation-delay: 0s; animation-duration: 3.6s; }
.hi-stars span:nth-child(2) { animation-delay: .8s; animation-duration: 4.2s; }
.hi-stars span:nth-child(3) { animation-delay: 1.6s; animation-duration: 3.8s; }
.hi-stars span:nth-child(4) { animation-delay: 2.4s; animation-duration: 4.5s; }
.hi-stars span:nth-child(5) { animation-delay: .4s; animation-duration: 3.4s; }
.hi-stars span:nth-child(6) { animation-delay: 1.2s; animation-duration: 4.0s; }
@keyframes starFloat {
  0%   { opacity: 0; transform: translateY(6px) scale(.7); }
  30%  { opacity: .8; }
  70%  { opacity: .6; }
  100% { opacity: 0; transform: translateY(-14px) scale(1.1); }
}
.moon {
  position: absolute; top: 7%; right: 10%;
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fdf3d9, var(--gold) 70%, #c89b4b);
  box-shadow: 0 0 60px 18px rgba(240, 196, 108, .25), 0 0 140px 60px rgba(240, 196, 108, .08);
  animation: drift 12s ease-in-out infinite alternate;
}
.crater { position: absolute; border-radius: 50%; background: #d9b269; opacity: .55; }
.c1 { width: 18px; height: 18px; top: 26%; left: 22%; }
.c2 { width: 11px; height: 11px; top: 58%; left: 52%; }
.c3 { width: 8px;  height: 8px;  top: 38%; left: 66%; }
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(14px); } }

.brand {
  font-family: var(--serif); font-weight: 600; letter-spacing: .35em;
  text-transform: uppercase; font-size: .8rem; color: var(--gold);
  animation: rise .9s ease both;
}
h1 {
  font-family: var(--serif); font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 800; line-height: 1.08; margin: 1.2rem 0;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  animation: rise .9s ease .12s both;
}
h1 em { font-style: italic; color: var(--gold); font-weight: 600; }
#hero-scene { transition: opacity .45s ease, transform .45s ease; display: inline-block; }
#hero-scene.hero-fade { opacity: 0; transform: translateY(8px); }
.lede {
  max-width: 33em; color: #d8cfeb; font-size: 1.05rem;
  animation: rise .9s ease .24s both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.cta {
  display: inline-block; margin-top: 2.2rem;
  background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: 1.05rem; text-decoration: none;
  padding: .95rem 2.2rem; border-radius: 999px; border: none; cursor: pointer;
  box-shadow: 0 6px 30px rgba(240, 196, 108, .35);
  transition: transform .18s ease, box-shadow .18s ease;
  animation: rise .9s ease .36s both;
}
.cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 40px rgba(240, 196, 108, .5); }
.cta-star { display: inline-block; transition: transform .3s; }
.cta:hover .cta-star { transform: rotate(180deg); }
.hero-note { margin-top: 1rem; font-size: .8rem; color: #9c91c4; animation: rise .9s ease .48s both; }

/* IT158 — Age-smart duration hint */
.dur-age-hint { font-size: .75rem; color: var(--gold); margin-top: .4rem; font-weight: 700; letter-spacing: .04em; }

/* IT157 — Returning user hero variant */
.hero--returning { min-height: 62vh; }
.hero--returning .lede { display: none; }
.hero--returning .hero-tryit { display: none; }
.hero--returning .hero-note { display: none; }
.hero-greeting {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: .4rem;
  animation: rise .5s ease both;
}

.hero-actions {
  display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap;
}
.hero-actions .cta { margin-top: 2.2rem; }
/* ---------- hero story preview card ---------- */
.sample-btn {
  margin-top: 1.4rem;
  display: flex; align-items: center; gap: .85rem;
  font: inherit; cursor: pointer; text-align: left; color: inherit;
  background: rgba(249,241,223,.06);
  border: 1px solid rgba(240,196,108,.2);
  border-radius: 16px; padding: .85rem .85rem .85rem 1rem;
  max-width: min(480px, 90vw);
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
  animation: rise .9s ease .42s both;
}
.sample-btn:hover {
  border-color: rgba(240,196,108,.45);
  background: rgba(249,241,223,.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(240,196,108,.1);
}
.hsc-emoji { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.hsc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.hsc-badge {
  display: inline-flex; width: fit-content;
  font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #7fc48a; border: 1px solid rgba(127,196,138,.35);
  border-radius: 999px; padding: .12rem .45rem; margin-bottom: .1rem;
}
.hsc-title {
  font-family: var(--serif); font-size: .92rem; font-weight: 700;
  color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.hsc-meta { font-size: .75rem; color: #9c91c4; }
.hsc-ctrl {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(240,196,108,.15); border: 1.5px solid rgba(240,196,108,.45);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-soft); font-size: .85rem; font-weight: 700;
  transition: all .15s;
}
.sample-btn:hover .hsc-ctrl { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.sample-btn.playing .hsc-ctrl { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.sample-wave { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.sample-btn.playing .sample-wave { display: inline-flex; }
.sample-btn.playing .sample-icon { display: none; }
.sample-wave i {
  width: 3px; background: var(--ink); border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}
.sample-wave i:nth-child(1) { animation-delay: 0s; }
.sample-wave i:nth-child(2) { animation-delay: .2s; }
.sample-wave i:nth-child(3) { animation-delay: .4s; }
.sample-wave i:nth-child(4) { animation-delay: .1s; }
.sample-wave i:nth-child(5) { animation-delay: .3s; }
.sample-wave i:nth-child(6) { animation-delay: .15s; }
@keyframes wave { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* ---------- étapes ---------- */
.steps { position: relative; z-index: 1; padding: 4rem 1.5rem 5rem; text-align: center; }
h2 {
  font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700;
  margin-bottom: 2.5rem;
}
h2 span { color: var(--gold); font-style: italic; font-weight: 500; }
/* Micro-décoration ✶ avant les titres de section (landing page uniquement) */
.demos > h2::before, .testimonials > h2::before, #comment > h2::before,
.offers > h2::before, .faq > h2::before {
  content: "✶"; display: block;
  color: rgba(240,196,108,.38); font-size: .8rem;
  margin-bottom: .4rem; letter-spacing: .05em;
}
.steps-row {
  display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap;
  max-width: 980px; margin: 0 auto;
}
.step {
  flex: 1 1 240px; max-width: 300px; text-align: left;
  background: rgba(249, 241, 223, .07);
  border: 1px solid rgba(240, 196, 108, .28);
  border-radius: 20px; padding: 1.7rem 1.6rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .22s ease, border-color .22s, box-shadow .22s;
}
.step:hover { transform: translateY(-4px); border-color: rgba(240,196,108,.5); box-shadow: 0 14px 40px rgba(240,196,108,.1); }
.step:nth-child(2) { transform: translateY(14px); }
.step:nth-child(2):hover { transform: translateY(10px); }
.step:nth-child(2).reveal.in { transform: translateY(14px); }
.step:nth-child(2).reveal.in:hover { transform: translateY(10px); }
.step-num {
  width: 48px; height: 48px; border-radius: 16px; margin-bottom: .9rem;
  background: linear-gradient(135deg, rgba(240,196,108,.18) 0%, rgba(240,196,108,.06) 100%);
  border: 1.5px solid rgba(240,196,108,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1;
  box-shadow: 0 4px 16px rgba(240,196,108,.1);
}
.step h3 { font-family: var(--serif); font-size: 1.25rem; margin-bottom: .5rem; }
.step p { color: #cfc6e6; font-size: .95rem; line-height: 1.55; }

/* ---------- démos ---------- */
.demos { position: relative; z-index: 1; padding: 3.5rem 1.5rem 2rem; text-align: center; }
.demos-sub { color: #b4a9d6; font-style: italic; margin: -1.6rem 0 1.6rem; }
.demo-age-filter {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.demo-age-btn {
  background: none; border: 1.5px solid rgba(180,169,214,.25);
  color: rgba(180,169,214,.55); border-radius: 999px;
  font: inherit; font-size: .82rem; padding: .38rem .9rem; cursor: pointer;
  transition: all .15s;
}
.demo-age-btn:hover { border-color: rgba(240,196,108,.4); color: var(--gold-soft); }
.demo-age-btn.demo-age-active { color: var(--gold); border-color: rgba(240,196,108,.5); background: rgba(240,196,108,.08); font-weight: 700; }
.demo-card[hidden] { display: none !important; }
.demos-row {
  display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap;
  max-width: 1060px; margin: 0 auto;
}
.demo-card {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  flex: 1 1 230px; max-width: 300px; text-align: left; text-decoration: none;
  background: rgba(249, 241, 223, .07);
  border: 1px solid rgba(240, 196, 108, .28); border-radius: 20px;
  padding: 1.5rem 1.4rem 1.25rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.demo-card:hover {
  transform: translateY(-4px); border-color: var(--gold);
  box-shadow: 0 16px 48px rgba(240, 196, 108, .16);
}
.demo-icon { font-size: 2.1rem; line-height: 1; margin-bottom: .3rem; display: block; }
.demo-free {
  position: absolute; top: -.7rem; right: 1.1rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); border-radius: 999px; padding: .22rem .75rem;
}
.demo-card strong { font-family: var(--serif); color: var(--paper); font-size: 1.12rem; line-height: 1.25; }
.demo-card em { color: #b4a9d6; font-size: .88rem; }
.demo-meta { color: #8d82b5; font-size: .8rem; }
.demo-row-bottom {
  margin-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.demo-listen {
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  color: var(--gold-soft); background: rgba(240, 196, 108, .1);
  border: 1.5px solid rgba(240, 196, 108, .45); border-radius: 999px;
  padding: .42rem .95rem; transition: all .15s; white-space: nowrap;
}
.demo-listen:hover { border-color: var(--gold); background: rgba(240, 196, 108, .2); }
.demo-listen.playing { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.demo-play {
  color: var(--gold-soft); font-weight: 700; font-size: .88rem;
  transition: color .15s;
}
.demo-card:hover .demo-play { color: var(--gold); }

/* ---------- bibliothèque ---------- */
.library { position: relative; z-index: 1; padding: 3.5rem 1.5rem 1rem; text-align: center; }
.library-row {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  max-width: 980px; margin: 0 auto;
}
.book {
  display: flex; flex-direction: column; gap: .2rem;
  min-width: 200px; max-width: 260px; text-align: left; text-decoration: none;
  background: linear-gradient(160deg, rgba(240,196,108,.14), rgba(249,241,223,.05));
  border: 1px solid rgba(240, 196, 108, .35);
  border-left: 5px solid var(--gold);
  border-radius: 10px 16px 16px 10px;
  padding: 1.1rem 1.3rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.book:hover { transform: translateY(-3px) rotate(-.5deg); box-shadow: 0 12px 40px rgba(240,196,108,.18); }
.book-star { color: var(--gold); font-size: .75rem; }
.book strong { font-family: var(--serif); color: var(--paper); font-size: 1.05rem; line-height: 1.25; }
.book em { color: #b4a9d6; font-size: .85rem; }
.book-ep { font-style: normal; font-size: .78rem; color: rgba(240,196,108,.7); }
.book-ring { position: absolute; top: .4rem; right: .4rem; }
.book-has-cover .book-ring { top: calc(52px + .4rem); }
.book { position: relative; }
.book-continue { font-size: .78rem; color: #e8927c; margin-top: .2rem; }
.book-progress { border-left-color: #e8927c; }
.book-all { border-style: dashed; opacity: .7; align-items: center; justify-content: center; font-size: .9rem; color: rgba(240,196,108,.7); }
/* IT160 — library card share button */
.book-wrap { position: relative; display: inline-flex; }
.book-share {
  position: absolute; top: .5rem; right: .5rem;
  background: rgba(240,196,108,.12); border: 1px solid rgba(240,196,108,.25);
  color: rgba(240,196,108,.7); border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; cursor: pointer; transition: background .15s, color .15s, opacity .15s;
  opacity: 0;
}
.book-wrap:hover .book-share { opacity: 1; }
.book-share:hover { background: rgba(240,196,108,.25); color: var(--gold); }
/* IT162 — favorites heart button */
.book-fav {
  position: absolute; bottom: .5rem; left: .5rem;
  background: none; border: none; color: rgba(240,196,108,.3);
  font-size: 1rem; cursor: pointer; padding: .1rem .2rem;
  opacity: 0; transition: color .2s, transform .15s, opacity .15s;
  line-height: 1;
}
.book-wrap:hover .book-fav { opacity: 1; }
.book-fav.book-fav-on { color: #e8927c; opacity: 1; }
.book-fav:hover { transform: scale(1.3); }
/* IT163 — story count badge on nav links */
.nav-count {
  display: inline-block; background: var(--gold); color: var(--ink);
  font-size: .58rem; font-weight: 700; line-height: 1;
  padding: .15rem .38rem; border-radius: 999px;
  margin-left: .3rem; vertical-align: middle;
}

/* ---------- cartes visuelles (étagère) ---------- */
.story-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 1rem; margin-top: .8rem;
}
.story-card {
  border-radius: 16px; overflow: hidden;
  background: rgba(249,241,223,.07);
  border: 1px solid rgba(240,196,108,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.story-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.35); border-color: rgba(240,196,108,.42); }
.story-card.playing { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(240,196,108,.4); }
.story-cover {
  height: 100px; display: flex; align-items: center; justify-content: center;
  position: relative;
  background: hsl(var(--cover-hue,220), 38%, 20%);
}
.story-cover::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 60%);
}
.cover-emoji { font-size: 2.6rem; position: relative; z-index: 1; }
.cover-ep {
  position: absolute; top: .45rem; right: .5rem;
  font-size: .62rem; font-weight: 900; letter-spacing: .07em;
  color: var(--gold); background: rgba(14,12,34,.7);
  border-radius: 999px; padding: .15rem .5rem;
}
.cover-play {
  position: absolute; bottom: .5rem; right: .5rem;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(240,196,108,.92); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: var(--ink); font-weight: 900;
  transition: transform .12s, background .12s;
  -webkit-tap-highlight-color: transparent;
}
.cover-play:hover { transform: scale(1.12); background: var(--gold); }
.cover-prog-ring {
  position: absolute; bottom: .35rem; left: .45rem;
  pointer-events: none;
}
.cover-prog-track {
  fill: none; stroke: rgba(255,255,255,.12); stroke-width: 2.5;
}
.cover-prog-fill {
  fill: none; stroke: var(--gold); stroke-width: 2.5;
  stroke-dasharray: 81.7;
  stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 16px 16px;
  transition: stroke-dashoffset .4s;
}
.story-card-body { padding: .7rem .75rem .75rem; }
.story-card-title {
  font-family: var(--serif); font-size: .9rem; font-weight: 700;
  color: var(--cream); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: .25rem;
}
.story-card-meta { font-size: .72rem; color: #9c91c4; margin-bottom: .3rem; }
.card-actions {
  display: flex; gap: .35rem; align-items: center; margin-top: .1rem;
}
.card-gift-btn {
  background: none; border: none; padding: .2rem .35rem; cursor: pointer;
  font-size: .9rem; color: rgba(240,196,108,.35); transition: color .15s, transform .12s;
  line-height: 1;
}
.card-gift-btn:hover { color: rgba(240,196,108,.9); transform: scale(1.2); }
.card-fav {
  background: none; border: none; padding: .2rem .35rem; cursor: pointer;
  font-size: 1rem; color: rgba(180,169,214,.35); transition: color .15s, transform .12s;
  line-height: 1;
}
.card-fav:hover { color: #f7dca4; transform: scale(1.2); }
.card-fav-on { color: #f7dca4 !important; }
.card-del {
  background: none; border: none; padding: .2rem .35rem; cursor: pointer;
  font-size: .8rem; color: rgba(180,169,214,.25); transition: color .15s;
  margin-left: auto;
}
.card-del:hover { color: rgba(220,80,80,.6); }
.card-del-confirm {
  background: rgba(220,80,80,.12); border: 1px solid rgba(220,80,80,.3);
  color: rgba(240,100,100,.85); border-radius: 6px;
  font: inherit; font-size: .7rem; padding: .15rem .5rem; cursor: pointer;
  margin-left: auto;
}
.card-del-confirm:hover { background: rgba(220,80,80,.22); }
.card-del-cancel {
  background: none; border: 1px solid rgba(180,169,214,.2);
  color: rgba(180,169,214,.5); border-radius: 6px;
  font: inherit; font-size: .7rem; padding: .15rem .5rem; cursor: pointer;
}
.story-card-deleting { opacity: .55; }

/* Barre de recherche étagère */
.shelf-stats-line {
  font-size: .82rem; color: #7a6e9e; margin: -.4rem 0 1.2rem;
  letter-spacing: .02em;
}
.shelf-stats-line[hidden] { display: none; }
.shelf-stats-sep { margin: 0 .4em; opacity: .5; }
.shelf-search-wrap {
  padding: 0 0 1.4rem;
  display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
}
.shelf-fav-filter {
  background: none; border: 1.5px solid rgba(180,169,214,.25);
  color: rgba(180,169,214,.55); border-radius: 999px;
  font: inherit; font-size: .85rem; padding: .5rem 1rem; cursor: pointer;
  white-space: nowrap; transition: all .15s;
}
.shelf-fav-filter:hover { border-color: rgba(247,220,164,.4); color: var(--gold-soft); }
.shelf-fav-filter-on { color: #f7dca4 !important; border-color: rgba(247,220,164,.4) !important; }
.shelf-unlistened-filter {
  background: none; border: 1.5px solid rgba(180,169,214,.25);
  color: rgba(180,169,214,.55); border-radius: 999px;
  font: inherit; font-size: .85rem; padding: .5rem 1rem; cursor: pointer;
  white-space: nowrap; transition: all .15s;
}
.shelf-unlistened-filter:hover { border-color: rgba(126,203,138,.4); color: #7ecb8a; }
.shelf-unlistened-filter-on { color: #7ecb8a !important; border-color: rgba(126,203,138,.4) !important; }
.shelf-inprogress-filter {
  background: none; border: 1.5px solid rgba(180,169,214,.25);
  color: rgba(180,169,214,.55); border-radius: 999px;
  font: inherit; font-size: .85rem; padding: .5rem 1rem; cursor: pointer;
  white-space: nowrap; transition: all .15s;
}
.shelf-inprogress-filter:hover { border-color: rgba(232,146,124,.4); color: var(--rose); }
.shelf-inprogress-filter-on { color: var(--rose) !important; border-color: rgba(232,146,124,.4) !important; }
.shelf-search {
  flex: 1; max-width: 420px;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(240,196,108,.18);
  border-radius: 999px; color: var(--cream);
  font: inherit; font-size: .95rem; padding: .7rem 1.2rem;
  outline: none; transition: border-color .15s;
}
.shelf-search::placeholder { color: rgba(180,169,214,.4); }
.shelf-search:focus { border-color: rgba(240,196,108,.45); }
.shelf-no-results {
  text-align: center; color: rgba(180,169,214,.5);
  padding: 2rem; font-size: .95rem;
}

.story-card-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .75rem;
  border-top: 1px solid rgba(240,196,108,.1);
  font-size: .72rem; color: #9c91c4; text-decoration: none;
  transition: color .12s;
}
.story-card-link:hover { color: var(--gold-soft); }
.story-card-link.story-card-resume { color: var(--gold); font-weight: 700; background: rgba(240,196,108,.06); border-top-color: rgba(240,196,108,.22); }
.story-card-link.story-card-resume:hover { color: var(--gold-soft); }

/* ---------- mini-player flottant (style Spotify) ---------- */
.mini-player {
  position: fixed; left: 1rem; right: 1rem;
  bottom: calc(72px + env(safe-area-inset-bottom));
  background: rgba(20, 18, 44, .97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(240,196,108,.3);
  border-radius: 18px;
  padding: .8rem 1rem;
  display: flex; align-items: center; gap: .9rem;
  z-index: 18;
  box-shadow: 0 12px 44px rgba(0,0,0,.55);
  animation: slide-up .3s ease both;
}
@media (min-width: 761px) {
  .mini-player { bottom: 1rem; max-width: 520px; left: 50%; right: auto; transform: translateX(-50%); }
  .mini-player.animating { animation: none; } /* skip re-trigger on desktop */
}
.mini-player[hidden] { display: none; }
.mini-emoji { font-size: 1.6rem; flex-shrink: 0; }
.mini-info { flex: 1; min-width: 0; }
.mini-title {
  font-family: var(--serif); font-size: .88rem; font-weight: 700;
  color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-bar-wrap { position: relative; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; margin-top: .35rem; }
.mini-bar-fill { height: 100%; background: var(--gold); border-radius: 2px; width: 0; transition: width .4s linear; }
.mini-controls { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.mini-play-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold); border: none; cursor: pointer;
  font-size: .9rem; color: var(--ink); font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s; -webkit-tap-highlight-color: transparent;
}
.mini-play-btn:hover { transform: scale(1.1); }
.mini-close {
  background: none; border: none; cursor: pointer;
  color: #9c91c4; font-size: 1rem; padding: .2rem;
  -webkit-tap-highlight-color: transparent;
}
.mini-close:hover { color: var(--cream); }
.mini-open { font-size: .72rem; color: var(--gold-soft); text-decoration: none; }
.mini-open:hover { color: var(--gold); }

/* ---------- offres ---------- */
.offers { position: relative; z-index: 1; padding: 3rem 1.5rem 4rem; text-align: center; }
.offers-row {
  display: flex; gap: 1.4rem; justify-content: center; align-items: stretch;
  flex-wrap: wrap; max-width: 980px; margin: 0 auto;
}
.offer {
  flex: 1 1 240px; max-width: 310px; display: flex; flex-direction: column;
  background: rgba(249, 241, 223, .07);
  border: 1px solid rgba(240, 196, 108, .28); border-radius: 22px;
  padding: 2rem 1.7rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .22s ease, border-color .22s, box-shadow .22s;
  position: relative;
}
.offer:hover { transform: translateY(-4px); border-color: rgba(240,196,108,.5); box-shadow: 0 18px 56px rgba(240,196,108,.12); }
.offer h3 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: .6rem; }
.offer-price { font-family: var(--serif); font-size: 2.4rem; font-weight: 800; color: var(--gold); line-height: 1.1; margin: .4rem 0; }
.offer-price small { font-size: 1rem; font-weight: 500; color: #b4a9d6; }
.offer-desc { color: #cfc6e6; font-size: .92rem; margin: .8rem 0 1.4rem; flex: 1; line-height: 1.55; }
.offer-cta { align-self: center; margin-top: auto; }
.offer-star {
  background: linear-gradient(145deg, rgba(240,196,108,.14) 0%, rgba(240,196,108,.06) 100%);
  border-color: rgba(240,196,108,.55);
  box-shadow: 0 12px 60px rgba(240, 196, 108, .18), 0 0 0 1px rgba(240,196,108,.08);
  transform: scale(1.03);
}
.offer-star:hover { transform: scale(1.03) translateY(-4px); }
@media (max-width: 680px) { .offer-star { order: -1; } }
.offer-star::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), rgba(240,196,108,.5), var(--gold), transparent);
  border-radius: 22px 22px 0 0;
}
.offer-badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); border-radius: 999px;
  padding: .25rem .9rem; align-self: center; margin-bottom: 1rem;
}
.offer .cta { margin-top: auto; }
.offer-features {
  list-style: none; padding: 0; margin: .8rem 0 1.4rem; flex: 1;
  display: flex; flex-direction: column; gap: .45rem;
}
.offer-features li {
  font-size: .9rem; color: #cfc6e6; padding-left: 1.3rem; position: relative; line-height: 1.4;
}
.offer-features li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--gold-soft); font-size: .8rem; font-weight: 700; top: .06em;
}
.offer-star .offer-features li::before { color: var(--gold); }
.offers-note { margin-top: 1.8rem; color: #9c91c4; font-style: italic; font-size: .9rem; }
/* IT331 — per-story price anchor */
.offer-per-story { font-size: .76rem; color: rgba(240,196,108,.55); margin: .3rem 0 0; text-align: center; }

/* ---------- faq ---------- */
.faq { position: relative; z-index: 1; padding: 2rem 1.5rem 5rem; }
.faq h2 { text-align: center; }
.faq-list { max-width: 680px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid rgba(240, 196, 108, .22);
  padding: 1.1rem .4rem;
}
.faq summary {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  transition: color .15s;
}
.faq summary:hover { color: var(--gold-soft); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "✶"; color: var(--gold); font-size: .8rem; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { color: #cfc6e6; padding: .8rem .2rem .2rem; font-size: .95rem; }

/* ---------- atelier / papier ---------- */
.atelier { position: relative; z-index: 1; padding: 2rem 1.5rem 6rem; }
.paper {
  max-width: 680px; margin: 0 auto;
  background:
    radial-gradient(circle at 8% 4%, rgba(240,196,108,.18), transparent 30%),
    var(--paper);
  color: var(--ink);
  border-radius: 22px;
  padding: 2.8rem clamp(1.4rem, 5vw, 3rem) 3rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--paper-edge);
}
.paper-title { font-family: var(--serif); color: var(--ink); font-size: 2rem; text-align: center; margin-bottom: .3rem; }
.paper-sub { text-align: center; color: #7c6f9b; margin-bottom: 2.2rem; font-style: italic; }

.grid { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.field { display: block; flex: 1 1 200px; margin-bottom: 1.1rem; border: 0; padding: 0; }
.field-s { flex: 0 1 160px; }
.field > span {
  display: block; font-weight: 700; font-size: .85rem; letter-spacing: .03em;
  margin-bottom: .45rem; color: var(--ink);
}
.field > span em { color: #8a7fa8; font-weight: 400; }
input[type="text"], input:not([type]), select {
  width: 100%; font: inherit; color: var(--ink);
  background: #fffdf7; border: 1.5px solid var(--paper-edge); border-radius: 12px;
  padding: .75rem 1rem; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240, 196, 108, .25); }

.seg { display: flex; gap: .5rem; flex-wrap: wrap; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg i {
  display: inline-block; font-style: normal; font-weight: 600; font-size: .9rem;
  padding: .5rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--paper-edge); background: #fffdf7;
  transition: all .15s;
}
.seg input:checked + i { background: var(--ink); color: var(--gold-soft); border-color: var(--ink); }

.chips { display: flex; gap: .45rem; flex-wrap: wrap; margin: -.4rem 0 1.3rem; }
.chips button {
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  color: #6d5f96; background: transparent;
  border: 1.5px dashed #c9bbdd; border-radius: 999px; padding: .35rem .85rem;
  transition: all .15s;
}
.chips button:hover { border-color: var(--rose); color: var(--rose); transform: translateY(-1px); }
.chips button.age-chip { border-style: solid; border-color: #a8d5b5; color: #2d7a4f; background: rgba(168, 213, 181, .12); }
.chips button.age-chip:hover { border-color: #2d7a4f; color: #2d7a4f; background: rgba(168, 213, 181, .25); }

.cta-submit { display: block; width: 100%; margin-top: 1.4rem; text-align: center; }
.form-err { color: #b3403f; text-align: center; margin-top: 1rem; font-weight: 600; }

footer { position: relative; z-index: 1; padding: 3rem 1.5rem 2rem; color: #8d82b5; font-size: .9rem; border-top: 1px solid rgba(240, 196, 108, .14); }
.footer-grid {
  display: flex; gap: 2.5rem; flex-wrap: wrap; justify-content: space-between;
  max-width: 980px; margin: 0 auto 2rem;
}
.footer-col { flex: 1 1 220px; display: flex; flex-direction: column; gap: .45rem; }
.footer-brand { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--gold); }
.footer-col h4 {
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: #b4a9d6; margin-bottom: .3rem;
}
.footer-col a { color: #cfc6e6; text-decoration: none; transition: color .15s; }
.footer-col a:hover { color: var(--gold-soft); }
.footer-legal { text-align: center; font-size: .8rem; color: #6f6494; }

/* ---------- page étagère ---------- */
.shelf-page { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
.shelf-page .library-row { justify-content: flex-start; margin-top: 2.5rem; }
.shelf-empty {
  text-align: center; margin-top: 3rem; padding: 3rem 2rem;
  border: 1.5px dashed rgba(240,196,108,.35); border-radius: 20px;
  background: rgba(249,241,223,.03);
}
.shelf-empty-moon { font-size: 3.5rem; margin-bottom: 1rem; animation: drift 8s ease-in-out infinite alternate; display: block; }
.shelf-empty-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--cream); margin-bottom: .6rem; }
.shelf-empty-text { color: #9c91c4; font-size: .95rem; max-width: 30em; margin: 0 auto 1.8rem; line-height: 1.6; }
.shelf-note { margin-top: 3rem; text-align: center; color: #8d82b5; font-size: .88rem; max-width: 36em; margin-left: auto; margin-right: auto; }

/* ---- sauvegarde bibliothèque ---- */
.shelf-backup {
  margin: 2.5rem auto 0; max-width: 480px;
  border: 1px dashed rgba(255,255,255,.14); border-radius: 16px;
  padding: 1.2rem 1.4rem;
}
.shelf-backup-title { font-family: var(--serif); font-size: .95rem; color: rgba(247,220,164,.65); margin: 0 0 .3rem; }
.shelf-backup-hint { font-size: .82rem; color: #7a7198; margin: 0 0 1rem; line-height: 1.5; }
.shelf-backup-btns { display: flex; gap: .7rem; flex-wrap: wrap; }
.shelf-backup-btn {
  font-size: .82rem; color: rgba(247,220,164,.7); cursor: pointer;
  background: none; border: 1px solid rgba(240,196,108,.28); border-radius: 999px;
  padding: .38rem .9rem; font-family: var(--sans); transition: all .15s;
}
.shelf-backup-btn:hover { border-color: var(--gold); color: var(--gold); }
.shelf-backup-import-btn { color: rgba(200,200,240,.7); border-color: rgba(200,200,240,.22); }
.shelf-backup-import-btn:hover { border-color: rgba(200,200,240,.6); color: var(--cream); }
.shelf-backup-msg { font-size: .82rem; color: #7fc48a; margin: .6rem 0 0; }
.shelf-backup-msg[hidden] { display: none; }

/* ---------- tonight bar ---------- */
.tonight-bar {
  display: flex; align-items: center; gap: 1.2rem;
  background: linear-gradient(135deg, rgba(240,196,108,.12) 0%, rgba(249,241,223,.06) 100%);
  border: 1.5px solid rgba(240,196,108,.35);
  border-radius: 20px; padding: 1.1rem 1.4rem;
  margin-bottom: 2.2rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: tonightIn .4s ease both;
}
@keyframes tonightIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.tonight-moon { font-size: 1.8rem; flex-shrink: 0; line-height: 1; }
.tonight-body { flex: 1; min-width: 0; }
.tonight-eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: .2rem;
}
.tonight-eyebrow strong { color: var(--gold); }
.tonight-suggestion {
  font-family: var(--serif); font-size: 1.05rem; color: var(--cream);
  line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tonight-cta {
  display: inline-block; flex-shrink: 0;
  background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: .88rem;
  padding: .55rem 1.15rem; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  transition: transform .12s, box-shadow .12s;
}
.tonight-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(240,196,108,.4); }
@media (max-width: 540px) {
  .tonight-bar { flex-wrap: wrap; gap: .8rem; }
  .tonight-suggestion { font-size: .95rem; white-space: normal; }
  .tonight-cta { width: 100%; text-align: center; }
}

/* ---------- Défi du jour ---------- */
.daily-challenge:not([hidden]) {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(232,146,124,.08);
  border: 1px solid rgba(232,146,124,.22);
  border-radius: 16px; padding: .85rem 1.2rem;
  margin-bottom: 1.6rem;
  animation: tonightIn .4s ease both;
}
.dc-badge {
  flex-shrink: 0;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(232,146,124,.2); color: var(--rose);
  border: 1px solid rgba(232,146,124,.3);
  border-radius: 999px; padding: .2rem .55rem;
}
.dc-text {
  flex: 1; min-width: 0;
  font-size: .9rem; color: rgba(249,241,223,.7); line-height: 1.4;
}
.dc-cta {
  flex-shrink: 0;
  font-size: .78rem; font-weight: 700;
  color: var(--rose); text-decoration: none;
  white-space: nowrap;
  padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid rgba(232,146,124,.35);
  transition: background .15s;
}
.dc-cta:hover { background: rgba(232,146,124,.1); }
@media (max-width: 540px) {
  .daily-challenge:not([hidden]) { flex-wrap: wrap; }
  .dc-cta { width: 100%; text-align: center; }
}

/* ---------- pages thématiques ---------- */
.theme-page { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 4rem 1.5rem 4rem; }
.theme-copy { margin: 2.5rem 0; }
.theme-copy p { color: #d8cfeb; font-size: 1.08rem; line-height: 1.75; margin-bottom: 1.2em; }
.theme-demo { margin: 0 auto; display: flex; max-width: 460px; }
.theme-cta { margin-top: 2.6rem; }
.theme-others { margin-top: 3.5rem; text-align: center; }
.theme-others h2 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.theme-link {
  display: block; color: var(--gold-soft); text-decoration: none;
  font-weight: 600; padding: .5rem; transition: color .15s;
}
.theme-link:hover { color: var(--gold); }

/* ---------- accessibilité ---------- */
:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 50;
  background: var(--gold); color: var(--ink); font-weight: 700;
  padding: .8rem 1.4rem; border-radius: 0 0 12px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- pages légales ---------- */
.legal h2 { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); text-align: left; margin: 1.6rem 0 .5rem; }
.legal h2:first-child { margin-top: 0; }
.legal p:first-of-type::first-letter { font-size: inherit; float: none; padding: 0; color: inherit; font-weight: inherit; }

/* ---------- tissage (génération) ---------- */
.weaving {
  position: fixed; inset: 0; z-index: 10;
  background: radial-gradient(circle at 50% 38%, var(--night-3), var(--night) 75%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
}
.weaving[hidden] { display: none; }
.weaving-moon {
  position: relative;
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fdf3d9, var(--gold) 70%, #c89b4b);
  box-shadow: 0 0 50px 14px rgba(240, 196, 108, .3);
  animation: breathe 2.6s ease-in-out infinite;
  margin-bottom: 2rem;
}
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.weaving-step { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-soft); min-height: 2.2em; max-width: 24em; }
.weaving-hint { color: #9c91c4; font-size: .9rem; margin-top: .6rem; }
.weaving.error .weaving-moon { animation: none; filter: grayscale(.55) brightness(.8); }
.weaving.error .weaving-step { color: var(--rose); }
.weaving-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; justify-content: center; }
.weaving-actions .cta { margin-top: 0; }

/* ---------- profils enfants ---------- */
.profiles { margin-bottom: 1.4rem; }
.profiles-label {
  display: block; font-weight: 700; font-size: .85rem; letter-spacing: .03em;
  margin-bottom: .5rem; color: var(--ink);
}
.profiles-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.profile-chip {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  color: var(--ink); background: #fffdf7;
  border: 1.5px solid var(--paper-edge); border-radius: 999px; padding: .5rem 1.1rem;
  transition: all .15s;
}
.profile-chip:hover { border-color: var(--gold); transform: translateY(-1px); }
.profile-chip.active { background: var(--ink); color: var(--gold-soft); border-color: var(--ink); }
.profile-new { border-style: dashed; color: #6d5f96; background: transparent; }

.spark {
  position: absolute; top: 50%; left: 50%;
  color: var(--gold-soft); pointer-events: none;
  animation: spark .95s ease-out forwards;
}
@keyframes spark {
  from { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.05); opacity: 0; }
}

/* ---------- mode veillée ---------- */
.veil {
  position: fixed; inset: 0; z-index: 40; cursor: pointer;
  background: radial-gradient(circle at 50% 32%, #141031, #08061a 75%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem; text-align: center; padding: 2rem;
}
.veil[hidden] { display: none; }
.veil-moon {
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #e9dcc0, #cda860 70%, #93743a);
  box-shadow: 0 0 70px 18px rgba(240, 196, 108, .16);
  opacity: .85;
  animation: breathe 5.5s ease-in-out infinite;
  margin-bottom: 1.5rem;
}
.veil-title {
  font-family: var(--serif); font-style: italic; font-size: 1.3rem;
  color: rgba(247, 220, 164, .65);
}
.veil-time { color: rgba(180, 169, 214, .55); font-size: .95rem; }
.veil.paused .veil-moon, .veil.paused .veil-mascot { animation-play-state: paused; opacity: .45; }
.veil.paused .veil-time { color: var(--gold-soft); }
.veil-hint {
  position: absolute; bottom: 2.2rem; left: 0; right: 0;
  color: rgba(180, 169, 214, .3); font-size: .8rem;
}
.veil-exit {
  position: absolute; top: 1.3rem; right: 1.4rem;
  font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
  color: rgba(247, 220, 164, .85);
  background: rgba(20, 17, 46, .55);
  border: 1.5px solid rgba(247, 220, 164, .4); border-radius: 999px;
  padding: .6rem 1.3rem;
  transition: all .15s;
}
.veil-exit:hover { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.veil-controls {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.4rem;
}
.veil-lullaby, .veil-timer-btn {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  color: rgba(180, 169, 214, .55); background: transparent;
  border: 1.5px solid rgba(180, 169, 214, .25); border-radius: 999px;
  padding: .55rem 1.2rem;
  transition: all .15s;
}
.veil-lullaby.active, .veil-timer-btn.active {
  color: rgba(247, 220, 164, .8); border-color: rgba(247, 220, 164, .4);
}
.veil-lullaby:hover, .veil-timer-btn:hover { border-color: var(--gold-soft); }
.veil-timer-display {
  color: rgba(247, 220, 164, .7); font-size: .85rem; margin-top: .5rem; letter-spacing: .03em;
}

/* ---------- bannière démo ---------- */
.demo-banner {
  text-align: center; margin-top: 2.6rem; padding: 2.2rem 1.6rem;
  border: 1.5px solid rgba(240, 196, 108, .45); border-radius: 20px;
  background: linear-gradient(160deg, rgba(240, 196, 108, .12), rgba(249, 241, 223, .04));
}
.demo-banner p { color: #d8cfeb; font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.5rem; }
.demo-banner strong { color: var(--gold); }
.demo-banner .cta { margin-top: 0; }
.demo-banner-eyebrow { font-size: .78rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(240,196,108,.6) !important; margin-bottom: .4rem !important; }
.demo-banner-title { font-family: var(--serif); font-size: clamp(1.2rem, 4vw, 1.6rem) !important; font-weight: 700; color: var(--cream) !important; margin-bottom: 1.2rem !important; }
.demo-quick-form { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; max-width: 360px; margin: 0 auto; }
.demo-quick-input {
  flex: 1 1 160px; min-width: 0;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(240,196,108,.35);
  border-radius: 999px; color: var(--cream); padding: .65rem 1.1rem;
  font: 700 1rem var(--serif); outline: none; transition: border-color .15s;
}
.demo-quick-input:focus { border-color: var(--gold); }
.demo-quick-input::placeholder { color: rgba(249,241,223,.3); font-style: italic; font-weight: 400; }
.demo-quick-btn {
  background: var(--gold); color: var(--ink); border: none; cursor: pointer;
  font: 800 .9rem var(--sans); padding: .65rem 1.4rem; border-radius: 999px;
  white-space: nowrap; transition: transform .15s, box-shadow .15s;
}
.demo-quick-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(240,196,108,.4); }

/* Theme discover pages — inline name form */
.theme-quick-form { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; max-width: 380px; margin: 1rem auto 0; }
.theme-quick-input {
  flex: 1 1 160px; min-width: 0;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(240,196,108,.35);
  border-radius: 999px; color: var(--cream); padding: .65rem 1.1rem;
  font: 700 1rem var(--serif); outline: none; transition: border-color .15s;
}
.theme-quick-input:focus { border-color: var(--gold); }
.theme-quick-input::placeholder { color: rgba(249,241,223,.3); font-style: italic; font-weight: 400; }
.theme-quick-btn {
  background: var(--gold); color: var(--ink); border: none; cursor: pointer;
  font: 800 .9rem var(--sans); padding: .65rem 1.4rem; border-radius: 999px;
  white-space: nowrap; transition: transform .15s, box-shadow .15s;
}
.theme-quick-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(240,196,108,.4); }

/* ---------- invitation de fin d'histoire ---------- */
.next-story {
  text-align: center; margin-top: 3rem; padding: 2.4rem 1.6rem;
  border: 1.5px dashed rgba(240, 196, 108, .45); border-radius: 20px;
  background: rgba(240, 196, 108, .05);
  animation: rise .8s ease both;
}
.next-story-fin {
  font-family: var(--serif); font-style: italic; color: var(--gold);
  letter-spacing: .25em; margin-bottom: 1rem;
}
.next-story-text { color: #d8cfeb; margin-bottom: 1.6rem; font-size: 1.05rem; }
.next-story .cta { margin-top: 0; }
.story-shelf-link { display: block; text-align: center; margin-top: .8rem; font-size: .9rem; }
.next-story-kid-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: .9rem; padding: .6rem 1.4rem;
  background: rgba(20,17,46,.55); border: 1.5px solid rgba(240,196,108,.28);
  border-radius: 999px; color: var(--gold-soft); text-decoration: none;
  font-size: .9rem; font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.next-story-kid-btn:hover { background: rgba(240,196,108,.1); border-color: var(--gold); color: var(--gold); }

/* Upsell card — shown after 2+ stories */
.upsell-card {
  margin: 1.4rem 0 .4rem;
  background: linear-gradient(135deg, rgba(240,196,108,.1) 0%, rgba(122,110,222,.12) 100%);
  border: 1.5px solid rgba(240,196,108,.35);
  border-radius: 20px; padding: 1.4rem 1.6rem;
  text-align: center; animation: rise .5s ease both;
}
.upsell-emoji { font-size: 1.5rem; margin-bottom: .4rem; }
.upsell-title {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 700;
  color: var(--cream); margin-bottom: .35rem;
}
.upsell-desc { font-size: .87rem; color: #9c91c4; margin-bottom: 1rem; line-height: 1.5; }
.upsell-cta {
  display: inline-block; background: var(--gold); color: var(--ink);
  font-weight: 800; font-size: .88rem; padding: .55rem 1.4rem;
  border-radius: 999px; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.upsell-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(240,196,108,.35); }

/* ── Demo end upsell (IT105) ────────────────────────────────────────────── */
.demo-end-upsell {
  margin: 1.2rem 0 .4rem;
  background: linear-gradient(135deg, rgba(240,196,108,.13) 0%, rgba(80,60,160,.15) 100%);
  border: 2px solid rgba(240,196,108,.4);
  border-radius: 22px; padding: 1.6rem 1.6rem 1.4rem;
  text-align: center; animation: rise .5s ease both;
}
.demo-end-emoji { font-size: 1.8rem; margin-bottom: .5rem; }
.demo-end-title {
  font-family: var(--serif); font-size: 1.18rem; font-weight: 700;
  color: var(--cream); margin-bottom: .4rem; line-height: 1.3;
}
.demo-end-title em { color: var(--gold); font-style: normal; }
.demo-end-sub { font-size: .88rem; color: #9c91c4; margin-bottom: 1.1rem; line-height: 1.5; }
.demo-end-form {
  display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center; max-width: 340px; margin: 0 auto;
}
.demo-end-input {
  flex: 1 1 140px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(240,196,108,.35);
  color: var(--cream); border-radius: 12px; padding: .65rem 1rem;
  font-family: var(--sans); font-size: .95rem; outline: none;
}
.demo-end-input:focus { border-color: var(--gold); }
.demo-end-input::placeholder { color: rgba(249,241,223,.3); font-style: italic; }
.demo-end-btn {
  background: var(--gold); color: var(--ink);
  border: none; border-radius: 12px; padding: .65rem 1.2rem;
  font-family: var(--sans); font-size: .9rem; font-weight: 800;
  cursor: pointer; transition: transform .15s, box-shadow .15s; white-space: nowrap;
}
.demo-end-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(240,196,108,.4); }

/* ── Share friend card (IT106) ──────────────────────────────────────────── */
.share-friend {
  margin: 2rem auto 1rem; max-width: 480px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(180,169,214,.18);
  border-radius: 20px; padding: 1.6rem 1.8rem;
}
.share-friend-inner { text-align: center; }
.share-friend-emoji { font-size: 1.5rem; margin-bottom: .5rem; }
.share-friend-title {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 700;
  color: var(--cream); margin-bottom: .3rem;
}
.share-friend-sub { font-size: .84rem; color: #7a6e9e; margin-bottom: 1.1rem; line-height: 1.5; }
.share-friend-btns { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.share-friend-wa {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #25D366; color: #fff;
  border-radius: 50px; padding: .55rem 1.2rem;
  font-family: var(--sans); font-size: .88rem; font-weight: 700;
  text-decoration: none; transition: opacity .18s;
}
.share-friend-wa:hover { opacity: .88; }
.share-friend-copy {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 1.5px solid rgba(180,169,214,.3); color: #9c91c4;
  border-radius: 50px; padding: .55rem 1.1rem;
  font-family: var(--sans); font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: border-color .18s, color .18s;
}
.share-friend-copy:hover { border-color: var(--gold); color: var(--gold); }

/* IT142 — Recommend to friend card (story end screen) */
.story-share-friend {
  background: linear-gradient(135deg, rgba(240,196,108,.1) 0%, rgba(232,146,124,.07) 100%);
  border: 1.5px solid rgba(240,196,108,.3);
  border-radius: 18px; padding: 1.1rem 1.3rem;
  text-align: center; margin: 1rem 0;
  animation: rise .4s ease both;
}
.story-share-friend[hidden] { display: none; }
.ssf-title { font-family: var(--serif); font-size: .95rem; color: var(--gold-soft); margin-bottom: .35rem; }
.ssf-sub { font-size: .8rem; color: rgba(249,241,223,.55); margin-bottom: .85rem; line-height: 1.4; }
.ssf-btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.ssf-wa {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #25d366; color: #fff; border-radius: 100px;
  padding: .45rem 1rem; font-size: .82rem; font-weight: 700;
  text-decoration: none; transition: opacity .15s;
}
.ssf-wa:hover { opacity: .88; }
.ssf-copy {
  background: none; border: 1px solid rgba(240,196,108,.35); color: rgba(249,241,223,.7);
  border-radius: 100px; padding: .45rem 1rem; font-size: .82rem;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.ssf-copy:hover { border-color: var(--gold); color: var(--gold); }

/* ── Thème du mois (IT133) ──────────────────────────────────────────────── */
.theme-mois {
  position: relative;
  margin: 0 auto 1.5rem; max-width: 680px;
  background: linear-gradient(135deg, rgba(248,160,60,.1) 0%, rgba(200,120,220,.1) 100%);
  border: 1px solid rgba(248,200,108,.3);
  border-radius: 18px; padding: 1.4rem 1.8rem 1.4rem 1.6rem;
  text-align: center;
}
.theme-mois-close {
  position: absolute; top: .7rem; right: .8rem;
  background: none; border: none; color: #6c6090;
  font-size: .9rem; cursor: pointer; padding: .3rem;
}
.theme-mois-badge {
  display: inline-block;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
  background: rgba(240,196,108,.1); border: 1px solid rgba(240,196,108,.25);
  border-radius: 99px; padding: .2rem .8rem; margin-bottom: .6rem;
}
.theme-mois-title {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
  color: var(--cream); margin-bottom: .35rem;
}
.theme-mois-sub { font-size: .88rem; color: #cfc6e6; margin-bottom: 1rem; line-height: 1.5; }
.theme-mois-cta {
  display: inline-block;
  background: var(--gold); color: var(--ink);
  border-radius: 50px; padding: .6rem 1.6rem;
  font-family: var(--sans); font-size: .9rem; font-weight: 700;
  text-decoration: none; transition: opacity .18s;
}
.theme-mois-cta:hover { opacity: .88; }

/* ── Push notification opt-in (IT131) ───────────────────────────────────── */
.push-optin {
  margin: 1.2rem auto 1rem; max-width: 480px;
  background: rgba(240,196,108,.06);
  border: 1px solid rgba(240,196,108,.22);
  border-radius: 16px; padding: 1.2rem 1.4rem;
  display: flex; align-items: center; gap: 1rem;
}
.push-optin-icon { font-size: 1.5rem; flex-shrink: 0; }
.push-optin-text { flex: 1; }
.push-optin-title { font-family: var(--serif); font-size: .95rem; font-weight: 700; color: var(--gold-soft); }
.push-optin-sub { font-size: .8rem; color: #7a6e9e; margin-top: .15rem; }
/* IT295 — time picker in push opt-in */
.push-time-row { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.push-time-label { font-size: .78rem; color: #7a6e9e; white-space: nowrap; }
.push-time-sel { background: rgba(255,255,255,.06); border: 1px solid rgba(155,132,210,.25); color: var(--gold-soft, #f7dca4); border-radius: 8px; padding: .2rem .45rem; font: inherit; font-size: .8rem; cursor: pointer; }
.push-optin-btn {
  flex-shrink: 0; padding: .45rem 1rem;
  background: var(--gold); color: var(--ink);
  border: none; border-radius: 50px;
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: opacity .18s; white-space: nowrap;
}
.push-optin-btn:hover { opacity: .88; }
.push-optin-dismiss {
  flex-shrink: 0; background: none; border: none; color: #6c6090;
  font-size: 1rem; cursor: pointer; padding: .2rem; line-height: 1;
}

/* ── Evening bar (IT107) ────────────────────────────────────────────────── */
.evening-bar {
  position: fixed; bottom: 64px; left: 50%; transform: translateX(-50%);
  z-index: 120; width: calc(100% - 2rem); max-width: 480px;
  display: flex; align-items: center; gap: .8rem;
  background: linear-gradient(90deg, rgba(20,17,46,.97) 0%, rgba(32,25,72,.97) 100%);
  border: 1.5px solid rgba(240,196,108,.35);
  border-radius: 18px; padding: .75rem 1rem .75rem 1.1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  animation: slideUp .35s cubic-bezier(.4,0,.2,1) both;
}
@keyframes slideUp { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.evening-bar[hidden] { display: none; }
.evening-bar-moon { font-size: 1.25rem; flex-shrink: 0; }
.evening-bar-text { flex: 1; font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--cream); }
.evening-bar-cta {
  flex-shrink: 0; background: var(--gold); color: var(--ink);
  border-radius: 999px; padding: .4rem .95rem;
  font-family: var(--sans); font-size: .82rem; font-weight: 800;
  text-decoration: none; white-space: nowrap;
}
.evening-bar-close {
  flex-shrink: 0; background: none; border: none; color: #7a6e9e;
  font-size: 1rem; cursor: pointer; padding: 0 .2rem;
}
@media (max-width: 400px) {
  .evening-bar { flex-wrap: wrap; padding: .75rem 1rem; }
  .evening-bar-text { font-size: .82rem; }
}

/* ── Suggestion chips (IT93) ────────────────────────────────────────────── */
.suggestion-chips { margin: .8rem 0 .4rem; text-align: center; }
.suggestion-chips[hidden] { display: none; }
.suggestion-chips-label { font-size: .8rem; color: #9c91c4; margin-bottom: .55rem; }
.suggestion-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(249,241,223,.07); border: 1px solid rgba(240,196,108,.2);
  color: var(--gold-soft); font-size: .84rem; font-weight: 600;
  border-radius: 999px; padding: .42rem .9rem;
  margin: .25rem .2rem; text-decoration: none;
  transition: background .15s, border-color .15s, transform .12s;
}
.suggestion-chip:hover { background: rgba(240,196,108,.14); border-color: rgba(240,196,108,.5); transform: translateY(-2px); color: var(--gold); }

/* ── Email capture banner (IT92) ────────────────────────────────────────── */
.email-capture {
  position: relative; z-index: 1;
  margin: 2rem auto 0; max-width: 480px;
  background: rgba(249,241,223,.06);
  border: 1.5px solid rgba(240,196,108,.3);
  border-radius: 20px; padding: 1.4rem 1.5rem 1.2rem;
  text-align: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.email-capture.email-capture-in { opacity: 1; transform: none; }
.email-capture[hidden] { display: none; }
.email-capture-close {
  position: absolute; top: .8rem; right: .9rem;
  background: none; border: none; color: rgba(249,241,223,.35);
  font-size: .9rem; cursor: pointer; padding: .2rem .4rem;
  transition: color .15s;
}
.email-capture-close:hover { color: var(--gold-soft); }
.email-capture-emoji { font-size: 1.8rem; line-height: 1; margin-bottom: .5rem; }
.email-capture-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--gold-soft); margin-bottom: .3rem; }
.email-capture-sub { font-size: .85rem; color: #9c91c4; margin-bottom: 1rem; }
.email-capture-form { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.email-capture-input {
  flex: 1; min-width: 180px; max-width: 240px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(240,196,108,.3);
  border-radius: 999px; padding: .55rem 1rem;
  color: var(--cream); font-family: var(--sans); font-size: .92rem;
  outline: none; transition: border-color .15s;
}
.email-capture-input:focus { border-color: rgba(240,196,108,.65); }
.email-capture-input::placeholder { color: rgba(249,241,223,.3); font-style: italic; }
.email-capture-btn {
  background: var(--gold); color: var(--ink);
  font-family: var(--sans); font-weight: 700; font-size: .92rem;
  border: none; border-radius: 999px; padding: .55rem 1.2rem;
  cursor: pointer; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.email-capture-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(240,196,108,.4); }
.email-capture-btn:disabled { opacity: .6; transform: none; cursor: default; }
.email-capture-ok { color: #7fc48a; font-size: .9rem; font-weight: 700; margin-top: .5rem; }
.email-capture-skip { margin-top: .6rem; }
.email-capture-skip-btn {
  background: none; border: none; color: rgba(249,241,223,.3);
  font-size: .8rem; cursor: pointer; text-decoration: underline;
  transition: color .15s;
}
.email-capture-skip-btn:hover { color: rgba(249,241,223,.6); }

/* ── Fast track (wizard step 1, returning users) ─────────────────────── */
.fast-track {
  background: rgba(240,196,108,.07); border: 1.5px solid rgba(240,196,108,.3);
  border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1.2rem;
  animation: rise .4s ease both;
}
.fast-track-child {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem;
}
.fast-track-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(240,196,108,.3), rgba(122,110,222,.3));
  border: 1.5px solid rgba(240,196,108,.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 800; color: var(--gold);
}
.fast-track-info strong {
  display: block; font-family: var(--serif); font-size: 1rem; color: var(--cream); line-height: 1.2;
}
.fast-track-info span {
  font-size: .78rem; color: #9c91c4; display: block; margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.fast-track-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.fast-track-gen {
  flex: 1; min-width: 130px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: .9rem; text-decoration: none;
  padding: .55rem 1.1rem; border-radius: 999px;
  transition: opacity .15s, transform .1s;
}
.fast-track-gen:hover { opacity: .88; transform: translateY(-1px); }
.fast-track-edit {
  background: transparent; border: 1px solid rgba(240,196,108,.25);
  color: rgba(247,220,164,.6); font: inherit; font-size: .85rem;
  padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.fast-track-edit:hover { border-color: rgba(240,196,108,.5); color: var(--gold-soft); }

/* ── Rappel du soir banner (sky.js, inner pages) ─────────────────────── */
.evening-reminder {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(18,14,42,.97) 0%, rgba(35,20,65,.97) 100%);
  border-bottom: 1px solid rgba(240,196,108,.22);
  padding: .6rem 1rem;
  font-size: .82rem;
  position: relative; z-index: 10;
  animation: eveningSlideIn .35s ease;
}
@keyframes eveningSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.evening-reminder-msg {
  flex: 1; color: var(--cream); font-weight: 500; min-width: 180px; line-height: 1.4;
}
.evening-reminder-cta {
  font-size: .79rem; font-weight: 700; color: var(--gold);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  border: 1px solid rgba(240,196,108,.38); border-radius: 999px;
  padding: .28rem .82rem;
  transition: background .15s, border-color .15s;
}
.evening-reminder-cta:hover { background: rgba(240,196,108,.1); border-color: rgba(240,196,108,.6); }
.evening-reminder-close {
  background: none; border: none; color: rgba(249,241,223,.28);
  cursor: pointer; font-size: .88rem; padding: 0; flex-shrink: 0;
  line-height: 1; transition: color .15s;
}
.evening-reminder-close:hover { color: rgba(249,241,223,.7); }
@media (max-width: 480px) {
  .evening-reminder { gap: .5rem; padding: .55rem .8rem; }
  .evening-reminder-msg { font-size: .79rem; }
}

/* ── Milestone celebration toast ─────────────────────────────────────── */
.milestone-toast {
  position: fixed; bottom: 88px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: linear-gradient(135deg, rgba(18,14,42,.98) 0%, rgba(38,22,64,.98) 100%);
  border: 1px solid rgba(240,196,108,.45);
  border-radius: 20px; padding: .85rem 1.5rem;
  display: flex; align-items: center; gap: .65rem;
  white-space: nowrap; box-shadow: 0 10px 36px rgba(0,0,0,.45);
  opacity: 0; transition: opacity .38s, transform .38s;
  z-index: 9998; pointer-events: none;
}
.milestone-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.milestone-toast-emoji { font-size: 1.55rem; line-height: 1; }
.milestone-toast-msg {
  font-family: var(--serif); font-weight: 800; font-size: .95rem;
  color: var(--gold); letter-spacing: .01em;
}

/* IT141 — Streak recovery nudge */
.streak-recovery {
  position: fixed; bottom: 78px; left: 1rem; right: 1rem;
  max-width: 480px; margin: 0 auto;
  background: linear-gradient(135deg, rgba(20,17,46,.97) 0%, rgba(40,25,70,.97) 100%);
  border: 1.5px solid rgba(240,196,108,.35);
  border-radius: 18px; padding: .8rem 1rem;
  display: flex; align-items: center; gap: .6rem;
  z-index: 820; box-shadow: 0 10px 32px rgba(0,0,0,.5);
  animation: sr-in .38s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes sr-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.streak-recovery.sr-out { animation: sr-out .35s ease forwards; }
@keyframes sr-out { to { opacity: 0; transform: translateY(14px); } }
.sr-icon { font-size: 1.5rem; flex-shrink: 0; }
.sr-body { flex: 1; min-width: 0; }
.sr-title { font-size: .82rem; font-weight: 700; color: var(--gold-soft); line-height: 1.3; }
.sr-sub { font-size: .74rem; color: rgba(249,241,223,.55); margin-top: .1rem; }
.sr-cta {
  font-size: .77rem; font-weight: 700; color: var(--gold);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  border: 1px solid rgba(240,196,108,.4); border-radius: 999px;
  padding: .32rem .8rem; transition: background .15s;
}
.sr-cta:hover { background: rgba(240,196,108,.1); }
.sr-close {
  background: none; border: none; cursor: pointer;
  color: rgba(249,241,223,.35); font-size: .9rem; padding: .2rem; flex-shrink: 0;
}
.sr-close:hover { color: rgba(249,241,223,.7); }

/* ── PWA install banner ──────────────────────────────────────────────── */
.install-banner {
  position: fixed; bottom: 78px; left: 1rem; right: 1rem;
  max-width: 440px; margin: 0 auto;
  background: linear-gradient(135deg, rgba(16,13,38,.98) 0%, rgba(34,20,60,.98) 100%);
  border: 1px solid rgba(240,196,108,.28);
  border-radius: 16px; padding: .7rem .9rem;
  display: flex; align-items: center; gap: .55rem;
  z-index: 820; box-shadow: 0 8px 28px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(10px);
  transition: opacity .32s, transform .32s;
}
.install-banner.visible { opacity: 1; transform: translateY(0); }
.install-banner-icon { font-size: 1.25rem; flex-shrink: 0; }
.install-banner-msg {
  flex: 1; font-size: .79rem; color: var(--cream);
  font-weight: 500; line-height: 1.35;
}
.install-banner-cta {
  font-size: .76rem; font-weight: 800;
  color: var(--night); background: var(--gold);
  border: none; border-radius: 8px;
  padding: .36rem .72rem; cursor: pointer; flex-shrink: 0;
  transition: filter .15s;
}
.install-banner-cta:hover { filter: brightness(1.08); }
.install-banner-close {
  background: none; border: none; color: rgba(249,241,223,.28);
  cursor: pointer; font-size: .82rem; padding: 0;
  flex-shrink: 0; line-height: 1; transition: color .15s;
}
.install-banner-close:hover { color: rgba(249,241,223,.65); }
@media (min-width: 500px) {
  .install-banner { left: auto; right: 1.2rem; max-width: 340px; }
}

/* ── Universe bottom sheet (profil page) ─────────────────────────────── */
.profil-univers-backdrop {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(8,6,20,.7);
  opacity: 0; transition: opacity .28s;
  display: flex; align-items: flex-end;
}
.profil-univers-backdrop.visible { opacity: 1; }
.profil-univers-sheet {
  width: 100%; max-height: 86dvh;
  background: #0f0d27;
  border-radius: 22px 22px 0 0;
  border-top: 1px solid rgba(240,196,108,.18);
  padding: .5rem 1.2rem 2.5rem;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.32,0,.22,1);
  position: relative;
  display: flex; flex-direction: column; gap: 1rem;
}
.profil-univers-backdrop.visible .profil-univers-sheet { transform: translateY(0); }
.profil-univers-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(240,196,108,.2); margin: .35rem auto .5rem; flex-shrink: 0;
}
.profil-univers-close {
  position: absolute; top: .9rem; right: 1rem;
  background: rgba(249,241,223,.08); border: none; border-radius: 50%;
  width: 30px; height: 30px; color: rgba(249,241,223,.45);
  cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.profil-univers-close:hover { background: rgba(249,241,223,.14); color: var(--cream); }
.profil-univers-hdr {
  display: flex; align-items: center; gap: .85rem; padding-top: .2rem;
}
.profil-univers-av {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.3rem; font-weight: 800;
  color: rgba(249,241,223,.9);
}
.profil-univers-name {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 800;
  color: var(--gold); display: block; margin-bottom: .15rem;
}
.profil-univers-stats {
  font-size: .74rem; color: rgba(249,241,223,.45); font-weight: 500;
}
.profil-univers-stories {
  display: flex; flex-direction: column; gap: .5rem;
  overflow-y: auto; max-height: 42dvh; padding-right: .2rem;
}
.univers-story-card {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; border-radius: 12px;
  background: rgba(249,241,223,.035);
  border: 1px solid rgba(240,196,108,.09);
}
.univers-cover {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  font-family: var(--serif); font-weight: 800; font-size: .95rem;
  color: rgba(249,241,223,.75);
  display: flex; align-items: center; justify-content: center;
}
.univers-story-info { flex: 1; min-width: 0; }
.univers-story-title {
  font-family: var(--serif); font-size: .83rem; font-weight: 700;
  color: var(--cream); display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.univers-story-meta {
  font-size: .71rem; color: rgba(249,241,223,.4); display: block; margin-top: .1rem;
}
.univers-ep-badge {
  font-size: .66rem; font-weight: 700; color: var(--gold);
  background: rgba(240,196,108,.1); border: 1px solid rgba(240,196,108,.28);
  border-radius: 999px; padding: .18rem .42rem; flex-shrink: 0;
}
.profil-univers-actions {
  display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .3rem;
}
.profil-univers-kidcta {
  flex: 1; text-align: center; padding: .7rem 1rem;
  background: rgba(20,17,46,.9); border: 1px solid rgba(240,196,108,.28);
  border-radius: 12px; color: var(--gold); font-weight: 700; font-size: .84rem;
  text-decoration: none; transition: background .15s;
}
.profil-univers-kidcta:hover { background: rgba(240,196,108,.08); }
.profil-univers-nextcta {
  flex: 1; text-align: center; padding: .7rem 1rem;
  background: var(--gold); border-radius: 12px;
  color: var(--night); font-weight: 800; font-size: .84rem;
  text-decoration: none; transition: filter .15s;
}
.profil-univers-nextcta:hover { filter: brightness(1.08); }

/* ---------- modal édition profil enfant ---------- */
.profil-edit-backdrop {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(10,8,32,.72); backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .3s;
}
.profil-edit-backdrop.visible { opacity: 1; }
.profil-edit-modal {
  background: linear-gradient(160deg, #1d1840 0%, #12102b 100%);
  border: 1px solid rgba(240,196,108,.22); border-bottom: none;
  border-radius: 24px 24px 0 0; width: 100%; max-width: 540px;
  padding: 1.8rem 1.5rem 2.2rem; position: relative;
  max-height: 92dvh; overflow-y: auto;
  transform: translateY(100%); transition: transform .32s cubic-bezier(.32,1,.5,1);
}
.profil-edit-backdrop.visible .profil-edit-modal { transform: translateY(0); }
.profil-edit-close {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,.1); border: none; border-radius: 50%;
  width: 32px; height: 32px; color: #c4b9e8; cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.profil-edit-close:hover { background: rgba(255,255,255,.18); }
.profil-edit-title { font-family: var(--serif); font-size: 1.15rem; color: var(--gold-soft); margin: 0 0 .2rem; }
.profil-edit-sub { font-size: .84rem; color: #9c91c4; margin: 0 0 1.3rem; }
.profil-edit-form { display: flex; flex-direction: column; gap: 1.1rem; }
.profil-edit-label { display: flex; flex-direction: column; gap: .35rem; }
.profil-edit-label span { font-size: .82rem; color: #b8acd4; font-weight: 600; }
.profil-edit-select, .profil-edit-textarea {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: .6rem .85rem; color: var(--cream);
  font-family: var(--sans); font-size: .9rem; width: 100%; transition: border-color .15s;
}
.profil-edit-select:focus, .profil-edit-textarea:focus { outline: none; border-color: rgba(240,196,108,.5); }
.profil-edit-select option { background: #1d1840; }
.profil-edit-textarea { resize: vertical; min-height: 72px; }
.profil-edit-footer { display: flex; gap: .8rem; justify-content: flex-end; margin-top: .4rem; }
.profil-edit-cancel {
  background: none; border: 1px solid rgba(255,255,255,.15); border-radius: 999px;
  color: #9c91c4; padding: .55rem 1.3rem; cursor: pointer; font-family: var(--sans);
  font-size: .88rem; transition: border-color .15s;
}
.profil-edit-cancel:hover { border-color: rgba(255,255,255,.35); color: var(--cream); }
.profil-edit-save {
  background: var(--gold); color: var(--ink); border: none; border-radius: 999px;
  padding: .55rem 1.5rem; font-weight: 700; font-size: .88rem; cursor: pointer;
  font-family: var(--sans); transition: opacity .15s, transform .1s;
}
.profil-edit-save:hover { opacity: .88; transform: translateY(-1px); }
.profil-edit-save:disabled { opacity: .6; transform: none; cursor: default; }
.profil-edit-saved { color: #7fc48a; font-size: .9rem; text-align: center; margin-top: .7rem; }

/* PIN setup section inside edit modal */
.profil-edit-pin-section {
  border: 1px solid rgba(240,196,108,.18);
  border-radius: 12px;
  padding: .9rem 1rem;
  margin-top: .2rem;
  background: rgba(240,196,108,.04);
}
.profil-edit-pin-label { font-weight: 700; font-size: .88rem; color: var(--gold-soft); display: block; margin-bottom: .3rem; }
.profil-edit-pin-hint { font-size: .78rem; color: #9c91c4; margin-bottom: .6rem; }
.profil-edit-pin-row { display: flex; gap: .5rem; align-items: center; }
.profil-edit-pin-input {
  flex: 1; min-width: 0;
  background: rgba(0,0,0,.25); border: 1px solid rgba(240,196,108,.25);
  border-radius: 8px; padding: .5rem .7rem;
  color: var(--cream); font-family: var(--serif); font-size: 1.1rem;
  letter-spacing: .25em; outline: none;
  transition: border-color .15s;
}
.profil-edit-pin-input:focus { border-color: rgba(240,196,108,.55); }
.profil-edit-pin-toggle, .profil-edit-pin-clear {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  color: var(--gold-soft); border-radius: 8px;
  padding: .4rem .65rem; font-size: .82rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.profil-edit-pin-toggle:hover, .profil-edit-pin-clear:hover { background: rgba(240,196,108,.14); }
.profil-edit-pin-err { font-size: .78rem; color: #e8927c; margin-top: .35rem; }

/* ---------- page histoire ---------- */
.story-page { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 4rem 1.5rem 5rem; }
.saga-breadcrumb {
  display: block; text-align: center; margin-bottom: .8rem;
  font-size: .82rem; color: #9c91c4; text-decoration: none;
  transition: color .15s;
}
.saga-breadcrumb em { color: var(--gold-soft); font-style: normal; font-weight: 600; }
.saga-breadcrumb:hover { color: var(--gold-soft); }
.story-eyebrow {
  text-align: center; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.story-title {
  font-family: var(--serif); text-align: center;
  font-size: clamp(2rem, 5.5vw, 3.2rem); font-weight: 800; line-height: 1.12;
  margin-bottom: .6rem; font-variation-settings: "SOFT" 100;
}
.story-meta { text-align: center; color: #b4a9d6; margin-bottom: 2.5rem; font-style: italic; }

.player {
  display: flex; align-items: center; gap: 1.2rem;
  background: rgba(249, 241, 223, .07);
  border: 1px solid rgba(240, 196, 108, .3); border-radius: 999px;
  padding: .9rem 1.6rem .9rem .9rem; margin-bottom: 3rem;
  backdrop-filter: blur(6px);
}
.play-btn {
  flex: none; width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer;
  background: radial-gradient(circle at 38% 35%, #fdf3d9, var(--gold) 75%);
  color: var(--ink); font-size: 1.5rem;
  box-shadow: 0 0 30px rgba(240, 196, 108, .35);
  transition: transform .15s;
  display: grid; place-items: center;
}
.play-btn:hover { transform: scale(1.06); }
.player-track { flex: 1; }
.player-bar {
  appearance: none; width: 100%; height: 5px; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold) var(--p, 0%), rgba(249,241,223,.18) var(--p, 0%));
  outline: none; cursor: pointer;
}
.player-bar::-webkit-slider-thumb {
  appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold-soft); box-shadow: 0 0 12px rgba(240,196,108,.8);
}
.player-bar::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: var(--gold-soft); box-shadow: 0 0 12px rgba(240,196,108,.8);
}
@media (max-width: 640px) {
  .player-bar::-webkit-slider-thumb { width: 26px; height: 26px; }
  .player-bar::-moz-range-thumb { width: 26px; height: 26px; }
  .player-bar { height: 6px; }
}
.player-time { font-size: .8rem; color: #b4a9d6; margin-top: .4rem; display: flex; justify-content: flex-end; gap: .25rem; }
.player-time #t-cur { color: #e8d9ff; font-weight: 600; }
.player-time-sep { opacity: .45; }
.music-vol-wrap { display: flex; align-items: center; gap: .5rem; margin: .3rem auto 0; max-width: 420px; }
.music-vol-wrap[hidden] { display: none; }
.music-vol-icon { font-size: .85rem; color: rgba(240,196,108,.45); }
.music-vol-slider { flex: 1; height: 3px; accent-color: var(--gold); cursor: pointer; }
/* Seek OSD */
.seek-osd { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(20,17,46,.88); color: var(--gold); font-family: var(--sans); font-weight: 700; font-size: 1.1rem; padding: .5rem 1.3rem; border-radius: 2rem; pointer-events: none; z-index: 800; opacity: 0; transition: opacity .15s; }
.seek-osd.visible { opacity: 1; }
/* Done badge */
.card-done { font-size: .72rem; font-weight: 700; color: #7ecb8a; letter-spacing: .03em; margin-left: .3rem; }
.story-card-done .story-card-link { opacity: .72; }
/* Pin tonight */
.card-pin { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: .3; padding: .1rem .2rem; transition: opacity .15s, transform .15s; }
.card-pin:hover, .card-pin.card-pin-on { opacity: 1; transform: rotate(-20deg) scale(1.15); }
/* Story note/memory */
.card-note-btn { background: none; border: none; cursor: pointer; font-size: .95rem; opacity: .3; padding: .1rem .2rem; transition: opacity .15s; }
.card-note-btn:hover, .card-note-btn.card-note-has { opacity: 1; }
.card-share-btn { background: none; border: none; cursor: pointer; font-size: .9rem; opacity: .3; padding: .1rem .2rem; transition: opacity .15s; }
.card-share-btn:hover { opacity: 1; }
.card-note-text { font-size: .78rem; color: var(--gold-soft); font-style: italic; margin: .25rem 0 0; line-height: 1.4; }
.card-note-edit { margin: .4rem 0 0; display: flex; flex-direction: column; gap: .3rem; }
.card-note-textarea { width: 100%; font-family: var(--sans); font-size: .8rem; background: rgba(255,255,255,.06); border: 1px solid rgba(240,196,108,.25); border-radius: 8px; color: #e8e0ff; padding: .4rem .6rem; resize: none; min-height: 56px; }
.card-note-btns { display: flex; gap: .4rem; }
.card-note-save { font-size: .75rem; background: var(--gold); color: var(--ink); border: none; border-radius: 6px; padding: .25rem .6rem; cursor: pointer; font-weight: 700; }
.card-note-cancel { font-size: .75rem; background: none; color: #9c91c4; border: none; cursor: pointer; padding: .25rem .4rem; }

.story-paper {
  background: var(--paper); color: var(--ink); border-radius: 22px;
  padding: clamp(1.6rem, 5vw, 3rem);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 0 0 1px var(--paper-edge);
  font-size: 1.06rem;
}
.story-paper p { margin-bottom: 1.1em; border-radius: 8px; transition: background .6s ease, box-shadow .6s ease; }
.story-paper p.reading {
  background: linear-gradient(90deg, rgba(240,196,108,.18) 0%, rgba(240,196,108,.04) 100%);
  box-shadow: -4px 0 0 rgba(240,196,108,.8);
  padding-left: .5rem;
}
.speed-btn {
  flex: none; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer;
  color: var(--gold-soft); background: transparent;
  border: 1.5px solid rgba(240, 196, 108, .45); border-radius: 999px;
  padding: .55rem .9rem; transition: all .15s;
}
.speed-btn:hover { border-color: var(--gold); }
.speed-btn.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.story-paper p:first-child::first-letter {
  font-family: var(--serif); font-size: 3.2em; float: left;
  line-height: .85; padding-right: .12em; color: #a4762f; font-weight: 700;
}
.story-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2.4rem; flex-wrap: wrap; }
.btn-ghost {
  color: var(--gold-soft); border: 1.5px solid rgba(240,196,108,.45);
  background: transparent; border-radius: 999px; padding: .8rem 1.7rem;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: all .15s;
}
.btn-ghost:hover { border-color: var(--gold); background: rgba(240,196,108,.1); }
.btn-ghost.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
/* IT299 — Offline save button states */
.btn-offline-save.saving { opacity: .6; pointer-events: none; }
.btn-offline-save.saved { color: #7fc48a; border-color: rgba(127,196,138,.4); }
.story-hint { text-align: center; color: #9c91c4; font-size: .85rem; margin-top: 1.2rem; font-style: italic; }
/* ── IT148 Occasion chips ── */
.occasion-chips { margin: .5rem 0 1rem; }
.occasion-chips-label { display: block; font-size: .8rem; color: rgba(240,196,108,.6); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .5rem; }
.occasion-chips-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.occ-chip { display: inline-flex; align-items: center; gap: .25rem; background: rgba(240,196,108,.07); border: 1.5px solid rgba(240,196,108,.18); color: rgba(247,220,164,.7); border-radius: 999px; padding: .35rem .85rem; font-family: var(--sans); font-size: .82rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .12s; -webkit-tap-highlight-color: transparent; }
.occ-chip:hover { background: rgba(240,196,108,.14); border-color: rgba(240,196,108,.4); color: var(--gold); transform: translateY(-1px); }
.occ-chip.occ-active { background: rgba(240,196,108,.18); border-color: var(--gold); color: var(--gold); font-weight: 700; }

/* ── IT149 Story title preview ── */
.story-title-preview { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1rem .9rem; text-align: center; animation: stp-in .4s ease; }
@keyframes stp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.story-title-preview[hidden] { display: none; }
.stp-star { color: rgba(240,196,108,.5); font-size: 1.1rem; }
.stp-text { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--gold-soft); font-weight: 500; line-height: 1.4; }

/* ── IT150 Guest thanks mini-form ── */
.guest-thanks-sub { font-size: .88rem; color: rgba(247,220,164,.55); margin-bottom: .85rem; }
.guest-name-form { display: flex; gap: .5rem; max-width: 340px; margin: 0 auto .75rem; }
.guest-name-input { flex: 1; background: rgba(255,255,255,.06); border: 1.5px solid rgba(240,196,108,.25); color: var(--cream); border-radius: 8px; padding: .55rem .85rem; font-family: var(--sans); font-size: .9rem; outline: none; transition: border-color .15s; }
.guest-name-input:focus { border-color: var(--gold); }
.guest-name-input::placeholder { color: rgba(247,220,164,.35); }
.guest-name-btn { background: var(--gold); color: var(--ink); border: none; border-radius: 8px; padding: .55rem 1rem; font-family: var(--sans); font-size: .88rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, transform .12s; }
.guest-name-btn:hover { background: var(--gold-soft); transform: translateY(-1px); }
.guest-thanks-skip { font-size: .82rem; margin-top: .2rem; }
.guest-thanks-skip a { color: rgba(247,220,164,.45); text-decoration: underline; text-underline-offset: 2px; }

/* ── IT145 Mood Entry ── */
.mood-entry { max-width: 860px; margin: 0 auto; padding: 2.6rem 1.2rem 0; text-align: center; }
.me-eyebrow { font-family: var(--serif); font-size: .95rem; font-style: italic; color: rgba(240,196,108,.65); letter-spacing: .06em; margin-bottom: 1.3rem; }
.me-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
@media (max-width: 620px) { .me-grid { grid-template-columns: repeat(2, 1fr); } }
.me-card { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.15rem .8rem .95rem; border-radius: 1.1rem; border: 1.5px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); cursor: pointer; transition: transform .18s, border-color .2s, background .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; font-family: var(--sans); text-align: center; }
.me-card:hover { transform: translateY(-3px); }
.me-card.me-active { box-shadow: 0 0 22px rgba(240,196,108,.2); }
.me-icon { font-size: 1.9rem; line-height: 1; }
.me-name { font-size: 1rem; font-weight: 700; color: #e8dfc8; font-family: var(--serif); }
.me-desc { font-size: .77rem; color: rgba(247,220,164,.45); }
.me-calme { border-color: rgba(100,150,220,.18); }
.me-calme:hover { border-color: rgba(100,150,220,.38); background: rgba(100,150,220,.06); }
.me-calme.me-active { border-color: #6496dc; }
.me-aventure { border-color: rgba(255,155,40,.18); }
.me-aventure:hover { border-color: rgba(255,155,40,.38); background: rgba(255,155,40,.06); }
.me-aventure.me-active { border-color: #ff9b28; }
.me-rigolo { border-color: rgba(70,195,110,.18); }
.me-rigolo:hover { border-color: rgba(70,195,110,.38); background: rgba(70,195,110,.06); }
.me-rigolo.me-active { border-color: #46c36e; }
.me-magique { border-color: rgba(175,115,240,.18); }
.me-magique:hover { border-color: rgba(175,115,240,.38); background: rgba(175,115,240,.06); }
.me-magique.me-active { border-color: #af73f0; }

/* ── IT146 Next-mood pick (story end) ── */
.next-mood-pick { text-align: center; padding: .7rem 0 1.1rem; }
.nmp-label { font-family: var(--serif); font-style: italic; font-size: .93rem; color: rgba(240,196,108,.65); margin-bottom: .7rem; }
.nmp-btns { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.nmp-btn { background: rgba(255,255,255,.05); border: 1.5px solid rgba(240,196,108,.14); color: rgba(247,220,164,.65); border-radius: 999px; padding: .42rem .95rem; font-family: var(--sans); font-size: .85rem; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; -webkit-tap-highlight-color: transparent; }
.nmp-btn:hover { background: rgba(240,196,108,.1); border-color: rgba(240,196,108,.3); transform: translateY(-1px); }
.nmp-btn.nmp-active { background: rgba(240,196,108,.18); border-color: var(--gold); color: var(--gold); font-weight: 700; }

/* ---- IT152 — Quick story starters ---- */
.quick-starters { text-align: center; padding: 1.2rem 0 .5rem; }
.qs-label { font-family: var(--serif); font-style: italic; font-size: .88rem; color: rgba(240,196,108,.55); margin-bottom: .75rem; }
.qs-chips { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.qs-chip {
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(240,196,108,.16);
  color: rgba(247,220,164,.7); border-radius: 14px; padding: .6rem 1.1rem;
  font-family: var(--sans); font-size: .87rem; cursor: pointer; max-width: 340px; width: 100%;
  text-align: left; transition: background .15s, border-color .15s, color .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  animation: qs-in .4s ease both;
}
.qs-chip:nth-child(2) { animation-delay: .07s; }
.qs-chip:nth-child(3) { animation-delay: .14s; }
@keyframes qs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.qs-chip:hover { background: rgba(240,196,108,.09); border-color: rgba(240,196,108,.3); color: var(--gold-soft); transform: translateY(-1px); }
.qs-chip:active { transform: scale(.97); }

/* ---- Sélecteur d'ambiance (wizard étape 2) ---- */
#ambiance-field { margin: .2rem 0 1.1rem; }
#ambiance-field > span { display: block; font-size: .82rem; color: #9c91c4; margin-bottom: .6rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ambiance-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.ambiance-btn { display: flex; align-items: center; gap: .35rem; background: rgba(255,255,255,.05); border: 1.5px solid rgba(240,196,108,.18); color: rgba(247,220,164,.65); border-radius: 999px; padding: .4rem 1rem; font-family: var(--sans); font-size: .85rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .12s; -webkit-tap-highlight-color: transparent; }
.ambiance-btn:hover { background: rgba(240,196,108,.1); border-color: rgba(240,196,108,.35); color: var(--gold-soft); transform: translateY(-1px); }
.ambiance-btn.ambiance-active { background: rgba(240,196,108,.15); border-color: var(--gold); color: var(--gold); font-weight: 700; }
.univers-btns { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .1rem; }
.univers-btn { display: flex; align-items: center; gap: .3rem; background: rgba(255,255,255,.04); border: 1.5px solid rgba(156,145,196,.2); color: rgba(180,169,214,.65); border-radius: 10px; padding: .4rem .85rem; font-family: var(--sans); font-size: .83rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .12s; -webkit-tap-highlight-color: transparent; }
.univers-btn:hover { background: rgba(156,145,196,.1); border-color: rgba(156,145,196,.4); color: #c8bfea; transform: translateY(-1px); }
.univers-btn.univers-active { background: rgba(156,145,196,.18); border-color: #9c91c4; color: #d0c8f0; font-weight: 700; }

/* ---- Taille de texte histoire ---- */
.story-paper.font-lg p { font-size: 1.15em; line-height: 1.85; }
.story-paper.font-xl p { font-size: 1.32em; line-height: 1.9; }
#font-size-btn.font-active { color: var(--gold); }

/* ---- Sleep timer ---- */
#sleep-timer.sleep-timer-active { color: var(--gold); border-color: rgba(240,196,108,.5); }

/* ---- Saga breadcrumb ---- */
.saga-breadcrumb {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: 1.2rem; padding: .5rem 0;
}
.ep-badge {
  background: rgba(240,196,108,.14); color: var(--gold);
  border: 1px solid rgba(240,196,108,.3); border-radius: 6px;
  font-size: .75rem; padding: .2rem .6rem; font-weight: 700;
  font-family: var(--sans); letter-spacing: .06em; text-transform: uppercase;
}
.ep-prev-link, .ep-saga-link {
  font-size: .82rem; color: rgba(249,241,223,.38);
  text-decoration: none; transition: color .2s;
}
.ep-prev-link:hover, .ep-saga-link:hover { color: var(--gold-soft); }
.ep-saga-link { margin-left: auto; }

/* ---- Chapitre suivant ---- */
.btn-sequel {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: linear-gradient(135deg, rgba(240,196,108,.16), rgba(232,146,124,.10));
  border: 1.5px solid rgba(240,196,108,.55); color: var(--gold);
  border-radius: 14px; padding: .75rem 1.8rem;
  font-family: var(--serif); font-size: 1rem; font-weight: 600; letter-spacing: .02em;
  cursor: pointer; transition: background .2s, transform .12s, box-shadow .2s; margin: .5rem 0;
}
.btn-sequel:hover {
  background: linear-gradient(135deg, rgba(240,196,108,.28), rgba(232,146,124,.18));
  box-shadow: 0 6px 24px rgba(240,196,108,.22); transform: translateY(-2px);
}
.btn-sequel:active { transform: translateY(0); }
.btn-sequel:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.btn-replay {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: transparent; border: 1.5px solid rgba(240,196,108,.3); color: rgba(247,220,164,.65);
  border-radius: 14px; padding: .65rem 1.5rem;
  font-family: var(--serif); font-size: .93rem; font-weight: 600;
  cursor: pointer; transition: border-color .18s, color .18s, background .18s; margin: .4rem 0;
}
.btn-replay:hover { border-color: var(--gold); color: var(--gold); background: rgba(240,196,108,.07); }

/* ---- PIN mode enfant ---- */
.kid-pin-setup-btn { background: rgba(255,255,255,.04); border: 1px solid rgba(240,196,108,.18); color: rgba(247,220,164,.5); border-radius: 8px; padding: .3rem .7rem; font-size: .82rem; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.kid-pin-setup-btn:hover { background: rgba(240,196,108,.1); color: var(--gold-soft); }
.kid-pin-setup-btn.has-pin { color: var(--gold); border-color: rgba(240,196,108,.4); }

/* IT298 — Tonight's queue */
.kid-queue-btn { background: rgba(255,255,255,.04); border: 1px solid rgba(240,196,108,.18); color: rgba(247,220,164,.5); border-radius: 8px; padding: .3rem .7rem; font-size: .82rem; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.kid-queue-btn:hover { background: rgba(240,196,108,.1); color: var(--gold-soft); }
.kid-queue-btn.has-queue { color: var(--gold); border-color: rgba(240,196,108,.4); }
.kid-queue-dialog { position: fixed; inset: 0; z-index: 300; background: rgba(10,8,28,.88); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kid-queue-dialog[hidden] { display: none; }
.kid-queue-inner { background: #1a1635; border: 1.5px solid rgba(240,196,108,.2); border-radius: 20px; padding: 1.5rem; max-width: 360px; width: 92%; }
.kid-queue-title { font-family: var(--serif, Georgia); font-size: 1rem; color: var(--gold-soft, #f7dca4); margin-bottom: 1rem; text-align: center; }
.kid-queue-list { display: flex; flex-direction: column; gap: .4rem; max-height: 40vh; overflow-y: auto; margin-bottom: 1rem; }
.kid-queue-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 10px; background: rgba(255,255,255,.04); cursor: pointer; font-size: .88rem; color: var(--gold-soft, #f7dca4); }
.kid-queue-item input[type=checkbox] { accent-color: var(--gold, #f0c46c); width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer; }
.kid-queue-item:has(input:checked) { background: rgba(240,196,108,.08); }
.kid-queue-actions { display: flex; gap: .6rem; justify-content: center; }
.kid-queue-save { background: var(--gold, #f0c46c); color: var(--ink, #14112e); border: none; border-radius: 999px; padding: .55rem 1.4rem; font: 700 .9rem var(--sans, sans-serif); cursor: pointer; }
.kid-queue-cancel { background: transparent; border: 1px solid rgba(240,196,108,.25); color: rgba(247,220,164,.5); border-radius: 999px; padding: .55rem 1.2rem; font: 600 .88rem var(--sans, sans-serif); cursor: pointer; }
.kid-queue-banner { font-family: var(--serif, Georgia); font-size: .82rem; font-weight: 700; color: var(--gold, #f0c46c); background: rgba(240,196,108,.1); border: 1px solid rgba(240,196,108,.25); border-radius: 999px; padding: .25rem .85rem; display: inline-block; margin-top: .4rem; }

.kid-pin-dialog { position: fixed; inset: 0; z-index: 300; background: rgba(10,8,28,.85); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kid-pin-dialog[hidden] { display: none; }
.kid-pin-dialog-inner { background: #1a1635; border: 1.5px solid rgba(240,196,108,.2); border-radius: 20px; padding: 2rem 1.5rem; max-width: 320px; width: 90%; text-align: center; }
.kid-pin-dialog-title { font-family: var(--serif, Georgia); font-size: 1.1rem; color: var(--gold-soft, #f7dca4); margin-bottom: 1.2rem; }
.kid-pin-dots { display: flex; gap: .65rem; justify-content: center; margin-bottom: 1.2rem; }
.kid-pin-dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(240,196,108,.35); transition: background .15s; }
.kid-pin-dots span.filled { background: var(--gold, #f0c46c); border-color: var(--gold, #f0c46c); }
.kid-pin-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.kid-pin-keypad button { background: rgba(255,255,255,.06); border: 1px solid rgba(240,196,108,.15); color: var(--gold-soft, #f7dca4); border-radius: 10px; padding: .75rem .5rem; font-size: 1.1rem; cursor: pointer; transition: background .12s; }
.kid-pin-keypad button:hover, .kid-pin-keypad button:active { background: rgba(240,196,108,.15); }
.kid-pin-keypad button[data-k="clear"] { grid-column: span 2; font-size: .78rem; color: rgba(247,220,164,.45); }
.kid-pin-hint { font-size: .82rem; color: rgba(247,220,164,.5); margin-bottom: .6rem; }
.kid-pin-cancel { background: none; border: 1px solid rgba(240,196,108,.15); color: rgba(247,220,164,.4); border-radius: 999px; padding: .4rem 1.2rem; font-size: .82rem; cursor: pointer; }
.kid-pin-cancel:hover { color: var(--gold-soft); }

/* ---- Emoji cover cyclable ---- */
.cover-emoji { cursor: pointer; transition: transform .15s; display: inline-block; }
.cover-emoji:hover { transform: scale(1.18); }
.cover-emoji:active { transform: scale(.92); }

/* ---- Pills enfant (filtre étagère) ---- */
.shelf-child-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: .6rem 0 .4rem; }
.shelf-child-pills[hidden] { display: none; }
.child-pill { background: rgba(255,255,255,.05); border: 1.5px solid rgba(240,196,108,.18); color: rgba(247,220,164,.65); border-radius: 999px; padding: .28rem .85rem; font-family: var(--sans); font-size: .82rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s; -webkit-tap-highlight-color: transparent; line-height: 1.4; }
.child-pill:hover { background: rgba(240,196,108,.1); border-color: rgba(240,196,108,.35); color: var(--gold-soft); }
.child-pill.child-pill-active { background: rgba(240,196,108,.15); border-color: var(--gold); color: var(--gold); font-weight: 700; }
.child-pill-count { font-size: .72rem; opacity: .7; margin-left: .12rem; }

/* ---- Vue liste (shelf-list-mode) ---- */
.shelf-view-toggle { display: flex; gap: .3rem; margin-left: auto; flex-shrink: 0; }
.shelf-view-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(240,196,108,.2); color: rgba(247,220,164,.5); border-radius: 8px; padding: .3rem .55rem; font-size: 1rem; cursor: pointer; transition: background .15s, color .15s; line-height: 1; }
.shelf-view-btn:hover { background: rgba(240,196,108,.1); color: var(--gold-soft); }
.shelf-view-btn.shelf-view-active { background: rgba(240,196,108,.12); color: var(--gold); border-color: rgba(240,196,108,.4); }
.shelf-list-mode .story-cards-row { display: flex; flex-direction: column; gap: .45rem; }
.shelf-list-mode .story-card { display: flex; flex-direction: row; align-items: center; border-radius: 10px; min-height: 56px; }
.shelf-list-mode .story-card:hover { transform: none; box-shadow: none; border-color: rgba(240,196,108,.42); }
.shelf-list-mode .story-cover { height: 56px; width: 56px; min-width: 56px; border-radius: 9px 0 0 9px; }
.shelf-list-mode .cover-prog-ring { display: none; }
.shelf-list-mode .story-card-body { flex: 1; padding: .35rem .6rem; display: flex; align-items: center; gap: .5rem; overflow: hidden; }
.shelf-list-mode .story-card-title { flex: 1; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: unset; -webkit-line-clamp: unset; }
.shelf-list-mode .story-card-meta { white-space: nowrap; flex-shrink: 0; margin: 0; }
.shelf-list-mode .card-stars { display: none; }
.shelf-list-mode .card-note-text { display: none; }
.shelf-list-mode .card-actions { flex-shrink: 0; gap: .3rem; flex-wrap: nowrap; }
.shelf-list-mode .story-card-link { border-radius: 0 9px 9px 0; padding: .35rem .7rem; font-size: .72rem; min-width: 72px; text-align: center; border-top: none; border-left: 1px solid rgba(240,196,108,.15); }
.guest-react { text-align: center; margin: 1.8rem auto; max-width: 480px; padding: 1.5rem 1rem 1.3rem; background: rgba(240,196,108,.06); border: 1px solid rgba(240,196,108,.2); border-radius: 18px; }
.guest-react[hidden] { display: none; }
.guest-react-intro { font-family: var(--serif); color: var(--gold-soft); margin-bottom: 1rem; font-size: .95rem; }
.guest-react-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.guest-react-btn { display: flex; flex-direction: column; align-items: center; gap: .3rem; background: rgba(255,255,255,.06); border: 1.5px solid rgba(240,196,108,.2); border-radius: 14px; padding: .9rem 1.2rem; font-size: 2rem; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.guest-react-btn span { font-size: .78rem; font-family: var(--sans); color: var(--gold-soft); }
.guest-react-btn:hover, .guest-react-btn:active { transform: scale(1.08); border-color: var(--gold); background: rgba(240,196,108,.12); }
.guest-thanks { text-align: center; margin: 1.8rem auto; max-width: 480px; }
.guest-thanks[hidden] { display: none; }
.guest-thanks-text { font-family: var(--serif); font-size: 1.15rem; color: var(--gold); margin-bottom: .9rem; }
.guest-thanks-cta { display: inline-block; background: var(--gold); color: var(--ink); text-decoration: none; font-weight: 700; padding: .65rem 1.6rem; border-radius: 999px; font-size: .9rem; transition: transform .12s; }
.guest-thanks-cta:hover { transform: translateY(-2px); }

.chips button.active { border-style: solid; border-color: var(--rose); color: var(--rose); background: rgba(232, 146, 124, .08); }
.chips .magic-idea {
  border-style: solid; border-color: var(--gold); color: #a4762f;
  background: rgba(240, 196, 108, .12); font-weight: 700;
}
.chips .magic-idea:hover { background: rgba(240, 196, 108, .25); color: #7c5a20; transform: translateY(-1px) rotate(-1deg); }

@media (max-width: 640px) {
  .moon { width: 70px; height: 70px; right: 6%; top: 4%; }
  .step:nth-child(2) { transform: none; }
  .hero { min-height: 78vh; padding-top: 3rem; flex-direction: column; gap: 0; }
  .hero-body { max-width: 100%; }
  .hero-actions { width: 100%; flex-direction: column; gap: 0; }
  .hero-actions .cta { margin-top: 1rem; width: 100%; text-align: center; }
  .sample-btn { margin-top: 1rem; width: min(100%, 460px); max-width: 100%; }
  .player { flex-wrap: wrap; border-radius: 26px; padding: 1rem; gap: .9rem; }
  .play-btn { width: 54px; height: 54px; }
  .speed-btn { order: 2; margin-left: auto; }
  .player-track { order: 3; min-width: 100%; }
  .offer, .step { max-width: none; }
  .story-actions .btn-ghost { flex: 1 1 45%; text-align: center; }
  .footer-grid { gap: 1.6rem; }
  .topnav-cta { font-size: .82rem; padding: .5rem 1rem; }

  /* Démos : carousel horizontal sur mobile */
  .demos { padding-left: 0; padding-right: 0; }
  .demos h2, .demos-sub { padding: 0 1.5rem; }
  .demos-row {
    flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: .4rem 1.5rem 1.2rem; gap: .9rem;
  }
  .demos-row::-webkit-scrollbar { display: none; }
  .demo-card { flex: 0 0 220px; max-width: 220px; scroll-snap-align: start; }

  .testi-card { width: min(300px, 80vw); }
}

/* ---------- impression : le conte sur papier, rien d'autre ---------- */
@media print {
  body { background: #fff; color: #1a1a1a; }
  .sky, .sky-canvas, .player, .story-actions, .story-hint { display: none !important; }
  .story-page { padding: 0; max-width: none; }
  .story-eyebrow { color: #8a6d2f; }
  .story-title { color: #1a1a1a; }
  .story-meta { color: #555; }
  .story-paper {
    background: #fff; color: #1a1a1a; box-shadow: none;
    border: none; padding: 1rem 0; font-size: 12.5pt;
  }
  .story-paper p.reading { background: none; box-shadow: none; }
  .story-paper p:first-child::first-letter { color: #8a6d2f; }
}

.hero-demos-link { color: var(--gold-soft); font-weight: 700; text-decoration: none; }
.hero-demos-link:hover { color: var(--gold); }
.hero-tryit { margin-top: .6rem; font-size: .8rem; color: #6c6490; animation: rise .9s ease .6s both; }
.hero-tryit-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--gold-soft); font: inherit; font-weight: 700; font-size: .8rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.hero-tryit-btn:hover { color: var(--gold); }
.social-proof {
  margin-top: .8rem;
  font-size: .75rem;
  color: rgba(240,196,108,.6);
  letter-spacing: .04em;
  animation: rise .9s ease .72s both;
}
.story-preview {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: rgba(240,196,108,.06);
  border: 1px solid rgba(240,196,108,.18);
  border-radius: 12px;
  padding: .75rem .9rem;
  margin-bottom: 1.1rem;
  animation: rise .3s ease both;
}
.preview-cover {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  background: hsl(var(--cover-hue, 220), 50%, 20%);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(240,196,108,.2);
}
.preview-initial {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--gold);
  font-weight: 700;
  line-height: 1;
}
.preview-child { font-size: .85rem; color: var(--cream); font-weight: 600; }
.preview-ep { font-size: .75rem; color: rgba(240,196,108,.65); margin-top: .15rem; }

.hub-h2 { font-family: var(--serif); font-size: 1.35rem; color: var(--gold-soft); margin: 1.8rem 0 .6rem; }
.hub-list .theme-link { text-align: left; padding: .35rem 0; }
.theme-link-all { font-weight: 800; color: var(--gold); }

/* ---------- mascottes : les petits personnages ---------- */
.mascot {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 25;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}
.mascot-row { display: flex; align-items: center; gap: .5rem; }
.mascot-avatar {
  background: none; border: none; cursor: pointer; padding: 0;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .45));
  animation: mascot-float 3.4s ease-in-out infinite;
  transition: transform .15s;
}
.mascot-avatar:hover { transform: scale(1.07); }
@keyframes mascot-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } }
.mascot-switch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  font-size: .95rem; color: var(--gold-soft);
  background: rgba(20, 17, 46, .8); border: 1.5px solid rgba(240, 196, 108, .4);
  transition: all .15s;
}
.mascot-switch:hover { background: var(--gold); color: var(--ink); }
.mascot-bubble {
  max-width: 250px; background: var(--paper); color: var(--ink);
  border-radius: 16px 16px 4px 16px; padding: .8rem 1rem;
  font-size: .88rem; font-weight: 600; line-height: 1.45;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .4);
  animation: rise .3s ease both;
}
.mascot-bubble a { color: #a4762f; font-weight: 800; }
.mascot-picker {
  display: flex; gap: .45rem; padding: .45rem .6rem;
  background: rgba(20, 17, 46, .88); backdrop-filter: blur(10px);
  border: 1px solid rgba(240, 196, 108, .35); border-radius: 999px;
  animation: rise .25s ease both;
}
.mascot-picker button {
  background: none; border: none; cursor: pointer; padding: .2rem;
  border-radius: 50%; transition: transform .15s;
}
.mascot-picker button:hover { transform: scale(1.12); }
.mascot-picker button.active { outline: 2px solid var(--gold); outline-offset: 2px; }
.mascot-picker .mc { width: 36px; height: 36px; }

/* le dessin des personnages */
.mc { position: relative; display: block; width: 72px; height: 72px; }
.mc-head { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 76%; height: 76%; border-radius: 50%; z-index: 2; }
.mc-eye {
  position: absolute; top: 40%; width: 11%; height: 16%;
  background: var(--ink); border-radius: 50%;
  animation: mc-blink 4.6s infinite;
}
.mc-eye:nth-child(1) { left: 27%; }
.mc-eye:nth-child(2) { right: 27%; }
@keyframes mc-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }
.mc-mouth {
  position: absolute; left: 50%; transform: translateX(-50%); top: 62%;
  width: 22%; height: 3px; background: var(--ink);
  border-radius: 0 0 12px 12px;
  transition: height .05s linear;
}
.mc-extra { position: absolute; z-index: 1; }

.mc-etoile .mc-head {
  width: 100%; height: 100%; top: 50%; border-radius: 0;
  background: radial-gradient(circle at 38% 32%, #fdf3d9, var(--gold) 72%, #c89b4b);
  clip-path: polygon(50% 0%, 63% 33%, 98% 38%, 72% 60%, 79% 95%, 50% 76%, 21% 95%, 28% 60%, 2% 38%, 37% 33%);
}
.mc-etoile .mc-eye { top: 42%; }
.mc-etoile .mc-eye:nth-child(1) { left: 36%; }
.mc-etoile .mc-eye:nth-child(2) { right: 36%; }
.mc-etoile .mc-mouth { top: 56%; width: 14%; }

.mc-fille .mc-head { background: #f7d6bf; }
.mc-fille .mc-extra {
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 86%; height: 86%; border-radius: 50%; background: #6b4a35;
  box-shadow: -30px 10px 0 -11px #6b4a35, 30px 10px 0 -11px #6b4a35;
}

.mc-garcon .mc-head { background: #f2c9a8; }
.mc-garcon .mc-extra {
  z-index: 3; left: 50%; top: 13%; transform: translateX(-50%);
  width: 70%; height: 30%; background: #3c2f26;
  border-radius: 50% 50% 24% 24%;
}

.mc-lapin .mc-head { background: #f6efe2; }
.mc-lapin .mc-extra { inset: 0; }
.mc-lapin .mc-extra::before, .mc-lapin .mc-extra::after {
  content: ""; position: absolute; top: -8%; width: 19%; height: 46%;
  background: #f6efe2; border-radius: 50%;
  box-shadow: inset 0 -8px 0 2px #f0c9c4;
}
.mc-lapin .mc-extra::before { left: 27%; transform: rotate(-9deg); }
.mc-lapin .mc-extra::after { right: 27%; transform: rotate(9deg); }

@media (max-width: 640px) {
  .mascot { right: .8rem; bottom: .8rem; }
  .mc { width: 58px; height: 58px; }
  .mascot-bubble { max-width: 200px; font-size: .82rem; }
}

.mascot { transition: opacity .3s ease, transform .3s ease; }
.mascot.shy { opacity: 0; transform: translateY(20px); pointer-events: none; }

.veil-mascot {
  position: relative; margin-bottom: 1.6rem;
  animation: breathe 5.5s ease-in-out infinite;
  filter: drop-shadow(0 0 44px rgba(240, 196, 108, .28));
}
.veil-mascot .mc { width: 150px; height: 150px; }
.veil-mascot .mc-mouth { transition: height .05s linear; }

.weaving-mascot {
  position: relative; margin-bottom: 2rem;
  animation: breathe 4.5s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(240, 196, 108, .3));
}
.weaving-mascot .mc { width: 120px; height: 120px; }
.weaving-line {
  color: var(--gold-soft); font-style: italic; font-size: .98rem;
  min-height: 1.6em; max-width: 26em; margin-top: .6rem;
}
.weaving-poem {
  font-family: var(--serif); font-style: italic;
  font-size: .9rem; color: #7b6fa0;
  min-height: 1.4em; max-width: 28em;
  margin-top: .5rem;
  transition: opacity .4s ease;
}

.char-count {
  font-size: .72rem; color: #7b6fa0; font-weight: 400;
  font-family: var(--sans); margin-left: .4rem;
}

/* ---------- rebond entre démos ---------- */
.other-demos { margin-top: 3rem; text-align: center; }
.other-demos h2 { font-size: 1.35rem; margin-bottom: 1.3rem; }
.other-demos .library-row { justify-content: center; }

.form-err.ok { color: #a4762f; }

/* ---------- carnet du soir (articles) ---------- */
.theme-copy h2 { font-family: var(--serif); font-size: 1.45rem; color: var(--gold-soft); margin: 1.8rem 0 .5rem; text-align: left; }
.article-story { margin-top: 3rem; }
.article-story-title { font-family: var(--serif); font-size: 1.7rem; text-align: center; color: var(--gold); }
.article-story-sub { text-align: center; color: #b4a9d6; font-style: italic; margin: .4rem 0 1.4rem; }
.article-story .story-paper { font-size: 1.02rem; }
.article-after { color: #d8cfeb; margin-top: 1.6rem; text-align: center; font-size: 1.02rem; }
.theme-copy a, .article-after a { color: var(--gold-soft); font-weight: 700; }

/* ---------- atelier : lifting ---------- */
.paper { position: relative; }
.paper::before {
  content: ""; position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fdf3d9, var(--gold) 70%, #c89b4b);
  box-shadow: 0 4px 18px rgba(240, 196, 108, .5), inset 0 -3px 6px rgba(140, 105, 40, .35);
}
.paper {
  background:
    radial-gradient(circle at 8% 4%, rgba(240, 196, 108, .18), transparent 30%),
    repeating-linear-gradient(transparent 0 34px, rgba(44, 35, 71, .035) 34px 35px),
    var(--paper);
}
.paper-title::before { content: "✶ "; color: #c89b4b; font-size: .7em; vertical-align: middle; }
.paper-title::after { content: " ✶"; color: #c89b4b; font-size: .7em; vertical-align: middle; }
.cta-submit {
  position: relative; overflow: hidden;
}
.cta-submit::after {
  content: ""; position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transition: left .5s ease;
}
.cta-submit:hover::after { left: 130%; }
.seg-voice label.playing i {
  background: var(--gold); color: var(--ink); border-color: var(--gold);
  animation: voice-pulse 1.1s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 196, 108, .55); }
  50% { box-shadow: 0 0 0 7px rgba(240, 196, 108, 0); }
}

/* ---------- étagère : groupes par enfant ---------- */
.child-section {
  margin-bottom: 2.8rem;
}
.child-header {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.child-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold) 0%, #e8927c 100%);
  color: var(--ink); font-family: var(--serif); font-weight: 800; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(240,196,108,.3);
}
.child-name {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
  color: var(--gold-soft); margin: 0;
}
.child-count {
  font-size: .82rem; color: #9c91c4;
  background: rgba(255,255,255,.06); border-radius: 999px;
  padding: .2rem .7rem;
}
.child-meta { display: flex; align-items: baseline; gap: .6rem; flex: 1; min-width: 0; }
.child-mode-link {
  font-size: .82rem; color: rgba(247,220,164,.7); text-decoration: none;
  border: 1px solid rgba(240,196,108,.3); border-radius: 999px; padding: .35rem .85rem;
  transition: all .15s; white-space: nowrap;
}
.child-mode-link:hover { border-color: var(--gold); color: var(--gold); }
.child-new-btn {
  font-size: .82rem; font-weight: 700;
  background: var(--gold); color: var(--ink);
  text-decoration: none; border-radius: 999px; padding: .35rem .85rem;
  transition: transform .15s;
  white-space: nowrap;
}
.child-new-btn:hover { transform: translateY(-1px); }
.child-playlist-btn {
  font-size: .82rem; color: rgba(247,220,164,.7);
  background: none; border: 1px solid rgba(240,196,108,.3); border-radius: 999px;
  padding: .35rem .85rem; cursor: pointer; white-space: nowrap;
  transition: all .15s; font-family: var(--sans);
}
.child-playlist-btn:hover { border-color: var(--gold); color: var(--gold); }
.child-playlist-btn.playing { color: var(--gold); border-color: var(--gold); background: rgba(240,196,108,.1); }
.mini-counter {
  font-size: .72rem; color: #9c91c4; line-height: 1; margin-top: .1rem;
}

/* ---------- barre mode enfant ---------- */
.kid-mode-bar {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(240, 196, 108, .07);
  border: 1px solid rgba(240, 196, 108, .22);
  border-radius: 16px; padding: 1rem 1.2rem;
  margin-bottom: 2.2rem;
  flex-wrap: wrap;
}
.kid-mode-info {
  display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0;
}
.kid-mode-icon { font-size: 1.8rem; flex-shrink: 0; }
.kid-mode-info strong { display: block; color: var(--gold-soft); font-weight: 700; }
.kid-mode-info span { font-size: .84rem; color: #9c91c4; }
.kid-mode-btn {
  background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: .95rem; text-decoration: none;
  padding: .65rem 1.5rem; border-radius: 999px;
  transition: transform .15s, box-shadow .15s;
  white-space: nowrap; flex-shrink: 0;
}
.kid-mode-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(240,196,108,.4); }

/* quota d'histoires en mode enfant */
.kid-quota-pick { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.kid-quota-label { font-size: .75rem; color: rgba(247,220,164,.42); white-space: nowrap; }
.kid-quota-btns { display: flex; gap: .18rem; }
.kid-quota-btn {
  background: rgba(255,255,255,.05); border: 1px solid rgba(240,196,108,.16);
  color: rgba(247,220,164,.55); font: inherit; font-size: .78rem; font-weight: 700;
  padding: .22rem .5rem; border-radius: 7px; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s; line-height: 1.4;
}
.kid-quota-btn:active { background: rgba(240,196,108,.14); }
.kid-quota-btn.kid-quota-active { background: rgba(240,196,108,.15); border-color: var(--gold); color: var(--gold); }

@media (max-width: 480px) {
  .child-header { gap: .6rem; }
  .child-mode-link { display: none; }
  .kid-mode-bar { gap: .8rem; }
}

/* ---------- badge série dans le formulaire ---------- */
.series-hint {
  display: flex; align-items: center; gap: .85rem;
  background: linear-gradient(135deg, rgba(240,196,108,.12) 0%, rgba(240,196,108,.05) 100%);
  border: 1.5px solid rgba(240,196,108,.4);
  border-radius: 14px; padding: .9rem 1rem;
  margin-bottom: 1.2rem;
  animation: rise .4s ease both;
  box-shadow: 0 4px 24px rgba(240,196,108,.12);
}
.series-hint[hidden] { display: none; }
.series-hint-icon {
  font-size: 1.35rem; flex-shrink: 0; color: var(--gold);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(240,196,108,.15); border: 1px solid rgba(240,196,108,.3);
  display: flex; align-items: center; justify-content: center;
}
.series-hint-body { flex: 1; min-width: 0; }
.series-hint strong { display: block; color: var(--gold-soft); font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.series-hint span { font-size: .8rem; color: #9c91c4; }
.series-hint-link {
  font-size: .78rem; font-weight: 700; color: var(--gold);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  border: 1px solid rgba(240,196,108,.35); border-radius: 999px;
  padding: .3rem .75rem;
  transition: background .15s, border-color .15s;
}
.series-hint-link:hover { background: rgba(240,196,108,.1); border-color: var(--gold); }

/* IT140 — magie du prénom */
.prenom-preview {
  font-family: var(--serif); font-size: .88rem; font-style: italic;
  color: var(--gold); text-align: center; letter-spacing: .02em;
  margin-top: .45rem; margin-bottom: .1rem;
  animation: prenom-preview-in .35s ease both;
  pointer-events: none;
}
.prenom-preview[hidden] { display: none; }
@keyframes prenom-preview-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* IT140 — badge "rejoué" sur les cartes d'histoires */
.card-plays {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .7rem; color: rgba(240,196,108,.65);
  background: rgba(240,196,108,.07); border-radius: 100px;
  padding: 1px 6px; margin-left: .25rem;
}
.card-plays-fav {
  color: #e8927c; background: rgba(232,146,124,.1);
  font-style: normal; font-weight: 700;
}
/* IT325 — kid reaction emoji on story cards */
.card-kid-reaction { display:inline-block; font-size:1.1rem; margin:0 .2rem .4rem 0; line-height:1; vertical-align:middle; cursor:default; }

/* ---------- sélecteur de langue ---------- */
.field-lang { margin-top: .4rem; }

/* ---------- barre de confiance ---------- */
.trust-bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; flex-wrap: wrap;
  padding: .9rem clamp(1rem, 4vw, 2.4rem);
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid rgba(240, 196, 108, .1);
  font-size: .82rem; color: rgba(247, 220, 164, .7);
}
.trust-bar span strong { color: var(--gold-soft); }
.trust-sep { opacity: .3; }
@media (max-width: 600px) {
  .trust-bar { gap: .7rem; font-size: .76rem; }
  .trust-sep { display: none; }
}

/* ---------- capture email (story page) ---------- */
.email-save {
  background: rgba(240, 196, 108, .06);
  border: 1px solid rgba(240, 196, 108, .22);
  border-radius: 18px; padding: 1.6rem;
  margin: 2rem 0; text-align: center;
}
.email-save-icon { font-size: 2rem; margin-bottom: .6rem; }
.email-save-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.email-save-desc { font-size: .88rem; color: #b4a9d6; margin-bottom: 1.1rem; }
.email-save-form { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.email-save-input {
  flex: 1; min-width: 200px; max-width: 300px;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(240,196,108,.35);
  border-radius: 999px; padding: .7rem 1.2rem;
  color: var(--gold-soft); font: inherit; font-size: .92rem;
  outline: none; transition: border-color .15s;
}
.email-save-input::placeholder { color: rgba(247,220,164,.4); }
.email-save-input:focus { border-color: var(--gold); }
.email-save-btn {
  background: var(--gold); color: var(--ink);
  font: inherit; font-weight: 700; font-size: .92rem;
  border: none; border-radius: 999px; padding: .7rem 1.4rem;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.email-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(240,196,108,.35); }
.email-save-note { font-size: .88rem; margin-top: .8rem; font-style: italic; }
.email-save-divider { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 .8rem; }
.email-save-divider::before, .email-save-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.email-save-divider span { font-size: .75rem; color: rgba(249,241,223,.35); text-transform: uppercase; letter-spacing: .08em; }
.email-save-cal-btn { display: inline-block; background: transparent; border: 1px solid rgba(240,196,108,.4); color: var(--gold); font-size: .88rem; font-weight: 600; padding: .5rem 1.4rem; border-radius: 50px; text-decoration: none; cursor: pointer; transition: all .15s; }
.email-save-cal-btn:hover { background: rgba(240,196,108,.1); border-color: var(--gold); transform: translateY(-1px); }
.email-save-cal-desc { font-size: .72rem; color: rgba(249,241,223,.4); margin-top: .5rem; }

/* ---------- modal paywall ---------- */
/* Autosubmit countdown bar */
.autosubmit-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(240,196,108,.07);
  border: 1px solid rgba(240,196,108,.22);
  border-radius: 10px;
  padding: .6rem .9rem;
  margin-bottom: .9rem;
  font-size: .88rem; color: var(--cream); gap: .6rem;
}
.autosubmit-bar strong { color: var(--gold); font-size: 1rem; }
.autosubmit-cancel {
  background: transparent; border: 1px solid rgba(240,196,108,.25);
  border-radius: 6px; color: var(--muted); padding: .25rem .6rem;
  font-size: .8rem; cursor: pointer; flex-shrink: 0;
}
.autosubmit-cancel:hover { border-color: var(--gold); color: var(--gold); }
/* Bilan de famille trigger */
.bilan-trigger {
  display: block; width: 100%;
  background: rgba(240,196,108,.07);
  border: 1px dashed rgba(240,196,108,.3);
  border-radius: 12px;
  color: var(--gold-soft); font-size: .88rem; font-weight: 600;
  padding: .65rem 1rem; margin: .8rem 0 1.2rem; cursor: pointer;
  letter-spacing: .03em; transition: background .15s, border-color .15s;
}
.bilan-trigger:hover { background: rgba(240,196,108,.12); border-color: var(--gold); }
/* Bilan modal */
.bilan-modal {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(8, 6, 26, .94); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s; padding: 1.5rem;
}
.bilan-modal.visible { opacity: 1; }
.bilan-inner {
  background: linear-gradient(160deg, rgba(30,24,64,.95), rgba(14,12,34,.98));
  border: 1px solid rgba(240,196,108,.25);
  border-radius: 20px; padding: 2.2rem 2rem;
  max-width: 380px; width: 100%; text-align: center; position: relative;
  box-shadow: 0 0 80px rgba(240,196,108,.12);
  transform: translateY(10px); transition: transform .3s;
}
.bilan-modal.visible .bilan-inner { transform: none; }
.bilan-eyebrow {
  font-family: var(--serif); font-size: 1rem; color: var(--gold);
  letter-spacing: .12em; margin-bottom: 1.6rem;
}
.bilan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.4rem; }
.bilan-stat { display: flex; flex-direction: column; align-items: center; }
.bilan-n { font-family: var(--serif); font-size: 2.4rem; font-weight: 900; color: var(--gold); line-height: 1; }
.bilan-l { font-size: .72rem; color: var(--muted); margin-top: .3rem; text-align: center; }
.bilan-since { font-size: .8rem; color: var(--muted); margin-bottom: 1.2rem; }
.bilan-actions { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .7rem; }
.bilan-share {
  background: var(--gold); color: var(--ink);
  border: none; padding: .75rem 2rem; border-radius: 10px;
  font-weight: 700; font-size: .9rem; cursor: pointer; width: 100%;
}
.bilan-share:hover { opacity: .9; }
.bilan-card-dl { background: rgba(255,255,255,.06); border: 1px solid rgba(240,196,108,.22); color: var(--gold-soft); font: inherit; font-size: .88rem; font-weight: 600; padding: .65rem 2rem; border-radius: 10px; cursor: pointer; width: 100%; transition: background .13s; }
.bilan-card-dl:hover { background: rgba(240,196,108,.1); }
.bilan-close {
  position: absolute; top: .8rem; right: .9rem;
  background: none; border: none; color: var(--muted);
  font-size: 1rem; cursor: pointer; padding: .2rem .4rem;
}
.bilan-close:hover { color: var(--cream); }
.paywall-modal {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(10, 8, 32, .88); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s;
  padding: 1rem;
}
.paywall-modal[hidden] { display: none; }
.paywall-modal.visible { opacity: 1; }
.paywall-inner {
  background: linear-gradient(150deg, rgba(20,17,46,.97) 0%, rgba(26,15,58,.97) 100%);
  border: 1.5px solid rgba(247,220,164,.3);
  border-radius: 24px; padding: 2.4rem 2rem;
  max-width: 480px; width: 100%;
  transform: translateY(24px); transition: transform .35s;
  box-shadow: 0 0 80px rgba(247,220,164,.07);
}
.paywall-modal.visible .paywall-inner { transform: none; }
.paywall-eyebrow {
  text-align: center; font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .6rem;
}
.paywall-title {
  font-family: var(--serif); font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 700; color: var(--cream); text-align: center;
  margin-bottom: .6rem; line-height: 1.25;
}
.paywall-sub {
  text-align: center; color: #c5badf; font-size: .95rem;
  margin-bottom: 1.5rem; line-height: 1.55;
}
.paywall-perks {
  list-style: none; padding: 0; margin: 0 0 1.6rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.paywall-perks li {
  color: #d8cfeb; font-size: .92rem;
  padding-left: .2rem;
}
.paywall-perks li strong { color: var(--cream); }
.paywall-price {
  text-align: center; margin-bottom: 1.4rem;
}
.paywall-amount {
  font-family: var(--serif); font-size: 2.6rem; font-weight: 700;
  color: var(--gold);
}
.paywall-period { color: #9c91c4; font-size: 1rem; }
.paywall-cta {
  width: 100%; justify-content: center; font-size: 1.05rem; padding: 1rem;
  margin-bottom: .8rem;
}
.paywall-social-proof {
  font-size: .82rem; color: rgba(180,214,180,.75);
  text-align: center; margin-bottom: 1rem;
  font-style: italic;
}
.paywall-promo-note {
  text-align: center; font-size: .78rem;
  color: rgba(180,169,214,.55); margin-bottom: .6rem;
  letter-spacing: .01em;
}
.paywall-cancel {
  width: 100%; text-align: center; font-size: .88rem;
  color: rgba(180,169,214,.55); border-color: transparent;
  padding: .5rem; cursor: pointer;
}
.paywall-cancel:hover { color: var(--gold-soft); }

/* ---------- nudge post-extrait démo ---------- */
.demo-end-nudge {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%) translateY(120%);
  z-index: 400; width: min(92vw, 400px);
  background: linear-gradient(135deg, #1c1640 0%, #271b55 100%);
  border: 1.5px solid rgba(240,196,108,.38);
  border-radius: 18px; padding: 1.5rem 1.4rem 1.3rem;
  box-shadow: 0 12px 48px rgba(0,0,0,.55);
  text-align: center;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.demo-end-nudge.visible { transform: translateX(-50%) translateY(0); }
.demo-end-nudge[hidden] { display: none; }
.demo-end-close {
  position: absolute; top: .7rem; right: .9rem;
  background: none; border: none; color: rgba(180,169,214,.5);
  font-size: 1rem; cursor: pointer; line-height: 1; padding: .2rem;
}
.demo-end-close:hover { color: var(--gold-soft); }
.demo-end-icon { font-size: 1.6rem; color: var(--gold); margin-bottom: .5rem; }
.demo-end-title {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 700;
  color: var(--cream); margin-bottom: .4rem; line-height: 1.25;
}
.demo-end-sub { font-size: .85rem; color: #b4a9d6; margin-bottom: 1rem; line-height: 1.5; }
.demo-end-form { display: flex; gap: .6rem; }
.demo-end-input {
  flex: 1; padding: .65rem .9rem; border-radius: 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(240,196,108,.25);
  color: var(--cream); font-size: .95rem; font-family: var(--sans);
  outline: none; min-width: 0;
}
.demo-end-input::placeholder { color: rgba(246,237,218,.35); }
.demo-end-input:focus { border-color: rgba(240,196,108,.6); }
.demo-end-cta {
  white-space: nowrap; padding: .65rem 1.1rem; border-radius: 10px;
  background: var(--gold); color: var(--ink); font-weight: 800; font-size: .9rem;
  border: none; cursor: pointer; transition: transform .15s, box-shadow .15s;
  font-family: var(--sans);
}
.demo-end-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(240,196,108,.4); }

/* ---------- popup partage ---------- */
.share-popup {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 17, 46, .82); backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1rem;
}
.share-popup[hidden] { display: none; }
.share-popup-inner {
  background: var(--night-2);
  border: 1px solid rgba(240,196,108,.25);
  border-radius: 20px 20px 16px 16px; padding: 1.6rem;
  width: 100%; max-width: 420px; position: relative;
  animation: rise .22s ease both;
}
.share-popup-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; text-align: center; }
.share-popup-row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.share-btn {
  display: flex; align-items: center; gap: .55rem;
  padding: .85rem 1.4rem; border-radius: 12px; font: inherit;
  font-weight: 700; font-size: .92rem; cursor: pointer;
  text-decoration: none; border: none; transition: transform .15s;
}
.share-btn:hover { transform: translateY(-2px); }
.share-wa { background: #25D366; color: #fff; }
.share-copy { background: rgba(255,255,255,.08); color: var(--gold-soft); border: 1.5px solid rgba(240,196,108,.3) !important; }
.share-card { background: rgba(180,169,214,.12); color: rgba(180,169,214,.85); border: 1.5px solid rgba(180,169,214,.25) !important; }
.share-close {
  position: absolute; top: .8rem; right: .9rem;
  background: transparent; border: none; color: #9c91c4;
  font-size: 1rem; cursor: pointer; padding: .3rem .5rem;
}

/* ---------- séries / épisodes ---------- */
.child-series-label {
  font-size: .83rem; color: rgba(240,196,108,.6);
  font-style: italic; margin: -.6rem 0 .5rem;
  padding-left: calc(44px + .9rem);
}
.child-saga-link {
  color: rgba(240,196,108,.85); text-decoration: none; font-style: normal;
  transition: color .15s;
}
.child-saga-link:hover { color: var(--gold); }
.saga-meter {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin: 0 0 .9rem calc(44px + .9rem);
}
.saga-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
  position: relative;
}
.saga-dot + .saga-dot::before {
  content: ""; position: absolute; left: -7px; top: 50%;
  width: 6px; height: 1.5px; background: rgba(240,196,108,.3);
  transform: translateY(-50%);
}
.saga-done {
  background: linear-gradient(135deg, var(--gold), #c89b4b);
  color: var(--night-bg);
}
.saga-next {
  background: rgba(240,196,108,.1); border: 1.5px dashed rgba(240,196,108,.4);
  color: rgba(240,196,108,.5);
}
.book-ep {
  flex: none; font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  background: var(--gold); color: var(--ink);
  border-radius: 6px; padding: .15rem .45rem;
  align-self: flex-start;
}
.episode-badge {
  text-align: center; font-size: .82rem;
  color: rgba(240,196,108,.75); margin: -.8rem 0 2rem;
  letter-spacing: .02em;
}
.episode-badge span {
  background: rgba(240,196,108,.15);
  border: 1px solid rgba(240,196,108,.3);
  border-radius: 999px; padding: .2rem .75rem;
  margin-right: .4rem;
}

/* ---------- navigation entre épisodes ---------- */
.series-nav {
  margin: 2rem 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(240,196,108,.18);
  border-radius: 18px; padding: 1.4rem;
}
.series-nav-title {
  font-family: var(--serif); font-size: 1rem;
  color: var(--gold-soft); margin-bottom: 1rem;
  font-weight: 700;
}
.series-nav-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.series-saga-link {
  display: block; margin-top: 1rem; text-align: center;
  color: var(--gold); font-size: .85rem; font-weight: 600;
  text-decoration: none; opacity: .8;
  transition: opacity .15s;
}
.series-saga-link:hover { opacity: 1; }
.series-nav-card {
  display: flex; flex-direction: column; gap: .3rem;
  flex: 1; min-width: 140px; max-width: 220px;
  text-decoration: none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(240,196,108,.2);
  border-radius: 12px; padding: .9rem 1rem;
  transition: border-color .15s, background .15s;
}
.series-nav-card:hover { border-color: rgba(240,196,108,.5); background: rgba(240,196,108,.07); }
.series-ep {
  font-size: .72rem; font-weight: 800;
  color: var(--gold); letter-spacing: .05em;
}
.series-title {
  font-size: .88rem; color: var(--gold-soft);
  font-family: var(--serif); font-weight: 600;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.series-prev-next {
  display: flex; gap: .8rem; margin-bottom: .8rem; flex-wrap: wrap;
}
.series-pn-btn {
  display: flex; flex-direction: column; gap: .2rem;
  flex: 1; min-width: 140px;
  text-decoration: none;
  background: rgba(240,196,108,.07);
  border: 1px solid rgba(240,196,108,.3);
  border-radius: 12px; padding: .85rem 1rem;
  transition: border-color .15s, background .15s;
}
.series-pn-btn:hover { border-color: rgba(240,196,108,.6); background: rgba(240,196,108,.12); }
.series-next { text-align: right; align-items: flex-end; }
.series-pn-dir {
  font-size: .72rem; font-weight: 800; color: var(--gold);
  letter-spacing: .06em; text-transform: uppercase;
}
.series-pn-ep {
  font-size: .82rem; color: var(--gold-soft);
  font-family: var(--serif);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- navigation mobile bas d'écran ---------- */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  background: rgba(14, 12, 34, .94);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(240, 196, 108, .18);
  padding: 0 0 env(safe-area-inset-bottom);
}
@media (max-width: 760px) {
  .bottom-nav { display: flex; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mascot { bottom: calc(72px + env(safe-area-inset-bottom)); }
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: .55rem .3rem .4rem;
  color: #9c91c4; text-decoration: none; font-size: .67rem;
  font-weight: 700; letter-spacing: .02em;
  transition: color .18s, transform .18s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.bottom-nav-item .bn-icon { font-size: 1.3rem; line-height: 1; }
.bottom-nav-item:hover { color: var(--gold-soft); transform: translateY(-1px); }
.bottom-nav-item[aria-current="page"] {
  color: var(--gold);
}
.bottom-nav-item[aria-current="page"]::after {
  content: ""; position: absolute; bottom: -.5px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 2.5px; border-radius: 999px;
  background: var(--gold);
}
.bottom-nav-item.bn-cta {
  color: var(--gold); font-weight: 800;
}
.bottom-nav-item.bn-cta .bn-icon {
  background: var(--gold); color: var(--ink);
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 900;
}

/* ---------- progression de génération ---------- */
.weaving-progress {
  display: flex; align-items: center; gap: 0;
  margin: 1.4rem 0 .8rem; width: min(320px, 80vw);
}
.wp-step {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  flex: 1; position: relative;
}
.wp-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(240, 196, 108, .12);
  border: 2px solid rgba(240, 196, 108, .25);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; transition: all .4s ease;
}
.wp-label {
  font-size: .67rem; font-weight: 700; letter-spacing: .05em;
  color: rgba(240, 196, 108, .35); text-transform: uppercase;
  transition: color .4s ease; white-space: nowrap;
}
.wp-line {
  flex: 1; height: 2px;
  background: rgba(240,196,108,.12);
  position: relative; overflow: hidden;
  transition: background .4s;
}
.wp-line::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold), rgba(240,196,108,.5));
  transition: width .8s ease;
  border-radius: 1px;
}
.wp-line.wp-done-line::after { width: 100%; }
.wp-step.wp-done .wp-dot {
  background: rgba(240, 196, 108, .2);
  border-color: var(--gold);
}
.wp-step.wp-done .wp-label { color: var(--gold-soft); }
.wp-step.wp-active .wp-dot {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(240, 196, 108, .55);
  animation: wp-pulse 1.6s ease-in-out infinite;
}
.wp-step.wp-active .wp-label { color: var(--gold); }
.wp-line.wp-done-line { background: rgba(240,196,108,.18); }
@keyframes wp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* ---------- barre "pour qui ce soir" ---------- */
.resume-bar {
  display: flex; align-items: center; gap: .8rem;
  background: rgba(232,146,124,.1); border: 1.5px solid rgba(232,146,124,.3);
  border-radius: 16px; padding: .7rem 1rem .7rem .9rem;
  margin: 1.2rem clamp(1rem, 4vw, 2.4rem) 0;
  animation: rise .4s ease both;
}
.resume-bar[hidden] { display: none; }
.resume-bar-emoji { font-size: 1.3rem; flex-shrink: 0; }
.resume-bar-body { flex: 1; min-width: 0; }
.resume-bar-label { font-size: .82rem; color: var(--cream); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-bottom: .3rem; }
.resume-bar-track { height: 3px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; }
.resume-bar-fill { height: 100%; background: linear-gradient(90deg, var(--rose), #f7a088); border-radius: 999px; transition: width .3s; }
.resume-bar-cta {
  flex-shrink: 0; font: 700 .8rem var(--sans);
  background: var(--rose); color: #fff; border-radius: 999px;
  padding: .4rem .9rem; text-decoration: none;
  white-space: nowrap; transition: opacity .15s, transform .12s;
}
.resume-bar-cta:hover { opacity: .88; transform: translateY(-1px); }

/* IT139 — Recent activity ticker */
.recent-activity { max-width: 600px; margin: 0 auto 1.6rem; padding: 0 1.2rem; }
.recent-activity-label { font-family: var(--serif); color: var(--gold); font-size: .8rem; letter-spacing: .08em; text-align: center; margin-bottom: .6rem; }
.rac-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: 12px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(240,196,108,.09);
  margin-bottom: .28rem;
  animation: rac-in .32s ease both;
}
@keyframes rac-in { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: none; } }
.rac-av {
  flex-shrink: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #e8927c);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .75rem; color: var(--ink);
}
.rac-text { flex: 1; font-size: .8rem; color: rgba(247,220,164,.75); line-height: 1.3; }
.rac-text strong { color: var(--cream); font-weight: 600; }
.rac-time { font-size: .7rem; color: rgba(247,220,164,.38); white-space: nowrap; flex-shrink: 0; }
.tonight {
  padding: 1.2rem clamp(1rem, 4vw, 2.4rem) 0;
  animation: rise .5s ease both;
}
.tonight-label {
  font-size: .75rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .8rem;
}
.tonight-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.tonight-child {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(240,196,108,.09); border: 1.5px solid rgba(240,196,108,.32);
  border-radius: 999px; padding: .4rem .9rem .4rem .45rem;
  text-decoration: none; color: var(--cream); font-weight: 700; font-size: .88rem;
  transition: background .15s, transform .12s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.tonight-child:hover { background: rgba(240,196,108,.18); border-color: var(--gold); transform: scale(1.04); }
.tonight-child-wrap { display: inline-flex; align-items: center; gap: .35rem; }
.tonight-quick {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(240,196,108,.12);
  border: 1px solid rgba(240,196,108,.3);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: .82rem; color: var(--gold);
  flex-shrink: 0; transition: background .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.tonight-quick:hover { background: rgba(240,196,108,.28); transform: scale(1.1); }
.tonight-saga {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(138,107,211,.12); border: 1px solid rgba(138,107,211,.3);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: .78rem; flex-shrink: 0;
  transition: background .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.tonight-saga:hover { background: rgba(138,107,211,.25); transform: scale(1.1); }
.tonight-kid {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(20,17,46,.35); border: 1px solid rgba(247,220,164,.25);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: .8rem; flex-shrink: 0;
  transition: background .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.tonight-kid:hover { background: rgba(20,17,46,.65); transform: scale(1.1); }
.tonight-gift {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(240,196,108,.1); border: 1px solid rgba(240,196,108,.3);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: .78rem; flex-shrink: 0;
  transition: background .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.tonight-gift:hover { background: rgba(240,196,108,.22); transform: scale(1.1); }
.tonight-surprise {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(122,110,222,.12); border: 1px solid rgba(122,110,222,.35);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: .78rem; flex-shrink: 0;
  transition: background .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.tonight-surprise:hover { background: rgba(122,110,222,.22); transform: scale(1.1) rotate(20deg); }
.share-gift { background: rgba(240,196,108,.12); color: rgba(249,241,223,.85); border: 1.5px solid rgba(240,196,108,.3) !important; font-size: .82rem; }
.tonight-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), #c89b4b);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 900; color: var(--ink);
}
.tonight-name { flex: 1; }
.tonight-ep {
  font-size: .68rem; font-weight: 800; color: var(--night-bg);
  background: var(--gold); border-radius: 999px;
  padding: .1rem .4rem; letter-spacing: .04em; flex-shrink: 0;
}
.tonight-new {
  display: flex; align-items: center; gap: .4rem;
  background: none; border: 1.5px dashed rgba(240,196,108,.3);
  border-radius: 999px; padding: .4rem .9rem;
  color: #9c91c4; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.tonight-new:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- témoignages parents ---------- */
.testimonials {
  padding: 4.5rem 0 4rem;
  background: linear-gradient(180deg, rgba(240,196,108,.03) 0%, rgba(255,255,255,.015) 100%);
  border-top: 1px solid rgba(240,196,108,.12);
  border-bottom: 1px solid rgba(240,196,108,.12);
  overflow: hidden;
}
.testimonials h2 { text-align: center; margin-bottom: .6rem; }
.testi-sub { text-align: center; color: #9c91c4; font-size: .95rem; margin-bottom: 2.5rem; }

.testi-marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 7%, black 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 7%, black 93%, transparent 100%);
  padding: .4rem 0;
}
.testi-track {
  display: flex; gap: 1.4rem;
  width: max-content; flex-shrink: 0;
}
.testi-track-l { animation: testi-left 70s linear infinite; }
.testi-track-r { animation: testi-right 65s linear infinite; margin-top: 1.4rem; }
.testi-marquee-wrap:hover .testi-track { animation-play-state: paused; }
@keyframes testi-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes testi-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .testi-track { animation: none !important; } }

/* keep .testi-row as alias for any static usage */
.testi-row { display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center; max-width: 1060px; margin: 0 auto; }
.testi-card {
  width: 340px; flex-shrink: 0;
  background: rgba(249,241,223,.06);
  border: 1px solid rgba(240,196,108,.22);
  border-radius: 20px; padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: .9rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: relative; overflow: hidden;
  transition: transform .22s ease, border-color .22s, box-shadow .22s;
}
.testi-card::before {
  content: '❝';
  position: absolute; top: .4rem; right: 1.1rem;
  font-size: 3.8rem; line-height: 1;
  color: rgba(240,196,108,.1);
  font-family: var(--serif); pointer-events: none;
}
.testi-card:hover {
  transform: translateY(-3px);
  border-color: rgba(240,196,108,.42);
  box-shadow: 0 14px 44px rgba(240,196,108,.1);
}
.testi-stars { color: var(--gold); font-size: .88rem; letter-spacing: .08em; }
.testi-quote {
  font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; line-height: 1.62; color: rgba(232,224,245,.92);
  flex: 1;
}
.testi-author {
  display: flex; align-items: center; gap: .8rem;
  padding-top: .7rem; border-top: 1px solid rgba(240,196,108,.15);
}
.testi-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold) 0%, #c47f3a 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800; color: var(--ink);
  box-shadow: 0 2px 10px rgba(240,196,108,.28);
}
.testi-name { font-weight: 700; font-size: .88rem; color: var(--cream); }
.testi-role { font-size: .78rem; color: #9c91c4; }

/* ---------- saga showcase ---------- */
.saga-sc {
  padding: 4.5rem clamp(1rem, 4vw, 2.4rem) 4rem;
  text-align: center;
  border-top: 1px solid rgba(240,196,108,.1);
}
.saga-sc-eyebrow {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.saga-sc-h2 {
  font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 700; color: var(--cream); margin-bottom: .7rem;
}
.saga-sc-h2 em { color: var(--gold); font-style: normal; }
.saga-sc-sub {
  color: #9c91c4; font-size: .95rem; max-width: 44em;
  margin: 0 auto 2.4rem; line-height: 1.6;
}
.saga-sc-demo {
  max-width: 680px; margin: 0 auto 2.2rem;
  background: rgba(249,241,223,.05);
  border: 1px solid rgba(240,196,108,.2);
  border-radius: 24px; padding: 1.6rem 1.4rem 1.2rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 24px 80px rgba(0,0,0,.3), 0 0 0 1px rgba(240,196,108,.06);
}
.saga-sc-child {
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: 1.2rem; text-align: left;
}
.saga-sc-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, hsl(320,60%,58%), hsl(265,55%,48%));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.3rem; font-weight: 800; color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.saga-sc-child-info { flex: 1; }
.saga-sc-child-name {
  font-family: var(--serif); font-size: 1rem; font-weight: 700; color: var(--cream);
}
.saga-sc-child-meta { font-size: .78rem; color: #9c91c4; margin-top: .1rem; }
.saga-sc-episodes {
  display: flex; gap: .65rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: .2rem .1rem .6rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 88%, transparent 100%);
}
.saga-sc-episodes::-webkit-scrollbar { display: none; }
.saga-sc-ep {
  flex: 0 0 110px; scroll-snap-align: start;
  background: rgba(249,241,223,.06);
  border: 1px solid rgba(240,196,108,.2);
  border-radius: 14px; padding: .85rem .65rem .7rem;
  display: flex; flex-direction: column; gap: .3rem;
  align-items: center; text-align: center;
  position: relative;
}
.saga-sc-ep-num {
  position: absolute; top: -.55rem; left: .55rem;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(240,196,108,.2); border: 1px solid rgba(240,196,108,.4);
  color: var(--gold); font-size: .62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.saga-done { border-color: rgba(240,196,108,.35); background: rgba(240,196,108,.05); }
.saga-done .saga-sc-ep-num { background: var(--gold); color: var(--ink); border-color: var(--gold); font-size: .65rem; }
.saga-current {
  border-color: var(--gold); border-width: 1.5px;
  background: rgba(240,196,108,.09);
  box-shadow: 0 0 0 3px rgba(240,196,108,.14), 0 8px 32px rgba(0,0,0,.25);
}
.saga-current .saga-sc-ep-num { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.saga-next { border-style: dashed; border-color: rgba(240,196,108,.2); opacity: .6; }
.saga-sc-ep-emoji { font-size: 1.8rem; line-height: 1; margin: .2rem 0 .25rem; }
.saga-sc-ep-title {
  font-family: var(--serif); font-size: .67rem; font-weight: 600;
  color: var(--gold-soft); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.saga-done .saga-sc-ep-title { color: rgba(247,220,164,.55); }
.saga-current .saga-sc-ep-title { color: var(--gold); }
.saga-next .saga-sc-ep-title { color: #7a6e9e; font-style: italic; }
.saga-sc-ep-now {
  font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  border-radius: 999px; padding: .1rem .45rem; margin-top: .1rem;
}
.saga-sc-cta { margin-top: 0; }

/* ---------- YouTube promo section ---------- */
.yt-promo {
  position: relative; z-index: 1;
  padding: 3.5rem 1.5rem 4rem;
  text-align: center;
}
.yt-promo-inner {
  display: flex; align-items: center; justify-content: center; gap: 3rem;
  max-width: 820px; margin: 0 auto;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(240,196,108,.15);
  border-radius: 24px; padding: 2.5rem 2.8rem;
}
@media (max-width: 640px) {
  .yt-promo-inner { flex-direction: column; gap: 1.6rem; padding: 1.8rem 1.4rem; }
}
.yt-promo-text { flex: 1; text-align: left; }
.yt-eyebrow {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .7rem;
}
.yt-title {
  font-family: var(--serif); font-size: 1.55rem; font-weight: 700;
  color: var(--cream); line-height: 1.25; margin-bottom: .7rem;
}
.yt-title em { color: var(--gold); font-style: normal; }
.yt-sub {
  font-size: .92rem; color: #9c91c4; line-height: 1.55; margin-bottom: 1.2rem;
}
.yt-cta {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #ff0000; color: #fff;
  border-radius: 50px; padding: .62rem 1.4rem;
  font-family: var(--sans); font-size: .9rem; font-weight: 700;
  text-decoration: none; transition: opacity .18s, transform .18s;
}
.yt-cta:hover { opacity: .88; transform: translateY(-1px); }
.yt-cta svg { flex-shrink: 0; }
.yt-thumb-wrap {
  flex-shrink: 0; width: 180px;
}
.yt-thumb-link {
  display: block; position: relative; border-radius: 14px; overflow: hidden;
  background: #111; text-decoration: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  transition: transform .2s;
}
.yt-thumb-link:hover { transform: scale(1.03); }
.yt-thumb-link img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.yt-thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.yt-thumb-play-inner {
  width: 44px; height: 44px; background: rgba(255,0,0,.88); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.yt-thumb-play-inner svg { margin-left: 3px; }
.yt-thumb-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff; font-size: .72rem; font-family: var(--sans); font-weight: 600;
  padding: .7rem .5rem .4rem; text-align: center;
}

/* ---------- streak bar dans la bibliothèque ---------- */
.streak-bar {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(240,196,108,.09); border: 1px solid rgba(240,196,108,.22);
  border-radius: 50px; padding: .35rem 1rem .35rem .8rem;
  margin-bottom: 1.2rem;
  font-family: var(--sans); font-size: .85rem; font-weight: 700; color: var(--gold);
}
.streak-bar[hidden] { display: none; }
.streak-fire { font-size: 1rem; }
.streak-count { font-family: var(--serif); font-size: 1.05rem; }

/* ---------- notation histoire ---------- */
.story-rating {
  margin-top: 1.6rem; padding: 1.4rem 1.6rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(240,196,108,.18);
  border-radius: 18px; text-align: center;
}
.story-rating-q {
  font-family: var(--serif); font-size: 1.1rem; color: var(--cream);
  margin-bottom: 1rem;
}
.story-rating-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.rating-btn {
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(240,196,108,.22);
  border-radius: 999px; padding: .55rem 1.3rem;
  font: inherit; font-size: .95rem; cursor: pointer; color: var(--cream);
  transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.rating-btn:hover { border-color: var(--gold); background: rgba(240,196,108,.12); transform: scale(1.05); }
.rating-btn.selected {
  background: var(--gold); border-color: var(--gold);
  color: var(--ink); font-weight: 700;
}
.rating-thanks {
  font-family: var(--serif); font-size: 1rem; color: var(--gold-soft);
  animation: rise .4s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- bannière PWA install ---------- */
.pwa-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: rgba(14, 12, 34, .97);
  border-top: 1px solid rgba(240, 196, 108, .3);
  padding: .9rem clamp(1rem, 4vw, 2rem);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  animation: slide-up .35s ease both;
}
@media (max-width: 760px) {
  .pwa-banner { bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@keyframes slide-up { from { transform: translateY(100%); } to { transform: none; } }
.pwa-banner[hidden] { display: none; }
.pwa-banner-text { flex: 1; min-width: 0; }
.pwa-banner-title { font-weight: 700; font-size: .9rem; color: var(--cream); }
.pwa-banner-sub { font-size: .78rem; color: #9c91c4; margin-top: .1rem; }
.pwa-install-btn {
  background: var(--gold); color: var(--ink);
  border: none; cursor: pointer; font: inherit; font-weight: 700;
  font-size: .88rem; padding: .55rem 1.2rem; border-radius: 999px;
  transition: transform .15s, box-shadow .15s; white-space: nowrap;
}
.pwa-install-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(240,196,108,.35); }
.pwa-dismiss-btn {
  background: none; border: none; cursor: pointer; color: #9c91c4;
  font-size: 1.1rem; padding: .3rem; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.pwa-dismiss-btn:hover { color: var(--cream); }

/* ---------- streak "X soirs de suite" ---------- */
.story-streak {
  text-align: center; font-family: var(--serif);
  font-size: 1.1rem; color: var(--gold); font-weight: 700;
  letter-spacing: .03em; margin-bottom: .5rem;
  animation: rise .5s ease both;
}

/* Célébration palier de streak */
.streak-cel {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10, 8, 32, .85);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s;
  backdrop-filter: blur(6px);
}
.streak-cel.visible { opacity: 1; }
.streak-cel-inner {
  text-align: center; padding: 2.6rem 2rem;
  background: linear-gradient(145deg, rgba(20,17,46,.9), rgba(26,15,58,.9));
  border: 1.5px solid rgba(247,220,164,.35);
  border-radius: 24px; max-width: 340px;
  transform: translateY(20px); transition: transform .35s;
  box-shadow: 0 0 60px rgba(247,220,164,.08);
}
.streak-cel.visible .streak-cel-inner { transform: none; }
.streak-cel-stars {
  font-size: 1.8rem; color: var(--gold); letter-spacing: .4em; margin-bottom: .6rem;
}
.streak-cel-count {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 700;
  color: var(--cream); margin-bottom: .4rem;
}
.streak-cel-msg { color: #d8cfeb; font-size: 1rem; margin-bottom: 1.6rem; }
.streak-cel-close {
  background: var(--gold); color: var(--ink); border: none; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: .95rem;
  padding: .7rem 2rem; cursor: pointer;
  transition: opacity .15s;
}
.streak-cel-close:hover { opacity: .85; }

/* ── Wizard de création 3 étapes ─────────────────────────────────────── */
.wizard-dots {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 0 0 .7rem;
}
.wdot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(240,196,108,.35); background: transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.wdot.wdot-active {
  border-color: var(--gold); background: var(--gold);
  box-shadow: 0 0 0 4px rgba(240,196,108,.2);
}
.wdot.wdot-done { border-color: var(--gold); background: rgba(240,196,108,.6); }
.wdot-line {
  width: 40px; height: 2px;
  background: rgba(240,196,108,.18); margin: 0 5px;
  transition: background .4s;
}
.wdot-line.wdot-done-line { background: var(--gold); }
.wizard-step-title {
  text-align: center; color: var(--ink);
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  margin: 0 0 1.2rem; opacity: .72; font-style: italic;
}
.form-step { animation: stepIn .28s ease both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.form-step[hidden] { display: none; }
.form-step-nav {
  display: flex; gap: .8rem; justify-content: flex-end;
  margin-top: 1.6rem; flex-direction: column; align-items: flex-end;
}
.form-step-nav.has-back { flex-direction: row; align-items: center; justify-content: space-between; }
.form-step-nav .cta-submit { display: inline-flex; width: auto; margin-top: 0; }
.step1-speed-badge {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  color: #7c6f9b; letter-spacing: .03em;
  margin-top: -.2rem;
}
@keyframes badge-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; color: var(--gold); } }

/* ── Page profil famille ─────────────────────────────────────────── */
.profil-page { max-width: 760px; margin: 0 auto; padding: 2rem 1rem 6rem; }
.profil-title {
  font-family: var(--serif); font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--cream); margin: .4rem 0 2rem; font-weight: 700;
}
/* Calendrier des soirées — 14 derniers jours */
.soir-cal {
  display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.soir-day {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  width: calc((100% - 14 * .35rem) / 14); min-width: 1.6rem; max-width: 2.8rem;
  cursor: default;
}
.soir-day::before {
  content: ""; display: block;
  width: 100%; aspect-ratio: 1;
  border-radius: 6px;
  transition: transform .15s;
}
.soir-on::before {
  background: rgba(247, 220, 164, .72);
  box-shadow: 0 0 6px rgba(247, 220, 164, .3);
}
.soir-off::before { background: rgba(255,255,255,.06); }
.soir-day:hover::before { transform: scale(1.12); }
.soir-label {
  font-size: .6rem; color: rgba(180,169,214,.4); text-transform: capitalize;
}
.soir-on .soir-label { color: rgba(247,220,164,.6); }

.profil-stats-bar {
  display: flex; gap: 0;
  background: rgba(249,241,223,.07);
  border: 1px solid rgba(240,196,108,.22);
  border-radius: 20px; overflow: hidden;
  margin-bottom: 2.2rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.profil-stat {
  flex: 1; padding: 1.2rem .8rem; text-align: center;
  border-right: 1px solid rgba(240,196,108,.12);
}
.profil-stat:last-child { border-right: none; }
.profil-stat-n {
  font-family: var(--serif); font-size: 2rem; font-weight: 800;
  color: var(--gold); line-height: 1; display: block;
}
.profil-stat-l {
  font-size: .66rem; color: #9c91c4;
  text-transform: uppercase; letter-spacing: .09em;
  display: block; margin-top: .28rem;
}
/* IT332 — best streak record */
.profil-stat-best { color: rgba(240,196,108,.55); font-size: .6rem; }
.profil-children-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 1.2rem;
}
.profil-child-card {
  background: rgba(249,241,223,.07);
  border: 1px solid rgba(240,196,108,.22);
  border-radius: 22px; padding: 1.5rem 1.6rem;
  display: flex; flex-direction: column; gap: .9rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.profil-child-card:hover {
  border-color: rgba(240,196,108,.42);
  box-shadow: 0 12px 48px rgba(0,0,0,.3);
  transform: translateY(-2px);
}
.profil-child-header { display: flex; align-items: center; gap: 1rem; }
.profil-child-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, hsl(var(--child-hue), 60%, 58%), hsl(calc(var(--child-hue) + 45), 55%, 44%));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.35rem; font-weight: 800;
  color: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.profil-child-info { flex: 1; min-width: 0; }
.profil-child-name {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 700;
  color: var(--cream); line-height: 1.2;
}
.profil-child-meta {
  font-size: .8rem; color: var(--gold-soft);
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin-top: .15rem;
}
.profil-child-streak { color: var(--gold); font-weight: 700; }
.profil-series { color: #9c91c4; font-style: italic; }
.profil-latest {
  font-size: .8rem; color: #9c91c4;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding-top: .4rem; border-top: 1px solid rgba(240,196,108,.08);
}
.profil-latest em { color: var(--gold-soft); font-style: normal; }
/* IT302 — most-played story badge */
.profil-top-story {
  font-size: .78rem; color: rgba(247,220,164,.55);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding-top: .25rem;
}
.profil-top-story em { color: var(--gold-soft); font-style: normal; }
.profil-child-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }
.profil-cta-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: .85rem; text-decoration: none;
  padding: .48rem 1.1rem; border-radius: 999px;
  transition: transform .12s, box-shadow .12s; white-space: nowrap;
}
.profil-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(240,196,108,.4); }
.profil-ghost-btn {
  display: inline-flex; align-items: center;
  color: var(--gold-soft); border: 1.5px solid rgba(240,196,108,.3);
  font-size: .85rem; font-weight: 600; text-decoration: none;
  padding: .48rem 1.1rem; border-radius: 999px; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.profil-ghost-btn:hover { border-color: var(--gold); background: rgba(240,196,108,.08); }
.profil-add-child {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  background: rgba(255,255,255,.025);
  border: 1.5px dashed rgba(240,196,108,.22);
  border-radius: 22px; padding: 1.8rem; cursor: pointer;
  text-decoration: none; color: #9c91c4; font-size: .92rem; font-weight: 600;
  transition: border-color .2s, color .2s, background .2s;
}
.profil-add-child:hover { border-color: var(--gold); color: var(--gold); background: rgba(240,196,108,.04); }
.profil-add-icon { font-size: 1.5rem; line-height: 1; }
.profil-empty { text-align: center; margin-top: 4rem; }
.profil-empty p { color: #9c91c4; margin-bottom: 1.4rem; }

/* profil subscription status bar */
/* IT320 — push notification settings card */
.profil-notif-card {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: rgba(255,255,255,.03); border: 1px solid rgba(240,196,108,.14);
  border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1.2rem;
}
.profil-notif-icon { font-size: 1.3rem; flex-shrink: 0; }
.profil-notif-info { flex: 1; min-width: 120px; }
.profil-notif-title { font-family: var(--serif); font-size: .9rem; color: var(--gold-soft); font-weight: 600; }
.profil-notif-sub { font-size: .75rem; color: rgba(247,220,164,.4); margin-top: .1rem; }
.profil-notif-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.profil-notif-sel {
  background: rgba(255,255,255,.07); border: 1px solid rgba(240,196,108,.2);
  color: var(--gold-soft); font: .82rem var(--sans); border-radius: 8px;
  padding: .3rem .5rem; cursor: pointer;
}
.profil-notif-btn {
  background: rgba(240,196,108,.12); border: 1px solid rgba(240,196,108,.3);
  color: var(--gold); font: .82rem/1 var(--sans); font-weight: 600;
  padding: .4rem .9rem; border-radius: 999px; cursor: pointer;
  transition: background .15s;
}
.profil-notif-btn:disabled { opacity: .5; cursor: default; }
.profil-notif-btn:not(:disabled):hover { background: rgba(240,196,108,.22); }

.profil-sub-bar {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1.4rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.profil-sub-info { flex: 1; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.profil-sub-badge {
  font-family: var(--serif); font-size: .8rem; font-weight: 700; color: var(--ink);
  background: var(--gold); padding: .2rem .7rem; border-radius: 999px; white-space: nowrap;
}
.profil-sub-badge.profil-sub-free { background: rgba(240,196,108,.18); color: var(--gold-soft); }
.profil-sub-quota { font-size: .82rem; color: #9c91c4; }
.profil-sub-progress {
  width: 100%; height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; margin-top: .5rem;
}
.profil-sub-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width .5s; }
.profil-sub-cta {
  font-family: var(--serif); font-size: .82rem; font-weight: 700; color: var(--gold);
  white-space: nowrap; text-decoration: none;
  padding: .3rem .8rem; border: 1px solid rgba(240,196,108,.3); border-radius: 999px;
}
.profil-sub-cta:hover { background: rgba(240,196,108,.08); }

/* tonight streak badge */
.tonight-streak {
  font-family: var(--serif); font-size: .82rem; color: var(--gold);
  font-weight: 700; padding: .38rem .9rem;
  background: rgba(240,196,108,.09); border-radius: 999px;
  letter-spacing: .02em; flex-shrink: 0; white-space: nowrap;
}

/* ---------- nudge épisode suivant (toast 75%) ---------- */
.episode-nudge {
  position: fixed; bottom: 80px; right: 1.2rem; z-index: 30;
  display: flex; align-items: center; gap: .7rem;
  background: #1e1a42; border: 1px solid rgba(240,196,108,.35);
  border-radius: 14px; padding: .75rem 1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  transform: translateY(20px); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  max-width: min(340px, calc(100vw - 2.4rem));
}
.episode-nudge.visible { transform: translateY(0); opacity: 1; }
.episode-nudge > span {
  font-size: .88rem; color: var(--gold-soft); font-family: var(--serif); font-weight: 600;
}
.episode-nudge-cta {
  flex-shrink: 0; font-size: .8rem; font-weight: 700;
  color: var(--night-bg); background: var(--gold);
  border-radius: 999px; padding: .3rem .85rem;
  text-decoration: none; white-space: nowrap;
}
.episode-nudge-cta:hover { background: var(--gold-soft); }
.episode-nudge-close {
  background: none; border: none; color: rgba(255,255,255,.4);
  cursor: pointer; font-size: .9rem; padding: 0; flex-shrink: 0; line-height: 1;
}
.episode-nudge-close:hover { color: rgba(255,255,255,.7); }
@media (max-width: 480px) {
  .episode-nudge { bottom: 76px; right: .8rem; left: .8rem; max-width: none; }
}

/* ── Achievements / badges (profil page) ─────────────────────────────── */
.profil-section-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #7a6e9e; margin-bottom: 1rem;
}
.profil-badges-section {
  margin-bottom: 2.2rem;
}
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(90px, 22vw), 1fr));
  gap: .6rem;
}
.badge-item {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  background: rgba(249,241,223,.06); border: 1px solid rgba(240,196,108,.18);
  border-radius: 14px; padding: .8rem .5rem;
  text-align: center; cursor: default;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.badge-earned {
  border-color: rgba(240,196,108,.4);
  background: rgba(240,196,108,.07);
}
.badge-earned:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(240,196,108,.2);
  border-color: rgba(240,196,108,.6);
}
.badge-locked {
  opacity: .32;
}
.badge-emoji {
  font-size: 1.7rem; line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.badge-label {
  font-family: var(--serif); font-size: .7rem; font-weight: 700;
  color: var(--gold-soft); line-height: 1.25; word-break: break-word;
}

/* ── Referral "Partagez la magie" ──────────────────────────────────── */
.profil-referral {
  margin: 3rem auto 0; max-width: 560px;
  background: linear-gradient(135deg, rgba(240,196,108,.08) 0%, rgba(232,146,124,.06) 100%);
  border: 1px solid rgba(240,196,108,.22); border-radius: 20px;
  padding: 1.6rem 1.5rem; text-align: center;
}
.profil-referral-eyebrow {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .5rem;
}
.profil-referral-text {
  font-size: .9rem; color: #b0a7cc; line-height: 1.6; margin: 0 0 1.2rem; max-width: 36em; margin-left: auto; margin-right: auto;
}
.profil-referral-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.profil-referral-wa {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #25d366; color: #fff; border-radius: 999px;
  padding: .55rem 1.3rem; font-weight: 700; font-size: .88rem;
  text-decoration: none; transition: opacity .15s, transform .1s;
}
.profil-referral-wa:hover { opacity: .88; transform: translateY(-1px); }
.profil-referral-copy {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 1px solid rgba(240,196,108,.35); border-radius: 999px;
  color: rgba(247,220,164,.75); padding: .55rem 1.3rem; font-size: .88rem;
  cursor: pointer; font-family: var(--sans); transition: all .15s;
}
.profil-referral-copy:hover { border-color: var(--gold); color: var(--gold); }

/* ── Onboarding checklist (profil page) ────────────────────────────── */
.profil-onboarding { background: linear-gradient(135deg, rgba(240,196,108,.1), rgba(180,100,220,.08)); border: 1px solid rgba(240,196,108,.3); border-radius: 18px; padding: 1.4rem 1.5rem; margin-bottom: 1.8rem; }
.ob-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.ob-title { font-family: var(--serif); font-size: 1rem; color: var(--gold); font-weight: 600; }
.ob-dismiss { background: transparent; border: none; color: rgba(249,241,223,.3); font-size: 1rem; cursor: pointer; padding: 0 .2rem; }
.ob-dismiss:hover { color: rgba(249,241,223,.7); }
.ob-bar-wrap { height: 5px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; margin-bottom: .4rem; }
.ob-bar { height: 100%; background: linear-gradient(90deg, var(--gold), #c87de0); border-radius: 3px; transition: width .4s; }
.ob-progress { font-size: .72rem; color: rgba(249,241,223,.45); margin-bottom: 1rem; }
.ob-steps { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.ob-step { display: flex; align-items: center; gap: .7rem; }
.ob-step-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.ob-done .ob-step-icon { background: rgba(240,196,108,.2); color: var(--gold); font-weight: 700; font-size: .85rem; }
.ob-step-label { font-size: .88rem; color: rgba(249,241,223,.75); text-decoration: none; }
.ob-step-label[href]:hover { color: var(--gold); }
.ob-done .ob-step-label { color: rgba(249,241,223,.35); text-decoration: line-through; }

/* ── Cross-device sync (profil page) ───────────────────────────────── */
.profil-sync {
  background: rgba(240,196,108,.06);
  border: 1px solid rgba(240,196,108,.2);
  border-radius: 18px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: center;
}
.profil-sync-eyebrow { font-size: .72rem; color: var(--gold); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.profil-sync-title { font-family: var(--serif); font-size: 1.05rem; color: var(--cream); font-weight: 600; margin-bottom: .4rem; }
.profil-sync-desc { font-size: .85rem; color: rgba(249,241,223,.6); line-height: 1.5; margin-bottom: 1.2rem; }
.profil-sync-qr { width: 140px; height: 140px; margin: 0 auto 1rem; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.profil-sync-qr canvas, .profil-sync-qr img { border-radius: 8px; }
.profil-sync-btns { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.profil-sync-copy { background: var(--gold); color: var(--ink); border: none; font-family: var(--serif); font-size: .9rem; font-weight: 700; padding: .55rem 1.4rem; border-radius: 50px; cursor: pointer; }
.profil-sync-copy:hover { opacity: .88; }
.profil-sync-link { background: transparent; border: 1px solid rgba(240,196,108,.3); color: rgba(249,241,223,.65); font-size: .85rem; padding: .5rem 1.2rem; border-radius: 50px; cursor: pointer; text-decoration: none; display: inline-block; }
.profil-sync-link:hover { border-color: var(--gold); color: var(--gold); }

/* ── Next badge progress widget (profil page) ───────────────────────── */
.profil-next-badge {
  margin-bottom: 2.4rem;
}
.next-badge-card {
  background: rgba(240,196,108,.06);
  border: 1px solid rgba(240,196,108,.22);
  border-radius: 16px;
  padding: 1.1rem 1.2rem .95rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.next-badge-top {
  display: flex; align-items: center; gap: .85rem;
}
.next-badge-emoji {
  font-size: 2rem; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(240,196,108,.3));
}
.next-badge-info {
  display: flex; flex-direction: column; gap: .18rem;
}
.next-badge-name {
  font-family: var(--serif); font-size: 1rem; font-weight: 800;
  color: var(--gold); line-height: 1.2;
}
.next-badge-hint {
  font-size: .76rem; color: rgba(249,241,223,.55); font-weight: 500; letter-spacing: .01em;
}
.next-badge-bar-wrap {
  height: 6px; border-radius: 999px;
  background: rgba(240,196,108,.13); overflow: hidden;
}
.next-badge-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--rose) 0%, var(--gold) 100%);
  transition: width .6s cubic-bezier(.4,0,.2,1);
  min-width: 4px;
}
.next-badge-meta {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.next-badge-count {
  font-size: .78rem; font-weight: 700; color: rgba(240,196,108,.7);
  font-variant-numeric: tabular-nums;
}
.next-badge-cta {
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  color: var(--gold); text-decoration: none;
  border: 1px solid rgba(240,196,108,.35);
  border-radius: 999px; padding: .32rem .85rem;
  transition: background .15s, border-color .15s;
}
.next-badge-cta:hover {
  background: rgba(240,196,108,.12); border-color: rgba(240,196,108,.6);
}

/* ── Saga continuation chips (wizard étape 2) ────────────────────────── */
.saga-cont-section {
  margin-bottom: .9rem;
}
.saga-cont-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: .55rem; display: flex; align-items: center; gap: .3rem;
  flex-wrap: wrap;
}
.saga-cont-label em {
  font-style: normal; color: rgba(240,196,108,.6); font-weight: 600;
}
.saga-cont-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.saga-cont-chip {
  font-size: .82rem; font-family: var(--serif); font-weight: 600; font-style: italic;
  padding: .38rem .82rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(240,196,108,.32); background: rgba(240,196,108,.06);
  color: var(--gold-soft); transition: background .15s, border-color .15s, transform .1s;
}
.saga-cont-chip:hover {
  background: rgba(240,196,108,.14); border-color: rgba(240,196,108,.55);
  transform: translateY(-1px);
}
.saga-cont-chip.active {
  background: rgba(240,196,108,.18); border-color: var(--gold); color: var(--gold);
}
.story-fav-on { color: var(--rose) !important; }
.profil-week-card { background: rgba(240,196,108,.06); border: 1px solid rgba(240,196,108,.2); border-radius: 16px; padding: .9rem 1.2rem; margin: .8rem auto 0; max-width: 560px; }
.profil-week-label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: .7rem; }
.profil-week-stats { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.profil-week-stat { display: flex; flex-direction: column; gap: .12rem; }
.profil-week-n { font-family: var(--serif); font-size: 1.5rem; color: var(--cream); font-weight: 700; line-height: 1; }
.profil-week-l { font-size: .78rem; color: rgba(247,220,164,.55); display: flex; align-items: center; gap: .3rem; }
.week-up { color: #7ac97a; font-size: .7rem; font-weight: 700; }
.week-dn { color: var(--rose); font-size: .7rem; font-weight: 700; }
.week-eq { color: rgba(247,220,164,.4); font-size: .7rem; }
.story-end-gift { color: rgba(232,146,124,.75); }
.story-end-gift:hover { color: var(--rose); }
/* Pitch abonnement fin d'histoire */
.story-end-sub-pitch {
  margin-top: 1.2rem;
  background: linear-gradient(135deg, rgba(240,196,108,.12) 0%, rgba(180,120,220,.12) 100%);
  border: 1px solid rgba(240,196,108,.3);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  text-align: center;
}
.sep-pitch-eyebrow { font-size: .72rem; color: var(--gold); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3rem; }
.sep-pitch-title { font-family: var(--serif); font-size: 1rem; color: #fff; font-weight: 600; margin-bottom: .3rem; }
.sep-pitch-price { font-size: .78rem; color: rgba(255,255,255,.55); margin-bottom: .8rem; }
.sep-pitch-btn {
  background: var(--gold); color: var(--ink); border: none;
  font-family: var(--serif); font-size: .9rem; font-weight: 700;
  padding: .55rem 1.4rem; border-radius: 50px; cursor: pointer;
  transition: transform .15s, opacity .15s;
}
.sep-pitch-btn:hover { transform: translateY(-2px); opacity: .9; }
.tonight-surprise { background: rgba(255,255,255,.06); border: 1px solid rgba(240,196,108,.2); color: var(--gold-soft); border-radius: 999px; padding: .4rem .6rem; font-size: 1.15rem; cursor: pointer; transition: transform .15s, background .15s; flex-shrink: 0; line-height: 1; }
.tonight-surprise:hover { transform: scale(1.2) rotate(-15deg); background: rgba(240,196,108,.12); }
.shelf-dur-btns { display: flex; gap: .22rem; flex-shrink: 0; }
.shelf-dur-btn { background: rgba(255,255,255,.04); border: 1px solid rgba(240,196,108,.15); color: rgba(247,220,164,.5); font: inherit; font-size: .78rem; font-weight: 700; padding: .22rem .52rem; border-radius: 7px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; line-height: 1.4; }
.shelf-dur-btn:hover { background: rgba(240,196,108,.08); }
.shelf-dur-btn.shelf-dur-active { background: rgba(240,196,108,.14); border-color: var(--gold); color: var(--gold); }
.card-dur { margin-left: .45rem; font-size: .74rem; color: rgba(247,220,164,.45); font-weight: 600; }
.child-listen-label { display: block; font-size: .76rem; color: rgba(247,220,164,.55); margin-top: .15rem; }
.child-listen-bar-wrap { height: 3px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin: .35rem 0 .1rem; }
.child-listen-bar { height: 100%; background: linear-gradient(90deg, var(--rose), var(--gold)); border-radius: 999px; min-width: 4px; transition: width .4s ease; }
.shelf-sort { background: rgba(255,255,255,.04); border: 1px solid rgba(240,196,108,.2); color: var(--gold-soft); font: inherit; font-size: .8rem; padding: .28rem .5rem; border-radius: 8px; cursor: pointer; outline: none; flex-shrink: 0; }
.shelf-sort:focus { border-color: rgba(240,196,108,.5); }
.shelf-sort option { background: var(--night); }
.card-stars { display: flex; gap: .08rem; margin-top: .25rem; }
.card-star { background: none; border: none; padding: 0 .05rem; font-size: .88rem; cursor: pointer; color: rgba(240,196,108,.28); transition: color .1s; line-height: 1; }
.card-star:hover, .card-star.card-star-on { color: var(--gold); }
/* ── Quick-create modal (IT134) ─────────────────────────────────────────────── */
.quick-modal-backdrop { position: fixed; inset: 0; z-index: 950; background: rgba(10,8,30,.72); display: flex; align-items: flex-end; animation: qm-in .2s ease; }
@keyframes qm-in { from { opacity: 0; } to { opacity: 1; } }
.quick-modal-backdrop[hidden] { display: none; }
.quick-modal-sheet { position: relative; width: 100%; max-width: 520px; margin: 0 auto; background: #1a1535; border: 1px solid rgba(240,196,108,.22); border-bottom: none; border-radius: 20px 20px 0 0; padding: 1.6rem 1.3rem 2rem; animation: qm-slide .32s cubic-bezier(.34,1.4,.64,1); }
@keyframes qm-slide { from { transform: translateY(100%); } to { transform: translateY(0); } }
.quick-modal-close { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,.07); border: none; color: rgba(247,220,164,.6); font-size: .85rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.quick-modal-close:hover { background: rgba(255,255,255,.14); }
.quick-modal-header { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.2rem; }
.quick-modal-av { width: 2.9rem; height: 2.9rem; border-radius: 50%; background: linear-gradient(135deg, var(--rose,#e29ca0), var(--gold)); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.35rem; color: var(--ink); font-weight: 700; flex-shrink: 0; }
.quick-modal-pre { font-size: .74rem; color: rgba(247,220,164,.42); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .1rem; }
.quick-modal-name { font-family: var(--serif); font-size: 1.3rem; color: var(--cream); font-weight: 700; }
.quick-modal-hint { font-size: .83rem; color: rgba(247,220,164,.52); text-align: center; margin-bottom: .8rem; }
.quick-modal-themes { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: .7rem; }
.qm-theme { background: rgba(255,255,255,.04); border: 1px solid rgba(240,196,108,.16); border-radius: 14px; padding: .82rem .65rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .35rem; transition: background .14s, border-color .14s, transform .14s; font: inherit; color: var(--cream); }
.qm-theme:hover { background: rgba(240,196,108,.09); border-color: rgba(240,196,108,.38); transform: translateY(-2px); }
.qm-theme:active { transform: scale(.97); }
.qm-theme-icon { font-size: 1.75rem; line-height: 1; }
.qm-theme-label { font-size: .8rem; font-weight: 600; color: var(--cream); text-align: center; line-height: 1.3; }
.qm-surprise { display: block; width: 100%; background: linear-gradient(135deg, #d4a573, var(--gold)); border: none; border-radius: 13px; color: var(--ink); font: inherit; font-weight: 700; font-size: 1rem; padding: .88rem; cursor: pointer; margin-bottom: .8rem; transition: opacity .14s, transform .14s; }
.qm-surprise:hover { opacity: .9; transform: scale(1.01); }
.qm-last-tag { display: inline-block; font-size: .7rem; padding: 1px 7px; border-radius: 100px; background: rgba(240,196,108,.14); color: var(--gold); margin-left: .3rem; vertical-align: middle; white-space: nowrap; }
.quick-modal-custom { display: block; text-align: center; font-size: .8rem; color: rgba(247,220,164,.42); text-decoration: none; transition: color .14s; }
.quick-modal-custom:hover { color: rgba(247,220,164,.75); }
/* ── IT135 : Starter kits (nouveaux visiteurs, étape 1) ─────────────────────── */
.starter-kits { margin-bottom: 1.2rem; }
.starter-kits-label { font-size: .78rem; color: rgba(247,220,164,.45); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .55rem; }
.starter-kits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sk-card { background: rgba(255,255,255,.04); border: 1px solid rgba(240,196,108,.15); border-radius: 13px; padding: .7rem .6rem; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: .18rem; transition: background .13s, border-color .13s, transform .12s; font: inherit; color: var(--cream); text-align: left; }
.sk-card:hover { background: rgba(240,196,108,.08); border-color: rgba(240,196,108,.32); transform: translateY(-2px); }
.sk-card:active { transform: scale(.97); }
.sk-icon { font-size: 1.55rem; line-height: 1; margin-bottom: .1rem; }
.sk-name { font-size: .82rem; font-weight: 700; color: var(--cream); }
.sk-label { font-size: .74rem; color: rgba(247,220,164,.5); }
/* ── IT137 : Galerie d'inspirations ─────────────────────────────────────────── */
.inspo-gallery { padding: 3.5rem 1.25rem; max-width: 900px; margin: 0 auto; }
.inspo-h2 { font-family: var(--serif); font-size: clamp(1.5rem,4vw,2rem); color: var(--cream); text-align: center; margin-bottom: .5rem; }
.inspo-h2 span { color: var(--gold); }
.inspo-sub { text-align: center; font-size: .85rem; color: rgba(247,220,164,.45); margin-bottom: 1.8rem; }
.inspo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.inspo-card { background: rgba(255,255,255,.04); border: 1px solid rgba(240,196,108,.13); border-radius: 16px; padding: .9rem .8rem .75rem; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: .28rem; transition: background .14s, border-color .14s, transform .13s; font: inherit; color: var(--cream); text-align: left; }
.inspo-card:hover { background: rgba(240,196,108,.08); border-color: rgba(240,196,108,.3); transform: translateY(-3px); }
.inspo-card:active { transform: scale(.97); }
.inspo-emoji { font-size: 1.65rem; line-height: 1; }
.inspo-title { font-size: .82rem; font-weight: 700; color: var(--cream); line-height: 1.35; }
.inspo-meta { font-size: .73rem; color: rgba(247,220,164,.42); display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.inspo-amb { font-size: .7rem; font-weight: 700; padding: .08rem .35rem; border-radius: 5px; }
.inspo-amb-calme { background: rgba(124,180,220,.15); color: #7cb4dc; }
.inspo-amb-aventure { background: rgba(240,196,108,.12); color: var(--gold); }
.inspo-amb-rigolo { background: rgba(126,203,138,.12); color: #7ecb8a; }
.inspo-amb-magique { background: rgba(180,169,214,.14); color: #b4a9d6; }
@media (max-width: 480px) { .inspo-grid { grid-template-columns: 1fr 1fr; } }

/* IT165 — Voice sample preview button */
.voice-sample-btn {
  display: flex; align-items: center; gap: .75rem;
  background: rgba(240,196,108,.07); border: 1px solid rgba(240,196,108,.22);
  border-radius: 12px; padding: .7rem 1rem; cursor: pointer; width: 100%;
  font: inherit; color: var(--paper); transition: background .15s, border-color .15s;
  margin-bottom: .9rem; text-align: left;
}
.voice-sample-btn:hover { background: rgba(240,196,108,.13); border-color: rgba(240,196,108,.5); }
.vsb-icon { font-size: 1.25rem; flex-shrink: 0; }
.vsb-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vsb-text { font-weight: 600; font-size: .9rem; }
.vsb-sub { font-size: .74rem; color: rgba(247,220,164,.45); margin-top: .1rem; }
.vsb-play { font-size: .9rem; color: var(--gold); font-weight: 700; flex-shrink: 0; }
.vsb-playing { border-color: var(--gold) !important; background: rgba(240,196,108,.14) !important; }
.vsb-playing .vsb-icon { animation: vsb-pulse .9s ease infinite; }
@keyframes vsb-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }

/* IT166 — Hero quick-action chips for returning users */
.hero-quick-actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .7rem; margin-bottom: .2rem; }
.hqa-btn {
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 700;
  background: rgba(240,196,108,.1); border: 1px solid rgba(240,196,108,.28);
  color: rgba(247,220,164,.85); border-radius: 999px;
  padding: .3rem .8rem; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.hqa-btn:hover { background: rgba(240,196,108,.2); border-color: var(--gold); color: var(--gold); }
.hqa-btn-primary { background: rgba(240,196,108,.18); border-color: rgba(240,196,108,.5); color: var(--gold); }

/* IT167 — Message char count (same style as passions count, handled by char-count class already) */

/* IT168 — Bedtime time-of-day hint */
.wizard-time-hint {
  font-size: .82rem; color: var(--gold); font-weight: 700;
  letter-spacing: .03em; text-align: center;
  margin-bottom: .4rem; animation: rise .4s ease both;
}

/* IT169 — Daily theme chip for new visitors */
.daily-theme-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .9rem; border-radius: 999px;
  background: rgba(240,196,108,.08); border: 1px solid rgba(240,196,108,.22);
  text-decoration: none; color: rgba(247,220,164,.8);
  font-size: .78rem; margin: .8rem 0 .3rem; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  animation: rise .5s ease both;
}
.daily-theme-chip:hover { background: rgba(240,196,108,.18); border-color: var(--gold); color: var(--gold); }
.dtc-label { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; opacity: .7; }
.dtc-theme { font-weight: 600; }

/* IT170 — Library dynamic stats subtitle */
.library-stats {
  font-size: .78rem; color: rgba(247,220,164,.55); font-weight: 600;
  letter-spacing: .02em; margin: -.3rem 0 .6rem; text-align: left;
}

/* IT171 — Passions chip match highlight */
.chips button.chip-match {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(240,196,108,.12) !important;
  box-shadow: 0 0 0 1px rgba(240,196,108,.25);
}

/* IT172 — Library milestone banner */
.milestone-banner {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(240,196,108,.12) 0%, rgba(232,146,124,.08) 100%);
  border: 1px solid rgba(240,196,108,.28); border-radius: 10px;
  padding: .7rem 1rem; margin-bottom: .9rem;
  animation: rise .4s ease both;
}
.milestone-star { font-size: 1.1rem; color: var(--gold); flex-shrink: 0; }
.milestone-text { flex: 1; font-size: .84rem; font-weight: 700; color: rgba(247,220,164,.9); }
.milestone-cta {
  font-size: .78rem; font-weight: 800; color: var(--gold);
  background: rgba(240,196,108,.18); border: 1px solid rgba(240,196,108,.4);
  border-radius: 999px; padding: .25rem .7rem; text-decoration: none;
  transition: background .15s;
}
.milestone-cta:hover { background: rgba(240,196,108,.3); }
.milestone-close {
  background: none; border: none; color: rgba(247,220,164,.4);
  font-size: .9rem; cursor: pointer; padding: .1rem .3rem;
  transition: color .15s; flex-shrink: 0;
}
.milestone-close:hover { color: rgba(247,220,164,.8); }

/* IT173 — Book spine accent color (CSS var --book-hue set per card in renderLibrary) */
.book.book-accented {
  border-left: 3px solid hsl(var(--book-hue, 45), 55%, 52%);
}
.book-wrap:hover .book.book-accented {
  border-left-color: hsl(var(--book-hue, 45), 65%, 62%);
  box-shadow: -2px 0 8px hsl(var(--book-hue, 45), 55%, 40%, .25);
}

/* IT174 — Duration + relative date meta on library cards */
.book-meta-extra {
  display: block; font-size: .68rem; color: rgba(247,220,164,.45);
  font-weight: 600; letter-spacing: .02em; margin-top: .15rem;
}

/* IT175 — Ambiance description hint */
.ambiance-hint {
  font-size: .78rem; color: rgba(247,220,164,.65);
  font-style: italic; margin: .35rem 0 0;
  min-height: 1.2em; transition: opacity .2s;
}

/* IT176 — Preferred duration hint from child profile */
.dur-pref-hint {
  font-size: .78rem; color: var(--gold); font-weight: 700;
  letter-spacing: .02em; margin-top: .3rem;
  animation: rise .3s ease both;
}

/* IT177 — Sticky mobile CTA for new visitors */
.sticky-cta-bar {
  position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%);
  z-index: 600; padding: .5rem;
  animation: rise .3s ease both;
}
.sticky-cta-bar[hidden] { display: none; }
.sticky-cta-btn {
  display: inline-flex; align-items: center;
  background: var(--gold); color: var(--ink);
  font: 700 .88rem/1 var(--sans); border-radius: 999px;
  padding: .6rem 1.4rem; text-decoration: none;
  box-shadow: 0 4px 20px rgba(240,196,108,.45);
  white-space: nowrap;
  transition: transform .15s, box-shadow .15s;
}
.sticky-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(240,196,108,.55); }
@media (min-width: 768px) { .sticky-cta-bar { display: none !important; } }

/* IT181 — Ambiance mood emoji badge on library cards */
.book-mood {
  position: absolute; top: .35rem; right: .35rem;
  font-size: .85rem; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
  pointer-events: none;
}
.book-has-cover .book-mood { display: none; }

/* IT183 — "Start saga" nudge in profil univers sheet */
.profil-univers-saga-nudge {
  display: flex; align-items: center; gap: .6rem;
  background: rgba(240,196,108,.08); border: 1px solid rgba(240,196,108,.25);
  border-radius: 12px; padding: .7rem 1rem; margin: .75rem 1rem 0;
  font-size: .8rem;
}
.pvs-nudge-icon { color: var(--gold); font-size: .9rem; flex-shrink: 0; }
.pvs-nudge-text { color: #c9bfa8; flex: 1; line-height: 1.35; }
.pvs-nudge-cta {
  flex-shrink: 0; font: 700 .78rem/1 var(--sans);
  color: var(--ink); background: var(--gold);
  border-radius: 999px; padding: .35rem .8rem;
  text-decoration: none; white-space: nowrap;
  transition: opacity .15s;
}
.pvs-nudge-cta:hover { opacity: .85; }

/* IT193 — Staggered library card entrance animation */
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.book-wrap {
  animation: card-in .4s ease both;
  animation-delay: calc(var(--card-idx, 0) * 80ms);
}

/* IT194 — Child mode Surprise button */
.kid-surprise-btn {
  display: block; margin: 1rem auto 0; padding: .75rem 2rem;
  background: rgba(240,196,108,.12); border: 2px solid rgba(240,196,108,.35);
  color: var(--gold); border-radius: 999px; font: 700 1rem/1 var(--sans);
  cursor: pointer; letter-spacing: .04em;
  transition: background .2s, transform .15s, box-shadow .15s;
}
.kid-surprise-btn:hover { background: rgba(240,196,108,.22); transform: scale(1.04); box-shadow: 0 4px 20px rgba(240,196,108,.25); }
.kid-surprise-btn:active { transform: scale(.97); }

/* IT195 — Active paragraph highlight during playback */
.story-paper p { transition: background .5s ease, padding .3s ease; border-radius: 6px; }
.story-paper p.para-active {
  background: rgba(240,196,108,.09);
  padding: .15rem .4rem;
  margin-left: -.4rem;
}

/* IT196 — Copy text button (uses same .btn-ghost, no extra CSS needed) */

/* IT189 — Completion bar strip at bottom of library cards */
.book-listen-bar {
  height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.06); margin-top: .3rem;
  overflow: hidden;
}
.book-listen-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #e8927c, var(--gold));
  transition: width .3s ease;
}

/* IT190 — Cover art band on library cards */
.book.book-has-cover {
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.book-cover-band {
  display: flex; align-items: center; justify-content: center;
  height: 52px; font-size: 1.7rem;
  background: linear-gradient(135deg, hsl(var(--cover-hue,45),52%,18%), hsl(calc(var(--cover-hue,45) + 30),48%,14%));
  flex-shrink: 0;
}
.book-content {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .8rem 1rem; flex: 1;
}

/* IT191 — Chapter tick marks on audio progress bar */
.player-bar-wrap { position: relative; width: 100%; }
.player-bar-wrap .player-bar { width: 100%; }
.player-chapters { position: absolute; top: 0; left: 0; right: 0; height: 100%; pointer-events: none; }
.player-chap-tick {
  position: absolute; top: 20%; bottom: 20%;
  width: 2px; background: rgba(249,241,223,.35);
  border-radius: 1px; transform: translateX(-50%);
}

/* IT192 — Streak fire badge for streaks ≥ 5 */
.tonight-streak-fire {
  background: rgba(255,140,0,.12) !important;
  border-color: rgba(255,140,0,.3) !important;
  color: #ffa040 !important;
  animation: streak-fire-pulse 2s ease-in-out infinite;
}
@keyframes streak-fire-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,140,0,0); }
  50% { box-shadow: 0 0 8px 2px rgba(255,140,0,.25); }
}

/* IT185 — Episode progress dots on saga library cards */
.book-ep-dots {
  display: flex; gap: .28rem; align-items: center; margin: .2rem 0 .1rem;
}
.bep-dot {
  display: inline-block; width: .45rem; height: .45rem; border-radius: 50%;
  flex-shrink: 0;
}
.bep-done { background: rgba(240,196,108,.4); }
.bep-cur  { background: var(--gold); box-shadow: 0 0 5px rgba(240,196,108,.5); }
.bep-future { background: rgba(255,255,255,.1); }

/* IT186 — Kid mode button on library cards */
.book-kid {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  font-size: .85rem; text-decoration: none; color: inherit;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
}
.book-kid:hover { background: rgba(240,196,108,.15); transform: scale(1.1); }

/* IT187 — Remaining time hint below player */
.player-remain {
  text-align: center; font-size: .72rem; color: rgba(240,196,108,.65);
  letter-spacing: .03em; margin: .2rem 0 .5rem;
  animation: rise .2s ease both;
}

/* IT188 — Passions tag on library cards */
.book-passions {
  display: inline-block; font-size: .62rem; color: rgba(240,196,108,.7);
  letter-spacing: .02em; font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  margin-top: -.1rem;
}

/* IT184 — Weekly stats mini-card in returning hero */
.hero-week-card {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(240,196,108,.07); border: 1px solid rgba(240,196,108,.18);
  border-radius: 999px; padding: .35rem .9rem;
  font-size: .78rem; color: #c9bfa8;
  letter-spacing: .02em; margin-top: .5rem;
  width: fit-content;
  animation: rise .35s ease both;
}
.hwc-icon { color: var(--gold); font-size: .8rem; }
.hwc-label strong { color: var(--gold); font-weight: 700; }

/* IT197 — Volume slider in child overlay */
.kid-vol-wrap {
  display: flex; align-items: center; gap: .75rem;
  justify-content: center; margin-top: 1.5rem;
}
.kid-vol-btn {
  background: rgba(255,255,255,.1); border: none; border-radius: 50%;
  width: 2.5rem; height: 2.5rem; font-size: 1.2rem;
  cursor: pointer; transition: background .15s, transform .1s;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.kid-vol-btn:active { transform: scale(.9); background: rgba(255,255,255,.2); }
.kid-vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 7rem; height: .4rem; border-radius: 99px;
  background: rgba(255,255,255,.25); outline: none; cursor: pointer;
}
.kid-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--gold); cursor: pointer;
  box-shadow: 0 0 8px rgba(240,196,108,.6);
}
.kid-vol-slider::-moz-range-thumb {
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--gold); cursor: pointer; border: none;
  box-shadow: 0 0 8px rgba(240,196,108,.6);
}

/* IT198 — Library filter tabs */
.lib-filter-tabs {
  display: flex; gap: .4rem; margin-bottom: .75rem;
  flex-wrap: wrap;
}
.lib-filter-tab {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: .3rem .8rem;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .04em;
  color: #c9bfa8; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.lib-filter-tab:hover { background: rgba(240,196,108,.08); color: var(--gold); }
.lib-filter-tab.active {
  background: rgba(240,196,108,.14); border-color: rgba(240,196,108,.4);
  color: var(--gold); font-weight: 700;
}

/* IT199 — Next episode "+" button on saga cards */
.book-next-ep {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: rgba(240,196,108,.15); border: 1px solid rgba(240,196,108,.3);
  font-size: .8rem; color: var(--gold); text-decoration: none;
  transition: background .15s, transform .15s;
  flex-shrink: 0; vertical-align: middle;
}
.book-next-ep:hover { background: rgba(240,196,108,.3); transform: scale(1.1); }

/* IT200 — Language badge on library cards */
.book-lang {
  display: inline-block; font-size: .55rem; font-weight: 700;
  letter-spacing: .06em; color: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.15); border-radius: 3px;
  padding: .05rem .25rem; vertical-align: middle; line-height: 1.4;
  margin-left: .2rem; text-transform: uppercase;
}

/* IT201 — Homepage quick-listen mini-player */
.home-mini-player:not([hidden]) {
  position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .6rem;
  background: rgba(14,12,30,.97); border: 1px solid rgba(240,196,108,.3);
  border-radius: 14px; padding: .5rem .85rem;
  width: min(calc(100vw - 2rem), 420px);
  box-shadow: 0 8px 32px rgba(0,0,0,.55); z-index: 300;
  animation: rise .25s ease both;
}
.hmp-play {
  background: rgba(240,196,108,.15); border: 1px solid rgba(240,196,108,.3);
  border-radius: 50%; width: 2.2rem; height: 2.2rem;
  font-size: .95rem; cursor: pointer; color: var(--gold);
  transition: background .15s; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hmp-play:hover { background: rgba(240,196,108,.28); }
.hmp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.hmp-title {
  font-size: .8rem; color: var(--cream); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-family: var(--serif);
}
.hmp-bar-wrap { height: 3px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.hmp-bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), #e8927c);
  transition: width .5s linear; width: 0;
}
.hmp-link { font-size: .9rem; color: rgba(240,196,108,.55); text-decoration: none; flex-shrink: 0; transition: color .15s; }
.hmp-link:hover { color: var(--gold); }
.hmp-close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.3); font-size: .8rem; padding: 0 .15rem; transition: color .15s; }
.hmp-close:hover { color: rgba(255,255,255,.7); }
.book-quick-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: rgba(240,196,108,.1); border: 1px solid rgba(240,196,108,.22);
  font-size: .72rem; color: var(--gold); cursor: pointer;
  transition: background .15s, transform .15s; flex-shrink: 0;
}
.book-quick-play:hover { background: rgba(240,196,108,.26); transform: scale(1.12); }

/* IT202 — Bedtime dim mode */
html.night-mode body { filter: brightness(.8) saturate(.88); }
.topnav-night-btn {
  background: none; border: none; cursor: pointer; font-size: 1rem;
  opacity: .6; transition: opacity .15s; padding: .15rem .3rem; line-height: 1;
}
.topnav-night-btn:hover { opacity: 1; }

/* IT203 — Saga abandon nudge banner */
.saga-abandon-nudge {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(120%);
  display: flex; align-items: center; gap: .6rem;
  background: rgba(14,12,30,.97); border: 1px solid rgba(232,146,124,.3);
  border-radius: 14px; padding: .55rem .9rem;
  width: min(calc(100vw - 2rem), 420px);
  box-shadow: 0 8px 32px rgba(0,0,0,.5); z-index: 298;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1);
}
.saga-abandon-nudge.san-visible { transform: translateX(-50%) translateY(0); }
.san-icon { font-size: 1.4rem; flex-shrink: 0; }
.san-body { flex: 1; min-width: 0; }
.san-title { font-size: .8rem; color: var(--cream); font-family: var(--serif); margin: 0 0 .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.san-sub { font-size: .7rem; color: rgba(200,190,175,.7); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.san-cta { font-size: .75rem; color: var(--gold); text-decoration: none; white-space: nowrap; font-weight: 700; flex-shrink: 0; transition: opacity .15s; }
.san-cta:hover { opacity: .8; }
.san-close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.3); font-size: .8rem; padding: 0 .1rem; }
.san-close:hover { color: rgba(255,255,255,.7); }

/* IT204 — Child emoji picker in edit modal */
.pee-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: .3rem;
  margin-top: .3rem;
}
.pee-btn {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; font-size: 1.3rem; cursor: pointer; padding: .25rem;
  transition: background .12s, transform .1s; line-height: 1;
}
.pee-btn:hover { background: rgba(240,196,108,.12); transform: scale(1.1); }
.pee-btn.pee-active { background: rgba(240,196,108,.22); border-color: rgba(240,196,108,.5); transform: scale(1.12); }

/* IT205 — Library live search */
.lib-search-wrap {
  padding: .4rem var(--px,1.1rem) 0;
  max-width: 640px; margin: 0 auto;
}
.lib-search {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px; color: var(--cream); font-family: var(--sans);
  font-size: .88rem; padding: .42rem 1rem;
  outline: none; transition: border-color .2s, background .2s;
}
.lib-search::placeholder { color: rgba(200,190,175,.45); }
.lib-search:focus { border-color: rgba(240,196,108,.45); background: rgba(255,255,255,.09); }
.lib-search::-webkit-search-cancel-button { filter: invert(.5); cursor: pointer; }

/* IT206 — Welcome-back banner */
.welcome-back-banner {
  display: flex; align-items: center; gap: .8rem;
  background: linear-gradient(135deg, rgba(20,17,46,.97) 0%, rgba(36,30,70,.97) 100%);
  border: 1px solid rgba(240,196,108,.25); border-radius: 14px;
  padding: .8rem 1rem; margin: 0 var(--px,1.1rem) .8rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(-12px);
  transition: opacity .3s ease, transform .3s ease;
}
.welcome-back-banner.wbb-visible { opacity: 1; transform: translateY(0); }
.wbb-icon { font-size: 1.6rem; flex-shrink: 0; }
.wbb-body { flex: 1; min-width: 0; }
.wbb-title { font-size: .88rem; font-family: var(--serif); color: var(--cream); margin: 0 0 .1rem; }
.wbb-sub { font-size: .78rem; color: rgba(200,190,175,.65); margin: 0; }
.wbb-cta {
  font-size: .78rem; color: var(--gold); text-decoration: none; font-weight: 700;
  white-space: nowrap; flex-shrink: 0; transition: opacity .15s;
}
.wbb-cta:hover { opacity: .75; }
.wbb-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.3); font-size: .8rem; padding: 0 .1rem; flex-shrink: 0;
}
.wbb-close:hover { color: rgba(255,255,255,.7); }

/* IT207 — Fav burst confetti particles */
.fav-burst-particle {
  position: fixed; width: 7px; height: 7px; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  animation: fav-burst .55s ease-out forwards;
}
@keyframes fav-burst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx),var(--dy)) scale(0); opacity: 0; }
}

/* IT208 — Remaining time hint in child overlay */
.kid-remain-hint {
  font-size: .8rem; color: rgba(255,255,255,.5);
  margin: .3rem 0 0; text-align: center; font-family: var(--sans);
  transition: opacity .3s;
}

/* IT210 — Floating bedtime pill button */
.bedtime-pill {
  position: fixed; bottom: 72px; right: 16px; z-index: 120;
  display: flex; align-items: center; gap: .4rem;
  background: var(--ink); border: 1px solid rgba(240,196,108,.35);
  border-radius: 30px; padding: .45rem .9rem .45rem .65rem;
  color: var(--gold); text-decoration: none; font-size: .82rem;
  font-family: var(--sans); font-weight: 700;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(12px) scale(.95);
  transition: opacity .3s ease, transform .3s ease, background .15s;
  pointer-events: none;
}
.bedtime-pill.bedtime-pill-visible { opacity: 1; transform: none; pointer-events: auto; }
.bedtime-pill.bedtime-pill-hide { opacity: 0; pointer-events: none; }
.bedtime-pill:hover { background: rgba(20,17,46,.95); }
.bedtime-pill-moon { font-size: 1rem; }
@media (min-width: 600px) { .bedtime-pill { display: none; } }

/* IT211 — Monthly badge in library header */
.lib-month-badge {
  display: inline-block; margin-left: .6rem;
  background: rgba(240,196,108,.15); color: var(--gold);
  border: 1px solid rgba(240,196,108,.3); border-radius: 20px;
  font-size: .7rem; font-family: var(--sans); font-weight: 700;
  padding: .1rem .55rem; vertical-align: middle; letter-spacing: .01em;
}

/* IT212 — PWA install prompt */
.pwa-prompt {
  position: fixed; bottom: 72px; left: 12px; right: 12px; z-index: 200;
  display: flex; align-items: center; gap: .7rem;
  background: var(--ink); border: 1px solid rgba(240,196,108,.3);
  border-radius: 14px; padding: .75rem 1rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease;
}
.pwa-prompt.pwa-prompt-visible { opacity: 1; transform: none; }
.pwa-prompt-icon { font-size: 1.4rem; flex-shrink: 0; color: var(--gold); }
.pwa-prompt-body { flex: 1; min-width: 0; }
.pwa-prompt-title { font-size: .88rem; font-family: var(--serif); color: var(--cream); margin: 0 0 .1rem; }
.pwa-prompt-sub { font-size: .75rem; color: rgba(200,190,175,.6); margin: 0; }
.pwa-prompt-cta {
  background: var(--gold); color: var(--ink); border: none; border-radius: 20px;
  font-size: .78rem; font-weight: 700; font-family: var(--sans);
  padding: .35rem .75rem; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.pwa-prompt-close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.3); font-size: .8rem; padding: 0; flex-shrink: 0;
}
.pwa-prompt-close:hover { color: rgba(255,255,255,.7); }

/* IT213 — Replay button on kid goodnight screen */
.kid-gn-replay {
  display: block; margin: 0 auto .8rem;
  background: rgba(240,196,108,.12); border: 1px solid rgba(240,196,108,.3);
  color: var(--gold); font-size: .88rem; font-family: var(--sans); font-weight: 600;
  border-radius: 99px; padding: .45rem 1.2rem; cursor: pointer;
  transition: background .15s, transform .1s;
}
.kid-gn-replay:hover { background: rgba(240,196,108,.2); transform: scale(1.03); }
.kid-gn-replay:active { transform: scale(.97); }

/* IT215 — Delete story button on library cards */
.book-delete {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(20,17,46,.9); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.4); font-size: .65rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, color .15s;
  z-index: 8;
}
.book-wrap:hover .book-delete { opacity: 1; }
.book-delete:hover { color: #e8927c; border-color: #e8927c; }
.book-delete-confirm {
  position: absolute; bottom: -44px; left: 0; right: 0; z-index: 20;
  background: rgba(20,17,46,.97); border: 1px solid rgba(240,196,108,.25);
  border-radius: 10px; padding: .5rem .7rem;
  display: flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-family: var(--sans); color: rgba(200,190,175,.8);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.book-delete-confirm span { flex: 1; }
.book-delete-yes {
  background: rgba(232,146,124,.2); border: 1px solid rgba(232,146,124,.4);
  color: #e8927c; border-radius: 6px; font-size: .72rem; font-weight: 600;
  padding: .2rem .5rem; cursor: pointer;
}
.book-delete-yes:hover { background: rgba(232,146,124,.35); }
.book-delete-no {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(200,190,175,.7); border-radius: 6px; font-size: .72rem;
  padding: .2rem .5rem; cursor: pointer;
}
.book-delete-no:hover { background: rgba(255,255,255,.12); }

/* IT216 — Milestone toast */
.milestone-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 300; display: flex; align-items: center; gap: .7rem;
  background: linear-gradient(135deg, rgba(20,17,46,.98) 0%, rgba(40,30,76,.98) 100%);
  border: 1px solid rgba(240,196,108,.4); border-radius: 16px;
  padding: .85rem 1.1rem; min-width: 260px; max-width: 340px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .35s ease, transform .35s ease;
}
.milestone-toast.mt-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.mt-stars { font-size: 1.3rem; flex-shrink: 0; color: var(--gold); animation: bravoPulse 1.2s ease-in-out infinite; }
.mt-body { flex: 1; min-width: 0; }
.mt-title { font-size: .92rem; font-family: var(--serif); color: var(--gold); margin: 0 0 .15rem; font-weight: 700; }
.mt-sub { font-size: .78rem; color: rgba(200,190,175,.7); margin: 0; }
.mt-close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.3); font-size: .8rem; padding: 0; flex-shrink: 0; }
.mt-close:hover { color: rgba(255,255,255,.7); }

/* IT217 — Child filter chips */
.lib-child-filter:not([hidden]) { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem var(--px,1.1rem) 0; max-width: 640px; margin: 0 auto; }
.lib-child-chip { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; color: rgba(200,190,175,.75); font-size: .78rem; font-family: var(--sans); padding: .22rem .65rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.lib-child-chip.active { background: rgba(240,196,108,.18); border-color: rgba(240,196,108,.45); color: var(--gold); }
.lib-child-chip:hover:not(.active) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.lib-child-cnt { font-size: .68rem; opacity: .65; }

/* IT219 — Daily story challenge widget */
.daily-challenge:not([hidden]) { display: flex; align-items: center; gap: .65rem; background: rgba(240,196,108,.07); border: 1px solid rgba(240,196,108,.18); border-radius: 12px; padding: .55rem 1rem; margin: 0 var(--px,1.1rem) .9rem; max-width: 640px; }
.dc-icon { font-size: 1.15rem; flex-shrink: 0; }
.dc-label { font-size: .8rem; font-family: var(--sans); color: rgba(200,190,175,.8); flex: 1; min-width: 0; }
.dc-label strong { color: var(--cream); font-weight: 700; }
.dc-cta { font-size: .78rem; font-weight: 700; color: var(--gold); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: opacity .15s; }
.dc-cta:hover { opacity: .75; }

/* IT220 — Mood filter chips */
.lib-mood-filter:not([hidden]) { display: flex; flex-wrap: wrap; gap: .35rem; padding: .35rem var(--px,1.1rem) 0; max-width: 640px; margin: 0 auto; }
.lib-mood-chip { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; color: rgba(200,190,175,.75); font-size: .78rem; font-family: var(--sans); padding: .22rem .65rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.lib-mood-chip.active { background: rgba(240,196,108,.18); border-color: rgba(240,196,108,.45); color: var(--gold); }
.lib-mood-chip:hover:not(.active) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.lib-mood-cnt { font-size: .68rem; opacity: .65; }

/* IT221 — Re-engagement nudge */
.lib-nudge:not([hidden]) { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: rgba(184,160,216,.07); border: 1px solid rgba(184,160,216,.2); border-radius: 12px; padding: .6rem 1rem; margin: .4rem var(--px,1.1rem) .6rem; max-width: 640px; }
.lib-nudge-msg { flex: 1; font-size: .8rem; font-family: var(--sans); color: rgba(200,190,175,.8); min-width: 180px; line-height: 1.4; }
.lib-nudge-cta { font-size: .78rem; font-weight: 700; color: var(--gold); text-decoration: none; white-space: nowrap; transition: opacity .15s; }
.lib-nudge-cta:hover { opacity: .75; }
.lib-nudge-close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.3); font-size: .8rem; padding: .1rem .3rem; flex-shrink: 0; }
.lib-nudge-close:hover { color: rgba(255,255,255,.7); }

/* IT222 — Completed story badge */
.book-done { position: absolute; top: .35rem; right: .35rem; background: rgba(126,203,138,.9); color: #14112e; font-size: .6rem; font-weight: 900; border-radius: 50%; width: 1.2rem; height: 1.2rem; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 3; }
.book-completed .book-cover-band { opacity: .75; }
/* IT325 — kid reaction emoji badge on book cards */
.book-kid-reaction { position: absolute; bottom: .4rem; right: .4rem; font-size: .95rem; z-index: 4; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); pointer-events: none; line-height: 1; }

/* IT223 — Saga suggestion widget */
.lib-saga-suggest:not([hidden]) { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: rgba(240,196,108,.06); border: 1px solid rgba(240,196,108,.2); border-radius: 12px; padding: .5rem 1rem; margin: .35rem var(--px,1.1rem) .5rem; max-width: 640px; }
.ss-icon { font-size: 1.1rem; flex-shrink: 0; }
.ss-msg { flex: 1; font-size: .8rem; font-family: var(--sans); color: rgba(200,190,175,.8); min-width: 160px; }
.ss-cta { font-size: .78rem; font-weight: 700; color: var(--gold); text-decoration: none; white-space: nowrap; border: 1px solid rgba(240,196,108,.3); border-radius: 999px; padding: .2rem .65rem; transition: background .15s; }
.ss-cta:hover { background: rgba(240,196,108,.1); }
.ss-close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.3); font-size: .8rem; padding: .1rem .3rem; flex-shrink: 0; }
.ss-close:hover { color: rgba(255,255,255,.7); }

/* IT224 — Hand-to-child quick access */
.lib-hand-child:not([hidden]) { display: flex; align-items: center; gap: .6rem; background: rgba(184,160,216,.08); border: 1px solid rgba(184,160,216,.22); border-radius: 12px; padding: .45rem .9rem; margin: .3rem var(--px,1.1rem) .4rem; max-width: 640px; }
.hc-icon { font-size: 1.05rem; flex-shrink: 0; }
.hc-msg { font-size: .78rem; font-family: var(--sans); color: rgba(200,190,175,.7); white-space: nowrap; }
.hc-cta { font-size: .78rem; font-weight: 700; color: rgba(184,160,216,.95); text-decoration: none; white-space: nowrap; transition: opacity .15s; }
.hc-cta:hover { opacity: .75; }

/* IT228 — Sleep timer button in mini-player */
.hmp-timer { background: none; border: none; cursor: pointer; color: rgba(200,190,175,.45); font-size: .72rem; padding: 0 .12rem; flex-shrink: 0; transition: color .15s; white-space: nowrap; font-family: var(--sans); }
.hmp-timer:hover { color: rgba(200,190,175,.8); }
.hmp-timer.hmp-timer-active { color: rgba(184,160,216,.9); }
/* IT229 — In-player favorite button */
.hmp-fav { background: none; border: none; cursor: pointer; color: rgba(200,190,175,.4); font-size: .85rem; padding: 0 .12rem; flex-shrink: 0; transition: color .15s; }
.hmp-fav:hover { color: rgba(232,146,124,.8); }
.hmp-fav.hmp-fav-on { color: #e8927c; }
/* IT230 — Personalized greeting line */
.lib-greeting { font-size: .78rem; font-family: var(--sans); color: rgba(200,190,175,.55); text-align: center; padding: 0 var(--px,1.1rem) .3rem; margin: -.2rem 0 0; font-style: italic; }
/* IT225 — Playlist du soir: lib-header, lib-play-all button, hmp-next, hmp-queue-pos */
.lib-header { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; padding: 0 var(--px,1.1rem) .5rem; }
.lib-header #library-h2 { padding: 0; margin: 0; }
.lib-play-all { background: rgba(240,196,108,.1); border: 1px solid rgba(240,196,108,.28); border-radius: 999px; color: var(--gold); font-size: .72rem; font-weight: 700; font-family: var(--sans); padding: .22rem .75rem; cursor: pointer; transition: background .15s; white-space: nowrap; flex-shrink: 0; }
.lib-play-all:hover { background: rgba(240,196,108,.22); }
.hmp-next { background: none; border: none; cursor: pointer; color: rgba(200,190,175,.6); font-size: .8rem; padding: 0 .15rem; flex-shrink: 0; transition: color .15s; }
.hmp-next:hover { color: var(--gold); }
.hmp-queue-pos { font-size: .62rem; color: rgba(200,190,175,.45); font-family: var(--sans); white-space: nowrap; flex-shrink: 0; }

/* IT226 — "Essayez aussi" story recommendations */
.lib-recommendations:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .3rem var(--px,1.1rem) .7rem; max-width: 640px; }
.lib-rec-label { font-size: .72rem; font-family: var(--sans); color: rgba(200,190,175,.45); white-space: nowrap; margin-right: .1rem; }
.lib-rec-chip { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: rgba(200,190,175,.65); font-size: .72rem; font-family: var(--sans); padding: .22rem .65rem; text-decoration: none; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.lib-rec-chip:hover { background: rgba(240,196,108,.1); border-color: rgba(240,196,108,.3); color: var(--gold); }

/* IT227 — Resume in-progress story widget */
.lib-resume:not([hidden]) { display: flex; align-items: center; gap: .7rem; background: rgba(232,146,124,.07); border: 1px solid rgba(232,146,124,.18); border-radius: 12px; padding: .55rem .9rem; margin: .3rem var(--px,1.1rem) .5rem; max-width: 640px; cursor: default; }
.lib-resume-thumb { width: 2.2rem; height: 2.2rem; border-radius: 8px; background: rgba(232,146,124,.14); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.lib-resume-info { flex: 1; min-width: 0; }
.lib-resume-title { font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--serif); }
.lib-resume-pct { font-size: .7rem; color: rgba(200,190,175,.55); font-family: var(--sans); margin-top: .1rem; }
.lib-resume-play { background: rgba(232,146,124,.18); border: 1px solid rgba(232,146,124,.35); border-radius: 999px; color: rgba(232,146,124,.95); font-size: .75rem; font-weight: 700; font-family: var(--sans); padding: .25rem .7rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .15s; }
.lib-resume-play:hover { background: rgba(232,146,124,.32); }

/* IT231 — Story-end celebration toast */
.hmp-end-toast { position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%) translateY(10px); opacity: 0; background: rgba(14,12,30,.97); border: 1px solid rgba(240,196,108,.3); border-radius: 14px; padding: .6rem .85rem; display: flex; align-items: center; gap: .65rem; z-index: 301; width: min(calc(100vw - 2rem), 420px); box-shadow: 0 8px 32px rgba(0,0,0,.55); transition: opacity .3s, transform .3s; pointer-events: none; }
.hmp-end-toast.hmp-end-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.hmp-end-msg { font-size: .82rem; font-family: var(--sans); color: rgba(200,190,175,.9); flex: 1; min-width: 0; }
.hmp-end-cta { font-size: .75rem; font-weight: 700; font-family: var(--sans); color: var(--gold); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.hmp-end-cta:hover { text-decoration: underline; }
.hmp-end-close { background: none; border: none; cursor: pointer; color: rgba(200,190,175,.35); font-size: .7rem; padding: 0 .1rem; flex-shrink: 0; transition: color .15s; }
.hmp-end-close:hover { color: rgba(200,190,175,.7); }
/* IT236 — Next unlistened story button in end toast */
.hmp-end-next { background: rgba(240,196,108,.12); border: 1px solid rgba(240,196,108,.28); border-radius: 999px; color: var(--gold); font-size: .72rem; font-weight: 700; font-family: var(--sans); padding: .2rem .65rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .15s; }
.hmp-end-next:hover { background: rgba(240,196,108,.22); }
/* IT237 — Now-playing glow on library card */
.book-wrap.book-now-playing > .book { border-color: rgba(240,196,108,.65) !important; box-shadow: 0 0 20px rgba(240,196,108,.15); }

/* IT232 — Listening streak badge */
.lib-streak-badge { display: inline-block; margin-left: .4rem; font-size: .68rem; font-family: var(--sans); background: rgba(255,140,0,.12); color: rgba(255,180,60,.85); border-radius: 999px; padding: .1rem .5rem; vertical-align: middle; }

/* IT233 — Ambient music toggle button */
.hmp-ambient { background: none; border: none; cursor: pointer; color: rgba(200,190,175,.35); font-size: .78rem; padding: 0 .12rem; flex-shrink: 0; transition: color .15s; }
.hmp-ambient:hover { color: rgba(200,190,175,.75); }
.hmp-ambient.hmp-ambient-on { color: rgba(144,210,180,.9); }

/* IT234 — Offline banner */
.offline-banner { position: fixed; top: -3rem; left: 0; right: 0; background: rgba(14,12,30,.97); border-bottom: 1px solid rgba(240,196,108,.18); padding: .45rem 1rem; text-align: center; font-size: .76rem; font-family: var(--sans); color: rgba(200,190,175,.75); z-index: 600; transition: top .3s ease; }
.offline-banner.offline-banner-visible { top: 0; }

/* IT235 — Regenerate button on library cards */
.book-regen { display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; color: rgba(200,190,175,.3); text-decoration: none; padding: .15rem .2rem; transition: color .15s; flex-shrink: 0; }
.book-regen:hover { color: rgba(200,190,175,.75); }

/* IT239 — Speed toggle in mini-player */
.hmp-speed { background: none; border: none; cursor: pointer; color: rgba(200,190,175,.35); font-size: .68rem; font-weight: 700; font-family: var(--sans); padding: 0 .12rem; flex-shrink: 0; transition: color .15s; letter-spacing: -.02em; }
.hmp-speed:hover { color: rgba(200,190,175,.75); }
.hmp-speed.hmp-speed-on { color: rgba(240,196,108,.85); }

/* IT240 — Tonight pin on library cards */
.book-tonight { display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; color: rgba(200,190,175,.3); background: none; border: none; cursor: pointer; padding: .15rem .2rem; transition: color .15s, opacity .15s; flex-shrink: 0; opacity: .5; }
.book-tonight:hover { opacity: 1; color: rgba(200,190,175,.8); }
.book-tonight.book-tonight-on { opacity: 1; color: rgba(240,196,108,.9); }
/* IT242 — Bedtime playlist auto-builder */
.lib-bedtime { margin: .5rem 0 .25rem; }
.lib-bedtime-btn { display: inline-flex; align-items: center; gap: .4rem; background: rgba(20,17,46,.85); border: 1px solid rgba(240,196,108,.25); border-radius: 999px; padding: .45rem 1rem; font-size: .8rem; font-family: var(--sans); color: var(--gold); cursor: pointer; transition: background .2s, border-color .2s; }
.lib-bedtime-btn:hover { background: rgba(240,196,108,.08); border-color: rgba(240,196,108,.5); }

/* IT243 — All-caught-up library state */
.lib-caught-up { text-align: center; padding: 1.5rem 1rem; }
.lib-caught-up-star { font-size: 1.4rem; color: var(--gold); display: block; margin-bottom: .5rem; }
.lib-caught-up-msg { font-size: .88rem; font-family: var(--sans); color: rgba(200,190,175,.7); display: block; margin-bottom: .75rem; }
.lib-caught-up-cta { display: inline-block; font-size: .82rem; font-weight: 700; font-family: var(--sans); color: var(--gold); text-decoration: none; border: 1px solid rgba(240,196,108,.3); border-radius: 999px; padding: .35rem .9rem; transition: background .2s; }
.lib-caught-up-cta:hover { background: rgba(240,196,108,.08); }

/* IT244 — Per-child listening stats cards */
.child-stats-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 .75rem; }
.child-stat-card { display: flex; align-items: center; gap: .75rem; background: rgba(255,255,255,.04); border: 1px solid rgba(240,196,108,.12); border-radius: 14px; padding: .6rem .85rem; flex: 1 1 200px; min-width: 0; }
.csc-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.csc-body { flex: 1; min-width: 0; }
.csc-name { font-family: var(--serif); font-size: .9rem; font-weight: 700; color: rgba(240,220,175,.9); margin-bottom: .1rem; }
.csc-meta { font-size: .72rem; color: rgba(200,190,175,.5); font-family: var(--sans); margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csc-bar-wrap { height: 3px; background: rgba(255,255,255,.07); border-radius: 999px; overflow: hidden; }
.csc-bar-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.csc-cta { font-size: .72rem; font-weight: 700; font-family: var(--sans); color: var(--gold); text-decoration: none; flex-shrink: 0; white-space: nowrap; opacity: .75; transition: opacity .15s; }
.csc-cta:hover { opacity: 1; }

/* IT245 — Quick Create FAB + bottom sheet */
.quick-create-fab { position: fixed; bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5.5rem)); right: 1.2rem; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 1.35rem; font-weight: 900; border: none; cursor: pointer; z-index: 110; box-shadow: 0 6px 28px rgba(240,196,108,.45); transition: transform .15s, box-shadow .15s; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.quick-create-fab:hover { transform: scale(1.08); box-shadow: 0 8px 36px rgba(240,196,108,.6); }
.quick-create-fab:active { transform: scale(.93); }
.quick-create-backdrop { position: fixed; inset: 0; background: rgba(5,3,20,.55); z-index: 120; opacity: 0; transition: opacity .25s; }
.quick-create-backdrop.qcs-backdrop-open { opacity: 1; }
.quick-create-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 130; background: #1a1635; border-radius: 20px 20px 0 0; border-top: 1px solid rgba(240,196,108,.18); padding: 1.2rem 1.2rem calc(1.5rem + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); max-width: 520px; margin: 0 auto; }
.quick-create-sheet.qcs-open { transform: translateY(0); }
.qcs-handle { width: 36px; height: 4px; background: rgba(255,255,255,.15); border-radius: 999px; margin: 0 auto 1rem; }
.qcs-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: rgba(240,220,175,.95); margin-bottom: .9rem; text-align: center; }
.qcs-label { font-size: .72rem; font-family: var(--sans); color: rgba(200,190,175,.4); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .4rem; }
.qcs-child-chips, .qcs-mood-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.qcs-chip { background: rgba(255,255,255,.06); border: 1px solid rgba(240,196,108,.18); border-radius: 999px; padding: .38rem .85rem; font-size: .82rem; font-family: var(--sans); color: rgba(200,190,175,.75); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.qcs-chip:hover { background: rgba(240,196,108,.08); border-color: rgba(240,196,108,.35); }
.qcs-chip.qcs-chip-sel { background: rgba(240,196,108,.12); border-color: var(--gold); color: var(--gold); font-weight: 700; }
.qcs-chip-new { opacity: .55; }
.qcs-cta { width: 100%; padding: .8rem; background: var(--gold); color: var(--ink); border: none; border-radius: 999px; font-family: var(--serif); font-size: 1rem; font-weight: 700; cursor: pointer; margin-bottom: .5rem; transition: opacity .15s; }
.qcs-cta:active { opacity: .85; }
.qcs-cancel { width: 100%; padding: .55rem; background: none; border: none; color: rgba(200,190,175,.35); font-family: var(--sans); font-size: .82rem; cursor: pointer; }

/* IT246 — Mood filter chips on shelf */
.shelf-mood-btns { display: flex; gap: .3rem; flex-wrap: nowrap; }
.shelf-mood-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(240,196,108,.12); border-radius: 999px; padding: .28rem .65rem; font-size: .8rem; cursor: pointer; color: rgba(200,190,175,.55); transition: background .15s, border-color .15s, color .15s; }
.shelf-mood-btn:hover { background: rgba(240,196,108,.07); color: rgba(200,190,175,.85); }
.shelf-mood-btn.shelf-mood-active { background: rgba(240,196,108,.1); border-color: rgba(240,196,108,.4); color: var(--gold); font-weight: 700; }

/* IT247 — Ambiance/mood tag on story cards */
.card-mood { font-size: .75rem; opacity: .7; }
.card-mood-calme { color: rgba(120,200,220,.8); }
.card-mood-aventure { color: rgba(255,200,80,.8); }
.card-mood-rigolo { color: rgba(180,230,120,.8); }
.card-mood-magique { color: rgba(200,160,255,.8); }

/* IT248 — Saga/Series progress banner */
.saga-progress-bar { margin: .5rem 0 .75rem; }
.spb-inner { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(240,196,108,.15); border-left: 3px solid rgba(240,196,108,.6); border-radius: 0 12px 12px 0; padding: .75rem 1rem; }
.spb-left { flex: 1; min-width: 0; }
.spb-eyebrow { font-size: .65rem; letter-spacing: .08em; color: rgba(240,196,108,.5); font-family: var(--sans); margin-bottom: .15rem; }
.spb-title { font-family: var(--serif); font-size: .88rem; font-weight: 700; color: rgba(240,220,175,.9); margin-bottom: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spb-bar-wrap { height: 4px; background: rgba(255,255,255,.07); border-radius: 999px; overflow: hidden; margin-bottom: .25rem; }
.spb-bar-fill { height: 100%; background: linear-gradient(90deg, rgba(240,196,108,.6), rgba(240,196,108,.9)); border-radius: 999px; transition: width .4s ease; }
.spb-count { font-size: .7rem; color: rgba(200,190,175,.4); font-family: var(--sans); }
.spb-cta { font-size: .78rem; font-weight: 700; font-family: var(--sans); color: var(--gold); text-decoration: none; border: 1px solid rgba(240,196,108,.3); border-radius: 999px; padding: .4rem .85rem; flex-shrink: 0; white-space: nowrap; transition: background .15s; }
.spb-cta:hover { background: rgba(240,196,108,.08); }

/* IT249 — 7-day listening calendar */
.listen-calendar { margin: .4rem 0 .6rem; }
.lc-days { display: flex; gap: .35rem; align-items: center; }
.lc-day { display: flex; flex-direction: column; align-items: center; gap: .18rem; min-width: 0; flex: 1; }
.lc-day-name { font-size: .6rem; font-family: var(--sans); color: rgba(200,190,175,.3); letter-spacing: .03em; text-transform: uppercase; }
.lc-day-dot { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); transition: background .2s, border-color .2s; }
.lc-day.lc-day-on .lc-day-dot { background: rgba(240,196,108,.25); border-color: rgba(240,196,108,.5); }
.lc-day.lc-day-today .lc-day-dot { border-color: rgba(240,196,108,.35); }
.lc-day.lc-day-today.lc-day-on .lc-day-dot { background: rgba(240,196,108,.5); border-color: var(--gold); box-shadow: 0 0 8px rgba(240,196,108,.3); }

/* IT250 — "New" badge on recent stories */
.card-new-badge { display: inline-block; font-size: .6rem; font-family: var(--sans); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(120,220,150,.9); background: rgba(120,220,150,.1); border: 1px solid rgba(120,220,150,.25); border-radius: 999px; padding: .08rem .4rem; vertical-align: middle; }

/* IT252 — Mood-based story cover patterns */
.cover-mood-calme::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 30%, rgba(100,180,220,.12) 0%, transparent 65%); border-radius: inherit; pointer-events: none; }
.cover-mood-aventure::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 70%, rgba(255,180,50,.12) 0%, transparent 65%); border-radius: inherit; pointer-events: none; }
.cover-mood-rigolo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 20%, rgba(120,220,100,.12) 0%, transparent 65%); border-radius: inherit; pointer-events: none; }
.cover-mood-magique::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 60%, rgba(180,130,255,.14) 0%, transparent 65%); border-radius: inherit; pointer-events: none; }

/* IT253 — Language toggle */
.lang-toggle-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(240,196,108,.2); border-radius: 999px; padding: .25rem .7rem; font-size: .72rem; font-family: var(--sans); color: rgba(200,190,175,.5); cursor: pointer; transition: background .15s, color .15s; margin-top: -.2rem; }
.lang-toggle-btn:hover { background: rgba(240,196,108,.07); color: rgba(200,190,175,.85); }

/* IT254 — Card bottom progress strip */
.story-card { position: relative; }
.card-prog-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.05); border-radius: 0 0 16px 16px; overflow: hidden; pointer-events: none; }
.card-prog-fill { height: 100%; background: linear-gradient(90deg, rgba(240,196,108,.45), rgba(240,196,108,.75)); border-radius: 0 0 16px 16px; transition: width .3s ease; }

/* IT256 — Streak milestone enhancement */
.streak-bar-milestone { border-color: rgba(240,196,108,.35); background: rgba(240,196,108,.07); }
.streak-bar-milestone .streak-count { color: var(--gold); font-size: 1.05rem; }
@keyframes streak-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.streak-bar-milestone .streak-fire { display: inline-block; animation: streak-pulse 1.8s ease-in-out infinite; }

/* IT257 — Search results count */
.shelf-results-count { font-size: .72rem; color: rgba(200,190,175,.35); font-family: var(--sans); margin: -.1rem 0 .4rem; min-height: 1em; }

/* IT261 — Manual done toggle button on card */
.card-done-btn { background: none; border: none; color: rgba(200,190,175,.25); font-size: .82rem; cursor: pointer; padding: .2rem .3rem; transition: color .15s; }
.card-done-btn:hover { color: rgba(120,220,150,.7); }
.card-done-btn.card-done-btn-on { color: rgba(120,220,150,.9); }

/* IT262 — Clear all filters button */
.shelf-clear-filters { background: rgba(255,80,80,.08); border: 1px solid rgba(255,100,100,.25); border-radius: 999px; padding: .25rem .65rem; font-size: .72rem; font-family: var(--sans); color: rgba(255,140,140,.7); cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.shelf-clear-filters:hover { background: rgba(255,80,80,.14); color: rgba(255,160,160,.9); }

/* IT263 — Re-engagement banner */
.reengagement-banner { display: flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.04); border: 1px solid rgba(240,196,108,.18); border-radius: 12px; padding: .65rem .9rem; margin: .4rem 0 .5rem; }
.reengagement-banner[hidden] { display: none; }
.reb-moon { font-size: 1.1rem; flex-shrink: 0; }
.reb-msg { font-size: .78rem; font-family: var(--sans); color: rgba(200,190,175,.6); flex: 1; min-width: 0; }
.reb-cta { font-size: .75rem; font-weight: 700; font-family: var(--sans); color: var(--gold); text-decoration: none; border: 1px solid rgba(240,196,108,.3); border-radius: 999px; padding: .3rem .7rem; flex-shrink: 0; white-space: nowrap; transition: background .15s; }
.reb-cta:hover { background: rgba(240,196,108,.08); }
.reb-close { background: none; border: none; color: rgba(200,190,175,.3); font-size: .8rem; cursor: pointer; flex-shrink: 0; padding: 0 .15rem; }

/* IT264 — Milestone celebration banner */
.milestone-banner { display: flex; align-items: center; gap: .6rem; background: rgba(240,196,108,.07); border: 1px solid rgba(240,196,108,.3); border-radius: 12px; padding: .65rem .9rem; margin: .4rem 0 .5rem; }
.milestone-banner[hidden] { display: none; }
.mb-icon { font-size: 1.2rem; flex-shrink: 0; }
.mb-msg { font-size: .82rem; font-family: var(--sans); color: rgba(240,220,175,.85); flex: 1; font-weight: 600; }
.mb-close { background: none; border: none; color: rgba(200,190,175,.35); font-size: .8rem; cursor: pointer; flex-shrink: 0; padding: 0 .15rem; }

/* IT258 — Story completion toast */
.completion-toast[hidden] { display: none; }
.completion-toast { position: fixed; bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5.5rem)); left: 50%; transform: translateX(-50%); background: rgba(20,17,46,.95); border: 1px solid rgba(240,196,108,.3); border-radius: 14px; padding: .7rem 1rem; display: flex; align-items: center; gap: .6rem; z-index: 200; backdrop-filter: blur(12px); min-width: 240px; max-width: calc(100vw - 2rem); box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.ct-star { color: var(--gold); font-size: 1rem; flex-shrink: 0; }
.ct-msg { font-size: .8rem; font-family: var(--sans); color: rgba(240,220,175,.9); flex: 1; min-width: 0; }
.ct-next { background: var(--gold); color: var(--ink); border: none; border-radius: 999px; padding: .28rem .75rem; font-size: .72rem; font-weight: 700; font-family: var(--sans); cursor: pointer; flex-shrink: 0; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.ct-close { background: none; border: none; color: rgba(200,190,175,.35); font-size: .85rem; cursor: pointer; flex-shrink: 0; padding: 0 .15rem; }

/* IT259 — Mini-player remaining time */
.mini-time { font-size: .65rem; font-family: var(--sans); color: rgba(200,190,175,.3); letter-spacing: -.01em; flex-shrink: 0; min-width: 30px; text-align: right; }

/* IT260 — Discover story card */
.discover-story { margin: .4rem 0 .6rem; }
.ds-inner { display: flex; align-items: center; gap: .75rem; background: rgba(255,255,255,.04); border: 1px solid rgba(240,196,108,.15); border-left: 3px solid rgba(240,196,108,.45); border-radius: 0 12px 12px 0; padding: .65rem .9rem; }
.ds-eyebrow { display: none; }
.ds-emoji { font-size: 1.5rem; flex-shrink: 0; }
.ds-body { flex: 1; min-width: 0; }
.ds-title { font-family: var(--serif); font-size: .88rem; font-weight: 700; color: rgba(240,220,175,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .1rem; }
.ds-meta { font-size: .72rem; color: rgba(200,190,175,.4); font-family: var(--sans); }
.ds-cta { font-size: .78rem; font-weight: 700; font-family: var(--sans); color: var(--gold); text-decoration: none; border: 1px solid rgba(240,196,108,.3); border-radius: 999px; padding: .38rem .8rem; flex-shrink: 0; white-space: nowrap; transition: background .15s; }
.ds-cta:hover { background: rgba(240,196,108,.08); }

/* IT265 — Playback speed button */
.mini-speed { background: none; border: none; color: rgba(200,190,175,.35); font-size: .6rem; font-family: var(--sans); font-weight: 700; cursor: pointer; padding: .2rem .15rem; letter-spacing: -.01em; transition: color .15s; white-space: nowrap; flex-shrink: 0; }
.mini-speed:hover { color: rgba(200,190,175,.7); }
.mini-speed.mini-speed-active { color: var(--gold); }

/* IT266 — Sleep timer button */
.mini-sleep { background: none; border: none; color: rgba(200,190,175,.35); font-size: .7rem; cursor: pointer; padding: .2rem .15rem; transition: color .15s; white-space: nowrap; flex-shrink: 0; }
.mini-sleep:hover { color: rgba(200,190,175,.7); }
.mini-sleep.mini-sleep-active { color: rgba(120,200,255,.75); }

/* IT267 — Enhanced no-results empty state */
.shelf-no-results-wrap { display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 2.5rem 1.5rem; text-align: center; }
.nr-moon { font-size: 2rem; opacity: .35; }
.nr-msg { font-family: var(--sans); font-size: .9rem; color: rgba(200,190,175,.5); line-height: 1.5; }
.nr-msg strong { color: rgba(200,190,175,.8); }
.nr-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.nr-clear-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: .35rem .85rem; font-size: .78rem; font-family: var(--sans); color: rgba(200,190,175,.6); cursor: pointer; transition: background .15s; }
.nr-clear-btn:hover { background: rgba(255,255,255,.09); color: rgba(200,190,175,.9); }
.nr-create-btn { background: rgba(240,196,108,.07); border: 1px solid rgba(240,196,108,.3); border-radius: 999px; padding: .35rem .85rem; font-size: .78rem; font-family: var(--sans); color: var(--gold); text-decoration: none; transition: background .15s; }
.nr-create-btn:hover { background: rgba(240,196,108,.13); }

/* IT269 — Story title inline edit */
.story-card-title { display: flex; align-items: baseline; gap: .25rem; }
.card-title-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-title-edit-btn { background: none; border: none; color: rgba(200,190,175,.2); font-size: .75rem; cursor: pointer; padding: .05rem .15rem; line-height: 1; transition: color .15s; flex-shrink: 0; opacity: 0; }
.story-card:hover .card-title-edit-btn, .card-title-edit-btn:focus { opacity: 1; color: rgba(200,190,175,.4); }
.story-card-title.card-title-editing { display: block; }
.card-title-input { width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(240,196,108,.35); border-radius: 6px; padding: .3rem .5rem; font-family: var(--serif); font-size: .9rem; color: rgba(240,220,175,.9); outline: none; }
.card-title-edit-btns { display: flex; gap: .4rem; margin-top: .3rem; }
.card-title-save { background: rgba(240,196,108,.12); border: 1px solid rgba(240,196,108,.35); border-radius: 6px; padding: .2rem .6rem; font-size: .75rem; color: var(--gold); cursor: pointer; font-family: var(--sans); }
.card-title-cancel { background: none; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: .2rem .5rem; font-size: .75rem; color: rgba(200,190,175,.4); cursor: pointer; font-family: var(--sans); }

/* IT270 — Monthly stats card */
.monthly-stats-card { display: flex; align-items: center; gap: .9rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: .55rem .9rem; margin: .3rem 0 .5rem; }
.msc-label { font-size: .68rem; font-family: var(--sans); color: rgba(200,190,175,.35); white-space: nowrap; flex-shrink: 0; }
.msc-stats { display: flex; gap: .9rem; flex-wrap: wrap; }
.msc-stat { display: flex; align-items: baseline; gap: .2rem; }
.msc-n { font-family: var(--serif); font-size: .95rem; font-weight: 700; color: rgba(240,220,175,.6); }
.msc-l { font-size: .65rem; font-family: var(--sans); color: rgba(200,190,175,.35); }

/* IT271 — Mini-player audio waveform */
.mini-wave { display: flex; align-items: center; gap: 2px; margin-right: .1rem; flex-shrink: 0; }
.mini-wave span { display: block; width: 2px; height: 10px; background: rgba(240,196,108,.35); border-radius: 2px; transform: scaleY(0.35); transition: transform .1s; animation: wave-bar 0.9s ease-in-out infinite; animation-play-state: paused; }
.mini-wave span:nth-child(2) { animation-delay: 0.22s; }
.mini-wave span:nth-child(3) { animation-delay: 0.44s; }
.mini-player.mini-playing .mini-wave span { animation-play-state: running; }
@keyframes wave-bar { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

/* IT273 — Mini-player restart button */
.mini-restart { background: none; border: none; color: rgba(200,190,175,.35); font-size: .78rem; cursor: pointer; padding: .2rem .15rem; transition: color .15s; flex-shrink: 0; }
.mini-restart:hover { color: rgba(200,190,175,.7); }

/* IT274 — Screen dim bedtime mode */
.mini-dim { background: none; border: none; color: rgba(200,190,175,.35); font-size: .78rem; cursor: pointer; padding: .2rem .15rem; transition: color .15s; flex-shrink: 0; }
.mini-dim:hover { color: rgba(200,190,175,.7); }
.mini-dim.mini-dim-active { color: rgba(180,160,255,.8); }
body.screen-dimmed { filter: brightness(.1) saturate(0); transition: filter .4s; }
body.screen-dimmed #mini-player { filter: brightness(10) saturate(1); }

/* IT275 — Today's listening badge */
.today-listen-badge { font-size: .72rem; font-family: var(--sans); color: rgba(120,220,150,.75); margin: .2rem 0; padding: 0; }
.today-listen-badge[hidden] { display: none; }

/* IT276 — Cover click-to-play cursor hint */
.story-cover { cursor: pointer; }

/* IT277 — Auto episode badge (reuses .cover-ep, no extra CSS needed) */

/* IT278 — Scroll-to-top button */
.scroll-top-btn { position: fixed; bottom: 5.5rem; right: 1rem; z-index: 200; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(20,17,46,.88); border: 1px solid rgba(240,196,108,.3); color: rgba(240,196,108,.75); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,.35); transition: opacity .2s, transform .2s; }
.scroll-top-btn[hidden] { display: none; }
.scroll-top-btn:hover { color: var(--gold); border-color: rgba(240,196,108,.6); transform: translateY(-2px); }

/* IT279 — FAB pulse for new users */
.quick-create-fab.fab-new { animation: fab-ring 2.4s ease-in-out infinite; }
@keyframes fab-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(240,196,108,.0), 0 4px 20px rgba(240,196,108,.3); } 50% { box-shadow: 0 0 0 10px rgba(240,196,108,.0), 0 4px 20px rgba(240,196,108,.5); } 25% { box-shadow: 0 0 0 6px rgba(240,196,108,.25), 0 4px 20px rgba(240,196,108,.4); } }

/* IT280 — Next-ep highlight */
.story-card.story-card-next-ep { border-color: rgba(240,196,108,.35); box-shadow: 0 0 0 1.5px rgba(240,196,108,.2), 0 4px 20px rgba(240,196,108,.08); }
.card-tonight-chip { font-size: .65rem; font-family: var(--sans); font-weight: 700; color: rgba(240,196,108,.7); background: rgba(240,196,108,.07); border-top: 1px solid rgba(240,196,108,.12); padding: .3rem .65rem; letter-spacing: .04em; text-align: center; border-radius: 0 0 10px 10px; }

/* IT281 — Personalized shelf greeting */
.shelf-greeting { font-family: var(--serif); font-size: .95rem; color: rgba(200,190,175,.45); text-align: center; margin: .15rem 0 .4rem; letter-spacing: .02em; font-style: italic; }
.shelf-greeting[hidden] { display: none; }

/* IT282 — Child avatar emoji (reuses .child-avatar, no extra CSS) */

/* IT283 — Goodnight overlay */
.goodnight-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(10,8,28,.97); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.goodnight-overlay[hidden] { display: none; }
.goodnight-overlay.goodnight-visible { opacity: 1; pointer-events: auto; }
.goodnight-inner { text-align: center; }
.goodnight-moon { font-size: 3.5rem; animation: moon-float 3s ease-in-out infinite; }
@keyframes moon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.goodnight-msg { font-family: var(--serif); font-size: clamp(1.8rem,6vw,2.6rem); color: var(--gold); margin: .8rem 0 .3rem; font-weight: 700; }
.goodnight-sub { font-family: var(--sans); font-size: .9rem; color: rgba(200,190,175,.5); }

/* IT285 — Mood breakdown mini-bar */
.mood-bar-strip { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: .25rem 0 .5rem; max-width: 280px; }
.mood-bar-seg { display: flex; align-items: center; justify-content: center; font-size: .45rem; transition: width .4s ease; }
.mood-bar-calme { background: rgba(120,180,255,.5); }
.mood-bar-aventure { background: rgba(255,200,80,.55); }
.mood-bar-rigolo { background: rgba(120,220,150,.5); }
.mood-bar-magique { background: rgba(200,150,255,.5); }

/* IT286 — Skip +15s mini-player button */
.mini-skip { background: none; border: none; color: rgba(200,190,175,.35); font-size: .6rem; font-family: var(--sans); font-weight: 700; cursor: pointer; padding: .2rem .15rem; letter-spacing: -.01em; transition: color .15s; white-space: nowrap; flex-shrink: 0; }
.mini-skip:hover { color: rgba(200,190,175,.7); }

/* IT287 — Weekly listening challenge */
.weekly-challenge { margin: .4rem 0 .5rem; }
.wc-inner { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: .6rem .9rem; }
.wc-top { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.wc-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
.wc-text { display: flex; flex-direction: column; gap: .1rem; }
.wc-title { font-family: var(--sans); font-size: .78rem; font-weight: 700; color: rgba(200,190,175,.7); }
.wc-sub { font-family: var(--sans); font-size: .68rem; color: rgba(200,190,175,.4); }
.wc-bar-wrap { height: 5px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
.wc-bar-fill { height: 100%; background: linear-gradient(90deg, rgba(240,196,108,.5), rgba(240,196,108,.8)); border-radius: 3px; transition: width .5s ease; }
.wc-bar-fill.wc-bar-done { background: linear-gradient(90deg, rgba(120,220,150,.6), rgba(120,220,150,.9)); }

/* IT289 — Avatar quick emoji picker popup */
.profil-child-avatar-pick { cursor: pointer; transition: transform .15s; }
.profil-child-avatar-pick:hover { transform: scale(1.12); }
.avatar-emoji-popup { position: absolute; z-index: 400; background: #1a1640; border: 1px solid rgba(240,196,108,.25); border-radius: 14px; padding: .55rem .5rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; box-shadow: 0 8px 40px rgba(0,0,0,.55); animation: aep-in .16s ease; }
@keyframes aep-in { from { opacity: 0; transform: translateY(-6px) scale(.94); } to { opacity: 1; transform: none; } }
.aep-btn { background: rgba(255,255,255,.05); border: 1.5px solid transparent; border-radius: 8px; width: 38px; height: 38px; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
.aep-btn:hover { background: rgba(240,196,108,.12); }
.aep-btn.aep-active { border-color: var(--gold, #f0c46c); background: rgba(240,196,108,.15); }

/* IT290 — Mini-player mute flash indicator */
.mini-vol-flash { font-size: 1.1rem; position: absolute; left: 50%; top: -.1rem; transform: translateX(-50%); background: rgba(20,17,46,.92); border-radius: 6px; padding: .15rem .35rem; pointer-events: none; animation: vol-flash-in .15s ease; z-index: 10; }
.mini-vol-flash[hidden] { display: none; }
@keyframes vol-flash-in { from { opacity: 0; transform: translateX(-50%) scale(.7); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

/* IT292 — Auto-done subtle glow on completed card */
.story-card-done .story-cover::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: rgba(120,220,150,.6); background: rgba(0,0,0,.18); border-radius: inherit; opacity: 0; transition: opacity .25s; }
.story-card-done:hover .story-cover::after { opacity: 1; }

/* IT293 — Create next episode button in completion toast */
.ct-create { background: rgba(240,196,108,.12); border: 1px solid rgba(240,196,108,.35); color: var(--gold, #f0c46c); font: 700 .82rem var(--sans, sans-serif); padding: .45rem 1rem; border-radius: 999px; cursor: pointer; transition: background .15s; white-space: nowrap; flex-shrink: 0; }
.ct-create:hover { background: rgba(240,196,108,.22); }
.ct-create[hidden] { display: none; }

/* IT288 — Recently added quick-access row */
.recent-row-wrap { margin: .5rem 0 .4rem; }
.recent-row-label { font-size: .7rem; font-family: var(--sans); color: rgba(200,190,175,.35); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }
.recent-row { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.recent-row::-webkit-scrollbar { display: none; }
.recent-card { display: flex; flex-direction: column; align-items: center; gap: .25rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; padding: .6rem .55rem; min-width: 70px; cursor: pointer; font: inherit; position: relative; transition: background .15s, border-color .15s; flex-shrink: 0; }
.recent-card:hover, .recent-card:active { background: rgba(240,196,108,.08); border-color: rgba(240,196,108,.25); }
.recent-emoji { font-size: 1.4rem; line-height: 1; }
.recent-title { font-family: var(--sans); font-size: .6rem; color: rgba(200,190,175,.6); text-align: center; line-height: 1.2; max-width: 68px; word-break: break-word; }
.recent-done { position: absolute; top: .25rem; right: .3rem; font-size: .6rem; color: rgba(120,220,150,.8); }

/* IT309 — Explore new themes discovery bar */
.explore-themes-wrap { margin: .5rem 0 .4rem; }
.explore-themes-label { font-size: .7rem; font-family: var(--sans); color: rgba(200,190,175,.35); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .45rem; }
.explore-themes-row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
.explore-themes-row::-webkit-scrollbar { display: none; }
.explore-theme-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(240,196,108,.18);
  border-radius: 999px; padding: .35rem .8rem;
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  color: rgba(247,220,164,.65); cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
}
.explore-theme-chip:hover, .explore-theme-chip:active { background: rgba(240,196,108,.1); border-color: rgba(240,196,108,.4); color: var(--gold, #f0c46c); }
.explore-theme-chip.tried { opacity: .35; pointer-events: none; }

/* IT310 — Kid theme picker overlay */
.kid-theme-picker {
  position: fixed; inset: 0; z-index: 160;
  background: linear-gradient(160deg, #0b0920 0%, #1a163a 60%, #0f0d27 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.6rem; padding: 2rem 1.5rem;
  animation: overlay-in .25s cubic-bezier(.4,0,.2,1) both;
}
.kid-theme-picker[hidden] { display: none; }
.kid-theme-picker-title {
  font-family: var(--serif, "Fraunces", serif);
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 700; color: var(--gold-soft, #f7dca4);
  text-align: center; max-width: 280px; line-height: 1.3;
}
.kid-theme-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .85rem; width: min(320px, 88vw);
}
.kid-theme-btn {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(240,196,108,.2);
  border-radius: 18px; padding: 1rem .5rem;
  font: inherit; color: var(--gold-soft, #f7dca4); cursor: pointer;
  transition: transform .14s, background .14s, border-color .14s;
  -webkit-tap-highlight-color: transparent;
}
.kid-theme-btn:active { transform: scale(.92); background: rgba(240,196,108,.16); border-color: var(--gold, #f0c46c); }
.kid-theme-emoji { font-size: 2.4rem; line-height: 1; }
.kid-theme-label { font-family: var(--serif, "Fraunces", serif); font-size: .78rem; font-weight: 600; text-align: center; line-height: 1.2; }
.kid-theme-picker-back {
  background: transparent; border: 1px solid rgba(240,196,108,.18);
  color: rgba(247,220,164,.4); font: .85rem var(--sans, sans-serif);
  padding: .5rem 1.2rem; border-radius: 999px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* IT321 — streak danger/celebrate banner */
.streak-banner {
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.8rem 1rem; border-radius:12px; margin-bottom:1.2rem;
}
.streak-banner.streak-danger {
  background:rgba(232,146,124,.08); border:1px solid rgba(232,146,124,.3);
}
.streak-banner.streak-celebrate {
  background:rgba(240,196,108,.08); border:1px solid rgba(240,196,108,.3);
}
.streak-banner-icon { font-size:1.4rem; flex-shrink:0; }
.streak-banner-msg { flex:1; font-size:.85rem; color:rgba(247,220,164,.8); min-width:140px; }
.streak-banner-cta {
  font-family:var(--serif); font-size:.82rem; font-weight:700;
  color:var(--ink); background:var(--rose); padding:.3rem .8rem;
  border-radius:999px; text-decoration:none; white-space:nowrap;
}
.streak-banner.streak-celebrate .streak-banner-msg { color:var(--gold-soft); }

/* IT322 — landing sticky mobile CTA */
.landing-sticky-cta {
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  background: linear-gradient(0deg, var(--night) 60%, transparent);
  padding:1rem 1.2rem 1.4rem;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.landing-sticky-cta.visible { transform:none; pointer-events:auto; }
.landing-sticky-cta .cta { display:block; text-align:center; width:100%; max-width:380px; margin:0 auto; }
@media(min-width:700px) { .landing-sticky-cta { display:none; } }

/* IT313 — per-child sparkline */
.child-sparkline { display:flex; align-items:flex-end; gap:2px; height:22px; margin-top:.6rem; opacity:.85; }
.child-sparkline svg { display:block; }

/* IT314 — steps preview card */
.steps-preview-wrap {
  margin-top:2.4rem; display:flex; justify-content:center;
  animation: fadeUp .5s ease both;
}
.steps-preview-card {
  display:flex; align-items:center; gap:1rem; padding:.9rem 1.2rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(240,196,108,.15);
  border-radius:16px; max-width:420px; width:100%;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
}
.steps-preview-cover {
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  background: linear-gradient(135deg, hsl(220,45%,18%), hsl(260,40%,22%));
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.steps-preview-info { flex:1; min-width:0; }
.steps-preview-title {
  font-family:var(--serif); font-size:.95rem; color:var(--gold-soft);
  font-style:italic; line-height:1.3; margin-bottom:.2rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition: color .2s;
}
.steps-preview-title.live { color: #fff; }
.steps-preview-meta { font-size:.72rem; color:rgba(247,220,164,.45); letter-spacing:.02em; }
.steps-preview-play {
  width:36px; height:36px; flex-shrink:0; border-radius:50%;
  background:rgba(240,196,108,.12); border:1px solid rgba(240,196,108,.3);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:.85rem; cursor:default;
}
.steps-preview-label {
  font-size:.68rem; color:rgba(247,220,164,.35); letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:.35rem;
}

/* IT316 — profil child average rating */
.profil-child-rating { font-size:.8rem; color:rgba(240,196,108,.7); margin-top:.3rem; }
.profil-child-rating-count { color:rgba(247,220,164,.4); }
/* IT333 — series episode progress pips */
.profil-series-progress { display:flex; align-items:center; gap:.3rem; margin:.4rem 0; flex-wrap:wrap; }
.series-pip { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; background:rgba(240,196,108,.75); box-shadow:0 0 4px rgba(240,196,108,.3); }
.series-pip-more { font-size:.72rem; color:rgba(247,220,164,.5); }

/* IT320 — profil push notification card */
.profil-notif-card { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border-radius:14px; background:rgba(240,196,108,.06); border:1px solid rgba(240,196,108,.2); margin-bottom:1.4rem; flex-wrap:wrap; }
.profil-notif-icon { font-size:1.6rem; flex-shrink:0; }
.profil-notif-info { flex:1; min-width:120px; }
.profil-notif-title { font-family:var(--serif); font-size:.95rem; color:var(--gold-soft); margin-bottom:.15rem; }
.profil-notif-sub { font-size:.78rem; color:rgba(247,220,164,.5); }
.profil-notif-actions { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.profil-notif-sel { background:rgba(255,255,255,.06); border:1px solid rgba(240,196,108,.25); color:var(--cream); border-radius:8px; padding:.3rem .6rem; font-size:.82rem; }
.profil-notif-btn { background:var(--gold); color:var(--ink); border:none; border-radius:999px; padding:.35rem .9rem; font-size:.82rem; font-weight:700; cursor:pointer; }

/* IT321 — streak danger / celebration banner */
.streak-banner { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; padding:.8rem 1rem; border-radius:12px; margin-bottom:1.2rem; }
.streak-banner.streak-danger { background:rgba(232,146,124,.08); border:1px solid rgba(232,146,124,.3); }
.streak-banner.streak-celebrate { background:rgba(240,196,108,.08); border:1px solid rgba(240,196,108,.3); }
.streak-banner-icon { font-size:1.4rem; flex-shrink:0; }
.streak-banner-msg { flex:1; font-size:.85rem; color:rgba(247,220,164,.8); min-width:140px; }
.streak-banner-cta { font-family:var(--serif); font-size:.82rem; font-weight:700; color:var(--ink); background:var(--rose); padding:.3rem .8rem; border-radius:999px; text-decoration:none; white-space:nowrap; }

/* IT323 — Landing email capture bar */
.lead-bar { position:fixed; bottom:0; left:0; right:0; z-index:320; padding:0 1rem .5rem; pointer-events:none; }
.lead-bar[hidden] { display:none; }
.lead-bar-inner { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; background:rgba(20,17,46,.97); border:1px solid rgba(240,196,108,.28); border-radius:16px 16px 0 0; padding:1rem 1.2rem 1rem; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 -4px 32px rgba(0,0,0,.45); pointer-events:all; max-width:760px; margin:0 auto; position:relative; }
.lead-bar-close { position:absolute; top:.6rem; right:.7rem; background:transparent; border:none; color:rgba(247,220,164,.4); font-size:1rem; cursor:pointer; line-height:1; padding:.2rem; pointer-events:all; z-index:2; }
.lead-bar-close:hover { color:rgba(247,220,164,.8); }
.lead-bar-icon { font-size:1.8rem; flex-shrink:0; display:none; }
@media (min-width:480px) { .lead-bar-icon { display:block; } }
.lead-bar-text { flex:1; min-width:140px; }
.lead-bar-title { font-family:var(--serif); font-size:.95rem; color:var(--gold-soft); margin-bottom:.15rem; }
.lead-bar-sub { font-size:.75rem; color:rgba(247,220,164,.5); }
.lead-bar-form { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.lead-bar-input { background:rgba(255,255,255,.07); border:1px solid rgba(240,196,108,.3); color:var(--cream); border-radius:8px; padding:.45rem .8rem; font-size:.85rem; width:min(220px, 54vw); outline:none; }
.lead-bar-input:focus { border-color:rgba(240,196,108,.6); }
.lead-bar-submit { background:var(--gold); color:var(--ink); border:none; border-radius:999px; padding:.45rem 1.1rem; font-family:var(--serif); font-weight:700; font-size:.85rem; cursor:pointer; white-space:nowrap; }
.lead-bar-submit:hover { opacity:.88; }
.lead-bar-thanks { font-size:.85rem; color:#7fc48a; margin:0; }

/* IT327 — Guarantee badge in pricing section */
.guarantee-badge { text-align:center; font-size:.8rem; color:rgba(240,196,108,.55); margin-top:.9rem; letter-spacing:.02em; }

/* IT328 — Weekly reading goal widget on profil */
.profil-goal-card { margin:1rem 0 .6rem; padding:.8rem 1rem; background:rgba(240,196,108,.05); border:1px solid rgba(240,196,108,.15); border-radius:12px; }
.profil-goal-label { font-family:var(--serif); font-size:.82rem; color:var(--gold-soft); margin:0 0 .4rem; }
.profil-goal-row { display:flex; align-items:center; gap:.55rem; margin-bottom:.5rem; }
.profil-goal-val { font-family:var(--serif); font-size:1.35rem; font-weight:700; color:var(--gold); min-width:1.4rem; text-align:center; }
.profil-goal-unit { font-size:.76rem; color:rgba(247,220,164,.45); }
.profil-goal-minus, .profil-goal-plus { background:rgba(240,196,108,.1); border:1px solid rgba(240,196,108,.2); color:var(--gold-soft); border-radius:50%; width:1.5rem; height:1.5rem; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; cursor:pointer; line-height:1; flex-shrink:0; }
.profil-goal-minus:hover, .profil-goal-plus:hover { background:rgba(240,196,108,.22); }
.profil-goal-pips { display:flex; gap:.28rem; font-size:.95rem; margin-bottom:.35rem; }
.goal-pip { opacity:.22; }
.goal-pip-on { opacity:1; }
.profil-goal-progress { font-size:.76rem; color:rgba(247,220,164,.5); margin:0; }

/* IT329 — "Pour ce soir" quick access card on profil */
.profil-tonight-card { margin:.6rem 0 1rem; padding:.75rem 1rem; background:rgba(20,17,46,.6); border:1px solid rgba(240,196,108,.22); border-radius:12px; }
.profil-tonight-label { font-size:.78rem; color:rgba(247,220,164,.55); margin:0 0 .2rem; }
.profil-tonight-link { font-family:var(--serif); font-size:.95rem; color:var(--gold-soft); text-decoration:none; display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.profil-tonight-link:hover { color:var(--gold); }

/* IT335 — Landing sticky mini-CTA (appears after hero exits viewport) */
.landing-sticky-cta { position:fixed; bottom:72px; left:50%; transform:translateX(-50%) translateY(20px); z-index:200; display:flex; align-items:center; gap:.75rem; background:rgba(14,12,30,.97); border:1.5px solid rgba(240,196,108,.35); border-radius:50px; padding:.55rem .8rem .55rem 1rem; box-shadow:0 8px 40px rgba(0,0,0,.6); white-space:nowrap; opacity:0; transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
.landing-sticky-cta.visible { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:all; }
.landing-sticky-cta-text { font-size:.82rem; color:rgba(247,220,164,.75); }
.landing-sticky-cta-btn { background:var(--gold); color:var(--ink); font-weight:700; font-size:.82rem; border:none; border-radius:50px; padding:.4rem .9rem; cursor:pointer; text-decoration:none; transition:transform .15s, box-shadow .15s; display:inline-flex; align-items:center; gap:.3rem; }
.landing-sticky-cta-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(240,196,108,.5); }
.landing-sticky-cta-close { background:none; border:none; color:rgba(247,220,164,.35); font-size:.9rem; cursor:pointer; padding:.2rem .3rem; line-height:1; margin-left:-.2rem; transition:color .15s; }
.landing-sticky-cta-close:hover { color:rgba(247,220,164,.7); }
@media (max-width:500px) { .landing-sticky-cta-text { display:none; } }

/* IT336 — Story player: floating "back to player" button */
.back-to-player-btn { position:fixed; bottom:calc(72px + .8rem); right:1rem; z-index:100; background:rgba(20,17,46,.9); border:1px solid rgba(240,196,108,.3); border-radius:50px; padding:.5rem .9rem; color:var(--gold-soft); font-size:.78rem; font-family:var(--sans); cursor:pointer; display:flex; align-items:center; gap:.4rem; box-shadow:0 4px 20px rgba(0,0,0,.4); transition:opacity .3s ease, transform .3s ease; opacity:0; pointer-events:none; transform:translateY(8px); }
.back-to-player-btn.visible { opacity:1; pointer-events:all; transform:translateY(0); }
.back-to-player-btn:hover { background:rgba(30,24,60,.97); border-color:rgba(240,196,108,.6); }
@media (min-width:769px) { .back-to-player-btn { bottom:1.2rem; right:1.5rem; } }

/* IT337 — Profil: smart "create a story tonight" idea card */
.profil-idea-card { margin:.6rem 0 1rem; padding:.85rem 1rem; background:linear-gradient(135deg, rgba(30,24,60,.7) 0%, rgba(20,17,46,.8) 100%); border:1px solid rgba(240,196,108,.2); border-radius:14px; display:flex; flex-direction:column; gap:.4rem; }
.profil-idea-eyebrow { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(240,196,108,.5); margin:0; }
.profil-idea-text { font-family:var(--serif); font-size:.95rem; color:var(--gold-soft); margin:0; font-variation-settings:"SOFT" 60,"opsz" 60; line-height:1.4; }
.profil-idea-cta { align-self:flex-start; background:rgba(240,196,108,.12); border:1px solid rgba(240,196,108,.25); color:var(--gold); border-radius:50px; padding:.35rem .85rem; font-size:.82rem; text-decoration:none; transition:background .15s, transform .15s; margin-top:.1rem; }
.profil-idea-cta:hover { background:rgba(240,196,108,.2); transform:translateY(-1px); }

/* IT340 — Profil: gift card for engaged users */
.profil-gift-card { margin:1.4rem 0 0; padding:1rem 1.1rem; background:linear-gradient(135deg, rgba(240,196,108,.07) 0%, rgba(20,17,46,.6) 100%); border:1.5px solid rgba(240,196,108,.28); border-radius:16px; display:flex; align-items:center; gap:.9rem; }
.profil-gift-icon { font-size:1.8rem; flex-shrink:0; }
.profil-gift-body { flex:1; min-width:0; }
.profil-gift-title { font-family:var(--serif); font-size:.95rem; color:var(--gold-soft); font-weight:700; margin:0 0 .15rem; }
.profil-gift-sub { font-size:.78rem; color:rgba(247,220,164,.5); margin:0; line-height:1.4; }
.profil-gift-cta { background:var(--gold); color:var(--ink); font-weight:700; font-size:.8rem; border:none; border-radius:50px; padding:.45rem .95rem; text-decoration:none; white-space:nowrap; transition:transform .15s, box-shadow .15s; flex-shrink:0; }
.profil-gift-cta:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(240,196,108,.5); }

/* IT341 — Landing: hero social proof star badge */
.hero-star-badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; color:rgba(247,220,164,.65); margin-top:.7rem; }
.hero-star-badge .hsb-stars { color:var(--gold); letter-spacing:-.05em; font-size:.85rem; }
.hero-star-badge .hsb-score { color:var(--gold-soft); font-weight:700; }
.hero-star-badge .hsb-sep { opacity:.4; margin:0 .1rem; }
.hero-star-badge .hsb-count { color:rgba(247,220,164,.5); }

/* IT343 — Pricing section live activity social proof */
.pricing-live-pill { display:flex; align-items:center; justify-content:center; gap:.5rem; margin:.9rem auto 0; font-size:.82rem; color:rgba(247,220,164,.5); }
.pricing-live-dot { width:7px; height:7px; background:#7fc48a; border-radius:50%; flex-shrink:0; animation:live-pulse 2.4s ease-in-out infinite; }
@keyframes live-pulse { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.4)} }

/* IT345 — Hero CTA pulse for first-time visitors */
@keyframes cta-first-pulse { 0%{box-shadow:0 0 0 0 rgba(240,196,108,.8)} 60%{box-shadow:0 0 0 14px rgba(240,196,108,0)} 100%{box-shadow:0 0 0 0 rgba(240,196,108,0)} }
.cta-first-visit { animation:cta-first-pulse 2.2s ease-out 3; }

/* IT346 — iOS Add to Home Screen nudge */
.ios-install-nudge { position:fixed; bottom:calc(72px + .8rem); left:50%; transform:translateX(-50%) translateY(20px); z-index:400; width:calc(100% - 2rem); max-width:380px; background:rgba(10,8,26,.97); border:1.5px solid rgba(240,196,108,.3); border-radius:16px; padding:.9rem 1rem; display:flex; gap:.75rem; align-items:flex-start; box-shadow:0 8px 40px rgba(0,0,0,.6); opacity:0; transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
.ios-install-nudge.iin-visible { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:all; }
.iin-icon { font-size:1.4rem; flex-shrink:0; margin-top:.1rem; }
.iin-body { flex:1; min-width:0; }
.iin-title { font-family:var(--serif); font-size:.92rem; color:var(--gold-soft); font-weight:700; margin:0 0 .2rem; }
.iin-sub { font-size:.79rem; color:rgba(247,220,164,.48); margin:0; line-height:1.5; }
.iin-sub strong { color:rgba(247,220,164,.75); }
.iin-close { background:none; border:none; color:rgba(247,220,164,.3); font-size:1rem; cursor:pointer; padding:.2rem; flex-shrink:0; transition:color .15s; line-height:1; }
.iin-close:hover { color:rgba(247,220,164,.65); }

/* IT354 — Per-ambiance atmospheric tint on story page */
body[data-ambiance="aventure"] .sky::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 80% 50% at 50% 20%, rgba(220,120,40,.07), transparent 60%); }
body[data-ambiance="magique"]  .sky::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 80% 50% at 50% 20%, rgba(100,50,200,.08), transparent 60%); }
body[data-ambiance="rigolo"]   .sky::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 80% 50% at 50% 20%, rgba(50,180,100,.06), transparent 60%); }
body[data-ambiance="calme"]    .sky::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 80% 50% at 50% 20%, rgba(50,120,240,.05), transparent 60%); }
body[data-ambiance="aventure"] .play-btn { box-shadow:0 0 40px rgba(220,120,40,.3), 0 4px 18px rgba(0,0,0,.55); }
body[data-ambiance="magique"]  .play-btn { box-shadow:0 0 40px rgba(100,50,200,.3), 0 4px 18px rgba(0,0,0,.55); }
body[data-ambiance="rigolo"]   .play-btn { box-shadow:0 0 40px rgba(50,180,100,.3), 0 4px 18px rgba(0,0,0,.55); }
body[data-ambiance="aventure"] .story-eyebrow { color:rgba(255,160,60,.85); }
body[data-ambiance="rigolo"]   .story-eyebrow { color:rgba(80,220,120,.8); }

/* IT349 — Unread dot badge on library nav icon */
.bn-unread-dot { position:absolute; top:.38rem; left:calc(50% + .45rem); width:7px; height:7px; background:var(--gold); border-radius:50%; box-shadow:0 0 6px rgba(240,196,108,.7); pointer-events:none; }

/* IT350 — Remaining nights counter on locked badge */
.badge-item { position:relative; }
.badge-rem { position:absolute; top:-.35rem; right:-.35rem; font-size:.55rem; font-weight:900; background:var(--gold); color:var(--ink); border-radius:999px; min-width:1.3em; height:1.3em; display:flex; align-items:center; justify-content:center; padding:0 .2em; line-height:1; pointer-events:none; }

/* ===== Atelier sur papier crème (juin 2026) : accents lisibles =====
   Ces classes étaient en doré pâle / crème (pensées pour fond sombre) → illisibles sur le papier. */
#atelier .ambiance-hint { color: #6b5d8a; }
#atelier .ambiance-btn { color: var(--ink); border-color: rgba(44,35,71,.18); background: rgba(44,35,71,.03); }
#atelier .ambiance-btn:hover { color: var(--ink); background: rgba(240,196,108,.16); border-color: var(--gold); }
#atelier .ambiance-btn.ambiance-active { color: #14112e; background: rgba(240,196,108,.32); border-color: var(--gold); font-weight: 700; }
#atelier .stp-text { color: #9a7414; }
#atelier .stp-star { color: rgba(240,196,108,.85); }
#atelier .preview-ep { color: #7c6f9b; }
#atelier .voice-sample-btn { color: var(--ink); }
#atelier .vsb-text { color: var(--ink); }
#atelier .vsb-sub { color: #8a7fa8; }
#atelier .vsb-play { color: #9a7414; }
#atelier .btn-ghost { color: var(--ink); }
#atelier .field > span, #atelier #label-ambiance, #atelier #label-univers { color: var(--ink); }
#atelier .stp-star { color: #9a7414; }