@import url(lay2-common.css?v=1);
.lay-papier{--c1:#7C8C6E;--c2:#B9C4A9;--c3:#B2503F;--c4:#F1E7D6;--ink:#3A3328;--serif:"Cormorant Garamond",Georgia,serif;--script:"Parisienne","Brush Script MT",cursive;
  --bg:color-mix(in srgb,var(--c2) 55%,var(--c4));--fg:var(--ink);--acc:var(--c1);--acc-ink:#fff;--ln:color-mix(in srgb,var(--ink) 30%,transparent);--r:6px;--r2:6px;--paper:var(--c4);--paper2:color-mix(in srgb,var(--c4) 70%,#fff)}
.lay-papier{font-family:"Jost",system-ui,sans-serif}
.lay-papier main{overflow:hidden;padding-bottom:30px}

/* sceau de cire */
.lay-papier .seal{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50% 46% 52% 48%/48% 52% 46% 50%;border:0;color:#fff;cursor:pointer;font-family:var(--script);font-size:26px;
  background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--c3) 60%,#fff),var(--c3) 45%,color-mix(in srgb,var(--c3) 70%,#000));
  box-shadow:0 6px 14px rgba(60,20,10,.4),inset 0 0 0 5px color-mix(in srgb,var(--c3) 80%,#000),inset 0 0 0 7px rgba(255,255,255,.15)}
.lay-papier .seal span{text-shadow:0 1px 2px rgba(0,0,0,.4)}
.lay-papier .seal-btn{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);transition:transform .8s,opacity .6s;animation:seal 2.4s ease-in-out infinite}
@keyframes seal{50%{transform:translateX(-50%) scale(1.07)}}
.lay-papier .seal-s{position:absolute;right:22px;bottom:16px;width:62px;height:62px;font-size:19px;transform:rotate(-8deg)}

/* porte */
.lay-papier .gate{background:radial-gradient(80% 60% at 50% 40%,color-mix(in srgb,var(--c4) 80%,#fff),var(--bg))}
.lay-papier .pg-sheet{position:relative;width:min(86vw,360px);transition:transform 1.6s cubic-bezier(.6,0,.2,1),opacity 1s ease .6s;filter:drop-shadow(0 18px 24px rgba(60,40,20,.28))}
.lay-papier .pg-in{background:var(--paper);padding:56px 24px 64px;text-align:center;
  background-image:repeating-linear-gradient(0deg,rgba(120,90,50,.035) 0 2px,transparent 2px 5px)}
.lay-papier .pg-s{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--c1)}
.lay-papier .pg-n{font-family:var(--script);font-size:46px;line-height:1.1;color:var(--ink);margin:12px 0 10px}
.lay-papier .pg-f{font-size:15px;opacity:.85}
.lay-papier .pg-h{text-align:center;margin-top:34px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.7}
.lay-papier .gate.is-open .pg-sheet{transform:translateY(-110vh) rotate(-5deg)}
.lay-papier .gate.is-open .seal-btn{animation:none;transform:translateX(-50%) scale(1.3) rotate(18deg);opacity:0}

/* photo */
.lay-papier .p-photo{position:relative;height:min(78svh,560px);filter:none;margin-bottom:-60px}
.lay-papier .p-photo-in{position:absolute;inset:0;background:var(--cover) center/cover,linear-gradient(160deg,var(--c2),var(--c1))}
.lay-papier .p-photo-in::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.28))}
.lay-papier .p-tag{position:absolute;left:0;right:0;bottom:84px;text-align:center;color:#fff;font-size:13px;letter-spacing:.34em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.45)}

/* feuilles */
.lay-papier .sh-w{position:relative;max-width:560px;margin:-14px auto 0;filter:drop-shadow(0 8px 10px rgba(60,40,20,.2))}
.lay-papier .sheet{position:relative;background:var(--paper);padding:56px 28px 60px;text-align:center;
  background-image:repeating-linear-gradient(0deg,rgba(120,90,50,.03) 0 2px,transparent 2px 5px),radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.5),transparent 60%)}
.lay-papier .sheet-alt{background-color:var(--paper2)}
.lay-papier .sh-first{margin-top:0;z-index:2}
.lay-papier .sh-first .sheet{padding-top:64px;padding-bottom:70px}
.lay-papier .p-intro{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--c1);line-height:1.8}
.lay-papier .p-names{font-family:var(--script);font-weight:400;font-size:clamp(48px,15vw,74px);line-height:1.04;color:var(--ink);margin:14px 0 10px;display:flex;flex-direction:column;align-items:center}
.lay-papier .p-names em{font-family:var(--serif);font-style:italic;font-size:.4em;color:var(--c3)}
.lay-papier .p-date{font-size:14px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.lay-papier .p-where{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-family:var(--serif);font-size:19px;font-style:italic}
.lay-papier .p-where .ic2{width:20px;height:20px;color:var(--c3)}
.lay-papier .p-outro{margin-top:20px;font-family:var(--serif);font-style:italic;font-size:19px;opacity:.85}
.lay-papier .k2{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--c3);font-weight:500;margin-bottom:10px}
.lay-papier .sh{font-family:var(--script);font-weight:400;font-size:clamp(38px,11vw,52px);color:var(--ink);line-height:1.1;margin-bottom:24px}
.lay-papier .p-verse{font-family:var(--serif);font-style:italic;font-size:clamp(24px,6vw,30px);line-height:1.35;color:var(--c1)}
.lay-papier .p-msg{margin-top:22px;font-size:17px;line-height:1.75}
.lay-papier .cal{color:var(--c1)}
.lay-papier .cal-g{color:var(--ink)}
.lay-papier .cal-g .on em{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--c3);border-radius:50%;font-weight:600}
.lay-papier .p-cd{max-width:380px;margin:26px auto 0;border-top:1px dashed var(--ln);padding-top:22px}
.lay-papier .p-cd b{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--c1)}
.lay-papier .p-cd span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.lay-papier .p-tl{padding-left:8px}
.lay-papier .p-tl .tl-i{border-left:2px solid var(--c1);padding-left:16px;grid-template-columns:76px 1fr}
.lay-papier .p-tl .tl-t b{font-family:var(--serif);color:var(--c3);font-size:25px}
.lay-papier .p-tl .tl-b h3{color:var(--ink)}
.lay-papier .p-tl .tl-b .lnk{color:var(--c1)}
.lay-papier .blk-act{margin-top:30px}
.lay-papier .sheet>.ic2{width:32px;height:32px;color:var(--c1);margin:0 auto 6px}
.lay-papier .p-gal{gap:8px}
.lay-papier .p-gal figure{background:#fff;padding:7px 7px 24px;box-shadow:0 4px 10px rgba(60,40,20,.2);transform:rotate(-1.4deg)}
.lay-papier .p-gal figure:nth-child(even){transform:rotate(1.6deg)}
.lay-papier .p-gal img{aspect-ratio:1;object-fit:cover}
.lay-papier .p-ticket .rf{text-align:left;margin-top:20px}
.lay-papier .p-ticket{border-top:0}
.lay-papier .pi{text-align:left}
.lay-papier .pi-name{color:var(--c1)}
.lay-papier .foot{color:var(--ink);opacity:.8}
.lay-papier .mus{--acc:var(--c1)}
