/* ══════════════════════════════════════════════════════
   Anna-Maëlys — 1 AN ✨  |  style.css
   📝 Modifiez les variables CSS ci-dessous pour changer le thème
══════════════════════════════════════════════════════ */

:root {
  /* 🎨 PALETTE — Changez ici pour modifier tout le thème */
  --cream:   #faf6f1;
  --beige:   #f2ebe0;
  --rose:    #f0d5cc;
  --rosedp:  #d4a09a;
  --gold:    #c9a96e;
  --goldlt:  #e8d5a8;
  --white:   #ffffff;
  --dark:    #2a2018;
  --mid:     #6b5745;
  --lightm:  #9c8672;

  /* TYPOGRAPHIE */
  --ff-display: 'Playfair Display', serif;
  --ff-body:    'Jost', sans-serif;

  /* LAYOUT */
  --max:    1200px;
  --pad:    clamp(5rem, 10vw, 9rem);

  /* FX */
  --sh:     0 8px 40px rgba(42,32,24,.10);
  --shh:    0 24px 64px rgba(42,32,24,.18);
  --r:      20px;
  --tr:     .45s cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--ff-body);
  background: var(--cream);
  color: var(--dark);
  overflow-x: hidden;
  cursor: none;
}

a { text-decoration: none; color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════
   CURSEUR
══════════════════════════════════════ */
.c-dot, .c-ring {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 10000;
  transform: translate(-50%,-50%);
}
.c-dot {
  width: 6px; height: 6px;
  background: var(--gold);
}
.c-ring {
  width: 30px; height: 30px;
  border: 1.5px solid var(--rosedp);
  transition: width .3s, height .3s, border-color .3s;
}
.c-ring.big { width: 52px; height: 52px; border-color: var(--gold); }

/* ══════════════════════════════════════
   LOADING / INTRO
══════════════════════════════════════ */
.intro {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--cream);
  transition: opacity .9s ease, visibility .9s ease;
}
.intro.out { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-petals {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.intro-petals span {
  position: absolute;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(240,213,204,.6), rgba(232,213,168,.3));
  animation: petalFloat linear infinite;
}
.intro-petals span:nth-child(1){width:18px;height:32px;left:10%;animation-duration:9s;animation-delay:0s;}
.intro-petals span:nth-child(2){width:12px;height:22px;left:25%;animation-duration:12s;animation-delay:1.5s;}
.intro-petals span:nth-child(3){width:20px;height:36px;left:50%;animation-duration:8s;animation-delay:.7s;}
.intro-petals span:nth-child(4){width:14px;height:26px;left:70%;animation-duration:11s;animation-delay:2s;}
.intro-petals span:nth-child(5){width:16px;height:30px;left:85%;animation-duration:10s;animation-delay:.3s;}
.intro-petals span:nth-child(6){width:10px;height:18px;left:40%;animation-duration:13s;animation-delay:3s;}

@keyframes petalFloat {
  0%   { bottom:-40px; opacity:0; transform:rotate(0deg) translateX(0); }
  10%  { opacity:.8; }
  90%  { opacity:.4; }
  100% { bottom:110%; transform:rotate(180deg) translateX(30px); opacity:0; }
}

.intro-content { text-align: center; z-index: 1; }

.intro-pre {
  font-size: .72rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.5rem;
  animation: fadeUp .8s ease .3s both;
}
.intro-name {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 300; color: var(--dark);
  letter-spacing: -.01em; line-height: 1;
  animation: fadeUp .9s ease .5s both;
}
.intro-sub {
  font-family: var(--ff-display);
  font-size: clamp(1.1rem, 3vw, 2rem);
  font-style: italic; color: var(--rosedp);
  margin-top: .8rem;
  animation: fadeUp .9s ease .8s both;
}
.intro-sub em { font-style: normal; color: var(--gold); }
.intro-bar {
  width: 120px; height: 1px;
  background: var(--goldlt);
  margin: 2.5rem auto 0;
  animation: fadeUp .8s ease 1s both;
  overflow: hidden;
}
.intro-bar span {
  display: block; width: 0; height: 100%;
  background: var(--gold);
  animation: barGrow 1.8s ease 1.2s forwards;
}
@keyframes barGrow { to { width: 100%; } }

.intro-verse {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-display);
  font-size: .9rem; font-style: italic;
  color: var(--lightm); text-align: center;
  width: 90%; max-width: 460px;
  animation: fadeUp .8s ease 1.8s both;
}
.intro-verse cite {
  display: block; font-style: normal;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-top: .4rem;
}

/* ══════════════════════════════════════
   MUSIQUE
══════════════════════════════════════ */
.music-btn {
  position: fixed; top: 1.3rem; right: 1.3rem; z-index: 900;
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem;
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--goldlt);
  border-radius: 60px;
  color: var(--gold);
  cursor: none;
  transition: var(--tr);
  font-size: .75rem; letter-spacing: .1em;
}
.music-btn svg { width: 16px; }
.music-btn:hover { background: var(--gold); color: #fff; }
.music-label { display: none; }
@media(min-width:600px){ .music-label { display: inline; } }

/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 5vw;
  transition: background .4s, box-shadow .4s;
}
.nav.scrolled {
  background: rgba(250,246,241,.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(18px);
  box-shadow: 0 2px 24px rgba(0,0,0,.06);
}
.nav-logo {
  font-family: var(--ff-display);
  font-size: 1.25rem; font-weight: 400;
  color: rgba(255,255,255,.9);
  letter-spacing: .08em;
  transition: color .4s;
}
.nav.scrolled .nav-logo { color: var(--dark); }
.nav-links { display: flex; gap: 2.2rem; list-style: none; }
.nav-links a {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.8); font-weight: 500;
  position: relative; transition: color .3s;
}
.nav.scrolled .nav-links a { color: var(--mid); }
.nav-links a::after {
  content:''; position: absolute; bottom:-3px; left:0; right:0;
  height:1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.nav-links a:hover::after, .nav-cta::after { transform: scaleX(1); }
.nav-cta {
  padding: .45rem 1.2rem;
  border: 1px solid rgba(201,169,110,.6);
  border-radius: 60px;
}
.nav.scrolled .nav-cta { border-color: var(--gold); color: var(--gold) !important; }

.nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:none; padding:4px; }
.nav-burger span { display:block; width:22px; height:1.5px; background:rgba(255,255,255,.85); transition:.3s; }
.nav.scrolled .nav-burger span { background: var(--dark); }

.nav-mobile {
  position: fixed; inset:0; background: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem;
  z-index: 790;
  transform: translateY(-100%); transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.nav-mobile.open { transform: translateY(0); }
.nm-link {
  font-family: var(--ff-display);
  font-size: 2.2rem; color: var(--dark); letter-spacing: .08em;
  transition: color .3s;
}
.nm-link:hover { color: var(--gold); }

/* ══════════════════════════════════════
   UTILITAIRES
══════════════════════════════════════ */
.container { max-width: var(--max); margin: 0 auto; padding: 0 5vw; }
.section { padding: var(--pad) 0; }

.pre {
  display:block; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin-bottom:.9rem;
}
.stitle {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 300; color: var(--dark); line-height: 1.15;
  margin-bottom: 3rem;
}

/* BOUTONS */
.btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .95rem 2.5rem;
  background: var(--gold); color: #fff;
  font-family: var(--ff-body);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  border-radius: 60px; border: none; cursor: none;
  transition: var(--tr);
  box-shadow: 0 6px 28px rgba(201,169,110,.38);
}
.btn-gold:hover {
  background: var(--rosedp);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(212,160,154,.42);
}
.btn-outline-light {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 2.5rem;
  border: 1.5px solid rgba(201,169,110,.6);
  color: var(--goldlt);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  border-radius: 60px; cursor: none;
  transition: var(--tr);
}
.btn-outline-light:hover { background: rgba(201,169,110,.15); color: #fff; transform: translateY(-3px); }
.btn-block { width: 100%; justify-content: center; }

/* REVEAL */
.reveal {
  opacity:0; transform:translateY(32px);
  transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
.reveal.vis { opacity:1; transform:translateY(0); }

/* ANIMATIONS de base */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════
   VERSETS — STYLES PARTAGÉS
══════════════════════════════════════ */
blockquote {
  font-family: var(--ff-display);
  font-style: italic;
}
blockquote cite {
  display: block; font-style: normal;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  margin-top: .4rem;
}

/* Verset hero */
.hero-verse {
  font-size: 1rem; color: rgba(255,255,255,.7);
  margin: 1.5rem auto 2.5rem; max-width: 420px;
  padding-left: 1.2rem; text-align: left;
}
.hero-verse cite { color: var(--goldlt); }

/* Bande verset */
.verse-band {
  background: var(--beige);
  padding: 3rem 5vw; text-align: center;
  border-top: 1px solid rgba(201,169,110,.15);
  border-bottom: 1px solid rgba(201,169,110,.15);
}
.verse-band p {
  font-family: var(--ff-display);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-style: italic; color: var(--mid); line-height: 1.6;
}
.verse-band span {
  display: block; font-style: normal;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-top: .7rem;
}

/* Verset pleine largeur */
.verse-full {
  background: linear-gradient(135deg, var(--dark) 0%, #3d2c20 100%);
  padding: 5rem 5vw; text-align: center;
}
.verse-icon { width: 36px; color: var(--gold); margin: 0 auto 1.5rem; opacity: .7; }
.verse-full-text {
  font-family: var(--ff-display);
  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
  font-style: italic; color: var(--goldlt);
  max-width: 700px; margin: 0 auto; line-height: 1.7;
}
.verse-full-ref {
  display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(232,213,168,.45); margin-top: 1.2rem;
}

/* Verset timeline */
.tl-verse {
  margin-top: 1rem;
  font-size: .88rem;
  color: var(--lightm);
}
.tl-verse cite { color: var(--gold); }

/* Verset moments */
.moments-verse {
  margin-top: 4rem;
  background: var(--cream);
  border: 1px solid var(--goldlt);
  border-radius: var(--r);
  padding: 2.5rem 3rem;
  text-align: center;
}
.moments-verse p {
  font-family: var(--ff-display); font-style: italic;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--mid); line-height: 1.7; margin-bottom: .8rem;
}
.moments-verse cite { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-style: normal; }

/* Verset événement */
.event-verse {
  margin-top: 3rem; text-align: center;
  font-size: 1rem; color: var(--goldlt);
  opacity: .75;
}
.event-verse cite { color: var(--goldlt); opacity: .55; }

/* Verset compte à rebours */
.cd-verse {
  margin-top: 3.5rem;
  font-size: .95rem; color: var(--lightm);
  text-align: center;
}
.cd-verse cite { color: var(--gold); }

/* Verset final */
.final-verse {
  margin-top: 2rem;
  font-size: 1.05rem; color: var(--mid);
  border-top: 1px solid var(--goldlt);
  padding-top: 1.5rem;
}
.final-verse cite { color: var(--gold); }

/* Footer verse */
.footer-verse {
  font-size: .85rem; color: rgba(232,213,168,.5);
  max-width: 560px; margin: 1.2rem auto 1.5rem;
  line-height: 1.7;
}
.footer-verse cite { color: rgba(201,169,110,.4); }

/* RSVP ok blockquote */
.rsvp-ok blockquote {
  margin-top: 1.5rem; font-size: .9rem;
  color: var(--mid); border-left: 2px solid var(--goldlt); padding-left: 1rem;
  text-align: left;
}
.rsvp-ok blockquote cite { color: var(--gold); }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
  position: relative;
  height: 100dvh; min-height: 620px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--rose);
  transform: scale(1.06);
  animation: hZoom 22s ease infinite alternate;
}
@keyframes hZoom { from{transform:scale(1.06)} to{transform:scale(1.13)} }
.hero-overlay {
  position: absolute; inset:0;
  background: linear-gradient(180deg, rgba(42,32,24,.45) 0%, rgba(42,32,24,.3) 40%, rgba(42,32,24,.75) 100%);
}

/* Particules */
.particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.p-item {
  position:absolute; border-radius:50%;
  background: radial-gradient(circle, rgba(232,213,168,.85), rgba(240,213,204,.3));
  animation: pFloat linear infinite;
}
@keyframes pFloat {
  0%{transform:translateY(0) scale(1);opacity:0}
  10%{opacity:1}
  90%{opacity:.5}
  100%{transform:translateY(-115vh) scale(.2);opacity:0}
}

.hero-body {
  position:relative; z-index:2;
  text-align:center; padding: 0 5vw;
}
.tag {
  display:block; font-size:.72rem; letter-spacing:.38em; text-transform:uppercase;
  color: var(--goldlt); margin-bottom: 1.2rem;
  animation: fadeUp .8s ease .2s both;
}
.hero-title {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 300; color: #fff;
  line-height: 1.1; margin-bottom: 1.3rem;
  text-shadow: 0 2px 40px rgba(0,0,0,.18);
  animation: fadeUp .9s ease .4s both;
}
.hero-title em { font-style:italic; color: var(--goldlt); }
.hero-sub {
  font-size: clamp(.9rem, 1.8vw, 1.1rem);
  color: rgba(255,255,255,.8); line-height: 1.8;
  max-width: 520px; margin: 0 auto 1.2rem;
  animation: fadeUp .9s ease .6s both;
}
.reveal-hero { animation: fadeUp .9s ease both; }
.reveal-hero:nth-child(1){animation-delay:.1s}
.reveal-hero:nth-child(2){animation-delay:.3s}
.reveal-hero:nth-child(3){animation-delay:.5s}
.reveal-hero:nth-child(4){animation-delay:.7s}
.reveal-hero:nth-child(5){animation-delay:.9s}

.scroll-line {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); z-index:2;
}
.scroll-line span {
  display:block; width:1px; height:56px;
  background:linear-gradient(180deg,transparent,var(--goldlt));
  margin:0 auto;
  animation: sLine 2s ease-in-out infinite;
}
@keyframes sLine{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ══════════════════════════════════════
   HISTOIRE / TIMELINE
══════════════════════════════════════ */
.story { background: var(--white); }
.story-intro {
  max-width: 620px; color: var(--mid); line-height: 1.9;
  margin-top: -1.5rem; margin-bottom: 4rem; font-size: .98rem;
}

.timeline { display:flex; flex-direction:column; gap:5rem; position:relative; }

.tl-item {
  display:grid; grid-template-columns:1fr auto 1fr; gap: 0 4vw; align-items:start;
}
.tl-item .tl-photo { grid-column:1; text-align:right; }
.tl-item .tl-body  { grid-column:3; }
.tl-reverse .tl-photo { grid-column:3; grid-row:1; text-align:left; }
.tl-reverse .tl-body  { grid-column:1; grid-row:1; text-align:right; }

/* nœud central */
.tl-item::after {
  content:'🌸'; grid-column:2; grid-row:1;
  font-size:1.1rem; margin-top:.6rem;
  width:36px; height:36px; border-radius:50%;
  background: var(--cream); border: 2px solid var(--goldlt);
  display:flex; align-items:center; justify-content:center;
}

.tl-photo img {
  width: min(220px, 40vw); aspect-ratio:1;
  border-radius:50%; object-fit:cover;
  box-shadow: var(--shh);
  border: 5px solid var(--cream);
  background: linear-gradient(135deg, var(--rose), var(--goldlt));
  display:inline-block;
}
.tl-date {
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--gold); display:block; margin-bottom:.5rem; font-weight:500;
}
.tl-body h3 {
  font-family: var(--ff-display); font-size:1.6rem; font-weight:300;
  color: var(--dark); margin-bottom:.7rem;
}
.tl-body p { color: var(--mid); line-height:1.8; font-size:.95rem; }

/* ══════════════════════════════════════
   GALERIE MASONRY
══════════════════════════════════════ */
.gallery { background: var(--beige); }
.gallery .container { margin-bottom: 2rem; }

.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
  padding: 0 5vw;
}
.gi { position:relative; border-radius:16px; overflow:hidden; cursor:none; }
.gi-t { grid-row: span 2; }
.gi-w { grid-column: span 2; }

.gi img {
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  background: linear-gradient(135deg,var(--rose),var(--goldlt));
}
.gi:hover img { transform: scale(1.07); }
.gi-over {
  position:absolute; inset:0;
  background: rgba(42,32,24,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; opacity:0;
  transition: opacity .35s;
}
.gi:hover .gi-over { opacity:1; }

/* LIGHTBOX */
.lb {
  position:fixed; inset:0; z-index:9000;
  background: rgba(42,32,24,.93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity .4s, visibility .4s;
}
.lb.open { opacity:1; visibility:visible; }
.lb-img {
  max-width:90vw; max-height:88vh;
  object-fit:contain; width:auto; height:auto;
  border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.lb-x,.lb-p,.lb-n {
  position:absolute; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:#fff; border-radius:50%;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  cursor:none; transition:background .3s;
  font-size:1.4rem;
}
.lb-x:hover,.lb-p:hover,.lb-n:hover { background:rgba(255,255,255,.25); }
.lb-x { top:1.5rem; right:1.5rem; font-size:.95rem; }
.lb-p { left:1.5rem; top:50%; transform:translateY(-50%); }
.lb-n { right:1.5rem; top:50%; transform:translateY(-50%); }

/* ══════════════════════════════════════
   MOMENTS PRÉFÉRÉS
══════════════════════════════════════ */
.moments { background: var(--white); }
.moments-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.moment-card {
  background: var(--cream);
  border:1px solid var(--goldlt);
  border-radius: var(--r);
  padding: 2.2rem 1.8rem;
  text-align:center;
  transition: var(--tr);
}
.moment-card:hover {
  transform:translateY(-6px);
  box-shadow: var(--shh);
  border-color: var(--gold);
}
.mc-icon { font-size:2.2rem; margin-bottom:1rem; }
.moment-card h3 {
  font-family: var(--ff-display); font-size:1.2rem; font-weight:400;
  color: var(--gold); margin-bottom:.6rem;
}
.moment-card p { color: var(--mid); font-size:.9rem; line-height:1.7; }

/* ══════════════════════════════════════
   ÉVÉNEMENT
══════════════════════════════════════ */
.event { position:relative; overflow:hidden; }
.event-bg {
  position:absolute; inset:0;
  background: linear-gradient(135deg, #2a2018 0%, #4a3428 100%);
}
.event > .container { position:relative; z-index:1; }

.event-cards {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
  margin-bottom:3rem;
}
.ec {
  background: rgba(255,255,255,.06);
  border:1px solid rgba(201,169,110,.25);
  border-radius: var(--r);
  padding:2rem 1.5rem; text-align:center;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter:blur(8px);
  transition: var(--tr);
}
.ec:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(201,169,110,.55);
  transform:translateY(-4px);
}
.ec-icon { font-size:1.8rem; margin-bottom:.8rem; }
.ec h3 {
  font-family: var(--ff-display); font-size:1rem; font-weight:400;
  color: var(--gold); margin-bottom:.5rem; letter-spacing:.08em;
}
.ec p { color: var(--goldlt); font-size:.9rem; line-height:1.7; opacity:.85; }
.ec p strong { color: #fff; }

.event-actions { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }

/* ══════════════════════════════════════
   COMPTE À REBOURS
══════════════════════════════════════ */
.countdown { background: var(--beige); text-align:center; }
.cd-grid {
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1rem,3vw,3rem); flex-wrap:wrap;
  margin-bottom: 1rem;
}
.cd-item { text-align:center; min-width:80px; }
.cd-num {
  display:block; font-family:var(--ff-display);
  font-size:clamp(3.5rem,8vw,7rem); font-weight:300;
  color: var(--dark); line-height:1;
  letter-spacing:-.02em;
  transition:transform .35s,opacity .35s;
}
.cd-lbl {
  font-size:.65rem; letter-spacing:.25em; text-transform:uppercase;
  color: var(--lightm); margin-top:.4rem; display:block;
}
.cd-dot { font-size:clamp(2rem,5vw,4rem); color:var(--gold); opacity:.4; margin-top:-.5rem; }

/* ══════════════════════════════════════
   RSVP
══════════════════════════════════════ */
.rsvp { background: var(--white); }
.rsvp-intro {
  color:var(--mid); margin-top:-1.5rem; margin-bottom:3rem; font-size:.95rem;
}
.rsvp-form {
  max-width:680px;
  background: var(--cream);
  border:1px solid var(--goldlt);
  border-radius:28px;
  padding:clamp(2rem,5vw,3.5rem);
  box-shadow: var(--sh);
}
.frow { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.fg { margin-bottom:1.8rem; }
.fg label {
  display:block; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mid); margin-bottom:.6rem; font-weight:500;
}
.fg input,.fg textarea {
  width:100%; padding:.9rem 1.2rem;
  border:1.5px solid var(--goldlt);
  border-radius:12px; background:var(--white);
  font-family:var(--ff-body); font-size:.95rem; color:var(--dark);
  outline:none; transition:border-color .3s,box-shadow .3s;
}
.fg input:focus,.fg textarea:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,169,110,.12);
}
.fg textarea { resize:vertical; min-height:110px; }

.radio-g { display:flex; flex-direction:column; gap:.8rem; }
.rl {
  display:flex; align-items:center; gap:.8rem;
  font-size:.95rem; color:var(--dark);
  cursor:none; padding:.8rem 1.2rem;
  border:1.5px solid var(--goldlt);
  border-radius:12px; transition:border-color .3s,background .3s;
}
.rl:has(input:checked) { border-color:var(--gold); background:rgba(201,169,110,.07); }
.rl input { accent-color:var(--gold); width:15px; height:15px; }

/* RSVP success */
.rsvp-ok {
  display:none; max-width:680px;
  text-align:center; padding:4rem 2rem;
  background:var(--cream); border:1px solid var(--goldlt);
  border-radius:28px; box-shadow:var(--sh);
}
.rsvp-ok.show { display:block; animation:popIn .6s cubic-bezier(.22,.61,.36,1); }
@keyframes popIn { from{opacity:0;transform:scale(.88) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
.ok-icon { font-size:3.5rem; margin-bottom:1rem; }
.rsvp-ok h3 { font-family:var(--ff-display); font-size:2rem; font-weight:300; color:var(--dark); margin-bottom:.8rem; }
.rsvp-ok p { color:var(--mid); line-height:1.8; }

/* Confettis */
#cfCanvas { position:fixed; inset:0; z-index:8000; pointer-events:none; }

/* ══════════════════════════════════════
   FINAL
══════════════════════════════════════ */
.final { position:relative; overflow:hidden; background:var(--cream); text-align:center; }
.final-glow {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,110,.15) 0%,transparent 70%);
  pointer-events:none;
}
.final-body { position:relative; z-index:1; max-width:700px; margin:0 auto; }
.final-quote-mark {
  font-family:var(--ff-display); font-size:9rem; line-height:.4;
  color:var(--goldlt); opacity:.6; display:block; margin-bottom:1.2rem;
}
.final-text {
  font-family:var(--ff-display);
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:300; color:var(--dark); line-height:1.3; margin-bottom:1.5rem;
}
.final-text em { font-style:italic; color:var(--gold); }
.final-sign {
  font-size:.82rem; letter-spacing:.2em; color:var(--lightm);
  text-transform:uppercase;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.footer { background:var(--dark); padding:4rem 5vw; text-align:center; }
.footer-cross { font-size:1.5rem; color:rgba(201,169,110,.35); margin-bottom:1rem; }
.footer-love { font-family:var(--ff-display); font-size:1.1rem; color:var(--goldlt); letter-spacing:.08em; margin-bottom:1.5rem; }
.hb { color:var(--rosedp); animation:hb 1.4s ease infinite; }
@keyframes hb{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.footer-year { font-size:.72rem; color:rgba(232,213,168,.3); letter-spacing:.15em; }

/* BACK TO TOP */
.btt {
  position:fixed; bottom:2rem; right:1.3rem; z-index:700;
  width:44px; height:44px; background:var(--gold); color:#fff;
  border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:none; opacity:0; visibility:hidden;
  transform:translateY(10px); transition:var(--tr);
  box-shadow:0 4px 20px rgba(201,169,110,.4);
}
.btt.show { opacity:1; visibility:visible; transform:translateY(0); }
.btt:hover { background:var(--rosedp); transform:translateY(-3px); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:960px){
  .timeline::before { display:none; }
  .tl-item,.tl-reverse { display:flex; flex-direction:column; gap:1.5rem; }
  .tl-item .tl-photo,.tl-reverse .tl-photo { text-align:center; grid-column:auto; grid-row:auto; }
  .tl-item .tl-body,.tl-reverse .tl-body { text-align:left; grid-column:auto; }
  .tl-item::after { display:none; }
  .tl-photo img { width:160px; }
  .event-cards { grid-template-columns:repeat(2,1fr); }
  .masonry { grid-template-columns:repeat(2,1fr); }
  .gi-w { grid-column:span 1; }
  .moments-grid { grid-template-columns:repeat(2,1fr); }
  .nav-links { display:none; }
  .nav-burger { display:flex; }
}
@media(max-width:600px){
  .event-cards { grid-template-columns:1fr; }
  .moments-grid { grid-template-columns:1fr; }
  .masonry { grid-template-columns:1fr 1fr; grid-auto-rows:150px; }
  .gi-t { grid-row:span 1; }
  .frow { grid-template-columns:1fr; }
  .cd-dot { display:none; }
  .music-btn { top:.7rem; right:.7rem; }
}

/* ══════════════════════════════════════════════════════
   ANIMATIONS ENRICHIES — Ajout v3
══════════════════════════════════════════════════════ */

/* ─── COUNTDOWN — perspective 3D ─────────────────── */
.cd-item {
  perspective: 400px;
}
.cd-num {
  display: block;
  transition: transform .25s ease, opacity .25s ease;
  transform-style: preserve-3d;
}

/* ─── GALERIE — grille avec stagger ──────────────── */
.gi {
  transition: transform .5s cubic-bezier(.22,.61,.36,1),
              box-shadow .5s cubic-bezier(.22,.61,.36,1);
}
.gi:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 56px rgba(42,32,24,.22);
  z-index: 2;
}
/* Stagger révélation galerie */
.gi:nth-child(1)  { transition-delay: .05s; }
.gi:nth-child(2)  { transition-delay: .10s; }
.gi:nth-child(3)  { transition-delay: .15s; }
.gi:nth-child(4)  { transition-delay: .20s; }
.gi:nth-child(5)  { transition-delay: .25s; }
.gi:nth-child(6)  { transition-delay: .30s; }
.gi:nth-child(7)  { transition-delay: .35s; }
.gi:nth-child(8)  { transition-delay: .40s; }
.gi:nth-child(9)  { transition-delay: .45s; }
.gi:nth-child(10) { transition-delay: .50s; }

/* ─── MOMENT CARDS — flip apparition ─────────────── */
.moment-card {
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              box-shadow .45s,
              border-color .45s;
}
.moment-card:hover {
  transform: translateY(-8px) scale(1.02);
}
.moment-card:hover .mc-icon {
  transform: scale(1.2);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

/* ─── EVENT CARDS — glassmorphism hover ───────────── */
.ec {
  transition: transform .4s, background .4s, border-color .4s, box-shadow .4s;
  will-change: transform;
}
.ec:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

/* ─── TIMELINE PHOTO — anneau doré animé ─────────── */
.tl-photo img {
  position: relative;
}
.tl-photo img::after {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(var(--cream), var(--cream)) padding-box,
              linear-gradient(135deg, var(--gold), var(--rose)) border-box;
  animation: slowSpin 8s linear infinite;
}

/* ─── HERO CONTENT — décalage fluide ─────────────── */
.hero-body {
  will-change: transform;
}

/* ─── NAV LINKS — underline animé plus élaboré ──── */
.nav-links a::after {
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s;
  opacity: 0;
}
.nav-links a:hover::after {
  opacity: 1;
}

/* ─── SCROLL INDICATOR — pulsation ───────────────── */
.scroll-line span {
  box-shadow: 0 0 8px rgba(232,213,168,.4);
}

/* ─── BOUTON RETOUR EN HAUT — rotation ───────────── */
.btt svg {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.btt:hover svg {
  transform: translateY(-3px);
}

/* ─── FOOTER CROSS — glow ────────────────────────── */
.footer-cross {
  font-size: 1.8rem;
  color: rgba(201,169,110,.3);
  cursor: default;
  transition: color .4s, transform .6s;
  display: inline-block;
}

/* ─── MUSIC BTN SVG ──────────────────────────────── */
.music-btn svg {
  transition: transform .3s;
}

/* ─── RSVP FORM GROUPS — hover doux ─────────────── */
.fg {
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}

/* ─── RADIO LABELS — transition complète ─────────── */
.rl {
  transition: border-color .3s, background .3s, transform .25s;
}

/* ─── VERSETS — glow sur le texte doré ───────────── */
blockquote cite {
  text-shadow: 0 0 12px rgba(201,169,110,.3);
}

/* ─── HERO TITLE EM — shimmer (fallback) ─────────── */
.hero-title em {
  display: inline-block;
  will-change: background-position;
}

/* ─── SECTION TITLES — perspective pour charIn ───── */
.stitle {
  perspective: 600px;
  will-change: contents;
}

/* ─── INTRO BAR — reflet doré ────────────────────── */
.intro-bar {
  position: relative;
  overflow: hidden;
}
.intro-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -60%; width: 40%; height: 100%;
  background: rgba(255,255,255,.6);
  animation: btnShine .8s ease 2.2s forwards;
}

/* ─── LIGHTBOX IMAGE ─────────────────────────────── */
.lb-img {
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}

/* ─── ABOUT BADGE — pulsation ────────────────────── */
.about-badge {
  animation: goldenPulse 3s ease-in-out infinite;
}

/* ─── VERS BAND — glissement horizontal ─────────── */
.verse-band p {
  animation: verseBreath 5s ease-in-out infinite;
}

/* ─── MASONRY — padding bas ─────────────────────── */
.masonry {
  padding-bottom: 2rem;
}

/* ─── FINAL SECTION GLOW — animation ────────────── */
.final-glow {
  animation: floatY 6s ease-in-out infinite;
}

/* ─── BACK TO TOP ────────────────────────────────── */
.btt {
  transition: opacity .4s, visibility .4s, transform .4s cubic-bezier(.34,1.56,.64,1), background .3s;
}

blockquote {
  border-left: none !important;
  padding-left: 0 !important;
}