:root{
  --vert-nuit:#04140a; --vert:#006D16; --or:#d0b605; --or-clair:#e6cf6b;
  --ivoire:#f3efe4; --ivoire-60:rgba(243,239,228,.62);
  --panel:rgba(6,26,14,.9); --hairline:rgba(230,207,107,.22);
  --serif:"Didot","Bodoni MT","Playfair Display","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:radial-gradient(120% 90% at 50% 30%, #0c351c 0%, #06200f 45%, var(--vert-nuit) 100%);
  color:var(--ivoire);font-family:var(--sans);-webkit-font-smoothing:antialiased}
#scene{position:fixed;inset:0;touch-action:none;cursor:grab}
#scene.dragging{cursor:grabbing}
#scene.hot{cursor:pointer}
#fade{position:fixed;inset:0;background:var(--vert-nuit);opacity:0;pointer-events:none;transition:opacity .45s;z-index:25}
#fade.on{opacity:1;pointer-events:auto}

/* ---------- top bar ---------- */
header.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;padding:10px 26px;
  background:linear-gradient(to bottom, rgba(4,20,10,.88), rgba(4,20,10,0));pointer-events:none}
.brand{pointer-events:auto;line-height:0;display:block}
.brand img{height:84px;width:auto;display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
nav.modes{pointer-events:auto;display:flex;gap:26px}
nav.modes button{background:none;border:none;color:var(--ivoire-60);font:inherit;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;cursor:pointer;padding:8px 2px;border-bottom:1px solid transparent}
nav.modes button.on{color:var(--or-clair);border-bottom-color:var(--or)}
nav.modes button:hover{color:var(--or-clair)}
.bar-right{display:flex;align-items:center;gap:14px;pointer-events:auto}
#cart-btn{font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:none;
  border:1px solid var(--or);color:var(--or-clair);padding:9px 16px;border-radius:2px;cursor:pointer;
  transition:background .2s,color .2s}
#cart-btn:hover,#cart-btn:focus-visible{background:var(--or);color:var(--vert-nuit);outline:none}

/* ---------- hints ---------- */
.hintbar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:15;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ivoire-60);display:flex;gap:22px;
  white-space:nowrap;transition:opacity .8s;text-align:center}
.hintbar.gone{opacity:0}
.hintbar span b{color:var(--or-clair);font-weight:400}

/* ---------- labels galerie ---------- */
.plabel{position:fixed;z-index:12;transform:translate(-50%,0);text-align:center;pointer-events:none;
  transition:opacity .25s;opacity:0}
.plabel .n{font-family:var(--serif);font-size:16px;letter-spacing:.05em;text-shadow:0 1px 8px rgba(0,0,0,.7);white-space:nowrap}
.plabel .p{font-size:10.5px;letter-spacing:.24em;color:var(--or-clair);margin-top:4px;font-variant-numeric:tabular-nums}

/* ---------- tooltip zones ---------- */
#tip{position:fixed;z-index:18;pointer-events:none;opacity:0;transform:translate(-50%,-140%);
  background:var(--panel);border:1px solid var(--hairline);padding:8px 14px;border-radius:2px;
  text-align:center;transition:opacity .15s;backdrop-filter:blur(8px)}
#tip .z{font-family:var(--serif);font-size:15px}
#tip .c{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--or-clair);margin-top:3px}

/* ---------- panneaux latéraux (fiche produit, essayage, panier) ---------- */
.side{position:fixed;top:0;right:0;bottom:0;width:370px;max-width:100vw;z-index:30;
  background:var(--panel);backdrop-filter:blur(14px);border-left:1px solid var(--hairline);
  transform:translateX(105%);transition:transform .45s cubic-bezier(.22,.8,.24,1);
  display:flex;flex-direction:column}
.side.open{transform:translateX(0)}
.side header{padding:28px 28px 18px;border-bottom:1px solid var(--hairline);
  display:flex;align-items:flex-start;justify-content:space-between}
.side header .t{font-family:var(--serif);font-size:23px;letter-spacing:.04em}
.side header .s{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--or-clair);margin-top:7px}
.side .body{flex:1;overflow-y:auto}
.side footer{padding:18px 28px 26px;border-top:1px solid var(--hairline)}
.x{background:none;border:none;color:var(--ivoire-60);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px}
.x:hover,.x:focus-visible{color:var(--or-clair);outline:none}
.gold-btn{width:100%;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  background:var(--or);border:1px solid var(--or);color:var(--vert-nuit);padding:14px 0;
  border-radius:2px;cursor:pointer;transition:background .2s}
.gold-btn:hover:not(:disabled){background:var(--or-clair)}
.gold-btn:disabled{background:none;color:var(--ivoire-60);border-color:var(--hairline);cursor:default}
.ghost-btn{width:100%;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  background:none;border:1px solid var(--or);color:var(--or-clair);padding:13px 0;border-radius:2px;
  cursor:pointer;margin-bottom:10px}
.ghost-btn:hover{background:rgba(230,207,107,.1)}

/* fiche produit */
#pp .body{padding:22px 28px}
#pp .desc{font-size:13.5px;line-height:1.7;color:var(--ivoire-60);margin:14px 0 18px}
#pp .price{font-size:15px;letter-spacing:.1em;color:var(--or-clair);font-variant-numeric:tabular-nums}
#pp .imgs{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
#pp .imgs img{width:100%;border-radius:2px;border:1px solid var(--hairline)}
#pp .coll-tag{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--or-clair)}
#pp .stock{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-60);margin-top:8px}

/* tiroir essayage */
.item{width:100%;text-align:left;background:none;border:none;color:inherit;font:inherit;
  padding:16px 28px;cursor:pointer;display:block;border-bottom:1px solid rgba(230,207,107,.08);
  transition:background .2s;position:relative}
.item:hover,.item:focus-visible{background:rgba(230,207,107,.06);outline:none}
.item.sel{background:rgba(230,207,107,.1)}
.item.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--or)}
.item .n{font-family:var(--serif);font-size:16.5px}
.item .d{font-size:11.5px;color:var(--ivoire-60);margin-top:4px;line-height:1.5}
.item .p{font-size:12px;color:var(--or-clair);margin-top:6px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.item.none .n{font-size:12px;color:var(--ivoire-60);letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans)}

/* panier */
.line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 0;
  border-bottom:1px solid rgba(230,207,107,.08)}
.line .n{font-family:var(--serif);font-size:15px}
.line .p{font-size:12px;color:var(--or-clair);white-space:nowrap;font-variant-numeric:tabular-nums}
.line .rm{background:none;border:none;color:var(--ivoire-60);cursor:pointer;font-size:15px;padding:0 4px}
.line .rm:hover{color:var(--or-clair)}
#cart-lines{padding:8px 28px}
#cart-empty{padding:36px 28px;text-align:center;color:var(--ivoire-60);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
#total{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.12em;margin-bottom:14px;font-variant-numeric:tabular-nums}
#total b{color:var(--or-clair);font-weight:400}
#co-form input{width:100%;background:rgba(4,20,10,.6);border:1px solid var(--hairline);color:var(--ivoire);
  font:inherit;padding:11px 12px;border-radius:2px;margin-bottom:10px}
#co-form input:focus{outline:1px solid var(--or)}
#co-err{color:#e88;font-size:12px;margin-bottom:10px;display:none}

/* ---------- modal ---------- */
#modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  background:rgba(2,10,5,.75);backdrop-filter:blur(6px);padding:20px}
#modal.open{display:flex}
#modal .card{background:var(--panel);border:1px solid var(--hairline);border-radius:2px;
  max-width:420px;width:100%;padding:38px 34px;text-align:center}
#modal .diamond{font-size:26px;color:var(--or-clair)}
#modal h2{font-family:var(--serif);font-size:21px;font-weight:400;margin:16px 0 12px;letter-spacing:.04em}
#modal p{font-size:13px;line-height:1.7;color:var(--ivoire-60)}
#modal p b{color:var(--or-clair);font-weight:400}
#modal .ok{margin-top:24px;font:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  background:none;border:1px solid var(--or);color:var(--or-clair);padding:12px 30px;border-radius:2px;cursor:pointer}
#modal .ok:hover{background:var(--or);color:var(--vert-nuit)}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;
  justify-content:center;background:radial-gradient(100% 80% at 50% 40%, #0a2d17 0%, var(--vert-nuit) 100%);
  transition:opacity 1.1s;text-align:center;padding:20px}
#intro.gone{opacity:0;pointer-events:none}
#intro .intro-logo{width:min(52vw,44vh,420px);height:auto}
#intro .sub{margin-top:18px;font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--ivoire-60);padding-left:.5em}
#intro .rule{width:60px;height:1px;background:var(--or);margin:30px 0;opacity:.6}
#intro .enter{font:inherit;font-size:12px;letter-spacing:.26em;text-transform:uppercase;background:none;
  border:1px solid var(--or);color:var(--or-clair);padding:14px 38px;border-radius:2px;cursor:pointer;
  transition:background .25s,color .25s}
#intro .enter:hover,#intro .enter:focus-visible{background:var(--or);color:var(--vert-nuit);outline:none}

@media (max-width:720px){
  header.bar{padding:12px 14px;flex-wrap:wrap}
  .hintbar{bottom:14px;font-size:9px;gap:12px}
  .brand img{height:58px}
  nav.modes{order:3;width:100%;justify-content:center;margin-top:8px;gap:18px}
  nav.modes button{font-size:10px}
  .side{top:auto;height:min(74vh,580px);width:100vw;border-left:none;border-top:1px solid var(--hairline);
    transform:translateY(105%)}
  .side.open{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .side,#intro,#fade{transition:none}
}

/* ---------- salon : la Présentation privée ---------- */
#salon{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;z-index:5;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
#salon::-webkit-scrollbar{display:none}
.ss{position:relative;height:240vh}
.ss-hero,.ss-outro{height:160vh}
.ss .sticky{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.ss .media{position:absolute;inset:8vh 0 10vh;display:flex;align-items:center;justify-content:center}
.ss canvas.turn{width:min(78vmin,900px);height:min(78vmin,900px)}
.sweepwrap{position:relative;width:min(72vmin,820px);max-height:80vh;overflow:hidden;border-radius:2px}
.sweepwrap img{width:100%;height:auto;display:block}
.sweepwrap .sweep{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(230,207,107,.14) 50%, transparent 60%);
  transform:translateX(calc(-130% + var(--p,0)*260%))}
.ss .mono{font-size:60px;color:var(--or-clair);opacity:.4}
.ss .info{position:absolute;left:6vw;bottom:9vh;max-width:420px;opacity:0}
.ss .info h2{font-family:var(--serif);font-size:clamp(30px,4.6vw,52px);font-weight:400;
  letter-spacing:.04em;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.ss .info .pprice{margin-top:10px;font-size:14px;letter-spacing:.14em;color:var(--or-clair);
  font-variant-numeric:tabular-nums}
.ss .info .pdesc{margin-top:12px;font-size:13.5px;line-height:1.7;color:var(--ivoire-60);max-width:38ch}
.ss .info .cta{margin-top:22px;display:flex;gap:10px;max-width:360px}
.ss .info .cta .ghost-btn{margin-bottom:0;width:auto;padding:13px 22px}
.ss .info .cta .gold-btn{width:auto;padding:13px 22px}
.eyebrow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--or-clair)}
.ss .count{position:absolute;right:26px;bottom:24px;font-size:11px;letter-spacing:.3em;
  color:var(--ivoire-60);font-variant-numeric:tabular-nums}
.hero-in{text-align:center;padding:0 20px;max-width:720px}
.hero-in h1,.hero-in .outro-t{font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,6.5vw,72px);letter-spacing:.06em;margin:22px 0;text-wrap:balance}
.hero-in p{color:var(--ivoire-60);font-size:14px;line-height:1.9;letter-spacing:.04em;margin-bottom:26px}
.hero-in .chev{color:var(--or-clair);font-size:20px;animation:chev 2.2s ease-in-out infinite}
@keyframes chev{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(8px);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-in .chev{animation:none}}

/* fiche : viewer 360 */
.pp-spin{width:100%;aspect-ratio:1;cursor:ew-resize;touch-action:pan-y}
.pp-spin-hint{text-align:center;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ivoire-60);margin:6px 0 14px}

@media (max-width:720px){
  .ss .info{left:5vw;right:5vw;bottom:7vh;max-width:none}
  .ss canvas.turn{width:92vmin;height:92vmin}
  .ss .media{inset:10vh 0 22vh}
  .ss .count{bottom:auto;top:96px}
}

/* fond des frames fondu dans la page (vignette) */
.ss canvas.turn,.pp-spin{
  -webkit-mask-image:radial-gradient(ellipse closest-side, #000 58%, transparent 99%);
  mask-image:radial-gradient(ellipse closest-side, #000 58%, transparent 99%);
}

/* ---------- mise en scène photo détourée ---------- */
.stage{position:relative;width:min(58vmin,660px)}
.stage .halo{position:absolute;inset:-22%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, rgba(230,207,107,.17) 0%, rgba(230,207,107,.05) 42%, transparent 68%);
  opacity:calc(.35 + var(--p,0)*.65)}
.stage .piece{position:relative;width:100%;height:auto;display:block;
  filter:drop-shadow(0 38px 34px rgba(0,0,0,.55));
  transform:translateY(calc((1 - var(--p,0)) * 42px)) scale(calc(.94 + var(--p,0)*.08))}
.stage .sweep2{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transform:translateY(calc((1 - var(--p,0)) * 42px)) scale(calc(.94 + var(--p,0)*.08))}
.stage .sweep2::before{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,248,220,.5) 50%, transparent 60%);
  transform:translateX(calc(-130% + var(--p,0)*260%))}
@media (prefers-reduced-motion:reduce){
  .stage .piece,.stage .sweep2{transform:none}
}
#pp .imgs img.cutimg{
  background:radial-gradient(ellipse at 50% 42%, rgba(230,207,107,.13), rgba(4,20,10,.0) 70%);
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.5));
  border:none;padding:8%}

/* ---------- galerie sur le lac ---------- */
#lakebg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#laketint{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(4,20,10,.32), rgba(6,14,20,.08) 45%, rgba(2,8,12,.32))}
#scene{z-index:2}

#lakecredit{position:fixed;right:10px;bottom:6px;z-index:16;font-size:9px;letter-spacing:.08em;color:rgba(243,239,228,.45)}

#account-btn{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-60);
  text-decoration:none;padding:10px 6px}
#account-btn:hover{color:var(--or-clair)}
#cgv-note{margin-top:12px;font-size:10.5px;color:var(--ivoire-60);text-align:center;letter-spacing:.04em}
#cgv-note a{color:var(--or-clair);text-decoration:none}
.outro-links{margin-top:26px;font-size:11px;letter-spacing:.1em}
.outro-links a{color:var(--ivoire-60);text-decoration:none;margin:0 10px}
.outro-links a:hover{color:var(--or-clair)}

/* sélecteur de taille (fiche) */
#pp-sizes{margin-top:12px}
#pp-sizes select{width:100%;background:rgba(4,20,10,.7);border:1px solid var(--hairline);
  color:var(--ivoire);font:inherit;padding:10px 12px;border-radius:2px}
#pp-sizes select:focus{outline:1px solid var(--or)}
/* chapitres de la Présentation */
.ss-chapter{height:120vh}
.chapter-t{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.5vw,60px);
  letter-spacing:.06em;margin:20px 0 12px;text-wrap:balance}
.chapter-d{color:var(--ivoire-60);font-size:14px;letter-spacing:.04em}

/* menu sticky des chapitres (Présentation) */
#chapnav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:14;
  display:flex;flex-direction:column;gap:6px;align-items:flex-end}
#chapnav button{background:none;border:none;color:var(--ivoire-60);font:inherit;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:7px 12px;
  border-right:2px solid rgba(230,207,107,.25);transition:color .2s,border-color .2s}
#chapnav button:hover{color:var(--or-clair)}
#chapnav button.on{color:var(--or-clair);border-right-color:var(--or)}
@media (max-width:720px){
  #chapnav{right:6px;gap:2px}
  #chapnav button{font-size:9px;padding:5px 8px;letter-spacing:.12em}
}