/* myinvit — rendu des invitations (scope .iv) */
:root{
  /* ressorts : porte lourde (léger rebond), papier qui se pose, pop */
  --e-door:cubic-bezier(.3,1.2,.4,1);
  --e-paper:cubic-bezier(.2,.8,.2,1);
  --e-pop:cubic-bezier(.34,1.56,.64,1);
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --e-door:linear(0,.06 4%,.24 10%,.52 19%,.78 29%,.94 39%,1.025 49%,1.04 56%,1.02 66%,1.004 80%,1);
    --e-paper:linear(0,.18 6%,.5 16%,.77 28%,.91 40%,.975 54%,.996 70%,1);
    --e-pop:linear(0,.15 5%,.5 12%,.9 20%,1.12 28%,1.16 33%,1.1 40%,.99 50%,.97 56%,1 68%,1.006 78%,1);
  }
}
.iv{position:relative;width:100%;height:var(--ivh,100dvh);overflow:hidden;background-color:var(--bg);background-image:var(--pat);
  font-family:var(--ft);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;isolation:isolate}
.iv *,.iv *::before,.iv *::after{box-sizing:border-box}
.iv-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:18px 14px 26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.iv-scroll::-webkit-scrollbar{display:none}
.iv:not(.open) .iv-scroll{overflow:hidden}
.iv-card{position:relative;max-width:440px;margin:0 auto;display:flow-root}
.iv-top{position:relative;width:100%;margin-bottom:-1px}
.iv-head{position:absolute;inset:0;width:100%;height:100%;display:block}
.iv-head .ln{stroke-width:1.2}
.iv-headtxt{position:absolute;left:0;right:0;bottom:0;text-align:center;padding:0 26px 4px}
.iv-headtxt:empty{display:none}
.nohead>.iv-bism,.nohead>.iv-kick{margin-bottom:10px}
.iv-body{background:var(--paper);padding:18px 24px 34px;border-radius:0 0 var(--rad) var(--rad);text-align:center;position:relative}
.framed .iv-body::after{content:"";position:absolute;inset:0 7px 7px;border:1px solid var(--acc3);border-top:0;pointer-events:none}
.framed .iv-body.nohead::after{border-top:1px solid var(--acc3);top:7px}
.iv-bism{font-family:'Amiri',serif;direction:rtl;font-size:27px;line-height:1.5;color:var(--strong);margin:0 0 4px}
.iv-kick{font-family:var(--ft);font-size:15px;letter-spacing:.02em;color:var(--strong);margin:0 0 6px;font-style:italic}
.th-riad .iv-kick,.th-andalou .iv-kick{font-style:normal;letter-spacing:.06em}
.th-artdeco .iv-kick{font-style:normal;text-transform:uppercase;letter-spacing:.3em;font-size:11.5px}
.th-confettis .iv-kick{font-style:normal;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.iv-hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4px}
.iv-age{font-family:var(--fn);font-weight:var(--nw);font-size:108px;line-height:.82;color:var(--acc);margin:0;letter-spacing:-.02em}
.iv-age small{font-size:.26em;margin-left:4px;letter-spacing:0;color:var(--strong)}
.iv-names{font-family:var(--fn);font-weight:var(--nw);font-size:var(--nsz);line-height:1.08;color:var(--ink);margin:2px 0;
  text-transform:var(--ntt);letter-spacing:var(--nls);text-wrap:balance;overflow-wrap:anywhere}
.iv-names .amp{display:inline-block;font-family:'Spectral',Georgia,serif;font-style:italic;font-weight:400;font-size:.56em;color:var(--acc);text-transform:none;letter-spacing:0;margin:0 .08em;vertical-align:.12em}
.th-classique .iv-names .amp,.th-aquarelle .iv-names .amp,.th-champetre .iv-names .amp{font-family:var(--fn);font-style:normal;font-size:.8em;vertical-align:0}
.th-confettis .iv-names{line-height:.92}
.th-confettis .iv-names .amp{font-family:var(--fn);font-style:normal;font-weight:800;font-size:.6em;vertical-align:.2em}
.iv-sub{margin:0;font-size:15px;color:var(--soft);font-style:italic}
.iv-date{margin:10px 0 0;font-family:var(--fd);font-size:18px;color:var(--strong);line-height:1.3}
.iv-date b{font-weight:inherit;font-size:1.45em;margin:0 .1em;color:var(--ink)}
.th-artdeco .iv-date{text-transform:uppercase;letter-spacing:.16em;font-size:14px}
.iv-ville{margin:0;font-size:14px;color:var(--soft);letter-spacing:.04em}
.iv-count{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;max-width:300px;margin:14px 0 2px}
.iv-count div{display:flex;flex-direction:column;align-items:center;padding:9px 0 7px;border:1px solid var(--acc3);border-radius:calc(var(--rad) / 3)}
.iv-count b{font-family:var(--fd);font-weight:400;font-size:23px;line-height:1;color:var(--strong);font-variant-numeric:tabular-nums}
.iv-count span{font-size:11px;color:var(--soft);margin-top:4px}
.th-confettis .iv-count b,.th-ballons .iv-count b{font-weight:var(--nw)}
.iv-orn{display:flex;justify-content:center;align-items:center;gap:12px;margin:26px auto 18px;color:var(--acc);width:70%}
.iv-orn::before,.iv-orn::after{content:"";flex:1;height:1px;background:var(--acc3)}
.iv-orn svg{width:20px;height:20px;flex:none}
.iv-text{margin:0 auto;max-width:32ch;font-size:16px;line-height:1.65;color:var(--ink);white-space:pre-line}
.th-classique .iv-text,.th-champetre .iv-text,.th-aquarelle .iv-text,.th-riad .iv-text{font-size:16.5px;line-height:1.72}
.iv-h{font-family:var(--fd);font-weight:var(--nw);font-size:22px;line-height:1.2;color:var(--strong);margin:0 0 12px}
.th-artdeco .iv-h{text-transform:uppercase;letter-spacing:.18em;font-size:16px}
.th-confettis .iv-h{text-transform:uppercase;font-size:26px}
.th-classique .iv-h,.th-champetre .iv-h,.th-aquarelle .iv-h{font-style:italic;font-weight:400}
.iv-prog{list-style:none;margin:0;padding:0;text-align:left;display:flex;flex-direction:column}
.iv-prog li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 2px;border-top:1px solid var(--acc3)}
.iv-prog li:last-child{border-bottom:1px solid var(--acc3)}
.iv-prog svg{width:30px;height:30px;color:var(--acc)}
.iv-prog strong{display:block;font-family:var(--fd);font-weight:400;font-size:17px;color:var(--ink)}
.th-confettis .iv-prog strong,.th-ballons .iv-prog strong{font-weight:var(--nw)}
.iv-prog span{display:block;font-size:13.5px;color:var(--soft);margin-top:1px}
.iv-prog time{font-family:var(--fd);font-size:17px;color:var(--strong);font-variant-numeric:tabular-nums}
.iv-blk{display:flex;flex-direction:column;align-items:center}
.iv-blk>svg{width:34px;height:34px;color:var(--acc);margin-bottom:8px}
.iv-blk p{margin:0;max-width:32ch;font-size:15.5px;line-height:1.6;color:var(--ink)}
.iv-blk a{display:inline-block;margin-top:14px;padding:11px 22px;border-radius:999px;background:var(--strong);color:var(--paper);text-decoration:none;font-size:14.5px;font-weight:500}
.dark .iv-blk a{color:var(--bg)}
.iv-foot{text-align:center;font-size:12px;color:var(--footc);margin:18px 0 0}
.iv-badge{position:absolute;top:10px;right:10px;z-index:40;font:600 11px/1 'Hanken Grotesk',system-ui,sans-serif;padding:6px 9px;border-radius:999px;background:#1d1a17;color:#fff}

/* ----- en-têtes spécifiques ----- */
.iv-body.nohead{border-radius:var(--rad);padding-top:30px}
.th-neon .iv-body{border:2px solid var(--glow);box-shadow:0 0 18px -2px var(--glow),inset 0 0 18px -6px var(--glow);border-radius:var(--rad)}
.th-neon .iv-names{color:#fff;text-shadow:0 0 4px #fff,0 0 12px var(--glow),0 0 28px var(--glow),0 0 52px var(--glow)}
.th-neon .iv-age{color:#fff;text-shadow:0 0 6px var(--glow2),0 0 22px var(--glow2),0 0 44px var(--glow2)}
.th-neon .iv-age small{color:var(--glow2)}
.th-neon .iv-orn,.th-neon .iv-prog svg,.th-neon .iv-blk>svg{color:var(--glow2);filter:drop-shadow(0 0 4px var(--glow2))}
.th-neon .iv-count div{border-color:var(--glow);box-shadow:0 0 10px -3px var(--glow)}
.th-neon .iv-blk a{background:transparent;border:1.5px solid var(--glow);color:#fff;box-shadow:0 0 12px -2px var(--glow)}
.th-neon .iv-h{color:var(--strong)}
.th-andalou .iv-body::before{content:"";position:absolute;left:50%;top:-34px;width:90px;height:90px;margin-left:-45px;border-radius:50%;background:radial-gradient(closest-side,var(--hi),transparent);opacity:.35;pointer-events:none;animation:ivGlow 4.2s ease-in-out infinite}
@keyframes ivGlow{0%,100%{opacity:.25;transform:scale(.92)}50%{opacity:.45;transform:scale(1.06)}}
.th-artdeco .iv-body{box-shadow:inset 0 0 0 7px var(--paper),inset 0 0 0 8px var(--acc),inset 0 0 0 11px var(--paper),inset 0 0 0 12px var(--acc2)}

/* ----- écran d'ouverture ----- */
.iv-gate{position:absolute;inset:0;z-index:20;color:var(--gtc);perspective:1100px;overflow:hidden}
.iv.gone .iv-gate{visibility:hidden;pointer-events:none}
.iv-gtop{position:absolute;left:0;right:0;top:12%;z-index:6;text-align:center;padding:0 24px;pointer-events:none;transition:opacity .5s ease}
.iv-gtop .t{font-family:var(--fd);font-size:21px;letter-spacing:.02em}
.th-artdeco .iv-gtop .t{text-transform:uppercase;letter-spacing:.28em;font-size:19px;color:var(--hi);text-shadow:0 0 12px var(--bg),0 0 4px var(--bg)}
.th-confettis .iv-gtop .t{font-family:var(--fn);font-weight:900;text-transform:uppercase;font-size:34px;line-height:.95}
.iv-gtop .bs{font-family:'Amiri',serif;font-size:30px;direction:rtl;color:var(--hi)}
.iv.open .iv-gtop{opacity:0}
.iv-medal{position:absolute;left:50%;top:50%;z-index:8;width:150px;margin:-75px 0 0 -75px;padding:0;border:0;background:none;cursor:pointer;color:inherit;
  display:flex;flex-direction:column;align-items:center;-webkit-tap-highlight-color:transparent;transition:transform .5s var(--e-pop),opacity .45s ease}
.iv-medal>svg{width:150px;height:150px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28));animation:ivBreath 3.6s ease-in-out infinite}
.iv-medal .lb{margin-top:10px;font:500 14px/1 'Hanken Grotesk',system-ui,sans-serif;color:var(--gtc);opacity:.85;white-space:nowrap}
.iv-medal:focus-visible{outline:none}
.iv-medal:focus-visible>svg{outline:2px solid var(--gtc);outline-offset:6px;border-radius:50%}
.iv-medal:active{transform:scale(.94)}
.iv.open .iv-medal{opacity:0;transform:scale(.6);pointer-events:none}
@keyframes ivBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* portes et panneaux coulissants */
.iv-pan{position:absolute;top:0;bottom:0;width:50.5%;background-color:var(--bg);background-image:var(--gpat);will-change:transform}
.iv-pan.l{left:0;transform-origin:0 50%;box-shadow:inset -10px 0 18px -12px rgba(0,0,0,.35)}
.iv-pan.r{right:0;transform-origin:100% 50%;box-shadow:inset 10px 0 18px -12px rgba(0,0,0,.35)}
.iv-pan .fr{position:absolute;inset:0;width:100%;height:100%}
.iv-pan .ring{position:absolute;top:52%;width:22px;height:30px}
.iv-pan.l .ring{right:12px}.iv-pan.r .ring{left:12px}
.g-doors .iv-pan{transition:transform 1.75s var(--e-door)}
.iv.open .g-doors .iv-pan.l{transform:rotateY(-106deg)}
.iv.open .g-doors .iv-pan.r{transform:rotateY(106deg)}
.g-doors::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 55%,rgba(255,240,200,.55),transparent);opacity:0;pointer-events:none;transition:opacity .9s ease .25s}
.iv.open .g-doors::after{opacity:1;transition:opacity .5s ease}
.iv.gone .g-doors::after{opacity:0}
.skin-zellige .iv-pan{border:6px solid var(--t3,var(--paper));border-top:0;border-bottom:0}
.g-slide .iv-pan{transition:transform 1.35s var(--e-paper)}
.iv.open .g-slide .iv-pan.l{transform:translateX(-102%)}
.iv.open .g-slide .iv-pan.r{transform:translateX(102%)}
.skin-kraft .iv-pan{background-color:var(--bg)}
.skin-kraft .iv-pan.l::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:2px;background:repeating-linear-gradient(var(--lo) 0 6px,transparent 6px 10px);opacity:.6}
.skin-kraft::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;z-index:5;background:repeating-linear-gradient(90deg,#d8c3a0 0 5px,#b49a73 5px 8px);transform-origin:50% 50%;transition:transform .55s var(--e-paper),opacity .4s ease}
.iv.open .skin-kraft::before{transform:scaleX(0);opacity:0}
.skin-deco .iv-pan{transition-duration:1.5s}
.skin-deco .iv-pan.l{background-image:var(--gpat),linear-gradient(90deg,transparent calc(100% - 8px),var(--acc) calc(100% - 8px) calc(100% - 7px),transparent 0)}
.skin-deco .iv-pan.r{background-image:var(--gpat),linear-gradient(90deg,transparent 7px,var(--acc) 7px 8px,transparent 0)}
.skin-cloud .iv-pan.l::after{content:"";position:absolute;top:-10px;bottom:-10px;right:-15px;width:30px;background:radial-gradient(circle,#fff 13px,transparent 13.5px) 0 0/30px 26px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.08))}
.skin-ribbon::before,.skin-ribbon::after{content:"";position:absolute;z-index:5;background:var(--acc);transition:transform .7s var(--e-paper),opacity .5s ease}
.skin-ribbon::before{left:0;right:0;top:50%;height:22px;margin-top:-11px}
.skin-ribbon::after{top:0;bottom:0;left:50%;width:22px;margin-left:-11px}
.iv.open .skin-ribbon::before{transform:scaleX(0)}
.iv.open .skin-ribbon::after{transform:scaleY(0)}

/* enveloppe */
.g-envelope{background-color:var(--bg);background-image:var(--gpat);transition:opacity .7s ease 1.75s}
.iv.open .g-envelope{opacity:0}
.env{position:absolute;left:50%;top:54%;width:min(84%,330px);aspect-ratio:1.42;transform:translate(-50%,-50%);perspective:900px;transition:transform 1s var(--e-paper) .9s}
.env-back,.env-front,.env-flap{position:absolute;inset:0}
.env-back{background:var(--deep);border-radius:6px;box-shadow:0 18px 34px -16px rgba(0,0,0,.45)}
.env-front{z-index:3;background:linear-gradient(to top right,transparent 49.6%,var(--bg) 50%) left/50.2% 100% no-repeat,linear-gradient(to top left,transparent 49.6%,var(--bg) 50%) right/50.2% 100% no-repeat,linear-gradient(transparent 50%,var(--bg) 50%);
  clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);background:var(--bg);filter:brightness(1.04);border-radius:0 0 6px 6px}
.env-flap{z-index:4;height:58%;background:var(--deep);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .8s var(--e-paper),z-index 0s .4s;filter:brightness(.92)}
.env-letter{position:absolute;z-index:2;left:7%;right:7%;top:8%;bottom:6%;background:var(--paper);border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink);
  transition:transform 1.1s var(--e-paper) .55s;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.env-letter .s{font-family:var(--fn);font-size:40px;line-height:1;color:var(--strong)}
.env-letter .l{font-family:var(--fd);font-size:13px;color:var(--soft)}
.g-envelope .iv-medal{top:calc(54% - 4%)}
.g-envelope .iv-medal>svg{width:96px;height:96px}
.g-envelope .iv-medal{width:96px;margin:-48px 0 0 -48px}
.iv.open .env-flap{transform:rotateX(180deg);z-index:1}
.iv.open .env-letter{transform:translateY(-62%)}
.iv.open .env{transform:translate(-50%,-30%) scale(1.04)}

/* voile aquarelle */
.g-veil .veil{position:absolute;inset:-10%;background:radial-gradient(60% 40% at 30% 30%,var(--w1,var(--acc)),transparent 70%),radial-gradient(55% 45% at 72% 64%,var(--w2,var(--hi)),transparent 70%),var(--bg);
  filter:blur(.5px);transition:transform 1.6s var(--e-paper),opacity 1.4s ease .2s;transform-origin:50% 0}
.iv.open .g-veil .veil{transform:translateY(-35%) scale(1.15);opacity:0}

/* ballons */
.g-balloons .sky{position:absolute;inset:0;background-color:var(--bg);background-image:var(--gpat);transition:opacity .8s ease .9s}
.iv.open .g-balloons .sky{opacity:0}
.g-balloons .bl{position:absolute;width:calc(54px * var(--s));margin-left:calc(-27px * var(--s));animation:ivBob 3.4s ease-in-out infinite;animation-delay:var(--d)}
.g-balloons .bl svg{display:block;width:100%;height:auto}
.iv.open .g-balloons .bl{animation:ivRise 2s cubic-bezier(.5,0,.75,.4) forwards;animation-delay:var(--d)}
@keyframes ivBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes ivRise{to{transform:translate(var(--dx),-130vh) rotate(6deg)}}

/* néon */
.g-neon .wall{position:absolute;inset:0;background-color:var(--deep);background-image:var(--gpat);transition:opacity .9s ease .7s}
.iv.open .g-neon .wall{opacity:0}
.g-neon .sign{font-family:var(--fn);font-size:38px;line-height:1.1;color:#fff;text-shadow:0 0 4px #fff,0 0 14px var(--glow),0 0 32px var(--glow);animation:ivFlick 5s linear infinite}
.g-neon .iv-gtop{top:16%}
.g-neon .tube{filter:drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 14px var(--glow))}
.g-neon .tube2{filter:drop-shadow(0 0 5px var(--glow2)) drop-shadow(0 0 12px var(--glow2))}
.g-neon .iv-medal>svg{filter:none;animation:ivFlick 6s linear infinite .8s}
@keyframes ivFlick{0%,7%,9%,40%,42.5%,100%{opacity:1}8%,41%{opacity:.35}41.5%{opacity:.8}}

/* ----- apparition du contenu (une seule séquence, après ouverture) ----- */
.iv.reveal .iv-hero>*{animation:ivIn .9s var(--e-paper) both}
.iv.reveal .iv-hero>*:nth-child(1){animation-delay:.55s}
.iv.reveal .iv-hero>*:nth-child(2){animation-delay:.68s}
.iv.reveal .iv-hero>*:nth-child(3){animation-delay:.8s}
.iv.reveal .iv-hero>*:nth-child(4){animation-delay:.9s}
.iv.reveal .iv-hero>*:nth-child(5){animation-delay:.98s}
.iv.reveal .iv-hero>*:nth-child(n+6){animation-delay:1.05s}
.iv.reveal .iv-headtxt>*{animation:ivIn .9s var(--e-paper) .45s both}
@keyframes ivIn{from{opacity:0;transform:translateY(10px)}}
.iv.reveal.rv-ink .iv-names{animation:ivInk 1.3s var(--e-paper) .7s both}
@keyframes ivInk{from{opacity:0;filter:blur(6px);letter-spacing:calc(var(--nls) + .08em)}}
.iv.reveal.rv-write .iv-names{animation:ivWrite 1.6s cubic-bezier(.45,.05,.3,1) .7s both}
@keyframes ivWrite{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -5% -20% 0)}}
.iv.reveal.rv-pop .iv-names,.iv.reveal.rv-pop .iv-age{animation:ivPop .8s var(--e-pop) .6s both}
@keyframes ivPop{from{opacity:0;transform:scale(.6) rotate(-3deg)}}
.iv.reveal.rv-flicker .iv-names{animation:ivOn 1.4s linear .7s both}
.iv.reveal.rv-flicker .iv-age{animation:ivOn 1.2s linear .5s both}
@keyframes ivOn{0%{opacity:0}10%{opacity:.9}14%{opacity:.1}22%{opacity:1}26%{opacity:.25}34%,100%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .iv *,.iv *::before,.iv *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
@media (min-width:520px){.iv-scroll{padding:28px 20px 34px}}