/* =========================================================
   Thème : La Main (Guy de Maupassant, 1883)
   Un salon à la chandelle, puis la soie noire brodée d'or du
   salon de sir John, le gris froid du matin du crime, le bleu
   de la nuit. L'ouverture vacille comme une flamme ; une chaîne
   se brise au moment où l'on découvre le mur vide.
   veillee → ajaccio → salon → crime → cauchemar → coda
   ========================================================= */

@property --bg     { syntax: "<color>"; inherits: true; initial-value: #17100c; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #d4ad55; }

.theme-main {
  --bg: #17100c;
  --surface: #20160f;
  --ink: #ece3d0;
  --ink-muted: #a89d88;
  --accent: #d4ad55;           /* or des broderies */
  --accent-2: #b24a3a;         /* velours rouge */
  --font-display: "Cormorant Garamond", "Garamond", Georgia, serif;
  --font-body: "Crimson Pro", "Iowan Old Style", Georgia, serif;
  --measure: 34em;

  transition: --bg 2.4s ease, --accent 2.4s ease;
}
.theme-main[data-mood="veillee"]   { --bg: #17100c; --accent: #d4ad55; }
.theme-main[data-mood="ajaccio"]   { --bg: #0e1820; --accent: #8fbad6; }
.theme-main[data-mood="salon"]     { --bg: #090807; --accent: #d9b24c; }
.theme-main[data-mood="crime"]     { --bg: #12151a; --accent: #b9bfcc; }
.theme-main[data-mood="cauchemar"] { --bg: #070b15; --accent: #7d92c4; }
.theme-main[data-mood="coda"]      { --bg: #17100c; --accent: #d4ad55; }

/* Le corps du texte : Crimson Pro est plus petit que ses voisines, on compense */
.theme-main .chapter { font-size: calc(var(--step-0) * var(--reader-scale) * 1.1); }

/* ---------- Ouverture ---------- */
.theme-main .hero {
  position: relative; isolation: isolate;
  min-height: 100svh; display: grid; align-items: end;
  overflow: hidden; background: #0b0705;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; filter: brightness(.82) saturate(.95); }
/* Les chandeliers sont en haut à gauche : un halo qui vacille doucement */
.hero__candles {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at 7% 16%, rgb(255 188 92 / .42), transparent 26%),
              radial-gradient(circle at 26% 22%, rgb(255 188 92 / .18), transparent 20%);
  animation: candle 5.5s infinite;
}
@keyframes candle {
  0%, 100% { opacity: .9; } 14% { opacity: .75; } 31% { opacity: 1; } 47% { opacity: .82; }
  63% { opacity: .98; } 80% { opacity: .78; }
}
.theme-main .hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(11 7 5 / .96) 0%, rgb(11 7 5 / .6) 30%, transparent 58%);
}
.theme-main .hero__content {
  position: relative; z-index: 1;
  width: min(100%, 76rem); margin: 0 auto;
  padding: 6rem var(--gutter) clamp(2.5rem, 8vh, 4.5rem);
}
.theme-main .hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.4rem, 1.6rem + 7vw, 7rem); line-height: .9; letter-spacing: -.01em;
  color: #f0dfb4; text-shadow: 0 2px 28px rgb(0 0 0 / .85);
}
.theme-main .hero__subtitle { margin-top: .8rem; font-style: italic; font-size: var(--step-1); }
.theme-main .hero__meta { margin-top: .8rem; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }
.theme-main .hero__start {
  display: inline-block; margin-top: 1.4rem;
  padding: .75rem 1.25rem; border-radius: 2px;
  font-family: var(--font-ui); font-size: .95rem; font-weight: 600; text-decoration: none;
  color: #1a1208; background: var(--accent);
}
.theme-main .hero__start:hover { background: #ecc872; }

/* ---------- Sommaire et titres ---------- */
.theme-main .toc { padding-top: clamp(3rem, 8vh, 5rem); }
.theme-main .toc a { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; }
.theme-main .toc a::before { color: var(--accent); font-family: var(--font-ui); font-size: .9rem; }
.theme-main .chapter__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem); line-height: 1; }
.theme-main .chapter__num { color: var(--accent); }
.theme-main .chapter__title::after {
  content: ""; display: block; width: 3.2rem; height: 2px; margin-top: .9rem;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.lead { font-size: var(--step-1); line-height: 1.55 !important; }
.theme-main .dialogue { padding-left: 1.2em; text-indent: -1.2em; }

/* ---------- Sir John : un français plein d'accent ---------- */
.milord { font-style: italic; color: #f0d79a; }

/* ---------- Déposition du domestique ---------- */
.depo { padding-left: 1.1rem; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); }

/* ---------- Illustrations ---------- */
.theme-main .illu__frame { background: #0a0807; }
.theme-main .illu--mid { max-width: 32rem; margin-inline: auto !important; }
.theme-main .illu--engraving { max-width: 17rem; margin-inline: auto !important; }
.theme-main .illu--engraving .illu__frame {
  padding: .8rem; background: #e7dcc2; border-radius: 2px;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / .8);
}
.theme-main .illu--engraving .illu__frame img { object-fit: contain; max-height: none; mix-blend-mode: multiply; }

/* ---------- La chaîne qui se brise ---------- */
.chain {
  display: flex; justify-content: center; gap: 0;
  margin-block: 2.2rem !important; height: 1.4rem;
  transition: gap 1.8s cubic-bezier(.3, .8, .3, 1);
}
.chain span {
  flex: 1; height: 100%; max-width: 12rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='22' viewBox='0 0 40 22'%3E%3Crect x='2' y='3' width='24' height='16' rx='8' fill='none' stroke='%23b08d3c' stroke-width='2.4'/%3E%3Crect x='18' y='8' width='20' height='6' rx='3' fill='none' stroke='%238a6d2d' stroke-width='2.4'/%3E%3C/svg%3E") repeat-x center / 40px 22px;
  transition: transform 1.8s cubic-bezier(.3, .8, .3, 1);
}
.chain span:first-child { transform-origin: right center; }
.chain span:last-child  { transform-origin: left center; }
.chain.is-seen { gap: 3.6rem; }
.chain.is-seen span:first-child { transform: rotate(-6deg) translateY(.15rem); }
.chain.is-seen span:last-child  { transform: rotate(7deg) translateY(.3rem); }

/* ---------- L'index manquait ---------- */
.sting {
  margin-top: 2.2em !important;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-3); line-height: 1.1 !important; color: #f0dfb4;
}
.js-fx .sting { opacity: 0; transform: translateY(.3em); transition: opacity 3.2s ease, transform 3.2s ease; }
.js-fx .sting.is-seen { opacity: 1; transform: none; }

.date-line { margin-top: 2.5em !important; text-align: right; font-family: var(--font-display); font-style: italic; color: var(--ink-muted); }

/* Sans effets : une ouverture fixe */
.fx-off .hero__candles { animation: none; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .hero__candles { animation: none; opacity: .9; } }

/* Petit écran : le panorama du crime garde une hauteur lisible (recadré sur le salon) */
@media (max-width: 40rem) {
  .theme-main .illu--wide .illu__frame img { min-height: 12rem; object-fit: cover; object-position: 38% 50%; }
}