/* Démo Léa & Noam : « Sauge, lin et or ». Papier de coton ivoire, sauge profonde, filets d'or */
:root {
  --night: oklch(0.21 0.025 135);
  --night-2: oklch(0.26 0.03 132);
  --sage-deep: oklch(0.31 0.036 135);
  --sage-deeper: oklch(0.27 0.032 135);
  --paper: oklch(0.975 0.01 85);
  --paper-2: oklch(0.95 0.016 82);
  --paper-3: oklch(0.925 0.02 82);
  --ink: oklch(0.3 0.03 70);
  --ink-soft: oklch(0.5 0.03 75);
  --ink-sage: oklch(0.34 0.045 135);
  --sage: oklch(0.42 0.05 135);
  --sage-soft: oklch(0.62 0.04 135);
  --wax: oklch(0.57 0.045 135);
  --gold: oklch(0.73 0.08 80);
  --gold-deep: oklch(0.6 0.08 75);
  --gold-light: oklch(0.86 0.065 85);
  --gold-pale: oklch(0.92 0.04 88);
  --line: oklch(0.86 0.025 80);
  --on-dark: oklch(0.95 0.02 85);
  --on-dark-soft: oklch(0.82 0.03 100);
  --display: "Cormorant Garamond", Garamond, serif;
  --script: "Pinyon Script", cursive;
  --ui: "Instrument Sans", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --btn-notch: 7px;
  --btn-inset: 4px;
  --btn-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --col-w: min(100vw, 480px);
  --linen: none;
  /* grain du papier de coton : fibres fines + nuages très doux */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .07 0'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .44 0 0 0 0 .3 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; height: 100svh; }
img { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Ouverture ---------- */
/* La scène couvre la fenêtre ; le film tient dans la colonne, entouré d'un fond sauge aux ombres de feuillage. */
.stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  background-color: oklch(0.21 0.025 135);
  cursor: pointer;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.5s ease, background-color 0s linear 0.9s;
  -webkit-tap-highlight-color: transparent;
}
/* une fois l'enveloppe affichée, le fond devient transparent : la couverture du site attend dessous */
.stage.is-ready { background-color: transparent; }
.stage.is-fading { opacity: 0; pointer-events: none; }
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    var(--leaves, none) 0 0 / 540px auto repeat,
    radial-gradient(110% 80% at 50% 28%, oklch(0.27 0.03 132), oklch(0.17 0.022 135));
  background-blend-mode: multiply, normal;
  -webkit-mask: linear-gradient(90deg, #000 calc(50% - var(--col-w, min(100vw, 480px)) / 2), transparent 0 calc(50% + var(--col-w, min(100vw, 480px)) / 2), #000 0);
  mask: linear-gradient(90deg, #000 calc(50% - var(--col-w, min(100vw, 480px)) / 2), transparent 0 calc(50% + var(--col-w, min(100vw, 480px)) / 2), #000 0);
}
.stage canvas,
.stage .films,
.stage .hint {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--col-w, min(100vw, 480px));
  height: 100%;
  translate: -50% 0;
}
/* la scène 3D ne sert plus qu'au tournage (?render=1) */
.stage canvas { display: none; }
.stage.is-render canvas { display: block; }
.stage.is-render { background-color: transparent; transition: none; cursor: default; }
.stage.is-render .hint,
.stage.is-render .loader,
.stage.is-render .skip { display: none; }

.films { overflow: hidden; opacity: 0; transition: opacity 0.4s ease; }
.stage.is-ready .films { opacity: 1; }
.films video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  pointer-events: none;
}
.films video.is-on { opacity: 1; }
@media (min-width: 600px) {
  .stage .films { box-shadow: 0 0 0 1px oklch(0.15 0.02 135 / 0.5), 0 30px 80px oklch(0.1 0.02 135 / 0.55); }
}

/* invitation à toucher : une ligne en italique et un filet d'or qui se dessine, rien d'autre */
.hint {
  z-index: 1;
  pointer-events: none;
  font-size: 1.08rem;
}
/* sous le cachet, puis sous les pans du ruban */
.hint[data-step="ribbon"] { --hint-y: 88.5%; }
.hint-text {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hint-y, 68.5%);
  margin: 0;
  text-align: center;
  font: italic 500 1em/1.2 "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.02em;
  color: oklch(0.52 0.06 78 / 0.92);
  text-shadow: 0 0 10px oklch(0.97 0.015 85 / 0.9), 0 0 2px oklch(0.97 0.015 85 / 0.8);
  opacity: 0;
  translate: 0 4px;
  transition: opacity 1.6s ease, translate 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hint-ring {
  position: absolute;
  left: 50%;
  top: calc(var(--hint-y, 68.5%) + 1.75em);
  width: 64px;
  height: 1px;
  margin-left: -32px;
  background: linear-gradient(90deg, transparent, oklch(0.7 0.09 80 / 0.9) 30% 70%, transparent);
  transform: scaleX(0);
  opacity: 0;
  transition: opacity 1.2s ease 0.4s, transform 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.hint.is-on .hint-text { opacity: 1; translate: 0 0; }
.hint.is-on .hint-ring { opacity: 1; transform: scaleX(1); animation: hairline 3.6s ease-in-out 2.2s infinite; }
@keyframes hairline {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.55); opacity: 0.45; }
}

.loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.stage.is-ready .loader { opacity: 0; }
.loader span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid oklch(0.9 0.04 85 / 0.25);
  border-top-color: oklch(0.9 0.05 85 / 0.9);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* « Passer » : un simple mot, discret, en haut à droite de la colonne */
.skip {
  position: absolute;
  z-index: 2;
  top: max(10px, env(safe-area-inset-top));
  right: max(8px, calc(50% - var(--col-w, min(100vw, 480px)) / 2 + 8px));
  padding: 10px 10px;
  border: 0;
  background: none;
  font: 500 0.62rem/1 var(--ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.45 0.035 80 / 0.62);
  text-shadow: 0 0 8px oklch(0.97 0.015 85 / 0.8);
  cursor: pointer;
  transition: color 0.3s ease;
}
.skip:hover, .skip:focus-visible { color: oklch(0.36 0.04 80 / 0.95); }
.skip:focus-visible { outline: 1px solid oklch(0.6 0.08 80 / 0.6); outline-offset: 2px; }

/* ---------- Site ---------- */
.site {
  position: relative;
  overflow-x: clip;
  background: var(--paper);
}
/* sur grand écran : une colonne de papier posée sur la sauge, sous l'ombre des feuilles */
@media (min-width: 600px) {
  body { background: oklch(0.33 0.035 132); }
  /* fond fixe sur sa propre couche : rien n'est repeint au défilement */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(90% 70% at 50% 35%, transparent, oklch(0.13 0.02 135 / 0.75)),
      var(--leaves, none) center / 720px,
      oklch(0.33 0.035 132);
    background-blend-mode: normal, multiply, normal;
    transform: translateZ(0);
  }
  .site {
    width: var(--col-w);
    margin-inline: auto;
    box-shadow: 0 0 0 1px oklch(0.15 0.02 135 / 0.5), 0 40px 120px oklch(0.08 0.02 135 / 0.75);
  }
}

/* ==================== 1. Couverture ==================== */
.cover {
  position: relative;
  display: grid;
  place-items: center;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  background:
    var(--grain) 0 0 / 220px,
    radial-gradient(130% 90% at 45% 35%, var(--paper) 40%, var(--paper-2));
}
/* l'ombre du feuillage de l'ouverture continue de passer sur le papier */
.cover-leaves {
  position: absolute;
  inset: -12%;
  z-index: -1;
  /* même rendu que le mode produit : site.js convertit l'image en noir transparent */
  background: var(--leaves-a, none) 30% 60% / cover no-repeat;
  opacity: 0.11;
  pointer-events: none;
  animation: leaves 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes leaves {
  from { transform: translate3d(-2.5%, 1.5%, 0) rotate(-1.5deg); }
  to { transform: translate3d(2.5%, -1.5%, 0) rotate(1.5deg); }
}
.cover.is-away .cover-leaves { animation-play-state: paused; }

.cover-card {
  --u: calc(100cqw / 360);
  position: relative;
  width: min(100%, calc(100svh * 0.5 - 4px));
  aspect-ratio: 1 / 2;
  container-type: inline-size;
}
.cover-frame,
.cover-frame > * {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* gaufrage à blanc : le relief est déjà dans le papier avant la dorure.
   Lumière au repos, valeurs figées : le filtre n'est peint qu'une fois. */
.frame-blind {
  overflow: visible;
  fill: none;
  stroke: oklch(0.965 0.012 85);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(-0.28px -0.44px 0 oklch(1 0 0 / 0.95))
    drop-shadow(0.315px 0.745px 0.45px oklch(0.48 0.04 75 / 0.42));
  will-change: transform;                         /* calque à part : jamais repeint pendant la dorure */
}
/* l'ombre portée de la feuille d'or (canevas tracé en opaque) */
.frame-shade { opacity: 0.5; }
/* reflet de la dorure : une bande qui glisse derrière le masque fixe des traits */
.frame-sheen {
  overflow: hidden;
  opacity: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: translateZ(0);
  transition: opacity 0.9s ease;
}
.cover.is-gilded .frame-sheen { opacity: 1; }
.frame-sheen i {
  position: absolute;
  left: -100%;
  top: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(118deg, transparent 45%, oklch(0.97 0.04 90 / 0.55) 48.5%, oklch(0.99 0.03 92 / 0.95) 50%, oklch(0.97 0.04 90 / 0.55) 51.5%, transparent 55%);
  will-change: transform;
}

.cover-kicker,
.cover-date,
.cover-place {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
}
.cover-kicker {
  top: calc(150 * var(--u));
  padding-left: 0.36em;
  font: 600 calc(10.5 * var(--u)) / 1 var(--ui);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.cover-names { margin: 0; font-weight: 400; }
.nm {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  justify-items: center;
  font: 400 calc(100 * var(--u)) / 1 var(--script);
  color: var(--ink-sage);
  white-space: nowrap;
  translate: 0 -50%;
}
.nm > span { grid-area: 1 / 1; }
.nm--a { top: calc(236 * var(--u)); padding-right: calc(44 * var(--u)); }
.nm--amp {
  top: calc(302 * var(--u));
  font: italic 400 calc(60 * var(--u)) / 1 var(--display);
  color: var(--gold-deep);
}
.nm--b { top: calc(368 * var(--u)); padding-left: calc(44 * var(--u)); }
/* avant le passage de la plume (ink.js), la place des prénoms reste vierge */
.cover-names:not(.is-inked) .nm { visibility: hidden; }
.cover-sprig {
  position: absolute;
  left: 50%;
  top: calc(424 * var(--u));
  width: calc(132 * var(--u));
  translate: -50% 0;
}
.cover-date {
  top: calc(470 * var(--u));
  font: italic 500 calc(25 * var(--u)) / 1 var(--display);
  color: var(--ink);
}
.cover-place {
  top: calc(506 * var(--u));
  padding-left: 0.3em;
  font: 500 calc(9.4 * var(--u)) / 1 var(--ui);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* invitation à défiler : un mot à l'encre et une petite arche dorée,
   écho de l'arche de la couverture, où une perle descend doucement */
.cover-cue {
  position: absolute;
  left: 50%;
  top: calc(584 * var(--u));
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(9 * var(--u));
  min-width: 44px;
  padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(10 * var(--u));
  color: var(--ink-sage);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.1s ease 2.4s, transform 1.4s var(--ease-out) 2.4s;
}
.cue-label {
  font: italic 500 calc(17.5 * var(--u)) / 1 var(--display);
  letter-spacing: 0.02em;
}
.cue-arch {
  display: block;
  width: calc(21 * var(--u));
  height: calc(38.5 * var(--u));
  overflow: visible;
  fill: none;
  stroke: var(--gold-deep);
  stroke-linejoin: round;
  transition: translate 0.6s var(--ease-out);
}
.cue-arch-out { stroke-width: 1.05; }
.cue-arch-in { stroke-width: 0.55; opacity: 0.7; }
.cue-foot { fill: var(--gold-deep); stroke: none; }
.cue-chev { stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; animation: cue-chev 2.8s cubic-bezier(0.45, 0, 0.25, 1) infinite; }
@keyframes cue-chev {
  0%, 55% { transform: translateY(0); opacity: 0.7; }
  75% { transform: translateY(2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.7; }
}
.cue-bead {
  fill: var(--gold-deep);
  stroke: none;
  opacity: 0;
  animation: cue-bead 2.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes cue-bead {
  0% { transform: translateY(0); opacity: 0; }
  18% { opacity: 1; }
  62% { transform: translateY(17px); opacity: 1; }
  80%, 100% { transform: translateY(21px); opacity: 0; }
}
.cover.is-away :is(.cue-bead, .cue-chev) { animation-play-state: paused; }
.cover.is-drawn .cover-cue { opacity: 1; transform: none; }
@media (hover: hover) {
  .cover-cue:hover .cue-arch { translate: 0 2px; }
}
.cover-cue:focus-visible { outline: 1.5px solid var(--gold-deep); outline-offset: 2px; border-radius: 2px; }

/* paillettes d'or qui dérivent dans la lumière */
.flecks { position: absolute; inset: 0; pointer-events: none; }.flecks i {
  position: absolute;
  border-radius: 1px 3px 1px 2px;
  background: linear-gradient(135deg, #f8ebc4, #c9a866 50%, #8f6f3a);
  opacity: 0;
  will-change: transform, opacity;
}

/* ==================== Sections ==================== */
.sec {
  position: relative;
  padding: 92px 22px 96px;
  text-align: center;
  background: var(--grain) 0 0 / 220px, var(--paper);
}
.sec--dark {
  padding-block: 106px 112px;
  color: var(--on-dark);
  background:
    var(--grain-dark) 0 0 / 220px,
    radial-gradient(140% 60% at 50% 0%, var(--sage-deep), var(--sage-deeper));
}
/* dentelle festonnée entre papier et sauge */
.lace {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 30px;
  pointer-events: none;
  background: var(--lace-shade) center top / 40px 30px repeat-x;
}
.lace--down { top: -1px; }
.lace--up { bottom: -1px; transform: scaleY(-1); }
.lace::before,
.lace::after { content: ""; position: absolute; inset: 0; }
.lace::before {
  background: var(--grain) 0 0 / 220px, var(--paper);
  -webkit-mask: var(--lace-mask) center top / 40px 24px repeat-x;
  mask: var(--lace-mask) center top / 40px 24px repeat-x;
}
.lace--lin::before { background-color: var(--paper-2); }
.lace::after { background: var(--lace-stitch) center top / 40px 24px repeat-x; }

.kicker {
  margin: 0 0 14px;
  padding-left: 0.3em;
  font: 600 0.66rem/1 var(--ui);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.title {
  margin: 0 auto;
  max-width: 15ch;
  font: 500 2.55rem/1.02 var(--display);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.title em { font-style: italic; color: var(--sage); }
.body {
  margin: 18px auto 0;
  max-width: 31ch;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.sec--dark .kicker { color: var(--gold-light); }
.sec--dark .title { color: var(--on-dark); }
.sec--dark .title em { color: var(--gold-light); }
.sec--dark .body { color: var(--on-dark-soft); }

/* le rameau d'or récurrent */
[data-sprig] { display: block; }
[data-sprig] svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--gold-deep); stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; }
[data-sprig] path { stroke-dasharray: 1 2; stroke-dashoffset: 1.001; }
:is(.is-in, .is-drawn) [data-sprig] path,
[data-sprig].is-in path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--l) cubic-bezier(0.5, 0.05, 0.25, 1) calc(var(--t) + var(--sd, 0.2s));
}
.cover-sprig { --sd: 1.35s; }
.sec--dark [data-sprig] svg { stroke: var(--gold-light); }
.sec-sprig { width: 150px; margin: 0 auto 30px; }

/* apparitions au défilement : opacité et translation seulement */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-out) calc(var(--i, 0) * 90ms), transform 1.1s var(--ease-out) calc(var(--i, 0) * 90ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
.title[data-reveal] { --i: 1; }
.body[data-reveal] { --i: 2; }
.pills[data-reveal], .count-note[data-reveal] { --i: 3; }

/* ==================== 2. Date à gratter ==================== */
.sec--date .scratch { margin-top: 34px; }
.scratch-fallback {
  margin: 0;
  font: 500 2.6rem/1 var(--display);
  letter-spacing: 0.08em;
  color: var(--gold-light);
}

/* ==================== 3. Compte à rebours ==================== */
.sec--count { padding-bottom: 40px; }
.medals {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 38px auto 0;
}
.medal {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 80px;
  aspect-ratio: 1;
}
.medal[data-reveal] { transform: translateY(18px) rotate(-24deg) scale(0.92); transition-duration: 0.9s, 1.3s; }
.medal[data-reveal].is-in { transform: none; }
.medal::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, var(--paper), var(--paper-2) 70%, var(--paper-3));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.9),
    inset 0 -2px 4px oklch(0.6 0.05 80 / 0.18),
    0 6px 14px -8px oklch(0.4 0.05 75 / 0.5);
}
.medal-ring, .medal-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.medal-ring svg { fill: none; stroke: var(--gold-deep); overflow: visible; }
.m-scallop { stroke-width: 0.9; stroke-dasharray: 1 2; stroke-dashoffset: 1.001; }
.m-ring { stroke-width: 0.6; stroke-dasharray: 1 2; stroke-dashoffset: 1.001; transform: rotate(-90deg); transform-origin: 50% 50%; }
.m-dots { stroke: var(--gold); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 0 3.23; opacity: 0; }
.medal.is-in .m-scallop { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-out) calc(0.15s + var(--i) * 0.1s); }
.medal.is-in .m-ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease-out) calc(0.35s + var(--i) * 0.1s); }
.medal.is-in .m-dots { opacity: 1; transition: opacity 1s ease calc(0.8s + var(--i) * 0.1s); }
.odo {
  position: relative;
  display: flex;
  margin-top: 3px;
  font: 500 1.7rem/1 var(--display);
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.dg {
  position: relative;
  display: inline-block;
  height: 1.08em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.dg::before { content: "0"; visibility: hidden; }
.dg i { position: absolute; inset: 0; top: 0.04em; font-style: normal; text-align: center; }
.dg i.in { animation: dg-in 0.75s var(--ease-out) both; }
.dg i.out { animation: dg-out 0.75s var(--ease-out) both; }
@keyframes dg-in { from { transform: translateY(-105%); } }
@keyframes dg-out { to { transform: translateY(105%); opacity: 0.2; } }
.medal-unit {
  position: relative;
  margin-top: 2px;
  font: 600 0.44rem/1 var(--ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.count-note {
  margin: 30px auto 0;
  max-width: 26ch;
  font: italic 500 1.2rem/1.4 var(--display);
  color: var(--ink-soft);
  text-wrap: balance;
}

/* ==================== 4. Programme ==================== */
.sec--prog { padding-top: 46px; }
.tl {
  --x: 84px;
  position: relative;
  max-width: 344px;
  margin: 42px auto 0;
  text-align: left;
}
.tl-thread {
  position: absolute;
  left: var(--x);
  top: 4px;
  bottom: 44px;
  width: 1px;
  background: color-mix(in oklch, var(--gold) 26%, transparent);
}
.tl-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--gold-light), var(--gold) 20%, var(--gold-deep));
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}
.tl-list { display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; }
.tl-day { position: relative; padding-left: calc(var(--x) + 24px); }
.tl-day span {
  font: 600 0.64rem/1 var(--ui);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.tl-day::before {
  content: "";
  position: absolute;
  left: calc(var(--x) - 4px);
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border: 1px solid var(--gold);
  background: var(--paper);
  transform: rotate(45deg);
  transition: background 0.6s ease;
}
.tl-day.is-lit::before { background: var(--gold); }
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--x) 1fr;
  align-items: center;
}
.tl-item[data-reveal] { opacity: 1; transform: none; }
.tl-ico {
  justify-self: center;
  width: 58px;
  height: 58px;
  margin-right: 6px;
  overflow: visible;
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tl-ico path { stroke-dasharray: 1 2; stroke-dashoffset: 1.001; }
.tl-item.is-in .tl-ico path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(0.5, 0.05, 0.25, 1) var(--t); }
.tl-knot {
  position: absolute;
  left: calc(var(--x) - 5.5px);
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--paper);
  transition: background 0.7s ease, box-shadow 0.9s var(--ease-out);
}
.tl-item.is-lit .tl-knot { background: var(--gold); box-shadow: 0 0 0 5px color-mix(in oklch, var(--gold) 16%, transparent); }
.tl-text {
  padding-left: 26px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-out) 0.35s, transform 1.1s var(--ease-out) 0.35s;
}
.tl-item.is-in .tl-text { opacity: 1; transform: none; }
.tl-when { margin: 0; font: italic 500 1.12rem/1 var(--display); color: var(--gold-deep); }
.tl-what { margin: 6px 0 0; font: 400 2.15rem/1 var(--script); color: var(--ink-sage); }
.tl-where { margin: 6px 0 0; max-width: 22ch; font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }

/* ==================== 5. Le lieu ==================== */
.arch {
  position: relative;
  width: min(76%, 290px);
  aspect-ratio: 300 / 360;
  margin: 56px auto 34px;
}
.arch[data-reveal] { transform: translateY(30px) scale(0.97); transition-duration: 1.1s, 1.5s; }
.arch[data-reveal].is-in { transform: none; }
.arch-lace { position: absolute; display: block; }
.arch-lace img { display: block; width: 100%; height: 100%; }
.arch-win {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 1000px 1000px 0 0;
  background: var(--paper);
}
.arch-win img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  transform: scale(1.18);
  will-change: transform;
}
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; margin-top: 28px; }
.pill { padding: 0 15px; gap: 9px; font-size: 1.06rem; white-space: nowrap; }

/* ==================== 6. Dress code ==================== */
.swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 10px;
  max-width: 340px;
  margin: 44px auto 0;
  padding: 0;
  list-style: none;
}
.swatches[data-reveal] { opacity: 1; transform: none; }
.sw { display: grid; justify-items: center; gap: 12px; width: 100px; }
.sw-cloth {
  position: relative;
  display: block;
  width: 82px;
  height: 104px;
  opacity: 0;
  transform: translateY(-20px) rotate(calc(var(--r) - 10deg));
  transition: opacity 0.8s ease calc(var(--i) * 110ms), transform 1.3s var(--ease-out) calc(var(--i) * 110ms);
}
.swatches.is-in .sw-cloth { opacity: 1; transform: rotate(var(--r)); }
/* ombre douce sous le coupon, sans filtre */
.sw-cloth::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 14px;
  bottom: 4px;
  box-shadow: 0 8px 12px -4px oklch(0.3 0.03 70 / 0.3);
}
.sw-fab {
  --sheen: linear-gradient(transparent, transparent);
  position: absolute;
  inset: 0;
  background:
    var(--sheen),
    repeating-linear-gradient(0deg, oklch(1 0 0 / 0.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, oklch(0 0 0 / 0.05) 0 1px, transparent 1px 2.6px),
    linear-gradient(165deg, color-mix(in oklch, var(--c) 78%, white), var(--c) 48%, color-mix(in oklch, var(--c) 86%, black));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 8px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 8px 100%;
}
/* le haut replié du coupon, avec sa piqûre */
.sw-fab::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 24px;
  background:
    linear-gradient(oklch(1 0 0 / 0.3), transparent 30%),
    repeating-linear-gradient(90deg, oklch(0 0 0 / 0.05) 0 1px, transparent 1px 2.6px),
    color-mix(in oklch, var(--c) 88%, black);
  box-shadow: 0 3px 3px -1px oklch(0.2 0.03 70 / 0.28);
}
.sw-fab::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 30px;
  border-top: 1px dashed color-mix(in oklch, var(--c) 55%, white);
  opacity: 0.8;
}
.sw--rose .sw-fab,
.sw--or .sw-fab { --sheen: linear-gradient(118deg, transparent 28%, oklch(1 0 0 / 0.32) 44%, transparent 60%); }
.sw--bleu .sw-fab { --sheen: linear-gradient(140deg, transparent 40%, oklch(1 0 0 / 0.18) 55%, transparent 70%); }
.sw-name { font: italic 500 1.05rem/1.1 var(--display); color: var(--ink-soft); }

/* ==================== 7. Réponse ==================== */
.rsvp-stage { position: relative; z-index: 3; max-width: 356px; margin: 36px auto 0; }
.rsvp-card {
  position: relative;
  display: grid;
  gap: 22px;
  padding: 48px 26px 26px;
  text-align: left;
  color: var(--ink);
  background: var(--grain) 0 0 / 220px, var(--paper);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.8),
    0 4px 10px oklch(0.1 0.02 135 / 0.22),
    0 34px 60px -26px oklch(0.08 0.02 135 / 0.8);
}
.rsvp-card::before,
.rsvp-card::after { content: ""; position: absolute; pointer-events: none; }
.rsvp-card::before { inset: 8px; border: 1px solid color-mix(in oklch, var(--gold) 70%, transparent); }
.rsvp-card::after { inset: 11.5px; border: 0.5px solid color-mix(in oklch, var(--gold) 50%, transparent); }
.card-sprig {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 128px;
  padding: 0 10px;
  translate: -50% -4px;
  background: var(--grain) 0 0 / 220px, var(--paper);
}
.card-sprig svg { stroke: var(--gold-deep) !important; }
.field { display: grid; gap: 4px; margin: 0; }
.field-label {
  font: 600 0.62rem/1 var(--ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.field input {
  width: 100%;
  min-height: 44px;
  padding: 10px 2px 9px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font: italic 500 1.3rem/1.2 var(--display);
  color: var(--ink);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.field input::placeholder { color: color-mix(in oklch, var(--ink-soft) 50%, transparent); }
.field:has(.field-ink) { position: relative; }
.field input:focus { outline: none; }
/* le filet d'or se trace depuis le centre quand on écrit */
.field-ink {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transition: transform 0.7s var(--ease-out);
  pointer-events: none;
}
.field input:focus + .field-ink { transform: none; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.choice legend { margin-bottom: 10px; padding: 0; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.field--count { transition: opacity 0.45s ease; }
.rsvp-card.is-regret .field--count { opacity: 0.3; pointer-events: none; }
.form-error { min-height: 1.1em; margin: -10px 0 0; text-align: center; font: italic 500 1rem/1.1 var(--display); color: oklch(0.5 0.11 35); }

/* la carte pliée, l'enveloppe et le cachet */
.flyer { position: absolute; inset: 0; pointer-events: none; }
.fold { position: absolute; left: 0; top: 0; z-index: 2; }
.fold-p { position: absolute; left: 0; right: 0; height: calc(100% / 3 + 0.5px); background: var(--grain) 0 0 / 220px, var(--paper); box-shadow: 0 10px 16px -8px oklch(0.1 0.02 135 / 0.4); }
.fold-p::before { content: ""; position: absolute; border: 1px solid color-mix(in oklch, var(--gold) 70%, transparent); pointer-events: none; }
.fold-top { top: 0; transform-origin: 50% 100%; border-radius: 3px 3px 0 0; }
.fold-top::before { inset: 8px 8px -1px; border-bottom: 0; }
.fold-mid { top: calc(100% / 3); display: grid; place-content: center; gap: 6px; text-align: center; }
.fold-mid::before { inset: -1px 8px; border-block: 0; }
.fold-bot { top: calc(200% / 3); transform-origin: 50% 0; border-radius: 0 0 3px 3px; }
.fold-bot::before { inset: -1px 8px 8px; border-top: 0; }
.fold-p .sh { position: absolute; inset: 0; background: oklch(0.32 0.03 70); opacity: 0; }
.fold-mid p { margin: 0; }
.fold-to { font: 600 0.58rem/1 var(--ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); }
.fold-name { padding: 0 20px; font: 400 2.1rem/1.15 var(--script); color: var(--ink-sage); }
.fold-ans { font: italic 500 1.05rem/1 var(--display); color: var(--ink-soft); }
.env-part {
  position: absolute;
  left: calc(50% - var(--ew) / 2);
  top: var(--et);
  width: var(--ew);
  height: var(--eh);
  opacity: 0;
}
.env-back {
  z-index: 1;
  border-radius: 3px;
  background:
    radial-gradient(circle, color-mix(in oklch, var(--gold) 55%, transparent) 0.8px, transparent 1.4px) 0 0 / 11px 11px,
    var(--sage);
  box-shadow: inset 0 0 0 6px var(--paper-2), 0 28px 44px -20px oklch(0.08 0.02 135 / 0.75);
}
.env-front { z-index: 3; overflow: visible; }
.ef-side { fill: var(--paper-2); }
.ef-bottom { fill: var(--paper); }
.ef-line { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
.env-flap { z-index: 0; height: calc(var(--eh) * 0.6); transform-origin: 50% 0; transform-style: preserve-3d; }
.env-flap.is-front { z-index: 4; }
.env-flap span { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap-out {
  clip-path: polygon(0 0, 100% 0, 52% 98%, 50% 100%, 48% 98%);
  background: linear-gradient(var(--paper), var(--paper-3));
}
.flap-in {
  clip-path: polygon(50% 0, 52% 2%, 100% 100%, 0 100%, 48% 2%);
  transform: rotateX(180deg);
  background:
    radial-gradient(circle, color-mix(in oklch, var(--gold) 55%, transparent) 0.8px, transparent 1.4px) 0 0 / 11px 11px,
    var(--sage);
}
.env-seal {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(var(--et) + var(--eh) * 0.6 - 6px);
  width: 66px;
  height: 66px;
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 3px oklch(0.1 0.02 135 / 0.4));
}

.rsvp-thanks {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 20px 8px;
  text-align: center;
}
.rsvp-thanks[hidden] { display: none; }
.thanks-sprig { width: 150px; margin-bottom: 6px; }
.thanks-title { margin: 0; font: 400 3.6rem/1.05 var(--script); color: var(--gold-light); outline: none; }
.thanks-line { margin: 0; max-width: 24ch; font: italic 500 1.25rem/1.4 var(--display); color: var(--on-dark); text-wrap: balance; }
.thanks-demo { margin: 6px 0 0; font: 500 0.82rem/1.5 var(--ui); color: var(--on-dark-soft); }

/* ==================== 8. Signature ==================== */
.credit {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 84px 24px calc(44px + env(safe-area-inset-bottom));
  text-align: center;
  background: var(--grain) 0 0 / 220px, var(--paper-2);
}
.credit .sec-sprig { margin-bottom: 4px; }
.credit-demo { margin: 0; max-width: 22ch; font: italic 500 1.5rem/1.3 var(--display); color: var(--ink); text-wrap: balance; }
.credit-sign {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  font: 500 0.95rem/1 var(--display);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.credit-sign img { width: 34px; height: 34px; }

/* ==================== Boutons : une famille de papeterie ==================== */
/* Coins en creux comme un carton d'invitation, filet d'or intérieur concentrique.
   ::before porte la forme (aplat ou filet extérieur), ::after le filet intérieur.
   Les coins sont découpés au masque ; les arcs dorés sont des anneaux en dégradé
   centrés sur les mêmes points, si bien que filets et coins restent parallèles.
   Tout est statique : seuls scale, translate et l'opacité bougent. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: 600 0.7rem/1.1 var(--ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: scale 0.5s var(--btn-ease);
}
.btn > svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 0.5s var(--btn-ease), rotate 0.6s var(--btn-ease);
}
.btn::before,
.btn::after {
  --o: 0px;
  --fw: 0px;
  --fc: transparent;
  --c: calc(var(--btn-notch) + var(--o));
  --n: calc(var(--o) * -1);
  --f: calc(100% + var(--o));
  --m: #0000 var(--c), #000 calc(var(--c) + 0.6px);
  --g: #0000 calc(var(--c) - 0.1px), var(--fc) calc(var(--c) + 0.4px), var(--fc) calc(var(--c) + var(--fw) + 0.1px), #0000 calc(var(--c) + var(--fw) + 0.6px);
  content: "";
  position: absolute;
  inset: var(--o);
  z-index: -1;
  pointer-events: none;
  border: var(--fw) solid var(--fc);
  background-color: var(--fill, transparent);
  background-image:
    radial-gradient(circle at var(--n) var(--n), var(--g)),
    radial-gradient(circle at var(--f) var(--n), var(--g)),
    radial-gradient(circle at var(--n) var(--f), var(--g)),
    radial-gradient(circle at var(--f) var(--f), var(--g)),
    var(--tex, none);
  background-size: 51% 51%, 51% 51%, 51% 51%, 51% 51%, 220px;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-origin: border-box;
  -webkit-mask:
    radial-gradient(circle at var(--n) var(--n), var(--m)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at var(--f) var(--n), var(--m)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at var(--n) var(--f), var(--m)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at var(--f) var(--f), var(--m)) 100% 100% / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at var(--n) var(--n), var(--m)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at var(--f) var(--n), var(--m)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at var(--n) var(--f), var(--m)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at var(--f) var(--f), var(--m)) 100% 100% / 51% 51% no-repeat;
  transition: opacity 0.45s ease, background-color 0.45s ease;
}
.btn:active { scale: 0.975; transition-duration: 0.12s; }
.btn:focus-visible { outline: 1.5px solid var(--gold-deep); outline-offset: 4px; }
.sec--dark .btn:focus-visible { outline-color: var(--gold-light); }
.btn:disabled { cursor: default; opacity: 0.55; scale: none; }

/* principal : aplat de sauge profonde, grain du papier, filet d'or intérieur */
.btn--primary {
  color: var(--paper);
  /* ombre resserrée : elle ne déborde pas dans les coins en creux */
  box-shadow: 0 18px 14px -16px oklch(0.15 0.03 135 / 0.85);
}
.btn--primary > svg { stroke: var(--gold-light); }
.btn--primary::before {
  --fill: var(--sage-deep);
  --tex: var(--grain-dark);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.1), inset 0 -1px 0 oklch(0 0 0 / 0.2);
}
.btn--primary::after {
  --o: var(--btn-inset);
  --fw: 1px;
  --fc: color-mix(in oklch, var(--gold) 78%, transparent);
}
/* pression : le carton s'enfonce comme sous la presse */
.btn--primary:active::before { box-shadow: inset 0 2px 7px oklch(0.08 0.02 135 / 0.55), inset 0 -1px 0 oklch(1 0 0 / 0.06); }
.btn--block { display: flex; width: 100%; min-height: 54px; }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 0.74rem; }
.btn--sm { min-height: 46px; padding: 0 20px; gap: 9px; font-size: 0.66rem; letter-spacing: 0.18em; }

/* secondaire sur la sauge : double filet d'or, sans aplat, écriture à la plume */
.btn--ghost {
  padding: 0 18px;
  font: italic 500 1.1rem/1.1 var(--display);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--on-dark);
}
.btn--ghost > svg { stroke: var(--gold-light); stroke-width: 1.25; }
.btn--ghost::before { --fw: 1px; --fc: color-mix(in oklch, var(--gold-light) 66%, transparent); }
.btn--ghost::after { --o: 3.5px; --fw: 0.5px; --fc: color-mix(in oklch, var(--gold-light) 36%, transparent); }
.btn--ghost:active::before { --fill: color-mix(in oklch, var(--gold) 20%, transparent); }

/* case de choix : carton ivoire, une fleur d'or s'ouvre dans la pastille quand on la coche */
.btn--tile {
  display: flex;
  width: 100%;
  min-height: 52px;
  padding: 0 12px;
  gap: 9px;
  font: italic 500 1.2rem/1 var(--display);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  transition: scale 0.5s var(--btn-ease), color 0.45s ease;
}
.btn--tile::before { --fw: 1px; --fc: color-mix(in oklch, var(--gold) 38%, var(--line)); }
.btn--tile::after { --o: 3.5px; --fw: 0.5px; --fc: color-mix(in oklch, var(--gold) 75%, transparent); opacity: 0; }
.btn > .choice-mark { width: 18px; height: 18px; overflow: visible; stroke: none; }
.cm-ring { fill: none; stroke: color-mix(in oklch, var(--gold) 55%, var(--line)); stroke-width: 1; transition: stroke 0.45s ease; }
.cm-flower {
  fill: var(--gold-deep);
  opacity: 0;
  transform: scale(0.3) rotate(-72deg);
  transform-origin: 10px 10px;
  transition: transform 0.8s var(--ease-out), opacity 0.35s ease;
}
.cm-heart { fill: var(--gold-pale); }
.choice input:checked + .btn--tile { color: var(--ink); }
.choice input:checked + .btn--tile::before {
  --fc: color-mix(in oklch, var(--gold-deep) 85%, transparent);
  --fill: color-mix(in oklch, var(--gold-pale) 65%, transparent);
}
.choice input:checked + .btn--tile::after { opacity: 1; }
.choice input:checked + .btn--tile .cm-ring { stroke: var(--gold-deep); }
.choice input:checked + .btn--tile .cm-flower { opacity: 1; transform: none; }
.choice input:focus-visible + .btn--tile { outline: 1.5px solid var(--gold-deep); outline-offset: 3px; }

/* compteur : deux petits médaillons perlés, comme ceux de la date */
.stepper { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.stepper button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gold-deep);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: scale 0.45s var(--btn-ease), background-color 0.35s ease;
}
.stepper svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; }
.st-ring { stroke-width: 1; opacity: 0.85; }
.st-beads { stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 0 4.7124; opacity: 0.6; }
.st-glyph { stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.stepper button:active { scale: 0.9; background-color: color-mix(in oklch, var(--gold-pale) 90%, transparent); transition-duration: 0.12s; }
.stepper button:focus-visible { outline: 1.5px solid var(--gold-deep); outline-offset: 3px; }
.stepper output { min-width: 2ch; text-align: center; font: 500 1.9rem/1 var(--display); font-variant-numeric: lining-nums; color: var(--ink); }

/* lien discret : écriture italique, un petit trait d'or qui s'allonge au survol */
.link-quiet {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  font: italic 500 1.1rem/1 var(--display);
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.4s ease, scale 0.4s var(--btn-ease);
}
.link-quiet svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--gold-deep); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.7s var(--btn-ease); }
.link-quiet::after {
  content: "";
  position: absolute;
  left: 31px;
  right: 8px;
  bottom: 9px;
  height: 1px;
  background: color-mix(in oklch, var(--gold) 80%, transparent);
  transform: scaleX(0.22);
  transition: transform 0.7s var(--btn-ease);
}
.link-quiet:active { scale: 0.97; }
.link-quiet:focus-visible { outline: 1.5px solid var(--gold-deep); outline-offset: 2px; }

@media (hover: hover) {
  .btn--primary:hover::before { --fill: color-mix(in oklch, var(--sage-deep) 70%, var(--sage)); }
  .btn--primary:hover > svg { translate: 0 -1px; }
  .btn--ghost:hover::before { --fill: color-mix(in oklch, var(--gold) 15%, transparent); }
  .btn--tile:hover::before { --fc: color-mix(in oklch, var(--gold) 70%, transparent); }
  .stepper button:hover { background-color: color-mix(in oklch, var(--gold-pale) 70%, transparent); }
  .link-quiet:hover { color: var(--ink); }
  .link-quiet:hover::after { transform: none; }
  .link-quiet:hover svg { rotate: -50deg; }
}

/* envoi en cours : le bouton reste enfoncé le temps du pliage */
.rsvp-stage.is-sending .send { pointer-events: none; scale: 0.985; }
.rsvp-stage.is-sending .send::after { opacity: 0.45; }
.thanks-reset { margin-top: 16px; }
.credit-actions { display: grid; justify-items: center; gap: 10px; margin-top: 8px; }

/* ==================== Toast ==================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 20;
  width: max-content;
  max-width: calc(var(--col-w) - 32px);
  margin: 0;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--night-2);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--gold) 35%, transparent), 0 14px 30px -10px oklch(0.08 0.02 135 / 0.7);
  color: var(--paper);
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 24px);
  transition: transform 0.6s var(--ease-out), opacity 0.35s ease, visibility 0s 0.6s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

/* ==================== Mouvement réduit : de simples fondus ==================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .sw-cloth, .tl-text { transform: none !important; transition: opacity 0.6s ease !important; }
  [data-sprig] path, .tl-ico path, .m-scallop, .m-ring { stroke-dashoffset: 0 !important; transition: none !important; }
  .m-dots { opacity: 1 !important; }
  .cover-leaves, .flecks { animation: none !important; }
  .cue-bead, .cue-chev { animation: none !important; }
  .cue-bead { opacity: 1; transform: translateY(8px); }
  .flecks { display: none; }
  .frame-sheen { transition: none; }
  .cover-cue { opacity: 1; transform: none; transition: none; }
  .dg i.in, .dg i.out { animation: none; }
  .hint-ring::before, .hint-ring::after, .loader span { animation: none; }
}