.entree{display:none}
html.entree-joue{overflow:hidden}
html.entree-joue .entree{display:block;position:fixed;inset:0;z-index:1000;background:#000;color:#fff;
  -webkit-user-select:none;user-select:none;touch-action:none;transition:opacity .9s ease}
.entree.part{opacity:0;pointer-events:none}

html.entree-inverse,html.entree-inverse body{background:#fff}
html.entree-inverse .entree{background:#fff;color:#000}
html.entree-inverse .entree__webs{color:#141414}
html.entree-inverse .entree__bouton{background:rgba(0,0,0,.06);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);color:#141414}
html.entree-inverse .entree__bouton:hover{background:rgba(0,0,0,.12)}
html.entree-inverse .entree__bouton:focus-visible{outline-color:#000}
html.entree-inverse .entree__son svg{stroke:#141414}
html.entree-inverse .entree__son .haut-parleur{fill:#141414}
.entree__toile{position:absolute;inset:0;width:100%;height:100%;display:block}

.entree__webs{position:absolute;left:0;right:0;top:70%;margin:0;padding-left:.32em;text-align:center;
  font:700 clamp(20px,3.4vw,46px)/1 var(--umm-police);letter-spacing:.32em;color:#EDECE8;opacity:0;pointer-events:none}

.entree.attend{cursor:none}
.entree__tenir{position:absolute;left:var(--x,50%);top:var(--y,90%);translate:-50% -50%;width:clamp(54px,6vw,76px);aspect-ratio:1;
  padding:0;border:0;border-radius:50%;background:none;color:#fff;opacity:0;transition:opacity .5s;pointer-events:none;cursor:none}
.entree.attend .entree__tenir{opacity:1;pointer-events:auto}
.entree__anneau{position:absolute;inset:0;border-radius:50%;scale:calc(1 - var(--charge,0) * .14);
  box-shadow:0 0 0 2.5px rgba(255,255,255,.9),0 0 22px 4px rgba(255,255,255,calc(.35 + var(--charge,0) * .5)),inset 0 0 16px 2px rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(4px) brightness(1.25);backdrop-filter:blur(4px) brightness(1.25)}
.entree__anneau::before{content:'';position:absolute;left:50%;top:-14px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#fff;opacity:.8}
.entree__tenir svg{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);rotate:-90deg;overflow:visible;scale:calc(1 - var(--charge,0) * .14)}
.entree__tenir circle{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--charge,0) * 100);filter:drop-shadow(0 0 4px #fff)}
.entree__mots{position:absolute;left:calc(100% + 16px);top:50%;translate:0 -50%;display:grid;gap:3px;text-align:left;
  font:700 clamp(11px,1.1vw,14px)/1 var(--umm-police);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 0 12px rgba(255,255,255,.6);opacity:calc(1 - var(--charge,0) * 1.4)}
.entree__tenir:focus-visible .entree__anneau{outline:2px solid #fff;outline-offset:8px}

.entree__coin{position:absolute;top:max(18px,env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px));display:flex;gap:8px;align-items:center}
.entree__bouton.entree__son{display:grid;place-items:center;width:35px;height:33px;padding:0}
.entree__son svg{width:17px;height:17px;fill:none;stroke:#EDECE8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.entree__son .haut-parleur{fill:#EDECE8}
.entree__son .croix{display:none}
.entree__son[aria-pressed="true"] .ondes{display:none}
.entree__son[aria-pressed="true"] .croix{display:inline}
.entree__bouton{
  padding:10px 16px;border:0;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  color:#EDECE8;font:700 13px/1 var(--umm-police);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.entree__bouton:hover{background:rgba(255,255,255,.16)}
.entree__bouton:focus-visible{outline:2px solid #fff;outline-offset:3px}

html.entree-joue header{transform:translateY(-100%)}
html.entree-sortie header{transform:none;transition:transform .8s cubic-bezier(.22,1,.36,1) .3s}