@font-face{font-family:Formale;src:url('../../fonts/PinyonScript.ttf')}@font-face{font-family:Bodoni;src:url('../../fonts/CormorantGaramond.ttf')}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#2c2019;color:#f6e6cb}main{display:grid;place-items:center;min-height:100svh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.scene{position:relative;width:min(100vw,560px,calc((100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom))*.5628));aspect-ratio:941/1672;container-type:inline-size;isolation:isolate;--light:0;--photo:0;--color:0;--caption:0;--angle:0deg;--sweep:0deg}.decor{position:absolute;inset:0;width:100%;height:100%}header{position:absolute;left:24%;top:3%;width:68%;display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 4px #160d08;pointer-events:none}.save{font:400 12cqw/1 Formale,serif}.date-title{font:400 5cqw/1 Bodoni,serif;letter-spacing:.02em}.reel{position:absolute;width:29%;aspect-ratio:1;transform:translate(-50%,-50%) scaleX(.72);z-index:3;pointer-events:none;filter:drop-shadow(.3cqw .5cqw .35cqw #08060466)}.reel img{display:block;width:100%;height:100%;transform:rotate(var(--angle));will-change:transform}.upper{left:17.6%;top:45.9%}.lower{left:12.1%;top:64.1%;width:31%}.lower img{transform:rotate(calc(var(--angle)*.82))}.beam{position:absolute;inset:0;clip-path:polygon(44% 57%,69% 43%,96% 42%,45% 58%);background:linear-gradient(125deg,transparent 32%,#ffe9bc2e 60%,#fff4d422);opacity:var(--light);mix-blend-mode:screen;pointer-events:none;z-index:2}.lens{position:absolute;left:44.2%;top:57.2%;width:5.2%;aspect-ratio:.55;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,#fff9dc,#ffe7a6aa 40%,transparent 75%);filter:blur(.3cqw);opacity:var(--light);box-shadow:0 0 4cqw #ffdc8a66;pointer-events:none;z-index:4}.projection{position:absolute;left:27.4%;top:14.9%;width:68.8%;height:28%;overflow:hidden;isolation:isolate;background:#41392e;box-shadow:inset 0 0 3cqw #231b1266;pointer-events:none}.screen-light{position:absolute;inset:0;background:radial-gradient(ellipse at 58% 65%,#f7e9c9,#d3c2a1);opacity:var(--light)}.picture{position:absolute;inset:0;padding:1.8cqw 2.5cqw;display:flex;flex-direction:column;align-items:center;opacity:var(--photo);color:#493625}.couple{width:100%;height:76%;min-height:0;object-fit:contain;filter:grayscale(calc(1 - var(--color))) sepia(calc((1 - var(--color))*.25)) contrast(.92);mix-blend-mode:multiply}.caption{height:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;width:100%;opacity:var(--caption)}.names{font:400 4.4cqw/1 Formale,serif;white-space:nowrap;max-width:100%}.date{font:400 2.5cqw/1 Bodoni,serif}.leader,.intertitle,.wedding{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;color:#423b30;text-shadow:0 1px #fff4}.leader{font:400 25cqw/1 Georgia,serif;background:#b7ac91a6}.leader::before,.leader::after{content:'';position:absolute;left:50%;top:50%;width:37cqw;height:37cqw;transform:translate(-50%,-50%);border:1px solid #49433599;border-radius:50%}.leader::after{width:32cqw;height:32cqw}.leader-cross{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(50% - .5px),#49433577 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#49433577 50%,transparent calc(50% + .5px))}.sweep{position:absolute;left:50%;top:50%;width:1px;height:54%;transform-origin:50% 0;transform:rotate(var(--sweep));background:#51473888}.count{position:relative}.intertitle{font:400 5.6cqw/1.4 Bodoni,serif;padding:5cqw}.wedding{inset:auto 0 23% 0;padding:2cqw 1cqw;font:400 5.2cqw/1.2 Formale,serif;background:#e9d6b8d9;color:#443022}main[data-phase=countdown] .leader,main[data-phase=announcement] .intertitle,main[data-phase=wedding] .wedding{display:flex}.grain{position:absolute;inset:-20%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23745d40' filter='url(%23n)' d='M0 0h140v140H0z'/%3E%3C/svg%3E");opacity:calc(var(--light)*.13);mix-blend-mode:multiply}.scratches{position:absolute;inset:0;opacity:calc(var(--light)*.11);background:linear-gradient(90deg,transparent 17%,#3d322880 17.2%,transparent 17.4%,transparent 81%,#fff6 81.2%,transparent 81.4%)}.vignette{position:absolute;inset:0;box-shadow:inset 0 0 4cqw #4c38184d;opacity:var(--light)}main[data-running=true] .grain{animation:grain .23s steps(2) infinite}main[data-running=true] .scratches{animation:scratch 1.7s steps(3) infinite}.motto{position:absolute;bottom:12%;left:5%;width:90%;text-align:center;font:400 5.5cqw/1.3 Formale,serif;text-shadow:0 1px 4px #24180e;margin:0;pointer-events:none}.controls{position:absolute;bottom:3.7%;left:4%;width:92%;display:flex;flex-direction:column;align-items:center;gap:1cqw;z-index:6}button{font:400 max(2.5cqw,10px)/1.25 Georgia,serif;min-height:44px;color:#f6e6cb;border:1px solid #b3986c9c;background:#2e221be6;border-radius:30px;padding:2cqw 3.2cqw;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.55;cursor:wait}button:focus-visible{outline:2px solid #fae8be;outline-offset:3px}#sound{min-height:32px;padding:1cqw 3cqw;border:0;background:none;font-size:max(2.1cqw,10px);color:#e2ccaa}.actions{display:flex;gap:2cqw;justify-content:center}#status{position:absolute;bottom:.6%;left:6%;width:88%;margin:0;text-align:center;font:italic 2.5cqw/1.2 Georgia,serif;color:#e2ccaa;min-height:1.2em}.error{position:absolute;left:8%;bottom:15%;width:84%;padding:4cqw;text-align:center;background:#2c2019ed;font:3cqw Georgia,serif;z-index:8}[hidden]{display:none!important}@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(3%,-2%)}66%{transform:translate(-3%,2%)}}@keyframes scratch{50%{transform:translateX(2%)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.grain,.scratches{display:none}}
.motto{display:none}
.beam{mask-image:linear-gradient(120deg,transparent 20%,#000 56%,#0008 72%,transparent 95%);filter:blur(.35cqw)}

/* V3 : annonce seule, photo plein cadre, flou puis grandes inscriptions. */
.scene{--blur:0}
.picture{padding:0}
.couple{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 43%;transform:scale(1.035);filter:grayscale(1) contrast(.94) blur(calc(var(--blur)*1.6cqw));mix-blend-mode:multiply}
.wedding{inset:0;padding:6cqw;background:none;font:400 8cqw/1.3 Formale,serif;color:#443022}
.caption{position:absolute;inset:0;width:100%;height:100%;padding:4cqw;gap:3cqw;background:#f6e9cfbd;color:#35271d;text-shadow:0 1px 2px #fff7}
.names{display:flex;flex-direction:column;align-items:center;gap:.5cqw;width:100%;font:400 8.4cqw/1.12 Formale,serif}
.first-name,.second-name{display:block;width:100%;text-align:center;white-space:nowrap}
.joiner{font:400 4cqw/1 Bodoni,serif}
.date{font:400 4.4cqw/1.2 Bodoni,serif;white-space:nowrap}

/* V4 : volume de projection couvrant toute la toile, derrière son contenu. */
.beam{width:100%;height:100%;clip-path:none;background:none;mask-image:none;filter:none;z-index:1;overflow:visible;mix-blend-mode:screen}
.projection{z-index:2}