/* ==========================================================================
   Remise à zéro, page, décor et boutons flottants.
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Le document ne défile pas tant que l'enveloppe est fermée. `assets/invitation/js/story.js`
   pose .recit-ouvert sur <html> à la fin de l'ouverture — c'est le seul
   endroit du projet où le défilement se débloque.

   Pas d'accrochage (`scroll-snap`) : il rendait le geste sec, un simple coup
   de molette faisant sauter une étape entière. La lenteur vient désormais de
   la longueur des chapitres, pas d'une contrainte sur le geste — voir
   --chapitre-course dans tokens.css. */
html {
  height: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

html.recit-ouvert { overflow-y: auto; }

body {
  min-height: 100%;
  background: radial-gradient(120% 90% at 50% 0%, var(--bordeaux), var(--bordeaux-fonce));
  font-family: "Cormorant Garamond", Georgia, serif;
}

/* La scène : le décor de l'enveloppe, fixe.
   `perspective` est ce qui donne au rabat une vraie rotation 3D plutôt
   qu'une simple compression verticale.

   Pas de fond ici, et c'est délibéré : ce que la scène a sous elle, c'est la
   PHOTO (voir backdrop.css), et c'est en s'ouvrant qu'elle la découvre. Un
   aplat d'ivoire la masquerait jusqu'à la fin du pli.

   Le rabat et la poche pavent l'écran à eux deux — ils se partagent la même
   ligne de V —, donc rien ne transparaît tant que l'enveloppe est fermée. */
.scene {
  position: fixed;
  inset: 0;
  z-index: 1;          /* au-dessus de .fond, sous .recit */
  overflow: visible;
  perspective: 1600px;
  user-select: none;
}

/* ---- Boutons flottants ------------------------------------------------- */
.rejouer,
.son {
  position: fixed;
  z-index: 20;

  border: 1px solid rgba(107, 58, 75, .3);
  border-radius: 999px;
  background: rgba(239, 233, 223, .8);
  color: var(--encre);

  font-family: inherit;
  cursor: pointer;
  opacity: .65;
  transition: opacity .2s;
}
.rejouer:hover, .son:hover { opacity: 1; }

/* ---- Bouton de rejeu (outil de mise au point, pas un élément d'invitation) -- */
.rejouer {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  padding: 8px 18px;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ---- Bascule du son ----------------------------------------------------
   Caché tant que la musique n'a pas démarré : il n'a rien à couper avant.
   C'est du CSS et non GSAP — comme .rejouer, ce bouton est de l'habillage,
   il ne fait pas partie de la chorégraphie. assets/invitation/js/audio.js pose .audible
   quand la lecture a effectivement démarré. */
.son {
  top: 20px;
  right: 20px;

  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;

  opacity: 0;
  pointer-events: none;
}
.son.audible {
  opacity: .65;
  pointer-events: auto;
}

/* Deux glyphes, posés en masque sur la couleur du bouton : haut-parleur
   sonore, ou barré quand la musique est coupée. */
.son-icone {
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--son-glyphe) center / contain no-repeat;
          mask: var(--son-glyphe) center / contain no-repeat;
  --son-glyphe: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9v6h4l5 4V5L8 9H4z"/><path d="M16.5 8.5a5 5 0 0 1 0 7"/><path d="M19.5 5.5a9 9 0 0 1 0 13"/></svg>');
}

.son[aria-pressed="true"] .son-icone {
  --son-glyphe: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9v6h4l5 4V5L8 9H4z"/><path d="M17 9.5l4 5"/><path d="M21 9.5l-4 5"/></svg>');
}

.rejouer:focus-visible,
.son:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  opacity: 1;
}

/* GSAP gère lui-même le cas `prefers-reduced-motion` (voir assets/invitation/js/timeline.js
   et assets/invitation/js/story.js) ; on neutralise ici ce qui reste d'animation purement
   CSS, et l'accrochage au défilement, qui déplace la page tout seul. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}