/* Base commune aux trois variantes : ciel, objets flottants, billet, sections, formulaire.
   Chaque variante (a.css, b.css, c.css) redéfinit les couleurs et habille les sections. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --card-w: min(100vw, 520px);
  --ease: cubic-bezier(.22, .8, .2, 1);
  --font-title: 'Cinzel Decorative', 'Cormorant SC', Georgia, serif;
  --font-script: 'Great Vibes', 'Brush Script MT', cursive;
  --font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-caps: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  --gold-hi: #f6e3a8;
  --gold-mid: #d4aa4f;
  --gold-lo: #a97c28;
  /* à redéfinir par variante */
  --ink: #3d1a2c;
  --names: #4b1f35;
  --accent: #8a5f17;
  --accent-strong: #6e4a10;
  --on-accent: #fff8ee;
  --focus: #5a2a7a;
  --sky-fallback: #8396ba;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scrollbar-gutter: stable; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--sky-fallback);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
html.is-locked, body.is-locked { overflow: hidden; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { position: fixed; inset: 0; z-index: 99; margin: 0; padding: 30vh 24px 0; text-align: center; background: #20264a; color: #f7ecdc; }

/* ---------- ciel animé ---------- */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--sky-fallback); pointer-events: none; }
.sky__par { position: absolute; inset: -14% -6%; will-change: transform; }
.sky__img, .sky__cloud { position: absolute; inset: 0; background-position: center; background-size: cover; }
.sky__img { background-image: url('../assets/sky.webp'); animation: skyBreath 38s ease-in-out infinite alternate; }
.sky__cloud { background-image: url('../assets/clouds.webp'); }
.sky__cloud--a { opacity: .9; animation: cloudA 70s ease-in-out infinite alternate; }
.sky__cloud--b { opacity: .6; background-position: 30% 70%; transform: scaleX(-1); animation: cloudB 95s ease-in-out infinite alternate; }
.sky__glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 32%, rgba(255, 238, 224, .38), transparent 60%); animation: glow 9s ease-in-out infinite alternate; }
@keyframes skyBreath { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-2%, 2%, 0); } }
@keyframes cloudA { from { transform: translate3d(-7%, 2%, 0) scale(1.15); } to { transform: translate3d(7%, -3%, 0) scale(1.28); } }
@keyframes cloudB { from { transform: scaleX(-1) translate3d(6%, 0, 0) scale(1.2); } to { transform: scaleX(-1) translate3d(-9%, 3%, 0) scale(1.1); } }
@keyframes glow { from { opacity: .55; } to { opacity: 1; } }

/* ---------- objets flottants (fleurs, bijoux, plumes) ---------- */
.floaters { position: fixed; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 2.4s ease .3s; }
.floaters--back { z-index: 1; }
.floaters--front { z-index: 3; }
body.is-opening .floaters { opacity: 1; }
.fl { position: absolute; left: 0; top: 0; will-change: transform; }
.fl__mid { animation: bob 7s ease-in-out infinite alternate; }
.fl__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 12px rgba(46, 24, 70, .32)); }
.fl__img--spin { animation: spin 60s linear infinite; }
.fl__img--sway { animation: sway 6s ease-in-out infinite alternate; }
.fl--front .fl__img { filter: drop-shadow(0 16px 18px rgba(46, 24, 70, .4)); }
@keyframes bob { from { transform: translate3d(0, calc(var(--bob, 10px) * -1), 0) rotate(calc(var(--tilt, 6deg) * -.5)); } to { transform: translate3d(0, var(--bob, 10px), 0) rotate(calc(var(--tilt, 6deg) * .5)); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sway { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

.sparkles { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.sp { position: absolute; background: radial-gradient(circle, #fff 0, #fff3cf 35%, rgba(255, 232, 170, 0) 72%); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.25) rotate(0deg); } 50% { opacity: .95; transform: scale(1) rotate(50deg); } }

/* ---------- coins dorés du billet ---------- */
.corners { position: fixed; top: 0; bottom: 0; left: 50%; z-index: 5; width: var(--card-w); transform: translateX(-50%); pointer-events: none; }
.corner { position: absolute; width: calc(var(--card-w) * .2); max-width: 118px; height: auto; filter: drop-shadow(0 3px 5px rgba(50, 30, 10, .45)); animation: glint 6s ease-in-out infinite alternate; will-change: opacity; }
.corner--tl { left: 0; top: 0; }
.corner--tr { right: 0; top: 0; }
.corner--bl { left: 0; bottom: 0; transform: scaleY(-1); }
.corner--br { right: 0; bottom: 0; transform: scaleY(-1); animation-delay: -3s; }
@keyframes glint { from { opacity: .8; } to { opacity: 1; } }

/* ---------- billet ---------- */
.card { position: relative; z-index: 2; width: var(--card-w); margin: 0 auto; min-height: 100vh; }

.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.stage { position: relative; flex: none; height: min(60svh, calc(var(--card-w) * 1.4)); overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.stage__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; background: #7b84a8; }
.hero__text { position: relative; flex: 1 1 auto; margin: -9svh 12px 0; padding: 24px 16px 58px; text-align: center; }

.panel { position: relative; margin: 16px 12px; }
.panel__in { position: relative; padding: 44px 24px 42px; text-align: center; }

.closing { position: relative; margin-top: 12px; padding-bottom: 6svh; }
.finale { position: relative; height: min(84svh, calc(var(--card-w) * 1.45)); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 68%, transparent); }
.finale__art { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.finale__text { position: relative; margin: -14svh 12px 0; padding: 36px 20px 40px; text-align: center; }

/* ---------- typographie ---------- */
.eyebrow { margin: 0 0 6px; font-family: var(--font-caps); font-weight: 600; font-size: 1.12rem; letter-spacing: .2em; color: var(--accent-strong); }
.names { display: flex; flex-direction: column; align-items: center; margin: .05em 0; font-family: var(--font-script); font-weight: 400; font-size: clamp(3.1rem, 14.5vw, 4.9rem); line-height: .98; color: var(--names); }
.names em { font-family: var(--font-body); font-style: italic; font-size: .34em; line-height: 1.5; color: var(--accent); }
.names--small { font-size: clamp(2.5rem, 11vw, 3.6rem); margin: 0; }
.title { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.45rem, 6.4vw, 1.9rem); letter-spacing: .07em; color: var(--accent-strong); }
.script { margin: 4px 0; font-family: var(--font-script); font-size: clamp(2.2rem, 9.6vw, 3rem); line-height: 1.1; color: var(--names); }
.serif { margin: 6px 0; font-size: 1.3rem; }
.note { margin: 8px 0; font-size: 1.1rem; color: var(--ink); opacity: .86; }
.families { margin: 4px 0 0; font-family: var(--font-caps); font-weight: 600; font-size: 1.1rem; letter-spacing: .14em; color: var(--accent-strong); }
.when { display: grid; gap: 2px; margin: 4px 0 0; font-size: 1.28rem; }
.when span:first-child { font-family: var(--font-caps); font-weight: 600; letter-spacing: .14em; font-size: 1.2rem; color: var(--accent-strong); }
.divider { display: block; width: min(64%, 250px); height: auto; margin: 14px auto; }
.hashtag { margin: 10px 0 0; font-family: var(--font-script); font-size: 2rem; color: var(--accent-strong); }

.bigdate { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0; }
.bigdate b { font-family: var(--font-title); font-weight: 400; font-size: clamp(4rem, 19vw, 5.4rem); line-height: 1; color: var(--names); }
.bigdate span { text-align: left; font-family: var(--font-caps); font-weight: 600; font-size: 1.35rem; letter-spacing: .16em; line-height: 1.3; color: var(--accent-strong); }

.cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 20px; }
.cd--done { display: block; font-family: var(--font-script); font-size: 2.4rem; }
.cd__cell { padding: 12px 2px 8px; border: 1px solid var(--accent); border-radius: 10px; background: rgba(255, 255, 255, .18); }
.cd__cell b { display: block; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.4rem, 7vw, 1.9rem); line-height: 1.1; color: var(--names); font-variant-numeric: tabular-nums; }
.cd__cell span { display: block; font-family: var(--font-caps); font-weight: 600; font-size: .92rem; letter-spacing: .1em; color: var(--accent-strong); }

.tl { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 20px; text-align: left; }
.tl__item { display: flex; align-items: center; gap: 16px; }
.tl p { margin: 0; }
.tl__time { font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .06em; color: var(--accent-strong); }
.tl__label { font-family: var(--font-caps); font-weight: 600; font-size: 1.35rem; letter-spacing: .1em; }
.tl__text { font-size: 1.08rem; opacity: .88; }
.icon { flex: none; width: 52px; height: 52px; padding: 12px; border: 1px solid var(--accent); border-radius: 50%; fill: none; stroke: var(--accent-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: rgba(255, 255, 255, .22); }

.venue { display: grid; justify-items: center; gap: 2px; margin: 8px 0 20px; }
.venue .icon { margin-bottom: 8px; }
.venue__name { margin: 0; font-family: var(--font-script); font-size: 2.5rem; line-height: 1.1; color: var(--names); }
.swatches { display: flex; justify-content: center; gap: 14px; margin: 10px 0 8px; padding: 0; list-style: none; }
.swatches li { display: grid; justify-items: center; gap: 6px; width: 74px; }
.swatches i { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 0 0 3px var(--accent), 0 6px 12px rgba(60, 30, 60, .25); }
.swatches span { font-family: var(--font-caps); font-weight: 600; font-size: .92rem; letter-spacing: .06em; line-height: 1.15; }

/* ---------- boutons et formulaire ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 6px 24px; border: 0; border-radius: 999px; cursor: pointer; text-align: center; font-family: var(--font-caps); font-weight: 600; font-size: 1.08rem; letter-spacing: .08em; color: #35162a; background: linear-gradient(180deg, var(--gold-hi), var(--gold-mid) 55%, var(--gold-lo)); box-shadow: 0 8px 20px rgba(80, 50, 10, .3), inset 0 1px 0 rgba(255, 255, 255, .65); transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 26px rgba(80, 50, 10, .34), inset 0 1px 0 rgba(255, 255, 255, .65); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
.btn--ghost { color: var(--accent-strong); background: transparent; border: 1.5px solid var(--accent); box-shadow: none; }
.btn--ghost .icon { width: 28px; height: 28px; padding: 3px; border: 0; background: none; }

.form { display: grid; gap: 14px; margin-top: 14px; text-align: left; }
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field label { display: block; margin-bottom: 2px; font-family: var(--font-caps); font-weight: 600; font-size: 1.05rem; letter-spacing: .1em; color: var(--accent-strong); }
.field input[type=text], .field select, .field textarea { width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-bottom: 1.5px solid var(--accent); border-radius: 6px 6px 0 0; background: rgba(255, 255, 255, .45); font-size: 1.2rem; }
.field textarea { resize: vertical; }
.field--row { display: grid; grid-template-columns: 1fr 92px; align-items: center; gap: 12px; }
.field--row label { margin: 0; }
.choice { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.choice label { position: relative; margin: 0; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border: 1.5px solid var(--accent); border-radius: 999px; font-size: 1.2rem; letter-spacing: 0; transition: background .2s, color .2s; }
.choice input:checked + span { background: var(--accent-strong); color: var(--on-accent); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.err { min-height: 1.2em; margin: 2px 0 0; font-size: 1rem; color: #9b1c3c; }
.status { margin: 0; text-align: center; font-family: var(--font-script); font-size: 1.9rem; line-height: 1.2; color: var(--names); }
.note--demo { margin-top: 0; text-align: center; font-size: 1rem; }
.form .btn { justify-self: center; margin-top: 6px; }

.hint { position: absolute; left: 0; right: 0; bottom: 14px; display: grid; justify-items: center; gap: 4px; margin: 0; font-family: var(--font-caps); font-weight: 600; font-size: 1rem; letter-spacing: .2em; color: var(--accent-strong); transition: opacity .5s; }
.hint i { width: 1px; height: 26px; background: linear-gradient(var(--accent), transparent); animation: drip 2s ease-in-out infinite; transform-origin: top; }
body.is-scrolled .hint { opacity: 0; }
@keyframes drip { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- révélations au défilement ---------- */
.r { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .9s var(--ease) calc(var(--i, 0) * 90ms), transform .9s var(--ease) calc(var(--i, 0) * 90ms); }
.r.in { opacity: 1; transform: none; }
.panel { opacity: 0; transform: translate3d(0, 44px, 0) scale(.97); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.panel.in { opacity: 1; transform: none; }
.finale { opacity: 0; transition: opacity 1.4s ease; }
.finale.in { opacity: 1; }

@media (min-width: 760px) {
  body { font-size: 1.25rem; }
  .panel { margin: 22px 14px; }
}

/* ---------- mouvement réduit : tout reste en place, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .r, .panel, .finale { opacity: 1 !important; transform: none !important; }
  .floaters { opacity: 1; }
  .hint i { display: none; }
}