:root {
  --enc-papier: #f2dcd9;
  --enc-papier-fonce: #e7c6c3;
  --enc-liner: #d3a7ad;
  --enc-or: #b49146;
  --dur-rabat: 1.7s;
  --dur-sortie: 2.6s;
}

html, body {
  margin: 0;
  padding: 0;
  background: #faf4f2;
}
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

html.no-scroll, html.no-scroll body {
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #54424a;
  background: #faf4f2;
}

input::placeholder { color: #b39aa2; font-style: italic; }

/* ── keyframes ── */
@keyframes petalFall {
  0%   { transform: translateY(-10vh); opacity: 0; }
  6%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(112vh); opacity: 0.2; }
}
@keyframes petalDrift {
  from { transform: translateX(-3.5vw); }
  to   { transform: translateX(3.5vw); }
}
@keyframes petalSpin {
  from { transform: rotate3d(0.55, 0.25, 1, 0deg); }
  to   { transform: rotate3d(0.55, 0.25, 1, 360deg); }
}
@keyframes glow {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}
@keyframes sealBreathe {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.035); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── bouton musique ── */
.music-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 600;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(180,145,70,0.35);
  background: rgba(253,248,246,0.9);
  color: #b49146;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(140,90,105,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.music-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(140,90,105,0.24);
}
.music-toggle:focus-visible {
  outline: 2px solid #b49146;
  outline-offset: 3px;
}
.music-icon { opacity: 1; transition: opacity 0.2s ease; }
.music-toggle.is-muted .music-icon { opacity: 0.4; }
.music-toggle.is-muted::after {
  content: '';
  position: absolute;
  width: 27px;
  height: 1.5px;
  background: #b49146;
  transform: rotate(-45deg);
}
.music-toggle.invite-tap {
  animation: musicInvite 1.8s ease-in-out infinite;
}
@keyframes musicInvite {
  0%, 100% { box-shadow: 0 8px 20px rgba(140,90,105,0.18), 0 0 0 0 rgba(180,145,70,0.35); }
  50%      { box-shadow: 0 8px 20px rgba(140,90,105,0.18), 0 0 0 8px rgba(180,145,70,0); }
}

/* ═══════════ SCÈNE DE LA LETTRE ═══════════ */
.scene {
  position: relative;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  background: linear-gradient(180deg, #f3e4e0 0%, #faf4f2 55%, #f2e2de 100%);
  cursor: pointer;
}

.reveal-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  z-index: 1;
}
.reveal-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255,247,240,0.95), rgba(255,247,240,0) 70%);
  animation: glow 7s ease-in-out infinite;
}
.reveal-content {
  position: relative;
  transition: opacity 2.6s ease 1.8s, transform 4s cubic-bezier(0.16, 1, 0.3, 1) 1.8s;
  opacity: 0;
  transform: scale(0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scene.is-open .reveal-content {
  opacity: 1;
  transform: scale(1);
}

.eyebrow {
  font-size: 15px;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: #b49146;
  margin-bottom: 26px;
}
.subtitle {
  font-size: clamp(20px, 2.6vw, 30px);
  font-style: italic;
  font-weight: 300;
  color: #a56b7e;
  margin-bottom: 10px;
}
.names {
  margin: 0;
  font-size: clamp(44px, 8vw, 96px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.1;
  color: #54424a;
}
.amp { color: #b49146; font-weight: 300; }

.date-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}
.date-line {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b49146);
}
.date-line--reverse { background: linear-gradient(270deg, transparent, #b49146); }
.date-text {
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #a56b7e;
}
.place {
  font-size: 18px;
  font-style: italic;
  color: #ab929a;
  margin-top: 12px;
}

.countdown {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 3vw, 28px);
  margin-top: 30px;
}
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.countdown-value {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 500;
  color: #54424a;
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #b49146;
}
.countdown-sep {
  font-size: clamp(20px, 3vw, 30px);
  color: #d9c39a;
}

.discover {
  margin-top: 56px;
  text-decoration: none;
  color: #b49146;
  font-size: 14px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.discover-line {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, #b49146, transparent);
}

/* couche lettre — travelling avant après ouverture */
.envelope-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 46%;
  transition: transform 3.6s cubic-bezier(0.55, 0, 0.15, 1), opacity 2.2s ease 0.9s;
  transform: scale(1);
  opacity: 1;
  pointer-events: none;
  will-change: transform, opacity;
}
.scene.is-through .envelope-layer {
  transform: scale(2.5);
  opacity: 0;
}

.envelope-perspective {
  perspective: 1100px;
  perspective-origin: 50% 30%;
}

.envelope {
  position: relative;
  width: min(92vw, calc(82dvh * 10 / 7));
  aspect-ratio: 10 / 7;
  transform: rotateX(6deg);
}

.env-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
  background-image: url('assets/grain.png'), linear-gradient(160deg, #f0d6d3, #e6c4c1);
  box-shadow: 0 44px 80px rgba(150,85,100,0.35), 0 10px 24px rgba(150,85,100,0.22);
}
.env-inner {
  position: absolute;
  inset: 3px 3px 40% 3px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #ecc9cb, #efd2d1 80%);
  box-shadow: inset 0 5px 12px rgba(115,50,65,0.12);
}

.env-card {
  position: absolute;
  left: 4.5%;
  top: 4%;
  width: 91%;
  height: 92%;
  z-index: 2;
  border-radius: 4px;
  transform: translateY(0%);
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  background-image: url('assets/grain.png'), linear-gradient(175deg, #fdfaf5, #f6eee5);
  box-shadow: 0 8px 26px rgba(130,75,85,0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.scene.is-flapback .env-card,
.scene.is-through .env-card {
  transform: translateY(-78%);
}

.eyebrow--card { font-size: 13px; letter-spacing: 0.5em; }
.card-initials { font-size: clamp(30px, 7vmin, 58px); font-style: italic; color: #54424a; }
.card-rule {
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b49146, transparent);
}

.env-pocket {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 6px;
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  background-image: url('assets/grain.png'), linear-gradient(185deg, #f5dedb, #e9c8c6 75%, #e5c2c0);
}

.env-flap-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 54%;
  z-index: 4;
  perspective: 900px;
  perspective-origin: 50% 0%;
}
.scene.is-flapback .env-flap-wrap,
.scene.is-through .env-flap-wrap {
  z-index: 0;
}

.env-flap {
  position: absolute;
  inset: 0;
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 2s cubic-bezier(0.55, 0.06, 0.28, 1);
}
/* la forme du rabat est portée par un pseudo-élément pour que
   le clip-path ne découpe pas le sceau, qui reste au premier plan */
.env-flap::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 51% 99%, 49% 99%);
  background-image: url('assets/grain.png'), linear-gradient(190deg, #f8e7e4, #eed2cf 80%, #e9c8c5);
}
.scene.is-open .env-flap,
.scene.is-flapback .env-flap,
.scene.is-through .env-flap {
  transform: rotateX(-118deg);
}

.env-seal {
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: clamp(92px, 17vmin, 160px);
  aspect-ratio: 613 / 600;
  transform: translateX(-50%);
  z-index: 20;
  opacity: 1;
  transition: opacity 0.2s ease 1000ms;
  animation: sealBreathe 2.8s ease-in-out infinite;
  will-change: transform;
}
.scene.is-open .env-seal,
.scene.is-flapback .env-seal,
.scene.is-through .env-seal {
  opacity: 0;
  animation: none;
}
.env-seal img {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateZ(0);
  backface-visibility: hidden;
  filter: drop-shadow(0 4px 10px rgba(120,60,70,0.45));
}

.open-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 38px;
  display: flex;
  justify-content: center;
  transition: opacity 1.2s ease;
  opacity: 1;
}
.scene.is-open .open-hint,
.scene.is-flapback .open-hint,
.scene.is-through .open-hint {
  opacity: 0;
}
.open-hint-text {
  font-size: 13px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #a56b7e;
}

/* pétales de rose pastel — pluie continue sur toute la page */
.petals {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -70px;
  opacity: 0;
}
.petal-drift {
  display: block;
  animation-name: petalDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.petal-img {
  display: block;
  aspect-ratio: 213 / 206;
  background-size: contain;
  background-repeat: no-repeat;
  animation-name: petalSpin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  filter: drop-shadow(0 6px 10px rgba(170,110,130,0.28));
}

/* ═══════════ SECTIONS DE CONTENU ═══════════ */
.content-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 24px 0;
  text-align: center;
}

.ornament {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ornament-petal {
  width: 26px;
  height: 20px;
  background: linear-gradient(130deg, #f0cdd6, #dda4b4);
  display: inline-block;
}
.ornament-petal--left { border-radius: 62% 6px 62% 6px; transform: rotate(-22deg); }
.ornament-petal--right { border-radius: 6px 62% 6px 62%; transform: rotate(22deg); }
.ornament-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b49146;
  display: inline-block;
}

.section-title {
  margin: 0;
  font-size: clamp(32px, 4.5vw, 46px);
  font-weight: 400;
  font-style: italic;
  color: #54424a;
}
.section-when {
  font-size: 21px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b49146;
  margin-top: 18px;
}
.section-where {
  font-size: 22px;
  font-style: italic;
  color: #a56b7e;
  margin: 12px 0 34px;
}
.section-where-sub { font-size: 18px; color: #ab929a; }

.map-frame {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ecd9d9;
  box-shadow: 0 18px 50px rgba(140,90,105,0.14);
  background: #fff;
}

/* lieu de réception : illustration + boutons d'itinéraire en incrustation */
.venue-frame { position: relative; }
.venue-img {
  display: block;
  width: 100%;
  height: auto;
}
.gps-row {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gps-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a6c30;
  text-decoration: none;
  border: 1px solid rgba(180,145,70,0.45);
  border-radius: 999px;
  padding: 6px 13px;
  background: rgba(253,248,246,0.88);
  backdrop-filter: blur(3px);
  box-shadow: 0 4px 12px rgba(120,80,60,0.18);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.gps-btn svg { width: 12px; height: 12px; }
@media (max-width: 600px) {
  .gps-row { left: 10px; bottom: 10px; gap: 6px; }
  .gps-btn { font-size: 9px; padding: 4px 9px; gap: 4px; letter-spacing: 0.12em; }
  .gps-btn svg { width: 9px; height: 9px; }
}
.gps-btn:hover {
  background: linear-gradient(120deg, #b49146, #cbab63);
  color: #fdf8f6;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(180,145,70,0.4);
}

/* scroll reveal */
[data-reveal] {
  opacity: 0;
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ornament { transform: translateY(30px) scale(0.7); transition: opacity 1s ease, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.section-title,
.section-when,
.section-where { transform: translateY(40px); }
.map-frame { transform: translateY(64px) scale(0.96); transition: opacity 1.2s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); }
.rsvp-card { transform: translateY(64px) scale(0.97); transition: opacity 1.2s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); }
.footer-signature { transform: translateY(30px); }

[data-reveal].is-in {
  opacity: 1 !important;
  transform: none !important;
}

/* ═══════════ RSVP ═══════════ */
.rsvp-section {
  max-width: 640px;
  margin: 0 auto;
  padding: 96px 24px 110px;
  text-align: center;
}

.rsvp-card {
  background: #fdf8f6;
  border: 1px solid #ecd9d9;
  border-radius: 4px;
  padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 56px);
  box-shadow: 0 24px 60px rgba(140,90,105,0.12);
  position: relative;
}
.rsvp-card-inner-border {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  bottom: 14px;
  border: 1px solid rgba(180,145,70,0.35);
  pointer-events: none;
}

.eyebrow--rsvp { font-size: 14px; letter-spacing: 0.5em; text-transform: uppercase; color: #b49146; margin-bottom: 16px; }
.rsvp-title { margin: 0 0 10px; font-size: clamp(28px, 4vw, 38px); font-weight: 400; font-style: italic; color: #54424a; }
.rsvp-subtitle { font-size: 18px; font-style: italic; color: #ab929a; margin: 0 0 34px; }

.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}
.rsvp-form[hidden],
.rsvp-thanks[hidden] {
  display: none;
}
.rsvp-label { display: flex; flex-direction: column; gap: 8px; }
.rsvp-label span {
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a56b7e;
}
.rsvp-label input {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  padding: 14px 16px;
  border: 1px solid #dcc3c8;
  border-radius: 3px;
  background: #ffffff;
  color: #54424a;
  outline: none;
}
.rsvp-label input:focus {
  border: 1px solid #b49146;
  box-shadow: 0 0 0 3px rgba(180,145,70,0.15);
}

.rsvp-submit {
  margin-top: 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 16px 20px;
  background: linear-gradient(120deg, #b49146, #cbab63);
  color: #fdf8f6;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rsvp-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(180,145,70,0.4);
}

.rsvp-error {
  font-size: 15px;
  font-style: italic;
  color: #b39aa2;
  text-align: center;
  min-height: 20px;
}

.rsvp-thanks { animation: fadeUp 0.9s ease both; }
.rsvp-thanks-name { font-size: 24px; font-style: italic; color: #54424a; }
.rsvp-thanks-msg { font-size: 18px; color: #a56b7e; margin: 10px 0 0; }

.footer-signature {
  margin-top: 72px;
  text-align: center;
  font-size: clamp(18px, 2.8vw, 24px);
  font-style: italic;
  font-weight: 400;
  color: #a56b7e;
}
.footer-signature .heart { color: #c96e7f; }
.footer-signature-names { display: inline-block; margin-top: 8px; }