:root{
  --bg1:#efe7d6;--bg2:#e6dcc7;
  --ink:#2a2523;--burg:#621f2c;--burg-d:#4d1722;--rose:#b09094;
  --gold:#b59a62;--mute:#9a937f;--line:#d6cdb7;--paper1:#faf8f4;--paper2:#f1ebe1;
  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --display:"Playfair Display","Bodoni 72",Didot,Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#e8decb}
body{margin:0;min-height:100dvh;color:var(--ink);font-family:var(--serif);font-size:20px;line-height:1.4;
  background:radial-gradient(1200px 700px at 30% 0%,#f4eee1 0%,transparent 60%),linear-gradient(160deg,var(--bg1),var(--bg2));
  -webkit-tap-highlight-color:transparent;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .38  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hidden{display:none!important}

.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:50}
.progress i{display:block;height:100%;width:0;background:var(--burg);transition:width .7s cubic-bezier(.2,.7,.2,1)}

main{position:relative;min-height:100dvh;display:grid;place-items:center;padding:clamp(20px,5vw,48px) clamp(16px,4vw,32px)}
.screen{width:100%;display:flex;flex-direction:column;align-items:center;animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Enveloppe ---------- */
.envelope{all:unset;cursor:pointer;position:relative;display:block;width:min(78vw,450px);aspect-ratio:3/2;perspective:1200px;border-radius:2px;
  filter:drop-shadow(0 30px 40px rgba(80,55,40,.25));transition:transform .9s cubic-bezier(.5,0,.2,1),opacity .7s .35s;-webkit-tap-highlight-color:transparent}
.envelope:focus-visible{outline:2px solid var(--burg);outline-offset:8px}
.env-body{position:absolute;inset:0;background:linear-gradient(160deg,#efe6d4,#e4d7bf);border-radius:2px}
.env-body::after{content:"";position:absolute;left:10%;right:10%;bottom:16%;height:1px;background:linear-gradient(90deg,transparent,rgba(181,154,98,.55),transparent)}
.env-flap{position:absolute;left:0;right:0;top:0;height:58%;background:linear-gradient(180deg,#f1e9d9,#e8dcc6);
  clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .8s cubic-bezier(.5,0,.2,1);z-index:2}
.seal{position:absolute;left:50%;top:44%;width:15%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 30%,#8a2d40,var(--burg) 60%,#4a1521);box-shadow:0 6px 12px rgba(60,15,25,.45);
  color:#f3e4d0;display:grid;place-items:center;font-size:clamp(14px,3.4vw,22px);transition:opacity .35s,transform .45s}
.envelope.open .seal{opacity:0;transform:translate(-50%,-50%) scale(.6)}
.envelope.open .env-flap{transform:rotateX(180deg)}
.envelope.leave{transform:translateY(40px) scale(.96);opacity:0}
.tap{margin-top:40px;text-align:center;color:var(--burg);animation:float 2.4s ease-in-out infinite}
.tap svg{display:block;margin:0 auto 14px;color:var(--gold)}
@keyframes float{50%{transform:translateY(-5px)}}
.label{font-family:var(--serif);font-size:13px;letter-spacing:.34em;text-transform:uppercase;font-weight:500}
.tap .label{font-size:clamp(15px,3.6vw,19px);letter-spacing:.3em}

/* ---------- Papier ---------- */
.paper{position:relative;width:min(100%,560px);padding:clamp(40px,8vw,64px) clamp(24px,7vw,56px);text-align:center;
  background:linear-gradient(150deg,var(--paper1),var(--paper2));border:1px solid #e4dccb;border-radius:2px;
  box-shadow:0 2px 0 #fff inset,0 30px 60px -20px rgba(80,55,40,.35),0 6px 14px rgba(80,55,40,.12)}
.paper::before{content:"";position:absolute;inset:14px;border:1px solid #ddd3bd;pointer-events:none}
.eyebrow{color:var(--mute);margin:0 0 clamp(22px,4vw,34px)}
h1{font-family:var(--display);font-style:italic;font-weight:500;color:var(--burg);margin:0;line-height:1.15;font-size:clamp(32px,8vw,50px);letter-spacing:-.005em}
.teaser{font-style:italic;color:#7b756a;font-size:clamp(17px,4vw,21px);margin:clamp(22px,4vw,30px) 0 0}

/* ---------- Boutons Oui / Non ---------- */
.arena{position:relative;width:100%;height:clamp(170px,27vh,250px);margin-top:clamp(18px,4vw,34px)}
.row{position:absolute;inset:0;display:flex;gap:clamp(14px,4vw,26px);justify-content:center;align-items:center}
.btn{font-family:var(--serif);font-size:clamp(19px,4.6vw,24px);font-weight:500;letter-spacing:.14em;border-radius:2px;cursor:pointer;padding:.62em 1.9em;line-height:1.2}
.yes{background:var(--burg);color:#f6ece0;border:1px solid var(--burg);box-shadow:0 8px 16px -6px rgba(60,15,25,.55),0 2px 0 var(--burg-d);transition:transform .2s,box-shadow .2s}
.yes:hover{transform:translateY(-2px);box-shadow:0 12px 20px -6px rgba(60,15,25,.55),0 2px 0 var(--burg-d)}
.no{background:transparent;color:var(--burg);border:1px solid #bf9aa0;user-select:none;-webkit-user-select:none;touch-action:none}
.noslot{display:inline-block;visibility:hidden;border:1px solid transparent;cursor:default}
.no.fly{position:absolute;left:0;top:0;z-index:5;transition:transform .2s cubic-bezier(.3,.8,.3,1),opacity .45s;will-change:transform}
.no.gone{opacity:0;pointer-events:none}

/* ---------- Plan & créneaux ---------- */
.plan{font-size:clamp(22px,5vw,28px);margin:clamp(14px,3vw,20px) 0 0;color:var(--ink)}
.where{color:#7b756a;font-style:italic;margin:6px 0 0;font-size:18px}
.detail{color:#5f5a52;font-size:clamp(18px,4.2vw,20px);line-height:1.45;margin:14px auto 0;max-width:42ch}
.day{margin-top:clamp(28px,5vw,40px)}
.day .label{color:var(--mute);margin-bottom:18px;display:block}
.slots{display:flex;flex-wrap:wrap;gap:clamp(10px,2.6vw,20px);justify-content:center}
.slot{font-family:var(--serif);font-size:clamp(20px,4.8vw,24px);font-weight:500;color:var(--ink);background:transparent;border:1.5px solid var(--line);border-radius:2px;
  min-width:68px;padding:.55em .9em;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.slot:hover{border-color:var(--burg)}
.slot[aria-pressed=true]{background:var(--burg);border-color:var(--burg);color:#f6ece0}
.slot:focus-visible,.btn:focus-visible,.cal:focus-visible,.confirm:focus-visible{outline:2px solid var(--burg);outline-offset:3px}
.note-l{display:block;margin:clamp(34px,6vw,48px) 0 6px;color:var(--mute)}
.note{display:block;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:center;font:italic 22px/1.4 var(--serif);color:var(--ink);padding:12px 0;resize:none;outline:none;border-radius:0}
.note:focus{border-bottom-color:var(--burg)}
.note::placeholder{color:#b8b19c}
.confirm{display:block;width:100%;margin-top:clamp(28px,5vw,40px);border:0;border-radius:2px;background:var(--rose);color:#f7efe6;font-family:var(--serif);font-weight:500;
  font-size:clamp(17px,4vw,20px);letter-spacing:.2em;text-transform:uppercase;padding:1em;cursor:not-allowed;box-shadow:0 8px 16px -8px rgba(60,15,25,.35);transition:background .25s,box-shadow .25s}
.confirm:not([disabled]){background:var(--burg);cursor:pointer;box-shadow:0 10px 18px -8px rgba(60,15,25,.6),0 2px 0 var(--burg-d)}
.confirm:not([disabled]):hover{background:var(--burg-d)}
.err{color:var(--burg);font-style:italic;margin:18px 0 0;font-size:18px}
.fallback{margin:12px 0 0;padding:12px;border:1px dashed var(--line);font-size:18px;text-align:left;user-select:all;-webkit-user-select:all;background:rgba(255,255,255,.4)}
.empty{color:#7b756a;font-style:italic;margin-top:30px}

/* ---------- Confirmation ---------- */
.seal-lg{width:clamp(56px,14vw,72px);aspect-ratio:1;border-radius:50%;margin:0 auto clamp(20px,4vw,30px);display:grid;place-items:center;color:#f3e4d0;font-size:26px;
  background:radial-gradient(circle at 35% 30%,#8a2d40,var(--burg) 60%,#4a1521);box-shadow:0 8px 16px rgba(60,15,25,.4)}
.sub{color:#7b756a;font-size:clamp(20px,4.6vw,24px);margin:clamp(14px,3vw,20px) 0 0}
.closing{font-style:italic;color:var(--gold);font-size:clamp(22px,5vw,26px);margin:clamp(30px,6vw,46px) 0 0}
.cal{display:inline-flex;align-items:center;gap:12px;margin-top:28px;background:rgba(250,248,244,.7);color:var(--burg);border:1px solid #bf9aa0;border-radius:2px;
  padding:.85em 1.6em;font-family:var(--serif);font-size:clamp(18px,4.2vw,21px);font-weight:500;letter-spacing:.06em;cursor:pointer}
.cal:hover{background:#fff}

.paper h1,.plan,.where,.detail,.sub,.closing,.fallback,.err,.note{overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Pastille injectée par l hébergeur gratuit */
#nl-badge-frame{display:none!important}