/* ===================================================================
   À PERSONNALISER : la date, l'heure et le lieu sont en haut
   de script.js (objet WEDDING). La photo = fichier "photo.jpeg" placé
   à côté de index.html.
   =================================================================== */
:root {
  --bg: #ffffff;
  --ink: #1d1d1b;
  --ink-soft: #5d5b55;
  --paper: #ebeae6;
  --paper-dark: #dddcd7;
  --paper-light: #f3f2ee;
  --seal: #1e1e1e;
  --line: #d8d5cc;
  --sage: #7d8a5a;
  --card: #fffefb;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
body.opened { overflow-y: auto; }
.date, .countdown b { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Écran d'accueil : l'enveloppe ---------- */
.stage {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 40px;
  padding: 16px;
  transition: opacity .9s ease, transform .9s ease;
  z-index: 10;
  /* mobile : pas de surbrillance bleue au toucher ni de sélection du texte */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.stage.gone { opacity: 0; transform: scale(1.06); pointer-events: none; }

.headline {
  font-family: "Mrs Saint Delafield", cursive;
  font-size: clamp(46px, 9vw, 72px);
  font-weight: 400;
  line-height: .8;
  text-align: center;
  transform: rotate(-6deg);
  opacity: 0;
  animation: write 1.6s .3s ease forwards;
}
.headline span { display: block; }
.headline span + span { margin-left: .4em; }
@keyframes write {
  /* marges négatives : laisse dépasser les hampes et accents de la cursive */
  from { opacity: 0; clip-path: inset(-.6em 100% -.6em -.3em); }
  to   { opacity: 1; clip-path: inset(-.6em -.3em -.6em -.3em); }
}

.envelope-wrap {
  position: relative;
  width: min(370px, 74vw);
  aspect-ratio: 3 / 2;
  opacity: 0;
  animation: rise 1s .1s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

.envelope {
  all: unset;
  position: absolute; inset: 0;
  cursor: pointer;
  perspective: 900px;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.10)) drop-shadow(0 2px 3px rgba(0,0,0,.08));
}
.envelope:focus-visible { outline: 2px solid var(--sage); outline-offset: 8px; border-radius: 4px; }
.env-layer { position: absolute; inset: 0; }
.paper {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.env-back { z-index: 1; background-color: var(--paper-dark); border-radius: 2px; }
.env-front {
  z-index: 3;
  background-color: var(--paper-light);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}
/* plis latéraux */
.env-front::before, .env-front::after {
  content: ""; position: absolute; inset: 0;
}
.env-front::before {
  background: linear-gradient(to top right, transparent 49.6%, rgba(0,0,0,.05) 50%, transparent 50.6%);
  clip-path: polygon(0 0, 50% 56%, 0 100%);
}
.env-front::after {
  background: linear-gradient(to top left, transparent 49.6%, rgba(0,0,0,.05) 50%, transparent 50.6%);
  clip-path: polygon(100% 0, 50% 56%, 100% 100%);
}
.flap {
  z-index: 4;
  height: 62%;
  bottom: auto;
  background-color: var(--paper);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform .9s cubic-bezier(.4,0,.2,1), z-index 0s .45s;
}
.flap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.06));
}
.opened-flap .flap { transform: rotateX(180deg); z-index: 1; }

.seal {
  position: absolute; z-index: 5;
  left: 50%; top: 62%;
  width: 19%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 48% 52% 50% 50% / 52% 47% 53% 48%;
  background: radial-gradient(circle at 38% 32%, #4a4a4a 0%, #262626 38%, #111 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.04), inset 0 -3px 6px rgba(0,0,0,.6);
  display: grid; place-items: center;
  transition: transform .5s ease, opacity .5s ease;
  animation: sealIn .7s 1s cubic-bezier(.3,1.6,.5,1) backwards;
}
.seal::before {
  content: ""; position: absolute; inset: 14%;
  border-radius: 50%;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.08);
}
.seal span {
  position: relative;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(22px, 5.4vw, 32px);
  color: #e9e1cc; /* beige ivoire, ton des hortensias et du papier */
  text-shadow: 0 1px 1px rgba(0,0,0,.8), 0 0 6px rgba(233,225,204,.25);
  letter-spacing: -2px;
  line-height: 1;
  /* recentre l'encre de la cursive, décalée à droite et vers le haut par la police */
  transform: translate(-.135em, .11em);
}
@keyframes sealIn { from { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
.envelope:hover .seal { transform: translate(-50%, -50%) scale(1.06) rotate(-4deg); }
.opening .seal { transform: translate(-50%, -50%) scale(.4) rotate(40deg) !important; opacity: 0; }

/* mini carte glissée dans l'enveloppe */
.mini-card {
  position: absolute; z-index: 2;
  left: 5%; right: 5%; top: 6%; height: 88%;
  background: var(--card);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  display: flex; align-items: center; gap: 6%;
  padding: 6%;
  transition: transform 1.1s cubic-bezier(.3,.7,.2,1);
}
.card-out .mini-card { transform: translateY(-62%); }
.mini-card .ph {
  flex: 0 0 38%; height: 100%;
  border-radius: 999px 999px 0 0;
  background: #eee center/cover no-repeat;
}
.mini-card .txt { text-align: center; flex: 1; }
.mini-card .txt b {
  display: block; font-family: "Pinyon Script", cursive; font-weight: 400;
  font-size: clamp(18px, 4.5vw, 28px); line-height: 1.1;
}
.mini-card .txt small { font-size: clamp(9px, 2vw, 12px); letter-spacing: .25em; text-transform: uppercase; color: var(--ink-soft); }

.cta {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(22px, 5vw, 32px);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  opacity: 0;
  animation: fadeIn 1s 1.6s forwards, breathe 2.4s 2.6s ease-in-out infinite;
  transition: opacity .4s;
  margin-top: 24px;
}
.opening .cta { animation: none; opacity: 0; }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- Bouquets ---------- */
.bouquet { position: absolute; pointer-events: none; z-index: 6; }
.bouquet svg { width: 100%; height: auto; overflow: visible; display: block; }
.bouquet.tl { width: 52%; left: -22%; top: -62%; }
.bouquet.br { width: 52%; right: -22%; bottom: -78%; transform: scaleX(-1); }
.bouquet .grow { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: bloom 1.1s cubic-bezier(.2,.9,.3,1.2) forwards; }
.bouquet .sway { transform-box: view-box; transform-origin: 55% 45%; animation: sway 6s ease-in-out infinite; }
@keyframes bloom { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes sway { 0%,100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }

/* ---------- Invitation dévoilée ---------- */
.invite {
  min-height: 100%;
  display: none;
  padding: 90px 16px 90px;
  background: radial-gradient(ellipse at top, #fbfaf6, #f2f0ea);
}
.opened .invite { display: block; }
.card {
  position: relative;
  max-width: 520px; margin: 0 auto;
  background: var(--card);
  padding: 44px clamp(22px, 6vw, 48px) 48px;
  box-shadow: 0 30px 60px -20px rgba(40,35,20,.18), 0 2px 6px rgba(0,0,0,.05);
  text-align: center;
  opacity: 0; transform: translateY(40px) scale(.96);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.card::before {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.shown .card { opacity: 1; transform: none; }
.card .bouquet.tl { width: 30%; left: -9%; top: -6%; }
.card .bouquet.br { width: 30%; right: -9%; bottom: -5%; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s ease; }
.shown .reveal { opacity: 1; transform: none; }
.shown .reveal:nth-child(2) { transition-delay: .35s; }
.shown .reveal:nth-child(3) { transition-delay: .55s; }
.shown .reveal:nth-child(4) { transition-delay: .75s; }
.shown .reveal:nth-child(5) { transition-delay: .95s; }
.shown .reveal:nth-child(6) { transition-delay: 1.15s; }
.shown .reveal:nth-child(7) { transition-delay: 1.35s; }
.shown .reveal:nth-child(8) { transition-delay: 1.55s; }

.photo {
  width: min(300px, 80%);
  margin: 0 auto 30px;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 4px 4px;
  overflow: hidden;
  background: linear-gradient(160deg, #eceae3, #dedbd1);
  position: relative;
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .missing {
  position: absolute; inset: 0; display: none; place-items: center;
  font-style: italic; color: var(--ink-soft); padding: 20px;
}
.photo.no-photo .missing { display: grid; }
.photo.no-photo img { display: none; }

.std {
  font-family: "Mrs Saint Delafield", cursive;
  font-size: clamp(58px, 15vw, 84px);
  line-height: .9;
  margin: 20px 0 4px;
  font-weight: 400;
}
.names {
  font-family: "Pinyon Script", cursive;
  font-size: clamp(38px, 10vw, 54px);
  font-weight: 400;
  line-height: 1.1;
}
.names em { font-style: normal; font-family: "Cormorant Garamond", serif; font-size: .6em; padding: 0 .2em; color: var(--sage); }
.vow { margin-top: 18px; }
/* « — se diront OUI le — » encadré de deux filets qui s'estompent */
.sub {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-style: italic; font-size: clamp(20px, 6vw, 26px); color: var(--ink-soft);
}
/* la phrase reste sur une seule ligne, ce sont les filets qui rétrécissent */
.sub .vow-text { white-space: nowrap; }
.sub::before, .sub::after {
  content: ""; flex: 0 1 46px; min-width: 14px; height: 1px;
  background: linear-gradient(to right, transparent, var(--sage));
}
.sub::after { background: linear-gradient(to left, transparent, var(--sage)); }
/* capitales à la hauteur des hampes de l'italique (d, l, t) pour rester dans la ligne */
.sub .oui {
  font-style: normal; font-weight: 600; font-size: 1.04em;
  letter-spacing: .08em; margin: 0 .01em 0 .15em; /* espaces mesurés égaux de chaque côté */
  color: var(--ink);
}
.date {
  display: inline-block;
  margin-top: 14px;
  padding: 14px 4px 14px calc(4px + .22em); /* compense l'espacement après la dernière lettre */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.place { font-size: 19px; color: var(--ink-soft); margin-top: 6px; }

.countdown { display: flex; justify-content: center; gap: clamp(10px, 4vw, 26px); margin-top: 30px; }
.countdown div { min-width: 56px; }
.countdown b { display: block; font-size: clamp(30px, 8vw, 40px); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown small { font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-soft); }

.follow { font-style: italic; font-size: 19px; margin-top: 30px; color: var(--ink-soft); }
.btn {
  display: inline-block; margin-top: 22px;
  font: 600 13px/1 "Cormorant Garamond", serif; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); padding: 14px 22px; cursor: pointer;
  transition: background .3s, color .3s;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
/* survol seulement avec une souris : sur mobile il resterait « collé » après le toucher */
@media (hover: hover) {
  .btn:hover { background: var(--ink); color: var(--card); }
}
.btn:active { background: var(--ink); color: var(--card); }

/* pétales qui tombent à l'ouverture */
.petal {
  position: fixed; top: -20px; z-index: 20; pointer-events: none;
  width: 12px; height: 9px; border-radius: 60% 40% 60% 40%;
  background: #f3f0e4; box-shadow: inset -1px -1px 2px rgba(0,0,0,.06);
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* petits écrans : la date et le bouton tiennent sur une seule ligne */
@media (max-width: 420px) {
  .date { font-size: 18px; letter-spacing: .14em; padding-left: calc(4px + .14em); white-space: nowrap; }
  .btn { letter-spacing: .16em; padding: 14px 16px; white-space: nowrap; }
}
@media (max-width: 340px) {
  .btn { letter-spacing: .1em; padding: 14px 12px; }
}