@font-face{font-family:ShowcaseDM;src:url('assets/dm-regular.ttf');font-display:swap}@font-face{font-family:ShowcaseInstrument;src:url('assets/instrument-regular.ttf');font-display:swap}
*{box-sizing:border-box}.example-showcase{margin:0;color:#27362d;background:radial-gradient(ellipse at 50% 38%,#fffaf2 0,#f3eee4 68%);font:14px/1.6 ShowcaseDM,Arial,sans-serif;min-height:100svh}
.showcase-header{width:min(1180px,100% - 64px);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:24px 0 20px}
.showcase-back{justify-self:start;display:inline-flex;align-items:center;gap:14px;padding:13px 22px;min-height:50px;background:#26392e;color:#fffaf2;text-decoration:none;font-size:14px;border:1px solid #26392e;box-shadow:0 5px 16px #24352d0d;transition:background .2s,transform .2s}.showcase-back:hover{background:#3b5142;transform:translateY(-1px)}.showcase-back span{font-size:20px}.showcase-back:focus-visible{outline:2px solid #947545;outline-offset:5px}
.showcase-heading{text-align:center}.showcase-heading p{font-size:8px;letter-spacing:.17em;color:#876c42;margin:0 0 5px}.showcase-heading h1{font:400 36px/1.1 ShowcaseInstrument,Georgia,serif;margin:0 0 3px}.showcase-heading>span{font-size:11px;color:#7a776e}
.showcase-main{padding:0 32px 18px}.showcase-frame{width:min(880px,100%);height:clamp(440px,calc(100svh - 186px),760px);margin:0 auto;border:1px solid #bca989;padding:9px;background:linear-gradient(135deg,#fffdf7,#eadfcb);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #b4a08255,0 2px 0 #d5c4a7,0 7px 0 -3px #bcaa8c,0 12px 19px -9px #282f2590,0 34px 54px -14px #28332660,0 65px 100px -34px #40382c55;overflow:hidden}.showcase-frame iframe{display:block;width:100%;height:100%;border:0;background:#f7f4ed}.showcase-hint{text-align:center;margin:14px auto 0;font-size:11px;color:#746f62}.example-showcase[data-creation="portfolio"] .showcase-frame{width:min(1030px,100%)}
@media(max-width:760px){.showcase-header{width:calc(100% - 32px);grid-template-columns:1fr;gap:13px;padding:15px 0}.showcase-back{padding:10px 17px;min-height:46px;font-size:13px}.showcase-heading h1{font-size:31px}.showcase-heading p{font-size:7px}.showcase-heading>span{font-size:10px}.showcase-main{padding:0 16px 16px}.showcase-frame{height:calc(100svh - 232px);min-height:390px;padding:6px;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #b4a08255,0 2px 0 #d5c4a7,0 6px 0 -3px #bcaa8c,0 12px 19px -9px #282f2580,0 26px 40px -12px #28332665}.showcase-hint{font-size:10px;max-width:300px;line-height:1.6;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.showcase-back{transition:none}}
/* À l'intérieur du cadre : conserver uniquement la création et ses interactions. */
html[data-example-embedded] .preview-bar,html[data-example-embedded] .preview-note,html[data-example-embedded] .preview-head,html[data-example-embedded] .preview-foot,html[data-example-embedded] .demo-nav{display:none!important}
/* Dimensions propres à la fenêtre de démonstration. */
html[data-example-embedded="mariage"]{scroll-padding-top:60px}
html[data-example-embedded="mariage"] .wedding-header{height:60px;padding-inline:5vw}
html[data-example-embedded="mariage"] .wedding-header nav{gap:18px;font-size:10px}
html[data-example-embedded="mariage"] .hero{min-height:0;height:calc(100svh - 60px);padding:25px 6vw 70px}
html[data-example-embedded="mariage"] .hero h1{font-size:clamp(52px,10vw,100px);margin:18px 0}
html[data-example-embedded="mariage"] .hero-line{font-size:28px}
html[data-example-embedded="mariage"] .hero-date{margin:22px 0 18px}
html[data-example-embedded="mariage"] .hero-bottom{bottom:20px}
html[data-example-embedded="mariage"] .invitation-section{padding:20px 5vw;gap:5%;min-height:calc(100svh - 60px);overflow:visible}
html[data-example-embedded="mariage"] .invitation-aside h2{font-size:46px;margin:15px 0}
html[data-example-embedded="mariage"] .paper-scene{max-width:400px;zoom:var(--example-card-fit,1)}
html[data-example-embedded="mariage"] :is(.invitation-paper,.paper-content){min-height:0}
html[data-example-embedded="mariage"] .paper-content{padding:26px 22px 24px}
html[data-example-embedded="mariage"] .paper-content h2{font-size:52px;margin:14px 0 10px}
html[data-example-embedded="mariage"] .paper-content svg{height:42px}
html[data-example-embedded="mariage"] .paper-invitation{font-size:22px}
html[data-example-embedded="mariage"] .paper-date{margin:13px 0}
html[data-example-embedded="mariage"] .paper-date strong{font-size:31px}
html[data-example-embedded="mariage"] .paper-location{font-size:23px}
html[data-example-embedded="mariage"] .paper-message{margin:12px 0;line-height:1.7}
html[data-example-embedded="mariage"] .paper-signature{font-size:18px;margin-top:14px}
html[data-example-embedded="mariage"] .paper-next{margin-top:15px}
html[data-example-embedded="mariage"] .paper-next>span{margin-bottom:9px}
html[data-example-embedded="mariage"] .paper-caption{font-size:18px;margin-top:14px}
html[data-example-embedded="mariage"] .vellum-names{font-size:78px}
html[data-example-embedded="mariage"] .vellum-small{top:34px}
html[data-example-embedded="mariage"] .vellum-seal{bottom:90px;width:72px;height:72px}
html[data-example-embedded="mariage"] .vellum-open{bottom:42px}
html[data-example-embedded="invitation"]{scroll-padding-top:0}
html[data-example-embedded="invitation"] .party-header{height:64px;padding-inline:5vw}
html[data-example-embedded="invitation"] .signature{font-size:27px}
html[data-example-embedded="invitation"] .signature span{font-size:7px;margin-top:4px}
html[data-example-embedded="invitation"] .hero{min-height:0;height:calc(100svh - 64px);padding:30px 5vw 55px}
html[data-example-embedded="invitation"] .hero-eyebrow{margin-bottom:20px}
html[data-example-embedded="invitation"] .hero h1{font-size:clamp(50px,7.5vw,80px)}
html[data-example-embedded="invitation"] .hero-intro{margin:16px 0 20px;font-size:12px}
html[data-example-embedded="invitation"] .hero-date{margin-top:20px}
html[data-example-embedded="invitation"] .photo-label{bottom:60px;font-size:7px;padding:12px}
html[data-example-embedded="invitation"] .letter-section{padding:18px 5vw;min-height:100svh}
html[data-example-embedded="invitation"] .section-heading{margin-bottom:12px}
html[data-example-embedded="invitation"] .section-heading .aside{font-size:18px}
html[data-example-embedded="invitation"] .letter-wrap{padding:12px 22px 20px;max-width:660px;zoom:var(--example-card-fit,1)}
html[data-example-embedded="invitation"] .folded-letter{height:auto;min-height:0}
html[data-example-embedded="invitation"] .letter-content{padding:26px 20px 24px}
html[data-example-embedded="invitation"] .letter-content h2{font-size:42px;margin:12px 0}
html[data-example-embedded="invitation"] .letter-message{font-size:11px;line-height:1.65}
html[data-example-embedded="invitation"] .letter-date{margin:14px 0 8px}
html[data-example-embedded="invitation"] .letter-date>strong{font-size:60px}
html[data-example-embedded="invitation"] .letter-place{margin:10px 0}
html[data-example-embedded="invitation"] .letter-sign{margin-top:12px}
html[data-example-embedded="invitation"] .letter-next{margin-top:16px;padding-top:14px}
html[data-example-embedded="invitation"] .letter-next>p{margin-bottom:10px}
html[data-example-embedded="invitation"] .letter-next>span{margin-top:8px}
html[data-example-embedded="invitation"] .paper-note{margin-top:0;font-size:15px}
html[data-example-embedded="portfolio"] #preview:has(.cp-portfolio){margin:0;padding:0;max-width:none}
html[data-example-embedded="portfolio"] .cp-nav{height:60px;padding:10px 24px}
html[data-example-embedded="portfolio"] .cp-home-stage{min-height:0;height:calc(100svh - 60px)}
html[data-example-embedded="portfolio"] .cp-home-stage h1{font-size:clamp(50px,8.5vw,95px);margin-top:14px}
html[data-example-embedded="portfolio"] .cp-stage-note>p{font-size:11px}
@media(max-width:760px){
 html[data-example-embedded="mariage"] .wedding-header{height:54px}
 html[data-example-embedded="mariage"]{scroll-padding-top:54px}
 html[data-example-embedded="mariage"] .hero{height:calc(100svh - 54px);padding:24px 6vw 65px}
 html[data-example-embedded="mariage"] .hero h1{font-size:clamp(45px,15vw,68px)}
 html[data-example-embedded="mariage"] .hero-line{font-size:25px}
 html[data-example-embedded="mariage"] .hero-bottom{left:22px;right:22px;font-size:5px}
 html[data-example-embedded="mariage"] .invitation-section{min-height:calc(100svh - 54px);padding:14px 6vw}
 html[data-example-embedded="mariage"] .invitation-aside{margin-bottom:12px}
 html[data-example-embedded="mariage"] .invitation-aside h2{font-size:27px;margin:4px 0}
 html[data-example-embedded="mariage"] .invitation-aside .eyebrow{font-size:7px}
 html[data-example-embedded="mariage"] .invitation-aside>p:last-of-type{font-size:9px;line-height:1.5}
 html[data-example-embedded="mariage"] .invitation-aside .aside-date{display:none}
 html[data-example-embedded="mariage"] .paper-content h2{font-size:45px}
 html[data-example-embedded="mariage"] .paper-content{padding:22px 18px}
 html[data-example-embedded="invitation"] .hero{display:block;padding:26px 5vw 44px}
 html[data-example-embedded="invitation"] .hero-photo{position:absolute;inset:0 0 0 auto;width:100%;height:100%;margin:0;z-index:-1}
 html[data-example-embedded="invitation"] .photo-wash{background:linear-gradient(90deg,#f3eee5f5,#f3eee5d9 60%,#f3eee53d)}
 html[data-example-embedded="invitation"] .hero h1{font-size:clamp(48px,16vw,64px)}
 html[data-example-embedded="invitation"] .hero-eyebrow{font-size:6px;margin-bottom:20px}
 html[data-example-embedded="invitation"] .hero-caption{position:absolute;left:5vw;bottom:15px;font-size:5px}
 html[data-example-embedded="invitation"] .photo-label{display:none}
 html[data-example-embedded="invitation"] .letter-wrap{padding-inline:6px;max-width:430px}
 html[data-example-embedded="invitation"] .letter-content h2{font-size:36px}
 html[data-example-embedded="portfolio"] .cp-nav{height:86px;padding:10px 20px;gap:4px}
 html[data-example-embedded="portfolio"] .cp-nav nav{font-size:9px}
 html[data-example-embedded="portfolio"] .cp-wordmark{font-size:28px!important}
 html[data-example-embedded="portfolio"] .cp-home-stage{height:calc(100svh - 86px)}
 html[data-example-embedded="portfolio"] .cp-stage-edition{top:55px;font-size:5px}
 html[data-example-embedded="portfolio"] .cp-stage-note{bottom:11%}
 html[data-example-embedded="portfolio"] .cp-stage-note>p{font-size:8px}
 html[data-example-embedded="portfolio"] .cp-home-stage .cp-hero-foot{bottom:16px;font-size:5px}
}

html[data-example-embedded="invitation"] .hero{padding-top:20px;padding-bottom:45px}
html[data-example-embedded="invitation"] .hero h1{font-size:clamp(40px,min(7.5vw,10svh),72px)}
html[data-example-embedded="invitation"] .hero-eyebrow{margin-bottom:14px}
html[data-example-embedded="invitation"] .hero-intro{margin:12px 0 16px}
html[data-example-embedded="invitation"] .hero-date{margin-top:14px}
html[data-example-embedded="invitation"] .hero-date>i{font-size:20px}
html[data-example-embedded="mariage"] .paper-scene{display:flex;flex-direction:column;align-items:center}
html[data-example-embedded="mariage"] .invitation-paper{width:100%}
@media(max-width:760px){
 html[data-example-embedded="invitation"] .hero h1{font-size:clamp(38px,min(16vw,10svh),60px)}
 html[data-example-embedded="invitation"] .hero-intro{font-size:11px}
 html[data-example-embedded="invitation"] .hero-date{gap:12px;font-size:10px}
 html[data-example-embedded="invitation"] .hero-date>i{font-size:18px;padding-left:12px}
 html[data-example-embedded="mariage"] .invitation-aside .aside-date{display:none}
}

@media(max-width:760px){html[data-example-embedded="invitation"] .section-heading{display:block;text-align:center;margin-bottom:10px}html[data-example-embedded="invitation"] .section-heading .aside{text-align:center;margin-top:5px;font-size:18px}html[data-example-embedded="mariage"] .invitation-aside .aside-date{display:none}}

/* Ouverture au défilement : conserver la présentation de la carte. */
html[data-example-embedded="mariage"] .invitation-section{overflow:hidden}
html[data-example-embedded="mariage"] .vellum-open{font:italic 24px/1.3 Instrument,Georgia,serif;letter-spacing:0;color:#526146;bottom:36px;left:20px;right:20px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

/* Une ouverture douce, après un temps pour découvrir le sceau. */
@media(prefers-reduced-motion:no-preference){
 html[data-example-embedded="mariage"] .invitation-paper{transition:transform 3.8s cubic-bezier(.4,0,.2,1)}
 html[data-example-embedded="mariage"] .vellum{transition:transform 3.8s cubic-bezier(.4,0,.2,1)}
 html[data-example-embedded="mariage"] .paper-content{transition:opacity 1.4s 1.1s,transform 2.4s .8s}
}

/* Réserver la largeur des deux pages, puis ajuster l’ensemble au cadre. */
html[data-example-embedded="mariage"] .invitation-section{grid-template-columns:minmax(0,.28fr) minmax(0,1fr);gap:3%}
html[data-example-embedded="mariage"] .paper-scene{width:760px;max-width:none}
html[data-example-embedded="mariage"] .vellum-inside .inside-message{font-size:36px}
@media(max-width:760px){
 html[data-example-embedded="mariage"] .paper-scene{width:620px}
 html[data-example-embedded="mariage"] .vellum-names{font-size:68px}
 html[data-example-embedded="mariage"] .vellum-inside .inside-message{font-size:32px}
}

/* À l’ouverture, laisser toute la place au faire-part. */
html[data-example-embedded="mariage"] .invitation-section.book-expanded{grid-template-columns:minmax(0,1fr)}
html[data-example-embedded="mariage"] .book-expanded .invitation-aside{display:none}
html[data-example-embedded="mariage"] .book-expanded .paper-scene{width:1000px}
html[data-example-embedded="mariage"] .book-expanded .paper-content{padding:16px 24px}
html[data-example-embedded="mariage"] .book-expanded .paper-content h2{font-size:64px;margin:8px 0 4px}
html[data-example-embedded="mariage"] .book-expanded .paper-content svg{height:32px}
html[data-example-embedded="mariage"] .book-expanded .paper-invitation{font-size:25px}
html[data-example-embedded="mariage"] .book-expanded .paper-date{margin:9px 0}
html[data-example-embedded="mariage"] .book-expanded .paper-date strong{font-size:36px}
html[data-example-embedded="mariage"] .book-expanded .paper-location{font-size:26px}
html[data-example-embedded="mariage"] .book-expanded .paper-message{font-size:12px;margin:8px 0;line-height:1.6}
html[data-example-embedded="mariage"] .book-expanded .paper-signature{font-size:23px;margin-top:10px}
html[data-example-embedded="mariage"] .book-expanded .paper-next{margin-top:10px}
html[data-example-embedded="mariage"] .book-expanded .paper-next>span{margin-bottom:6px}
html[data-example-embedded="mariage"] .book-expanded .inside-message{font-size:48px}
@media(max-width:760px){
 html[data-example-embedded="mariage"] .book-expanded .paper-scene{width:520px}
 html[data-example-embedded="mariage"] .book-expanded .paper-content{padding:18px 16px}
 html[data-example-embedded="mariage"] .book-expanded .paper-content h2{font-size:42px}
 html[data-example-embedded="mariage"] .book-expanded .paper-invitation{font-size:23px}
 html[data-example-embedded="mariage"] .book-expanded .paper-date strong{font-size:32px}
 html[data-example-embedded="mariage"] .book-expanded .paper-location{font-size:23px}
 html[data-example-embedded="mariage"] .book-expanded .paper-signature{font-size:20px}
 html[data-example-embedded="mariage"] .book-expanded .inside-message{font-size:31px}
}

/* Répartir le texte dans la hauteur disponible, sans déformer les pages. */
html[data-example-embedded="mariage"] .book-expanded .paper-content{min-height:var(--example-page-height,0px);display:flex;flex-direction:column;align-items:center;justify-content:space-between}
html[data-example-embedded="mariage"] .book-expanded .paper-next{width:100%}