/* Tiroir latéral générique (side-drawer.js) : coulisse depuis la gauche (ou la droite avec .sd-right), blocs repliables */
.sd-drawer {
  position:fixed; top:var(--topbar-h, 56px); bottom:0; width:var(--sd-w, 420px); max-width:92vw; z-index:14;
  display:flex; flex-direction:column; background:rgba(15,19,24,.97); backdrop-filter:blur(10px);
  transition:transform .38s cubic-bezier(.22,.8,.25,1), visibility 0s .38s; visibility:hidden;
}
.sd-left  { left:0;  border-right:1px solid var(--line); box-shadow:16px 0 40px rgba(0,0,0,.35); transform:translateX(-100%); }
.sd-right { right:0; border-left:1px solid var(--line);  box-shadow:-16px 0 40px rgba(0,0,0,.35); transform:translateX(100%); }
body.in-room .sd-drawer { visibility:visible; transition:transform .38s cubic-bezier(.22,.8,.25,1); }
body:not(.in-room) .sd-drawer { display:none; }
.sd-drawer.open { transform:none; }

.sd-toggle {
  position:absolute; top:50%; translate:0 -50%; width:36px; height:104px; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  border:1px solid var(--line); background:var(--panel); color:var(--text);
}
.sd-left .sd-toggle  { right:-36px; border-left:0;  border-radius:0 12px 12px 0; }
.sd-right .sd-toggle { left:-36px;  border-right:0; border-radius:12px 0 0 12px; }
.sd-toggle:hover { border-color:var(--cyan); color:var(--cyan); filter:none; }
.sd-toggle svg { width:16px; height:16px; transition:transform .38s cubic-bezier(.22,.8,.25,1); }
.sd-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.sd-toggle span { writing-mode:vertical-rl; transform:rotate(180deg); font:700 9px/1 var(--font); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.sd-head { padding:14px 18px; border-bottom:1px solid var(--line); font:800 12px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; }
.sd-blocks { flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:12px; }

.sd-block { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); min-width:0; }
.sd-block-head { display:flex; align-items:center; gap:8px; width:100%; padding:10px 12px; border:0; background:transparent; color:var(--text); font:700 12px/1.2 var(--font); text-align:left; cursor:pointer; }
.sd-block-head:hover { filter:none; color:var(--cyan); }
.sd-block-title { flex:1; }
.sd-badge { color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums; }
.sd-badge:empty { display:none; }
.sd-block-head svg { width:14px; height:14px; flex:none; transition:transform .2s; }
.sd-block.collapsed .sd-block-head svg { transform:rotate(-90deg); }
.sd-block.collapsed .sd-block-body { display:none; }
.sd-block-body { padding:0 12px 12px; }
.sd-block-body pre { max-height:none !important; height:max(220px, calc(100vh - 420px)); margin:0 !important; }

/* pendant la transition de fermeture, la marge se réduit en douceur alors que la largeur est déjà revenue à 100 % : on coupe le débordement */
body { overflow-x:clip; }
@media (min-width:901px) {
  .page { transition:margin-left .38s cubic-bezier(.22,.8,.25,1), margin-right .38s cubic-bezier(.22,.8,.25,1); }
}
@media (prefers-reduced-motion: reduce) { .sd-drawer, .sd-toggle svg { transition:none; } }