/* Cormorant Garamond, hebergee sur le site (plus de Google Fonts) */
@font-face{font-family: 'Cormorant Garamond';font-style: italic;font-weight: 300;font-display: swap;src: url(fonts/cg-300i-cyrillic-ext.woff2) format('woff2');unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family: 'Cormorant Garamond';font-style: italic;font-weight: 300;font-display: swap;src: url(fonts/cg-300i-cyrillic.woff2) format('woff2');unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family: 'Cormorant Garamond';font-style: italic;font-weight: 300;font-display: swap;src: url(fonts/cg-300i-vietnamese.woff2) format('woff2');unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family: 'Cormorant Garamond';font-style: italic;font-weight: 300;font-display: swap;src: url(fonts/cg-300i-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Cormorant Garamond';font-style: italic;font-weight: 300;font-display: swap;src: url(fonts/cg-300i-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Cormorant Garamond';font-style: normal;font-weight: 300;font-display: swap;src: url(fonts/cg-300-cyrillic-ext.woff2) format('woff2');unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family: 'Cormorant Garamond';font-style: normal;font-weight: 300;font-display: swap;src: url(fonts/cg-300-cyrillic.woff2) format('woff2');unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family: 'Cormorant Garamond';font-style: normal;font-weight: 300;font-display: swap;src: url(fonts/cg-300-vietnamese.woff2) format('woff2');unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family: 'Cormorant Garamond';font-style: normal;font-weight: 300;font-display: swap;src: url(fonts/cg-300-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Cormorant Garamond';font-style: normal;font-weight: 300;font-display: swap;src: url(fonts/cg-300-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: 'Cormorant Garamond';font-style: normal;font-weight: 400;font-display: swap;src: url(fonts/cg-300-cyrillic-ext.woff2) format('woff2');unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family: 'Cormorant Garamond';font-style: normal;font-weight: 400;font-display: swap;src: url(fonts/cg-300-cyrillic.woff2) format('woff2');unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family: 'Cormorant Garamond';font-style: normal;font-weight: 400;font-display: swap;src: url(fonts/cg-300-vietnamese.woff2) format('woff2');unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family: 'Cormorant Garamond';font-style: normal;font-weight: 400;font-display: swap;src: url(fonts/cg-300-latin-ext.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family: 'Cormorant Garamond';font-style: normal;font-weight: 400;font-display: swap;src: url(fonts/cg-300-latin.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

.yl-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
:root{
  --fond:#F7F6F3; --encre:#1A1A1A; --rouge:#C8102E;
  --murbase:var(--fond);
  --cmur:color-mix(in srgb,var(--murbase) 97%,#000000);
  --clat:color-mix(in srgb,var(--murbase) 90%,#000000);
  --cpl:color-mix(in srgb,var(--murbase) 99%,#FFFFFF);
  --csol:color-mix(in srgb,var(--murbase) 74%,#000000);
  --grave:color-mix(in srgb,var(--encre) 56%,var(--murbase));
  --hautrelief:color-mix(in srgb,#FFFFFF 46%,transparent);
  --basrelief:rgba(0,0,0,.22);
  --ombre:rgba(0,0,0,.22);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark; --fond:#141415; --encre:#EDEBE6; --rouge:#E5142C;
  --cmur:color-mix(in srgb,var(--murbase) 88%,#FFFFFF);
  --clat:color-mix(in srgb,var(--murbase) 96%,#FFFFFF);
  --cpl:color-mix(in srgb,var(--murbase) 78%,#FFFFFF);
  --csol:color-mix(in srgb,var(--murbase) 89%,#FFFFFF);
  --hautrelief:color-mix(in srgb,#FFFFFF 18%,transparent);
  --basrelief:rgba(0,0,0,.5); --ombre:rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  color-scheme:dark; --fond:#141415; --encre:#EDEBE6; --rouge:#E5142C;
  --cmur:color-mix(in srgb,var(--murbase) 88%,#FFFFFF);
  --clat:color-mix(in srgb,var(--murbase) 96%,#FFFFFF);
  --cpl:color-mix(in srgb,var(--murbase) 78%,#FFFFFF);
  --csol:color-mix(in srgb,var(--murbase) 89%,#FFFFFF);
  --hautrelief:color-mix(in srgb,#FFFFFF 18%,transparent);
  --basrelief:rgba(0,0,0,.5); --ombre:rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--fond);color:var(--encre);overflow:hidden;
  font-family:"Cormorant Garamond","Iowan Old Style",Palatino,Georgia,serif;
  -webkit-font-smoothing:antialiased}

#scene{position:fixed;inset:0;perspective:var(--P,1000px);perspective-origin:50% 46%;overflow:hidden}
#salle{position:absolute;left:50%;top:46%;width:0;height:0;transform-style:preserve-3d;
  transform:rotateY(var(--h,0deg)) translate3d(var(--cx,0px),0,var(--cz,0px))}
.face{position:absolute;backface-visibility:hidden}
.mur{width:0;height:0;left:0;top:0;background:none}
.mur.photo{--teinte:color-mix(in srgb,var(--cmur) 100%,#000000)}
.mur.musique{--teinte:color-mix(in srgb,var(--cmur) 95%,#B98A4A)}
.mur.art{--teinte:color-mix(in srgb,var(--cmur) 95%,#4A6FA8)}
.mur.video{--teinte:color-mix(in srgb,var(--cmur) 94%,#3A3A3C)}
.m0{transform:translateZ(calc(var(--D)/-2))}
.m1{transform:rotateY(-90deg) translateZ(calc(var(--D)/-2))}
.m4{transform:rotateY(-90deg) translateZ(calc(var(--D)/-2))} /* p251 : mur Design, meme place que le mur 1 */
.m2{transform:rotateY(180deg) translateZ(calc(var(--D)/-2))}
.m3{transform:rotateY(90deg)  translateZ(calc(var(--D)/-2))} /* p247 : mur Video (etage Video) — regle perdue, remise */

.plafond,.sol{width:0;height:0;left:0;top:0;background:none;transform-style:preserve-3d}
.plafond{transform:rotateX(-90deg) translateZ(calc(var(--Hm)/-2))}
.sol{transform:rotateX(90deg) translateZ(calc(var(--Hm)/-2))}
.dalle{position:absolute;width:var(--T,3000px);height:var(--T,3000px);
  left:calc(var(--T,3000px)*var(--i));top:calc(var(--T,3000px)*var(--j));
  transform:translateZ(0);backface-visibility:hidden}

/* une station : une oeuvre, son cartel, sa legende et les deux menus a ses cotes */
.station{position:absolute;height:var(--Hm);width:var(--span,2000px);
  top:calc(var(--Hm)/-2);left:calc(var(--u) - var(--span,2000px)/2)}
.station::before{content:"";position:absolute;top:0;bottom:0;left:50%;z-index:-1;
  width:min(calc(var(--pas)*1.08),3900px);margin-left:calc(min(calc(var(--pas)*1.08),3900px)/-2);
  background:var(--teinte,var(--cmur));
  transform:translateZ(0);backface-visibility:hidden}
.station.bout::before{width:min(calc(var(--pas)*2.4),3900px);margin-left:calc(min(calc(var(--pas)*2.4),3900px)/-2)}
.grave{color:var(--grave);text-shadow:0 1px 0 var(--hautrelief),0 -1px 1px var(--basrelief)}
.cartel{position:absolute;left:0;right:0;top:11%;margin:0;text-align:center;transform:translateZ(0);transition:opacity .75s ease;
  font-size:calc(var(--Hm)*.030);letter-spacing:.24em;text-transform:uppercase;text-indent:.24em}
.tableau{position:absolute;left:50%;top:50%;width:0;height:0;overflow:visible;transform:translateZ(0);perspective:calc(var(--Hm)*1.6)}
.cadre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border:var(--cadrelarg,1px) solid var(--cadrebord,color-mix(in srgb,var(--encre) 22%,transparent));
  padding:calc(var(--Hm)*.007);background:var(--cadrefond,var(--cmur));
  box-shadow:0 calc(var(--Hm)*.022) calc(var(--Hm)*.05) calc(var(--Hm)*-.024) var(--ombre);
  transition:border-color .8s ease,background-color .8s ease}
.cadre img{display:block;max-width:calc(var(--span)*.40);max-height:calc(var(--Hm)*.56);
  width:auto;height:auto}
.cadre.vide{width:calc(var(--span)*.34);height:calc(var(--span)*.34*2/3);display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.cadre.sonne{cursor:pointer}
#yl-mur{position:fixed;left:50%;top:var(--ymos,78vh);transform:translateX(-50%);z-index:5;
  width:12px;height:12px;border:1px solid var(--encre);border-radius:1.5px;background:transparent;padding:0;
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity .9s ease}
#yl-mur.vis{opacity:.42;pointer-events:auto}
#yl-mur.vis:hover,#yl-mur.vis:focus-visible{opacity:1}
.enseigne{position:absolute;left:0;top:calc(var(--Hm)*-.40);transform:translateX(-50%);margin:0;white-space:nowrap;
  font-size:calc(var(--Hm)*.11);letter-spacing:.14em;opacity:0;transition:opacity 1.4s ease;pointer-events:none}
#yl-mos{position:fixed;inset:0;z-index:6;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;
  gap:22px 26px;padding:70px 48px 90px;background:color-mix(in srgb,var(--fond) 93%,transparent);
  opacity:0;pointer-events:none;transition:opacity .9s ease}
#yl-mos.on{opacity:1;pointer-events:auto}
#yl-mos button{border:0;background:transparent;padding:0;cursor:pointer;height:var(--hm,24vh);
  transition:transform .35s ease}
#yl-mos button:hover,#yl-mos button:focus-visible{transform:translateY(-3px)}
#yl-mos img{display:block;height:100%;width:auto;padding:4px;background:var(--cface);
  border:1px solid color-mix(in srgb,var(--encre) 16%,transparent);
  box-shadow:0 18px 34px -20px var(--ombre)}
#yl-mos button.cur img{outline:1px solid var(--rouge);outline-offset:4px}
#yl-mos button span{display:grid;place-items:center;height:100%;padding:0 1.2em;font-style:italic;color:var(--grave)}
#yl-mos{flex-direction:column;flex-wrap:nowrap;gap:30px;overflow-y:auto;justify-content:safe center;align-items:center}
#yl-mos .grp{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
#yl-mos .grp .rang{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 22px}
#yl-mos .nomg{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--grave)}
.cadre .lect{position:absolute;left:0;bottom:-6%;width:calc(var(--Hm)*.022);height:calc(var(--Hm)*.022);
  margin-left:calc(var(--Hm)*.004);opacity:0;transition:opacity .6s ease;
  background:var(--encre);clip-path:polygon(0 0,100% 50%,0 100%)}
.cadre.sonne .lect{opacity:.4}

.cadre.joue .lect{clip-path:none;background:linear-gradient(90deg,var(--encre) 0 34%,transparent 34% 66%,var(--encre) 66%);opacity:.9}
.phrase{display:block;padding:7%;font-style:italic;text-align:center;
  font-size:calc(var(--Hm)*.034);line-height:1.3;color:inherit;opacity:.82}
.legende{position:absolute;top:100%;right:0;width:max-content;max-width:calc(var(--Hm)*.46);
  margin-top:calc(var(--Hm)*.028);text-align:right;line-height:1.5;
  font-size:calc(var(--Hm)*.019);letter-spacing:.04em}
.legende b{display:block;font-weight:400;font-style:italic;font-size:calc(var(--Hm)*.023)}
.legende i{display:block;font-style:normal;opacity:.75}
.legende em{display:block;margin-top:calc(var(--Hm)*.010);font-style:normal;
  font-size:calc(var(--Hm)*.015);letter-spacing:.22em;opacity:.45}

/* le sommaire : il prend la place du tableau quand on touche le cartel */
.tableau{transition:none}

.objet{position:absolute;left:14%;top:20%;width:calc(var(--Hm)*.20);border:0;background:transparent;
  padding:0;cursor:pointer;filter:drop-shadow(0 calc(var(--Hm)*.012) calc(var(--Hm)*.02) var(--ombre))}
.objet svg{display:block;width:100%;height:auto}
.objet .corps{fill:color-mix(in srgb,var(--murbase) 62%,#000);stroke:color-mix(in srgb,var(--encre) 34%,transparent);stroke-width:1}

.objet .lentille{fill:color-mix(in srgb,var(--encre) 70%,var(--murbase))}

#yl-entree{position:fixed;inset:0;z-index:20;cursor:pointer;user-select:none;-webkit-user-select:none;
  outline:0;overflow:hidden;transition:opacity .7s ease 1.2s}
#yl-entree .battant{position:absolute;top:0;bottom:0;width:50%;background:var(--fond);
  transition:transform 1.7s cubic-bezier(.55,0,.15,1)}
#yl-entree .battant.g{left:0;border-right:1px solid color-mix(in srgb,var(--encre) 30%,transparent)}
#yl-entree .battant.d{right:0}
#yl-entree .nom{position:absolute;left:0;right:0;top:34%;text-align:center;font-weight:300;
  font-size:clamp(30px,4.2vw,46px);letter-spacing:.32em;text-indent:.32em;color:var(--encre);
  pointer-events:none;transition:opacity 1.2s ease}
#yl-entree .ent{position:absolute;left:36px;top:50%;margin-top:-7px;line-height:14px;font-size:11px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--encre);white-space:nowrap;
  animation:yl-resp 3.2s ease-in-out infinite;transition:opacity 1.2s ease}
#yl-entree .poignee{position:absolute;left:22px;top:50%;width:2px;height:40px;margin-top:-20px;
  border-radius:2px;background:var(--encre);opacity:.75}
#yl-entree .judas{position:absolute;left:0;top:21%;width:22px;height:22px;margin-left:-11px;
  border-radius:50%;border:1.2px solid var(--encre);box-sizing:border-box;
  background:color-mix(in srgb,var(--fond) 92%,transparent);cursor:pointer;z-index:2;
  transition:opacity .9s ease}
#yl-entree .judas .oeil{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--rouge);transition:opacity .5s ease}
#yl-entree .judas .lentille{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;
  background:var(--vu,none) center/135% no-repeat,#111;transform:translate(-50%,-50%);
  box-shadow:inset 0 0 34px 10px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.18);filter:blur(.5px);
  opacity:0;transition:width .7s cubic-bezier(.3,0,.2,1),height .7s cubic-bezier(.3,0,.2,1),opacity .5s ease}
#yl-entree .judas:hover .lentille,#yl-entree .judas.on .lentille{width:150px;height:150px;opacity:1}
#yl-entree .judas:hover .oeil,#yl-entree .judas.on .oeil{opacity:0}
#yl-entree.off{opacity:0;pointer-events:none}
#yl-entree.off .judas{opacity:0}
#yl-entree.off .battant.g{transform:translateX(-101%)}
#yl-entree.off .battant.d{transform:translateX(101%)}
#yl-entree.off .nom,#yl-entree.off .ent{opacity:0;animation:none}
@keyframes yl-resp{0%,100%{opacity:.34}50%{opacity:.85}}
body.dehors .fleche,body.dehors #banc,body.dehors #aide{opacity:0;pointer-events:none;
  transition:opacity .6s ease}
#banc{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);width:132px;height:30px;border:0;background:transparent;
  padding:0;cursor:pointer;z-index:9;opacity:.5;transition:opacity .4s ease}
#banc:hover{opacity:1}
#banc svg{width:100%;height:100%;fill:none;stroke:var(--encre);stroke-width:1.3}
.fleche{position:fixed;top:50%;transform:translateY(-50%);z-index:9;border:0;background:transparent;
  color:var(--encre);opacity:.55;cursor:pointer;font-size:40px;line-height:1;padding:18px;
  font-family:inherit;transition:opacity .4s ease}
.fleche:hover{opacity:.9}
#gauche{left:calc(10px + env(safe-area-inset-left,0px))}
#droite{right:calc(10px + env(safe-area-inset-right,0px))}
#aide{position:fixed;left:0;right:0;bottom:calc(74px + env(safe-area-inset-bottom,0px));
  margin:0;padding:0 16px;text-align:center;z-index:9;font-size:12px;letter-spacing:.14em;opacity:.34}
@media (max-width:760px){
  #aide{display:none}
  .cadre img{max-width:calc(var(--span)*.62);max-height:calc(var(--Hm)*.46)}
  .cadre.vide{width:calc(var(--span)*.58);height:calc(var(--span)*.58*2/3)}
  
  
  
  
  
  .cartel{top:8%;font-size:calc(var(--Hm)*.034)}
  .legende{margin-top:calc(var(--Hm)*.024);font-size:calc(var(--Hm)*.022)}
  .fleche{font-size:26px;padding:14px 10px}
  #banc{width:104px}
}
@media (prefers-reduced-motion:reduce){#salle{transition-duration:.01ms}}
/* le logo, fixe en haut ; le cartel en rouge dessous, c'est le menu */
#yl-logo{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:9;margin:0;
  border:0;background:transparent;padding:4px 10px;cursor:pointer;font-family:inherit;
  font-size:28px;letter-spacing:.06em;color:var(--grave);transition:opacity 1.2s ease,color .5s ease}
#yl-logo:hover,#yl-logo:focus-visible{color:var(--encre)}
#yl-logo::after{content:"";display:inline-block;width:.30em;height:.30em;margin-left:.45em;vertical-align:.24em;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);opacity:.7;
  transition:transform .4s ease}
#yl-logo.on::after{transform:rotate(225deg);vertical-align:0}
body.dehors #yl-logo{opacity:0}
.cartel{top:9.5%;left:50%;right:auto;transform:translateX(-50%) translateZ(0);width:max-content;
  border:0;background:transparent;padding:.2em .4em;pointer-events:none;font-family:inherit;white-space:nowrap}
@media (max-width:760px){ .cartel{top:8%} }
/* les commandes, de part et d'autre du banc */
body #nuit{position:fixed;left:calc(50% - 130px);top:auto;right:auto;bottom:calc(27px + env(safe-area-inset-bottom,0px));
  width:34px;height:34px}
@media (max-width:760px){
  body #nuit{left:calc(50% - 106px)}
}
/* le cadre : blanc, noir ou bois */
html[data-cadre="noir"]{--cadrelarg:calc(var(--Hm)*.0075);--cadrebord:#161616;--cadrefond:#F3F0E9}
html[data-cadre="bois"]{--cadrelarg:calc(var(--Hm)*.0075);--cadrebord:#8B5E34;--cadrefond:#F3F0E9}
#cadre,#env{position:fixed;bottom:calc(27px + env(safe-area-inset-bottom,0px));z-index:9;width:34px;height:34px;
  border:0;background:transparent;padding:0;cursor:pointer;opacity:.45;transition:opacity .4s}
#cadre:hover,#cadre:focus-visible,#env:hover,#env:focus-visible{opacity:1}
#cadre{left:calc(50% + 100px)} #env{left:calc(50% + 146px)}
#cadre i{display:block;width:16px;height:16px;margin:9px auto;box-sizing:border-box;border:1px solid var(--encre);background:transparent}
html[data-cadre="noir"] #cadre i{border-width:3px;border-color:var(--encre)}
html[data-cadre="bois"] #cadre i{border-width:3px;border-color:#8B5E34}
#env svg{width:100%;height:100%;display:block;fill:none;stroke:var(--encre);stroke-width:1.2;stroke-linejoin:round}
body.dehors #cadre,body.dehors #env{opacity:0;pointer-events:none}
@media (max-width:760px){ #cadre{left:calc(50% + 78px)} #env{left:calc(50% + 118px)} }
/* soleil / lune : jour et nuit */
#nuit{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));top:calc(16px + env(safe-area-inset-top,0px));z-index:9;
  width:34px;height:34px;border:0;background:transparent;padding:6px;cursor:pointer;opacity:.45;transition:opacity .4s}
#nuit:hover,#nuit:focus-visible{opacity:1}
#nuit svg{width:100%;height:100%;display:block;fill:none;stroke:var(--encre);stroke-width:1.3;stroke-linecap:round}
#nuit .lune{display:none}
#nuit.on .soleil{display:none}
#nuit.on .lune{display:block}
body.dehors #nuit{opacity:0;pointer-events:none}
/* haut et bas se repondent : meme marge, meme hauteur */
body #yl-logo{top:calc(30px + env(safe-area-inset-top,0px));height:30px;padding:0 10px;line-height:30px;font-size:26px}
body #banc{width:280px;height:34px}
body #nuit,body #cadre,body #env{position:fixed;top:auto;width:30px;height:30px;padding:0;opacity:.45;
  bottom:calc(30px + env(safe-area-inset-bottom,0px))}
body #nuit{left:calc(26px + env(safe-area-inset-left,0px));right:auto}
body #env{right:calc(26px + env(safe-area-inset-right,0px));left:auto}
body #cadre{right:calc(70px + env(safe-area-inset-right,0px));left:auto}
body #nuit svg,body #env svg{width:22px;height:22px;margin:4px auto;stroke-width:1.2}
body #cadre i{width:14px;height:14px;margin:8px auto}
html[data-cadre="noir"] body #cadre i,html[data-cadre="bois"] body #cadre i{border-width:3px}
@media (max-width:760px){
  body #banc{width:150px}
  body #nuit{left:16px} body #env{right:16px} body #cadre{right:56px}
  body #yl-logo{font-size:22px}
}
.cartel{display:none}
/* archives en icone, en bas a gauche */
body #arch{position:fixed;top:auto;width:30px;height:30px;padding:0;opacity:.45;z-index:9;border:0;background:transparent;
  bottom:calc(30px + env(safe-area-inset-bottom,0px));left:calc(70px + env(safe-area-inset-left,0px));cursor:pointer;transition:opacity .4s}
body #arch:hover,body #arch:focus-visible{opacity:1}
body #arch svg{width:22px;height:22px;margin:4px auto;display:block;fill:none;stroke:var(--encre);stroke-width:1.2;stroke-linejoin:round}
body.dehors #arch{opacity:0;pointer-events:none}
@media (max-width:760px){ body #arch{left:56px} }
.enseigne{display:none}
/* la porte d'entree, en verre poli, au centre du mur d'accueil (vue depuis le banc) */

/* commandes du bas : a gauche maison, enveloppe, soleil, cadre ; a droite les langues */
body #arch{left:calc(26px + env(safe-area-inset-left,0px))}
body #env{left:calc(70px + env(safe-area-inset-left,0px));right:auto}
body #nuit{left:calc(114px + env(safe-area-inset-left,0px))}
body #cadre{left:calc(158px + env(safe-area-inset-left,0px));right:auto}
body #quoi{position:fixed;top:auto;left:calc(202px + env(safe-area-inset-left,0px));bottom:calc(27px + env(safe-area-inset-bottom,0px));width:30px;height:30px;padding:0;opacity:.45;z-index:9;border:0;background:transparent;cursor:pointer;color:var(--encre);font-family:inherit;transition:opacity .4s ease}
body #quoi svg{width:22px;height:22px;margin:4px auto;display:block;fill:none;stroke:var(--encre);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
body #quoi svg .pt2,#yl-mob .act svg .pt2{fill:var(--encre);stroke:none}
body #quoi:hover,body #quoi:focus-visible{opacity:1}
body.dehors #quoi{opacity:0;pointer-events:none}
#langs{position:fixed;right:calc(26px + env(safe-area-inset-right,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:9;
  height:30px;display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
#langs button{border:0;background:transparent;padding:2px 0;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:inherit;
  color:var(--encre);opacity:.42;transition:opacity .3s}
#langs button:hover,#langs button:focus-visible{opacity:1}
#langs button.on{opacity:1;border-bottom:1px solid currentColor}
body.dehors #langs{opacity:0;pointer-events:none}
@media (max-width:1100px){
  #langs:not(.open) button:not(.on){display:none}
  #langs button.on::after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.5em;vertical-align:.18em;
    border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);opacity:.7}
  #langs.open{flex-wrap:wrap;justify-content:flex-end;max-width:60vw;height:auto}
  body #arch{left:16px} body #env{left:56px} body #nuit{left:96px} body #cadre{left:136px} body #quoi{left:176px}
}
/* texte dans un cadre a passe-partout : encre sombre */
html[data-cadre]{--cadreencre:#1A1A1A}
.cadre.vide{color:var(--cadreencre,var(--encre))}
/* la neige de la salle Video */
.neige{display:block;width:100%;height:100%;position:absolute;inset:0}

/* la porte d'entree, en verre, quand on est assis sur le banc : la piece se voit a travers */
#yl-verre{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
#yl-verre.on{opacity:1;pointer-events:auto;cursor:pointer}
#yl-verre .battant{position:absolute;top:0;bottom:0;width:50%;
  background:color-mix(in srgb,var(--fond) 42%,transparent);
  -webkit-backdrop-filter:blur(6px) saturate(.9);backdrop-filter:blur(6px) saturate(.9)}
#yl-verre .battant.g{left:0;border-right:1px solid color-mix(in srgb,var(--encre) 30%,transparent)}
#yl-verre .battant.d{right:0}
#yl-verre .nom{position:absolute;left:0;right:0;top:34%;text-align:center;font-weight:300;
  font-size:clamp(30px,4.2vw,46px);letter-spacing:.32em;text-indent:.32em;color:var(--encre);opacity:.8}
#yl-verre .poignee{position:absolute;left:22px;top:50%;width:2px;height:40px;margin-top:-20px;border-radius:2px;background:var(--encre);opacity:.75}
#yl-verre .judas{position:absolute;left:0;top:21%;width:22px;height:22px;margin-left:-11px;border-radius:50%;
  border:1.2px solid var(--encre);box-sizing:border-box;background:color-mix(in srgb,var(--fond) 60%,transparent)}
#yl-verre .judas .oeil{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--rouge)}
/* le lecteur : une ligne discrete sous le cadre, avec un curseur */
.cadre .lect{position:absolute;left:0;right:0;bottom:calc(var(--Hm)*-.028);height:1px;width:auto;margin:0;
  background:color-mix(in srgb,var(--encre) 34%,transparent);clip-path:none;opacity:0;transition:opacity .6s ease;cursor:pointer}
.cadre .lect::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--encre)}
.cadre .lect::after{content:"";position:absolute;left:var(--p,0%);top:50%;width:calc(var(--Hm)*.009);height:calc(var(--Hm)*.009);
  transform:translate(-50%,-50%);border-radius:50%;background:var(--encre)}
.cadre .lect::after{transition:none}
.cadre.sonne .lect{opacity:.45;pointer-events:auto}
.cadre.sonne:hover .lect{opacity:.9}
.cadre.joue .lect{opacity:.9;background:color-mix(in srgb,var(--encre) 34%,transparent)}
/* le dos du tableau : carton, cartel, tampon */
.cadre{transition:border-color .8s ease,background-color .8s ease,transform 1.05s cubic-bezier(.45,0,.2,1)} /* p257 : retournement 1,05 s au lieu de 1,3 s */
.cadre.tourne{transform:translate(-50%,-50%) rotateY(90deg)}
.cadre .dos{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:8%;
  background:#D9CEB9;background-image:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.25),transparent 70%);cursor:pointer}
:root[data-theme="dark"] .cadre .dos{background-color:#3B342B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cadre .dos{background-color:#3B342B}}
.cadre.dosvis .dos{display:flex}
.cadre.dosvis>img,.cadre.dosvis .lect,.cadre.dosvis .pp{visibility:hidden}
.cadre .dos::before{content:"";position:absolute;left:6%;right:6%;top:7%;bottom:7%;border:1px solid rgba(0,0,0,.14);pointer-events:none}
.cadre .dos::after{content:"";position:absolute;left:50%;top:7%;width:1px;height:14%;background:rgba(0,0,0,.18)}
.cadre .dos .cart{background:#F6F3EC;color:#1A1816;padding:calc(var(--Hm)*.016) calc(var(--Hm)*.024);max-width:26em;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.18);transform:rotate(-1.2deg);font-style:normal}
.cadre .dos .cart b{display:block;font-weight:400;font-size:calc(var(--Hm)*.028);letter-spacing:.04em;margin:0 0 .3em}
.cadre .dos .cart i{display:block;font-style:normal;font-size:calc(var(--Hm)*.014);letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.cadre .dos .tampon{position:absolute;right:9%;bottom:10%;font-size:calc(var(--Hm)*.012);letter-spacing:.3em;text-transform:uppercase;
  color:var(--rouge);opacity:.55;transform:rotate(-8deg);border:1px solid currentColor;padding:3px 8px;border-radius:2px}
.cadre>img{cursor:pointer}
/* lecture / pause */
.cadre .pp{position:absolute;left:0;bottom:calc(var(--Hm)*-.028);width:calc(var(--Hm)*.02);height:calc(var(--Hm)*.02);transform:translateY(50%);
  border:1px solid color-mix(in srgb,var(--encre) 55%,transparent);border-radius:50%;box-sizing:border-box;display:none;cursor:pointer;opacity:.7;transition:opacity .3s}
.cadre.sonne .pp{display:block}
.cadre .pp:hover{opacity:1}
.cadre .pp::before{content:"";position:absolute;left:50%;top:50%;width:38%;height:38%;transform:translate(-42%,-50%);
  background:var(--encre);clip-path:polygon(0 0,100% 50%,0 100%)}
.cadre.joue .pp::before{transform:translate(-50%,-50%);clip-path:none;
  background:linear-gradient(90deg,var(--encre) 0 36%,transparent 36% 64%,var(--encre) 64%)}
.cadre.sonne .lect{left:calc(var(--Hm)*.03)}
/* la salle Video : neige de nuit dans le cadre */
.mur.video .cadre.vide{background:#0B0C10;border-color:#2A2A2E}
/* mobile : un seul menu, en bas */
#yl-mob-b,#yl-mob{display:none}
@media (max-width:760px){
  #arch,#env,#nuit,#cadre,#quoi,#yl-son,#langs,#banc,#yl-mur{display:none!important}
  #yl-logo{pointer-events:none} #yl-logo::after{display:none}
  #yl-mob-b{display:flex;position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:12;
    width:54px;height:34px;border:0;background:transparent;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;opacity:.6}
  #yl-mob-b i{display:block;width:22px;height:1px;background:var(--encre);transition:transform .3s ease,opacity .3s ease}
  #yl-mob-b.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  #yl-mob-b.on i:nth-child(2){opacity:0}
  #yl-mob-b.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  body.dehors #yl-mob-b{opacity:0;pointer-events:none}
  #yl-mob{display:flex;flex-direction:column;align-items:center;gap:22px;position:fixed;left:0;right:0;bottom:0;z-index:11;
    padding:28px 20px calc(76px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--fond) 96%,transparent);
    border-top:1px solid color-mix(in srgb,var(--encre) 12%,transparent);transform:translateY(102%);transition:transform .45s cubic-bezier(.4,0,.2,1)}
  #yl-mob.on{transform:none}
  #yl-mob .rub{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;font-size:20px;line-height:1.6}
  #yl-mob .rub button{border:0;background:transparent;padding:0;font-family:inherit;font-size:inherit;color:var(--encre);opacity:.6}
  #yl-mob .rub button.ici{opacity:1;color:var(--rouge)}
  #yl-mob .act{display:flex;gap:26px;align-items:center}
  #yl-mob .act button{border:0;background:transparent;padding:0;width:30px;height:30px;opacity:.55}
  #yl-mob .act svg{width:22px;height:22px;display:block;margin:4px auto;fill:none;stroke:var(--encre);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
  #yl-mob .act i{display:block;width:14px;height:14px;margin:8px auto;box-sizing:border-box;border:1px solid var(--encre)}
  html[data-cadre="noir"] #yl-mob .act i{border-width:3px}
  html[data-cadre="bois"] #yl-mob .act i{border-width:3px;border-color:#8B5E34}
  #yl-mob .act b{display:block;width:12px;height:12px;margin:9px auto;box-sizing:border-box;border:1px solid var(--encre)}
  #yl-mob .langues{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
  #yl-mob .langues button{border:0;background:transparent;padding:2px 0;font-family:inherit;font-size:inherit;letter-spacing:inherit;color:var(--encre);opacity:.42}
  #yl-mob .langues button.on{opacity:1;border-bottom:1px solid currentColor}
}
#yl-neige{position:fixed;z-index:2;pointer-events:none;opacity:0;transition:opacity .9s ease;overflow:hidden;contain:strict}
#yl-neige.vis{opacity:1}
#yl-neige i{position:absolute;top:-6px;border-radius:50%;background:#F2F1EC;animation:ylchute 12s linear infinite;animation-play-state:paused;will-change:transform}
#yl-neige.vis i{animation-play-state:running}
@keyframes ylchute{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx,0px),110vh,0)}}
.mur.video .cadre.vide .nuit{display:block;position:absolute;inset:0}
/* la mosaique : fond sombre, commandes effacees */
#yl-mos{background:rgba(12,12,13,.975)}
#yl-mos .nomg{color:#CFC9BE}
#yl-mos img{background:#F3F0E9;border-color:rgba(255,255,255,.18)}
body.mosaique #yl-logo,body.mosaique #arch,body.mosaique #env,body.mosaique #quoi,body.mosaique #yl-son,body.mosaique #nuit,body.mosaique #cadre,body.mosaique #langs,
body.mosaique #banc,body.mosaique .fleche,body.mosaique #yl-mur,body.mosaique #yl-mob-b,body.mosaique #yl-neige{opacity:0!important;pointer-events:none!important}
/* pensees : legende comme les photos, lien discret pour suggerer, bouton play */
.legende .suggere{color:inherit;text-decoration:none;opacity:.5;border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent);transition:opacity .25s;pointer-events:auto}
.legende .suggere:hover,.legende .suggere:focus-visible{opacity:1}
.cadre.vide .pp.pens{display:block}
/* mosaique : les pensees */
#yl-mos .grp.pens button{height:auto;min-height:calc(var(--hm,24vh)*.5);max-width:15em;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
#yl-mos .grp.pens button span{font-family:inherit;font-size:13px;line-height:1.5;padding:.9em 1.2em;color:#E8E4DB;text-align:center}
#yl-mos .grp.pens button span small{display:block;margin-top:.5em;font-size:10px;letter-spacing:.1em;font-style:normal;opacity:.6}
#yl-mos .grp.pens button.cur{outline:1px solid var(--rouge);outline-offset:4px}
/* ou est-on : le nom de la salle devant le compteur */
.legende em .ou{letter-spacing:.12em;text-transform:uppercase;font-size:.9em}
/* les bouts de mur : un panneau de plus de chaque cote, pour les murs peu garnis vus de loin */
.station .pan{position:absolute;top:0;bottom:0;z-index:-1;width:3900px;background:var(--teinte,var(--cmur));transform:translateZ(0);backface-visibility:hidden}
.station .pan.g{right:calc(50% + min(calc(var(--pas)*1.2),1950px))}
.station .pan.d{left:calc(50% + min(calc(var(--pas)*1.2),1950px))}
#arch svg .pt,#yl-mob .act svg .pt{fill:var(--rouge);stroke:none}
/* survol facon dock : les icones en bas grossissent (pas sur mobile) */
@media (hover:hover) and (min-width:761px){
  body #arch,body #env,body #nuit,body #cadre,body #quoi,body #yl-son{transition:transform .18s ease,opacity .4s ease;transform-origin:50% 100%}
  body #arch:hover,body #env:hover,body #nuit:hover,body #cadre:hover,body #quoi:hover,body #yl-son:hover{transform:scale(1.5);opacity:1}
  #langs button{transition:transform .18s ease,opacity .3s ease;transform-origin:50% 100%}
  #langs button:hover{transform:scale(1.6);opacity:1}
}
/* l'epaisseur du cadre, visible pendant le retournement */
.cadre.epais{transform-style:preserve-3d;transition-timing-function:linear}
.cadre.epais::before,.cadre.epais::after{content:"";position:absolute;top:calc(var(--cadrelarg,1px)*-1);bottom:calc(var(--cadrelarg,1px)*-1);width:calc(var(--Hm)*.030);
  background:color-mix(in srgb,var(--cadrefond,var(--cmur)) 72%,#000);border-top:var(--cadrelarg,1px) solid var(--cadrebord,color-mix(in srgb,var(--encre) 22%,transparent));border-bottom:var(--cadrelarg,1px) solid var(--cadrebord,color-mix(in srgb,var(--encre) 22%,transparent));box-sizing:border-box}
.cadre.epais::before{left:calc(var(--cadrelarg,1px)*-1);transform-origin:left center;transform:rotateY(90deg)}
.cadre.epais::after{right:calc(var(--cadrelarg,1px)*-1);transform-origin:right center;transform:rotateY(-90deg)}
/* le formulaire de contact dans le cadre */
form.contact{display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--Hm)*.012);width:100%;height:100%;padding:calc(var(--Hm)*.03) calc(var(--Hm)*.05);box-sizing:border-box;justify-content:center}
form.contact .phrase{padding:0 0 calc(var(--Hm)*.01);font-size:calc(var(--Hm)*.022);opacity:.75}
form.contact .miel{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
form.contact input,form.contact textarea{flex:0 0 auto;font:inherit;font-size:calc(var(--Hm)*.021);color:inherit;background:color-mix(in srgb,currentColor 5%,transparent);border:0;border-bottom:1px solid color-mix(in srgb,currentColor 30%,transparent);padding:.35em .5em;outline:none;resize:none;border-radius:0;-webkit-appearance:none}
form.contact textarea{min-height:calc(var(--Hm)*.11);height:calc(var(--Hm)*.11)}
form.contact input{height:calc(var(--Hm)*.045)}
form.contact input:focus,form.contact textarea:focus{border-bottom-color:currentColor}
/* a propos : une feuille portrait dans un cadre */
.cadre.vide.portrait{width:calc(var(--span)*.19);height:calc(var(--span)*.19*1.38);padding:calc(var(--Hm)*.014)}
.cadre.vide.portrait .feuille{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#F6F3EC;color:#2A2723;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.cadre.vide.portrait .phrase{font-size:calc(var(--Hm)*.021);padding:9%;line-height:1.45}
@media (max-width:760px){ .cadre.vide.portrait{width:calc(var(--span)*.34);height:calc(var(--span)*.34*1.38)} }
form.contact input::placeholder,form.contact textarea::placeholder{color:inherit;opacity:.45}
form.contact button{align-self:flex-end;font:inherit;font-size:calc(var(--Hm)*.019);letter-spacing:.18em;text-transform:uppercase;color:inherit;background:transparent;border:1px solid color-mix(in srgb,currentColor 45%,transparent);padding:.45em 1.2em;cursor:pointer;transition:opacity .25s}
form.contact button:hover{opacity:.7}
form.contact.envoi button{opacity:.4;pointer-events:none}
form.contact.ok input,form.contact.ok textarea,form.contact.ok button{display:none}
form.contact .etat{font-size:calc(var(--Hm)*.02);font-style:italic;text-align:center;min-height:1.4em}
form.contact.ko input:invalid,form.contact.ko textarea:invalid{border-bottom-color:var(--rouge)}
/* musique : le disque depasse a droite de la pochette ; au dos, la platine */
.cadre.sonne>img{position:relative;z-index:2}
.cadre.sonne .galette{position:absolute;top:7%;right:0;width:86%;height:86%;z-index:1;display:block;transform:translateX(22%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));cursor:pointer}
.cadre.sonne .galette .disque{display:block;width:100%;height:100%}
.cadre.sonne:hover .galette{transform:translateX(36%)}
.cadre.sonne.joue .galette{transform:translateX(36%)}
.cadre.sonne.joue .galette .disque{animation:yl-tourne 9s linear infinite}
.cadre.sonne.tourne .galette,.cadre.sonne.dosvis .galette{visibility:hidden}
.cadre.sonne .dos{padding:4%;background:var(--cadrefond,var(--cmur))}
:root[data-theme="dark"] .cadre.sonne .dos{background-color:var(--cadrefond,var(--cmur))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cadre.sonne .dos{background-color:var(--cadrefond,var(--cmur))}}
.cadre.sonne .platine{position:relative;width:100%;height:100%;display:block;cursor:pointer}
.cadre.sonne .platine .vinyle{display:block;width:100%;height:100%}
.cadre.sonne.joue .platine .vinyle{animation:yl-tourne 9s linear infinite}
@keyframes yl-tourne{to{transform:rotate(360deg)}}
.cadre.sonne .platine .bras{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cadre.sonne .bras line{stroke:var(--encre);stroke-width:5;stroke-linecap:round}
.cadre.sonne .bras rect,.cadre.sonne .bras .poids{fill:var(--encre)}
.cadre.sonne .bras .pivot{fill:var(--cadrefond,var(--cmur));stroke:var(--encre);stroke-width:3}
.cadre.sonne .bras .arm{transform-box:view-box;transform-origin:376px 28px;transform:rotate(-62deg);transition:transform 2.4s cubic-bezier(.4,0,.2,1)}
.cadre.sonne.joue .bras .arm{transform:rotate(0deg)}
.cadre.sonne svg.disque .fond,.cadre.sonne svg.vinyle .fond{fill:#0A0A0A}
.cadre.sonne svg .sillons circle{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1}
.cadre.sonne svg .sillons circle:nth-child(5n){stroke:rgba(255,255,255,.22)}
.cadre.sonne svg .etq{fill:#FFFFFF}
.cadre.sonne svg .trou{fill:var(--cadrefond,var(--cmur))}
.cadre.sonne svg text.c{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:7.2px;letter-spacing:.28em;fill:#1A1816;opacity:.75}
.cadre.sonne.dosvis .pp,.cadre.sonne.dosvis .lect{visibility:visible}
@media (prefers-reduced-motion:reduce){.cadre.sonne.joue .platine .vinyle{animation:none}.cadre.sonne .bras .arm{transition:none}}
/* pochettes fictives (Musique) : carre, message d'attente */
.cadre.vide.fictif{width:calc(var(--span)*.30);height:calc(var(--span)*.30)}
.cadre.vide.fictif .phrase{font-size:calc(var(--Hm)*.024);opacity:.6}
@media (max-width:760px){ .cadre.vide.fictif{width:calc(var(--span)*.52);height:calc(var(--span)*.52)} }
/* le petit disque : la musique continue dans les autres salles ; clic = pause / reprise */
body #yl-mini{position:fixed;top:auto;left:calc(290px + env(safe-area-inset-left,0px));bottom:calc(27px + env(safe-area-inset-bottom,0px));width:30px;height:30px;padding:0;opacity:.7;z-index:9;border:0;background:transparent;cursor:pointer;color:var(--encre);font-family:inherit;transition:opacity .4s ease}
body #yl-mini[hidden]{display:none}
body #yl-mini svg{width:22px;height:22px;margin:4px auto;display:block}
body #yl-mini svg .d{fill:#0A0A0A}body #yl-mini svg .s{fill:none;stroke:rgba(255,255,255,.28);stroke-width:.6}body #yl-mini svg .e{fill:#fff}body #yl-mini svg .t{fill:#0A0A0A}
body #yl-mini.joue svg{animation:yl-tourne 3.6s linear infinite}
body #yl-mini b{position:absolute;left:38px;top:50%;transform:translateY(-50%);white-space:nowrap;font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:opacity .4s;pointer-events:none}
body #yl-mini:hover b{opacity:.7}
body #yl-mini:hover{opacity:1}
body.dehors #yl-mini,body.mosaique #yl-mini{opacity:0!important;pointer-events:none}
@media (max-width:760px){ body #yl-mini{left:auto;right:16px} body #yl-mini b{display:none} }
@media (hover:hover) and (min-width:761px){ body #yl-mini{transition:transform .18s ease,opacity .4s ease;transform-origin:50% 100%} body #yl-mini:hover{transform:scale(1.5)} }
/* pensees : la teinte de chaque pensee, repartie sur l'arc-en-ciel */
.cadre.vide .teinte{position:absolute;inset:0;background:hsl(var(--t) 62% 91%);transition:background .8s}
:root[data-theme="dark"] .cadre.vide .teinte{background:hsl(var(--t) 38% 24%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cadre.vide .teinte{background:hsl(var(--t) 38% 24%)}}
.cadre.vide .phrase{position:relative;z-index:1}
/* la platine : couvercle en plexi, charniere en haut */
.cadre.sonne .dos{perspective:calc(var(--Hm)*1.3)}
.cadre.sonne .capot{position:absolute;left:3%;right:3%;top:3%;bottom:3%;border-radius:4px;transform-origin:50% 0;transform:rotateX(0deg);cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,255,255,.10) 55%,rgba(255,255,255,.26));border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 24px rgba(0,0,0,.16),inset 0 0 0 1px rgba(0,0,0,.05);
  transition:transform 1.5s cubic-bezier(.4,0,.2,1)}
.cadre.sonne.dosvis .capot{transform:rotateX(-112deg);transition-delay:.35s}
.cadre.sonne.dosvis.ferme .capot{transform:rotateX(0deg);transition-delay:0s}
/* derriere la vitre depolie : rien d'autre que la salle */
body.vitre #arch,body.vitre #yl-son,body.vitre #env,body.vitre #nuit,body.vitre #cadre,body.vitre #quoi,body.vitre #langs,body.vitre #banc,body.vitre .fleche,body.vitre #yl-mur,body.vitre #yl-mini,body.vitre #yl-mob-b{opacity:0!important;pointer-events:none!important}
/* pensees retournees : l'auteur au dos */
.cadre.vide.dosvis .phrase,.cadre.vide.dosvis .teinte,.cadre.vide.dosvis .pp{visibility:hidden}
.cadre.vide .dos .cart b{font-style:italic}
/* la platine : le bouton, en bas a gauche comme avant */
.cadre.sonne .platine .bouton{position:absolute;left:3%;bottom:3%;width:calc(var(--Hm)*.034);height:calc(var(--Hm)*.034);border-radius:50%;border:1px solid var(--encre);box-sizing:border-box;opacity:.55;transition:opacity .3s;cursor:pointer}
.cadre.sonne .platine .bouton::after{content:"";position:absolute;left:50%;top:50%;width:34%;height:34%;transform:translate(-50%,-50%);border-radius:50%;background:var(--encre);opacity:.45;transition:opacity .3s}
.cadre.sonne .platine:hover .bouton,.cadre.sonne.joue .platine .bouton{opacity:1}
.cadre.sonne.joue .platine .bouton::after{opacity:1}
/* l'interrupteur, au dos de Water & Sky */
.cadre .dos .inter{position:absolute;left:9%;bottom:9%;width:calc(var(--Hm)*.026);height:calc(var(--Hm)*.04);box-sizing:border-box;border:1px solid rgba(40,34,28,.45);border-radius:3px;background:#F3EEE5;cursor:pointer;pointer-events:auto;box-shadow:0 1px 2px rgba(0,0,0,.15);transition:box-shadow .25s}
.cadre .dos .inter::after{content:"";position:absolute;left:25%;right:25%;top:14%;height:36%;border-radius:2px;background:#8A8278;transition:top .25s ease}
.cadre .dos .inter.on::after{top:50%}
.cadre .dos .inter:hover{box-shadow:0 1px 5px rgba(0,0,0,.32)}
/* la plongee */
#yl-plonge{position:fixed;inset:0;z-index:70;display:none;background:#0B2A3C;cursor:default;transition:clip-path 1.7s cubic-bezier(.6,0,.2,1),-webkit-clip-path 1.7s cubic-bezier(.6,0,.2,1),opacity 1s ease}
#yl-plonge.on{display:block}
#yl-plonge.sort{opacity:0}
#yl-plonge.arrive{cursor:pointer}
#yl-plonge .scene{position:absolute;inset:0;perspective:600px;perspective-origin:50% 50%;overflow:hidden}
#yl-plonge .voy{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
#yl-plonge .pf{position:absolute;left:0;top:0;transform-origin:0 0;transform-style:preserve-3d}
#yl-plonge .sol{background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 28%,transparent 72%,rgba(0,0,0,.28)),repeating-linear-gradient(0deg,rgba(190,220,235,.32) 0 4px,transparent 4px 550px),linear-gradient(#0C3550,#0A2B41)}
#yl-plonge .plaf{overflow:hidden;background:repeating-linear-gradient(0deg,rgba(225,242,250,.5) 0 5px,transparent 5px 550px),linear-gradient(90deg,#2F7EA0,#56A6C4 50%,#2F7EA0)}
#yl-plonge .paroi{--pz:6px;background:repeating-linear-gradient(90deg,rgba(225,242,250,.5) 0 5px,transparent 5px 550px),repeating-linear-gradient(105deg,transparent 0 180px,rgba(255,255,255,.05) 180px 260px,transparent 260px 520px),linear-gradient(180deg,#4595B5 0%,#1F6285 42%,#0F3F5A 100%)}
#yl-plonge .paroi.d{--pz:-6px}
#yl-plonge .caus{position:absolute;inset:0;background:radial-gradient(ellipse 120px 50px at 20% 30%,rgba(255,255,255,.26),transparent 70%),radial-gradient(ellipse 170px 70px at 72% 62%,rgba(255,255,255,.2),transparent 70%),radial-gradient(ellipse 90px 44px at 44% 84%,rgba(255,255,255,.24),transparent 70%);background-size:420px 300px;animation:ylcaus 5s ease-in-out infinite alternate}
#yl-plonge .caus.b{background-position:200px 130px;animation-delay:-2.5s}
@keyframes ylcaus{from{opacity:.15;transform:translateX(0)}to{opacity:1;transform:translateX(46px)}}
#yl-plonge .poisson{position:absolute;left:0;width:calc(76px*var(--sc));height:calc(38px*var(--sc));fill:rgba(5,24,36,.7);animation:ylnage linear infinite}
#yl-plonge .poisson svg{display:block;width:100%;height:100%}
#yl-plonge .poisson.g{animation-name:ylnageg}
@keyframes ylnage{0%{opacity:0;transform:translate3d(-60px,0,var(--pz)) scaleX(-1)}10%,90%{opacity:1}100%{opacity:0;transform:translate3d(var(--tw),-20px,var(--pz)) scaleX(-1)}}
@keyframes ylnageg{0%{opacity:0;transform:translate3d(var(--tw),0,var(--pz))}10%,90%{opacity:1}100%{opacity:0;transform:translate3d(-60px,18px,var(--pz))}}
#yl-plonge .bulle{position:absolute;bottom:0;width:6px;height:6px;border-radius:50%;border:1px solid rgba(255,255,255,.55);animation:ylbulle linear infinite}
@keyframes ylbulle{0%{opacity:0;transform:translate3d(0,0,var(--pz))}15%,80%{opacity:1}100%{opacity:0;transform:translate3d(14px,calc(var(--hh)*-1),var(--pz))}}
#yl-plonge .mur{background:#ECE8E0}
#yl-plonge .rsol{background:linear-gradient(180deg,#DAD3C7,#E6E0D5)}
#yl-plonge .rplaf{background:linear-gradient(180deg,#E9E5DD,#F4F1EC)}
#yl-plonge .rmur{background:linear-gradient(90deg,#E4DED4,#F1EEE8)}
#yl-plonge .ciel{overflow:hidden;background:linear-gradient(180deg,#6F97C4 0%,#A9C3DC 30%,#F0DCC4 49.6%,#CBD7DE 50%,#86A4B6 62%,#46697D 100%)}
#yl-plonge .soleil{position:absolute;left:50%;top:44%;width:700px;height:500px;margin:-250px 0 0 -350px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,238,205,.9),rgba(255,226,180,.35) 45%,transparent)}
#yl-plonge .mer{position:absolute;left:0;right:0;top:50%;bottom:0;background:radial-gradient(ellipse 160px 900px at 50% 0,rgba(255,240,210,.55),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,transparent 2px 16px)}
#yl-plonge .nuage{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,0));animation:ylnuage linear infinite alternate}
#yl-plonge .n1{left:8%;top:12%;width:900px;height:170px;animation-duration:80s}
#yl-plonge .n2{left:55%;top:24%;width:700px;height:130px;animation-duration:110s;animation-delay:-30s}
#yl-plonge .n3{left:58%;top:5%;width:1100px;height:210px;animation-duration:140s;animation-delay:-60s}
#yl-plonge .n4{left:18%;top:34%;width:600px;height:95px;animation-duration:95s;animation-delay:-20s}
@keyframes ylnuage{from{transform:translateX(0)}to{transform:translateX(420px)}}
#yl-plonge .rbanc svg{display:block;width:100%;height:100%;fill:none;stroke:#2A2622;stroke-width:1.6}
#yl-plonge .voile{position:absolute;inset:0;background:#0A3A55;opacity:.42;pointer-events:none}
@media (prefers-reduced-motion:reduce){#yl-plonge .poisson,#yl-plonge .bulle,#yl-plonge .caus,#yl-plonge .nuage{animation:none}}
/* le mini-lecteur, meme lecteur que sous le tableau */
body #yl-mini{width:auto;display:flex;align-items:center;gap:10px;opacity:.8}
body #yl-mini svg{margin:0;flex:0 0 22px}
body #yl-mini:hover{transform:none;opacity:1}
body #yl-mini .mpp{position:relative;flex:0 0 18px;width:18px;height:18px;border:1px solid color-mix(in srgb,var(--encre) 55%,transparent);border-radius:50%;box-sizing:border-box}
body #yl-mini .mpp::before{content:"";position:absolute;left:50%;top:50%;width:38%;height:38%;transform:translate(-42%,-50%);background:var(--encre);clip-path:polygon(0 0,100% 50%,0 100%)}
body #yl-mini.joue .mpp::before{transform:translate(-50%,-50%);clip-path:none;background:linear-gradient(90deg,var(--encre) 0 36%,transparent 36% 64%,var(--encre) 64%)}
body #yl-mini .mtxt{display:flex;flex-direction:column;align-items:stretch;width:150px}
body #yl-mini .mtxt b{position:static;transform:none;opacity:.6;display:block;margin:0 0 3px;font-size:10px;letter-spacing:.2em;text-align:left;overflow:hidden;text-overflow:ellipsis}
body #yl-mini .mlect{position:relative;display:block;height:11px;background:linear-gradient(color-mix(in srgb,var(--encre) 28%,transparent),color-mix(in srgb,var(--encre) 28%,transparent)) no-repeat 0 50%/100% 1px}
body #yl-mini .mlect i{position:absolute;left:0;top:5px;height:1px;width:var(--p,0%);background:var(--encre)}
body #yl-mini .mlect i::after{content:"";position:absolute;right:-2.5px;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--encre)}
@media (max-width:760px){ body #yl-mini .mtxt{width:90px} body #yl-mini .mtxt b{display:none} }
/* la note : couper les bruitages */
body #yl-son{position:fixed;top:auto;left:calc(246px + env(safe-area-inset-left,0px));bottom:calc(27px + env(safe-area-inset-bottom,0px));width:30px;height:30px;padding:0;opacity:.45;z-index:9;border:0;background:transparent;cursor:pointer}
body #yl-son svg,#yl-mob .act button[data-mob="son"] svg{width:22px;height:22px;margin:4px auto;display:block;fill:none;stroke:var(--encre);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
body #yl-son .x,#yl-mob .act button[data-mob="son"] .x{opacity:0;transition:opacity .3s}
body #yl-son.muet .x,#yl-mob .act button[data-mob="son"].muet .x{opacity:1}
body #yl-son.muet .n,#yl-mob .act button[data-mob="son"].muet .n{opacity:.4}
body.dehors #yl-son{opacity:0;pointer-events:none}
/* le bac du disquaire */
#yl-bac{position:fixed;inset:0;z-index:8;display:none;
  background:linear-gradient(180deg,var(--cmur) 0 44%,color-mix(in srgb,var(--cmur) 86%,#000) 44%,color-mix(in srgb,var(--cmur) 74%,#000))}
#yl-bac.on{display:block;animation:ylbacin .6s ease both}
#yl-bac.on:not(.vis){animation:ylbacout .6s ease both}
@keyframes ylbacin{from{opacity:0}to{opacity:1}}
@keyframes ylbacout{from{opacity:1}to{opacity:0}}
#yl-bac .scene{position:absolute;inset:0;perspective:1300px;perspective-origin:50% -60%}
#yl-bac .caisse{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
#yl-bac .poch{position:absolute;left:calc(var(--S)/-2);top:calc(var(--S)*-1);width:var(--S);height:var(--S);transform-origin:50% 100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.3,.6,.2,1);cursor:pointer}
#yl-bac .recto,#yl-bac .verso{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.2)}
#yl-bac .recto{background:#E8E2D6;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .35s ease}
#yl-bac .recto img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
#yl-bac .verso{transform:rotateY(180deg);background:#CDBB9E}
#yl-bac .fictif .recto{background:linear-gradient(135deg,#D3C2A5,#C3AF8E);color:#5A4A36}
#yl-bac .fictif em{font-size:calc(var(--S)*.05);padding:14%;text-align:center;opacity:.85}
#yl-bac .poch.cur:hover .recto{transform:translateY(-5%)}
#yl-bac .planche{position:absolute;left:0;top:0;transform-origin:0 0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 11px),linear-gradient(180deg,#BE8F5E,#9C6F44);box-shadow:inset 0 2px 0 rgba(255,255,255,.2)}
#yl-bac .planche.cote{background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 11px),linear-gradient(90deg,#8C6139,#A9794B)}
#yl-bac .planche.fond{background:linear-gradient(180deg,#8A5F37,#6F4B2A)}
#yl-bac .bacleg{position:absolute;left:0;right:0;top:calc(50% + var(--S)*.66);text-align:center;color:var(--encre)}
#yl-bac .bacleg b{display:block;min-height:1.3em;font-weight:400;font-style:italic;font-size:22px}
#yl-bac .bacleg i{display:block;font-style:normal;font-size:11px;letter-spacing:.24em;opacity:.55;margin-top:6px}
body.bac #yl-mur,body.bac #yl-mini{opacity:0!important;pointer-events:none!important}
@media (max-width:760px){ #yl-bac .bacleg b{font-size:18px} }

/* la porte en verre : deux battants qui coulissent */
#yl-verre .battant{transition:transform 1.5s cubic-bezier(.55,0,.2,1)}
#yl-verre.ouvre .battant.g{transform:translateX(-101%)}
#yl-verre.ouvre .battant.d{transform:translateX(101%)}
#yl-verre .nom{transition:opacity .6s ease}
#yl-verre.ouvre .nom{opacity:0}
#yl-verre.ouvre{pointer-events:none}
/* pensees : texte lisible sur la teinte (encre franche, pas de transparence) */
.cadre.vide .teinte~.phrase{color:#221E1A;opacity:1;font-weight:400}
:root[data-theme="dark"] .cadre.vide .teinte~.phrase{color:#F5F1EA}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cadre.vide .teinte~.phrase{color:#F5F1EA}}
.legende .suggere{opacity:.8}

/* ===== la boussole (a la place du banc) ===== */
#yl-rose{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:220px;height:90px;margin-left:-110px;z-index:9;transition:opacity .6s ease}
#yl-rose #banc{position:absolute;left:50%;top:50%;bottom:auto;right:auto;width:44px;height:44px;margin:-22px 0 0 -22px;transform:none;padding:0}
#yl-rose #banc svg{display:block;width:100%;height:100%;transform:rotate(var(--ra,0deg));transition:transform 1.8s cubic-bezier(.45,0,.18,1)}
#yl-rose .anneau{fill:none;stroke:var(--encre);stroke-width:1}
#yl-rose .tic{fill:none;stroke:var(--encre);stroke-width:1;opacity:.55}
#yl-rose .nord{fill:var(--rouge);stroke:none}
#yl-rose .sud{fill:none;stroke:var(--encre);stroke-width:1}
#yl-rose .axe{fill:var(--fond);stroke:var(--encre);stroke-width:1;transition:fill .4s}
#yl-rose.loin .axe{fill:var(--encre)}
#yl-rose .br{position:absolute;border:0;background:none;margin:0;padding:3px 5px;font-family:inherit;font-size:10.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--encre);opacity:.4;cursor:pointer;white-space:nowrap;transition:opacity .4s,color .4s}
#yl-rose .br:hover,#yl-rose .br:focus-visible{opacity:.85}
#yl-rose .br.ici{opacity:1;color:var(--rouge)}
#yl-rose .br.n{left:50%;top:0;transform:translateX(-50%)}
#yl-rose .br.s{left:50%;bottom:0;transform:translateX(-50%)}
#yl-rose .br.e{left:calc(50% + 30px);top:50%;transform:translateY(-50%)}
#yl-rose .br.o{right:calc(50% + 30px);top:50%;transform:translateY(-50%)}
body.dehors #yl-rose,body.vitre #yl-rose,body.mosaique #yl-rose{opacity:0!important;pointer-events:none!important}
@media (max-width:760px){#yl-rose{display:none!important}}

/* ===== le plafond : rail, spot, halo sur l'oeuvre regardee ===== */
.station .rail{position:absolute;left:50%;top:calc(var(--Hm)*.03);width:var(--pas);height:calc(var(--Hm)*.004);transform:translateX(-50%);background:color-mix(in srgb,var(--encre) 45%,transparent);pointer-events:none}
.station .spot{position:absolute;left:50%;top:calc(var(--Hm)*.034);width:calc(var(--Hm)*.016);height:calc(var(--Hm)*.036);margin-left:calc(var(--Hm)*-.008);border-radius:0 0 40% 40%;background:color-mix(in srgb,var(--encre) 78%,transparent);transform-origin:50% 0;transform:rotate(9deg);pointer-events:none}
.station .spot::after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:24%;border-radius:50%;background:#FFF1CF;opacity:0;transition:opacity 1.4s ease}
.station.ici .spot::after{opacity:1}

/* ===== le banc du musee, le livre, les enceintes : des plaques simples dans la 3D (pas de canvas) ===== */
#yl-meubles{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
/* ===== le livre ouvert ===== */
#yl-livre{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--fond) 84%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#yl-livre.on{display:flex;animation:yllivin .5s ease both}
@keyframes yllivin{from{opacity:0}to{opacity:1}}
#yl-livre .ouv{display:flex;width:min(90vw,1080px);height:min(58vw,680px,80vh);background:#FBF9F4;box-shadow:0 30px 70px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.12)}
#yl-livre .pg{flex:1 1 50%;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;padding:6% 7%;box-sizing:border-box;color:#1E1B18;cursor:pointer}
#yl-livre .pg.g{background:linear-gradient(90deg,#FBF9F4 93%,#E9E3D8)}
#yl-livre .pg.d{background:linear-gradient(270deg,#FBF9F4 93%,#E9E3D8)}
#yl-livre figure{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}
#yl-livre figure img{display:block;max-width:100%;max-height:84%;height:auto;width:auto;box-shadow:0 1px 3px rgba(0,0,0,.14)}
#yl-livre figcaption{margin-top:1.1em;font-style:italic;font-size:15px;opacity:.72}
#yl-livre .titre{text-align:center}
#yl-livre .titre b{display:block;font-weight:300;font-size:clamp(28px,3.4vw,46px);letter-spacing:.08em}
#yl-livre .titre i{display:block;margin-top:.8em;font-style:normal;font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.6}
#yl-livre .titre em{display:block;margin-top:2.4em;font-size:15px;opacity:.7}
#yl-livre .ouv.tourne{animation:yllivpage .45s ease}
@keyframes yllivpage{0%{opacity:1;transform:none}45%{opacity:0;transform:translateX(-10px)}55%{opacity:0;transform:translateX(10px)}100%{opacity:1;transform:none}}
#yl-livre .lf{position:absolute;border:0;background:none;padding:10px 14px;color:var(--encre);font-family:inherit;font-size:36px;line-height:1;cursor:pointer;opacity:.55;transition:opacity .3s}
#yl-livre .lf:hover,#yl-livre .lf:focus-visible{opacity:1}
#yl-livre .lf.p{left:1.5vw;top:50%;transform:translateY(-50%)}
#yl-livre .lf.s{right:1.5vw;top:50%;transform:translateY(-50%)}
#yl-livre .lf.x{top:calc(14px + env(safe-area-inset-top,0px));right:18px;font-size:32px}
#yl-livre .folio{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-size:11px;letter-spacing:.2em;color:var(--encre);opacity:.55}
@media (max-width:700px){#yl-livre .pg.g{display:none} #yl-livre .ouv{width:86vw;height:70vh}}

/* ===== le code d'entree, sur la porte ===== */
#yl-entree.code .ent{opacity:0!important;animation:none!important}

/* ===== l'ascenseur ===== */
#yl-asc{position:fixed;inset:0;z-index:70;display:none;pointer-events:none}
#yl-asc.on{display:block;pointer-events:auto}
#yl-asc .porte{position:absolute;top:0;bottom:0;width:50.5%;
  background:repeating-linear-gradient(90deg,#B9BBBC 0 1px,#C4C6C7 1px 3px,#B2B4B5 3px 4px),#BDBFC0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .9s cubic-bezier(.55,0,.25,1)}
#yl-asc .porte.g{left:0;transform:translateX(-101%);border-right:1px solid #8E9091}
#yl-asc .porte.d{right:0;transform:translateX(101%);border-left:1px solid #8E9091}
#yl-asc.ferme .porte{transform:translateX(0)}
#yl-asc.ouvre .porte{transition-duration:1.1s}
#yl-asc .ecran{position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:12px;padding:10px 18px;
  background:#141414;color:#F2B544;border-radius:4px;font-family:inherit;opacity:0;transition:opacity .4s}
#yl-asc.ferme .ecran{opacity:1;transition-delay:.6s}
#yl-asc .ecran b{font-weight:400;font-size:30px;min-width:1.2em;text-align:center;font-variant-numeric:tabular-nums}
#yl-asc .ecran .fl{font-style:normal;font-size:13px}
#yl-asc .ecran em{font-style:normal;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#E8E1D2;opacity:.8}

/* ===== l'atelier (Design) : meme salle que la galerie, parquet, photos, poele, laser, casiers ===== */
#yl-atelier{position:fixed;inset:0;z-index:45;display:none;background:#D9D3C8;overflow:hidden;font-family:inherit}
#yl-atelier.on{display:block}
#yl-atelier .vue{position:absolute;inset:0;perspective:90vh;perspective-origin:50% 40%}
#yl-atelier .scene{position:absolute;inset:0;transform-style:preserve-3d;animation:ylatin 7s cubic-bezier(.2,.6,.2,1) both}
@keyframes ylatin{from{transform:translateZ(-16vh)}to{transform:translateZ(0)}}
#yl-atelier .piste{position:absolute;left:0;top:0;width:100vw;height:100vh;transform-style:preserve-3d;transition:transform 1.7s cubic-bezier(.45,0,.18,1)}
#yl-atelier .seg{position:absolute;top:0;width:100vw;height:100vh;transform-style:preserve-3d}
#yl-atelier .mur{position:absolute;left:0;top:8vh;width:100vw;height:64vh;background:#EFECE6}
#yl-atelier .plinthe{position:absolute;left:0;right:0;bottom:0;height:1.4vh;background:#CFC6B8}
#yl-atelier .parquet{position:absolute;left:0;top:72vh;width:100vw;height:80vh;transform-origin:50% 0;transform:rotateX(90deg);backface-visibility:hidden;
  background:repeating-linear-gradient(90deg,#B98B5C 0 calc(10vw - 2px),#6C4D30 calc(10vw - 2px) 10vw,#A77A4F 10vw calc(20vw - 2px),#6C4D30 calc(20vw - 2px) 20vw)}
#yl-atelier .plaf{position:absolute;left:0;top:calc(8vh - 70vh);width:100vw;height:70vh;transform-origin:50% 100%;transform:rotateX(-90deg);backface-visibility:hidden;
  background:repeating-linear-gradient(180deg,#E4DFD6 0 calc(12vh - 1.2vh),#4A4540 calc(12vh - 1.2vh) 12vh)}
#yl-atelier .verriere{position:absolute;left:5vw;top:5vh;width:22vw;height:30vh;display:grid;grid-template-columns:repeat(5,1fr);gap:.5vw;padding:.5vw;background:#2A2A28;box-sizing:border-box}
#yl-atelier .verriere i{background:#DCE6EA}
#yl-atelier .verriere i:nth-child(3n){background:#D2DEE3}
#yl-atelier .cad{position:absolute;left:50%;top:38vh;margin:0;transform:translate(-50%,-50%)}
#yl-atelier .bord{display:block;padding:1vh;background:#FBFAF7;box-shadow:0 1.2vh 2.6vh rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05)}
#yl-atelier .bord img{display:block;max-width:34vw;max-height:34vh;width:auto;height:auto}
#yl-atelier .seg:first-child .cad{left:62%}
#yl-atelier figcaption{position:absolute;right:0;top:100%;margin-top:2.2vh;text-align:right;line-height:1.5;color:#2B2622;white-space:nowrap}
#yl-atelier figcaption b{display:block;font-weight:400;font-style:italic;font-size:max(13px,2.2vh)}
#yl-atelier figcaption i{display:block;font-style:normal;opacity:.7;font-size:max(12px,1.9vh)}
#yl-atelier figcaption em{display:block;margin-top:.8vh;font-style:normal;font-size:max(10px,1.4vh);letter-spacing:.14em;text-transform:uppercase;opacity:.45}
#yl-atelier .obj{position:absolute;bottom:28vh;left:50%}
#yl-atelier .obj i,#yl-atelier .obj div{position:absolute;display:block}
#yl-atelier .poele{width:20vw;height:40vh;margin-left:-12vw}
#yl-atelier .poele .tuyau{left:7.6vw;bottom:24vh;width:3.2vw;height:40vh;background:#2F2E2C}
#yl-atelier .poele .corps{left:2vw;bottom:3vh;width:14vw;height:21vh;background:#3B3A38;border-top:1.2vh solid #262524}
#yl-atelier .poele .grille{left:1.4vw;right:1.4vw;top:6vh;bottom:1.5vh;background:repeating-linear-gradient(180deg,#8E8C88 0 .9vh,#262524 .9vh 1.9vh)}
#yl-atelier .poele .flamme{left:3vw;right:3vw;top:1vh;height:4vh;background:#1B1A19;overflow:hidden}
#yl-atelier .poele .flamme i{bottom:0;width:30%;height:90%;background:#F08A24;border-radius:50% 50% 20% 20%;transform-origin:50% 100%;animation:ylfeu .7s ease-in-out infinite alternate}
#yl-atelier .poele .flamme i:nth-child(1){left:8%} #yl-atelier .poele .flamme i:nth-child(2){left:36%;background:#F6B23A;animation-delay:-.3s;height:100%} #yl-atelier .poele .flamme i:nth-child(3){left:64%;animation-delay:-.5s}
@keyframes ylfeu{from{transform:scaleY(.72)}to{transform:scaleY(1.05)}}
#yl-atelier .poele .pied{bottom:0;width:1.2vw;height:3vh;background:#262524}
#yl-atelier .poele .pied.g{left:3vw} #yl-atelier .poele .pied.d{left:14vw}
#yl-atelier .poele .buches{left:19vw;bottom:0;width:11vw;height:24vh;border:.5vh solid #1E1E1E;border-bottom-width:1vh;box-sizing:border-box}
#yl-atelier .poele .buches i{width:2.6vw;height:2.6vw;max-height:4.4vh;max-width:4.4vh;border-radius:50%;background:#D9A873;box-shadow:inset 0 0 0 .35vh #8A5A33}
#yl-atelier .planche{bottom:0;width:2vw;background:#C9A274;transform-origin:50% 100%}
#yl-atelier .poele .planche.a{left:-6vw;height:34vh;transform:rotate(-4deg)} #yl-atelier .poele .planche.b{left:-3.6vw;height:30vh;transform:rotate(-5deg);background:#B58D60;width:3vw} #yl-atelier .poele .planche.c{left:-1.2vw;height:36vh;transform:rotate(-3deg);background:#D5B188}
#yl-atelier .laser{width:34vw;height:30vh;margin-left:-17vw}
#yl-atelier .laser .caisse{left:0;right:0;bottom:2vh;height:17vh;background:#DADBDC;border-top:.6vh solid #2B2B2B}
#yl-atelier .laser .ecran{right:2vw;top:2.4vh;width:5vw;height:3vh;background:#1C2A33}
#yl-atelier .laser .bouton{right:3vw;top:7.4vh;width:1.4vw;height:1.4vw;border-radius:50%;background:#2B2B2B}
#yl-atelier .laser .bouton.r{right:5.4vw;background:#C8102E}
#yl-atelier .laser .tiroir{left:2vw;right:10vw;bottom:2.4vh;height:4vh;border:.3vh solid #9FA1A3}
#yl-atelier .laser .capot{left:0;right:0;bottom:19vh;height:10vh;background:#2B2B2B;clip-path:polygon(4% 0,96% 0,100% 100%,0 100%)}
#yl-atelier .laser .vitre{left:7%;right:7%;top:18%;bottom:12%;background:#B5561C;opacity:.92;overflow:hidden}
#yl-atelier .laser .bois{left:8%;right:8%;bottom:10%;height:40%;background:#D9B98C}
#yl-atelier .laser .point{bottom:32%;left:10%;width:.7vw;height:.7vw;border-radius:50%;background:#FFE3E3;box-shadow:0 0 0 .3vw rgba(255,70,70,.55);animation:yllaser 3.2s linear infinite alternate}
@keyframes yllaser{from{left:10%}to{left:86%}}
#yl-atelier .laser .roue{bottom:0;width:2vw;height:2vw;border-radius:50%;background:#2B2B2B}
#yl-atelier .laser .roue.g{left:2vw} #yl-atelier .laser .roue.d{right:2vw}
#yl-atelier .casiers{width:40vw;height:44vh;margin-left:-20vw}
#yl-atelier .casiers .grille{left:0;bottom:0;width:26vw;height:44vh;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:.6vw;padding:.6vw;background:#B8925F;box-sizing:border-box}
#yl-atelier .casiers .grille span{display:block;background:#E3CFAF;box-shadow:inset 0 .6vh 0 rgba(0,0,0,.12)}
#yl-atelier .casiers svg{display:block;width:100%;height:100%}
#yl-atelier .casiers .out{fill:none;stroke:#2B2622;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
#yl-atelier .casiers .planche.a{left:29vw;height:48vh;transform:rotate(-5deg)} #yl-atelier .casiers .planche.b{left:31.5vw;height:44vh;transform:rotate(-6deg);background:#B58D60;width:2.8vw}
#yl-atelier .casiers .planche.c{left:34.5vw;height:50vh;transform:rotate(-4deg);background:#D5B188} #yl-atelier .casiers .planche.d{left:37vw;height:40vh;transform:rotate(-7deg);background:#A77A4F}
#yl-atelier .fl-at{position:absolute;top:38vh;transform:translateY(-50%);border:0;background:transparent;color:#2B2622;font-family:inherit;font-size:34px;padding:16px;cursor:pointer;opacity:.55;transition:opacity .3s}
#yl-atelier .fl-at:hover{opacity:1}
#yl-atelier .fl-at.g{left:1vw} #yl-atelier .fl-at.d{right:1vw}
#yl-atelier .appel{position:absolute;left:calc(26px + env(safe-area-inset-left,0px));bottom:calc(26px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;
  padding:10px 16px 10px 10px;border:1px solid rgba(255,255,255,.35);border-radius:30px;background:rgba(20,18,16,.55);color:#F2ECE2;font-family:inherit;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#yl-atelier .appel .fl{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.6);font-size:11px}
#yl-atelier .appel b{font-weight:400;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
#yl-atelier .appel:hover .fl{background:#F2B544;color:#141414;border-color:#F2B544}

/* ===== l'interrupteur secret de Water & Sky : piece de quincaillerie en metal anodise, greffee sur le filet gauche (avis d'un level designer) ===== */
.cadre .dos .inter{left:6%;top:50%;bottom:auto;width:calc(var(--Hm)*.024);height:calc(var(--Hm)*.048);margin-left:calc(var(--Hm)*-.012);transform:translateY(-50%);
  border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23E4D9C0'/%3E%3Cstop offset='.55' stop-color='%23B8A684'/%3E%3Cstop offset='1' stop-color='%237A6B52'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23m)' stroke-linecap='round'%3E%3Cpath d='M12 2v44' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='18' r='5.2' stroke-width='1.8'/%3E%3C/g%3E%3Ccircle cx='12' cy='18' r='1.6' fill='url(%23m)'/%3E%3C/svg%3E") center/contain no-repeat;box-shadow:none;filter:drop-shadow(.5px .5px 0 rgba(0,0,0,.25));transition:transform .45s cubic-bezier(.4,0,.2,1)}
.cadre .dos .inter::after{content:"";display:block;position:absolute;inset:0;left:0;right:0;top:0;height:auto;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23B9CEDA'/%3E%3Cstop offset='.55' stop-color='%235E7E92'/%3E%3Cstop offset='1' stop-color='%233A5566'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23m)' stroke-linecap='round'%3E%3Cpath d='M12 2v44' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='18' r='5.2' stroke-width='1.8'/%3E%3C/g%3E%3Ccircle cx='12' cy='18' r='1.6' fill='url(%23m)'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transition:opacity .35s ease}
.cadre .dos .inter:hover{box-shadow:none}
.cadre .dos .inter:hover::after,.cadre .dos .inter:focus-visible::after,.cadre .dos .inter.on::after{opacity:1;top:0}
.cadre .dos .inter.on{transform:translateY(-50%) scale(.9)}
/* l'indice : le O pointe du tampon, meme signe que le bouton */
.cadre .dos .tampon .o-pt{position:relative;display:inline-block}
.cadre .dos .tampon .o-pt::after{content:"";position:absolute;left:50%;top:52%;width:.16em;height:.16em;margin:-.08em 0 0 -.08em;border-radius:50%;background:currentColor}

/* ===== la porte d'entree en verre depoli, et le judas qui tourne comme un disque ===== */
#yl-entree .battant{transition:transform 1.35s cubic-bezier(.55,0,.15,1),background-color .9s ease}
#yl-entree.verre .battant{background:color-mix(in srgb,var(--fond) 42%,transparent);-webkit-backdrop-filter:blur(18px) saturate(.85);backdrop-filter:blur(18px) saturate(.85)}
#yl-entree .judas .lentille::after{content:"";position:absolute;left:50%;top:50%;width:18%;height:18%;margin:-9% 0 0 -9%;border-radius:50%;background:var(--rouge);box-shadow:0 0 0 2px rgba(0,0,0,.25)}
#yl-entree .judas .lentille::before{content:"";position:absolute;left:50%;top:50%;width:3%;height:3%;margin:-1.5% 0 0 -1.5%;border-radius:50%;background:#111;z-index:1}
#yl-entree .judas .lentille.tourne{animation:ylspin 3.4s cubic-bezier(.12,.62,.22,1) both}
@keyframes ylspin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(1800deg)}}

/* ===== l'ascenseur : la cage defile en transparence derriere les portes ===== */
#yl-asc .puits{position:absolute;inset:0;overflow:hidden;background:#161616;opacity:0;transition:opacity .35s ease}
#yl-asc.roule .puits{opacity:1}
#yl-asc .puits i{position:absolute;left:0;right:0;top:0;height:300vh;display:block;
  background:repeating-linear-gradient(180deg,#1B1B1B 0 62vh,#302E2B 62vh 72vh,#F3D9A4 72vh calc(72vh + 3px),#3A3733 calc(72vh + 3px) 82vh,#1B1B1B 82vh 100vh)}
#yl-asc.descend .puits i{animation:ylpuitsd 1.8s cubic-bezier(.45,0,.55,1) both}
#yl-asc.monte .puits i{animation:ylpuitsm 1.8s cubic-bezier(.45,0,.55,1) both}
@keyframes ylpuitsd{from{transform:translateY(0)}to{transform:translateY(-200vh)}}
@keyframes ylpuitsm{from{transform:translateY(-200vh)}to{transform:translateY(0)}}
#yl-asc .porte{background:repeating-linear-gradient(90deg,rgba(185,187,188,.8) 0 1px,rgba(198,200,201,.8) 1px 3px,rgba(176,178,179,.8) 3px 4px)}
#yl-asc .porte::after{content:"";position:absolute;top:20%;bottom:32%;width:14%;background:rgba(24,26,28,.14);box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}
#yl-asc .porte.g::after{right:12%} #yl-asc .porte.d::after{left:12%}
/* ===== le judas : un vrai petit vinyle, sans photo ===== */
#yl-entree .judas .lentille{background:repeating-radial-gradient(circle,#121212 0 1.2px,#282828 1.2px 2.6px);filter:none;
  box-shadow:0 8px 22px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 5px #0C0C0C}
#yl-entree .judas .lentille::after{width:34%;height:34%;margin:-17% 0 0 -17%;background:radial-gradient(circle at 72% 50%,#F4E6C6 0 7%,transparent 7.5%),radial-gradient(circle,transparent 0 62%,rgba(0,0,0,.18) 63% 66%,transparent 67%),var(--rouge);box-shadow:none}
#yl-entree .judas .lentille::before{width:4%;height:4%;margin:-2% 0 0 -2%;z-index:2}

/* ===== l'atelier : navigation et interface de la galerie, cloisons, ascenseur plus lent ===== */
#yl-atelier .piste{transition:transform 2.4s cubic-bezier(.45,0,.18,1)}
#yl-atelier .fl-at{display:none}
#yl-atelier .appel{left:auto;right:calc(26px + env(safe-area-inset-right,0px));bottom:auto;top:calc(26px + env(safe-area-inset-top,0px))}
#yl-atelier .cloison{position:absolute;left:0;top:8vh;width:34vh;height:64vh;transform-origin:0 50%;transform:rotateY(-90deg);background:#E6E1D8;box-shadow:inset -1vh 0 0 #D3CCC0,inset 0 -1.4vh 0 #CFC6B8}
body.atelier #arch,body.atelier #env,body.atelier #nuit,body.atelier #cadre,body.atelier #quoi,body.atelier #yl-son,body.atelier #langs,body.atelier #yl-rose,
body.atelier #yl-mini,body.atelier .fleche,body.atelier #yl-mob-b,body.atelier #yl-mob{z-index:46}
body.atelier .fleche{top:38vh!important;color:#2B2622}
body.atelier #yl-rose .br.ici{color:var(--encre);opacity:.4}
#yl-asc .porte{transition-duration:1.5s}
#yl-asc.ouvre .porte{transition-duration:1.6s}
#yl-asc.ferme .ecran{transition-delay:1s}
#yl-asc.descend .puits i,#yl-asc.monte .puits i{animation-duration:3.1s}

/* ===== le banc facon Dieter Rams (Vitsoe, Braun) : lame blanc casse tres fine, pieds acier gris clair ; une plante a cote, plus d'enceintes ===== */

/* ===== le banc : pochette de disque posee a cote du livre ; le livre mene a la galerie, le disque a la salle Musique ===== */
#yl-livre .lf.go{left:50%;right:auto;top:auto;bottom:calc(52px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-size:12px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;opacity:.7}
#yl-disque{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;flex-direction:column;background:rgba(246,244,240,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#yl-disque.on{display:flex;animation:yldqin .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes yldqin{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
#yl-disque .scene{position:relative;width:min(46vmin,420px);height:min(46vmin,420px);transform:translateX(-12%)}
#yl-disque button{border:0;padding:0;background:none;font-family:inherit;cursor:pointer;color:var(--encre)}
#yl-disque .couv{position:absolute;inset:0;z-index:2;background:#1E1B18;box-shadow:0 24px 50px rgba(0,0,0,.25),0 2px 5px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;overflow:hidden}
#yl-disque .couv img{width:100%;height:100%;object-fit:cover;display:block}
#yl-disque .couv b{font-weight:300;font-size:clamp(20px,3vmin,30px);letter-spacing:.3em;color:#E9E4DA}
#yl-disque .vinyle{position:absolute;left:3%;top:3%;width:94%;height:94%;z-index:1;border-radius:50%;
  background:repeating-radial-gradient(circle,#141414 0 2px,#242424 2px 3px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
#yl-disque .vinyle i{position:absolute;left:35%;top:35%;width:30%;height:30%;border-radius:50%;background:#C8102E}
#yl-disque .vinyle i::after{content:"";position:absolute;left:46%;top:46%;width:8%;height:8%;border-radius:50%;background:#F6F4F0}
#yl-disque.on .vinyle{animation:yldqv 1.3s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes yldqv{from{transform:none}to{transform:translateX(38%) rotate(40deg)}}
#yl-disque .vinyle:hover{filter:brightness(1.15)}
#yl-disque .aller{margin-top:6vmin;font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
#yl-disque .aller:hover,#yl-disque .aller:focus-visible{opacity:1}
#yl-disque .lf.x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:18px;font-size:32px;opacity:.55;padding:10px 14px}

/* ===== un banc par mur (Photo blanc casse + livre, Musique noyer + vinyle, Art chene clair + carnet, Video cuir noir + bobine) et un lisere a la couleur de l'oeuvre ===== */
/* la plante quitte le banc : une par etage, dans l'angle Photo / Musique */
/* ===== l'horloge de regie, en haut au centre ===== */

 

/* ===== l'atelier : la boussole fait reculer (centre) et mene aux zones (branches) ; une plante pres de l'ascenseur ===== */
#yl-atelier.loin{background:linear-gradient(180deg,#E4DFD6 50%,#A77A4F 50%)}
#yl-atelier .cloison.bout{width:80vh;height:64vh;background:#E9E5DE;box-shadow:none}
#yl-atelier .cloison.bout.fin{left:100vw}

 
/* ===== l'ecran de l'ascenseur : le plan des etages ===== */
#yl-asc .ecran .et{display:flex;gap:7px;margin-left:6px;padding-left:12px;border-left:1px solid rgba(232,225,210,.25);font-size:10px;letter-spacing:.08em;color:#E8E1D2}
#yl-asc .ecran .et i{font-style:normal;opacity:.3;transition:opacity .4s}
#yl-asc .ecran .et i.ici{opacity:1;color:var(--rouge,#E5142C)}

/* ===== 26 sept. (c) : un seul banc, tapis, socle, lierre, sol et murs chauds, spots au trait, icones alignees, horloge ===== */
/* le tapis sous le banc : laine unie terre cuite douce */
/* le socle blanc et son appareil photo ancien (a gauche, en retrait) */
/* le lierre au trait, dans l'angle (galerie : debut du mur Photo ; atelier : pres de la verriere) */
.station .lierre{position:absolute;left:calc(var(--Hm)*-.02);bottom:0;width:calc(var(--Hm)*.1);height:calc(var(--Hm)*.94);pointer-events:none;opacity:.6}
.lierre svg{display:block;width:100%;height:100%;fill:none;stroke:var(--encre);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.lierre svg path{vector-effect:non-scaling-stroke}
#yl-atelier .lierre{position:absolute;left:.6vw;bottom:0;width:7vh;height:62vh;opacity:.7}
#yl-atelier .lierre svg{stroke:#2B2622}
/* murs blanc chaud et sol en chene clair, point de Hongrie (mode clair) ; chene fume (mode sombre) */
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) #salle{--cmur:#F0EBE2;--cpl:#F7F4EE} }
:root[data-theme="light"] #salle{--cmur:#F0EBE2;--cpl:#F7F4EE}
/* les spots, dessines au trait comme les icones */
.station .rail{height:max(1px,calc(var(--Hm)*.0016));background:color-mix(in srgb,var(--encre) 42%,transparent)}
.station .spot{width:calc(var(--Hm)*.013);height:calc(var(--Hm)*.028);margin-left:calc(var(--Hm)*-.0065);top:calc(var(--Hm)*.038);border-radius:0 0 45% 45%;
  background:var(--cmur);border:max(1px,calc(var(--Hm)*.0013)) solid color-mix(in srgb,var(--encre) 62%,transparent);box-sizing:border-box;overflow:visible}
.station .spot::before{content:"";position:absolute;left:50%;top:calc(var(--Hm)*-.006);width:max(1px,calc(var(--Hm)*.0013));height:calc(var(--Hm)*.006);margin-left:-.5px;background:color-mix(in srgb,var(--encre) 62%,transparent)}
.station .spot::after{left:18%;right:18%;bottom:-2px;height:18%}
/* les icones du bas a gauche : meme boite, meme taille, meme ligne */
body #arch,body #env,body #nuit,body #cadre,body #quoi,body #yl-son{top:auto!important;right:auto!important;bottom:calc(30px + env(safe-area-inset-bottom,0px))!important;width:30px!important;height:30px!important;margin:0!important;padding:0!important}
body #arch{left:calc(26px + env(safe-area-inset-left,0px))!important} body #env{left:calc(70px + env(safe-area-inset-left,0px))!important}
body #nuit{left:calc(114px + env(safe-area-inset-left,0px))!important} body #cadre{left:calc(158px + env(safe-area-inset-left,0px))!important}
body #quoi{left:calc(202px + env(safe-area-inset-left,0px))!important} body #yl-son{left:calc(246px + env(safe-area-inset-left,0px))!important}
body #arch svg,body #env svg,body #nuit svg,body #quoi svg,body #yl-son svg{width:20px!important;height:20px!important;margin:5px!important;display:block}
body #cadre i{width:15px!important;height:15px!important;margin:7.5px!important}
/* l'horloge : plus petite, au-dessus de la ligne des spots ; masquee par defaut */

/* l'atelier : table en ardoise avec des planches, etabli de menuisier */
#yl-atelier .table{width:46vw;height:30vh;margin-left:-23vw}
#yl-atelier .table .pied{bottom:0;width:1.4vw;height:16vh;background:#2B2B2B}
#yl-atelier .table .pied.g{left:3vw} #yl-atelier .table .pied.d{right:3vw}
#yl-atelier .table .traverse{left:3vw;right:3vw;bottom:4.5vh;height:.7vh;background:#2B2B2B}
#yl-atelier .table .plateau{left:0;right:0;bottom:16vh;height:3.4vh;background:#3A4046;border-top:.5vh solid #525A61}
#yl-atelier .table .pl{height:1.7vh;box-shadow:inset 0 -.3vh 0 rgba(0,0,0,.12)}
#yl-atelier .table .p1{left:4vw;width:31vw;bottom:19.4vh;background:#D9B98C}
#yl-atelier .table .p2{left:7vw;width:27vw;bottom:21.1vh;background:#C9A274}
#yl-atelier .table .p3{left:5vw;width:33vw;bottom:22.8vh;background:#B58D60}

#yl-atelier .etabli{width:44vw;height:46vh;margin-left:-22vw}
#yl-atelier .etabli .panneau{left:4vw;right:4vw;bottom:22vh;height:22vh;background-color:#E8D9BF;background-image:radial-gradient(circle,#B8A07A 0 22%,transparent 26%);background-size:1.8vh 1.8vh;box-shadow:inset 0 0 0 .6vh #CDB894}
#yl-atelier .etabli .panneau svg{display:block;width:100%;height:100%}
#yl-atelier .etabli .out{fill:none;stroke:#2B2622;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
#yl-atelier .etabli .dessus{left:0;right:0;bottom:15vh;height:4.4vh;background:#C99A62;border-bottom:.7vh solid #A87944;box-shadow:inset 0 .5vh 0 #D8AE78}
#yl-atelier .etabli .tiroir{bottom:9.8vh;height:4.6vh;width:11vw;background:#BF9058;box-shadow:inset 0 0 0 .3vh #A87944}
#yl-atelier .etabli .tiroir::after{content:"";position:absolute;left:40%;right:40%;top:45%;height:.5vh;background:#6B5A45}
#yl-atelier .etabli .tiroir.a{left:15vw} #yl-atelier .etabli .tiroir.b{left:27vw}
#yl-atelier .etabli .pied{bottom:0;width:3vw;height:15vh;background:#B8884F}
#yl-atelier .etabli .pied.g{left:2vw} #yl-atelier .etabli .pied.d{right:2vw}
#yl-atelier .etabli .bas{left:2vw;right:2vw;bottom:3.5vh;height:1.8vh;background:#A87944}

#yl-atelier .etabli .vis{left:-4vw;width:4.6vw;bottom:15.6vh;height:.7vh;background:#5E5041;border-radius:.4vh}
/* sol anthracite : les commandes posees sur le sol passent en encre claire (hors atelier, dont le parquet est clair) */
body:not(.atelier) #arch,body:not(.atelier) #env,body:not(.atelier) #nuit,body:not(.atelier) #cadre,body:not(.atelier) #quoi,body:not(.atelier) #yl-son,
body:not(.atelier) #yl-rose,body:not(.atelier) #langs,body:not(.atelier) #yl-mob-b{--encre:#ECEAE5;color:#ECEAE5}
body:not(.atelier) #yl-rose .br.ici,body:not(.atelier) #yl-rose .br.ici span{color:#FF4D5E}
#yl-mur.loin,#yl-mur.vis.loin{opacity:0!important;pointer-events:none!important}

/* murs peints : la meme teinte, avec un voile de peinture a peine irregulier */

/* 2e bouton derriere « Water & Sky » : l'envol */
#yl-vol{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
#yl-vol i{position:absolute;width:26px;height:12px;margin:-6px 0 0 -13px;opacity:0;animation-name:ylvol;animation-timing-function:cubic-bezier(.3,.1,.5,1);animation-fill-mode:both}
#yl-vol svg{display:block;width:100%;height:100%;fill:none;stroke:var(--encre);stroke-width:1.4;stroke-linecap:round;overflow:visible;animation:ylaile .32s ease-in-out infinite alternate;transform-origin:50% 70%}
@keyframes ylvol{0%{opacity:0;transform:translate(0,0) scale(calc(var(--sc)*.4))}10%{opacity:.9}80%{opacity:.85}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(var(--sc))}}
@keyframes ylaile{from{transform:scaleY(1)}to{transform:scaleY(-.35)}}

/* ===== 26 sept. (e) ===== */
/* le bouton de droite derriere « Water & Sky » : jumeau exact de celui de gauche (l'enigme) */
.cadre .dos .inter.inter2{left:auto;right:6%;margin-left:0;margin-right:calc(var(--Hm)*-.012)}
/* murs moins numeriques : joint creux d'ombre au pied des murs (couleur opaque, pas de raccord visible) */
.station::after{content:"";position:absolute;left:50%;bottom:0;z-index:-1;width:min(calc(var(--pas)*1.08),3900px);margin-left:calc(min(calc(var(--pas)*1.08),3900px)/-2);height:calc(var(--Hm)*.011);
  background:color-mix(in srgb,var(--teinte,var(--cmur)) 72%,#000);transform:translateZ(0);backface-visibility:hidden;pointer-events:none}
.station.bout::after{width:min(calc(var(--pas)*2.4),3900px);margin-left:calc(min(calc(var(--pas)*2.4),3900px)/-2)}
/* un grain photographique tres leger sur toute la scene (fixe, comme une pellicule) */

/* ===== 26 sept. (f) : la table en ardoise et l'etabli deviennent des volumes 3D, poses au centre de leur piece ===== */
#yl-atelier .o3{position:absolute;left:50vw;top:72vh;width:0;height:0;transform-style:preserve-3d;transform:translateZ(24vh)}
#yl-atelier .table3{transform:translate3d(-2vw,0,26vh)}
#yl-atelier .etabli3{transform:translate3d(2vw,0,24vh)}
#yl-atelier .bx{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
#yl-atelier .bx .f{position:absolute;display:block;backface-visibility:visible}
#yl-atelier .bx .f.de{filter:brightness(1.16)}
#yl-atelier .bx .f.ga,#yl-atelier .bx .f.dr{filter:brightness(.8)}
#yl-atelier .bx .f.ar{filter:brightness(.7)}
#yl-atelier .bx.ardoise .f.de{filter:brightness(1.25)}
#yl-atelier .bx.hetre .f.de{filter:brightness(1.12)}
#yl-atelier .etabli .panneau{bottom:26vh}

/* ===== 26 sept. (g) : l'icone Ascenseur, premiere des icones du bas a gauche ===== */
body #yl-ascb{position:fixed;top:auto;right:auto;bottom:calc(30px + env(safe-area-inset-bottom,0px));left:calc(26px + env(safe-area-inset-left,0px));width:30px;height:30px;margin:0;padding:0;opacity:.45;z-index:9;border:0;background:transparent;cursor:pointer;transition:opacity .4s ease,transform .18s ease;transform-origin:50% 100%}
body #yl-ascb svg{width:20px;height:20px;margin:5px;display:block;fill:none;stroke:var(--encre);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
body #yl-ascb:hover,body #yl-ascb:focus-visible{opacity:1}
@media (hover:hover){ body #yl-ascb:hover{transform:scale(1.5)} }
body #arch{left:calc(70px + env(safe-area-inset-left,0px))!important} body #env{left:calc(114px + env(safe-area-inset-left,0px))!important}
body #nuit{left:calc(158px + env(safe-area-inset-left,0px))!important} body #cadre{left:calc(202px + env(safe-area-inset-left,0px))!important}
body #quoi{left:calc(246px + env(safe-area-inset-left,0px))!important} body #yl-son{left:calc(290px + env(safe-area-inset-left,0px))!important}
body:not(.atelier) #yl-ascb{--encre:#ECEAE5;color:#ECEAE5}
body.atelier #yl-ascb{z-index:46;opacity:.7}
body.dehors #yl-ascb,body.vitre #yl-ascb,body.mosaique #yl-ascb{opacity:0!important;pointer-events:none!important}
@media (max-width:760px){ body #yl-ascb{display:none!important} }
/* boussole : les noms clairs gardent un leger halo sombre, lisibles sur le mur clair comme sur le beton */
body:not(.atelier) #yl-rose .br span{display:inline-block;padding:2px 7px 3px;border-radius:10px;background:rgba(30,31,33,.5)}
body:not(.atelier) #yl-rose .br{opacity:.7}
body:not(.atelier) #yl-rose .br.ici{opacity:1}
body:not(.atelier) #yl-rose .br.ici span{background:rgba(200,16,46,.88);color:#FFF!important}

/* ===== 26 sept. (h) : le panneau de commande de l'ascenseur, un bouton par etage ===== */

/* ===== 26 sept. (i) : la cabine de l'ascenseur, un cube de verre ; on y choisit son etage ===== */
#yl-asc .front{position:absolute;inset:0}
#yl-asc.cabine .front{inset:11% 16%;overflow:hidden}
#yl-asc.choix .front{cursor:pointer}
#yl-asc.cabine .porte{background:rgba(208,222,227,.2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-color:#A4A9AC}
#yl-asc .cube,#yl-asc .pan{display:none}
#yl-asc.cabine .cube{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#yl-asc .cube .v{fill:rgba(206,222,228,.13);stroke:#A4A9AC;stroke-width:2;vector-effect:non-scaling-stroke}
#yl-asc .cube .v.solc{fill:rgba(160,176,182,.3)}
#yl-asc .cube .l{fill:none;stroke:#A4A9AC;stroke-width:1.5;vector-effect:non-scaling-stroke}
#yl-asc .cube .r{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1;vector-effect:non-scaling-stroke}
#yl-asc.cabine .ecran{top:2.2%}
#yl-asc.choix .ecran{opacity:1}
#yl-asc .ecran em.rouge{color:#FF4A5C;opacity:1}
#yl-asc.cabine .pan{display:block;position:absolute;right:4.4%;top:32%;z-index:3;padding:18px 12px;border-radius:4px;background:#C4C6C7;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,rgba(0,0,0,.035) 1px 3px);
  box-shadow:0 12px 26px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.35);transform:perspective(700px) rotateY(-30deg);transform-origin:100% 50%}
#yl-asc:not(.choix) .pan{pointer-events:none}
#yl-asc .pan .vis{position:absolute;left:50%;margin-left:-3px;width:6px;height:6px;border-radius:50%;background:#9FA2A4;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
#yl-asc .pan .v1{top:6px} #yl-asc .pan .v2{bottom:6px}
#yl-asc .pan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#yl-asc .pan .bt{display:block;width:40px;height:40px;border-radius:50%;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:15px;color:#2B2C2E;background:#DADCDD;
  box-shadow:inset 0 0 0 2px #A9ACAE,inset 0 -3px 0 rgba(0,0,0,.12),0 2px 3px rgba(0,0,0,.25);transition:box-shadow .2s,color .2s,transform .1s}
#yl-asc .pan .bt:hover{box-shadow:inset 0 0 0 2px #7E8285,inset 0 -3px 0 rgba(0,0,0,.12),0 2px 3px rgba(0,0,0,.25)}
#yl-asc .pan .bt:active{transform:scale(.94)}
#yl-asc .pan .bt.ici,#yl-asc .pan .bt.on{color:var(--rouge,#E5142C);box-shadow:none}
#yl-asc .pan .bt[data-ok="0"].on{color:#A0141F;box-shadow:inset 0 0 0 2px #E0192F,0 0 0 3px rgba(224,25,47,.3),0 2px 3px rgba(0,0,0,.25)}

/* ===== le studio Musique (-2) : meme ossature que l'atelier ; murs anthracite, lames de bois acoustiques, sol beton sombre ===== */
#yl-atelier.studio{background:#161718}
#yl-atelier.studio .mur{background:#2E2F33}
#yl-atelier.studio .mur::before{content:"";position:absolute;left:0;right:0;top:0;height:20vh;background:repeating-linear-gradient(90deg,#5A4332 0 .9vw,#211C19 .9vw 1.25vw)}
#yl-atelier.studio .plinthe{background:#151517}
#yl-atelier.studio .parquet{background:#2A2C2F url(beton.jpg) 0 0/26vh;background-blend-mode:overlay}
#yl-atelier.studio .plaf{background:repeating-linear-gradient(180deg,#1E1F21 0 calc(12vh - 1vh),#0E0E0F calc(12vh - 1vh) 12vh)}
#yl-atelier.studio .cloison{background:#2A2B2F;box-shadow:inset -1vh 0 0 #222326,inset 0 -1.4vh 0 #151517}
#yl-atelier.studio .cloison.bout{background:#2C2D31;box-shadow:none}
#yl-atelier.studio figcaption{color:#E9E4DA}
body.atelier.studio .fleche{color:#E9E4DA}
body.atelier.studio #arch,body.atelier.studio #env,body.atelier.studio #nuit,body.atelier.studio #cadre,body.atelier.studio #quoi,body.atelier.studio #yl-son,body.atelier.studio #langs,body.atelier.studio #yl-rose,body.atelier.studio #yl-ascb{--encre:#ECEAE5;color:#ECEAE5}
/* pochettes : le vinyle sort de la pochette quand le titre joue */
#yl-atelier .cad.son .bord{position:relative;padding:0;background:#111}
#yl-atelier .cad.son .bord img{position:relative;z-index:1;width:min(40vh,40vw);height:min(40vh,40vw);max-width:none;max-height:none;object-fit:cover}

#yl-atelier .cad.son .jouer{position:absolute;left:2vh;bottom:2vh;z-index:2;width:6vh;height:6vh;min-width:40px;min-height:40px;border:0;border-radius:50%;padding:0;cursor:pointer;background:rgba(246,244,240,.92);box-shadow:0 2px 8px rgba(0,0,0,.3)}
#yl-atelier .cad.son .jouer i{position:absolute;left:50%;top:50%;margin:-8px 0 0 -5px;width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #1E1F21}
#yl-atelier .cad.son.joue .jouer i{margin:-8px 0 0 -6px;width:4px;height:16px;border:0;border-left:4px solid #1E1F21;border-right:4px solid #1E1F21;box-sizing:content-box}
#yl-atelier .cad.vide .bord{width:min(40vh,40vw);height:min(40vh,40vw);padding:0;background:transparent;box-shadow:none;border:1px dashed rgba(233,228,218,.35)}
/* console, enceintes, ecran */
#yl-atelier .bx.faders .f.de{background:repeating-linear-gradient(90deg,#3A3C3F 0 1.1vh,#18191A 1.1vh 1.35vh)!important}
#yl-atelier .bx.hp .f.av{background:radial-gradient(circle at 50% 68%,#0A0A0A 0 24%,#3A3A3C 24% 28%,transparent 28.5%),radial-gradient(circle at 50% 24%,#0A0A0A 0 10%,#3A3A3C 10% 13%,transparent 13.5%),#1C1C1E!important}
#yl-atelier .bx.ecr3 .f.av{background:repeating-linear-gradient(180deg,#1C3140 0 1.1vh,#0F1011 1.1vh 1.6vh)!important;box-shadow:inset 0 0 0 .5vh #0F1011}
#yl-atelier .micro3{left:46vw}
#yl-atelier .bx.capsule .f{background:repeating-linear-gradient(180deg,#C4C6C7 0 .3vh,#8E9091 .3vh .5vh)!important}
#yl-atelier .micro{width:26vw;height:30vh;margin-left:-13vw;bottom:36vh}
#yl-atelier .micro .mousse{left:0;top:0;width:100%;height:100%;background:repeating-conic-gradient(#2A2B2E 0 25%,#1E1F21 0 50%) 0 0/3.2vh 3.2vh;box-shadow:0 0 0 .6vh #19191B}
#yl-atelier .micro .rec{left:50%;top:-8vh;width:7vw;margin-left:-3.5vw;height:3.4vh;line-height:3.4vh;text-align:center;font-style:normal;font-size:1.7vh;letter-spacing:.3em;color:#E0192F;background:#1A0B0D;border-radius:.4vh;box-shadow:0 0 0 1px #3A1216}
/* bac a disques : etagere blanche, tranches de vinyles */
#yl-atelier .bac{width:40vw;height:34vh;margin-left:-20vw}
#yl-atelier .bac .grille{left:0;bottom:0;width:40vw;height:34vh;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:.8vw;padding:.8vw;background:#E8E4DC;box-sizing:border-box}
#yl-atelier .bac .grille span{display:block;background:repeating-linear-gradient(90deg,#1B1B1D 0 .25vw,#3B3D42 .25vw .32vw,#1B1B1D .32vw .55vw,#6B2A2A .55vw .62vw,#1B1B1D .62vw .9vw,#C9B27E .9vw .96vw)}
#yl-atelier .bac .grille span:nth-child(3),#yl-atelier .bac .grille span:nth-child(8){background:#26272A}
#yl-atelier .bac .grille span:nth-child(6){background:#1B1B1D repeating-linear-gradient(90deg,#1B1B1D 0 .3vw,#46484D .3vw .36vw)}
#yl-atelier .bac .pch{bottom:34vh;width:8vw;height:8vw}
#yl-atelier .bac .pch.a{left:5vw;background:#C8102E;transform:rotate(-4deg)}
#yl-atelier .bac .pch.b{left:14vw;background:#E9E4DA;box-shadow:inset 0 0 0 1.4vw #D9A441;transform:rotate(3deg)}
#yl-atelier.studio .seg:first-child .cad{left:50%}
#yl-atelier .micro .rec{top:-5.5vh}
#yl-atelier .micro .mousse{background:repeating-conic-gradient(#28292C 0 25%,#202124 0 50%) 0 0/2.6vh 2.6vh}
@media (min-width:761px){ body #yl-mini{left:calc(336px + env(safe-area-inset-left,0px))} }

/* ===== 26 sept. (j) : les boutons d'etage apparaissent au centre des portes vitrees, une fois fermees ===== */
#yl-asc.cabine .pan{right:auto;left:50%;top:50%;padding:0;background:none;box-shadow:none;border-radius:0;transform:translate(-50%,-50%);transform-origin:50% 50%}
#yl-asc .pan .vis{display:none}
#yl-asc .pan ul{flex-direction:row;gap:14px;align-items:flex-start}
#yl-asc .pan li{display:flex;flex-direction:column;align-items:center;gap:12px;width:74px;
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:0s}
#yl-asc.choix.ferme .pan li{opacity:1;transform:none;transition-delay:calc(1.25s + var(--i,0) * 90ms)}
#yl-asc .pan .bt{width:46px;height:46px;font-size:15px;color:#F3F1EC;background:rgba(22,24,26,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 6px 18px rgba(0,0,0,.18)}
#yl-asc .pan .bt:hover{background:rgba(22,24,26,.52);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 6px 18px rgba(0,0,0,.22)}
#yl-asc .pan .bt.ici,#yl-asc .pan .bt.on{color:var(--rouge,#E5142C);box-shadow:none}
#yl-asc .pan .bt[data-ok="0"]{color:rgba(243,241,236,.55)}
#yl-asc .pan .bt[data-ok="0"].on{color:#FF6B7A;box-shadow:inset 0 0 0 1.5px #E0192F,0 0 0 4px rgba(224,25,47,.18),0 6px 18px rgba(0,0,0,.2)}
#yl-asc .pan li span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#F3F1EC;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.45)}
@media (max-width:560px){ #yl-asc .pan ul{gap:4px} #yl-asc .pan li{width:58px} #yl-asc .pan .bt{width:40px;height:40px} #yl-asc .pan li span{font-size:8px;letter-spacing:.12em} }
#yl-asc.cabine .porte::after{display:none}
#yl-asc .pan ul{padding:20px 22px 16px;border-radius:44px;background:rgba(18,19,21,.58);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 18px 40px rgba(0,0,0,.22);
  opacity:0;transform:scale(.96);transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
#yl-asc.choix.ferme .pan ul{opacity:1;transform:none;transition-delay:1.1s}
#yl-asc .pan .bt{background:rgba(255,255,255,.06)}
#yl-asc .pan .bt:hover{background:rgba(255,255,255,.14)}
@media (max-width:560px){ #yl-asc .pan ul{padding:16px 10px 12px} }
/* ===== 26 sept. (k) : boutons d'etage en colonne, comme dans un vrai ascenseur ; le nom a droite ===== */
#yl-asc .pan ul{flex-direction:column;gap:10px;align-items:stretch;padding:22px 26px 22px 20px;border-radius:30px}
#yl-asc .pan li{flex-direction:row;width:auto;gap:16px;transform:translateY(-8px)}
#yl-asc .pan li span{min-width:92px;text-align:left}
@media (max-width:560px){ #yl-asc .pan ul{gap:8px;padding:16px 18px 16px 14px} #yl-asc .pan li{width:auto} }

/* ===== 26 sept. (l) : l'enseigne neon de chaque salle (esprit Braun / Dieter Rams : un seul tube, orange Braun, plaque d'acrylique vissee) ===== */
body #yl-logo{height:auto;line-height:1;padding:9px 26px 13px;border-radius:5px;color:#E8591A;font-size:26px;letter-spacing:0;
  background:radial-gradient(circle at 8px 8px,#B5B8BA 0 1.6px,transparent 2.1px),radial-gradient(circle at calc(100% - 8px) 8px,#B5B8BA 0 1.6px,transparent 2.1px),
    radial-gradient(circle at 8px calc(100% - 8px),#B5B8BA 0 1.6px,transparent 2.1px),radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),#B5B8BA 0 1.6px,transparent 2.1px),rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.05)}
body #yl-logo:hover,body #yl-logo:focus-visible{color:#FF6A1A}
#yl-logo .tube{display:inline-block;font-style:italic;font-weight:300;font-size:1.32em;letter-spacing:.01em;color:#F2651F;
  text-shadow:0 0 1px rgba(255,150,90,.95),0 0 5px rgba(255,106,26,.55),0 0 14px rgba(255,106,26,.28)}
#yl-logo:hover .tube{text-shadow:0 0 1px rgba(255,170,110,1),0 0 6px rgba(255,106,26,.75),0 0 18px rgba(255,106,26,.4)}
#yl-logo::after{opacity:.55}
#yl-logo.allume .tube{animation:ylneon 1.5s linear 1.1s both}
@keyframes ylneon{0%{opacity:.14}6%{opacity:1}9%{opacity:.22}13%{opacity:1}20%{opacity:.4}24%{opacity:1}100%{opacity:1}}
body.atelier #yl-logo{z-index:46}
body.atelier.studio #yl-logo{background-color:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
body.atelier.studio #yl-logo .tube{color:#FFE7D2;text-shadow:0 0 2px #FFB27A,0 0 8px #FF7A1A,0 0 20px rgba(255,106,26,.6)}
@media (max-width:760px){ body #yl-logo{font-size:20px;padding:7px 18px 10px} }
@media (prefers-reduced-motion:reduce){ #yl-logo.allume .tube{animation:none} }

/* ===== 26 sept. (m) : la porte de la salle Photo (esprit Severance), le couloir, la salle de detente ===== */
.porte-s{--pm:calc(var(--Hm)/4);position:absolute;bottom:0;left:calc(50% + var(--span)*.30);width:calc(var(--pm)*.95);height:calc(var(--pm)*2.15)}
.porte-s::before{content:"";position:absolute;left:calc(var(--pm)*-.06);right:calc(var(--pm)*-.06);top:calc(var(--pm)*-.06);bottom:0;background:#D9D3C8;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.porte-s .battant-s{position:absolute;inset:0;background:#E9E5DE;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}
.porte-s .poignee-s{position:absolute;right:calc(var(--pm)*.08);top:52%;width:calc(var(--pm)*.17);height:calc(var(--pm)*.03);margin-top:calc(var(--pm)*-.015);border-radius:calc(var(--pm)*.015);
  background:linear-gradient(180deg,#CDD0D2,#8E9295);cursor:pointer;transform-origin:calc(100% - var(--pm)*.025) 50%;transition:transform .25s ease;box-shadow:0 calc(var(--pm)*.01) calc(var(--pm)*.02) rgba(0,0,0,.25)}
.porte-s .poignee-s::before{content:"";position:absolute;inset:calc(var(--pm)*-.1)}
.porte-s .poignee-s::after{content:"";position:absolute;right:0;top:50%;width:calc(var(--pm)*.055);height:calc(var(--pm)*.055);margin-top:calc(var(--pm)*-.0275);border-radius:50%;background:#A5A8AB}
.porte-s .poignee-s:hover,.porte-s .poignee-s:focus-visible{transform:rotate(-16deg);outline:none}
.porte-s .ecriteau{position:absolute;left:50%;bottom:100%;margin-bottom:calc(var(--pm)*.16);transform:translateX(-50%);padding:calc(var(--pm)*.035) calc(var(--pm)*.08);background:#2E3A35;border-radius:calc(var(--pm)*.01);box-shadow:0 1px 2px rgba(0,0,0,.2);white-space:nowrap}
.porte-s .ecriteau b{display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;font-size:calc(var(--pm)*.055);line-height:1;letter-spacing:.2em;text-transform:uppercase;color:#E8E6DF}
#yl-det{position:fixed;inset:0;z-index:60;background:#DAD6CE;overflow:hidden;opacity:0;transition:opacity .6s ease;font-family:inherit}
#yl-det.on{opacity:1}
#yl-det .couloir,#yl-det .piece{position:absolute;inset:0}
#yl-det .piece{display:none}
#yl-det.arrive .piece{display:block}
#yl-det.arrive .couloir{display:none}
#yl-det .vue{position:absolute;inset:0;perspective:55vh;perspective-origin:50% 50%}
#yl-det .piece .vue{perspective:50vh}
#yl-det .monde{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
#yl-det .sc{position:absolute;inset:0;transform-style:preserve-3d}
#yl-det.arrive .sc{animation:yldetin 3s cubic-bezier(.2,.6,.2,1) both}
@keyframes yldetin{from{transform:translateZ(-14vh)}to{transform:none}}
#yl-det .pl{position:absolute;left:0;top:0;display:block;backface-visibility:visible}
#yl-det .blanc{position:absolute;inset:0;z-index:5;background:#FFFDF7;opacity:0;pointer-events:none;transition:opacity .6s ease}
#yl-det.flash .blanc{opacity:1}
/* le couloir : murs blancs, moquette verte, neons au plafond */
#yl-det.marche .couloir .monde{animation:ylcouloir 9s cubic-bezier(.42,0,.58,1) .5s both}
@keyframes ylcouloir{0%{transform:translateZ(55vh) rotateY(0deg) translate3d(0,0,0)}30%{transform:translateZ(55vh) rotateY(0deg) translate3d(0,0,120vh)}38%{transform:translateZ(55vh) rotateY(-90deg) translate3d(0,0,120vh)}
  60%{transform:translateZ(55vh) rotateY(-90deg) translate3d(80vh,0,120vh)}68%{transform:translateZ(55vh) rotateY(0deg) translate3d(80vh,0,120vh)}100%{transform:translateZ(55vh) rotateY(0deg) translate3d(80vh,0,225vh)}}
#yl-det .mc{background:#ECEAE4;box-shadow:inset 0 -1.2vh 0 #D3CFC6}
#yl-det .mc.fond{background:#E0DDD5}
#yl-det .moq{background:#4F6A58 url(beton.jpg) 0 0/14vh;background-blend-mode:overlay}
#yl-det .plaf{background:#EFEEEA}
#yl-det .plaf.pz{background:repeating-linear-gradient(180deg,#E6E5E0 0 16vh,#FFFFFF 16vh 22vh)}
#yl-det .plaf.px{background:repeating-linear-gradient(90deg,#E6E5E0 0 16vh,#FFFFFF 16vh 22vh)}
#yl-det .ouv{position:absolute;left:50%;bottom:0;width:16vh;height:40vh;margin-left:-8vh;background:#FFFDF6;box-shadow:0 0 5vh 1.5vh rgba(255,250,235,.85)}
/* la salle de detente : un cube blanc chaud, un puits de soleil, un canape immense, un mur d'eau */
#yl-det .piece .monde{transition:transform 1.8s cubic-bezier(.45,0,.2,1)}
#yl-det .pm{background:#EFECE6;box-shadow:inset 0 -1.4vh 0 #DCD6CC}
#yl-det .solp{background:#D8D2C7 url(beton.jpg) 0 0/30vh;background-blend-mode:overlay}
#yl-det .plp{background:#F2F0EB}
#yl-det .ciel{background:#EAF3F8}
#yl-det .puits{background:#F7F3EA}
#yl-det .rayon{background:rgba(255,246,220,.1);pointer-events:none}
#yl-det .tache{background:rgba(255,249,230,.6)}
#yl-det .g3{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
#yl-det .bx{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
#yl-det .bx .f{position:absolute;display:block;backface-visibility:visible}
#yl-det .bx .f.de{filter:brightness(1.08)}
#yl-det .bx .f.ga,#yl-det .bx .f.dr{filter:brightness(.88)}
#yl-det .bx .f.ar{filter:brightness(.75)}
#yl-det .bx.bassin .f.de{background:#5F7F88!important;filter:none}
#yl-det .bx.ardoise .f.av{background:repeating-linear-gradient(180deg,rgba(214,228,232,.18) 0 .35vh,rgba(214,228,232,0) .35vh 1.8vh),#3E4447!important;background-size:100% 1.8vh!important;animation:ylruis .9s linear infinite}
@keyframes ylruis{from{background-position:0 0}to{background-position:0 1.8vh}}
#yl-det .dcad{position:absolute;left:50%;top:36%;margin:0;transform:translate(-50%,-50%)}

#yl-det .w3 .dcad{top:42%}
#yl-det .w3 .dcad{left:58%}
#yl-det .dcad .bord{display:block;padding:1vh;background:#FBFAF7;box-shadow:0 1.2vh 2.6vh rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.05)}
#yl-det .dcad img{display:block;max-width:56vh;max-height:32vh;width:auto;height:auto}
#yl-det .dcad figcaption{position:absolute;right:0;top:100%;margin-top:1.6vh;text-align:right;line-height:1.4;color:#2B2622;white-space:nowrap}
#yl-det .dcad figcaption b{display:block;font-weight:400;font-style:italic;font-size:1.9vh}
#yl-det .dcad figcaption i{display:block;font-style:normal;opacity:.7;font-size:1.5vh}
#yl-det .porte-s{--pm:20vh;left:12%}
#yl-det .fl-d{position:absolute;top:50%;z-index:3;display:none;width:48px;height:48px;margin-top:-24px;border:0;padding:0;background:transparent;cursor:pointer;font-size:34px;line-height:1;color:#2B2622;opacity:.5}
#yl-det .fl-d:hover{opacity:1}
#yl-det .fl-d.g{left:18px} #yl-det .fl-d.d{right:18px}
#yl-det .sortie{position:absolute;top:calc(26px + env(safe-area-inset-top,0px));right:calc(26px + env(safe-area-inset-right,0px));z-index:3;display:none;align-items:center;gap:12px;border:0;padding:0;background:transparent;cursor:pointer;font-family:inherit;color:#2B2622}
#yl-det .sortie .fl{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(43,38,34,.45);font-size:16px}
#yl-det .sortie b{font-weight:400;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
#yl-det.arrive .fl-d{display:block} #yl-det.arrive .sortie{display:flex}
@media (prefers-reduced-motion:reduce){ #yl-det.marche .couloir .monde{animation-duration:.01s} }
#yl-det .piece .monde{transform:translateZ(50vh)}

/* ===== 26 sept. (n) : la porte encastree (meme couleur que le mur, juste le contour et la poignee de l'entree) ===== */
.tableau[hidden]{display:none!important}
.porte-s{left:50%;margin-left:calc(var(--pm)*-.475)}
.porte-s::before{display:none}
.porte-s .battant-s{background:transparent;box-shadow:inset 0 0 0 1px rgba(40,34,28,.2),0 0 0 1px rgba(255,255,255,.3)}
.porte-s .poignee-s{left:calc(var(--pm)*.09);right:auto;top:50%;width:2px;height:calc(var(--pm)*.17);margin-top:calc(var(--pm)*-.085);border-radius:2px;
  background:color-mix(in srgb,var(--encre) 60%,transparent);box-shadow:none;transform:none;transition:background .3s ease}
.porte-s .poignee-s::after{display:none}
.porte-s .poignee-s::before{inset:calc(var(--pm)*-.08) calc(var(--pm)*-.07)}
.porte-s .poignee-s:hover,.porte-s .poignee-s:focus-visible{transform:none;background:var(--encre)}
#yl-det .porte-s{left:22%}
/* l'interieur reprend les materiaux de la salle Photo : murs de la galerie, beton cire anthracite */
#yl-det .mc,#yl-det .pm{background:var(--cmur,#EFECE6)}
#yl-det .mc.fond{background:var(--cmur,#EFECE6);filter:brightness(.94)}
#yl-det .moq,#yl-det .solp{background:#3C3E41 url(beton.jpg) 0 0/104vh;background-blend-mode:overlay}
#yl-det::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:url(grain.png) 0 0/160px;opacity:.05}
/* ===== l'etage +1 Video : salle de cinema, cabine, salles de montage ===== */
#yl-atelier.cine{background:#101012}
#yl-atelier.cine .mur{background:#1B1B1E}
#yl-atelier.cine .plinthe{background:#111113}
#yl-atelier.cine .parquet{background:#2A1719 url(beton.jpg) 0 0/26vh;background-blend-mode:overlay}
#yl-atelier.cine .plaf{background:repeating-linear-gradient(180deg,#18181A 0 calc(12vh - 1vh),#0D0D0E calc(12vh - 1vh) 12vh)}
#yl-atelier.cine .cloison{background:#1E1E21;box-shadow:inset -1vh 0 0 #19191B,inset 0 -1.4vh 0 #111113}
#yl-atelier.cine .cloison.bout{background:#1F1F22;box-shadow:none}
#yl-atelier .cinema .toile{left:-35vh;bottom:13vh;width:70vh;height:39.4vh;background:#0B0B0C;box-shadow:0 0 0 .8vh #050506,0 0 6vh rgba(255,250,235,.08);overflow:hidden}
#yl-atelier .cinema .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
#yl-atelier .cinema .rideau{bottom:0;width:13vw;height:64vh;background:repeating-linear-gradient(90deg,#4E1116 0 1.3vw,#6E1A20 1.3vw 2.2vw,#5A1419 2.2vw 2.6vw)}
#yl-atelier .cinema .rideau.g{left:calc(-35vh - 15vw)} #yl-atelier .cinema .rideau.d{left:calc(35vh + 2vw)}
#yl-atelier .cinema .faisceau{left:-50vw;width:100vw;bottom:13vh;height:59vh;pointer-events:none;background:rgba(255,250,232,.055);
  clip-path:polygon(48.5% 0,51.5% 0,calc(50% + 35vh) 33%,calc(50% + 35vh) 100%,calc(50% - 35vh) 100%,calc(50% - 35vh) 33%);animation:ylfaisc 3s steps(6) infinite}
@keyframes ylfaisc{0%,100%{opacity:1}50%{opacity:.8}}
#yl-atelier .amorce{position:absolute;inset:0;background:#9A9385;overflow:hidden;animation:ylamorce 7s infinite}
#yl-atelier .amorce i,#yl-atelier .amorce div{position:absolute;display:block}
#yl-atelier .amorce .cercle{left:50%;top:50%;border-radius:50%;border:.5vh solid #1E1E1E}
#yl-atelier .amorce .c1{width:30vh;height:30vh;margin:-15vh 0 0 -15vh} #yl-atelier .amorce .c2{width:36vh;height:36vh;margin:-18vh 0 0 -18vh}
#yl-atelier .amorce .croix.h{left:0;right:0;top:50%;height:.4vh;background:#1E1E1E} #yl-atelier .amorce .croix.v{top:0;bottom:0;left:50%;width:.4vh;background:#1E1E1E}
#yl-atelier .amorce .balai{left:50%;top:-50%;width:100%;height:200%;transform-origin:0 50%;background:rgba(0,0,0,.22);animation:ylbalai 1s linear infinite}
@keyframes ylbalai{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
#yl-atelier .amorce .chiffres{left:50%;top:50%;width:20vh;height:24vh;margin:-12vh 0 0 -10vh;overflow:hidden}
#yl-atelier .amorce .col{display:block;animation:ylchif 7s steps(1,end) infinite}
#yl-atelier .amorce .col b{display:block;height:24vh;line-height:24vh;text-align:center;font-size:20vh;font-weight:300;color:#1B1B1B}
@keyframes ylchif{0%{transform:translateY(0)}14%{transform:translateY(-24vh)}28%{transform:translateY(-48vh)}42%{transform:translateY(-72vh)}56%,100%{transform:translateY(-96vh)}}
@keyframes ylamorce{0%,69%{opacity:1}71%,99%{opacity:0}100%{opacity:1}}
#yl-atelier .cinema .bientot{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;background:#0E0E10;color:#E9E4DA;font-style:italic;font-size:3.2vh;letter-spacing:.02em;animation:ylbientot 7s infinite}
@keyframes ylbientot{0%,69%{opacity:0}72%,97%{opacity:1}100%{opacity:0}}
#yl-atelier .salle3{transform:translateZ(-6vh)}
/* cabine de projection */
#yl-atelier .cabine{width:0;height:0}
#yl-atelier .cabine .hublot{left:-34vw;bottom:30vh;width:7vh;height:5vh;background:#FFF6DC;box-shadow:0 0 0 .8vh #2A2A2C,0 0 4vh rgba(255,240,200,.35)}
#yl-atelier .cabine .hublot.b{left:-26vw;background:#171719;box-shadow:0 0 0 .8vh #2A2A2C}
#yl-atelier .cabine .etag{left:18vw;bottom:24vh;width:20vw;height:1vh;background:#3A3C3F}
#yl-atelier .cabine .boite{bottom:25vh;width:9vh;height:9vh;border-radius:50%;background:#6E7275;box-shadow:inset 0 0 0 .7vh #555A5D,inset 0 0 0 3.8vh #7D8184}
#yl-atelier .cabine .boite.a{left:19vw} #yl-atelier .cabine .boite.b{left:25vw;background:#B5462E;box-shadow:inset 0 0 0 .7vh #8E3524,inset 0 0 0 3.8vh #C4553B} #yl-atelier .cabine .boite.c{left:31vw}
#yl-atelier .o3 .bob{position:absolute;left:-8vh;top:-8vh;width:16vh;height:16vh}
#yl-atelier .o3 .bob::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#4A4D51 0 18deg,#141416 18deg 60deg);box-shadow:0 0 0 .7vh #6A6D70;animation:ylbob 4s linear infinite}
#yl-atelier .o3 .bob::after{content:"";position:absolute;left:42%;top:42%;width:16%;height:16%;border-radius:50%;background:#B9BBBC}
#yl-atelier .o3 .bob.b::before{animation-duration:3s}
@keyframes ylbob{to{transform:rotate(360deg)}}
/* salles de montage */
#yl-atelier .bx.ecr-tl .f.av{background:linear-gradient(#E0192F,#E0192F) 47% 58%/1.5% 36% no-repeat,
  linear-gradient(90deg,#4A7BD1 0 22%,transparent 22% 24%,#4A7BD1 24% 48%,transparent 48% 50%,#4A7BD1 50% 80%,transparent 80%) 4% 62%/92% 9% no-repeat,
  linear-gradient(90deg,#39A26B 0 30%,transparent 30% 34%,#39A26B 34% 70%,transparent 70%) 4% 76%/92% 8% no-repeat,
  linear-gradient(90deg,#7A5BC9 0 40%,transparent 40% 44%,#7A5BC9 44% 90%,transparent 90%) 4% 89%/92% 7% no-repeat,
  linear-gradient(#2B2D31,#2B2D31) 50% 12%/70% 36% no-repeat,#16171A!important}
#yl-atelier .bx.ecr-vw .f.av{background:linear-gradient(180deg,#E8A868 0 42%,#C0664A 42% 56%,#2B3A4A 56%) 50% 45%/84% 70% no-repeat,#121316!important}
#yl-atelier .bx.ecr-mire .f.av{background:linear-gradient(90deg,#C0C0C0 0 14.28%,#C0C000 14.28% 28.57%,#00C0C0 28.57% 42.85%,#00C000 42.85% 57.14%,#C000C0 57.14% 71.42%,#C00000 71.42% 85.71%,#0000C0 85.71%) 50% 40%/94% 66% no-repeat,
  linear-gradient(90deg,#0000C0 0 14.28%,#131313 14.28% 28.57%,#C000C0 28.57% 42.85%,#131313 42.85% 57.14%,#00C0C0 57.14% 71.42%,#131313 71.42% 85.71%,#C0C0C0 85.71%) 50% 88%/94% 16% no-repeat,#0E0F11!important}
#yl-atelier .bx.boules .f.de{background:radial-gradient(circle at 25% 50%,#8A8D90 0 11%,#3A3C3F 11.5% 16%,transparent 16.5%),radial-gradient(circle at 50% 50%,#8A8D90 0 11%,#3A3C3F 11.5% 16%,transparent 16.5%),radial-gradient(circle at 75% 50%,#8A8D90 0 11%,#3A3C3F 11.5% 16%,transparent 16.5%),#2C2D30!important}
#yl-atelier .story{width:40vw;height:30vh;margin-left:-20vw;bottom:34vh;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2vw;padding:1.2vw;box-sizing:border-box;background:#3A3B3F}
#yl-atelier .story span{display:block;background:#EDEAE3 linear-gradient(#2B2622,#2B2622) 50% 62%/80% .25vh no-repeat;box-shadow:inset 0 0 0 .3vh #D8D3C9}
#yl-atelier .story .pp{width:3vw;height:3vw;transform:rotate(-4deg)}
#yl-atelier .story .pp.a{right:-1.2vw;top:-1vw;background:#F2C14E} #yl-atelier .story .pp.b{left:8vw;bottom:-1.4vw;background:#E86A4A;transform:rotate(5deg)} #yl-atelier .story .pp.c{right:10vw;bottom:-1vw;background:#7FB7E0}
#yl-atelier .affiches{width:54vw;height:30vh;margin-left:-27vw;bottom:34vh;display:flex;gap:4vw;justify-content:center}
#yl-atelier .affiches span{position:relative;display:block;width:15vw;height:30vh;box-shadow:0 1vh 2vh rgba(0,0,0,.35)}
#yl-atelier .affiches b{position:absolute;left:0;right:0;bottom:2vh;text-align:center;font-weight:400;font-size:1.3vh;letter-spacing:.3em;text-transform:uppercase}
#yl-atelier .affiches .a1{background:radial-gradient(circle at 50% 42%,#E8591A 0 26%,transparent 26.5%),#EDE6D8} #yl-atelier .affiches .a1 b{color:#2B2622}
#yl-atelier .affiches .a2{background:repeating-linear-gradient(180deg,#2F5D8A 0 2vh,#EDE6D8 2vh 4vh)} #yl-atelier .affiches .a2 b{color:#2F5D8A;background:#EDE6D8;padding:.6vh 0}
#yl-atelier .affiches .a3{background:linear-gradient(#C8102E,#C8102E) 50% 40%/60% 42% no-repeat,#1E1E21} #yl-atelier .affiches .a3 b{color:#E9E4DA}
.porte-s .battant-s{cursor:pointer}
.porte-s:hover .poignee-s{background:var(--encre)}

/* ===== 26 sept. (p) : le judas a quatre visages : disque, haut-parleur, optique, defonceuse ===== */
#yl-entree .judas .lentille>i{position:absolute;inset:0;border-radius:50%;display:none;overflow:hidden}
#yl-entree .judas .lentille>i b{position:absolute;display:block}
#yl-entree .judas[data-m="1"] .lentille .hp,#yl-entree .judas[data-m="2"] .lentille .optique,#yl-entree .judas[data-m="3"] .lentille .menuiserie{display:block}
#yl-entree .judas[data-m="1"] .lentille,#yl-entree .judas[data-m="2"] .lentille,#yl-entree .judas[data-m="3"] .lentille{background:#111}
#yl-entree .judas[data-m="1"] .lentille::after,#yl-entree .judas[data-m="1"] .lentille::before,#yl-entree .judas[data-m="2"] .lentille::after,#yl-entree .judas[data-m="2"] .lentille::before,#yl-entree .judas[data-m="3"] .lentille::after,#yl-entree .judas[data-m="3"] .lentille::before{display:none}
/* haut-parleur : saladier, cone, cache-noyau ; il vibre, et trois ondes s'en echappent */
#yl-entree .judas .hp{background:radial-gradient(circle,#1C1C1C 0 30%,#2A2A2A 30% 31%,#1A1A1A 31% 44%,#3A3A3A 44% 45%,#111 45%)}
#yl-entree .judas .hp .cone{left:8%;top:8%;width:84%;height:84%;border-radius:50%;background:radial-gradient(circle,#2E2E2E 0 22%,#161616 22% 23%,#262626 23% 40%,#1E1E1E 40% 41%,#303030 41% 47%,#0C0C0C 47%);animation:ylvibre .09s linear infinite alternate}
#yl-entree .judas .hp .cache{left:50%;top:50%;width:26%;height:26%;margin:-13% 0 0 -13%;border-radius:50%;background:radial-gradient(circle at 38% 36%,#4A4A4A,#161616 70%);animation:ylvibre .09s linear -.04s infinite alternate}
#yl-entree .judas .hp .onde{left:50%;top:50%;width:30%;height:30%;margin:-15% 0 0 -15%;border-radius:50%;border:1.5px solid rgba(200,16,46,.7);opacity:0;animation:ylonde 1.5s ease-out infinite}
#yl-entree .judas .hp .onde:nth-child(2){animation-delay:.5s} #yl-entree .judas .hp .onde:nth-child(3){animation-delay:1s}
@keyframes ylvibre{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes ylonde{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.4);opacity:0}}
/* optique : bague cranelee, lentille bleutee, iris a six lames qui s'ouvre et se ferme */
#yl-entree .judas .optique{background:radial-gradient(circle,#0D1B2A 0 36%,#1B2E44 36% 38%,#0A1420 38% 52%,#2B2B2B 52% 55%,#151515 55%)}
#yl-entree .judas .optique .bague{inset:0;border-radius:50%;background:repeating-conic-gradient(#2A2A2A 0 4deg,#111 4deg 8deg);-webkit-mask:radial-gradient(circle,transparent 0 55%,#000 56%);mask:radial-gradient(circle,transparent 0 55%,#000 56%)}
#yl-entree .judas .optique .iris{left:50%;top:50%;width:70%;height:70%;margin:-35% 0 0 -35%;background:#050505;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);animation:yliris 3.2s ease-in-out infinite}
#yl-entree .judas .optique .iris::after{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg,transparent 0 59deg,#3A3A3A 59deg 60deg)}
#yl-entree .judas .optique .reflet{left:28%;top:22%;width:16%;height:8%;border-radius:50%;background:rgba(160,200,255,.35);transform:rotate(-30deg)}
@keyframes yliris{0%,15%{transform:scale(.32)}45%,60%{transform:scale(.72)}85%,100%{transform:scale(.32)}}
/* defonceuse : une planche de chene, la fraise tourne autour du centre et le trait de coupe s'allonge ; des copeaux volent */
@property --ylk{syntax:"<angle>";inherits:true;initial-value:0deg}
#yl-entree .judas .menuiserie{background:#B98B5C;animation:ylkerf 4.5s linear infinite}
#yl-entree .judas .menuiserie .chene{inset:0;background:repeating-linear-gradient(94deg,#C99A62 0 6px,#A9773F 6px 9px,#BE8E58 9px 16px,#B27F48 16px 19px)}
#yl-entree .judas .menuiserie .kerf{left:50%;top:50%;width:56%;height:56%;margin:-28% 0 0 -28%;border-radius:50%;background:conic-gradient(from -90deg,#3A2410 0 var(--ylk),transparent var(--ylk));-webkit-mask:radial-gradient(circle,transparent 0 46%,#000 47% 53%,transparent 54%);mask:radial-gradient(circle,transparent 0 46%,#000 47% 53%,transparent 54%)}
#yl-entree .judas .menuiserie .bras{left:50%;top:50%;width:0;height:0;transform:rotate(var(--ylk))}
#yl-entree .judas .menuiserie .fraise{left:-4px;top:-46px;margin-top:4px;width:8px;height:8px;border-radius:50%;background:#D8D8D8;box-shadow:0 0 0 2px #6A6A6A,0 0 6px rgba(0,0,0,.4);animation:ylfraise .08s linear infinite}
#yl-entree .judas .menuiserie .fraise::after{content:"";position:absolute;left:3px;top:-26px;width:2px;height:26px;background:#8A8A8A}
#yl-entree .judas .menuiserie .copeau{left:50%;top:50%;width:3px;height:5px;border-radius:1px;background:#E4C48F;opacity:0;animation:ylcopeau .7s ease-out infinite}
#yl-entree .judas .menuiserie .c2{animation-delay:.18s;background:#C99A62} #yl-entree .judas .menuiserie .c3{animation-delay:.36s} #yl-entree .judas .menuiserie .c4{animation-delay:.52s;background:#A9773F}
@keyframes ylkerf{from{--ylk:0deg}to{--ylk:360deg}}
@keyframes ylfraise{from{transform:rotate(0)}to{transform:rotate(180deg)}}
@keyframes ylcopeau{0%{transform:translate(-50%,-50%) translate(0,-42px) rotate(0);opacity:1}100%{transform:translate(-50%,-50%) translate(-30px,-64px) rotate(220deg);opacity:0}}
@media (prefers-reduced-motion:reduce){ #yl-entree .judas .lentille>i b{animation:none!important} }

/* ===== 26 sept. (q) : l'enseigne ouvre l'ascenseur ; les quatre salles de l'etage 0 dans la cabine ; plus d'icone vitre ; fin du scintillement ===== */
#yl-logo::after{display:none}
body #yl-logo{padding:9px 22px 13px}
#yl-asc .pan li.et0{flex-wrap:wrap}
#yl-asc .pan .murs{display:flex;flex-wrap:wrap;gap:6px;width:100%;margin:2px 0 2px 62px}
#yl-asc .pan .mw{border:0;padding:5px 10px 6px;border-radius:12px;cursor:pointer;font-family:inherit;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#F3F1EC;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transition:background .2s,box-shadow .2s}
#yl-asc .pan .mw:hover{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
#yl-asc .pan .mw.ici{color:var(--rouge,#E5142C);box-shadow:inset 0 0 0 1px var(--rouge,#E5142C)}
@media (max-width:560px){ #yl-asc .pan .murs{margin-left:0;justify-content:center} }
body #arch{display:none!important}
body #env{left:calc(70px + env(safe-area-inset-left,0px))!important} body #nuit{left:calc(114px + env(safe-area-inset-left,0px))!important} body #cadre{left:calc(158px + env(safe-area-inset-left,0px))!important}
body #quoi{left:calc(202px + env(safe-area-inset-left,0px))!important} body #yl-son{left:calc(246px + env(safe-area-inset-left,0px))!important}
@media (min-width:761px){ body #yl-mini{left:calc(292px + env(safe-area-inset-left,0px))} }
/* les objets et cadres sont poses un demi-centimetre devant le mur : plus de combat de profondeur pendant l'entree dans la piece */
#yl-atelier .obj{transform:none} #yl-atelier .mur{transform:translateZ(-.6vh)} /* un objet 2D sans taille + transformation 3D disparaissait (tri 3D de Chrome) ; et un objet plat qui touche le bord du segment (x = 0) disparait aussi : on garde 1vw de marge */
#yl-atelier .cad{transform:translate(-50%,-50%) translateZ(.6vh)}
#yl-atelier .cad.pens{transform:translate(-50%,0) translateZ(24vh) translateY(-21.6vh)}
#yl-atelier .mur{transform:translateZ(0)}
/* ===== 26 sept. (r) : le panneau de la cabine garde une largeur fixe, les pastilles des salles passent dessous ===== */
#yl-asc .pan ul{width:340px;max-width:88vw;box-sizing:border-box;padding:22px 20px 22px 20px}
#yl-asc .pan .murs{margin:2px 0 4px 0;justify-content:flex-start}
#yl-asc .pan .mw{font-size:9px;padding:4px 8px 5px;letter-spacing:.14em}
#yl-asc .pan li span{min-width:0}

/* ===== 26 sept. (s) : la porte d'entree est l'ascenseur ; murs Musique et Video fermes ; la platine dans le studio ===== */
#yl-entree .etages{position:absolute;left:50%;top:43%;transform:translateX(-50%);display:flex;gap:10px;z-index:3}
#yl-entree .etages button{width:22px;height:22px;border-radius:50%;border:1px solid color-mix(in srgb,var(--encre) 45%,transparent);background:transparent;padding:0;cursor:pointer;font-family:inherit;font-size:10px;line-height:20px;color:var(--encre);opacity:.55;transition:opacity .3s,box-shadow .3s,color .3s}
#yl-entree .etages button:hover{opacity:1}
#yl-entree .etages button.ici{opacity:1;color:#B8860B;border-color:#E2B84A;box-shadow:0 0 0 3px rgba(226,184,74,.22)}
#yl-entree .etages button.non{opacity:1;color:#A0141F;border-color:#E0192F;box-shadow:0 0 0 3px rgba(224,25,47,.18)}
#yl-entree .etages::after{content:attr(data-msg);position:absolute;left:50%;top:100%;margin-top:10px;transform:translateX(-50%);white-space:nowrap;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#A0141F;pointer-events:none}
#yl-entree.off .etages,#yl-entree.verre .etages{opacity:0;pointer-events:none;transition:opacity .5s}
@media (max-width:760px){ #yl-entree .etages{top:44%;gap:8px} #yl-entree .etages button{width:24px;height:24px;line-height:22px} }
/* murs fermes : le mur reste peint, mais rien n'y est accroche */
/* p256/p258 : les murs Musique et Video sont ouverts (etages) ; rail et spot restent caches par ailleurs */
#yl-mob button[data-mob-mur="1"],#yl-mob button[data-mob-mur="3"]{display:none!important}

/* ===== 26 sept. (t) : cabine centree ; etage +3 Art, le plateau d'artiste ===== */
#yl-asc .pan ul{width:auto;min-width:0;padding:22px 30px 22px 22px}
#yl-asc .pan li{justify-content:flex-start}
#yl-asc .pan .murs{display:none}
#yl-atelier.arts{background:#DAD5CB}
#yl-atelier.arts .mur{background:#EDE8DF;box-shadow:inset 0 -2vh 0 #E2DCD1}
#yl-atelier.arts .plinthe{background:#CFC6B8}
#yl-atelier.arts .parquet{background:
  radial-gradient(circle at 12% 30%,#C8102E 0 .9vh,transparent 1vh),radial-gradient(circle at 34% 62%,#4A7BD1 0 .6vh,transparent .7vh),radial-gradient(circle at 58% 24%,#F2C14E 0 .8vh,transparent .9vh),radial-gradient(circle at 76% 70%,#2E4A3E 0 .5vh,transparent .6vh),radial-gradient(circle at 88% 36%,#E8591A 0 .7vh,transparent .8vh),radial-gradient(circle at 46% 84%,#C8102E 0 .5vh,transparent .6vh),
  repeating-linear-gradient(90deg,#D8C4A0 0 calc(12vw - 2px),#8C7853 calc(12vw - 2px) 12vw,#CDB894 12vw calc(24vw - 2px),#8C7853 calc(24vw - 2px) 24vw)}
#yl-atelier.arts .plaf{background:repeating-linear-gradient(90deg,#F3EFE7 0 calc(20vw - 6vw),#DCE6EA calc(20vw - 6vw) 20vw)}
#yl-atelier.arts .cloison{background:#E6E1D8;box-shadow:inset -1vh 0 0 #D3CCC0,inset 0 -1.4vh 0 #CFC6B8}
#yl-atelier.arts .cloison.bout{background:#E9E5DE;box-shadow:none}
#yl-atelier.arts figcaption{color:#2B2622}
/* taches de peinture au sol, sous le chevalet et la table d'aquarelle */
#yl-atelier .taches{left:-30vw;bottom:8vh;width:60vw;height:20vh;background:radial-gradient(ellipse at 30% 60%,rgba(200,16,46,.28) 0 6vh,transparent 6.5vh),radial-gradient(ellipse at 62% 40%,rgba(74,123,209,.25) 0 5vh,transparent 5.5vh),radial-gradient(ellipse at 80% 70%,rgba(242,193,78,.3) 0 4vh,transparent 4.5vh);pointer-events:none}
#yl-atelier .taches.b{background:radial-gradient(ellipse at 40% 50%,rgba(127,183,224,.3) 0 6vh,transparent 6.5vh),radial-gradient(ellipse at 70% 60%,rgba(232,168,104,.28) 0 5vh,transparent 5.5vh)}
#yl-atelier .chev3 .bx.toile-p .f.av svg,#yl-atelier .comp3 .bx .f.av svg,#yl-atelier .vec3 .bx .f.av svg,#yl-atelier .aqua3 .bx.aqua .f.de svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#yl-atelier .chev3 .bx.toile-p .f.av{background:#F4F1EA!important;box-shadow:inset 0 0 0 .6vh #FBFAF7;filter:none}
#yl-atelier .bx.palette .f.de{background:radial-gradient(circle at 18% 40%,#C8102E 0 12%,transparent 13%),radial-gradient(circle at 40% 30%,#F2C14E 0 12%,transparent 13%),radial-gradient(circle at 62% 45%,#4A7BD1 0 12%,transparent 13%),radial-gradient(circle at 82% 35%,#2E4A3E 0 12%,transparent 13%),radial-gradient(circle at 30% 72%,#E8591A 0 12%,transparent 13%),radial-gradient(circle at 60% 78%,#FFFFFF 0 12%,transparent 13%),#E9DFC8!important}
#yl-atelier .bx.pot .f{background:rgba(221,227,229,.75)!important}
#yl-atelier .bx.ecr-comp .f.av,#yl-atelier .bx.ecr-vec .f.av{filter:none;box-shadow:inset 0 0 0 .5vh #0E0F11}
#yl-atelier .bx.ecr-vec .f.av{box-shadow:inset 0 0 0 .5vh #DADCDD}
#yl-atelier .bx.tablette .f.de{background:#2A2B2E!important;box-shadow:inset 0 0 0 .8vh #1E1F22}
#yl-atelier .calques{left:-30vw;bottom:36vh;width:60vw;height:26vh;pointer-events:none}
#yl-atelier .calques span{position:absolute;display:block;width:16vw;height:11vh;background:rgba(255,255,255,.55);box-shadow:0 1vh 2vh rgba(0,0,0,.12),inset 0 0 0 1px rgba(43,38,34,.15)}
#yl-atelier .calques span:nth-child(1){left:8%;top:10%;transform:rotate(-4deg);background:rgba(127,183,224,.45)} #yl-atelier .calques span:nth-child(2){left:38%;top:0;transform:rotate(3deg);background:rgba(232,168,104,.45)} #yl-atelier .calques span:nth-child(3){left:66%;top:18%;transform:rotate(-2deg)}
/* croquis epingles */
#yl-atelier .croquis{left:-26vw;bottom:36vh;width:52vw;height:24vh}
#yl-atelier .croquis span{position:absolute;display:block;width:11vw;height:15vh;background:#FBFAF7 repeating-linear-gradient(180deg,transparent 0 2.4vh,rgba(43,38,34,.35) 2.4vh calc(2.4vh + 1px)) 50% 3vh/60% 10vh no-repeat;box-shadow:0 .6vh 1.4vh rgba(0,0,0,.14)}
#yl-atelier .croquis .c1{left:0;top:2vh;transform:rotate(-3deg)} #yl-atelier .croquis .c2{left:14vw;top:0;transform:rotate(2deg);background-image:radial-gradient(circle,transparent 0 3vh,rgba(43,38,34,.45) 3vh calc(3vh + 1px),transparent calc(3vh + 2px));background-size:100% 100%} #yl-atelier .croquis .c3{left:27vw;top:3vh;transform:rotate(-1deg)} #yl-atelier .croquis .c4{left:40vw;top:1vh;transform:rotate(4deg);background-image:linear-gradient(135deg,transparent 0 45%,rgba(43,38,34,.4) 45% 47%,transparent 47%)}
#yl-atelier .croquis .pun{position:absolute;width:1vh;height:1vh;border-radius:50%;background:#C8102E;box-shadow:0 1px 2px rgba(0,0,0,.4)}
#yl-atelier .croquis .pun.a{left:5vw;top:1.6vh} #yl-atelier .croquis .pun.b{left:19.5vw;top:-.4vh;background:#4A7BD1} #yl-atelier .croquis .pun.c{left:32.5vw;top:2.6vh;background:#2E4A3E} #yl-atelier .croquis .pun.d{left:45.5vw;top:.6vh;background:#F2C14E}
/* plantes vertes du poste vectoriel */
#yl-atelier .plantes{left:20vw;bottom:28vh;width:20vw;height:40vh;pointer-events:none}
#yl-atelier .plantes i{position:absolute;bottom:0;display:block;border-radius:50% 50% 8% 8%}
#yl-atelier .plantes .pl-a{left:2vw;width:7vw;height:30vh;background:radial-gradient(ellipse at 50% 30%,#4F8A5B 0 40%,#2E5F3D 41% 70%,transparent 71%),radial-gradient(ellipse at 50% 100%,#8C7853 0 12%,transparent 13%)}
#yl-atelier .plantes .pl-b{left:11vw;width:5vw;height:20vh;background:radial-gradient(ellipse at 50% 35%,#6FA86B 0 40%,#3E7A4A 41% 70%,transparent 71%),radial-gradient(ellipse at 50% 100%,#B8860B 0 12%,transparent 13%)}
/* aquarelle : godets, verre, etagere de bocaux */
#yl-atelier .bx.godets .f.de{background:repeating-linear-gradient(90deg,transparent 0 .3vh,#C8102E .3vh 2vh,transparent 2vh 2.3vh,#E8591A 2.3vh 4vh,transparent 4vh 4.3vh,#F2C14E 4.3vh 6vh,transparent 6vh 6.3vh,#2E4A3E 6.3vh 8vh,transparent 8vh 8.3vh,#4A7BD1 8.3vh 10vh,transparent 10vh 10.3vh) 0 .5vh/100% 2.4vh no-repeat,repeating-linear-gradient(90deg,transparent 0 .3vh,#7A2E1E .3vh 2vh,transparent 2vh 2.3vh,#8C7853 2.3vh 4vh,transparent 4vh 4.3vh,#2B3A5C 4.3vh 6vh,transparent 6vh 6.3vh,#A0522D 6.3vh 8vh,transparent 8vh 8.3vh,#5B2B2B 8.3vh 10vh,transparent 10vh 10.3vh) 0 3.6vh/100% 2.4vh no-repeat,#F2F0EB!important}
#yl-atelier .bx.verre .f{background:rgba(215,228,234,.6)!important}
#yl-atelier .bx.aqua .f.de{filter:none}
#yl-atelier .etagere{left:12vw;bottom:52vh;width:36vw;height:8vh;background:linear-gradient(#C9A97A,#C9A97A) 0 100%/100% 1.2vh no-repeat;display:flex;gap:1.6vw;align-items:flex-end;padding:0 2vw 1.2vh;box-sizing:border-box}
#yl-atelier .etagere span{display:block;width:3vw;height:5.5vh;border-radius:.6vh .6vh .3vh .3vh;background:rgba(215,228,234,.7);box-shadow:inset 0 -2.4vh 0 #C8102E}
#yl-atelier .etagere span:nth-child(2){box-shadow:inset 0 -3vh 0 #4A7BD1} #yl-atelier .etagere span:nth-child(3){box-shadow:inset 0 -1.8vh 0 #F2C14E} #yl-atelier .etagere span:nth-child(4){box-shadow:inset 0 -2.6vh 0 #2E4A3E} #yl-atelier .etagere span:nth-child(5){box-shadow:inset 0 -2vh 0 #E8591A} #yl-atelier .etagere span:nth-child(6){box-shadow:inset 0 -3.2vh 0 #2B3A5C}
#yl-atelier .calques{left:-32vw;width:64vw;bottom:50vh;height:14vh}
#yl-atelier .calques span{width:12vw;height:8vh}
#yl-atelier .calques span:nth-child(1){left:0;top:20%} #yl-atelier .calques span:nth-child(2){left:22%;top:0} #yl-atelier .calques span:nth-child(3){left:76%;top:12%}

/* ===== 26 sept. (u) : l'etage +4 Spectacle : salle noire, rideau rouge, scene en planches, projecteurs ===== */
#yl-entree .etages button.moi{color:#B8860B;border-color:#B8860B;opacity:.7}
#yl-atelier.scene{background:#0B0B0D}
#yl-atelier.scene .mur{background:#151517;box-shadow:inset 0 -6vh 0 #101012}
#yl-atelier.scene .plinthe{background:#0A0A0B}
#yl-atelier.scene .parquet{background:#1A1719 url(beton.jpg) 0 0/26vh;background-blend-mode:overlay}
#yl-atelier.scene .plaf{background:repeating-linear-gradient(90deg,#111 0 calc(10vw - .6vw),#2A2A2C calc(10vw - .6vw) 10vw)}
#yl-atelier.scene .cloison{background:#141416;box-shadow:inset -1vh 0 0 #0E0E10,inset 0 -1.4vh 0 #0A0A0B}
#yl-atelier.scene .cloison.bout{background:#151517;box-shadow:none}
#yl-atelier.scene figcaption{color:#E9E4DA}
/* la scene : rideaux, lambrequin, ecran du direct ou affiche, faisceaux */
#yl-atelier .rideaux{width:0;height:0}
#yl-atelier .rideaux .rid{bottom:0;width:22vw;height:64vh;background:repeating-linear-gradient(90deg,#4E1116 0 1.2vw,#7A1E25 1.2vw 2.1vw,#5A1419 2.1vw 2.5vw)}
#yl-atelier .rideaux .rid.g{left:-49vw} #yl-atelier .rideaux .rid.d{left:28vw}
#yl-atelier .rideaux .lambrequin{left:-49vw;width:98vw;top:-64vh;height:8vh;background:repeating-linear-gradient(90deg,#4E1116 0 1.2vw,#7A1E25 1.2vw 2.1vw,#5A1419 2.1vw 2.5vw);box-shadow:0 .6vh 0 #B8860B}
#yl-atelier .ecran-live{position:absolute;left:-28vw;bottom:14vh;width:56vw;height:31.5vw;max-height:44vh;background:#000;box-shadow:0 0 0 .6vh #0A0A0A,0 0 6vh rgba(255,240,200,.08)}
#yl-atelier .ecran-live .direct{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
#yl-atelier .ecran-live .affiche{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2vh;background:#141416;color:#E9E4DA;text-align:center;box-shadow:inset 0 0 0 1vh #C8102E,inset 0 0 0 1.4vh #E9E4DA}
#yl-atelier .ecran-live .affiche b{font-weight:300;font-size:6vh;letter-spacing:.22em}
#yl-atelier .ecran-live .affiche i{font-style:italic;font-size:3.4vh}
#yl-atelier .ecran-live .affiche em{font-style:normal;font-size:1.6vh;letter-spacing:.3em;text-transform:uppercase;color:#F2C14E}
#yl-atelier .ecran-live .affiche small{font-size:1.4vh;letter-spacing:.2em;text-transform:uppercase;opacity:.5}
#yl-atelier .rideaux .faisceau{bottom:6vh;width:24vw;height:60vh;pointer-events:none;background:rgba(255,240,200,.06);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);transform-origin:50% 0}
#yl-atelier .rideaux .f1{left:-34vw;transform:rotate(-14deg);background:rgba(200,16,46,.09)} #yl-atelier .rideaux .f2{left:-12vw} #yl-atelier .rideaux .f3{left:10vw;transform:rotate(14deg);background:rgba(74,123,209,.09)}
#yl-atelier .plateau3{transform:translateZ(6vh)}
#yl-atelier .bx.planches .f.de{background:repeating-linear-gradient(90deg,#3B2A1C 0 4vh,#2A1D12 4vh calc(4vh + 2px))!important;filter:none}
#yl-atelier .bx.projo .f{background:#1A1A1C!important} #yl-atelier .bx.projo .f.av{background:radial-gradient(circle,#FFF4D6 0 34%,#2A2A2C 36%)!important;box-shadow:0 0 3vh rgba(255,240,200,.55)}
/* public : fauteuils rouges sur gradins, balcon */
#yl-atelier .balcon{left:1vw;width:98vw;top:8vh;bottom:auto;height:22vh;background:#1A1A1D;box-shadow:inset 0 -1.2vh 0 #B8860B}
#yl-atelier .balcon .rambarde{left:0;right:0;bottom:0;height:5vh;background:repeating-linear-gradient(90deg,transparent 0 3vw,#B8860B 3vw calc(3vw + .4vw))}
#yl-atelier .balcon .lum{position:absolute;top:8vh;width:2vh;height:2vh;border-radius:50%;background:#FFF0C4;box-shadow:0 0 2vh rgba(255,240,196,.7)}
#yl-atelier .balcon .lum:nth-child(2){left:20%} #yl-atelier .balcon .lum:nth-child(3){left:50%} #yl-atelier .balcon .lum:nth-child(4){left:80%}
/* regie : console, pupitre lumiere, vu-metres, baie vitree sur la salle */
#yl-atelier .bx.lumieres .f.de{background:repeating-linear-gradient(90deg,#F2C14E 0 .5vh,#2A2A2C .5vh 1.3vh),#2A2A2C!important}
#yl-atelier .bx.ecr-vu .f.av{background:repeating-linear-gradient(90deg,#39A26B 0 .8vh,#0F1011 .8vh 1.2vh) 4% 30%/92% 60% no-repeat,#0F1011!important;filter:none}
#yl-atelier .bx.ecr-lum .f.av{background:radial-gradient(circle at 25% 40%,#C8102E 0 12%,transparent 13%),radial-gradient(circle at 50% 40%,#4A7BD1 0 12%,transparent 13%),radial-gradient(circle at 75% 40%,#F2C14E 0 12%,transparent 13%),linear-gradient(#2A2A2C,#2A2A2C) 50% 75%/80% 6% no-repeat,#0F1011!important;filter:none}
#yl-atelier .baie{left:calc(50% - 30vw);bottom:36vh;width:60vw;height:22vh;background:rgba(40,44,52,.55);box-shadow:inset 0 0 0 .8vh #2A2A2C;display:flex}
#yl-atelier .baie span{flex:1;border-right:.8vh solid #2A2A2C;background:radial-gradient(circle at 50% 80%,rgba(200,16,46,.35) 0 20%,transparent 60%)}
#yl-atelier .baie span:last-child{border:0}
/* loges : miroir a ampoules */
#yl-atelier .miroir{left:calc(50% - 16vw);bottom:44vh;width:32vw;height:26vh;background:#2A2A2C;box-shadow:inset 0 0 0 .8vh #3A3C3F}
#yl-atelier .miroir .glace{position:absolute;inset:2.4vh;background:#3E4A52}
#yl-atelier .miroir i{position:absolute;width:1.6vh;height:1.6vh;border-radius:50%;background:#FFF0C4;box-shadow:0 0 1.6vh rgba(255,240,196,.8)}
#yl-atelier .miroir i:nth-child(2){left:1vw;top:.6vh} #yl-atelier .miroir i:nth-child(3){left:8vw;top:.6vh} #yl-atelier .miroir i:nth-child(4){left:15vw;top:.6vh} #yl-atelier .miroir i:nth-child(5){left:22vw;top:.6vh} #yl-atelier .miroir i:nth-child(6){left:29vw;top:.6vh}
#yl-atelier .miroir i:nth-child(7){left:1vw;bottom:.6vh} #yl-atelier .miroir i:nth-child(8){left:8vw;bottom:.6vh} #yl-atelier .miroir i:nth-child(9){left:15vw;bottom:.6vh} #yl-atelier .miroir i:nth-child(10){left:22vw;bottom:.6vh} #yl-atelier .miroir i:nth-child(11){left:29vw;bottom:.6vh}
#yl-atelier .miroir i:nth-child(12){left:.4vw;top:12vh} #yl-atelier .miroir i:nth-child(13){right:.4vw;top:12vh}
#yl-atelier .bx.tabouret .f{background:#B8860B!important} #yl-atelier .bx.costume .f{filter:none}

/* ===== 26 sept. (v) : l'etage +5 Enfants : murs creme, tapis raye, cabane, livres geants, tente, castelet ===== */
#yl-atelier.kids{background:#F6EFE2}
#yl-atelier.kids .mur{background:#FFF6DF;box-shadow:inset 0 -6vh 0 #F2E6C8}
#yl-atelier.kids .plinthe{background:#E9D9B6}
#yl-atelier.kids .parquet{background:repeating-linear-gradient(90deg,#F2C14E 0 10vh,#4A7BD1 10vh 20vh,#C8102E 20vh 30vh,#39A26B 30vh 40vh,#F28C28 40vh 50vh,#8E5BB5 50vh 60vh)}
#yl-atelier.kids .plaf{background:#FFFDF7 radial-gradient(circle at 20% 60%,#EEF3F8 0 6vh,transparent 6.2vh),#FFFDF7}
#yl-atelier.kids .cloison{background:#FBEFD6;box-shadow:inset -1vh 0 0 #EAD9B4,inset 0 -1.4vh 0 #E2CFA6}
#yl-atelier.kids .cloison.bout{background:#FFF6DF;box-shadow:none}
#yl-atelier.kids figcaption{color:#1E1F21}
/* cabane : hublot et guirlande sur le mur ; les faces en planches */
#yl-atelier .cabane-k{width:0;height:0}
#yl-atelier .cabane-k .guirlande{left:-40vw;bottom:56vh;width:80vw;height:6vh;background:repeating-linear-gradient(90deg,transparent 0 4vw,#F2C14E 4vw 6.5vw,transparent 6.5vw 8vw,#C8102E 8vw 10.5vw,transparent 10.5vw 12vw,#4A7BD1 12vw 14.5vw,transparent 14.5vw 16vw);clip-path:polygon(0 0,100% 0,100% 40%,50% 100%,0 40%)}
#yl-atelier .bx.planches-k .f{background:repeating-linear-gradient(180deg,#C99A62 0 3vh,#A9773F 3vh calc(3vh + 2px))!important;filter:none}
#yl-atelier .bx.toit .f{background:#C8102E!important} #yl-atelier .bx.fanion .f{background:#F2C14E!important;filter:none}
#yl-atelier .bx.facade .f.av{background:radial-gradient(circle at 50% 38%,#BFE3F5 0 3.2vh,#8C6B4A 3.2vh 4vh,transparent 4.1vh),linear-gradient(#3B2A1C,#3B2A1C) 50% 100%/7vh 11vh no-repeat,repeating-linear-gradient(180deg,#C99A62 0 3vh,#A9773F 3vh calc(3vh + 2px))!important} #yl-atelier .bx.porte-k .f.av{background:#3B2A1C radial-gradient(circle at 78% 50%,#F2C14E 0 .7vh,transparent .8vh)!important}
#yl-atelier .bx.coussin .f{filter:none;border-radius:1vh}
/* histoires : rayonnage bas plein de livres colores, trois livres geants ouverts */
#yl-atelier .etagere-k{left:1vw;bottom:auto;top:52vh;width:98vw;height:20vh;background:#C99A62;box-shadow:inset 0 0 0 1vh #A9773F}
#yl-atelier .etagere-k .ray{left:1vh;right:1vh;top:9.4vh;height:1vh;background:#A9773F}
#yl-atelier .etagere-k .ray:last-of-type{top:19vh;display:none}
#yl-atelier .etagere-k b{position:absolute;bottom:10.4vh;width:2.6vw;background:var(--c);box-shadow:inset .5vw 0 0 rgba(0,0,0,.15)}
#yl-atelier .etagere-k b:nth-child(odd){bottom:1vh}
#yl-atelier .livre-k{position:absolute;bottom:auto;top:18vh;width:16vw;height:24vh;background:#FFFDF7;box-shadow:0 1vh 0 #E2CFA6,0 0 0 .6vh var(--c)}
#yl-atelier .livre-k::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:.4vh;background:#E2CFA6}
#yl-atelier .livre-k .couv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vh;text-align:center;color:#1E1F21;padding:0 1vw}
#yl-atelier .livre-k .couv b{width:6vh;height:6vh;border-radius:50%;background:var(--c);color:#FFF;font-weight:400;font-size:3.4vh;line-height:6vh}
#yl-atelier .livre-k .couv i{font-style:italic;font-size:2.2vh}
#yl-atelier .livre-k .couv em{font-style:normal;font-size:1.3vh;letter-spacing:.2em;text-transform:uppercase;opacity:.55}

/* tente : deux pans de toile rayee, une lampe suspendue et son halo */
#yl-atelier .tente-k{width:0;height:0}
#yl-atelier .tente-k .toile{bottom:0;width:26vw;height:50vh;background:repeating-linear-gradient(90deg,#BFE3F5 0 3vw,#C8102E 3vw 6vw)}
#yl-atelier .tente-k .toile.g{left:-26vw;clip-path:polygon(100% 0,100% 100%,0 100%)} #yl-atelier .tente-k .toile.d{left:0;clip-path:polygon(0 0,100% 100%,0 100%)}
#yl-atelier .tente-k .fil{left:0;top:-64vh;width:.4vh;height:20vh;margin-left:-.2vh;background:#8C6B4A}
#yl-atelier .tente-k .lampe{left:0;margin-left:-5vh;top:-44vh;width:10vh;height:7vh;background:#F2C14E;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
#yl-atelier .tente-k .halo{left:0;margin-left:-9vh;top:-37vh;width:18vh;height:6vh;border-radius:50%;background:rgba(255,240,196,.55);box-shadow:0 0 4vh rgba(255,240,196,.6)}
/* theatre : mur de dessins d'enfants, castelet rouge et or avec deux marionnettes */
#yl-atelier .dessins-k{left:1vw;bottom:auto;top:8vh;width:98vw;height:44vh}
#yl-atelier .dessins-k span{position:absolute;width:5.5vw;height:12vh;background:#FFFDF7;box-shadow:0 .4vh 0 #E2CFA6,0 0 0 .3vh var(--c)}
#yl-atelier .dessins-k .soleil{position:absolute;left:12%;top:10%;width:2vh;height:2vh;border-radius:50%;background:#F2C14E;box-shadow:0 0 0 .5vh rgba(242,193,78,.35)}
#yl-atelier .dessins-k .maison{position:absolute;left:35%;bottom:12%;width:2.2vw;height:4vh;background:var(--c);clip-path:polygon(50% 0,100% 40%,85% 40%,85% 100%,15% 100%,15% 40%,0 40%)}
#yl-atelier .castelet{width:0;height:0}
#yl-atelier .castelet .chassis{left:-20vw;bottom:6vh;width:40vw;height:40vh;background:#C8102E;box-shadow:inset 0 0 0 1.2vh #F2C14E,0 1vh 0 #8E0B21}
#yl-atelier .castelet .fronton{left:-22vw;bottom:46vh;width:44vw;height:8vh;background:#C8102E;clip-path:polygon(0 100%,50% 0,100% 100%);color:#F2C14E;text-align:center;font-size:2.6vh;line-height:12vh;letter-spacing:.2em}
#yl-atelier .castelet .scene-k{left:-16vw;bottom:12vh;width:32vw;height:26vh;background:#1B2E44 radial-gradient(circle at 50% 70%,#2B4A6A 0 30%,transparent 31%)}
#yl-atelier .castelet .rideau{bottom:12vh;width:9vw;height:26vh;background:repeating-linear-gradient(90deg,#8E0B21 0 1vw,#C8102E 1vw 1.8vw);z-index:2}
#yl-atelier .castelet .rideau.g{left:-16vw} #yl-atelier .castelet .rideau.d{left:7vw}
#yl-atelier .castelet .marionnette{position:absolute;bottom:0;width:6vw;height:16vh;background:var(--c,#F2C14E);border-radius:3vw 3vw 0 0}
#yl-atelier .castelet .marionnette::before{content:"";position:absolute;left:50%;top:-5vh;width:5vh;height:5vh;margin-left:-2.5vh;border-radius:50%;background:#F2E7D5;box-shadow:inset 0 -1vh 0 #E9D0B0}
#yl-atelier .castelet .m1{left:22%;--c:#4A7BD1;animation:ylmar 2.4s ease-in-out infinite} #yl-atelier .castelet .m2{left:58%;--c:#39A26B;animation:ylmar 2.4s ease-in-out -1.2s infinite}
@keyframes ylmar{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2vh) rotate(3deg)}}
#yl-atelier .bx.banc .f{background:#C99A62!important}
@media (prefers-reduced-motion:reduce){ #yl-atelier .castelet .marionnette{animation:none} }

/* ===== 26 sept. (w) : neuf boutons sur la porte ; l'etage -1 Archives ; le cabinet secret ===== */
#yl-entree .etages{gap:7px} #yl-entree .etages button{width:21px;height:21px;font-size:9.5px;line-height:19px}
@media (max-width:760px){ #yl-entree .etages{gap:5px} #yl-entree .etages button{width:22px;height:22px;line-height:20px} }
/* la cave : beton, rayonnages gris, tubes au plafond */
#yl-atelier.cave{background:#26272A}
#yl-atelier.cave .mur{background:#8E8F91 url(beton.jpg) 0 0/40vh;background-blend-mode:multiply;box-shadow:inset 0 -6vh 0 rgba(0,0,0,.18)}
#yl-atelier.cave .plinthe{background:#3E3F42}
#yl-atelier.cave .parquet{background:#55575B url(beton.jpg) 0 0/30vh;background-blend-mode:overlay}
#yl-atelier.cave .plaf{background:repeating-linear-gradient(90deg,#3A3B3E 0 calc(25vw - 1.2vw),#F4F1E8 calc(25vw - 1.2vw) 25vw)}
#yl-atelier.cave .cloison{background:#7E7F82;box-shadow:inset -1vh 0 0 #66676A,inset 0 -1.4vh 0 #3E3F42}
#yl-atelier.cave .cloison.bout{background:#86878A;box-shadow:none}
#yl-atelier.cave figcaption{color:#E9E4DA}
#yl-atelier .plaque-k{left:calc(50% - 18vw);bottom:auto;top:9vh;width:36vw;height:7.5vh;background:#2A2A2C;color:#E9E4DA;text-align:center;box-shadow:inset 0 0 0 .4vh #B8860B}
#yl-atelier .plaque-k b{display:block;font-weight:300;font-size:3vh;letter-spacing:.2em;margin-top:1.4vh} #yl-atelier .plaque-k i{font-style:normal;font-size:1.5vh;letter-spacing:.3em;opacity:.6}
#yl-atelier .bx.tablette .f{background:#A5A7A9!important} #yl-atelier .bx.boite .f{filter:none} #yl-atelier .bx.boite .f.av{background:linear-gradient(#2A2A2C,#2A2A2C) 50% 40%/60% 1.2vh no-repeat,linear-gradient(#2A2A2C,#2A2A2C) 50% 60%/40% .6vh no-repeat,#D9CFBF!important}
/* le fichier FAQ : des tiroirs qu'on tire */
#yl-atelier .fichier{left:calc(50% - 15vw);bottom:38vh;width:30vw;height:26vh;background:#5B5E62;box-shadow:inset 0 0 0 .5vh #44474B}
#yl-atelier .fichier .etiquette{left:0;right:0;top:-3.6vh;height:3vh;font-style:normal;font-size:1.4vh;letter-spacing:.25em;text-transform:uppercase;color:#E9E4DA;text-align:center;line-height:3vh}
#yl-atelier .fichier .tiroirs{position:absolute;inset:1vh}
#yl-atelier .fichier .tiroir{position:absolute;left:0;right:0;top:calc(var(--i) * 4.8vh);height:4.4vh;background:#6E7175;box-shadow:inset 0 -.4vh 0 #4B4E52;cursor:pointer;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#yl-atelier .fichier .tiroir .poignee-t{position:absolute;left:50%;top:50%;width:3vh;height:.8vh;margin:-.4vh 0 0 -1.5vh;background:#B8860B;border-radius:.4vh}
#yl-atelier .fichier .tiroir b{position:absolute;left:1.2vw;top:0;line-height:4.4vh;font-weight:400;font-size:1.5vh;color:#E9E4DA;white-space:nowrap;overflow:hidden;max-width:20vw;text-overflow:ellipsis}
#yl-atelier .fichier .tiroir p{position:absolute;left:0;right:0;top:4.4vh;margin:0;padding:1vh 1.2vw;background:#FBFAF7;color:#1E1F21;font-size:1.5vh;line-height:1.4;box-shadow:0 1vh 2vh rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .3s;z-index:2}
#yl-atelier .fichier .tiroir.ouvert{transform:translateY(1vh) scale(1.04);z-index:3} #yl-atelier .fichier .tiroir.ouvert p{opacity:1}
#yl-atelier .bx.socle .f{background:#5B5E62!important}
/* le classeur des mentions legales : des onglets, un seul ouvert */
#yl-atelier .classeur{left:calc(50% - 22vw);bottom:47vh;width:44vw;height:24vh}
#yl-atelier .classeur .onglets{position:absolute;inset:0}
#yl-atelier .classeur .onglet{position:absolute;left:calc(var(--i) * 20%);top:0;width:19%;height:3.4vh;background:#B8860B;color:#1E1F21;cursor:pointer;font-size:1.3vh;letter-spacing:.1em;text-transform:uppercase;line-height:3.4vh;text-align:center}
#yl-atelier .classeur .onglet b{font-weight:400;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 .4vw}
#yl-atelier .classeur .onglet p{position:absolute;left:calc(var(--i) * -105.3%);top:3.4vh;width:526%;height:20vh;margin:0;padding:1.6vh 1.6vw;background:#FBFAF7;color:#1E1F21;font-size:1.6vh;line-height:1.5;text-align:left;text-transform:none;letter-spacing:0;box-shadow:0 1vh 2vh rgba(0,0,0,.35);display:none}
#yl-atelier .classeur .onglet.ouvert{background:#F2C14E} #yl-atelier .classeur .onglet.ouvert p{display:block}
#yl-atelier .bx.plateau .f{background:#B9B4AA!important} #yl-atelier .bx.abat .f{background:#2A2A2C!important} #yl-atelier .bx.dossier .f{background:#E9E4DA!important;filter:none}
/* la porte du site classique et les deux affiches */
#yl-atelier .porte-k{width:0;height:0}
#yl-atelier .porte-k .porte-c{position:absolute;left:-9vw;bottom:0;width:18vw;height:52vh;background:#6E7175;box-shadow:inset 0 0 0 .8vh #55575B,0 0 0 1.2vh #3E3F42;text-decoration:none;color:#E9E4DA;display:block}
#yl-atelier .porte-k .porte-c .hublot-c{position:absolute;left:50%;top:9vh;width:7vh;height:7vh;margin-left:-3.5vh;border-radius:50%;background:#BFE3F5;box-shadow:inset 0 0 0 .6vh #3E3F42}
#yl-atelier .porte-k .porte-c .barre{position:absolute;left:2vw;right:2vw;top:30vh;height:1.4vh;background:#C8102E;border-radius:.7vh}
#yl-atelier .porte-k .porte-c b{position:absolute;left:0;right:0;top:36vh;text-align:center;font-weight:300;font-size:1.7vh;letter-spacing:.2em;text-transform:uppercase}
#yl-atelier .porte-k .porte-c:hover{box-shadow:inset 0 0 0 .8vh #55575B,0 0 0 1.2vh #B8860B}
#yl-atelier .porte-k .affiche-k{position:absolute;left:calc(14vw + var(--i) * 14vw);bottom:22vh;width:11vw;height:22vh;background:#FBFAF7;color:#1E1F21;text-decoration:none;box-shadow:0 .6vh 0 #C9C4BA;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vh;text-align:center;transform:rotate(calc(var(--i) * 3deg - 1.5deg))}
#yl-atelier .porte-k .affiche-k b,#yl-atelier .porte-k .affiche-k i{position:static} #yl-atelier .porte-k .affiche-k b{font-weight:300;font-size:2vh;letter-spacing:.1em} #yl-atelier .porte-k .affiche-k i{font-style:normal;font-size:1.3vh;letter-spacing:.2em;text-transform:uppercase;color:#C8102E}
/* le X grave : dans la pierre, sans etiquette */
.grave-x{position:absolute;right:5%;bottom:5vh;width:4vh;height:4vh;cursor:pointer;opacity:.75;z-index:4}
.grave-x::before,.grave-x::after{content:"";position:absolute;left:50%;top:50%;width:3.6vh;height:.5vh;margin:-.25vh 0 0 -1.8vh;background:rgba(0,0,0,.28);box-shadow:0 1px 0 rgba(255,255,255,.35);transform:rotate(45deg)}
.grave-x::after{transform:rotate(-45deg)}
#salle .grave-x{right:8%;bottom:4vh}
/* le sas : fond noir, une question */
#yl-sas{position:fixed;inset:0;z-index:70;background:rgba(8,6,8,.92);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s;font-family:inherit}
#yl-sas.on{opacity:1}
#yl-sas .sas{text-align:center;color:#E9E4DA;max-width:34rem;padding:0 1.5rem}
#yl-sas b{display:block;font-weight:300;font-size:2rem;letter-spacing:.2em;margin-bottom:.8rem} #yl-sas p{opacity:.7;margin:0 0 2rem;letter-spacing:.05em}
#yl-sas button{font-family:inherit;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;padding:.8rem 1.6rem;margin:.3rem;border-radius:2rem;cursor:pointer;background:transparent;color:#E9E4DA;border:1px solid rgba(233,228,218,.5)}
#yl-sas button.oui{background:#C8102E;border-color:#C8102E;color:#FFF}
/* le boudoir : prune, velours, or, une lumiere basse */
#yl-det.x{background:#1A0F16}
#yl-det.x .mc,#yl-det.x .fond{background:#2E1A27;box-shadow:inset 0 -1.2vh 0 #1F1119}
#yl-det.x .moq{background:#3A1A26 url(beton.jpg) 0 0/14vh;background-blend-mode:multiply}
#yl-det.x .plaf{background:#140A10}
#yl-det.x .pm{background:repeating-linear-gradient(90deg,#3A1F2E 0 2.4vh,#432436 2.4vh 3vh);box-shadow:inset 0 -1.4vh 0 #B8860B}
#yl-det.x .solp{background:#4A1F33 url(beton.jpg) 0 0/40vh;background-blend-mode:multiply}
#yl-det.x .plp{background:#140A10}
#yl-det.x .lustre{background:radial-gradient(circle,#F2C14E 0 12%,rgba(242,193,78,.25) 13% 45%,transparent 46%)}
#yl-det.x .dcad.vide{left:calc(30% + var(--j) * 40%);top:42%}
#yl-det.x .dcad.vide .bord{width:34vh;height:24vh;padding:0;background:#241019;box-shadow:0 0 0 .8vh #B8860B,0 1.2vh 3vh rgba(0,0,0,.6);position:relative;overflow:hidden}
#yl-det.x .dcad.vide .spot{position:absolute;left:0;right:0;top:-40%;height:120%;background:radial-gradient(ellipse at 50% 0,rgba(242,193,78,.28) 0 30%,transparent 65%)}
#yl-det.x .dcad figcaption{color:#E9E4DA} #yl-det.x .dcad figcaption i{opacity:.55}
#yl-det.x .miroir-x{position:absolute;left:14%;top:14%;width:22vh;height:40vh;border-radius:11vh 11vh 1vh 1vh;background:#3E4A52;box-shadow:inset 0 0 0 1vh #B8860B,inset 0 0 6vh rgba(0,0,0,.5)}
#yl-det.x .bx.abatx .f{background:#F2E7D5!important;box-shadow:0 0 4vh rgba(255,240,196,.7)}

/* ===== 26 sept. (x) : le bouton Sortie de la cabine, et la page de remerciement ===== */
#yl-asc .pan li.so{margin-top:6px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14)}
#yl-asc .pan .bt.sortie-m{color:#F3F1EC;display:flex;align-items:center;justify-content:center;padding:0}
#yl-asc .pan .bt.sortie-m svg{width:20px;height:20px}
#yl-asc .pan .bt.sortie-m:hover{background:#C8102E;border-color:#C8102E}
#yl-sortie{position:fixed;inset:0;z-index:80;background:#0B0B0D;color:#E9E4DA;display:flex;align-items:center;justify-content:center;text-align:center;opacity:0;transition:opacity .9s ease;font-family:inherit}
#yl-sortie.on{opacity:1}
#yl-sortie .fin{max-width:38rem;padding:0 1.5rem}

#yl-sortie b{display:block;font-weight:300;font-size:clamp(1.8rem,5vw,3.2rem);letter-spacing:.14em;text-transform:uppercase;line-height:1.15;margin-bottom:1.2rem}
#yl-sortie p{margin:0 0 2.4rem;opacity:.72;font-size:1.05rem;letter-spacing:.04em;line-height:1.6}

#yl-sortie small{display:block;margin-top:3rem;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;opacity:.4}

/* ===== 26 sept. (y) : la gaine derriere la vitre depolie ===== */
#yl-asc .puits{background:#0E0E10}
#yl-asc .puits .gaine{position:absolute;left:0;right:0;top:0;will-change:transform;opacity:.92}
#yl-asc .puits .niv{position:relative;height:100vh;filter:blur(2.5px) saturate(.85);background:linear-gradient(180deg,#141416 0 8vh,var(--c) 8vh 92vh,#141416 92vh);overflow:hidden}
#yl-asc .puits .niv::before{content:"";position:absolute;left:0;right:0;top:8vh;bottom:8vh;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 9px)}
#yl-asc .puits .niv .dalle{position:absolute;left:0;right:0;top:0;height:8vh;background:#A5A7A9 url(beton.jpg) 0 0/40vh;background-blend-mode:multiply;box-shadow:inset 0 -1.6vh 0 #3E3F42,0 1vh 3vh rgba(0,0,0,.45)}

 
#yl-asc .puits .niv b{position:absolute;left:50%;top:14vh;transform:translateX(-50%);font-weight:300;font-size:40vh;line-height:1;color:rgba(255,255,255,.34);letter-spacing:-.04em}
#yl-asc .puits .niv span{position:absolute;left:50%;bottom:16vh;transform:translateX(-50%);white-space:nowrap;font-size:5vh;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.4)}
#yl-asc.roule.cabine .porte{background:rgba(208,222,227,.07)}
@media (prefers-reduced-motion:reduce){ #yl-asc .puits .gaine{transition:none!important} }

/* ===== 26 sept. (z) : l'etage Jeux ; la porte vitree de sortie et son decor ===== */
#yl-atelier.jeux{background:#0E1A14}
#yl-atelier.jeux .mur{background:#16281F;box-shadow:inset 0 -6vh 0 #10201A}
#yl-atelier.jeux .plinthe{background:#0A1510}
#yl-atelier.jeux .parquet{background:#0F3D2A url(beton.jpg) 0 0/26vh;background-blend-mode:multiply}
#yl-atelier.jeux .plaf{background:linear-gradient(90deg,transparent 0 49.6%,#39A26B 49.6% 50.4%,transparent 50.4%) 0 0/100vw 100%,#0B1510;box-shadow:inset 0 -1vh 0 rgba(57,162,107,.2)}
#yl-atelier.jeux .cloison{background:#14241C;box-shadow:inset -1vh 0 0 #0F1C15,inset 0 -1.4vh 0 #0A1510}
#yl-atelier.jeux .cloison.bout{background:#16281F;box-shadow:none}
#yl-atelier.jeux figcaption{color:#E9E4DA}
/* la table de cartes : lampe basse, cone de lumiere, huit cartes face cachee sur le feutre */
#yl-atelier .tapis-c{width:0;height:0}
#yl-atelier .tapis-c .lampe-c{left:0;margin-left:-7vh;top:-64vh;width:14vh;height:9vh;background:#1E1F21;clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}
#yl-atelier .tapis-c .cone-c{left:0;margin-left:-34vw;top:-55vh;width:68vw;height:55vh;background:rgba(242,193,78,.07);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);pointer-events:none}
#yl-atelier .tapis-c em{position:absolute;left:0;transform:translateX(-50%);bottom:2vh;font-style:normal;font-size:1.4vh;letter-spacing:.3em;text-transform:uppercase;color:rgba(233,228,218,.5);white-space:nowrap}
#yl-atelier .tapis-c .jeu{position:absolute;left:0;bottom:17vh;width:0;height:0}
#yl-atelier .tapis-c .carte{position:absolute;left:calc(-30vw + var(--i) * 8vw);bottom:calc(var(--i) * .6vh);width:7vw;height:18vh;cursor:pointer;transition:bottom .35s;transform:rotate(var(--r))}
#yl-atelier .tapis-c .carte:hover{bottom:calc(var(--i) * .6vh + 1.2vh)}
#yl-atelier .tapis-c .carte .dos,#yl-atelier .tapis-c .carte .face{position:absolute;inset:0;border-radius:.8vh;transition:opacity .45s}
#yl-atelier .tapis-c .carte .dos{background:repeating-linear-gradient(45deg,transparent 0 .8vh,rgba(184,134,11,.35) .8vh 1vh),repeating-linear-gradient(-45deg,transparent 0 .8vh,rgba(184,134,11,.35) .8vh 1vh),#1B2E44;box-shadow:inset 0 0 0 .5vh #B8860B,0 .6vh 1.4vh rgba(0,0,0,.5)}
#yl-atelier .tapis-c .carte .face{background:#FBFAF7;opacity:0;overflow:hidden;box-shadow:inset 0 0 0 .4vh #FBFAF7,0 .6vh 1.4vh rgba(0,0,0,.5)}
#yl-atelier .tapis-c .carte .face img{position:absolute;left:.5vh;right:.5vh;top:.5vh;height:70%;width:calc(100% - 1vh);object-fit:cover}
#yl-atelier .tapis-c .carte .face b{position:absolute;left:0;right:0;bottom:1vh;text-align:center;font-weight:400;font-size:1.3vh;color:#1E1F21;padding:0 .4vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#yl-atelier .tapis-c .carte.retournee .dos{opacity:0} #yl-atelier .tapis-c .carte.retournee .face{opacity:1}
#yl-atelier .bx.feutre .f{background:#0F3D2A!important;filter:none}
/* la borne d'arcade : marquee rouge, ecran en mode attract */
#yl-atelier .ecran-b{width:0;height:0}
#yl-atelier .ecran-b .marquee{left:0;margin-left:-11vw;bottom:auto;top:-52vh;width:22vw;height:6vh;font-style:normal;text-align:center;line-height:6vh;font-size:3vh;letter-spacing:.3em;text-transform:uppercase;color:#FFF0C4;text-shadow:0 0 1vh #F2C14E}
#yl-atelier .ecran-b .attract{position:absolute;left:0;margin-left:-9vw;bottom:auto;top:-44vh;width:18vw;height:14vh;background:#050A08;box-shadow:inset 0 0 0 .5vh #2A2A2C,0 0 3vh rgba(57,162,107,.3);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8vh;color:#39A26B;text-align:center}
#yl-atelier .ecran-b .attract::before{content:"";position:absolute;left:-100%;top:0;bottom:0;width:60%;background:linear-gradient(90deg,transparent,rgba(57,162,107,.18),transparent);animation:ylattract 3.5s linear infinite}
#yl-atelier .ecran-b .attract b{font-weight:400;font-size:2vh;letter-spacing:.2em} #yl-atelier .ecran-b .attract i{font-style:normal;font-size:1.2vh;letter-spacing:.25em;text-transform:uppercase;animation:ylclig 1.2s steps(2) infinite} #yl-atelier .ecran-b .attract em{font-style:normal;font-size:1.1vh;letter-spacing:.2em;text-transform:uppercase;opacity:.5}
@keyframes ylattract{to{left:140%}} @keyframes ylclig{to{opacity:0}}
#yl-atelier .bx.borne-marquee .f{background:#C8102E!important} #yl-atelier .bx.borne-corps .f{background:#1E1F21!important}
/* le cabinet de curiosites */
#yl-atelier .etiquettes-c{left:calc(50% - 25vw);bottom:auto;top:12vh;width:50vw;height:4vh}
#yl-atelier .etiquettes-c span{position:absolute;top:0;width:4vw;margin-left:-2vw;text-align:center;font-size:1.6vh;letter-spacing:.2em;color:#B8860B;border-bottom:1px solid #B8860B}
#yl-atelier .bx.vitrine .f{background:#2B2622!important} #yl-atelier .bx.echiquier .f.de{background:repeating-conic-gradient(#1E1F21 0 25%,#E9E4DA 0 50%) 0 0/1.75vh 1.75vh!important;filter:none}
#yl-atelier .bx.de .f{background:#F2E7D5 radial-gradient(circle,#1E1F21 0 .35vh,transparent .4vh)!important;filter:none}
/* la console : grand ecran, pixels qui bougent */
#yl-atelier .ecran-c{width:0;height:0}
#yl-atelier .ecran-c .jeu-c{position:absolute;left:0;margin-left:-26vw;bottom:24vh;width:52vw;height:29vh;background:#050A08;box-shadow:0 0 0 .8vh #1E1F21,0 0 5vh rgba(74,123,209,.25);overflow:hidden}
#yl-atelier .ecran-c .pixel{position:absolute;width:3vh;height:3vh;background:#4A7BD1;animation:ylpix 6s ease-in-out infinite}
#yl-atelier .ecran-c .p1{left:20%;top:30%} #yl-atelier .ecran-c .p2{left:50%;top:55%;background:#F2C14E;animation-delay:-2s} #yl-atelier .ecran-c .p3{left:75%;top:25%;background:#C8102E;animation-delay:-4s}
@keyframes ylpix{0%,100%{transform:translate(0,0)}25%{transform:translate(6vh,3vh)}50%{transform:translate(-3vh,6vh)}75%{transform:translate(-6vh,-3vh)}}
#yl-atelier .ecran-c .jeu-c b{position:absolute;left:0;right:0;bottom:2vh;text-align:center;font-weight:300;font-size:1.4vh;letter-spacing:.3em;text-transform:uppercase;color:rgba(233,228,218,.45)}
#yl-atelier .bx.console-k .f{background:#E9E4DA!important;filter:none} #yl-atelier .bx.manette .f{background:#2A2A2C!important}
/* ---- la porte de sortie : une vitre, et derriere, le dehors ---- */
#yl-sortie{background:#0B0B0D}
#yl-sortie .vue-s{position:absolute;inset:0;overflow:hidden;background:#BFE3F5;transition:background 1s}

#yl-sortie .decor{position:absolute;inset:0}
#yl-sortie .decor i{position:absolute;display:block}

 

/* la ville : des tours en silhouette, des fenetres allumees la nuit */

/* la mer : l'horizon, trois vagues, un phare */

 

  
/* la montagne : trois plans */

  
  

/* la foret : des sapins en silhouette, de la brume */

/* la vitre et son montant ; le texte pose sur le verre */

#yl-sortie .fin{position:relative;z-index:2;background:rgba(11,11,13,.55);padding:3rem 2.4rem;border-radius:1.2rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#yl-sortie .yt-s{display:block;margin-top:1.6rem;font-size:.72rem;letter-spacing:.12em;color:rgba(233,228,218,.5);text-decoration:none;border-bottom:1px solid rgba(233,228,218,.25);padding-bottom:.2rem;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
#yl-sortie .yt-s:hover{color:#E9E4DA}

/* (aa) p35 : la gaine laisse voir les pieces, l'amphitheatre, la sortie fumee sous la pluie ou la neige, l'interrupteur de la porte */
#yl-asc .puits .niv i{animation:none}
#yl-asc .puits .niv .piece{position:absolute;left:calc(18% + 7vw);right:calc(18% + 7vw);top:8vh;bottom:8vh;overflow:hidden}
#yl-asc .puits .niv .piece .halo{position:absolute;left:50%;top:0;width:110%;height:100%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0,rgba(255,240,196,.5),rgba(255,240,196,.12) 45%,transparent 72%)}
#yl-asc .puits .niv .piece .s{position:absolute;top:auto;right:auto;height:auto;background-image:none;display:block;opacity:.92;border-radius:.4vh;box-shadow:inset 0 .5vh 0 rgba(255,255,255,.22),0 1vh 2vh rgba(0,0,0,.5)}
#yl-asc .puits .niv .piece .s.ray{background-image:repeating-linear-gradient(0deg,transparent 0 14%,rgba(0,0,0,.4) 14% 17%)}
#yl-asc .puits .niv b{top:10vh;font-size:34vh;color:rgba(255,255,255,.5);text-shadow:0 0 3vh rgba(0,0,0,.6);z-index:2}
#yl-asc .puits .niv span{z-index:2;text-shadow:0 0 2vh rgba(0,0,0,.7);color:rgba(255,255,255,.55)}
#yl-atelier .ecran-live{bottom:3vh}
#yl-atelier .rideaux .rid{height:70vh}

@keyframes ylneon{0%,100%{opacity:.85}47%{opacity:.85}50%{opacity:.12}54%{opacity:.85}}

#yl-sortie .auto{bottom:2.2%;left:-10vw;width:5vw;height:2vh;animation:ylauto var(--t,7s) linear infinite;animation-delay:var(--d,0s)}
#yl-sortie .auto .ph{top:0;width:1.4vh;height:1.4vh;border-radius:50%;background:#FFF6DC;box-shadow:0 0 2vh 1vh rgba(255,246,220,.55)}
#yl-sortie .auto .ph:first-child,#yl-sortie .auto .fx:first-child{left:0} #yl-sortie .auto .ph:last-child,#yl-sortie .auto .fx:last-child{right:0}
#yl-sortie .auto.r{bottom:5.2%;animation-name:ylautor} #yl-sortie .auto .fx{top:0;width:1vh;height:1vh;border-radius:.2vh;background:#FF2A2A;box-shadow:0 0 1.6vh .6vh rgba(255,42,42,.5)}
@keyframes ylauto{from{transform:translateX(0)}to{transform:translateX(125vw)}} @keyframes ylautor{from{transform:translateX(125vw)}to{transform:translateX(0)}}
#yl-sortie .a1{--t:6s;--d:-1s} #yl-sortie .a2{--t:9s;--d:-5s} #yl-sortie .a3{--t:7.5s;--d:-3s} #yl-sortie .r1{--t:8s;--d:-2s} #yl-sortie .r2{--t:6.5s;--d:-4.5s} 

#yl-sortie .p1{--t:16s;--d:-3s} #yl-sortie .p2{--t:21s;--d:-9s;animation-direction:reverse} #yl-sortie .p3{--t:13s;--d:-6s} 

#yl-entree .inter{position:absolute;right:40px;top:50%;margin-top:-22px;width:26px;height:44px;border-radius:4px;background:color-mix(in srgb,var(--encre) 8%,var(--fond));border:1px solid color-mix(in srgb,var(--encre) 30%,transparent);cursor:pointer;z-index:4;outline:0}
#yl-entree .inter:focus-visible{box-shadow:0 0 0 3px rgba(226,184,74,.35)}
#yl-entree .inter .lev{position:absolute;left:50%;top:50%;width:12px;height:16px;margin:-8px 0 0 -6px;border-radius:2px;background:var(--encre);opacity:.75;transform:translateY(-7px);transition:transform .25s}
#yl-entree .inter::before{content:attr(data-l);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:9px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--encre);opacity:.5;white-space:nowrap}
:root[data-theme="dark"] #yl-entree .inter .lev{transform:translateY(7px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #yl-entree .inter .lev{transform:translateY(7px)}}
:root[data-theme="dark"] #yl-atelier::after{content:"";position:absolute;inset:0;background:rgba(8,10,28,.42);mix-blend-mode:multiply;pointer-events:none;z-index:6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #yl-atelier::after{content:"";position:absolute;inset:0;background:rgba(8,10,28,.42);mix-blend-mode:multiply;pointer-events:none;z-index:6}}
@media (max-width:760px){ #yl-entree .inter{right:18px;width:22px;height:38px;margin-top:-19px} }
#yl-asc .puits .niv.clair b,#yl-asc .puits .niv.clair span{color:rgba(0,0,0,.42);text-shadow:none}
/* (ab) p37 : la sortie est la porte de l'entree, en sombre, un peu transparente ; il neige derriere */
#yl-sortie.x-porte{background:#05060C}
#yl-sortie.x-porte .vue-s{background:#07080F}

#yl-sortie.x-porte .bat-s{position:absolute;top:0;bottom:0;width:50%;background:rgba(14,14,18,.42)}
#yl-sortie.x-porte .bat-s.g{left:0;border-right:1px solid rgba(233,228,218,.28)} #yl-sortie.x-porte .bat-s.d{right:0}
#yl-sortie.x-porte .fin{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 1.5rem;max-width:44rem}

#yl-sortie.x-porte .fin{text-shadow:0 0 1.2rem rgba(5,6,12,.9),0 0 .3rem rgba(5,6,12,.9)}

/* (ac) p39 : la carte postale d'arrivee */
.yl-cp{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:color-mix(in srgb,var(--c) 55%,transparent);-webkit-backdrop-filter:blur(7px) saturate(.85);backdrop-filter:blur(7px) saturate(.85);opacity:1;transition:opacity 1.5s ease,-webkit-backdrop-filter 1.5s ease,backdrop-filter 1.5s ease}
body>.yl-cp{position:fixed;z-index:44}
.yl-cp b{font-weight:300;font-size:40vh;line-height:1;color:rgba(255,255,255,.5);letter-spacing:-.04em;text-shadow:0 0 3vh rgba(0,0,0,.5)}
.yl-cp span{margin-top:2vh;font-size:5vh;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55);text-shadow:0 0 2vh rgba(0,0,0,.6)}
.yl-cp.clair b,.yl-cp.clair span{color:rgba(0,0,0,.42);text-shadow:none}
.yl-cp.va{opacity:0;-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1)}
@media (prefers-reduced-motion:reduce){ .yl-cp{transition:opacity .6s} }

/* (ad) p40 : l'etage Sciences, la sortie en verre depoli, l'interrupteur a la taille de la poignee, la bibliotheque decollee du mur */
#yl-atelier.labo{background:#0B1320}
#yl-atelier.labo .mur{background:#13213A;box-shadow:inset 0 -6vh 0 #0F1A2E}
#yl-atelier.labo .plinthe{background:#0A101C}
#yl-atelier.labo .parquet{background:#1B2230 url(beton.jpg) 0 0/26vh;background-blend-mode:multiply}
#yl-atelier.labo .plaf{background:#0A1220;box-shadow:inset 0 -1vh 0 rgba(124,196,255,.15)}
#yl-atelier.labo .cloison{background:#111D33;box-shadow:inset -1vh 0 0 #0C1526,inset 0 -1.4vh 0 #0A101C}
#yl-atelier.labo .cloison.bout{background:#13213A;box-shadow:none}
#yl-atelier.labo figcaption{color:#E9E4DA}
#yl-atelier .sci-pend{width:56vw;height:64vh;margin-left:-28vw;bottom:12vh}
#yl-atelier .sci-pend .cv,#yl-atelier .sci-chl .cv,#yl-atelier .sci-ciel .cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;touch-action:none}
#yl-atelier .sci-pend .cv{cursor:grab}
#yl-atelier .sci-chl{width:34vw;height:34vw;max-width:52vh;max-height:52vh;margin-left:-17vw;bottom:24vh;background:#1A1F2A;box-shadow:0 0 0 .6vh #2A2F3A,0 1vh 3vh rgba(0,0,0,.5)}
@media (max-aspect-ratio:1/1){ #yl-atelier .sci-chl{width:60vw;height:60vw;margin-left:-30vw} }
#yl-atelier .sci-chl .freqs{position:absolute;left:-10vw;right:-10vw;top:100%;margin-top:2vh;display:flex;justify-content:center;gap:.8vw;flex-wrap:wrap}
#yl-atelier .sci-chl .freqs button{position:static;font-family:inherit;font-size:1.4vh;letter-spacing:.18em;color:#E9E4DA;background:rgba(233,228,218,.08);border:1px solid rgba(233,228,218,.35);border-radius:2vh;padding:.6vh 1vw;cursor:pointer;white-space:nowrap}
#yl-atelier .sci-chl .freqs button.on{background:#E9E4DA;color:#0B1320}
#yl-atelier .sci-ciel{width:70vw;height:44vh;margin-left:-35vw;bottom:22vh;background:#030611;box-shadow:0 0 0 1.2vh #1E1F21,0 2vh 5vh rgba(0,0,0,.5)}
#yl-atelier .sci-pend em,#yl-atelier .sci-chl em,#yl-atelier .sci-ciel em{position:absolute;left:50%;transform:translateX(-50%);top:100%;margin-top:4vh;font-style:normal;font-size:1.4vh;letter-spacing:.3em;text-transform:uppercase;color:rgba(233,228,218,.5);white-space:nowrap}
#yl-atelier .sci-chl em{margin-top:9vh}
#yl-atelier .sci-etag{width:40vw;height:0;margin-left:-20vw;bottom:52vh}
#yl-atelier .sci-etag .tab{left:0;right:0;top:0;height:1.4vh;background:#2A2F3A;box-shadow:0 .5vh 0 #1E1F21}
#yl-atelier .sci-etag .tab.t2{top:16vh}
#yl-atelier .sci-etag .fl{position:absolute;bottom:100%;width:2.2vw;height:7vh;margin-bottom:0;background:rgba(124,196,255,.28);border-radius:.4vw .4vw .2vw .2vw;box-shadow:inset 0 -2vh 0 rgba(124,196,255,.25)}
#yl-atelier .sci-etag .fl{left:4vw} #yl-atelier .sci-etag .fl.f2{left:9vw;height:9vh;background:rgba(242,193,78,.25)} #yl-atelier .sci-etag .fl.f3{left:26vw;height:5vh;width:3vw} #yl-atelier .sci-etag .fl.f4{left:32vw;height:8vh;background:rgba(124,196,255,.18)}
#yl-atelier .sci-etag .fl.f3,#yl-atelier .sci-etag .fl.f4{bottom:auto;top:-9vh}
#yl-sortie.x-porte .bat-s{background:rgba(14,14,18,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

#yl-entree .inter{right:18px;top:50%;width:10px;height:40px;margin-top:-20px;border-radius:2px;background:color-mix(in srgb,var(--encre) 10%,var(--fond));border:1px solid color-mix(in srgb,var(--encre) 45%,transparent);box-sizing:border-box}
#yl-entree .inter .lev{width:6px;height:12px;margin:-6px 0 0 -3px;border-radius:1px;transform:translateY(-8px)}
:root[data-theme="dark"] #yl-entree .inter .lev{transform:translateY(8px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #yl-entree .inter .lev{transform:translateY(8px)}}
#yl-entree .inter::before{top:50%;left:auto;right:100%;margin:-7px 18px 0 0;transform:none;line-height:14px;font-size:11px;letter-spacing:.34em;opacity:1;color:var(--encre)}
@media (max-width:760px){ #yl-entree .inter{right:18px;width:10px;height:40px;margin-top:-20px} }
#yl-atelier .biblio{transform-style:preserve-3d}
#yl-atelier .biblio .corps,#yl-atelier .biblio .socle,#yl-atelier .biblio .lampe{transform:translateZ(.5vh)}
#yl-atelier .biblio .echelle{transform:rotate(-7deg) translateZ(.8vh)}
/* (ae) p41 : les cadres du cabinet secret, accroches */
#yl-det.x .dcad.xi{left:calc(30% + var(--j) * 40%);top:42%}
#yl-det.x .dcad.xi .bord{padding:0;background:#241019;box-shadow:0 0 0 .8vh #B8860B,0 1.2vh 3vh rgba(0,0,0,.6)}
#yl-det.x .dcad.xi img{max-width:36vh;max-height:27vh}
#yl-det.x .dcad.xi figcaption{color:#E9E4DA}
/* (af) p42 : plus de faux reflets sur la cabine ; la neige de la sortie en calques composites (transform), sans flou de fond */
#yl-asc .cube .r{display:none}
#yl-sortie.x-porte .bat-s{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,14,18,.8)}

@keyframes ylneigeA{from{transform:rotate(5deg) translateY(-96vh)}to{transform:rotate(5deg) translateY(0)}}
@keyframes ylneigeB{from{transform:rotate(5deg) translateY(-99vh)}to{transform:rotate(5deg) translateY(0)}}
@keyframes ylneigeC{from{transform:rotate(5deg) translateY(-96vh)}to{transform:rotate(5deg) translateY(0)}}

/* (ag) p43 : un vrai sol et un vrai plafond dans la cabine */
#yl-asc .cube .v.solc{fill:#34363A;stroke:#5A5D61}
#yl-asc .cube .v.plafc{fill:#26282B;stroke:#3A3C3F}
#yl-asc .cube .lum{fill:#F3EFE1;opacity:.85}
#yl-asc .cube .seuil{fill:#A4A9AC;stroke:none}
#yl-asc .cube .l{display:none}
#yl-asc.cabine .cube{z-index:1}
/* piege : les classes sol et plaf existent deja pour la galerie (transform 3D) — d'ou solc et plafc */
/* (ah) p44 : les lettres monumentales a l'arrivee dans chaque piece */
#yl-atelier .mot-o{width:0;height:0;bottom:0}
#yl-atelier .mot-o .ombre-m{left:0;transform:translateX(-50%);bottom:-2vh;height:6vh;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.35),transparent 70%)}
#yl-atelier .mot3 .bx .f{box-shadow:inset 0 0 0 .15vh rgba(0,0,0,.12)}
#yl-atelier.jeux .mot3 .bx .f{box-shadow:0 0 1.2vh rgba(57,162,107,.55)}
#yl-atelier.labo .mot3 .bx .f{box-shadow:inset 0 0 0 .2vh rgba(255,255,255,.35)}
/* (ai) p45 : la piece en rond (Musique), les murs porteurs en beton cire, le son feutre */
#yl-atelier.carre .vue{perspective:200vh;cursor:grab;touch-action:pan-y}
#yl-atelier.carre.glisse .vue{cursor:grabbing}
#yl-atelier.carre .cloison{display:none}
#yl-atelier.carre .piste{transition:transform 1.9s cubic-bezier(.45,0,.18,1)}
#yl-atelier.carre.glisse .piste{transition:none}

#yl-asc .puits .niv .dalle{background:linear-gradient(100deg,rgba(255,255,255,.07),transparent 45%),linear-gradient(180deg,#3A3D42,#2B2E32 60%,#26292D);background-blend-mode:normal;box-shadow:inset 0 -1.3vh 0 #6B4A2B,inset 0 -1.7vh 0 #3A2A1C,0 1vh 3vh rgba(0,0,0,.5)}

/* (aj) p46 : le cube de 400 vw, le chiffre et le nom graves dans le mur nord */
#yl-atelier.carre .vue{perspective:260vh}

#yl-atelier.carre .grave-m{position:absolute;left:50%;bottom:6vh;width:300vw;transform:translateX(-50%);text-align:center;pointer-events:none}
#yl-atelier.carre .grave-m b{display:block;font-weight:300;font-size:44vh;line-height:1;letter-spacing:-.04em;color:rgba(0,0,0,.32);text-shadow:0 .35vh 0 rgba(255,255,255,.16),0 -.3vh .6vh rgba(0,0,0,.6)}
#yl-atelier.carre .grave-m span{display:block;margin-top:.5vh;font-size:8.5vh;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:rgba(0,0,0,.32);text-shadow:0 .25vh 0 rgba(255,255,255,.16),0 -.2vh .5vh rgba(0,0,0,.6)}
#yl-atelier.carre.arts .grave-m b,#yl-atelier.carre.arts .grave-m span,#yl-atelier.carre.kids .grave-m b,#yl-atelier.carre.kids .grave-m span{color:rgba(0,0,0,.22)}
/* le vrai cube : les murs montent aussi haut que la piece est large */
#yl-atelier.carre .mur{top:calc(72vh - 400vw);height:400vw;background-position:left bottom}
#yl-atelier.carre .grav .mur{transform:translateZ(0)}
/* (ak) p47 : la gravure du mur comme dans la gaine (chiffre 34vh sur 100vh -> ici a l'echelle du mur visible), l'accueil en colonne, le favicon */
#yl-atelier.carre .grave-m{bottom:2vh;width:390vw}
#yl-atelier.carre .grave-m b{font-size:88vh;line-height:1;letter-spacing:-.04em;color:rgba(0,0,0,.30);text-shadow:0 .5vh 0 rgba(255,255,255,.16),0 -.4vh .9vh rgba(0,0,0,.6)}
#yl-atelier.carre .grave-m span{margin-top:1vh;font-size:14vh;letter-spacing:.3em;text-indent:.3em;color:rgba(0,0,0,.30);text-shadow:0 .35vh 0 rgba(255,255,255,.16),0 -.3vh .7vh rgba(0,0,0,.6)}
#yl-atelier.carre.arts .grave-m b,#yl-atelier.carre.arts .grave-m span,#yl-atelier.carre.kids .grave-m b,#yl-atelier.carre.kids .grave-m span{color:rgba(0,0,0,.2)}
#yl-entree .judas{top:auto;bottom:calc(50% + 96px);margin-left:-11px}
#yl-entree .nom{top:auto;bottom:calc(50% + 62px);font-size:12px;letter-spacing:.42em;text-indent:.42em;line-height:16px;text-transform:none;opacity:.85}
#yl-entree .etages{top:auto;bottom:calc(50% + 20px)}
#yl-entree .etages::after{top:auto;bottom:100%;margin:0 0 8px}
#yl-entree .poignee{top:auto;bottom:calc(50% - 60px);margin-top:0}
#yl-entree .ent{top:auto;bottom:calc(50% - 47px);margin-top:0}
#yl-entree .inter{top:auto;bottom:calc(50% - 60px);margin-top:0}
@media (max-width:760px){ #yl-entree .judas{bottom:calc(50% + 92px)} #yl-entree .nom{bottom:calc(50% + 58px)} #yl-entree .etages{bottom:calc(50% + 16px)} #yl-entree .inter{bottom:calc(50% - 60px);margin-top:0} }
/* (al) p48 : la gravure a la taille de la gaine (chiffre 34 vh a l'ecran, nom 5 vh) vue de pres a l'arrivee ; l'accueil avec les etages a la verticale */
#yl-atelier.carre .grave-m{bottom:1vh;width:390vw}
#yl-atelier.carre .grave-m b{font-size:40vh;line-height:1;letter-spacing:-.04em;text-shadow:0 .3vh 0 rgba(255,255,255,.16),0 -.25vh .6vh rgba(0,0,0,.6)}
#yl-atelier.carre .grave-m span{margin-top:7vh;font-size:6vh;letter-spacing:.3em;text-indent:.3em;text-shadow:0 .2vh 0 rgba(255,255,255,.16),0 -.2vh .5vh rgba(0,0,0,.6)}
#yl-atelier.carre .piste{transition:transform 2.4s cubic-bezier(.4,0,.2,1)}
#yl-entree .etages{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%);flex-direction:column;gap:6px;align-items:center}
#yl-entree .etages::after{top:50%;bottom:auto;left:100%;margin:-6px 0 0 16px;transform:none}
#yl-entree .judas{bottom:calc(50% + 160px)}
#yl-entree .nom{top:50%;bottom:auto;left:auto;right:calc(50% + 34px);width:auto;margin-top:-8px;text-align:right}
#yl-entree .poignee{bottom:auto;top:calc(50% + 158px)}
#yl-entree .ent{bottom:auto;top:calc(50% + 171px)}
#yl-entree .inter{bottom:auto;top:calc(50% + 158px)}
@media (max-width:760px){ #yl-entree .etages{gap:5px} #yl-entree .judas{bottom:calc(50% + 156px)} #yl-entree .nom{right:calc(50% + 30px)} #yl-entree .poignee,#yl-entree .inter{top:calc(50% + 154px)} #yl-entree .ent{top:calc(50% + 167px)} }
/* les chiffres nus, pile sur la ligne mediane ; le nom de l'etage seulement au survol */
#yl-entree .etages button{position:relative;border:0;box-shadow:none;background:var(--fond);width:auto;height:22px;line-height:22px;padding:0 9px;font-size:15px;opacity:.7}
#yl-entree .etages button.ici,#yl-entree .etages button.non,#yl-entree .etages button.moi{border:0;box-shadow:none}
#yl-entree .etages button::after{content:attr(data-t);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:16px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;color:var(--encre);opacity:0;transition:opacity .25s;pointer-events:none}
#yl-entree .etages button:hover::after,#yl-entree .etages button:focus-visible::after{opacity:.75}
#yl-entree .etages{gap:4px}
@media (max-width:760px){ #yl-entree .etages{gap:3px} #yl-entree .etages button{width:auto;height:22px;line-height:22px} }
/* (am) p49 : le judas est le curseur et le marqueur de l'etage choisi ; chiffres plus gros, poignee et interrupteur de part et d'autre ; la cabine reprend la meme colonne */
#yl-entree .etages{gap:2px}
#yl-entree .etages button{height:30px;line-height:30px;padding:0 12px;font-size:22px;opacity:.55;transition:opacity .25s,color .3s}
#yl-entree .etages button:hover,#yl-entree .etages button.ici{opacity:1}
#yl-entree .etages button::after{margin-left:26px}
#yl-entree .judas{bottom:calc(50% + 190px)}
#yl-entree .nom{top:auto;bottom:calc(50% + 178px);left:0;right:0;margin:0;text-align:center;width:auto}
#yl-entree .poignee{top:50%;bottom:auto;margin-top:-20px;left:64px;right:auto}
#yl-entree .ent{top:50%;bottom:auto;margin-top:-7px;left:80px;right:auto}
#yl-entree .inter{top:50%;bottom:auto;margin-top:-20px;right:64px;left:auto}
#yl-entree .inter::before{right:100%;left:auto;margin:-7px 18px 0 0}
@media (max-width:760px){ #yl-entree .etages button{height:26px;line-height:26px;font-size:19px} #yl-entree .judas{bottom:calc(50% + 172px)} #yl-entree .nom{bottom:calc(50% + 160px)} #yl-entree .poignee,#yl-entree .inter{top:50%;margin-top:-20px} #yl-entree .ent{top:50%;margin-top:-7px;left:70px} #yl-entree .poignee{left:54px} #yl-entree .inter{right:54px} }
/* le curseur : la souris disparait sur la porte, le judas la suit */
#yl-entree.curseur{cursor:none}
#yl-entree.curseur *{cursor:none!important}
#yl-entree.curseur .judas{left:0;top:0;bottom:auto;margin:-13px 0 0 -13px;width:26px;height:26px;transition:width .25s,height .25s,margin .25s,background-color .3s;will-change:transform;z-index:6}
#yl-entree.curseur .judas.pose{width:34px;height:34px;margin:-17px 0 0 -17px;background:transparent}
#yl-entree.curseur .judas.pose .oeil{opacity:0}
#yl-entree.curseur .judas.sur{width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--fond)}
#yl-entree.curseur .judas.sur .oeil{opacity:0}

/* la cabine : la meme colonne de chiffres nus, le nom au survol, l'etage courant cercle */
#yl-asc.cabine .pan ul{background:rgba(18,19,21,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px 10px;gap:0;align-items:center;border-radius:34px}
#yl-asc.cabine .pan li{flex-direction:row;justify-content:center;position:relative;gap:0;transform:none;width:auto}
#yl-asc.cabine .pan .bt{width:auto;min-width:44px;height:34px;text-shadow:0 1px 3px rgba(0,0,0,.5);padding:0 12px;border-radius:0;font-size:22px;background:none!important;box-shadow:none!important;color:#F3F1EC;opacity:.6;transition:opacity .25s,color .3s;position:relative}
#yl-asc.cabine .pan .bt:hover,#yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on{opacity:1}
#yl-asc.cabine .pan .bt.ici::before,#yl-asc.cabine .pan .bt.on::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.3px solid var(--rouge,#E5142C);box-sizing:border-box}
#yl-asc.cabine .pan .bt[data-ok="0"].on::before{border-color:#E0192F}
#yl-asc.cabine .pan .bt.sortie-m{opacity:.7}
#yl-asc.cabine .pan li span{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:14px;min-width:0;opacity:0;transition:opacity .25s;pointer-events:none;text-align:left}
#yl-asc.cabine .pan li:hover span{opacity:.85}
#yl-asc.cabine .pan li.et0{flex-wrap:nowrap}
#yl-asc.cabine .pan .murs{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin:0 0 0 14px;width:auto;flex-wrap:nowrap}
#yl-asc.cabine .pan li.so{margin-top:8px}
@media (max-width:560px){ #yl-asc.cabine .pan .bt{height:30px;font-size:19px} #yl-asc.cabine .pan .bt.ici::before,#yl-asc.cabine .pan .bt.on::before{width:30px;height:30px;margin:-15px 0 0 -15px} }
/* (an) p50 : l'arrivee au cadrage de la gaine ; chiffres plus gros, entoures de rien ; le disque rouge porte le symbole de l'etage choisi (accueil et cabine) */
#yl-atelier.carre .grave-m{bottom:18.8vh}
#yl-atelier.carre .grave-m b{font-size:40vh;line-height:1}
#yl-atelier.carre .grave-m span{margin-top:50vh;font-size:5.9vh;letter-spacing:.3em;text-indent:.3em}
#yl-atelier.carre.arrivee .piste{transition:none}
#yl-entree .etages{gap:0}
#yl-entree .etages button{height:36px;line-height:36px;padding:0 14px;font-size:28px}
#yl-entree .etages button::after{left:auto;right:100%;margin:0 26px 0 0}
#yl-entree .judas{bottom:calc(50% + 214px)}
#yl-entree .nom{bottom:calc(50% + 202px)}
#yl-entree.curseur .judas{pointer-events:none;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--rouge);border:0;box-shadow:none}
#yl-entree.curseur .judas .oeil,#yl-entree.curseur .judas .lentille{display:none}
#yl-entree.curseur .judas.sur{width:32px;height:32px;margin:-16px 0 0 -16px;background:var(--rouge)}
#yl-entree.curseur .judas.pose{width:32px;height:32px;margin:-16px 0 0 -16px;background:var(--rouge)}

#yl-entree .etages button.ici{color:var(--encre)}
#yl-entree .etages button.moi{color:var(--encre)}
@media (max-width:760px){ #yl-entree .etages button{height:32px;line-height:32px;font-size:24px} #yl-entree .judas{bottom:calc(50% + 196px)} #yl-entree .nom{bottom:calc(50% + 184px)} }
#yl-asc.cabine .pan .bt{height:40px;font-size:28px;padding:0 14px}
#yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on{color:#F3F1EC}
#yl-asc.cabine .pan .bt.ici::before,#yl-asc.cabine .pan .bt.on::before{display:none}
#yl-asc.cabine .pan .bt[data-ok="0"].on{color:#FF6B7A}
#yl-asc.cabine .pan li .disque{display:none;position:absolute;right:100%;top:50%;width:32px;height:32px;margin:-16px 14px 0 0;border-radius:50%;background:var(--rouge,#C8102E);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
#yl-asc.cabine .pan li .disque svg{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px}
#yl-asc.cabine .pan li.ici .disque{display:block}
#yl-asc.cabine .pan li.et0 span{display:none}
@media (max-width:560px){ #yl-asc.cabine .pan .bt{height:34px;font-size:24px} }
#yl-asc.cabine .pan .bt:hover,#yl-asc.cabine .pan .bt:active,#yl-asc.cabine .pan .bt:focus{background:none!important;box-shadow:none!important;transform:none}
/* (ao) p51 : pile en face a l'arrivee ; le disque accroche aux chiffres, la souris redevient une souris ; plus de pastille dans la cabine */
#yl-atelier.carre .vue{transition:perspective-origin 2.4s cubic-bezier(.4,0,.2,1)}
#yl-atelier.carre.arrivee .vue{perspective-origin:50% 100%}
#yl-entree.curseur{cursor:pointer}
#yl-entree.curseur *{cursor:pointer!important}
#yl-entree.curseur .judas{transition:width .25s,height .25s,margin .25s}
#yl-asc.cabine .pan ul{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
#yl-asc.cabine .pan .bt{text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.55)}
#yl-asc.cabine .pan li:hover .disque{display:block}
#yl-asc.cabine .pan ul:hover li.ici:not(:hover) .disque{display:none}
#yl-asc.cabine .pan li.so .bt{text-shadow:none}
#yl-asc.cabine .pan li,#yl-asc.cabine .pan li.ici,#yl-asc.cabine .pan{background:none!important;box-shadow:none!important;border:0}
#yl-asc.cabine .pan .bt{text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.7),0 0 16px rgba(0,0,0,.5)}
/* (ap) p52 : plus de disque ; chiffres nus et plus gros ; le chiffre choisi est rouge, plus gros, et bascule vers l'icone de sa thematique */
#yl-entree .etages{gap:0}
#yl-entree .etages button{position:relative;height:44px;line-height:44px;padding:0 16px;font-size:34px;opacity:.5;color:var(--encre);transform-style:preserve-3d;transition:font-size .35s,color .35s,opacity .35s}
#yl-entree .etages button:hover{opacity:.85}
#yl-entree .etages button.ici{color:var(--rouge);font-size:50px;opacity:1}
#yl-entree .etages button.moi{color:#B8860B;opacity:.8}
#yl-entree .etages button.non{color:#A0141F;opacity:1}
#yl-entree .etages button b{display:block;font-weight:inherit}
#yl-entree .etages button i,#yl-asc.cabine .pan .bt i{position:absolute;left:50%;top:50%;width:.8em;height:.8em;margin:-.4em 0 0 -.4em;opacity:0;pointer-events:none}
#yl-entree .etages button i svg,#yl-asc.cabine .pan .bt i svg{display:block;width:100%;height:100%}
#yl-entree .etages button::after{right:100%;margin:0 30px 0 0}
#yl-entree .judas{bottom:calc(50% + 258px)}
#yl-entree .nom{bottom:calc(50% + 228px)}
@keyframes ylbasc{0%{transform:rotateX(0)}18%{transform:rotateX(90deg)}19%{transform:rotateX(-90deg)}36%{transform:rotateX(0)}72%{transform:rotateX(0)}82%{transform:rotateX(90deg)}83%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
@keyframes ylbascN{0%,18%{opacity:1}19%,82%{opacity:0}83%,100%{opacity:1}}
@keyframes ylbascI{0%,18%{opacity:0}19%,82%{opacity:1}83%,100%{opacity:0}}
#yl-entree .etages button.flip,#yl-asc.cabine .pan .bt.flip{animation:ylbasc 2.4s cubic-bezier(.4,0,.2,1) both}
#yl-entree .etages button.flip b,#yl-asc.cabine .pan .bt.flip b{animation:ylbascN 2.4s both}
#yl-entree .etages button.flip i,#yl-asc.cabine .pan .bt.flip i{animation:ylbascI 2.4s both}
@media (max-width:760px){ #yl-entree .etages button{height:36px;line-height:36px;font-size:28px} #yl-entree .etages button.ici{font-size:40px} #yl-entree .judas{bottom:calc(50% + 218px)} #yl-entree .nom{bottom:calc(50% + 190px)} }
#yl-asc.cabine .pan li .disque{display:none!important}
#yl-asc.cabine .pan .bt{height:44px;font-size:34px;padding:0 16px;color:#F3F1EC;opacity:.55;transform-style:preserve-3d;transition:font-size .35s,color .35s,opacity .35s}
#yl-asc.cabine .pan .bt b{display:block;font-weight:inherit}
#yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on{color:var(--rouge,#E5142C);font-size:50px;opacity:1}
#yl-asc.cabine .pan .bt[data-ok="0"].on{color:#FF6B7A}
#yl-asc.cabine .pan li span{left:auto;right:100%;margin:0 30px 0 0}
@media (max-width:560px){ #yl-asc.cabine .pan .bt{height:36px;font-size:28px} #yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on{font-size:40px} }
/* (aq) p53 : un seul chiffre grave, aux deux tiers du mur visible ; le mot ne figure plus sur le mur */
#yl-atelier.carre .grave-m{bottom:0}
#yl-atelier.carre .grave-m b{font-size:118vh;line-height:1;letter-spacing:-.02em}
#yl-atelier.carre .grave-m span{display:none}
#yl-atelier.carre .grave-m{bottom:2vh}
#yl-atelier.carre .grave-m b{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
/* (ar) p54 : rien derriere les chiffres, plus de judas sur l'accueil, effet Dock au survol ; la gaine montre le meme chiffre seul que le mur */
#yl-entree .judas{display:none}
#yl-entree .etages button{background:transparent;outline:0;transform-origin:50% 50%;transition:transform .12s linear,color .25s,opacity .25s,font-size .35s;will-change:transform}
#yl-entree .etages button:focus,#yl-entree .etages button:focus-visible{outline:0;box-shadow:none}
#yl-entree .etages button.chaud{color:var(--rouge);opacity:1}
#yl-asc.cabine .pan .bt{transform-origin:50% 50%;transition:transform .12s linear,color .25s,opacity .25s,font-size .35s;will-change:transform;outline:0}
#yl-asc.cabine .pan .bt.chaud{color:var(--rouge,#E5142C);opacity:1}
#yl-asc .puits .niv b{top:auto;bottom:6vh;font-size:86vh;line-height:1;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;letter-spacing:-.02em}
#yl-asc .puits .niv span{display:none}
/* (as) p55 : YouLab est la poignee ; plus de plaque en haut ; plus de bascule ; dans la cabine, des cercles a contour dore */
#yl-entree .nom,#yl-verre .nom{display:none}
#yl-entree .ent{font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-size:22px;letter-spacing:.22em;text-transform:none;line-height:24px;margin-top:-12px;opacity:1}
#yl-entree .etages button i,#yl-asc.cabine .pan .bt i{display:none}
#yl-asc.cabine .pan ul{gap:8px}
#yl-asc.cabine .pan .bt{width:46px;min-width:0;height:46px;padding:0;border-radius:50%;font-size:24px;line-height:46px;opacity:1;color:#F3F1EC;background:rgba(18,19,21,.28)!important;box-shadow:inset 0 0 0 1.2px rgba(242,193,78,.55)!important;text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#yl-asc.cabine .pan .bt:hover,#yl-asc.cabine .pan .bt.chaud{box-shadow:none!important;background:none!important}
#yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on{font-size:28px;color:var(--rouge,#E5142C);box-shadow:none!important}
#yl-asc.cabine .pan .bt b{line-height:inherit}
#yl-asc.cabine .pan li.so .bt{font-size:15px}
@media (max-width:560px){ #yl-asc.cabine .pan .bt{width:40px;height:40px;line-height:40px;font-size:20px} #yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on{font-size:24px} }
/* (at) p56 : la porte de sortie reprend la colonne d'etages de l'entree, et « Revenir a l'entree » a la poignee ; les flocons restent */
#yl-sortie.x-porte .etages{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:0;z-index:4}
#yl-sortie.x-porte .etages button{position:relative;height:44px;line-height:44px;padding:0 16px;border:0;background:transparent;outline:0;cursor:pointer;font-family:inherit;font-weight:300;font-size:34px;color:#E9E4DA;opacity:.5;transform-origin:50% 50%;transition:transform .12s linear,color .25s,opacity .25s,font-size .35s;will-change:transform}
#yl-sortie.x-porte .etages button b{display:block;font-weight:inherit} #yl-sortie.x-porte .etages button i{display:none}
#yl-sortie.x-porte .etages button:hover{opacity:.85}
#yl-sortie.x-porte .etages button.ici{color:var(--rouge,#E5142C);font-size:50px;opacity:1}
#yl-sortie.x-porte .etages button.chaud{color:var(--rouge,#E5142C);opacity:1}
#yl-sortie.x-porte .etages button::after{content:attr(data-t);position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:30px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;color:#E9E4DA;opacity:0;transition:opacity .25s;pointer-events:none}
#yl-sortie.x-porte .etages button:hover::after{opacity:.75}
#yl-sortie.x-porte .poignee-s{position:absolute;left:64px;top:50%;width:2px;height:40px;margin-top:-20px;background:#E9E4DA;cursor:pointer;z-index:4}
#yl-sortie.x-porte .ent-s{position:absolute;left:80px;top:50%;margin-top:-7px;line-height:14px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#E9E4DA;cursor:pointer;z-index:4;white-space:nowrap}
#yl-sortie.x-porte .bat-s.d{pointer-events:none} #yl-sortie.x-porte .bat-s.d .poignee-s,#yl-sortie.x-porte .bat-s.d .ent-s{pointer-events:auto}
#yl-sortie.x-porte .fin{position:absolute;left:0;right:0;top:auto;bottom:5vh;transform:none;margin:0 auto;text-align:center;z-index:4}
#yl-sortie.x-porte .fin b{font-size:clamp(16px,2vw,22px)} #yl-sortie.x-porte .fin p{font-size:13px;opacity:.75;max-width:34rem;margin:.5rem auto .8rem}

@media (max-width:760px){ #yl-sortie.x-porte .etages button{height:36px;line-height:36px;font-size:28px} #yl-sortie.x-porte .etages button.ici{font-size:40px} #yl-sortie.x-porte .poignee-s{left:54px} #yl-sortie.x-porte .ent-s{left:70px} }
/* cabine : cercles gardes, plus de jaune : aucun contour, sauf le chiffre survole cercle de rouge */
#yl-asc.cabine .pan .bt{box-shadow:none!important}
#yl-asc.cabine .pan .bt:hover,#yl-asc.cabine .pan .bt.chaud{box-shadow:inset 0 0 0 1.5px var(--rouge,#E5142C)!important;background:rgba(18,19,21,.4)!important}
#yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on{box-shadow:none!important}
#yl-asc.cabine .pan .bt.ici:hover,#yl-asc.cabine .pan .bt.ici.chaud{box-shadow:inset 0 0 0 1.5px var(--rouge,#E5142C)!important}
/* p56 : plus d'effet Dock ; le chiffre survole passe simplement en rouge */
#yl-entree .etages button:hover,#yl-sortie.x-porte .etages button:hover{color:var(--rouge,#E5142C);opacity:1;transform:none}
#yl-asc.cabine .pan .bt:hover{color:var(--rouge,#E5142C);transform:none}
/* p56 : l'interrupteur cede sa place au mot « Entree » (a gauche), « YouLab » a la poignee (a droite) ; a la sortie, « Sortie » a gauche */
#yl-entree .inter{display:none}
#yl-entree .ent2{position:absolute;right:64px;top:50%;margin-top:-7px;line-height:14px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--encre);white-space:nowrap;pointer-events:none}

@media (max-width:760px){ #yl-entree .ent2{right:54px} }
/* (au) p57 : poignee et libelle a gauche ; en face de chaque chiffre, la thematique ecrite a la meme taille */
#yl-entree .ent2{display:none}
#yl-entree .poignee,#yl-sortie.x-porte .poignee-s{left:auto;right:calc(100% + 64px)}
#yl-entree .ent,#yl-sortie.x-porte .ent-s{left:auto;right:calc(100% + 80px);text-align:right}
#yl-entree .etages button::after,#yl-sortie.x-porte .etages button::after{content:attr(data-t);right:auto;left:100%;margin:0 0 0 22px;top:50%;transform:translateY(-50%);font-size:inherit;letter-spacing:.04em;text-transform:none;line-height:1;color:inherit;opacity:1;transition:none}
#yl-entree .etages button:hover::after,#yl-sortie.x-porte .etages button:hover::after{opacity:1}
#yl-entree .etages button{padding:0 14px}
#yl-asc.cabine .pan li span{display:none}
@media (max-width:760px){ #yl-entree .poignee,#yl-sortie.x-porte .poignee-s{right:calc(100% + 40px)} #yl-entree .ent,#yl-sortie.x-porte .ent-s{right:calc(100% + 54px);font-size:18px} #yl-entree .etages button::after,#yl-sortie.x-porte .etages button::after{margin-left:16px} }
/* le chiffre a gauche de la ligne mediane, la thematique a droite */
#yl-entree .etages,#yl-sortie.x-porte .etages{transform:translate(-100%,-50%);align-items:flex-end}
#yl-entree .etages button,#yl-sortie.x-porte .etages button{padding:0 10px 0 14px}
#yl-entree .etages button::after,#yl-sortie.x-porte .etages button::after{margin-left:20px}
/* la meme taille de chiffres partout : 34 px, le choisi a 50 px (cabine comprise) */
#yl-asc.cabine .pan ul{gap:2px}
#yl-asc.cabine .pan .bt{width:60px;height:60px;line-height:60px;font-size:34px}
#yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on{font-size:50px}
#yl-asc.cabine .pan li.so .bt{font-size:18px}
@media (max-width:560px){ #yl-asc.cabine .pan ul{gap:0} #yl-asc.cabine .pan .bt{width:44px;height:44px;line-height:44px;font-size:28px} #yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on{font-size:40px} }
#yl-asc.cabine .pan ul{gap:0}
#yl-asc.cabine .pan .bt{width:48px;height:48px;line-height:48px;font-size:34px}
#yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on{font-size:46px}
#yl-asc.cabine .pan li.so{margin-top:2px}
/* (av) p58 : la cabine reprend le tableau de l'accueil (chiffre a gauche de la ligne, thematique a droite) ; dans les pieces, le neon cede la place au nom grave en rouge au-dessus du chiffre */
#yl-asc.cabine .pan{transform:translate(-100%,-50%)}
#yl-asc.cabine .pan ul{align-items:flex-end}
#yl-asc.cabine .pan li{justify-content:flex-end}
#yl-asc.cabine .pan .bt{width:auto;min-width:0;height:44px;line-height:44px;padding:0 10px 0 14px;border-radius:0;font-size:34px;background:none!important;box-shadow:none!important;opacity:.55;text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 10px rgba(0,0,0,.5)}
#yl-asc.cabine .pan .bt:hover,#yl-asc.cabine .pan .bt.chaud{opacity:1;color:var(--rouge,#E5142C);box-shadow:none!important;background:none!important}
#yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on{font-size:50px;opacity:1}
#yl-asc.cabine .pan .bt::after{content:attr(data-t);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:20px;font-size:inherit;letter-spacing:.04em;line-height:1;white-space:nowrap;color:inherit;pointer-events:none;text-shadow:inherit}
#yl-asc.cabine .pan .bt.sortie-m::after{content:none}
#yl-asc.cabine .pan li.so .bt{font-size:18px;height:44px;line-height:44px}
#yl-asc.cabine .pan li.so .bt svg{width:22px;height:22px;vertical-align:middle}
#yl-asc.cabine .pan .murs{left:100%;margin-left:20px}
@media (max-width:560px){ #yl-asc.cabine .pan .bt{height:36px;line-height:36px;font-size:28px} #yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on{font-size:40px} }
body.atelier #yl-logo{display:none}
#yl-atelier.carre .grave-m{display:flex;flex-direction:column-reverse;align-items:center;bottom:0}
#yl-atelier.carre .grave-m span{display:block;margin:0 0 -15vh;font-size:7vh;letter-spacing:.06em;text-indent:0;text-transform:none;color:rgba(200,16,46,.86);text-shadow:0 .2vh 0 rgba(255,255,255,.14),0 -.2vh .5vh rgba(0,0,0,.55)}
#yl-atelier.carre.arts .grave-m span,#yl-atelier.carre.kids .grave-m span{color:rgba(200,16,46,.8)}
/* (aw) p59 : dans la galerie photo, le 0 grave aux deux tiers du mur d'arrivee et « Photo » en rouge au-dessus ; le neon s'efface */
#salle .grave-g{position:absolute;left:-50vw;width:100vw;top:calc(var(--Hm)/-2);height:var(--Hm);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateZ(4px);pointer-events:none;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-weight:300}
#salle .grave-g b{display:block;font-weight:300;font-size:calc(var(--Hm)*.7);line-height:1;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;letter-spacing:-.02em;color:rgba(0,0,0,.2);text-shadow:0 .35vh 0 rgba(255,255,255,.28),0 -.3vh .7vh rgba(0,0,0,.45)}
#salle .grave-g span{display:block;margin-bottom:calc(var(--Hm)*-.06);font-size:calc(var(--Hm)*.075);letter-spacing:.06em;color:rgba(200,16,46,.8);text-shadow:0 .2vh 0 rgba(255,255,255,.2),0 -.2vh .5vh rgba(0,0,0,.45)}
:root[data-theme="dark"] #salle .grave-g b{color:rgba(0,0,0,.34);text-shadow:0 .35vh 0 rgba(255,255,255,.1),0 -.3vh .7vh rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) #salle .grave-g b{color:rgba(0,0,0,.34);text-shadow:0 .35vh 0 rgba(255,255,255,.1),0 -.3vh .7vh rgba(0,0,0,.6)} }
#salle .face.mur.m0 .station .tableau{transform:translateZ(9px)}
#salle .face.mur.m0 .station .cartel,#salle .face.mur.m0 .station .legende{transform:translateZ(9px)}
body:not(.atelier):not(.dehors) #yl-logo{display:none}
/* survoler le mot colore aussi le chiffre (le mot fait partie du bouton) */
#yl-entree .etages button::after,#yl-sortie.x-porte .etages button::after,#yl-asc.cabine .pan .bt::after{pointer-events:auto;cursor:pointer}
/* (ax) p60 : cabine aux vitres depolies noires ; icones cachees dans l'ascenseur ; l'horloge du haut s'efface, la boussole est une horloge au repos */
#yl-asc.cabine .front::after{content:"";position:absolute;inset:0;background:rgba(8,8,10,.62);-webkit-backdrop-filter:blur(7px) saturate(.7);backdrop-filter:blur(7px) saturate(.7);pointer-events:none;z-index:2}
#yl-asc.cabine .cube .v:not(.solc):not(.plafc){fill:rgba(10,10,12,.8);stroke:#3A3C3F}
#yl-asc.cabine .pan{z-index:4}
#yl-asc.cabine .pan .bt{opacity:.7;text-shadow:none}
#yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on,#yl-asc.cabine .pan .bt:hover{opacity:1}
body:has(#yl-asc.on) #nuit,body:has(#yl-asc.on) #cadre,body:has(#yl-asc.on) #quoi,body:has(#yl-asc.on) #yl-son,body:has(#yl-asc.on) #env,body:has(#yl-asc.on) #arch,body:has(#yl-asc.on) #yl-mini,body:has(#yl-asc.on) #yl-mob-b,body:has(#yl-asc.on) #yl-ascb,body:has(#yl-asc.on) #langs,body:has(#yl-asc.on) #yl-rose{opacity:0!important;pointer-events:none!important;transition:opacity .4s}

#yl-rose .hlg{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;transition:opacity .35s}
#yl-rose .hlg svg{display:block;width:100%;height:100%}
#yl-rose .hlg .cad{fill:var(--fond);stroke:var(--encre);stroke-width:1}
#yl-rose .hlg .pt{fill:var(--encre);opacity:.6}
#yl-rose .hlg .ah,#yl-rose .hlg .am{stroke:var(--encre);stroke-width:1.4;stroke-linecap:round}
#yl-rose .hlg .am{stroke-width:1}
#yl-rose .hlg .ax{fill:var(--rouge)}
#yl-rose .br,#yl-rose #banc svg{opacity:0;transition:opacity .35s}
#yl-rose .br{pointer-events:none}
#yl-rose:hover .hlg,#yl-rose:focus-within .hlg{opacity:0}
#yl-rose:hover .br,#yl-rose:focus-within .br{opacity:.7;pointer-events:auto}
#yl-rose:hover .br.ici,#yl-rose:focus-within .br.ici{opacity:1}
#yl-rose:hover #banc svg,#yl-rose:focus-within #banc svg{opacity:1}
#yl-rose:not(:hover):not(:focus-within) .br{opacity:0!important;pointer-events:none!important}
#yl-rose:not(:hover):not(:focus-within) #banc svg{opacity:0!important}
#yl-rose .hlg .ah,#yl-rose .hlg .am{stroke:var(--encre)!important;stroke-width:1.6!important;fill:none!important;opacity:1!important}
#yl-rose .hlg .am{stroke-width:1.1!important}
#yl-rose .hlg .cad{fill:var(--fond)!important;stroke:var(--encre)!important;opacity:1!important}
/* (ay) p61 : plus rien de grave sur les murs ; plus de boussole ni d'horloge ; l'etage courant en bas au centre, comme sur l'accueil */
#yl-atelier.carre .grave-m,#salle .grave-g,#yl-rose{display:none!important}
#yl-etage{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9;display:flex;align-items:baseline;gap:20px;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-weight:300;font-size:34px;line-height:1;letter-spacing:.04em;color:var(--encre);pointer-events:none;transition:opacity .5s;white-space:nowrap}
#yl-etage b{font-weight:300;color:var(--rouge);font-variant-numeric:lining-nums}
body.atelier #yl-etage,body.studio #yl-etage{color:#F3F1EC;text-shadow:0 1px 3px rgba(0,0,0,.5)}
body.atelier.studio #yl-etage{color:#F3F1EC}
body.atelier:not(.studio) #yl-etage{color:#2B2A28;text-shadow:none}
body.dehors #yl-etage,body.vitre #yl-etage,body.mosaique #yl-etage,body:has(#yl-asc.on) #yl-etage,body:has(#yl-sortie) #yl-etage{opacity:0}
@media (max-width:760px){ #yl-etage{font-size:26px;gap:14px} }
#yl-etage{z-index:60}
#yl-atelier.carre .seg.grav .mur{transform:translateZ(-.6vh)}
/* (az) p62 : l'etage aligne sur la ligne des icones et des langues, plus petit ; un fil relie toute la ligne */
#yl-etage{bottom:calc(27px + env(safe-area-inset-bottom,0px));height:30px;line-height:30px;font-size:20px;gap:12px;align-items:center}
#yl-etage b{font-size:22px}
.fil-b{position:fixed;bottom:calc(42px + env(safe-area-inset-bottom,0px));height:1px;background:var(--encre);opacity:.28;z-index:8;pointer-events:none;transition:opacity .5s}
body.atelier.studio .fil-b{background:#F3F1EC}
body.dehors .fil-b,body.vitre .fil-b,body.mosaique .fil-b,body:has(#yl-asc.on) .fil-b,body:has(#yl-sortie) .fil-b{opacity:0}
@media (max-width:760px){ #yl-etage{font-size:16px;gap:8px} #yl-etage b{font-size:18px} .fil-b{display:none} }
.fil-b{z-index:59}
/* (ba) p63 : accueil aux seuls chiffres (nom au survol), « Creations » en rouge a droite ; plus de chiffres a la sortie ; le fil s'arrete avant les groupes */
#yl-entree .etages{transform:translate(-50%,-50%);align-items:center}
#yl-entree .etages button{padding:0 14px}
#yl-entree .etages button::after{opacity:0;transition:opacity .3s;font-size:16px;letter-spacing:.2em;text-transform:uppercase;margin-left:26px;color:var(--encre)}
#yl-entree .etages button:hover::after{opacity:.6}
#yl-entree .etages button.ici::after{color:var(--rouge)}
#yl-entree .ent2{display:block;right:auto;left:64px;margin-top:-12px;line-height:24px;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-size:22px;letter-spacing:.22em;text-transform:none;color:var(--rouge);pointer-events:none}
#yl-entree .battant.g .ent2{left:auto;right:auto}
#yl-entree .battant.d .ent2{left:64px}
@media (max-width:760px){ #yl-entree .ent2{left:54px;font-size:18px} }
#yl-entree .ent2{position:absolute;left:64px;top:50%;right:auto}
/* (bb) p64 : cabine centree ; gaine plus propre ; accueil sans texte au survol, deuxieme poignee ; sortie epuree */
#yl-asc.cabine .pan{transform:translate(-50%,-50%)}
#yl-asc.cabine .pan ul{align-items:center}
#yl-asc .puits .niv{filter:blur(.8px) saturate(.9)}
#yl-asc .puits .niv .piece{display:none}
#yl-asc .puits .niv::before{background:none}
#yl-asc .puits .niv .dalle::after{content:"";position:absolute;left:0;right:0;top:100%;height:9vh;background:linear-gradient(180deg,rgba(255,240,205,.22),rgba(255,240,205,0))}
#yl-asc .puits .niv b{top:auto;bottom:12vh;font-size:66vh;color:rgba(255,255,255,.42);text-shadow:0 .6vh 1.6vh rgba(0,0,0,.45)}
#yl-asc .puits .niv.clair b{color:rgba(0,0,0,.3);text-shadow:none}
#yl-entree .etages button::after{display:none}

#yl-entree .ent2{left:80px}
#yl-sortie.x-porte .poignee-s{left:auto;right:calc(100% + 64px)}
#yl-sortie.x-porte .ent-s{left:auto;right:calc(100% + 80px);text-align:right;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-size:22px;letter-spacing:.22em;text-transform:none;line-height:24px;margin-top:-12px}
#yl-sortie.x-porte .merci-s{position:absolute;left:64px;top:50%;margin-top:-12px;line-height:24px;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-size:22px;letter-spacing:.12em;color:var(--rouge,#E5142C);white-space:nowrap;z-index:4;pointer-events:none}

#yl-sortie.x-porte .fin,#yl-sortie.x-porte .etages{display:none}
@media (max-width:760px){  #yl-entree .ent2{left:70px} #yl-sortie.x-porte .merci-s{left:54px;font-size:16px} #yl-sortie.x-porte .ent-s{font-size:18px} }
#yl-entree .ent2{left:84px}
/* (bc) p65 : la saison derriere la vitre de l'entree, d'apres la date */
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison{position:absolute;inset:0;overflow:hidden;z-index:0;background:color-mix(in srgb,var(--fond) 92%,#000);pointer-events:none}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison i{position:absolute;left:-8%;top:-10vh;width:116%;height:220vh;transform:rotate(5deg);will-change:transform;background-repeat:repeat}
#yl-entree .battant{background:color-mix(in srgb,var(--fond) 84%,transparent);z-index:1}
#yl-entree .etages,#yl-entree .ent,#yl-entree .ent2,#yl-entree .poignee,#yl-entree #yl-code{z-index:3}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.automne .c1{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='300'><path d='M40 30c16 8 30 30 24 56-10-6-28-18-30-44z' fill='%23B8632B' opacity='.9'/><path d='M150 110c-14-12-12-38 6-50 6 14 8 32-6 50z' fill='%23C98A2E' opacity='.9'/><path d='M90 220c6-18 24-24 40-16-6 12-22 22-40 16z' fill='%23A83A2A' opacity='.85'/><path d='M190 250c-16-4-24-22-16-38 10 6 20 20 16 38z' fill='%23D9A441' opacity='.85'/></svg>");background-size:220px 300px;animation:ylneigeA 16s linear infinite;filter:blur(1px)}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.automne .c2{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='300'><path d='M40 30c16 8 30 30 24 56-10-6-28-18-30-44z' fill='%23B8632B' opacity='.9'/><path d='M150 110c-14-12-12-38 6-50 6 14 8 32-6 50z' fill='%23C98A2E' opacity='.9'/><path d='M90 220c6-18 24-24 40-16-6 12-22 22-40 16z' fill='%23A83A2A' opacity='.85'/><path d='M190 250c-16-4-24-22-16-38 10 6 20 20 16 38z' fill='%23D9A441' opacity='.85'/></svg>");background-size:150px 205px;background-position:60px 90px;animation:ylneigeB 24s linear infinite;filter:blur(1.6px);opacity:.7}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.automne .c3{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='300'><path d='M40 30c16 8 30 30 24 56-10-6-28-18-30-44z' fill='%23B8632B' opacity='.9'/><path d='M150 110c-14-12-12-38 6-50 6 14 8 32-6 50z' fill='%23C98A2E' opacity='.9'/><path d='M90 220c6-18 24-24 40-16-6 12-22 22-40 16z' fill='%23A83A2A' opacity='.85'/><path d='M190 250c-16-4-24-22-16-38 10 6 20 20 16 38z' fill='%23D9A441' opacity='.85'/></svg>");background-size:320px 436px;background-position:120px 40px;animation:ylneigeC 11s linear infinite;filter:blur(.6px);opacity:.8}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.hiver .c1{background:radial-gradient(circle,#FFF 0 .45vh,transparent .7vh) 0 0/5vw 8vh;animation:ylneigeA 7s linear infinite;filter:blur(1.2px)}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.hiver .c2{background:radial-gradient(circle,rgba(255,255,255,.9) 0 .25vh,transparent .45vh) 3vw 4vh/7vw 11vh;animation:ylneigeB 11s linear infinite;filter:blur(1.6px)}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.hiver .c3{background:radial-gradient(circle,#FFF 0 .9vh,transparent 1.3vh) 1vw 2vh/11vw 16vh;animation:ylneigeC 5s linear infinite;filter:blur(2.4px)}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.hiver{background:color-mix(in srgb,var(--fond) 80%,#8A97A6)}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.printemps .c1{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='260'><ellipse cx='40' cy='40' rx='9' ry='14' transform='rotate(25 40 40)' fill='%23F2B8C6' opacity='.9'/><ellipse cx='130' cy='110' rx='8' ry='13' transform='rotate(-30 130 110)' fill='%23FADDE4' opacity='.9'/><ellipse cx='80' cy='200' rx='9' ry='14' transform='rotate(60 80 200)' fill='%23EFA6B7' opacity='.85'/><ellipse cx='170' cy='230' rx='7' ry='12' transform='rotate(-10 170 230)' fill='%23F7CBD5' opacity='.85'/></svg>");background-size:200px 260px;animation:ylneigeA 18s linear infinite;filter:blur(.8px)}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.printemps .c2{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='260'><ellipse cx='40' cy='40' rx='9' ry='14' transform='rotate(25 40 40)' fill='%23F2B8C6' opacity='.9'/><ellipse cx='130' cy='110' rx='8' ry='13' transform='rotate(-30 130 110)' fill='%23FADDE4' opacity='.9'/><ellipse cx='80' cy='200' rx='9' ry='14' transform='rotate(60 80 200)' fill='%23EFA6B7' opacity='.85'/><ellipse cx='170' cy='230' rx='7' ry='12' transform='rotate(-10 170 230)' fill='%23F7CBD5' opacity='.85'/></svg>");background-size:140px 182px;background-position:70px 50px;animation:ylneigeB 27s linear infinite;filter:blur(1.4px);opacity:.7}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.printemps .c3{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='260'><ellipse cx='40' cy='40' rx='9' ry='14' transform='rotate(25 40 40)' fill='%23F2B8C6' opacity='.9'/><ellipse cx='130' cy='110' rx='8' ry='13' transform='rotate(-30 130 110)' fill='%23FADDE4' opacity='.9'/><ellipse cx='80' cy='200' rx='9' ry='14' transform='rotate(60 80 200)' fill='%23EFA6B7' opacity='.85'/><ellipse cx='170' cy='230' rx='7' ry='12' transform='rotate(-10 170 230)' fill='%23F7CBD5' opacity='.85'/></svg>");background-size:280px 364px;background-position:30px 120px;animation:ylneigeC 13s linear infinite;filter:blur(.5px);opacity:.8}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.ete .c1{background:radial-gradient(circle,rgba(232,196,90,.9) 0 .35vh,transparent .6vh) 0 0/6vw 9vh;animation:ylpollenA 26s linear infinite;filter:blur(1.2px)}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.ete .c2{background:radial-gradient(circle,rgba(240,214,140,.8) 0 .25vh,transparent .45vh) 3vw 5vh/9vw 13vh;animation:ylpollenB 38s linear infinite;filter:blur(1.8px)}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.ete .c3{background:radial-gradient(circle,rgba(255,236,170,.9) 0 .5vh,transparent .8vh) 2vw 2vh/14vw 19vh;animation:ylpollenA 19s linear infinite;filter:blur(2.2px);opacity:.7}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.ete{background:color-mix(in srgb,var(--fond) 90%,#E8C45A)}
@keyframes ylpollenA{from{transform:rotate(5deg) translateY(0)}to{transform:rotate(5deg) translateY(-96vh)}}
@keyframes ylpollenB{from{transform:rotate(5deg) translateY(0)}to{transform:rotate(5deg) translateY(-99vh)}}
@media (prefers-reduced-motion:reduce){ :is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison i{animation:none!important} }
@media (max-width:760px){ :is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison i{filter:none!important} }
/* plus rare, plus discret */
#yl-entree .battant{background:color-mix(in srgb,var(--fond) 90%,transparent)}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.automne .c1{background-size:320px 436px;opacity:.7}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.automne .c2{background-size:220px 300px;opacity:.45}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.automne .c3{background-size:460px 627px;opacity:.55}
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.printemps .c1{background-size:300px 390px;opacity:.7} :is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.printemps .c2{opacity:.45} :is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison.printemps .c3{opacity:.55}
/* (bd) p66 : plus de fil du bas */
.fil-b{display:none!important}

/* (be) p67 : gaine — la saison dehors, seule la dalle separe les etages, plus de piliers ; sept etages (Spectacle, Sciences, Archives retires) */
#yl-asc .puits .saison{z-index:0}
#yl-asc .puits .saison i{animation-duration:inherit}
#yl-asc .puits .gaine{z-index:1;opacity:1}
#yl-asc .puits .niv{background:linear-gradient(180deg,transparent 0 8vh,color-mix(in srgb,var(--c) 22%,transparent) 8vh 92vh,transparent 92vh);filter:none}

#yl-asc .puits .niv .dalle{box-shadow:inset 0 -1.3vh 0 #6B4A2B,inset 0 -1.7vh 0 #3A2A1C,0 1.4vh 4vh rgba(0,0,0,.55)}
#yl-asc .puits .niv b{color:rgba(255,255,255,.5);text-shadow:0 .6vh 2vh rgba(0,0,0,.55)}
#yl-asc .puits .niv.clair b{color:rgba(255,255,255,.5);text-shadow:0 .6vh 2vh rgba(0,0,0,.55)}

/* (bf) p70 : quatre etages ; accueil et sortie comme la cabine (chiffre + nom), icone d'entree / de retour en bas, la saison a la sortie */
#yl-entree .etages,#yl-sortie.x-porte .etages{display:flex;transform:translate(-50%,-50%);align-items:flex-end;z-index:4}
#yl-entree .etages button::after,#yl-sortie.x-porte .etages button::after{display:block;content:attr(data-t);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin:0 0 0 20px;font-size:inherit;letter-spacing:.04em;text-transform:none;line-height:1;white-space:nowrap;color:inherit;opacity:1;transition:none}
#yl-entree .etages button,#yl-sortie.x-porte .etages button{padding:0 10px 0 14px;opacity:.7}
#yl-entree .etages button.ici,#yl-entree .etages button:hover,#yl-sortie.x-porte .etages button.ici,#yl-sortie.x-porte .etages button:hover{opacity:1}
#yl-sortie.x-porte .etages button{color:#E9E4DA;background:transparent;border:0;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-weight:300;font-size:34px;height:44px;line-height:44px;position:relative;cursor:pointer;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
#yl-sortie.x-porte .etages button.ici,#yl-sortie.x-porte .etages button:hover{color:var(--rouge,#E5142C);font-size:50px}
#yl-sortie.x-porte .etages button.ici{font-size:50px}
#yl-sortie.x-porte .etages button b{font-weight:300}
#yl-sortie.x-porte .poignee-s,#yl-sortie.x-porte .ent-s,#yl-entree .ent,#yl-entree .ent2,#yl-entree .poignee{display:none!important}

#yl-sortie .vue-s{background:#0E0E10}
#yl-sortie .vue-s .saison{background:#1A1816}
#yl-entree .ico-entree,#yl-sortie.x-porte .ico-retour{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:30px;height:30px;margin:0;padding:0;border:0;background:none;color:var(--encre);opacity:.6;cursor:pointer;z-index:5;transition:opacity .25s,color .25s}
#yl-sortie.x-porte .ico-retour{color:#E9E4DA}
#yl-entree .ico-entree svg,#yl-sortie.x-porte .ico-retour svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#yl-entree .ico-entree:hover,#yl-sortie.x-porte .ico-retour:hover{opacity:1;color:var(--rouge,#E5142C)}
@media (max-width:760px){ #yl-sortie.x-porte .etages button{font-size:28px;height:36px;line-height:36px} #yl-sortie.x-porte .etages button.ici{font-size:40px} }
#yl-sortie.x-porte .etages button{font-variant-numeric:normal;font-feature-settings:normal}
#yl-sortie.x-porte .merci-s{left:50%;right:auto;top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;text-align:center;white-space:nowrap;z-index:5}
@media (max-width:760px){ #yl-sortie.x-porte .merci-s{left:50%;bottom:calc(70px + env(safe-area-inset-bottom,0px))} }
#yl-sortie.x-porte .merci-s{left:0}
@media (max-width:760px){ #yl-sortie.x-porte .merci-s{left:0} }

/* (bg) p71 : chiffres centres sur l'axe ; l'icone du bas = le bouton Sortie de la cabine ; sortie sans trajet */
#yl-entree .etages,#yl-sortie.x-porte .etages{align-items:center}
#yl-entree .etages button,#yl-sortie.x-porte .etages button{padding:0 14px}
#yl-entree .etages button.ico-entree,#yl-sortie.x-porte .etages button.ico-retour{position:static;transform:none;width:auto;height:44px;line-height:44px;margin:2px 0 0;padding:0 14px;border:0;background:none;color:var(--encre);opacity:.7;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:opacity .25s,color .25s}
#yl-entree .etages button.ico-entree::after,#yl-sortie.x-porte .etages button.ico-retour::after{content:none}
#yl-entree .etages button.ico-entree svg,#yl-sortie.x-porte .etages button.ico-retour svg{display:block;width:22px;height:22px;vertical-align:middle}
#yl-entree .etages button.ico-entree:hover,#yl-sortie.x-porte .etages button.ico-retour:hover{opacity:1;color:var(--rouge,#E5142C);font-size:18px}
#yl-sortie.x-porte .etages button.ico-retour{color:#E9E4DA}
@media (max-width:760px){ #yl-entree .etages button.ico-entree,#yl-sortie.x-porte .etages button.ico-retour{height:36px;line-height:36px;font-size:18px} }

/* (bh) p72 : YouLab a gauche, chiffres 1-4 alignes sur les noms, clic direct ; sortie : merci au centre, seule l'icone en bas ; descente jusqu'au 0 */
#yl-entree .battant .ent{display:block!important;left:auto;right:calc(100% + 80px);top:50%;bottom:auto;margin-top:-12px;line-height:24px;text-align:right;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-size:22px;letter-spacing:.22em;text-transform:none;color:var(--encre);opacity:1;animation:none;cursor:pointer;pointer-events:auto}
#yl-entree .battant .ent:hover{color:var(--rouge,#E5142C)}
#yl-entree .etages button b,#yl-asc.cabine .pan .bt b{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
#yl-entree .etages button.ico-entree{display:none!important}
#yl-sortie.x-porte .merci-s{left:0;top:50%;bottom:auto;transform:translate(-50%,-50%);font-size:34px;letter-spacing:.08em;text-align:center;white-space:nowrap}
#yl-sortie.x-porte .etages{top:auto;bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:translateX(-50%)}
#yl-sortie.x-porte .etages button.ico-retour{margin:0}
@media (max-width:760px){ #yl-entree .battant .ent{right:calc(100% + 54px);font-size:18px} #yl-sortie.x-porte .merci-s{font-size:22px} }
/* (bi) p73 : le chiffre et le nom selectionnes (ou survoles) restent rouges mais gardent la taille des autres */
#yl-entree .etages button,#yl-entree .etages button.ici,#yl-entree .etages button:hover,#yl-sortie.x-porte .etages button,#yl-sortie.x-porte .etages button.ici,#yl-sortie.x-porte .etages button:hover{font-size:34px;transition:color .25s,opacity .25s}
#yl-asc.cabine .pan .bt,#yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on,#yl-asc.cabine .pan .bt:hover{font-size:34px}
#yl-etage b{font-size:20px}
@media (max-width:760px){ #yl-entree .etages button,#yl-entree .etages button.ici,#yl-entree .etages button:hover,#yl-sortie.x-porte .etages button,#yl-sortie.x-porte .etages button.ici,#yl-sortie.x-porte .etages button:hover{font-size:28px} #yl-etage b{font-size:16px} }
@media (max-width:560px){ #yl-asc.cabine .pan .bt,#yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on,#yl-asc.cabine .pan .bt:hover{font-size:28px} }
/* (bj) p74 : plus jamais de carre autour des chiffres — aucun contour, fond, ombre ni anneau de focus, dans tous les etats */
#yl-entree .etages button,#yl-entree .etages button:hover,#yl-entree .etages button:focus,#yl-entree .etages button:focus-visible,#yl-entree .etages button:active,#yl-entree .etages button.ici,#yl-entree .etages button.ici:hover,#yl-entree .etages button.chaud,#yl-entree .etages button.non,
#yl-sortie.x-porte .etages button,#yl-sortie.x-porte .etages button:hover,#yl-sortie.x-porte .etages button:focus,#yl-sortie.x-porte .etages button:focus-visible,#yl-sortie.x-porte .etages button:active,#yl-sortie.x-porte .etages button.ici,#yl-sortie.x-porte .etages button.ici:hover,#yl-sortie.x-porte .etages button.chaud,
#yl-asc.cabine .pan .bt,#yl-asc.cabine .pan .bt:hover,#yl-asc.cabine .pan .bt:focus,#yl-asc.cabine .pan .bt:focus-visible,#yl-asc.cabine .pan .bt:active,#yl-asc.cabine .pan .bt.ici,#yl-asc.cabine .pan .bt.on,#yl-asc.cabine .pan .bt.ici:hover,#yl-asc.cabine .pan .bt.on:hover,#yl-asc.cabine .pan .bt.chaud,#yl-asc.cabine .pan .bt.ici.chaud,#yl-asc.cabine .pan .bt[data-ok="0"].on{outline:0!important;outline-offset:0!important;box-shadow:none!important;background:none!important;border:0!important;-webkit-tap-highlight-color:transparent!important;-webkit-appearance:none!important;appearance:none!important;text-decoration:none!important}
#yl-entree .etages button::before,#yl-sortie.x-porte .etages button::before,#yl-asc.cabine .pan .bt::before{content:none!important}

/* (bk) p75 : les series de photos — une cloison entre deux series, la legende porte le nom de la serie */
.station .cloison-s{position:absolute;top:0;bottom:0;right:calc(50% + var(--pas)/2);width:1.6vw;margin-right:-.8vw;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.06) 30%,rgba(255,255,255,.08) 70%,rgba(0,0,0,.22));box-shadow:0 0 3vh rgba(0,0,0,.25);z-index:0;pointer-events:none}
#yl-mos .grp .nomg{white-space:nowrap}

/* (bl) p76 : cloisons 3D entre les series ; chiffres de la gaine sur leur propre calque ; scene masquee pendant le trajet */
.station .cloison-s{display:none}

#yl-asc .puits .niv b{will-change:transform;transform:translate(-50%,0) translateZ(0);text-shadow:none;-webkit-font-smoothing:antialiased}
body:has(#yl-asc.roule) #scene{visibility:hidden}

/* (bm) p77 : la scene d'ecoute de la salle Musique */
#yl-atelier .ecoute3 .sph{position:absolute;left:-2.9vh;top:-2.9vh;width:5.8vh;height:5.8vh;border-radius:50%;background:radial-gradient(circle at 36% 32%,#FFFFFF 0,#F2F0EC 30%,#C9C7C3 62%,#8E8C89 88%,#6A6866);box-shadow:0 .6vh 1.6vh rgba(0,0,0,.45),inset -0.6vh -0.8vh 1.2vh rgba(0,0,0,.18)}
#yl-atelier .ecoute3 .sph::after{content:"";position:absolute;left:38%;top:38%;width:24%;height:24%;border-radius:50%;background:radial-gradient(circle,#2A2A2C 0 40%,#4A4A4C 60%,transparent 62%);opacity:.85}
#yl-atelier .ecoute3 .sph3{transform-style:preserve-3d}
#yl-atelier .ecoute3 .coussin .f{border-radius:.6vh}

/* (bn) p78 : l'ancienne porte (YouLab au centre, poignee a droite, interrupteur a gauche, judas en haut), ecran de la cabine en rouge, merci cliquable */
#yl-entree .ent{display:none!important}
#yl-entree .nom{display:block!important;top:auto;bottom:calc(50% + 118px);left:0;right:0;margin:0;width:auto;text-align:center;font-size:12px;letter-spacing:.42em;text-indent:.42em;line-height:16px;text-transform:none;opacity:.85;z-index:3}
#yl-entree .judas{display:block!important;top:auto;bottom:calc(50% + 156px);left:0;margin-left:-11px;z-index:3}
#yl-entree .judas .oeil,#yl-entree .judas .lentille{display:block}
#yl-entree .battant.d .poignee{display:block!important;top:50%;bottom:auto;margin-top:-20px;left:64px;right:auto;z-index:3}
#yl-entree .inter{display:block!important;top:50%;bottom:auto;margin-top:-20px;right:64px;left:auto;z-index:3}
@media (max-width:760px){ #yl-entree .nom{bottom:calc(50% + 104px)} #yl-entree .judas{bottom:calc(50% + 140px)} #yl-entree .battant.d .poignee{left:40px} #yl-entree .inter{right:40px} }
#yl-asc .ecran .et i.ici{color:var(--rouge,#E5142C)}
#yl-asc .pan .mw.ici{color:var(--rouge,#E5142C)}
#yl-asc .pan .mw.ici{box-shadow:inset 0 0 0 1px var(--rouge,#E5142C)}
#yl-sortie.x-porte .etages{display:none!important}
#yl-sortie.x-porte .merci-s{pointer-events:auto;cursor:pointer;transition:opacity .25s}
#yl-sortie.x-porte .merci-s:hover{opacity:.75}
#yl-entree .battant.d .poignee{left:216px}
#yl-entree .inter{right:216px}
@media (max-width:760px){ #yl-entree .battant.d .poignee{left:150px} #yl-entree .inter{right:150px} }

/* (bo) p79 : accueil, chiffres seuls ; salle Musique vue de loin comme la galerie (tableau a la taille de la galerie) */
#yl-entree .etages button::after{display:none!important}
#yl-asc .ecran .et i.ici,#yl-asc .ecran b{color:var(--rouge,#E5142C)}

/* (bp) p80 : porte sans chiffres, poignee et interrupteur pres du centre, sans etiquette ; salle Musique : cadre retournable */
#yl-entree .etages{display:none!important}
#yl-entree .battant.d .poignee{left:64px}
#yl-entree .inter{right:64px}
#yl-entree .inter::before,#yl-entree .inter::after{display:none!important;content:none!important}
#yl-entree .nom{bottom:calc(50% + 44px)}
#yl-entree .judas{bottom:calc(50% + 82px)}
@media (max-width:760px){ #yl-entree .battant.d .poignee{left:40px} #yl-entree .inter{right:40px} #yl-entree .nom{bottom:calc(50% + 40px)} #yl-entree .judas{bottom:calc(50% + 76px)} }

/* (bq) p81 : la porte comme un logo — judas, YouLab, interrupteur et poignee serres autour de l'axe */
#yl-entree .judas{bottom:calc(50% + 46px)}
#yl-entree .nom{bottom:calc(50% + 14px)}
#yl-entree .battant.d .poignee{left:22px;top:auto;bottom:auto;top:calc(50% - 6px);margin-top:0;height:36px}
#yl-entree .inter{right:22px;top:calc(50% - 6px);margin-top:0;height:36px}
#yl-entree .inter .lev{margin-top:-6px;transform:translateY(-7px)}
:root[data-theme="dark"] #yl-entree .inter .lev{transform:translateY(7px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #yl-entree .inter .lev{transform:translateY(7px)}}
@media (max-width:760px){ #yl-entree .battant.d .poignee{left:18px} #yl-entree .inter{right:18px} #yl-entree .judas{bottom:calc(50% + 44px)} #yl-entree .nom{bottom:calc(50% + 12px)} }
/* (br) p82 : la porte-logo, plus grande et harmonisee */
#yl-entree .judas{width:36px;height:36px;margin-left:-18px;bottom:calc(50% + 74px)}
#yl-entree .judas .oeil{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
#yl-entree .nom{bottom:calc(50% + 26px);font-size:18px;letter-spacing:.42em;text-indent:.42em;line-height:24px}
#yl-entree .battant.d .poignee{left:34px;top:calc(50% - 10px);height:60px;width:3px}
#yl-entree .inter{right:34px;top:calc(50% - 10px);width:16px;height:60px;border-radius:3px}
#yl-entree .inter .lev{width:9px;height:18px;margin:-9px 0 0 -4.5px;border-radius:2px;transform:translateY(-12px)}
:root[data-theme="dark"] #yl-entree .inter .lev{transform:translateY(12px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #yl-entree .inter .lev{transform:translateY(12px)}}
@media (max-width:760px){ #yl-entree .judas{width:30px;height:30px;margin-left:-15px;bottom:calc(50% + 64px)} #yl-entree .nom{font-size:15px;bottom:calc(50% + 22px)} #yl-entree .battant.d .poignee{left:28px;height:50px} #yl-entree .inter{right:28px;height:50px;width:14px} }
/* (bs) p83 : salle Musique — plus de filtres ni d'ombres floues dans l'espace 3D (ils figeaient le rendu a l'arrivee), chiffres de la gaine sans calque force */
#yl-atelier .ecoute3 .sph{box-shadow:none}
#yl-atelier .ecoute3 .sph3{transform-style:flat}
#yl-asc .puits .niv b{will-change:auto;transform:translateX(-50%)}
#yl-asc .puits .saison i{filter:none!important}
#yl-asc .puits .niv{filter:none!important}
/* ===== 27 sept. (bt) p84 : salle Musique refaite — pochette recto, platine verso, salon leger ===== */
#yl-atelier .cad.son .flip{position:relative;display:block;width:min(40vh,40vw);height:min(40vh,40vw);transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.2,1);cursor:pointer}
#yl-atelier .cad.son.retourne .flip{transform:rotateY(180deg)}
#yl-atelier .cad.son .flip .bord,#yl-atelier .cad.son .dos-p{position:absolute;left:0;top:0;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
#yl-atelier .cad.son .flip .bord img{width:100%;height:100%}
#yl-atelier .cad.son .dos-p{transform:rotateY(180deg);background:#1C1D1F;box-shadow:inset 0 0 0 .6vh #2A2B2E}
#yl-atelier .cad.son .dos-p .plateau{position:absolute;left:7%;top:11%;width:72%;height:72%;border-radius:50%;background:repeating-radial-gradient(circle,#141414 0 2px,#262626 2px 3px)}
#yl-atelier .cad.son .dos-p .plateau::after{content:"";position:absolute;left:36%;top:36%;width:28%;height:28%;border-radius:50%;background:#C8102E;box-shadow:0 0 0 .5vh #1C1D1F}
#yl-atelier .cad.son .dos-p .bras{position:absolute;right:8%;top:9%;width:3.5%;height:60%;border-radius:1vh;background:#C9C7C3;transform-origin:50% 6%;transform:rotate(-16deg)}
#yl-atelier .cad.son .dos-p .bras::before{content:"";position:absolute;left:50%;top:0;width:3.2vh;height:3.2vh;margin:-1.2vh 0 0 -1.6vh;border-radius:50%;background:#8E8C89}
#yl-atelier .cad.son.joue .dos-p .bras{transform:rotate(4deg);transition:transform 1.2s}
#yl-atelier .cad.son.joue .dos-p .plateau{animation:ylspin 2.2s linear infinite}
@keyframes ylspin{to{transform:rotate(360deg)}}
#yl-atelier .ecoute3 .sph3{position:absolute;left:0;top:0;width:0;height:0}
#yl-atelier .ecoute3 .sph{position:absolute;left:-2.9vh;top:-2.9vh;width:5.8vh;height:5.8vh;border-radius:50%;background:radial-gradient(circle at 36% 32%,#FFFFFF 0,#F2F0EC 30%,#C9C7C3 62%,#8E8C89 88%,#6A6866)}
#yl-atelier .ecoute3 .sph::after{content:"";position:absolute;left:38%;top:38%;width:24%;height:24%;border-radius:50%;background:#2A2A2C;opacity:.85}
#yl-atelier.studio .cad.son{top:33vh}

/* ===== 27 sept. (bu) p85 : le cercle rouge au milieu, entre l interrupteur et la poignee, a leur hauteur ===== */
#yl-entree .judas{bottom:calc(50% - 38px)}
@media (max-width:760px){ #yl-entree .judas{bottom:calc(50% - 30px)} }

/* ===== 27 sept. (bv) p86 : en vue large, les plans .scene/.piste/.seg (z=0) masquaient le clic vers les murs et les tableaux en 3D ; ils ne prennent plus le pointeur, leurs enfants oui ===== */
#yl-atelier .scene,#yl-atelier .piste,#yl-atelier .seg{pointer-events:none}
#yl-atelier .seg>*{pointer-events:auto}
/* ===== 27 sept. (bw) p87 : la porte comme le logo — cercle en haut, YouLab au centre, poignee en bas a droite, pas d'interrupteur, cercle sans animation ===== */
#yl-entree .inter{display:none!important}
#yl-entree .judas{width:36px;height:36px;margin-left:-18px;top:auto;bottom:calc(50% + 24vh)}
#yl-entree .judas .lentille{display:none!important}
#yl-entree .judas:hover .oeil,#yl-entree .judas.on .oeil{opacity:1}
#yl-entree .nom{top:auto;bottom:calc(50% - 12px);font-size:22px;letter-spacing:.5em;text-indent:.5em;line-height:24px}
#yl-entree .battant.d .poignee{left:14px;top:auto;bottom:calc(50% - 24vh - 26px);height:48px;width:3px}
@media (max-width:760px){ #yl-entree .judas{width:30px;height:30px;margin-left:-15px;bottom:calc(50% + 20vh)} #yl-entree .nom{font-size:18px} #yl-entree .battant.d .poignee{left:12px;height:40px;bottom:calc(50% - 20vh - 22px)} }
/* la platine : retournement sans 3D, les faces s'echangent a mi-course (Safari n'affichait pas le verso) */
#yl-atelier .cad.son .flip{transform-style:flat;transition:none}
#yl-atelier .cad.son.retourne .flip{transform:none}
#yl-atelier .cad.son .flip.tourne{animation:ylflip .76s ease-in-out}
@keyframes ylflip{0%{transform:scaleX(1)}50%{transform:scaleX(.04)}100%{transform:scaleX(1)}}
#yl-atelier .cad.son .flip .bord,#yl-atelier .cad.son .dos-p{-webkit-backface-visibility:visible;backface-visibility:visible}
#yl-atelier .cad.son .dos-p{transform:none;visibility:hidden}
#yl-atelier .cad.son.retourne .dos-p{visibility:visible}
#yl-atelier .cad.son.retourne .flip .bord{visibility:hidden}
/* ===== 28 sept. (bx) p88 : Safari (Mac, iPhone, iPad) quittait la page — les couches de saison floutees, animees et surdimensionnees, plus le verre depoli sur toute la porte, epuisaient la memoire graphique ===== */
:is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison i{filter:none!important;will-change:auto;height:140vh;top:-6vh}
#yl-entree.verre .battant{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--fond) 78%,transparent)}
#yl-asc .puits .niv{filter:none!important}
.yl-cp{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#yl-asc.cabine .front::after{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,8,10,.74)}
/* ===== 28 sept. (by) p89 : mode leger pour les appareils tactiles (html.leger) — le Mac garde la version complete ===== */

html.leger #salle *,html.leger #yl-meubles *,html.leger #yl-atelier *,html.leger #yl-asc *,html.leger #yl-entree *,html.leger #yl-sortie *{filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;text-shadow:none!important;will-change:auto!important}
html.leger :is(#yl-entree,#yl-asc .puits,#yl-sortie .vue-s) .saison i{animation:none!important}
html.leger #salle .station .tableau{transform:translateZ(3vh)}
html.leger .tableau{perspective:none}
html.leger #yl-atelier .cad{transform:translate(-50%,-50%) translateZ(3vh)}
html.leger #yl-atelier .parquet,html.leger #yl-atelier .plaf{background-image:none!important;background-blend-mode:normal}
html.leger #yl-atelier.studio .mur::before{display:none}
html.leger #yl-atelier .piste{transition-duration:1.1s}
html.leger .cadre{transition:transform .75s cubic-bezier(.45,0,.2,1)}
html.leger #yl-atelier .ecoute3 .sph{background:#DDDBD7}
/* ===== 28 sept. (bz) p90 : salle Musique — galette et platine de la galerie, sans 3D ===== */
#yl-atelier .cad.son .flip .bord{overflow:visible;background:transparent}
#yl-atelier .cad.son .flip .bord img{position:relative;z-index:2}
#yl-atelier .cad.son .galette{position:absolute;top:7%;right:0;width:86%;height:86%;z-index:1;display:block;transform:translateX(22%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
#yl-atelier .cad.son .galette .disque{display:block;width:100%;height:100%}
#yl-atelier .cad.son.joue .galette{transform:translateX(36%)}
#yl-atelier .cad.son.joue .galette .disque{animation:yl-tourne 9s linear infinite}
#yl-atelier .cad.son.retourne .galette{visibility:hidden}
#yl-atelier .cad.son .dos-p{padding:4%;box-sizing:border-box;background:#1C1D1F;box-shadow:none}
#yl-atelier .cad.son .dos-p .platine{position:relative;width:100%;height:100%;display:block}
#yl-atelier .cad.son .dos-p .platine .vinyle{display:block;width:100%;height:100%}
#yl-atelier .cad.son.joue .dos-p .platine .vinyle{animation:yl-tourne 9s linear infinite}
#yl-atelier .cad.son .dos-p svg.bras{position:absolute;inset:0;right:auto;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;border-radius:0;background:none;transform:none!important;transition:none}
#yl-atelier .cad.son .dos-p svg.bras::before{content:none}
#yl-atelier .cad.son .dos-p .bras line{stroke:#E9E4DA;stroke-width:5;stroke-linecap:round}
#yl-atelier .cad.son .dos-p .bras rect,#yl-atelier .cad.son .dos-p .bras .poids{fill:#E9E4DA}
#yl-atelier .cad.son .dos-p .bras .pivot{fill:#1C1D1F;stroke:#E9E4DA;stroke-width:3}
#yl-atelier .cad.son .dos-p .bras .arm{transform-box:view-box;transform-origin:376px 28px;transform:rotate(-62deg);transition:transform 2.4s cubic-bezier(.4,0,.2,1)}
#yl-atelier .cad.son.joue .dos-p .bras .arm{transform:rotate(0deg)}
#yl-atelier .cad.son svg.disque .fond,#yl-atelier .cad.son svg.vinyle .fond{fill:#0A0A0A}
#yl-atelier .cad.son svg .sillons circle{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1}
#yl-atelier .cad.son svg .sillons circle:nth-child(5n){stroke:rgba(255,255,255,.22)}
#yl-atelier .cad.son svg .etq{fill:#FFFFFF}
#yl-atelier .cad.son svg .trou{fill:#1C1D1F}
#yl-atelier .cad.son svg text.c{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:7.2px;letter-spacing:.28em;fill:#1A1816;opacity:.75}
#yl-atelier .cad.son .dos-p .bouton{display:none}
#yl-atelier .cad.son .dos-p .jouer{z-index:3}
/* ===== 28 sept. (ca) p91 : titre grave au-dessus des tableaux, navigation en bas, plus de fils ni d'eclairages ni d'ombre au sol, cabine alignee, platine 3D ===== */
#salle .rail,#salle .spot{display:none!important}
#yl-etage{display:none!important}
#yl-atelier.carre .grave-m,#salle .grave-g{display:flex!important}
#yl-rose{display:block!important}
#salle .grave-g{top:calc(var(--Hm)/-2 + 2.5vh);height:auto;flex-direction:row;align-items:baseline;gap:1.4vh;justify-content:center}
#salle .grave-g b{font-size:5vh;letter-spacing:0;color:rgba(0,0,0,.26);text-shadow:0 .12vh 0 rgba(255,255,255,.45),0 -.12vh .25vh rgba(0,0,0,.35)}
#salle .grave-g span{margin:0;font-size:2.6vh;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:rgba(0,0,0,.26);text-shadow:0 .12vh 0 rgba(255,255,255,.45),0 -.12vh .25vh rgba(0,0,0,.35)}
#yl-atelier.carre .grave-m{top:auto;bottom:60vh!important;width:100vw;flex-direction:row!important;align-items:baseline;gap:1.4vh;justify-content:center}
#yl-atelier.carre .grave-m b{font-size:5vh;letter-spacing:0;color:rgba(0,0,0,.26);text-shadow:0 .12vh 0 rgba(255,255,255,.45),0 -.12vh .25vh rgba(0,0,0,.35)}
#yl-atelier.carre .grave-m span{margin:0;font-size:2.6vh;letter-spacing:.34em;text-indent:.34em;color:rgba(0,0,0,.26);text-shadow:0 .12vh 0 rgba(255,255,255,.45),0 -.12vh .25vh rgba(0,0,0,.35)}
#yl-atelier.studio .grave-m b,#yl-atelier.studio .grave-m span{color:rgba(255,255,255,.2);text-shadow:0 -.12vh 0 rgba(0,0,0,.55),0 .12vh .25vh rgba(255,255,255,.1)}
html.leger #yl-rose .br{opacity:.7!important;pointer-events:auto!important}
html.leger #yl-rose .br.ici{opacity:1!important}
html.leger #yl-rose .hlg{opacity:0}
html.leger #yl-rose #banc svg{opacity:1!important}
#yl-asc .ecran{align-items:center}
#yl-asc .ecran b,#yl-asc .ecran .fl,#yl-asc .ecran em,#yl-asc .ecran .et,#yl-asc .ecran .et i{line-height:1}
#yl-asc .ecran .et{align-items:center}
#yl-asc .ecran .fl{color:#F3F1EC!important}
html.leger #yl-asc.cabine .porte{background:rgba(208,222,227,.06)}
#yl-atelier .cad.son .flip.tourne{animation:ylflip3 .8s ease-in-out}
@keyframes ylflip3{0%{transform:perspective(70vh) rotateY(0)}49.9%{transform:perspective(70vh) rotateY(90deg)}50%{transform:perspective(70vh) rotateY(-90deg)}100%{transform:perspective(70vh) rotateY(0)}}
#yl-atelier .cad.son .jouer{z-index:5}
#salle .grave-g,#yl-atelier.carre .grave-m{flex-direction:row-reverse!important}
#salle .grave-g b,#yl-atelier.carre .grave-m b{font-size:7vh}
#salle .grave-g span,#yl-atelier.carre .grave-m span{font-size:3vh}
#yl-asc .ecran{align-items:baseline!important}
#yl-asc .ecran .et{align-items:baseline!important}
#yl-asc .ecran em{white-space:nowrap}
#yl-asc .puits>i{display:none!important} /* l ancienne bande lumineuse de la gaine : le rectangle blanc qui apparaissait par moments */
/* ===== 28 sept. (cb) p92 : banc fixe, platine 3D (capot), lecteur sous la pochette, plaque de salle, ecran de cabine ===== */
#yl-atelier .cad.son .dos-p{perspective:60vh;padding:0}
#yl-atelier .cad.son .dos-p .platine{position:absolute;left:4%;top:4%;width:92%;height:92%}
#yl-atelier .cad.son .dos-p .capot{position:absolute;left:3%;right:3%;top:3%;bottom:3%;z-index:4;border-radius:4px;transform-origin:50% 0;transform:rotateX(0deg);background:linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,255,255,.10) 55%,rgba(255,255,255,.26));border:1px solid rgba(255,255,255,.7);transition:transform 1.5s cubic-bezier(.4,0,.2,1)}
#yl-atelier .cad.son.retourne .dos-p .capot{transform:rotateX(-112deg);transition-delay:.45s}
#yl-atelier .cad.son .jouer{display:none}
#yl-atelier .cad.son{--lp:calc(min(40vh,40vw) + 1.8vh)}
#yl-atelier .cad.son .pp{position:absolute;left:0;top:var(--lp);width:2.2vh;height:2.2vh;transform:translateY(-50%);border:1px solid rgba(233,228,218,.6);border-radius:50%;box-sizing:border-box;cursor:pointer;opacity:.85;transition:opacity .3s}
#yl-atelier .cad.son .pp::before{content:"";position:absolute;left:50%;top:50%;width:38%;height:38%;transform:translate(-42%,-50%);background:#E9E4DA;clip-path:polygon(0 0,100% 50%,0 100%)}
#yl-atelier .cad.son.joue .pp::before{transform:translate(-50%,-50%);clip-path:none;background:linear-gradient(90deg,#E9E4DA 0 36%,transparent 36% 64%,#E9E4DA 64%)}
#yl-atelier .cad.son .lect{position:absolute;left:3.4vh;right:0;top:var(--lp);height:1px;background:rgba(233,228,218,.34);cursor:pointer}
#yl-atelier .cad.son .lect::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:#E9E4DA}
#yl-atelier .cad.son .lect::after{content:"";position:absolute;left:var(--p,0%);top:50%;width:.9vh;height:.9vh;transform:translate(-50%,-50%);border-radius:50%;background:#E9E4DA}
#yl-atelier .cad.son.retourne .pp,#yl-atelier .cad.son.retourne .lect{visibility:hidden}
#yl-atelier .cad.son figcaption{padding-top:3vh}
/* la plaque de salle, comme l'ecran de cabine */
#salle .grave-g,#yl-atelier.carre .grave-m{display:inline-flex!important;flex-direction:row-reverse!important;align-items:baseline;gap:1.6vh;width:auto;height:auto;padding:1.1vh 2.4vh;background:#141416;border-radius:.6vh;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#salle .grave-g{margin-left:50vw;transform:translateX(-50%) translateZ(4px)}
#yl-atelier.carre .grave-m{transform:translateX(-50%)}
#salle .grave-g b,#yl-atelier.carre .grave-m b{font-size:2.8vh;line-height:1;letter-spacing:0;color:var(--rouge,#E5142C);text-shadow:none}
#salle .grave-g span,#yl-atelier.carre .grave-m span{font-size:1.5vh;line-height:1;letter-spacing:.26em;text-indent:0;text-transform:uppercase;color:#E8E1D2;opacity:.85;text-shadow:none}
/* ecran de cabine : centre dans le bandeau */
#yl-asc.cabine .ecran{top:4.2%}
#yl-asc svg.cube .lum{display:none!important} /* le plafonnier de la cabine (le carre blanc en haut) */
#yl-atelier .cad.son.retourne .dos-p .capot{transform:rotateX(-76deg)} /* le capot reste visible, ouvert vers le mur */
/* ===== 28 sept. (cc) p93 : retournement 3D de la pochette (galerie), capot cliquable, Pensees, plaque rouge centree, Design en mur plat ===== */
#yl-atelier .cad.son{perspective:70vh}
#yl-atelier .cad.son .flip{transition:transform .65s cubic-bezier(.45,0,.2,1);animation:none!important}
#yl-atelier .cad.son .flip.tourne{animation:none!important;transform:rotateY(90deg)}
#yl-atelier .cad.son .flip.epais{transform-style:preserve-3d;transition-timing-function:linear}
#yl-atelier .cad.son .flip.epais::before,#yl-atelier .cad.son .flip.epais::after{content:"";position:absolute;top:0;bottom:0;width:1.6vh;background:#0E0E10}
#yl-atelier .cad.son .flip.epais::before{left:0;transform-origin:left center;transform:rotateY(90deg)}
#yl-atelier .cad.son .flip.epais::after{right:0;transform-origin:right center;transform:rotateY(-90deg)}
#yl-atelier .cad.son .dos-p .capot{cursor:pointer;pointer-events:auto}
#yl-atelier .cad.son.retourne.ferme .dos-p .capot{transform:rotateX(0deg);transition-delay:0s}
#yl-atelier .cad.son .dos-p .platine{cursor:pointer}
/* la plaque : rouge, centree entre le haut du tableau et le plafond */
#yl-atelier .grave-m{position:absolute;left:50%;bottom:65vh;top:auto;width:auto;display:inline-flex;flex-direction:row-reverse;align-items:baseline;gap:1.6vh;padding:1.1vh 2.4vh;background:#141416;border-radius:.6vh;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transform:translate(-50%,50%);pointer-events:none;text-align:center}
#yl-atelier.carre .grave-m{bottom:65vh!important;transform:translate(-50%,50%)}
#yl-atelier .grave-m b{display:block;font-weight:300;font-size:2.8vh;line-height:1;letter-spacing:0;color:var(--rouge,#E5142C);text-shadow:none}
#yl-atelier .grave-m span{display:block;margin:0;font-size:1.5vh;line-height:1;letter-spacing:.26em;text-indent:0;text-transform:uppercase;color:var(--rouge,#E5142C);opacity:1;text-shadow:none}
#salle .grave-g{top:calc(var(--Hm) * -.395);transform:translate(-50%,-50%) translateZ(4px)}
#salle .grave-g b,#salle .grave-g span{color:var(--rouge,#E5142C);opacity:1}
/* ===== 28 sept. (cd) p94 : les pensees dans la salle Photo — cadres a fond colore ===== */
#salle .cadre.vide.pens-c{width:calc(var(--span)*.30);height:calc(var(--span)*.30*2/3)}
#salle .cadre.vide.pens-c .phrase{font-size:calc(var(--Hm)*.026);line-height:1.4;padding:8%}
#salle .cadre.vide.pens-c .legende i{font-style:normal}
/* ===== 28 sept. (ce) p95 : plus d'horloge ni de rose ; navigation a quatre boutons ; la plaque ouvre la mosaique (artiste, series) ===== */
#yl-rose,#yl-mur{display:none!important}
#yl-nav4{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:flex;gap:4px;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--fond) 84%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--encre) 16%,transparent);transition:opacity .5s ease}
#yl-nav4 button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:54px;padding:3px 8px 4px;border:0;background:none;color:var(--encre);cursor:pointer;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif}
#yl-nav4 button b{font-weight:300;font-size:24px;line-height:1}
#yl-nav4 button span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;white-space:nowrap}
#yl-nav4 button:hover span{opacity:1}
#yl-nav4 button.off{opacity:.28;pointer-events:none}
body.dehors #yl-nav4,body.vitre #yl-nav4,body.mosaique #yl-nav4,body:has(#yl-asc.on) #yl-nav4,body:has(#yl-sortie) #yl-nav4,body:has(#yl-det.on) #yl-nav4{opacity:0;pointer-events:none}
body.atelier #yl-nav4{background:rgba(20,20,22,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
body.atelier #yl-nav4 button{color:#F3F1EC}
body.atelier:not(.studio) #yl-nav4{background:rgba(246,244,240,.84);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
body.atelier:not(.studio) #yl-nav4 button{color:#2B2A28}
@media (max-width:760px){ #yl-nav4{bottom:calc(76px + env(safe-area-inset-bottom,0px))} #yl-nav4 button{min-width:46px} }
#salle .grave-g{pointer-events:auto;cursor:pointer}

#salle .grave-g:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
#yl-mos .artiste{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%}
#yl-mos .noma{font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:var(--rouge,#E5142C)}
#yl-mos button.nomg{height:auto;min-height:0;width:auto;padding:2px 6px;background:none;border:0;cursor:pointer;font-family:inherit;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--grave)}
#yl-mos button.nomg:hover{color:var(--rouge,#E5142C)}
#yl-mos .grp.txt button{height:auto;min-height:calc(var(--hm,24vh)*.5);max-width:15em}
#yl-mos .grp.txt button span{font-family:inherit;font-size:13px;line-height:1.5;padding:12px;font-style:italic}
/* ===== 28 sept. (cf) p96 : icone mosaique dans la navigation ; le titre de salle en lettres blanches encastrees, sans cadre ===== */
#yl-nav4 .sep{display:block;width:1px;margin:6px 4px;background:color-mix(in srgb,var(--encre) 22%,transparent)}
body.atelier.studio #yl-nav4 .sep{background:rgba(255,255,255,.22)}
#yl-nav4 button[data-n="mos"] b{display:flex;align-items:center;height:24px}
#yl-nav4 button[data-n="mos"] svg{width:17px;height:17px;fill:currentColor;opacity:.85}
body.mosaique #yl-nav4{opacity:1;pointer-events:auto}
body.mosaique #yl-nav4 button:not([data-n="mos"]){opacity:.28;pointer-events:none}
#salle .grave-g,#yl-atelier .grave-m{background:none!important;box-shadow:none!important;border-radius:0;padding:0;gap:2.2vh;pointer-events:none;cursor:default}
#salle .grave-g:hover{box-shadow:none!important}

#salle .grave-g b,#yl-atelier .grave-m b{font-size:4.2vh;font-weight:300;color:#F7F5F0;text-shadow:0 -.08vh 0 rgba(0,0,0,.28),0 .12vh .12vh rgba(255,255,255,.45)}
#salle .grave-g span,#yl-atelier .grave-m span{font-size:2vh;font-weight:400;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:#F7F5F0;opacity:1;text-shadow:0 -.08vh 0 rgba(0,0,0,.28),0 .12vh .12vh rgba(255,255,255,.45)}
#yl-atelier.studio .grave-m b,#yl-atelier.studio .grave-m span{color:#F3F1EC;text-shadow:0 -.1vh 0 rgba(0,0,0,.6),0 .1vh .2vh rgba(255,255,255,.12)}
:root[data-theme="dark"] #salle .grave-g b,:root[data-theme="dark"] #salle .grave-g span{text-shadow:0 -.1vh 0 rgba(0,0,0,.6),0 .1vh .2vh rgba(255,255,255,.12)}
#salle .grave-g b,#yl-atelier .grave-m b{font-size:6vh}
#salle .grave-g span,#yl-atelier .grave-m span{font-size:2.6vh}
/* ===== 28 sept. (cg) p97 : PHOTO seul, centre, epais et cliquable ; plafond discret ; onglets de la mosaique ; pastille symetrique ===== */
#salle .grave-g b,#yl-atelier .grave-m b{display:none!important}
#salle .grave-g span,#yl-atelier .grave-m span{font-size:5.2vh;font-weight:500;letter-spacing:.5em;text-indent:.5em}
#salle .grave-g{pointer-events:auto;cursor:pointer;transition:opacity .3s}
#salle .grave-g:hover span{opacity:.72}
#yl-nav4 .sep{display:none}
#yl-nav4 button[data-n="mos"]{min-width:58px}
:root{--cpl:#E8E3DA}
#salle{--cpl:#E8E3DA}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) #salle{--cpl:#E8E3DA} }
/* la mosaique : onglets Oeuvres / A propos */
#yl-mos .mos-onglets{display:flex;gap:26px;justify-content:center;width:100%;margin-bottom:6px}
#yl-mos .mos-onglets button{height:auto;min-height:0;width:auto;padding:6px 2px;background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;font-family:inherit;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#CFC9BE;opacity:.6}
#yl-mos .mos-onglets button.on{opacity:1;border-bottom-color:var(--rouge,#E5142C)}
#yl-mos .mos-apropos{display:none;max-width:38em;padding:10px 24px 30px;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-size:19px;line-height:1.6;color:#E9E4DA;text-align:left}
#yl-mos .mos-apropos h3{font-weight:400;font-size:24px;letter-spacing:.06em;margin:0 0 .6em;color:#F3F1EC}
#yl-mos .mos-apropos p{margin:0 0 1em}
#yl-mos .mos-apropos em{color:var(--rouge,#E5142C);font-style:normal}
#yl-mos.apropos .artiste,#yl-mos.apropos .grp{display:none}
#yl-mos.apropos .mos-apropos{display:block}
@media (max-width:760px){ #yl-mos .mos-apropos{font-size:17px;padding:6px 18px 24px} }
/* ===== 28 sept. (ch) p98 : PHOTO plus epais avec l'artiste, menu Artiste, pensees en section ===== */
#salle .grave-g{flex-direction:column!important;align-items:center;gap:.6vh;top:calc(var(--Hm) * -.40)}
#salle .grave-g span,#yl-atelier .grave-m span{font-weight:700;font-size:5.4vh}
#salle .grave-g .art{font-style:normal;font-weight:400;font-size:1.9vh;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:#F7F5F0;opacity:.85;text-shadow:0 -.08vh 0 rgba(0,0,0,.28),0 .12vh .12vh rgba(255,255,255,.45)}
#yl-mos .mos-artistes{display:flex;gap:30px;justify-content:center;width:100%;margin-bottom:2px}
#yl-mos .mos-artistes button{height:auto;min-height:0;width:auto;padding:6px 2px;background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;font-family:inherit;font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:var(--rouge,#E5142C);opacity:.55}
#yl-mos .mos-artistes button.on{opacity:1;border-bottom-color:var(--rouge,#E5142C)}
#yl-mos .noma{display:none}
#yl-mos .mos-vide{display:none;padding:30px;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-size:22px;letter-spacing:.2em;text-transform:uppercase;color:#CFC9BE;opacity:.7}
#yl-mos.autre .artiste,#yl-mos.autre .grp,#yl-mos.autre .mos-apropos,#yl-mos.autre .mos-onglets{display:none}
#yl-mos.autre .mos-vide{display:block}
#salle .grave-g{top:calc(var(--Hm) * -.278)} /* p98 : centre entre le plafond et le haut du premier cadre */
/* ===== 28 sept. (ci) p99 : une ambiance, les saisons, barre de gauche reduite, mosaique a quatre onglets ===== */
#nuit,#cadre,#quoi,#env,#arch{display:none!important}
#yl-ascb{left:calc(26px + env(safe-area-inset-left,0px))!important}
#yl-son{left:calc(70px + env(safe-area-inset-left,0px))!important}
body #yl-mini{left:calc(114px + env(safe-area-inset-left,0px))!important}
.cadre.sonne.vire .galette{visibility:hidden}
/* les saisons : les murs restent neutres ; sol, plafond et mur des pensees changent */
html{--s-sol:#3C3E41;--s-plaf:#2A2B2E;--s-acc:#2F3034}
html[data-saison="automne"]{--s-sol:#5E4330;--s-plaf:#2B2522;--s-acc:#7A3B2A}
html[data-saison="hiver"]{--s-sol:#6A6C70;--s-plaf:#343A42;--s-acc:#1F2A44}
html[data-saison="printemps"]{--s-sol:#8C7358;--s-plaf:#2E302C;--s-acc:#5E7A63}
html[data-saison="ete"]{--s-sol:#9C8766;--s-plaf:#2F2B25;--s-acc:#9C7224}
#salle .station[data-serie="Pensées"]::before{content:"";position:absolute;left:-4.2%;right:-4.2%;top:0;bottom:0;background:var(--s-acc);pointer-events:none}
#salle .station[data-serie="Pensées"] .legende,#salle .station[data-serie="Pensées"] .legende *{color:#F3EDE4!important}
/* la mosaique : Pensees et Contact */
#yl-mos .grp.txt{display:none}
#yl-mos.pensees .grp,#yl-mos.pensees .artiste>.grp:not(.txt){display:none}
#yl-mos.pensees .grp.txt{display:flex}
#yl-mos.pensees .noma{display:none}
#yl-mos.apropos .grp.txt,#yl-mos.contact .grp,#yl-mos.contact .artiste{display:none}
#yl-mos .mos-contact{display:none;width:min(34em,90vw);padding:10px 20px 30px;color:#E9E4DA}
#yl-mos.contact .mos-contact{display:block}
#yl-mos .grp.txt .nomg{display:none}
#yl-mos button[data-pz]{height:auto;min-height:calc(var(--hm,24vh)*.62);width:calc(var(--hm,24vh)*.95);max-width:none;padding:6px;background:#F3F1EC;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
#yl-mos button[data-pz] span{display:flex;align-items:center;justify-content:center;height:100%;min-height:calc(var(--hm,24vh)*.56);padding:10px;background:hsl(var(--t) 58% 88%);color:#221E1A;font-style:italic;font-size:13px;line-height:1.45}
#salle .cadre.vide.pens-c .teinte{background:hsl(var(--t) 60% 88%)!important}
#salle .cadre.vide.pens-c .phrase{color:#221E1A!important}
@media (max-width:1100px){ body #yl-mini .mtxt{display:none} }
/* ===== 28 sept. (cj) p100 : noms de series graves, lecteur en bas a droite, langues dans la mosaique, retour au debut, sol d'une teinte ===== */
#salle .grave-g.grave-s{pointer-events:none;cursor:default}
#salle .grave-g.grave-s span{font-size:3.8vh}
#langs{display:none!important}
#yl-mos #langs{display:flex!important;position:static!important;opacity:1!important;pointer-events:auto!important;flex-wrap:wrap;justify-content:center;gap:4px 14px;max-width:none;height:auto;margin:-4px 0 6px;color:#CFC9BE;font-size:11px;letter-spacing:.14em}
#yl-mos #langs button{display:inline-block!important;height:auto;min-height:0;width:auto;padding:2px 0;color:#CFC9BE;opacity:.55;transform:none!important}
#yl-mos #langs button.on{opacity:1;border-bottom:1px solid var(--rouge,#E5142C)}
#yl-mos #langs button::after{content:none!important}

body #yl-mini{left:auto!important;right:calc(26px + env(safe-area-inset-right,0px))!important;bottom:calc(27px + env(safe-area-inset-bottom,0px))!important;width:auto;height:30px;display:flex;align-items:center;gap:10px}
body #yl-mini svg{display:none!important}
body #yl-mini .mtxt{display:flex!important}
@media (max-width:760px){ body #yl-mini{bottom:calc(20px + env(safe-area-inset-bottom,0px))!important} body #yl-mini .mtxt{width:110px} }
#yl-debut{position:fixed;left:calc(114px + env(safe-area-inset-left,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:9;width:30px;height:30px;padding:3px;border:0;background:none;color:var(--encre);cursor:pointer;opacity:.7}
#yl-debut:hover{opacity:1}
#yl-debut svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
body.dehors #yl-debut,body.mosaique #yl-debut,body.vitre #yl-debut,body:has(#yl-asc.on) #yl-debut{opacity:0;pointer-events:none}
@media (min-width:761px){ body #yl-son{display:block!important;opacity:.7!important;pointer-events:auto!important;left:calc(70px + env(safe-area-inset-left,0px))!important} }
@media (max-width:760px){ #yl-debut{display:none} }
body.dehors #yl-son,body:has(#yl-asc.on) #yl-son{opacity:0!important;pointer-events:none!important}
/* ===== 28 sept. (ck) p101 : porte d'accueil sur la couleur du plafond de la saison, feuilles conservees ; socle retire ===== */
#yl-entree .saison.saison{background:var(--s-plaf)}
#yl-entree .battant{background:color-mix(in srgb,var(--s-plaf) 90%,transparent)}
#yl-entree.verre .battant{background:color-mix(in srgb,var(--s-plaf) 78%,transparent)}
/* ===== 28 sept. (cl) p102 : le son a droite (haut-parleur des bruitages + note qui deplie le lecteur), la maison a gauche, aussi sur mobile ===== */
#yl-debut{left:calc(70px + env(safe-area-inset-left,0px))}
body #yl-son{display:block!important;opacity:.7!important;pointer-events:auto!important;left:auto!important;right:calc(70px + env(safe-area-inset-right,0px))!important;bottom:calc(30px + env(safe-area-inset-bottom,0px))!important}
#yl-note{position:fixed;right:calc(26px + env(safe-area-inset-right,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:9;width:30px;height:30px;padding:3px;border:0;background:none;color:var(--encre);cursor:pointer;opacity:.7;transition:opacity .25s,color .25s}
#yl-note:hover,#yl-note.joue{opacity:1}
#yl-note.joue{color:#C8102E}
#yl-note svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
body.dehors #yl-note,body.vitre #yl-note,body:has(#yl-asc.on) #yl-note{opacity:0;pointer-events:none}
body #yl-mini{display:none!important}
body.mini-ouvert #yl-mini{display:flex!important;right:calc(114px + env(safe-area-inset-right,0px))!important}
@media (max-width:760px){
 #yl-debut{display:block;left:calc(26px + env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px))}
 body #yl-son{bottom:calc(20px + env(safe-area-inset-bottom,0px))!important}
 #yl-note{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
 body.mini-ouvert #yl-mini{right:calc(26px + env(safe-area-inset-right,0px))!important;bottom:calc(132px + env(safe-area-inset-bottom,0px))!important}
}
/* ===== 29 sept. (cm) p103 : un mur par serie (teinte qui suit la lumiere de la saison), Entree / Sortie dans l'ascenseur ===== */
html{--s-lum:#808080}
html[data-saison="automne"]{--s-lum:#C8894A}
html[data-saison="hiver"]{--s-lum:#7C9CC8}
html[data-saison="printemps"]{--s-lum:#9CC08A}
html[data-saison="ete"]{--s-lum:#D8B060}
#salle .station.mur-s::before{content:"";position:absolute;left:-4.2%;right:-4.2%;top:0;bottom:0;pointer-events:none;background:color-mix(in srgb,var(--mur-s) 95%,var(--s-lum))}

#yl-asc .pan li.so em{font-style:normal;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#F3F1EC;opacity:.7;white-space:nowrap}
#yl-asc .pan .bt.entree-m{color:#F3F1EC;display:flex;align-items:center;justify-content:center;padding:0}
#yl-asc .pan .bt.entree-m svg{width:20px;height:20px}
#yl-asc .pan .bt.entree-m:hover{background:#C8102E;border-color:#C8102E}
#yl-asc.cabine .pan .bt.entree-m{opacity:.7}
#yl-asc.cabine .pan .bt.entree-m::after{content:none}
#yl-asc.cabine .pan li.so .bt.entree-m svg{width:22px;height:22px}
/* ===== 29 sept. (cn) p104 : murs par serie recales, menu Artistes deroulant, Entree / Sortie symetriques dans l'ascenseur ===== */
#salle .station.mur-s::before,#salle .station[data-serie="Pensées"]::before{inset:auto;top:0;bottom:0;left:50%;right:auto}
#yl-mos .mos-onglets{flex-wrap:wrap;row-gap:4px;align-items:center}
#yl-mos .mos-art-menu{position:relative}
#yl-mos .mos-art-t{display:flex;align-items:center;gap:9px;height:auto;min-height:0;width:auto;padding:6px 2px;background:none;border:0;border-bottom:1px solid var(--rouge,#E5142C);cursor:pointer;font-family:inherit;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#F3F1EC}
#yl-mos .mos-art-t b{font-weight:inherit}
#yl-mos .mos-art-t i{display:block;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
#yl-mos .mos-art-menu.ouvert .mos-art-t i{transform:translateY(1px) rotate(-135deg)}
#yl-mos .mos-art-menu .mos-artistes{display:none;position:absolute;left:0;top:100%;z-index:5;flex-direction:column;align-items:flex-start;gap:0;width:auto;min-width:100%;margin:8px 0 0;padding:6px 16px;background:#141416;border:1px solid rgba(255,255,255,.12);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#yl-mos .mos-art-menu.ouvert .mos-artistes{display:flex}
#yl-mos .mos-art-menu .mos-artistes button{font-size:12px;letter-spacing:.24em;padding:9px 0;white-space:nowrap;text-align:left}
#yl-mos.autre .mos-onglets{display:flex}
#yl-mos.autre .mos-onglets>button{display:none}
#yl-asc .pan li.so.en{margin-top:0;padding-top:0;border-top:0;margin-bottom:6px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.14)}
#yl-asc.cabine .pan li.so.en{margin-top:0;margin-bottom:8px}
#yl-mos .mos-onglets{position:relative;z-index:6}
#yl-mos .mos-art-menu{z-index:20}
#yl-mos .mos-art-menu .mos-artistes{z-index:20;background:#141416!important;opacity:1}
@media (max-width:760px){ #yl-mos .mos-onglets{gap:14px} #yl-mos .mos-onglets button,#yl-mos .mos-art-t{letter-spacing:.18em;font-size:11px} }
#yl-mos:has(.mos-art-menu.ouvert) #langs{visibility:hidden}
/* ===== 29 sept. (co) p105 : Expos permanentes / Expo temporaire en tete de la mosaique ===== */
#yl-mos .mos-expos{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;width:100%;margin-bottom:10px}
#yl-mos .mos-expos button{height:auto;min-height:0;width:auto;padding:6px 2px;background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;font-family:inherit;font-size:14px;letter-spacing:.28em;text-transform:uppercase;color:var(--rouge,#E5142C);opacity:.55;transition:opacity .2s}
#yl-mos .mos-expos button:hover{opacity:.85}
#yl-mos .mos-expos button.on{opacity:1;border-bottom-color:var(--rouge,#E5142C)}
#yl-mos .mos-temp{display:none;width:100%;text-align:center;margin:18vh 0 0;font-size:22px;letter-spacing:.3em;text-transform:uppercase;color:#F3F1EC;opacity:.85}
#yl-mos.temp>*:not(.mos-expos):not(.mos-temp){display:none!important}
#yl-mos.temp .mos-temp{display:block}
@media (max-width:760px){ #yl-mos .mos-expos{gap:18px} #yl-mos .mos-expos button{font-size:11px;letter-spacing:.16em} }
/* ===== 29 sept. (cp) p106 : les pans de mur sans serie prennent la couleur voisine et vont jusqu'a la cloison ===== */
#salle .station.mur-t::before{z-index:0}
#salle .station.mur-s .pan{background:color-mix(in srgb,var(--mur-s) 95%,var(--s-lum))}
#salle .station[data-serie="Pensées"] .pan{background:var(--s-acc)}
/* ===== 29 sept. (cq) p107 : la couleur de chaque serie demarre pile a la cloison (milieu entre deux tableaux) ===== */
#salle .station.mur-t::before{z-index:-1}
#salle .station.debut-s:not(.bout)::before{left:50%;right:auto;width:min(calc(var(--pas)*1.04),3900px);margin-left:calc(var(--pas)*-.5)}
/* ===== 29 sept. (cr) p108 : sortie avec boutique discrete, point rouge qui fait un tour, poignee decalee ===== */
#yl-sortie.x-porte .info-s{position:absolute;left:50%;top:calc(50% + 44px);transform:translateX(-50%);width:min(90vw,440px);z-index:6;text-align:center;pointer-events:auto;color:#F3F1EC;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif}
#yl-sortie.x-porte .phr-s{margin:0 0 22px;font-size:17px;line-height:1.5;opacity:.85}
#yl-sortie.x-porte .act-s{display:flex;flex-direction:column;gap:10px;align-items:center}
#yl-sortie.x-porte .act-s button,#yl-sortie.x-porte .ret-s{background:none;border:0;border-bottom:1px solid transparent;padding:6px 2px;cursor:pointer;font-family:inherit;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#F3F1EC;opacity:.75}
#yl-sortie.x-porte .act-s button:hover,#yl-sortie.x-porte .act-s button.on{opacity:1;border-bottom-color:var(--rouge,#E5142C)}
#yl-sortie.x-porte .frm-s:not(:empty){margin:16px auto 0;max-width:360px}
#yl-sortie.x-porte .frm-s form.contact{display:flex;flex-direction:column;gap:8px}
#yl-sortie.x-porte .frm-s input[type=email],#yl-sortie.x-porte .frm-s textarea{width:100%;box-sizing:border-box;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:9px 10px;color:#F3F1EC;font:inherit;font-size:15px}
#yl-sortie.x-porte .frm-s .miel{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#yl-sortie.x-porte .frm-s button[type=submit]{align-self:center;background:none;border:1px solid rgba(255,255,255,.3);border-radius:18px;padding:7px 18px;color:#F3F1EC;cursor:pointer;font-family:inherit;letter-spacing:.2em;text-transform:uppercase;font-size:11px}
#yl-sortie.x-porte .ret-s{margin-top:22px;opacity:.55}
#yl-sortie.x-porte .ret-s:hover{opacity:.9}
#yl-sortie.x-porte .yt-s{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:6;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#F3F1EC;opacity:.4;text-decoration:none;white-space:nowrap;pointer-events:auto}
#yl-sortie.x-porte .yt-s:hover{opacity:.75}
#yl-sortie.x-porte .merci-s{top:calc(50% - 30px)}
@media (max-width:760px){ #yl-sortie.x-porte .info-s{top:calc(50% + 24px)} #yl-sortie.x-porte .phr-s{font-size:15px} #yl-sortie.x-porte .act-s button{font-size:11px;letter-spacing:.16em} }
#yl-entree .judas .morph{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s,transform 3.3s cubic-bezier(.3,0,.2,1)}
#yl-entree .judas .morph.go{opacity:1;transform:rotate(360deg)}
#yl-entree .judas .morph.fin{opacity:0}
#yl-entree .judas .morph svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s}
#yl-entree .judas .morph[data-k="1"] svg:nth-child(1),#yl-entree .judas .morph[data-k="2"] svg:nth-child(2),#yl-entree .judas .morph[data-k="3"] svg:nth-child(3),#yl-entree .judas .morph[data-k="4"] svg:nth-child(4){opacity:1}
#yl-entree .battant.d .poignee{margin-left:clamp(12px,1.6vw,24px)}
#yl-sortie.x-porte .info-s .ret-s{position:static!important;transform:none!important;left:auto!important;bottom:auto!important;width:auto!important;height:auto!important;margin:22px auto 0!important;display:inline-block!important;white-space:nowrap}
#yl-sortie.x-porte .frm-s textarea{height:64px;resize:none}
#yl-sortie.x-porte.form .merci-s{top:16%}
#yl-sortie.x-porte.form .info-s{top:calc(16% + 40px)}
#yl-sortie.x-porte .merci-s,#yl-sortie.x-porte .info-s{text-shadow:0 1px 8px rgba(0,0,0,.8)}
/* ===== 29 sept. (cs) p109 : plus de trait au-dessus du 4 dans l ascenseur ===== */
#yl-asc .pan li.so.en,#yl-asc.cabine .pan li.so.en{border-bottom:0!important;border-top:0!important;padding-bottom:4px}
/* ===== 29 sept. (ct) p110 : clavier a 8 chiffres, attente pendant la verification ===== */
/* ===== 29 sept. (cu) p112 : l'etage Cartes — mur d'appel aux createurs de jeux d'auteurs ===== */
#yl-atelier.cartes-e .mur{background:#241820}
#yl-atelier.cartes-e .appel-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);width:min(86vw,560px);text-align:center;color:#F3F1EC;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;z-index:3;pointer-events:auto}
#yl-atelier.cartes-e .appel-c .eventail{position:relative;height:22vh;margin:0 auto 3vh;width:22vh}
#yl-atelier.cartes-e .appel-c .eventail i{position:absolute;left:50%;bottom:0;width:9.5vh;height:15vh;margin-left:-4.75vh;border-radius:.8vh;background:radial-gradient(circle at 50% 50%,#C8102E 0 .9vh,transparent 1vh),repeating-linear-gradient(45deg,#2B1B26 0 .6vh,#34212E .6vh 1.2vh);box-shadow:0 0 0 .25vh #C9A45C inset,0 .6vh 1.6vh rgba(0,0,0,.5);transform-origin:50% 120%;transform:rotate(calc(var(--k) * 11deg))}
#yl-atelier.cartes-e .appel-c b{display:block;font-weight:400;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:#C9A45C}
#yl-atelier.cartes-e .appel-c h3{margin:.6em 0 .3em;font-weight:300;font-size:clamp(26px,4.4vh,40px);letter-spacing:.14em;text-transform:uppercase}
#yl-atelier.cartes-e .appel-c p{margin:0 auto 1.4em;max-width:30em;font-size:17px;line-height:1.5;opacity:.8}
#yl-atelier.cartes-e .appel-b{background:none;border:0;border-bottom:1px solid var(--rouge,#E5142C);padding:6px 2px;cursor:pointer;font-family:inherit;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#F3F1EC}
#yl-atelier.cartes-e .appel-b.on{opacity:.6}
#yl-atelier.cartes-e .frm-c:not(:empty){margin:16px auto 0;max-width:380px;text-align:left}
#yl-atelier.cartes-e .frm-c form.contact{display:flex;flex-direction:column;gap:8px}
#yl-atelier.cartes-e .frm-c input[type=email],#yl-atelier.cartes-e .frm-c textarea{width:100%;box-sizing:border-box;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:9px 10px;color:#F3F1EC;font:inherit;font-size:15px}
#yl-atelier.cartes-e .frm-c textarea{height:90px;resize:none}
#yl-atelier.cartes-e .frm-c .miel{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#yl-atelier.cartes-e .frm-c button[type=submit]{align-self:center;background:none;border:1px solid rgba(255,255,255,.3);border-radius:18px;padding:7px 18px;color:#F3F1EC;cursor:pointer;font-family:inherit;letter-spacing:.2em;text-transform:uppercase;font-size:11px}
@media (max-width:760px){ #yl-atelier.cartes-e .appel-c .eventail{height:16vh;width:16vh} #yl-atelier.cartes-e .appel-c .eventail i{width:7vh;height:11vh;margin-left:-3.5vh} #yl-atelier.cartes-e .appel-c p{font-size:15px} }
#yl-atelier.cartes-e .cloison,#yl-atelier.cartes-e .plaf{background:#1E151B!important;box-shadow:none!important}
#yl-atelier.cartes-e .appel-c{top:52%;transform:translate(-50%,-50%);width:min(70vw,64vh)}
#yl-atelier.cartes-e .appel-c .eventail{height:12vh;width:12vh;margin-bottom:2vh}
#yl-atelier.cartes-e .appel-c .eventail i{width:5.2vh;height:8.2vh;margin-left:-2.6vh;border-radius:.5vh}
#yl-atelier.cartes-e .appel-c b{font-size:1.3vh}
#yl-atelier.cartes-e .appel-c h3{font-size:3.6vh;margin:.5vh 0 .8vh}
#yl-atelier.cartes-e .appel-c p{font-size:1.7vh;margin-bottom:2vh}
#yl-atelier.cartes-e .appel-b{font-size:1.4vh;padding:.6vh .2vh}
#yl-atelier.cartes-e .frm-c:not(:empty){margin-top:1.6vh;max-width:40vh}
#yl-atelier.cartes-e .frm-c input[type=email],#yl-atelier.cartes-e .frm-c textarea{font-size:1.6vh;padding:.9vh 1vh}
#yl-atelier.cartes-e .frm-c textarea{height:8vh}
@media (max-width:760px){ #yl-atelier.cartes-e .appel-c .eventail{height:10vh;width:10vh} #yl-atelier.cartes-e .appel-c .eventail i{width:4.4vh;height:7vh;margin-left:-2.2vh} #yl-atelier.cartes-e .appel-c p{font-size:1.6vh} }
#yl-atelier.cartes-e .appel-c{top:40%}
#yl-cartes-f{position:fixed;inset:0;z-index:60;background:rgba(10,8,10,.72);display:flex;align-items:center;justify-content:center;padding:20px}
#yl-cartes-f .bx{position:relative;width:min(92vw,420px);background:#1E151B;border:1px solid rgba(201,164,92,.35);border-radius:12px;padding:26px 22px 20px;color:#F3F1EC;font-family:"Cormorant Garamond","EB Garamond",Georgia,serif}
#yl-cartes-f h3{margin:0 0 14px;font-weight:300;font-size:22px;letter-spacing:.14em;text-transform:uppercase;text-align:center}
#yl-cartes-f .fx{position:absolute;right:10px;top:6px;background:none;border:0;color:#F3F1EC;font-size:26px;cursor:pointer;opacity:.7}
#yl-cartes-f form.contact{display:flex;flex-direction:column;gap:8px}
#yl-cartes-f input[type=email],#yl-cartes-f textarea{width:100%;box-sizing:border-box;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:9px 10px;color:#F3F1EC;font:inherit;font-size:15px}
#yl-cartes-f textarea{height:110px;resize:none}
#yl-cartes-f .miel{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#yl-cartes-f button[type=submit]{align-self:center;background:none;border:1px solid rgba(255,255,255,.3);border-radius:18px;padding:7px 18px;color:#F3F1EC;cursor:pointer;font-family:inherit;letter-spacing:.2em;text-transform:uppercase;font-size:11px}
#yl-cartes-f .etat{text-align:center;font-size:14px;opacity:.8}
/* ===== 29 sept. (cv) p114 : etiquette au dos des photos, « Acquérir cette œuvre », indice sur le cartel ===== */
.cadre .dos .etiq{position:absolute;left:10%;right:10%;bottom:9%;display:flex;flex-direction:column;align-items:center;gap:calc(var(--Hm)*.006);text-align:center;color:inherit;pointer-events:none}
.cadre .dos .etiq i{display:block;font-style:normal;line-height:1.3}

.cadre .dos .etiq .e2{font-size:calc(var(--Hm)*.012);opacity:.65}

.cadre .dos .etiq .acq{pointer-events:auto;margin-top:calc(var(--Hm)*.006);background:none;border:0;border-bottom:1px solid var(--rouge,#C8102E);padding:calc(var(--Hm)*.004) 2px;cursor:pointer;font-family:inherit;font-size:calc(var(--Hm)*.012);letter-spacing:.22em;text-transform:uppercase;color:inherit}
.cadre .dos .etiq .acq:hover{color:var(--rouge,#C8102E)}
.legende .dispo{display:block;margin-top:.5em;font-style:normal;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
#yl-cartes-f.acq-f .sous{margin:-6px 0 14px;text-align:center;font-size:15px;opacity:.75}
#yl-cartes-f.acq-f .acq-ch{display:flex;flex-direction:column;gap:8px}
#yl-cartes-f.acq-f .acq-ch label{display:flex;flex-direction:column;gap:4px;font-size:13px;letter-spacing:.06em;opacity:.9}
#yl-cartes-f.acq-f .acq-ch select,#yl-cartes-f.acq-f .acq-ch input{width:100%;box-sizing:border-box;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:9px 10px;color:#F3F1EC;font:inherit;font-size:15px}
#yl-cartes-f.acq-f textarea{height:80px}
.cadre .dos .cart .etiq{position:static;display:block;margin-top:calc(var(--Hm)*.008)}
.cadre .dos .cart .etiq .acq{font-size:calc(var(--Hm)*.011);letter-spacing:.2em}
#yl-cartes-f.acq-f .sous b,#yl-cartes-f.acq-f .sous span,#yl-cartes-f.acq-f .sous em{display:block}
#yl-cartes-f.acq-f .sous b{font-weight:400;font-size:17px;margin-bottom:4px}
#yl-cartes-f.acq-f .sous span{font-size:14px;opacity:.8}
#yl-cartes-f.acq-f .sous em{font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-top:6px}
#yl-cartes-f form.contact{width:100%!important;max-width:none!important;margin:0!important}
#yl-cartes-f form.contact input[type=email],#yl-cartes-f form.contact textarea,#yl-cartes-f .acq-ch select,#yl-cartes-f .acq-ch input{width:100%!important;max-width:none!important}

/* ===== (cw) p115 : le logo youlab sur la porte ; le o est le judas, un vinyle plein pose sur la separation ===== */
#yl-entree .nom{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:baseline;top:var(--ylY)!important;bottom:auto!important;left:0!important;right:0!important;width:auto!important;margin:-.6255em 0 0!important;font-size:var(--ylF)!important;line-height:1!important;letter-spacing:.14em!important;text-indent:0!important;text-transform:none!important;opacity:1;font-weight:300;z-index:3}
#yl-entree .nom .nm-g{text-align:right}
#yl-entree .nom .nm-d{text-align:left;padding-left:.14em}
#yl-entree .nom .nm-o{position:relative;display:block;width:1ex;height:1ex}
#yl-entree .nom .nm-o .judas{position:absolute!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;width:100%!important;height:100%!important;margin:0!important;border:0!important;background:var(--encre)!important;transform:none!important;pointer-events:auto}
#yl-entree .nom .nm-o .judas .oeil{left:31%!important;top:31%!important;width:38%!important;height:38%!important;margin:0!important;background:#C8102E!important}
#yl-entree .nom .nm-o .judas .oeil::after{content:"";position:absolute;left:50%;top:50%;width:22%;height:22%;margin:-11% 0 0 -11%;border-radius:50%;background:var(--fond)}
#yl-entree.off .nom{opacity:0!important}
#yl-entree{--ylF:clamp(52px,5.6vw,76px)}
#yl-entree .battant.g{border-right:0!important}
#yl-entree .battant.g::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;z-index:1;background:color-mix(in srgb,var(--encre) 30%,transparent);pointer-events:none;
  -webkit-mask:linear-gradient(to bottom,#000 0,#000 calc(var(--ylY) - var(--ylF)*.5),transparent calc(var(--ylY) - var(--ylF)*.5),transparent calc(var(--ylY) + var(--ylF)*.5),#000 calc(var(--ylY) + var(--ylF)*.5));
  mask:linear-gradient(to bottom,#000 0,#000 calc(var(--ylY) - var(--ylF)*.5),transparent calc(var(--ylY) - var(--ylF)*.5),transparent calc(var(--ylY) + var(--ylF)*.5),#000 calc(var(--ylY) + var(--ylF)*.5))}
@media (min-height:700px){ #yl-entree #yl-code{top:calc(38.2% + var(--ylF)*.5 + 30px);transform:translateX(-50%)} #yl-entree.code #yl-code{animation:ylcodein2 .45s ease both} }
/* ===== (cx) p116 : sans poignee, le logo au centre ; il remonte au partage d'or quand le clavier du code s'ouvre ; le vinyle respire ===== */
@property --ylY{syntax:'<percentage>';inherits:true;initial-value:50%}
#yl-entree{--ylY:50%;transition:opacity .7s ease 1.2s,--ylY .9s cubic-bezier(.3,0,.2,1)}
#yl-entree.code{--ylY:38.2%}
#yl-entree .poignee,#yl-entree .battant.d .poignee{display:none!important}
#yl-entree .nom .nm-o::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;animation:ylpouls 3.4s ease-in-out 2.5s infinite}
@keyframes ylpouls{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--encre) 0%,transparent)}50%{box-shadow:0 0 0 .09em color-mix(in srgb,var(--encre) 16%,transparent),0 0 .35em .05em color-mix(in srgb,var(--encre) 22%,transparent)}}
#yl-entree.code .nom .nm-o::after,#yl-entree.off .nom .nm-o::after{animation:none}
@media (prefers-reduced-motion:reduce){ #yl-entree .nom .nm-o::after{animation:none} #yl-entree{transition:opacity .7s ease 1.2s} }

/* ===== (cy) p118 : l'accueil au rez-de-chaussee ; la cabine attend deja fermee, derriere la porte ; on monte ===== */
#yl-asc.sans,#yl-asc.sans *{transition:none!important;animation:none!important}
#yl-asc.bas{z-index:19}
#yl-asc.rez .puits{opacity:1}
#yl-asc.rez .pan .bt[data-e]:not([data-e="0"]){opacity:.55;transition:opacity .3s}
#yl-asc.rez .pan .bt[data-e]:hover{opacity:1}
#yl-asc.rez .pan .bt[data-e="0"]{opacity:1}

/* ===== (cz) p121 : etage Photo, plus de cadre : la photo contrecollee sur bois flotte devant le mur ; un fil de lumiere en dessine le bord ===== */
#salle .mur.photo .cadre:not(.vide):not(.sonne){border:0!important;padding:0!important;background:transparent!important;
  box-shadow:0 0 0 1px rgba(255,248,236,.10),0 -1px 0 0 rgba(255,244,226,.30),0 calc(var(--Hm)*.026) calc(var(--Hm)*.05) calc(var(--Hm)*-.012) rgba(0,0,0,.62),0 0 calc(var(--Hm)*.045) rgba(255,240,220,.07)}
#salle .mur.photo .cadre:not(.vide):not(.sonne)>img{display:block}
#salle .mur.photo .cadre:not(.vide):not(.sonne)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(255,246,232,.07),rgba(255,246,232,0) 28%)}
#salle .mur.photo .cadre.epais:not(.vide):not(.sonne)::before{left:0;top:0;bottom:0;width:calc(var(--Hm)*.022);background:linear-gradient(90deg,#6E4A2C,#8A6038);border:0}
#salle .mur.photo .cadre.epais:not(.vide):not(.sonne)::after{left:auto;right:0;top:0;bottom:0;width:calc(var(--Hm)*.022);background:linear-gradient(90deg,#8A6038,#6E4A2C);border:0}

/* ===== (da) p122 : eclairage musee de l'etage Photo — une decoupe de lumiere chaude autour de chaque photo, le mur plus sombre ===== */
#salle .mur.photo .cadre:not(.vide):not(.sonne):not(.epais)::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:calc(var(--Hm)*-.032);right:calc(var(--Hm)*-.032);top:calc(var(--Hm)*-.05);bottom:calc(var(--Hm)*-.034);border-radius:calc(var(--Hm)*.01);
  background:linear-gradient(to bottom,rgba(255,226,184,calc(.19*var(--ylLum))),rgba(255,226,184,calc(.09*var(--ylLum))) 50%,rgba(255,226,184,calc(.035*var(--ylLum))));
  filter:blur(calc(var(--Hm)*.018))}
/* p123 : la decoupe ne s'allume qu'a l'arrivee devant l'oeuvre, puis s'eteint */
@property --ylLum{syntax:'<number>';inherits:false;initial-value:0}

/* ===== (db) p127 : logo final — YouLab en Cormorant gras ; le O est un disque rouge plein, plus gros que les lettres, avec un lisere detache ===== */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cg-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cg-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
#yl-entree .nom{font-weight:700!important;letter-spacing:.06em!important}
#yl-entree .nom .nm-d{padding-left:.06em}
#yl-entree .nom .nm-o{width:1.35ex;height:1.35ex;top:.175ex}
#yl-entree .nom .nm-o .judas{background:#C8102E!important;outline:calc(1.35ex*.03) solid var(--encre);outline-offset:calc(1.35ex*.035)}
#yl-entree .nom .nm-o .judas .oeil{left:46%!important;top:46%!important;width:8%!important;height:8%!important;background:var(--fond)!important}
#yl-entree .nom .nm-o .judas .oeil::after{display:none}

/* ===== 29 sept. (df) p135 : le judas reste cache tant que le script ne l a pas place dans le O (plus de rond rouge en haut au chargement) ===== */
#yl-entree .battant .judas{visibility:hidden}

/* ===== 29 sept. (dg) p137 : ascenseur, rez-de-chaussee en bas : Entree | 0 | Sortie ===== */
#yl-asc .pan li.so.rdc{display:flex!important;flex-direction:row;align-items:center;justify-content:center;gap:10px;margin:6px 0 0!important;padding:0!important;border:0!important}
#yl-asc .pan li.so.rdc .zero{font-size:34px;line-height:44px;height:44px;padding:0 4px;color:#F3F1EC;opacity:.7;font-variant-numeric:lining-nums;pointer-events:none}
#yl-asc .pan li.so.rdc.ici .zero{opacity:1}
#yl-asc .pan li.so.rdc .zero b{font-weight:inherit}
@media (max-width:560px){ #yl-asc .pan li.so.rdc .zero{font-size:28px;line-height:36px;height:36px} }
#yl-asc .pan li.so.rdc{padding-left:29px!important}

/* ===== 29 sept. (di) p139 : etage Photo, la salle baisse quand on s approche d une photo ; la photo garde sa lumiere ===== */

/* ===== 29 sept. (dj) p140 : porte d'entree en automne — fond brun presque noir, feuilles plus lumineuses (memes formes, memes vitesses) ===== */
html[data-saison="automne"] #yl-entree .saison.saison{background:#1E1915}
html[data-saison="automne"] #yl-entree .battant{background:color-mix(in srgb,#1E1915 80%,transparent)}
html[data-saison="automne"] #yl-entree.verre .battant{background:color-mix(in srgb,#1E1915 70%,transparent)}
html[data-saison="automne"] #yl-entree .saison.automne .c1{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='300'><path d='M40 30c16 8 30 30 24 56-10-6-28-18-30-44z' fill='%23E0843A' opacity='.9'/><path d='M150 110c-14-12-12-38 6-50 6 14 8 32-6 50z' fill='%23F2B04A' opacity='.9'/><path d='M90 220c6-18 24-24 40-16-6 12-22 22-40 16z' fill='%23D65A34' opacity='.85'/><path d='M190 250c-16-4-24-22-16-38 10 6 20 20 16 38z' fill='%23F5C85C' opacity='.85'/></svg>")}
html[data-saison="automne"] #yl-entree .saison.automne .c2{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='300'><path d='M40 30c16 8 30 30 24 56-10-6-28-18-30-44z' fill='%23E0843A' opacity='.9'/><path d='M150 110c-14-12-12-38 6-50 6 14 8 32-6 50z' fill='%23F2B04A' opacity='.9'/><path d='M90 220c6-18 24-24 40-16-6 12-22 22-40 16z' fill='%23D65A34' opacity='.85'/><path d='M190 250c-16-4-24-22-16-38 10 6 20 20 16 38z' fill='%23F5C85C' opacity='.85'/></svg>")}
html[data-saison="automne"] #yl-entree .saison.automne .c3{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='300'><path d='M40 30c16 8 30 30 24 56-10-6-28-18-30-44z' fill='%23E0843A' opacity='.9'/><path d='M150 110c-14-12-12-38 6-50 6 14 8 32-6 50z' fill='%23F2B04A' opacity='.9'/><path d='M90 220c6-18 24-24 40-16-6 12-22 22-40 16z' fill='%23D65A34' opacity='.85'/><path d='M190 250c-16-4-24-22-16-38 10 6 20 20 16 38z' fill='%23F5C85C' opacity='.85'/></svg>")}
html[data-saison="automne"] #yl-entree .saison.automne .c1{opacity:.95} html[data-saison="automne"] #yl-entree .saison.automne .c2{opacity:.7} html[data-saison="automne"] #yl-entree .saison.automne .c3{opacity:.8}

/* ===== 29 sept. (dk) p141 : accueil d'automne plus contraste ; etage Photo, un plafond de branches et de feuilles en ombres ===== */
html[data-saison="automne"] #yl-entree .battant{background:color-mix(in srgb,#1E1915 62%,transparent)}
html[data-saison="automne"] #yl-entree.verre .battant{background:color-mix(in srgb,#1E1915 52%,transparent)}
html[data-saison="automne"] #yl-entree .saison.automne .c1{opacity:1} html[data-saison="automne"] #yl-entree .saison.automne .c2{opacity:.85} html[data-saison="automne"] #yl-entree .saison.automne .c3{opacity:.95}

/* ===== 29 sept. (dl) p143 : accueil d automne, les feuilles sans voile sur le fond fonce (comme porte ouverte) ; battants opaques et O rouge en attente tant que le script n a pas tout pose ===== */
html[data-saison="automne"] #yl-entree .battant,html[data-saison="automne"] #yl-entree.verre .battant{background:#1E1915}
html[data-saison="automne"] #yl-entree:has(.saison) .battant,html[data-saison="automne"] #yl-entree.verre:has(.saison) .battant{background:transparent}
#yl-entree .nom .nm-o:empty{background:#C8102E;border-radius:50%}

/* ===== 30 sept. (dn) p145 : etage 1, l'ouverture des portes revele la salle ===== */
#yl-asc.devoile .puits{background:transparent!important;transition:none!important}
#yl-asc.devoile .puits .saison,#yl-asc.devoile .puits .gaine{opacity:0!important;transition:none!important}
#yl-asc.devoile .front::after,#yl-asc.cabine.devoile .front::after{opacity:0!important;transition:opacity .6s ease}
body>.yl-cp.vite{transition:opacity .25s ease!important}
/* p148 : derriere les portes, la salle est deja la ; c'est l'ouverture des portes qui la devoile */
/* p148 : titres de series devant les cadres (plus coupes par les photos) */
#salle .grave-g.grave-s{transform:translate(-50%,-50%) translateZ(calc(var(--Hm) * .05))}

/* ===== 30 sept. (dr) p153 : plus de vue de loin ; serie et position au-dessus de la barre ===== */
body:not(.atelier) #yl-nav4 [data-n="recul"],body:not(.atelier) #yl-nav4 [data-n="proche"],#banc{display:none!important}

/* p154 : les lettres de la legende brillent a l'arrivee (instantane), puis s'estompent doucement */
#salle .station .legende{transition:filter 3.5s ease-in-out,text-shadow 3.5s ease-in-out}
#salle .station .legende.eclat{transition:filter 1.8s ease-out,text-shadow 1.8s ease-out;filter:brightness(1.9);text-shadow:0 0 .6em rgba(255,244,228,.45)}
@media (prefers-reduced-motion:reduce){ #salle .station .legende{transition:none} }

/* ===== 30 sept. p156 : montee de l'entree a l'etage Photo — l'etage 0 et ses feuilles descendent, une dalle epaisse passe, l'etage Photo s'entrevoit ===== */
#yl-asc .puits.monte0{background:transparent}
#yl-asc .puits.monte0 .niv.cible{background:transparent;filter:none}
#yl-asc .puits.monte0 .niv.cible::before,#yl-asc .puits.monte0 .niv.cible b,#yl-asc .puits.monte0 .niv.cible span{display:none}
#yl-asc .puits.monte0 .niv.rez0 .saison{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}
#yl-asc .puits.monte0 .niv.rez0 .dalle{z-index:2;height:18vh;box-shadow:inset 0 -1.6vh 0 #3E3F42,inset 0 1.2vh 0 rgba(255,255,255,.08),0 2vh 4vh rgba(0,0,0,.6)}
#yl-asc .puits.monte0 .niv.rez0 b{z-index:2}
/* p156 : l'accueil sur un fond uni brun tres sombre, sans feuilles ; seul signe, le o rouge du logo */
#yl-entree .saison.saison.saison{background:#1E1915}
#yl-entree .saison i{display:none!important}
/* p156 : pendant cette montee, la salle reste affichee derriere l'etage Photo (elle est masquee pendant les autres trajets) ; vitre un peu moins sombre */
body:has(#yl-asc.roule .puits.monte0) #scene{visibility:visible}
#yl-asc.cabine:has(.puits.monte0) .front::after{background:rgba(8,8,10,.5)}

/* ===== 30 sept. p157 : icones des coins homogenes, nom au survol, estompees au repos devant une oeuvre ===== */
:is(#yl-ascb,#yl-debut,#yl-son,#yl-note){width:30px!important;height:30px!important;padding:3px!important;box-sizing:border-box;color:#EDE8E0}
:is(#yl-ascb,#yl-debut,#yl-son,#yl-note) svg{display:block;width:100%!important;height:100%!important}
body:not(.dehors):not(.vitre):not(.mosaique):not(:has(#yl-asc.on)) :is(#yl-ascb,#yl-debut,#yl-son,#yl-note):not(.joue){opacity:.7!important}
body:not(.dehors):not(.vitre):not(.mosaique):not(:has(#yl-asc.on)) :is(#yl-ascb,#yl-debut,#yl-son,#yl-note):hover{opacity:1!important}
:is(#yl-ascb,#yl-debut,#yl-son,#yl-note)::after{content:attr(aria-label);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);font-size:9px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:#EDE8E0;opacity:0;transition:opacity .25s;pointer-events:none;font-family:inherit}
:is(#yl-ascb,#yl-debut,#yl-son,#yl-note):is(:hover,:focus-visible)::after{opacity:.6}
@media (hover:none){ :is(#yl-ascb,#yl-debut,#yl-son,#yl-note)::after{display:none} }
:is(#yl-ascb,#yl-debut,#yl-son,#yl-note,#yl-mob-b){transition:opacity .4s ease,filter 1.2s ease}
body.repos :is(#yl-ascb,#yl-debut,#yl-son,#yl-note,#yl-mob-b){filter:opacity(.15)}
/* p157 : alignement (Dieter Rams : ordre, peu d'elements, respiration) — memes dimensions, meme trait, centrees sur la barre du milieu, 28 px d'ecart */
:is(#yl-ascb,#yl-debut,#yl-son,#yl-note) svg{margin:0!important;stroke-width:1.4!important}
@media (min-width:761px){
  body :is(#yl-ascb,#yl-debut,#yl-son,#yl-note){top:auto!important;bottom:calc(25px + env(safe-area-inset-bottom,0px))!important;margin:0!important}
  body #yl-ascb{left:calc(32px + env(safe-area-inset-left,0px))!important;right:auto!important}
  body #yl-debut{left:calc(90px + env(safe-area-inset-left,0px))!important;right:auto!important}
  body #yl-note{right:calc(32px + env(safe-area-inset-right,0px))!important;left:auto!important}
  body #yl-son{right:calc(90px + env(safe-area-inset-right,0px))!important;left:auto!important}
}
html body :is(#yl-ascb,#yl-debut,#yl-son,#yl-note) svg{width:24px!important;height:24px!important;margin:0!important}

/* ===== 30 sept. p158 : accueil presque noir (la matiere des battants viendra au run suivant : rouille foncee tirant vers le noir) ===== */
#yl-entree .saison.saison.saison{background:#0D0B09}
html #yl-entree .battant.battant,html #yl-entree.verre .battant.battant{background-color:#0D0B09!important}

/* ===== 30 sept. p159 : la porte d'accueil en rouille sombre unie, tirant vers le noir ; aucune matiere ; le o rouge reste le seul signe ===== */
#yl-entree .saison.saison.saison{background:#22110A}
html #yl-entree .battant.battant,html #yl-entree.verre .battant.battant,html #yl-entree .battant.d.battant{background:#22110A!important}

/* ===== 30 sept. p160 : icones des coins sur la meme ligne que les pictogrammes de la barre centrale, nom dessous comme au centre, meme grossissement au survol ===== */
@media (min-width:761px){
  body :is(#yl-ascb,#yl-debut,#yl-son,#yl-note){bottom:calc(32px + env(safe-area-inset-bottom,0px))!important;overflow:visible}
  :is(#yl-ascb,#yl-debut,#yl-son,#yl-note)::after{top:28px;bottom:auto;opacity:.6;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif}
  :is(#yl-ascb,#yl-debut,#yl-son,#yl-note):is(:hover,:focus-visible)::after{opacity:1}
}
:is(#yl-ascb,#yl-debut,#yl-son,#yl-note) svg,#yl-nav4 button b{transition:transform .2s ease;transform-origin:50% 50%}
:is(#yl-ascb,#yl-debut,#yl-son,#yl-note):hover svg,#yl-nav4 button:hover b{transform:scale(1.18)}
@media (prefers-reduced-motion:reduce){ :is(#yl-ascb,#yl-debut,#yl-son,#yl-note):hover svg,#yl-nav4 button:hover b{transform:none} }
/* p161 : accueil rouille quasi noire */
#yl-entree .saison.saison.saison{background:#120806}
html #yl-entree .battant.battant,html #yl-entree.verre .battant.battant,html #yl-entree .battant.d.battant{background:#120806!important}

/* ===== 30 sept. p162 : toute la navigation dans la barre centrale ===== */
body :is(#yl-ascb,#yl-debut,#yl-son,#yl-note){display:none!important}
#yl-nav4 button{min-width:50px}
#yl-nav4 button.ico b{display:flex;align-items:center;justify-content:center;height:24px}
#yl-nav4 button.ico b svg{display:block;width:19px;height:19px;margin:0;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#yl-nav4 button.joue{color:#C8102E}
@media (max-width:760px){ #yl-nav4 button span{display:none} #yl-nav4 button,#yl-nav4 button[data-n="mos"]{min-width:34px;padding:8px 3px} #yl-nav4{max-width:calc(100vw - 16px);gap:0} }

/* ===== 30 sept. p162 : ascenseur sans 3D : une porte a deux battants sur toute la largeur de l'ecran ===== */
#yl-asc svg.cube{display:none!important}
#yl-asc .puits{display:none!important}
#yl-asc .front,#yl-asc.cabine .front{inset:0!important;overflow:hidden}
#yl-asc .front::after,#yl-asc.cabine .front::after{display:none!important}
#yl-asc .porte,#yl-asc.cabine .porte,#yl-asc.roule.cabine .porte,html.leger #yl-asc.cabine .porte{width:50%;background:#120806!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:rgba(255,255,255,.07)!important;transition-timing-function:cubic-bezier(.6,0,.3,1)}
#yl-asc .porte::after,#yl-asc.cabine .porte::after{display:none!important}
#yl-asc .porte.g{box-shadow:inset -18px 0 30px -20px rgba(0,0,0,.8)}
#yl-asc .porte.d{box-shadow:inset 18px 0 30px -20px rgba(0,0,0,.8)}

/* ===== 30 sept. p165 : la baisse de lumiere se fait dans la salle 3D (plus de voile devant l'ecran, plus de fenetre plate derriere le tableau qui tourne) ===== */

#salle .face.mur::before,#salle .face.sol::after,#salle .face.plafond::after{content:"";position:absolute;inset:0;background:rgba(6,5,4,.62);opacity:0;pointer-events:none;transition:opacity 1s ease}
body.nuit #salle .face.mur::before,body.nuit #salle .face.sol::after,body.nuit #salle .face.plafond::after{opacity:1;transition:opacity 3s ease-in-out}
/* p240 : la baisse de lumiere ne porte plus que sur les deux stations de chaque cote (.voisin, posee par le script), plus sur les 70 */
#salle .station.voisin{transition:filter 1s ease}
body.nuit #salle .station.voisin{filter:brightness(.38);transition:filter 3s ease-in-out}
@media (prefers-reduced-motion:reduce){ #salle .face::before,#salle .face::after,#salle .face.mur>*{transition:none!important} }
/* p165 : le pan de mur, le rail et le spot de la station regardee s'assombrissent aussi ; seul le tableau (et sa legende) garde sa lumiere */
#salle .station.ici>:not(.tableau){transition:filter 1s ease}
body.nuit #salle .station.ici>:not(.tableau){filter:brightness(.38);transition:filter 3s ease-in-out}

/* ===== 30 sept. p166 : barre sans titre, centree dans la bande du bas ; battants 1,3 s cales sur le son ; cadre epais pendant le tour ===== */

@media (min-width:761px){ #yl-nav4{bottom:max(4px,calc(4.86vh - 26.5px))} }
#yl-asc .porte,#yl-asc.ouvre .porte,#yl-asc.cabine .porte,#yl-asc.cabine.ouvre .porte{transition:transform 1.05s cubic-bezier(.6,0,.3,1)!important} /* p257 */
#salle .mur.photo .cadre.epais:not(.vide):not(.sonne)::before,#salle .mur.photo .cadre.epais:not(.vide):not(.sonne)::after{width:calc(var(--Hm)*.045)}

/* ===== 30 sept. p167 : tour fluide (faces echangees par visibilite), cadre un peu moins epais ; salle jamais masquee pendant le trajet ===== */
.cadre .dos{display:flex!important;visibility:hidden}
.cadre.dosvis .dos{visibility:visible}
#salle .mur.photo .cadre.epais:not(.vide):not(.sonne)::before,#salle .mur.photo .cadre.epais:not(.vide):not(.sonne)::after{width:calc(var(--Hm)*.032)}
body:has(#yl-asc.roule) #scene{visibility:visible}

/* ===== 30 sept. p171 : plus de cloisons ; titre de serie sur une ligne, visible seulement pour la serie regardee ===== */

#salle .grave-g.grave-s span{white-space:nowrap}
#salle .grave-g.grave-s{transition:opacity .8s ease}
#salle .grave-g.grave-s.hors{opacity:0}

/* p172 : bouton Bruitages de la barre : haut-parleur barre quand les bruitages sont coupes */
#yl-nav4 button[data-n="son"] .x{opacity:0;transition:opacity .2s}
#yl-nav4 button[data-n="son"] .n{transition:opacity .2s}
#yl-nav4 button[data-n="son"].muet .x{opacity:1}
#yl-nav4 button[data-n="son"].muet .n{opacity:.4}

/* ===== 30 sept. p173 : panneaux de salle en tete de serie ; tableau a deux faces qui tourne d'un seul mouvement ===== */
#salle .grave-g.grave-s{display:none!important}
#salle .station .panneau-s{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--Hm)*.018);white-space:nowrap;pointer-events:none;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;color:#F7F5F0}
#salle .station .panneau-s b{font-weight:600;font-size:calc(var(--Hm)*.075);letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;text-shadow:0 -.08vh 0 rgba(0,0,0,.25),0 .1vh .2vh rgba(255,255,255,.08);opacity:.92}
#salle .station .panneau-s i{font-style:normal;font-size:calc(var(--Hm)*.02);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;opacity:.55}
.cadre.tour3d{transform-style:preserve-3d}
.cadre.tour3d>img,.cadre.tour3d .dos{visibility:visible!important;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.cadre.tour3d .dos{transform:rotateY(180deg)}
.cadre.tour3d .legende{-webkit-backface-visibility:hidden;backface-visibility:hidden}
#salle .station .legende[hidden]{display:none!important}

/* ===== 30 sept. p174 : de l'entree a l'etage Photo, on voit passer la dalle entre les deux etages, puis la salle apparait ===== */
#yl-asc .front .gaine0{position:absolute;left:0;right:0;top:0;height:216vh;z-index:0;pointer-events:none;transform:translateY(-116vh);transition-property:transform;transition-timing-function:cubic-bezier(.45,0,.35,1);will-change:transform}
#yl-asc .front .gaine0.va{transform:translateY(0)}
#yl-asc .gaine0 i{position:absolute;left:0;right:0;display:block}
#yl-asc .gaine0 .ciel{top:0;height:100vh;background:linear-gradient(to bottom,transparent 70%,rgba(8,6,5,.55))}
#yl-asc .gaine0 .dalle0{top:100vh;height:16vh;background:#1A1210;box-shadow:inset 0 1px 0 rgba(237,232,224,.22),inset 0 -1px 0 rgba(237,232,224,.10),inset 0 -2.2vh 0 #0F0A08}
#yl-asc .gaine0 .trou{top:116vh;height:100vh;background:#0B0B0D}
html body #yl-asc.m0.cabine .porte{transition:transform 1.05s cubic-bezier(.6,0,.3,1),opacity .45s ease!important}
html body #yl-asc.m0.cabine.roule .porte,html body #yl-asc.m0.cabine.ouvre .porte{opacity:0}
@media (prefers-reduced-motion:reduce){ #yl-asc .front .gaine0{transition:none} }

/* ===== 30 sept. p175 : un seul mur par serie — dans la salle assombrie, le pan de mur de la photo regardee s'assombrit comme ses voisins : la teinte ne change plus qu'a chaque serie ===== */
body.nuit #salle .station.ici::before,body.nuit #salle .station.ici::after{filter:brightness(.38);transition:filter 3s ease-in-out}

/* ===== 30 sept. p176 : tableau en bloc plein pendant le tour ; fleche « voir la serie » sur les panneaux ===== */
.cadre .ep-h,.cadre .ep-b{display:none}
#salle .mur.photo .cadre.tour3d .ep-h,#salle .mur.photo .cadre.tour3d .ep-b{display:block;position:absolute;left:0;right:0;height:calc(var(--Hm)*.032);background:linear-gradient(180deg,#7A5432,#6E4A2C);pointer-events:none}
#salle .mur.photo .cadre.tour3d .ep-h{top:0;transform-origin:center top;transform:rotateX(-90deg)}
#salle .mur.photo .cadre.tour3d .ep-b{bottom:0;transform-origin:center bottom;transform:rotateX(90deg)}
#salle .mur.photo .cadre.tour3d .dos{transform:translateZ(calc(var(--Hm)*-.032)) rotateY(180deg)}
#salle .station .panneau-s .pan-go{position:absolute;left:calc(100% + var(--Hm)*.06);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--Hm)*.006);pointer-events:auto;cursor:pointer;font-style:normal;color:#F7F5F0;opacity:.55;transition:opacity .3s ease}
#salle .station .panneau-s .pan-go u{text-decoration:none;font-size:calc(var(--Hm)*.09);line-height:.8;font-weight:300}
#salle .station .panneau-s .pan-go small{font-size:calc(var(--Hm)*.014);letter-spacing:.28em;text-transform:uppercase;white-space:nowrap}
#salle .station .panneau-s .pan-go:hover,#salle .station .panneau-s .pan-go:focus-visible{opacity:1}
#salle .station:not(.ici) .panneau-s .pan-go{pointer-events:none}
/* p176 : le o du logo vole jusqu'au bouton 0 de l'ascenseur */
.yl-vol{position:fixed;z-index:2147483000;pointer-events:none;box-sizing:border-box;border-radius:50%;background:#C8102E;border:var(--b,2px) solid #C8102E;transition:left 1.2s cubic-bezier(.45,0,.35,1),top 1.2s cubic-bezier(.45,0,.35,1),width 1.2s cubic-bezier(.45,0,.35,1),height 1.2s cubic-bezier(.45,0,.35,1),border-width 1.2s ease,background-color .7s ease .35s,opacity .6s ease}
.yl-vol.va{background-color:transparent}
.yl-vol.fin{opacity:0}
#yl-entree .nom.vole>*{opacity:0!important;transition:opacity .45s ease!important}
#yl-entree .nom.vole .nm-o{transition:none!important}
#yl-asc .pan .bt.appel{box-shadow:0 0 0 1px rgba(200,16,46,.9),0 0 14px rgba(200,16,46,.45)!important;transition:box-shadow .6s ease}

/* ===== 30 sept. p177 : dans la mosaique, les Pensees ont le format des photos — vignettes paysage (3:2) de la meme hauteur ===== */
#yl-mos button[data-pz],#yl-mos .grp.pens button{flex:0 0 auto!important;box-sizing:border-box;height:var(--hm,24vh)!important;min-height:0!important;width:calc(var(--hm,24vh)*1.5)!important;max-width:none!important;padding:0!important;overflow:hidden}
#yl-mos button[data-pz] span,#yl-mos .grp.pens button span{display:flex!important;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%!important;min-height:0!important;padding:0 8%!important;font-size:clamp(8px,calc(var(--hm,24vh)*.11),13px)!important;line-height:1.35!important;text-align:center;overflow:hidden}
#yl-mos .grp.pens button span small{font-size:clamp(7px,calc(var(--hm,24vh)*.08),10px)!important}

/* ===== 30 sept. p178 : le o du logo se pose sur le 0 de l'entree, qui reste allume en rouge tant que la cabine y est ===== */
#yl-asc.rez .pan li.so.rdc .zero{color:#C8102E!important;opacity:1!important;transition:color .5s ease 1.1s}

/* ===== 30 sept. p179 : accueil — porte a plat, couleur des portes de l'ascenseur ; un seul filet de lumiere chaude dans la jointure des battants ===== */
html body #yl-entree .battant.g.battant::after{width:1px;right:0;background:rgba(255,214,168,.9)!important;box-shadow:0 0 4px 1px rgba(255,196,140,.5),0 0 16px 3px rgba(255,170,110,.2);opacity:1}
html body #yl-entree .battant.d.battant::before{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;z-index:1;pointer-events:none;background:rgba(255,214,168,.9);box-shadow:0 0 5px 1px rgba(255,196,140,.5),0 0 22px 4px rgba(255,170,110,.18)}
html body #yl-entree .battant.g.battant::after{box-shadow:0 0 5px 1px rgba(255,196,140,.5),0 0 22px 4px rgba(255,170,110,.18)}

/* ===== 30 sept. p181 : tableau = bloc ferme (6 faces tournees vers l'exterieur, cachees de dos) ; un seul filet a l'accueil ; « voir la serie » plus discret ===== */
#salle .mur.photo .cadre.tour3d:not(.vide):not(.sonne){box-shadow:none!important}
#salle .mur.photo .cadre.tour3d:not(.vide):not(.sonne)::before{transform-origin:left center!important;transform:rotateY(-90deg) translateX(-100%)!important;-webkit-backface-visibility:hidden;backface-visibility:hidden}
#salle .mur.photo .cadre.tour3d:not(.vide):not(.sonne)::after{transform-origin:right center!important;transform:rotateY(90deg) translateX(100%)!important;-webkit-backface-visibility:hidden;backface-visibility:hidden}
#salle .mur.photo .cadre.tour3d .ep-h{transform-origin:center top;transform:rotateX(90deg) translateY(-100%);-webkit-backface-visibility:hidden;backface-visibility:hidden}
#salle .mur.photo .cadre.tour3d .ep-b{transform-origin:center bottom;transform:rotateX(-90deg) translateY(100%);-webkit-backface-visibility:hidden;backface-visibility:hidden}
#salle .mur.photo .cadre.tour3d>img{outline:1px solid rgba(255,248,236,.12);outline-offset:-1px}
html body #yl-entree .battant.d.battant::before{background:transparent!important}
html body #yl-entree .battant.g.battant::after{background:rgba(255,220,178,.8)!important}
#salle .station .panneau-s .pan-go{left:calc(100% + var(--Hm)*.045);opacity:.45}
#salle .station .panneau-s .pan-go u{font-size:calc(var(--Hm)*.05)}
#salle .station .panneau-s .pan-go small{font-size:calc(var(--Hm)*.0095);letter-spacing:.24em}

/* ===== 30 sept. p182 : montee vers l'etage 1 — les battants restent la et deviennent une vitre fumee ; on voit la dalle puis l'etage a travers, et l'ouverture revele la piece ===== */
html body #yl-asc.m0.cabine .porte,html body #yl-asc.m0.cabine.roule .porte,html body #yl-asc.m0.cabine.ouvre .porte{opacity:1!important;background-color:rgba(18,8,6,.42)!important;background-image:linear-gradient(105deg,rgba(255,244,230,.06),rgba(255,244,230,0) 38%)!important;transition:transform 1.3s cubic-bezier(.6,0,.3,1),background-color .6s ease!important}

/* ===== 30 sept. p183 : un seul filet continu, sans coupure au niveau du logo (l'ancien masque qui l'interrompait est retire) ; lumiere douce ===== */
html body #yl-entree .battant.g.battant::after{-webkit-mask-image:none!important;mask-image:none!important;background:rgba(255,222,184,.7)!important}

/* ===== 30 sept. p184 : essai du logo « deux o » ===== */

/* ===== 30 sept. p185 : essai du lettrage rond et lie ===== */

/* ===== 30 sept. p186 : logo « YouLab » version B — Jost moyen, serre, Y et L capitales ; le o reste le judas (rouge, cercle clair, point noir) ===== */
@font-face{font-family:'Jost';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/jost-latin.woff2) format('woff2')}
html body #yl-entree .nom .nm-g,html body #yl-entree .nom .nm-d{font-family:'Jost','Futura','Avenir Next',Helvetica,sans-serif!important;font-weight:400!important;letter-spacing:-.015em!important;font-style:normal!important}
html body #yl-entree .nom .nm-o{margin:0 .02em!important}

/* ===== 30 sept. p190 : la neige invisible ne garde plus 110 calques en memoire ===== */
#yl-neige:not(.vis) i{will-change:auto;visibility:hidden;transition:visibility 0s linear .9s}
#yl-neige.vis i{visibility:visible}

/* ===== 30 sept. p191 : le berceau, onde concentrique sous le o ===== */
#yl-entree .nom .nm-o{position:relative}
#yl-entree .nom .nm-o .berceau{position:absolute;left:50%;top:50%;width:1.3em;height:1.3em;margin:-.65em 0 0 -.65em;overflow:visible;color:var(--encre,#EDEBE6);pointer-events:none;z-index:-1}
/* ===== 30 sept. p196 : deux arcs, anneau du judas épaissi, mise au point au clic ===== */
#yl-entree .nom .nm-o .judas{outline-width:calc(1.35ex*.035)!important;outline-offset:calc(1.35ex*.017)!important}
#yl-entree .nom .nm-o .berceau{transition:transform .6s cubic-bezier(.4,0,.2,1)}
#yl-entree .nom .nm-o .berceau.mise{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){#yl-entree .nom .nm-o .berceau{transition:none}#yl-entree .nom .nm-o .berceau.mise{transform:none}}
/* ===== 30 sept. p197 : le judas interrupteur (porte claire / sombre), arcs plus fins ===== */
#yl-entree .nom .nm-o{pointer-events:auto;cursor:pointer}
#yl-entree .nom .nm-o:focus-visible{outline:1px solid var(--rouge,#C8102E);outline-offset:.5em;border-radius:50%}
#yl-entree .nom .nm-o .berceau{transform:rotate(var(--rot,0deg));transition:transform .9s cubic-bezier(.4,0,.2,1)}
#yl-entree .nom .nm-o .berceau.mise{transform:rotate(calc(var(--rot,0deg) + 90deg))}
#yl-entree .nom .nm-o .judas .reflet{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;background:conic-gradient(from 0deg,transparent 0 38%,rgba(255,255,255,.26) 48%,transparent 58%,transparent 88%,rgba(255,255,255,.14) 94%,transparent 100%)}
#yl-entree .nom .nm-o.regle .judas .reflet{animation:ylvinyle 1s cubic-bezier(.4,0,.2,1) both}
@keyframes ylvinyle{0%{opacity:0;transform:rotate(0)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:rotate(360deg)}}
#yl-entree .nom .nm-o .onde{position:absolute;left:50%;top:50%;width:100%;height:100%;margin:-50% 0 0 -50%;border-radius:50%;border:1px solid var(--encre,#EDEBE6);opacity:0;pointer-events:none;z-index:-1}
#yl-entree .nom .nm-o.regle .onde{animation:ylonde 1s cubic-bezier(.2,.6,.3,1) both}
@keyframes ylonde{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
#yl-entree .nom .nm-g,#yl-entree .nom .nm-d{transition:color .6s ease}
#yl-entree .battant.g.battant::after{transition:background-color .6s ease}
/* la porte claire : papier, encre noire, joint gris ; le judas garde son rouge et son point noir */
#yl-entree.clair{--fond:#F3F1EC;--encre:#161210}
html body #yl-entree.clair .battant.g.battant::after{background:rgba(22,18,16,.32)!important}
#yl-entree.clair .nom .nm-o .judas .oeil{background:#161210!important}
@media (prefers-reduced-motion:reduce){#yl-entree .nom .nm-o .berceau{transition:none}#yl-entree .nom .nm-o.regle .judas .reflet,#yl-entree .nom .nm-o.regle .onde{animation:none}}
html body #yl-entree.clair .battant.battant,html body #yl-entree.clair.verre .battant.battant,html body #yl-entree.clair .battant.d.battant{background:#F3F1EC!important}
html body #yl-entree.clair .battant.g.battant::after,html body #yl-entree.clair .battant.d.battant::before{box-shadow:none!important}
html body #yl-entree .battant.battant{transition:transform 1.35s cubic-bezier(.55,0,.15,1),background-color .6s ease} /* p257 */
/* ===== 30 sept. p198 : le joint s'arrete aux deux arcs ; ligne et arcs blancs (1 px) en sombre, halo chaud leger dessine en degrade (pour que le masque ne le coupe pas) ; meme gris en clair ===== */
html body #yl-entree.joint-coupe{--ylCut:linear-gradient(to bottom,#000 0,#000 calc(var(--ylY) + var(--ylOd,0px) - var(--ylOr,40px)),transparent calc(var(--ylY) + var(--ylOd,0px) - var(--ylOr,40px)),transparent calc(var(--ylY) + var(--ylOd,0px) + var(--ylOr,40px)),#000 calc(var(--ylY) + var(--ylOd,0px) + var(--ylOr,40px)))}
html body #yl-entree.joint-coupe .battant.g.battant::after{width:26px!important;right:0!important;box-shadow:none!important;opacity:1!important;
  background:linear-gradient(to right,transparent 0,rgba(255,170,110,.05) 40%,rgba(255,190,130,.16) 80%,rgba(255,214,168,.42) calc(100% - 1px),#FFFFFF calc(100% - 1px),#FFFFFF 100%)!important;
  -webkit-mask-image:var(--ylCut)!important;mask-image:var(--ylCut)!important}
html body #yl-entree.joint-coupe .battant.d.battant::before{width:26px!important;left:0!important;box-shadow:none!important;
  background:linear-gradient(to left,transparent 0,rgba(255,170,110,.05) 40%,rgba(255,190,130,.16) 80%,rgba(255,214,168,.42) 100%)!important;
  -webkit-mask-image:var(--ylCut)!important;mask-image:var(--ylCut)!important}
html body #yl-entree.joint-coupe.clair .battant.g.battant::after{background:linear-gradient(to right,transparent calc(100% - 1px),rgba(22,18,16,.32) calc(100% - 1px))!important}
html body #yl-entree.joint-coupe.clair .battant.d.battant::before{background:none!important}
#yl-entree .nom .nm-o .berceau{color:#FFFFFF}
#yl-entree.clair .nom .nm-o .berceau{color:rgba(22,18,16,.32)}
/* p198 : bords du coupe adoucis (le halo s'efface sans laisser de rectangle sombre) ; la ligne reste nette */
html body #yl-entree.joint-coupe{--ylCut:linear-gradient(to bottom,#000 0,#000 calc(var(--ylY) + var(--ylOd,0px) - var(--ylOr,40px) - 16px),transparent calc(var(--ylY) + var(--ylOd,0px) - var(--ylOr,40px)),transparent calc(var(--ylY) + var(--ylOd,0px) + var(--ylOr,40px)),#000 calc(var(--ylY) + var(--ylOd,0px) + var(--ylOr,40px) + 16px),#000 100%)}
html body #yl-entree.joint-coupe .battant.g.battant::after{background:linear-gradient(to right,transparent 0,rgba(255,170,110,.05) 40%,rgba(255,190,130,.16) 80%,rgba(255,214,168,.42) calc(100% - 1px),#FFFFFF calc(100% - 1px),#FFFFFF 100%)!important}
html body #yl-entree.joint-coupe .battant.g.battant::before{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;z-index:1;pointer-events:none;background:#FFFFFF;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--ylY) + var(--ylOd,0px) - var(--ylOr,40px)),transparent calc(var(--ylY) + var(--ylOd,0px) - var(--ylOr,40px)),transparent calc(var(--ylY) + var(--ylOd,0px) + var(--ylOr,40px)),#000 calc(var(--ylY) + var(--ylOd,0px) + var(--ylOr,40px)));
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--ylY) + var(--ylOd,0px) - var(--ylOr,40px)),transparent calc(var(--ylY) + var(--ylOd,0px) - var(--ylOr,40px)),transparent calc(var(--ylY) + var(--ylOd,0px) + var(--ylOr,40px)),#000 calc(var(--ylY) + var(--ylOd,0px) + var(--ylOr,40px)))}
html body #yl-entree.joint-coupe.clair .battant.g.battant::before{background:rgba(22,18,16,.32)}
html body #yl-entree.joint-coupe .battant.g.battant::after{background:linear-gradient(to right,transparent 0,rgba(255,170,110,.05) 40%,rgba(255,190,130,.16) 80%,rgba(255,214,168,.42) 100%)!important}
html body #yl-entree.joint-coupe.clair .battant.g.battant::after{background:none!important}
/* ===== 30 sept. p199 : seul le o rouge est cliquable ===== */
html body #yl-entree{cursor:default}
html body #yl-entree .nom .nm-o{cursor:pointer}
/* ===== 30 sept. p200 : le o rouge variateur ; la porte passe du noir au blanc en continu ===== */
html body #yl-entree.vari{--lum:0;--k:clamp(0,calc((var(--lum) - .42) * 6),1);
  --fond:color-mix(in srgb,#F3F1EC calc(var(--lum) * 100%),#120806);
  --encre:color-mix(in srgb,#161210 calc(var(--k) * 100%),#EDEBE6)}
html body #yl-entree.vari .battant.battant,html body #yl-entree.vari.verre .battant.battant,html body #yl-entree.vari .battant.d.battant{background:var(--fond)!important}
html body #yl-entree.joint-coupe.vari .battant.g.battant::before{background:color-mix(in srgb,rgba(22,18,16,.32) calc(var(--lum) * 100%),#FFFFFF)}
html body #yl-entree.joint-coupe.vari .battant.g.battant::after,html body #yl-entree.joint-coupe.vari .battant.d.battant::before{opacity:calc(1 - var(--lum) * 1.6)!important}
html body #yl-entree.vari .nom .nm-o .berceau{color:color-mix(in srgb,rgba(22,18,16,.32) calc(var(--lum) * 100%),#FFFFFF);transition:transform .25s ease-out}
html body #yl-entree.vari .nom .nm-o .judas .oeil{background:#161210!important}
html body #yl-entree.vari .nom .nm-o{touch-action:none;cursor:grab}
html body #yl-entree.vari.tourne .nom .nm-o{cursor:grabbing}
/* pendant qu'on tourne : tout suit la main, sans retard ; le reflet du disque tourne avec le bouton */
html body #yl-entree.vari.tourne .battant.battant,html body #yl-entree.vari.tourne .nom .nm-g,html body #yl-entree.vari.tourne .nom .nm-d,html body #yl-entree.vari.tourne .nom .nm-o .berceau{transition:none!important}
html body #yl-entree.vari .nom .nm-o .judas .reflet{transform:rotate(var(--rot,0deg));transition:opacity .4s ease}
html body #yl-entree.vari.tourne .nom .nm-o .judas .reflet{opacity:1}
/* a l'arrivee : un seul petit aller-retour */
@keyframes ylindice{0%,100%{transform:rotate(0)}40%{transform:rotate(38deg)}}
html body #yl-entree.vari.indice .nom .nm-o .berceau{animation:ylindice 1.4s cubic-bezier(.45,0,.25,1) both}
@media (prefers-reduced-motion:reduce){html body #yl-entree.vari.indice .nom .nm-o .berceau{animation:none}}
/* ===== 30 sept. p202 : photos protegees (appui long, glisser) ; bouton Partager discret sous le titre ===== */
#salle img,#yl-mos img,.cadre img{-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.cadre .legende .partage-o{display:inline-block;margin:.5em 0 0;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:.72em;letter-spacing:.24em;text-transform:uppercase;opacity:.45;cursor:pointer;pointer-events:auto}
.cadre .legende .partage-o:hover,.cadre .legende .partage-o:focus-visible{opacity:.9}
.cadre .legende .partage-o.ok{opacity:.9}
/* ===== 30 sept. p207 : telephones et tablettes — tant que la porte est fermee, le musee derriere n'est pas rendu (memoire) ; ni verre depoli ni grain plein ecran ===== */
@media (hover:none) and (pointer:coarse){
  body.dehors #scene,body.dehors #yl-meubles,body.dehors #yl-mos,body.dehors #yl-verre,body.dehors #yl-livre,body.dehors #yl-rose{visibility:hidden!important}
  body.dehors #scene *{animation-play-state:paused!important}
  body.dehors #yl-neige{display:none!important}
  #yl-entree .battant,#yl-entree.verre .battant,#yl-entree #yl-code,#yl-entree .battant.battant{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
/* ===== 1er oct. p208 : menu mobile — plus les anciennes icones (entree, a propos, contact, jour/nuit, cadre, banc, tout voir, son) : la barre du bas suffit, comme sur ordinateur ===== */
#yl-mob .act{display:none!important}
/* ===== 1er oct. p209 : mosaique en sommaire par series (niveau 1 : cartes ; niveau 2 : grille de carres) ; le menu du bas reste accessible ===== */
#yl-mos.som{justify-content:flex-start;padding:max(64px,env(safe-area-inset-top,0px)) 16px calc(150px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}
#yl-mos.som .artiste{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;width:100%;max-width:1180px;align-items:start}
#yl-mos.som .artiste .grp:not(.txt){display:block;width:auto;gap:0}
#yl-mos.som .artiste .grp:not(.txt) .nomg,#yl-mos.som .artiste .grp:not(.txt) .rang{display:none!important}
#yl-mos.som .couv{display:block;position:relative;width:100%!important;height:auto!important;min-height:0!important;padding:0!important;aspect-ratio:4/3;overflow:hidden;background:#1a1716;border-radius:2px;text-align:left}
#yl-mos.som .couv:hover,#yl-mos.som .couv:focus-visible{transform:none}
#yl-mos.som .couv .cim{position:absolute;inset:0;display:block}
#yl-mos.som .couv img{position:absolute;inset:0;width:100%!important;height:100%!important;padding:0!important;object-fit:cover;background:none;border:0;transition:transform .6s ease}
#yl-mos.som .couv:hover img{transform:scale(1.03)}
#yl-mos.som .couv .clg{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:34px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));color:#F3F1EC;font-style:normal}
#yl-mos.som .couv .clg b{font-weight:400;font-size:15px;letter-spacing:.22em;text-transform:uppercase}
#yl-mos.som .couv .clg i{font-style:normal;font-size:11px;letter-spacing:.14em;opacity:.7;white-space:nowrap}
/* niveau 2 : une seule serie, en carres */
#yl-mos.som.deplie .artiste{display:block;max-width:1180px}
#yl-mos.som.deplie .artiste .grp:not(.txt):not(.ouvert){display:none}
#yl-mos.som.deplie .artiste .grp.ouvert .couv{display:none}
#yl-mos.som.deplie .artiste .grp.ouvert .rang{display:grid!important;grid-template-columns:repeat(3,1fr);gap:3px;width:100%}
@media (min-width:761px){ #yl-mos.som.deplie .artiste .grp.ouvert .rang{grid-template-columns:repeat(6,1fr);gap:8px} }
#yl-mos.som.deplie .grp.ouvert .rang button{display:block;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:1;padding:0!important;overflow:hidden;background:#1a1716}
#yl-mos.som.deplie .grp.ouvert .rang button:hover{transform:none}
#yl-mos.som.deplie .grp.ouvert .rang img{width:100%!important;height:100%!important;padding:0!important;object-fit:cover;background:none;border:0}
#yl-mos.som.deplie .grp.ouvert .rang button.cur img{outline:2px solid var(--rouge,#C8102E);outline-offset:-2px}
#yl-mos.som .mos-retour{position:sticky;top:0;z-index:2;align-self:flex-start;width:100%;max-width:1180px;margin:0 auto 12px;padding:10px 0!important;height:auto!important;min-height:0!important;text-align:left;background:rgba(12,12,13,.94);color:#F3F1EC;font-family:inherit;font-size:13px;letter-spacing:.24em;text-transform:uppercase}
#yl-mos.som .mos-retour u{text-decoration:none;font-size:20px;vertical-align:-2px;margin-right:6px}
#yl-mos.som .mos-retour:hover{transform:none;color:var(--rouge,#E5142C)}
/* le menu du bas reste accessible pendant la mosaique (il la ferme) */
body.mosaique #yl-mob-b{opacity:1!important;pointer-events:auto!important}
#yl-mos.som .artiste .grp.ici .couv{box-shadow:0 0 0 2px var(--rouge,#C8102E)}
#yl-mos.som .couv .cim{height:auto!important;padding:0!important;display:block!important}
#yl-mos.som .couv .clg{top:auto!important;height:auto!important;display:flex!important;place-items:initial;padding:34px 14px 12px!important;color:#F3F1EC!important;font-style:normal!important}
#yl-mos.som .mos-retour{display:flex!important;align-items:center;gap:8px}
#yl-mos.som .mos-retour span{display:inline!important;height:auto!important;padding:0!important;font-style:normal!important;color:inherit!important}
#yl-mos.som .mos-retour[hidden]{display:none!important}
#yl-mos.som .couv .clg{position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important}
@media (min-width:761px){ #yl-mos.som .artiste{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} }
/* ===== 1er oct. p210 : 4 series par ligne sur ordinateur ; menu du bas ouvert = mosaique masquee ===== */
@media (min-width:761px){ #yl-mos.som .artiste{grid-template-columns:repeat(4,minmax(0,1fr))!important} }
body:has(#yl-mob.on) #yl-mos{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* ===== 1er oct. p211 : sur ordinateur, la mosaique est un mur de photos par series ; sur telephone, menu ouvert = barre flottante masquee ===== */
#yl-mos.som.murp .artiste{display:block!important;max-width:1180px}
#yl-mos.som.murp .artiste .grp:not(.txt){display:block!important;margin:0 0 34px}
#yl-mos.som.murp .artiste .grp:not(.txt) .couv{display:none!important}
#yl-mos.som.murp .artiste .grp:not(.txt) .nomg{display:block!important;margin:0 0 12px;padding:0!important;height:auto!important;min-height:0!important;text-align:left;font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:#F3F1EC}
#yl-mos.som.murp .artiste .grp:not(.txt) .nomg::after{content:"  \00B7  " attr(data-n);letter-spacing:.14em;text-transform:none;opacity:.5;font-size:11px}
#yl-mos.som.murp .artiste .grp:not(.txt) .nomg:hover{color:var(--rouge,#E5142C)}
#yl-mos.som.murp .artiste .grp:not(.txt) .rang{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:100%}
#yl-mos.som.murp .grp:not(.txt) .rang button{display:block;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:1;padding:0!important;overflow:hidden;background:#1a1716}
#yl-mos.som.murp .grp:not(.txt) .rang button:hover{transform:none;opacity:.85}
#yl-mos.som.murp .grp:not(.txt) .rang img{width:100%!important;height:100%!important;padding:0!important;object-fit:cover;background:none;border:0}
#yl-mos.som.murp .grp:not(.txt) .rang button.cur img{outline:2px solid var(--rouge,#C8102E);outline-offset:-2px}
#yl-mos.som.murp .mos-retour{display:none!important}
body:has(#yl-mob.on) #yl-nav4{opacity:0!important;pointer-events:none!important}
/* ===== 1er oct. p212 : les onglets de la mosaique filtrent de nouveau (oeuvres / pensees / a propos / contact / autre artiste) ; mur de photos aussi sur telephone (3 colonnes) ===== */
#yl-mos.som:is(.apropos,.contact,.autre) .artiste{display:none!important}
#yl-mos.som.pensees .artiste>.grp:not(.txt){display:none!important}
#yl-mos.som.pensees .artiste{display:flex!important;flex-direction:column;align-items:center}
#yl-mos.som:is(.pensees,.apropos,.contact,.autre) .mos-retour{display:none!important}
@media (max-width:760px){ #yl-mos.som.murp .artiste .grp:not(.txt) .rang{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px} #yl-mos.som.murp .artiste .grp:not(.txt){margin-bottom:26px} }
/* ===== 1er oct. p214 : saut direct vers une photo choisie dans la mosaique (tactile) : fondu au lieu de la traversee du mur ===== */
/* ===== 1er oct. p216 : telephones et tablettes — la salle 3D n'est pas rendue pendant que la mosaique est ouverte (memoire) ; vignettes legeres ===== */
@media (pointer:coarse){ body.mosaique #scene{visibility:hidden!important} #yl-mos .rang img{content-visibility:auto} }
/* ===== 1er oct. p218 : le fondu du saut ne touche plus la salle 3D (Safari l'aplatissait en une image geante) : voile noir au-dessus ===== */

@keyframes ylVoile{from{opacity:1}to{opacity:0}}
#yl-voile{position:fixed;inset:0;background:#000;pointer-events:none;z-index:2147483000;opacity:0}
#yl-voile.on{animation:ylVoile .6s ease-out both}
/* ===== 1er oct. p220 : (p219 retire, il faisait planter l iPhone a l entree) quand la photo regardee change dans la salle assombrie, les pans de mur basculent sans transition : plus d eclat a chaque photo, sans filtre supplementaire ===== */
body.yl-net #salle .face.mur>.station,body.yl-net #salle .station::before,body.yl-net #salle .station::after,body.yl-net #salle .station>*{transition:none!important}
/* ===== 1er oct. p221 : les grands pans de prolongement (3900 px) passent nettement derriere les pans de mur des photos : Safari ne les melange plus (teinte d'une autre serie qui apparaissait selon la photo) ===== */
#salle .station .pan{transform:translateZ(-3px)!important}
/* ===== 1er oct. p222 : telephones — dans l'atelier (Design, Musique, Video par l'ascenseur), la grande salle Photo n'est plus rendue derriere ; portes de l'ascenseur fermees, idem (hors montee depuis l'entree) ===== */
@media (hover:none) and (pointer:coarse){
  body.atelier #scene,body.atelier #yl-meubles{display:none!important}
  body:has(#yl-asc.cabine.ferme:not(.m0)) #scene,body:has(#yl-asc.cabine.roule:not(.m0)) #scene{visibility:hidden!important}
}
/* ===== 1er oct. p223 : telephones et tablettes — (1) plus de menu ☰ en bas : la barre d'icones et la mosaique suffisent, comme sur ordinateur ; (2) la salle ne s'assombrit plus devant chaque photo : le mur garde la teinte de sa serie, constante d'une photo a l'autre (et moins de calques pour Safari) ===== */
@media (hover:none) and (pointer:coarse){
  #yl-mob-b,#yl-mob{display:none!important}
  body.nuit #salle .face.mur::before,body.nuit #salle .face.sol::after,body.nuit #salle .face.plafond::after{opacity:0!important}
  body.nuit #salle .face.mur>*,body.nuit #salle .station>*,body.nuit #salle .station::before,body.nuit #salle .station::after{filter:none!important}
}
/* ===== 1er oct. p224 : telephones — sans le menu ☰, la barre d'icones descend au centre de la bande du parquet (elle n'empiete plus sur le mur) ===== */
@media (hover:none) and (pointer:coarse) and (max-width:760px){ #yl-nav4{bottom:calc(14px + env(safe-area-inset-bottom,0px))!important} }
/* ===== 1er oct. p225 : telephones — la plongee dans « Water & Sky » (tunnel de poissons) faisait recharger la page : pendant la plongee, la salle du musee n'est plus rendue derriere ; reflets animes du plafond et nuages retires, ciel peint en fond plutot qu'en grand panneau 3D ===== */
@media (hover:none) and (pointer:coarse){
  body:has(#yl-plonge.on) #scene,body:has(#yl-plonge.on) #yl-meubles{display:none!important}
  #yl-plonge .caus,#yl-plonge .nuage{display:none!important}
  #yl-plonge .pf.ciel{display:none!important}
  #yl-plonge{background:linear-gradient(180deg,#6F97C4 0%,#A9C3DC 30%,#F0DCC4 49.6%,#CBD7DE 50%,#86A4B6 62%,#46697D 100%)}
}
/* ===== 1er oct. p226 : telephones — plongee plate dans « Water & Sky » : l'eau, quelques poissons et des bulles, puis le ciel ; un toucher pour sortir ===== */
#yl-plonge.plat .pp-eau{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#2E6E8E 0%,#14465F 45%,#0A2A3A 100%)}
#yl-plonge.plat .pp-eau::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 30% at 50% 0%,rgba(255,255,255,.22),transparent 70%)}
#yl-plonge.plat .pp-p{position:absolute;left:0;width:calc(64px*var(--s));height:calc(32px*var(--s));fill:rgba(4,20,30,.75);animation:ylPlatNage linear infinite}
#yl-plonge.plat .pp-p.g{animation-name:ylPlatNageG}
#yl-plonge.plat .pp-p svg{display:block;width:100%;height:100%}
#yl-plonge.plat .pp-p.g svg{transform:scaleX(-1)}
@keyframes ylPlatNage{from{transform:translateX(110vw)}to{transform:translateX(-30vw)}}
@keyframes ylPlatNageG{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
#yl-plonge.plat .pp-b{position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;border:1px solid rgba(255,255,255,.55);animation:ylPlatBulle linear infinite}
@keyframes ylPlatBulle{from{transform:translateY(0)}to{transform:translateY(-110vh)}}
#yl-plonge.plat .pp-ciel{position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,#6F97C4 0%,#A9C3DC 30%,#F0DCC4 49.6%,#CBD7DE 50%,#86A4B6 62%,#46697D 100%)}
#yl-plonge.plat.ouvre .pp-ciel{animation:ylPlatCiel 15s ease-in forwards}
#yl-plonge.plat.arrive .pp-ciel{opacity:1}
@keyframes ylPlatCiel{0%,62%{opacity:0}100%{opacity:1}}
#yl-plonge.plat .pp-sol{position:absolute;left:50%;top:44%;width:70vw;height:50vw;margin:-25vw 0 0 -35vw;border-radius:50%;background:radial-gradient(closest-side,rgba(255,238,205,.9),rgba(255,226,180,.35) 45%,transparent)}
#yl-plonge.plat .voy{display:none}
@media (prefers-reduced-motion:reduce){#yl-plonge.plat .pp-p,#yl-plonge.plat .pp-b{animation:none}}
/* ===== 1er oct. p227 : telephones — plongee plate de 6 s ; les poissons nagent meme avec « Reduire les animations » (mouvement doux) ; plus de zoom au double toucher ===== */
@media (hover:none) and (pointer:coarse){
  html,body,#scene,#salle,#yl-plonge{touch-action:manipulation}
  #yl-plonge.plat.ouvre .pp-ciel{animation-duration:6s}
}
@media (prefers-reduced-motion:reduce){#yl-plonge.plat .pp-p{animation:ylPlatNage 16s linear infinite!important}#yl-plonge.plat .pp-p.g{animation-name:ylPlatNageG!important}#yl-plonge.plat .pp-b{animation:ylPlatBulle 9s linear infinite!important}}
/* ===== 1er oct. p228 : telephones — « Water & Sky » : zoom dans la photo (elle remplit l'ecran, des poissons passent, elle revient dans son cadre) ===== */
#yl-zoomw{position:fixed;z-index:80;overflow:hidden;pointer-events:none;background:#000;transition:left 1s cubic-bezier(.6,0,.2,1),top 1s cubic-bezier(.6,0,.2,1),width 1s cubic-bezier(.6,0,.2,1),height 1s cubic-bezier(.6,0,.2,1)}
#yl-zoomw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 3s ease-out}
#yl-zoomw.ouvre img{transform:scale(1.12)}
#yl-zoomw .zpo{position:absolute;inset:0;opacity:0;transition:opacity .5s}
#yl-zoomw.ouvre .zpo{opacity:1;transition-delay:.7s}
#yl-zoomw .zp{position:absolute;left:0;width:calc(56px*var(--s));height:calc(28px*var(--s));fill:rgba(4,20,30,.6);transform:translateX(110vw);animation:ylZp 3s linear forwards}
#yl-zoomw .zp.g{animation-name:ylZpG;transform:translateX(-30vw)}
#yl-zoomw .zp.g svg{transform:scaleX(-1)}
#yl-zoomw .zp svg{display:block;width:100%;height:100%}
@keyframes ylZp{from{transform:translateX(110vw)}to{transform:translateX(-30vw)}}
@keyframes ylZpG{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
/* ===== 1er oct. p229 : ordinateur — dans la mosaique, le titre de la photo apparait au survol de sa vignette (rien sur telephone) ===== */
@media (hover:hover) and (pointer:fine){
  #yl-mos .rang button[data-i]{position:relative;overflow:hidden}
  #yl-mos .rang button[data-i]::after{content:attr(aria-label);position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 10px 9px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#F3F1EC;font-family:inherit;font-size:12px;font-style:italic;letter-spacing:.04em;line-height:1.25;text-align:left;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
  #yl-mos .rang button[data-i]:hover::after,#yl-mos .rang button[data-i]:focus-visible::after{opacity:1;transform:none}
}

/* p231 : nombre total de photos par artiste, visible seulement par l'administrateur connecte */
#yl-mos .mos-artistes .mos-nb{display:inline-block;margin-left:.6em;font-size:.72em;letter-spacing:.08em;opacity:.7;font-variant-numeric:tabular-nums}
#yl-mos .mos-art-t .mos-nb{display:inline-block;margin-left:.6em;font-size:.72em;letter-spacing:.08em;opacity:.7;font-variant-numeric:tabular-nums}

/* ===== 3 oct. p240 : allegement — le grain plein ecran (calque compose a chaque image pour 5 % d'opacite) est retire ; pour le remettre, supprimer cette ligne ===== */


/* p247 : la taille unique au dos du tableau */
.cadre .dos .cart .dim{display:block;margin-top:calc(var(--Hm)*.01);font-size:calc(var(--Hm)*.011);letter-spacing:.12em;opacity:.7}

/* p252 : le rouge dit « ca s'allume » — l'appel d'ascenseur au survol et pendant le trajet, le son seulement en sourdine ; jamais un bouton rouge au repos */
#yl-nav4 button[data-n="asc"]:hover,#yl-nav4 button[data-n="asc"]:focus-visible,body.asc-trajet #yl-nav4 button[data-n="asc"]{color:#C8102E}
#yl-nav4 button[data-n="son"].muet{color:#C8102E}
#yl-nav4 button[data-n="son"].muet .n{opacity:.55}

/* p255 : la descente vers un etage de la galerie — la dalle passe vers le haut, la salle apparait en dessous (miroir de la montee) */
#yl-asc .front .gaine0.bas{transform:translateY(0)}
#yl-asc .front .gaine0.bas.va{transform:translateY(-116vh)}
#yl-asc .gaine0.bas .trou{top:0;height:100vh}
#yl-asc .gaine0.bas .dalle0{top:100vh}
#yl-asc .gaine0.bas .ciel{top:116vh;height:100vh;background:linear-gradient(to top,transparent 70%,rgba(8,6,5,.55))}

/* p257 : chaque vinyle prend la couleur dominante de sa pochette (--vin posee par salle.js) ; sillons et etiquette restent lisibles sur une teinte claire */
.cadre.sonne svg.disque .fond,.cadre.sonne svg.vinyle .fond{fill:var(--vin,#0A0A0A)}
.cadre.sonne svg .sillons circle{stroke:rgba(255,255,255,.16)}
.cadre.sonne svg .sillons circle:nth-child(5n){stroke:rgba(255,255,255,.26)}
.cadre.sonne[data-vin-clair] svg .sillons circle{stroke:rgba(0,0,0,.14)}
.cadre.sonne[data-vin-clair] svg .sillons circle:nth-child(5n){stroke:rgba(0,0,0,.24)}

/* p258 : etage Video — le film a la place du cadre, l'affiche en poster ; un clic joue, le bouton s'efface pendant la lecture */
.cadre.film>img{visibility:hidden}
.cadre.film video.film{position:absolute;top:calc(var(--Hm)*.007);left:calc(var(--Hm)*.007);right:calc(var(--Hm)*.007);bottom:calc(var(--Hm)*.007);width:auto;height:auto;object-fit:cover;background:#000;z-index:2;cursor:pointer}
.cadre.film .pp-f{position:absolute;left:50%;top:50%;width:calc(var(--Hm)*.09);height:calc(var(--Hm)*.09);margin:calc(var(--Hm)*-.045) 0 0 calc(var(--Hm)*-.045);border:1.5px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(0,0,0,.35);z-index:3;cursor:pointer;pointer-events:none;transition:opacity .4s}
.cadre.film .pp-f::after{content:"";position:absolute;left:40%;top:30%;border-style:solid;border-width:calc(var(--Hm)*.018) 0 calc(var(--Hm)*.018) calc(var(--Hm)*.03);border-color:transparent transparent transparent #fff}
.cadre.film.joue .pp-f{opacity:0}

/* p246 : etage Video — en attendant les films, un cadre 16:9, nuit d'hiver et neige plus dense */
#salle .mur.video .cadre.vide{width:calc(var(--span)*.42)!important;height:calc(var(--span)*.42*9/16)!important;padding:0!important;background:radial-gradient(ellipse at 50% 115%,#1C2433 0%,#10131A 45%,#07080B 100%)!important;border-color:#2A2A2E!important}
@media (max-width:760px){ #salle .mur.video .cadre.vide{width:calc(var(--span)*.66)!important;height:calc(var(--span)*.66*9/16)!important} }
#yl-neige i{box-shadow:0 0 3px rgba(255,255,255,.35)}
@media (prefers-reduced-motion:reduce){ #yl-neige i{animation:none!important} }
/* ===== 5 oct. p247 : depuis la mosaique, le bouton Ascenseur reste actif (il ferme la mosaique et ouvre la cabine) ===== */
body.mosaique #yl-nav4 button[data-n="asc"]{opacity:1;pointer-events:auto}
/* ===== 5 oct. p249 : etage Video — lecteur (Lecture + Plein ecran) ; la neige CSS laisse la place a la video ===== */
body.yl-vid #yl-neige{display:none!important}
.face.mur.video .cadre.vide .ylv{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 115%,#1C2433 0%,#10131A 45%,#07080B 100%)}
.ylv canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
video.ylv-source{position:fixed;left:0;top:0;width:2px;height:2px;opacity:.01;pointer-events:none;z-index:-1}
video.ylv-source:fullscreen{width:100%!important;height:100%!important;opacity:1!important;object-fit:contain;background:#000;pointer-events:auto}
video.ylv-source:-webkit-full-screen{width:100%!important;height:100%!important;opacity:1!important;object-fit:contain;background:#000;pointer-events:auto}
.ylv-play{position:absolute;left:50%;top:50%;width:calc(var(--Hm)*.085);height:calc(var(--Hm)*.085);transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(236,234,229,.55);background:rgba(10,11,14,.42);color:#ECEAE5;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:opacity .4s ease,background-color .3s ease}
.ylv-play:hover{background:rgba(10,11,14,.6)}
.ylv-play svg{width:40%;height:40%;margin-left:7%}
.ylv.lit .ylv-play{opacity:0;pointer-events:none}
.ylv-fs{position:absolute;right:2%;bottom:3.4%;width:calc(var(--Hm)*.042);height:calc(var(--Hm)*.042);border:0;border-radius:6px;background:rgba(10,11,14,.38);color:#ECEAE5;padding:calc(var(--Hm)*.008);cursor:pointer;opacity:.8;transition:opacity .3s}
.ylv-fs:hover{opacity:1}
.ylv-fs svg{width:100%;height:100%;display:block}
/* ===== 5 oct. p255 : allegement du rendu (Safari) — plus aucun filtre ni flou d'arriere-plan sur les elements poses dans la salle 3D ou par-dessus : chacun forcait Safari a redessiner toute la scene a chaque changement (ascenseur, mosaique, defilement) ===== */
#salle .station.voisin,body.nuit #salle .station.voisin{filter:none!important;opacity:1!important}
#salle .station>.tableau,#salle .station>.cadre,#salle .station>.legende,#salle .station>.cartel{transition:opacity 1s ease}
body.nuit #salle .station.voisin>.tableau,body.nuit #salle .station.voisin>.cadre,body.nuit #salle .station.voisin>.legende,body.nuit #salle .station.voisin>.cartel{opacity:.4;transition:opacity 3s ease-in-out}
#salle .station .legende,#salle .station .legende.eclat{filter:none!important;transition:text-shadow 3.5s ease-in-out}
#salle .station .legende.eclat{transition:text-shadow 1.8s ease-out}
.cadre.sonne .galette{filter:none!important}
#yl-asc .pan ul,#yl-asc.cabine .pan ul{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(18,19,21,.3)}
#yl-asc .puits .niv{filter:none!important}
.yl-cp,.yl-cp.va{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* ===== 5 oct. p256 : dalles du sol et du plafond reduites (voir salle.js) ; au-dela des dalles, la scene porte les couleurs du plafond (en haut) et du sol (en bas) de la saison : plus de trou noir au loin ===== */
#scene{background:linear-gradient(to bottom,var(--s-plaf,#2A2B2E) 0 46%,var(--s-sol,#3C3E41) 46% 100%)}
/* ===== 5 oct. p258 : le mur garde une couleur stable d'une photo a l'autre — plus d'assombrissement (filtre) du pan de mur de la photo regardee ni de ses voisines ; seuls les cadres voisins s'estompent (p255). Comme sur telephone depuis p223. ===== */
body.nuit #salle .station.ici::before,body.nuit #salle .station.ici::after,body.nuit #salle .station::before,body.nuit #salle .station::after{filter:none!important}

/* ===== 5 oct. p259 : etage Musique — le pan de mur de la pochette regardee prend la couleur de la pochette (--pch, salle.js), en fondu 1 s ; les voisins gardent le mur neutre ===== */
#salle .face.mur.musique .station.mur-s::before{transition:background 1s ease}
#salle .face.mur.musique .station.mur-s.ici::before{background:var(--pch,color-mix(in srgb,var(--mur-s) 95%,var(--s-lum)))}

/* ===== 5 oct. p260 : EP — un seul vinyle, plusieurs pistes : la liste des titres sous la platine au dos ; la piste en cours en encre pleine ===== */
/* p261 : la platine garde toute la place ; au survol, les titres se posent par-dessus avec un voile sombre (toujours visibles sur tactile) */
.cadre.sonne.ep .pistes{position:absolute;left:4%;right:4%;top:4%;bottom:4%;margin:0;padding:0 8%;list-style:none;display:flex;flex-direction:column;justify-content:center;gap:.5em;z-index:2;font-size:calc(var(--Hm)*.026);line-height:1.25;color:#F3F1EC;background:rgba(12,10,9,.72);border-radius:4px;opacity:0;transition:opacity .35s;pointer-events:none}
.cadre.sonne.ep .dos:hover .pistes,html.leger .cadre.sonne.ep.dosvis .pistes{opacity:1}
.cadre.sonne.ep.ferme .pistes{opacity:0!important}
html.leger .cadre.sonne.ep .pistes{justify-content:flex-end;padding-bottom:4%;background:linear-gradient(to top,rgba(12,10,9,.82) 55%,transparent)}
.cadre.sonne.ep .pistes li{display:flex;align-items:baseline;gap:.6em;cursor:pointer;opacity:.6;transition:opacity .3s;white-space:nowrap;overflow:hidden;pointer-events:auto}
.cadre.sonne.ep .pistes li:hover,.cadre.sonne.ep .pistes li.on{opacity:1}
.cadre.sonne.ep .pistes li b{font-weight:400;font-variant-numeric:tabular-nums;opacity:.7;min-width:1.2em}
.cadre.sonne.ep .pistes li span{flex:1;overflow:hidden;text-overflow:ellipsis;font-style:italic}
.cadre.sonne.ep .pistes li i{font-style:normal;font-variant-numeric:tabular-nums;opacity:.7}
.cadre.sonne.ep.joue .pistes li.on b::before{content:"\25B8";margin-right:.3em}
/* p260 : mur clair derriere une pochette claire — legende et cartel en encre sombre */
#salle .face.mur.musique .station.mur-clair.ici .legende,#salle .face.mur.musique .station.mur-clair.ici .cartel{color:#2A2622;text-shadow:0 1px 0 rgba(255,255,255,.35),0 -1px 1px rgba(0,0,0,.18);transition:color 1s ease}
#salle .face.mur.musique .station.mur-clair.ici .legende b,#salle .face.mur.musique .station.mur-clair.ici .legende i,#salle .face.mur.musique .station.mur-clair.ici .legende em{color:#2A2622}
/* p260 : mosaique Musique — vignettes des autres artistes masquees selon l'artiste choisi */
#yl-mos .artiste button[data-w].hid,#yl-mos.som .artiste .grp .rang button[data-w].hid{display:none!important}
/* p260 : etage Musique — sol de studio, anthracite chaud, quelle que soit la saison */
html[data-etage="musique"]{--s-sol:#221F1C}
/* p261 : a la lecture, le disque ne sort plus de la pochette (il tourne en place) ; et seul le SVG tourne, pas le groupe interieur (qui pivotait autour du coin et emportait le disque hors de l'ecran) */
.cadre.sonne.joue .galette{transform:translateX(22%)}
.cadre.sonne.joue:hover .galette{transform:translateX(30%)}
.cadre.sonne.joue .galette svg.disque{animation:yl-tourne 9s linear infinite;transform-origin:50% 50%}
.cadre.sonne.joue .galette g.disque,#yl-atelier .cad.son.joue .galette g.disque{animation:none!important}

/* ===== 5 oct. p262 : barre de lecture — le trait reste fin (1 px) mais la zone cliquable fait ~4 % de la hauteur du mur (bordures transparentes), l'avance dans le morceau repond a chaque clic ===== */
.cadre.sonne .lect{border-top:calc(var(--Hm)*.02) solid transparent;border-bottom:calc(var(--Hm)*.02) solid transparent;background-clip:padding-box;bottom:calc(var(--Hm)*-.048);box-sizing:content-box}

/* ===== 5 oct. p263 : mosaique Musique — mention du format (Single / EP / Album) en bas de la vignette ===== */
#yl-mos .rang button .fmt{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#F3F1EC;background:linear-gradient(to top,rgba(0,0,0,.62),transparent);text-align:left;pointer-events:none;opacity:.85}

/* ===== 5 oct. p265 : mosaique Musique — second menu « Tous les styles » a cote du menu Artistes ===== */
#yl-mos .mos-sty-menu{margin-left:4px}

/* filtre series/annees : doit l emporter sur le mur de photos (murp) */
#yl-mos.som.murp .artiste .grp.yl-masque-f:not(.txt),#yl-mos.som .artiste .grp.yl-masque-f:not(.txt),#yl-mos .artiste .grp.yl-masque-f,#yl-mos.som.murp .grp:not(.txt) .rang button.yl-masque-f,#yl-mos.som.deplie .grp.ouvert .rang button.yl-masque-f{display:none!important}

/* 6 oct. 2026 : les filtres ne servent que dans l onglet Oeuvres */
#yl-mos.apropos .yl-filt,#yl-mos.pensees .yl-filt,#yl-mos.contact .yl-filt{display:none!important}

/* 6 oct. 2026 : a tous les etages, plafond invisible (couleur du mur) et sol beton fonce */
html .plafond .dalle{background:var(--yl-uni,#23272A)!important;background-image:none!important;transition:background-color .8s ease}
html .sol .dalle{background-color:#232220!important;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 420px),url(beton.jpg)!important;background-size:auto,calc(var(--Hm,40vh)*1.3) calc(var(--Hm,40vh)*1.3)!important;background-blend-mode:normal,overlay!important}

/* 6 oct. 2026 : sans compte, Coming soon sur la porte, de part et d'autre du joint ; le point rouge n'est plus un lien */
#yl-entree.ferme .nom .nm-o{cursor:default}
#yl-entree.ferme .nom .nm-o::after{animation:none}
#yl-entree .yl-cs{position:absolute;z-index:3;left:0;right:0;top:calc(var(--ylY,50%) + 10vh);margin:0;height:1.4em;pointer-events:none;font:400 clamp(11px,1.05vw,14px)/1.4 "Cormorant Garamond","EB Garamond",Georgia,serif;letter-spacing:.42em;text-transform:uppercase;color:#F3F1EC;opacity:0;animation:ylcs 1.6s ease 1s forwards}
#yl-entree .yl-cs span{position:absolute;top:0;white-space:nowrap}
#yl-entree .yl-cs .a{right:calc(50% + 1.1em)}
#yl-entree .yl-cs .b{left:calc(50% + 1.1em)}
#yl-entree.clair .yl-cs{color:#1A1816}
@keyframes ylcs{to{opacity:.72}}
@media (prefers-reduced-motion:reduce){#yl-entree .yl-cs{animation:none;opacity:.72}}
#yl-entree.vu .yl-cs,#yl-entree:has(.yl-hall) .yl-cs{display:none}

/* 6 oct. 2026 : 0 · Accueil dans l'ascenseur ; le 0 de la ligne du bas (Sortie) s'efface */
#yl-asc .pan li.so.rdc .zero{visibility:hidden}

/* 6 oct. 2026 (essai) : etage Design, parquet en chene massif — lames larges, joints, fil du bois, nuances d'une lame a l'autre */
html.yl-mur-design .sol .dalle{background-color:#B07A36!important;background-image:
 repeating-linear-gradient(90deg,rgba(48,26,6,.85) 0 8px,transparent 8px 420px),
 repeating-linear-gradient(0deg,rgba(48,26,6,.75) 0 8px,transparent 8px 2600px),
 repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 420px,rgba(255,214,140,.12) 420px 840px,rgba(0,0,0,.05) 840px 1260px,rgba(255,214,140,.08) 1260px 1680px,rgba(0,0,0,.10) 1680px 2100px,rgba(255,214,140,.04) 2100px 2520px),
 repeating-linear-gradient(90deg,rgba(255,226,170,.10) 0 3px,transparent 3px 22px,rgba(80,42,10,.16) 22px 25px,transparent 25px 51px,rgba(80,42,10,.08) 51px 53px,transparent 53px 80px)!important;
 background-size:auto!important;background-blend-mode:normal!important}
/* 6 oct. 2026 : le fond de scene (vu avant que le sol 3D ne s'affiche) suit le sol : beton fonce, ou chene a l'etage Design */
html #scene{background:linear-gradient(to bottom,var(--yl-uni,#23272A) 0 46%,#232220 46% 100%)!important}
html.yl-mur-design #scene{background:linear-gradient(to bottom,var(--yl-uni,#23272A) 0 46%,#9A6A30 46% 100%)!important}

/* 6 oct. 2026 : etage Photo — le pan de mur de la photo regardee prend une teinte tres eteinte de la photo (--pch, salle.js), fondu 1 s */
#salle .face.mur.photo .station.mur-s::before{transition:background 1s ease}
#salle .face.mur.photo .station.mur-s.ici::before{background:var(--pch,var(--mur-s))}
/* le nom de la serie en rouge dans le cartel : le fil commun d'une serie */
#salle .legende em .ou{color:var(--rouge,#E5142C)}

/* 6 oct. 2026 : un sol par etage — Musique : sol de studio, caoutchouc noir mat a pastilles ; Video : moquette de cinema bordeaux sombre */
html.yl-mur-musique .sol .dalle{background-color:#141414!important;background-image:radial-gradient(circle,rgba(255,255,255,.05) 0 7px,transparent 8px),repeating-linear-gradient(90deg,rgba(0,0,0,.5) 0 3px,transparent 3px 700px),repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 3px,transparent 3px 700px)!important;background-size:46px 46px,auto,auto!important;background-blend-mode:normal!important}
html.yl-mur-video .sol .dalle{background-color:#3A1418!important;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.12) 0 3px,transparent 3px 9px),repeating-linear-gradient(-45deg,rgba(255,180,170,.035) 0 2px,transparent 2px 11px),radial-gradient(ellipse at 50% 30%,rgba(255,120,110,.05),transparent 60%)!important;background-size:auto,auto,100% 100%!important;background-blend-mode:normal!important}
html.yl-mur-musique #scene{background:linear-gradient(to bottom,var(--yl-uni,#23272A) 0 46%,#141414 46% 100%)!important}
html.yl-mur-video #scene{background:linear-gradient(to bottom,var(--yl-uni,#23272A) 0 46%,#2E1013 46% 100%)!important}

/* 6 oct. 2026 : le nom de l'etage en blanc, dans la police du logo (Jost), a tous les etages */
#salle .grave-g span,#salle .grave-g.grave-w span{font-family:Jost,Futura,"Avenir Next",Helvetica,sans-serif!important;font-weight:400!important;font-size:6.2vh!important;letter-spacing:-.015em!important;text-indent:0!important;text-transform:none!important;color:#F3F1EC!important;text-shadow:0 -.08vh 0 rgba(0,0,0,.35),0 .1vh .1vh rgba(255,255,255,.12)!important}
#salle .grave-g.grave-w{pointer-events:none;cursor:default}

/* 6 oct. 2026 : le titre de l etage seul, sans nom d artiste */
#salle .grave-g .art,#salle .grave-g.grave-w .art{display:none!important}

/* 7 oct. 2026 : cartel facon musee — technique, dimensions, edition, sous l'artiste */
.legende .tech{display:block;margin-top:.2em;font-style:normal;font-size:.82em;letter-spacing:.02em;opacity:.6}
.legende .cr{display:block;margin-top:.35em;font-style:normal;font-size:.62em;letter-spacing:.06em;opacity:.38}

/* 7 oct. 2026 (valide, etendu a tous les etages le 7 oct.) : etage Photo sans sol — comme le plafond, le sol prend la couleur du mur : la salle se fond dans une couleur unie, rien ne concurrence l'oeuvre */
html[data-etage] .sol .dalle{background:var(--yl-uni,#23272A)!important;background-image:none!important;transition:background-color .8s ease}
html[data-etage] #scene{background:var(--yl-uni,#23272A)!important}
/* 7 oct. 2026 (valide, etendu a tous les etages le 7 oct.) : etage Photo — plus de plinthe (le trait sombre au pied du mur), le mur se fond dans le sol */
html[data-etage] #salle .face.mur .station::after{display:none!important}
/* 7 oct. 2026 (valide, etendu a tous les etages le 7 oct.) : etage Photo — la barre du bas ecrite a meme le mur, comme le titre PHOTO : ni pilule, ni niche, ni relief ; lettres blanches dans la police du logo (Jost) */
html[data-etage] body:not(.mosaique):not(.atelier) #yl-nav4{background:none!important;box-shadow:none!important;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-etage] body:not(.mosaique):not(.atelier) #yl-nav4 button{color:#F3F1EC;font-family:Jost,Futura,"Avenir Next",Helvetica,sans-serif;text-shadow:0 -.08vh 0 rgba(0,0,0,.35),0 .1vh .1vh rgba(255,255,255,.12)}
html[data-etage] body:not(.mosaique):not(.atelier) #yl-nav4 button b{font-weight:300}
html[data-etage] body:not(.mosaique):not(.atelier) #yl-nav4 button span{font-weight:400;opacity:.75}
html[data-etage] body:not(.mosaique):not(.atelier) #yl-nav4 button:hover span{opacity:1}
/* 7 oct. 2026 (essai) : sol « Dieter Rams » a l'etage Photo — revient, mais uni : la couleur du mur un cran plus sombre, sans matiere ni joint ; juste assez pour lire l'horizon */
html[data-etage] .sol .dalle{background:color-mix(in srgb,var(--yl-uni,#23272A) 80%,#000)!important;background-image:none!important}
html[data-etage] #scene{background:linear-gradient(to bottom,var(--yl-uni,#23272A) 0 46%,color-mix(in srgb,var(--yl-uni,#23272A) 80%,#000) 46% 100%)!important}
/* 7 oct. 2026 (valide, etendu a tous les etages le 7 oct.) : etage Photo — plus de Precedent / Suivant dans la barre (les fleches laterales et le clavier restent) ; la barre se cache comme le Dock masque de macOS : elle apparait au survol du sol, une fleche discrete l'annonce */
html[data-etage] body:not(.yl-e0) #yl-nav4 [data-n="prec"],html[data-etage] body:not(.yl-e0) #yl-nav4 [data-n="suiv"]{display:none!important}
html[data-etage] body:not(.mosaique):not(.atelier):not(.yl-e0) #yl-nav4{opacity:0!important;pointer-events:none!important;transform:translate(-50%,10px)!important;transition:opacity .35s ease,transform .35s ease!important}
html[data-etage] body.yl-dock-vu:not(.mosaique):not(.atelier):not(.dehors):not(.vitre):not(:has(#yl-asc.on)):not(:has(#yl-sortie)):not(:has(#yl-det.on)) #yl-nav4{opacity:1!important;pointer-events:auto!important;transform:translateX(-50%)!important}
#yl-dock-f{display:none;position:fixed;left:50%;bottom:calc(6px + env(safe-area-inset-bottom,0px));z-index:59;width:44px;height:22px;margin-left:-22px;padding:0;border:0;background:none;cursor:pointer;color:#F3F1EC;opacity:.32;transition:opacity .35s ease,transform .35s ease}
#yl-dock-f svg{display:block;width:16px;height:16px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#yl-dock-f:hover{opacity:.7}
html[data-etage] body:not(.mosaique):not(.atelier):not(.dehors):not(.vitre):not(.yl-e0):not(:has(#yl-asc.on)):not(:has(#yl-sortie)):not(:has(#yl-det.on)) #yl-dock-f{display:block}
/* 7 oct. 2026 (valide, etendu a tous les etages le 7 oct.) : etage Photo — le sol se cache avec la barre : par defaut il a la couleur du mur (on est dans l'oeuvre) ; quand la souris descend en bas, le sol « Dieter Rams » (un cran plus sombre) se revele en fondu avec le menu */
html[data-etage] body:not(.yl-e0) .sol .dalle{background:var(--yl-uni,#23272A)!important;background-image:none!important;transition:background-color .6s ease!important}
html[data-etage] body:not(.yl-e0) #scene{background:var(--yl-uni,#23272A)!important}
html[data-etage] body.yl-dock-vu:not(.yl-e0) .sol .dalle{background:color-mix(in srgb,var(--yl-uni,#23272A) 80%,#000)!important}
/* 7 oct. 2026 : le panneau des etages apparait plus vite dans la cabine (avant : 1,1 s + 1,25 s), et presque tout de suite depuis l'accueil */
#yl-asc.choix.ferme .pan ul{transition-delay:.35s!important}
#yl-asc.choix.ferme .pan li{transition-delay:calc(.4s + var(--i,0) * 45ms)!important}
#yl-asc.rez.choix.ferme .pan ul{transition-delay:.1s!important}
#yl-asc.rez.choix.ferme .pan li{transition-delay:calc(.15s + var(--i,0) * 35ms)!important}
/* 7 oct. 2026 : quand le sol est masque, toute la salle prend la couleur de l'oeuvre regardee — les pans de mur voisins (et les pans « Pensees ») suivent la teinte du pan courant, en fondu ; plus de bande d'une autre couleur sur le cote */
html[data-etage] body:not(.yl-e0):not(.yl-dock-vu) #salle .face.mur .station:not(.ici)::before,
html[data-etage] body:not(.yl-e0):not(.yl-dock-vu) #salle .face.mur .station:not(.ici) .pan{background:var(--yl-uni,#23272A)!important;transition:background-color .8s ease!important}
/* 7 oct. 2026 : dans les salles, plus de bouton Ascenseur dans la barre (il reste a l'accueil) ; on change d'etage avec les touches haut / bas ou par Plan > Les autres etages */
html[data-etage] body:not(.yl-e0):not(.atelier) #yl-nav4 [data-n="asc"]{display:none!important}
/* 7 oct. 2026 : les fleches haut et bas appellent l'ascenseur (haut ˄ = monter, bas ˅ = descendre) ; le nom de l'etage reste toujours visible ; la barre du bas apparait toujours au survol du sol, juste au-dessus de la fleche */
#yl-haut-f{display:none;position:fixed;left:50%;top:calc(6px + env(safe-area-inset-top,0px));z-index:59;width:44px;height:22px;margin-left:-22px;padding:0;border:0;background:none;cursor:pointer;color:#F3F1EC;opacity:.32;transition:opacity .35s ease}
#yl-haut-f svg{display:block;width:16px;height:16px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#yl-haut-f:hover,#yl-dock-f:hover{opacity:.8}
html[data-etage] body:not(.mosaique):not(.atelier):not(.dehors):not(.vitre):not(.yl-e0):not(:has(#yl-asc.on)):not(:has(#yl-sortie)):not(:has(#yl-det.on)) #yl-haut-f{display:block}
@media (min-width:761px){ html[data-etage] body:not(.yl-e0):not(.mosaique):not(.atelier) #yl-nav4{bottom:30px!important} }
/* sur ecran tactile (pas de survol) : la barre du bas reste visible */
@media (hover:none){ html[data-etage] body:not(.mosaique):not(.atelier):not(.yl-e0):not(.dehors):not(.vitre):not(:has(#yl-asc.on)):not(:has(#yl-sortie)):not(:has(#yl-det.on)) #yl-nav4{opacity:1!important;pointer-events:auto!important;transform:translateX(-50%)!important;bottom:calc(30px + env(safe-area-inset-bottom,0px))!important} }
/* 7 oct. 2026 : dans les salles, la barre du bas disparait (ascenseur = fleches haut/bas ; mosaique et son = icones sous l'oeuvre, dans le cartel) ; elle revient dans la mosaique pour la fermer, et reste a l'accueil */
html[data-etage] body:not(.yl-e0):not(.mosaique):not(.atelier) #yl-nav4,html body.yl-e0:not(.mosaique) #yl-nav4{display:none!important}
#salle .legende .yl-icos{display:flex;justify-content:flex-end;gap:1.1em;margin-top:.9em;pointer-events:auto}
#salle .legende .yl-icos i{display:block;width:1.05em;height:1.05em;cursor:pointer;opacity:.45;transition:opacity .25s;font-style:normal}
#salle .legende .yl-icos i:hover,#salle .legende .yl-icos i:focus-visible{opacity:.95}
#salle .legende .yl-icos svg{display:block;width:100%;height:100%;fill:currentColor}
#salle .legende .yl-icos .yl-i-son svg{fill:none;stroke:currentColor;stroke-width:1.5}
#salle .legende .yl-icos .yl-i-son.muet{color:var(--rouge,#E5142C);opacity:.8}
/* 7 oct. 2026 : quatre icones sous l'oeuvre (Ascenseur, Partager, Mosaique, Son) ; le mot « partager » laisse place a l'icone (il ne reparait que pour dire « lien copie ») ; meme rangee sous l'Oeuvre de la semaine a l'accueil */
#salle .legende .yl-icos svg,#yl-entree .yl-icos svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#salle .legende .yl-icos svg.pl,#yl-entree .yl-icos svg.pl,#salle .legende .yl-icos .yl-i-asc .p,#yl-entree .yl-icos .yl-i-asc .p{fill:currentColor;stroke:none}
#salle .legende .yl-icos i.ok,#yl-entree .yl-icos i.ok{opacity:1;color:var(--rouge,#E5142C)}
.cadre .legende .partage-o:not(.ok){display:none!important}
#yl-entree .yl-une figcaption .yl-icos{display:flex;justify-content:flex-end;gap:1.1em;margin-top:.9em;pointer-events:auto}
#yl-entree .yl-icos i{display:block;width:15px;height:15px;cursor:pointer;opacity:.45;transition:opacity .25s;font-style:normal;color:#F3F1EC}
#yl-entree .yl-icos i:hover,#yl-entree .yl-icos i:focus-visible{opacity:.95}
#yl-entree .yl-icos svg{display:block;width:100%;height:100%}
#yl-entree .yl-icos .yl-i-son.muet{color:var(--rouge,#E5142C);opacity:.8}
/* 7 oct. 2026 (essai) : cartel allege et centre sous l'oeuvre — au mur : titre, artiste et les quatre icones ; serie, technique, edition, droits et « disponible » passent sur l'etiquette au dos */
#salle .cadre .legende{left:0!important;right:0!important;width:auto!important;max-width:none!important;text-align:center!important}
#salle .legende .yl-icos{justify-content:center!important}
#salle .cadre:has(.dos .cart) .legende .tech,#salle .cadre:has(.dos .cart) .legende .cr,#salle .cadre:has(.dos .cart) .legende em,#salle .cadre:has(.dos .cart) .legende .dispo{display:none!important}
.cadre .dos .cart .yl-dos-x{display:block;margin-top:calc(var(--Hm)*.008);font-style:normal;font-size:calc(var(--Hm)*.012);letter-spacing:.06em;line-height:1.45;opacity:.75}
.cadre .dos .cart .yl-dos-x .ser{display:block;letter-spacing:.2em;text-transform:uppercase;color:var(--rouge,#C8102E);opacity:.9}
.cadre .dos .cart .yl-dos-x .cr{display:block;margin-top:.3em;font-size:.85em;opacity:.7}
/* 7 oct. 2026 : plus aucun sol, meme au survol du bas — sous les murs, seulement la couleur de la salle */
html[data-etage] #salle .face.sol{visibility:hidden!important}
html[data-etage] #salle .face.mur .station:not(.ici)::before,html[data-etage] #salle .face.mur .station:not(.ici) .pan{background:var(--yl-uni,#23272A)!important;transition:background-color .8s ease!important}
/* 7 oct. 2026 : accueil comme les etages — plus de sol, cartel et icones centres, cartel a mi-chemin entre le bas de l'oeuvre et le bas de l'ecran */
/* 11 oct. 2026 : le sol revient a l accueil (etage 0) a la demande de Fabien — sol uni « Dieter Rams » (yl-vitrine.php) ; les etages restent sans sol */
#yl-entree .yl-une figcaption .yl-icos{justify-content:center!important}
/* 7 oct. 2026 : apres 3 s sans bouger devant une oeuvre, le cartel (titre, artiste, icones) s'efface ; il revient au moindre mouvement — le nom de l'etage, lui, reste toujours */
#salle .station .legende,#yl-entree .yl-une figcaption{transition:opacity .6s ease}
body.yl-veille #salle .station.ici .legende,body.yl-veille #yl-entree.vu .yl-une figcaption{opacity:0!important;transition:opacity 1.2s ease!important;pointer-events:none!important}
/* 7 oct. 2026 : le nom de l'etage ne voyage plus avec le mur — il est pose a l'ecran, reste en place quand on passe d'une oeuvre a l'autre (a mi-chemin entre le haut de l'ecran et le haut du tableau regarde) ; il s'efface avec le cartel apres 3 s d'inactivite */
html[data-etage] body:not(.yl-e0) #salle .grave-g{visibility:hidden!important}
#yl-titre-e{position:fixed;left:0;right:0;z-index:8;margin:0;text-align:center;pointer-events:none;font-family:Jost,Futura,"Avenir Next",Helvetica,sans-serif;font-weight:400;font-size:6.2vh;line-height:1;letter-spacing:-.015em;color:#F3F1EC;text-shadow:0 -.08vh 0 rgba(0,0,0,.35),0 .1vh .1vh rgba(255,255,255,.12);transform:translateY(-50%);opacity:0;transition:opacity .6s ease,top .5s ease}
#yl-titre-e.on{opacity:1}
body.yl-veille #yl-titre-e.on{opacity:0;transition:opacity 1.2s ease,top .5s ease}

/* 8 oct. 2026 : le menu des 4 icones se detache du cartel (sa place est calculee en JS : cartel au 1er tiers, menu au 2e tiers entre le bas de l'oeuvre et le bas de l'ecran) ; icones un peu plus grandes */
#salle .legende .yl-icos i{width:1.3em!important;height:1.3em!important}
#salle .legende .yl-icos,#yl-entree .yl-une figcaption .yl-icos{gap:1.4em!important}
#yl-entree .yl-icos i{width:19px!important;height:19px!important}

/* 8 oct. 2026 : le nom de l'etage est cliquable (il ouvre la mosaique) ; la mosaique prend la couleur de la salle regardee et se range sous le nom de l'etage, qui ne bouge pas */
#yl-titre-e.on{pointer-events:auto;cursor:pointer}
#yl-titre-e.on:hover,#yl-titre-e.on:focus-visible{opacity:.8;outline:none}
#yl-titre-e.yl-mos-on{z-index:9}
html[data-etage] body:not(.yl-e0) #yl-mos{background:var(--yl-uni,#23272A)!important;transition:opacity .9s ease,background-color .6s ease}
html[data-etage] body:not(.yl-e0) #yl-mos.yl-sous-titre{justify-content:flex-start!important}
/* 8 oct. 2026 (b) : petite fleche discrete sous le nom de l'etage — il ouvre un menu (la mosaique) ; elle se retourne quand la mosaique est ouverte */
#yl-titre-e::after{content:"";position:absolute;left:50%;top:calc(100% + .32em);width:.2em;height:.2em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translate(-50%,-70%) rotate(45deg);opacity:.45;transition:opacity .25s,transform .4s ease}
#yl-titre-e.on:hover::after,#yl-titre-e.on:focus-visible::after{opacity:.85}
#yl-titre-e.yl-mos-on::after{transform:translate(-50%,-30%) rotate(225deg)}
/* 8 oct. 2026 (b) : seul le mot est cliquable, pas toute la largeur de l'ecran */
#yl-titre-e{left:50%;right:auto;width:max-content;transform:translate(-50%,-50%)}

/* 8 oct. 2026 (c) : menu du site en bas, discret, le meme partout ; le cartel ne garde que Partager ; la mosaique n'a plus sa ligne d'onglets (le menu du site la remplace) */
#yl-site{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:0;white-space:nowrap;font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#E9E4DA;transition:opacity .6s ease}
#yl-site>button,#yl-site .yl-site-lg>button{background:none;border:0;border-bottom:1px solid transparent;padding:5px 2px;margin:0 13px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;opacity:.45;cursor:pointer;transition:opacity .25s,border-color .25s}
#yl-site button:hover,#yl-site button:focus-visible{opacity:.95;outline:none}
#yl-site>button.on{opacity:1;border-bottom-color:var(--rouge,#E5142C)}
#yl-site>button.muet{color:var(--rouge,#E5142C);opacity:.85}
#yl-site .yl-site-lg{position:relative}
#yl-site .yl-site-ll{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;width:200px;padding:12px 14px;background:rgba(14,12,11,.96);border:1px solid rgba(243,241,236,.12);border-radius:8px}
#yl-site .yl-site-ll[hidden]{display:none}
#yl-site .yl-site-ll button{background:none;border:0;border-bottom:1px solid transparent;padding:3px 0;font:inherit;letter-spacing:.14em;color:#CFC9BE;opacity:.6;cursor:pointer}
#yl-site .yl-site-ll button.on{opacity:1;border-bottom-color:var(--rouge,#E5142C)}
#yl-site.off{opacity:0!important;pointer-events:none!important}
body.yl-veille #yl-site:not(.dans-mos){opacity:0;pointer-events:none;transition:opacity 1.2s ease}
@media (max-width:760px){ #yl-site{font-size:10px;letter-spacing:.16em} #yl-site>button,#yl-site .yl-site-lg>button{margin:0 7px} }
/* cartel : seul Partager reste */
#salle .legende .yl-icos .yl-i-asc,#salle .legende .yl-icos .yl-i-mos,#salle .legende .yl-icos .yl-i-son,#yl-entree .yl-icos .yl-i-asc,#yl-entree .yl-icos .yl-i-mos,#yl-entree .yl-icos .yl-i-son{display:none!important}
#salle .legende .yl-icos,#yl-entree .yl-une figcaption .yl-icos{margin-top:.7em!important}
#salle .legende .yl-icos i{width:1.1em!important;height:1.1em!important}
#yl-entree .yl-icos i{width:16px!important;height:16px!important}
/* mosaique : plus de ligne d'onglets ni de barre du bas ; elle se referme par le nom de l'etage, Echap, ou le menu du site */
#yl-mos .mos-onglets{display:none!important}
body.mosaique #yl-nav4{display:none!important}
#yl-mos{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))!important}
/* 8 oct. 2026 (d) : menu du site au-dessus de l'accueil ; titre de l'accueil cliquable avec sa fleche */
#yl-site{z-index:30}
#yl-entree.vu .yl-hall .yl-titre{pointer-events:auto;cursor:pointer;z-index:3}
#yl-entree.vu .yl-hall .yl-titre:hover{opacity:.85}
#yl-entree .yl-hall .yl-titre::after{content:"";display:block;width:.42em;height:.42em;margin:.7em auto 0;border-right:1.5px solid #F3F1EC;border-bottom:1.5px solid #F3F1EC;transform:rotate(45deg);opacity:.45;font-size:clamp(13px,1.25vw,18px);transition:opacity .25s}
#yl-entree.vu .yl-hall .yl-titre:hover::after{opacity:.85}
body.yl-veille #yl-entree.vu .yl-hall .yl-titre::after{opacity:0;transition:opacity 1.2s ease}
/* 8 oct. 2026 (e) : plus de pied de page — le menu du site passe en icones dans le cartel (Partager, Pensees, A propos, Contact, Son, langue) */
#yl-site{display:none!important}
#salle .legende .yl-icos .yl-i-son,#yl-entree .yl-icos .yl-i-son{display:block!important}
#salle .legende .yl-icos .yl-i-lang,#yl-entree .yl-icos .yl-i-lang{width:auto!important;min-width:1.1em;font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;font-size:.78em;line-height:1.45;letter-spacing:.18em;text-transform:uppercase;text-align:center}
#yl-entree .yl-icos .yl-i-lang{font-size:11px;line-height:16px}
#salle .legende .yl-icos svg .p,#yl-entree .yl-icos svg .p{fill:currentColor;stroke:none}
#salle .legende .yl-icos .yl-i-pens svg,#yl-entree .yl-icos .yl-i-pens svg{fill:currentColor;stroke:none}
#yl-lg-pop{position:fixed;z-index:80;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;width:200px;padding:12px 14px;background:rgba(14,12,11,.96);border:1px solid rgba(243,241,236,.12);border-radius:8px;font-family:"Cormorant Garamond",Georgia,serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
#yl-lg-pop[hidden]{display:none}
#yl-lg-pop button{background:none;border:0;border-bottom:1px solid transparent;padding:3px 0;font:inherit;letter-spacing:inherit;color:#CFC9BE;opacity:.6;cursor:pointer}
#yl-lg-pop button:hover{opacity:1}#yl-lg-pop button.on{opacity:1;border-bottom-color:var(--rouge,#E5142C)}
/* titre des etages : « YouLab » puis le nom de l'etage en rouge dessous, dans les tailles de l'accueil */
#yl-titre-e{font-size:inherit!important}
#yl-titre-e span{display:block;font-size:clamp(26px,3.1vw,44px);font-weight:400;letter-spacing:-.015em;line-height:1}
#yl-titre-e i{display:block;margin-top:.5em;font-style:normal;font-weight:400;font-size:clamp(13px,1.25vw,18px);letter-spacing:.04em;line-height:1;color:var(--rouge,#E5142C);text-shadow:none}
#yl-titre-e::after{font-size:clamp(26px,3.1vw,44px)}
/* 8 oct. 2026 (f) : « Les etages » en vignettes a tous les etages (meme dessin que le plan de l'accueil) */
#yl-mos .yl-autres.yl-plan-e{display:block;width:100%;max-width:1180px;margin:60px auto 30px;padding:0;border:0;text-align:left;box-sizing:border-box;align-self:stretch}
#yl-mos .yl-autres.yl-plan-e h3{margin:0 0 18px;padding:0 0 10px;border-bottom:1px solid rgba(229,20,44,.35);font:400 12px/1.4 "Cormorant Garamond","Iowan Old Style",Georgia,serif;letter-spacing:.42em;text-transform:uppercase;color:#F3F1EC}
#yl-mos .yl-autres.yl-plan-e .et{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:700px){ #yl-mos .yl-autres.yl-plan-e .et{grid-template-columns:repeat(2,minmax(0,1fr))} }
#yl-mos .yl-autres.yl-plan-e button{all:unset;box-sizing:border-box;position:relative;display:block;width:100%;cursor:pointer;background:#1a1716}
#yl-mos .yl-autres.yl-plan-e button img,#yl-mos .yl-autres.yl-plan-e button .vide{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;padding:0;border:0;background:#141210;transition:filter .3s ease}
#yl-mos .yl-autres.yl-plan-e button:hover img{filter:brightness(1.08)}
#yl-mos .yl-autres.yl-plan-e button small{display:block;padding:12px 2px 4px;background:#111;font:400 12px/1.4 "Cormorant Garamond",Georgia,serif;letter-spacing:.3em;text-transform:uppercase;color:#F3F1EC}
#yl-mos .yl-autres.yl-plan-e button.cur{outline:1px solid var(--rouge,#E5142C);outline-offset:2px}
/* 8 oct. 2026 (f) : Partager colle au titre de l'oeuvre, petit, dans la meme encre */
#salle .legende>b>.yl-i-part,#yl-entree .yl-une .tit>.yl-i-part{display:inline-block;width:.8em;height:.8em;margin:0 0 0 .55em;vertical-align:-.02em;cursor:pointer;opacity:.45;transition:opacity .25s;font-style:normal}
#salle .legende>b>.yl-i-part:hover,#yl-entree .yl-une .tit>.yl-i-part:hover{opacity:.95}
#salle .legende>b>.yl-i-part svg,#yl-entree .yl-une .tit>.yl-i-part svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#salle .legende>b>.yl-i-part.ok,#yl-entree .yl-une .tit>.yl-i-part.ok{opacity:1;color:var(--rouge,#E5142C)}
/* 8 oct. 2026 (g) : plus d'effacement automatique ; le mode Plein ecran ne garde que l'oeuvre */
body.yl-veille #salle .station.ici .legende,body.yl-veille #yl-entree.vu .yl-une figcaption,body.yl-veille #yl-titre-e.on{opacity:1!important;pointer-events:auto!important}
body.yl-immersion #salle .station.ici .legende,body.yl-immersion #yl-entree .yl-une figcaption,body.yl-immersion #yl-titre-e,body.yl-immersion #yl-entree .yl-hall .yl-titre,body.yl-immersion #yl-entree .yl-hall .fl{opacity:0!important;pointer-events:none!important;transition:opacity .8s ease!important}

/* 8 oct. 2026 (h) : Partager quitte le titre ; au survol du tableau, « i » et Partager dans le coin ; au dos, « Partager cette oeuvre » */
#salle .legende .yl-i-part{display:none!important}
#yl-entree .yl-une figcaption .yl-icos .yl-i-part{display:block!important}
#salle .cadre>.yl-sur{position:absolute;top:10px;right:10px;z-index:5;display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity .3s ease;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#salle .station.ici .cadre:not(.dosvis):hover>.yl-sur{opacity:1;pointer-events:auto}
#salle .cadre.dosvis>.yl-sur{display:none}
#salle .cadre>.yl-sur button{display:block;width:30px;height:30px;padding:6px;border:0;border-radius:50%;background:rgba(14,12,11,.55);color:#F3F1EC;cursor:pointer;opacity:.85;transition:opacity .2s,background-color .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#salle .cadre>.yl-sur button:hover{opacity:1;background:rgba(14,12,11,.8)}
#salle .cadre>.yl-sur button.ok{color:var(--rouge,#E5142C)}
#salle .cadre>.yl-sur svg,.cadre .dos .yl-dos-p svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#salle .cadre>.yl-sur svg .p{fill:currentColor;stroke:none}
.cadre .dos .yl-dos-p{display:inline-flex;align-items:center;gap:.5em;margin-top:calc(var(--Hm)*.012);padding:.3em 0;border:0;background:none;font:inherit;font-size:calc(var(--Hm)*.012);letter-spacing:.14em;text-transform:uppercase;color:inherit;opacity:.65;cursor:pointer}
.cadre .dos .yl-dos-p svg{width:1.2em;height:1.2em}
.cadre .dos .yl-dos-p:hover{opacity:1}
.cadre .dos .yl-dos-p.ok{opacity:1;color:var(--rouge,#C8102E)}
/* 8 oct. 2026 (i) : ligne des etages en haut de la mosaique (remplace les vignettes du bas) */
#yl-mos .yl-autres.yl-ligne-e{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px;width:100%;margin:0 0 4px;padding:0;border:0;text-align:center}
#yl-mos .yl-autres.yl-ligne-e button{all:unset;cursor:pointer;padding:6px 2px;border-bottom:1px solid transparent;font:400 12px/1.4 "Cormorant Garamond","Iowan Old Style",Georgia,serif;letter-spacing:.3em;text-transform:uppercase;color:#CFC9BE;opacity:.6;transition:opacity .25s,border-color .25s}
#yl-mos .yl-autres.yl-ligne-e button b{font-weight:400;margin-right:.6em;opacity:.7}
#yl-mos .yl-autres.yl-ligne-e button:hover,#yl-mos .yl-autres.yl-ligne-e button:focus-visible{opacity:1;outline:none}
#yl-mos .yl-autres.yl-ligne-e button.cur{opacity:1;color:#F3F1EC;border-bottom-color:var(--rouge,#E5142C)}
@media (max-width:700px){ #yl-mos .yl-autres.yl-ligne-e{gap:2px 14px} #yl-mos .yl-autres.yl-ligne-e button{font-size:11px;letter-spacing:.18em} }
/* 8 oct. 2026 (i) : icones sur le tableau — i en bas a gauche, plein ecran en bas a droite, a egale distance des bords ; posees devant la photo dans la 3D */
#salle .cadre>.yl-sur,#yl-entree .yl-une .cadre-v>.yl-sur{position:absolute;left:14px;right:14px;bottom:14px;top:auto;display:block;height:30px;transform:translateZ(4px);gap:0}
#yl-entree .yl-une .cadre-v>.yl-sur{opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:3}
#yl-entree.vu .yl-une .cadre-v:hover>.yl-sur{opacity:1;pointer-events:auto}
#salle .cadre>.yl-sur button.g,#yl-entree .yl-une .cadre-v>.yl-sur button.g{position:absolute;left:0;bottom:0}
#salle .cadre>.yl-sur button.d,#yl-entree .yl-une .cadre-v>.yl-sur button.d{position:absolute;right:0;bottom:0}
#yl-entree .yl-une .cadre-v>.yl-sur button{display:block;width:30px;height:30px;padding:6px;border:0;border-radius:50%;background:rgba(14,12,11,.55);color:#F3F1EC;cursor:pointer;opacity:.85;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#yl-entree .yl-une .cadre-v>.yl-sur svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* plein ecran quitte la rangee du cartel (il est sur le tableau) */
#salle .legende .yl-icos .yl-i-pe,#yl-entree .yl-icos .yl-i-pe{display:none!important}#salle .station.ici .cadre.yl-survol:not(.dosvis)>.yl-sur,#yl-entree.vu .yl-une .cadre-v.yl-survol>.yl-sur{opacity:1;pointer-events:auto}

/* 8 oct. 2026 (j) : accueil — mosaique de la couleur de l'accueil ; ligne des etages au-dessus du plan ; plus de vignettes « Les etages » (doublon de la ligne) */
html body.yl-e0 #yl-mos{background:var(--yl-acc,#23272A)!important}
html body.yl-e0 #yl-mos.yl-sous-titre{justify-content:flex-start!important}
#yl-mos.yl-plan .yl-autres.yl-ligne-e{display:flex!important;margin-bottom:26px}
#yl-mos .yl-plan-b h3:nth-of-type(2),#yl-mos .yl-plan-b .et{display:none!important}
/* accueil : l'oeuvre de la semaine a un dos */
#yl-entree .yl-une .cadre-v{transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.45,0,.2,1);cursor:pointer}

#yl-entree .yl-une .cadre-v>img{backface-visibility:hidden;-webkit-backface-visibility:hidden}
#yl-entree .yl-une .cadre-v.yl-dos-on>.yl-sur{opacity:0!important;pointer-events:none!important}
#yl-entree .yl-une .yl-dos-a{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6%;box-sizing:border-box;background:#3B342B radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.08),rgba(0,0,0,.18) 75%);transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;color:#1A1816}
#yl-entree .yl-une .yl-dos-a .cart{display:flex;flex-direction:column;align-items:center;gap:.35em;max-width:80%;padding:1.1em 1.6em;background:#F6F3EC;box-shadow:0 2px 6px rgba(0,0,0,.35);text-align:center;font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;transform:rotate(-.6deg)}
#yl-entree .yl-une .yl-dos-a .cart b{font-weight:400;font-size:clamp(16px,1.6vw,22px);letter-spacing:.03em}
#yl-entree .yl-une .yl-dos-a .cart i{font-style:normal;font-size:clamp(10px,.9vw,12px);letter-spacing:.2em;text-transform:uppercase;opacity:.65}
#yl-entree .yl-une .yl-dos-a .cart em{font-style:normal;font-size:clamp(10px,.85vw,12px);letter-spacing:.06em;opacity:.65}
#yl-entree .yl-une .yl-dos-a .cart small{font-size:clamp(9px,.8vw,11px);letter-spacing:.18em;text-transform:uppercase;color:var(--rouge,#C8102E);opacity:.85}
#yl-entree .yl-une .yl-dos-a .yl-dos-p{display:inline-flex;align-items:center;gap:.5em;margin-top:.5em;padding:.3em 0;border:0;background:none;font:inherit;font-size:clamp(9px,.8vw,11px);letter-spacing:.14em;text-transform:uppercase;color:inherit;opacity:.65;cursor:pointer}
#yl-entree .yl-une .yl-dos-a .yl-dos-p svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#yl-entree .yl-une .yl-dos-a .yl-dos-p:hover{opacity:1}
#yl-entree .yl-une .yl-dos-a .yl-dos-p.ok{opacity:1;color:var(--rouge,#C8102E)}
#yl-entree .yl-une .cadre-v>.yl-sur svg .p{fill:currentColor;stroke:none}
/* Partager quitte aussi la rangee de l'accueil : il est au dos */
#yl-entree .yl-une figcaption .yl-icos .yl-i-part{display:none!important}/* 8 oct. 2026 (j) : un seul plein ecran sur les videos — celui du coin bas droit (il ouvre le lecteur natif) */
#salle .cadre .ylv-fs{display:none!important}
/* 8 oct. 2026 (k) : salle claire — encre sombre pour le titre et la mosaique (contraste suffisant sur les gris et les couleurs pales) */
body.yl-salle-claire #yl-titre-e{color:#24201C;text-shadow:0 1px 0 rgba(255,255,255,.25)}
body.yl-salle-claire #yl-titre-e i{color:#B00E24}
#yl-mos.yl-clair{color:#24201C}
#yl-mos.yl-clair .yl-ligne-e button,#yl-mos.yl-clair .yl-dd-t,#yl-mos.yl-clair .nomg,#yl-mos.yl-clair button.nomg,#yl-mos.yl-clair .yl-cnt,#yl-mos.yl-clair .mos-vide,#yl-mos.yl-clair .mos-apropos,#yl-mos.yl-clair .mos-apropos h3,#yl-mos.yl-clair .yl-filt .mos-art-t,#yl-mos.yl-clair .mos-art-menu .mos-artistes button,#yl-mos.yl-clair .yl-plan-b h3,#yl-mos.yl-clair .yl-autres p{color:#24201C!important;text-shadow:none!important}
#yl-mos.yl-clair .yl-ligne-e button{opacity:.7}
#yl-mos.yl-clair .yl-ligne-e button.cur,#yl-mos.yl-clair .yl-ligne-e button:hover{opacity:1}
#yl-mos.yl-clair .yl-dd-t i{border-color:#24201C}
#yl-mos.yl-clair .mos-etage{color:#B00E24!important;border-bottom-color:rgba(176,14,36,.45)!important}
#yl-mos.yl-clair .mos-apropos em{color:#B00E24}
/* 8 oct. 2026 (k) : accueil — vrai retournement 3D, a la meme vitesse que dans les salles (perspective sur le cadre, 1,05 s) */
#yl-entree .yl-une,#yl-une-fond .yl-une{perspective:1800px;-webkit-perspective:1800px}
#yl-entree .yl-une .cadre-v{transform-style:preserve-3d!important;-webkit-transform-style:preserve-3d!important;transition:transform 1.05s cubic-bezier(.45,0,.2,1)!important;will-change:transform}
/* 8 oct. 2026 (l) : le retournement de l'accueil est anime en JS (perspective incluse) — plus de transition CSS concurrente */
#yl-entree .yl-une .cadre-v{transition:none!important}
/* la mosaique apparait d'un coup, sans fondu (le tableau ne s'efface plus lentement) */
#yl-mos,html[data-etage] body:not(.yl-e0) #yl-mos,html body.yl-e0 #yl-mos{transition:none!important}
/* plus de titre de section (« 3 · MUSIQUE ») dans la mosaique des etages : le titre et la ligne des etages le disent deja ; plus de compteur a cote de « Tous les artistes » */
html[data-etage] body:not(.yl-e0) #yl-mos .mos-etage{display:none!important}
#yl-mos .mos-nb{display:none!important}
/* ascenseur : chiffres des etages plus lisibles dans la gaine */
#yl-asc .puits .niv b{color:rgba(255,255,255,.66)!important}
/* 8 oct. 2026 (m) : la mosaique reste invisible le temps de se mettre en place (2 images), puis apparait d'un coup a sa place definitive */
#yl-mos.on.yl-pose>*{visibility:hidden!important} /* 8 oct. 2026 (ee) : seul le contenu attend sa mise en place ; le fond noir couvre l'ecran tout de suite (avant, on voyait la salle Photo par transparence pendant 2 images) */
/* 8 oct. 2026 (n) : jamais de pensees dans la mosaique des oeuvres */
#yl-mos:not(.pensees) .grp.pens{display:none!important}
#salle .legende .yl-icos .yl-i-pens.on{color:var(--rouge,#E5142C);opacity:.9}
/* 8 oct. 2026 (p) : accueil — le dos remplace la face a mi-tour (plus de faces cachees en 3D) */
#yl-entree .yl-une .yl-dos-a{transform:none!important;display:none}
#yl-entree .yl-une .cadre-v.yl-dos-on .yl-dos-a{display:flex}
#yl-entree .yl-une .cadre-v.yl-dos-on>img{visibility:hidden}
/* 8 oct. 2026 (q) : retournement de l'accueil — la perspective est portee par le cadre parent (methode la plus compatible, Safari compris) ; le tableau lui-meme reste plat */
#yl-entree .yl-une{perspective:1400px!important;-webkit-perspective:1400px!important;perspective-origin:50% 50%}
#yl-entree .yl-une .cadre-v{transform-style:flat!important;-webkit-transform-style:flat!important;will-change:auto!important}
/* 8 oct. 2026 (r) : lecteur audio centre sous le tableau — la ligne de lecture sur toute la largeur, le bouton lecture/pause au centre, juste dessous (pensees comprises) */
#salle .cadre .pp{left:50%!important;right:auto!important;bottom:calc(var(--Hm)*-.085)!important;transform:translate(-50%,50%)!important}
#salle .cadre.sonne .lect{left:0!important;right:0!important}
/* 8 oct. 2026 (s) : la perspective est dans la transformation du tableau — plus de perspective sur le cadre parent (sinon elle se cumule) */
#yl-entree .yl-une,#yl-une-fond .yl-une{perspective:none!important;-webkit-perspective:none!important}
#yl-entree .yl-une .cadre-v{transition:none!important;will-change:transform!important;-webkit-backface-visibility:visible;backface-visibility:visible}
#yl-entree .yl-une .cadre-v>img{-webkit-backface-visibility:visible!important;backface-visibility:visible!important}
/* 8 oct. 2026 (t) : accueil — la perspective sur le cadre, les faces (photo, dos) tournent dedans : la methode classique, celle que Safari rend sans faute */
#yl-entree .yl-une .cadre-v{perspective:1400px!important;-webkit-perspective:1400px!important;perspective-origin:50% 50%;transform:none!important;-webkit-transform:none!important;transform-style:flat!important;will-change:auto!important}
#yl-entree .yl-une .cadre-v>img,#yl-entree .yl-une .yl-dos-a{will-change:transform;transform-origin:50% 50%}
#yl-entree .yl-une .cadre-v>img{display:block}
/* un seul plein ecran sur les photos : celui du coin bas droit (l'ancien bouton du coin haut droit est retire) */
#salle .cadre>.yl-fs{display:none!important}
/* 8 oct. 2026 (u) : vitres de la cabine un peu plus claires pendant le trajet — l'etage qui passe se voit mieux en transparence */
#yl-asc.cabine:has(.puits.monte0) .front::after{background:rgba(8,8,10,.32)!important}
/* 8 oct. 2026 (v) : calque de retournement de l'accueil — meme structure que #scene (fixe sous body, perspective dessus, preserve-3d dessous) */
#yl-flip{position:fixed;inset:0;z-index:25;perspective:1400px;-webkit-perspective:1400px;perspective-origin:50% 50%;pointer-events:none;overflow:visible}
#yl-flip .bloc{position:absolute;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform}
#yl-flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#yl-flip .face img{display:block;width:100%;height:100%;object-fit:cover;box-shadow:0 0 0 1px rgba(255,248,236,.1),0 34px 65px -16px rgba(0,0,0,.62)}
#yl-flip .face.dosf{display:flex;align-items:center;justify-content:center;padding:6%;box-sizing:border-box;transform:rotateY(180deg);background:#3B342B radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.08),rgba(0,0,0,.18) 75%);color:#1A1816}
#yl-flip .face.dosf .cart{display:flex;flex-direction:column;align-items:center;gap:.35em;max-width:80%;padding:1.1em 1.6em;background:#F6F3EC;box-shadow:0 2px 6px rgba(0,0,0,.35);text-align:center;font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;transform:rotate(-.6deg)}
#yl-flip .face.dosf .cart b{font-weight:400;font-size:clamp(16px,1.6vw,22px);letter-spacing:.03em}
#yl-flip .face.dosf .cart i{font-style:normal;font-size:clamp(10px,.9vw,12px);letter-spacing:.2em;text-transform:uppercase;opacity:.65}
#yl-flip .face.dosf .cart em{font-style:normal;font-size:clamp(10px,.85vw,12px);letter-spacing:.06em;opacity:.65}
#yl-flip .face.dosf .cart small{font-size:clamp(9px,.8vw,11px);letter-spacing:.18em;text-transform:uppercase;color:var(--rouge,#C8102E);opacity:.85}
#yl-flip .face.dosf .yl-dos-p{display:inline-flex;align-items:center;gap:.5em;margin-top:.5em;padding:.3em 0;border:0;background:none;font:inherit;font-size:clamp(9px,.8vw,11px);letter-spacing:.14em;text-transform:uppercase;color:inherit;opacity:.65}
#yl-flip .face.dosf .yl-dos-p svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.5}
/* l'oeuvre elle-meme ne tourne plus : ses faces s'echangent d'un coup, cachees derriere le calque */
#yl-entree .yl-une .cadre-v>img,#yl-entree .yl-une .yl-dos-a{transform:none!important;will-change:auto!important}
/* 8 oct. 2026 (w) : ascenseur — la dalle et la salle d'arrivee se voient vraiment a travers la vitre (avant : dalle #1A1210 sur gaine noire, vitre teintee a 42 % : tout etait noir) */
html body #yl-asc.m0.cabine .porte,html body #yl-asc.m0.cabine.roule .porte,html body #yl-asc.m0.cabine.ouvre .porte{background-color:rgba(18,8,6,.16)!important}
#yl-asc .gaine0 .trou{background:linear-gradient(to right,#121214,#1C1C1F 50%,#121214)}
#yl-asc .gaine0.bas .trou{background:linear-gradient(to right,#121214,#1C1C1F 50%,#121214)}
#yl-asc .gaine0 .dalle0,#yl-asc .gaine0.bas .dalle0{height:20vh;background:linear-gradient(to bottom,#4C4541,#363230 55%,#26221F);box-shadow:inset 0 2px 0 rgba(237,232,224,.45),inset 0 -2px 0 rgba(0,0,0,.6),0 3vh 5vh rgba(0,0,0,.55),0 -2vh 4vh rgba(0,0,0,.35)}
#yl-asc .gaine0 .ciel{background:linear-gradient(to bottom,transparent 60%,rgba(8,6,5,.35))}
#yl-asc .gaine0.bas .ciel{background:linear-gradient(to top,transparent 60%,rgba(8,6,5,.35))}
#yl-asc.vers0 .puits{opacity:1;background:#0E0E10}
#yl-asc.vers0 .puits .niv{filter:blur(.8px) saturate(.9)}
#yl-asc .front .gaine0.sort{transform:translateY(0)}
#yl-asc .front .gaine0.sort.va{transform:translateY(-116vh)}
/* 8 oct. 2026 (y) : trajet vers l'accueil — dalle epaisse (une hauteur d'ecran) : la salle quittee monte, la dalle remplit la vitre, la page se recharge sans passer par le noir, puis la dalle finit de monter et l'accueil apparait */
#yl-asc .gaine0.epais .dalle0{height:100vh;background:linear-gradient(to bottom,#4C4541,#3A3532 6%,#302C29 94%,#26221F)}
#yl-asc .gaine0.sort.epais .trou{top:200vh}
#yl-asc .gaine0.bas.epais .ciel{top:200vh}
/* 8 oct. 2026 (z) : hall ouvert — le « o » du logo (bouton d'entree) reste au centre de l'ecran, sous l'oeuvre : dans Safari il attrapait le clic au milieu du tableau et ouvrait l'ascenseur. Il ne recoit plus la souris une fois dans le hall. */
html body #yl-entree.vu .nom,html body #yl-entree.vu .nom .nm-o,html body #yl-entree.vu .nom .nm-o *{pointer-events:none!important}
#yl-asc .gaine0.epais .dalle0,#yl-asc .gaine0.sort.epais .trou{background:repeating-linear-gradient(to bottom,transparent 0 24vh,rgba(0,0,0,.28) 24vh calc(24vh + 2px),rgba(255,255,255,.05) calc(24vh + 2px) calc(24vh + 3px),transparent calc(24vh + 3px) 25vh),linear-gradient(to bottom,#3D3733,#332F2C)}
#yl-asc .gaine0.sort.epais .trou{height:200vh}
/* 8 oct. 2026 (A) : retour a l'accueil sans rechargement */
html body #yl-entree.range{display:none!important}
html body #yl-entree.retour,html body #yl-entree.retour .yl-hall{opacity:1!important;transition:none!important}
html body #yl-entree.retour .battant{transition:none!important}
#yl-asc .gaine0.sort.epais.hall .trou{background:transparent;height:100vh}
/* 8 oct. 2026 (A) : plus de panneau des chiffres dans la cabine — les etages se choisissent dans la mosaique (« Les étages ») ou aux fleches du clavier */
/* 12 oct. 2026 : le panneau des chiffres revient au centre de la porte de l'ascenseur (Fabien) */
/* 8 oct. 2026 (A) : montee depuis le hall — le hall descend derriere la vitre, la dalle epaisse passe, la salle Photo apparait */
#yl-asc .front .gaine0.monte-hall{transform:translateY(-200vh)}
#yl-asc .front .gaine0.monte-hall.va{transform:translateY(0)}
#yl-asc .gaine0.monte-hall .trou{top:0;height:100vh;background:transparent}
#yl-asc .gaine0.monte-hall .dalle0{top:100vh;height:100vh}
#yl-asc .gaine0.monte-hall .ciel{top:200vh;height:100vh;background:transparent}
/* 8 oct. 2026 (B) : plus de fond marron dans l'ascenseur — dalle fine gris graphite, vitres neutres, le hall apparait/disparait en fondu derriere la dalle */
html body #yl-entree.retour{opacity:1!important;transition:opacity .5s ease!important}
html body #yl-entree.retour.fondu{opacity:0!important}
#yl-asc .front .gaine0.hall2.sort{transform:translateY(0)}
#yl-asc .front .gaine0.hall2.monte{transform:translateY(-130vh)}
#yl-asc .front .gaine0.hall2.monte.va{transform:translateY(0)}
#yl-asc .gaine0.hall2 .ciel{top:0!important;height:100vh!important;background:transparent!important}
#yl-asc .gaine0.hall2 .trou{top:130vh!important;height:100vh!important;background:transparent!important}
#yl-asc .gaine0.hall2 .dalle0{top:100vh!important;height:30vh!important}
#yl-asc .gaine0 .dalle0,#yl-asc .gaine0.bas .dalle0,#yl-asc .gaine0.epais .dalle0,#yl-asc .gaine0.hall2 .dalle0{background:linear-gradient(to bottom,#3A3A3D 0,#2B2B2E 8%,#222224 92%,#161618 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2vh 4vh rgba(0,0,0,.45),0 -2vh 4vh rgba(0,0,0,.3)!important}
#yl-asc .gaine0.sort.epais .trou{background:#1B1B1D!important}
#yl-asc .gaine0 .trou,#yl-asc .gaine0.bas .trou{background:#161618}
html body #yl-asc.m0.cabine .porte,html body #yl-asc.m0.cabine.roule .porte,html body #yl-asc.m0.cabine.ouvre .porte{background-color:rgba(12,12,14,.10)!important;background-image:linear-gradient(105deg,rgba(255,255,255,.04),rgba(255,255,255,0) 38%)!important}
html body #yl-entree.retour{transition:opacity .4s ease!important}
html body #yl-entree.retour{transition:none!important}
/* 8 oct. 2026 (p) : la mosaique revient sur fond noir a tous les etages et a l'accueil (remplace la couleur de la salle) */
html[data-etage] body:not(.yl-e0) #yl-mos,html body.yl-e0 #yl-mos,#yl-mos{background:#0C0C0D!important}
body.yl-salle-claire #yl-titre-e.yl-mos-on{color:#F3F1EC;text-shadow:0 -.08vh 0 rgba(0,0,0,.35),0 .1vh .1vh rgba(255,255,255,.12)}
body.yl-salle-claire #yl-titre-e.yl-mos-on i{color:var(--rouge,#E5142C)}
/* 8 oct. 2026 (q) : la mosaique s'ouvre sans fondu (essais porte puis fondu retires) */
/* 8 oct. 2026 (r) : les etages traverses pendant un long trajet d'ascenseur — dalles intermediaires et etage vu en transparence (sa couleur, son numero, son nom) */
#yl-asc .gaine0 .dalleN{background:linear-gradient(to bottom,#3A3A3D 0,#2B2B2E 8%,#222224 92%,#161618 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2vh 4vh rgba(0,0,0,.45),0 -2vh 4vh rgba(0,0,0,.3);z-index:1}
/* 8 oct. 2026 (s) : l'etage traverse vu a travers la vitre — la salle, son nom en haut, l'oeuvre au centre, un leger depoli */
#yl-asc .gaine0 .etN{overflow:hidden;background:radial-gradient(ellipse 80% 60% at 50% 55%,color-mix(in srgb,var(--c) 12%,#2A2D32),#1E2024 80%)}
#yl-asc .gaine0 .etN>span{position:absolute;display:block}
#yl-asc .gaine0 .etN .et-t{left:0;right:0;top:9vh;text-align:center;color:#F3F1EC;font-family:'Jost','Futura','Avenir Next',Helvetica,sans-serif;}
#yl-asc .gaine0 .etN .et-t em{display:block;font-style:normal;font-weight:400;font-size:clamp(24px,3vw,42px);letter-spacing:-.015em;line-height:1}
#yl-asc .gaine0 .etN .et-t span{display:block;margin-top:.6em;font-size:clamp(13px,1.2vw,17px);letter-spacing:.04em;color:var(--rouge,#E5142C)}
#yl-asc .gaine0 .etN .et-c{left:50%;top:52%;transform:translate(-50%,-50%);max-width:62vw;height:44vh;aspect-ratio:3/2;box-shadow:0 2.4vh 5vh rgba(0,0,0,.55);background:#141416}
#yl-asc .gaine0 .etN .et-c img{display:block;width:100%;height:100%;object-fit:cover}
#yl-asc .gaine0 .etN .et-c.nuit{background:radial-gradient(1px 1px at 18% 30%,#fff,transparent),radial-gradient(1px 1px at 62% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 80% 60%,#fff,transparent),radial-gradient(1px 1px at 35% 70%,#fff,transparent),radial-gradient(1px 1px at 50% 45%,#fff,transparent),radial-gradient(ellipse at 50% 120%,#1B2440,#07080C 70%)}
#yl-asc .gaine0 .etN .et-n{right:4vw;bottom:5vh;font:300 9vh/1 'Jost','Futura','Avenir Next',Helvetica,sans-serif;color:#F3F1EC;opacity:.12}
#yl-asc .gaine0 .etN::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%),rgba(12,12,14,.12)}
/* 8 oct. 2026 (t) : la fleche sous le nom de l'etage se retourne d'un coup (le masquage d'attente de la mosaique est retire : il faisait clignoter) */
#yl-titre-e::after{transition:opacity .25s!important}
/* 8 oct. 2026 (u) : retournement de l'accueil — l'epaisseur du cadre (chants gauche et droit), comme dans les salles */
/* 8 oct. 2026 (v) : chants en bois, comme les cadres de l'etage Photo — gauche, droite, dessus, dessous */
#yl-flip .ep{position:absolute}
#yl-flip .ep.g{left:0;top:0;bottom:0;transform-origin:left center;transform:rotateY(90deg);background:linear-gradient(90deg,#6E4A2C,#8A6038)}
#yl-flip .ep.d{right:0;top:0;bottom:0;transform-origin:right center;transform:rotateY(-90deg);background:linear-gradient(90deg,#8A6038,#6E4A2C)}
#yl-flip .ep.h{left:0;right:0;top:0;transform-origin:center top;transform:rotateX(-90deg);background:linear-gradient(180deg,#7A5432,#6E4A2C)}
#yl-flip .ep.b{left:0;right:0;bottom:0;transform-origin:center bottom;transform:rotateX(90deg);background:linear-gradient(180deg,#7A5432,#6E4A2C)}
/* 8 oct. 2026 (w) : etage Photo — l'epaisseur du cadre suit la regle (--ep, posee par oeuvre au retournement) ; sans dimension, l'ancienne valeur (0,032 Hm) */
#salle .mur.photo .cadre.epais:not(.vide):not(.sonne)::before,#salle .mur.photo .cadre.epais:not(.vide):not(.sonne)::after{width:var(--ep,calc(var(--Hm)*.032))}
#salle .mur.photo .cadre.tour3d .ep-h,#salle .mur.photo .cadre.tour3d .ep-b{height:var(--ep,calc(var(--Hm)*.032))}
#salle .mur.photo .cadre.tour3d .dos{transform:translateZ(calc(var(--ep,calc(var(--Hm)*.032))*-1)) rotateY(180deg)}
/* 8 oct. 2026 (x) : la vitre de l'ascenseur est un verre depoli leger — on devine l'etage derriere sans le voir net ; il se devoile net a l'ouverture des portes (le flou des etages traverses est porte par la vitre, plus par les etages eux-memes) */
html body #yl-asc.cabine .porte,html body #yl-asc.m0.cabine .porte,html body #yl-asc.m0.cabine.roule .porte,html body #yl-asc.m0.cabine.ouvre .porte{-webkit-backdrop-filter:blur(6px) saturate(.92)!important;backdrop-filter:blur(6px) saturate(.92)!important}
html.leger body #yl-asc.cabine .porte,html.leger body #yl-asc.m0.cabine .porte{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* 8 oct. 2026 (y) : la porte d'entree en verre depoli, comme la vitre de l'ascenseur — pour les visiteurs connectes seulement (html.yl-co), tant que le musee n'est pas ouvert au public ; la porte « Coming soon » (.ferme) reste pleine.
   On devine derriere l'Oeuvre de la semaine, floue ; elle se devoile nette quand les battants s'ouvrent. La teinte suit toujours le variateur (le o rouge). */
html.yl-co #yl-entree:not(.vu):not(.ferme) .yl-hall{visibility:visible!important;pointer-events:none!important}
html.yl-co body #yl-entree:not(.ferme) .battant.battant.battant{background:color-mix(in srgb,var(--fond) 52%,transparent)!important;-webkit-backdrop-filter:blur(9px) saturate(.88)!important;backdrop-filter:blur(9px) saturate(.88)!important}
/* 8 oct. 2026 (z) : « Créations » sous le logo de la porte, comme le titre de l'accueil (rouge, petit, sous « YouLab ») */
html body #yl-entree .nom .nm-s{grid-column:1/-1;justify-self:center;display:block;margin-top:.55em;font-family:'Jost','Futura','Avenir Next',Helvetica,sans-serif;font-weight:400;font-size:clamp(13px,.3em,20px);letter-spacing:.04em;text-indent:0;line-height:1;text-transform:none;color:var(--rouge,#E5142C);pointer-events:none}
html body #yl-entree.ferme .nom .nm-s{display:none}
/* 8 oct. 2026 (bb) : Sortie au bout de la ligne des etages, un peu a l'ecart ; le remerciement devant la porte d'entree */
#yl-mos .yl-autres.yl-ligne-e button.yl-sort-b{margin-left:18px;padding-left:24px!important;border-left:1px solid rgba(233,228,218,.22)}
#yl-merci{position:fixed;left:0;right:0;bottom:6vh;z-index:22;display:flex;justify-content:center;pointer-events:none;opacity:0;transition:opacity .9s ease;font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;color:#E9E4DA;text-align:center;padding:0 16px}
#yl-merci.on{opacity:1}
#yl-merci .m-in{pointer-events:auto;max-width:40rem;text-shadow:0 0 1.2rem rgba(5,6,12,.9),0 0 .3rem rgba(5,6,12,.9)}
#yl-merci b{display:block;font-weight:400;font-size:clamp(16px,2vw,22px);letter-spacing:.08em}
#yl-merci p{margin:.5rem auto .9rem;font-size:13px;opacity:.75;max-width:34rem}
#yl-merci .m-act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px}
#yl-merci .m-act button{all:unset;cursor:pointer;padding:4px 2px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid rgba(233,228,218,.3);opacity:.8}
#yl-merci .m-act button:hover,#yl-merci .m-act button.on{opacity:1;border-bottom-color:var(--rouge,#E5142C)}
#yl-merci .m-frm{max-width:30rem;margin:12px auto 0;text-align:left}
#yl-merci .m-yt{display:inline-block;margin-top:1.1rem;font-size:11px;letter-spacing:.12em;color:rgba(233,228,218,.5);text-decoration:none;border-bottom:1px solid rgba(233,228,218,.2)}
#yl-merci .m-yt:hover{color:#E9E4DA}
/* 8 oct. 2026 (cc) : Entree en tete de la ligne des etages, le meme trait que Sortie, en miroir */
#yl-mos .yl-autres.yl-ligne-e button.yl-entr-b{margin-right:18px;padding-right:24px!important;border-right:1px solid rgba(233,228,218,.22)}
/* 8 oct. 2026 (dd) : la porte qui se referme pour Entree / Sortie — memes battants que la porte d'entree (verre depoli teinte, filet de lumiere au joint) */
#yl-ferme{position:fixed;inset:0;z-index:95;pointer-events:auto;overflow:hidden;--fond:#120806}
#yl-ferme .b{position:absolute;top:0;bottom:0;width:50%;background:color-mix(in srgb,var(--fond) 52%,transparent);-webkit-backdrop-filter:blur(9px) saturate(.88);backdrop-filter:blur(9px) saturate(.88);transition:transform 1.3s cubic-bezier(.55,0,.15,1)}
#yl-ferme .b.g{left:0;transform:translateX(-101%)} #yl-ferme .b.d{right:0;transform:translateX(101%)}
#yl-ferme.on .b{transform:translateX(0)}
#yl-ferme .joint{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:rgba(255,232,204,.85);box-shadow:0 0 8px 1px rgba(255,214,170,.45),0 0 26px 4px rgba(255,190,130,.18);opacity:0;transition:opacity .4s ease 1.05s}
#yl-ferme.on .joint{opacity:1}
@media (prefers-reduced-motion:reduce){#yl-ferme .b{transition:none}}
/* 8 oct. 2026 (ee) : a l'accueil, le titre « YouLab Créations » passe du hall au titre fixe sans s'eteindre ni revenir en fondu */
#yl-titre-e.yl-mos-on{transition:none!important}
/* 8 oct. 2026 (ff) : une fois la vraie porte en place dessous, les battants de fermeture s'effacent */
#yl-ferme.part{opacity:0;transition:opacity .5s ease}
/* 8 oct. 2026 (hh) : fleche du haut — visible a l'accueil (porte ouverte), absente au dernier etage */
html body.yl-e0:not(.mosaique):not(:has(#yl-asc.on)):has(#yl-entree.vu) #yl-haut-f{display:block}
html body.yl-sommet #yl-haut-f{display:none!important}

/* 8 oct. 2026 (ii) : mosaique Pensees — la phrase centree dans sa vignette, chaque vignette sur la teinte de son cadre au mur (meme formule que .pens-c : hsl(--t 60% 88%), encre #221E1A) */
#yl-mos .yl-pz-b .pz button{display:flex!important;flex-direction:column;align-items:center;justify-content:center!important;text-align:center!important;background:hsl(var(--t,30) 60% 88%)!important;color:#221E1A!important}
#yl-mos .yl-pz-b .pz button:hover{background:hsl(var(--t,30) 60% 82%)!important}
#yl-mos .yl-pz-b .pz button span{text-align:center!important;color:#221E1A!important}
#yl-mos .yl-pz-b .pz button small{text-align:center;color:rgba(34,30,26,.62)!important}
/* 8 oct. 2026 (jj) : mosaique Pensees — juste la phrase, pas l'auteur */
#yl-mos .yl-pz-b .pz button small{display:none!important}
/* 8 oct. 2026 (kk) : mosaique Pensees — la phrase centree aussi en hauteur (le span ne s'etire plus sur toute la vignette) */
#yl-mos .yl-pz-b .pz button span{flex:0 0 auto!important;height:auto!important;min-height:0!important;margin:auto 0!important}
/* 11 oct. 2026 : accueil — plus d'icones sous l'oeuvre ; Son et langue passent dans la mosaique, a droite des onglets (Pensees, A propos, Contact y sont deja) */
#yl-entree .yl-une figcaption .yl-icos{display:none!important}
#yl-mos .yl-icos-mos{display:inline-flex;align-items:center;gap:1.2em;margin-left:1.8em;vertical-align:middle;pointer-events:auto}
#yl-mos .yl-icos-mos i{display:block;width:16px;height:16px;cursor:pointer;opacity:.55;transition:opacity .25s;font-style:normal;color:#F3F1EC}
#yl-mos .yl-icos-mos i:hover,#yl-mos .yl-icos-mos i:focus-visible{opacity:1}
#yl-mos .yl-icos-mos svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#yl-mos .yl-icos-mos .yl-i-son.muet{color:var(--rouge,#E5142C);opacity:.85}
#yl-mos .yl-icos-mos .yl-i-lang{width:auto;min-width:1.1em;font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;font-size:11px;line-height:16px;letter-spacing:.18em;text-transform:uppercase;text-align:center}
/* 12 oct. 2026 : plus de fleches haut / bas a l'ecran (jugees inutiles) — l'ascenseur reste accessible par le clavier, la mosaique et le panneau */
html body #yl-haut-f,html body #yl-dock-f{display:none!important}
/* 12 oct. 2026 : a tous les etages, comme a l'accueil — parquet gris dans les teintes du mur (la couleur de la salle, un cran plus fonce), lames qui filent vers le fond, aplats nets ; il suit la couleur de l'oeuvre regardee */
html[data-etage] body #salle .face.sol{visibility:visible!important}
html[data-etage] body #salle .sol .dalle{background-color:color-mix(in srgb,var(--yl-uni,#23272A) 74%,#000)!important;background-image:repeating-linear-gradient(90deg,color-mix(in srgb,var(--yl-uni,#23272A) 76%,#000) 0 108px,color-mix(in srgb,var(--yl-uni,#23272A) 48%,#000) 108px 111px,color-mix(in srgb,var(--yl-uni,#23272A) 70%,#000) 111px 219px,color-mix(in srgb,var(--yl-uni,#23272A) 48%,#000) 219px 222px,color-mix(in srgb,var(--yl-uni,#23272A) 74%,#000) 222px 330px,color-mix(in srgb,var(--yl-uni,#23272A) 48%,#000) 330px 333px)!important;background-size:auto!important;background-blend-mode:normal!important;transition:background-color .8s ease!important}
html[data-etage] body #scene{background:var(--yl-uni,#23272A)!important}
/* 12 oct. 2026 : le menu du site (Pensees, A propos, Contact, Son, langue) vit dans la mosaique, en haut a droite ; sous l'oeuvre, aux etages, ne restent que Partager (au bout du titre) et Pensees */
#salle .legende .yl-icos .yl-i-apropos,#salle .legende .yl-icos .yl-i-contact,#salle .legende .yl-icos .yl-i-son,#salle .legende .yl-icos .yl-i-lang{display:none!important}
#yl-mos .yl-icos-mos{position:absolute;top:26px;right:32px;z-index:8;display:flex;margin:0}
#yl-mos .yl-icos-mos .yl-i-pens svg{fill:currentColor;stroke:none}
#yl-mos .yl-icos-mos svg .p{fill:currentColor;stroke:none}
@media (max-width:760px){#yl-mos .yl-icos-mos{top:14px;right:16px;gap:1em}}
/* 12 oct. 2026 : aux etages comme a l'accueil — le cartel en bas a droite du tableau, aligne sur son bord droit, juste dessous */
html body #salle .cadre .legende{left:auto!important;right:0!important;width:max-content!important;max-width:calc(var(--Hm,40vh)*.7)!important;text-align:right!important;margin-top:calc(var(--Hm,40vh)*.03)!important}
html body #salle .legende .yl-icos{justify-content:flex-end!important}
/* 12 oct. 2026 : aux etages comme a l'accueil — lumiere de galerie (halo chaud tres doux au-dessus de chaque tableau, comme un spot) et ombre portee (nette pres du bord bas, puis diffuse) */
#salle .station .tableau::before{content:"";position:absolute;left:calc(var(--Hm,40vh)*-.75);top:calc(var(--Hm,40vh)*-.95);width:calc(var(--Hm,40vh)*1.5);height:calc(var(--Hm,40vh)*1.35);pointer-events:none;background:url(halo-grain.png) 0 0/128px 128px,rgba(var(--yl-spot,255,226,180),var(--yl-spot-a,.085));-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 34%,#000 0,rgba(0,0,0,.7) 22%,rgba(0,0,0,.41) 45%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.06) 88%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 34%,#000 0,rgba(0,0,0,.7) 22%,rgba(0,0,0,.41) 45%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.06) 88%,rgba(0,0,0,0) 100%)}
#salle .station .cadre:not(.vide):not(.tour3d):not(.pens-c){box-shadow:0 calc(var(--Hm,40vh)*.012) calc(var(--Hm,40vh)*.02) calc(var(--Hm,40vh)*-.006) rgba(0,0,0,.5),0 calc(var(--Hm,40vh)*.04) calc(var(--Hm,40vh)*.08) calc(var(--Hm,40vh)*-.02) rgba(0,0,0,.55)!important}
/* 12 oct. 2026 : la couleur de la salle est une vraie couleur animable — mur et parquet changent ensemble, en douceur */
@property --yl-uni{syntax:'<color>';inherits:true;initial-value:#23272A}
html[data-etage]{transition:--yl-uni .8s ease}