/* ═══════════════════════════════════════════════
   KENNY & LAURA — 19.12.2026
   Une page = un écran. On glisse, la page change.
   ═══════════════════════════════════════════════ */

:root{
  --cream:#F4EFE5;
  --paper:#FAF8F2;
  --ink:#292722;
  --terra:#B86F50;
  --olive:#72765B;
  --sand:#C9BCA4;

  --ink-60:rgba(41,39,34,.72);
  --ink-40:rgba(41,39,34,.52);
  --hair:rgba(41,39,34,.14);

  --serif:'Cormorant Garamond',Georgia,serif;
  --display:'Playfair Display',Georgia,serif;
  --script:'Sacramento',cursive;
  --script2:'Parisienne',cursive;

  --ease:cubic-bezier(.22,.61,.36,1);
  --page:cubic-bezier(.32,.86,.28,1);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%;overflow:hidden}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block;-webkit-user-drag:none;user-select:none}
button{font:inherit;color:inherit}
a{color:inherit}
::selection{background:rgba(184,111,80,.22)}

.label{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.20em;text-transform:uppercase;color:var(--ink-60)}
.h2{margin:.5rem 0 0;font-size:clamp(1.8rem,7.5vw,2.5rem);font-weight:300;letter-spacing:.02em;line-height:1.1}
.script{margin:1.2rem 0 0;font-family:var(--script);font-size:clamp(1.3rem,5.6vw,1.7rem);line-height:1.4;color:var(--olive)}
.script--big{font-size:clamp(1.7rem,8vw,2.4rem);color:var(--olive)}
.heart{display:block;color:var(--terra);font-size:1rem;line-height:1}
.rule{width:52px;height:1px;margin:1.3rem auto;background:var(--ink-40)}
.place{margin:.9rem 0 0;font-size:.8rem;line-height:1.9;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-60)}


/* ═══════════ 1. ENVELOPPE ═══════════ */

.envelope-screen{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 32%,#FBF9F4 0%,var(--cream) 55%,#E9E2D4 100%);
  transition:opacity .8s var(--ease),visibility .8s;
}
.envelope-screen.is-gone{opacity:0;visibility:hidden;pointer-events:none}

.env-stage{
  width:100%;max-width:400px;perspective:1200px;text-align:center;
  transition:transform 1s var(--ease),opacity .7s var(--ease);
}
.env-stage.is-lifting{transform:scale(1.15) translateY(-7%);opacity:0}
.env-to{margin:0 0 clamp(40px,10vh,72px);font-size:.66rem;letter-spacing:.30em;text-transform:uppercase;color:var(--ink-40)}

.envelope{
  position:relative;width:100%;aspect-ratio:1.5/1;
  filter:drop-shadow(0 18px 30px rgba(41,39,34,.13));
  transform:rotateY(var(--ty,0deg));
  cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;
}
.envelope:active{cursor:grabbing}
.env-back,.env-front{position:absolute;inset:0;border-radius:4px}
.env-back{background:linear-gradient(180deg,#F2EDE2,#E8E0D0);z-index:1}
.env-front{
  z-index:3;background:linear-gradient(170deg,#FAF6EC,#F1EBDD);
  border-radius:0 0 4px 4px;clip-path:polygon(0 0,50% 42%,100% 0,100% 100%,0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.env-front::before,.env-front::after{content:'';position:absolute;top:0;bottom:0;width:52%;background:rgba(41,39,34,.028)}
.env-front::before{left:0;clip-path:polygon(0 0,100% 42%,0 100%)}
.env-front::after{right:0;clip-path:polygon(100% 0,0 42%,100% 100%)}
.env-flap{
  position:absolute;top:0;left:0;right:0;height:58%;z-index:4;
  background:linear-gradient(178deg,#FBF8EF,#EFE8D9);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;backface-visibility:hidden;
}
.env-card{
  position:absolute;left:7%;right:7%;top:6%;height:94%;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;
  background:linear-gradient(160deg,#FFFDF8,#F6F1E6);border-radius:3px;
  box-shadow:0 2px 10px rgba(41,39,34,.10);
}
.env-card__mono{font-size:1.9rem;font-weight:300;letter-spacing:.14em;line-height:1}
.env-card__mono em{display:block;margin:.1em 0;font-family:var(--script);font-style:normal;font-size:1.15rem;color:var(--terra);letter-spacing:0}
.env-card__sprig{width:42px;opacity:.6}
.env-seal{
  position:absolute;left:50%;top:52%;z-index:6;display:block;
  width:clamp(78px,22vw,100px);aspect-ratio:1;pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(41,39,34,.28));
}
.env-seal img{width:100%;height:100%}

.env-hint{margin:clamp(40px,10vh,72px) 0 0;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-60);transition:opacity .35s}
.env-hint.is-gone{opacity:0}
.env-hint__arrow{
  display:block;width:11px;height:11px;margin:0 auto .9rem;
  border-left:1px solid var(--terra);border-top:1px solid var(--terra);
  transform:rotate(45deg);animation:hintUp 1.9s ease-in-out infinite;
}
@keyframes hintUp{
  0%,100%{transform:rotate(45deg) translate(0,0);opacity:.35}
  50%{transform:rotate(45deg) translate(4px,-4px);opacity:1}
}


/* ═══════════ 2. LES PAGES ═══════════ */

.deck{position:fixed;inset:0;z-index:1;overflow:hidden;background:transparent}

/* le voile de nuit, derrière les pages : la page « soirée » est
   transparente, donc la nuit se lève au fil du glissement */
.nightveil{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  transition:opacity 0s;
  opacity:var(--nv,0);
  background:linear-gradient(180deg,#3B3F4B 0%,#26282F 55%,#1B1D23 100%);
}

.slide{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(38px,7vh,64px) clamp(24px,7vw,60px) clamp(96px,17vh,150px);
  overflow:hidden;text-align:center;
  visibility:hidden;
  transform:translate3d(0,100%,0);
  will-change:transform;
  background:var(--cream);
}
.slide.is-on{visibility:visible}
.slide.is-anim{transition:transform .62s var(--page)}

.slide__in{
  position:relative;z-index:2;width:100%;max-width:440px;
  padding:6px 4px;
  translate:0 var(--par,0);          /* profondeur : il glisse plus lentement que la page */
}
.slide__in--scroll{max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:2px}

/* le contenu se pose quand la page arrive */
.anim{
  opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--ease) var(--d,0s),transform .75s var(--ease) var(--d,0s);
}
.slide.is-active .anim{opacity:1;transform:none}


/* ═══════════ 3. COUVERTURE ═══════════ */

.kicker{margin:0 0 1.5rem;font-size:.66rem;font-weight:500;line-height:2.1;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-60)}
.names{margin:0;font-weight:300;font-size:clamp(2.6rem,13.5vw,4.4rem);line-height:1.03;letter-spacing:.05em;text-transform:uppercase}
.names span{display:block}
.names .amp{font-family:var(--script);font-size:.42em;letter-spacing:0;text-transform:none;color:var(--terra);margin:.04em 0}
.date{margin:0;font-size:clamp(.95rem,4vw,1.2rem);letter-spacing:.22em;text-transform:uppercase;color:var(--terra)}

/* ─── LA ZONE RÉSERVÉE AU TEXTE ───────────────────
   Comme sur le concept : l'illustration tient les
   BORDS, le centre reste du papier propre. Chaque
   décor est masqué en dégradé vers le centre, donc
   il ne peut PAS venir manger le texte, quelle que
   soit sa taille.                                  */

.canes{
  position:absolute;left:-3%;bottom:0;z-index:0;
  width:min(210px,34vw);pointer-events:none;
  mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 96%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 96%);
}
.canes__l{position:absolute;bottom:0;left:0;transform-origin:50% 100%}
.canes__l--1{position:relative;width:100%;animation:sway 9.2s ease-in-out infinite alternate}
.canes__l--2{width:42%;left:62%;bottom:3%;opacity:.75;animation:sway 6.8s ease-in-out -2.1s infinite alternate}
@keyframes sway{from{rotate:-1.3deg}to{rotate:1.5deg}}

.grassR{
  position:absolute;right:-2%;bottom:0;z-index:0;
  width:min(140px,24vw);pointer-events:none;
  transform-origin:50% 100%;
  animation:sway 7.9s ease-in-out -3.6s infinite alternate;
  mask-image:linear-gradient(270deg,#000 0%,#000 44%,transparent 96%);
  -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 44%,transparent 96%);
}

/* le paysage tient le tiers bas et s'arrête net avant le texte */
.cover__land{
  position:absolute;left:50%;bottom:0;z-index:0;
  width:max(135%,700px);height:34%;object-fit:cover;object-position:50% 0%;
  transform:translateX(-50%);
  opacity:.72;pointer-events:none;
  mask-image:linear-gradient(180deg,transparent 0%,#000 45%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%);
}

.motes{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mote{position:absolute;border-radius:50%;background:var(--sand);filter:blur(.6px);animation:drift linear infinite}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(.7);opacity:0}
  14%{opacity:.5} 86%{opacity:.35}
  to{transform:translate3d(44px,-92svh,0) scale(1);opacity:0}
}


/* ═══════════ 4. LE DÉCOR VIVANT ═══════════
   Toujours dans un coin bas, jamais devant le texte.
   Chaque élément a sa propre cadence : rien ne bat
   jamais en rythme, donc on ne perçoit pas de boucle. */

.deco{
  position:absolute;bottom:8%;z-index:0;
  pointer-events:none;opacity:.92;
}
.deco img{width:100%}
.deco{translate:0 var(--dep,0)}
.deco .perch{position:absolute;width:1px;height:1px}

.deco--branch{
  width:clamp(150px,38vw,215px);
  transform-origin:80% 55%;
  animation:swayBranch 7.4s ease-in-out infinite alternate;
}
.deco--branch .perch{left:34%;top:50%}

.deco--plume{
  width:clamp(84px,22vw,122px);
  transform-origin:50% 100%;
  animation:swayPlume 6.3s ease-in-out infinite alternate;
}
.deco--plume .perch{left:47%;top:11%}

.deco--l{left:2%}
.deco--r{right:2%}
.deco--r.deco--branch{transform-origin:20% 55%}
.deco--r.deco--branch .perch{left:62%;top:50%}

/* le second élément, purement décoratif, de l'autre côté */
.deco--far{opacity:.45;animation-duration:9.1s;animation-delay:-2.6s}

@keyframes swayBranch{from{rotate:-1.2deg}to{rotate:1.5deg}}
@keyframes swayPlume {from{rotate:-2.4deg}to{rotate:2.8deg}}

/* ═══════════ 5. LE CIEL ═══════════
   Ils planent dans le tiers haut, comme sur la
   couverture du concept. Jamais devant le texte,
   jamais derrière un bouton.                      */

.pq-sky{
  position:fixed;inset:0;z-index:1;
  pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity 1.4s ease;
}
.pq-sky.is-on{opacity:.88}

.pq{
  position:absolute;left:0;top:0;
  width:clamp(52px,13vw,78px);aspect-ratio:531/700;
  will-change:transform;
}
.pq img{position:absolute;left:0;top:0;width:100%;height:auto}
/* l'aile pivote autour de l'épaule, mesurée à 46,86 % / 31,28 % du cadre */
.pq-wn,.pq-wf{transform-origin:46.86% 31.28%}
.pq-wf{opacity:.5}

/* ═══════════ 6. COMPTE À REBOURS ═══════════ */

.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(4px,2vw,14px);margin:1.6rem auto 0;max-width:400px}
.cd__c{display:flex;flex-direction:column;align-items:center}
.cd__c b{font-size:clamp(1.9rem,9vw,2.7rem);font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.cd__c span{margin-top:.5rem;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-40)}
.cd__done{margin:1rem 0 0;font-family:var(--script);font-size:1.6rem;color:var(--terra)}


/* ═══════════ 7. PROGRAMME ═══════════ */

.tl{list-style:none;margin:2rem auto 0;padding:0;display:grid;gap:clamp(16px,3.4vh,28px);width:100%;max-width:400px}
.tl__i{
  display:grid;grid-template-columns:46px 1fr;
  grid-template-areas:"ico time" "ico title" "ico text";
  column-gap:16px;text-align:left;
}
.tl__i img{grid-area:ico;grid-row:1/4;width:100%;align-self:center;opacity:.9}
.tl__i b{grid-area:time;font-size:.82rem;font-weight:600;letter-spacing:.10em;color:var(--terra);font-variant-numeric:tabular-nums}
.tl__i b em{font-style:normal;font-size:.8em;opacity:.7}
.tl__i h3{grid-area:title;margin:.14rem 0 0;font-size:1.16rem;font-weight:600;line-height:1.3}
.tl__i p{grid-area:text;margin:.2rem 0 0;font-size:.95rem;line-height:1.5;color:var(--ink-60)}

.stars{position:absolute;inset:0 0 34% 0;z-index:0;pointer-events:none}
.star{position:absolute;border-radius:50%;background:#FFF9EC;animation:twinkle ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.12;transform:scale(.6)}to{opacity:.9;transform:scale(1)}}
.orb__sun,.orb__moon{position:absolute;inset:0;border-radius:50%;transition:opacity .5s ease}
.orb__sun{
  opacity:var(--sunO,1);
  background:radial-gradient(circle at 40% 38%,#FDF4DE,#F1CB92 64%,#E2A468);
  box-shadow:0 0 54px 20px rgba(240,201,140,.34);
}
.orb__moon{
  opacity:var(--moonO,0);
  background:radial-gradient(circle at 36% 34%,#FFFDF6,#DED8C6);
  box-shadow:0 0 40px 15px rgba(246,242,230,.24);
}


/* ═══════════ 8. NOUS ═══════════ */

.portrait{margin:.8rem auto 0;max-width:min(262px,66%);animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{from{scale:1;rotate:-.3deg}to{scale:1.025;rotate:.4deg}}
.portrait img{width:100%}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:1.4rem}
.duo__c{margin:0;padding:14px 8px 10px;background:var(--paper);border:1px solid var(--hair);border-radius:3px}
.duo__c figcaption{font-size:.92rem;line-height:1.6;color:var(--ink-60)}
.duo__c figcaption em{font-family:var(--script);font-style:normal;font-size:1.15rem;color:var(--ink)}

.scene{position:relative;display:block;width:100%;height:88px;margin:.6rem auto 0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.scene:focus-visible{outline:2px solid var(--terra);outline-offset:6px}
.sc{position:absolute;bottom:0}
.scene--laura .sc--bowl{left:2%;width:52%}
.scene--laura .sc--glass{right:6%;width:31%;display:block;transform-origin:50% 100%;animation:glassIdle 5.5s ease-in-out infinite}
.scene--laura .sc--glass img{width:100%}
.scene--laura.is-cheers .sc--glass{animation:cheers .9s var(--ease)}
@keyframes glassIdle{0%,100%{rotate:0deg}50%{rotate:-2deg}}
@keyframes cheers{0%{rotate:0deg}30%{rotate:-18deg;translate:-6px -5px}60%{rotate:9deg}100%{rotate:0deg}}
.bub{position:absolute;left:26%;bottom:28%;width:50%;height:44%}
.bub i{position:absolute;bottom:0;width:3px;height:3px;border-radius:50%;background:rgba(114,118,91,.4);animation:bubble 3.4s ease-in infinite}
.bub i:nth-child(1){left:10%;animation-delay:0s}
.bub i:nth-child(2){left:38%;animation-delay:.85s}
.bub i:nth-child(3){left:64%;animation-delay:1.7s}
.bub i:nth-child(4){left:24%;animation-delay:2.55s}
@keyframes bubble{0%{transform:translateY(0) scale(.5);opacity:0}20%{opacity:.8}100%{transform:translateY(-34px) scale(1);opacity:0}}

.scene--kenny .sc--rod{left:0;width:50%;transform-origin:14% 92%;animation:rodIdle 6.5s ease-in-out infinite}
.scene--kenny .sc--fish{right:0;width:50%;bottom:14%;animation:swim 4.6s ease-in-out infinite alternate}
@keyframes rodIdle{0%,100%{rotate:0deg}50%{rotate:-2.5deg}}
@keyframes swim{from{translate:0 0;rotate:-3deg}to{translate:-10px -7px;rotate:4deg}}
.scene--kenny.is-catch .sc--fish{animation:catchJump 1s var(--ease)}
.scene--kenny.is-catch .sc--rod{animation:rodBend 1s var(--ease)}
@keyframes catchJump{0%{translate:0 0;rotate:0}35%{translate:-20px -38px;rotate:-24deg}65%{translate:-10px -16px;rotate:14deg}100%{translate:0 0;rotate:0}}
@keyframes rodBend{0%,100%{rotate:0deg}35%{rotate:-11deg}70%{rotate:3deg}}


/* ═══════════ 9. LIEU ═══════════ */

.lieu__land{
  position:absolute;left:50%;bottom:0;z-index:0;width:max(130%,680px);height:36%;object-fit:cover;object-position:50% 0%;
  transform:translateX(-50%);opacity:.7;pointer-events:none;
  mask-image:linear-gradient(180deg,transparent 0%,#000 42%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%);
}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:1.8rem}


/* ═══════════ 10. BOUTONS & FORMULAIRE ═══════════ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border-radius:2px;cursor:pointer;transition:background .25s,opacity .25s;
  -webkit-tap-highlight-color:transparent;
}
.btn--solid{width:100%;border:1px solid var(--terra);background:var(--terra);color:var(--paper)}
.btn--solid:active{opacity:.85}
.btn--solid[disabled]{opacity:.5}
.btn--ghost{border:1px solid var(--ink-40);background:transparent;color:var(--ink)}

.form{margin-top:1.4rem;text-align:left}
.field{margin:0 0 1.1rem;padding:0;border:0}
.field label,.field legend{display:block;margin-bottom:.45rem;padding:0;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60)}
.field input[type=text],.field input[type=number],.field textarea{
  width:100%;min-height:48px;padding:11px 13px;
  font-family:var(--serif);font-size:1rem;   /* ≥16px : pas de zoom auto iOS */
  color:var(--ink);background:var(--paper);
  border:1px solid var(--hair);border-radius:2px;
  -webkit-appearance:none;appearance:none;
}
.field textarea{min-height:70px;resize:none;line-height:1.5}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--terra)}
.field.has-err input{border-color:#B4482F}
.err{display:block;margin-top:.3rem;font-size:.76rem;color:#B4482F}

.choice{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.choice__o{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:6px 8px;text-align:center;
  background:var(--paper);border:1px solid var(--hair);border-radius:2px;cursor:pointer;
  transition:border-color .2s,background .2s;-webkit-tap-highlight-color:transparent;
}
.choice__o input{position:absolute;opacity:0;width:100%;height:100%;margin:0}
.choice__o span{font-size:.9rem;line-height:1.25;color:var(--ink-60)}
.choice__o:has(input:checked){border-color:var(--terra);background:rgba(184,111,80,.07)}
.choice__o:has(input:checked) span{color:var(--ink)}

.stepper{display:grid;grid-template-columns:48px 1fr 48px;max-width:176px;border:1px solid var(--hair);border-radius:2px;overflow:hidden;background:var(--paper)}
.stepper__b{min-height:48px;border:0;background:transparent;font-size:1.3rem;color:var(--ink-60);cursor:pointer}
.stepper input{min-height:48px;text-align:center;font-size:1.05rem;border:0;border-inline:1px solid var(--hair);border-radius:0;background:transparent;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.form__st{margin:.8rem 0 0;font-size:.86rem;text-align:center;color:var(--ink-60)}
.form__st.is-err{color:#B4482F}
.rsvp__intro{margin:.8rem 0 0;font-size:.9rem;color:var(--ink-60)}
.rsvp__intro strong{color:var(--ink);font-weight:500}
.thanks{margin-top:1.4rem;padding:2rem 1.2rem;background:var(--paper);border:1px solid var(--hair);border-radius:3px}
.thanks h3{margin:.7rem 0 .4rem;font-size:1.5rem;font-weight:300}
.thanks p{margin:0 0 1.4rem;color:var(--ink-60)}

.mono{margin:1.4rem 0 0;padding:8px 12px;border:0;background:none;cursor:pointer;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-40);-webkit-tap-highlight-color:transparent}
.mono em{font-family:var(--script);font-style:normal;text-transform:none;color:var(--terra)}


/* ═══════════ 11. NAVIGATION ═══════════ */

.dots{
  position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;gap:9px;
  opacity:0;transition:opacity .6s ease;
}
.dots.is-on{opacity:1}
.dots button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:rgba(41,39,34,.2);cursor:pointer;
  transition:background .3s,transform .3s;-webkit-tap-highlight-color:transparent;
}
.dots button.is-on{background:var(--terra);transform:scale(1.5)}
body.is-night .dots button{background:rgba(242,236,224,.26)}
body.is-night .dots button.is-on{background:#DE9C77}

.swipe-cue{
  position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translateX(-50%);
  z-index:70;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-40);
  opacity:0;transition:opacity .6s ease;pointer-events:none;
}
.swipe-cue.is-on{opacity:1}
.swipe-cue__a{
  width:9px;height:9px;
  border-left:1px solid var(--terra);border-top:1px solid var(--terra);
  transform:rotate(45deg);animation:hintUp 1.9s ease-in-out infinite;
}

.fab{
  position:fixed;left:16px;right:16px;bottom:calc(14px + var(--safe-b));z-index:75;
  display:flex;align-items:center;justify-content:center;min-height:50px;
  font-size:.68rem;letter-spacing:.20em;text-transform:uppercase;text-decoration:none;
  color:var(--paper);background:var(--terra);border-radius:2px;
  box-shadow:0 6px 20px rgba(41,39,34,.20);
  transform:translateY(150%);transition:transform .5s var(--ease);
}
.fab.is-on{transform:translateY(0)}

.petals{position:fixed;inset:0;z-index:800;pointer-events:none;overflow:hidden}
.petal{position:absolute;top:-6vh;border-radius:0 100% 0 100%;animation:fall linear forwards}
@keyframes fall{
  from{transform:translate3d(0,0,0) rotate(0)}
  to{transform:translate3d(var(--dx,40px),112vh,0) rotate(var(--rot,540deg))}
}


/* ═══════════ 12. GRAND ÉCRAN ═══════════ */

@media (min-width:760px){
  body{font-size:18px}
  .slide{padding-bottom:clamp(150px,26vh,240px)}
  .canes{width:min(300px,24vw);left:-2%}
  .dots{right:22px}
  .fab{left:auto;right:22px;width:270px}
  .scene{height:104px}
}
@media (min-width:1100px){.canes{left:3%}}

@media (hover:hover){
  .btn--solid:hover{background:#a5613f}
  .btn--ghost:hover{background:rgba(41,39,34,.05)}
  .choice__o:hover{border-color:var(--sand)}
  .dots button:hover{background:var(--terra)}
}


/* ═══════════ 13. MOUVEMENT RÉDUIT ═══════════ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .anim{opacity:1;transform:none}
  .motes,.petals,.pq-sky{display:none}
}

.nightveil.is-anim{transition:opacity .62s var(--page)}


/* ═══════════ LE PROGRAMME — la nuit tombe en descendant ═══════════ */

.slide--prog{
  --dusk:0; --night:0;                     /* pilotés par le défilement */
  background:var(--cream);
}
/* le crépuscule : doré, il culmine au milieu du parcours */
.slide--prog::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#FBEAD4 0%,#F2CBA6 52%,#DFA07E 100%);
  opacity:var(--dusk);
}
/* puis la nuit prend le dessus */
.slide--prog::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#3E4353 0%,#272A33 52%,#1A1C22 100%);
  opacity:var(--night);
}
.slide--prog > *{position:relative;z-index:1}
.slide--prog .slide__in--scroll{
  max-height:100%;padding:12vh 2px 26vh;
  scrollbar-width:none;
  /* le texte se dissout avant d'atteindre le ciel en haut
     et la branche en bas : plus aucune collision possible */
  mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
}
.slide--prog .slide__in--scroll::-webkit-scrollbar{display:none}

.prog__hint{
  margin:1rem 0 0;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-40);transition:color .8s ease;
}
.prog__end{
  margin:3rem 0 0;font-family:var(--script);font-size:1.4rem;
  color:var(--olive);transition:color .8s ease;
}

/* les couleurs basculent quand la nuit est installée */
.slide--prog.is-dark .label,
.slide--prog.is-dark .prog__hint{color:rgba(242,236,224,.72)}
.slide--prog.is-dark .h2{color:#F2ECE0}
.slide--prog.is-dark .tl__i h3{color:#F2ECE0}
.slide--prog.is-dark .tl__i p{color:rgba(242,236,224,.76)}
.slide--prog.is-dark .tl__i b{color:#DE9C77}
.slide--prog.is-dark .prog__end{color:#C9BCA4}
.slide--prog.is-dark .tl__i img{filter:invert(.9) sepia(.18) brightness(1.2)}
.slide--prog.is-dark .deco img{filter:invert(.85) sepia(.14) brightness(1.1);opacity:.55}
.slide--prog .h2,.slide--prog .label,.slide--prog .tl__i h3,
.slide--prog .tl__i p,.slide--prog .tl__i b{transition:color .8s ease}
.slide--prog .tl__i img,.slide--prog .deco img{transition:filter .8s ease,opacity .8s ease}

.slide--prog .stars{opacity:var(--night)}
.orb__sun,.orb__moon{position:absolute;inset:0;border-radius:50%;transition:opacity .5s ease}
.orb__sun{
  opacity:var(--sunO,1);
  background:radial-gradient(circle at 40% 38%,#FDF4DE,#F1CB92 64%,#E2A468);
  box-shadow:0 0 54px 20px rgba(240,201,140,.34);
}
.orb__moon{
  opacity:var(--moonO,0);
  background:radial-gradient(circle at 36% 34%,#FFFDF6,#DED8C6);
  box-shadow:0 0 40px 15px rgba(246,242,230,.24);
}
.sprigTop{
  position:absolute;left:-4%;top:3%;z-index:0;
  width:min(96px,22vw);pointer-events:none;
  transform:rotate(-14deg);transform-origin:0% 50%;
  opacity:.45;
  animation:sway 8.6s ease-in-out -1.2s infinite alternate;
}
/* les cannes s'écartent de la ligne d'adresse : le texte reste net */
.slide--cover .canes{left:-13%}
.slide--cover .place{font-size:.72rem;letter-spacing:.17em}
.slide--cover .kicker{font-size:.63rem;letter-spacing:.26em}

body.on-prog .pq-sky{opacity:.6}

.slide--prog .deco{bottom:-4%;opacity:.5;width:clamp(115px,30vw,165px)}

/* les ornements du haut de la couverture, masqués vers le centre */
.grassTop{
  position:absolute;right:-8%;top:-8%;z-index:0;
  width:min(160px,34vw);pointer-events:none;
  transform:scaleY(-1) rotate(8deg);
  opacity:.42;
  mask-image:linear-gradient(270deg,#000 0%,#000 38%,transparent 90%);
  -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 38%,transparent 90%);
}
.sprigTop{
  position:absolute;left:-4%;top:3%;z-index:0;
  width:min(96px,22vw);pointer-events:none;
  transform:rotate(-14deg);transform-origin:0% 50%;
  opacity:.45;
  animation:sway 8.6s ease-in-out -1.2s infinite alternate;
}

/* l'astre : au-dessus des fonds, sous le texte */
.slide--prog .orb{
  position:absolute;right:9%;top:8%;z-index:0;
  width:clamp(58px,15vw,88px);aspect-ratio:1;
  pointer-events:none;
}
/* le bas de page ne doit plus être un désert */
.slide--prog .slide__in--scroll{padding:12vh 2px 10vh}


/* ═══════════ LES PAGES RESTANTES — composition ═══════════ */

/* NOUS : le portrait prend sa place, les cartes descendent */
.slide[data-slide=nous] .slide__in{max-width:400px}
.portrait{margin:1.4rem auto 0;max-width:min(300px,76%)}
.portrait figcaption{margin-top:.7rem}
.duo{margin-top:2rem;gap:16px}
.duo__c{padding:16px 10px 12px}
.scene{height:100px}

/* LIEU : le contenu remonte, le paysage prend le bas */
.slide--lieu{justify-content:flex-start;padding-top:clamp(74px,15vh,130px)}
.slide--lieu .row{margin-top:2.2rem;flex-direction:column;align-items:center}
.slide--lieu .btn{width:min(280px,80%)}
.lieu__land{height:42%}

/* FIN : une page qui respire, la phrase au centre */
.slide--end .slide__in{max-width:380px}
.script--big{font-size:clamp(1.9rem,9vw,2.7rem);line-height:1.35}
.slide--end .mono{margin-top:2.2rem}

/* les décors de coin, taille tenue */
.deco--branch{width:clamp(150px,38vw,215px)}
.deco--plume{width:clamp(84px,22vw,122px)}
.deco--far{opacity:.42}

/* ═══════════ ENTRÉES ANIMÉES ═══════════
   Le contenu se compose quand la page arrive,
   élément par élément, avec un léger décalage. */
.anim{
  opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .8s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s);
}
.slide.is-active .anim{opacity:1;transform:none}
.slide.is-active .portrait{animation:portraitIn 1.5s var(--ease) .25s both}
@keyframes portraitIn{
  from{opacity:0;transform:scale(.9);filter:blur(6px)}
  to{opacity:1;transform:scale(1);filter:blur(0)}
}
.slide.is-active .deco{animation:decoIn 1.6s var(--ease) .5s both}
@keyframes decoIn{from{opacity:0;transform:translateY(26px)}to{opacity:.92;transform:none}}
.slide.is-active .deco--far{animation-name:decoInFar}
@keyframes decoInFar{from{opacity:0;transform:translateY(26px)}to{opacity:.42;transform:none}}
.slide--lieu.is-active .lieu__land{animation:landIn 1.8s var(--ease) .35s both}
@keyframes landIn{from{opacity:0;transform:translate(-50%,26px)}to{opacity:.7;transform:translate(-50%,0)}}


/* ─── derniers réglages de composition ─── */

/* NOUS : les fleurs restent dans les coins bas, derrière les cartes */
.slide__in{z-index:2}
.duo__c{position:relative;z-index:2}
.slide[data-slide=nous] .deco{bottom:-2%;opacity:.55}
.slide[data-slide=nous] .deco--plume{width:clamp(70px,18vw,100px)}

/* LIEU : le contenu redescend, le paysage monte à sa rencontre */
.slide--lieu{justify-content:center;padding-top:clamp(46px,9vh,80px);padding-bottom:clamp(150px,26vh,230px)}
.slide--lieu .slide__in{margin-bottom:2vh}
.lieu__land{height:46%;opacity:.78}

/* FIN : la phrase tient sur deux lignes lisibles, bien centrée */
.slide--end .slide__in{max-width:340px}
.script--big{font-size:clamp(1.7rem,8vw,2.3rem);line-height:1.45}
.slide--end{justify-content:center;padding-bottom:clamp(150px,26vh,230px)}
.slide--end .deco--branch{width:clamp(165px,42vw,235px)}


/* ═══════════ TYPOGRAPHIE — calée sur le concept ═══════════
   Noms en Didone contrasté, capitales en serif plus grasses
   et moins espacées, scripts manuscrits pour le créole.     */

.names{
  font-family:var(--display);
  font-weight:400;letter-spacing:.10em;
}
.names .amp{font-family:var(--script);font-weight:400;font-size:.46em;letter-spacing:0}
.h2{font-family:var(--display);font-weight:400;letter-spacing:.01em}
.thanks h3{font-family:var(--display);font-weight:400}

.kicker,.label,.place,.date{font-weight:600}
.kicker{letter-spacing:.22em;font-size:.68rem;line-height:2.05}
.label{letter-spacing:.24em;font-size:.74rem}
.date{letter-spacing:.16em;font-weight:600}
.place{letter-spacing:.11em;font-weight:500}
.tl__i b{letter-spacing:.08em;font-weight:600}
.btn{font-weight:600;letter-spacing:.12em}
.field label,.field legend{font-weight:600;letter-spacing:.10em}

.script,.script--big{font-family:var(--script2);font-weight:400}
.duo__c figcaption em{font-family:var(--script);font-size:1.5rem;line-height:1.5}

/* ═══════════ NOUS — la vraie photo ═══════════ */


.slide[data-slide=nous] .heart{margin:.5rem auto .2rem}

.duo{margin-top:1.8rem;gap:14px}
.duo__c figcaption{font-size:.9rem;line-height:1.55}
.scene{height:104px;cursor:default}

/* les dessins vivent d'eux-mêmes, sans qu'on les touche */
.scene--laura .sc--glass{animation:glassIdle 5.5s ease-in-out infinite}
.scene--laura .sc--bowl{animation:bowlIdle 7.3s ease-in-out infinite}
@keyframes bowlIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(.8deg)}}
.scene--kenny .sc--rod{animation:rodCast 6.5s ease-in-out infinite}
@keyframes rodCast{0%,100%{rotate:0deg}35%{rotate:-4deg}62%{rotate:1.5deg}}
.scene--kenny .sc--fish{animation:fishSwim 5.4s ease-in-out infinite}
@keyframes fishSwim{
  0%,100%{translate:0 0;rotate:-3deg}
  28%{translate:-9px -7px;rotate:4deg}
  56%{translate:-3px 3px;rotate:-5deg}
  78%{translate:-11px -3px;rotate:2deg}
}

/* ═══════════ RSVP — la date butoir, comme sur le concept ═══════════ */

.rsvp__deadline{
  margin:1rem 0 0;font-size:1.02rem;line-height:1.75;color:var(--ink-60);
}
.rsvp__deadline strong{color:var(--ink);font-weight:600}
.slide--rsvp .heart{margin:.6rem auto .2rem}
.slide--rsvp .form{margin-top:1.8rem}
.slide--rsvp .btn--solid{margin-top:.6rem}


/* ═══════════ LISIBILITÉ — les petits textes orange ═══════════ */

.tl__i b{font-size:.95rem;letter-spacing:.06em}
.mono{font-size:.8rem;letter-spacing:.16em;color:var(--ink-60)}
.duo__c figcaption em{font-size:1.34rem;line-height:1.45}
.duo__c figcaption{font-size:.86rem}
.duo__c{padding:14px 8px 10px}


/* ═══════════ NOUS — photo libre et bulles qui parlent ═══════════ */

.photo{position:relative;margin:1.5rem auto .6rem;max-width:min(282px,72%)}
.photo__img{
  width:100%;display:block;
  border-radius:52% 48% 46% 54% / 8% 8% 6% 6%;   /* bord vivant, pas un médaillon */
  -webkit-mask-image:radial-gradient(112% 108% at 50% 46%,#000 72%,transparent 99%);
  mask-image:radial-gradient(112% 108% at 50% 46%,#000 72%,transparent 99%);
}
.photo__sprig{position:absolute;pointer-events:none;opacity:.85}
.photo__sprig--l{left:-22%;bottom:-8%;width:66%;transform-origin:100% 50%;
  animation:sway 8.4s ease-in-out infinite alternate}
.photo__sprig--r{right:-17%;top:-11%;width:34%;transform-origin:50% 100%;
  animation:sway 6.9s ease-in-out -2.3s infinite alternate}

.bulles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1.5rem}
.bulle{
  position:relative;margin:0;padding:16px 10px 10px;
  background:var(--paper);
  border:1px solid rgba(41,39,34,.18);
  border-radius:20px 20px 20px 20px;
  text-align:center;
}
/* la pointe remonte vers la bonne personne sur la photo */
.bulle::after{
  content:'';position:absolute;top:-8px;width:15px;height:15px;
  background:var(--paper);
  border-left:1px solid rgba(41,39,34,.18);
  border-top:1px solid rgba(41,39,34,.18);
  transform:rotate(45deg);
}
.bulle--k::after{right:26%}
.bulle--l::after{left:26%}

.bulle__t{margin:0;font-size:.84rem;line-height:1.5;color:var(--ink-60)}
.bulle__t em{
  display:block;margin-top:.2rem;
  font-family:var(--script);font-style:normal;
  font-size:1.62rem;line-height:1.15;color:var(--ink);
}
.bulle__d{position:relative;display:block;height:84px;margin-top:.6rem}
.bulle__d img{position:absolute;bottom:0}

.bd-rod{left:0;width:52%;transform-origin:14% 92%;animation:rodCast 6.5s ease-in-out infinite}
.bd-fish{right:0;width:50%;bottom:12%;animation:fishSwim 5.4s ease-in-out infinite}
.bd-bowl{left:0;width:55%;animation:bowlIdle 7.3s ease-in-out infinite}
.bd-glass{right:1%;width:32%;transform-origin:50% 100%;animation:glassIdle 5.5s ease-in-out infinite}


/* ═══════════ PROGRAMME — le texte occupe tout l écran ═══════════ */
.slide--prog{padding-top:clamp(24px,4vh,44px);padding-bottom:clamp(52px,9vh,88px)}
.slide--prog .slide__in--scroll{padding:14vh 2px 16vh}
.slide--prog .deco{bottom:-5%;opacity:.42}


/* ═══════════ RSVP — lisibilité et centrage ═══════════ */

/* les libellés étaient trop capitalisés et trop espacés pour être lus vite */
.field label,.field legend{
  font-size:.74rem;letter-spacing:.06em;
  text-transform:none;font-weight:600;
  color:var(--ink-60);
}
.field .opt{font-weight:400;opacity:.75}

/* .field label écrasait le display:flex des boutons de choix : le texte
   restait collé en haut. On remonte la spécificité. */
.field .choice__o{
  display:flex;align-items:center;justify-content:center;
  min-height:60px;padding:10px 12px;text-align:center;
}
.field .choice__o span{
  display:block;width:100%;
  font-size:.95rem;line-height:1.3;letter-spacing:.01em;
  text-transform:none;
}
.choice{gap:11px}

/* le contenu descend jusqu au bas de l ecran */
.slide--prog .slide__in--scroll{padding:9vh 2px 11vh}

/* assez d etapes tiennent a l ecran pour le remplir de haut en bas */
.slide--prog .tl{margin-top:1.9rem;gap:clamp(24px,4.2vh,42px)}
.slide--prog .slide__in--scroll{padding:6vh 2px 9vh}
.slide--prog .section__head,.slide--prog .prog__hint{margin-bottom:.2rem}
.slide--prog .prog__end{margin-top:2rem}