/* Modele ENVELOPPE : enveloppe verte, carte unique, musique, compte a rebours, calendrier, frise a icones. */
@font-face{font-family:"Playfair Display";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/playfair-display-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:500;font-style:italic;font-display:swap;src:url(fonts/playfair-display-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Dancing Script";font-weight:500;font-display:swap;src:url(fonts/dancing-script-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-display:swap;src:url(fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2")}

.lay-enveloppe{--g:#2F4A3C;--g2:#3F6350;--g3:#7C9A82;--cream:#FBF6EC;--ink:#2c3a31;--gold:#B8975A;
  --serif:"Playfair Display",Georgia,serif;--script:"Dancing Script","Brush Script MT",cursive;
  background:var(--g);color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;
  background-image:radial-gradient(circle at 15% 12%,rgba(255,255,255,.07) 0 80px,transparent 81px),radial-gradient(circle at 88% 40%,rgba(255,255,255,.05) 0 130px,transparent 131px),radial-gradient(circle at 10% 85%,rgba(255,255,255,.06) 0 100px,transparent 101px)}

/* porte : enveloppe qui s'ouvre */
.lay-enveloppe .gate{background:var(--g)}
.lay-enveloppe .e-scene{text-align:center;color:var(--cream);perspective:900px}
.lay-enveloppe .e-env{position:relative;width:min(320px,82vw);aspect-ratio:3/2;margin:0 auto}
.lay-enveloppe .e-back{position:absolute;inset:0;background:#3a5a47;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.45)}
.lay-enveloppe .e-card{position:absolute;left:6%;right:6%;top:8%;bottom:6%;background:var(--cream);color:var(--ink);border-radius:4px;padding:16px 10px;display:flex;flex-direction:column;justify-content:center;gap:6px;align-items:center;text-align:center;transition:transform 1s cubic-bezier(.5,0,.2,1) .7s;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.lay-enveloppe .e-card p{font:italic 500 12px var(--serif);opacity:.8}
.lay-enveloppe .e-card b{font:500 22px/1.15 var(--serif)}
.lay-enveloppe .e-card small{font-size:11px;opacity:.7}
.lay-enveloppe .e-front{position:absolute;inset:0;background:#4a6f5a;clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);border-radius:6px}
.lay-enveloppe .e-flap{position:absolute;left:0;right:0;top:0;height:62%;background:#55806a;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .8s ease;z-index:3}
.lay-enveloppe .e-seal{position:absolute;z-index:4;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9bb7d,var(--gold) 60%,#8f7137);color:#fff;font:500 15px var(--serif);cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.4);transition:opacity .3s,transform .3s;animation:pulse 2s ease-in-out infinite}
.lay-enveloppe .e-hint{margin-top:30px;font:italic 500 15px var(--serif);opacity:.85}
@keyframes pulse{50%{transform:scale(1.08)}}
.lay-enveloppe .gate.is-open .e-seal{opacity:0;animation:none;pointer-events:none}
.lay-enveloppe .gate.is-open .e-flap{transform:rotateX(180deg);z-index:1}
.lay-enveloppe .gate.is-open .e-card{transform:translateY(-62%)}
.lay-enveloppe .gate.is-open .e-hint{opacity:0;transition:opacity .3s}

/* la carte */
.lay-enveloppe .paper{max-width:560px;margin:0 auto;padding:0 0 10px;background:var(--cream);border-radius:0 0 28px 28px;box-shadow:0 30px 70px rgba(0,0,0,.35);position:relative;margin-top:0}
@media (min-width:640px){.lay-enveloppe main{padding:34px 16px}.lay-enveloppe .paper{border-radius:28px}}
.lay-enveloppe .top{text-align:center;padding:46px 26px 34px}
.lay-enveloppe .arch{width:min(250px,64vw);aspect-ratio:5/6.4;margin:0 auto 26px;border-radius:999px 999px 14px 14px;padding:8px;border:1.5px solid var(--gold)}
.lay-enveloppe .arch span{display:block;width:100%;height:100%;border-radius:999px 999px 8px 8px;background-size:cover;background-position:center;background-color:var(--g3)}
.lay-enveloppe .intro{font:italic 500 16px/1.7 var(--serif);color:var(--g2)}
.lay-enveloppe .top h1{font:500 clamp(42px,13vw,66px)/1.05 var(--serif);color:var(--g);margin:14px 0 10px;display:flex;flex-direction:column;align-items:center}
.lay-enveloppe .top h1 em{font:500 .8em var(--script);color:var(--gold);line-height:1}
.lay-enveloppe .outro{font:italic 500 16px/1.7 var(--serif);color:var(--g2)}
.lay-enveloppe .when{margin-top:20px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--g)}

.lay-enveloppe .blk{padding:38px 26px;border-top:1px solid rgba(47,74,60,.14);text-align:center}
.lay-enveloppe .blk::before{content:"";display:block;width:28px;height:28px;margin:-52px auto 14px;background:var(--cream);border-radius:50%;box-shadow:0 0 0 6px var(--cream)}
.lay-enveloppe .blk h2{font:500 36px/1.1 var(--script);color:var(--g);margin-bottom:22px}
.lay-enveloppe .note{font:italic 500 19px/1.7 var(--serif);color:var(--g)}

/* compte a rebours : boites */
.lay-enveloppe .boxes{gap:8px}
.lay-enveloppe .boxes>div{background:var(--g);color:var(--cream);border-radius:14px;padding:16px 2px 12px}
.lay-enveloppe .boxes b{font:500 clamp(26px,8vw,38px)/1 var(--serif)}
.lay-enveloppe .boxes span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-top:8px;opacity:.85}

/* calendrier */
.lay-enveloppe .cal-m{font:500 22px var(--serif);color:var(--g)}
.lay-enveloppe .cal-g .on em{background:var(--g);color:var(--cream)}
.lay-enveloppe .cal-g b{color:var(--g)}

/* frise a icones */
.lay-enveloppe .steps{position:relative;text-align:left;display:grid;gap:26px}
.lay-enveloppe .steps::before{content:"";position:absolute;left:21px;top:10px;bottom:10px;border-left:2px dashed var(--g3);opacity:.6}
.lay-enveloppe .step{display:grid;grid-template-columns:44px 1fr;gap:16px;position:relative}
.lay-enveloppe .step-ic{width:44px;height:44px;border-radius:50%;background:var(--g);color:var(--cream);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px var(--cream)}
.lay-enveloppe .step-ic .ic{width:22px;height:22px}
.lay-enveloppe .step-t{font:700 13px "Hanken Grotesk";letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.lay-enveloppe .step-b h3{font:500 24px/1.2 var(--serif);color:var(--g);margin:2px 0 4px}
.lay-enveloppe .step-p{font-size:15px;opacity:.85}
.lay-enveloppe .step-d{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:14px;flex-wrap:wrap}
.lay-enveloppe .step-d>.ic{color:var(--g3);width:24px;height:24px}
.lay-enveloppe .pill{display:inline-block;margin-top:14px;border:1.5px solid var(--g);color:var(--g);border-radius:999px;padding:9px 20px;font-size:13px;text-decoration:none;transition:background .2s,color .2s}
.lay-enveloppe .pill:hover{background:var(--g);color:var(--cream)}
.lay-enveloppe .dressbox{display:flex;justify-content:center}
.lay-enveloppe .dressbox p{font:italic 500 20px var(--serif);color:var(--g)}
.lay-enveloppe .sw{justify-content:center}
.lay-enveloppe .rounded figure{border-radius:16px;overflow:hidden}
.lay-enveloppe .rounded img{aspect-ratio:4/5}

/* reponse + pass */
.lay-enveloppe .rf{text-align:left}
.lay-enveloppe .rf-choice span{border-color:var(--g);color:var(--g);border-radius:999px}
.lay-enveloppe .rf-choice input:checked+span,.lay-enveloppe .drink input:checked+span{background:var(--g);color:var(--cream)}
.lay-enveloppe .rf-field textarea{border-color:rgba(47,74,60,.35);border-radius:14px}
.lay-enveloppe .rf-btn{background:var(--g);color:var(--cream);border-radius:999px}
.lay-enveloppe .form-msg.err{color:#b3261e}
.lay-enveloppe .pi{text-align:left;background:#fff;border-radius:18px;padding:20px;box-shadow:0 8px 24px rgba(47,74,60,.12)}
.lay-enveloppe .pi-name{font:500 24px var(--serif);color:var(--g)}
.lay-enveloppe .pi-qr{border:1px solid rgba(47,74,60,.2)}
.lay-enveloppe .foot{color:var(--g)}

/* lecteur de musique */
.lay-enveloppe .mus{position:fixed;top:12px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);background:rgba(47,74,60,.94);color:var(--cream);padding:9px 18px;box-shadow:0 8px 20px rgba(0,0,0,.35);backdrop-filter:blur(6px);font-size:13px;letter-spacing:.06em}
.lay-enveloppe .mus .mus-t,.lay-enveloppe .mus .mus-eq{display:flex}
.lay-enveloppe .top{padding-top:70px}