:root{--nuit:#0b1530;--or:#e9c46a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  margin:0;height:100%;overflow:hidden;background:var(--nuit);color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  touch-action:none;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
img{-webkit-user-drag:none;user-drag:none}

/* ---------- Scène : décor 360° en WebGL, le chalet est posé dessus ---------- */
#scene{position:fixed;inset:0;overflow:hidden;background:var(--nuit)}
#vue{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
body.glisse #vue{cursor:grabbing}

/* ---------- Titre ---------- */
.titre{
  position:fixed;left:0;right:0;top:max(1.4vh,env(safe-area-inset-top));margin:0;z-index:12;
  text-align:center;font-weight:400;font-style:italic;letter-spacing:.04em;
  font-size:clamp(1.05rem,2.6vw,2rem);pointer-events:none;
  text-shadow:0 .08em .5em rgba(0,0,0,.75),0 0 .15em rgba(0,0,0,.6);
}
.titre em{font-style:normal;color:var(--or);font-weight:700}

/* ---------- Chalet posé sur le meuble (position et taille données par vue.js) ---------- */
#chalet{
  position:absolute;left:0;top:0;aspect-ratio:1200/1541;width:40vw;
  transform-origin:50% 100%;container-type:inline-size;will-change:transform;
}
#chalet-img{
  position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;
  filter:drop-shadow(0 .8cqw 1.2cqw rgba(0,0,0,.5));
}
.ombre{
  position:absolute;left:-6%;right:-6%;bottom:-2.2%;height:7%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,.25) 60%,transparent);
}
#portes{position:absolute;inset:0}

/* ---------- Portes et fenêtres ---------- */
.porte{
  position:absolute;perspective:1600px;cursor:pointer;
  appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;background:none;
  color:inherit;font-family:inherit;outline:none;z-index:1;
}
.porte *{pointer-events:none}
.porte:focus-visible{outline:.3cqw solid #fff;outline-offset:.2cqw}
.porte.ouverte{z-index:3}
.interieur{
  position:absolute;inset:3%;border-radius:var(--rad,.3cqw);opacity:0;
  background:radial-gradient(ellipse at 50% 60%,#fffbe0 0%,#ffe08a 45%,#f2a23a 100%);
  box-shadow:inset 0 0 .7cqw rgba(70,28,0,.65);
}
/* Au survol d'une fenêtre déjà ouverte, son numéro réapparaît (pour retrouver un jour déjà consulté) */
.revoir{position:absolute;inset:3%;display:grid;place-items:center;z-index:1;opacity:0;pointer-events:none;transition:opacity .25s;
  font-family:Georgia,"Times New Roman",serif;font-weight:700;line-height:1;color:#f6dc8e;
  background:radial-gradient(closest-side,rgba(10,5,0,.5),rgba(10,5,0,0));
  text-shadow:0 0 .35cqw #000,0 .12cqw .3cqw #000,0 -.05cqw 0 #fff1b8}
.porte.ouverte:hover .revoir,.porte.ouverte:focus-visible .revoir{opacity:1}
/* Le décor vu par la fenêtre apparaît quand le halo retombe */
.interieur::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--img) var(--bp,center)/var(--bs,cover) no-repeat;opacity:0;transition:opacity 1.5s ease 1.1s}
.porte.ouverte .interieur::before{opacity:1}
#vitres{position:absolute;inset:0;pointer-events:none;z-index:6}
#vitres .vitre{position:absolute;pointer-events:none;overflow:hidden;opacity:0;animation:vitre-in 1.2s ease 1s forwards;
  background:linear-gradient(118deg,rgba(255,255,255,.3) 0,rgba(255,255,255,.1) 24%,rgba(255,255,255,.02) 38%,rgba(255,255,255,.12) 58%,rgba(255,255,255,0) 70%),rgba(205,222,240,.1);
  box-shadow:inset 0 0 .6cqw rgba(0,0,0,.5),inset 0 0 .15cqw rgba(255,255,255,.4)}
@keyframes vitre-in{to{opacity:1}}
#vitres .bv,#vitres .bh{position:absolute;display:block;box-shadow:0 0 .25cqw rgba(0,0,0,.55)}
#vitres .bv{top:0;bottom:0;width:.7cqw;margin-left:-.35cqw;background:linear-gradient(90deg,#2d1a0c,#8a5d37 45%,#4a2d17)}
#vitres .bh{left:0;right:0;height:.7cqw;margin-top:-.35cqw;background:linear-gradient(180deg,#2d1a0c,#8a5d37 45%,#4a2d17)}.vantail{position:absolute;top:0;height:100%;transform-style:preserve-3d;
  transition:transform 1.15s cubic-bezier(.45,.05,.3,1)}
.vantail.g{left:0}.vantail.d{right:0}
.vantail.l,.vantail.r{width:100%;left:0}
.vantail.g,.vantail.l{transform-origin:0 50%}
.vantail.d,.vantail.r{transform-origin:100% 50%}
.vantail.g{width:50%}.vantail.d{width:50%}
.face,.dos{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit}
.face{background-image:url("img/chalet-ferme.webp");background-repeat:no-repeat}
.dos{transform:rotateY(180deg);background:linear-gradient(90deg,#4b2f1b,#6a4426)}
.porte:not(.ouverte):not(.futur):hover .face,.porte:not(.ouverte):not(.futur):focus-visible .face{filter:brightness(1.14)}

.halo{
  position:absolute;left:50%;top:50%;width:430%;height:430%;z-index:-1;
  transform:translate(-50%,-50%) scale(.2);opacity:0;
  background:radial-gradient(closest-side,rgba(255,240,180,1) 0%,rgba(255,206,100,.78) 28%,rgba(255,165,55,.42) 54%,rgba(255,140,30,.14) 80%,rgba(255,130,20,0) 100%);
}
.porte.ouverte .interieur{opacity:1;transition:opacity .15s;box-shadow:inset 0 0 .7cqw rgba(70,28,0,.55),0 0 .8cqw .15cqw rgba(255,205,100,.3)}
.porte.ouverte .vantail.g,.porte.ouverte .vantail.l{transform:rotateY(-98deg)}
.porte.ouverte .vantail.d,.porte.ouverte .vantail.r{transform:rotateY(98deg)}
.porte.ouverte .halo{animation:halo-in 2.4s ease-out forwards}
/* Le halo éclate à l'ouverture puis retombe en douce lueur : les numéros voisins restent lisibles */
@keyframes halo-in{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
}
@keyframes halo-vie{
  0%,100%{opacity:.26;transform:translate(-50%,-50%) scale(.55)}
  50%{opacity:.34;transform:translate(-50%,-50%) scale(.6)}
}

/* La case du jour respire doucement */
.porte.aujourdhui:not(.ouverte)::after{
  content:"";position:absolute;inset:-4%;border-radius:var(--rad,.4cqw);pointer-events:none;
  box-shadow:0 0 .8cqw .3cqw rgba(255,214,120,.9);animation:pouls 1.9s ease-in-out infinite;
}
@keyframes pouls{0%,100%{opacity:.25}50%{opacity:1}}
.porte.refus{animation:secoue .45s}
@keyframes secoue{
  0%,100%{transform:translateX(0)}20%{transform:translateX(-.5cqw)}40%{transform:translateX(.5cqw)}
  60%{transform:translateX(-.35cqw)}80%{transform:translateX(.25cqw)}
}

/* Chiffres ajoutés sur l'image (le 12 et la cheminée n°3) */
.chiffre{
  font-family:"Helvetica Neue",Arial,sans-serif;font-weight:700;line-height:1;letter-spacing:-.02em;
  background:linear-gradient(180deg,#f3dc8f 0%,#c79f4a 55%,#a07c33 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 .15cqw .15cqw rgba(0,0,0,.5));
}
.rustine{position:absolute;inset:14% 12%;display:grid;place-items:center;background:#150c06;border-radius:.2cqw;z-index:1}
.rustine .chiffre{font-size:3.6cqw}
.cheminee .chiffre{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);font-size:4.6cqw}
.cheminee .interieur{display:none}
.fumee{position:absolute;left:50%;bottom:92%;width:0;height:0;pointer-events:none}
.fumee i{
  position:absolute;left:-1.3cqw;top:0;width:2.6cqw;height:2.6cqw;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0));
}
.cheminee.ouverte .fumee i{animation:fumee 3.2s ease-out infinite}
.cheminee.ouverte .fumee i:nth-child(2){animation-delay:1.05s}
.cheminee.ouverte .fumee i:nth-child(3){animation-delay:2.1s}
@keyframes fumee{
  0%{opacity:0;transform:translate(0,0) scale(.5)}
  20%{opacity:.85}
  100%{opacity:0;transform:translate(2.2cqw,-9cqw) scale(2.6)}
}

/* Lutins en couleur : ils marchent dans la maison et ne se voient que dans les fenêtres ouvertes */
#lutins{position:absolute;inset:0;pointer-events:none;z-index:5}
.cadre-lutin{position:absolute;inset:0;mix-blend-mode:multiply}
.lutin{position:absolute;left:0;top:0;transform-origin:50% 100%;will-change:transform}
.lutin-in{width:100%;height:100%;animation:trot .46s ease-in-out infinite alternate}
.lutin svg{display:block;width:100%;height:100%;overflow:visible}
.lutin.photo .lutin-in{animation:none}
.lutin .img{width:100%;height:100%;background-size:600% 100%;background-repeat:no-repeat}
.lutin .jb1{transform-origin:16px 47px;animation:balance .46s ease-in-out infinite alternate}
.lutin .jb2{transform-origin:23px 47px;animation:balance .46s ease-in-out infinite alternate-reverse}
.lutin .br1{transform-origin:14px 31px;animation:balance .46s ease-in-out infinite alternate-reverse}
.lutin .br2{transform-origin:26px 31px;animation:balance .46s ease-in-out infinite alternate}
.lutin .marteau{transform-origin:27px 32px}.lutin .pinceau{transform-origin:27px 32px}.lutin .noeud{transform-origin:27px 32px}
.lutin.travaille .lutin-in{animation:none}
.lutin.travaille .jb1,.lutin.travaille .jb2,.lutin.travaille .br1,.lutin.travaille .br2{animation:none}
.lutin.travaille .marteau{animation:marteau .38s ease-in infinite}
.lutin.travaille .pinceau{animation:pinceau .55s ease-in-out infinite alternate}
.lutin.travaille .noeud{animation:pinceau .3s ease-in-out infinite alternate}
@keyframes balance{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
@keyframes trot{from{transform:translateY(0)}to{transform:translateY(-.5cqw)}}
@keyframes marteau{0%{transform:rotate(-38deg)}55%{transform:rotate(14deg)}100%{transform:rotate(-38deg)}}
@keyframes pinceau{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}

#son{
  position:fixed;right:max(.8rem,env(safe-area-inset-right));bottom:max(.8rem,env(safe-area-inset-bottom));z-index:20;
  width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0;
  color:#fff3cf;background:rgba(14,22,48,.72);border:1px solid rgba(233,196,106,.55);
}
#son svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#son .coupe{display:none}
#son.muet .coupe{display:block}
#son.muet .onde{display:none}
#son:focus-visible{outline:.15rem solid #fff;outline-offset:.15rem}
#actions{
  position:fixed;right:calc(max(.8rem,env(safe-area-inset-right)) + 3.2rem);bottom:max(.8rem,env(safe-area-inset-bottom));z-index:20;
  display:flex;gap:.5rem;
}
#fermer,#ouvrir{
  height:2.6rem;padding:0 1.05rem;border-radius:1.3rem;cursor:pointer;font:inherit;font-size:.95rem;font-weight:700;
  color:#fff3cf;background:rgba(14,22,48,.72);border:1px solid rgba(233,196,106,.55);white-space:nowrap;
  transition:opacity .25s;
}
@media (max-width:430px){#fermer,#ouvrir{padding:0 .7rem;font-size:.82rem}#actions{gap:.35rem}}
#ouvrir:disabled{opacity:.45;cursor:default}
#ouvrir:not(:disabled):hover{background:rgba(40,52,92,.85)}
#ouvrir:focus-visible{outline:.15rem solid #fff;outline-offset:.15rem}
#fermer:disabled{opacity:.45;cursor:default}
#fermer:not(:disabled):hover{background:rgba(40,52,92,.85)}
#fermer:focus-visible{outline:.15rem solid #fff;outline-offset:.15rem}

/* ---------- Neige, message, carte ---------- */
#neige{position:fixed;inset:0;width:100%;height:100%;z-index:10;pointer-events:none}
#toast{
  position:fixed;left:50%;bottom:max(4vh,env(safe-area-inset-bottom));z-index:40;
  transform:translate(-50%,1.2em);opacity:0;pointer-events:none;
  max-width:min(90vw,26rem);padding:.7em 1.2em;border-radius:2em;text-align:center;
  background:rgba(14,22,48,.92);border:1px solid rgba(233,196,106,.6);font-size:1rem;
  transition:opacity .3s,transform .3s;
}
#toast.visible{opacity:1;transform:translate(-50%,0)}

#carte{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:1rem}
#carte[hidden]{display:none}
.carte-voile{position:absolute;inset:0;background:rgba(5,9,22,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.carte-boite{
  position:relative;width:min(100%,30rem);max-height:82vh;max-height:82dvh;overflow:auto;
  touch-action:pan-y;-webkit-overflow-scrolling:touch;
  padding:1.6rem 1.5rem 1.3rem;border-radius:.9rem;text-align:center;
  background:linear-gradient(180deg,#3b2514,#26160a);color:#fff3dc;
  border:.18rem solid var(--or);box-shadow:0 1.2rem 3rem rgba(0,0,0,.6),0 0 3rem rgba(255,190,80,.25);
  -webkit-user-select:text;user-select:text;
  animation:carte-in .45s ease-out;
}
@keyframes carte-in{from{opacity:0;transform:translateY(1.2rem) scale(.96)}to{opacity:1;transform:none}}
#carte-date{margin:0 0 .3rem;color:var(--or);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
#carte-titre{margin:0 0 .9rem;font-size:1.7rem;font-weight:700}
#carte-corps p{margin:0 0 .8rem;line-height:1.5;font-size:1.05rem}
#carte-corps img{display:block;max-width:100%;margin:.4rem auto 1rem;border-radius:.5rem}
#carte-fermer{
  margin-top:.4rem;padding:.6rem 1.6rem;border-radius:2rem;cursor:pointer;
  font:inherit;font-weight:700;color:#2a1707;background:linear-gradient(180deg,#f6dd8a,#d9a73e);
  border:0;box-shadow:0 .15rem .5rem rgba(0,0,0,.5);
}
#carte-fermer:focus-visible{outline:.15rem solid #fff;outline-offset:.15rem}
.noscript{position:fixed;inset:auto 0 50% 0;text-align:center;z-index:50}

@media (prefers-reduced-motion:reduce){
  #lutins{display:none}
  .vantail{transition-duration:.01s}
  .porte.ouverte .halo{animation:none;opacity:0}
  .porte.aujourdhui:not(.ouverte)::after,.carte-boite,.porte.refus,.cheminee.ouverte .fumee i{animation:none}
}

/* Bouton gyroscope / recentrage (téléphones) */
#pano{display:none}
@media (pointer:coarse){
  #pano{
    position:fixed;left:max(.8rem,env(safe-area-inset-left));bottom:max(.8rem,env(safe-area-inset-bottom));z-index:20;
    display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;padding:0;
    color:#fff3cf;background:rgba(14,22,48,.72);border:1px solid rgba(233,196,106,.55);
  }
  #pano svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #pano.actif{background:rgba(233,196,106,.28)}
}

#tableau-grand{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(0,0,0,.78);cursor:pointer}
#tableau-grand[hidden]{display:none}
#tableau-grand canvas{width:min(94vw,calc(88vh*1.3));height:auto;box-shadow:0 10px 60px #000;border-radius:6px}
#tableau-grand.vertical:not([hidden]){display:block;overflow-y:auto;padding:3rem 2vw 1.5rem;-webkit-overflow-scrolling:touch}
#tableau-grand.vertical canvas{width:96vw;height:auto;display:block;margin:0 auto}
#tableau-grand{touch-action:pan-y}
#tg-fermer{position:fixed;z-index:45;right:max(.8rem,env(safe-area-inset-right));top:max(.8rem,env(safe-area-inset-top));padding:.7rem 1.1rem;min-height:2.8rem;border-radius:2rem;border:1px solid rgba(255,243,200,.6);background:rgba(20,28,25,.92);color:#ffe9a8;font:600 1rem Georgia,serif;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#tg-fermer[hidden]{display:none}

#actions{display:none!important}

/* Mode décor : calendrier en fond de la page de connexion, rien n'est cliquable */
.decor .titre,.decor #pano,.decor #son,.decor #actions,.decor #toast,.decor #carte,.decor #indispo,.decor #tableau-grand,.decor #tg-fermer{display:none!important}
.decor #chalet,.decor #portes,.decor #portes *{pointer-events:none!important}