:root{
  --ink:#f4ecdd;
  --gold:#e9c78a;
  --rose:#e7a6a0;
  --bg:#05060a;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"DM Sans", system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);overflow:hidden}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;cursor:default}

#stage{position:fixed;inset:0;z-index:1}
#stage canvas{display:block;width:100%!important;height:100%!important}
#cesium-overlay{position:fixed;inset:0;z-index:2;display:none;pointer-events:none}

/* Héroïne en silhouette + rencontre + cœurs (incrustés DEVANT le survol Google) */
#heroine{position:fixed;inset:0;z-index:3;display:none;pointer-events:none}
#heroine.on{display:block}
.hero-hearts{position:absolute;inset:0;overflow:hidden}
.heart{position:absolute;bottom:12vh;width:calc(30px * var(--s,1));opacity:0;animation:heartUp 4s ease-in forwards}
.heart svg{width:100%;height:auto;filter:drop-shadow(0 0 8px rgba(243,205,134,.9))}
@keyframes heartUp{0%{opacity:0;transform:translate(0,10px) scale(.4)}18%{opacity:.95}100%{opacity:0;transform:translate(var(--dx,0),-46vh) scale(1)}}

/* Light‑leak / fondu global */
#leak{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background:#000;opacity:1;mix-blend-mode:normal;
  transition:none;
}

/* Grain pellicule + vignette (couche CSS de secours, toujours subtile) */
#filmgrain{
  position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
body::after{ /* vignette douce permanente */
  content:"";position:fixed;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* Beats narratifs */
#beats{position:fixed;inset:0;z-index:6;pointer-events:none;display:grid;place-items:center}
.beat{
  position:absolute;max-width:min(86vw,820px);text-align:center;
  font-family:var(--serif);font-weight:300;line-height:1.25;
  color:var(--ink);opacity:0;filter:blur(8px);
  text-shadow:0 2px 30px rgba(0,0,0,.7);
  font-size:clamp(1.7rem,4.6vw,3.4rem);
  letter-spacing:.01em;padding:0 6vw;
}
.beat em{font-style:italic;color:var(--gold)}
.beat .small{display:block;font-size:.5em;letter-spacing:.35em;text-transform:uppercase;
  font-family:var(--sans);font-weight:400;color:var(--gold);opacity:.85;margin-bottom:1.1em}

/* Tampon date */
#datestamp{
  position:fixed;top:clamp(16px,3vh,34px);right:clamp(16px,3vw,40px);z-index:6;
  font-family:var(--sans);font-weight:400;letter-spacing:.42em;font-size:.72rem;
  color:var(--gold);opacity:0;pointer-events:none;text-transform:uppercase;
}

/* Légende lieu */
#place{
  position:fixed;left:clamp(16px,3vw,40px);bottom:clamp(40px,7vh,64px);z-index:6;
  font-family:var(--serif);font-style:italic;font-size:clamp(1rem,2.4vw,1.5rem);
  color:var(--ink);opacity:0;pointer-events:none;text-shadow:0 2px 20px rgba(0,0,0,.7);
}
#place b{display:block;font-style:normal;font-family:var(--sans);font-weight:400;
  letter-spacing:.3em;font-size:.58em;text-transform:uppercase;color:var(--gold);opacity:.8;margin-bottom:.25em}

/* Crédit */
#credit{
  position:fixed;right:clamp(12px,2.4vw,28px);bottom:clamp(12px,2vh,18px);z-index:6;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.06em;color:rgba(244,236,221,.42);
  pointer-events:none;
}

/* Progression */
#progress{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:6;background:rgba(255,255,255,.06)}
#progressbar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--rose));opacity:.7}

/* Écran d'entrée */
#enter{
  position:fixed;inset:0;z-index:20;display:grid;place-items:center;text-align:center;
  background:radial-gradient(130% 130% at 50% 35%, #0b1020 0%, #05060a 60%, #000 100%);
  transition:opacity 1s ease;
}
.enter-inner{transform:translateY(-2vh);padding:6vw;max-width:900px}
.kicker{font-family:var(--sans);letter-spacing:.5em;text-transform:uppercase;font-size:.7rem;color:var(--gold);opacity:.8;margin-bottom:2.2rem}
.film-title{
  font-family:var(--serif);font-weight:300;line-height:.98;
  font-size:clamp(3.2rem,12vw,8.2rem);letter-spacing:.01em;
  background:linear-gradient(180deg,#fff 0%,var(--gold) 120%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 10px 60px rgba(233,199,138,.12);
}
.film-title .amp{font-style:italic;font-size:.42em;color:var(--rose);-webkit-text-fill-color:var(--rose);display:inline-block;margin:.1em 0}
.enter-sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.6vw,1.6rem);color:var(--ink);opacity:.85;margin:2rem 0 2.6rem}
#play,#replay{
  font-family:var(--sans);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem;
  color:#0a0a0a;background:linear-gradient(180deg,#f6e6c4,var(--gold));border:0;border-radius:999px;
  padding:1rem 2.3rem;cursor:pointer;display:inline-flex;align-items:center;gap:.7rem;
  box-shadow:0 12px 40px rgba(233,199,138,.28);transition:transform .25s ease,box-shadow .25s ease;
}
#play:hover,#replay:hover{transform:translateY(-2px);box-shadow:0 18px 54px rgba(233,199,138,.4)}
.tri{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #0a0a0a;display:inline-block}
.enter-hint{margin-top:1.8rem;font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(244,236,221,.45)}

/* Carton de fin */
#endcard{
  position:fixed;inset:0;z-index:19;display:grid;place-items:center;text-align:center;
  background:#000;opacity:0;pointer-events:none;transition:opacity 1.2s ease;
}
#endcard.show{opacity:1;pointer-events:auto}
.endcard-inner h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,6vw,3.4rem);
  background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.end-stamp{font-family:var(--sans);letter-spacing:.42em;font-size:.72rem;color:var(--gold);opacity:.8;margin:1.2rem 0 2.2rem}

/* Titre d'ouverture (premier beat, sur le globe) */
.beat.opening-title{
  font-size:clamp(2.6rem,8.5vw,6rem);font-weight:300;line-height:1;letter-spacing:.01em;
  background:linear-gradient(180deg,#fff 0%,var(--gold) 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 10px 60px rgba(233,199,138,.15);
}
.beat.opening-title .amp{font-style:italic;color:var(--rose);-webkit-text-fill-color:var(--rose);font-size:.5em;display:inline-block;margin:0 .15em}

/* Pastille « activer le son » */
#soundhint{
  position:fixed;left:50%;bottom:clamp(28px,6vh,54px);transform:translateX(-50%) translateY(10px);z-index:18;
  font-family:var(--sans);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.66rem;
  color:#0a0a0a;background:linear-gradient(180deg,#f6e6c4,var(--gold));border:0;border-radius:999px;
  padding:.7rem 1.4rem;cursor:pointer;opacity:0;pointer-events:none;
  box-shadow:0 10px 34px rgba(233,199,138,.32);transition:opacity .6s ease,transform .6s ease;
}
#soundhint.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);animation:hintPulse 2.4s ease-in-out infinite}
@keyframes hintPulse{0%,100%{box-shadow:0 10px 34px rgba(233,199,138,.3)}50%{box-shadow:0 10px 46px rgba(233,199,138,.6)}}

@media (prefers-reduced-motion: reduce){
  .beat{filter:none}
}