/* Charte du Rapport NSU (ANStat) : rouge #e9041e, noir, blanc, gris clair, Montserrat,
   cartes blanches à filet rouge épais en bas. Beaucoup de mouvement, coupé si le téléphone demande moins d'animations. */
:root{
  --red:#e9041e; --red-d:#b80318; --pale:#fdecee; --ink:#1a1a1a; --grey:#f4f4f4; --soft:#5e5e5e; --line:#dcdcdc;
  --orange:#f08c1e; --shadow:0 6px 20px rgba(26,26,26,.09);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:'Montserrat','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--grey);color:var(--ink);font:400 16px/1.6 var(--font);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden;height:100vh}
img{display:block;max-width:100%}
a{color:inherit}

.progress{position:fixed;top:0;left:0;right:0;height:4px;background:var(--red);transform-origin:left;transform:scaleX(var(--p,0));z-index:90}

/* ---------- OUVERTURE ---------- */
.intro{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 35%,#fff,#e9e9e9);display:grid;place-items:center;transition:opacity 1.2s ease,visibility 1.2s}
.intro.gone{opacity:0;visibility:hidden}
.env-stage{display:flex;flex-direction:column;align-items:center;gap:3.2rem;padding:0 16px}
.envelope{position:relative;width:min(84vw,340px);aspect-ratio:4/3;perspective:1200px;transition:transform 1.2s var(--ease);animation:bob 3.4s ease-in-out infinite}
.envelope.open{animation:none}
.envelope.out{transform:translateY(8vh) scale(.92)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-10px) rotate(.6deg)}}
.env-back{position:absolute;inset:0;background:var(--red-d);border-radius:6px;box-shadow:0 26px 50px -18px rgba(26,26,26,.55)}
.env-card{position:absolute;left:7%;right:7%;top:8%;bottom:6%;background:#fff;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem;padding:10px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform 1.4s var(--ease)}
.envelope.out .env-card{transform:translateY(-46%);z-index:6}
.card-small{font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.card-names{font-weight:800;font-size:1.45rem;line-height:1.1;text-transform:uppercase;color:var(--ink)}
.env-front{position:absolute;inset:0;z-index:4;pointer-events:none;background:#cf0a20;clip-path:polygon(0 0,50% 50%,100% 0,100% 100%,0 100%);border-radius:6px}
.env-front::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;background:var(--red);clip-path:polygon(0 100%,50% 0,100% 100%)}
.env-flap{position:absolute;left:0;right:0;top:0;height:56%;z-index:5;background:linear-gradient(#f2263b,var(--red));clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform 1.1s var(--ease) .15s,z-index 0s .55s;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:1}
.seal{position:absolute;left:50%;top:56%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:7;border-radius:50%;background:radial-gradient(circle at 35% 30%,#444,#0d0d0d 72%);box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 0 0 3px rgba(255,255,255,.1);display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:.02em;transition:opacity .5s ease,transform .6s var(--ease)}
.envelope.open .seal{opacity:0;transform:translate(-50%,-50%) scale(.6)}

/* ---------- BOUTONS ---------- */
.open-btn,.btn{font:700 .95rem/1.2 var(--font);color:var(--red);background:#fff;border:2px solid var(--red);padding:15px 28px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block;transition:background .4s,color .4s,transform .4s var(--ease),opacity .6s}
.open-btn{background:var(--red);color:#fff;font-size:1.05rem;padding:17px 32px;animation:ringred 2.2s infinite}
.open-btn:hover,.btn:hover{background:var(--red-d);border-color:var(--red-d);color:#fff;transform:translateY(-2px)}
.btn.solid{background:var(--red);color:#fff}
.open-btn:disabled{opacity:0;pointer-events:none;animation:none}
@keyframes ringred{0%{box-shadow:0 0 0 0 rgba(233,4,30,.55)}70%{box-shadow:0 0 0 18px rgba(233,4,30,0)}100%{box-shadow:0 0 0 0 rgba(233,4,30,0)}}
@keyframes ringwhite{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 20px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ---------- ACCUEIL ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;background:var(--ink)}
.hero-img{position:absolute;inset:-6% 0;will-change:transform}
.hero-zoom{position:absolute;inset:0;background-size:cover;background-position:45% 40%;animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.22) translateX(-2.5%)}}
.hero-veil{position:absolute;inset:0;background:radial-gradient(120% 55% at 50% 112%,rgba(233,4,30,.5),transparent 62%),linear-gradient(rgba(26,26,26,.62),rgba(26,26,26,.46) 45%,rgba(26,26,26,.9))}
.orb{position:absolute;border-radius:50%;border:2px solid rgba(233,4,30,.7);animation:float 9s ease-in-out infinite;pointer-events:none}
.o1{width:70px;height:70px;top:12%;left:7%}
.o2{width:120px;height:120px;top:28%;right:-30px;animation-duration:12s;animation-delay:-3s}
.o3{width:46px;height:46px;bottom:24%;left:12%;background:rgba(233,4,30,.55);border:0;animation-duration:7s;animation-delay:-2s}
.o4{width:66px;height:66px;bottom:12%;right:14%;animation-duration:10s;animation-delay:-5s;border-color:rgba(255,255,255,.55)}
.o5{width:90px;height:90px;top:56%;left:-34px;background:rgba(255,255,255,.1);border:0;animation-duration:13s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(14px,-26px) scale(1.08)}66%{transform:translate(-12px,-10px) scale(.94)}}
.hero-in{position:relative;padding:5rem 20px 6rem;max-width:640px}
.eyebrow{display:inline-block;background:var(--red);color:#fff;padding:7px 16px;border-radius:100px;font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.names{font-weight:800;font-size:clamp(3rem,16.5vw,6rem);line-height:.98;letter-spacing:-.02em;text-transform:uppercase;margin:1.1rem 0 .6rem}
.names .l{display:block;overflow:hidden;padding:.04em 0}
.names .l>span{display:inline-block;transform:translateY(108%);transition:transform 1.1s var(--ease)}
.names.in .l>span{transform:none}
.names .l2>span{color:var(--red);transition-delay:.22s;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.hero-dr{font-weight:600;font-size:1.05rem;letter-spacing:.06em}
.hero-msg{margin:1.4rem auto 2rem;max-width:32ch;font-size:1rem;opacity:.95}
.countdown{display:flex;justify-content:center;gap:.6rem}
.countdown div{min-width:70px;padding:.8rem .3rem .7rem;background:#fff;color:var(--ink);border-radius:10px;border-bottom:4px solid var(--red);box-shadow:var(--shadow)}
.countdown b{display:block;font-weight:800;font-size:1.8rem;line-height:1.1;font-variant-numeric:tabular-nums}
.countdown span{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
#cd-sbox.pop b{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(1.3);color:var(--red)}100%{transform:scale(1);color:var(--ink)}}
.hero-date{display:inline-block;margin-top:1.8rem;background:var(--red);padding:9px 20px;border-radius:100px;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.scroll-hint{position:absolute;bottom:20px;left:50%;width:24px;height:38px;margin-left:-12px;border:2px solid rgba(255,255,255,.75);border-radius:14px}
.scroll-hint i{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;background:#fff;border-radius:2px;animation:hint 2s ease-in-out infinite}
@keyframes hint{0%{opacity:0;transform:translateY(0)}30%{opacity:1}80%,100%{opacity:0;transform:translateY(13px)}}

/* bande défilante */
.marquee{background:var(--red);color:#fff;overflow:hidden;white-space:nowrap;padding:14px 0;border-top:4px solid var(--ink)}
.marquee-track{display:inline-flex;animation:marquee 26s linear infinite}
.marquee span{font-weight:800;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;padding:0 1.6rem;display:inline-flex;align-items:center;gap:3.2rem}
.marquee span::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
.sec{padding:5.5rem 20px;text-align:center;background:#fff;overflow:hidden}
.sec.grey{background:var(--grey)}
.sec>*{max-width:640px;margin-left:auto;margin-right:auto}
.sec.gallery>.gal{max-width:680px}
.kicker{display:inline-block;background:var(--pale);color:var(--red);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:6px 14px;border-radius:100px}
.title{font-weight:800;font-size:clamp(1.7rem,7.4vw,2.5rem);line-height:1.18;letter-spacing:-.01em;margin-top:1rem;margin-bottom:2.8rem}
.title:after{content:"";display:block;width:0;height:5px;background:var(--red);margin:1.2rem auto 0;border-radius:3px;transition:width 1.1s var(--ease) .5s}
.title.in:after{width:64px}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em}
.split .w>span{display:inline-block;transform:translateY(112%) rotate(4deg);transition:transform 1.1s var(--ease)}
.split.in .w>span{transform:none}
.split .w:last-child>span{color:var(--red)}
.lead{max-width:36ch;margin-top:-1rem;margin-bottom:2rem;color:var(--soft)}

/* révélations */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.hero .reveal:nth-child(2){transition-delay:.15s}.hero .reveal:nth-child(3){transition-delay:.3s}.hero .reveal:nth-child(4){transition-delay:.45s}.hero .reveal:nth-child(5){transition-delay:.6s}.hero .reveal:nth-child(6){transition-delay:.75s}

/* frise */
.timeline{position:relative;text-align:left}
.tl-line{position:absolute;left:11px;top:8px;bottom:8px;width:3px;background:var(--line);border-radius:2px}
.tl-line i{display:block;width:100%;height:100%;background:var(--red);border-radius:2px;transform-origin:top;transform:scaleY(0)}
.timeline ol{list-style:none}
.tl-item{position:relative;margin:0 0 1.6rem 40px;padding:18px 20px;background:#fff;border-radius:10px;border-bottom:4px solid var(--red);box-shadow:var(--shadow)}
.tl-item:last-child{margin-bottom:0}
.tl-item:nth-child(odd):not(.in){transform:translateX(-46px)}
.tl-item:nth-child(even):not(.in){transform:translateX(46px)}
.tl-dot{position:absolute;left:-40px;top:22px;width:25px;height:25px;border-radius:50%;background:#fff;border:3px solid var(--line);transition:background .6s,border-color .6s}
.tl-item.in .tl-dot{background:var(--red);border-color:var(--red)}
.tl-item.in .tl-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--red);animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.tl-item small{font-weight:800;color:var(--red);letter-spacing:.14em;font-size:.72rem}
.tl-item h3{font-weight:800;font-size:1.25rem;margin:.1rem 0 .3rem}
.tl-item p{color:var(--soft);font-size:.96rem}

/* galerie */
.gal{display:flex;flex-direction:column;gap:3rem}
.gal-item{margin:0 auto;width:100%;perspective:900px}
.gal-frame{aspect-ratio:4/5;overflow:hidden;border-radius:6px;transform:rotateX(var(--tilt,0deg));transition:transform .3s linear}
.gal-item:nth-child(odd) .gal-frame{width:90%;box-shadow:12px 12px 0 var(--red)}
.gal-item:nth-child(even) .gal-frame{aspect-ratio:1/1;width:88%;margin-left:auto;box-shadow:-12px 12px 0 var(--ink)}
.gal-item:nth-child(odd):not(.in){transform:translateX(-60px) rotate(-3deg)}
.gal-item:nth-child(even):not(.in){transform:translateX(60px) rotate(3deg)}
.gal-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);will-change:transform}

/* programme */
.program{list-style:none;text-align:left;display:grid;gap:14px}
.program li{display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center;padding:16px 18px;background:#fff;border-radius:10px;border-bottom:4px solid var(--red);box-shadow:var(--shadow)}
.program li:nth-child(odd):not(.in){transform:translateX(-44px)}
.program li:nth-child(even):not(.in){transform:translateX(44px)}
.program time{display:grid;place-items:center;height:48px;background:var(--red);color:#fff;border-radius:8px;font-weight:800;font-size:1rem}
.program h3{font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.06em}
.program p{color:var(--soft);font-size:.93rem;line-height:1.45}

/* lieu */
.place-name{font-weight:800;font-size:1.5rem;margin-top:-1rem}
.place-addr{color:var(--soft);margin-bottom:1.8rem}
.map{border-radius:10px;overflow:hidden;aspect-ratio:4/3;margin-bottom:2rem;box-shadow:var(--shadow);border-bottom:4px solid var(--red)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* tenue */
.swatches{display:flex;justify-content:center;gap:1.6rem}
.swatches div{display:flex;flex-direction:column;align-items:center;gap:.7rem;transform:scale(.3);opacity:0;transition:transform .9s cubic-bezier(.34,1.56,.64,1),opacity .6s}
.swatches.in div{transform:none;opacity:1}
.swatches.in div:nth-child(2){transition-delay:.18s}.swatches.in div:nth-child(3){transition-delay:.36s}
.swatches i{width:72px;height:72px;border-radius:50%;box-shadow:0 0 0 1px rgba(26,26,26,.2),0 10px 18px -8px rgba(26,26,26,.5);animation:bounce 3.6s ease-in-out infinite}
.swatches div:nth-child(2) i{animation-delay:.4s}.swatches div:nth-child(3) i{animation-delay:.8s}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.swatches span{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}

/* confirmer */
.rsvp{background:var(--red);color:#fff;background-image:radial-gradient(circle at 15% 10%,rgba(255,255,255,.14),transparent 40%),radial-gradient(circle at 90% 90%,rgba(26,26,26,.25),transparent 45%)}
.rsvp .kicker{background:rgba(255,255,255,.2);color:#fff}
.rsvp .title:after{background:#fff}
.rsvp .split .w:last-child>span{color:var(--ink)}
.rsvp .lead{color:rgba(255,255,255,.92)}
.btn.big{font-size:1.15rem;padding:19px 36px}
.rsvp .btn.solid{background:#fff;color:var(--red);border-color:#fff;animation:ringwhite 2.2s infinite}
.rsvp .btn.solid:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.deadline{margin-top:1.6rem;font-size:.95rem}
.deadline b{font-weight:800}
.stats-link{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:2rem;max-width:420px;padding:20px 22px;background:var(--ink);color:#fff;font-weight:800;font-size:1.3rem;line-height:1.25;border-radius:10px;text-decoration:none;border-bottom:5px solid #fff;box-shadow:0 12px 26px -10px rgba(0,0,0,.5);transition:transform .4s var(--ease),background .4s}
.stats-link:hover{background:#000;transform:translateY(-3px)}
.stats-link .arrow{font-size:1.8rem;line-height:1;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}

/* pied */
.foot{background:var(--ink);color:#fff;text-align:center;padding:4rem 20px calc(3rem + env(safe-area-inset-bottom))}
.foot-script{font-weight:800;font-size:2.4rem;line-height:1;color:var(--red);letter-spacing:.04em;margin-bottom:.8rem}
.foot-line{font-weight:600;font-size:.98rem;letter-spacing:.02em}

@media (min-width:700px){body{font-size:17px}.sec{padding:7rem 20px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .reveal,.split .w>span,.names .l>span,.swatches div{opacity:1!important;transform:none!important}
  .tl-item,.program li,.gal-item{transform:none!important}
  .title:after{width:64px}
  .marquee-track{animation:none}
}