/* =========================================================
   Emmy & Ethan — palette ivoire / crème / champagne
   ========================================================= */
:root {
  /* code couleur du mariage */
  --chantilly: #f7f4e8;
  --butter: #f4e08a;
  --hydrangea: #a7bedd;

  --bg: var(--chantilly);
  --bg-deep: #efeadb;
  --paper: #fdfbf4;
  --paper-shade: #f1ecdd;
  --ink: #3e4454;
  --ink-soft: #6f768a;
  --gold: var(--hydrangea);            /* accent : bleu hortensia */
  --gold-deep: #6e8bb8;               /* bleu plus soutenu pour le texte */
  --butter-soft: #f9eeb8;
  --butter-deep: #e3c85d;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --script: "Pinyon Script", cursive;

  /* largeur de l'enveloppe : tout le décor est proportionnel */
  --w: min(84vw, 500px, 56vh);
}
/* svh = hauteur visible sur mobile (hors barre d'adresse) ; repli vh sinon */
@supports (height: 100svh) {
  :root { --w: min(84vw, 500px, 56svh); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* grain papier très léger sur tout le site */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 100;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .48 0 0 0 0 .38 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; }

.kicker {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.script {
  font-family: var(--script);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  margin: .2em 0 .3em;
}

/* =========================================================
   INTRO / ENVELOPPE
   ========================================================= */
.intro__pin {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 45%, #fdfbf3 0%, var(--bg) 55%, var(--bg-deep) 100%);
}
.intro__head {
  position: absolute; top: max(5svh, 24px); left: 0; right: 0;
  text-align: center; z-index: 5;
}
.intro__hint {
  margin: .6em 0 0;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.scroll-cue {
  position: absolute; bottom: max(4svh, 18px); left: 0; right: 0;
  text-align: center;
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-soft);
}
.scroll-cue span {
  display: block; width: 1px; height: 34px; margin: 0 auto 10px;
  background: linear-gradient(var(--gold), transparent);
  animation: cue 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue { 0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(1);opacity:0} }

.stage {
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.12);
  margin-top: 6svh;
}

/* ---------- enveloppe ---------- */
.envelope {
  position: absolute;
  left: 0; bottom: 0;
  width: var(--w);
  height: calc(var(--w) * .66);
  perspective: calc(var(--w) * 3);
  filter: drop-shadow(0 calc(var(--w) * .03) calc(var(--w) * .04) rgba(70, 80, 110, .18));
}
.env-back, .env-front, .flap, .inside { position: absolute; inset: 0; }

.env-back {
  background: var(--paper-shade);
  border-radius: 4px;
  z-index: 1;
}
/* doublure visible à l'ouverture : rayures ivoire / champagne */
.env-liner {
  position: absolute; inset: 3% 3% 30% 3%;
  background:
    repeating-linear-gradient(90deg, var(--butter-soft) 0 9px, var(--paper) 9px 18px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 0 30px rgba(110, 100, 60, .14);
}

.inside {
  z-index: 2;
  /* fermée : rien ne dépasse ; ouverte : seul le bas reste masqué (géré en JS) */
  clip-path: inset(0% 1% 0% 1%);
  visibility: hidden; /* rendu visible quand le rabat commence à s'ouvrir */
}
.item { position: absolute; will-change: transform; }
.item img { width: 100%; }

.item--frame {
  width: calc(var(--w) * .44);
  left: calc(var(--w) * .04);
  top: calc(var(--w) * -.44);
}
.frame-photo {
  position: absolute;
  left: 21%; top: 19%; width: 58%; height: 62%;
  border-radius: 50%;
  overflow: hidden;
  background: #ddd;
}
.frame-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.frame-img { position: relative; }

.item--clover {
  width: calc(var(--w) * .44);
  right: calc(var(--w) * .01);
  top: calc(var(--w) * -.36);
  transform-origin: 30% 90%;
}
.names {
  position: absolute; inset: 18% 10% 25% 14%;
  margin: 0;
  display: flex; flex-direction: column; justify-content: center;
  font-family: var(--script);
  font-size: calc(var(--w) * .085);
  line-height: 1;
  color: var(--ink);
  transform: rotate(-6deg);
}
.names .amp { padding-left: 14%; }
/* esperluette en italique classique : celle de la police script est peu lisible */
.et {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: .78em;
  margin: 0 .08em;
}

.item--card {
  width: calc(var(--w) * .5);
  left: calc(var(--w) * .25);
  top: calc(var(--w) * -.17);
}
.card-text {
  position: absolute; inset: 30% 18% 34%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.card-text .std {
  margin: 0;
  font-size: calc(var(--w) * .028);
  letter-spacing: .32em;
  text-transform: uppercase;
}
.card-text .date {
  margin: .1em 0 0;
  font-family: var(--script);
  font-size: calc(var(--w) * .062);
  line-height: 1.1;
  white-space: nowrap;
}

/* poche avant : 3 rabats (gauche, droite, bas) */
.env-front {
  z-index: 3;
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(to top, #f3eee0, var(--paper));
  border-radius: 4px;
}
.env-front::before, .env-front::after {
  content: ""; position: absolute; inset: 0;
}
.env-front::before {
  clip-path: polygon(0 0, 52% 58%, 0 100%);
  background: linear-gradient(100deg, #faf7ee, #f1ecde);
  filter: drop-shadow(2px 0 2px rgba(0,0,0,.06));
}
.env-front::after {
  clip-path: polygon(100% 0, 48% 58%, 100% 100%);
  background: linear-gradient(-100deg, #faf7ee, #efeadb);
}

/* rabat du haut, en 3D */
.flap {
  z-index: 4;
  height: 62%;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
.flap__face {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flap__face--out {
  background: linear-gradient(to bottom, #fefdf8, #f3eee0);
}
.flap__face--in {
  transform: rotateX(180deg);
  /* la face est retournée : le triangle est inversé pour retomber pile sur la face avant */
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  background:
    linear-gradient(to top, rgba(110, 100, 60, .12), transparent 60%),
    repeating-linear-gradient(90deg, var(--butter-soft) 0 9px, var(--paper) 9px 18px);
}
/* ombre portée du rabat sur la poche */
.flap::after {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: transparent;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.08));
  pointer-events: none;
}

/* cachet de cire */
.seal {
  position: absolute; z-index: 6;
  left: 50%; top: 62%;
  width: calc(var(--w) * .17); height: calc(var(--w) * .17);
  margin: calc(var(--w) * -.085) 0 0 calc(var(--w) * -.085);
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.seal__wax {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 48% 52% 50% 50% / 52% 47% 53% 48%;
  background:
    radial-gradient(circle at 35% 30%, #d6e3f3 0%, #b4c9e4 30%, #93afd3 65%, #6f8fbd 100%);
  box-shadow:
    inset 0 0 0 calc(var(--w) * .012) rgba(255, 255, 255, .3),
    inset 0 calc(var(--w) * -.01) calc(var(--w) * .02) rgba(50, 70, 110, .35),
    0 calc(var(--w) * .008) calc(var(--w) * .02) rgba(50, 70, 110, .3);
}
.seal__wax::before {
  content: ""; position: absolute; inset: 16%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 2px rgba(50,70,110,.3);
}
.seal__mono {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(var(--w) * .052);
  color: #fbfcff;
  text-shadow: 0 -1px 0 rgba(50,70,110,.45);
  letter-spacing: -.02em;
}
.seal__mono i { font-size: .6em; margin: 0 .05em; }
.seal:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 50%; }

/* décor extérieur */
.deco { position: absolute; pointer-events: none; z-index: 7; }
.deco--bouquet {
  width: calc(var(--w) * .26);
  left: calc(var(--w) * -.12);
  max-width: none;
  bottom: calc(var(--w) * -.16);
  transform-origin: 50% 10%;
}

/* pétales qui flottent */
.petals { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.petals img { position: absolute; top: -10%; opacity: .85; }

/* =========================================================
   CONTENU
   ========================================================= */
.content { position: relative; z-index: 2; background: var(--bg); }
.block {
  max-width: 760px;
  margin: 0 auto;
  padding: 16svh 24px;
  text-align: center;
}
.block h2.script { font-size: clamp(2.6rem, 9vw, 4rem); }
.block--hero h1.script { font-size: clamp(3.2rem, 13vw, 6rem); }
.arum { width: min(70%, 380px); margin: 0 auto 1.5rem; }
.lead { font-size: 1.25rem; font-style: italic; color: var(--ink-soft); margin: 0; }
.big-date {
  margin: 1.4em 0 0;
  font-size: 1.05rem; letter-spacing: .3em; text-transform: uppercase;
}

.countdown {
  display: flex; justify-content: center; gap: clamp(14px, 5vw, 44px);
  margin-top: 2.6rem;
}
.countdown div { display: flex; flex-direction: column; align-items: center; min-width: 3.2em; }
.countdown b {
  font-weight: 300; font-size: clamp(2rem, 8vw, 3rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown span { font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-deep); margin-top: .5em; }

.block--swans {
  position: relative; max-width: none; padding: 0;
  height: 80svh; display: grid; place-items: center; overflow: hidden;
}
.swans {
  position: absolute; inset: -15% 0;
  background-size: cover; background-position: center;
}
.block--swans::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(var(--bg), rgba(247,244,232,.35) 25%, rgba(247,244,232,.35) 75%, var(--bg));
}
.count-box {
  position: relative; z-index: 1;
  padding: 2.4rem clamp(18px, 5vw, 56px) 2.6rem;
  background: rgba(253, 251, 244, .78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(110, 139, 184, .55);
  outline: 1px solid rgba(110, 139, 184, .3);
  outline-offset: 6px;
  text-align: center;
}
.count-box .countdown { margin-top: 1.4rem; }
@media (max-width: 520px) {
  .count-box { width: calc(100% - 40px); padding: 1.8rem 10px 2rem; }
  .count-box .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .countdown div { min-width: 0; }
  .countdown span { letter-spacing: .1em; font-size: .58rem; }
}

/* bandes colorées pleine largeur */
.block--program, .block--rsvp { max-width: none; }
.block--program > *, .block--rsvp > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.block--program {
  background: linear-gradient(var(--bg), #eef3fa 18%, #eef3fa 82%, var(--bg));
}
.block--rsvp {
  background: linear-gradient(var(--bg), #fbf6dd 18%, #fbf6dd 82%, var(--bg));
}
.program li + li::before { color: var(--butter-deep); }

.program { list-style: none; padding: 0; margin: 3rem auto 0; display: grid; gap: 2.4rem; }
.program li { position: relative; }
.program li + li::before {
  content: "✦"; display: block; color: var(--gold); font-size: .8rem; margin: -1.2rem 0 1.2rem;
}
.program time { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-deep); }
.program h3 { font-weight: 400; font-size: 1.8rem; margin: .1em 0; }
.program p { margin: 0; color: var(--ink-soft); font-style: italic; }
.program p a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(110,139,184,.5); transition: color .3s, border-color .3s; }
.program p a:hover { color: var(--gold-deep); border-color: var(--gold-deep); }

.mono-frame { width: 140px; margin: 0 auto 1.5rem; }
.btn {
  display: inline-block; margin-top: 1.6rem;
  padding: .9em 2.6em;
  border: 1px solid var(--gold-deep);
  color: var(--ink); text-decoration: none;
  font-size: .8rem; letter-spacing: .32em; text-transform: uppercase;
  transition: background .3s, color .3s;
}
.btn--ghost { margin-top: 2.2rem; font-size: .7rem; padding: .8em 2em; border-color: rgba(110,139,184,.5); }
.btn:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }

/* ---------- neuf ans jour pour jour (animation au scroll) ---------- */
.anniv-wrap { position: relative; }
.anniv-pin {
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(167,190,221,.18) 0%, transparent 60%),
    var(--bg);
}
.anniv-stage {
  position: relative;
  width: min(92vw, 600px, 92svh);
  aspect-ratio: 1;
}
.anniv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#anniv-path {
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: .9;
}
#anniv-florets use { fill: var(--hydrangea); }
#anniv-florets use:nth-child(even) { fill: #bccfe8; }
#anniv-florets .floret-heart { fill: var(--butter); }

/* le grand chiffre, en Cormorant léger (pas de calligraphie) */
.anniv-num {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 300;
  color: var(--ink);
}
.anniv-num__row { display: flex; align-items: baseline; gap: .12em; line-height: .8; }
.anniv-num span {
  font-size: clamp(7rem, 32vw, 15rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.anniv-num small {
  font-size: clamp(.9rem, 3vw, 1.2rem);
  letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-left: .4em;
}

.anniv-date {
  position: absolute;
  display: flex; flex-direction: column;
  line-height: 1.1;
}
.anniv-date--a { left: 2%; top: 4%; align-items: flex-start; }
.anniv-date--b { right: 2%; bottom: 4%; align-items: flex-end; text-align: right; }
.anniv-date__d {
  font-size: clamp(1.25rem, 4.6vw, 1.9rem);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.anniv-date__l {
  margin-top: .4em;
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-deep);
}

.anniv-end {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
  pointer-events: none;
}
.anniv-end__s {
  margin: 0;
  width: 70%; max-width: 22em;
  font-style: italic; color: var(--ink);
  font-size: clamp(1.05rem, 3.6vw, 1.5rem);
  line-height: 1.5;
}
@media (max-width: 520px) {
  .anniv-end__s br { display: none; }
}

/* ---------- page réponse ---------- */
.page-rsvp .block--rsvp { min-height: 100svh; padding-top: 10svh; }
.back {
  display: inline-block; margin-bottom: 2.5rem;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
}
.back:hover { color: var(--gold-deep); }
.btn--inline { display: inline-block; width: auto; padding: .9em 2.6em; margin-top: 1.6rem; }
.rsvp__thanks .btn { margin-top: 1.6rem; }

/* ---------- formulaire de réponse ---------- */
.deadline {
  margin: .5rem auto 0;
  text-align: center;
  font-family: var(--script);
  font-size: clamp(2.2rem, 7vw, 3rem);
  line-height: 1.1;
  color: var(--gold-deep);
}
.rsvp {
  max-width: 560px;
  margin: 2.4rem auto 0;
  text-align: left;
}
.field { margin-bottom: 1.5rem; }
.field label:not(.choice), .field legend {
  display: block;
  margin-bottom: .45rem;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field label small { text-transform: none; letter-spacing: 0; font-size: .9em; font-style: italic; opacity: .8; }
.field input[type="text"], .field select, .field textarea {
  display: block; width: 100%;
  padding: .75em .9em;
  font: inherit; color: var(--ink);
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(110,139,184,.4);
  border-radius: 2px;
  transition: border-color .25s, box-shadow .25s, background .25s;
  -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e8bb8' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9em center;
  padding-right: 2.4em;
}
.field textarea { resize: vertical; min-height: 5.5em; }
.field input::placeholder, .field textarea::placeholder { color: #a9aeba; font-style: italic; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(167,190,221,.35);
}
.field.is-invalid input, .field.is-invalid select { border-color: #c47a7a; }
.field--choice { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.choice {
  display: flex; align-items: center; gap: .8em;
  padding: .7em .9em; margin-bottom: .5rem;
  border: 1px solid rgba(110,139,184,.3);
  border-radius: 2px;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
.choice:hover { border-color: var(--gold-deep); }
.choice:has(input:checked) { border-color: var(--gold-deep); background: #fff; }
.choice input { accent-color: var(--gold-deep); width: 1.1em; height: 1.1em; margin: 0; flex: none; }
.rsvp__details { padding-bottom: .1px; }
.rsvp__details[hidden] { display: none; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.btn--solid {
  display: block; width: 100%; margin-top: .5rem;
  background: var(--gold-deep); border-color: var(--gold-deep); color: #fff;
  cursor: pointer; font-family: inherit;
}
.btn--solid:hover { background: #5b79a6; border-color: #5b79a6; }
.btn--solid[disabled] { opacity: .6; cursor: wait; }
.rsvp__status { min-height: 1.5em; margin: .8rem 0 0; text-align: center; font-style: italic; color: var(--ink-soft); }
.rsvp__status.is-error { color: #a85c5c; }
.rsvp__thanks { max-width: 560px; margin: 2rem auto 0; padding: 2.4rem 1.5rem; border: 1px solid rgba(110,139,184,.45); outline: 1px solid rgba(110,139,184,.25); outline-offset: 6px; background: rgba(255,255,255,.55); }
.rsvp__thanks-title { font-size: 3rem; margin: 0 0 .2em; }

.foot {
  padding: 8svh 24px 10svh; text-align: center;
  font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft);
}

@media (max-width: 520px) {
  body { font-size: 17px; }
  .deco--bouquet { left: calc(var(--w) * -.07); width: calc(var(--w) * .23); }
  .block { padding: 12svh 20px; }
    .intro__hint { font-size: .95rem; }
}