:root{
  --green:#0E4A3A; --green-d:#0E2F25; --gold:#B48F4A; --gold-d:#8C6A2A;
  --cream:#FBF8F1; --ink:#14201B; --sand:#F3E3BE;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Jost',Futura,sans-serif}
a{color:var(--green)}a:hover{color:var(--gold-d)}
p{margin:0}
.page{position:relative;overflow:hidden}

.eyebrow{font-size:12px;font-weight:600;letter-spacing:.44em;text-transform:uppercase;color:var(--gold-d);padding-left:.44em;text-align:center;margin-bottom:8px}
.eyebrow.left{text-align:left;padding-left:0;margin:0}
.eyebrow-lg{font-weight:500;letter-spacing:.5em;padding-left:.5em;margin:0}

/* ---------- hero ---------- */
.stripes,.hero{--s:repeating-linear-gradient(90deg,#0E4A3A 0 46px,#FBF8F1 46px 92px)}
.hero{position:relative;background:var(--s);padding:clamp(40px,7vw,96px) 16px;animation:stripeSlide 40s linear infinite}
@keyframes stripeSlide{from{background-position:0 0}to{background-position:92px 0}}
.card{max-width:620px;margin:0 auto;background:var(--cream);padding:12px;box-shadow:0 40px 80px -40px rgba(10,40,30,.6)}
.card-in{border:1px solid var(--green);padding:5px}
.card-in2{border:1px solid var(--gold);padding:clamp(36px,7vw,64px) clamp(18px,5vw,48px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
h1{margin:0;font-family:'Gloock',serif;font-weight:400;font-size:clamp(54px,10vw,104px);line-height:.98;color:var(--green);text-wrap:balance}
.amp{font-family:'Playfair Display',serif;font-style:italic;color:var(--gold);display:inline-block;animation:ampPulse 5s ease-in-out infinite}
@keyframes ampPulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(-4deg)}}
.ornament{display:flex;align-items:center;gap:10px;justify-content:center}
.ornament i{width:48px;height:1px;background:var(--gold);display:block;transform-origin:center;animation:orn 1.6s var(--ease) .5s both}
.ornament b{width:5px;height:5px;background:var(--gold);transform:rotate(45deg);display:block;animation:ornDot 1s var(--ease) 1s both}
@keyframes orn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ornDot{from{transform:rotate(45deg) scale(0)}to{transform:rotate(45deg) scale(1)}}
.tagline{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(19px,2.4vw,24px);line-height:1.35;text-wrap:balance}
.dates{margin-top:4px;font-size:13px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;padding-left:.32em}
.gold-bar{height:6px;background:var(--gold)}

/* ---------- film ---------- */
.film{max-width:980px;margin:0 auto;padding:clamp(56px,8vw,96px) 18px 0;display:flex;flex-direction:column;align-items:center;gap:22px}
.film .eyebrow{margin:0}
.frame{position:relative;width:100%;background:var(--green);padding:clamp(10px,1.6vw,16px);box-shadow:0 40px 70px -40px rgba(10,40,30,.55)}
.frame-in{border:1px solid var(--gold);padding:clamp(6px,1vw,10px);position:relative}
video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#DCE5DF}
.film-ph{position:absolute;inset:clamp(6px,1vw,10px);background:#E7EDE8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.film-ph[hidden]{display:none}
.film-ph p{font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--green)}
.film-ph svg{animation:ampPulse 3s ease-in-out infinite}
.play-big{position:absolute;inset:clamp(6px,1vw,10px);z-index:2;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--sand);background:radial-gradient(ellipse at center,rgba(14,74,58,.55),rgba(14,47,37,.82)),repeating-linear-gradient(90deg,#0E4A3A 0 46px,#14604C 46px 92px);transition:opacity .5s ease,visibility .5s}
.play-big[hidden]{display:none}
.play-big.off{opacity:0;visibility:hidden;pointer-events:none}
.play-ring{position:relative;width:clamp(84px,14vw,116px);aspect-ratio:1;border-radius:50%;background:var(--gold);color:var(--green-d);display:grid;place-items:center;padding-left:6px;box-shadow:0 18px 40px -12px rgba(0,0,0,.6);transition:transform .5s var(--ease),background .3s}
.play-ring svg{width:42%;height:auto}
.play-ring::before,.play-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold);animation:ripple 2.4s ease-out infinite}
.play-ring::after{animation-delay:1.2s}
@keyframes ripple{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
.play-big:hover .play-ring,.play-big:focus-visible .play-ring{transform:scale(1.08);background:#C9A45C}
.play-big:focus-visible{outline:2px solid var(--sand);outline-offset:-6px}
.play-t1{margin-top:10px;font-family:'Gloock',serif;font-size:clamp(24px,4vw,36px);line-height:1.1}
.play-t2{font:italic 400 clamp(14px,2vw,17px) 'Playfair Display',serif;opacity:.9}
.note{font-family:'Playfair Display',serif;font-style:italic;font-size:17px}

/* ---------- séjour ---------- */
.stay{max-width:980px;margin:0 auto;padding:clamp(72px,10vw,120px) 18px 0}
.stay-title{text-align:center;margin-bottom:6px;font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(28px,4vw,38px);color:var(--green)}
.stay-sub{text-align:center;margin-bottom:clamp(28px,4vw,40px);font-size:13px;letter-spacing:.16em}
.stay-box{border-top:2px solid var(--green);border-bottom:2px solid var(--green);padding:clamp(36px,5vw,56px) clamp(8px,2vw,24px)}
.gH-tl{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.gH-item{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.gH-txt{display:flex;flex-direction:column;align-items:center;gap:6px}
.gH-path{display:block;position:absolute;left:12.5%;right:12.5%;top:96px;width:75%;height:64px;overflow:visible}
.gH-path path{stroke-dashoffset:0}
.gH-vline{display:none;position:absolute;left:61px;top:60px;bottom:60px;border-left:2px dotted var(--gold)}
.gH-ico{flex:none;width:min(200px,100%);border:1px solid var(--green);padding:5px;border-radius:999px 999px 6px 6px;background:var(--cream);transition:transform .5s var(--ease)}
.arch-in{border:1px solid var(--gold);border-radius:999px 999px 3px 3px;overflow:hidden}
.ico-svg{display:block;width:100%;height:auto}
.gH-item:hover .gH-ico{transform:translateY(-4px) rotate(-4deg)}
.day{font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-d)}
.what{font-family:'Gloock',serif;font-size:24px;line-height:1.15;color:var(--green)}
.sub{font-family:'Playfair Display',serif;font-style:italic;font-size:16px}
@media (max-width:720px){
  .gH-tl{grid-template-columns:minmax(0,1fr);gap:30px}
  .gH-item{flex-direction:row;text-align:left;gap:20px}
  .gH-txt{align-items:flex-start}
  .gH-path{display:none}
  .gH-vline{display:block}
  .gH-ico{width:124px}
}

/* ---------- lieu ---------- */
.venue{max-width:980px;margin:0 auto;padding:clamp(72px,10vw,120px) 18px 0}
.venue-row{display:flex;flex-wrap:wrap;align-items:center;gap:40px clamp(36px,6vw,72px)}
.venue-arch{flex:0 1 340px;min-width:240px;width:auto;margin:0 auto;padding:6px;overflow:visible}
.venue-arch img{display:block;width:100%;height:auto;aspect-ratio:6/7;object-fit:cover;transition:transform 1.2s var(--ease)}
.venue-arch .arch-in{overflow:hidden}
.venue-arch:hover img{transform:scale(1.06)}
.venue-text{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:14px}
.venue h2{margin:0;font-family:'Gloock',serif;font-weight:400;font-size:clamp(34px,4.6vw,50px);line-height:1.05;color:var(--green)}
.venue-lead{margin-bottom:6px;font-family:'Playfair Display',serif;font-style:italic;font-size:20px;line-height:1.45}
.venue-list{margin:0;border-top:1px solid rgba(14,74,58,.18)}
.venue-list div{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(14,74,58,.18)}
.venue-list dt{flex:none;width:112px;font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-d)}
.venue-list dd{margin:0;font-size:16px;line-height:1.5}
.gH-btn.ghost{margin-top:10px;min-height:50px;padding:0 28px;border:1px solid var(--green);background:transparent;color:var(--green);font-size:12px}
.gH-btn.ghost:hover,.gH-btn.ghost:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--green-d)}
@media (max-width:560px){.venue-list dt{width:84px;letter-spacing:.18em}.venue-arch{flex-basis:100%;max-width:320px}}

/* ---------- RSVP ---------- */
.rsvp{max-width:980px;margin:0 auto;padding:clamp(80px,11vw,130px) 18px 0}
.rsvp-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:48px clamp(40px,8vw,100px)}
.rsvp-text{flex:1 1 340px;max-width:480px;display:flex;flex-direction:column;gap:18px}
.rsvp h2{margin:0;font-family:'Gloock',serif;font-weight:400;font-size:clamp(38px,5vw,56px);line-height:1.05;color:var(--green)}
.rsvp-lead{font-family:'Playfair Display',serif;font-style:italic;font-size:19px;line-height:1.5}

.gH-btn{position:relative;overflow:hidden;align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 36px;border:0;cursor:pointer;background:var(--green);color:var(--sand);font:500 13px 'Jost',sans-serif;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;transition:background-color .35s ease,color .35s ease,transform .35s var(--ease),box-shadow .35s ease}
.gH-btn:hover,.gH-btn:focus-visible{background:var(--gold);color:var(--green-d);transform:translateY(-2px);box-shadow:0 14px 24px -14px rgba(10,40,30,.6)}
.gH-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg)}
.gH-btn:hover::after{animation:shine .9s ease}
@keyframes shine{to{left:130%}}

.key-wrap{flex:none;display:flex;flex-direction:column;align-items:center}
.key-cord{width:2px;height:34px;background:var(--gold)}
.key-ring{width:26px;height:26px;border:2px solid var(--gold);border-radius:50%;margin-top:-2px}
.key-tag{width:150px;height:270px;margin-top:-8px;background:var(--green);border-radius:75px 75px 30px 30px;box-shadow:inset 0 0 0 6px var(--green),inset 0 0 0 7px var(--gold),0 24px 40px -20px rgba(10,40,30,.6);display:flex;flex-direction:column;align-items:center;padding-top:22px;color:#E9D19B;text-align:center}
.key-hole{width:20px;height:20px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 2px var(--gold)}
.k1{margin-top:26px;font-size:10px;letter-spacing:.4em;text-transform:uppercase}
.k2{margin-top:4px;font-family:'Gloock',serif;font-size:76px;line-height:1}
.k3{margin-top:12px;font-family:'Playfair Display',serif;font-style:italic;font-size:15px}
.k4{margin-top:6px;font-size:9px;letter-spacing:.3em;text-transform:uppercase}
.gH-swing{transform-origin:50% 0;animation:gHSwing 6s ease-in-out infinite}
@keyframes gHSwing{0%,100%{transform:rotate(8deg)}50%{transform:rotate(4deg)}}
.gH-swing:hover{animation-duration:2s}

/* ---------- footer ---------- */
.foot{padding:clamp(80px,11vw,120px) 0 0;text-align:center}
.foot-a{font-family:'Playfair Display',serif;font-style:italic;font-size:26px;color:var(--green)}
.foot-b{margin:8px 0 clamp(48px,7vw,72px);font-size:11px;font-weight:500;letter-spacing:.44em;text-transform:uppercase;padding-left:.44em}
.stripes{height:56px;background:var(--s);animation:stripeSlide 40s linear infinite}

/* ---------- reveal on scroll ---------- */
@keyframes gHIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.gH-in{animation:gHIn 1.6s var(--ease) both}
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .gH-item{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
.js .is-in .gH-item{opacity:1;transform:none}
.js .gH-path path{stroke-dasharray:1 9}

/* ---------- modal ---------- */
body.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(10,40,30,.72);backdrop-filter:blur(4px);animation:fadeIn .5s ease both}
.modal-card{position:relative;width:100%;max-width:520px;max-height:calc(100dvh - 32px);overflow:auto;background:var(--cream);padding:12px;box-shadow:0 50px 100px -30px rgba(0,0,0,.6);outline:0;animation:cardIn .8s var(--ease) both}
.modal.closing .modal-card{animation:cardOut .35s ease both}
.modal.closing .modal-backdrop{animation:fadeOut .35s ease both}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes cardIn{from{opacity:0;transform:translateY(40px) scale(.94) rotate(-1deg)}to{opacity:1;transform:none}}
@keyframes cardOut{to{opacity:0;transform:translateY(20px) scale(.97)}}
.modal-frame{position:relative;border:1px solid var(--green);padding:5px}
.modal-frame>form,.modal-frame>.thanks{border:1px solid var(--gold);padding:clamp(28px,5vw,44px) clamp(18px,5vw,40px);display:flex;flex-direction:column;gap:20px}
.modal-x{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border:0;background:none;color:var(--green);cursor:pointer;display:grid;place-items:center;border-radius:50%;transition:transform .4s var(--ease),background .3s}
.modal-x:hover{background:rgba(180,143,74,.2);transform:rotate(90deg)}

.f-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.f-head .eyebrow{font-size:11px;margin:0}
.f-head h2,.thanks h2{margin:0;font-family:'Gloock',serif;font-weight:400;font-size:clamp(28px,6vw,36px);line-height:1.1;color:var(--green)}
.f-sub{font-family:'Playfair Display',serif;font-style:italic;font-size:16px}

.field{display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:0;min-width:0;animation:fieldIn .7s var(--ease) calc(.25s + var(--i,0)*.08s) both}
@keyframes fieldIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.field label,.field legend{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-d);padding:0}
.field input[type=text],.field input[type=email],.field input[type=number],.field textarea{width:100%;font:400 17px 'Jost',sans-serif;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--green);border-radius:0;padding:8px 2px;outline:0;transition:border-color .3s,box-shadow .3s,background .3s}
.field textarea{resize:vertical;min-height:70px;border:1px solid rgba(14,74,58,.35);padding:10px}
.field input:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 2px 0 0 var(--gold);background:rgba(180,143,74,.06)}
.field.invalid input[type=text],.field.invalid input[type=email]{border-color:#A33A2B}
.err{min-height:0;font-size:12px;color:#A33A2B;letter-spacing:.04em}
.field.invalid .err{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice legend{grid-column:1/-1;margin-bottom:4px}
.choice .err{grid-column:1/-1}
.pill{position:relative;cursor:pointer;letter-spacing:0!important;text-transform:none!important;font-weight:400!important;color:var(--ink)!important}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;padding:8px;border:1px solid var(--green);font:500 15px 'Jost',sans-serif;color:var(--green);text-align:center;transition:background .3s,color .3s,transform .35s var(--ease),box-shadow .3s}
.pill small{font:italic 400 12px 'Playfair Display',serif;opacity:.8}
.pill:hover span{transform:translateY(-2px);box-shadow:0 10px 18px -12px rgba(10,40,30,.6)}
.pill input:checked+span{background:var(--green);color:var(--sand);box-shadow:inset 0 0 0 3px var(--green),inset 0 0 0 4px var(--gold);animation:pop .4s var(--ease)}
.pill input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
@keyframes pop{50%{transform:scale(1.04)}}

.stepper{display:inline-flex;align-items:center;align-self:flex-start;border:1px solid var(--green)}
.stepper button{width:44px;height:44px;border:0;background:none;color:var(--green);font:400 22px 'Jost',sans-serif;cursor:pointer;transition:background .3s,color .3s}
.stepper button:hover{background:var(--green);color:var(--sand)}
.stepper input{width:56px;text-align:center;border:0!important;box-shadow:none!important;font-size:18px!important;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none}
#guests-field{transition:opacity .4s,max-height .5s var(--ease)}
#guests-field.off{opacity:.25;pointer-events:none}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.form-error{font-size:14px;color:#A33A2B;text-align:center}
.submit{align-self:stretch;margin-top:4px}
.submit.loading{pointer-events:none;opacity:.8}
.submit.loading span{animation:blink 1s infinite}
@keyframes blink{50%{opacity:.4}}

/* thanks */
.thanks{align-items:center;text-align:center}
.modal-frame>[hidden]{display:none}
.thanks .gH-btn{align-self:center}
.thanks-msg{font-family:'Playfair Display',serif;font-style:italic;font-size:18px;line-height:1.5;max-width:340px}
.stamp{width:120px;height:120px;animation:stampIn .9s var(--ease) both}
.st-c1,.st-c2,.st-ck{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1s ease forwards}
.st-c2{animation-delay:.25s}.st-ck{stroke-dasharray:80;stroke-dashoffset:80;animation-delay:.7s;animation-duration:.6s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes stampIn{from{transform:scale(1.8) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
.thanks h2,.thanks-msg,.thanks .gH-btn{animation:fieldIn .8s var(--ease) 1.1s both}
.confetti{position:fixed;top:-10px;width:8px;height:14px;z-index:200;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translate3d(var(--x),105vh,0) rotate(var(--r))}}

@media (max-width:420px){.choice{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .gH-item{opacity:1;transform:none}
  html{scroll-behavior:auto}
}