/* =========================================================
   Thème : Vérifie sous le lit
   Horreur du quotidien. Lampe de chevet ambrée, moquette grise,
   puis le bleu froid de la nuit. L'ouverture est dans le noir :
   la lampe de téléphone suit la souris.
   lampe → jour → nuit → noir
   ========================================================= */

@property --bg     { syntax: "<color>"; inherits: true; initial-value: #14110e; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #e0a35c; }

.theme-lit {
  --bg: #14110e;
  --surface: #1c1814;
  --ink: #e8e2d6;
  --ink-muted: #a39a8b;
  --accent: #e0a35c;           /* abat-jour */
  --accent-2: #8fb0e8;         /* écran de téléphone */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Lora", Georgia, serif;
  --measure: 33em;

  transition: --bg 2.2s ease, --accent 2.2s ease;
}
.theme-lit[data-mood="lampe"] { --bg: #14110e; --accent: #e0a35c; }
.theme-lit[data-mood="jour"]  { --bg: #17181a; --accent: #d8bf8e; }
.theme-lit[data-mood="nuit"]  { --bg: #0b0e15; --accent: #8fb0e8; }
.theme-lit[data-mood="noir"]  { --bg: #04060a; --accent: #b9c6e0; }

/* ---------- Ouverture ---------- */
.theme-lit .hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; align-items: end;
  overflow: hidden; background: #050505;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }

/* Sans JavaScript, ou effets coupés : l'image est simplement visible */
.hero__base { filter: brightness(.8); }
.hero__lit { display: none; }

/* Avec effets : image presque noire, et un disque de lumière révèle la même image */
.js-fx .hero__base { filter: brightness(.07) saturate(.5); }
.js-fx .hero__lit {
  display: block; filter: brightness(2.6) contrast(1.15) saturate(.9);
  --r: 17rem;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx, 25%) var(--my, 70%), #000 0%, rgb(0 0 0 / .8) 35%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--mx, 25%) var(--my, 70%), #000 0%, rgb(0 0 0 / .8) 35%, transparent 100%);
}
@media (max-width: 40rem) { .js-fx .hero__lit { --r: 11rem; } }

.theme-lit .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(5 5 5 / .9) 0%, rgb(5 5 5 / .5) 22%, transparent 42%);
}
.js-fx .hero__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle 9rem at var(--mx2, 25%) var(--my2, 70%), rgb(210 230 255 / .55), transparent 70%);
}
.theme-lit .hero__content {
  position: relative; z-index: 1; pointer-events: none;
  width: min(100%, 76rem); margin: 0 auto;
  padding: 6rem var(--gutter) clamp(2.5rem, 8vh, 4.5rem);
}
.theme-lit .hero__content a { pointer-events: auto; }
.hero__kicker { max-width: 26em; font-style: italic; color: var(--ink); line-height: 1.5; }
.theme-lit .hero__title {
  margin-top: .5em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5rem);
  line-height: .98; letter-spacing: -.015em;
  text-shadow: 0 2px 30px rgb(0 0 0 / .9);
}
.theme-lit .hero__meta { margin-top: 1rem; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }
.theme-lit .hero__start {
  display: inline-block; margin-top: 1.5rem;
  padding: .75rem 1.2rem; border-radius: 99px;
  font-family: var(--font-ui); font-size: .95rem; font-weight: 600; text-decoration: none;
  color: #1a1208; background: var(--accent);
}
.theme-lit .hero__start:hover { background: #f0b972; }
.hero__hint { margin-top: 1rem; font-family: var(--font-ui); font-size: .8rem; color: var(--ink-muted); }
.theme-lit:not(.js-fx) .hero__hint { display: none; }
@media (hover: none) { .hero__hint { display: none; } }

/* ---------- Sommaire et titres ---------- */
.theme-lit .toc { padding-top: clamp(3rem, 8vh, 5rem); }
.theme-lit .toc a { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
.theme-lit .toc a::before { color: var(--accent); font-family: var(--font-ui); font-size: .9rem; }
.theme-lit .chapter__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); }
.theme-lit .chapter__num { color: var(--accent); }
.theme-lit .dialogue { padding-left: 0; text-indent: 0; }
.lead { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); line-height: 1.25; }

/* ---------- Voix de miel : ce qu'elle dit depuis le lit ---------- */
.honey {
  color: #f0c58a; font-style: italic;
  text-shadow: 0 0 18px rgb(224 163 92 / .35);
  letter-spacing: .01em;
}

/* ---------- Le noir : la lumière de la chambre s'éteint ---------- */
.veil {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  background: #000; opacity: 0;
  transition: opacity 1.4s ease;
}
.veil.is-dark { opacity: .72; }

/* ---------- Illustrations ---------- */
.theme-lit .illu__frame { background: #0a0908; }

/* ---------- Dernière réplique ---------- */
.last-line {
  margin-top: 4em !important;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-3); line-height: 1.12 !important;
  color: #f0c58a;
}
.js-fx .last-line { opacity: 0; transform: translateY(.3em); transition: opacity 4s ease, transform 4s ease; }
.js-fx .last-line.is-seen { opacity: 1; transform: none; }