/* Save the date — Gabrielle & Cédric
   / : l'enveloppe cachetée plein écran · /invitation.html : l'enveloppe ouverte, puis quelques mots.
   Palette : ivoire, pivoine, corail, pêche, sauge. Parisienne · Cormorant Garamond · Beth Ellen. */

:root {
  --ivory: #faf7f2;
  --paper: #fffdf9;
  --peony: #d86aa5;
  --orchid: #f2a8d1;
  --coral: #ff8a5c;
  --peach: #ffb28a;
  --butter: #ffd76a;
  --sage: #a8c29e;
  --silver: #c8d9c3;
  --lilac: #e3d6f7;
  --powder: #b8d5f3;

  --sage-ink: #6f8f66;
  --peony-ink: #b04d86;
  --ink: #5a4852;
  --ink-soft: #8a7881;

  /* trois tailles seulement : titre (prénoms), sous-titre (date, lieu), petit texte */
  --fs-title: clamp(36px, 8vmin, 56px);
  --fs-sub: clamp(17px, 2.6vmin, 21px);
  --fs-small: clamp(12px, 1.7vmin, 14px);

  --olive: #6f7d34;
  --olive-light: #a7b16f;
  --cream-dark: #c7b08a;

  --script: "Parisienne", "Snell Roundhand", cursive;
  --serif: "Cormorant Garamond", Georgia, serif;
  --small: "Beth Ellen", "Segoe Script", cursive;

  /* un petit cœur au lieu de la main, sur tout ce qui se clique */
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.7 1.3 5.3 3.2 1.6-1.9 3.1-3.2 5.3-3.2 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z' fill='%23d86aa5' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 12 12, pointer;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
img { display: block; max-width: none; height: auto; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1.5;
  text-align: center;
  background:
    radial-gradient(55vw 40vw at 50% 45%, rgba(255, 255, 255, .75), transparent 70%),
    radial-gradient(60vw 40vw at 0% 0%, rgba(242, 168, 209, .16), transparent 70%),
    radial-gradient(60vw 40vw at 100% 100%, rgba(200, 217, 195, .3), transparent 70%),
    var(--ivory);
  background-attachment: fixed;
}
/* grain de papier, comme une vraie photo à plat */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  background: url("/img/papier.jpg") center / cover;
  mix-blend-mode: multiply;
}

a, label.choice { cursor: var(--heart); }
.small { font-family: var(--small); }
.caps { font-family: var(--serif); text-transform: uppercase; letter-spacing: .28em; }
.amp { color: var(--coral); }
/* l'espacement des lettres ajoute un blanc après la dernière : on le compense à gauche pour rester centré */
.env-hint { padding-left: .3em; }
.card-kicker { padding-left: .2em; }
.card-date { padding-left: .18em; }
.info-join, .info-date, .info-ceremony, .line > .caps, .choices legend, .foot { padding-left: .3em; }
.info-soon, .reply-title { padding-left: .24em; }
.choice > span:last-child, .send > span { margin-right: -.24em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- langue ---------- */
.lang {
  position: fixed;
  z-index: 50;
  top: 8px;
  right: 12px;
  display: flex;
  gap: 2px;
  align-items: center;
  font-size: var(--fs-small);
  letter-spacing: .12em;
  color: var(--ink-soft);
}
.lang button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 6px 5px;
  cursor: var(--heart);
  border-bottom: 1px solid transparent;
}
.lang button[aria-pressed="true"] { color: var(--peony-ink); border-bottom-color: var(--peony); }

/* ================= page fermée : l'enveloppe plein écran ================= */
.closed-page { overflow: hidden; background: #f6e2d7; }
.closed-page::before { opacity: .12; }

.env-screen {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  cursor: var(--heart);
  -webkit-tap-highlight-color: transparent;
}
.env-screen:focus-visible { outline: 2px dashed var(--peony); outline-offset: -10px; }

/* la photo de l'enveloppe couvre l'écran; la pointe du rabat reste au centre */
.env-full {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(104vw, calc(110svh * 2039 / 1473));
  aspect-ratio: 2039 / 1473;
  translate: -50% -50%;
}
.env-photo { width: 100%; height: 100%; }
/* le cachet doré sur la pointe du rabat : il tient l'enveloppe fermée */
.env-seal {
  position: absolute;
  left: 49.8%;
  top: 74.6%;
  width: clamp(100px, 24vmin, 168px);
  translate: -50% -55%;
  filter: drop-shadow(0 4px 6px rgba(90, 60, 30, .35));
  transition: scale .35s ease, opacity .35s ease;
}

/* le texte, centré sur le rabat, bien au-dessus de la dentelle */
.env-text {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 33%;
  translate: -50% -50%;
  width: min(84vw, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.env-title { font-family: var(--small); font-size: calc(var(--fs-small) * 1.05); line-height: 1.6; color: var(--ink-soft); }
.env-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: .5em 0 .35em;
  font-family: var(--script);
  font-size: clamp(66px, 16vmin, 110px);
  line-height: 1.05;
  color: var(--olive);
}
.env-names .amp { color: var(--olive-light); font-size: .6em; }
/* le « & » sort du flux : « Cédric » reste centré pile au-dessus de « Gabrielle » */
.env-first { position: relative; }
.env-first .amp { position: absolute; left: 100%; bottom: .2em; margin-left: .25em; line-height: 1; }

.env-hint {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 89%;
  font-size: var(--fs-small);
  letter-spacing: .3em;
  color: var(--ink);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .45; } }

/* écran large : l'enveloppe remonte un peu pour laisser de l'air sous le cachet */
@media (min-aspect-ratio: 1/1) {
  .env-full { translate: -50% -56%; }
  .env-text { top: 28%; }
  .env-names { font-size: clamp(66px, 14vmin, 110px); }
  .env-hint { top: 88.5%; }
}
.closed-page .lang { background: rgba(255, 253, 249, .7); border-radius: 999px; padding: 0 6px; }

/* au toucher : le cachet saute, puis on change de page */
.opening .env-seal { scale: 1.15; opacity: 0; }
.opening .env-hint { animation: none; opacity: 0; transition: opacity .2s; }

/* ================= page ouverte ================= */
/* deux couleurs de texte seulement : olive (titres) et un neutre foncé (le reste) */
.open-page {
  --ink: #4f4640;
  --ink-soft: var(--ink);
  --peony-ink: var(--ink);
  --peony: var(--olive);
  --coral: var(--ink);
  --sage-ink: var(--ink);
}

.scene-wrap { position: relative; z-index: 1; display: flex; justify-content: center; overflow: clip; }
.scene { position: relative; display: block; }

/* la scène : juste assez haute pour l'enveloppe et ce qui en dépasse */
.opened { width: min(100vw, 640px, calc(70svh / .95)); aspect-ratio: 1 / .95; }

/* l'enveloppe et tout ce qui l'entoure forment un seul bouquet */
.cluster {
  position: absolute;
  left: 16%;
  width: 68%;
  bottom: 0;
  aspect-ratio: 902 / 1131;
  container-type: inline-size;
}
.c-el {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  rotate: var(--r, 0deg);
  z-index: var(--z, 3);
  margin: 0;
  pointer-events: none;
}
.cluster img.c-el:not(.env-layer) { filter: drop-shadow(0 .8cqw 1cqw rgba(79, 70, 64, .25)); }
.cluster .fly { filter: hue-rotate(var(--hue, 0deg)) var(--mute, saturate(1)) drop-shadow(0 .8cqw .8cqw rgba(79, 70, 64, .25)) !important; }

.env-layer    { --x: 0%; --y: 0%; --w: 100%; --z: 2; filter: drop-shadow(0 2cqw 3cqw rgba(79, 70, 64, .2)); }
.env-front    { --z: 6; }

/* le contenu, glissé dans l'ouverture */
.polaroid { aspect-ratio: 830 / 988; }
.polaroid img { position: absolute; left: 8.2%; top: 7%; width: 82.6%; height: 71.4%; object-fit: cover; }
.pol-frame { position: absolute; inset: 0; background: url("/img/v2/polaroid.webp") center / 100% 100% no-repeat; }
.cluster .polaroid { filter: drop-shadow(0 1cqw 1.4cqw rgba(79, 70, 64, .3)); }
.pol-back     { --x: 9%;  --y: 8%;  --w: 42%; --r: -8deg; --z: 3; }
.pol-front    { --x: 12%; --y: 21%; --w: 44%; --r: 5deg;  --z: 5; } /* devant la carte */
.pol-back img, .pol-front img { object-position: 50% 50%; }

.card {
  --x: 48%; --y: 11%; --w: 45%; --r: 4deg; --z: 4;
  aspect-ratio: .6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 3cqw 8cqw 7cqw; /* décalé à droite : la photo du devant mord sur le bord gauche */
  background: var(--paper) url("/img/papier.jpg") center / cover;
  background-blend-mode: multiply;
  box-shadow: 0 1cqw 2cqw -1cqw rgba(79, 70, 64, .45);
}
.card::before {
  content: "";
  position: absolute;
  inset: 2cqw;
  border: 1px solid var(--sage);
  pointer-events: none;
}
/* le texte de la carte fait partie de l'image : il suit sa taille */
.card-kicker { margin: 0; font-size: 2.3cqw; letter-spacing: .2em; color: var(--ink); }
.card-kicker .amp { color: var(--cream-dark); }
.card-title { margin: 3cqw 0 0; text-wrap: balance; font-family: var(--small); font-weight: 400; font-size: 5.4cqw; line-height: 1.25; color: var(--olive); }
.card-date { margin: 3.5cqw 0 0; font-size: 2.6cqw; letter-spacing: .18em; color: var(--ink); }

/* petit napperon « G & C » glissé dans l'enveloppe, derrière la poche */
.badge { --x: 21%; --y: 44%; --w: 36%; --r: -6deg; --z: 5; filter: drop-shadow(0 .8cqw 1cqw rgba(79, 70, 64, .25)); }
.badge img { width: 100%; }
.badge > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: .24em; /* la Parisienne monte haut : on la redescend au centre optique */
  font-family: var(--script);
  font-size: 10.5cqw;
  line-height: 1;
  color: var(--olive);
}
.badge .amp { color: var(--cream-dark); font-size: .55em; margin: 0 .2em; }


/* fleurs, papillons et alliances : collés aux bords de l'enveloppe */
.bow          { --x: 56%;  --y: 54%; --w: 20%; --r: 16deg;  --z: 5; }
/* comme la maquette : une grappe à chaque coin du rabat qui retombe le long du flanc,
   un brin sur la carte, une tulipe qui pointe derrière la photo ; le bas reste nu */
.f-tulipe-1   { --x: -3%;  --y: 1%;  --w: 15%; --r: -34deg; --z: 2; }
.f-lys        { --x: 72%;  --y: -2%; --w: 20%; --r: 24deg;  --z: 6; }
/* à gauche, au coin de la poche */
.f-blanches   { --x: -16%; --y: 40%; --w: 26%; --r: -30deg; --z: 8; }
.f-dahlia-rose{ --x: -10%; --y: 48%; --w: 22%; --r: -8deg;  --z: 9; }
.f-tulipe-2   { --x: -7%;  --y: 60%; --w: 14%; --r: 8deg;   --z: 8; }
/* à droite, un peu plus haut */
.f-rose       { --x: 86%;  --y: 30%; --w: 23%; --r: 20deg;  --z: 8; }
.f-corail     { --x: 90%;  --y: 42%; --w: 19%;              --z: 9; }
.f-geranium   { --x: 86%;  --y: 53%; --w: 20%; --r: 70deg;  --z: 8; }
.f-pap1       { --x: 70%;  --y: -3%; --w: 12%; --r: 20deg;  --z: 9; }
.f-pap2       { --x: -8%;  --y: 16%; --w: 11%; --r: -22deg; --z: 9; }
.f-pap3       { --x: 62%;  --y: 70%; --w: 10%; --r: -12deg; --z: 9; }

/* ---------- les mots, 1,5 cm sous l'enveloppe ---------- */
.info { position: relative; z-index: 1; max-width: 500px; margin: 0 auto; padding: 1.5cm 16px 80px; }
/* les croquis, en fond autour de l'enveloppe (placés depuis le centre) */
.doodles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scene-wrap > .scene { z-index: 1; }
.bg-doodle { position: absolute; opacity: .55; pointer-events: none; }
.d-alliances { width: 96px; left: calc(50% + 90px); top: 0; rotate: 8deg; }
.d-cupidon { width: 130px; left: calc(50% - 430px); top: 6%; rotate: -8deg; }
.d-gateau { width: 84px; left: calc(50% - 410px); top: 42%; rotate: -6deg; }
/* les verres penchés l'un vers l'autre, un petit espace entre les bords */
.d-cheers { --gw: 26px; display: flex; gap: calc(var(--gw) * 1.1); left: calc(50% + 330px); top: 24%; }
.d-cheers img { width: var(--gw); transform-origin: 50% 100%; }
.d-cheers img:first-child { rotate: 10deg; }
.d-cheers img:last-child { rotate: -10deg; scale: -1 1; }
.d-iris   { width: 96px; left: calc(50% + 280px); top: 58%; rotate: 8deg; }
.d-feuillage { width: 60px; left: calc(50% - 330px); top: 80%; rotate: 40deg; }
@media (max-width: 700px) {
  .bg-doodle { opacity: .3; }
  /* sur téléphone, les croquis se glissent dans les marges */
  .scene-wrap { padding-top: 44px; }
  .d-cupidon { left: 10px; top: 2px; width: 78px; rotate: -6deg; }
  .d-alliances { left: calc(50% - 20px); top: 2px; width: 50px; }
  .d-gateau { left: 2px; top: 80%; width: 48px; }
  .d-cheers { left: auto; right: 6px; top: 26%; --gw: 16px; }
  .d-iris   { left: auto; right: 2px; top: 86%; width: 52px; }
  .d-feuillage { left: 2px; top: 58%; width: 30px; rotate: 20deg; }
}
.manoir { width: 110px; margin: 0 auto 32px; }
.info-join { margin: 0; font-size: var(--fs-small); letter-spacing: .3em; color: var(--ink); }
.info-place { margin: 2px 0 0; font-family: var(--script); font-size: var(--fs-title); line-height: 1.15; color: var(--olive); }
.info-place a { color: inherit; text-decoration: none; cursor: var(--heart); background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat; transition: background-size .3s ease; }
.info-place a:hover { background-size: 100% 1px; }
.info-date { margin: 16px 0 0; font-size: var(--fs-small); letter-spacing: .3em; color: var(--ink); }
.info-ceremony { margin: 10px 0 0; font-size: var(--fs-small); letter-spacing: .3em; color: var(--olive); }
.info-soon { margin: 96px 0 0; font-size: var(--fs-small); letter-spacing: .24em; color: var(--ink); }

.timer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 320px;
  margin: 72px auto 0;
}
.timer > div {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--sage);
  outline: 1px solid var(--silver);
  outline-offset: 3px;
}
.timer b { font-weight: 600; font-size: var(--fs-sub); line-height: 1; color: var(--coral); font-variant-numeric: lining-nums tabular-nums; }
.timer span { margin-top: 2px; font-size: var(--fs-small); font-style: italic; line-height: 1.1; color: var(--ink-soft); }

/* ---------- carte-réponse ---------- */
.reply { max-width: 340px; margin: 20px auto 0; text-align: center; }
.reply-title {
  text-wrap: balance;
  margin: 0 -80px 48px; /* plus large que le formulaire : tient sur une ligne */
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: .24em;
  text-transform: uppercase;
  text-align: center;
  color: var(--olive);
}
.line { display: block; margin: 0 0 32px; }
/* mêmes petites capitales que la date */
.line > .caps { display: block; font-size: var(--fs-small); letter-spacing: .3em; line-height: 1.8; color: var(--ink); }
.line input {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--serif);
  font-size: var(--fs-sub);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--sage-ink);
  border-radius: 0;
  padding: 2px 2px 4px;
}
.line input:focus { outline: none; border-bottom: 1px solid var(--peony); }
.line input[aria-invalid="true"] { border-bottom: 1.5px solid var(--coral); }
.line input::placeholder { color: #b7a9b0; font-family: var(--small); font-size: .9em; }

.plus-one { margin: 4px 0 12px; padding: 8px 12px 2px; background: rgba(200, 217, 195, .28); border-top: 1px solid var(--sage); border-bottom: 1px solid var(--sage); }
.plus-one-title { margin: 0; font-size: var(--fs-small); font-style: italic; color: var(--sage-ink); }

.choices { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; justify-content: center; margin: 4px 0 28px; padding: 0; border: 0; }
.choices legend { width: 100%; margin: 0 0 6px; padding-top: 0; padding-bottom: 0; padding-right: 0; font-size: var(--fs-small); letter-spacing: .3em; color: var(--ink); }
.choice { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: var(--heart); font-size: var(--fs-small); letter-spacing: .24em; text-transform: uppercase; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: var(--heart); }
.dot { width: 15px; height: 15px; border: 1px solid var(--sage-ink); border-radius: 50%; display: inline-block; transition: background-color .2s, box-shadow .2s; }
.choice input:checked + .dot { background: var(--peony); border-color: var(--peony); box-shadow: inset 0 0 0 3px var(--ivory); }
/* « je ne pourrai pas venir » : sur sa propre ligne, sous courriel / texto */
.choice-absent { flex-basis: 100%; justify-content: center; margin-top: 6px; letter-spacing: .12em; }
.choice-absent > span:last-child { margin-right: -.12em; }
.choice input:focus-visible + .dot { outline: 2px solid var(--orchid); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.error { margin: 0 0 8px; font-size: var(--fs-small); font-style: italic; color: var(--ink); text-align: center; }
.error:empty { display: none; }

.send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 80px auto 0;
  padding: 12px 30px;
  font-family: var(--serif);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--sage);
  border-radius: 999px;
  outline: 1px solid var(--silver);
  outline-offset: 3px;
  cursor: var(--heart);
  transition: scale .2s ease, background-color .2s;
}
.send img { width: 34px; filter: drop-shadow(0 2px 3px rgba(90, 40, 70, .3)); transition: rotate .3s ease; }
.send:hover { background: rgba(111, 125, 52, .08); }
.send:hover img { rotate: -12deg; }
.send:active { scale: .96; }
.send[disabled] { opacity: .6; cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--orchid); outline-offset: 3px; }

.thanks { text-align: center; padding: 6px 0; }
.thanks:focus { outline: none; }
/* le bec : chacun arrive de son côté en marchant, ils se penchent, un cœur apparaît.
   Sans animation, on voit directement la fin (penchés, cœur visible). */
.kiss { position: relative; width: min(260px, 100%); height: 104px; margin: 0 auto 20px; }
.kiss .fig {
  position: absolute; bottom: 0; width: 40px; height: 90px; overflow: visible;
  fill: none; stroke: var(--olive); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transform-origin: 50% 100%;
}
.fig-a { left: calc(50% - 46px); rotate: 13deg; }
.fig-b { left: calc(50% + 6px); rotate: -13deg; }
.kiss .leg { transform-origin: 20px 55px; rotate: -9deg; }
.kiss .leg-2 { rotate: 9deg; }
.fig-b .leg { transform-origin: 20px 62px; rotate: 0deg; }
.kiss .cat {
  position: absolute; bottom: 0; left: calc(50% - 100px); width: 46px; overflow: visible;
  fill: none; stroke: var(--olive); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.cat .paw, .cat .tail { transform-box: fill-box; transform-origin: 50% 0; }
.cat .tail { transform-origin: 100% 100%; }
.kiss-heart { position: absolute; left: calc(50% - 9px); top: 0; width: 18px; fill: #d86aa5; }

.motion .fig-a { animation: walk-a 2s cubic-bezier(.3, .6, .4, 1) both, lean-a .45s 2s ease-out both; }
.motion .fig-b { animation: walk-b 2s cubic-bezier(.3, .6, .4, 1) both, lean-b .45s 2s ease-out both; }
.motion .kiss .leg { animation: step .4s ease-in-out 5 alternate; }
.motion .kiss .leg-2 { animation-direction: alternate-reverse; }
.motion .kiss .cat { animation: walk-a 2s cubic-bezier(.3, .6, .4, 1) both; }
.motion .cat .paw { animation: paw .2s ease-in-out 10 alternate; }
.motion .cat .paw-2 { animation-direction: alternate-reverse; }
.motion .cat .tail { animation: tail 1.6s 2s ease-in-out infinite alternate; }
@keyframes paw { from { rotate: -24deg; } to { rotate: 24deg; } }
@keyframes tail { from { rotate: -8deg; } to { rotate: 10deg; } }
.motion .kiss-heart { animation: heart-pop .7s 2.35s cubic-bezier(.3, 1.6, .5, 1) both, heart-float 2.4s 3.05s ease-in-out infinite alternate; }
@keyframes walk-a { from { translate: -130px 0; } to { translate: 0 0; } }
@keyframes walk-b { from { translate: 130px 0; } to { translate: 0 0; } }
@keyframes lean-a { from { rotate: 0deg; } to { rotate: 13deg; } }
@keyframes lean-b { from { rotate: 0deg; } to { rotate: -13deg; } }
@keyframes step { from { rotate: -22deg; } to { rotate: 22deg; } }
@keyframes heart-pop { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes heart-float { to { translate: 0 -5px; } }

.thanks-title { margin: 0; font-family: var(--script); font-weight: 400; font-size: var(--fs-title); color: var(--peony); }
.thanks p { margin: 2px 0 10px; font-size: var(--fs-sub); font-style: italic; }
.link { font-size: var(--fs-small); color: var(--peony-ink); background: none; border: 0; padding: 4px; cursor: var(--heart); text-decoration: underline; text-underline-offset: 4px; }

/* comme « Touchez pour ouvrir » sur l’enveloppe fermée */
.foot { margin: 88px 0 0; font-size: calc(var(--fs-small) * .85); letter-spacing: .3em; }
.foot a { color: #5a4852; opacity: .45; text-decoration: none; transition: opacity .2s; }
.foot a:hover, .foot a:focus-visible { opacity: .8; }

/* ---------- mouvement ---------- */
.motion .sway { animation: sway 9s ease-in-out infinite alternate; }
.motion .sway:nth-of-type(2n) { animation-duration: 11s; animation-delay: -4s; }
.motion .sway:nth-of-type(3n) { animation-duration: 13s; animation-delay: -7s; }
@keyframes sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
.motion .fly { animation: flutter .32s ease-in-out infinite alternate, fly-a 16s ease-in-out infinite; }
.motion .f-pap2 { animation-name: flutter, fly-b; animation-duration: .28s, 19s; animation-delay: -.1s, -6s; }
.motion .f-pap3 { animation-name: flutter, fly-c; animation-duration: .36s, 22s; animation-delay: -.2s, -11s; }
/* les ailes battent (on écrase la largeur), le corps fait des boucles */
@keyframes flutter { to { scale: .45 1; } }
@keyframes fly-a {
  0%, 100% { translate: 0 0; }
  20% { translate: -7vmin 4vmin; rotate: calc(var(--r, 0deg) - 14deg); }
  45% { translate: -12vmin -2vmin; rotate: calc(var(--r, 0deg) - 4deg); }
  70% { translate: -3vmin -5vmin; rotate: calc(var(--r, 0deg) + 12deg); }
}
@keyframes fly-b {
  0%, 100% { translate: 0 0; }
  25% { translate: 6vmin -5vmin; rotate: calc(var(--r, 0deg) + 16deg); }
  50% { translate: 11vmin 2vmin; rotate: calc(var(--r, 0deg) + 30deg); }
  75% { translate: 4vmin 6vmin; rotate: calc(var(--r, 0deg) + 6deg); }
}
@keyframes fly-c {
  0%, 100% { translate: 0 0; }
  30% { translate: -8vmin -6vmin; rotate: calc(var(--r, 0deg) - 18deg); }
  55% { translate: -2vmin -11vmin; rotate: calc(var(--r, 0deg) + 8deg); }
  80% { translate: 5vmin -4vmin; rotate: calc(var(--r, 0deg) + 20deg); }
}

/* la page ouverte se pose doucement */
.motion .open-page .scene { opacity: 0; scale: 1.03; transition: opacity .8s ease, scale 1.2s cubic-bezier(.2, .8, .3, 1); }
.motion.dealt .open-page .scene { opacity: 1; scale: 1; }

.petal {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: url("/img/kit/petale-1.webp") center / contain no-repeat;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .env-hint { animation: none; }
}