/* Base */
html, body { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }
/* Concept : un seul ciel plein écran. Le titre au centre, six étoiles en orbite autour de lui,
     chaque étoile ouvre une section dans un voile nocturne, un bouton discret ramène au ciel. */
  :root {
    --night: #050818;
    --deep: #0b1240;
    --glow: #8fa8ff;
    --rose: #e7a6d8;
    --moon: #f3f0ff;
    --ink: #e9ecff;
    --mute: #9aa3d6;
    --veil: rgba(4, 6, 24, 0.78);
    --line: rgba(143, 168, 255, 0.22);
    --font-display: "Italiana", "Didot", "Bodoni 72", Georgia, serif;
    --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: dark;
  }
  html, body { height: 100%; }
  body {
    background: var(--night);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 300;
    overflow: hidden;
    padding-block: 0;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .stage { position: fixed; inset: 0; overflow: hidden; background: var(--night); --ox: 0px; --oy: 0px; }
  .bg {
    position: absolute; inset: -3%; background: radial-gradient(ellipse at 50% 45%, rgba(2,3,14,0) 35%, rgba(2,3,12,0.6) 100%), linear-gradient(rgba(3,5,20,0.3), rgba(3,5,20,0.3)), var(--night) url("../assets/sky.png") center / cover no-repeat;
    transform: translate(calc(var(--ox) * 0.9), calc(var(--oy) * 0.9)); will-change: transform;
  }
  #sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  /* Titre */
  .center {
    position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; text-align: center;
    pointer-events: none; padding: calc(env(safe-area-inset-top, 0px) + clamp(1.6rem, 6vh, 3.6rem)) 16px 0;
  }
  .title-wrap {
    transform: translate(calc(var(--ox) * 0.35), calc(var(--oy) * 0.35));
    animation: rise 1.6s ease-out both;
  }
  h1 {
    margin: 0; font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2rem, 5.4vw, 4.6rem); line-height: 1.08; letter-spacing: 0.02em;
    color: var(--moon); text-wrap: balance;
    text-shadow: 0 0 28px rgba(143, 168, 255, 0.55), 0 0 90px rgba(120, 90, 220, 0.35);
  }
    .lead {
    margin: 0.9rem 0 0; font-size: 0.78rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--mute);
  }
  @keyframes rise { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }

  /* Étoiles principales */
  .stars { position: absolute; inset: 0; }
  .star {
    position: absolute; left: var(--x); top: var(--y); width: 68px; height: 68px; margin: 0; padding: 0;
    border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
    display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
    transform: translate(-50%, -50%) translate(calc(var(--ox) * var(--d, 1)), calc(var(--oy) * var(--d, 1)));
    animation: appear 1.4s ease-out both; animation-delay: var(--in, 0.6s);
  }
  @keyframes appear { from { opacity: 0; } to { opacity: 1; } }
  .star > * { grid-area: 1 / 1; pointer-events: none; }
  .core {
    width: 6px; height: 6px; border-radius: 50%; background: rgba(235, 240, 255, 0.85);
    box-shadow: 0 0 5px 1px rgba(235, 240, 255, 0.55), 0 0 16px 3px rgba(143, 168, 255, 0.3);
    animation: tw var(--tw, 3s) ease-in-out infinite; animation-delay: var(--dl, 0s);
  }
  .spark {
    width: 38px; height: 38px;
    background:
      linear-gradient(90deg, transparent, rgba(235,240,255,0.5), transparent) center / 100% 1px no-repeat,
      linear-gradient(0deg, transparent, rgba(235,240,255,0.5), transparent) center / 1px 100% no-repeat;
    animation: tw var(--tw, 3s) ease-in-out infinite; animation-delay: var(--dl, 0s);
    transition: transform 0.4s ease;
  }
  .halo {
    width: 96px; height: 96px; border-radius: 50%; opacity: 0; transform: scale(0.55);
    background: radial-gradient(circle, rgba(190, 205, 255, 0.3) 0%, rgba(143, 168, 255, 0.12) 38%, transparent 68%);
    transition: opacity 0.35s ease, transform 0.45s ease;
  }
  .name {
    align-self: end; justify-self: center; transform: translateY(26px); white-space: nowrap;
    font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mute);
    transition: color 0.3s ease, text-shadow 0.3s ease;
  }
  @keyframes tw { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 0.8; transform: scale(1.05); } }
  .star:hover .halo, .star:focus-visible .halo { opacity: 1; transform: scale(1); }
  .star:hover .spark, .star:focus-visible .spark { transform: scale(1.35) rotate(45deg); }
  .star:hover .name, .star:focus-visible .name { color: var(--moon); text-shadow: 0 0 12px rgba(143, 168, 255, 0.55); }
  .star:focus-visible { outline: none; }
  .star:focus-visible .name { text-decoration: underline; text-underline-offset: 5px; }
  .star.is-burst .halo { animation: pulse 0.8s ease-out forwards; }
  .star.is-burst .core { animation: pop 0.7s ease-in forwards; }
  @keyframes pulse { 0% { opacity: 0.35; transform: scale(0.8); } 100% { opacity: 0; transform: scale(4); } }
  @keyframes pop { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.4); opacity: 0; } }
  .flash {
    position: fixed; width: 24px; height: 24px; border-radius: 50%; pointer-events: none; z-index: 20;
    left: var(--fx); top: var(--fy); margin: -12px 0 0 -12px;
    background: radial-gradient(circle, rgba(1, 2, 10, 0.96) 0%, rgba(3, 5, 20, 0.88) 38%, rgba(3, 5, 20, 0) 70%);
    animation: flash 0.95s ease-in forwards;
  }
  @keyframes flash { 0% { transform: scale(0); opacity: 0.9; } 70% { opacity: 0.9; } 100% { transform: scale(110); opacity: 0; } }

  .hint {
    position: fixed; left: 0; right: 0; text-align: center; pointer-events: none;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mute); opacity: 0.7;
    padding: 0 16px; animation: appear 2s ease-out both; animation-delay: 1.6s;
  }

  /* Bouton retour */
  .back {
    position: fixed; z-index: 30;
    top: calc(env(safe-area-inset-top, 0px) + 14px); left: max(16px, env(safe-area-inset-left, 0px));
    display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.95rem;
    font: inherit; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--ink); background: rgba(8, 12, 40, 0.55); border: 1px solid var(--line); border-radius: 999px;
    cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .back:hover { background: rgba(30, 40, 110, 0.6); border-color: rgba(190, 205, 255, 0.5); box-shadow: 0 0 22px rgba(143, 168, 255, 0.35); }
  .back:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

  /* Sections */
  .panel {
    position: fixed; inset: 0; z-index: 10; overflow-y: auto; opacity: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(40, 50, 140, 0.35), transparent 60%), var(--veil);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    transition: opacity 0.5s ease;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .panel.on { opacity: 1; }
  .panel-inner {
    max-width: 40rem; margin: 0 auto; min-width: 0;
    padding-block: calc(env(safe-area-inset-top, 0px) + 5.5rem) calc(env(safe-area-inset-bottom, 0px) + 4rem);
  }
  .eyebrow { margin: 0; font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--glow); }
  .panel h2 {
    margin: 0.6rem 0 0; font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1.05; color: var(--moon); text-wrap: balance;
    text-shadow: 0 0 30px rgba(143, 168, 255, 0.4);
  }
  .panel .sub { margin: 1rem 0 0; font-size: 1.12rem; line-height: 1.6; color: var(--mute); max-width: 36rem; }
  .panel p { line-height: 1.75; font-size: 1.02rem; max-width: 65ch; }
  .panel blockquote {
    margin: 2.2rem 0; padding: 0 0 0 1.4rem; border-left: 1px solid var(--line);
    font-style: italic; font-size: 1.12rem; line-height: 1.85; max-width: 60ch;
  }
  .panel blockquote footer { margin-top: 1rem; font-style: normal; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
  .panel ul.items { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
  .panel ul.items li { padding: 1.1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.25rem; }
  .panel ul.items strong { font-weight: 500; color: var(--moon); font-size: 1.05rem; }
  .panel ul.items span { color: var(--mute); line-height: 1.6; }
  .note { margin-top: 3rem; font-size: 0.78rem; color: var(--mute); opacity: 0.7; }

  .moon-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.8rem 2.4rem; margin-top: 2.2rem; }
  .moon-row canvas { width: 120px; height: 120px; flex: none; filter: drop-shadow(0 0 26px rgba(143, 168, 255, 0.45)); }
  .moon-facts { display: grid; gap: 0.9rem; min-width: 0; }
  .moon-facts div { display: grid; gap: 0.1rem; }
  .moon-facts dt { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mute); }
  .moon-facts dd { margin: 0; font-size: 1.25rem; color: var(--moon); font-variant-numeric: tabular-nums; }
  dl.moon-facts { margin-block: 0; }

  .jumps { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
  .jumps button {
    font: inherit; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); cursor: pointer;
    background: rgba(20, 28, 90, 0.4); border: 1px solid var(--line); border-radius: 999px; padding: 0.6rem 1.05rem;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
  }
  .jumps button:hover { background: rgba(40, 55, 150, 0.5); border-color: rgba(190, 205, 255, 0.5); box-shadow: 0 0 20px rgba(143, 168, 255, 0.35); }
  .jumps button:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

  @media (max-width: 600px) {
    .star { width: 60px; height: 60px; }
    .name { font-size: 0.6rem; letter-spacing: 0.2em; }
    .star:nth-child(1) { --x: 14% !important; --y: 36% !important; }
    .star:nth-child(2) { --x: 86% !important; --y: 40% !important; }
    .star:nth-child(3) { --x: 20% !important; --y: 62% !important; }
    .star:nth-child(4) { --x: 58% !important; --y: 54% !important; }
    .star:nth-child(5) { --x: 82% !important; --y: 72% !important; }
    .star:nth-child(6) { --x: 36% !important; --y: 86% !important; }
    .lead { letter-spacing: 0.24em; font-size: 0.68rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }

/* ===== Page Music ===== */
.scene { position: fixed; inset: 0; z-index: 10; overflow: hidden; background: #03030c; opacity: 0; transition: opacity 0.7s ease; }
.scene.on { opacity: 1; }

/* boîte à la taille exacte de l'image (mode "cover"), tout est placé en % dedans */
/* arrivée : le ciel émerge du noir en reculant légèrement (caméra qui se pose) */
.scene-art {
  position: absolute; left: 50%; top: 50%; width: max(100vw, 177.69vh); height: max(100vh, 56.28vw);
  opacity: 0; transform: translate(-50%, -50%) scale(1.06);
  transition: opacity 0.6s ease, transform 0.9s ease;
}
.scene.on .scene-art {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  transition: opacity 1.5s ease 0.8s, transform 4s cubic-bezier(0.16, 0.8, 0.2, 1) 0.4s;
}
.scene-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }

/* zone "ciel" : le contour exclut la table, la platine et les pochettes */
.sky-clip { position: absolute; inset: 0; clip-path: polygon(0% 0%, 100% 0%, 100% 58.8%, 85.2% 58.8%, 85.2% 67%, 71.5% 67%, 71.5% 61.6%, 67.8% 61.6%, 67.8% 53.4%, 56% 53.4%, 56% 58.2%, 29.2% 58.2%, 29.2% 67%, 13.8% 67%, 13.8% 37%, 0% 37%); }
/* le ciel suit le curseur */
.sky-move { position: absolute; inset: 0; transform: translate(calc(var(--mx, 0) * -9px), calc(var(--my, 0) * -6px)); will-change: transform; }
/* rotation très lente du ciel autour de la galaxie */
.sky-turn { position: absolute; inset: 0; transform-origin: 52% 41.4%; animation: skyturn 90s ease-in-out infinite alternate; }
@keyframes skyturn { from { transform: rotate(-0.8deg); } to { transform: rotate(0.8deg); } }

/* petites étoiles qui s'allument et s'éteignent (elles apparaissent après le ciel) */
.twinkles { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.scene.on .twinkles { opacity: 1; transition: opacity 2.4s ease 1.5s; }
.tw { position: absolute; border-radius: 50%; background: rgba(235, 240, 255, 0.95); box-shadow: 0 0 6px 1px rgba(190, 205, 255, 0.55); animation: twk var(--t, 4s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes twk { 0%, 100% { opacity: 0.08; transform: scale(0.6); } 50% { opacity: 0.95; transform: scale(1.15); } }

/* étoiles filantes */
.meteor { position: absolute; left: var(--x); top: var(--y); width: 130px; height: 1.5px; border-radius: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 230, 0.95));
  animation: meteor var(--c, 12s) linear infinite; animation-delay: var(--dl, 0s); }
@keyframes meteor {
  0%   { opacity: 0; transform: rotate(var(--r)) translateX(0); }
  2%   { opacity: 1; }
  12%  { opacity: 0; transform: rotate(var(--r)) translateX(520px); }
  100% { opacity: 0; transform: rotate(var(--r)) translateX(520px); }
}

/* pénombre sur la table : se lève après le ciel */
.dim {
  position: absolute; inset: 0; pointer-events: none; opacity: 1;
  background: linear-gradient(to bottom, rgba(2, 3, 12, 0) 42%, rgba(2, 3, 12, 0.9) 62%, rgba(2, 3, 12, 0.97) 100%);
  transition: opacity 0.5s ease;
}
.scene.on .dim { opacity: 0; transition: opacity 2.2s ease 1.9s; }

/* lumière chaude qui monte sur la table et la platine */
.lamp {
  position: absolute; left: 0; right: 0; top: 50%; bottom: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(ellipse 55% 60% at 50% 75%, rgba(255, 150, 70, 0.3), transparent 70%);
}
.scene.on .lamp { animation: lampup 3.2s ease 2s both; }
@keyframes lampup { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0.4; } }

@media (prefers-reduced-motion: reduce) {
  .scene-art, .dim, .twinkles { transition-delay: 0s !important; }
  .lamp { animation-delay: 0s !important; }
}
/* ===== Livre : « pourquoi ce son » (page Music) ===== */
/* zone cliquable sur la pile de livres à droite (en % de l'image) */
.book-hit { position: absolute; left: 85.6%; top: 59.6%; width: 14.4%; height: 15.4%; padding: 0; border: 0; background: none; cursor: pointer; z-index: 3; -webkit-tap-highlight-color: transparent; }
.book-hit::before { content: ""; position: absolute; inset: -14% -10%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; background: radial-gradient(closest-side, rgba(185, 145, 255, 0.5), transparent 78%); animation: bookhint 5s ease-in-out infinite; transition: opacity 0.4s ease; }
@keyframes bookhint { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.3; } }
.book-hit:hover::before, .book-hit:focus-visible::before { animation: none; opacity: 0.95; }
.book-hit:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; border-radius: 6px; }

/* le livre : l'image assets/book.png en plein écran, tout est placé en % de cette image */
.book-overlay {
  --sw: max(100vw, 177.69vh);                    /* largeur de l'image (mode "cover") */
  --font-book: "Cormorant Garamond", "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  position: absolute; inset: 0; z-index: 300; background: #02020a; overflow: hidden;
    opacity: 0; transition: opacity 0.7s ease; pointer-events: auto;
}
.book-overlay.on { opacity: 1; }
.book-stage { position: absolute; left: 50%; top: 50%; width: var(--sw); height: calc(var(--sw) / 1.7768); transform: translate(-50%, -50%) scale(1.03); transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.book-overlay.on .book-stage { transform: translate(-50%, -50%); }
.book-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.book { position: absolute; inset: 0; perspective: calc(var(--sw) * 1.5); pointer-events: none; }

/* emplacement des deux pages sur l'image */
.paper { position: absolute; color: #e9dfcf; font-family: var(--font-book); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.pg-l { left: 24.2%; top: 8.93%; width: 26.1%; height: 54.2%; }
.pg-r { left: 50.24%; top: 8.93%; width: 25.24%; height: 54.2%; }

/* page qui se tourne : elle reprend la texture de l'image, découpée à la forme de la page */
.leaf { position: absolute; top: 8.93%; height: 54.2%; z-index: 5; transform-style: preserve-3d; transition: transform 0.95s cubic-bezier(0.45, 0.05, 0.25, 1); }
.leaf.fwd { left: 50.24%; width: 25.24%; transform-origin: left center; }
.leaf.fwd.go { transform: rotateY(-180deg); }
.leaf.bwd { left: 24.2%; width: 26.1%; transform-origin: right center; }
.leaf.bwd.go { transform: rotateY(180deg); }
.leaf .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-image: url("../assets/book.png"); background-repeat: no-repeat; }
.leaf .face.back { transform: rotateY(180deg); }
.leaf .face.r { background-size: 396.2% 184.5%; background-position: 67.2% 19.5%; clip-path: polygon(0.7% 5.1%, 14.2% 1.2%, 89.6% 0.4%, 99.1% 94.9%, 61.6% 96.9%, 1.2% 99.6%); }
.leaf .face.l { background-size: 383.1% 184.5%; background-position: 32.7% 19.5%; clip-path: polygon(11.4% 0.8%, 85.8% 1.6%, 99.1% 5.5%, 99.1% 99.6%, 67.5% 97.3%, 1.6% 94.9%); }

/* contenu des pages */
.pg-in { pointer-events: auto; position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transition: opacity 0.8s ease 0.5s; }
.book-overlay.on .pg-in { opacity: 1; }
.paper.l .pg-in { left: 20.6%; width: 76.4%; top: 9.4%; bottom: 8%; }
.paper.r .pg-in { left: 15.6%; width: 59.5%; top: 12.9%; height: 77.5%; }
.pg-artist { margin: 0; font-size: calc(var(--sw) * 0.0175); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #efe6d6; line-height: 1.1; }
.pg-title { margin: 0.35em 0 0; font-size: calc(var(--sw) * 0.0125); font-weight: 400; color: #d6c9b4; line-height: 1.2; }
.pg-cover { margin-top: calc(var(--sw) * 0.011); width: calc(var(--sw) * 0.154); aspect-ratio: 1; flex: none; background: #14101c; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.pg-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-ph { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(233, 223, 207, 0.4); }
.pg-ph svg { width: 40%; height: auto; }
.pg-head { margin: 0; font-size: calc(var(--sw) * 0.0075); letter-spacing: 0.32em; text-transform: uppercase; color: #e6dac6; }
.pg-rule { width: 100%; height: 1px; flex: none; margin: 0.9em 0 1.6em; background: linear-gradient(to right, transparent, rgba(233, 223, 207, 0.55), transparent); }
.pg-text { flex: 1; min-height: 0; width: 100%; overflow-y: auto; text-align: left; font-size: calc(var(--sw) * 0.0102); line-height: 1.75; color: #e6dccb; scrollbar-width: thin; scrollbar-color: rgba(200, 180, 255, 0.35) transparent; }
.pg-text p { margin: 0 0 0.9em; }
.pg-text .pg-empty { opacity: 0.45; font-style: italic; }

.book-count { position: absolute; left: 39.35%; top: 66.1%; width: 22.1%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: 1rem; font-family: var(--font-book); font-size: calc(var(--sw) * 0.0105); letter-spacing: 0.1em; color: #e9dfcf; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); font-variant-numeric: tabular-nums; }
.book-count::before, .book-count::after { content: ""; flex: 1; height: 1px; background: rgba(233, 223, 207, 0.5); }

.book-nav { position: absolute; top: 36.1%; width: 2.2%; transform: translateY(-50%); padding: 0; border: 0; background: none; color: #fff; opacity: 0.9; cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7)); -webkit-tap-highlight-color: transparent; }
.book-nav svg { width: 100%; height: auto; display: block; }
.book-nav.prev { left: 18.5%; }
.book-nav.next { left: 79.5%; }
.book-nav:hover { opacity: 1; transform: translateY(-50%) scale(1.12); }
.book-nav:disabled { opacity: 0.15; cursor: default; transform: translateY(-50%); }
.book-close { position: absolute; left: 79.3%; top: 10.1%; width: 3%; aspect-ratio: 1; min-width: 40px; transform: translate(-50%, -50%); padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(10, 8, 30, 0.5); color: #fff; cursor: pointer; transition: background 0.3s ease, box-shadow 0.3s ease; }
.book-close svg { width: 46%; height: 46%; }
.book-close:hover { background: rgba(60, 40, 140, 0.55); box-shadow: 0 0 22px rgba(160, 120, 255, 0.5); }
.book-nav:focus-visible, .book-close:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }


/* ===== Page Constellation ===== */
.const {
  --font-story: "Cormorant Garamond", "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  position: fixed; inset: 0; z-index: 10; overflow-y: auto; overflow-x: hidden; background: #03030c;
  opacity: 0; transition: opacity 0.9s ease; color: #f1ecde; scroll-behavior: smooth;
}
.const.on { opacity: 1; }
.const-bg {                                            /* galaxie en plein écran, fixe pendant le défilement */
  position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(3, 5, 20, 0.34), rgba(3, 5, 20, 0.5)), #050818 url("../assets/constellation.png") center / cover no-repeat;
}
.const-inner { position: relative; max-width: 1500px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 4.5rem) max(5vw, 16px) 0; }

/* trois lignes : constellation à gauche (25 %), histoire à droite (70 %) */
.c-row { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10vh 0 6vh; }
.c-fig { width: min(560px, 90%); margin: 0 auto; opacity: 0; transition: opacity 1.8s ease; }
.c-svg svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 3px rgba(140, 160, 255, 0.35)); }
.c-name { margin-top: 0.7rem; text-align: center; font-size: 0.7rem; letter-spacing: 0.26em; color: #c9cff0; text-transform: uppercase; line-height: 1.6; }


.c-line { fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.c-line.c-glow { stroke-width: 3.6; opacity: 0.4; }
.c-row.in .c-line { animation: cdraw 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes cdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.c-dot { fill: #f4f6ff; }
.c-star { transform-box: fill-box; transform-origin: center; animation: ctw var(--tw, 3.5s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes ctw { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.06); } }

/* petites étoiles de fond (derrière le texte et les constellations) */
.c-twinkles { position: absolute; inset: 0; opacity: 0.75; pointer-events: none; }

.c-story { max-width: 40rem; margin: 2.2rem auto 0; font-family: var(--font-story); opacity: 0; transform: translateY(8px); transition: opacity 1.6s ease 0.5s, transform 1.6s ease 0.5s; text-shadow: 0 0 14px rgba(3, 5, 20, 0.95), 0 1px 3px rgba(3, 5, 20, 0.85); }
.c-row.in .c-fig { opacity: 1; }
.c-row.in .c-story { opacity: 1; transform: none; }
.c-title { margin: 0 0 0.7rem; font-family: var(--font-display); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.34em; color: var(--glow); }
.c-story p { margin: 0 0 0.7em; font-size: clamp(1rem, 1.18vw, 1.22rem); line-height: 1.7; color: #f1ecde; }
.c-story .c-quote { margin: 1em 0 0; font-style: italic; font-size: clamp(1.05rem, 1.28vw, 1.32rem); color: #fff8e6; }

/* petite transition verticale, puis la conclusion */
.c-more { width: 1px; height: 90px; margin: 5vh auto 0; background: linear-gradient(to bottom, transparent, rgba(195, 208, 255, 0.6)); animation: cmore 4.5s ease-in-out infinite; }
@keyframes cmore { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } }
.c-end { min-height: 100vh; display: grid; place-items: center; padding: 14vh 0 22vh; text-align: center; opacity: 0; transition: opacity 2s ease; }
.c-end.in { opacity: 1; }
.c-end-in { max-width: 34rem; font-family: var(--font-story); text-shadow: 0 0 16px rgba(3, 5, 20, 0.95), 0 1px 3px rgba(3, 5, 20, 0.85); }
.c-end h2 { margin: 0 0 3.2rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.15; color: var(--moon); text-shadow: 0 0 30px rgba(143, 168, 255, 0.45); }
.c-end p { margin: 0 0 1.6em; font-size: clamp(1.08rem, 1.3vw, 1.3rem); line-height: 2; color: #f1ecde; }

@media (max-width: 800px) {
  .c-row { padding: 7vh 0 4vh; }
  .c-fig { width: min(94%, 420px); }
  .c-end { padding: 10vh 0 16vh; }
}
/* ===== Page Cinéma (étoile test) ===== */
/* faisceaux des projecteurs : ils s'allument en clignotant */
.cine-beam { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; }
.cine-beam.l { background: linear-gradient(135deg, rgba(255, 205, 140, 0.4), transparent 60%); clip-path: polygon(1% 1.5%, 2.6% 3%, 34% 38%, 12% 30%); }
.cine-beam.r { background: linear-gradient(225deg, rgba(255, 205, 140, 0.4), transparent 60%); clip-path: polygon(99% 1.5%, 97.4% 3%, 66% 38%, 88% 30%); }
.scene.on .cine-beam { animation: cinebeam 2.2s ease 2s both; }
@keyframes cinebeam { 0% { opacity: 0; } 8% { opacity: 0.9; } 14% { opacity: 0.2; } 22% { opacity: 1; } 30% { opacity: 0.5; } 40%, 100% { opacity: 0.75; } }

/* l'écran (le rectangle de l'image) */
.cine-screen { position: absolute; left: 14.1%; top: 14.9%; width: 71.8%; height: 59.3%; display: grid; place-items: center; background: #000; border-radius: 8px; overflow: hidden; }
.cine-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 45%, rgba(130, 120, 255, 0.3), rgba(8, 6, 28, 0.95) 78%); }
.scene.on .cine-screen::before { animation: cineon 1.8s ease 3.4s both; }
.scene.on .cine-screen { animation: cineglow 2.4s ease 3.4s both; }
@keyframes cineon { 0% { opacity: 0; } 10% { opacity: 1; } 18% { opacity: 0.15; } 30% { opacity: 0.9; } 40% { opacity: 0.4; } 60%, 100% { opacity: 1; } }
@keyframes cineglow { from { box-shadow: 0 0 0 rgba(160, 140, 255, 0); } to { box-shadow: 0 0 60px 6px rgba(150, 130, 255, 0.35); } }

/* la vidéo */
.cine-frame { position: absolute; inset: 0; display: grid; place-items: center; }
.cine-frame iframe, .cine-frame video { height: 100%; aspect-ratio: 16 / 9; max-width: 100%; border: 0; background: #000; }

/* bouton lecture, il apparaît quand l'écran est allumé */
.cine-play {
  position: relative; z-index: 2; width: 76px; height: 76px; padding: 0; display: grid; place-items: center; opacity: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(20, 14, 60, 0.5); color: #fff; cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.cine-play svg { width: 34%; height: 34%; margin-left: 4%; }
.cine-play:hover { background: rgba(60, 40, 140, 0.6); box-shadow: 0 0 28px rgba(160, 120, 255, 0.6); }
.cine-play:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.scene.on .cine-play { animation: appear 1.4s ease 4.6s both; }

/* ===== Page Lettres (enveloppe) ===== */
#letter { --lw: min(100vw, 88.7vh); }
@supports (height: 1dvh) { #letter { --lw: min(100vw, 88.7dvh); } }
.lt-back { position: absolute; inset: -4%; background: #050818 url("../assets/lettre-1.png") center / cover no-repeat; filter: blur(16px) brightness(0.65); }
.lt-box { position: absolute; left: 50%; top: 50%; width: max(100vw, 177.69vh); height: max(100vh, 56.28vw); transform: translate(-50%, -50%); opacity: 0; transition: opacity 1.4s ease 0.4s; }
#letter.on .lt-box { opacity: 1; }

/* l'image de l'enveloppe */
.lt-imgs { position: absolute; inset: 0; }
.lt-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.lt-env { transform-origin: 50% 50%; transform: scale(1.04); animation: ltfloat 6s ease-in-out infinite alternate; }
@keyframes ltfloat {
  from { transform: translateY(8px) rotate(-0.3deg) scale(1.04); }
  to   { transform: translateY(-10px) rotate(0.3deg) scale(1.04); }
}

/* clic : l'enveloppe s'illumine et s'efface, puis la page de la lettre apparaît */
.lt-flash { position: absolute; left: 52%; top: 49%; width: 45%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(0.3);
  background: radial-gradient(closest-side, rgba(255, 214, 160, 0.85), rgba(255, 170, 90, 0.25) 55%, transparent 75%); }
.lt-box.open .lt-flash { animation: ltflash 1.6s ease-out 0.1s forwards; }
@keyframes ltflash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
.lt-box.open .lt-env { animation: ltzoom 1.5s ease-in 0.2s forwards; }
@keyframes ltzoom { from { transform: scale(1.04); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* zone cliquable sur l'enveloppe */
.lt-hit { position: absolute; left: 36.5%; top: 30.8%; width: 31.2%; height: 37.2%; padding: 0; border: 0; background: none; cursor: pointer; z-index: 3; border-radius: 12%; -webkit-tap-highlight-color: transparent; }
.lt-hit::before { content: ""; position: absolute; inset: -8%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; background: radial-gradient(closest-side, rgba(255, 200, 140, 0.45), transparent 78%); animation: bookhint 5s ease-in-out infinite; transition: opacity 0.4s ease; }
.lt-hit:hover::before, .lt-hit:focus-visible::before { animation: none; opacity: 0.95; }
.lt-hit:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.lt-box.open .lt-hit { pointer-events: none; visibility: hidden; }

.lt-hint { position: absolute; left: 0; right: 0; bottom: 7%; margin: 0; text-align: center; pointer-events: none; opacity: 0; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mute); }
#letter.on .lt-hint { animation: appear 1.6s ease 2.2s both; }
.lt-box.open .lt-hint { animation: none; opacity: 0; }

/* étoiles et étoiles filantes par-dessus l'image de l'enveloppe */
.lt-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#lt-fx-tw { position: absolute; inset: 0; }
.lt-page .meteor { z-index: 1; }

/* ----- Page de la lettre (fond espace plein écran) ----- */
.lt-page { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.6s ease, visibility 0s linear 1.6s; }
#letter.read .lt-page { opacity: 1; visibility: visible; transition: opacity 1.6s ease; }
#letter.read .lt-box { opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; }

.lt-sky {
  position: absolute; inset: -3%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90, 60, 200, 0.35), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(150, 60, 170, 0.25), transparent 65%),
    linear-gradient(rgba(3, 5, 20, 0.35), rgba(3, 5, 20, 0.55)),
    #050818 url("../assets/sky.png") center / cover no-repeat;
  animation: ltsky 60s ease-in-out infinite alternate;
}
@keyframes ltsky { from { transform: scale(1); } to { transform: scale(1.06); } }
.lt-twinkles { position: absolute; inset: 0; pointer-events: none; }

.lt-scroll {
  position: absolute; inset: 0; overflow-y: auto; outline: none;
  padding: calc(env(safe-area-inset-top, 0px) + 6rem) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 6rem) max(20px, env(safe-area-inset-left, 0px));
}
.lt-text {
  max-width: 38rem; margin: 0 auto;
  font-family: "Cormorant Garamond", "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 2; color: #f1ecde;
  text-shadow: 0 0 16px rgba(3, 5, 20, 0.95), 0 1px 3px rgba(3, 5, 20, 0.85);
}
.lt-text p { margin: 0 0 1.4em; }
.lt-text .lt-to { font-family: var(--font-display); font-size: 2.1rem; line-height: 1.2; color: var(--moon); text-shadow: 0 0 30px rgba(143, 168, 255, 0.45); margin-bottom: 1.2em; }
.lt-text .lt-sign { text-align: right; font-style: italic; margin-top: 2.4em; }

/* ===== Page Souvenirs (étoile qui s'éteint) ===== */
.souv-bg { position: absolute; inset: 0; background: #03030c url("../assets/souvenirs.jpg") center / cover no-repeat; opacity: 0; transition: opacity 2.2s ease; }
#souv.show .souv-bg { opacity: 1; }
#souv-warp { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; transition: opacity 1.8s ease; }
#souv.show #souv-warp { opacity: 0; }

/* l'étoile du centre : elle clignote comme si elle mourait */
.souv-glow, .souv-dim { position: absolute; left: 50%; top: 49.8%; border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); }
.souv-glow { width: 26vmin; height: 26vmin; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(215, 150, 255, 0.45) 30%, transparent 70%); }
.souv-dim { width: 20vmin; height: 20vmin; background: radial-gradient(closest-side, rgba(28, 6, 42, 0.96), rgba(36, 8, 54, 0.8) 45%, transparent 100%); }
#souv.show .souv-dim { filter: blur(3.5vmin); animation: souvdim 12s ease-in-out 2.4s infinite; }
#souv.show .souv-glow { animation: souvglow 12s ease-in-out 2.4s infinite; }
@keyframes souvdim {
  0%   { opacity: 0; }
  38%  { opacity: 0.35; }
  52%  { opacity: 0.88; }
  60%  { opacity: 0.8; }
  80%  { opacity: 0.2; }
  100% { opacity: 0; }
}
@keyframes souvglow {
  0%   { opacity: 0.3; }
  45%  { opacity: 0.12; }
  56%  { opacity: 0; }
  80%  { opacity: 0.2; }
  100% { opacity: 0.3; }
}


/* la phrase, sous l'étoile */
.souv-msg {
  position: absolute; left: 0; right: 0; top: calc(49.8% + 17vmin); margin: 0 auto; max-width: 36rem; padding: 0 20px; text-align: center;
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.5rem); line-height: 1.7; letter-spacing: 0.04em; color: var(--moon);
  text-shadow: 0 0 20px rgba(3, 5, 20, 0.95), 0 0 40px rgba(170, 110, 255, 0.35);
  opacity: 0; transition: opacity 2s ease;
}
#souv.show .souv-msg { opacity: 1; transition-delay: 1.8s; }


/* mouvement avec le curseur + particules */
.souv-move { position: absolute; inset: -3%; transform: translate(calc(var(--sx, 0) * -16px), calc(var(--sy, 0) * -10px)); will-change: transform; }
#souv-dust { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 2.4s ease; }
#souv.show #souv-dust { opacity: 1; transition-delay: 0.8s; }