@font-face{font-family:Playfair;src:url('fonts/playfair.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:Playfair;src:url('fonts/playfair-italic.woff2') format('woff2');font-style:italic;font-weight:400 500;font-display:swap}
@font-face{font-family:Montserrat;src:url('fonts/montserrat.woff2') format('woff2');font-weight:400 600;font-display:swap}
:root{--bg:#fbf8f3;--gold:#d2a85a;--gold-soft:rgba(210,168,90,.6);--ivory:#3a312a;--dim:#5a5147;--field:rgba(251,248,243,.7);--serif:Playfair,Georgia,serif;--sans:Montserrat,Arial,sans-serif;--top:8vh;--band:14vh}
body{-webkit-font-smoothing:antialiased}
body:not(.playing){cursor:auto}
[hidden]{display:none!important}
#silk{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#efe6d6}
.silk-texture{position:absolute;inset:-8%;background:url('satin-champagne.webp') center/cover;will-change:transform;opacity:.72}
.silk-light{position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 25%,rgba(255,253,245,.85) 42%,transparent 58%,rgba(210,168,90,.2) 72%,transparent);will-change:transform;mix-blend-mode:soft-light}
.silk-grain{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%235a5147' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
#backdrop{opacity:.13;mix-blend-mode:multiply;pointer-events:none}
#backdrop img{filter:blur(65px) saturate(.5);inset:-15%;width:130%;height:130%}
.vignette{background:radial-gradient(ellipse at 50% 43%,rgba(251,248,243,.12) 25%,rgba(138,106,47,.13) 100%)}
#stage{perspective:1600px}
.slide{will-change:transform,opacity}
.frame{padding:clamp(5px,.8vmin,12px);background:#fbf8f3;outline:1px solid rgba(138,106,47,.35);outline-offset:1vmin;overflow:visible;box-shadow:0 2vmin 6vmin rgba(70,47,24,.18),0 .5vmin 1.6vmin rgba(70,47,24,.1)}
.image-window{width:100%;height:100%;overflow:hidden;background:#efe6d6}
.frame img{object-fit:contain;will-change:auto}
.frame::after{content:'';position:absolute;inset:-1.8vmin;border:1px solid rgba(210,168,90,.3);pointer-events:none}
#brand{gap:24px}
#brand img{height:clamp(30px,5vh,65px);max-width:40%;object-fit:contain}
#brand .who{font-size:clamp(16px,3vh,36px);white-space:normal;overflow-wrap:anywhere;font-weight:400}
#title{gap:0}
#title .tlogo{width:min(42vw,530px)}
.tkicker,.eyebrow{text-transform:uppercase;letter-spacing:.22em;font:500 10px/1.7 var(--sans);color:#8a6a2f}
.tkicker{margin-bottom:5vh}
#title .tline{margin:4vh 0 3vh;width:90px;background:linear-gradient(90deg,transparent,#d2a85a,transparent)}
#title .tname{font-weight:400;font-size:clamp(28px,6vh,70px);letter-spacing:.02em;overflow-wrap:anywhere;max-width:100%}
.tsub{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.8vh,30px);margin-top:2vh;color:#8a6a2f}
#ctrl{background:rgba(251,248,243,.93);border:1px solid #ddd0bb;border-radius:40px;padding:5px 12px;align-items:center;max-width:96vw;pointer-events:none;box-shadow:0 4px 25px #8a6a2f14}
#ctrl.on{pointer-events:auto}
body:has(#ctrl:focus-within) #ctrl.on{opacity:1}
#ctrl button{font:400 11px var(--sans);min-height:44px;padding:10px 12px;white-space:nowrap}
#ctrl button:hover{color:#8a6a2f}
#counter{font-size:10px;color:#8a6a2f;border-left:1px solid #ddd0bb;padding-left:14px;white-space:nowrap}
:focus-visible{outline:2px solid #8a6a2f!important;outline-offset:4px}
#bar{height:2px;background:#8a6a2f}
#start{background:transparent;display:grid;grid-template-columns:1fr minmax(360px,520px);gap:8vw;padding:40px 8vw;align-items:center}
.welcome{align-self:stretch;display:flex;flex-direction:column;justify-content:center;position:relative;padding:7vh 0}
.welcome h1{font:400 clamp(40px,5.3vw,84px)/1.18 var(--serif);margin:28px 0 0;letter-spacing:-.045em}
.welcome h1 em{color:#8a6a2f;font-weight:400}
.welcome-line{width:110px;height:1px;background:#d2a85a;margin:36px 0}
.welcome p{font:400 15px/1.9 var(--sans);color:#5a5147}
.welcome-footer{position:absolute;bottom:12px;font:400 10px var(--sans);letter-spacing:.12em;color:#5a5147}
.panel{width:100%;gap:12px;padding:26px 36px;background:rgba(251,248,243,.88);border:1px solid rgba(138,106,47,.22);border-radius:160px 160px 6px 6px;box-shadow:0 18px 70px #8a6a2f14;position:relative}
.panel::before{content:'';position:absolute;inset:8px;border:1px solid #d2a85a40;border-radius:inherit;pointer-events:none}
.panel .slogo{width:210px;margin:12px 0 4px}
.panel-heading{text-align:center;margin-bottom:4px}
.panel-heading h2{font:400 24px/1.4 var(--serif);margin-top:6px}
.row{padding-top:15px;gap:8px;border-color:#ddd0bb}
.row label,.row .lab{font:400 17px var(--serif)}
.row .hint{font-size:11px;line-height:1.7}
.line > .hint{flex:1;min-width:150px}
.line .val{color:#8a6a2f;font-size:12px;overflow-wrap:anywhere}
input[type=text],input[type=number],select{font:400 13px var(--sans);border:1px solid #c6b697;color:#3a312a;padding:12px;background:var(--field);border-radius:3px;min-height:44px}
input[type=number]{width:80px}
select{width:100%;cursor:pointer}
.btn{font:500 11px var(--sans);border-color:#b99a63;color:#3a312a;border-radius:3px;min-height:44px}
.btn.small{font-size:11px;min-height:44px;padding:10px 12px}
.btn:hover,.btn:focus-visible{color:#8a6a2f;background:#efe6d6}
.btn.link{color:#5a5147;font-size:10px;text-align:left}
.btn.go{color:#3a312a;background:#d2a85a;font:500 12px var(--sans);padding:17px;min-height:50px}
.btn.go:hover{background:#e3cd98;border-color:#8a6a2f}
.btn.go:disabled{background:#efe6d6;color:#6b6257;border-color:#c6b697}
#summary{font-size:11px}#summary.warn{color:#855322}
.note{font-size:10px;line-height:1.6}
#preview-strip{display:flex;gap:6px;overflow:hidden}
#preview-strip:empty{display:none}
#preview-strip img{width:calc((100% - 30px)/6);height:48px;object-fit:cover;border:3px solid #fffdf9;box-shadow:0 2px 5px #8a6a2f20}
body.paused .silk-texture,body.paused .silk-light{will-change:auto}
@media(min-width:1600px){#start{padding-left:13vw;padding-right:13vw}}
@media(max-width:800px){#start{grid-template-columns:1fr;padding:24px 20px;gap:24px;align-items:start}.welcome{padding:20px 10px 0;align-items:center;text-align:center}.welcome h1{font-size:42px;margin:10px 0}.welcome p,.welcome-line,.welcome-footer{display:none}.panel{max-width:520px;justify-self:center;padding:28px}.panel .slogo{width:170px}.eyebrow{font-size:9px}#title .tlogo{width:70vw}#ctrl{gap:0;padding:4px}#ctrl button{padding:8px;font-size:10px}#counter{display:none}}
@media(max-height:550px) and (orientation:landscape){#start{grid-template-columns:1fr 1.2fr;align-items:start;gap:30px;padding:20px 5vw}.welcome{position:sticky;top:30px;padding:30px 0}.welcome h1{font-size:38px}.welcome p,.welcome-footer{display:none}.panel{padding:24px}.panel .slogo{width:150px}:root{--top:14vh;--band:13vh}#ctrl{top:1vh}#ctrl button{min-height:34px}#brand img{height:25px}#brand .who{font-size:16px}}
@media(prefers-reduced-motion:reduce){.silk-texture,.silk-light{will-change:auto}.slide{will-change:auto}}

/* Salle de révélation : voilage noir profond et lumière dorée aux lisières. */
:root{--bg:#090709;--ivory:#e0d7ca;--dim:#b5aaa2;--field:#191317;--gold:#c2a06b;--gold-soft:rgba(194,160,107,.35);--top:11vh;--band:14vh}
#silk{background:#090709}
.silk-texture{background-image:url('voilage-noir-or.svg');filter:none;opacity:1}
.silk-light{background:radial-gradient(ellipse at 8% 80%,rgba(173,116,48,.12),transparent 37%),radial-gradient(ellipse at 88% 15%,rgba(200,147,72,.13),transparent 35%);mix-blend-mode:screen}
.silk-grain{opacity:.035}
#backdrop{opacity:.025;mix-blend-mode:luminosity}
.vignette{background:radial-gradient(ellipse at 50% 43%,transparent 35%,rgba(3,2,3,.3) 100%)}
.frame{padding:clamp(4px,.55vmin,10px);background:#21191b;outline-color:#bda47a40;box-shadow:0 2vmin 6vmin #00000070,0 .5vmin 1.6vmin #00000040}
.frame::after{border-color:#bda47a26}
.image-window{background:#21191b}
.rail-slide{opacity:1;will-change:transform}
.rail-slide .image-window{position:relative}
.photo-shade{position:absolute;inset:0;background:#080609;pointer-events:none;opacity:0;will-change:opacity}
#stage{overflow:visible}
.coverflow #stage{perspective:140vw;perspective-origin:50% 50%}
.coverflow .rail-slide{backface-visibility:hidden}
#brand img,#title .tlogo,.panel .slogo,#brand .who,#title .tname{opacity:1}
#brand .who{color:#e0d7ca}
.tkicker,.eyebrow,.welcome h1 em,.tsub{color:#bda47a}
.welcome p,.welcome-footer{color:#b5aaa2}
.welcome-line,#title .tline{background:linear-gradient(90deg,#bda47a90,transparent)}
.panel{background:rgba(19,14,17,.94);border-color:#bda47a30;box-shadow:0 18px 70px #00000050}
.panel::before{border-color:#bda47a20}
.row{border-color:#bda47a2b}
.line .val{color:#c9b48e}
input[type=text],input[type=number],select{background:#20181c;color:#e0d7ca;border-color:#8f7d675c}
input::placeholder{color:#b5aaa2}
.btn{color:#ded3c4;border-color:#a38c675c}
.btn:hover,.btn:focus-visible{color:#e0d7ca;background:#2a2025}
.btn.link{color:#b5aaa2}
.btn.go{background:#bda47a;border-color:#bda47a;color:#302a2d}
.btn.go:hover{background:#cab691;border-color:#cab691}
.btn.go:disabled{background:#241b20;border-color:#81715b50;color:#b5aaa2}
#summary.warn{color:#d9b799}
#preview-strip img{border-color:#37292e;box-shadow:none}
#ctrl{background:rgba(22,16,20,.94);border-color:#bda47a33;box-shadow:none}
#ctrl button{font-size:clamp(12px,1vw,20px);color:#d2c6b9}
#ctrl button:hover,#counter{color:#c9b48e}
#counter{border-color:#bda47a33;font-size:clamp(11px,.85vw,16px)}
#bar{background:#bda47a;opacity:.4}
:focus-visible{outline-color:#c9b48e!important}
@media(min-aspect-ratio:16/10) and (min-width:1100px){#brand{left:5vw;right:5vw}#brand img{height:5vh}#brand .who{font-size:3vh}}
@media(max-width:800px){#ctrl button{font-size:10px}}

/* Trois habillages, indépendants de la mise en scène. */
.decor-picker{border:0;border-top:1px solid #bda47a2b;padding:15px 0 0;min-width:0}
.decor-picker legend{font:400 17px var(--serif);padding:0 10px 0 0;color:var(--ivory)}
.decor-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.decor-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border:1px solid #8f7d673d;border-radius:5px;cursor:pointer;text-align:center;background:#171115;transition:background .2s,border-color .2s}
.decor-choice:hover{background:#241b20;border-color:#bda47a80}
.decor-choice:has(input:checked){background:#30231e;border-color:#c2a06b;box-shadow:inset 0 0 0 1px #c2a06b50}
.decor-choice:has(input:focus-visible){outline:2px solid #c9b48e;outline-offset:3px}
.decor-choice input{position:absolute;width:1px;height:1px;padding:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.decor-name{font:500 11px/1.5 var(--sans);color:var(--ivory)}
.decor-detail{font:400 9px/1.5 var(--sans);color:var(--dim)}
.decor-sample{display:block;width:75%;height:48px;margin:4px 0 8px;position:relative;background:#21191b;box-shadow:0 4px 10px #0005}
.decor-sample>span{display:block;width:100%;height:100%;background-image:var(--decor-preview,linear-gradient(140deg,#60584f,#bdb3a0 45%,#414341));background-size:cover;background-position:center}
.sample-signature{padding:3px;outline:1px solid #bda47a70;outline-offset:3px}
.sample-signature::after{content:'';position:absolute;inset:-6px;border:1px solid #bda47a30}
.sample-rounded{border-radius:8px;overflow:hidden}
.sample-print{padding:6px 6px 9px;background:#eee2cf;border-radius:1px}
.sample-casket{padding:6px;background:linear-gradient(135deg,#2b2026,#0c090b);box-shadow:0 4px 10px #0008,inset 0 0 0 1px #54404b}
body[data-decor="rounded"] .frame{padding:0;border:0;outline:0;border-radius:clamp(12px,1.5vmin,30px);overflow:hidden;background:#141015;box-shadow:0 1.8vmin 5vmin #0007}
body[data-decor="rounded"] .image-window{border-radius:inherit}
body[data-decor="rounded"] .frame::after,body[data-decor="print"] .frame::after{display:none}
body[data-decor="print"] .frame{padding:clamp(12px,1.6vmin,32px);padding-bottom:clamp(18px,2.4vmin,48px);border:0;outline:0;border-radius:2px;background:linear-gradient(135deg,#f5ecdf,#e8dbc7);box-shadow:0 2vmin 6vmin #0008,0 .4vmin 1.2vmin #0005}
body[data-decor="print"] .image-window{background:#eee2cf}
body[data-decor="casket"] .frame{padding:clamp(8px,1.2vmin,24px);outline:0;border:1px solid #4a3540;border-radius:3px;background:linear-gradient(135deg,#2b2026,#100b0f);box-shadow:0 2vmin 7vmin #000a,inset 0 0 0 1px #0b0709}
body[data-decor="casket"] .frame::after{display:none}
body[data-decor="casket"] .image-window{border-radius:1px;background:#100b0f;box-shadow:0 0 0 1px #090609}
.music-label{font-size:13px!important}
.music-manager,.advanced-settings{border-top:1px solid #bda47a2b;padding-top:12px;min-width:0}
.music-manager summary,.advanced-settings summary{cursor:pointer;font:400 12px/1.7 var(--sans);color:#c9b48e;min-height:44px;align-content:center}
.music-manager[open]>:not(summary){display:block;margin-top:10px}
.music-manager label{font:400 12px var(--sans)}
.music-manager input[type=password]{width:100%;min-height:44px;padding:12px;background:#20181c;border:1px solid #8f7d675c;border-radius:3px;color:var(--ivory);font:400 13px var(--sans)}
.music-manager input[type=file]{width:100%;font:400 11px var(--sans);color:var(--dim);line-height:1.7}
.music-manager input[type=file]::file-selector-button{background:#20181c;color:var(--ivory);border:1px solid #8f7d675c;padding:10px;margin-right:8px;cursor:pointer}
.advanced-settings[open] .row,.advanced-settings[open] .decor-picker{margin-top:14px}
#settingsCaption{display:block;font-size:10px;color:var(--dim)}
@media(max-width:600px){.decor-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.decor-options{gap:6px}.decor-detail{font-size:8px}.decor-sample{height:42px}.decor-choice{padding:10px 4px}}
#start{grid-template-columns:minmax(0,520px);justify-content:center;gap:0;padding:28px 20px;align-items:center}
#start .welcome{display:none}
#start .panel{max-width:520px;border-radius:12px;padding:24px 28px;justify-self:center}
#start .panel .slogo{width:140px;margin:0 auto 8px}
.panel-heading h2{font-size:20px;margin:0 0 14px}
.photo-import{border:1px dashed #bda47a60;border-radius:6px;padding:18px;text-align:center;gap:10px}
.photo-import .btn{width:100%;min-height:48px}
.photo-import .val{font-size:11px;display:block}
.photo-import.dragging{background:#bda47a18;border-color:#d2a85a}
#start .row{margin-bottom:14px}
#start .go{margin:12px 0 18px;min-height:52px;font-size:16px}
#start .decor-detail{display:none}
#summary:empty,.music-manager p:empty{display:none}
.login-page{min-height:100svh;display:grid;place-items:center;padding:24px;background:#0d090b;color:#eee2cf}
.login-card{width:min(100%,340px);display:grid;gap:16px}
.login-card img{width:150px;justify-self:center;margin-bottom:12px}
.login-card input{width:100%;padding:14px;background:#20181c;border:1px solid #8f7d675c;border-radius:4px;color:#eee2cf;font:16px var(--sans)}
.login-card .go{margin:0}
#loginError{font:12px var(--sans);color:#d9b799}
@media(max-width:600px){#start{padding:16px 12px;align-items:start}#start .panel{padding:20px}.panel-heading h2{font-size:18px}}