/* Le Pupitre : un objet sobre en aluminium, la couleur vient uniquement des cartouches. */
html{background:#141516}
.salle{position:fixed;inset:0;overflow:hidden;background:radial-gradient(110% 80% at 50% 26%,#26282a 0%,#18191b 58%,#101113 100%);--k:min(1vw,1.6vh);--ck:var(--k);--dy:max(0px,calc((100vh - var(--k)*63) / 2))}
.monde{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.table{position:absolute;left:0;right:0;bottom:0;top:calc(var(--dy) + var(--k)*41.6);background:linear-gradient(180deg,#232527 0%,#191a1c 100%);border-top:1px solid #36383c}
.noir{position:absolute;inset:0;background:#08090a;opacity:.72;pointer-events:none;transition:opacity .6s ease;z-index:9}
.noir.est-leve{opacity:0}

.pupitre{position:absolute;left:50%;top:calc(var(--dy) + var(--k)*9.6);width:calc(var(--k)*64);height:calc(var(--k)*37);margin-left:calc(var(--k)*-32);z-index:5}
.pupitre__fente{position:absolute;left:50%;top:calc(var(--k)*-.32);width:calc(var(--k)*13);height:calc(var(--k)*.74);margin-left:calc(var(--k)*-6.5);background:#0a0a0b;border-radius:calc(var(--k)*.18);box-shadow:0 1px 0 #ffffff40,inset 0 2px 3px #000;z-index:7}
.pupitre__corps{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--k)*12.4);gap:calc(var(--k)*1.7);padding:calc(var(--k)*1.9);border-radius:calc(var(--k)*1) calc(var(--k)*1) calc(var(--k)*.5) calc(var(--k)*.5);background:repeating-linear-gradient(90deg,#ffffff06 0 1px,#00000005 1px 3px),linear-gradient(180deg,#dcdcd7 0%,#cfcfca 55%,#b9b9b3 100%);box-shadow:inset 0 2px 0 #ffffffb0,inset 0 calc(var(--k)*-.45) 0 #9c9c96,0 calc(var(--k)*1.3) calc(var(--k)*3.2) #000a}

.ecran{container-type:size;position:relative;min-width:0;background:#0a0b0b;border-radius:calc(var(--k)*.7);overflow:hidden;box-shadow:inset 0 0 0 calc(var(--k)*.32) #1c1d1e,inset 0 0 0 calc(var(--k)*.38) #4a4b4c}
.ecran__image{position:absolute;inset:calc(var(--k)*.38);overflow:hidden;border-radius:calc(var(--k)*.42);opacity:0;will-change:transform,opacity,filter}
.ecran__image canvas{display:block;width:100%;height:100%}
.ecran__verre{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000024 2px 3px),radial-gradient(120% 110% at 50% 45%,#0000 62%,#0007 100%),linear-gradient(160deg,#ffffff0d 0%,#0000 34%)}

/* L'intro passe sur la télé : la caméra commence collée à l'écran, puis recule */
html.tele-pret.intro-running{background:#0a0b0b}
html.tele-pret.intro-running .portfolio{opacity:1;transition:none}
html.tele-pret .ecran__image{opacity:1}
.intro-hote{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;overflow:hidden}
.intro-hote .intro,.intro-hote .intro__light{position:absolute;inset:0;z-index:auto}
.nuit-salle{position:absolute;inset:-12%;background:#050506;opacity:var(--nuit,0);pointer-events:none;z-index:1}
.pupitre__corps::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#050506;opacity:calc(var(--nuit,0) * .62);pointer-events:none}
.ecran{z-index:1}
.voyant{position:relative;z-index:1}
.salle.nuit-finie .nuit-salle,.salle.nuit-finie .pupitre__corps::after{opacity:0;transition:opacity .5s ease-out}
.ecran__reflet{position:absolute;inset:-10% -30%;pointer-events:none;opacity:0;background:linear-gradient(122deg,#fff0 12%,#ffffff12 23%,#ffffff05 30%,#fff0 40%)}
.lueur{position:absolute;left:50%;top:calc(var(--dy) + var(--k)*30);width:calc(var(--k)*150);height:calc(var(--k)*100);margin:calc(var(--k)*-50) 0 0 calc(var(--k)*-75);border-radius:50%;background:radial-gradient(closest-side,#fff6e4b8 0%,#fff6e43d 45%,#fff6e400 100%);opacity:0;pointer-events:none;z-index:2}

/* Ce que le recruteur lit sur l'écran, depuis la salle */
.accueil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 5cqw 6.4cqh;text-align:center;color:#f4efe6;font-family:"Public Sans","Helvetica Neue",sans-serif;opacity:0;transition:opacity .45s ease}
.accueil.est-visible{opacity:1}
.accueil.est-masque{opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s .18s}
.accueil p{margin:0}
.accueil__textes{display:grid;justify-items:center;width:100%}
/* Un seul texte affiché à la fois : celui qui sort disparaît aussitôt, Safari gardait sinon des morceaux à l'écran. */
.accueil__bloc{grid-area:1/1;align-self:center}
.accueil__bloc--projet{visibility:hidden}
.accueil.est-apercu .accueil__bloc--adam{visibility:hidden}
.accueil.est-apercu .accueil__bloc--projet{visibility:visible;animation:accueil-entree .18s ease-out}
.accueil:not(.est-apercu) .accueil__bloc--adam{animation:accueil-entree .18s ease-out}
@keyframes accueil-entree{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.accueil__bloc{animation:none!important}}
.accueil__role{font:600 clamp(13px,3.55cqw,30px)/1.12 "Public Sans","Helvetica Neue",sans-serif;letter-spacing:-.015em}
.accueil p.accueil__phrase{margin-top:1cqh;font:400 clamp(11.5px,2.25cqw,19px)/1.3 "Public Sans","Helvetica Neue",sans-serif;color:#c9c6be}
.accueil p.accueil__etat{margin-top:2cqh;font:400 clamp(10.5px,1.95cqw,16px)/1.45 "IBM Plex Mono",ui-monospace,monospace;color:#a09e97}
.accueil__etat strong{display:block;font-weight:500;color:#f4efe6}
.accueil__actions{display:flex;gap:1.6cqw;justify-content:center;margin-top:3.4cqh}
.bouton-ecran{display:inline-block;white-space:nowrap;border:1px solid #f4efe659;background:transparent;color:#f4efe6;padding:clamp(6px,1.45cqw,12px) clamp(9px,2.1cqw,18px);border-radius:3px;font:500 clamp(10.5px,1.85cqw,15px)/1 "IBM Plex Mono",ui-monospace,monospace;text-decoration:none;cursor:pointer;transition:background .18s,transform .18s}
.bouton-ecran:hover{background:#f4efe61f;transform:translateY(-1px)}
.bouton-ecran--plein{background:#f6f1e7;color:#0b0b0c;border-color:#f6f1e7}
.bouton-ecran--plein:hover{background:#fff}
.bouton-ecran:focus-visible{outline:2px solid #ff5a2b;outline-offset:2px}
@container (max-height:300px){
  .accueil p.accueil__phrase{display:none}
  .accueil p.accueil__etat{margin-top:1.2cqh}
  .accueil__actions{margin-top:2.2cqh}
}
@container (max-height:240px){
  .accueil__role{font-size:clamp(10.5px,3.6cqw,13px);white-space:nowrap}
  .accueil p.accueil__etat{margin-top:.8cqh;font-size:clamp(9.5px,2.9cqw,11px)}
  .bouton-ecran{font-size:10px;padding:5px 8px}
}

.commandes{display:flex;flex-direction:column;gap:calc(var(--k)*1.15);min-width:0;font:500 calc(var(--k)*.74)/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;color:#3a3b3d}
.voyant-ligne{display:flex;align-items:center;gap:calc(var(--k)*.65);padding-top:calc(var(--k)*.2)}
.voyant{width:calc(var(--k)*.92);height:calc(var(--k)*.92);border-radius:50%;display:block;background:#6d6e6a;box-shadow:inset 0 1px 2px #0007;transition:background .08s linear,box-shadow .25s}
.voyant.est-allume{background:#ff5a2b;box-shadow:0 0 calc(var(--k)*1) #ff5a2bb0,inset 0 1px 1px #fff6}
.afficheur{background:#16171a;color:#8e9095;border-radius:calc(var(--k)*.3);padding:calc(var(--k)*.75) calc(var(--k)*.8);display:flex;flex-direction:column;gap:calc(var(--k)*.55);box-shadow:inset 0 1px 3px #000}
.afficheur b{font:500 calc(var(--k)*1.16)/1 "IBM Plex Mono",ui-monospace,monospace;color:#f0efe9;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ejecter{appearance:none;border:0;cursor:pointer;background:linear-gradient(180deg,#f1f1ec,#c9c9c3);color:#29292b;border-radius:calc(var(--k)*.32);padding:calc(var(--k)*.9) 0;font:500 calc(var(--k)*.84)/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;box-shadow:0 calc(var(--k)*.22) 0 #8f8f89,0 calc(var(--k)*.3) calc(var(--k)*.5) #0005;transition:transform .08s,box-shadow .08s}
.ejecter:active:not(:disabled){transform:translateY(calc(var(--k)*.16));box-shadow:0 calc(var(--k)*.06) 0 #8f8f89}
.ejecter:disabled{color:#8c8c86;cursor:default}
.ejecter:focus-visible,.cartouche:focus-visible{outline:2px solid #ff5a2b;outline-offset:2px}
.hp{flex:1;min-height:calc(var(--k)*3);background-image:radial-gradient(circle,#55565a 34%,#0000 37%);background-size:calc(var(--k)*.62) calc(var(--k)*.62);opacity:.7}
.plaque{font:800 calc(var(--k)*1.6)/1 "Bitter",Georgia,serif;letter-spacing:-.02em;color:#4b4c4e;text-shadow:0 1px 0 #ffffffa0;text-align:right}

.vol{position:absolute;inset:0;z-index:8;pointer-events:none}
.etagere{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--dy) + var(--k)*48.6);display:flex;align-items:flex-end;gap:calc(var(--k)*1.05);z-index:6}
.etagere__petites{display:grid;grid-template-columns:repeat(3,auto);gap:calc(var(--k)*.55);margin-left:calc(var(--k)*.9)}

.cartouche{position:relative;display:block;width:calc(var(--ck)*10.6);height:calc(var(--ck)*12.8);flex:none;border:0;padding:0;cursor:pointer;background:var(--corps);border-radius:calc(var(--ck)*.55) calc(var(--ck)*.55) calc(var(--ck)*.3) calc(var(--ck)*.3);box-shadow:inset 0 1px 0 #ffffff55,inset 0 calc(var(--ck)*-.5) 0 #00000038,0 calc(var(--ck)*.75) calc(var(--ck)*1.4) #0009;transition:transform .28s cubic-bezier(.3,1.5,.5,1);text-align:left}
.cartouche::before{content:"";position:absolute;left:calc(var(--ck)*2.2);right:calc(var(--ck)*2.2);top:calc(var(--ck)*.6);height:calc(var(--ck)*.95);background:repeating-linear-gradient(90deg,#0000003a 0 calc(var(--ck)*.18),#ffffff14 calc(var(--ck)*.18) calc(var(--ck)*.42))}
.cartouche:hover,.cartouche:focus-visible{transform:translateY(calc(var(--ck)*-1)) rotate(-1.2deg)}
.jaquette{position:absolute;left:calc(var(--ck)*.62);right:calc(var(--ck)*.62);top:calc(var(--ck)*2.05);bottom:calc(var(--ck)*1.05);border-radius:calc(var(--ck)*.2);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 0 1px #0000002a}

.j-maili{background:#fff;color:#0064d2;padding:calc(var(--ck)*.7)}
.j-maili b{font:800 calc(var(--ck)*2.1)/1 "Bitter",Georgia,serif;letter-spacing:-.03em}
.j-maili small{font:500 calc(var(--ck)*.58)/1.2 "Public Sans",sans-serif;color:#53555a;margin-top:calc(var(--ck)*.25)}
.mini-casiers{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--ck)*.2);margin-top:auto}
.mini-casiers i{height:calc(var(--ck)*.92);display:block;background:var(--c)}
.j-penny{background:#0b0b0b;color:#f7f5ef;align-items:center;justify-content:center;text-align:center;padding:calc(var(--ck)*.5)}
.j-penny b{font:600 calc(var(--ck)*1.34)/1.05 "Playfair Display",Didot,serif}
.j-penny hr{width:calc(var(--ck)*2.4);border:0;border-top:1px solid #f7f5ef80;margin:calc(var(--ck)*.55) 0}
.j-penny small{font:400 calc(var(--ck)*.58)/1.3 "Public Sans",sans-serif;color:#b9b6ad}
.j-lockin{background:#faf9f6;color:#252a27;align-items:center;justify-content:flex-end;padding-bottom:calc(var(--ck)*.55)}
.j-lockin img{position:absolute;left:50%;top:calc(var(--ck)*.2);width:calc(var(--ck)*5.8);margin-left:calc(var(--ck)*-2.9)}
.j-lockin b{display:flex;align-items:center;gap:calc(var(--ck)*.14);font:500 calc(var(--ck)*1.5)/1 Inter,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.03em}
.j-lockin b svg{width:calc(var(--ck)*1.25);height:calc(var(--ck)*1.1);overflow:visible}
.j-atelier{background:linear-gradient(180deg,#6fb8ec,#d8eefb);color:#33264d;align-items:center;justify-content:flex-end;padding-bottom:calc(var(--ck)*.42)}
.j-atelier img{position:absolute;left:50%;top:calc(var(--ck)*.05);width:calc(var(--ck)*6.8);margin-left:calc(var(--ck)*-3.4)}
.j-atelier b{position:relative;font:400 calc(var(--ck)*1.52)/1 "Arial Rounded MT Bold","Arial Rounded MT",ui-rounded,Arial,sans-serif;letter-spacing:-.01em}
.j-peer{background:#111317;color:#e9ebee;padding:calc(var(--ck)*.65)}
.j-peer b{font:600 calc(var(--ck)*1.05)/1 "Geist Mono",ui-monospace,monospace;letter-spacing:-.02em}
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#3a4048;margin-top:auto;border:1px solid #3a4048}
.grille i{font:500 calc(var(--ck)*.72)/calc(var(--ck)*1.25) "Geist Mono",ui-monospace,monospace;text-align:center;background:#1b1e23;color:#9aa1ab;font-style:normal}
.grille i.f{background:#ff6b2c;color:#111317}
.j-zaiko{background:#0b0f14;color:#e6ece8;align-items:center;justify-content:center;gap:calc(var(--ck)*.42)}
.j-zaiko u{width:calc(var(--ck)*3.3);height:calc(var(--ck)*3.3);border-radius:calc(var(--ck)*.8);background:#3fae6b;color:#0b0f14;display:grid;place-items:center;font:800 calc(var(--ck)*2.1)/1 "Sora",sans-serif;text-decoration:none}
.j-zaiko b{font:800 calc(var(--ck)*1.25)/1 "Sora",sans-serif}
.j-zaiko small{font:500 calc(var(--ck)*.58)/1 "Public Sans",sans-serif;color:#9fb2a8}

.cartouche--petite{width:calc(var(--ck)*5.5);height:calc(var(--ck)*6.1);--corps:#54565a}
.cartouche--petite::before{left:calc(var(--ck)*1.5);right:calc(var(--ck)*1.5);top:calc(var(--ck)*.3);height:calc(var(--ck)*.5)}
.cartouche--petite .jaquette{left:calc(var(--ck)*.36);right:calc(var(--ck)*.36);top:calc(var(--ck)*1.05);bottom:calc(var(--ck)*.6);background:repeating-linear-gradient(135deg,#e6e6e0 0 calc(var(--ck)*.28),#d3d3cd calc(var(--ck)*.28) calc(var(--ck)*.56));color:#3a3b3d;display:grid;place-items:center;font:500 calc(var(--ck)*.58)/1.1 "IBM Plex Mono",ui-monospace,monospace;text-align:center}
.cartouche--vol{position:absolute;margin:0;transition:none;pointer-events:none}
.cartouche--vol:hover{transform:none}

.salle .porte{position:absolute;z-index:12}
.barre{position:absolute;right:var(--barre-d,clamp(20px,5vw,84px));bottom:clamp(12px,2.6vh,26px);display:flex;align-items:center;gap:12px;z-index:60;opacity:0;pointer-events:none;transition:opacity .35s;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace}
.barre.est-visible{opacity:1;pointer-events:auto}
.barre__etapes{display:flex;gap:2px}
.barre button{appearance:none;border:1px solid #d6d8dd;background:#fff;color:#17181b;padding:8px 10px;border-radius:3px;cursor:pointer;font:inherit}
.barre button.est-actif{background:var(--ba,#0064d2);border-color:var(--ba,#0064d2);color:#fff}
.barre__ejecter{background:var(--bf,#17181b)!important;color:var(--bt,#fff)!important;border-color:var(--bf,#17181b)!important}
.barre button:focus-visible{outline:2px solid #0064d2;outline-offset:1px}

/* Projets encore sans scène : déjà leur phrase et le rôle tenu */
.prog{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7vh 10vw;background:var(--p);color:var(--ptx)}
.prog[hidden],.prog__prix[hidden]{display:none}
.prog__nom{margin:0;color:var(--pt);font-size:clamp(46px,9.2vw,140px);line-height:1}
.prog__sous{margin:2.6vh 0 0;font:500 clamp(18px,2.4vw,36px)/1.15 "Public Sans",sans-serif}
.prog__role{margin:2.4vh 0 0;max-width:68ch;font:400 clamp(14px,1.25vw,19px)/1.5 "Public Sans",sans-serif;opacity:.82}
.prog__prix{margin:2.6vh 0 0;font:500 clamp(11px,.9vw,14px)/1 "IBM Plex Mono",ui-monospace,monospace;background:var(--pf,var(--pt));color:var(--p);padding:7px 9px;border-radius:2px}
.prog__etat{position:absolute;left:0;right:0;bottom:4vh;margin:0;font:500 clamp(10.5px,.8vw,13px)/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.5}

@media (max-width:720px) and (orientation:portrait){
  .salle{--k:1vw;--ck:1.9vw}
  .table{top:auto;height:58vw}
  .lueur{top:90vw}
  .pupitre{left:3vw;margin-left:0;width:94vw;height:auto;top:36vw}
  .pupitre__fente{width:29vw;margin-left:-14.5vw;height:1.8vw;top:-.8vw}
  .pupitre__corps{position:relative;display:flex;flex-direction:column;gap:3vw;padding:3.4vw;border-radius:2.6vw 2.6vw 1.4vw 1.4vw}
  .ecran{width:100%;height:min(108vw,calc(100vh - 90.3vw));height:min(108vw,calc(100dvh - 90.3vw));border-radius:1.8vw}
  .ecran__image{inset:1vw;border-radius:1.2vw}
  .accueil{padding:0 4cqw 5cqh}
  .accueil__role{font-size:clamp(15px,5.5cqw,24px)}
  .accueil p.accueil__phrase{font-size:clamp(11.5px,3.7cqw,16px)}
  .accueil p.accueil__etat{font-size:clamp(10.5px,3.15cqw,14px)}
  .accueil__actions{gap:2.4cqw;margin-top:2.4cqh}
  .bouton-ecran{font-size:clamp(11px,3.5cqw,13px);padding:clamp(8px,2.8cqw,11px) clamp(8px,3cqw,12px)}
  .commandes{flex-direction:row;align-items:stretch;gap:2.4vw;font-size:2.4vw}
  .voyant-ligne{flex-direction:column;justify-content:center;gap:1.6vw;padding:0 1vw}
  .voyant{width:3.2vw;height:3.2vw}
  .afficheur{flex:1;padding:2.2vw;gap:1.4vw}.afficheur b{font-size:3.4vw}
  .ejecter{padding:0 3.4vw;font-size:3vw;border-radius:1vw}
  .hp,.plaque{display:none}
  .etagere{left:0;right:0;transform:none;top:auto;bottom:4vw;padding:6vw 4vw 3vw;gap:2.6vw;overflow-x:auto;scrollbar-width:none}
  .etagere::-webkit-scrollbar{display:none}
  .etagere__petites{margin-left:2vw}
  .barre__etapes,.barre__plus{display:none}.barre{--barre-d:12px;bottom:6px;font-size:11px}.barre button{padding:6px 9px}
}
@media (max-height:520px){.barre__etapes{display:none}}
.porte__image{position:absolute;inset:0;transform-origin:0 0;will-change:transform,opacity}
.porte__verre{position:absolute;inset:0;pointer-events:none;z-index:55;opacity:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000024 2px 3px),radial-gradient(120% 110% at 50% 45%,#0000 62%,#0007 100%),linear-gradient(122deg,#fff0 12%,#ffffff12 23%,#ffffff05 30%,#fff0 40%)}