/* ===== Le bureau de Simon (bureau.html, js/bureau.js) ===== */
.room-wrap { position: relative; border: var(--line); box-shadow: 8px 8px 0 var(--ink); background: #1b1722; overflow-x: auto; overscroll-behavior-x: contain; }
.room-wrap canvas { display: block; width: 100%; min-width: 640px; height: auto; aspect-ratio: 4 / 3; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: manipulation; }
.room-tip { position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); padding: 5px 10px; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink);
  font: italic 900 14px/1 var(--display); white-space: nowrap; box-shadow: 3px 3px 0 var(--ink); }
.room-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.room-count { font: 700 14px var(--body); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.room-card { border: var(--line); background: #fff; box-shadow: 6px 6px 0 var(--k, var(--yellow)); padding: 18px 20px; }
.room-card h2 { margin: 4px 0 8px; font: italic 900 clamp(22px, 2.4vw, 28px)/1.05 var(--display); text-wrap: balance; }
.room-card p { margin: 0 0 10px; line-height: 1.5; }
.room-kind { display: inline-block; padding: 3px 8px; border: 2px solid var(--ink); background: var(--yellow); font: 800 11px var(--body); letter-spacing: .1em; text-transform: uppercase; }
.room-sub { font-weight: 700; color: var(--ink-soft); }
.room-card .tw { min-height: 3em; padding: 10px 12px; border: 1px dashed #b9b2a2; background: #f7f4ec; font: 15px/1.5 "Courier New", Courier, monospace; }
.room-hint { color: var(--ink-soft); }
@media (max-width: 900px) { .room-layout { grid-template-columns: minmax(0, 1fr); } }
.room-h1 { font-size: clamp(44px, 7vw, 84px) !important; }

/* Carte d'accès depuis Mon setup */
.room-teaser { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: center; gap: 18px; margin: 0 0 32px; padding: 12px; border: var(--line); background: #fff; color: var(--ink); text-decoration: none; box-shadow: 6px 6px 0 var(--orange); transition: transform .15s, box-shadow .15s; }
.room-teaser:hover, .room-teaser:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--orange); }
.room-teaser img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); background: #1b1722; image-rendering: pixelated; }
.room-teaser-txt { display: grid; gap: 6px; min-width: 0; }
.room-teaser small { font: 800 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.room-teaser b { font: italic 900 clamp(22px, 2.6vw, 30px)/1.05 var(--display); }
@media (max-width: 560px) { .room-teaser { grid-template-columns: minmax(0, 1fr); } }