/* Rose Priscillia & Jacques Arthur — « Soie orange brûlé »
   Satin orange brûlé vivant, dorure à la feuille, bouquets roses-pivoines-pampa (mêmes fleurs que la vidéo),
   frise de losanges africaine comme signature, sections ivoire pour la lecture. */
:root{
  --nuit:#2b1006; --nuit2:#3d1809; --brule:#a8461a; --brule2:#c55a22; --soie:#e07a3a;
  --peche:#f2c39c; --ivoire:#fff8ef; --sable:#fde7cc; --sable2:#f6cfa3;
  --menthe:#6fae97; --ink:#3a1c0d; --ink2:#7b5843; --rule:rgba(232,190,120,.35); --rule-d:rgba(58,28,13,.14);
  --or:#e6b56a; --or2:#c8903f;
  --foil:linear-gradient(105deg,#a8742f 0%,#f7dca0 22%,#fff4d8 34%,#e2b064 48%,#9e6a28 62%,#f3d08e 80%,#b9803a 100%);
  --disp:"Cinzel","Trajan Pro",Georgia,serif;
  --scr:"Great Vibes","Snell Roundhand",cursive;
  --body:"Cormorant Garamond",Garamond,Georgia,serif;
  --ui:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivoire);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
[hidden]{display:none!important}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--or2);outline-offset:3px}
a{color:inherit}
.foil{background:var(--foil);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 7s ease-in-out infinite}
@keyframes foil{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.cap{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.34em;text-transform:uppercase}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes fade{from{opacity:0}}
.wrap{max-width:1100px;margin-inline:auto;padding-inline:clamp(16px,5vw,48px)}

/* Frise de losanges (signature) */
.frise{height:22px;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cpath d='M0 11L22 1L44 11L22 21Z' fill='none' stroke='%23e6b56a' stroke-width='1.4'/%3E%3Ccircle cx='22' cy='11' r='2.2' fill='%23e6b56a'/%3E%3C/svg%3E") center/44px 22px repeat-x;opacity:.85}
.frise.d{filter:brightness(.55) sepia(.4)}
.orn{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--or2)}
.orn::before,.orn::after{content:"";height:1px;width:clamp(40px,12vw,110px);background:linear-gradient(90deg,transparent,currentColor)}
.orn::after{transform:scaleX(-1)}
.orn i{width:9px;height:9px;transform:rotate(45deg);border:1.4px solid currentColor;position:relative}
.orn i::after{content:"";position:absolute;inset:2px;background:currentColor}

/* Fleurs */
.fl{position:absolute;pointer-events:none;width:var(--w,clamp(150px,30vw,320px));height:auto;z-index:2;animation:sway 8s ease-in-out infinite alternate;filter:drop-shadow(0 12px 18px rgba(40,10,0,.28))}
@keyframes sway{from{rotate:-1.4deg}to{rotate:1.6deg}}
.fl.bloom{animation:bloom 1.6s var(--ease) both,sway 8s 1.6s ease-in-out infinite alternate}
@keyframes bloom{from{opacity:0;scale:.55}}

/* Boutons */
.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:8px 8px 8px 26px;border-radius:999px;font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;position:relative;overflow:hidden;isolation:isolate;white-space:nowrap;transition:transform .4s var(--ease),box-shadow .4s,background-position .8s var(--ease);-webkit-tap-highlight-color:transparent}
.btn:not(:has(.ar)){padding:14px 26px}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:36%;left:-60%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:sheen 5s 1.5s var(--ease) infinite}
@keyframes sheen{0%{left:-60%}30%,100%{left:140%}}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn .ar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--nuit);color:var(--or);transition:transform .5s var(--ease)}
.btn .ar svg{width:18px;height:18px}
.btn:hover .ar{transform:translateX(3px)}
.b-or{background:linear-gradient(115deg,#fbe6bd 0%,#e9b86c 35%,#c98a3c 65%,#efc983 100%);background-size:220% 100%;color:var(--nuit);box-shadow:0 16px 30px -14px rgba(140,70,15,.75),inset 0 1px 0 rgba(255,255,255,.7)}
.b-or:hover{background-position:100% 0}
.b-brule{background:linear-gradient(120deg,#c55a22,#8c3412);color:#fff3e2;box-shadow:0 16px 30px -16px rgba(120,40,8,.8)}
.b-brule .ar{background:var(--or);color:var(--nuit)}
.b-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-d)}
.b-line .ar{background:var(--brule);color:#fff}
.b-sm{min-height:44px;font-size:11px;letter-spacing:.16em;padding:6px 6px 6px 18px}
.b-sm:not(:has(.ar)){padding:11px 18px}
.b-sm .ar{width:32px;height:32px}
.pulse{animation:halo 3s ease-in-out infinite}
@keyframes halo{0%,100%{box-shadow:0 16px 30px -14px rgba(140,70,15,.75),0 0 0 0 rgba(230,181,106,.55)}55%{box-shadow:0 16px 30px -14px rgba(140,70,15,.75),0 0 0 12px rgba(230,181,106,0)}}

/* ================= OUVERTURE : le rideau de soie ================= */
#gate{position:fixed;inset:0;z-index:100;overflow:hidden;background:#1a0703;perspective:1400px}
#gate.leave{opacity:0;transition:opacity 1.1s var(--ease)}
#gate.done{display:none}
/* scène derrière le rideau */
.stage{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:16px;text-align:center;padding:24px;background:radial-gradient(ellipse 60% 50% at 50% 42%,#ffd79a 0%,#f08a3a 38%,#b6461a 75%,#6e2408 100%)}
.stage::before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 0deg,transparent 0 6deg,rgba(255,236,190,.22) 6deg 10deg,transparent 10deg 20deg);animation:spin 40s linear infinite;mask-image:radial-gradient(circle,#000 20%,transparent 65%);-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 65%)}
@keyframes spin{to{transform:rotate(360deg)}}
.stage .ph{position:relative;width:min(250px,58vw);aspect-ratio:3/3.6;border-radius:999px 999px 8px 8px;overflow:hidden;box-shadow:0 0 0 2px #f7dca0,0 0 0 10px rgba(255,240,210,.25),0 30px 70px -20px rgba(80,20,0,.7);scale:.85;opacity:0;transition:scale 1.6s var(--ease) .5s,opacity 1s .4s}
.stage .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.stage b{position:relative;font-family:var(--scr);font-weight:400;font-size:clamp(46px,12vw,76px);line-height:1;color:#fff8ea;text-shadow:0 2px 18px rgba(120,40,0,.6);opacity:0;transform:translateY(16px);transition:all 1.2s var(--ease) .9s}
.stage small{position:relative;font-family:var(--ui);font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:#fff3dc;opacity:0;transition:opacity 1s 1.2s}
#gate.open .stage .ph{scale:1;opacity:1}
#gate.open .stage b,#gate.open .stage small{opacity:1;transform:none}
/* rideaux */
.curtain{position:absolute;top:0;bottom:0;width:51%;z-index:3;transition:transform 2.1s cubic-bezier(.7,0,.15,1),filter 2s;will-change:transform}
.curtain.l{left:0;transform-origin:0 0}.curtain.r{right:0;transform-origin:100% 0}
.curtain::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,rgba(60,10,0,.55) 0,rgba(255,170,90,.0) 9%,rgba(255,214,150,.38) 15%,rgba(255,170,90,.0) 21%,rgba(60,10,0,.5) 30%),
  linear-gradient(180deg,#e2722c,#c4501a 55%,#8c300c);background-size:34% 100%,100% 100%}
.curtain::after{content:"";position:absolute;inset:0;background:url(../img/soie.jpg) center/cover;mix-blend-mode:soft-light;opacity:.8}
.curtain .hem{position:absolute;left:0;right:0;bottom:0;height:46px;z-index:2;background:linear-gradient(180deg,#f7dca0,#c8903f);box-shadow:0 -2px 0 rgba(90,40,5,.4)}
.curtain .hem::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;margin-top:-22px;background:repeating-linear-gradient(90deg,#e8b66c 0 2px,transparent 2px 6px);opacity:.9}
.curtain .hem i{position:absolute;inset:8px 0 auto;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cpath d='M0 11L22 1L44 11L22 21Z' fill='none' stroke='%237a3a0a' stroke-width='1.6'/%3E%3Ccircle cx='22' cy='11' r='2.4' fill='%237a3a0a'/%3E%3C/svg%3E") center/44px 22px repeat-x}
.curtain.l .hem{right:0}.curtain.r .hem{left:0}
#gate.open .curtain.l{transform:translateX(-96%) skewY(4deg) scaleX(.55)}
#gate.open .curtain.r{transform:translateX(96%) skewY(-4deg) scaleX(.55)}
/* lambrequin */
.valance{position:absolute;top:0;left:0;right:0;z-index:5;height:calc(92px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);display:grid;place-items:center;background:linear-gradient(180deg,#a83c10,#d7652a);box-shadow:0 14px 30px -10px rgba(60,10,0,.6);transition:transform 1.6s var(--ease) .6s}
.valance::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:20px;background:radial-gradient(circle at 50% 0,#d7652a 70%,transparent 72%) 0 0/40px 20px repeat-x}
.valance .frise{position:absolute;left:16px;right:16px;bottom:10px;filter:brightness(1.1)}
.valance span{font-family:var(--ui);font-size:10.5px;letter-spacing:.38em;text-transform:uppercase;color:#ffe9c2;margin-top:-10px}
#gate.open .valance{transform:translateY(-120%)}
/* médaillon central */
.knot{position:absolute;z-index:6;left:50%;top:50%;translate:-50% -50%;display:grid;justify-items:center;gap:16px;transition:opacity .6s,scale .8s var(--ease)}
.knot .who{font-family:var(--disp);font-size:clamp(17px,4.6vw,24px);letter-spacing:.06em;color:#fff6e6;text-align:center;max-width:min(86vw,26ch);text-wrap:balance;text-shadow:0 2px 14px rgba(60,10,0,.8);padding:10px 18px;background:rgba(80,20,2,.35);border:1px solid rgba(247,220,160,.55);backdrop-filter:blur(3px);animation:rise 1.2s .3s var(--ease) both}
.knot .who small{display:block;font-family:var(--ui);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:#f7dca0;margin-bottom:4px}
.seal{position:relative;width:132px;height:132px;border:0;padding:0;cursor:pointer;border-radius:50%;background:none;animation:rise 1.2s .6s var(--ease) both}
.seal .ring{position:absolute;inset:0;animation:spin 14s linear infinite}
.seal .ring text{font-family:var(--ui);font-size:9.6px;letter-spacing:0;fill:#fff1d2;text-transform:uppercase}
.seal .core{position:absolute;inset:22px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%,#fff2c8,#e9b86c 45%,#a8742f);box-shadow:0 12px 26px rgba(60,10,0,.55),inset 0 0 0 4px rgba(255,248,225,.45),inset 0 -6px 12px rgba(110,60,10,.45)}
.seal .core span{font-family:var(--scr);font-size:36px;color:#6a2c06;text-shadow:0 1px 0 rgba(255,240,200,.7)}
.seal::after{content:"";position:absolute;inset:16px;border-radius:50%;box-shadow:0 0 0 0 rgba(255,225,160,.7);animation:knock 2.2s 1.6s ease-out infinite}
@keyframes knock{to{box-shadow:0 0 0 26px rgba(255,225,160,0)}}
.seal:hover .core{scale:1.05}
.cords{position:absolute;z-index:4;top:0;bottom:0;left:50%;width:2px;translate:-50% 0;background:linear-gradient(180deg,transparent 12%,#f7dca0 30%,#f7dca0 70%,transparent 88%);opacity:.7}
#gate.open .knot,#gate.open .cords{opacity:0;scale:1.25;pointer-events:none}
.flash{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,248,225,.95),rgba(255,200,120,.4) 30%,transparent 60%);opacity:0}
#gate.open .flash{animation:flash 1.3s ease-out}
@keyframes flash{18%{opacity:1}100%{opacity:0}}
#gate .fl{z-index:6}
#gate.open .fl{opacity:0;transition:opacity .8s}

/* ================= MUSIQUE ================= */
.music{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:80;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:linear-gradient(140deg,#f6d7a0,#c8903f);box-shadow:0 10px 22px -8px rgba(80,30,5,.7);opacity:0;transform:scale(.6);transition:opacity .6s,transform .6s var(--ease)}
.music.on{opacity:1;transform:none}
.music .bars{display:flex;align-items:flex-end;gap:3px;height:16px}
.music .bars i{width:3px;height:100%;background:var(--nuit);border-radius:2px;transform-origin:bottom;animation:eq 1s ease-in-out infinite}
.music .bars i:nth-child(2){animation-delay:.2s}.music .bars i:nth-child(3){animation-delay:.4s}.music .bars i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.music.paused .bars i{animation:none;transform:scaleY(.25)}

/* ================= HERO ================= */
.hero{position:relative;overflow:hidden;isolation:isolate;color:#fff3e2;background:var(--nuit) url(../img/soie.jpg) center/cover;padding:calc(70px + env(safe-area-inset-top,0px)) 16px 70px;text-align:center}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 55% at 50% 42%,rgba(255,190,110,.28),transparent 70%),linear-gradient(180deg,rgba(90,25,4,.42),rgba(90,25,4,.05) 30%,rgba(90,25,4,.12) 70%,rgba(70,20,4,.6));animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{to{opacity:.75}}
.hero .frise{position:absolute;left:24px;right:24px}
.hero .frise.t{top:calc(26px + env(safe-area-inset-top,0px))}.hero .frise.b{bottom:22px}
.hero .fl.a{left:-40px;top:-30px;--w:clamp(170px,36vw,380px);transform:scaleY(-1)}
.hero .fl.b{right:-40px;bottom:-30px;--w:clamp(170px,36vw,380px);transform:scaleX(-1)}
.h-grid{position:relative;z-index:3;max-width:1100px;margin:0 auto;display:grid;gap:28px;justify-items:center}
.h-grid>.cap{color:var(--or);animation:rise 1.2s .2s var(--ease) both}
.arch{position:relative;width:min(300px,68vw);animation:rise 1.5s .3s var(--ease) both}
.arch .ph{aspect-ratio:3/3.7;border-radius:999px 999px 6px 6px;overflow:hidden;box-shadow:0 40px 60px -28px rgba(0,0,0,.75)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1.01)}}
.arch::before,.arch::after{content:"";position:absolute;border-radius:999px 999px 8px 8px;pointer-events:none}
.arch::before{inset:-9px;border:1.5px solid var(--or)}
.arch::after{inset:-19px;border:1px solid rgba(230,181,106,.45)}
.arch .spray{position:absolute;left:50%;bottom:-112px;translate:-50% 0;width:90%;max-width:none;z-index:2;pointer-events:none}
.names{margin:30px 0 0;font-family:var(--scr);font-weight:400;line-height:.95;display:grid;justify-items:center}
.names .n{font-size:clamp(58px,15vw,128px);padding:.08em .25em .12em;animation:unveil 1.8s var(--d) cubic-bezier(.7,0,.2,1) both}
.names .amp{font-size:clamp(40px,8vw,70px);color:var(--or);margin:-.15em 0;animation:fade 1.2s 1.2s both}
@keyframes unveil{from{clip-path:inset(0 100% 0 0);filter:blur(5px)}to{clip-path:inset(-20%);filter:none}}
.h-date{display:flex;align-items:center;gap:clamp(12px,3vw,24px);font-family:var(--disp);font-size:clamp(15px,3.6vw,22px);letter-spacing:.22em;animation:rise 1.2s 2s var(--ease) both}
.h-date i{width:clamp(24px,7vw,60px);height:1px;background:var(--or)}
.h-city{font-family:var(--ui);font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--peche);animation:rise 1.2s 2.2s var(--ease) both}
.h-verse{max-width:34ch;font-style:italic;font-size:19px;color:var(--sable);animation:rise 1.2s 2.4s var(--ease) both}
.h-verse small{display:block;font-style:normal;font-family:var(--ui);font-size:10.5px;letter-spacing:.3em;color:var(--or);margin-top:4px}
@media(min-width:900px){
  .hero{padding-block:110px 100px}
  .h-grid{grid-template-columns:auto 1fr;text-align:left;justify-items:start;align-items:center;gap:30px 80px;padding-inline:40px}
  .h-grid>.cap{grid-column:1/-1;justify-self:center}
  .arch{grid-row:2/6;width:340px}
  .names{justify-items:start;margin:0}.names .n{font-size:clamp(80px,8vw,120px)}
}

/* ================= SECTIONS ================= */
.sec{position:relative;padding-block:clamp(70px,11vw,120px);overflow:hidden}
.sec.sand{background:var(--sable)}
.sec.dark{background:var(--nuit) url(../img/soie.jpg) center/cover;color:#fff3e2}
.sec.dark::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(80,22,4,.55),rgba(110,32,6,.42))}
.sec.dark>*{position:relative}
.s-head{display:grid;justify-items:center;gap:14px;text-align:center;margin-bottom:clamp(36px,6vw,56px)}
.s-head .cap{color:var(--brule)}
.dark .s-head .cap{color:var(--or)}
.s-head h2{margin:0;font-family:var(--disp);font-weight:500;font-size:clamp(30px,6vw,54px);line-height:1.1;letter-spacing:.06em;text-wrap:balance}
.s-head h2 em{display:block;font-family:var(--scr);font-style:normal;font-weight:400;letter-spacing:0;font-size:1.25em;color:var(--brule);line-height:1}
.dark .s-head h2 em{color:var(--or)}

/* Lettre personnelle */
.letter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(30px,6vw,80px);align-items:center}
@media(max-width:820px){.letter{grid-template-columns:minmax(0,1fr)}}
.medal{position:relative;text-align:center;padding:clamp(40px,6vw,60px) 24px;background:var(--ivoire);box-shadow:0 30px 60px -40px rgba(120,50,10,.6)}
.medal::before{content:"";position:absolute;inset:9px;border:1px solid var(--or)}
.medal::after{content:"";position:absolute;inset:15px;border:1px solid rgba(230,181,106,.45)}
.medal .fl{--w:clamp(110px,24vw,170px)}
.medal .fl.a{left:-34px;top:-40px;transform:scaleY(-1)}.medal .fl.b{right:-34px;bottom:-40px;transform:scaleX(-1)}
.medal .ph{width:116px;aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto 16px;box-shadow:0 0 0 4px var(--ivoire),0 0 0 5px var(--or2)}
.medal .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.medal .cap{color:var(--brule)}
.medal blockquote{margin:12px 0 4px;font-family:var(--scr);font-size:clamp(52px,10vw,86px);line-height:1;color:var(--brule)}
.medal p{margin:0;font-family:var(--disp);letter-spacing:.2em;color:var(--ink2)}
.l-text .cap{color:var(--brule)}
.l-text h3{margin:12px 0 18px;font-family:var(--disp);font-weight:500;font-size:clamp(26px,4.4vw,40px);line-height:1.15;text-wrap:balance}
.l-text p{margin:0 0 14px;max-width:56ch}
.l-text p:first-of-type::first-letter{font-family:var(--disp);float:left;font-size:3.6em;line-height:.85;padding:.06em .1em 0 0;color:var(--brule)}
.spec{display:flex;margin:26px 0 28px;border-block:1px solid rgba(200,144,63,.45)}
.spec div{flex:1;padding:14px 4px;text-align:center}
.spec div+div{border-left:1px solid rgba(200,144,63,.45)}
.spec small{display:block;font-family:var(--ui);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--brule)}
.spec b{display:block;font-family:var(--disp);font-weight:500;font-size:30px;line-height:1.25;font-variant-numeric:tabular-nums}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cta-sub{margin:12px 0 0;font-size:16px;color:var(--ink2)}

/* Vidéo */
.film{position:relative;max-width:420px;margin:0 auto}
.film video{width:100%;aspect-ratio:9/16;background:#000;border-radius:24px;box-shadow:0 40px 70px -30px rgba(0,0,0,.8),0 0 0 1px rgba(230,181,106,.5)}
.film::before{content:"";position:absolute;inset:-12px;border-radius:32px;border:1px solid rgba(230,181,106,.4);pointer-events:none}
.film .fl{--w:clamp(130px,30vw,220px)}
.film .fl.a{left:-90px;top:-60px;transform:scaleY(-1)}.film .fl.b{right:-90px;bottom:-60px;transform:scaleX(-1)}
.film-note{text-align:center;color:var(--sable);font-size:16px;margin-top:22px}

/* Compte à rebours */
.count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center;max-width:820px;margin:0 auto}
.count div{position:relative;padding:12px 4px}
.count div+div::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:linear-gradient(transparent,var(--or2),transparent)}
.count b{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(40px,10vw,96px);line-height:1;font-variant-numeric:tabular-nums}
.count b.flip{animation:flip .6s var(--ease)}
@keyframes flip{from{opacity:0;transform:translateY(-22%)}}
.count span{display:block;margin-top:8px;font-family:var(--ui);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--brule)}
.cd-cap{text-align:center;margin:20px 0 0;font-family:var(--scr);font-size:clamp(32px,5vw,44px);color:var(--brule)}

/* Programme */
.tl{position:relative;max-width:820px;margin:0 auto;display:grid;gap:26px}
.tl::before{content:"";position:absolute;left:54px;top:50px;bottom:50px;width:1px;background:repeating-linear-gradient(180deg,var(--or) 0 5px,transparent 5px 10px)}
.step{display:grid;grid-template-columns:108px minmax(0,1fr);gap:clamp(14px,3vw,28px);align-items:center}
.hour{position:relative;z-index:1;width:108px;height:108px;border-radius:50%;display:grid;place-items:center;align-content:center;text-align:center;background:radial-gradient(circle at 35% 30%,#c55a22,#6e2a0c);color:#fff3e2;box-shadow:0 18px 30px -14px rgba(90,30,5,.8),inset 0 0 0 1px rgba(255,220,160,.4)}
.hour::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--or);opacity:.8}
.hour b{font-family:var(--disp);font-weight:500;font-size:28px;line-height:1}
.hour small{font-family:var(--ui);font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--peche);margin-top:5px}
.dark .card{background:rgba(252,245,236,.96);color:var(--ink)}
.card{position:relative;min-width:0;background:var(--ivoire);padding:clamp(20px,3vw,30px);box-shadow:0 26px 50px -36px rgba(80,30,5,.7)}
.card::before{content:"";position:absolute;inset:7px;border:1px solid var(--rule-d);pointer-events:none}
.card .k{font-family:var(--ui);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--brule)}
.card h3{margin:4px 0 2px;font-family:var(--disp);font-weight:500;font-size:clamp(21px,3vw,28px);line-height:1.2}
.card p{margin:0 0 12px;color:var(--ink2);font-size:17.5px;line-height:1.5}
.card .acts{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:560px){.tl::before{left:39px}.step{grid-template-columns:80px minmax(0,1fr);align-items:start}.hour{width:80px;height:80px}.hour b{font-size:21px}.hour small{font-size:7px;letter-spacing:.14em}}

/* Versets */
.verses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,30px);text-align:center}
@media(max-width:760px){.verses{grid-template-columns:minmax(0,1fr)}}
.verse{display:grid;gap:10px;justify-items:center;padding:10px}
.verse p{margin:0;font-style:italic;font-size:clamp(21px,2.6vw,25px);line-height:1.4}
.verse small{font-family:var(--ui);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--or)}

/* Tuiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.8vw,18px)}
@media(max-width:760px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/4.5;border:0;padding:0;cursor:pointer;text-align:left;color:#fff3e2;background:var(--nuit);transition:transform .5s var(--ease)}
.tile:active{transform:scale(.97)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease)}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(43,16,6,.05) 25%,rgba(43,16,6,.9))}
.tile::after{content:"";position:absolute;inset:8px;border:1px solid rgba(230,181,106,.5);transition:inset .6s var(--ease)}
.tile:hover img{transform:scale(1.07)}
.tile:hover::after{inset:13px}
.tile .in{position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,2.4vw,22px);display:grid;gap:3px}
.tile b{font-family:var(--disp);font-weight:500;font-size:clamp(17px,2.6vw,25px);line-height:1.15;letter-spacing:.04em}
.tile small{font-family:var(--ui);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--peche)}
.tile .go{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#f6d7a0,#c8903f);color:var(--nuit);box-shadow:0 8px 18px -6px rgba(0,0,0,.5)}
.tile .go svg{width:14px;height:14px}
.tile .st{position:absolute;top:14px;left:14px;font-family:var(--ui);font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(242,195,156,.95);color:var(--nuit)}
.tile .st.ok{background:rgba(111,174,151,.95);color:#fff}
.tile.key{box-shadow:0 0 0 2px var(--or),0 30px 50px -30px rgba(200,120,40,.8)}
@media(max-width:420px){.tile b{font-size:16px}.tile small{font-size:8.5px;letter-spacing:.14em}}
.prog{display:flex;align-items:center;gap:14px;margin-top:26px;font-family:var(--ui);font-size:13px;color:var(--ink2)}
.prog .bar{flex:1;height:2px;background:var(--sable2);position:relative;border-radius:2px}
.prog .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--foil);background-size:200% 100%;transition:width 1.2s var(--ease)}

/* Galerie */
.reel{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reel .track{display:flex;gap:16px;width:max-content;animation:reel 60s linear infinite}
.reel:hover .track{animation-play-state:paused}
@keyframes reel{to{transform:translateX(calc(-50% - 8px))}}
.reel button{flex:none;height:clamp(260px,40vw,420px);border:0;padding:0;background:none;cursor:zoom-in;position:relative}
.reel img{height:100%;width:auto;object-fit:cover}
.reel button:nth-child(odd) img{border-radius:999px 999px 0 0}
.mason{columns:3 220px;column-gap:14px}
.mason button{display:block;width:100%;margin:0 0 14px;border:0;padding:0;background:none;cursor:zoom-in;break-inside:avoid;overflow:hidden;position:relative}
.mason button::after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,245,230,.6);pointer-events:none}
.mason img{width:100%;transition:transform 1.2s var(--ease)}
.mason button:hover img{transform:scale(1.04)}
.lbx{position:fixed;inset:0;z-index:120;background:rgba(30,10,3,.95);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;cursor:zoom-out}
.lbx.on{opacity:1;visibility:visible}
.lbx img{max-height:86vh;width:auto;box-shadow:0 40px 80px -30px #000}
.lbx button{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));left:16px;width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--or);font-size:22px;cursor:pointer}

footer.f{position:relative;overflow:hidden;text-align:center;padding:80px 16px 120px;background:var(--sable)}
footer.f .m{font-family:var(--scr);font-size:clamp(50px,12vw,96px);line-height:1.05;color:var(--brule)}
footer.f .m em{font-style:normal;color:var(--or2);font-size:.6em}
footer.f .cap{margin-top:14px;color:var(--ink2)}
footer.f .fl{--w:clamp(140px,28vw,260px);bottom:-40px}
footer.f .fl.a{left:-40px}footer.f .fl.b{right:-40px;transform:scaleX(-1)}
.float{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));translate:-50% 180%;z-index:60;transition:translate .7s var(--ease)}
.float.on{translate:-50% 0}

/* ================= PAGES INTÉRIEURES ================= */
.view{display:none}.view.on{display:block;animation:fade .6s}
.ihead{position:relative;overflow:hidden;isolation:isolate;color:#fff3e2;text-align:center;padding:calc(18px + env(safe-area-inset-top,0px)) 16px clamp(60px,10vw,100px);background:var(--nuit) url(../img/soie.jpg) center/cover}
.ihead::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(90,25,4,.55),rgba(90,25,4,.25) 50%,rgba(80,22,4,.7))}
.ihead .bar{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto clamp(40px,8vw,70px);padding-right:58px}
.back{display:inline-flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;color:var(--or);font-family:var(--ui);font-size:11px;letter-spacing:.28em;text-transform:uppercase;padding:8px 0}
.back svg{width:20px;height:20px}
.ihead .m{font-family:var(--scr);font-size:34px;line-height:1;color:var(--or)}
.ihead .cap{color:var(--peche)}
.ihead h1{margin:14px 0 0;font-family:var(--disp);font-weight:500;font-size:clamp(34px,7vw,64px);line-height:1.1;letter-spacing:.05em;text-wrap:balance}
.ihead h1 em{display:block;font-family:var(--scr);font-style:normal;font-weight:400;letter-spacing:0;color:var(--or);font-size:1.15em;line-height:1}
.ihead p{margin:16px auto 0;max-width:46ch;color:var(--sable)}
.ihead .fl{--w:clamp(120px,24vw,220px)}
.ihead .fl.a{left:-36px;bottom:-40px}.ihead .fl.b{right:-36px;bottom:-40px;transform:scaleX(-1)}
.ibody{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,64px) 16px 120px}
.panel{display:grid;gap:30px}
.blk{display:grid;gap:14px}
.blk h3{margin:0;display:flex;align-items:center;gap:14px;font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--brule)}
.blk h3::before{content:"";width:8px;height:8px;transform:rotate(45deg);background:var(--or2)}
.blk h3::after{content:"";flex:1;height:1px;background:rgba(200,144,63,.4)}
.hint{margin:-6px 0 0;color:var(--ink2);font-size:17px}
.save{display:flex;justify-content:center;margin-top:8px}
.save .btn{min-width:min(320px,100%)}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ch{position:relative;cursor:pointer}
.ch input{position:absolute;opacity:0;pointer-events:none}
.ch .o{height:100%;display:grid;justify-items:center;gap:4px;text-align:center;padding:28px 12px 24px;background:#fff;border-radius:999px 999px 8px 8px;box-shadow:0 20px 40px -30px rgba(80,30,5,.7),inset 0 0 0 1px var(--rule-d);transition:all .5s var(--ease)}
.ch .o svg{width:34px;height:34px;color:var(--brule)}
.ch .o b{font-family:var(--scr);font-weight:400;font-size:clamp(32px,7vw,42px);line-height:1}
.ch .o span{font-size:15.5px;color:var(--ink2);line-height:1.35}
.ch input:checked+.o{background:linear-gradient(160deg,#f7d6b4,#e39a62);transform:translateY(-4px);box-shadow:0 26px 44px -26px rgba(150,60,10,.9)}
.ch input:checked+.o svg{color:var(--nuit)}
.ch input:focus-visible+.o{outline:2px solid var(--brule);outline-offset:3px}
.stepper{display:flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,34px);padding:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--rule-d)}
.stepper button{width:50px;height:50px;border-radius:50%;border:1px solid var(--or2);background:transparent;color:var(--brule);font-size:24px;cursor:pointer}
.stepper button:hover{background:var(--brule);color:#fff}
.stepper .num{display:grid;justify-items:center;line-height:1}
.stepper output{font-family:var(--disp);font-size:56px;line-height:1}
.stepper small{font-family:var(--ui);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2);margin-top:6px}
.field{display:grid;gap:8px}
.field label{font-family:var(--ui);font-size:12px;letter-spacing:.06em;color:var(--ink2)}
.field input,.field textarea{width:100%;font-size:17px;background:#fff;border:1px solid rgba(200,144,63,.5);padding:13px 15px;transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:120px;resize:vertical;font-family:var(--body);font-size:19px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brule);box-shadow:0 0 0 4px rgba(224,122,58,.18)}
.off{opacity:.3;pointer-events:none;transition:opacity .4s}
.menu-card{position:relative;background:#fff;padding:clamp(30px,6vw,52px) clamp(18px,5vw,48px);box-shadow:0 40px 70px -45px rgba(80,30,5,.8)}
.menu-card::before{content:"";position:absolute;inset:10px;border:1px solid var(--or)}
.menu-card::after{content:"";position:absolute;inset:16px;border:1px solid rgba(230,181,106,.45);pointer-events:none}
.mc-head{text-align:center;margin-bottom:18px;position:relative;z-index:1}
.mc-head b{display:block;font-family:var(--scr);font-weight:400;font-size:clamp(44px,8vw,60px);line-height:1;color:var(--brule)}
.mc-head span{font-family:var(--ui);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink2)}
.grp{margin-top:18px;position:relative;z-index:1}
.grp h4{margin:0 0 4px;text-align:center;font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.38em;color:var(--or2)}
.dr{display:block;cursor:pointer;position:relative}
.dr input{position:absolute;opacity:0;pointer-events:none}
.dr .r{display:flex;align-items:center;gap:12px;padding:11px 8px;transition:background .4s}
.dr .r b{font-family:var(--body);font-weight:600;font-size:clamp(19px,3vw,22px);white-space:nowrap}
.dr .r small{font-size:14px;color:var(--ink2);font-style:italic;white-space:nowrap}
.dr .r .ld{flex:1;min-width:12px;border-bottom:1px dotted rgba(58,28,13,.35);transform:translateY(-4px)}
.dr .r .ck{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--or2);display:grid;place-items:center;transition:background .3s}
.dr .r .ck svg{width:13px;height:13px;color:#fff;opacity:0}
.dr:hover .r{background:rgba(245,230,211,.6)}
.dr input:checked+.r{background:var(--sable)}
.dr input:checked+.r .ck{background:var(--brule);border-color:var(--brule)}
.dr input:checked+.r .ck svg{opacity:1}
.dr input:disabled+.r{opacity:.4;cursor:not-allowed}
@media(max-width:420px){.dr .r small{display:none}}
.counter-t{text-align:center;font-family:var(--ui);font-size:13px;color:var(--ink2);margin-top:12px;position:relative;z-index:1}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:5px;background:#fff;box-shadow:inset 0 0 0 1px rgba(200,144,63,.5)}
.seg label{cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;padding:13px 8px;font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);transition:all .4s}
.seg input:checked+span{background:linear-gradient(120deg,#f7d6b4,#e39a62);color:var(--nuit)}
.seg input:focus-visible+span{outline:2px solid var(--brule)}
.tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.tg{cursor:pointer;position:relative}
.tg input{position:absolute;opacity:0}
.tg span{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;background:#fff;box-shadow:inset 0 0 0 1px var(--rule-d);font-size:17px;transition:all .35s}
.tg span::after{content:"";width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--or2)}
.tg input:checked+span{background:var(--nuit2);color:#fff3e2;box-shadow:none}
.tg input:checked+span::after{background:var(--or);box-shadow:inset 0 0 0 3px var(--nuit2),0 0 0 1px var(--or)}
.tg input:focus-visible+span{outline:2px solid var(--brule)}
.pass{max-width:390px;margin:0 auto;background:#fff;box-shadow:0 40px 70px -40px rgba(80,30,5,.85);text-align:center;position:relative;overflow:hidden}
.pass::before{content:"";position:absolute;inset:8px;border:1px solid var(--or);pointer-events:none;z-index:2}
.pass .tp{position:relative;height:200px;overflow:hidden}
.pass .tp img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.pass .tp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,16,6,.1),rgba(43,16,6,.85))}
.pass .tp .m{position:absolute;z-index:1;left:0;right:0;bottom:12px;font-family:var(--scr);font-size:40px;color:#fff3e2}
.pass .bd{padding:22px 24px 28px;display:grid;justify-items:center;gap:14px}
.pass .who{font-family:var(--disp);font-size:24px;line-height:1.2}
#qr{padding:12px;background:#fff;box-shadow:0 0 0 1px var(--or)}
#qr img,#qr canvas{width:188px!important;height:188px!important}
.pass .meta{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px dashed var(--or2);padding-top:14px}
.pass .meta small{display:block;font-family:var(--ui);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--brule)}
.pass .meta b{font-family:var(--disp);font-weight:500;font-size:26px}
.pass .meta b.st{font-family:var(--ui);font-size:12px;letter-spacing:.08em;line-height:39px}
.pass .code{font-family:var(--ui);font-size:12px;letter-spacing:.4em;color:var(--ink2)}
.note{text-align:center;color:var(--ink2);font-size:16.5px;margin-top:22px}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));translate:-50% 180%;z-index:130;background:var(--nuit);color:#fff3e2;padding:13px 22px;border-radius:999px;font-family:var(--ui);font-size:14px;transition:translate .5s var(--ease);max-width:calc(100% - 32px);text-align:center;box-shadow:0 0 0 1px var(--rule)}
.toast.on{translate:-50% 0}
.toast:not(.on){visibility:hidden;transition:translate .5s var(--ease),visibility 0s .5s}
#petals{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}
.lost{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px;color:#fff3e2;background:#b9481a url(../img/soie.jpg) center/cover}
.lost .box{max-width:440px;display:grid;gap:16px;justify-items:center;background:rgba(43,16,6,.6);padding:36px 24px;border:1px solid var(--rule)}
.lost h1{margin:0;font-family:var(--scr);font-weight:400;font-size:56px;color:var(--or);line-height:1}
.lost p{margin:0}
.lost form{display:flex;gap:8px;width:100%}
.lost input{flex:1;min-width:0;padding:13px;background:rgba(255,255,255,.08);border:1px solid var(--rule);color:#fff;font-family:var(--ui);letter-spacing:.2em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}#petals{display:none}}

footer.f .credit{position:relative;z-index:3;margin-top:34px;font-family:var(--ui);font-size:11px;letter-spacing:.06em;color:var(--ink2);opacity:.7}
footer.f .credit a{color:var(--brule);text-decoration:none;border-bottom:1px solid rgba(168,70,26,.35);padding-bottom:1px}
footer.f .credit a:hover{opacity:1;border-bottom-color:var(--brule)}