/* ==========================================================================
   Harnais — plan du studio (Dev B, spec §9 et §10.3)
   Plan d'architecte éditorial : encre sur papier, une seule flamme.
   Toutes les tailles « écran » du monde s'écrivent calc(N * var(--px)) :
   --px = 1 px écran à zoom 1 (--u = unités monde par px écran, posé par JS).
   Les enveloppes *__fit appliquent --tk = 1/√z (jetons qui grossissent en √z).
   ========================================================================== */

.ws {
  --hd: 36;            /* tête des agents, px écran */
  --mono-fs: 13;       /* monogramme */
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  isolation: isolate;
}
@media (min-width: 1000px) { .ws { --hd: 44; --mono-fs: 15; } }
@media (min-width: 1280px) { .ws { --hd: 48; } }

/* ---------- Feuille, trame, monde ---------- */

.ws-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 28px;
  background: var(--paper-2);
  contain: layout paint;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ws-viewport:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
@media (max-width: 999.98px) { .ws-viewport { border-radius: 22px; } }

.ws-grid {
  position: absolute;
  inset: -40px;
  background: radial-gradient(rgba(14, 13, 11, .06) 1px, transparent 1px) 0 0 / 24px 24px;
  pointer-events: none;
}

.ws-world {
  --px: calc(var(--u, 1) * 1px);
  --tk: 1;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.ws.is-cam .ws-world { will-change: transform; }
.ws.is-intro .ws-world { visibility: hidden; }

.ws-rooms, .ws-prints, .ws-agents, .ws-folders, .ws-fx {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.ws-rooms { width: 100%; height: 100%; }
/* Ordre fixe des couches. Agents et dossiers partagent le contexte d'empilement du monde (leurs couches
   n'en créent pas) : les piles (z 10 à 40) passent sous les agents (z 45), les dossiers portés ou en vol
   (z 50 à 70, posés par GSAP) au-dessus. Une pile ne masque donc jamais un agent ni ne capte son toucher. */
.ws-rooms { z-index: 1; }
.ws-lines { z-index: 2; }
.ws-prints { z-index: 3; }
.ws-agents, .ws-folders { z-index: auto; }
.ws-fx { z-index: 80; }
.ws-prints, .ws-fx { pointer-events: none; }

/* ---------- Niveaux de détail (W03) ---------- */

[data-lod-min], [data-lod-max] {
  transition: opacity .3s var(--ease-out-expo), visibility 0s linear 0s;
}
.ws[data-lod="0"] [data-lod-min="1"],
.ws[data-lod="0"] [data-lod-min="2"],
.ws[data-lod="1"] [data-lod-min="2"],
.ws[data-lod="1"] [data-lod-max="0"],
.ws[data-lod="2"] [data-lod-max="0"] {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease-out-expo), visibility 0s linear .3s;
}

/* ---------- Salles (§9.5) ---------- */

.room {
  position: absolute;
  background: var(--paper);
  border-radius: calc(18 * var(--px));
  overflow: hidden;
  container-type: size;
}
.room[data-room="lounge"] {
  background: repeating-linear-gradient(135deg, rgba(14, 13, 11, .035) 0 1px, transparent 1px 10px) var(--paper);
}

/* La flamme éclaire : lavis sous la place de travail. */
.room__wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at var(--wx, 50%) var(--wy, 50%), rgba(242, 84, 27, .16), transparent 70%);
  opacity: 0;
  pointer-events: none;
}

/* Filigrane : numéro au contour. */
.room__mark {
  position: absolute;
  right: -4%;
  bottom: -14%;
  font: 700 72cqh/.8 var(--font-grotesk);
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: calc(1.5 * var(--px)) var(--ink);
  opacity: .07;
  white-space: nowrap;
  pointer-events: none;
}

.room__label {
  position: absolute;
  left: calc(12 * var(--px));
  top: calc(12 * var(--px));
  z-index: 1;
  pointer-events: none;
}
.room__fit {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: calc(12 * var(--px));
  align-items: center;
  transform: scale(var(--tk));
  transform-origin: 0 0;
  transition: transform .3s var(--ease-out-expo);
}
.room__title {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  column-gap: 0;
  font: 500 calc(10 * var(--px))/1.2 var(--font-code);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--smoke);
  white-space: nowrap;
}
/* Point « salle occupée » : sa case se referme quand la salle est libre, pour que « (NN) » s'aligne
   sur le libellé d'étape (12 u) ; elle s'ouvre avec le point quand la salle s'occupe. */
.room__dot {
  grid-column: 1;
  width: 0;
  height: calc(6 * var(--px));
  margin-right: 0;
  border-radius: 50%;
  background: var(--flame);
  transform: scale(0);
  transition: transform .4s var(--ease-out-expo), width .4s var(--ease-out-expo), margin-right .4s var(--ease-out-expo);
}
.room[data-busy="1"] .room__dot { width: calc(6 * var(--px)); margin-right: calc(6 * var(--px)); transform: scale(1); }
.ws.is-offline .room__dot { width: 0; margin-right: 0; transform: scale(0); }
.room__no { grid-column: 2; color: var(--ink); }
.room__nm, .room__short { grid-column: 3; grid-row: 1; margin-left: calc(6 * var(--px)); }
.ws[data-lod="0"] .room__title { letter-spacing: .1em; }
.ws[data-lod="0"] .room__nm, .ws[data-lod="0"] .room__short { margin-left: calc(4 * var(--px)); }
/* Salle en attente : la pastille « À VALIDER » (en haut à droite) ne recouvre jamais le nom ni le
   libellé d'étape. Ils s'arrêtent avant elle, avec des points de suspension. Largeur de la pastille
   en px écran : 88 (« À VALIDER »), 113 (« À VALIDER · n ») ; .room__fit est mis à l'échelle --tk.
   En LOD1, le nom passe d'abord à son libellé court (STUDIO DESIGN → DESIGN). */
.ws[data-lod="1"] .room[data-state="gate"] .room__nm { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out-expo), visibility 0s linear .3s; }
.ws[data-lod="1"] .room[data-state="gate"] .room__short { opacity: 1; visibility: visible; transition: opacity .3s var(--ease-out-expo), visibility 0s linear 0s; }
.room[data-state="gate"] { --pin-w: 88; }
.room[data-state="gate"]:has(.pin__fit:not([data-n="1"])) { --pin-w: 113; }
.ws[data-lod="0"] .room[data-state="gate"] { --pin-w: 26; }
.ws[data-lod="0"] .room[data-state="gate"]:has(.pin__fit:not([data-n="1"])) { --pin-w: 36; }
.room[data-state="gate"] .room__title,
.room[data-state="gate"] .room__sub {
  max-width: calc((100cqw - (26 + var(--pin-w) * var(--tk)) * var(--px)) / var(--tk));
  overflow: hidden;
  text-overflow: ellipsis;
}
.room[data-state="gate"] .room__title { grid-template-columns: auto auto minmax(0, max-content); }
/* Salle en attente étroite (posé par rooms.js quand le nom ou le libellé ne tiendrait pas à côté de la
   pastille longue) : pastille compacte, cloche et nombre, comme en LOD0. L'aria-label reste complet. */
.room[data-state="gate"][data-pin="compact"] { --pin-w: 26; }
.room[data-state="gate"][data-pin="compact"]:has(.pin__fit:not([data-n="1"])) { --pin-w: 36; }
.room[data-pin="compact"] .pin__fit { justify-content: center; min-width: calc(22 * var(--px)); padding: 0 calc(6 * var(--px)); }
.room[data-pin="compact"] .pin__t { display: none; }
.room[data-pin="compact"] .pin__fit[data-n]:not([data-n="1"])::before { content: attr(data-n); font-variant-numeric: tabular-nums; order: 2; }
.room[data-state="gate"] .room__nm,
.room[data-state="gate"] .room__short { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.room__sub {
  grid-row: 2;
  grid-column: 1 / -1;
  margin: calc(3 * var(--px)) 0 0;
  font: 500 calc(12 * var(--px))/1.3 var(--font-sans);
  color: var(--ink-3);
  white-space: nowrap;
}
@media (max-width: 1279.98px) { .room__sub { display: none; } }

/* Compteur LIVRÉS : à droite, sur la ligne du libellé d'étape (le nom de la salle prend la
   première ligne entière, la pastille « À VALIDER » le coin haut droit). */
.room__countbox {
  position: absolute;
  top: calc(12 * var(--px));
  right: calc(12 * var(--px));
  z-index: 1;
  pointer-events: none;
  transition: transform .4s var(--ease-out-expo);
}
.room__count {
  display: inline-flex;
  /* Sous le bas de la pastille « À VALIDER » (10 + 22 px) et au-dessus du pupitre. */
  transform: translateY(calc(21 * var(--tk) * var(--px))) scale(var(--tk));
  transform-origin: 100% 0;
  transition: transform .3s var(--ease-out-expo);
  align-items: center;
  gap: calc(5 * var(--px));
  font: 500 calc(10 * var(--px))/1.2 var(--font-code);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.room__count-t { color: var(--smoke); }
.room__count-n { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Progression des sous-tâches. */
.room__bar {
  position: absolute;
  left: calc(12 * var(--px));
  right: calc(12 * var(--px));
  bottom: calc(10 * var(--px));
  height: calc(2 * var(--px));
  border-radius: calc(2 * var(--px));
  background: var(--flame);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
}

/* Pastille « À VALIDER ». */
.room__pin {
  position: absolute;
  top: calc(10 * var(--px));
  right: calc(10 * var(--px));
  z-index: 2;
  display: block;
  padding: 0;
  transform-origin: 100% 0;
}
.room__pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(44 * var(--px)));
  height: max(100%, calc(44 * var(--px)));
  transform: translate(-50%, -50%);
}
.pin__fit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--px));
  height: calc(22 * var(--px));
  padding: 0 calc(8 * var(--px));
  border-radius: var(--r-pill);
  background: var(--flame);
  color: var(--ink);
  font: 500 calc(10 * var(--px))/1 var(--font-code);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scale(var(--tk));
  transform-origin: 100% 0;
  transition: transform .3s var(--ease-out-expo);
}
.pin__fit .i { width: calc(12 * var(--px)); height: calc(12 * var(--px)); }
.pin__t { line-height: 1.2; }
.ws[data-lod="0"] .pin__fit { justify-content: center; min-width: calc(22 * var(--px)); padding: 0 calc(6 * var(--px)); }
.ws[data-lod="0"] .pin__t { display: none; }
.ws[data-lod="0"] .pin__fit[data-n]:not([data-n="1"])::before { content: attr(data-n); font-variant-numeric: tabular-nums; order: 2; }
.room__pin.is-ping .pin__fit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--flame);
  animation: soft-ping 3.2s var(--ease-out-expo) infinite;
}

/* Mur des livraisons (Bureau client). */
.room__wall {
  position: absolute;
  width: calc(64 * var(--px));
  height: calc(44 * var(--px));
  margin: calc(-22 * var(--px)) 0 0 calc(-32 * var(--px));
  pointer-events: none;
}
.minicard {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper-hi);
  border: calc(1 * var(--px)) solid var(--line-2);
  border-radius: calc(8 * var(--px));
  transform-origin: 50% 100%;
  box-shadow: 0 calc(10 * var(--px)) calc(16 * var(--px)) calc(-12 * var(--px)) rgba(14, 13, 11, .45);
}
.minicard__bar {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  height: calc(8 * var(--px));
  padding: 0 calc(5 * var(--px));
  border-bottom: calc(1 * var(--px)) solid var(--line);
}
.minicard__bar i { width: calc(3 * var(--px)); height: calc(3 * var(--px)); border-radius: 50%; background: var(--flame); }
.minicard__bar i:nth-child(2) { background: var(--amber); }
.minicard__bar i:nth-child(3) { background: rgba(14, 13, 11, .2); }
.minicard__slug {
  display: block;
  padding: calc(5 * var(--px)) calc(5 * var(--px)) 0;
  font: 500 calc(7 * var(--px))/1.25 var(--font-code);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Mobilier au trait (§9.6) ---------- */

.room__furn { position: absolute; overflow: visible; pointer-events: none; transition: opacity .3s var(--ease-out-expo); }
.ws[data-lod="0"] .room__furn { opacity: .6; }
.room__furn .fl { fill: none; stroke: var(--line-3); stroke-width: var(--sw, 1.25); stroke-linecap: round; stroke-linejoin: round; }
.room__furn .fx { fill: none; stroke: var(--flame); stroke-width: var(--sw, 1.25); stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.room__furn .fx--fill { fill: var(--flame); stroke: none; }
.room__furn .fx--fill.fx--amber { fill: var(--amber); }
.room__furn .fx--fill.fx--ink { fill: rgba(14, 13, 11, .2); }
.room__furn .led { fill: var(--flame); stroke: none; }
.room__furn .led-blink { fill: var(--flame); stroke: none; opacity: 0; }
.room__furn .cursor-blink { fill: var(--flame); opacity: 0; }
.room[data-busy="1"] .room__furn .cursor-blink { opacity: 1; }
.room__furn .flag__cloth { fill: var(--flame); stroke: none; }
.room__furn .steam { fill: none; stroke: var(--line-3); stroke-width: var(--sw, 1.25); stroke-linecap: butt; opacity: 0; }
.room__furn .gate-bay { fill: none; stroke: var(--flame); stroke-width: var(--sw, 1.25); stroke-dasharray: 4 4; opacity: 0; transition: opacity .4s var(--ease-out-expo); }
.room__furn .gate-bay.is-on { opacity: 1; }
.room__furn .lock { color: var(--ink); fill: var(--ink); opacity: 0; }

/* ---------- Murs, portes, couloirs, traits (SVG, §9.5) ---------- */

.ws-lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ws-lines * { fill: none; }
.ws-lines .corridor {
  stroke: var(--line-2);
  stroke-width: var(--px);
  stroke-dasharray: calc(2 * var(--px)) calc(7 * var(--px));
  stroke-linecap: round;
}
.ws-lines .wall { stroke: var(--ink); stroke-width: calc(1.5 * var(--px)); stroke-linecap: round; stroke-linejoin: round; }
.ws-lines .door__arc { stroke: var(--line-3); stroke-width: var(--px); }
.ws-lines .door__leaf { stroke: rgba(14, 13, 11, .4); stroke-width: var(--px); stroke-linecap: round; }
.ws-lines .gate {
  stroke: var(--flame);
  stroke-width: calc(1.5 * var(--px));
  stroke-dasharray: calc(6 * var(--px)) calc(6 * var(--px));
  stroke-linecap: butt;
  opacity: 0;
}
.ws-lines .trail { stroke: var(--flame); stroke-width: calc(2 * var(--px)); stroke-linecap: round; stroke-linejoin: round; }
.ws-lines .note-leader { stroke: var(--line-3); stroke-width: var(--px); stroke-linecap: round; }
.ws.is-offline .ws-lines .trail { stroke: var(--ink-3); }

/* ---------- Traces de pas (W05) ---------- */

.print {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(4 * var(--px));
  height: calc(7 * var(--px));
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
}

/* ---------- Agents (§9.7) ---------- */

.agent {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 45;
  width: calc(var(--hd) * var(--px));
  height: calc(var(--hd) * var(--px));
  padding: 0;
  border-radius: 50%;
  color: var(--ink);
}
.agent::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(44 * var(--px)));
  height: max(100%, calc(44 * var(--px)));
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.agent.is-walking { will-change: transform; }
.agent:focus-visible { outline: none; }
.agent:focus-visible .agent__head { outline: 2px solid var(--ink); outline-offset: calc(6 * var(--px)); }

.agent__fit {
  position: absolute;
  inset: 0;
  transform: scale(var(--tk));
  transition: transform .3s var(--ease-out-expo), opacity .4s var(--ease-out-expo);
}
.ws.has-sel .agent:not(.is-sel) .agent__fit { opacity: .45; }

.agent__body { position: absolute; inset: 0; }

/* Épaules : ellipse sous la tête, légèrement en arrière (le cap se lit). */
.agent__shoulders { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.agent__shoulders i {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: calc(var(--hd) * 1.5 * var(--px));
  height: calc(var(--hd) * .54 * var(--px));
  margin: calc((var(--hd) * -.27 + 3) * var(--px)) 0 0 calc(var(--hd) * -.75 * var(--px));
  border-radius: 50%;
  background: var(--paper);
  border: calc(1.5 * var(--px)) solid var(--ink);
}
.ws[data-lod="0"] .agent__shoulders i {
  width: calc(44 * var(--px));
  height: calc(16 * var(--px));
  margin: calc(-5 * var(--px)) 0 0 calc(-22 * var(--px));
  border-color: var(--line-3);
}

.agent__head {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--sh-token);
  transition: background-color .4s var(--ease-out-expo), color .4s var(--ease-out-expo);
}
.agent__mono { font: 600 calc(var(--mono-fs) * var(--px))/1 var(--font-grotesk); letter-spacing: -.02em; }
.agent[data-state="free"] .agent__head,
.agent[data-state="walking"]:not(.is-carrying) .agent__head {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 calc(1.5 * var(--px)) var(--ink), var(--sh-token);
}
.agent[data-state="working"] .agent__head {
  box-shadow: 0 0 0 calc(2 * var(--px)) var(--paper), 0 0 0 calc(4 * var(--px)) var(--flame), var(--sh-token);
}

.agent__arc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc((var(--hd) + 22) * var(--px));
  height: calc((var(--hd) + 22) * var(--px));
  overflow: visible;
  transform: translate(-50%, -50%) rotate(-90deg);
  opacity: 0;
  transition: opacity .4s var(--ease-out-expo);
  pointer-events: none;
}
.agent__arc circle { fill: none; stroke: var(--flame); stroke-width: 1.6; stroke-linecap: round; }
.agent[data-state="working"] .agent__arc { opacity: 1; }

.agent__wave {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: calc(2 * var(--px)) solid var(--flame);
  opacity: 0;
  pointer-events: none;
}

.agent__role {
  position: absolute;
  right: calc(-4 * var(--px));
  bottom: calc(-4 * var(--px));
  display: grid;
  place-items: center;
  width: calc(18 * var(--px));
  height: calc(18 * var(--px));
  border-radius: 50%;
  background: var(--paper);
  border: calc(1 * var(--px)) solid var(--line-2);
  color: var(--ink);
  transition: background-color .4s var(--ease-out-expo), border-color .4s var(--ease-out-expo);
}
.agent__role .i { width: calc(11 * var(--px)); height: calc(11 * var(--px)); }
.agent[data-state="working"] .agent__role { background: var(--flame); border-color: var(--flame); }

/* Pastille café posée hors de l'anneau de la tête (centre à ~29 u d'une tête de 48) : le contour reste entier. */
.agent__coffee {
  position: absolute;
  right: calc(-10 * var(--px));
  top: calc(-10 * var(--px));
  display: grid;
  place-items: center;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-3);
  opacity: 0;
  transition: opacity .3s var(--ease-out-expo);
}
.agent__coffee .i { width: calc(11 * var(--px)); height: calc(11 * var(--px)); }
.agent[data-state="free"] .agent__coffee { opacity: 1; }

.agent__bell {
  position: absolute;
  left: calc(-5 * var(--px));
  top: calc(-5 * var(--px));
  display: grid;
  place-items: center;
  width: calc(14 * var(--px));
  height: calc(14 * var(--px));
  border-radius: 50%;
  background: var(--flame);
  color: var(--ink);
  box-shadow: 0 0 0 calc(1.5 * var(--px)) var(--paper);
}
.agent__bell .i { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }

.agent__name {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: calc(18 * var(--px));
  padding: 0 calc(7 * var(--px));
  border-radius: var(--r-pill);
  background: rgba(243, 240, 232, .9);
  border: calc(1 * var(--px)) solid var(--line);
  color: var(--ink);
  font: 500 calc(10 * var(--px))/1 var(--font-code);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .3s var(--ease-out-expo), visibility 0s linear 0s;
}
.agent[data-name="below"] .agent__name { left: 50%; top: calc(100% + 6 * var(--px)); transform: translateX(-50%); }
.agent[data-name="above"] .agent__name { left: 50%; bottom: calc(100% + 6 * var(--px)); transform: translateX(-50%); }
.agent[data-name="left"] .agent__name { right: calc(100% + 6 * var(--px)); top: 50%; transform: translateY(-50%); }
.agent[data-name="right"] .agent__name { left: calc(100% + 6 * var(--px)); top: 50%; transform: translateY(-50%); }
.agent__slug { display: none; color: var(--ink-3); }
.ws[data-lod="0"] .agent[data-state="working"] .agent__slug { display: inline; }
.ws[data-lod="0"] .agent:not(.is-sel):not([data-state="working"]) .agent__name {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease-out-expo), visibility 0s linear .3s;
}

.agent__sel, .agent__hl {
  position: absolute;
  inset: calc(-8 * var(--px));
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.agent__sel { border: calc(3 * var(--px)) solid var(--flame); }
.agent.is-sel .agent__sel { opacity: 1; }
.agent__hl { inset: calc(-6 * var(--px)); border: calc(2 * var(--px)) solid var(--flame); transition: opacity .3s var(--ease-out-expo); }
.agent.is-hl .agent__hl { opacity: 1; }

.agent__hand { position: absolute; left: calc(50% + (var(--hd) / 2 + 6) * var(--px)); top: calc(50% + (var(--hd) / 2 - 4) * var(--px)); width: 0; height: 0; }

.agent__check {
  position: absolute;
  left: 50%;
  top: calc(-24 * var(--px));
  display: grid;
  place-items: center;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  margin-left: calc(-8 * var(--px));
  border-radius: 50%;
  background: var(--flame);
  color: var(--ink);
  pointer-events: none;
}
.agent__check .i { width: calc(10 * var(--px)); height: calc(10 * var(--px)); }

/* ---------- Dossiers (§9.8) ---------- */

.folder {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  display: block;
  padding: 0;
  color: var(--ink);
}
.folder::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(36 * var(--px)));
  height: max(100%, calc(36 * var(--px)));
  transform: translate(-50%, -50%);
}
.folder:focus-visible { outline: none; }
.folder:focus-visible .folder__body { outline: 2px solid var(--ink); outline-offset: calc(3 * var(--px)); }

.folder__fit {
  position: relative;
  display: block;
  opacity: var(--fo, 1); /* fondu d'intro (W01), sans contexte d'empilement sur la couche */
  transform: scale(var(--tk));
  transition: transform .3s var(--ease-out-expo);
}
.folder__shadow {
  position: absolute;
  left: 50%;
  top: calc(100% + 8 * var(--px));
  width: 84%;
  height: calc(7 * var(--px));
  margin-left: -42%;
  border-radius: 50%;
  background: rgba(14, 13, 11, .25);
  opacity: 0;
  pointer-events: none;
}
.folder__lift { position: relative; display: block; }
.folder__body {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--px));
  height: calc(24 * var(--px));
  padding: 0 calc(8 * var(--px));
  border-radius: var(--r-pill);
  background: var(--paper);
  border: calc(1 * var(--px)) solid var(--line-2);
  color: var(--ink);
  font: 500 calc(10 * var(--px))/1 var(--font-code);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 calc(8 * var(--px)) calc(12 * var(--px)) calc(-8 * var(--px)) rgba(14, 13, 11, .4);
  transition: background-color .4s var(--ease-out-expo), color .4s var(--ease-out-expo), border-color .4s var(--ease-out-expo), opacity .4s var(--ease-out-expo);
}
.folder__i { width: calc(12 * var(--px)); height: calc(12 * var(--px)); }
.folder__slug { line-height: 1.2; }

.folder[data-s="working"] .folder__body { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ws:not([data-lod="0"]) .folder[data-s="working"] .folder__i { display: none; }
.folder[data-s="waiting_approval"] .folder__body { background: var(--flame); color: var(--ink); border-color: var(--flame); }
.folder[data-s="waiting_approval"] .folder__body::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--px));
  z-index: -1;
  border-radius: inherit;
  background: var(--flame);
  animation: soft-ping 3.2s var(--ease-out-expo) infinite;
}
.folder[data-s="paused"] .folder__body { background: var(--paper-2); opacity: .6; }

.ws[data-lod="0"] .folder__slug { display: none; }
.ws[data-lod="0"] .folder__body {
  justify-content: center;
  width: calc(22 * var(--px));
  height: calc(18 * var(--px));
  padding: 0;
  border-radius: calc(5 * var(--px));
}

.folder__note {
  position: absolute;
  right: calc(-7 * var(--px));
  top: calc(-7 * var(--px));
  display: grid;
  place-items: center;
  width: calc(15 * var(--px));
  height: calc(15 * var(--px));
  border-radius: 50%;
  background: var(--paper-hi);
  border: calc(1 * var(--px)) solid var(--line-2);
  color: var(--ink-3);
}
.folder__note .i { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
.ws:not([data-lod="0"]) .folder__note { display: none; }

.folder__hl {
  position: absolute;
  inset: calc(-4 * var(--px));
  border-radius: var(--r-pill);
  border: calc(2 * var(--px)) solid var(--flame);
  opacity: 0;
  pointer-events: none;
}
.folder.is-hl .folder__hl { opacity: 1; }
.folder[data-s="waiting_approval"] .folder__hl { border-color: var(--ink); }

.folder__amber {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--amber);
  opacity: 0;
  pointer-events: none;
}
.folder__seal {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  margin: calc(-8 * var(--px)) 0 0 calc(-8 * var(--px));
  color: var(--ink);
  pointer-events: none;
}
.folder__seal .i { width: 100%; height: 100%; }

/* Jeton « +N » d'une pile : enfant du dossier de devant (déjà mis à l'échelle --tk par .folder__fit). */
.pile-more { position: absolute; right: calc(-10 * var(--px)); top: calc(-10 * var(--px)); z-index: 2; pointer-events: none; }
.ws[data-lod="0"] .pile-more { right: calc(-27 * var(--px)); top: calc(-4 * var(--px)); } /* à côté de l'onglet et de sa note */
.pile-more .pile-more__fit { transform: none; }
.pile-more__fit {
  display: inline-grid;
  place-items: center;
  min-width: calc(22 * var(--px));
  height: calc(18 * var(--px));
  padding: 0 calc(5 * var(--px));
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font: 500 calc(9 * var(--px))/1 var(--font-code);
  letter-spacing: .06em;
  transform: scale(var(--tk));
}

/* Note de refus épinglée près du bac (LOD ≥ 1). */
.wnote { position: absolute; left: 0; top: 0; z-index: 3; }
.wnote__fit { display: block; transform: scale(var(--tk)); transform-origin: 0 0; transition: transform .3s var(--ease-out-expo); }
.wnote[data-side="left"] .wnote__fit { transform-origin: 100% 0; }
.wnote[data-v="above"] .wnote__fit { transform-origin: 0 100%; }
.wnote[data-side="left"][data-v="above"] .wnote__fit { transform-origin: 100% 100%; }
.wnote__mask {
  display: block;
  overflow: hidden;
  width: max-content;
  max-width: calc(104 * var(--px));
  padding: calc(6 * var(--px)) calc(8 * var(--px));
  background: var(--paper-hi);
  border: calc(1 * var(--px)) solid var(--line-2);
  border-radius: calc(4 * var(--px));
  box-shadow: 0 calc(10 * var(--px)) calc(16 * var(--px)) calc(-12 * var(--px)) rgba(14, 13, 11, .45);
}
.wnote__t { display: block; font: 500 calc(12 * var(--px))/1.3 var(--font-sans); color: var(--ink-3); }

/* Annotation au crayon à côté d'un agent au travail (LOD2). */
.wannot { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.wannot__fit { display: block; transform: scale(var(--tk)); transform-origin: 0 50%; transition: transform .3s var(--ease-out-expo); }
.wannot[data-side="left"] .wannot__fit { transform-origin: 100% 50%; }
.wannot__mask { display: block; overflow: hidden; width: max-content; max-width: calc(160 * var(--px)); padding-bottom: .1em; }
.wannot[data-side="left"] .wannot__mask { text-align: right; }
.wannot__t { display: block; font: 500 calc(12 * var(--px))/1.3 var(--font-sans); color: var(--ink-3); }

/* ---------- Effets : tampons, anneaux, éclats ---------- */

.ws-fx .fx-ring {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-radius: 50%;
  pointer-events: none;
}
.spark { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; }

.stamp { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; }
.stamp__fit { position: relative; display: grid; place-items: center; align-content: center; transform: scale(var(--tk)); }
.stamp--ok .stamp__fit {
  width: calc(56 * var(--px));
  height: calc(56 * var(--px));
  border-radius: 50%;
  background: var(--flame);
  color: var(--ink);
  box-shadow: 0 calc(12 * var(--px)) calc(20 * var(--px)) calc(-12 * var(--px)) rgba(14, 13, 11, .5);
}
.stamp--ok .stamp__fit::before {
  content: "";
  position: absolute;
  inset: calc(4 * var(--px));
  border-radius: 50%;
  border: calc(1 * var(--px)) dashed rgba(14, 13, 11, .45);
}
.stamp__t { font: 500 calc(11 * var(--px))/1 var(--font-code); letter-spacing: .12em; white-space: nowrap; }
.stamp__d { margin-top: calc(4 * var(--px)); font: 500 calc(9 * var(--px))/1 var(--font-code); letter-spacing: .1em; }
.stamp--ko .stamp__fit {
  padding: calc(8 * var(--px)) calc(11 * var(--px));
  border-radius: calc(4 * var(--px));
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 calc(12 * var(--px)) calc(20 * var(--px)) calc(-12 * var(--px)) rgba(14, 13, 11, .5);
}

/* ---------- HUD (§9.9) ---------- */

.ws-hud {
  position: absolute;
  inset: 0;
  z-index: var(--z-hud, 12);
  overflow: hidden;
  border-radius: 28px;
  pointer-events: none;
}
@media (max-width: 999.98px) { .ws-hud { border-radius: 22px; } }
.ws-hud button, .ws-minimap { pointer-events: auto; }

.ws-hud__label { position: absolute; left: 16px; top: 16px; }
@media (max-width: 999.98px) { .ws-hud__label, .ws-hint, .ws-cartel { display: none; } }
/* Disposition portrait sur desktop (iPad, fenêtre étroite) : le monde remplit la hauteur de la feuille,
   l'étiquette et l'aide recouvriraient la première et la dernière rangée de salles. */
.ws[data-layout="portrait"] .ws-hud__label, .ws[data-layout="portrait"] .ws-hint { display: none; }

.ws-bubbles, .ws-arrows { position: absolute; inset: 0; }
.wbubble { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.wbubble__pos { position: absolute; left: 0; top: 0; width: max-content; max-width: 220px; }
.wbubble[data-place="above"] .wbubble__pos { transform: translate(-16px, calc(-100% - var(--off, 34px))); }
.wbubble[data-place="below"] .wbubble__pos { transform: translate(-16px, var(--off, 34px)); }
.wbubble[data-place="left"] .wbubble__pos { transform: translate(calc(-100% - var(--off, 34px)), -50%); }
.wbubble__card {
  padding: 8px 12px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--sh-bubble);
}
.wbubble[data-place="below"] .wbubble__card { border-bottom-left-radius: 16px; border-top-left-radius: 4px; }
.wbubble[data-place="left"] .wbubble__card { border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
.wbubble__l1 { margin: 0 0 3px; font: 500 10px/1.3 var(--font-code); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
.wbubble__l2 { margin: 0; font: 500 13px/1.35 var(--font-sans); color: var(--paper); }

.ws-arrow {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 9px;
  border-radius: var(--r-pill);
  background: var(--flame);
  color: var(--ink);
  font: 500 10px/1 var(--font-code);
  letter-spacing: .14em;
  box-shadow: var(--sh-token);
  pointer-events: auto;
}
.ws-arrow .i { width: 13px; height: 13px; }
.ws-arrow::before { content: ""; position: absolute; inset: -8px; }
.ws-arrow.is-ping::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--flame);
  animation: soft-ping 3.2s var(--ease-out-expo) infinite;
}
.ws-arrow--hl { justify-content: center; width: 28px; padding: 0; background: var(--ink); color: var(--paper); pointer-events: none; }
.ws-arrow__dir { display: grid; place-items: center; }

.ws-minimap {
  position: absolute;
  left: 16px;
  bottom: 44px;
  width: 112px;
  height: 72px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-token);
  touch-action: none;
  cursor: pointer;
}
.ws-minimap__svg { display: block; width: calc(100% - 12px); height: calc(100% - 12px); margin: 6px; overflow: visible; }
.ws-minimap .mm-room { fill: none; stroke: rgba(74, 69, 66, .4); }
.ws-minimap .mm-dot { fill: var(--flame); }
.ws-minimap .mm-view { fill: rgba(242, 84, 27, .06); stroke: var(--flame); }
@media (max-width: 999.98px) { .ws-minimap { width: 88px; height: 56px; bottom: 16px; } }

.ws-controls { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
/* Fond papier : ni le mur d'une salle ni un filigrane ne se lisent à travers − et +. Le survol (encre) l'emporte. */
.ws-ctl--minus, .ws-ctl--plus, .ws-ctl--fit { background: var(--paper); }
.ws-ctl--fit-m { display: none; position: relative; }
/* Zone de toucher de 44 px autour du bouton de 40 px. */
.ws-ctl--fit-m::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
@media (max-width: 999.98px) {
  .ws-ctl--minus, .ws-ctl--plus, .ws-ctl--fit { display: none; }
  /* Seul contrôle visible pour revenir au plan entier sur téléphone : rond encre plein, icône papier. */
  .ws.is-zoomed .ws-ctl--fit-m {
    display: inline-grid;
    width: 40px;
    height: 40px;
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    box-shadow: var(--sh-token);
  }
}
@media (max-width: 999.98px) and (hover: hover) {
  .ws.is-zoomed .ws-ctl--fit-m:not([disabled]):hover { background: var(--flame); border-color: var(--flame); color: var(--ink); }
}

.ws-hint {
  position: absolute;
  left: 16px;
  bottom: 16px;
  margin: 0;
  font: 500 10px/1.2 var(--font-code);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ws-hint .swap { line-height: 1.2; }
.ws-hint { padding: 5px 9px; margin-left: -9px; margin-bottom: -5px; border-radius: var(--r-pill); background: rgba(235, 230, 218, .86); transition: opacity .3s var(--ease-out-expo), visibility 0s linear 0s; }
.ws.has-inset .ws-hint { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out-expo), visibility 0s linear .3s; }

.ws-cartel { position: absolute; left: 16px; bottom: 44px; max-width: min(420px, calc(100% - 200px)); }
.ws.has-minimap .ws-cartel { bottom: 132px; }
.ws-cartel:not(.is-on) { visibility: hidden; }
.ws-cartel__mask { overflow: hidden; border-radius: 22px; }
.ws-cartel__inner {
  display: grid;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 22px;
  background: var(--ink);
  color: var(--paper);
}
.ws-cartel__row { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ws-cartel__no {
  flex: none;
  font: 700 40px/.9 var(--font-grotesk);
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--paper);
}
.ws-cartel__title { margin: 0; min-width: 0; font: 400 26px/1.05 var(--font-serif); color: var(--flame); }
.ws-cartel__title em { font-style: italic; }

.ws-offline { position: absolute; inset: 0; display: grid; place-items: center; }
.ws-offline__veil { position: absolute; inset: 0; background: rgba(243, 240, 232, .35); }
.ws-offline__stamp {
  position: relative;
  margin: 0;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: 500 11px/1 var(--font-code);
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-6deg);
}

.ws-banner {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font: 500 10px/1 var(--font-code);
  letter-spacing: .18em;
}

/* ---------- Mouvement réduit, mode calme, qualité réduite ---------- */

@media (prefers-reduced-motion: reduce) {
  .room__pin.is-ping .pin__fit::after,
  .folder[data-s="waiting_approval"] .folder__body::after,
  .ws-arrow.is-ping::after { animation: none; opacity: 0; }
  .agent__fit, .room__fit, .folder__fit, .pin__fit, .wnote__fit, .room__count, .room__countbox,
  .agent__head, .agent__role, .agent__arc, .agent__coffee, .agent__name,
  .folder__body, .room__dot, .ws-hint, [data-lod-min], [data-lod-max] { transition: none; }
}
html[data-calm] .room__pin.is-ping .pin__fit::after,
html[data-calm] .folder[data-s="waiting_approval"] .folder__body::after,
html[data-calm] .ws-arrow.is-ping::after { animation: none; opacity: 0; }