/* ── RESET ── */
/* Teinte accent warm cadre */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Réserve l'espace scrollbar en permanence — évite le layout shift au restore */
html { scrollbar-gutter: stable; }

/* ── VARIABLES ── */
:root {
  --ivory:        #FCF8F2;   /* champagne blanc lumineux   */
  --ivory-dark:   #F3E8D5;   /* beige champagne doux        */
  --ivory-mid:    #EDE0C8;   /* beige de transition         */
  --sand:         #E5D2B2;   /* sable doré chaud            */
  --gold:         #C8A87E;   /* champagne doré (ton cadre)  */
  --gold-dark:    #8A5E32;   /* brun doré profond           */
  --gold-mid:     #A87848;   /* or moyen                    */
  --gold-light:   #DEC08C;   /* or clair                    */
  --rose-gold:    #D4B4A0;   /* rose doré subtil cadre      */
  --foreground:   #3C2410;   /* brun chaud profond          */
  --countdown-bg: #261408;   /* nuit bois profond           */
  --script:       'Great Vibes', cursive;
  --display:      'Cormorant Garamond', serif;
  --body:         'Jost', sans-serif;
  --arabic:       'Amiri', serif;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; background: var(--ivory); color: var(--foreground); font-family: var(--body); font-weight: 300; }

/* Fond champagne doux sur tout le site */
main { background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-dark) 100%); }

.section-padding { padding: 5rem 1.5rem; }


/* ══════════════════════════════════════
   INTRO OVERLAY — Spectaculaire
══════════════════════════════════════ */
#intro {
  position: fixed; inset: 0; z-index: 9000;
  cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem 1.5rem;
}
#intro.done { display: none; }

/* ── Fond champagne lumineux ── */
.intro-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 42%, #FFFCF5 0%, #FBF5E8 32%, #F0E4CC 68%, #E4CFA8 100%);
  animation: introBgIn 1.2s ease both;
}
@keyframes introBgIn { from { opacity:0; } to { opacity:1; } }

/* ── Rayons lumineux rotatifs ── */
.intro-rays {
  position: absolute; inset: -60%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,    rgba(255,250,235,.07) 6deg,  transparent 12deg,
    transparent 35deg,   rgba(255,250,235,.05) 40deg, transparent 45deg,
    transparent 72deg,   rgba(255,250,235,.07) 78deg, transparent 84deg,
    transparent 108deg,  rgba(255,250,235,.04) 113deg,transparent 118deg,
    transparent 145deg,  rgba(255,250,235,.06) 151deg,transparent 157deg,
    transparent 180deg,  rgba(255,250,235,.05) 186deg,transparent 192deg,
    transparent 215deg,  rgba(255,250,235,.07) 221deg,transparent 227deg,
    transparent 252deg,  rgba(255,250,235,.04) 257deg,transparent 263deg,
    transparent 288deg,  rgba(255,250,235,.06) 294deg,transparent 300deg,
    transparent 325deg,  rgba(255,250,235,.05) 331deg,transparent 337deg,
    transparent 360deg
  );
  animation: raysRotate 80s linear infinite;
  pointer-events: none;
}
@keyframes raysRotate { to { transform: rotate(360deg); } }

/* ── Vignette bords ── */
.intro-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(61,36,16,.14) 100%);
  pointer-events: none;
}

/* ── Reflet lumineux balayant ── */
.intro-bg-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(108deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  animation: shimmerSweep 6s ease-in-out 3s infinite;
}
@keyframes shimmerSweep { 0% { transform:translateX(-150%); } 100% { transform:translateX(250%); } }

/* ── Canvas particules ── */
#intro-canvas { position:absolute; inset:0; z-index:1; pointer-events:none; }

/* ── Coins décoratifs ── */
.intro-corner {
  position: absolute;
  width: min(88px, 14vw);
  z-index: 3;
  opacity: 0;
  animation: iFadeIn .3s ease forwards;
}
.intro-corner-tl { top: max(18px,3.5vw); left: max(18px,3.5vw);
  animation-delay: .85s; }
.intro-corner-tr { top: max(18px,3.5vw); right: max(18px,3.5vw);
  transform: scaleX(-1); animation-delay: 1s; }
.intro-corner-bl { bottom: max(72px,13vw); left: max(18px,3.5vw);
  transform: scaleY(-1); animation-delay: 1.15s; }
.intro-corner-br { bottom: max(72px,13vw); right: max(18px,3.5vw);
  transform: scale(-1); animation-delay: 1.3s; }

/* Ligne de coin qui se trace */
.intro-corner .icl {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawCornerLine 1.1s cubic-bezier(0.4,0,0.2,1) forwards;
}
.intro-corner-tl .icl { animation-delay: .85s; }
.intro-corner-tr .icl { animation-delay: 1s; }
.intro-corner-bl .icl { animation-delay: 1.15s; }
.intro-corner-br .icl { animation-delay: 1.3s; }
@keyframes drawCornerLine { to { stroke-dashoffset: 0; } }

/* Gemme & points des coins */
.intro-corner .icg {
  opacity: 0;
  animation: iFadeIn .5s ease forwards;
}
.intro-corner-tl .icg { animation-delay: 1.8s; }
.intro-corner-tr .icg { animation-delay: 1.9s; }
.intro-corner-bl .icg { animation-delay: 2s; }
.intro-corner-br .icg { animation-delay: 2.1s; }

/* ── Mandala ── */
.intro-mandala {
  position: relative; z-index: 3;
  width: min(310px, 72vw); height: auto;
  animation: mandalaReveal 1.4s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}
@keyframes mandalaReveal {
  from { opacity:0; transform:scale(0.5) rotate(-18deg); }
  to   { opacity:1; transform:scale(1) rotate(0deg); }
}

/* Anneau extérieur qui se trace */
.intro-ring-draw {
  animation: drawRing 2s cubic-bezier(0.4,0,0.2,1) 0.4s forwards;
}
@keyframes drawRing { to { stroke-dashoffset: 0; } }

/* Diamants cardinaux */
.intro-diamonds { animation: iFadeIn .6s ease 2.4s both; }

/* Anneaux rotatifs */
/* Anneaux rotatifs : gérés par animateTransform SVG natif */

/* 16 pétales extérieurs */
.intro-outer-petals-16 {
  transform-box:fill-box; transform-origin:50% 50%;
  animation:petalBloom16 .9s cubic-bezier(0.34,1.4,0.64,1) .9s both;
}
@keyframes petalBloom16 {
  from { opacity:0; transform:scale(.15) rotate(-8deg); }
  to   { opacity:1; transform:scale(1) rotate(0deg); }
}

/* 8 pétales intérieurs */
.intro-inner-petals {
  transform-box:fill-box; transform-origin:50% 50%;
  animation:petalBloom .8s cubic-bezier(0.34,1.4,0.64,1) 1.25s both;
}

/* 8 micro-pétales */
.intro-micro-petals {
  transform-box:fill-box; transform-origin:50% 50%;
  animation:petalBloom .7s cubic-bezier(0.34,1.4,0.64,1) 1.6s both;
}

@keyframes petalBloom {
  from { opacity:0; transform:scale(.2); }
  to   { opacity:1; transform:scale(1); }
}

/* Cercles concentriques */
.intro-circles { animation:iFadeIn .7s ease 1.9s both; }

/* Points extrémités */
.intro-dots { animation:iFadeIn .5s ease 2.1s both; }

/* Groupe centre */
.intro-center-group {
  transform-box:fill-box; transform-origin:50% 50%;
  animation:petalBloom .7s cubic-bezier(0.34,1.5,0.64,1) 2.3s both;
}
.intro-center-pulse {
  transform-box:fill-box; transform-origin:50% 50%;
  animation:breathePulse 2.6s ease-in-out 3.2s infinite;
}
@keyframes breathePulse {
  0%,100% { transform:scale(1); opacity:.9; }
  50%     { transform:scale(1.5); opacity:.35; }
}

/* ── Séparateur orné ── */
.intro-divider {
  position:relative; z-index:3;
  width: min(300px, 78vw); margin-top:.6rem;
  opacity:0; animation:iSlideUp .8s ease 3s both;
}

/* ── Zone textes ── */
.intro-text {
  position:relative; z-index:3;
  text-align:center; margin-top:.5rem;
}

.intro-bismillah {
  font-family:var(--arabic); font-size:clamp(1.15rem,4vw,1.55rem);
  letter-spacing:.06em;
  opacity:0; margin-bottom:.55rem;
  background:linear-gradient(130deg,#5A3818 0%,#9E7640 22%,#DEC07A 48%,#E8D090 54%,#A07840 72%,#5A3818 100%);
  background-size:280% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 1px 10px rgba(200,168,126,.3));
  animation:
    iSlideUp .8s ease 3.2s both,
    goldShimmer 5s ease-in-out 4.5s infinite;
}

.intro-names {
  font-family:var(--script); font-size:clamp(2.1rem,7.5vw,4rem);
  line-height:1.2; padding:.1em .3em 0; margin-bottom:.15rem;
  background:linear-gradient(130deg,#5A3818 0%,#9E7640 22%,#DEC07A 48%,#E8D090 54%,#A07840 72%,#5A3818 100%);
  background-size:280% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:0;
  filter: drop-shadow(0 2px 18px rgba(200,168,126,.28));
  animation:
    iBlurReveal 1.1s cubic-bezier(0.16,1,0.3,1) 3.55s both,
    goldShimmer 4.5s ease-in-out 4.8s infinite;
}
@keyframes iBlurReveal {
  from { opacity:0; transform:translateY(16px) scale(.97); filter:blur(8px) drop-shadow(0 2px 18px rgba(200,168,126,.28)); }
  to   { opacity:1; transform:translateY(0) scale(1);      filter:blur(0)   drop-shadow(0 2px 18px rgba(200,168,126,.28)); }
}

.intro-tagline {
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(.75rem,2.2vw,.95rem);
  color:rgba(61,36,16,.48); letter-spacing:.08em;
  opacity:0; margin-bottom:.35rem;
  animation:iSlideUp .7s ease 4.45s both;
}

.intro-date-txt {
  font-family:var(--body); font-weight:300; letter-spacing:.28em; text-transform:uppercase;
  font-size:clamp(.68rem,2vw,.82rem); color:rgba(138,96,50,.65);
  opacity:0; animation:iSlideUp .7s ease 4.85s both;
}

/* ── Tap hint ── */
#intro-tap {
  position:absolute; bottom:3rem; left:0; right:0; text-align:center; z-index:5;
  font-family:var(--body); font-weight:300; font-size:.62rem; letter-spacing:.38em; text-transform:uppercase;
  color:rgba(138,96,50,.58); pointer-events:none; opacity:0;
  animation:iSlideUp .6s ease 5.4s both, tapBlink 2.8s ease-in-out 6.1s infinite;
}
@keyframes tapBlink { 0%,100% { opacity:.72; } 50% { opacity:.14; } }

/* ── Fade overlay (fermeture) ── */
#intro { transition:opacity 1.5s ease; }
#intro-fade { position:absolute; inset:0; z-index:20; background:var(--ivory); opacity:0; pointer-events:none; }

/* ── Keyframes communs ── */
@keyframes iFadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes iSlideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }


/* ══════════════════════════════════════
   RÉVÉLATION MAIN — dézoom cinématique
══════════════════════════════════════ */
main {
  opacity: 0;
  transform: scale(1);
}
main.visible {
  animation: mainDezoom 2.6s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes mainDezoom {
  0% {
    opacity: 0;
    transform: scale(1.65);
    filter: blur(22px) brightness(1.9) saturate(0.5);
  }
  14% { opacity: 1; }
  42% { filter: blur(5px) brightness(1.2) saturate(0.82); }
  72% { filter: blur(0.5px) brightness(1.03) saturate(1); }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1) saturate(1);
  }
}


/* ══════════════════════════════════════
   HERO — cadre image + texte superposé
══════════════════════════════════════ */
#hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Layer GPU isolé : évite les artefacts de background-size pendant la 3D */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* Le cadre est sur son propre pseudo-layer, stable et composité indépendamment */
#hero::before {
  content: '';
  position: absolute;
  inset: -2px; /* micro-débordement pour éviter tout bord visible */
  background: url('cadre.jpg') center center / cover no-repeat;
  z-index: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-origin: center center;
  opacity: 0;
}

/* ── Contenu texte centré dans l'arche ── */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Positionné dans la zone vide de l'arche :
     légèrement remonté par rapport au centre de l'image */
  margin-top: -4%;
  padding: 0 1.5rem;
  width: min(360px, 72vw);
}

/* ── Bismillah ── */
.hero-bismillah {
  font-family: var(--arabic);
  font-size: clamp(1.2rem, 4vw, 1.65rem);
  letter-spacing: .05em;
  margin-bottom: .65rem;
  background: linear-gradient(130deg,#5A3818 0%,#9E7640 22%,#DEC07A 48%,#E8D090 54%,#A07840 72%,#5A3818 100%);
  background-size: 280% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 10px rgba(200,168,126,.3));
  animation: goldShimmer 5s ease-in-out 1s infinite;
}

/* ── Croissant + étoile ── */
.hero-crescent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-bottom: .55rem;
}
.hero-moon-icon {
  font-size: 1.25rem;
  color: rgba(200,168,108,.78);
  display: block;
  transform: rotate(-10deg);
  line-height: 1;
}
.hero-star-icon {
  font-size: .55rem;
  color: rgba(200,168,108,.85);
  display: block;
  position: relative; top: -3px;
}

/* ── Sous-titre ── */
.hero-subtitle {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(.76rem, 2.1vw, .92rem);
  color: rgba(61,36,16,.5);
  line-height: 1.78;
  margin-bottom: .7rem;
  letter-spacing: .02em;
}

/* ── Séparateur fin ── */
.hero-orn-line {
  width: 64px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.55), transparent);
  margin: .3rem auto .55rem;
}

/* ── Noms — shimmer doré animé ── */
.hero-names {
  font-family: var(--script);
  font-size: clamp(2rem, 7vw, 3.8rem);
  line-height: 1.18;
  padding: .08em .2em;
  margin-bottom: .4rem;
  background: linear-gradient(130deg,
    #5A3818 0%, #9E7640 20%, #D0A870 45%,
    #E8CC90 55%, #B4904C 72%, #5A3818 100%);
  background-size: 260% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 5s ease-in-out 1.2s infinite;
  filter: drop-shadow(0 2px 14px rgba(201,169,110,.3));
}

/* ── Tagline ── */
.hero-tagline {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(.76rem, 2.1vw, .9rem);
  color: rgba(61,36,16,.56);
  line-height: 1.82;
  margin-bottom: .95rem;
  letter-spacing: .03em;
}

/* ── Info row ── */
.hero-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-bottom: 1.15rem;
  flex-wrap: wrap;
}
.hero-info span {
  font-family: var(--body);
  font-size: clamp(.62rem, 1.7vw, .72rem);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(139,100,48,.68);
}
.hi-sep {
  width: 1px; height: 11px;
  background: rgba(201,169,110,.52);
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Bouton CTA premium ── */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.85rem;
  border-radius: 50px;
  background: linear-gradient(135deg, #6E4A22 0%, #C8A87E 52%, #6E4A22 100%);
  background-size: 200% auto;
  color: #fff;
  text-decoration: none;
  font-family: var(--body);
  font-size: clamp(.64rem, 1.7vw, .75rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow:
    0 4px 22px rgba(122,82,34,.28),
    0 1px 0 rgba(255,255,255,.12) inset;
  transition: transform .25s, box-shadow .25s, background-position .5s;
  margin-bottom: 1rem;
  position: relative;
}
.hero-cta::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}
.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(122,82,34,.38), 0 0 0 1px rgba(201,169,110,.25);
  background-position: right center;
}
.hero-cta-arrow {
  transition: transform .25s;
  display: inline-block;
}
.hero-cta:hover .hero-cta-arrow { transform: translateX(3px); }

/* ── Bouton RSVP sous les détails ── */
.rsvp-cta-wrap {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem 0.5rem;
}

/* ── Phrase de clôture ── */
.hero-closing {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(.68rem, 1.9vw, .8rem);
  color: rgba(61,36,16,.4);
  line-height: 1.82;
  letter-spacing: .03em;
}


/* ══════════════════════════════════════
   TRANSITION BURST — ultra premium
══════════════════════════════════════ */

/* ── Conteneur plein écran ── */
#intro-burst {
  position: absolute; inset: 0; z-index: 18;
  pointer-events: none;
}

/* ── Pivot aligné sur le mandala (positionné via JS) ── */
.burst-center {
  position: absolute;
  left: var(--bx, 50%);
  top:  var(--by, 50%);
  width: 0; height: 0;
}

/* ── Anneaux expansifs ── */
.burst-ring {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  /* centré sur le pivot : translate -50% de leur propre taille */
  will-change: transform, opacity;
}
.burst-r1 { width: 60px;  height: 60px;  margin: -30px;  border: 2px   solid rgba(200,168,126,.92); }
.burst-r2 { width: 60px;  height: 60px;  margin: -30px;  border: 1.4px solid rgba(220,195,148,.70); }
.burst-r3 { width: 60px;  height: 60px;  margin: -30px;  border: 1px   solid rgba(255,248,230,.65); }
.burst-r4 { width: 60px;  height: 60px;  margin: -30px;  border: 0.8px solid rgba(200,168,126,.45); }
.burst-r5 { width: 60px;  height: 60px;  margin: -30px;  border: 0.6px solid rgba(255,252,240,.35); }

/* ── Rayons en croix (4 traits qui s'étirent) ── */
.burst-rays {
  position: absolute;
  width: 2px; height: 2px;
  margin: -1px;
  opacity: 0;
}
.burst-rays::before,
.burst-rays::after {
  content: '';
  position: absolute;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200,168,126,.55) 40%,
    rgba(255,252,235,.8) 50%,
    rgba(200,168,126,.55) 60%,
    transparent 100%);
  border-radius: 2px;
}
.burst-rays::before { /* horizontal */
  width: 0; height: 1.5px;
  top: 0; left: 50%;
  transform: translateX(-50%);
}
.burst-rays::after { /* vertical */
  width: 1.5px; height: 0;
  left: 0; top: 50%;
  transform: translateY(-50%);
}

/* ── Flash radial central ── */
.burst-flash {
  position: absolute;
  width: 180px; height: 180px; margin: -90px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255,255,250,1)   0%,
    rgba(240,220,175,.85) 22%,
    rgba(210,185,140,.45) 50%,
    transparent           100%);
  opacity: 0; transform: scale(0);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

/* ── Voile champagne final ── */
.burst-white {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at var(--bx, 50%) var(--by, 50%),
    #FFFDF8 0%,
    #FCF8F2 45%,
    #F3E8D5 100%);
  opacity: 0;
  will-change: opacity;
}

/* ══ ACTIVE ══ */
#intro-burst.active .burst-r1 {
  animation: burstRing 1.1s cubic-bezier(.08,0,.25,1) 0s    both;
}
#intro-burst.active .burst-r2 {
  animation: burstRing 1.2s cubic-bezier(.08,0,.22,1) .08s  both;
}
#intro-burst.active .burst-r3 {
  animation: burstRing 1.3s cubic-bezier(.06,0,.2,1)  .17s  both;
}
#intro-burst.active .burst-r4 {
  animation: burstRing 1.4s cubic-bezier(.06,0,.18,1) .26s  both;
}
#intro-burst.active .burst-r5 {
  animation: burstRing 1.5s cubic-bezier(.04,0,.16,1) .36s  both;
}
#intro-burst.active .burst-flash {
  animation: burstFlash .75s cubic-bezier(.1,0,.4,1) 0s both;
}
#intro-burst.active .burst-rays {
  animation: burstRays .9s cubic-bezier(.1,0,.3,1) .04s both;
}
#intro-burst.active .burst-white {
  animation: burstWhite .7s cubic-bezier(.4,0,.8,1) .44s both;
}

@keyframes burstRing {
  0%   { opacity: .95; transform: scale(0); }
  40%  { opacity: .6; }
  100% { opacity: 0;   transform: scale(7); }
}
@keyframes burstFlash {
  0%   { opacity: 0;   transform: scale(0);   }
  25%  { opacity: 1;   transform: scale(1.2); }
  100% { opacity: 0;   transform: scale(3.5); }
}
@keyframes burstRays {
  0%   { opacity: 0; }
  15%  { opacity: .9; }
  100% { opacity: 0; }
}
#intro-burst.active .burst-rays::before {
  animation: burstRayH .9s cubic-bezier(.1,0,.3,1) .04s both;
}
#intro-burst.active .burst-rays::after {
  animation: burstRayV .9s cubic-bezier(.1,0,.3,1) .04s both;
}
@keyframes burstRayH {
  0%   { width: 0; }
  35%  { width: min(340px, 60vw); }
  100% { width: min(480px, 80vw); opacity: 0; }
}
@keyframes burstRayV {
  0%   { height: 0; }
  35%  { height: min(340px, 55vh); }
  100% { height: min(480px, 75vh); opacity: 0; }
}
@keyframes burstWhite {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ── Mandala spin-out au clic ── */
.intro-mandala.spin-out {
  animation: mandalaSpinOut .85s cubic-bezier(.4,0,1,1) forwards !important;
}
@keyframes mandalaSpinOut {
  0%   { transform: scale(1)    rotate(0deg);   opacity: 1; }
  40%  { transform: scale(1.12) rotate(200deg); opacity: .75; }
  100% { transform: scale(.12)  rotate(540deg); opacity: 0; }
}

/* ── Coins qui disparaissent ── */
.intro-corner.exit {
  animation: cornerExit .5s cubic-bezier(.4,0,1,1) forwards !important;
}
@keyframes cornerExit {
  to { opacity: 0; transform: scale(1.3); }
}
.intro-corner-tr.exit { transform-origin: top right;   }
.intro-corner-bl.exit { transform-origin: bottom left; }
.intro-corner-br.exit { transform-origin: bottom right;}

/* ── Textes qui s'envolent vers le haut ── */
.intro-text.exit > * {
  animation: textExit .5s cubic-bezier(.4,0,1,1) forwards !important;
}
.intro-text.exit .intro-bismillah { animation-delay: .02s !important; }
.intro-text.exit .intro-names     { animation-delay: .06s !important; }
.intro-text.exit .intro-tagline   { animation-delay: .1s  !important; }
.intro-text.exit .intro-date-txt  { animation-delay: .14s !important; }
@keyframes textExit {
  to { opacity: 0; transform: translateY(-28px) scale(.94); }
}

/* ── Séparateur qui s'efface ── */
.intro-divider.exit {
  animation: iFadeOut .4s ease .05s forwards !important;
}
#intro-tap.exit {
  animation: iFadeOut .3s ease forwards !important;
}
@keyframes iFadeOut { to { opacity: 0; } }

/* ── Hero : dézoom du cadre légèrement décalé — effet caméra qui recule ── */
#hero.hero-reveal::before {
  animation: heroImgDezoom 3.1s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes heroImgDezoom {
  0% {
    opacity: 0;
    transform: scale(1.45);
    filter: brightness(1.7) saturate(0.4);
  }
  12% { opacity: 0; }
  24% { opacity: 1; filter: brightness(1.35) saturate(0.65); }
  55% { filter: brightness(1.1) saturate(0.9); }
  82% { filter: brightness(1.01) saturate(1); }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
}


/* ══════════════════════════════════════
   COUNTDOWN
══════════════════════════════════════ */
#countdown {
  border-top: 1px solid rgba(200,168,126,.18);
  background: var(--countdown-bg);
  padding: 4.5rem 1rem;
  text-align: center;
  overflow: hidden;
  position: relative;
}
#countdown::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(200,168,126,.12) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(200,168,126,.08) 0%, transparent 60%),
    repeating-linear-gradient(60deg,  rgba(200,168,126,.018) 0px, rgba(200,168,126,.018) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(-60deg, rgba(200,168,126,.018) 0px, rgba(200,168,126,.018) 1px, transparent 1px, transparent 28px);
  pointer-events: none;
}
#countdown h2 {
  font-family: var(--script); font-size: clamp(2.2rem,7vw,3.5rem);
  margin-bottom: .6rem; position: relative;
}
.cd-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1rem; max-width: 600px; margin: 1.5rem auto 0;
  position: relative;
}
.cd-cell {
  padding: 1rem .5rem;
  background: linear-gradient(160deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.025) 100%);
  border: 1px solid rgba(200,168,126,.16);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.cd-num {
  display: block;
  font-family: var(--display); font-size: clamp(2.4rem,7vw,4.5rem);
  font-weight: 300; color: #FFF8EE; line-height: 1;
}
.cd-lbl {
  display: block; margin-top: .4rem;
  font-family: var(--body); font-weight: 300;
  font-size: .57rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(200,168,126,.62);
}


/* ══════════════════════════════════════
   THE DETAILS
══════════════════════════════════════ */
#details { background: linear-gradient(180deg, #FCF8F2 0%, #F3E8D5 100%); text-align: center; }
.string-lights { width: 100%; display: block; margin-bottom: -2px; filter: drop-shadow(0 2px 4px rgba(200,168,126,.15)); }
.details-header { margin-bottom: 2rem; }
.details-header h2 {
  font-family: var(--script); font-size: clamp(2.8rem,8vw,4.2rem);
  margin-bottom: .5rem;
}
.details-header p {
  font-family: var(--body); font-weight: 300;
  font-size: .68rem; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(139,100,48,.62);
}
.badge-card {
  position: relative; text-align: center;
  padding: 2.5rem 2.5rem;
  background: linear-gradient(160deg, rgba(255,252,246,.98) 0%, rgba(248,240,228,.92) 100%);
  border: 1px solid rgba(200,168,126,.32);
  border-radius: 18px;
  width: min(380px, 88vw);
  box-shadow:
    0 8px 50px rgba(138,94,50,.09),
    0 2px 6px rgba(200,168,126,.12),
    0 1px 0 rgba(255,255,255,.95) inset;
}
.badge-card::before, .badge-card::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border-color: rgba(200,168,126,.45); border-style: solid;
}
.badge-card::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.badge-card::after  { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.badge-card h3 { font-family: var(--script); font-size: clamp(2.2rem,6vw,3rem); color: var(--foreground); margin-bottom: .5rem; }
.badge-card .venue { font-family: var(--display); font-size: 1rem; letter-spacing: .15em; text-transform: uppercase; color: var(--foreground); display: block; margin-bottom: .2rem; }
.badge-card .venue-city { font-family: var(--display); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(139,100,48,.62); display: block; margin-bottom: .8rem; }
.badge-card .time-row { display: flex; align-items: center; justify-content: center; gap: .4rem; color: rgba(139,100,48,.58); }
.badge-card .time-row svg { width: 14px; height: 14px; flex-shrink: 0; }
.badge-card .time-row span { font-family: var(--body); font-size: .85rem; font-weight: 400; }
.badge-btns { display: flex; gap: .75rem; justify-content: center; margin-top: 1.5rem; }
.btn-gold {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.2rem;
  background: linear-gradient(135deg, #6E4A26 0%, #C8A87E 100%);
  color: #fff;
  border: none; border-radius: 50px;
  font-family: var(--body); font-size: .78rem; font-weight: 400;
  cursor: pointer; text-decoration: none;
  transition: opacity .2s, transform .2s, box-shadow .2s; letter-spacing: .04em;
  box-shadow: 0 3px 14px rgba(110,74,38,.2);
}
.btn-gold:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(110,74,38,.28); }
.btn-gold svg { width: 13px; height: 13px; }


/* ══════════════════════════════════════
   ORDER OF THE DAY
══════════════════════════════════════ */
#order { background: linear-gradient(180deg, #F3E8D5 0%, #FCF8F2 100%); text-align: center; }
.order-header { padding: 1.5rem 1.5rem 0; }
.order-header h2 { font-family: var(--script); font-size: clamp(2.8rem,8vw,4.2rem); margin-bottom: .5rem; }
.order-header p { font-family: var(--body); font-weight: 300; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(139,100,48,.5); }
.timeline { display: flex; flex-direction: column; align-items: center; padding: 3rem 1.5rem 5rem; gap: 0; }
.tl-item { text-align: center; max-width: 380px; }
.tl-time { font-family: var(--display); font-weight: 400; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: .3rem; }
.tl-item h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 500; color: var(--foreground); margin-bottom: .3rem; }
.tl-item p { font-family: var(--body); font-weight: 300; font-size: .9rem; color: rgba(61,36,16,.58); line-height: 1.7; }
.tl-line { width: 1px; height: 44px; background: linear-gradient(180deg, rgba(200,168,126,.15), rgba(200,168,126,.45), rgba(200,168,126,.15)); margin: .6rem 0; }


/* ══════════════════════════════════════
   RSVP
══════════════════════════════════════ */
#rsvp { background: linear-gradient(180deg, #FCF8F2 0%, #F3E8D5 100%); padding: 4rem 1.5rem 0; }
.rsvp-inner { max-width: 520px; margin: 0 auto; }
.rsvp-header { text-align: center; margin-bottom: 3rem; }
.rsvp-header h2 { font-family: var(--script); font-size: clamp(2.8rem,8vw,4.2rem); margin-bottom: .5rem; }
.rsvp-header p { font-family: var(--body); font-weight: 300; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(139,100,48,.5); }
.rsvp-deadline { margin-top: .75rem; font-family: var(--body); font-size: .82rem; font-weight: 300; color: rgba(139,100,48,.55); }
.rsvp-deadline strong { color: var(--gold-dark); font-weight: 500; }
.rsvp-form { display: flex; flex-direction: column; gap: 1.5rem; }
.form-field { display: flex; flex-direction: column; gap: .4rem; }
.form-field label { font-family: var(--body); font-size: .78rem; font-weight: 500; color: var(--gold-dark); }
.form-field input,
.form-field select,
.form-field textarea {
  height: 42px; width: 100%;
  border: 1px solid rgba(200,168,126,.28); border-radius: 10px;
  padding: .5rem .9rem; background: rgba(255,252,246,.96);
  color: var(--foreground); font-family: var(--body); font-size: .9rem;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.form-field textarea { height: auto; min-height: 80px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(138,94,50,.1); }
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(61,36,16,.28); }
.radio-group { display: flex; gap: 1.5rem; margin-top: .5rem; flex-wrap: wrap; }
.radio-item { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.radio-item input[type=radio] { accent-color: var(--gold-dark); width: 15px; height: 15px; }
.radio-item { font-family: var(--body); font-size: .88rem; color: var(--foreground); }
.btn-submit {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .88rem 1rem; border-radius: 50px;
  background: linear-gradient(135deg, #6E4A22 0%, #C8A87E 52%, #6E4A22 100%);
  background-size: 200% auto;
  color: #fff; border: none;
  font-family: var(--body); font-size: .88rem; font-weight: 500;
  cursor: pointer; transition: transform .22s, box-shadow .22s, background-position .45s;
  letter-spacing: .08em;
  box-shadow: 0 4px 24px rgba(110,74,34,.22);
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(122,82,34,.3); background-position: right center; }
.btn-submit svg { width: 16px; height: 16px; }
.rsvp-success { display: none; text-align: center; padding: 3rem 1rem; }
.rsvp-success p { font-family: var(--script); font-size: 2.5rem; color: var(--foreground); margin-bottom: 1rem; }
.rsvp-success small { font-family: var(--body); font-weight: 300; font-size: .9rem; color: rgba(61,36,16,.5); }


/* ══════════════════════════════════════
   INFO BANNER
══════════════════════════════════════ */
#info-banner {
  background: linear-gradient(180deg, #EDE0C8 0%, #F3E8D5 50%, #EDE0C8 100%);
  padding: 5.5rem 1.5rem 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#info-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,252,246,.45) 0%, transparent 70%);
  pointer-events: none;
}
.info-banner-inner { max-width: 520px; margin: 0 auto; }
.info-banner-pre {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(1rem,2.8vw,1.35rem);
  color: rgba(60,36,16,.58); line-height: 1.9; margin-bottom: 1.8rem; letter-spacing: .04em;
}
.info-banner-orn { width: min(260px,70vw); display: block; margin: 0 auto 1.8rem; opacity: .78; }
.info-banner-venue {
  font-family: var(--display); font-size: clamp(.9rem,2.3vw,1.1rem);
  letter-spacing: .2em; text-transform: uppercase; color: rgba(138,96,50,.68); font-weight: 400;
}


/* ══════════════════════════════════════
   ORIENTAL SEPARATOR
══════════════════════════════════════ */
.oriental-sep {
  background: linear-gradient(90deg, var(--ivory-mid), var(--ivory), var(--ivory-mid));
  display: flex; align-items: center; justify-content: center;
  padding: .8rem 0;
}
.mandala-sep { width: min(280px,80vw); opacity: .82; filter: drop-shadow(0 0 6px rgba(200,168,126,.18)); }


/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
#footer-wrap { background: linear-gradient(180deg, var(--ivory-dark) 0%, var(--sand) 100%); }
footer {
  background: linear-gradient(180deg, #FCF8F2 0%, #F3E8D5 100%); min-height: 460px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 3rem; gap: 0;
}
.footer-bismillah {
  font-family: var(--arabic); font-size: clamp(1.1rem,3.5vw,1.45rem);
  margin-bottom: .6rem;
  background: linear-gradient(130deg,#5A3818 0%,#9E7640 22%,#DEC07A 48%,#E8D090 54%,#A07840 72%,#5A3818 100%);
  background-size: 280% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 8px rgba(200,168,126,.25));
  animation: goldShimmer 6s ease-in-out infinite;
}
footer h2 {
  font-family: var(--script); font-size: clamp(2rem,6vw,2.8rem); margin-bottom: .3rem;
  background: linear-gradient(130deg,#5A3818 0%,#9E7640 22%,#DEC07A 48%,#E8D090 54%,#A07840 72%,#5A3818 100%);
  background-size: 280% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgba(201,169,110,.3));
  animation: goldShimmer 5s ease-in-out infinite;
}
footer .footer-date { font-family: var(--body); font-weight: 300; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(61,36,16,.52); }
footer .footer-venue { font-family: var(--display); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(139,100,48,.42); margin-top: .3rem; }
.footer-ornament { margin-top: 2rem; width: min(320px,82vw); opacity: .58; filter: drop-shadow(0 0 8px rgba(200,168,126,.2)); }
.footer-tagline { font-family: var(--display); font-style: italic; font-weight: 300; font-size: .9rem; color: rgba(60,36,16,.5); max-width: 380px; margin: 1.5rem auto 0; line-height: 1.9; padding: 0 1.5rem; }
.footer-credit { padding: 1rem; text-align: center; border-top: 1px solid rgba(200,168,126,.15); background: #F3E8D5; }
.footer-credit p { font-family: var(--body); font-size: .7rem; color: var(--gold-mid); font-weight: 400; }


/* ── Transitions douces sections ── */
section { position: relative; }

/* ── Shimmer doré sur tous les titres de section ── */
#countdown h2,
.details-header h2,
.order-header h2,
.rsvp-header h2 {
  background: linear-gradient(130deg,#5A3818 0%,#9E7640 22%,#DEC07A 48%,#E8D090 54%,#A07840 72%,#5A3818 100%);
  background-size: 280% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgba(201,169,110,.22));
  animation: goldShimmer 5s ease-in-out infinite;
}

/* ══════════════════════════════════════
   SCROLL ANIMATIONS
══════════════════════════════════════ */
.anim {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.anim.visible { opacity: 1; transform: none; }
.anim-scale {
  opacity: 0; transform: scale(.92);
  transition: opacity .7s ease, transform .7s ease;
}
.anim-scale.visible { opacity: 1; transform: scale(1); }


/* ══════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes goldShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}


/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 560px) {
  .cd-grid { grid-template-columns: repeat(2,1fr); }
  .radio-group { flex-direction: column; gap: .6rem; }
  .hero-content { width: min(280px, 68vw); margin-top: -6%; }
  .hero-info { gap: .35rem; }
  .hi-sep { display: none; }
  .hero-info span:not(:last-child)::after {
    content: ' · ';
    margin-left: .35rem;
    color: rgba(201,169,110,.55);
  }
}