/* Cadre des espaces Urnéo (organisateur, back-office) : menu latéral encre,
   contenu limité. Valeurs : docs/charte/tokens.css ; dimensions de mise en
   page données par la charte (menu 248px, contenu 1200px, bascule à 960px). */
:root { --layout-sidebar: 248px; --layout-content: 1200px; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
[hidden] { display: none !important; }
a { color: var(--info); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }

.ur-shell { display: flex; min-height: 100vh; }
.ur-side { flex: 0 0 var(--layout-sidebar); background: var(--ink); color: var(--on-ink); padding: var(--space-6) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.ur-side-brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); margin-bottom: var(--space-6); color: var(--on-ink); text-decoration: none; }
.ur-side-brand img { width: 38px; height: 38px; }
.ur-side-word { font-weight: 800; letter-spacing: -0.02em; font-size: 28px; line-height: 1; }
.ur-side-word span { color: var(--accent); }
.ur-side-label { color: var(--on-ink); opacity: .7; margin: var(--space-4) var(--space-3) var(--space-1); }
.ur-side a.ur-nav, .ur-side button.ur-nav { display: block; width: 100%; text-align: left; color: var(--on-ink); text-decoration: none;
  background: transparent; border: 0; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); cursor: pointer; font: inherit; }
.ur-side .ur-nav:hover { background: color-mix(in srgb, var(--on-ink) 12%, transparent); }
.ur-side .ur-nav[aria-current="page"] { background: color-mix(in srgb, var(--on-ink) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.ur-side-spacer { flex: 1; }
.ur-side-who { color: var(--on-ink); opacity: .85; padding: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--on-ink) 18%, transparent); margin-top: var(--space-4); }
.ur-menu-btn { display: none; }

.ur-main { flex: 1; min-width: 0; padding: var(--space-8) var(--space-12); }
.ur-content { max-width: var(--layout-content); width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-8); }
.ur-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.ur-page-head p { color: var(--text-muted); margin-top: var(--space-1); }
.ur-muted { color: var(--text-muted); }

.ur-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4); }
.ur-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ur-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); }
.ur-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.ur-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--space-6); }

.ur-table { width: 100%; border-collapse: collapse; }
.ur-table th { text-align: left; color: var(--text-muted); background: var(--surface-sunken); padding: var(--space-2) var(--space-3); font: 600 13px/18px var(--font-sans); }
.ur-table td { padding: var(--space-3); border-top: 1px solid var(--border); vertical-align: middle; }
.ur-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ur-empty { color: var(--text-muted); padding: var(--space-4) 0; }
.ur-toast { position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%); background: var(--ink); color: var(--on-ink);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); z-index: 50; max-width: calc(100% - 2 * var(--space-4)); }

@media (max-width: 960px) {
  .ur-shell { flex-direction: column; }
  .ur-side { position: sticky; top: 0; z-index: 40; height: auto; max-height: 100vh; flex: none; padding: var(--space-3) var(--space-4); flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ur-side-brand { margin: 0 auto 0 0; padding: 0; }
  .ur-side-brand img { width: 32px; height: 32px; }
  .ur-side-word { font-size: 24px; }
  .ur-menu-btn { display: inline-flex; }
  .ur-side a.ur-nav, .ur-side button.ur-nav, .ur-side-label, .ur-side-spacer, .ur-side-who { display: none; }
  .ur-side.open a.ur-nav, .ur-side.open button.ur-nav, .ur-side.open .ur-side-who { display: block; width: 100%; }
  .ur-main { padding: var(--space-6) var(--space-4); }
}
@media (max-width: 640px) {
  .ur-table.stack thead { display: none; }
  .ur-table.stack, .ur-table.stack tbody, .ur-table.stack tr, .ur-table.stack td { display: block; }
  .ur-table.stack tr { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: var(--space-3); background: var(--surface); }
  .ur-table.stack td { border: 0; padding: var(--space-2) var(--space-3); text-align: left; }
  .ur-table.stack td::before { content: attr(data-label); display: block; color: var(--text-muted); font: 500 13px/18px var(--font-sans); }
  .ur-table.stack td:empty { display: none; }
}