@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Montserrat:wght@400;500;600&display=swap');

:root{
  --gold: #c6a96b;
  --gold-soft: rgba(198,169,107,0.75);
  --ink: #0b0b0b;
  --paper: rgba(255,255,255,0.95);
  --paper-dim: rgba(255,255,255,0.6);
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, Cambria, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing: border-box; }
html, body{
  margin:0; padding:0; width:100%; height:100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  overflow: hidden;
}

#stars{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(30,32,48,0.9) 0%, rgba(6,7,12,1) 65%),
    #050508;
}

/* ---------- ECRAN D'ENTREE ---------- */
#gate{
  position:fixed; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.gate-inner{ padding: 0 24px; }
.eyebrow{
  font-family: var(--sans);
  letter-spacing: 4px;
  font-size: 12px;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 18px;
}
.brand{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 9vw, 120px);
  margin: 0;
  color: var(--paper);
  letter-spacing: -2px;
}
.brand .amp{ color: var(--gold); font-style: italic; }
.tagline{
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--paper-dim);
  margin: 14px 0 46px;
}
.start-btn{
  font-family: var(--sans);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--ink);
  background: var(--gold);
  border: none;
  padding: 16px 40px;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
}
.start-btn:hover{ opacity:.85; transform: translateY(-1px); }
.hint{
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

/* ---------- LECTEUR ---------- */
/* Curseur étoile dorée (au lieu de la main) partout sur le lecteur */
#player, #player *{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M13 0 L15.6 10.4 L26 13 L15.6 15.6 L13 26 L10.4 15.6 L0 13 L10.4 10.4 Z' fill='%23c6a96b' stroke='%23050508' stroke-width='0.9'/%3E%3C/svg%3E") 13 13, pointer;
}
#player{ position:fixed; inset:0; z-index:10; }

/* Pas de background opaque ici : quand aucune photo n'est visible (cartons
   de chapitre), le fond étoilé neutre doit apparaître au travers. */
#photoLayer{ position:absolute; inset:0; overflow:hidden; background:transparent; }

/* Chaque photo = 2 couches : un fond flouté qui remplit l'écran (cover,
   peut être coupé sans problème puisqu'il est décoratif) et une image
   nette entièrement visible (contain) -- JAMAIS coupée, donc jamais de
   tête tranchée, quelle que soit l'orientation de la photo. */
.frameSlot{
  position:absolute; inset:0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.frameSlot.visible{ opacity: 1; z-index: 2; }
.frameSlot.hidden-frame{ opacity: 0; z-index: 1; }

.frame-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  filter: blur(46px) brightness(0.5) saturate(1.2);
  transform: scale(1.22);
  will-change: transform;
}
.frame-fg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: contain;
  filter: drop-shadow(0 25px 70px rgba(0,0,0,0.65));
}

#vignette{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
}

#cardLayer{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 0 8vw;
  background: rgba(4,4,6,0.0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}
#cardLayer.show{ opacity: 1; background: rgba(4,4,6,0.55); }

/* Cas spécial (carton final) : affiché par-dessus la toute dernière photo,
   qui reste visible -- pas de fond neutre, le texte est positionné très
   précisément (calculé en JS) au milieu de l'espace entre le haut du cadre
   et le sommet des têtes du couple sur cette photo précise. */
#cardLayer.on-photo.show{ background: transparent; }
#cardLayer.on-photo .card-text{
  position: absolute;
  left: 50%; top: 50%; /* top réécrit en JS avec la valeur calculée en pixels */
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 8vw;
}
#cardLayer.on-photo .card-eyebrow,
#cardLayer.on-photo .card-title,
#cardLayer.on-photo .card-subtitle{
  text-shadow: 0 2px 20px rgba(0,0,0,0.9), 0 0 46px rgba(0,0,0,0.7);
}
.card-eyebrow{
  font-family: var(--sans);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold);
  margin: 0 0 16px;
}
.card-title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 6vw, 84px);
  margin: 0;
  color: var(--paper);
  letter-spacing: -1px;
}
.card-subtitle{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 2vw, 22px);
  color: var(--paper-dim);
  margin: 18px 0 0;
}

/* Zone cliquable large (16px) pour naviguer facilement, avec une barre
   visuelle fine (3px) centrée en bas de cette zone. */
#progressTrack{
  position:absolute; left:0; right:0; bottom:0; height:18px; z-index:16;
  display:flex; align-items:flex-end;
  touch-action: none;
}
#progressTrack::before{
  content:''; position:absolute; left:0; right:0; bottom:7px; height:3px;
  background: rgba(255,255,255,0.15);
  transition: height .15s ease, bottom .15s ease;
}
#progressTrack:hover::before{ height:5px; bottom:6px; }
#progressFill{
  position:relative; height:3px; width:0%;
  background: var(--gold);
  transition: width .1s linear;
  pointer-events: none;
}
#progressTrack:hover #progressFill{ height:5px; }

#controls{
  position:absolute; right:22px; bottom:22px; z-index:16;
  display:flex; gap:10px;
  opacity: 0;
  transition: opacity .4s ease;
}
#player.show-controls #controls{ opacity: 1; }
#controls button{
  width:40px; height:40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(10,10,12,0.5);
  color: var(--paper);
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease;
}
#controls button:hover{ background: rgba(198,169,107,0.25); border-color: var(--gold); }

#audioNotice{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  z-index:16;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .5px;
  color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.4);
  padding: 8px 14px;
  border-radius: 3px;
}
#audioNotice code{ color: var(--gold); }

/* ---------- KEN BURNS ---------- */
.kb-zoom-in-c   { animation-name: kbZoomInC; }
.kb-zoom-in-tl  { animation-name: kbZoomInTL; }
.kb-zoom-in-br  { animation-name: kbZoomInBR; }
.kb-zoom-out-c  { animation-name: kbZoomOutC; }
.kb-pan-lr      { animation-name: kbPanLR; }
.kb-pan-rl      { animation-name: kbPanRL; }
.frame-bg{ animation-timing-function: linear; animation-fill-mode: forwards; }

/* Le Ken Burns ne s'applique qu'au fond flouté (décoratif) -- l'image
   nette au premier plan (.frame-fg) ne bouge jamais, donc rien n'est
   jamais rogné sur le sujet réel. */
@keyframes kbZoomInC{
  from{ transform: scale(1.18) translate(0,0); }
  to{ transform: scale(1.32) translate(0,0); }
}
@keyframes kbZoomInTL{
  from{ transform: scale(1.22) translate(0,0); }
  to{ transform: scale(1.36) translate(-1.5%, -1.5%); }
}
@keyframes kbZoomInBR{
  from{ transform: scale(1.22) translate(0,0); }
  to{ transform: scale(1.36) translate(1.5%, 1.5%); }
}
@keyframes kbZoomOutC{
  from{ transform: scale(1.34) translate(0,0); }
  to{ transform: scale(1.2) translate(0,0); }
}
@keyframes kbPanLR{
  from{ transform: scale(1.3) translate(-2.2%, 0); }
  to{ transform: scale(1.3) translate(2.2%, 0); }
}
@keyframes kbPanRL{
  from{ transform: scale(1.3) translate(2.2%, 0); }
  to{ transform: scale(1.3) translate(-2.2%, 0); }
}

/* ---------- MOBILE ---------- */
@media (max-width: 640px){
  .gate-inner{ padding: 0 20px; }
  .eyebrow{ font-size: 10px; letter-spacing: 3px; }
  .brand{ font-size: 15vw; letter-spacing: -1px; }
  .tagline{ font-size: 16px; margin: 10px 0 34px; }
  .start-btn{ padding: 14px 30px; font-size: 12px; }
  .hint{ font-size: 10px; }

  #cardLayer{ padding: 0 7vw; }
  .card-eyebrow{ font-size: 10px; letter-spacing: 3px; }
  .card-title{ font-size: 9vw; letter-spacing: -0.5px; }
  .card-subtitle{ font-size: 15px; margin-top: 12px; }

  .frame-fg{ filter: drop-shadow(0 12px 34px rgba(0,0,0,0.6)); }

  #controls{
    right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    gap: 8px;
  }
  #controls button{ width: 42px; height: 42px; font-size: 15px; }

  #progressTrack{ height: 22px; }
  #progressTrack::before{ bottom: 9px; }

  #audioNotice{ font-size: 10px; padding: 6px 10px; max-width: 80vw; }
}

@media (max-width: 380px){
  .brand{ font-size: 13vw; }
  .card-title{ font-size: 8vw; }
  #controls button{ width: 38px; height: 38px; font-size: 13px; }
}

/* écrans tactiles : pas de curseur étoile custom (inutile), et hover
   désactivé pour éviter les états "collés" après un tap */
@media (hover: none) and (pointer: coarse){
  #player, #player *{ cursor: default; }
  .start-btn:hover{ opacity: 1; transform: none; }
}