/* ==========================================================================
   Linh & Kenan — 6 novembre 2027

   Sommaire
   01. Tokens
   02. Reset & base
   03. Thèmes de section
   04. Typographie & primitives
   05. Animations (reveal, split, loader)
   06. Chrome : fourrure, grain, curseur, masthead, rail
   07. Hero & rosace
   08. Bandeau typographique
   09. Le mot — portails
   10. Le jour J — du crépuscule à la nuit
   11. Formulaire RSVP & sceau de cire
   12. Colophon
   13. Responsive & préférences
   ========================================================================== */

/* -- 01. Tokens ------------------------------------------------------------ */
:root {
  /* Palette de novembre : brun profond, parchemin tiédi, rouille brûlée */
  --ink:      #16110B;
  --ink-2:    #241A12;
  --paper:    #EAE0CE;
  --paper-2:  #DFD3BB;
  --accent:   #8A3A22;   /* rouille profonde — sur fond clair */
  --accent-2: #C4713F;   /* rouille claire — sur fond sombre, lueurs */
  --moss:     #4C5140;   /* vert fané, touches ponctuelles */

  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: rgba(22, 17, 11, 0.64);
  --rule: rgba(22, 17, 11, 0.18);

  --serif: 'Fraunces', 'Times New Roman', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --shell: 78rem;
  --block: clamp(3.25rem, 6.5vw, 5.5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --slow: 1100ms;
  --mid: 620ms;
  --fast: 280ms;
}

/* -- 02. Reset & base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul, dl, figure, fieldset, legend { margin: 0; }
ol, ul { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
svg { display: block; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; background: none; }
sup { font-size: 0.6em; vertical-align: super; line-height: 0; }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: -100vw;
  top: 1rem;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-size: 0.85rem;
}
.skip-link:focus { left: 1rem; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* -- 03. Thèmes de section ------------------------------------------------- */
.theme-dark {
  --bg: var(--ink);
  --fg: var(--paper);
  --fg-soft: rgba(234, 224, 206, 0.6);
  --rule: rgba(234, 224, 206, 0.2);
  --backdrop-veil: linear-gradient(180deg, rgba(22, 17, 11, 0.78), rgba(22, 17, 11, 0.9));
  background: var(--bg);
  color: var(--fg);
}

.theme-light {
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: rgba(22, 17, 11, 0.64);
  --rule: rgba(22, 17, 11, 0.18);
  --backdrop-veil: linear-gradient(180deg, rgba(234, 224, 206, 0.86), rgba(223, 211, 187, 0.89));
  background: var(--bg);
  color: var(--fg);
}

/* -- 04. Typographie & primitives ------------------------------------------ */
.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.chapter {
  position: relative;
  padding-block: var(--block);
  overflow: hidden;
}

/* Fond photographique diffus.
   L'image est déclarée par section via --photo ; si le fichier est absent,
   rien ne s'affiche (aucune icône cassée) et le reste fonctionne. */
.backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.backdrop::before {
  content: '';
  position: absolute;
  inset: -10%;
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(0.6);
  opacity: var(--photo-opacity, 0.5);
  transform: scale(1.06);
  animation: backdrop-drift 52s ease-in-out infinite alternate;
}
/* Voile : garantit le contraste du texte quelle que soit la photo posée. */
.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--backdrop-veil);
}

@keyframes backdrop-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.14) translate3d(2%, -1.5%, 0); }
}

.chapter__num {
  font-family: var(--serif);
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  letter-spacing: 0.3em;
  color: var(--accent-2);
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}
.theme-light .chapter__num { color: var(--accent); }

.chapter__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 1.3rem + 4.5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

/* Titres « gravés » : une ombre claire dessous et une sombre dessus
   creusent la lettre dans le parchemin. Inversé sur fond sombre. */
.theme-light .chapter__title,
.theme-light .rsvp-step__legend,
.theme-light .bay__value {
  text-shadow:
    0 1px 0 rgba(255, 252, 245, 0.7),
    0 -1px 0 rgba(22, 17, 11, 0.16);
}
.theme-dark .chapter__title,
.theme-dark .colophon__names {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 -1px 0 rgba(255, 228, 200, 0.1);
}

.link-underline {
  position: relative;
  display: inline-block;
  padding-block: 0.15em;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform var(--mid) var(--ease);
}
.link-underline:hover::after { transform: scaleX(0); transform-origin: left; }

/* -- 05. Animations -------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: 0.08em;
  margin-block: -0.08em;
}
.word__inner {
  display: inline-block;
  transform: translateY(105%);
  transition: transform var(--slow) var(--ease);
  transition-delay: var(--delay, 0ms);
}
.is-in .word__inner { transform: none; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: opacity var(--mid) ease, visibility var(--mid);
}
.loader.is-done { opacity: 0; visibility: hidden; }
.no-js .loader { display: none; }

.loader__mark {
  width: 2rem;
  height: 3.4rem;
  color: var(--accent-2);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 500ms var(--ease), transform 900ms var(--ease);
}
.loader.is-ready .loader__mark { opacity: 1; transform: none; }

/* -- 06. Chrome ------------------------------------------------------------- */

/* Fourrure : bruit très étiré sur un axe, qui lit comme un poil court.
   Volontairement à la limite du perceptible. */
.pelage {
  position: fixed;
  inset: -12%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.055;
  transform: rotate(-7deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.72' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23p)'/%3E%3C/svg%3E");
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Curseur : une seule transformation, pilotée entièrement en JS.
   Pas de mix-blend-mode, pas de propriété `scale` concurrente,
   pas de transition sur transform. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 140;
  width: 2rem;
  height: 2rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  display: none;
}
.cursor.is-visible { opacity: 1; }

.cursor__shape {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--accent-2);
  transform: rotate(45deg);
}

/* Le curseur natif n'est masqué qu'une fois le curseur personnalisé
   réellement actif : jamais de pointeur invisible si le script échoue. */
.has-cursor body,
.has-cursor a,
.has-cursor button,
.has-cursor label { cursor: none; }
.has-cursor input,
.has-cursor select,
.has-cursor textarea { cursor: auto; }

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2.5vw, 1.75rem) var(--gutter);
  color: var(--paper);
  transform: translateY(-110%);
  transition: transform var(--slow) var(--ease), color var(--mid) ease;
}
.masthead.is-in { transform: none; }
.masthead.is-on-light { color: var(--ink); }
.no-js .masthead { transform: none; color: var(--ink); }

.masthead__monogram {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
}
.masthead__monogram span { margin-inline: 0.15em; }

.masthead__cta {
  position: relative;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
}
.masthead__cta-rule {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform var(--mid) var(--ease);
}
.masthead__cta:hover .masthead__cta-rule { transform: scaleX(0); transform-origin: left; }

.rail {
  position: fixed;
  top: 50%;
  right: clamp(1rem, 2vw, 2rem);
  z-index: 90;
  transform: translateY(-50%);
  display: none;
  opacity: 0;
  transition: opacity var(--mid) ease, color var(--mid) ease;
  color: var(--paper);
}
.rail.is-in { opacity: 1; }
.rail.is-on-light { color: var(--ink); }

.rail ol { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-end; }

.rail a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.45;
  transition: opacity var(--fast) ease;
}
.rail a:hover, .rail a.is-current { opacity: 1; }

.rail__num { font-family: var(--serif); font-size: 0.8rem; }

.rail__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width var(--mid) var(--ease), opacity var(--fast) ease;
}
.rail a:hover .rail__label,
.rail a.is-current .rail__label { max-width: 8rem; opacity: 1; }

@media (min-width: 64rem) { .rail { display: block; } }

/* -- 07. Hero & rosace ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--block) * 0.8) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

.rosace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

/* Voile radial : assombrit le cœur de la verrière pour que les prénoms
   restent parfaitement lisibles, en laissant respirer le réseau aux bords. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 58% 42% at 50% 50%,
    rgba(22, 17, 11, 0.92) 0%,
    rgba(22, 17, 11, 0.72) 42%,
    rgba(22, 17, 11, 0) 78%
  );
}

.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: grid;
  justify-items: center;
}

.hero__edge {
  position: absolute;
  left: calc(var(--gutter) * 0.42);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 0.68rem;
  letter-spacing: 0.45em;
  color: var(--fg-soft);
  display: none;
  z-index: 1;
}

.hero__label {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

.hero__names {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.5rem, 13vw, 10rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  display: grid;
  justify-items: center;
}

.hero__amp {
  font-style: italic;
  font-size: 0.4em;
  color: var(--accent-2);
  margin-block: 0.08em;
}

.hero__meta {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.75rem, 4vw, 3rem);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-soft);
  transition: color var(--fast) ease;
}
.hero__scroll:hover { color: var(--fg); }
.hero__scroll-rule {
  width: clamp(2.5rem, 6vw, 4.5rem);
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.hero__scroll:hover .hero__scroll-rule { transform: scaleX(1.35); }

@media (min-width: 48rem) { .hero__edge { display: block; } }
@media (max-width: 30rem) { .hero__meta { letter-spacing: 0.1em; } }

/* -- 08. Bandeau typographique ---------------------------------------------- */
.ribbon {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: clamp(0.75rem, 1.6vw, 1.15rem);
}

.ribbon__track { display: flex; width: max-content; will-change: transform; }

.ribbon__track span {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 0.4em;
  color: transparent;
  -webkit-text-stroke: 1px var(--fg-soft);
}
.ribbon__track i { font-style: normal; color: var(--accent-2); -webkit-text-stroke: 0; }

/* -- 09. Le mot — portails ---------------------------------------------------- */
/* Léger dégradé plutôt qu'un aplat : le parchemin respire. */
.mot {
  background: linear-gradient(168deg, #F1E9DA 0%, var(--paper) 42%, var(--paper-2) 100%);
  --photo: url('../images/costume-web.jpg');
  --photo-opacity: 0.34;
}

.mot__lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.8rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 34rem;
  margin-bottom: clamp(2rem, 4.5vw, 3rem);
}

.bays {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

/* Chaque information vit dans sa travée. L'ogive est tracée en JS pour
   rester juste quelle que soit la largeur ; le survol y fait entrer la
   lumière, comme sur la rosace du hero. */
.bay {
  position: relative;
  display: flex;
  /* Contenu calé sous la tête d'arc : les libellés des trois travées
     s'alignent entre eux, quelle que soit la longueur des textes. */
  align-items: flex-start;
  min-height: clamp(16rem, 25vw, 19.5rem);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  padding-top: calc(var(--arch-head, 7rem) + 0.75rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: center;
}

/* La photo est découpée par l'ogive elle-même, jamais par un rectangle.
   Elle reste très en retrait : on doit reconnaître le sujet sans que la
   travée ne rompe la clarté de la section. Le survol la révèle un peu. */
.bay__image {
  opacity: 0.34;
  filter: saturate(0.55) contrast(0.95);
  transform-origin: center;
  transition: opacity var(--mid) ease, transform 1.4s var(--ease), filter var(--mid) ease;
}
.bay:hover .bay__image {
  opacity: 0.55;
  filter: saturate(0.85) contrast(1);
  transform: scale(1.04);
}

.bay__scrim { fill: url(#bay-scrim); }

.bay__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--rule);
  pointer-events: none;
  overflow: visible;
  transition: color var(--mid) var(--ease);
}

.bay__outline {
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--ease) 150ms;
}
.bay.is-in .bay__outline { stroke-dashoffset: 0; }
.no-js .bay__outline { stroke-dashoffset: 0; }

.bay__glow {
  fill: url(#bay-glow);
  opacity: 0;
  transition: opacity var(--mid) var(--ease);
}

.bay__jewel {
  fill: var(--accent);
  opacity: 0;
  transform-origin: center;
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.bay.is-in .bay__jewel { opacity: 1; }

.bay:hover .bay__frame { color: color-mix(in srgb, var(--fg) 45%, transparent); }
.bay:hover .bay__glow { opacity: 1; }
.bay:hover .bay__jewel { transform: rotate(45deg) scale(1.3); }

.bay__body { position: relative; width: 100%; }

.bay__label {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.bay__value {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.bay__note {
  font-size: 0.92rem;
  color: var(--fg-soft);
  max-width: 20rem;
  margin-inline: auto;
}

.bay__link { margin-top: 1.25rem; }

@media (min-width: 52rem) {
  .bays { grid-template-columns: repeat(3, 1fr); }
}

/* -- 10. Le jour J ------------------------------------------------------------ */

/* Le fond descend du crépuscule vers la nuit. */
.jour {
  background: linear-gradient(180deg, #3A2A1A 0%, #241A11 45%, #100C08 100%);
  --photo: url('../images/lieu.jpg');
  --photo-opacity: 0.34;
}

/* Braises : la seule chose qui bouge en permanence. Ascension lente,
   très peu d'éléments, transform et opacity uniquement. */
.embers {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ember {
  position: absolute;
  bottom: -1rem;
  left: var(--x, 50%);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: #E39355;
  box-shadow: 0 0 6px 1px rgba(227, 147, 85, 0.55);
  opacity: 0;
  will-change: transform, opacity;
  animation: ember-rise var(--dur, 22s) linear var(--delay, 0s) infinite;
}

@keyframes ember-rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.4); opacity: 0; }
  10%  { opacity: 1; }
  55%  { opacity: 0.85; }
  85%  { opacity: 0.35; }
  100% { transform: translate3d(var(--drift, 16px), calc(var(--rise, 520px) * -1), 0) scale(1.1); opacity: 0; }
}

/* Le déroulé s'ouvre au clic : rien ne dépend du défilement, et la
   section reste courte. */
.moments { border-top: 1px solid var(--rule); }

/* Intertitre de journée */
.day {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-bottom: 0.35rem;
}
.day::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.day__label {
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-2);
  white-space: nowrap;
}

.moment { border-bottom: 1px solid var(--rule); }

.moment__heading { margin: 0; font-weight: inherit; }

.moment__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 3vw, 2.5rem);
  padding-block: clamp(0.9rem, 2vw, 1.35rem);
  text-align: left;
}

.moment__hour {
  flex: none;
  min-width: 4.25rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
  color: var(--fg-soft);
  transition: color var(--mid) var(--ease);
}

.moment__title {
  flex: 1;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  transition: color var(--mid) var(--ease);
}

.moment__sign {
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--mid) var(--ease), background var(--mid) ease, border-color var(--mid) ease;
}

.moment__head:hover .moment__title { color: var(--accent-2); }

.moment.is-open .moment__hour,
.moment.is-open .moment__title { color: var(--accent-2); }
.moment.is-open .moment__sign {
  transform: rotate(135deg);
  background: var(--accent-2);
  border-color: var(--accent-2);
}

/* Ouverture en douceur, sans hauteur codée en dur */
.moment__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--mid) var(--ease);
}
.moment.is-open .moment__panel { grid-template-rows: 1fr; }
.no-js .moment__panel { grid-template-rows: 1fr; }

.moment__inner { overflow: hidden; }

.moment__text {
  max-width: 38rem;
  color: var(--fg-soft);
  padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
  padding-left: calc(4.25rem + clamp(0.85rem, 3vw, 2.5rem));
}

@media (max-width: 30rem) {
  .moment__text { padding-left: 0; }
}

/* -- 11. Formulaire RSVP & sceau ------------------------------------------------ */
.rsvp {
  background: linear-gradient(192deg, var(--paper-2) 0%, #EFE7D8 40%, var(--paper-2) 100%);
  --photo: url('../images/lieu.jpg');
  --photo-opacity: 0.34;
}

.rsvp__intro {
  max-width: 34rem;
  color: var(--fg-soft);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.rsvp__intro strong { color: var(--fg); font-weight: 500; }

/* Sur grand écran, le formulaire garde sa largeur de lecture et le sceau
   occupe la colonne qui, sinon, resterait vide. */
.rsvp__layout { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

.rsvp__aside { display: none; justify-items: center; gap: 1.5rem; }

@media (min-width: 64rem) {
  .rsvp__layout { grid-template-columns: minmax(0, 38rem) 1fr; }
  .rsvp__aside { display: grid; }
}

/* Sceau posé, sans mouvement. */
.wax {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(7rem, 11vw, 9.5rem);
  aspect-ratio: 1;
}

.wax__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 47% 53% 51% 49% / 52% 47% 53% 48%;
  background: radial-gradient(circle at 33% 28%, #C4713F, #8A3A22 55%, #4E1C0E 100%);
  box-shadow:
    inset 0 4px 12px rgba(255, 216, 182, 0.3),
    inset 0 -6px 16px rgba(0, 0, 0, 0.55),
    0 10px 24px rgba(78, 28, 14, 0.28);
}
/* Creux du poinçon au centre de la cire */
.wax__disc::after {
  content: '';
  position: absolute;
  inset: 16%;
  border-radius: inherit;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.42), inset 0 -1px 2px rgba(255, 216, 182, 0.22);
}

.wax__mark {
  position: relative;
  width: 30%;
  height: auto;
  aspect-ratio: 120 / 200;
  color: rgba(255, 232, 210, 0.9);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.wax__caption {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-soft);
  text-align: center;
}

/* Le portail : le formulaire est encadré d'une ogive, comme une porte
   que l'on franchit. */
/* Le contenu démarre sous la naissance de l'arc (--arch-head), jamais
   dans la zone courbe : aucune lettre ne peut croiser le tracé. */
.portal {
  position: relative;
  max-width: 38rem;
  /* Le contenu démarre assez bas dans la tête d'arc, et les marges
     latérales dépassent toujours le retrait de la courbe à cette
     hauteur : aucune lettre ne peut croiser le tracé. */
  padding: calc(var(--arch-head, 10rem) * 0.72 + clamp(0.75rem, 1.5vw, 1.25rem))
           clamp(2.5rem, 5vw, 3rem)
           clamp(1.75rem, 3.5vw, 2.75rem);
}

.portal__crown {
  position: absolute;
  top: calc(var(--arch-head, 10rem) * 0.16);
  left: 0;
  right: 0;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  pointer-events: none;
}
.portal__crown-mark { width: 1.1rem; height: 1.85rem; color: var(--accent); }
.portal__crown-text {
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.portal__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--rule);
  pointer-events: none;
  overflow: visible;
}
.portal__outline {
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s var(--ease) 200ms;
}
.portal.is-in .portal__outline { stroke-dashoffset: 0; }
.no-js .portal__outline { stroke-dashoffset: 0; }

.portal__jewel { fill: var(--accent); }

.portal__body { position: relative; }

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rsvp-progress {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.no-js .rsvp-progress { display: none; }

.rsvp-progress li {
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--fg-soft);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0.4;
  transition: opacity var(--mid) ease, color var(--mid) ease;
}
.rsvp-progress li::after {
  content: '';
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: currentColor;
}
.rsvp-progress li:last-child::after { display: none; }
.rsvp-progress li.is-current { opacity: 1; color: var(--accent); }
.rsvp-progress li.is-done { opacity: 0.75; }
.rsvp-progress.is-short li:nth-child(3) { display: none; }
.rsvp-progress.is-short li:nth-child(2)::after { display: none; }

.js .rsvp-step[hidden] { display: none; }
.rsvp-step { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
.js .rsvp-step { animation: step-in var(--mid) var(--ease) both; }

@keyframes step-in {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}

.rsvp-step__legend {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.25rem + 1.8vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  padding: 0;
}

.grid-2 { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 40rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 0.5rem; }

.field label {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.field label span { color: var(--accent); }

/* Le trait du champ se retrace de gauche à droite à la prise de focus */
.field__control { position: relative; }
.field__control::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule);
}
.field__control::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.field__control:focus-within::after { transform: scaleX(1); }

.field input,
.field textarea,
.field select {
  position: relative;
  width: 100%;
  border: 0;
  padding: 0.85rem 0 0.7rem;
  font-size: 1.05rem;
  border-radius: 0;
}
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; }

.field input::placeholder,
.field textarea::placeholder { color: color-mix(in srgb, var(--fg) 35%, transparent); }

.field__control:has([aria-invalid='true'])::before { background: var(--accent); }

.field textarea { resize: vertical; min-height: 4.5rem; }

/* Le select reste natif (idéal sur mobile) ; seul le chevron est redessiné. */
.field__control--select select {
  appearance: none;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1 L6 6 L11 1' fill='none' stroke='%2316110B' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.15rem center;
  background-size: 0.7rem;
}

.field__error { font-size: 0.8rem; color: var(--accent); min-height: 1.1em; }

.choice-group { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .choice-group { grid-template-columns: 1fr 1fr; } }

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--rule);
  transition: border-color var(--mid) var(--ease), background var(--mid) var(--ease);
}
.choice:hover { border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.choice__mark {
  flex: none;
  width: 1.1rem;
  color: var(--fg-soft);
  transition: color var(--mid) ease, transform var(--slow) var(--ease);
}
.choice__mark svg { width: 100%; height: auto; aspect-ratio: 120 / 200; }
.choice:has(input:checked) .choice__mark { color: var(--accent); transform: scale(1.12); }

.choice__body { display: grid; gap: 0.2rem; }
.choice__title { font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; }
.choice__note { font-size: 0.85rem; color: var(--fg-soft); }

.rsvp-details[hidden] { display: none; }

.rsvp-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 2.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  overflow: hidden;
  transition: color var(--mid) var(--ease), opacity var(--fast) ease;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--mid) var(--ease);
}
.btn span { position: relative; z-index: 1; }

.btn--solid { background: var(--accent); color: var(--paper); }
.btn--solid:hover::before { transform: scaleY(1); }
.btn--solid:hover { border-color: var(--ink); }

.btn--ghost { color: var(--fg); border-color: var(--rule); background: transparent; }
.btn--ghost::before { display: none; }
.btn--ghost:hover { border-color: var(--fg); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn[hidden] { display: none; }

/* Le sceau de cire : on n'envoie pas un formulaire, on scelle une lettre */
.seal {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0;
}
.seal[hidden] { display: none; }
.seal:disabled { cursor: not-allowed; }

.seal__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  background: radial-gradient(circle at 34% 30%, var(--accent-2), var(--accent) 58%, #5F2413 100%);
  /* Bord légèrement irrégulier : de la cire, pas un jeton */
  border-radius: 47% 53% 51% 49% / 52% 47% 53% 48%;
  box-shadow: inset 0 2px 6px rgba(255, 220, 190, 0.28), inset 0 -3px 8px rgba(0, 0, 0, 0.42);
  transition: transform var(--mid) var(--ease), filter var(--mid) ease;
}
.seal:hover .seal__disc { transform: scale(1.06) rotate(-4deg); }
.seal:active .seal__disc { transform: scale(0.94) rotate(-2deg); }

.seal__mark {
  width: 1.15rem;
  height: 1.9rem;
  color: rgba(255, 235, 215, 0.82);
}

/* Onde de pression au moment du scellement */
.seal__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.seal.is-stamping .seal__disc { animation: seal-press 700ms var(--ease); }
.seal.is-stamping .seal__ring { animation: seal-ring 900ms var(--ease); }

@keyframes seal-press {
  0% { transform: scale(1); }
  35% { transform: scale(0.88) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes seal-ring {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}

.seal__label {
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: left;
  position: relative;
  padding-bottom: 0.3rem;
}
.seal__label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform var(--mid) var(--ease);
}
.seal:hover .seal__label::after { transform: scaleX(0); transform-origin: left; }

.rsvp-feedback { margin-top: 1.25rem; font-size: 0.9rem; min-height: 1.2em; }
.rsvp-feedback[data-state='error'] { color: var(--accent); }

.rsvp-done[hidden] { display: none; }
.rsvp-done { animation: step-in var(--slow) var(--ease) both; }

.seal__disc--fixed {
  width: 5.25rem;
  height: 5.25rem;
  margin-bottom: 1.75rem;
  transform: rotate(-7deg);
}

.rsvp-done__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.rsvp-done__text { color: var(--fg-soft); margin-bottom: 2rem; max-width: 30rem; }

/* -- 12. Colophon -------------------------------------------------------------- */
.colophon { padding-block: clamp(2.5rem, 5.5vw, 4rem); text-align: center; }
.colophon__rule { width: 7rem; height: 1rem; color: var(--accent-2); margin: 0 auto 1.75rem; }

.colophon__names {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
}

.colophon__date {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 11vw, 7rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

/* -- 13. Préférences utilisateur ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .word__inner { transform: none; }
  .bay__outline, .portal__outline { stroke-dashoffset: 0; }
  .bay__jewel { opacity: 1; }
  .loader { display: none; }
  .cursor { display: none !important; }
  .has-cursor body { cursor: auto; }
  .masthead { transform: none; }
  .embers { display: none; }
  .backdrop::before { animation: none; }
}