/* ====== Ouverture d'une surprise : overlay, animations, contenu ====== */
.v-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(156, 31, 69, .75), rgba(40, 4, 16, .92));
  backdrop-filter: blur(6px);
  animation: v-fade .35s ease;
  overflow-y: auto;
}
.v-overlay.closing { animation: v-fade .3s ease reverse forwards; }
@keyframes v-fade { from { opacity: 0 } }
.v-particles { position: fixed; inset: 0; pointer-events: none; z-index: 520; }
.v-stage { position: relative; z-index: 510; width: 100%; max-width: 640px; display: grid; place-items: center; perspective: 1200px; }

/* Carte de contenu */
.v-card {
  position: relative; width: 100%;
  background: linear-gradient(170deg, #fffaf6, #fbe9e0);
  border-radius: 24px; padding: 34px 28px 28px;
  box-shadow: 0 30px 80px rgba(20, 0, 8, .55), inset 0 0 0 3px rgba(217, 164, 65, .55), inset 0 0 0 9px #fffaf6, inset 0 0 0 10px rgba(217, 164, 65, .35);
  text-align: center; color: var(--ink);
}
.v-card .v-close {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--burgundy); color: #fff; font-size: 1.2rem; line-height: 1; display: grid; place-items: center;
}
.v-card .v-day { font-family: var(--font-num); color: var(--gold); font-size: .95rem; letter-spacing: 3px; text-transform: uppercase; }
.v-card .v-bow { width: 90px; margin: -64px auto 6px; display: block; filter: drop-shadow(0 4px 6px rgba(80,0,20,.35)); }
.v-card h2 { font-family: var(--font-title); font-weight: 400; color: var(--burgundy); font-size: clamp(2.2rem, 6vw, 3.2rem); margin: 4px 0 10px; line-height: 1.1; }
.v-card .v-text { font-family: var(--font-hand); font-size: clamp(1.25rem, 3.4vw, 1.5rem); line-height: 1.5; white-space: pre-wrap; text-align: center; min-height: 1em; }
.v-card .v-text .caret { display: inline-block; width: 2px; height: 1.1em; background: var(--wine); vertical-align: -3px; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0 } }
.v-card .v-text .w { opacity: 0; display: inline-block; transform: translateY(8px); animation: word .5s forwards; white-space: pre; }
@keyframes word { to { opacity: 1; transform: none } }
.v-card .v-text.fade { animation: v-fade 1.6s ease; }
.v-media { display: grid; gap: 14px; margin-top: 18px; }
.v-media figure { margin: 0; }
.v-media img, .v-media video { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 16px; background: #2a0612; box-shadow: 0 8px 22px rgba(60, 0, 20, .25); }
.v-media audio { width: 100%; }
.v-media figcaption { font-family: var(--font-hand); font-size: 1.15rem; color: var(--wine); margin-top: 6px; }
.v-media .reveal { opacity: 0; transform: translateY(14px); animation: word .6s forwards; }
.v-empty { font-family: var(--font-hand); font-size: 1.3rem; color: var(--wine); opacity: .8; }
.v-card.appear { animation: card-in .7s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes card-in { from { opacity: 0; transform: scale(.4) translateY(80px) } }

/* --- Animation : Cadeau --- */
.a-gift { position: relative; width: 220px; height: 220px; animation: gift-wobble 1s ease-in-out; }
.a-gift .box { position: absolute; bottom: 0; left: 15px; width: 190px; height: 140px; border-radius: 10px; background: linear-gradient(160deg, var(--wine), var(--burgundy-dark)); box-shadow: inset 0 -12px 22px rgba(0,0,0,.25); }
.a-gift .box::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 30px; transform: translateX(-50%); background: linear-gradient(90deg, #b5802c, var(--gold-light), #b5802c); }
.a-gift .lid { position: absolute; bottom: 132px; left: 5px; width: 210px; height: 44px; border-radius: 8px; background: linear-gradient(160deg, #b02a52, var(--burgundy)); box-shadow: 0 6px 10px rgba(0,0,0,.25); }
.a-gift .lid::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 30px; transform: translateX(-50%); background: linear-gradient(90deg, #b5802c, var(--gold-light), #b5802c); }
.a-gift .lid svg { position: absolute; width: 130px; left: 40px; top: -62px; }
.a-gift.open .lid { animation: lid-off .8s cubic-bezier(.3, -.2, .6, 1) forwards; }
.a-gift .light { position: absolute; left: 50%; bottom: 120px; width: 10px; height: 10px; border-radius: 50%; transform: translateX(-50%); background: #fff6d0; box-shadow: 0 0 0 0 #ffe7a8; opacity: 0; }
.a-gift.open .light { animation: light 1s .2s ease-out forwards; }
.a-gift.open { animation: none; }
@keyframes gift-wobble { 0%, 100% { transform: rotate(0) } 15% { transform: rotate(-6deg) scale(1.03) } 30% { transform: rotate(6deg) } 45% { transform: rotate(-5deg) scale(1.05) } 60% { transform: rotate(4deg) } 75% { transform: rotate(-2deg) } }
@keyframes lid-off { to { transform: translate(140px, -260px) rotate(50deg); opacity: 0 } }
@keyframes light { 40% { opacity: 1; box-shadow: 0 0 80px 70px rgba(255, 231, 168, .9) } 100% { opacity: 0; box-shadow: 0 0 200px 200px rgba(255, 231, 168, 0) } }
.a-gift.out { animation: v-fade .4s reverse forwards; }

/* --- Animation : Enveloppe --- */
.a-env { position: relative; width: 300px; height: 200px; animation: env-in .6s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes env-in { from { transform: translateY(120px) scale(.6); opacity: 0 } }
.a-env .back { position: absolute; inset: 0; background: #e9c7b5; border-radius: 8px; }
.a-env .paper { position: absolute; left: 18px; right: 18px; top: 14px; height: 170px; background: #fffaf6; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.1); display: grid; place-items: center; font: 400 2.4rem var(--font-title); color: var(--burgundy); transition: transform .9s cubic-bezier(.3, 1.2, .5, 1); }
.a-env .front { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; z-index: 2; }
.a-env .front::before { content: ''; position: absolute; inset: 0; background: #f0cfbe; clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); }
.a-env .front::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(to top, #f6dccd, #f2d4c4); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.a-env .flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; background: linear-gradient(#d9b09c, #e9c3b0); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .6s ease-in; z-index: 3; }
.a-env .seal { position: absolute; left: 50%; top: 52%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d0476d, var(--burgundy)); z-index: 4; color: var(--gold-light); display: grid; place-items: center; transition: opacity .3s; }
.a-env .seal svg { width: 22px; }
.a-env.open .seal { opacity: 0; }
.a-env.open .flap { transform: rotateX(180deg); z-index: 0; }
.a-env.open .paper { transform: translateY(-130px); }
.a-env.out { animation: v-fade .4s reverse forwards; }

/* --- Animation : Carte retournée --- */
.a-flip { width: 220px; aspect-ratio: 1; border-radius: 22px; display: grid; place-items: center; font: 700 6rem var(--font-num); color: #fff4f0;
  background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.2), transparent 40%), var(--burgundy);
  box-shadow: 0 0 0 4px var(--gold-light), 0 0 50px 10px rgba(255, 210, 120, .6); animation: flip-in .5s cubic-bezier(.2, 1.3, .4, 1); }
.a-flip.go { animation: flip-out .45s ease-in forwards; }
@keyframes flip-in { from { transform: scale(.5) rotate(-10deg); opacity: 0 } }
@keyframes flip-out { to { transform: rotateY(90deg) scale(1.3) } }
.v-card.flip-in { animation: flip-card .55s ease-out; }
@keyframes flip-card { from { transform: rotateY(-90deg) } }

/* --- Animation : Rideau --- */
.a-curtain { position: fixed; inset: 0; z-index: 530; pointer-events: none; display: grid; place-items: center; }
.a-curtain .c { position: absolute; top: 0; bottom: 0; width: 51%;
  background: repeating-linear-gradient(90deg, #6a0f2a 0 18px, #8e1a3e 18px 30px, #5a0b23 30px 44px);
  box-shadow: inset 0 -40px 60px rgba(0,0,0,.35); transition: transform 1.3s cubic-bezier(.7, 0, .3, 1); }
.a-curtain .c.l { left: 0; border-right: 4px solid var(--gold); }
.a-curtain .c.r { right: 0; border-left: 4px solid var(--gold); }
.a-curtain .t { position: relative; z-index: 2; font: 400 clamp(3rem, 10vw, 5rem) var(--font-title); color: var(--gold-light); text-shadow: 0 0 20px rgba(255, 210, 120, .7); transition: opacity .4s; }
.a-curtain.open .c.l { transform: translateX(-100%); }
.a-curtain.open .c.r { transform: translateX(100%); }
.a-curtain.open .t { opacity: 0; }

/* --- Animation : Zoom doux --- */
.v-card.zoom-in { animation: zoom-in 1s cubic-bezier(.2, .9, .3, 1); }
@keyframes zoom-in { from { opacity: 0; transform: scale(.85); filter: blur(10px) } }

/* --- Animation : Étincelles --- */
.a-spark { font: 700 7rem var(--font-num); color: var(--gold-light); text-shadow: 0 0 30px #ffd27a, 0 0 60px #ff9ab8; animation: spark-charge 1s ease-in forwards; }
@keyframes spark-charge { 0% { transform: scale(.4); opacity: 0 } 60% { transform: scale(1.1); opacity: 1 } 85% { transform: scale(.9) } 100% { transform: scale(1.8); opacity: 0; filter: blur(6px) } }