:root {
  --ink: #163642;
  --ink-soft: #315563;
  --paper: rgba(247, 249, 245, 0.82);
  --paper-strong: rgba(250, 252, 249, 0.94);
  --accent: #a33f62;
  --accent-deep: #743049;
  --gold: #c28c44;
  --line: rgba(22, 54, 66, 0.16);
  --shadow: 0 28px 90px rgba(11, 31, 38, 0.28);
  --ease: cubic-bezier(.22, .8, .28, 1);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  padding: clamp(12px, 3vw, 40px);
  display: grid;
  place-items: center;
  overflow-x: hidden;
  color: var(--ink);
  background: #294c46;
  font-family: Georgia, "Times New Roman", serif;
}

button, input { font: inherit; }

.background {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(135deg, rgba(9, 36, 43, .32), rgba(53, 67, 50, .14)),
    url("../assets/images/bamboo.webp") center / cover no-repeat;
  transform: scale(1.03);
}

.background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 244, 210, .28), transparent 36%),
    linear-gradient(to bottom, rgba(14, 35, 39, .06), rgba(14, 35, 39, .30));
  backdrop-filter: blur(1.2px);
}

.book {
  position: relative;
  width: min(940px, 100%);
  min-height: min(820px, calc(100vh - 32px));
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: clamp(18px, 3vw, 32px);
  background:
    linear-gradient(110deg, rgba(255,255,255,.20), transparent 42%),
    var(--paper);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.70);
  backdrop-filter: blur(18px) saturate(1.05);
}

.book::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.book-header,
.chapter-progress,
.pages,
.book-nav,
.mini-player { position: relative; z-index: 3; }

.book-header {
  padding: clamp(30px, 5vw, 52px) clamp(24px, 6vw, 72px) 18px;
  text-align: center;
}

.book-overline,
.page-kicker {
  margin: 0 0 8px;
  color: var(--accent-deep);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .73rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.book-header h1 {
  margin: 0;
  color: #123747;
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  text-wrap: balance;
}

.book-subtitle {
  margin: 13px 0 0;
  color: var(--ink-soft);
  font-size: clamp(.95rem, 2vw, 1.1rem);
}

.book-subtitle span,
.closing span,
.last-line span { color: var(--accent); }

.chapter-progress {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(24px, 6vw, 72px) 18px;
}

.progress-track {
  flex: 1;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transition: width .65s var(--ease);
}

.page-dots { display: flex; gap: 7px; }

.page-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(22, 54, 66, .23);
  transition: transform .3s var(--ease), background .3s ease, box-shadow .3s ease;
}

.page-dot:hover { transform: scale(1.28); }

.page-dot[aria-current="step"] {
  transform: scale(1.25);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(163, 63, 98, .12);
}

.pages {
  height: 480px;
  min-height: 360px;
  margin: 0 clamp(16px, 4vw, 46px);
  transition: height .58s var(--ease);
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: none;
  overflow: visible;
  padding: clamp(22px, 4vw, 42px) clamp(20px, 5vw, 58px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(52px) scale(.985);
  border: 1px solid rgba(255,255,255,.58);
  border-radius: clamp(14px, 2vw, 22px);
  background:
    radial-gradient(circle at 10% 0, rgba(255,255,255,.52), transparent 34%),
    rgba(210, 231, 231, .55);
  box-shadow: 0 16px 42px rgba(32, 69, 74, .10), inset 0 1px rgba(255,255,255,.75);
  transition:
    opacity .46s ease,
    transform .58s var(--ease),
    visibility 0s linear .58s;
}

.page.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  transition-delay: 0s;
}

.page.from-left { transform: translateX(-52px) scale(.985); }
.page.exit-left { transform: translateX(-58px) scale(.982); }
.page.exit-right { transform: translateX(58px) scale(.982); }

.page-title {
  max-width: 760px;
  margin: 0 auto 22px;
  color: #163f50;
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  font-weight: 500;
  line-height: 1.18;
  text-align: center;
  text-wrap: balance;
}

.page-kicker { text-align: center; }

.page-text {
  max-width: 760px;
  margin: 0 auto;
  color: #173944;
  font-size: clamp(1rem, 1.7vw, 1.08rem);
  line-height: 1.76;
}

.page-text p { margin: 0 0 14px; }
.page-text p:last-child { margin-bottom: 0; }

.page-text h3 {
  margin: 25px 0 8px;
  color: var(--accent-deep);
  font-size: 1.03rem;
  letter-spacing: .02em;
}

.page-text blockquote {
  display: grid;
  gap: 2px;
  margin: 26px auto 0;
  padding: 18px 24px;
  border-top: 1px solid rgba(163, 63, 98, .25);
  border-bottom: 1px solid rgba(163, 63, 98, .25);
  color: var(--accent-deep);
  font-size: clamp(1.03rem, 2.2vw, 1.2rem);
  font-style: italic;
  line-height: 1.55;
  text-align: center;
}

.page.is-active .page-kicker,
.page.is-active .page-title,
.page.is-active .page-text > * {
  animation: reveal-copy .72s both var(--ease);
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes reveal-copy {
  from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.thanks-rhythm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 18px 0;
}

.thanks-rhythm span {
  padding: 8px 12px;
  border-left: 2px solid rgba(163, 63, 98, .42);
  background: rgba(255,255,255,.28);
}

.signature {
  display: grid;
  justify-items: end;
  gap: 2px;
  margin: 28px 0 18px !important;
  color: var(--accent-deep);
  text-align: right;
}

.signature strong {
  font-size: 1.4rem;
  font-weight: 500;
}

.closing {
  color: var(--accent-deep);
  font-size: 1.05rem;
  font-style: italic;
  text-align: right;
}

.final-message { text-align: center; }

.final-chapter {
  margin-top: 28px !important;
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  line-height: 1.45;
}

.final-chapter strong {
  color: var(--accent-deep);
  font-size: 1.13em;
  font-weight: 500;
}

.last-line {
  margin-top: 24px !important;
  color: var(--ink-soft);
  font-size: .98rem;
}

.audio-card {
  margin-top: 24px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 20px;
  background: rgba(255,255,255,.38);
  box-shadow: 0 14px 35px rgba(24, 61, 70, .12);
}

.music-button {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #1e5a6b, #8b3b5a);
  box-shadow: 0 12px 30px rgba(46, 61, 74, .20);
  text-align: left;
  transition: transform .25s var(--ease), box-shadow .25s ease, filter .25s ease;
}

.music-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(46, 61, 74, .28);
  filter: saturate(1.08);
}

.music-button:focus-visible,
.nav-button:focus-visible,
.page-dot:focus-visible,
.mini-player:focus-visible,
#audioSeek:focus-visible {
  outline: 3px solid rgba(194, 140, 68, .62);
  outline-offset: 3px;
}

.play-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.music-button-copy { display: grid; gap: 2px; }
.music-button-copy strong { font-size: .98rem; }
.music-button-copy small { color: rgba(255,255,255,.78); font: 500 .72rem/1.3 ui-sans-serif, system-ui, sans-serif; }

.equalizer {
  height: 28px;
  display: flex;
  align-items: end;
  gap: 3px;
}

.equalizer i {
  width: 3px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  transform-origin: bottom;
}

.audio-card.is-playing .equalizer i { animation: equalize .7s ease-in-out infinite alternate; }
.audio-card.is-playing .equalizer i:nth-child(2) { animation-delay: -.38s; }
.audio-card.is-playing .equalizer i:nth-child(3) { animation-delay: -.62s; }
.audio-card.is-playing .equalizer i:nth-child(4) { animation-delay: -.18s; }

@keyframes equalize { to { height: 27px; } }

.audio-timeline {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 3px;
  color: var(--ink-soft);
  font: 650 .73rem/1 ui-sans-serif, system-ui, sans-serif;
}

.audio-timeline:not([hidden]) { display: grid; }

#audioSeek {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

.book-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 22px clamp(24px, 6vw, 72px) 32px;
}

.book-nav-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.nav-button {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid rgba(22, 54, 66, .18);
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  background: rgba(255,255,255,.45);
  box-shadow: 0 8px 20px rgba(26, 53, 62, .08);
  font: 720 .75rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
  transition: transform .2s var(--ease), background .2s ease, opacity .2s ease;
}

.nav-button.next { justify-self: end; }
.nav-button:hover:not(:disabled) { transform: translateY(-2px); background: rgba(255,255,255,.76); }
.nav-button:disabled { opacity: .34; cursor: default; box-shadow: none; }

.page-info {
  margin: 0;
  color: var(--ink-soft);
  font: 650 .76rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.mini-player {
  position: static;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  background: rgba(25, 67, 76, .88);
  box-shadow: 0 12px 30px rgba(8, 32, 38, .25);
  backdrop-filter: blur(10px);
  font: 650 .78rem/1 ui-sans-serif, system-ui, sans-serif;
}

.mini-player[hidden] { display: none; }
.mini-player-state { font-size: .7rem; }

.effects-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.effect-particle {
  position: absolute;
  will-change: transform, opacity;
  user-select: none;
}

/* Page 1: poussière dorée et petites feuilles, comme un livre qu'on ouvre. */
.effect-welcome {
  color: rgba(153, 106, 48, .68);
  animation: welcome-drift var(--duration, 6s) var(--delay, 0s) both ease-in-out;
}

@keyframes welcome-drift {
  0% { opacity: 0; transform: translate3d(0, 28px, 0) rotate(0deg) scale(.6); }
  20% { opacity: .75; }
  80% { opacity: .54; }
  100% { opacity: 0; transform: translate3d(var(--drift, 28px), -180px, 0) rotate(160deg) scale(1.05); }
}

/* Page 2: constellation de rencontres. */
.connection-scene {
  position: absolute;
  inset: 16% 5% 12%;
  opacity: .56;
}

.connection-scene svg { width: 100%; height: 100%; overflow: visible; }
.connection-line {
  fill: none;
  stroke: rgba(39, 105, 116, .35);
  stroke-width: 1.2;
  stroke-dasharray: 7 8;
  animation: draw-connection 7s linear infinite;
}

.connection-node {
  fill: rgba(163, 63, 98, .76);
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 2.6s ease-in-out infinite;
  animation-delay: var(--delay);
}

@keyframes draw-connection { to { stroke-dashoffset: -120; } }
@keyframes node-pulse { 50% { opacity: .35; transform: scale(.65); } }

/* Page 3: cœurs légers, plus doux qu'une pluie uniforme. */
.effect-heart {
  color: var(--heart-color, #a33f62);
  text-shadow: 0 4px 12px rgba(80, 31, 49, .13);
  animation: heart-flight var(--duration, 4.6s) var(--delay, 0s) both var(--ease);
}

@keyframes heart-flight {
  0% { opacity: 0; transform: translate3d(0, 40px, 0) rotate(-12deg) scale(.55); }
  18% { opacity: .72; }
  72% { opacity: .68; }
  100% { opacity: 0; transform: translate3d(var(--drift, 35px), -340px, 0) rotate(18deg) scale(1.1); }
}

/* Page 4: notes colorées; l'émission cesse quand la musique démarre. */
.effect-note {
  color: var(--note-color);
  font-family: Georgia, serif;
  font-weight: 700;
  text-shadow: 0 5px 15px rgba(22, 54, 66, .14);
  animation: note-dance var(--duration, 4.2s) var(--delay, 0s) both ease-in-out;
}

@keyframes note-dance {
  0% { opacity: 0; transform: translate3d(0, 30px, 0) rotate(-16deg) scale(.55); }
  18% { opacity: .86; }
  48% { transform: translate3d(var(--sway, 22px), -80px, 0) rotate(12deg) scale(1.12); }
  82% { opacity: .72; }
  100% { opacity: 0; transform: translate3d(calc(var(--sway, 22px) * -1), -210px, 0) rotate(-9deg) scale(.78); }
}

.effects-layer.music-is-playing .effect-note { animation-play-state: paused; opacity: 0 !important; transition: opacity .8s ease; }

/* Page 5: horizon qui s'ouvre. */
.horizon-scene {
  position: absolute;
  inset: auto -12% -13%;
  height: 48%;
  overflow: hidden;
  opacity: .72;
}

.horizon-glow {
  position: absolute;
  left: 50%;
  bottom: -70%;
  width: min(720px, 95vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 195, 108, .62), rgba(246, 213, 153, .22) 38%, transparent 68%);
  transform: translateX(-50%) scale(.45);
  animation: sunrise 4.8s both var(--ease);
}

.horizon-line {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 23%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(138, 83, 67, .45), transparent);
  transform: scaleX(0);
  animation: horizon-open 3.8s .35s both var(--ease);
}

.paper-bird {
  position: absolute;
  width: 18px;
  height: 8px;
  border-top: 2px solid rgba(73, 78, 71, .55);
  border-radius: 50%;
  opacity: 0;
  animation: bird-cross var(--duration) var(--delay) both ease-in-out;
}

.paper-bird::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 8px;
  left: 13px;
  top: -2px;
  border-top: 2px solid rgba(73, 78, 71, .55);
  border-radius: 50%;
}

@keyframes sunrise { to { transform: translateX(-50%) scale(1); } }
@keyframes horizon-open { to { transform: scaleX(1); } }
@keyframes bird-cross {
  0% { opacity: 0; transform: translate3d(-50px, 34px, 0) scale(.7); }
  18%, 76% { opacity: .65; }
  100% { opacity: 0; transform: translate3d(300px, -55px, 0) scale(1.1); }
}

/* Effets génériques pour de futures pages. */
.effect-sparkle {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(198, 145, 71, .45) 38%, transparent 72%);
  animation: sparkle var(--duration) var(--delay) both ease-in-out;
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(.2); }
  45% { opacity: .9; transform: scale(1); }
}

.effect-petal {
  width: 12px;
  height: 19px;
  border-radius: 80% 20% 70% 30%;
  background: rgba(178, 101, 123, .48);
  animation: petal-fall var(--duration) var(--delay) both linear;
}

@keyframes petal-fall {
  0% { opacity: 0; transform: translate3d(0, -30px, 0) rotate(0); }
  12% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(var(--drift), 780px, 0) rotate(480deg); }
}

@media (max-width: 720px) {
  body { padding: 8px; place-items: start center; }
  .book { min-height: calc(100vh - 16px); border-radius: 20px; }
  .book-header { padding-top: 26px; }
  .book-overline { letter-spacing: .13em; }
  .chapter-progress { gap: 12px; }
  .pages { margin-inline: 10px; }
  .page { padding: 22px 18px 26px; }
  .thanks-rhythm { grid-template-columns: 1fr; }
  .book-nav { padding-inline: 18px; gap: 8px; }
  .nav-button span:not([aria-hidden="true"]) { display: none; }
  .nav-button { width: 44px; height: 44px; justify-content: center; padding: 0; font-size: 1rem; }
  .page-info { font-size: .68rem; }
  .mini-player {
    width: 44px;
    min-height: 44px;
    justify-content: center;
    gap: 0;
    padding: 0;
  }
  .mini-player-note,
  .mini-player-label { display: none; }
  .mini-player-state { font-size: .82rem; }
  .page-dots { display: none; }
  .music-button { grid-template-columns: auto 1fr; }
  .equalizer { display: none; }
  .music-button-copy small { font-size: .67rem; }
}

@media (max-width: 430px) {
  .book-header h1 { font-size: 2.2rem; }
  .book-header { padding-inline: 16px; }
  .chapter-progress { padding-inline: 24px; }
  .page-text { line-height: 1.68; }
  .page-text blockquote { padding-inline: 8px; }
  .audio-timeline { grid-template-columns: 1fr; }
  .audio-timeline span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .effects-layer { display: none; }
}