/* V2 : scènes 3D, une mise en scène par page. S'ajoute à style.css. */
.nav a.ici{color:var(--blanc)}
.nav a.ici::after{content:"";display:block;height:1px;background:var(--neon);box-shadow:0 0 8px var(--neon);margin-top:4px}
.menu-btn{display:none}

/* voile d'encre entre deux pages */
.voile{position:fixed;inset:0;z-index:200;background:var(--noir);pointer-events:none;
  -webkit-mask:url(blot.svg) center/600vmax no-repeat;mask:url(blot.svg) center/600vmax no-repeat;
  transition:-webkit-mask-size .6s cubic-bezier(.6,0,.3,1),mask-size .6s cubic-bezier(.6,0,.3,1),opacity .2s .5s}
.voile.parti{-webkit-mask-size:0vmax;mask-size:0vmax;opacity:0}
.voile.arrive{-webkit-mask-size:600vmax;mask-size:600vmax;opacity:1;transition:-webkit-mask-size .52s cubic-bezier(.6,0,.3,1),mask-size .52s cubic-bezier(.6,0,.3,1)}

/* scène épinglée : n étapes de 100 vh, la page avance seule */
.scene{position:relative;height:calc(var(--n,5)*100vh)}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--noir)}
.pin canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.ombre{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(10,10,10,.82),rgba(10,10,10,0) 42%),linear-gradient(180deg,rgba(10,10,10,.6),rgba(10,10,10,0) 16%)}
.plan{position:absolute;z-index:3;left:var(--marge);bottom:11vh;max-width:min(520px,44vw);opacity:0;visibility:hidden;will-change:opacity,translate}
.plan.d{left:auto;right:var(--marge)}
.plan.haut{bottom:auto;top:17vh}
.plan.centre{left:0;right:0;margin-inline:auto;bottom:10vh;text-align:center;max-width:min(720px,84vw)}
.plan.centre .suite{justify-content:center}
.plan.centre .kicker{justify-content:center}
.plan h1,.plan h2{font-size:clamp(46px,7vw,118px);margin:.16em 0 .2em;text-shadow:0 4px 40px rgba(0,0,0,.6)}
.plan .grand{font:400 clamp(88px,15vw,240px)/.82 var(--titre);text-shadow:0 0 60px rgba(61,255,139,.3)}
.plan p{text-shadow:0 2px 18px rgba(0,0,0,.8)}
.plan .chapo{margin-bottom:10px}
.plan .price{margin-top:14px}
.plan .suite{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;pointer-events:auto}
.plan:not(.on) .suite{pointer-events:none}
.btn-neon{border:1px solid var(--neon);color:var(--neon);background:rgba(10,10,10,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-neon:hover{background:var(--neon);color:#0a0a0a;box-shadow:0 0 30px rgba(61,255,139,.5)}
.reperes{position:absolute;z-index:4;right:20px;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:10px}
.reperes button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,242,238,.42);transition:color .3s}
.reperes button i{order:2;width:16px;height:1px;background:currentColor;transition:width .3s,background .3s,box-shadow .3s}
.reperes button.on{color:var(--blanc)}
.reperes button.on i{width:34px;background:var(--neon);box-shadow:0 0 10px var(--neon)}
.mention{position:absolute;z-index:3;left:var(--marge);top:86px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,242,238,.5)}
.mention::before{content:"";display:inline-block;width:22px;height:1px;background:var(--neon);margin-right:10px;vertical-align:middle;box-shadow:0 0 8px var(--neon)}
.geant{position:absolute;z-index:1;left:0;right:0;top:50%;translate:0 -54%;white-space:nowrap;text-align:center;font:400 clamp(120px,27vw,460px)/.8 var(--titre);text-transform:uppercase;color:rgba(244,242,238,.07);pointer-events:none;user-select:none}
.no-webgl .pin{background:#0a0a0a url(img/entree.webp) center/cover}

/* fiche qui accompagne une scène (prestations) */
.fiche{position:absolute;z-index:3;left:var(--marge);bottom:9vh;width:min(430px,40vw)}
.fiche .item{position:absolute;left:0;bottom:0;width:100%;opacity:0;visibility:hidden}
.fiche h2{font-size:clamp(40px,5.2vw,84px);margin:.2em 0}
.fiche .prix{font:400 clamp(40px,4.6vw,70px)/1 var(--titre);color:var(--neon);text-shadow:0 0 30px rgba(61,255,139,.35)}
.fiche .prix small{font-size:.36em;color:var(--gris);margin-left:.5em;letter-spacing:.1em}
.fiche p{color:var(--blanc);opacity:.86;margin-top:10px;max-width:26em}
.fiche .etu{color:var(--gris);font-size:14px}

/* cadran des millimètres (coupe dégradé) */
.cadran{position:absolute;z-index:3;right:calc(var(--marge) + 90px);top:50%;translate:0 -50%;display:grid;gap:6px;text-align:right}
.cadran span{font:400 clamp(26px,3vw,46px)/1 var(--titre);color:rgba(244,242,238,.22);transition:color .25s,text-shadow .25s,translate .25s}
.cadran span.on{color:var(--neon);text-shadow:0 0 26px rgba(61,255,139,.7);translate:-12px 0}
.cadran small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);margin-bottom:6px}

/* vraie photo du salon en médaillon (barbe) */
.medaillon{position:absolute;z-index:3;right:calc(var(--marge) + 150px);bottom:8vh;width:min(170px,14vw)}
.medaillon figure{position:absolute;right:0;bottom:0;width:100%;margin:0;opacity:0;transition:opacity .6s}
.medaillon figure.on{opacity:1}
.medaillon img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;border:1px solid var(--trait)}
.medaillon figcaption{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);margin-top:8px}
.clair .pin{background:var(--blanc)}

/* bas de page des pages intérieures */
.apres{padding:14vh var(--marge);display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);align-items:start;border-top:1px solid var(--trait)}
.apres .titre{font-size:clamp(44px,6vw,96px)}
.autres{display:grid;gap:0}
.autres a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:22px 0;border-bottom:1px solid var(--trait);text-decoration:none;font:400 clamp(26px,3vw,44px)/1 var(--titre);text-transform:uppercase;transition:color .25s,padding .25s}
.autres a small{font:400 13px/1 var(--texte);letter-spacing:.14em;color:var(--gris)}
.autres a:hover{color:var(--neon);padding-left:14px}

/* avis : tambour 3D */
.avis3d{perspective:1300px}
.note3d{position:absolute;z-index:2;left:var(--marge);top:50%;translate:0 -50%;max-width:40vw}
.note3d .note-n{font:400 clamp(130px,21vw,330px)/.8 var(--titre)}
.note3d .note-n small{font-size:.26em;color:var(--gris);margin-left:.1em}
.note3d .note-t{margin-top:20px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.note3d .avis-src{max-width:26em}
.tambour{position:absolute;z-index:3;right:calc(var(--marge) + 130px);top:52%;width:min(540px,40vw);height:0;transform-style:preserve-3d}
.carte{position:absolute;left:0;top:0;width:100%;margin:0;translate:0 -50%;padding:30px 32px;background:rgba(24,24,24,.94);border:1px solid var(--trait);border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:border-color .4s,box-shadow .4s}
.carte.on{border-color:rgba(61,255,139,.55);box-shadow:0 0 60px rgba(61,255,139,.14)}
.carte p{font:italic 400 clamp(17px,1.45vw,21px)/1.45 var(--plume)}
.carte footer{margin-top:16px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.carte footer span{color:var(--gris);margin-left:8px}
/* venir : horaires jour par jour */
.jour-plan{bottom:auto;top:50%;margin-top:-17vh;text-align:right}
.jour-plan .num{font-size:22px;letter-spacing:.24em}
.jour-plan.auj .num::after{content:" · aujourd'hui";color:var(--neon)}
.jour-plan .grand{margin-top:.12em}
.jour-plan .grand.ferme{color:rgba(244,242,238,.3);text-shadow:none}
.jour-plan .door{font:italic 400 clamp(26px,3.4vw,50px)/1.1 var(--plume);margin-top:.3em}
.venir-fixe{position:absolute;z-index:3;right:var(--marge);bottom:8vh;text-align:right;max-width:44vw}
.venir-fixe .kicker{justify-content:flex-end}
.venir-fixe h1{font-size:clamp(30px,3.4vw,54px);margin:.25em 0 .2em}
.venir-fixe p{color:var(--gris)} .venir-fixe a{color:var(--blanc)}
.venir-fixe .actions{justify-content:flex-end;margin-top:18px}
.nav{gap:20px}

@media (max-width:900px){
  .note3d{top:84px;translate:none;max-width:none;right:var(--marge)}
  .note3d .note-n{font-size:clamp(84px,27vw,130px)}
  .note3d .note-t{margin-top:8px;font-size:12px}
  .note3d .avis-src,.note3d .suite{display:none!important}
  .tambour{left:var(--marge);right:var(--marge);width:auto;top:60%}
  .carte{padding:22px}
  .carte p{font-size:16px}
  .plan.d.jour-plan{top:auto;bottom:176px;margin:0;text-align:left}
  .jour-plan .grand{font-size:clamp(64px,20vw,92px)}
  .jour-plan .door{font-size:22px}
  .jour-plan .num{font-size:15px}
  .venir-fixe{left:var(--marge);right:var(--marge);bottom:96px;text-align:left;max-width:none}
  .venir-fixe .kicker,.venir-fixe .actions{display:none}
  .venir-fixe h1{font-size:26px;margin:0 0 2px}
  .venir-fixe p{font-size:13px}
  .menu-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--trait);background:rgba(10,10,10,.5);color:var(--blanc);font:700 10px/1 var(--texte);letter-spacing:.1em;margin-left:auto;cursor:pointer}
  .top .btn{margin-left:0}
  .nav{position:fixed;inset:0;z-index:-1;background:rgba(10,10,10,.96);flex-direction:column;justify-content:center;gap:6px;padding:0 var(--marge);margin:0;opacity:0;visibility:hidden;transition:opacity .3s}
  .menu-ouvert .nav{display:flex;opacity:1;visibility:visible}
  .nav a{font:400 clamp(34px,10vw,54px)/1.15 var(--titre);text-transform:uppercase;color:var(--blanc);letter-spacing:.02em}
  .plan,.plan.d{left:var(--marge);right:var(--marge);bottom:104px;max-width:none}
  .plan.haut{top:auto;bottom:104px}
  .plan.centre{left:var(--marge);right:var(--marge);margin:0;text-align:left;bottom:104px}
  .plan.centre .suite,.plan.centre .kicker{justify-content:flex-start}
  .menu-ouvert .top{backdrop-filter:none;-webkit-backdrop-filter:none;background:none}
  .plan h1,.plan h2{font-size:clamp(42px,12.5vw,70px)}
  .reperes{right:10px;top:42%}
  .reperes button span{display:none}
  .mention{top:74px}
  .fiche{width:auto;right:var(--marge);bottom:104px}
  .cadran{top:25%;right:16px}
  .medaillon{width:92px;right:var(--marge);bottom:auto;top:100px}
  .medaillon figcaption{display:none}
  .medaillon figure{top:0;bottom:auto}
  .apres{grid-template-columns:1fr;padding:11vh var(--marge)}
  .ombre{background:linear-gradient(0deg,rgba(10,10,10,.95) 6%,rgba(10,10,10,.5) 34%,rgba(10,10,10,0) 56%),linear-gradient(180deg,rgba(10,10,10,.6),rgba(10,10,10,0) 16%)}
}