* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #1b0e0a;
  color: #fff;
  font-family: Montserrat, sans-serif;
  overflow: hidden;
}
.hidden {
  display: none !important;
}
.start {
  height: 100svh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 25%, #6c3b2d55, transparent 32%),
    linear-gradient(160deg, #1b0e0a, #3a1b12);
}
.start-box {
  text-align: center;
  border: 1px solid #d1b79b88;
  padding: 42px 28px;
  width: min(88vw, 520px);
  background: #25130db8;
  backdrop-filter: blur(8px);
}
.mini-monogram,
.main-monogram {
  font:
    72px Great Vibes,
    cursive;
}
.mini-monogram span,
.main-monogram span {
  font:
    48px Cormorant Garamond,
    serif;
}
.start h1 {
  font:
    500 46px Cormorant Garamond,
    serif;
  letter-spacing: 0.22em;
}
.start p {
  font-family:
    Cormorant Garamond,
    serif;
  font-size: 22px;
}
.start button,
.calendar-btn {
  border: 1px solid #fff;
  background: #5a261d;
  color: #fff;
  padding: 14px 24px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.start small {
  display: block;
  margin-top: 14px;
  opacity: 0.7;
}
.experience,
.page {
  width: 100%;
  height: 100svh;
}
.page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}
.hidden-page {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.03);
}

/* À la fin de l'animation, les deux pages deviennent consultables verticalement. */
.experience.vertical-pages {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  overscroll-behavior-y: contain;
}
.experience.vertical-pages .page {
  position: relative;
  inset: auto;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 100svh;
}
.experience.vertical-pages .page-two {
  min-height: 100svh;
}
.bg {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  animation: zoom 12s ease-in-out forwards;
}
.bg-one {
  background-image: url("assets/images/photo-1.jpeg");
}
.bg-two {
  background-image: url("assets/images/photo-2.jpeg");
}
@keyframes zoom {
  to {
    transform: scale(1.08);
  }
}
.veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(#2b170ea0, #27150cc8);
}
.top-title {
  position: absolute;
  top: 3vh;
  left: 0;
  right: 0;
  text-align: center;
  font:
    600 clamp(54px, 12vw, 110px) Cormorant Garamond,
    serif;
  line-height: 0.72;
  letter-spacing: 0.12em;
}
.top-title small {
  display: block;
  font-size: 0.28em;
  letter-spacing: 0.25em;
}
.envelope-wrap {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: min(86vw, 520px);
}
.envelope {
  position: relative;
  height: 310px;
  perspective: 1000px;
}
.env-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #4a1d15, #2d110d);
  box-shadow: 0 24px 70px #0009;
}
.env-front {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(135deg, transparent 49.5%, #3a160f 50%) left/50% 100%
      no-repeat,
    linear-gradient(225deg, transparent 49.5%, #2a0f0b 50%) right/50% 100%
      no-repeat,
    linear-gradient(to top, #3c170f 0 58%, transparent 58%);
}
.env-flap {
  position: absolute;
  z-index: 6;
  inset: 0 0 auto;
  height: 58%;
  background: linear-gradient(155deg, #54251b, #2d100b);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  animation: flap 1.4s 1.1s forwards;
}
.insert-card {
  position: absolute;
  z-index: 2;
  left: 11%;
  right: 11%;
  bottom: 5%;
  height: 92%;
  background: #f3e9da;
  color: #671c25;
  text-align: center;
  border-radius: 18px 18px 0 0;
  animation: cardUp 1.7s 2.1s forwards;
  overflow: visible;
}
.lace {
  position: absolute;
  left: -18px;
  right: -18px;
  top: -28px;
  height: 62px;
  background: radial-gradient(
      circle at 16px 30px,
      transparent 0 8px,
      #f8f2e8 9px 14px,
      transparent 15px
    )
    0 0/42px 42px repeat-x;
  filter: drop-shadow(0 2px 1px #0002);
}
.insert-content {
  padding-top: 34px;
}
.insert-content h2 {
  font:
    500 33px Cormorant Garamond,
    serif;
  margin: 6px;
}
.insert-content span {
  font:
    28px Great Vibes,
    cursive;
}
.insert-content p {
  font:
    11px Montserrat,
    sans-serif;
  letter-spacing: 0.12em;
}
.insert-content strong {
  display: block;
  margin-top: 22px;
  font:
    600 20px Cormorant Garamond,
    serif;
  letter-spacing: 0.28em;
}
.monogram-script {
  position: absolute;
  z-index: 7;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  font:
    72px Great Vibes,
    cursive;
  line-height: 0.7;
  text-shadow: 0 2px 4px #000;
}
.monogram-script span {
  font:
    40px Cormorant Garamond,
    serif;
}
.wax {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 82px;
  height: 82px;
  border-radius: 48% 52% 47% 53%;
  background: radial-gradient(circle at 35% 30%, #a9212c, #72141c 64%, #3e0a0e);
  display: grid;
  place-items: center;
  border: 3px ridge #c7464d;
  box-shadow: 0 8px 16px #0008;
  animation: waxOut 0.6s 0.75s forwards;
}
.wax span {
  font-size: 35px;
  color: #d98f8d;
}
.names-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5vh;
  text-align: center;
  font:
    48px Cormorant Garamond,
    serif;
}
.names-bottom span,
.names-bottom b {
  display: block;
}
.names-bottom b {
  font:
    44px Great Vibes,
    cursive;
}
.progress {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 2vh;
  height: 2px;
  background: #ffffff33;
}
.progress span {
  display: block;
  height: 100%;
  background: #fff;
  animation: progress 8s linear forwards;
}
@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes flap {
  to {
    transform: rotateX(180deg);
    z-index: 1;
  }
}
@keyframes cardUp {
  to {
    transform: translateY(-135px);
  }
}
@keyframes waxOut {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
}
.cream-overlay {
  position: absolute;
  inset: 0;
  background: #efe2c8d9;
}
.rings {
  position: absolute;
  width: 76vw;
  height: 76vw;
  max-width: 620px;
  max-height: 620px;
  border: 4px double #fff9;
  border-radius: 50%;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}
.content-card {
  position: relative;
  z-index: 2;
  width: min(92vw, 760px);
  height: 100%;
  margin: auto;
  padding: 3.5vh 24px 2vh;
  text-align: center;
  color: #292013;
  overflow-y: auto;
}
.main-monogram {
  font-size: 58px;
  color: #4d2119;
}
.content-card h2 {
  font:
    500 clamp(42px, 8vw, 66px) Cormorant Garamond,
    serif;
  line-height: 0.72;
  margin: 4px 0 16px;
}
.content-card h2 em {
  font:
    normal 28px Great Vibes,
    cursive;
}
.intro {
  font-style: italic;
  margin: 4px;
}
.content-card h3 {
  font:
    500 34px Cormorant Garamond,
    serif;
  letter-spacing: 0.11em;
  margin: 6px;
}
.content-card > p {
  max-width: 620px;
  margin: 9px auto;
  line-height: 1.35;
}
.event-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.6fr;
  gap: 10px;
  margin: 18px auto 12px;
  border-top: 1px solid #6e3d32;
  border-bottom: 1px solid #6e3d32;
  padding: 12px 0;
}
.event-grid div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.event-grid div + div {
  border-left: 1px solid #6e3d32;
}
.event-grid strong {
  font:
    600 18px Cormorant Garamond,
    serif;
}
.event-grid span {
  font-size: 11px;
}
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 600px;
  margin: 12px auto;
}
.countdown div {
  border: 1px solid #6e3d3266;
  padding: 8px;
}
.countdown b {
  display: block;
  font:
    600 25px Cormorant Garamond,
    serif;
}
.countdown span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.dress {
  font-size: 12px;
}
.calendar-btn {
  margin: 5px;
  background: #54251b;
}
.confirm {
  font-weight: 600;
  font-size: 13px;
}
.confirm a {
  color: #3a1711;
}
.notice {
  font-size: 11px;
  font-weight: 600;
}
.sound {
  position: fixed;
  z-index: 20;
  top: 15px;
  right: 15px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #fff8;
  background: #3a1711dd;
  color: #fff;
}
dialog {
  background: #f1e4d1;
  color: #3a1711;
  border: 1px solid #6e3d32;
  padding: 30px;
  width: min(88vw, 440px);
  text-align: center;
}
dialog::backdrop {
  background: #0009;
}
dialog a {
  display: block;
  border: 1px solid #6e3d32;
  padding: 12px;
  margin: 10px;
  color: #3a1711;
  text-decoration: none;
}
#closeDialog {
  position: absolute;
  right: 10px;
  top: 6px;
  border: 0;
  background: none;
  font-size: 28px;
}
@media (max-width: 600px) {
  .top-title {
    top: 5vh;
  }
  .envelope-wrap {
    top: 49%;
    transform: translate(-50%, -50%) scale(0.88);
  }
  .names-bottom {
    font-size: 38px;
    bottom: 4vh;
  }
  .content-card {
    padding-top: 2vh;
  }
  .main-monogram {
    font-size: 45px;
  }
  .content-card h2 {
    font-size: 40px;
  }
  .content-card h3 {
    font-size: 25px;
  }
  .event-grid strong {
    font-size: 15px;
  }
  .countdown b {
    font-size: 21px;
  }
}

/* Version 2.1 — enveloppe épurée et contenu entièrement lisible */
.envelope-wrap {
  top: 52%;
  width: min(88vw, 540px);
  transform: translate(-50%, -50%);
}
.envelope {
  height: 280px;
  perspective: 1200px;
}
.env-back {
  background: #4a2519;
  border-radius: 6px;
}
.env-front {
  background:
    linear-gradient(35deg, transparent 49.5%, #6a3b2a 50%, transparent 50.5%),
    linear-gradient(-35deg, transparent 49.5%, #3f2017 50%, transparent 50.5%),
    linear-gradient(160deg, #5c3022, #442117);
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 -10px 28px #2b120c55;
}
.env-flap {
  height: 60%;
  background: linear-gradient(165deg, #6b3a2a, #4b251a);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
  animation: flap 1.2s 1.1s ease-in-out forwards;
}
.insert-card {
  left: 7%;
  right: 7%;
  top: 10px;
  bottom: auto;
  height: 260px;
  background: #fff;
  color: #4b261a;
  border: 1px solid #d9c8b8;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 10px 24px #0004;
  transform: translateY(0);
  animation: cardUp 1.6s 2.35s cubic-bezier(0.22, 0.75, 0.3, 1) forwards;
}
.wax {
  animation: waxOut 0.5s 0.65s ease forwards;
  width: 94px;
  height: 94px;
  background: radial-gradient(circle at 34% 27%, #d34a51 0, #a61f2a 32%, #711019 68%, #3d070c 100%);
  border: 5px double #e07274;
  box-shadow:
    0 12px 22px #000a,
    inset 0 3px 7px #ff9b9b88,
    inset 0 -7px 12px #360408aa;
  filter: drop-shadow(0 3px 2px #1b0507aa);
}
.wax span {
  width: 57px;
  height: 57px;
  display: grid;
  place-items: center;
  border: 2px solid #e68b8d;
  border-radius: 50%;
  color: #f0a3a4;
  font-size: 39px;
  line-height: 1;
  text-shadow: 0 2px 2px #4b080d;
  box-shadow: inset 0 0 0 3px #6e101788;
}
.insert-content {
  padding: 46px 24px 24px;
}
.insert-content h2 {
  font: 600 34px Cormorant Garamond, serif;
  letter-spacing: 0.02em;
  margin: 0 0 22px;
}
.insert-content h2 span {
  font: 30px Great Vibes, cursive;
}
.insert-content > p {
  font: 500 15px/1.35 Montserrat, sans-serif;
  letter-spacing: 0.05em;
  margin: 0 auto 28px;
}
.insert-content > strong {
  display: block;
  font: 600 clamp(16px, 4.8vw, 20px)/1.15 Cormorant Garamond, serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.love-quote {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3.8vh;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 8px #000;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.love-quote strong {
  font: 34px Great Vibes, cursive;
  font-weight: 400;
}
.love-quote q {
  font: italic 16px/1.3 Cormorant Garamond, serif;
}
.love-quote q::before,
.love-quote q::after {
  content: none;
}
.love-quote span {
  font: 500 12px Montserrat, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.content-card {
  padding-top: 8vh;
}
@keyframes cardUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-225px);
  }
}
@media (max-width: 600px) {
  .start h1 {
    font-size: 36px;
  }
  .top-title {
    top: 3vh;
    font-size: 48px;
  }
  .envelope-wrap {
    top: 52%;
    transform: translate(-50%, -50%) scale(0.78);
  }
  .love-quote {
    bottom: 4.5vh;
  }
  .love-quote strong {
    font-size: 29px;
  }
  .love-quote q {
    font-size: 14px;
  }
  .content-card {
    padding-top: 7vh;
  }
}

/* Version 2.2b — le rabat utilisait une rotation 3D (rotateX + backface-visibility)
   qui provoquait un vrai bug de rendu : dès que la rotation dépassait 90°, le carton
   devenait visible en transparence à travers le recto encore "fermé" de l'enveloppe,
   bien avant le moment prévu. On remplace cette rotation 3D par un simple repli 2D
   (échelle + fondu), sans aucune perspective, ce qui est fiable sur tous les écrans. */
.envelope {
  perspective: none;
}
.env-flap {
  transform-origin: top;
  animation: flapOpen 1s 1.1s ease-in forwards;
}
@keyframes flapOpen {
  0% {
    opacity: 1;
    transform: scaleY(1);
  }
  70% {
    opacity: 1;
    transform: scaleY(0.08);
  }
  100% {
    opacity: 0;
    transform: scaleY(0.08);
  }
}

/* Version 2.2 — ouverture d'enveloppe corrigée.
   Bugs trouvés en testant l'animation directement dans le navigateur :
   1) Le carton ne sortait jamais entièrement de l'enveloppe : son bas (la mention
      "...2026") restait caché en permanence derrière l'enveloppe, même une fois
      l'animation terminée.
   2) Faire disparaître le recto/verso de l'enveloppe en animation (fondu ou même
      réduction) déclenche un bug de rendu du navigateur : combinée à l'animation
      du rabat, elle rend le carton visible en transparence bien avant l'heure,
      à travers une enveloppe censée être encore fermée. On évite donc de jamais
      animer le recto/verso : ils restent fixes et opaques.
   Solution : seul le carton bouge, et il monte suffisamment haut pour sortir
   ENTIÈREMENT de l'enveloppe (qui, elle, ne bouge jamais). Sur les petits écrans
   (moins de hauteur disponible), une règle dédiée réduit la taille de
   l'enveloppe pour que cette sortie ne chevauche jamais le titre. */
.insert-card {
  animation: cardUp 1.7s 2.3s cubic-bezier(0.22, 0.75, 0.3, 1) forwards;
}
@keyframes cardUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-285px);
  }
}
@media (max-height: 820px) {
  .envelope-wrap {
    top: 58%;
    transform: translate(-50%, -50%) scale(0.6);
  }
}
@media (max-height: 640px) {
  .envelope-wrap {
    top: 60%;
    transform: translate(-50%, -50%) scale(0.5);
  }
}