/* ============================================================
   style.css — Invitation Mariage V1 — Nature Enchantée v1.3
   FIXES COMPLETS :
   - mix-blend-mode:multiply sur tous les PNG à fond blanc/gris
   - hero-overlay quasiment nul en mode floral (image visible)
   - wax-seal via <img> avec blend → fond blanc effacé
   - botanical : blend + grande taille plein coin
   - lucioles : z-index 50, taille 8-14px, glow visible
   - musique : bouton fixed toujours visible
   - sections : pleine largeur, padding généreux
   - bg-paper : scroll (fix iOS Safari)
============================================================ */

:root {
  --bg:           #FAF7F2;
  --bg-alt:       #F3EDE3;
  --bg-card:      rgba(255,253,248,0.93);
  --text:         #2C2A26;
  --text-muted:   #7A7068;
  --accent:       #6B7F6B;
  --accent2:      #3D5243;
  --accent-light: #A8BBAA;
  --gold:         #C8A97A;
  --gold-light:   #E8D4B0;
  --warm:         #C4957A;
  --border:       rgba(107,127,107,0.22);
  --sh-soft:      0 4px 24px rgba(44,42,38,.08);
  --sh-card:      0 8px 40px rgba(44,42,38,.12);
  --sh-hover:     0 12px 48px rgba(44,42,38,.18);
  --ff-title:     'Playfair Display', Georgia, serif;
  --ff-body:      'Poppins','Segoe UI',sans-serif;
  --sp-xs: .5rem; --sp-sm: 1rem; --sp-md: 1.5rem;
  --sp-lg: 2.5rem; --sp-xl: 4rem; --sp-xxl: 7rem;
  --r-sm:4px; --r-md:14px; --r-lg:22px; --r-full:50%;
  --tf:.2s ease-out; --tb:.3s ease-out; --ts:.6s ease-out;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--ff-body);
  background-color:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  /* texture papier en fond de page */
  background-image:url('assets/bg-paper.jpg');
  background-attachment:scroll; /* FIX: fixed = bug iOS Safari */
  background-size:cover;
  background-position:center top;
  cursor:none;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color var(--tf)}
a:hover{color:var(--accent2)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ─── CURSEUR CUSTOM (desktop pointer:fine) ─── */
.custom-cursor{
  width:24px;height:24px;
  border:2px solid var(--gold);border-radius:var(--r-full);
  background:transparent;position:fixed;top:0;left:0;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  transition:width var(--tf),height var(--tf),background var(--tf),opacity var(--tf);
  opacity:0;
}
.custom-cursor.visible{opacity:1}
.custom-cursor.hovered{width:40px;height:40px;background:rgba(200,169,122,.15)}
@media(pointer:coarse){.custom-cursor{display:none}body{cursor:auto}}

/* ─── LUCIOLES ───
   🎨 DA : vert-jaune brillant chaud avec halo fort
   🔧 FIX : z-index 50 → 90 (sous navbar z-index:100) */
.fireflies-container{
  position:fixed;inset:0;pointer-events:none;
  z-index:90;
  overflow:hidden;
}
.firefly{
  position:absolute;border-radius:var(--r-full);
  /* 🎨 DA : vert-jaune lumineux — signature luciole d'été */
  background:radial-gradient(circle,#FFFFFF 0%,#C8FF20 30%,#88DD00 65%,transparent 100%);
  box-shadow:
    0 0 6px 3px rgba(180,255,30,.7),
    0 0 16px 6px rgba(140,220,0,.4),
    0 0 30px 10px rgba(100,180,0,.2);
  opacity:0;animation:fireFloat linear infinite;
}
/* 🎨 DA : mouvement organique zigzag */
@keyframes fireFloat{
  0%  {opacity:0;  transform:translate(0,0)        scale(.6)}
  15% {opacity:.9; transform:translate(8px,-12px)   scale(1.1)}
  35% {opacity:.7; transform:translate(-5px,-28px)  scale(1)}
  55% {opacity:.85;transform:translate(10px,-44px)  scale(1.15)}
  75% {opacity:.6; transform:translate(-8px,-58px)  scale(.95)}
  100%{opacity:0;  transform:translate(4px,-72px)   scale(.7)}
}

@media(prefers-reduced-motion:reduce){
  .firefly,.animate-on-scroll,.envelope-flap,.envelope-card{
    animation:none!important;transition:none!important}
  .animate-on-scroll{opacity:1!important;transform:none!important}
}

/* ─── INTRO ENVELOPPE — Architecture 3D ───
   🎨 DA : enveloppe = conteneur CSS aux dimensions fixes
   Carte à l'intérieur (même inset), sort vers le haut en 3D
   Inspiré de l'approche ChatGPT + nos textures/couleurs
─── */

/* Overlay plein écran */
.intro-overlay{
  position:fixed;inset:0;z-index:1000;
  /* 🔧 FIX : empêche la carte de fuiter hors de l'overlay */
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:clamp(12px,2vh,20px);
  background-color:#F0E8D5;
  background-image:url('assets/bg-paper.jpg');
  /* 📱 dezoomé pour voir toute la texture du papier */
  /* 📱 dezoomé : 70% pour voir toute la texture bg-paper */
  /* 📱 100% = couvre tout l'écran sans répétition ni coupure */
  /* 🎨 85% = dezoomé, tout le fond visible sans coupure */
  background-size:85%;background-position:center;
  overflow:hidden;
}
.intro-overlay.fade-out{animation:fadeOut .8s ease-out forwards}
@keyframes fadeOut{to{opacity:0;pointer-events:none}}

/* 🎨 DA : scène perspective pour effet 3D carte */
.envelope-scene{
  position:relative;
  /* 🎨 DA : enveloppe ~3/4 écran */
  /* 🎨 DA : ~3/4 écran */
  width:min(720px,90vw);
  height:min(470px,66vw);
  perspective:1400px;
  display:flex;align-items:center;justify-content:center;
}

.envelope-wrapper{
  position:relative;
  width:100%;height:100%;
}

/* Conteneur principal — garde le ratio */
.envelope{
  width:100%;height:100%;
  position:relative;
  transform-style:preserve-3d;
}

/* ── Éléments partagés : front, back, card ── */
.envelope-front,
.envelope-back,
.envelope-card{
  position:absolute;
  inset:0;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  box-shadow:0 24px 60px rgba(44,42,38,.38);
}

/* FACE AVANT : texture envelope-paper.jpg
   Sceau centré au milieu (c'est là où se trouve le joint sur la photo) */
.envelope-front{
  /* 🎨 DA : ta belle photo gauffrée dorée */
  background-image:url('assets/envelope-paper.jpg');
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* FACE ARRIÈRE : même texture, z-index inférieur */
.envelope-back{
  background-image:url('assets/envelope-paper.jpg');
  z-index:1;
  filter:brightness(.88);
}

/* RABAT TRIANGLE sur la face arrière */
.envelope-flap{
  position:absolute;
  top:0;left:0;right:0;
  height:55%;
  background-image:inherit;
  background-size:cover;
  background-position:center top;
  clip-path:polygon(0 0,100% 0,50% 80%);
  transform-origin:top center;
  border-radius:12px 12px 0 0;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
  filter:brightness(.92);
}

/* CARTE INTÉRIEURE : même inset que l'enveloppe
   🎨 card-paper.jpg floral — sort vers le haut */
.envelope-card{
  background-image:url('assets/card-paper.jpg');
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  /* État initial : cachée derrière, légèrement en retrait */
  opacity:0;
  transform:translateY(12px) translateZ(-4px) scale(.97);
  transition:opacity .3s ease-out;
}

/* ── États d'animation (déclenchés par JS via body.intro-open) ── */

/* Flap s'ouvre vers l'arrière */
body.intro-open .envelope-flap{
  animation:flapOpen 1.0s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes flapOpen{
  0%{transform:rotateX(0deg)}
  100%{transform:perspective(900px) rotateX(-160deg)}
}

/* Enveloppe monte légèrement */
body.intro-open .envelope{
  animation:envelopeLift 1.2s ease-out forwards;
}
@keyframes envelopeLift{
  0%{transform:translateY(0) translateZ(0)}
  100%{transform:translateY(-12px) translateZ(30px)}
}

/* Carte sort et recouvre l'enveloppe */
body.intro-open .envelope-card{
  /* 🎨 1.8s = sortie lente et naturelle, sans rebond */
  animation:cardPop 1.8s cubic-bezier(.2,0,.3,1) forwards .4s;
}
@keyframes cardPop{
  0%{
    opacity:0;
    transform:translateY(10px) translateZ(-4px) scale(.97);
  }
  /* 🎨 montée directe sans rebond — naturel comme tirer une vraie carte */
  15%{
    opacity:1;
    transform:translateY(5px) translateZ(10px) scale(.98);
  }
  100%{
    opacity:1;
    /* -14% = carte bien lisible, enveloppe visible dessous */
    transform:translateY(-14%) translateZ(28px) scale(1.0);
  }
}

/* Textes de la carte — apparaissent en cascade */
.envelope-card-inner{
  display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:1.4rem 1.8rem;text-align:center;
  max-width:85%;
}
.envelope-card-kicker{
  font-family:var(--ff-body);font-size:1.65rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  /* 🎨 remonté au-dessus de la branche */
  margin-bottom:8px;
  position:relative;z-index:2;
  opacity:0;
}
.envelope-card-names{
  font-family:var(--ff-title);
  /* 🎨 prénoms bien lisibles sur la carte */
  font-size:clamp(2.2rem,6.5vw,3.6rem);
  font-weight:500;color:var(--text);
  opacity:0;
}
.envelope-card-date{
  font-family:var(--ff-body);font-size:1.65rem;color:var(--text-muted);
  margin-top:6px;
  opacity:0;
}
/* Textes s'affichent une fois la carte sortie */
body.intro-open .envelope-card-kicker{
  animation:textFade .5s ease-out forwards 1.1s;
}
body.intro-open .envelope-card-names{
  animation:textFade .5s ease-out forwards 1.3s;
}
body.intro-open .envelope-card-date{
  animation:textFade .5s ease-out forwards 1.55s;
}
@keyframes textFade{
  0%{opacity:0;transform:translateY(6px)}
  100%{opacity:1;transform:translateY(0)}
}

/* ─── SCEAU DE CIRE ───
   Dans envelope-front → centré automatiquement par flexbox
   🎨 DA : taille généreuse, glow or au hover */
.wax-seal{
  position:relative;
  /* 🎨 sceau agrandi + décalé vers le bas (rabat) */
  /* 🎨 DA : sceau agrandi, positionné sur le joint du rabat */
  /* 🎨 sceau bien visible sur le joint */
  width:clamp(155px,26vw,205px);
  height:clamp(155px,26vw,205px);
  margin-top:38%;
  border:none;background:none;padding:0;
  cursor:pointer;z-index:5;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .4s ease-out, transform .4s ease-out;
}
/* Sceau disparaît à l'ouverture */
body.intro-open .wax-seal{
  animation:sealFade .4s ease-out forwards .1s;
}
@keyframes sealFade{
  to{opacity:0;transform:scale(.75)}
}
.wax-seal-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
  filter:saturate(1.4) contrast(1.15)
         drop-shadow(0 4px 14px rgba(120,55,30,.55));
  transition:filter var(--tf),transform var(--tf);
}
.wax-seal:hover .wax-seal-img{
  filter:saturate(1.6) contrast(1.2)
         drop-shadow(0 6px 22px rgba(120,55,30,.75));
  transform:scale(1.06);
}
.wax-seal:active .wax-seal-img{transform:scale(.95)}

.wax-seal-initials{
  position:absolute;z-index:5;
  /* 🎨 initiales lisibles sur le sceau */
  font-family:var(--ff-title);font-size:1.3rem;font-style:italic;
  color:rgba(255,240,215,.98);letter-spacing:.06em;
  text-shadow:0 1px 4px rgba(60,30,10,.6);
  user-select:none;margin-top:-4px;
}
.wax-seal-glow{
  position:absolute;inset:-16px;border-radius:var(--r-full);
  background:radial-gradient(circle,rgba(200,169,122,.55) 0%,transparent 70%);
  opacity:0;pointer-events:none;transition:opacity .4s ease-out;
}
.wax-seal.glowing .wax-seal-glow{opacity:1}

/* Hint + skip */
.intro-hint{
  font-family:var(--ff-body);font-size:.68rem;color:rgba(44,42,38,.55);
  letter-spacing:.14em;text-align:center;
  animation:hintPulse 2.6s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.4}50%{opacity:1}}

.intro-skip{
  position:absolute;bottom:clamp(16px,4vh,32px);left:50%;transform:translateX(-50%);
  background:transparent;border:1px solid rgba(107,127,107,.35);border-radius:20px;
  color:rgba(44,42,38,.55);font-family:var(--ff-body);
  font-size:.68rem;font-weight:400;letter-spacing:.1em;
  padding:7px 20px;cursor:pointer;white-space:nowrap;
  transition:color var(--tf),border-color var(--tf);
}
.intro-skip:hover{color:var(--text);border-color:var(--accent-light)}
/* ─── NAVIGATION ─── */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(250,247,242,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  padding:.75rem 0;transition:box-shadow var(--tb);
}
.site-nav.scrolled{box-shadow:var(--sh-soft)}
.site-nav__brand{font-family:var(--ff-title);font-size:1.08rem;font-style:italic;color:var(--text)!important}
.site-nav .nav-link{
  font-family:var(--ff-body);font-size:.75rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted)!important;padding:6px 12px!important;
  transition:color var(--tf);
}
.site-nav .nav-link:hover{color:var(--accent)!important}
.site-nav .nav-item--cta .nav-link{
  background:var(--accent);color:#fff!important;
  border-radius:20px;padding:6px 18px!important;margin-left:var(--sp-sm);
}
.site-nav .nav-item--cta .nav-link:hover{background:var(--accent2)}
.site-nav__toggler{border:1px solid var(--border);border-radius:6px;padding:4px 8px}
.site-nav__toggler:focus{box-shadow:none}

/* ─── HERO ─── */
.hero-section{
  position:relative;
  min-height:100svh;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center center;
  background-repeat:no-repeat;z-index:0;
}
.hero-bg.ken-burns{animation:kenBurns 22s ease-in-out infinite alternate}
@keyframes kenBurns{
  0%  {transform:scale(1)    translate(0,0)}
  100%{transform:scale(1.08) translate(-1.5%,-1%)}
}

/* FIX OVERLAY :
   mode cover → gradient sombre léger pour lisibilité texte
   mode floral → overlay crépusculaire vert-nuit subtil pour lucioles */
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    180deg,
    rgba(44,42,38,.10) 0%,
    rgba(44,42,38,.25) 55%,
    rgba(44,42,38,.48) 100%
  );
}
.hero-section.mode-floral .hero-overlay{
  /* 🎨 DA : voile vert-nuit léger → lucioles visibles */
  background:linear-gradient(
    180deg,
    rgba(30,50,35,.08) 0%,
    rgba(30,50,35,.18) 60%,
    rgba(30,50,35,.28) 100%
  );
}

/* Coin botanique haut-droite hero */
/* 🎨 DA : grande taille + animation balancement doux */
.hero-botanical{
  position:absolute;top:0;right:0;
  width:clamp(220px,38vw,480px);height:auto;
  z-index:2;pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.88;
  animation:botanicalSway 8s ease-in-out infinite alternate;
  transform-origin:top right;
}

/* 🔧 FIX MIROIR : rotation via scaleX(-1) scaleY(-1) au lieu de rotate(180deg)
   transform-origin sur le coin bas-gauche pour comportement correct */
.hero-botanical--mirror{
  position:absolute;bottom:0;left:0;
  width:clamp(180px,32vw,400px);height:auto;
  z-index:2;pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.72;
  /* FIX : miroir exact = flip horizontal ET vertical */
  transform:scaleX(-1) scaleY(-1);
  transform-origin:center center;
  animation:botanicalSwayMirror 9s ease-in-out infinite alternate;
}

/* 🎨 DA : balancement subtil 2°, très lent */
@keyframes botanicalSway{
  0%  {transform:rotate(0deg)   scale(1)}
  100%{transform:rotate(2deg)   scale(1.01)}
}
@keyframes botanicalSwayMirror{
  0%  {transform:scaleX(-1) scaleY(-1) rotate(0deg)   scale(1)}
  100%{transform:scaleX(-1) scaleY(-1) rotate(2deg)   scale(1.01)}
}

/* Coins botaniques sur sections intérieures */
/* 🎨 DA : présence forte cohérente avec le hero */
.section-botanical{
  position:absolute;pointer-events:none;z-index:0;
  width:clamp(160px,22vw,260px);height:auto;
  mix-blend-mode:multiply;opacity:.5;
  animation:botanicalSway 10s ease-in-out infinite alternate;
}
.section-botanical--tr{
  top:0;right:0;
  transform-origin:top right;
}
.section-botanical--bl{
  bottom:0;left:0;
  /* 🔧 FIX miroir identique au hero */
  transform:scaleX(-1) scaleY(-1);
  transform-origin:center center;
  animation:botanicalSwayMirror 11s ease-in-out infinite alternate;
}
/* Wrapper → position:relative nécessaire */
.section-has-botanical{position:relative;overflow:hidden;}

.hero-content{
  position:relative;z-index:3;
  padding:var(--sp-xxl) var(--sp-md);
  max-width:820px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-sm);
}
/* Textes hero mode cover (fond sombre) */
.hero-kicker{
  font-family:var(--ff-body);font-size:clamp(.62rem,2vw,.75rem);
  font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-light);text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.hero-names{
  font-family:var(--ff-title);font-size:clamp(2.8rem,9vw,6rem);
  font-weight:500;font-style:italic;color:#FAF7F2;
  line-height:1.08;text-shadow:0 2px 32px rgba(0,0,0,.32);
}
.hero-intro-text{
  font-family:var(--ff-body);font-size:clamp(.8rem,2.5vw,.94rem);
  font-weight:300;color:rgba(250,247,242,.9);
  max-width:520px;line-height:1.85;text-shadow:0 1px 6px rgba(0,0,0,.25);
}
.hero-date-block{margin-top:var(--sp-xs);display:flex;flex-direction:column;align-items:center;gap:5px}
.hero-date{
  font-family:var(--ff-title);font-size:clamp(1.1rem,3.8vw,1.7rem);
  font-weight:400;color:var(--gold-light);letter-spacing:.06em;
  text-shadow:0 1px 8px rgba(0,0,0,.22);
}
.hero-location{
  font-family:var(--ff-body);font-size:clamp(.65rem,2vw,.82rem);
  font-weight:400;color:rgba(250,247,242,.72);
  letter-spacing:.14em;text-transform:uppercase;
}
/* Mode floral → textes sombres (fond clair) */
.hero-section.mode-floral .hero-kicker    {color:var(--gold);text-shadow:none}
.hero-section.mode-floral .hero-names     {color:var(--text);text-shadow:none}
.hero-section.mode-floral .hero-intro-text{color:var(--text-muted);text-shadow:none}
.hero-section.mode-floral .hero-date      {color:var(--accent2);text-shadow:none}
.hero-section.mode-floral .hero-location  {color:var(--text-muted)}

/* Séparateurs décoratifs FIX :
   PNG fond gris → mix-blend-mode:multiply
   🎨 DA : agrandi + attributs HTML width ignorés via !important */
.decorative-sep{display:flex;justify-content:center;margin:var(--sp-sm) 0}
.decorative-sep img{
  width:clamp(280px,45vw,480px) !important;
  max-width:480px;
  height:auto !important;
  mix-blend-mode:multiply;
  opacity:.9;
}

/* ─── TIMELINE ─── */
.timeline{position:relative;padding:var(--sp-md) 0;max-width:700px;margin:var(--sp-lg) auto 0}
.timeline::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:1.5px;
  background:linear-gradient(180deg,transparent 0%,var(--gold-light) 12%,var(--accent-light) 88%,transparent 100%);
  transform:translateX(-50%);
}
.timeline-item{position:relative;display:flex;gap:var(--sp-md);padding:var(--sp-md) 0}
@media(min-width:640px){
  .timeline-item:nth-child(odd) {flex-direction:row;text-align:right;padding-right:calc(50% + var(--sp-xl))}
  .timeline-item:nth-child(even){flex-direction:row-reverse;text-align:left;padding-left:calc(50% + var(--sp-xl))}
}
.timeline-dot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  /* 🎨 DA : dot agrandi, bordure or */
  width:54px;height:54px;background:var(--bg);
  border:2px solid var(--gold-light);border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;z-index:1;
  box-shadow:0 2px 12px rgba(200,169,122,.2);
}
/* 🔧 FIX : timeline-leaf agrandi 36→48px, blend pour fond blanc */
.timeline-dot img{
  width:36px;height:36px;
  mix-blend-mode:multiply;
  filter:saturate(1.5) contrast(1.1);
}
.timeline-content{
  background:var(--bg-card);
  border:1px solid var(--border);
  /* 🎨 DA : bordure gauche or pour accent premium */
  border-left:3px solid var(--gold-light);
  border-radius:var(--r-md);
  padding:var(--sp-sm) var(--sp-md);box-shadow:var(--sh-soft);flex:1;
  transition:transform var(--tb),box-shadow var(--tb);
}
.timeline-item:nth-child(even) .timeline-content{
  border-left:none;
  border-right:3px solid var(--gold-light);
}
.timeline-content:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.timeline-time{
  font-family:var(--ff-title);font-size:.8rem;font-weight:400;
  font-style:italic;letter-spacing:.05em;color:var(--gold);
  display:block;margin-bottom:4px;
}
.timeline-title{font-family:var(--ff-title);font-size:1.1rem;font-weight:500;color:var(--text);margin-bottom:4px}
.timeline-desc{font-family:var(--ff-body);font-size:.82rem;color:var(--text-muted);line-height:1.6;margin:0}
/* ─── ANIMATIONS SCROLL ─── */
.animate-on-scroll{
  opacity:0;transform:scale(.97) translateY(14px);
  transition:opacity var(--ts),transform var(--ts);
}
.animate-on-scroll.visible{opacity:1;transform:scale(1) translateY(0)}
.animate-on-scroll[data-delay="1"]{transition-delay:.1s}
.animate-on-scroll[data-delay="2"]{transition-delay:.2s}
.animate-on-scroll[data-delay="3"]{transition-delay:.3s}
.animate-on-scroll[data-delay="4"]{transition-delay:.4s}
.animate-on-scroll[data-delay="5"]{transition-delay:.5s}

/* ─── SECTIONS ─── */
.section-countdown,.section-program,.section-places,.section-rsvp,
.section-dresscode,.section-accommodations,.section-gallery,.section-share{
  padding:var(--sp-xxl) 0;width:100%;
}
.section-countdown,.section-places,.section-dresscode,.section-share{
  background-color:rgba(243,237,227,.72);
}
.section-program,.section-rsvp,.section-accommodations,.section-gallery{
  background-color:rgba(250,247,242,.88);
}
.section-title{
  font-family:var(--ff-title);font-size:clamp(1.8rem,5vw,2.9rem);
  font-weight:400;font-style:italic;color:var(--text);
  text-align:center;margin-bottom:var(--sp-sm);
}
.section-kicker{
  font-family:var(--ff-body);font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  text-align:center;margin-bottom:var(--sp-md);
}
.container{max-width:980px;padding-left:var(--sp-md);padding-right:var(--sp-md);margin:0 auto}

/* ─── COUNTDOWN ─── */
/* 🎨 DA : kicker serif italic au-dessus + cadres fins autour des chiffres */
.countdown-grid{
  display:flex;justify-content:center;
  gap:clamp(var(--sp-sm),4vw,var(--sp-xl));
  flex-wrap:wrap;margin-top:var(--sp-lg);
}
.countdown-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  /* 🎨 DA : cadre élégant autour de chaque unité */
  background:rgba(255,253,248,0.82);
  border:1.5px solid var(--gold-light);
  border-radius:var(--r-md);
  padding:clamp(var(--sp-sm),2.5vw,var(--sp-md)) clamp(var(--sp-md),3vw,var(--sp-lg));
  box-shadow:0 4px 20px rgba(200,169,122,.12), inset 0 1px 0 rgba(255,255,255,.8);
  min-width:clamp(72px,14vw,110px);
  transition:transform var(--tb), box-shadow var(--tb);
}
.countdown-item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(200,169,122,.2);
}
.countdown-number{
  font-family:var(--ff-title);font-size:clamp(2.8rem,8vw,5rem);
  font-weight:400;color:var(--accent2);line-height:1;
}
.countdown-label{
  font-family:var(--ff-body);font-size:.6rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}

/* ─── TIMELINE ─── */
.timeline{position:relative;padding:var(--sp-md) 0;max-width:700px;margin:var(--sp-lg) auto 0}
.timeline::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:1.5px;
  background:linear-gradient(180deg,transparent 0%,var(--accent-light) 12%,var(--accent-light) 88%,transparent 100%);
  transform:translateX(-50%);
}
.timeline-item{position:relative;display:flex;gap:var(--sp-md);padding:var(--sp-md) 0}
@media(min-width:640px){
  .timeline-item:nth-child(odd) {flex-direction:row;text-align:right;padding-right:calc(50% + var(--sp-xl))}
  .timeline-item:nth-child(even){flex-direction:row-reverse;text-align:left;padding-left:calc(50% + var(--sp-xl))}
}
.timeline-dot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;background:var(--bg);
  border:2px solid var(--accent-light);border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;z-index:1;
}
/* FIX timeline-leaf.png fond blanc → blend */
.timeline-dot img{
  width:24px;height:24px;
  mix-blend-mode:multiply;
  filter:saturate(1.5) contrast(1.1);
}
.timeline-content{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-sm) var(--sp-md);box-shadow:var(--sh-soft);flex:1;
  transition:transform var(--tb),box-shadow var(--tb);
}
.timeline-content:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.timeline-time{font-family:var(--ff-body);font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:4px}
.timeline-title{font-family:var(--ff-title);font-size:1.05rem;font-weight:500;color:var(--text);margin-bottom:2px}
.timeline-desc{font-family:var(--ff-body);font-size:.82rem;color:var(--text-muted);line-height:1.6;margin:0}
@media(max-width:639px){
  .timeline::before{left:20px}
  .timeline-item{padding-left:58px;text-align:left}
  .timeline-dot{left:0;top:var(--sp-md);transform:translateY(0)}
}

/* ─── LIEUX ─── */
.places-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-md);margin-top:var(--sp-lg)}
.place-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-md) var(--sp-lg);box-shadow:var(--sh-card);
  display:flex;flex-direction:column;gap:var(--sp-sm);
  transition:transform var(--tb),box-shadow var(--tb);
}
.place-card:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.place-label{font-family:var(--ff-body);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.place-address{font-family:var(--ff-body);font-size:.88rem;color:var(--text);line-height:1.65}
.btn-maps{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ff-body);font-size:.74rem;font-weight:500;letter-spacing:.07em;
  color:var(--accent);border:1.5px solid var(--border);border-radius:20px;padding:8px 16px;
  align-self:flex-start;
  transition:background var(--tf),color var(--tf),border-color var(--tf),transform var(--tf);
}
.btn-maps:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)}

/* ─── RSVP ─── */
.section-rsvp .container{max-width:720px}
.rsvp-deadline-msg{
  background:linear-gradient(135deg,var(--gold-light),rgba(232,212,176,.5));
  border:1px solid var(--gold);border-radius:var(--r-md);
  padding:var(--sp-sm) var(--sp-md);text-align:center;margin-bottom:var(--sp-lg);
}
.rsvp-deadline-msg p{font-family:var(--ff-body);font-size:.85rem;color:var(--text);margin:0}
.rsvp-form-wrapper{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(var(--sp-lg),5vw,var(--sp-xl));box-shadow:var(--sh-card);
}
.rsvp-field{margin-bottom:var(--sp-md)}
.rsvp-label{display:block;font-family:var(--ff-body);font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-xs)}
.required{color:var(--warm);margin-left:2px}
.rsvp-input,.rsvp-select,.rsvp-textarea{
  width:100%;font-family:var(--ff-body);font-size:.95rem;color:var(--text);
  background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:13px 16px;outline:none;appearance:none;-webkit-appearance:none;
  transition:border-color var(--tf),box-shadow var(--tf);
}
.rsvp-input:focus,.rsvp-select:focus,.rsvp-textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(107,127,107,.12);
}
.rsvp-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A7068' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:40px;cursor:pointer;
}
.rsvp-textarea{resize:vertical;min-height:80px}
.rsvp-attendance-fieldset{border:none;padding:0}
.rsvp-attendance-fieldset legend{
  font-family:var(--ff-body);font-size:.76rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);
  margin-bottom:var(--sp-sm);display:block;width:100%;
}
.rsvp-radio-group{display:flex;gap:var(--sp-sm);flex-wrap:wrap}
.rsvp-radio-label{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--ff-body);font-size:.92rem;color:var(--text);
  padding:11px 20px;border:1.5px solid var(--border);border-radius:30px;
  transition:border-color var(--tf),background var(--tf);user-select:none;
}
.rsvp-radio-label:hover{border-color:var(--accent-light);background:rgba(107,127,107,.05)}
.rsvp-radio-label input[type="radio"]{display:none}
.rsvp-radio-custom{display:none}
.rsvp-radio-label.selected{border-color:var(--accent);background:rgba(107,127,107,.08);color:var(--accent2);font-weight:500}
.rsvp-note{font-family:var(--ff-body);font-size:.74rem;color:var(--text-muted);margin-top:6px;font-style:italic}
.rsvp-error{
  background:rgba(196,149,122,.12);border:1px solid rgba(196,149,122,.4);
  border-radius:var(--r-sm);padding:10px 14px;
  font-family:var(--ff-body);font-size:.82rem;color:#7A3B1E;margin-bottom:var(--sp-sm);
}
.btn-rsvp{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  font-family:var(--ff-body);font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--accent);border:none;border-radius:40px;padding:17px 32px;
  cursor:pointer;margin-top:var(--sp-sm);text-decoration:none;
  transition:background var(--tf),transform var(--tf),box-shadow var(--tf);
}
.btn-rsvp:hover{background:var(--accent2);color:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(61,82,67,.3)}
.btn-rsvp:active{transform:translateY(0)}
.btn-rsvp:disabled,.btn-rsvp[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.rsvp-rgpd{font-family:var(--ff-body);font-size:.7rem;color:var(--text-muted);text-align:center;margin-top:var(--sp-sm);line-height:1.75}
.rsvp-success{text-align:center;padding:var(--sp-xl) var(--sp-md);display:flex;flex-direction:column;align-items:center;gap:var(--sp-sm)}
.rsvp-success-msg{font-family:var(--ff-title);font-size:clamp(1.2rem,4vw,1.65rem);font-style:italic;color:var(--accent2)}
.rsvp-success-note{font-family:var(--ff-body);font-size:.83rem;color:var(--text-muted)}
.rsvp-success-anim{width:60px;height:60px;position:relative;margin-bottom:var(--sp-sm)}
.rsvp-stem{position:absolute;bottom:0;left:50%;width:1.5px;height:0;background:var(--accent);opacity:.7;transform:translateX(-50%);animation:stemGrow .8s ease-out forwards}
@keyframes stemGrow{to{height:50px}}
.rsvp-leaf{position:absolute;width:16px;height:10px;background:var(--accent);opacity:0;border-radius:50% 50% 50% 0;transform-origin:bottom left}
.rsvp-leaf--left {left:calc(50% - 16px);bottom:30px;transform:rotate(-30deg) scaleX(0);animation:leafL .4s ease-out .6s forwards}
.rsvp-leaf--right{left:50%;bottom:18px;transform:rotate(150deg) scaleX(0);animation:leafR .4s ease-out .8s forwards}
@keyframes leafL{to{opacity:.7;transform:rotate(-30deg) scaleX(1)}}
@keyframes leafR{to{opacity:.7;transform:rotate(150deg) scaleX(1)}}

/* ─── DRESS CODE ─── */
.dresscode-desc{font-family:var(--ff-body);font-size:.9rem;color:var(--text-muted);text-align:center;max-width:500px;margin:var(--sp-sm) auto}
.dresscode-palette{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(14px,3vw,24px);margin:var(--sp-lg) 0 var(--sp-sm)}
.palette-swatch{
  position:relative;width:58px;height:58px;border-radius:var(--r-full);
  border:2.5px solid rgba(255,255,255,.72);
  box-shadow:var(--sh-soft),inset 0 1px 0 rgba(255,255,255,.4);
  cursor:default;flex-shrink:0;
  transition:transform var(--tf),box-shadow var(--tf);
}
@media(pointer:fine){
  .palette-swatch:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
  .palette-swatch::after{
    content:attr(data-name);position:absolute;bottom:calc(100% + 8px);left:50%;
    transform:translateX(-50%);background:var(--text);color:var(--bg);
    font-family:var(--ff-body);font-size:.63rem;white-space:nowrap;
    padding:4px 10px;border-radius:12px;opacity:0;pointer-events:none;
    transition:opacity var(--tf);z-index:10;
  }
  .palette-swatch:hover::after{opacity:1}
}
.dresscode-texte{font-family:var(--ff-body);font-size:.85rem;color:var(--text-muted);text-align:center;font-style:italic;max-width:440px;margin:var(--sp-sm) auto 0}

/* ─── HÉBERGEMENTS ─── */
.accommodations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-md);margin-top:var(--sp-lg)}
.accommodation-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-md) var(--sp-lg);box-shadow:var(--sh-card);transition:transform var(--tb),box-shadow var(--tb)}
.accommodation-card:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.accommodation-name{font-family:var(--ff-title);font-size:1.05rem;font-weight:500;color:var(--text);margin-bottom:6px}
.accommodation-address{font-family:var(--ff-body);font-size:.83rem;color:var(--text-muted);margin-bottom:8px;line-height:1.6}
.accommodation-notes{font-family:var(--ff-body);font-size:.79rem;color:var(--text-muted);font-style:italic;margin-bottom:var(--sp-sm)}
.btn-accommodation{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-body);font-size:.74rem;font-weight:500;color:var(--accent);border:1.5px solid var(--border);border-radius:20px;padding:7px 14px;transition:background var(--tf),color var(--tf),border-color var(--tf)}
.btn-accommodation:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ─── GALERIE ─── */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-sm);margin-top:var(--sp-lg)}
@media(max-width:600px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
.gallery-item{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1/1;box-shadow:var(--sh-soft);transition:transform var(--tb),box-shadow var(--tb)}
.gallery-item:hover{transform:scale(1.02);box-shadow:var(--sh-hover)}
.gallery-item img{width:100%;height:100%;object-fit:cover}

/* ─── SECTIONS DYNAMIQUES ─── */
.dynamic-section{padding:var(--sp-xl) 0;background-color:rgba(243,237,227,.5)}
.dynamic-section .container{max-width:700px}
.dynamic-section-title{font-family:var(--ff-title);font-size:clamp(1.5rem,4vw,2.2rem);font-weight:400;font-style:italic;color:var(--text);text-align:center;margin-bottom:var(--sp-md)}
.dynamic-section-content{font-family:var(--ff-body);font-size:.9rem;color:var(--text);line-height:1.9;text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-md) var(--sp-lg);box-shadow:var(--sh-soft)}

/* ─── PARTAGE ─── */
.share-buttons{display:flex;justify-content:center;gap:var(--sp-sm);flex-wrap:wrap;margin-top:var(--sp-md)}
.btn-share{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:var(--r-full);
  background:var(--bg-card);border:1.5px solid var(--border);box-shadow:var(--sh-soft);
  flex-shrink:0;text-decoration:none;
  transition:background var(--tf),transform var(--tf),box-shadow var(--tf),border-color var(--tf);
}
.btn-share svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--tf)}
.btn-share:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.btn-share:hover svg{stroke:#fff}
.btn-share--whatsapp:hover{background:#25D366;border-color:#25D366}
.btn-share--email:hover   {background:var(--accent2);border-color:var(--accent2)}
.btn-share--sms:hover     {background:var(--gold);border-color:var(--gold)}

/* ─── MUSIQUE ─── */
.music-player{
  position:fixed;top:76px;right:var(--sp-md);z-index:200;
  opacity:0;animation:musicIn .6s ease-out 3.5s forwards;
}
@keyframes musicIn{to{opacity:1}}
.music-btn{
  width:50px;height:50px;border-radius:var(--r-full);
  background:rgba(250,247,242,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1.5px solid var(--border);box-shadow:var(--sh-card);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--tf),transform var(--tf),box-shadow var(--tf);
}
.music-btn:hover{background:#fff;transform:scale(1.08);box-shadow:var(--sh-hover)}
.music-btn svg{width:20px;height:20px;stroke:var(--accent2);fill:none;stroke-width:2}

/* ─── FOOTER ─── */
.site-footer{background:var(--bg-alt);border-top:1px solid var(--border);padding:var(--sp-xl) 0;text-align:center}
.footer-names{font-family:var(--ff-title);font-size:1.4rem;font-style:italic;font-weight:400;color:var(--text);margin-bottom:var(--sp-md)}
.footer-privacy{font-family:var(--ff-body);font-size:.7rem;color:var(--text-muted);max-width:640px;margin:0 auto;line-height:1.85}

/* 🎨 DA : kicker countdown serif italic — plus poétique que uppercase body */
.section-countdown .section-kicker{
  font-family:var(--ff-title);
  font-size:clamp(1rem,3vw,1.3rem);
  font-weight:400;font-style:italic;
  letter-spacing:.04em;text-transform:none;
  color:var(--text-muted);margin-bottom:var(--sp-sm);
}

/* ─── RESPONSIVE ─── */
@media(max-width:480px){
  :root{--sp-xxl:4rem;--sp-xl:2.8rem}
  /* 📱 Mobile : scène intro pleine largeur */
  .envelope-scene{width:94vw;height:63vw}
  /* 📱 Mobile : sceau rond adapté */
  .wax-seal{
    width:clamp(70px,14vw,100px);
    height:clamp(70px,14vw,100px);
  }
  .hero-botanical{width:clamp(160px,46vw,220px)}
  .hero-botanical--mirror{width:clamp(130px,38vw,190px)}
  .section-botanical{width:clamp(110px,18vw,160px)}
  /* 📱 Mobile : countdown 2x2 grid */
  .countdown-grid{
    gap:var(--sp-sm);max-width:320px;
    margin-left:auto;margin-right:auto;
    display:grid;grid-template-columns:1fr 1fr;
  }
  .rsvp-radio-group{flex-direction:column}
  .rsvp-radio-label{width:100%}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-xs)}
  .timeline-content{padding:var(--sp-sm)}
  .countdown-number{font-size:2.2rem}
  .decorative-sep img{width:clamp(200px,70vw,340px)!important}
}
@media(max-width:360px){
  .countdown-number{font-size:1.9rem}
}