@property --cour{syntax:'<color>';inherits:true;initial-value:#3D7BFF}
:root{--nuit:#080B1C;--nuit2:#05070F;--creme:#EFE7DA;--or:#D9B36F;--taupe:#6F6355;--encre:#241F1A;--papier:#EAE3D8;--titre:'Italiana',Georgia,serif;--texte:'Manrope',system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--nuit2);overflow-x:clip}
body{margin:0;background:var(--nuit2);color:var(--creme);font:400 16px/1.55 var(--texte);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.bloque,.bloque body{overflow:hidden}
h1,h2,h3,p{margin:0}

.barre{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,3vw,40px);pointer-events:none}
.barre::before{content:"";position:absolute;inset:0 0 -18px;z-index:-1;background:linear-gradient(180deg,rgba(5,7,15,.88),rgba(5,7,15,0));pointer-events:none}
.barre>*{pointer-events:auto}
.barre-nom{font:400 1.32rem/1 var(--titre);opacity:0}
.barre-lien{padding:9px 18px;border:1px solid rgba(217,179,111,.6);border-radius:99px;background:rgba(5,7,15,.6);color:var(--or);font-size:.9rem;font-weight:500;text-decoration:none;transition:background .25s,color .25s}
.barre-lien:hover{background:var(--or);color:var(--nuit2)}

/* Le seuil : la porte d'entrée */
.seuil{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--nuit2)}
.monde{position:absolute;inset:0;overflow:hidden}
.monde-photo{width:100%;height:100%;object-fit:cover;object-position:50% 60%;will-change:transform}
.monde::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,15,.45),transparent 30%,transparent 62%,rgba(5,7,15,.82))}
.scintille{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ici{position:absolute;inset:auto 16px 13svh;z-index:2;text-align:center}
.ici-grand{font:400 clamp(3rem,10vw,8.4rem)/1 var(--titre)}
.ici-petit{margin-top:10px;font-size:clamp(1rem,1.7vw,1.3rem);color:rgba(239,231,218,.9)}
.js .ici{opacity:0}
.zoom{position:absolute;inset:0;z-index:3;transform-origin:var(--ox,50%) var(--oy,55%)}
.mur{position:absolute;inset:0;width:100%;height:100%;display:block}
.mur-cadre{stroke-width:1.5}
.mur-cadre.fin{stroke-width:.75;opacity:.55}
.sol{position:absolute;left:0;right:0;top:var(--base);bottom:0;background:linear-gradient(180deg,#14182f,#070913 70%);border-top:1px solid rgba(217,179,111,.25)}
.sol-lumiere{position:absolute;left:50%;top:0;width:calc(var(--dw)*2);height:100%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(120,160,255,.42),rgba(120,160,255,0) 85%);clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);animation:battement 4.2s ease-in-out infinite}
@keyframes battement{50%{opacity:.62}}
.applique{position:absolute;top:calc(var(--base) - var(--dh)*.62);width:6px;height:calc(var(--dh)*.2);border-radius:6px;background:linear-gradient(180deg,#fff0cc,#D9B36F);box-shadow:0 0 22px 7px rgba(217,179,111,.5)}
.applique.gauche{left:calc(50% - var(--dw)*.5 - clamp(26px,5vw,84px))}
.applique.droite{right:calc(50% - var(--dw)*.5 - clamp(26px,5vw,84px))}
.enseigne{position:absolute;left:12px;right:12px;bottom:calc(100% - var(--base) + var(--dh) + clamp(16px,3svh,30px));margin:0;font-weight:400;text-align:center;color:var(--creme)}
.enseigne span{display:block;font:400 clamp(3rem,7.6vw,6.8rem)/1 var(--titre);letter-spacing:.01em}
.enseigne small{display:block;margin-top:8px;font:500 clamp(.74rem,1.2vw,.95rem)/1.3 var(--texte);letter-spacing:.1em;text-transform:uppercase;color:var(--or)}
.ouverture{position:absolute;left:var(--dx);top:calc(var(--base) - var(--dh));width:var(--dw);height:var(--dh);display:block;overflow:hidden;border-radius:calc(var(--dw)/2) calc(var(--dw)/2) 0 0;perspective:calc(var(--dw)*2.6);-webkit-tap-highlight-color:transparent}
.fente{position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);z-index:3;background:linear-gradient(180deg,#bcd2ff,#fff 70%);box-shadow:0 0 18px 5px rgba(150,185,255,.8);animation:battement 4.2s ease-in-out infinite}
.vantail{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:linear-gradient(100deg,#171d3b,#0D1126 55%,#1A2144);box-shadow:inset 0 0 0 1px rgba(217,179,111,.5);will-change:transform;backface-visibility:visible}
.vantail.gauche{left:0;transform-origin:0 50%}
.vantail.droite{right:0;transform-origin:100% 50%}
.etoiles{position:absolute;inset:10px;background:linear-gradient(180deg,#E7CD97 10%,#9DB7F2 75%,#6d97ff);-webkit-mask:url(etoile.svg) center top/clamp(22px,2.6vw,32px);mask:url(etoile.svg) center top/clamp(22px,2.6vw,32px);opacity:.82}
.poignee{position:absolute;top:58%;width:5px;height:15%;border-radius:5px;background:linear-gradient(90deg,#7a5a24,#F4DEA8,#8d6a32);box-shadow:0 2px 6px rgba(0,0,0,.7)}
.vantail.gauche .poignee{right:7px}
.vantail.droite .poignee{left:7px}
.pousser{position:absolute;left:12px;right:12px;top:calc(var(--base) + clamp(14px,3svh,30px));display:grid;gap:2px;text-align:center}
.pousser strong{font:400 clamp(1.5rem,3vw,2.2rem)/1.1 var(--titre)}
.pousser span{font-size:.86rem;color:rgba(239,231,218,.78)}
.brume{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.brume i{position:absolute;left:50%;bottom:-20%;width:90vmax;height:60vmax;margin-left:-45vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(226,234,255,.34),rgba(226,234,255,0));opacity:0;will-change:transform,opacity}

/* Le couloir */
.couloir{position:relative;overflow:hidden;padding:clamp(64px,10svh,110px) 0 clamp(36px,6svh,60px);background:radial-gradient(70% 62% at 50% 62%,color-mix(in srgb,var(--cour) 36%,transparent),transparent 72%),linear-gradient(180deg,var(--nuit2),var(--nuit) 45%,#04060E);transition:--cour .8s}
.couloir-tete{display:flex;flex-wrap:wrap;gap:8px 40px;justify-content:space-between;align-items:end;padding:0 clamp(16px,4vw,60px);margin-bottom:clamp(20px,3.5svh,40px)}
.couloir-tete h2{font:400 clamp(2.4rem,min(6.8vw,8svh),5rem)/1.02 var(--titre)}
.couloir-tete p{max-width:320px;color:rgba(239,231,218,.8)}
.piste{--pl:min(68vw,300px);display:flex;gap:clamp(18px,3vw,44px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px calc(50% - var(--pl)/2) 8px;cursor:grab}
.piste::-webkit-scrollbar{display:none}
.piste.glisse{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.piste.glisse .porte{pointer-events:none}
.porte{position:relative;flex:none;width:var(--pl);scroll-snap-align:center;text-decoration:none;display:block;opacity:.62;transition:opacity .45s;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none}
.porte.devant,.porte:hover{opacity:1}
.embrasure{position:relative;display:block;height:min(44svh,calc(var(--pl)*1.72));overflow:hidden;border-radius:calc(var(--pl)/2) calc(var(--pl)/2) 0 0;box-shadow:0 0 0 1px var(--or),0 0 0 6px var(--nuit2),0 0 0 7px rgba(217,179,111,.5);perspective:calc(var(--pl)*2.4);background:#000}
.vue{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.eclat{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--lueur) 55%,transparent),transparent 42%);mix-blend-mode:screen;opacity:.8}
.battant{position:absolute;inset:0;transform-origin:0 50%;transform:rotateY(-12deg);background:linear-gradient(100deg,#171d3b,#0D1126 55%,#1A2144);box-shadow:inset 0 0 0 1px rgba(217,179,111,.5),10px 0 26px rgba(0,0,0,.6);transition:transform .9s cubic-bezier(.2,.7,.2,1);will-change:transform}
.battant .etoiles{inset:12px;background:linear-gradient(180deg,#E7CD97,var(--lueur) 60%)}
.battant .poignee{right:12px}
.porte.devant .battant{transform:rotateY(-46deg)}
.porte:hover .battant{transform:rotateY(-58deg)}
.flaque{display:block;height:44px;background:linear-gradient(180deg,color-mix(in srgb,var(--lueur) 55%,transparent),transparent);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);opacity:.3;transition:opacity .45s}
.porte.devant .flaque{opacity:1}
.porte-n{display:block;margin-top:2px;font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--or)}
.porte-nom{display:block;font:400 clamp(2rem,3.4vw,2.7rem)/1.1 var(--titre);color:var(--creme)}
.porte-sous{display:block;margin-top:2px;min-height:2.9em;color:rgba(239,231,218,.8);font-size:.95rem}
.porte-prix{display:inline-block;margin-top:6px;padding:4px 11px;border:1px solid rgba(217,179,111,.55);border-radius:99px;color:var(--or);font-size:.84rem;font-weight:500}
.couloir-bas{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:clamp(18px,3svh,30px)}
.fleche{width:46px;height:46px;border:1px solid rgba(217,179,111,.6);border-radius:50%;color:var(--or);font-size:1.1rem;line-height:1;transition:background .2s,color .2s}
.fleche:hover{background:var(--or);color:var(--nuit2)}
.compteur{min-width:64px;text-align:center;font-weight:500;font-variant-numeric:tabular-nums}

/* La vraie porte */
.trouver{display:grid;grid-template-columns:1.1fr 1fr;background:var(--papier);color:var(--encre)}
.trouver-photo{min-height:340px;overflow:hidden}
.trouver-photo img{width:100%;height:100%;object-fit:cover}
.trouver-texte{padding:clamp(34px,6vw,84px) clamp(18px,5vw,76px)}
.trouver h2{margin-bottom:24px;font:400 clamp(2.4rem,5vw,4.4rem)/1.03 var(--titre)}
dl{margin:0 0 26px;display:grid;gap:14px}
dt{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
dd{margin:1px 0 0}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:99px;background:var(--nuit);color:var(--creme);font-weight:700;text-decoration:none;transition:background .2s,color .2s}
.bouton:hover{background:var(--or);color:var(--nuit2)}
.pied{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;padding:16px clamp(18px,5vw,76px);background:var(--nuit2);color:rgba(239,231,218,.74);font-size:.82rem}

/* Une pièce */
.piece{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:var(--nuit2);color:var(--encre)}
.piece[open]{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.piece::backdrop{background:transparent}
.retour{position:absolute;left:clamp(14px,2vw,28px);top:14px;z-index:5;display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;background:rgba(5,7,15,.72);color:var(--creme);font-size:.92rem;font-weight:500}
.retour:hover{background:var(--nuit2)}
.piece-photos{position:relative;min-height:0;overflow:hidden;background:#000}
.piece-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.3s;transform:scale(1.07)}
.piece-photos img.active{opacity:1;animation:approche 9s linear forwards}
@keyframes approche{to{transform:scale(1)}}
.piece-photos::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(5,7,15,.82))}
.piece-titre{position:absolute;left:clamp(16px,3vw,44px);right:16px;bottom:clamp(14px,3vw,36px);z-index:2;color:var(--creme)}
.piece-titre p{font-size:.8rem;font-weight:700;letter-spacing:.14em;color:var(--or)}
.piece-titre h2{font:400 clamp(3.1rem,7.6vw,7.4rem)/1 var(--titre)}
.piece-corps{min-height:0;background:var(--papier);overflow-y:auto;overscroll-behavior:contain;padding:clamp(70px,9svh,96px) clamp(18px,4vw,60px) 0;display:flex;flex-direction:column}
.piece-mot{margin-bottom:clamp(22px,4svh,38px);font:400 clamp(1.5rem,2.5vw,2.2rem)/1.2 var(--titre);color:var(--encre)}
.groupe{margin-bottom:26px}
.groupe h3{margin:0 0 4px;padding-bottom:8px;border-bottom:1px solid #BFB4A3;font:700 .76rem/1.2 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.groupe ul{list-style:none;margin:0;padding:0}
.soin{display:flex;width:100%;gap:18px;justify-content:space-between;align-items:baseline;padding:13px 10px;margin:0 -10px;width:calc(100% + 20px);border-bottom:1px solid #D6CCBC;border-radius:6px;text-align:left;transition:background .2s}
.soin:hover{background:#E1D8CA}
.soin[aria-pressed=true]{background:var(--nuit);color:var(--creme)}
.soin-texte{min-width:0;display:block}
.soin-nom{font-weight:700}
.soin-duree{margin-left:8px;font-size:.84rem;color:var(--taupe)}
.soin-detail{display:block;margin-top:1px;font-size:.88rem;line-height:1.4;color:var(--taupe)}
.soin[aria-pressed=true] .soin-duree,.soin[aria-pressed=true] .soin-detail{color:rgba(239,231,218,.8)}
.soin-prix{flex:none;font-weight:700;text-align:right;white-space:nowrap}
.soin-prix small{font-size:.76rem;font-weight:500}
.resa{position:sticky;bottom:0;z-index:3;margin:auto calc(clamp(18px,4vw,60px)*-1) 0;display:grid;grid-template-columns:1fr auto;gap:10px 14px;align-items:end;padding:14px clamp(18px,4vw,60px) max(14px,env(safe-area-inset-bottom));background:var(--nuit);color:var(--creme);box-shadow:0 -12px 30px rgba(36,31,26,.26)}
.resa[hidden]{display:none}
.resa-choix strong{display:block;font:400 1.34rem/1.15 var(--titre)}
.resa-choix span{color:var(--or);font-weight:700;font-size:.95rem}
.resa-duo{display:inline-flex;justify-self:end;border:1px solid rgba(217,179,111,.6);border-radius:99px;overflow:hidden}
.resa-duo[hidden]{display:none}
.resa-duo button{min-height:40px;padding:0 15px;font-size:.88rem;font-weight:500}
.resa-duo button[aria-pressed=true]{background:var(--or);color:var(--nuit2)}
.resa-date{display:grid;gap:3px;font-size:.8rem;color:rgba(239,231,218,.8)}
.resa-date input{height:46px;width:100%;padding:0 12px;border:1px solid rgba(239,231,218,.45);border-radius:10px;background:transparent;color:var(--creme);color-scheme:dark;font:16px/1 var(--texte)}
.resa-lien{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:10px;background:var(--or);color:#1B140A;font-weight:700;text-align:center;text-decoration:none}
.resa-lien:hover{background:#EBCB8E}

html:not(.js) .zoom,html:not(.js) .brume{display:none}
html:not(.js) .piece{position:static;display:block;height:auto;width:auto}

@media (max-width:820px){
  .trouver{grid-template-columns:1fr}
  .trouver-photo{min-height:0;height:46vw}
  .piece{overflow-y:auto;overscroll-behavior:contain}
  .piece[open]{display:block}
  .piece-photos{height:42svh}
  .piece-corps{overflow:visible;padding-top:22px;min-height:58svh}
  .retour{position:fixed}
  .resa{grid-template-columns:1fr 1fr}
  .resa-choix{grid-column:1/-1}
  .resa-duo{justify-self:start;align-self:end}
  .resa-lien{grid-column:1/-1}
  .resa-duo[hidden]+.resa-date{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.sol-lumiere,.fente,.piece-photos img.active{animation:none}.battant{transition:none}}