/* =====================================================================
PORTE D'ENTREE ET ACCUEIL (etage 0) DU MUSEE youlab.art (#yl-entree, oeuvre de la semaine) — toutes ses regles, et seulement elles
Regroupees le 16 oct. 2026 depuis salle.css et fun.css, dans l'ordre ou elles s'appliquaient.
Une regle de cet element s'ecrit ici, nulle part ailleurs.
===================================================================== */
#yl-entree{position:fixed;inset:0;z-index:20;cursor:pointer;user-select:none;-webkit-user-select:none;
outline:0;overflow:hidden}
#yl-entree .battant{position:absolute;top:0;bottom:0;width:50%}
#yl-entree .battant.g{left:0}
#yl-entree .battant.d{right:0}
#yl-entree .nom{position:absolute;color:var(--encre);
pointer-events:none;transition:opacity 1.2s ease}
#yl-entree .ent{position:absolute;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;width:2px;height:40px;
border-radius:2px;background:var(--encre);opacity:.75}
#yl-entree .judas{position:absolute;
border-radius:50%;border:1.2px solid var(--encre);box-sizing:border-box;
background:color-mix(in srgb,var(--fond) 92%,transparent);cursor:pointer;
transition:opacity .9s ease}
#yl-entree .judas .oeil{position:absolute;left:50%;top:50%;
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%;transform:translate(-50%,-50%);
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.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}
/* 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)}
/* la porte en verre : deux battants qui coulissent */
#yl-verre .battant{transition:transform .75s 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}
/* ===== le code d'entree, sur la porte ===== */
#yl-entree.code .ent{opacity:0!important;animation:none!important}
/* ===== la porte d'entree en verre depoli, et le judas qui tourne comme un disque ===== */
#yl-entree .battant{transition:transform .68s cubic-bezier(.55,0,.15,1),background-color .45s ease}
#yl-entree .judas .lentille::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%}
#yl-entree .judas .lentille::before{content:"";position:absolute;left:50%;top:50%;border-radius:50%;background:#111}
#yl-entree .judas .lentille.tourne{animation:ylspin 3.4s cubic-bezier(.12,.62,.22,1) both}
/* ===== 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}
/* ===== 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}
#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}
#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)}
#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}
@media (prefers-reduced-motion:reduce){
#yl-entree .judas .lentille>i b{animation:none!important}}
#yl-entree .etages{position:absolute;z-index:3}
#yl-entree .etages button{border-radius:50%;cursor:pointer;font-family:inherit}
#yl-entree .etages button.ici{border-color:#E2B84A;box-shadow:0 0 0 3px rgba(226,184,74,.22)}
#yl-entree .etages button.non{border-color:#E0192F;box-shadow:0 0 0 3px rgba(224,25,47,.18)}
#yl-entree .etages::after{content:attr(data-msg);position:absolute;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%}}
/* ===== 26 sept. (u) : l'etage +4 Spectacle : salle noire, rideau rouge, scene en planches, projecteurs ===== */
#yl-entree .etages button.moi{border-color:#B8860B}
#yl-entree .inter{position:absolute;cursor:pointer;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%;background:var(--encre);opacity:.75;transition:transform .25s}
#yl-entree .inter{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::before{content:attr(data-l);position:absolute;text-transform:uppercase;white-space:nowrap;top:50%;transform:none;line-height:14px;font-size:11px;letter-spacing:.34em;opacity:1;color:var(--encre)}
@media (max-width:760px){
#yl-entree .etages{bottom:calc(50% + 16px)}
#yl-entree .inter{bottom:calc(50% - 60px);margin-top:0}}
#yl-entree .etages{top:50%;bottom:auto;left:50%;flex-direction:column}
#yl-entree .etages::after{top:50%;bottom:auto;left:100%;margin:-6px 0 0 16px;transform:none}
@media (max-width:760px){
#yl-entree .nom{right:calc(50% + 30px)}}
#yl-entree .etages button{border:0;box-shadow:none;width:auto}
#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;top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none}
#yl-entree .etages button:hover::after,#yl-entree .etages button:focus-visible::after{opacity:.75}
@media (max-width:760px){
#yl-entree .etages{gap:3px}
#yl-entree .etages button{width:auto}}
#yl-entree .etages button:hover,#yl-entree .etages button.ici{opacity:1}
#yl-entree .poignee{top:50%;bottom:auto;margin-top:-20px;left:64px;right:auto}
#yl-entree .ent{top:50%;bottom:auto;left:80px;right:auto}
#yl-entree .inter::before{right:100%;left:auto;margin:-7px 18px 0 0}
@media (max-width:760px){
#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.curseur .judas{left:0;top:0;bottom:auto;will-change:transform;z-index:6}
#yl-entree.curseur .judas.pose .oeil{opacity:0}
#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-entree .etages button::after{left:auto}
#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.curseur{cursor:pointer}
#yl-entree.curseur *{cursor:pointer!important}
#yl-entree.curseur .judas{transition:width .25s,height .25s,margin .25s}
#yl-entree .etages button{position:relative;height:44px;line-height:44px;font-size:34px;opacity:.5;color:var(--encre);transform-style:preserve-3d}
#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{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{display:block;width:100%;height:100%}
#yl-entree .etages button::after{right:100%;margin:0 30px 0 0}
#yl-entree .etages button.flip{animation:ylbasc 2.4s cubic-bezier(.4,0,.2,1) both}
#yl-entree .etages button.flip b{animation:ylbascN 2.4s both}
#yl-entree .etages button.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 .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}
/* (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{display:none}
#yl-entree .etages button:hover{color:var(--rouge,#E5142C);opacity:1;transform:none}
@media (max-width:760px){
#yl-entree .ent2{right:54px}}
#yl-entree .poignee{left:auto;right:calc(100% + 64px)}
#yl-entree .ent{left:auto;right:calc(100% + 80px);text-align:right}
#yl-entree .etages button::after{right:auto}
#yl-entree .etages button:hover::after{opacity:1}
@media (max-width:760px){
#yl-entree .poignee{right:calc(100% + 40px)}
#yl-entree .ent{right:calc(100% + 54px);font-size:18px}
#yl-entree .etages button::after{margin-left:16px}}
#yl-entree .etages button::after{pointer-events:auto;cursor:pointer;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{white-space:nowrap;display:block;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{font-size:18px}}
@media (max-width:760px){
#yl-entree .ent2{left:70px}}
#yl-entree .ent2{position:absolute;top:50%;right:auto;left:84px}
#yl-entree .battant{z-index:1}
#yl-entree .etages,#yl-entree .ent,#yl-entree .ent2,#yl-entree .poignee{z-index:3}
#yl-entree .etages{gap:0;align-items:center;display:flex;transform:translate(-50%,-50%);z-index:4}
#yl-entree .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{padding:0 14px;opacity:.7}
#yl-entree .etages button.ici,#yl-entree .etages button:hover{opacity:1}
#yl-entree .ent,#yl-entree .ent2,#yl-entree .poignee{display:none!important}
#yl-entree .ico-entree{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-entree .ico-entree svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#yl-entree .ico-entree:hover{opacity:1;color:var(--rouge,#E5142C)}
#yl-entree .etages{align-items:center}
#yl-entree .etages button{padding:0 14px}
#yl-entree .etages button.ico-entree{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{content:none}
#yl-entree .etages button.ico-entree svg{display:block;width:22px;height:22px;vertical-align:middle}
#yl-entree .etages button.ico-entree:hover{opacity:1;color:var(--rouge,#E5142C);font-size:18px}
@media (max-width:760px){
#yl-entree .etages button.ico-entree{height:36px;line-height:36px;font-size:18px}}
#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{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
#yl-entree .etages button.ico-entree{display:none!important}
@media (max-width:760px){
#yl-entree .battant .ent{right:calc(100% + 54px);font-size:18px}}
#yl-entree .etages button,#yl-entree .etages button.ici,#yl-entree .etages button:hover{font-size:34px;transition:color .25s,opacity .25s}
@media (max-width:760px){
#yl-entree .etages button,#yl-entree .etages button.ici,#yl-entree .etages button:hover{font-size:28px}}
#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{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{content:none!important}
#yl-entree .ent{display:none!important}
#yl-entree .nom{text-align:center}
#yl-entree .judas{display:block!important;left:0;z-index:3}
#yl-entree .judas .oeil,#yl-entree .judas .lentille{display:block}
#yl-entree .battant.d .poignee{display:block!important;right:auto;z-index:3}
/* (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-entree .etages{display:none!important}
#yl-entree .inter::before,#yl-entree .inter::after{display:none!important;content:none!important}
#yl-entree .battant.d .poignee{margin-top:0}
#yl-entree .inter{bottom:auto;left:auto;z-index:3;margin-top:0}
#yl-entree .judas .oeil{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
#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 .nom{bottom:calc(50% + 22px)}
#yl-entree .inter{right:28px;height:50px;width:14px}}
#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 .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)}}
#yl-entree.verre .battant{-webkit-backdrop-filter:none;backdrop-filter:none}
html.leger #yl-entree *{filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;text-shadow:none!important;will-change:auto!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)}
#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)}
/* ===== (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;text-indent:0!important;text-transform:none!important;opacity:1;z-index:3}
#yl-entree .nom .nm-g{text-align:right}
#yl-entree .nom .nm-o{display:block}
#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;transform:none!important;pointer-events:auto}
#yl-entree .nom .nm-o .judas .oeil{margin:0!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 .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))}
#yl-entree{--ylF:clamp(52px,5.6vw,76px);--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}
#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}}
#yl-entree .nom{font-weight:700!important;letter-spacing:.06em!important}
#yl-entree .nom .nm-d{text-align:left;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)}
#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 ===== */
/* ===== 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 .saison.automne .c1{background-image:url("data:image/svg+xml;utf8,")}
html[data-saison="automne"] #yl-entree .saison.automne .c2{background-image:url("data:image/svg+xml;utf8,")}
html[data-saison="automne"] #yl-entree .saison.automne .c3{background-image:url("data:image/svg+xml;utf8,")}
/* ===== 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. 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-entree .saison i{display:none!important}
html #yl-entree .battant.battant,html #yl-entree.verre .battant.battant{background-color:#0D0B09!important}
/* 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}
#yl-entree .nom.vole>*{opacity:0!important;transition:opacity .45s ease!important}
#yl-entree .nom.vole .nm-o{transition:none!important}
/* ===== 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;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;box-shadow:0 0 5px 1px rgba(255,196,140,.5),0 0 22px 4px rgba(255,170,110,.18);background:transparent!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{box-shadow:0 0 5px 1px rgba(255,196,140,.5),0 0 22px 4px rgba(255,170,110,.18);-webkit-mask-image:none!important;mask-image:none!important;background:rgba(255,222,184,.7)!important}
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. 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;pointer-events:none;z-index:-1}
#yl-entree .nom .nm-o .judas{outline-width:calc(1.35ex*.035)!important;outline-offset:calc(1.35ex*.017)!important}
@media (prefers-reduced-motion:reduce){
#yl-entree .nom .nm-o .berceau.mise{transform:none}}
#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}
#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}
#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}
#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 .68s cubic-bezier(.55,0,.15,1),background-color .3s ease}
html body #yl-entree.joint-coupe .battant.g.battant::after{width:26px!important;right:0!important;box-shadow:none!important;opacity:1!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.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::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}
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}}
@media (hover:none) and (pointer:coarse){
body.dehors #yl-verre{visibility:hidden!important}
#yl-entree .battant,#yl-entree.verre .battant,#yl-entree .battant.battant{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
#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}
@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}
#yl-entree .yl-icos svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#yl-entree .yl-icos svg.pl,#yl-entree .yl-icos .yl-i-asc .p{fill:currentColor;stroke:none}
#yl-entree .yl-icos i.ok{opacity:1;color:var(--rouge,#E5142C)}
#yl-entree .yl-une figcaption .yl-icos{gap:1.1em;margin-top:.9em;pointer-events:auto}
#yl-entree .yl-icos i{display:block;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 : 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{transition:opacity .6s ease}
body.yl-veille #yl-entree.vu .yl-une figcaption{opacity:0!important;transition:opacity 1.2s ease!important;pointer-events:none!important}
#yl-entree .yl-icos .yl-i-asc,#yl-entree .yl-icos .yl-i-mos,#yl-entree .yl-icos .yl-i-son{display:none!important}
#yl-entree .yl-une figcaption .yl-icos{justify-content:center!important;gap:1.4em!important;margin-top:.7em!important}
#yl-entree .yl-icos i{width:16px!important;height:16px!important}
#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}
#yl-entree .yl-icos .yl-i-son{display:block!important}
#yl-entree .yl-icos .yl-i-lang{width:auto!important;min-width:1.1em;font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;letter-spacing:.18em;text-transform:uppercase;text-align:center;font-size:11px;line-height:16px}
#yl-entree .yl-icos svg .p{fill:currentColor;stroke:none}
#yl-entree .yl-icos .yl-i-pens svg{fill:currentColor;stroke:none}
#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}
#yl-entree .yl-une .tit>.yl-i-part:hover{opacity:.95}
#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}
#yl-entree .yl-une .tit>.yl-i-part.ok{opacity:1;color:var(--rouge,#E5142C)}
body.yl-veille #yl-entree.vu .yl-une figcaption{opacity:1!important;pointer-events:auto!important}
body.yl-immersion #yl-entree .yl-une figcaption,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}
#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;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}
#yl-entree .yl-une .cadre-v>.yl-sur button.g{position:absolute;left:0;bottom:0}
#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}
#yl-entree .yl-icos .yl-i-pe{display:none!important}
#yl-entree.vu .yl-une .cadre-v.yl-survol>.yl-sur{opacity:1;pointer-events:auto}
/* accueil : l'oeuvre de la semaine a un dos */
#yl-entree .yl-une .cadre-v{cursor:pointer}
#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;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%);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 (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%}
/* 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}
/* 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{-webkit-transform-style:flat!important;transition:none!important;-webkit-backface-visibility:visible;backface-visibility:visible;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{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;display:block}
/* 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-origin:50% 50%;transform:none!important;will-change:auto!important}
/* 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}
/* 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}
/* 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}
html body #yl-entree.retour.fondu{opacity:0!important}
html body #yl-entree.retour{transition: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}
/* 1er nov. 2026 (Fabien) : sur la porte publique (fermee), rien sous le logo, juste « Ouverture prochaine » / « Coming soon » */
html body #yl-entree.ferme .nom .nm-s{display:none}
html body.yl-e0:not(.mosaique):not(:has(#yl-asc.on)):has(#yl-entree.vu) #yl-haut-f{display:block}
/* 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}
html body :is(#yl-entree,#yl-une-fond) .yl-une::before{translate:var(--yl-mx,0px) var(--yl-my,0px);transition:translate 1.2s cubic-bezier(.2,.6,.3,1)}
/* le banc devant l'oeuvre */
#yl-entree .yl-une>.yl-banc{position:absolute;left:50%;z-index:2;width:38vh;height:4.6vh;margin-left:-19vh;cursor:pointer;opacity:1;transition:opacity .6s ease}
#yl-entree .yl-banc svg{display:block;width:100%;height:100%}
#yl-entree .yl-banc .d{fill:color-mix(in srgb,var(--yl-mur,#23272A) 82%,#fff)}
#yl-entree .yl-banc .f{fill:color-mix(in srgb,var(--yl-mur,#23272A) 92%,#fff)}
#yl-entree .yl-banc .o{fill:rgba(0,0,0,.35)}
/* banc ultra minimaliste : un simple bloc, dans la couleur du mur un cran plus clair */
#yl-entree .yl-banc:hover .d{fill:color-mix(in srgb,var(--yl-mur,#23272A) 74%,#fff)}
#yl-entree:not(.vu) .yl-banc{opacity:0;pointer-events:none}
html body #yl-entree .yl-une{transition:opacity .45s ease,transform 1.4s cubic-bezier(.3,0,.2,1)}
body.yl-contemple #yl-entree .yl-hall .yl-titre,body.yl-contemple #yl-entree .yl-une figcaption,body.yl-contemple #yl-entree .yl-hall .fl,body.yl-contemple #yl-entree .yl-banc,body.yl-contemple #yl-entree .yl-sur{opacity:0!important;pointer-events:none!important;transition:opacity 1.2s ease!important}
#yl-entree.vu #yl-compteur.ok{opacity:.32}
@media (prefers-reduced-motion:reduce){
body.yl-contemple #yl-entree .yl-une{transform:translate(-50%,-50%)!important}}
@media (max-width:760px){
#yl-entree .yl-une>.yl-banc{width:28vh;margin-left:-14vh}}
html body #yl-entree .yl-hall .fl{display:none!important}
#yl-entree .yl-une figcaption .yl-passees{display:block;margin:12px 0 0 auto;padding:0;border:0;background:none;font:italic 400 13px/1.3 "Cormorant Garamond","Iowan Old Style",Palatino,Georgia,serif;letter-spacing:.02em;color:inherit;opacity:.6;cursor:pointer;pointer-events:auto;border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s}
#yl-entree .yl-une figcaption .yl-passees:hover{opacity:1;border-bottom-color:currentColor}
body.yl-contemple #yl-entree .yl-passees{opacity:0!important;pointer-events:none}
html.yl-blanc body :is(#yl-entree,#yl-une-fond) .yl-hall{--yl-mur:#EEECE8!important}
html.yl-blanc body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol{background:#D9D6D0!important}
html.yl-blanc body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol::before{background-image:repeating-linear-gradient(90deg,#DAD7D1 0 278px,#C9C6C0 278px 280px)!important;background-color:#DAD7D1!important}
html.yl-blanc #yl-entree .yl-hall .yl-titre,html.yl-blanc #yl-entree .yl-hall .yl-titre span{color:#1E1E20!important;text-shadow:none!important}
html.yl-blanc body :is(#yl-entree,#yl-une-fond) .yl-une figcaption{color:#6A6661!important;text-shadow:none!important}
html.yl-blanc body :is(#yl-entree,#yl-une-fond) .yl-une figcaption .tit{color:#2A2826!important}
html.yl-blanc #yl-entree .yl-hall .yl-titre *{color:#1E1E20}
html.yl-blanc #yl-entree .yl-hall .yl-titre i{color:var(--rouge,#E5142C)!important}
html.yl-blanc #yl-entree .yl-hall [class*="chev"],html.yl-blanc #yl-entree .yl-hall .yl-titre::after{color:#6A6661!important;border-color:#6A6661!important}
html.yl-blanc #yl-entree .yl-une .cadre-v{box-shadow:0 18px 30px -20px rgba(0,0,0,.28)!important}
html.yl-blanc #yl-entree .yl-une::before{opacity:.35!important}
#yl-entree .yl-une>.yl-banc>.yl-icos-banc{position:absolute!important;display:flex!important;margin:0!important;pointer-events:auto}
html body #yl-entree .yl-banc .yl-icos-banc i{position:relative;min-width:0;cursor:pointer;opacity:.62;font-style:normal;color:rgba(0,0,0,.5);filter:drop-shadow(0 1px 0 rgba(255,255,255,.45));transition:opacity .25s,color .25s}
html body #yl-entree .yl-banc .yl-icos-banc i:hover{opacity:1;outline:none}
@media (max-width:760px){
#yl-entree .yl-une>.yl-banc>.yl-icos-banc{gap:1.6vh!important}
html body #yl-entree .yl-banc .yl-icos-banc i{height:1.5vh!important}}
#yl-entree .yl-une>.yl-banc{width:46vh!important;height:5.6vh!important;margin-left:-23vh!important}
html.yl-blanc #yl-entree .yl-banc{background:none!important;box-shadow:none!important}
#yl-entree .yl-banc svg{filter:drop-shadow(0 6px 10px rgba(0,0,0,.14))}
#yl-entree .yl-une>.yl-banc>.yl-icos-banc{left:0!important;right:0!important;gap:0!important;justify-content:center!important;align-items:center!important}
html body #yl-entree .yl-banc .yl-icos-banc i{flex:0 0 5.2vh;width:5.2vh!important;height:2.1vh!important;display:flex!important;align-items:center;justify-content:center;margin:0!important;padding:0!important}
@media (max-width:760px){
#yl-entree .yl-une>.yl-banc{width:36vh!important;margin-left:-18vh!important}
html body #yl-entree .yl-banc .yl-icos-banc i{flex-basis:4vh;width:4vh!important}}
#yl-entree .yl-une>.yl-banc>.yl-icos-banc{top:25%!important;bottom:5%!important;height:auto!important}
html body :is(#yl-entree,#yl-une-fond) .yl-une::before{top:-44vh!important;width:max(190%,80vh)!important;height:calc(100% + 66vh)!important;
background:url(halo-dither2.png) 0 0/256px 256px,rgba(var(--yl-spot,255,226,180),var(--yl-spot-a,.085))!important;
-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 36%,rgba(0,0,0,1) 0,rgba(0,0,0,.94) 8%,rgba(0,0,0,.84) 16%,rgba(0,0,0,.71) 24%,rgba(0,0,0,.57) 32%,rgba(0,0,0,.44) 40%,rgba(0,0,0,.33) 48%,rgba(0,0,0,.23) 56%,rgba(0,0,0,.155) 64%,rgba(0,0,0,.095) 72%,rgba(0,0,0,.052) 80%,rgba(0,0,0,.024) 88%,rgba(0,0,0,.008) 95%,rgba(0,0,0,0) 100%)!important;
mask-image:radial-gradient(ellipse 50% 50% at 50% 36%,rgba(0,0,0,1) 0,rgba(0,0,0,.94) 8%,rgba(0,0,0,.84) 16%,rgba(0,0,0,.71) 24%,rgba(0,0,0,.57) 32%,rgba(0,0,0,.44) 40%,rgba(0,0,0,.33) 48%,rgba(0,0,0,.23) 56%,rgba(0,0,0,.155) 64%,rgba(0,0,0,.095) 72%,rgba(0,0,0,.052) 80%,rgba(0,0,0,.024) 88%,rgba(0,0,0,.008) 95%,rgba(0,0,0,0) 100%)!important}
html body :is(#yl-entree,#yl-une-fond) .yl-une img{box-shadow:0 0 0 1px rgba(255,248,236,.08),0 .4vh .8vh rgba(0,0,0,.2),0 1.4vh 3vh rgba(0,0,0,.15),0 3.5vh 8vh rgba(0,0,0,.11),0 7vh 16vh rgba(0,0,0,.07)!important}
html body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol::before,html.yl-blanc body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol::before{
background-color:var(--yl-beton)!important;
background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0) 2.5%),radial-gradient(ellipse 26% 8% at 50% 0,rgba(255,248,236,.09),transparent 70%),radial-gradient(ellipse 80% 22% at 50% 0,rgba(255,255,255,.04),transparent 70%),url(beton.jpg)!important;
background-size:100% 100%,100% 100%,100% 100%,120vh 120vh!important;background-repeat:no-repeat,no-repeat,no-repeat,repeat!important;
background-blend-mode:normal,normal,normal,overlay!important}
html body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol,html.yl-blanc body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol{background:var(--yl-beton)!important}
html body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol{--yl-beton:color-mix(in srgb,color-mix(in srgb,var(--yl-mur,#23272A) 75%,#6F6B66) 82%,#000)}
html.yl-blanc body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol::before{background-image:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,0) 2%),radial-gradient(ellipse 26% 8% at 50% 0,rgba(255,255,255,.35),transparent 70%),radial-gradient(ellipse 80% 22% at 50% 0,rgba(255,255,255,.12),transparent 70%),url(beton.jpg)!important;background-blend-mode:normal,normal,normal,soft-light!important}
html.yl-blanc body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol{--yl-beton:#D6D3CD!important}
html body #yl-entree .yl-une figcaption :is(.art,.tec,.yl-inv,.sem,.yl-passees){opacity:1!important}
/* 30 oct. 2026 (Fabien) : la devise de YouLab sous le logo, et en tete d'A propos */
html body #yl-entree .nom .nm-sl{grid-column:1/-1;justify-self:center;display:block;margin-top:.9em;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(14px,.27em,22px);letter-spacing:.03em;white-space:nowrap;opacity:.78;pointer-events:none}
#yl-mos .ap-slogan,.mos-apropos .ap-slogan{margin:0 0 1.2em;font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;font-style:italic;font-size:clamp(22px,2.4vw,30px);line-height:1.25;color:var(--rouge,#E5142C)}
/* 31 oct. 2026 (Fabien) : parquet clair a l'accueil, comme aux etages (lames vers le fond, chene clair) */
html body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol{--yl-pq:#CFC0AA}
html body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol,html.yl-blanc body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol{background:color-mix(in srgb,var(--yl-pq) 88%,#000)!important}
html body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol::before,html.yl-blanc body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol::before{background-color:var(--yl-pq)!important;
background-image:linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,0) 2%),radial-gradient(ellipse 26% 8% at 50% 0,rgba(255,255,255,.3),transparent 70%),
repeating-linear-gradient(90deg,rgba(110,85,60,.28) 0 1.5px,transparent 1.5px 40px),
repeating-linear-gradient(90deg,var(--yl-pq) 0 40px,color-mix(in srgb,var(--yl-pq) 94%,#fff) 40px 80px,color-mix(in srgb,var(--yl-pq) 95%,#000) 80px 120px,color-mix(in srgb,var(--yl-pq) 97%,#fff) 120px 160px,color-mix(in srgb,var(--yl-pq) 96%,#000) 160px 200px)!important;
background-size:100% 100%,100% 100%,auto,auto!important;background-repeat:no-repeat,no-repeat,repeat,repeat!important;background-blend-mode:normal!important}
/* 31 oct. 2026 (Fabien) : lames de l'accueil a la taille de l'etage Installation */
html body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol::before,html.yl-blanc body :is(#yl-entree,#yl-une-fond) .yl-hall .yl-sol::before{
background-image:linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,0) 2%),radial-gradient(ellipse 26% 8% at 50% 0,rgba(255,255,255,.3),transparent 70%),
repeating-linear-gradient(90deg,rgba(110,85,60,.3) 0 2px,transparent 2px 140px),
repeating-linear-gradient(90deg,var(--yl-pq) 0 140px,color-mix(in srgb,var(--yl-pq) 95%,#fff) 140px 280px),
repeating-linear-gradient(0deg,rgba(110,85,60,.22) 0 2px,transparent 2px 900px)!important;
background-size:100% 100%,100% 100%,auto,auto,auto!important;background-repeat:no-repeat,no-repeat,repeat,repeat,repeat!important}
/* 1er nov. 2026 (Fabien) : la cle — en tournant, le point rouge annonce l'etage derriere la porte (optique, vinyle, bobine, compas, cube...) */
#yl-entree .nom .nm-o .yl-sym{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;opacity:0;transform:rotate(var(--rot,0deg));transition:opacity .6s ease}
#yl-entree .nom .nm-o.cle .yl-sym{opacity:1}