/* ═══════════════════════════════════════════════
   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)}

/* ═══════════ L'ENVELOPPE ═══════════
   Copiée sur la planche : rabat pointu descendant
   au centre, sceau de cire à sa pointe, brindille
   posée en bas à droite.                          */

.envelope{
  position:relative;width:100%;
  aspect-ratio:1.38/1;                 /* proportion du concept */
  transform-style:preserve-3d;
  perspective:1000px;
  filter:drop-shadow(0 16px 26px rgba(41,39,34,.16));
  cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;
}
.envelope:active{cursor:grabbing}

/* le papier : crème chaud, grain très fin */
.env-body,.env-pocket,.env-flap__out,.env-flap__in{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E"),
    linear-gradient(160deg,#FCF9F1 0%,#F5EFE2 62%,#EFE7D6 100%);
}

/* le dos : la poche entière */
.env-body{
  position:absolute;inset:0;z-index:1;
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(41,39,34,.06);
}

/* la poche avant : deux rabats latéraux qui montent vers le centre */
.env-pocket{
  position:absolute;inset:0;z-index:3;
  border-radius:0 0 3px 3px;
  clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%);
}
.env-pocket::before,.env-pocket::after{
  content:'';position:absolute;top:0;bottom:0;width:51%;
  background:rgba(41,39,34,.022);
}
.env-pocket::before{left:0;clip-path:polygon(0 0,100% 46%,0 100%)}
.env-pocket::after{right:0;clip-path:polygon(100% 0,0 46%,100% 100%)}

/* le rabat : triangle depuis le haut, pointe au centre.
   Deux faces : dehors le papier, dedans la doublure. */
.env-flap{
  position:absolute;top:0;left:0;right:0;height:58%;
  z-index:4;
  will-change:transform;
  transform-origin:top center;
  transform-style:preserve-3d;
}
.env-flap__out,.env-flap__in{
  position:absolute;inset:0;
  clip-path:polygon(0 0,100% 0,50% 100%);
  backface-visibility:hidden;
}
.env-flap__out{
  filter:brightness(1.015);
  box-shadow:inset 0 -1px 0 rgba(41,39,34,.05);
}
/* la doublure, plus claire : c'est elle qu'on voit une fois ouvert */
.env-flap__in{
  transform:rotateX(180deg);
  background-image:
    repeating-linear-gradient(46deg,rgba(41,39,34,.028) 0 1px,transparent 1px 9px),
    linear-gradient(180deg,#FBF7EE,#F3EDDF);
}

/* le carton qui sort */
.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:.35rem;padding:1rem;
  background:linear-gradient(168deg,#FFFDF8,#F7F2E7);
  border-radius:2px;
  box-shadow:0 3px 12px rgba(41,39,34,.12);
}
.env-card__rule{display:block;width:34px;height:1px;background:var(--terra);opacity:.65}
.env-card__mono{
  font-family:var(--display);
  font-size:1.75rem;font-weight:400;letter-spacing:.12em;line-height:1.15;
}
.env-card__mono em{
  display:block;margin:.04em 0;
  font-family:var(--script);font-style:normal;
  font-size:1.05rem;color:var(--terra);letter-spacing:0;
}
.env-card__sprig{width:38px;opacity:.5;margin-top:.15rem}

/* la brindille posée sur l'enveloppe, comme sur la planche */
.env-sprig{
  position:absolute;right:2%;bottom:2%;z-index:5;
  width:31%;opacity:.55;pointer-events:none;
  transform:rotate(8deg);
}

/* le sceau de cire, à la pointe du rabat */
.env-seal{
  position:absolute;left:50%;top:58%;z-index:6;
  display:block;width:clamp(74px,21vw,96px);aspect-ratio:1;
  pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(41,39,34,.30));
}
.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}


/* ═══════════ GESTES TACTILES ═══════════
   Sans cette déclaration, le navigateur confisque le geste
   vertical dès le premier mouvement : il n'envoie qu'un seul
   pointermove puis annule. Ici, c'est nous qui pilotons. */

.deck,.slide{touch-action:none}
/* y compris dans les zones défilantes : nous les faisons défiler nous-mêmes,
   ce qui nous permet de tourner la page dès que le contenu est au bout */
.slide__in--scroll{touch-action:none}


/* ═══════════ LES OISEAUX S'ÉCHAPPENT DE L'ENVELOPPE ═══════════
   Deux paille-en-queue jaillissent du pli au moment où
   le rabat s'ouvre, puis s'élèvent hors du cadre.       */

.env-birds{
  position:absolute;left:50%;top:52%;
  width:0;height:0;z-index:7;
  pointer-events:none;
}
.eb{
  position:absolute;left:0;top:0;
  width:clamp(80px,21vw,120px);aspect-ratio:531/700;
  opacity:0;
  transform:translate(-50%,-50%) scale(.25);
}
.eb img{position:absolute;left:0;top:0;width:100%;height:auto}
.eb-wn,.eb-wf{transform-origin:46.86% 31.28%}
.eb-wf{opacity:.5}

/* le vol : ils sortent du pli, prennent de la hauteur, s'éloignent */
.is-hatching .eb--1{animation:envol1 2.5s cubic-bezier(.28,.72,.35,1) .12s forwards}
.is-hatching .eb--2{animation:envol2 2.7s cubic-bezier(.28,.72,.35,1) .34s forwards}
.is-hatching .eb .eb-wn{animation:battre .21s ease-in-out infinite}
.is-hatching .eb .eb-wf{animation:battre .21s ease-in-out .05s infinite}

@keyframes envol1{
  0%  {opacity:0;  transform:translate(-50%,-50%) scale(.22) rotate(6deg)}
  12% {opacity:1}
  40% {transform:translate(-215%,-300%) scale(.9) rotate(-17deg)}
  75% {opacity:1}
  100%{opacity:0;  transform:translate(-480%,-720%) scale(1.2) rotate(-6deg)}
}
@keyframes envol2{
  0%  {opacity:0;  transform:translate(-50%,-50%) scale(.20) rotate(-4deg)}
  12% {opacity:1}
  40% {transform:translate(130%,-270%) scale(.84) rotate(14deg)}
  75% {opacity:1}
  100%{opacity:0;  transform:translate(390%,-680%) scale(1.12) rotate(5deg)}
}
@keyframes battre{
  0%  {transform:rotate(-22deg)}
  50% {transform:rotate(34deg)}
  100%{transform:rotate(-22deg)}
}

/* ═══════════ PLUS DE MATIÈRE SUR LE PAPIER ═══════════ */

.env-body::after,.env-pocket::after{pointer-events:none}
.envelope::after{
  content:'';position:absolute;inset:0;z-index:8;
  pointer-events:none;border-radius:3px;
  /* fibres du papier fait main + légère usure des bords */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .05' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)' opacity='.09'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 40%,transparent 58%,rgba(41,39,34,.055) 100%);
  mix-blend-mode:multiply;
}


/* ═══════════ NOTRE HISTOIRE ═══════════
   Un texte long : il défile, et chaque paragraphe
   se compose à mesure qu'il monte dans le champ. */

.slide--hist{padding-top:clamp(24px,4vh,44px);padding-bottom:clamp(52px,9vh,88px)}
.slide--hist .slide__in--scroll{
  max-height:100%;padding:11vh 2px 13vh;
  scrollbar-width:none;
  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--hist .slide__in--scroll::-webkit-scrollbar{display:none}
.slide--hist .heart{margin:.6rem auto 0}

.hist__lead{
  margin:2rem 0 0;
  font-family:var(--script);
  font-size:clamp(1.5rem,6.6vw,2rem);
  line-height:1.55;color:var(--olive);
}
.hist__p{
  margin:1.6rem 0 0;
  font-size:1.02rem;line-height:1.85;
  color:var(--ink-60);
  text-wrap:pretty;
}

/* le verset : posé comme une inscription */
.verset{
  margin:2.8rem 0 0;padding:1.8rem 1rem 0;
  border-top:1px solid var(--hair);
}
.verset__orn{
  display:block;margin-bottom:.9rem;
  font-size:.72rem;color:var(--terra);opacity:.8;
}
.verset blockquote{
  margin:0;
  font-family:var(--script);
  font-size:clamp(1.6rem,7.2vw,2.2rem);
  line-height:1.4;color:var(--ink);
}
.verset figcaption{
  margin-top:.9rem;
  font-size:.68rem;letter-spacing:.20em;text-transform:uppercase;
  color:var(--ink-40);
}

/* chaque bloc apparaît au fil du doigt */
.hp{opacity:0;transform:translateY(20px);will-change:opacity,transform}

/* sur l histoire, le decor reste en retrait du texte */
.slide--hist .deco{bottom:-6%;opacity:.4;width:clamp(88px,23vw,128px);right:-3%}
.slide--hist .slide__in--scroll{padding-right:6px}


/* ═══════════ NOUS — la page fusionnée ═══════════
   Portrait, histoire, petites manies, verset :
   tout ce qui parle d'eux tient sur une seule page. */

.slide--hist .photo{margin:2rem auto .4rem;max-width:min(252px,64%)}
.slide--hist .hist__lead{margin-top:2.2rem}

.slide--hist .bulles{margin-top:1.1rem}
.slide--hist .bulle{padding:14px 9px 10px}
.slide--hist .bulle__t{font-size:.8rem}
.slide--hist .bulle__t em{font-size:1.44rem;line-height:1.3}
.slide--hist .bulle__d{height:76px}
.slide--hist .verset{margin-top:3rem}

/* les bulles suivent la photo, le récit vient après */
.slide--hist .bulles{margin-top:1.4rem}
.slide--hist .hist__lead{margin-top:2.8rem}

/* le monogramme de fin, sur deux lignes et plus présent */
.mono{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  margin:1.8rem auto 0;padding:10px 14px;
}
.mono__kl{
  font-family:var(--display);
  font-size:1.9rem;font-weight:400;letter-spacing:.16em;line-height:1;
  color:var(--ink);text-transform:none;
}
.mono__kl em{
  font-family:var(--script);font-style:normal;
  font-size:.72em;color:var(--terra);letter-spacing:0;
}
.mono__date{
  font-size:.86rem;letter-spacing:.24em;
  color:var(--ink-60);
}


/* ═══════════ RSVP — la liste des invités ═══════════ */

.noms{display:grid;gap:9px}
.nom{position:relative;display:flex;align-items:center;gap:8px}
.nom__i{flex:1}
.nom__x{
  flex:0 0 auto;width:38px;height:38px;padding:0;
  border:1px solid var(--hair);border-radius:2px;
  background:var(--paper);color:var(--ink-40);
  font-size:1.15rem;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s,border-color .2s;
}
.nom__x:hover{color:var(--terra);border-color:var(--sand)}

.ajout{
  margin-top:11px;padding:11px 16px;
  border:1px dashed var(--ink-40);border-radius:2px;
  background:transparent;color:var(--ink-60);
  font-size:.8rem;letter-spacing:.06em;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s,color .2s;
}
.ajout span{color:var(--terra);font-size:1.05rem;line-height:1}
.ajout:hover{border-color:var(--terra);color:var(--ink)}
.ajout[disabled]{opacity:.4;cursor:default}

/* RSVP : le formulaire prend toute la hauteur, le bouton reste atteignable */
.slide--rsvp{
  padding-top:clamp(16px,3vh,32px);
  padding-bottom:clamp(16px,3vh,32px);
}
.slide--rsvp .slide__in--scroll{
  padding:3vh 4px 5vh;
  mask-image:linear-gradient(180deg,transparent 0%,#000 4%,#000 97%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 4%,#000 97%,transparent 100%);
}
.slide--rsvp .btn--solid{margin-top:1rem}