/* Polices hébergées avec le site : aucune requête vers Google */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-cyrillic-400-italic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-cyrillic-500-italic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Marck Script';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marck-script-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Marck Script';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marck-script-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-ext-500-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Marck Script';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marck-script-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}


/* Layout: one scene at a time on a twilight sky; a black cat lives on the horizon, birds cross the sky. */
:root{
  --sky-top:#1a0810; --sky-mid:#3e0f1f; --sky-low:#6f1d31; --horizon:#b8525c;
  --paper:#f7ecdb; --paper-2:#efdcc0; --paper-3:#e3c8a3; --ink:#3a2a2f; --ink-soft:#7a6266; --ink-blue:#5a1222;
  --seal:#7d1a2c; --seal-hi:#c4495b; --seal-lo:#4f121c; --gold:#e9c79a; --glow:#ffe3c2; --twine:#b48a5a;
  --text-on-sky:#f6e9df; --text-on-sky-soft:#dcb3ba; --cat:#2b1622; --cat-far:#1d0e17;
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --hand:"Marck Script","Segoe Script","Apple Chancery","Brush Script MT",cursive;
  --sans:"Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .28 0 0 0 0 .16 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --title:var(--glow); --title-shadow:rgba(255,200,160,.35); --hill-back:#4d1527; --hill-front:#24080f; --bird:#22070f; --star:#ffe9ea;
  color-scheme:dark;
}
/* ---------- Ambiances ---------- */
[data-theme="mer"]{
  --sky-top:#24183f; --sky-mid:#8d3f6e; --sky-low:#e7775a; --horizon:#ffc983;
  --hill-back:#1d5a73; --hill-front:#e3bd88; --bird:#2a1838; --star:#fff4e6;
  --title:#fff1dc; --title-shadow:rgba(255,190,120,.45); --text-on-sky:#fff4ea; --text-on-sky-soft:#ffd9c4;
  --seal:#1f4e6b; --seal-hi:#3f86a8; --seal-lo:#123247; --cat:#2b1a2a; --cat-far:#1e111d;
}
[data-theme="hiver"]{
  --sky-top:#06122a; --sky-mid:#123063; --sky-low:#3a6aa0; --horizon:#a9cbe6;
  --hill-back:#c9d9ea; --hill-front:#f2f6fb; --bird:#0b1830; --star:#e6f1ff;
  --title:#ffffff; --title-shadow:rgba(170,210,255,.55); --text-on-sky:#eef5ff; --text-on-sky-soft:#b9cfe8;
  --seal:#7d1a2c; --seal-hi:#c4495b; --seal-lo:#4f121c;
}
[data-theme="printemps"]{
  --sky-top:#7fbde4; --sky-mid:#bfe0f2; --sky-low:#fbe0ea; --horizon:#fff2d4;
  --hill-back:#a6d38a; --hill-front:#6aa851; --bird:#40303a; --star:#ffffff;
  --title:#8e2443; --title-shadow:rgba(255,255,255,.7); --text-on-sky:#4a2a35; --text-on-sky-soft:#7a5563;
  --seal:#b03a5b; --seal-hi:#e2738f; --seal-lo:#6e1f37; color-scheme:light;
}
[data-theme="mer"] #sky::after{content:"";position:absolute;left:50%;bottom:70px;width:min(46vw,260px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,#fff3c9 0%,#ffd27a 45%,rgba(255,170,90,0) 70%);opacity:.85}
[data-theme="printemps"] #sky::after{content:"";position:absolute;right:12%;top:9%;width:120px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fffbe6 0%,#ffe9a8 40%,rgba(255,233,168,0) 70%)}
[data-theme="printemps"] .hint,[data-theme="printemps"] .again{color:var(--text-on-sky);border-color:rgba(74,42,53,.35)}
[data-theme="printemps"] .again:hover{background:rgba(74,42,53,.08)}
.hills path.back{fill:var(--hill-back)} .hills path.front{fill:var(--hill-front)}
.bird{color:var(--bird)}
html,body{height:100%}
body{margin:0;background:var(--sky-top);color:var(--text-on-sky);font-family:var(--serif);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
#sky{position:fixed;inset:0;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 46%,var(--sky-low) 80%,var(--horizon) 100%);z-index:0}
#stars{position:absolute;inset:0;width:100%;height:100%}
.hills{position:fixed;left:0;right:0;bottom:0;height:96px;z-index:1;pointer-events:none}
.hills.front{z-index:3}
.hills svg{width:100%;height:100%;display:block}


main{position:relative;z-index:2;min-height:100%;display:grid;place-items:center;padding-inline:16px;padding-block:56px 150px;box-sizing:border-box}
.stage{width:100%;max-width:620px;display:flex;flex-direction:column;align-items:center;gap:28px;animation:stageIn 1.1s ease both}
.stage.leaving{animation:stageOut .8s ease forwards}
@keyframes stageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes stageOut{to{opacity:0;transform:translateY(-14px);filter:blur(3px)}}

/* ---------- Envelope ---------- */
.env-wrap{display:flex;flex-direction:column;align-items:center;gap:30px;position:relative}
.env-wrap::before{content:"";position:absolute;left:50%;top:52%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,150,150,.26),rgba(200,60,80,.1) 45%,transparent 68%);pointer-events:none;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6;transform:translate(-50%,-50%) scale(.94)}}
.env-to{font-family:var(--hand);font-size:clamp(34px,9vw,46px);color:var(--title);margin:0;text-align:center;text-shadow:0 0 24px var(--title-shadow);position:relative}
.envelope{position:relative;width:min(350px,84vw);aspect-ratio:1.55;cursor:pointer;border:0;padding:0;background:none;perspective:1400px;
  filter:drop-shadow(0 24px 30px rgba(10,6,25,.55));animation:float 5.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-9px) rotate(-.8deg)}}
.envelope:focus-visible{outline:2px solid var(--gold);outline-offset:10px;border-radius:6px}
.env-back,.env-front,.env-flap-face{background-color:var(--paper);background-image:var(--grain)}
.env-back{position:absolute;inset:0;border-radius:5px;background-image:var(--grain),linear-gradient(165deg,#e9d4b4,#d9bd96)}
.env-letter{position:absolute;left:6%;right:6%;top:7%;height:86%;border-radius:3px;z-index:1;
  background-color:#fffaf1;background-image:var(--grain),repeating-linear-gradient(180deg,transparent 0 17px,rgba(47,59,107,.09) 17px 18px);
  transition:transform 1.4s cubic-bezier(.2,.8,.2,1) .6s;box-shadow:0 2px 6px rgba(0,0,0,.1);text-align:left;padding:14px 18px;box-sizing:border-box}
.env-letter span{font-family:var(--hand);color:var(--ink-blue);font-size:clamp(17px,4.6vw,21px);line-height:1.1;display:block}
.env-front{position:absolute;inset:0;z-index:2;border-radius:5px;background-image:var(--grain),linear-gradient(175deg,#f3e3c9,#e6cca7);
  clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.env-front::before{content:"";position:absolute;inset:0;background:linear-gradient(32deg,transparent 49.4%,rgba(120,80,40,.16) 50%,transparent 50.8%),linear-gradient(-32deg,transparent 49.4%,rgba(120,80,40,.16) 50%,transparent 50.8%)}
.addr{position:absolute;left:9%;max-width:36%;bottom:12%;z-index:3;font-family:var(--hand);color:var(--ink-blue);font-size:clamp(17px,4.8vw,22px);line-height:1.15;text-align:left;transform:rotate(-2deg);pointer-events:none}
.addr small{display:block;font-size:.72em;opacity:.75}
.stamp{position:absolute;right:7%;bottom:10%;z-index:3;width:15%;aspect-ratio:.82;pointer-events:none;transform:rotate(4deg)}
.postmark{position:absolute;right:15%;bottom:24%;z-index:3;width:22%;aspect-ratio:1;pointer-events:none;opacity:.5;transform:rotate(-14deg)}
.env-flap{position:absolute;left:0;right:0;top:0;height:58%;z-index:4;transform-origin:top center;
  transition:transform 1s cubic-bezier(.5,0,.2,1),z-index 0s .5s;transform-style:preserve-3d}
.env-flap-face{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,52% 98%,48% 98%);border-radius:5px 5px 0 0;
  background-image:var(--grain),linear-gradient(180deg,#efdcbd,#dcc19b)}
.env-flap::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:linear-gradient(rgba(70,40,20,.18),transparent);clip-path:polygon(40% 0,60% 0,50% 100%)}
.twine{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;z-index:5;background:repeating-linear-gradient(170deg,var(--twine) 0 3px,#8f6a40 3px 5px);opacity:.9;transition:opacity .5s,transform .7s}
.sprig{position:absolute;left:50%;top:44%;z-index:6;width:30%;transform:translate(-92%,-60%) rotate(-24deg);pointer-events:none;transition:transform .9s ease,opacity .7s}
.seal{position:absolute;left:50%;top:56%;width:68px;height:68px;margin:-34px 0 0 -34px;z-index:7;transition:transform .6s ease,opacity .6s ease}
.seal svg{width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(60,10,20,.55))}
.envelope:hover .seal{transform:scale(1.06) rotate(-4deg)}
.envelope.open{animation:none}
.envelope.open .seal{transform:translateY(-30px) scale(.5) rotate(-30deg);opacity:0}
.envelope.open .twine{opacity:0;transform:scaleY(.2)}
.envelope.open .sprig{transform:translate(-220%,40%) rotate(-80deg);opacity:0}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:0}
.envelope.open .env-letter{transform:translateY(-60%)}
.hint{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-on-sky-soft);animation:pulse 2.6s ease-in-out infinite;margin:0;position:relative}
@keyframes pulse{50%{opacity:.45}}

/* ---------- Name ---------- */
.name{display:flex;gap:6px;justify-content:center}
.name{flex-wrap:wrap;max-width:100%}
.slot{min-width:min(40px,7vw);height:64px;display:grid;place-items:center;border-bottom:1px solid rgba(233,199,154,.35);
  font-family:var(--hand);font-size:44px;color:transparent;transition:color .8s ease,text-shadow .8s ease,border-color .8s}
.slot.on{color:var(--title);text-shadow:0 0 20px var(--title-shadow);border-color:transparent;animation:letterIn 1.1s ease}
@keyframes letterIn{0%{transform:translateY(-16px) scale(1.5);opacity:0;filter:blur(4px)}100%{transform:none;opacity:1;filter:none}}

/* ---------- Question card ---------- */
.card{width:100%;max-width:440px;box-sizing:border-box;color:var(--ink);border-radius:3px;padding:36px 26px 28px;position:relative;text-align:center;
  background-color:#fbf3e6;background-image:var(--grain),repeating-linear-gradient(180deg,transparent 0 31px,rgba(47,59,107,.08) 31px 32px);
  box-shadow:0 26px 50px rgba(10,6,25,.45),inset 0 0 40px rgba(180,130,80,.12)}
.card::before{content:"";position:absolute;top:-11px;left:50%;width:84px;height:22px;margin-left:-42px;background:rgba(233,199,154,.6);transform:rotate(-2deg);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.step{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--seal);margin:0 0 14px}
.question{font-size:clamp(22px,5.6vw,27px);line-height:1.35;margin:0 0 26px;text-wrap:balance;font-style:italic;font-weight:500}
.answers{display:flex;flex-direction:column;gap:12px}
.answers button{font:inherit;font-size:19px;padding:12px 18px;border-radius:999px;border:1px solid rgba(142,36,51,.35);background:rgba(255,255,255,.35);color:var(--ink);
  cursor:pointer;transition:background .3s,color .3s,transform .2s,border-color .3s}
.answers button:hover,.answers button:focus-visible{background:var(--seal);color:#fbeee8;border-color:var(--seal);outline:none;transform:translateY(-1px)}
.reply{min-height:1.4em;margin:20px 0 0;font-family:var(--hand);font-size:22px;color:var(--ink-blue);opacity:0;transition:opacity .6s}
.reply.show{opacity:1}
.card.swap{animation:cardSwap .9s ease}
@keyframes cardSwap{0%{opacity:1}45%{opacity:0;transform:translateY(8px) rotate(-.6deg)}55%{opacity:0;transform:translateY(-8px) rotate(.6deg)}100%{opacity:1;transform:none}}

/* ---------- Flight ---------- */
.flight{position:relative;height:300px;width:100%;display:grid;place-items:end center}
.mini{width:128px;animation:flyAway 4.4s cubic-bezier(.45,0,.3,1) .4s forwards;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.mini svg{width:100%;display:block}
@keyframes flyAway{
  0%{transform:translate(0,0) rotate(0)}
  22%{transform:translate(-36px,-50px) rotate(-9deg)}
  50%{transform:translate(44px,-150px) rotate(11deg) scale(.82)}
  100%{transform:translate(170px,-430px) rotate(-16deg) scale(.28);opacity:0}}
.spark{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px var(--glow);animation:spark 1.6s ease-out forwards;pointer-events:none}
@keyframes spark{to{transform:translate(var(--sx),var(--sy)) scale(.2);opacity:0}}
.flight-line{font-size:clamp(21px,5.4vw,26px);font-style:italic;text-align:center;line-height:1.45;margin:0;text-wrap:balance;opacity:0;animation:fadeUp 1.4s ease 2.2s forwards;max-width:30ch}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Poem ---------- */
.poem{width:100%;max-width:580px;box-sizing:border-box;color:var(--ink);border-radius:2px;position:relative;
  padding:clamp(40px,9vw,70px) clamp(22px,7vw,60px) clamp(36px,8vw,60px);
  background-color:#fbf4e7;background-image:var(--grain),radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(196,150,100,.18));
  box-shadow:0 30px 70px rgba(8,4,20,.55)}
.poem::after{content:"";position:absolute;inset:10px;border:1px solid rgba(142,36,51,.14);pointer-events:none}
.poem .flower{position:absolute;left:-16px;bottom:-26px;width:84px;transform:rotate(-24deg);z-index:1;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.15))}
.dedication{text-align:center;font-family:var(--hand);font-size:clamp(22px,5.6vw,27px);color:var(--seal);margin:0 0 30px;text-wrap:balance;line-height:1.3}
.greet{font-family:var(--hand);font-size:clamp(40px,10vw,54px);margin:0 0 22px;color:var(--ink-blue);line-height:1}
.stanza{margin:0 0 24px}
.line{display:block;font-size:clamp(18px,4.5vw,20.5px);line-height:1.6;padding-left:1em;text-indent:-1em}
.reveal .line,.reveal .greet,.reveal .dedication,.reveal .closing,.reveal .signoff{opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity 1.2s ease,transform 1.2s ease,filter 1.2s ease}
.reveal .in{opacity:1!important;transform:none!important;filter:none!important}
.closing{margin:36px 0 0;padding:24px 0 0;border-top:1px solid rgba(142,36,51,.2);font-style:italic;font-size:clamp(19px,4.8vw,22px);line-height:1.55;color:var(--seal);text-align:center;text-wrap:balance}
.signoff{text-align:right;font-family:var(--hand);font-size:22px;color:var(--ink-soft);margin:26px 0 0}
.again{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:none;border:1px solid rgba(246,233,223,.35);color:var(--text-on-sky);
  padding:11px 20px;border-radius:999px;cursor:pointer;transition:background .3s}
.again:hover,.again:focus-visible{background:rgba(246,233,223,.12);outline:none}

/* ---------- Birds ---------- */
.bird{position:fixed;z-index:1;pointer-events:none;left:-60px}
.bird svg{width:100%;height:100%;overflow:visible}
.bird .w{transform-origin:17px 10px;animation:flap .5s ease-in-out infinite alternate}
@keyframes flap{to{transform:scaleY(-.55)}}
.bird.fly{animation:birdFly linear forwards}
@keyframes birdFly{from{transform:translate(0,0)}to{transform:translate(calc(100vw + 120px),var(--dy,-80px))}}

/* ---------- Cat (moved by script) ---------- */
#cat{position:fixed;left:0;bottom:19px;z-index:4;width:120px;height:80px;cursor:pointer;touch-action:manipulation}
#cat svg{width:100%;height:100%;overflow:visible;display:block}
#cat-hint{position:fixed;left:0;bottom:104px;z-index:4;pointer-events:none;white-space:nowrap;
  font-family:var(--hand);font-size:16px;color:var(--title);text-shadow:0 1px 8px rgba(30,5,12,.55);
  transition:opacity .8s ease;animation:hintGlow 3s ease-in-out infinite}
#cat-hint.gone{opacity:0}
@keyframes hintGlow{50%{opacity:.65}}
.heart-pop{position:fixed;z-index:5;font-size:16px;color:#ff8fa0;pointer-events:none;animation:heartPop 1.8s ease-out forwards}
@keyframes heartPop{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translateY(-60px) scale(1.2)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}
}

:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* ---------- Fin de lettre ---------- */
.end-actions{display:flex;flex-direction:column;align-items:center;gap:14px}
.reply-cta{font-family:var(--sans);font-size:14px;letter-spacing:.02em;text-decoration:none;color:#fff6ef;padding:13px 22px;border-radius:999px;
  background:linear-gradient(160deg,var(--seal-hi),var(--seal));box-shadow:0 10px 26px rgba(10,2,6,.35);transition:transform .2s}
.reply-cta:hover,.reply-cta:focus-visible{transform:translateY(-2px);outline:none}
.heart-rain{position:fixed;top:-40px;z-index:8;pointer-events:none;animation:heartRain linear forwards;text-shadow:0 2px 6px rgba(80,10,25,.35)}
@keyframes heartRain{0%{transform:translate(0,0) rotate(-10deg);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx),calc(100vh + 80px)) rotate(20deg);opacity:.9}}