/* ==========================================================================
   Invitation Les Bernadins · 100 ans — styles
   Couleurs et polices : bloc :root ci-dessous.
   ========================================================================== */

/* Mise en page : fond velours bordeaux ; une enveloppe ivoire au centre que l'invité ouvre en touchant le sceau,
   puis la carte papier ivoire à son nom avec le panneau bordeaux en arche.
   Design volontairement identique en mode clair et sombre (une seule ambiance). */
@font-face { font-family: "Parisienne"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/parisienne-400.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cinzel-500.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/cinzel-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/nunito-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/nunito-sans-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/nunito-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/nunito-sans-700.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --wine-950: #2a050c;
  --wine-900: #3d0812;
  --wine-800: #520d1a;
  --wine-700: #6d0a1b;
  --wine-600: #731422;
  --paper: #fbf6ee;
  --champagne: #f6e7cc;
  --gold: #c9a46b;
  --gold-light: #e9d1a0;
  --gold-deep: #94703e;
  --ink: #3a2622;
  --ink-soft: #7b645b;
  --script: "Parisienne", "Snell Roundhand", "Apple Chancery", cursive;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Nunito Sans", "Avenir Next", "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-card: 2.2s;                 /* après le toucher : moment où la carte apparaît */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--wine-800); overflow-x: hidden; }
body {
  margin: 0; min-height: 100vh;
  background: var(--wine-800); color: var(--champagne);
  font-family: var(--body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
html.js:not(.is-done) body { overflow: hidden; }
p, h1 { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.bg {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
  background:
    radial-gradient(110% 65% at 50% -8%, #8e1d2e 0%, rgba(142, 29, 46, 0) 62%),
    radial-gradient(90% 55% at 50% 112%, var(--wine-950) 0%, rgba(42, 5, 12, 0) 72%),
    linear-gradient(180deg, var(--wine-700) 0%, var(--wine-800) 45%, var(--wine-900) 100%);
}
.sparkles { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.sparkles i {
  position: absolute; bottom: -12px; left: var(--x);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: #f1dcae; box-shadow: 0 0 6px 2px rgba(233, 209, 160, .35);
  opacity: 0; animation: rise var(--t) linear var(--d) infinite;
}
@keyframes rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: .9; } 50% { opacity: .35; } 80% { opacity: .8; }
  100% { transform: translate3d(var(--w), -112vh, 0); opacity: 0; }
}

/* ---------- Page et carte ---------- */
.page {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh;
  padding: max(28px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.card {
  position: relative; width: 100%; max-width: 440px;
  padding: 12px; border-radius: 4px; overflow: hidden;
  background: radial-gradient(120% 60% at 50% 0%, #fffefb 0%, rgba(255, 254, 251, 0) 70%), var(--paper);
  color: var(--ink);
  box-shadow: 0 50px 90px -40px rgba(10, 0, 3, .9), 0 18px 36px -18px rgba(10, 0, 3, .55);
}
.frame { position: relative; padding: 38px 22px 10px; border: 1px solid var(--gold); text-align: center; }
.frame::before { content: ""; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; border: 1px solid rgba(201, 164, 107, .45); pointer-events: none; }
.corner { position: absolute; top: 10px; width: 34px; height: 34px; color: var(--gold); }
.corner--l { left: 10px; }
.corner--r { right: 10px; transform: scaleX(-1); }
.eyebrow { padding-left: .34em; font-family: var(--display); font-size: 10.5px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-deep); }
.for { margin-top: 18px; font-size: 15px; font-style: italic; color: var(--ink-soft); }
.guest { margin: 2px 0 12px; font-family: var(--script); font-weight: 400; font-size: 44px; line-height: 1.12; color: var(--wine-700); overflow-wrap: break-word; word-wrap: break-word; text-wrap: balance; }
.seats {
  display: inline-block; padding: 7px 16px 7px 12px;
  border: 1px solid rgba(201, 164, 107, .75); border-radius: 999px;
  font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wine-700);
  white-space: nowrap;
}
.seats svg { width: 12px; height: 12px; margin-right: 1px; vertical-align: -1px; fill: var(--wine-600); }
.seats svg:last-of-type { margin-right: 7px; }
.divider { display: flex; align-items: center; justify-content: center; width: 70%; max-width: 220px; margin: 22px auto; color: var(--gold); }
.divider span { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 164, 107, 0), currentColor); }
.divider span:last-child { background: linear-gradient(270deg, rgba(201, 164, 107, 0), currentColor); }
.divider svg { width: 11px; height: 11px; margin: 0 12px; fill: currentColor; }
.message { font-size: 16px; line-height: 1.6; color: var(--ink); }
.hosts { font-family: var(--script); font-size: 38px; line-height: 1.3; color: var(--wine-600); }
.heart { display: inline-block; width: .4em; height: .4em; margin: 0 .04em; vertical-align: .14em; fill: var(--gold); }
.age { margin-bottom: 6px; padding-left: .42em; font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; color: var(--gold-deep); }

.panel {
  position: relative; margin: 28px -12px 0; padding: 50px 20px 26px;
  border-radius: 50% 50% 2px 2px / 84px 84px 2px 2px;
  background: radial-gradient(120% 70% at 50% 0%, #8c1e30 0%, rgba(140, 30, 48, 0) 70%), var(--wine-600);
  color: var(--champagne);
}
.panel::before { content: ""; position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px; border: 1px solid rgba(217, 187, 132, .5); border-radius: 50% 50% 0 0 / 78px 78px 0 0; pointer-events: none; }
.panel-eyebrow { margin-bottom: 14px; padding-left: .34em; font-family: var(--display); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-light); }
.date { display: table; margin: 0 auto; border-collapse: collapse; }
.date-row { display: table-row; }
.date-side, .date-day { display: table-cell; vertical-align: middle; }
.date-side { width: 92px; padding: 9px 0; border-top: 1px solid rgba(217, 187, 132, .6); border-bottom: 1px solid rgba(217, 187, 132, .6); font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.date-day { padding: 0 16px; font-family: var(--display); font-size: 50px; font-weight: 500; line-height: 1; color: var(--paper); }
.date-month { margin-top: 10px; padding-left: .3em; font-family: var(--display); font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-light); }
.venue { display: inline-block; margin-top: 20px; padding: 10px 18px; border-radius: 14px; color: var(--champagne); text-decoration: none; text-align: left; -webkit-tap-highlight-color: transparent; }
.venue:active { background: rgba(246, 231, 204, .1); }
.venue svg { float: left; width: 24px; height: 24px; margin: 6px 10px 0 0; color: var(--gold-light); }
.venue-name { display: block; overflow: hidden; font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.venue-link { display: block; overflow: hidden; font-size: 13px; color: var(--gold-light); text-decoration: underline; text-decoration-color: rgba(233, 209, 160, .5); }
.dress { margin-top: 12px; }
.dress-label { display: block; padding-left: .3em; font-family: var(--display); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-light); }
.dress-value { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; }
.closing { margin-top: 16px; font-family: var(--script); font-size: 28px; line-height: 1.2; color: var(--gold-light); text-wrap: balance; }
.seal { position: absolute; top: -34px; right: 2px; width: 80px; height: 80px; color: var(--wine-700); transform: rotate(-14deg); filter: drop-shadow(0 6px 10px rgba(40, 4, 10, .35)); }
.seal text { font-family: var(--display); font-size: 8.4px; font-weight: 600; text-transform: uppercase; fill: currentColor; }

.actions { width: 100%; max-width: 360px; margin-top: 26px; text-align: center; }
.actions-label { margin-bottom: 10px; padding-left: .3em; font-family: var(--display); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-light); }
.btn {
  display: block; width: 100%; padding: 15px 20px; margin-bottom: 12px;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--display); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; line-height: 1.2;
  text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease), background-color .3s, filter .3s;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible, .link:focus-visible, .envelope:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.btn svg { width: 17px; height: 17px; margin-right: 8px; vertical-align: -3px; fill: none; stroke: currentColor; }
.btn--gold { color: var(--wine-800); background: linear-gradient(135deg, #f3dfb3 0%, #d6b27b 46%, #c59c60 54%, #ead1a0 100%); box-shadow: 0 16px 32px -16px rgba(233, 190, 120, .75), inset 0 1px 0 rgba(255, 255, 255, .65); }
.btn--ghost { color: var(--champagne); background: rgba(246, 231, 204, .05); border-color: rgba(217, 187, 132, .55); }
@media (hover: hover) {
  .btn--gold:hover { filter: brightness(1.05); transform: translateY(-2px); }
  .btn--ghost:hover { background: rgba(217, 187, 132, .14); }
  .venue:hover { background: rgba(246, 231, 204, .08); }
}
.btn-row { display: flex; margin: 0 -5px; }
.btn-row .btn { flex: 1 1 0; min-width: 0; margin: 0 5px 12px; padding: 13px 8px; font-size: 11px; letter-spacing: .08em; }
.signature { margin-top: 18px; font-family: var(--script); font-size: 30px; color: var(--gold-light); }
.signature .heart { fill: var(--gold); }
.dl-note { margin: -4px 0 14px; font-size: 13.5px; line-height: 1.45; color: rgba(246, 231, 204, .85); }
.link { margin-top: 14px; padding: 8px; border: 0; background: none; color: rgba(246, 231, 204, .75); font-size: 14px; text-decoration: underline; text-decoration-color: rgba(217, 187, 132, .5); text-underline-offset: 4px; cursor: pointer; }

/* ---------- Confettis ---------- */
.confetti { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 12; overflow: hidden; pointer-events: none; display: none; }
.is-open .confetti { display: block; }
.confetti i {
  position: absolute; top: -20px; left: var(--x);
  width: var(--w); height: calc(var(--w) * .55); background: var(--c); border-radius: 1px; opacity: 0;
  animation: fall var(--t) cubic-bezier(.25, .4, .55, 1) calc(var(--t-card) + .4s + var(--d)) both;
}
.confetti i.r { width: calc(var(--w) * .65); height: calc(var(--w) * .65); border-radius: 50%; }
@keyframes fall {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) rotateX(0deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--s), 108vh, 0) rotate(var(--r)) rotateX(720deg); }
}

/* ---------- Enveloppe (affichée seulement si JavaScript fonctionne) ---------- */
.stage {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 16px; text-align: center;
  background:
    radial-gradient(110% 65% at 50% -8%, #8e1d2e 0%, rgba(142, 29, 46, 0) 62%),
    linear-gradient(180deg, var(--wine-700) 0%, var(--wine-800) 45%, var(--wine-900) 100%);
}
.js .stage { display: flex; }
.stage-intro { animation: fadeUp .8s var(--ease) .2s both; }
.stage-eyebrow { display: block; padding-left: .34em; font-family: var(--display); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-light); }
.stage-name { display: block; margin-top: 4px; padding: 0 8px; font-family: var(--script); font-size: 40px; line-height: 1.15; color: var(--paper); overflow-wrap: break-word; word-wrap: break-word; }
.hint { margin-top: 30px; font-size: 15px; color: rgba(246, 231, 204, .8); animation: fadeUp .8s var(--ease) .9s both, pulse 2.4s ease-in-out 1.7s infinite; }

.envelope {
  position: relative; display: block;
  width: 84vw; max-width: 380px; margin-top: 46px; padding: 0;
  border: 0; background: none; cursor: pointer;
  -webkit-perspective: 1400px; perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
  animation: envelopeIn 1s var(--ease) .1s both, float 5s ease-in-out 1.1s infinite;
}
.envelope::before { content: ""; display: block; padding-top: 66.667%; }
.env-back, .env-letter, .env-pocket, .env-flap, .env-seal { position: absolute; }
.env-back { top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: 8px; background: linear-gradient(180deg, #d4b98b 0%, #e6d2ad 60%); box-shadow: 0 34px 60px -26px rgba(10, 0, 3, .8), 0 10px 22px -12px rgba(10, 0, 3, .5); }
.env-letter { top: 5%; left: 5%; right: 5%; height: 90%; z-index: 2; padding: 9% 12px 0; border-radius: 4px; background: var(--paper); box-shadow: 0 2px 8px rgba(60, 20, 10, .14); }
.env-letter::before { content: ""; position: absolute; top: 6px; right: 6px; bottom: 6px; left: 6px; border: 1px solid rgba(201, 164, 107, .55); border-radius: 2px; }
.env-letter-eyebrow { display: block; font-family: var(--display); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-deep); }
.env-letter-name { display: block; margin-top: 2px; font-family: var(--script); font-size: 26px; line-height: 1.15; color: var(--wine-700); overflow-wrap: break-word; word-wrap: break-word; }
.env-pocket { top: 0; right: 0; bottom: 0; left: 0; z-index: 3; -webkit-filter: drop-shadow(0 -1px 2px rgba(60, 20, 10, .16)); filter: drop-shadow(0 -1px 2px rgba(60, 20, 10, .16)); }
.env-pocket::before, .env-pocket::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 8px; }
.env-pocket::before { background: linear-gradient(160deg, #f6ead4 0%, #e9d6b3 100%); -webkit-clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.env-pocket::after { background: linear-gradient(0deg, #ecdcbc 0%, #f7ecd8 100%); opacity: .9; -webkit-clip-path: polygon(0 100%, 50% 50%, 100% 100%); clip-path: polygon(0 100%, 50% 50%, 100% 100%); }
.env-flap { top: 0; left: 0; right: 0; height: 57%; z-index: 4; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-filter: drop-shadow(0 3px 3px rgba(60, 20, 10, .2)); filter: drop-shadow(0 3px 3px rgba(60, 20, 10, .2)); }
.env-flap::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #f2e3c6 0%, #e2cba2 100%); -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env-seal {
  top: 57%; left: 50%; z-index: 5; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #a52a3d 0%, #7a1324 45%, #560a17 100%);
  box-shadow: 0 0 0 3px #6a0d1d, 0 7px 16px rgba(40, 4, 10, .5), inset 0 2px 4px rgba(255, 255, 255, .2), inset 0 -3px 6px rgba(0, 0, 0, .3);
  color: var(--gold-light); font-family: var(--display); font-size: 23px; font-weight: 600; line-height: 62px; text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  animation: sealPulse 2.4s ease-in-out 1.2s infinite;
}
.env-seal::before { content: ""; position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px; border: 1px solid rgba(233, 209, 160, .45); border-radius: 50%; }

/* ---------- Ouverture (classe .is-open posée au toucher) ---------- */
.is-open .stage { animation: stageOut .6s ease calc(var(--t-card) - .1s) both; }
.is-open .envelope { cursor: default; animation: none; }
.is-open .stage-intro, .is-open .hint { animation: fadeAway .4s ease both; }
.is-open .env-seal { animation: sealOff .4s var(--ease-io) both; }
.is-open .env-flap { animation: flapOpen .8s var(--ease-io) .15s both; }
.is-open .env-letter { animation: letterUp 1s var(--ease) .8s both; }

.is-open .card { animation: cardIn 1.15s var(--ease) var(--t-card) both; }
.is-open .reveal { animation: fadeUp .9s var(--ease) both; animation-delay: calc(var(--t-card) + .35s + var(--i) * 90ms); }
.is-open .seal { animation: sealIn .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--t-card) + 1.7s) both; }
.is-open .actions { animation: fadeUp .9s var(--ease) calc(var(--t-card) + 1.4s) both; }
.is-open .signature, .is-open .link { animation: fadeUp .9s var(--ease) calc(var(--t-card) + 1.7s) both; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeAway { to { opacity: 0; transform: translateY(-8px); } }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sealPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes cardIn { 0% { opacity: 0; transform: translateY(60px) scale(.93); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes sealIn { from { opacity: 0; transform: rotate(-14deg) scale(2); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }
@keyframes stageOut { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes envelopeIn { from { opacity: 0; transform: translateY(40px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sealOff { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.4) rotate(-25deg); } }
@keyframes flapOpen { 0% { transform: rotateX(0deg); z-index: 4; } 49% { z-index: 4; } 50% { z-index: 1; } 100% { transform: rotateX(180deg); z-index: 1; } }
@keyframes letterUp { from { transform: none; } to { transform: translateY(-60%); } }

@media (max-width: 360px) {
  .frame { padding-left: 16px; padding-right: 16px; }
  .panel { margin-left: -6px; margin-right: -6px; }
  .guest { font-size: 38px; }
  .hosts { font-size: 33px; }
  .date-side { width: 78px; font-size: 11px; letter-spacing: .12em; }
  .date-day { padding: 0 10px; font-size: 44px; }
  .closing { font-size: 25px; }
  .seats { letter-spacing: .1em; padding-left: 10px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sparkles, .confetti { display: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}


/* ---------- Confirmation de présence ---------- */
.rsvp {
  position: relative; width: 100%; max-width: 440px; margin-top: 26px;
  padding: 26px 20px 24px;
  border: 1px solid rgba(217, 187, 132, .5); border-radius: 22px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(233, 209, 160, .12), rgba(233, 209, 160, 0) 70%), rgba(246, 231, 204, .04);
  text-align: center;
}
.rsvp::before { content: ""; position: absolute; top: 6px; right: 6px; bottom: 6px; left: 6px; border: 1px solid rgba(217, 187, 132, .18); border-radius: 17px; pointer-events: none; }
.rsvp-eyebrow { padding-left: .34em; font-family: var(--display); font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-light); }
.rsvp-title { margin: 4px 0 18px; font-family: var(--script); font-weight: 400; font-size: 36px; line-height: 1.2; color: var(--paper); }
.rsvp-choices .btn { margin-bottom: 10px; }
.rsvp-choice[aria-pressed="true"].btn--ghost { background: rgba(217, 187, 132, .2); border-color: var(--gold-light); }
.rsvp-choice.is-dimmed { opacity: .5; }   /* le choix non retenu s'efface */
.rsvp-choice svg { stroke-width: 2.4; }
.rsvp-form { margin-top: 6px; text-align: left; animation: fadeUp .5s var(--ease) both; }
.rsvp-label { display: block; margin: 14px 0 8px; font-size: 14px; font-weight: 600; color: var(--champagne); }
.rsvp-label span { font-weight: 400; color: rgba(246, 231, 204, .7); }
.seg { display: flex; flex-wrap: wrap; margin: 0 -4px; }
.seg button {
  flex: 1 1 0; min-width: 48px; height: 48px; margin: 0 4px 8px; padding: 0;
  border: 1px solid rgba(217, 187, 132, .55); border-radius: 14px;
  background: rgba(246, 231, 204, .05); color: var(--champagne);
  font-family: var(--display); font-size: 18px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.seg button[aria-checked="true"] { color: var(--wine-800); border-color: transparent; background: linear-gradient(135deg, #f3dfb3 0%, #d6b27b 46%, #c59c60 54%, #ead1a0 100%); }
.seg button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.rsvp textarea {
  display: block; width: 100%; min-height: 84px; margin-bottom: 16px; padding: 12px 14px;
  border: 1px solid rgba(217, 187, 132, .55); border-radius: 14px;
  background: rgba(20, 2, 6, .25); color: var(--paper);
  font-family: var(--body); font-size: 16px; line-height: 1.45; resize: vertical;
  -webkit-appearance: none; appearance: none;
}
.rsvp textarea:focus { outline: none; border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(233, 209, 160, .2); }
.rsvp-form .btn { margin-bottom: 0; }
.rsvp-form .btn[disabled] { opacity: .6; cursor: progress; }
.rsvp-error { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(181, 27, 39, .25); color: #ffd9d9; font-size: 14px; line-height: 1.4; text-align: center; }
.rsvp-done { animation: fadeUp .6s var(--ease) both; }
.rsvp-done-icon { display: inline-block; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; line-height: 0; color: var(--wine-800); background: linear-gradient(135deg, #f3dfb3 0%, #d6b27b 46%, #c59c60 54%, #ead1a0 100%); box-shadow: 0 12px 26px -12px rgba(233, 190, 120, .8); }
.rsvp-done-icon svg { width: 28px; height: 28px; margin: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.rsvp-done.is-non .rsvp-done-icon { color: var(--champagne); background: rgba(246, 231, 204, .1); box-shadow: none; border: 1px solid rgba(217, 187, 132, .5); }
.rsvp-done-title { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); }
.rsvp-done-text { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--champagne); }
.rsvp .link { margin-top: 10px; }
.is-open .rsvp { animation: fadeUp .9s var(--ease) calc(var(--t-card) + 1.2s) both; }
.is-open .rsvp .link { animation: none; }   /* « Modifier ma réponse » : visible tout de suite */

/* Confettis rejoués quand on confirme sa présence */
.confetti.is-again { display: block; }
.confetti.is-again i { animation: fall2 var(--t) cubic-bezier(.25, .4, .55, 1) var(--d) both; }
@keyframes fall2 {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) rotateX(0deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--s), 108vh, 0) rotate(var(--r)) rotateX(720deg); }
}

/* Nom pas encore chargé : on n'affiche pas « pour vous » le temps de la réponse du serveur */
.is-loading .stage-intro { visibility: hidden; }