/* RackMe — direction visuelle : graphite de baie, LED cyan pour la sélection, couleurs de cycle de vie
   partagées entre la 3D et l'interface. Police système (usage hors ligne en datacentre), identifiants en mono.
   Navigation liste-d'abord (ADR-0023) : interventions et tâches en premier, la 3D est une page de référence.
   Voir docs/03-ui-ux.md. */
:root {
  --bg: #15181c;
  --surface: #1d2126;
  --surface-2: #262b31;
  --line: #343b43;
  --ink: #eef1f4;
  --ink-2: #a7b0ba;
  --ink-3: #6f7983;
  --accent: #62d4ff;
  --st-installed: #5b8dc9;
  --st-planned: #38b56d;
  --st-remove: #e5533d;
  --zone: #e0a030;
  --server: #8d949c;
  --accessory: #4a525b;
  --ok: #38b56d;
  --warn: #e0a030;
  --bad: #e5533d;
  --radius: 6px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --nav-h: 0px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.45 var(--font); color: var(--ink); background: var(--bg);
  display: flex; flex-direction: column; font-variant-numeric: tabular-nums;
}
button, select, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
code, .mono { font-family: var(--mono); font-size: 0.93em; }
a { color: var(--accent); }

/* --- Barre haute et navigation ----------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 14px; background: var(--surface); border-bottom: 1px solid var(--line); min-height: 46px;
}
.mainnav { display: flex; gap: 2px; }
.mainnav a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--radius); color: var(--ink-2); text-decoration: none; position: relative; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mainnav a.on { color: var(--ink); background: var(--surface-2); }
.mainnav b { background: var(--st-planned); color: #062; border-radius: 999px; padding: 0 6px; font-size: 11px; }
.field { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.field select { min-width: 140px; max-width: 260px; }
select, input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=search], input:not([type]), textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; color: var(--ink); min-height: 34px;
}
textarea { resize: vertical; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.segmented button { background: transparent; border: 0; padding: 6px 12px; color: var(--ink-2); cursor: pointer; min-height: 34px; }
.segmented button.on { background: var(--surface-2); color: var(--ink); }
button.ghost, button.primary, a.ghost {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; background: transparent; cursor: pointer; min-height: 34px;
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
button.ghost[aria-pressed="false"] { color: var(--ink-3); text-decoration: line-through; }
button.primary { background: var(--accent); color: #062633; border-color: transparent; font-weight: 600; }
button.primary:disabled, button.ghost:disabled { opacity: .45; cursor: not-allowed; }
button.small, a.small { padding: 3px 9px; font-size: 12.5px; min-height: 28px; }
button.small .ico { width: 16px; height: 16px; }
button.iconbtn { padding: 3px 6px; }
.menu { position: fixed; z-index: 70; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; display: grid; min-width: 220px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.menu button { background: transparent; border: 0; text-align: left; padding: 8px 10px; border-radius: 4px; cursor: pointer; color: var(--ink); }
.menu button:hover { background: var(--surface); }
.page h2.with-icon { display: flex; align-items: center; gap: 8px; }
.ulist .tact { display: inline-flex; gap: 4px; align-items: center; }
button.danger { color: #ffb3a7; border-color: #6b2a22; }
.spacer { flex: 1; }
.chip { font-family: var(--mono); font-size: 12px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; text-decoration: none; }
.userlink { color: var(--ink); text-decoration: none; font-weight: 500; padding: 4px 2px; }
.userlink:hover { color: var(--accent); }
.only-mobile { display: none; }

/* --- Bandeau de mode intervention, porte de connexion, toast ------------------------------ */
.banner { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: #3a2a10; color: #ffd9a0; border-bottom: 1px solid #6b4a12; font-size: 13.5px; }
.banner b { color: #fff; }
.banner a.ghost { color: #ffd9a0; border-color: #6b4a12; }
.gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(21,24,28,.9); }
.gate .card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 22px 26px; max-width: 420px; text-align: center; }
.gate h2 { margin: 0 0 8px; font-size: 18px; }
.gate p { color: var(--ink-2); margin: 0 0 16px; }
.gate .error { color: #ffb3a7; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px); transform: translateX(-50%); z-index: 60; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 13px; max-width: 92vw; }
.toast.error { color: #ffb3a7; border-color: #6b2a22; }

/* --- Pages --------------------------------------------------------------------------------- */
#main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px 6px; }
.page-head h1 { font-size: 20px; margin: 0; letter-spacing: -0.01em; }
.page-body { padding: 6px 18px 28px; max-width: 1200px; width: 100%; }
.page h2 { font-size: 15px; margin: 18px 0 8px; color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.page h2 small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-3); }
.empty { color: var(--ink-2); font-size: 13px; }
.meta { color: var(--ink-2); font-size: 12.5px; margin: 0 0 10px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: 13px; margin: 8px 0; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; overflow-wrap: break-word; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; align-items: center; }

/* Cartes d'intervention */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.card:hover { border-color: var(--ink-3); }
.card .title { font-weight: 600; font-size: 14.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card .sub { color: var(--ink-2); font-size: 12.5px; margin-top: 3px; }
.card .row { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.progress { flex: 1; min-width: 80px; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; display: flex; }
.progress i { display: block; height: 100%; }
.progress .v { background: var(--accent); }
.progress .d { background: var(--warn); }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid; white-space: nowrap; text-decoration: none; }
.badge.installed, .badge.connected { color: var(--st-installed); }
.badge.planned, .badge.todo { color: var(--st-planned); }
.badge.to_remove, .badge.rejected { color: var(--st-remove); }
.badge.face, .badge.kind { color: var(--ink-2); }
.badge.pending, .badge.done, .badge.paused { color: var(--warn); }
.badge.validated, .badge.in_progress { color: var(--accent); }
.badge.closed { color: var(--ink-3); }
.badge.free_walk { color: #d8a7ff; border-color: #7a4aa8; }
.badge.task { text-decoration: none; }
.badge.nc { color: var(--warn); }

/* En-tête d'intervention et onglets */
.int-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding-top: 12px; }
.int-head h1 { margin: 0; font-size: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.int-head .back { color: var(--ink-2); text-decoration: none; font-size: 13px; }
.int-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 12px 0 10px; overflow-x: auto; }
.int-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.int-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.int-tabs b { color: var(--ink-3); font-weight: 500; margin-left: 4px; }

/* Checklist de tâches */
.tasks { list-style: none; margin: 0; padding: 0; }
.tasks li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tasks.reorder > li { grid-template-columns: 22px 34px 1fr auto; }
.grip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 28px; color: var(--ink-3); cursor: grab; touch-action: none; border-radius: 4px; }
.grip:hover, .grip:focus-visible { color: var(--ink); background: var(--surface-2); }
.grip .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.tasks li.dragging { opacity: .55; outline: 1px dashed var(--accent); outline-offset: -1px; background: var(--surface); cursor: grabbing; }
.tasks li.validated .tname { color: var(--ink-2); }
.tasks .tick { width: 24px; height: 24px; margin: 2px 0 0 4px; accent-color: var(--accent); }
.tasks .tick:disabled { opacity: .35; }
.tasks .tname { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.tasks .tname .act { font-family: var(--font); color: var(--ink-2); }
.tasks .tsub { color: var(--ink-2); font-size: 12px; margin-top: 2px; }
.tasks .tsub b { color: var(--ink); font-weight: 500; }
.tasks .tact { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tasks .nc { color: var(--warn); font-size: 12px; margin-top: 3px; }
.tasks .questions { grid-column: 2 / -1; margin: 2px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.tasks .questions li { display: block; padding: 4px 0; border: 0; border-top: 1px dashed var(--line); }
.tasks .questions .q { color: var(--ink-2); }
.tasks .questions .a { margin-left: 8px; }
.tasks .questions form { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.tasks .questions input[type=text] { flex: 1; min-width: 160px; }
.tasks .photos { grid-column: 2 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.tasks .photos img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.tasks .comments { grid-column: 2 / -1; font-size: 12.5px; color: var(--ink-2); }
.tasks .comments div { padding: 2px 0; }
.group-title { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; font-size: 13px; color: var(--ink-2); }
.group-title a { text-decoration: none; }

/* Matériel, sessions, tableaux */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; color: var(--ink-2); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl .mono { font-size: 11.5px; }
.tbl input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.tbl-wrap { overflow-x: auto; }
.thread { list-style: none; margin: 0; padding: 0; }
.thread li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.thread .by { color: var(--ink-2); font-size: 12px; }
.thread .nonconformity { border-left: 3px solid var(--warn); padding-left: 8px; }
.thread img { width: 90px; height: 68px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); margin: 4px 4px 0 0; }

/* Sélecteur de périmètre (planification, ajout, free walk) */
.pick-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px; }
.pick-head h3 { font-size: 13px; margin: 0; color: var(--ink-2); flex: 1; }
.pick-head input { min-width: 200px; }
.pick { max-height: 40vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 8px; }
.pick h4 { font-size: 12.5px; color: var(--ink-2); margin: 8px 0 2px; display: flex; gap: 8px; align-items: center; }
.pick h4 button { margin-left: auto; }
.pick label { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.pick label input { width: 20px; height: 20px; accent-color: var(--accent); }
.pick .name { font-family: var(--mono); overflow-wrap: anywhere; }
.pick .sub { color: var(--ink-2); font-size: 12px; font-family: var(--font); }
.pick .covered { opacity: .6; }
.pick .checks { padding: 6px 0; }
.pick .checks textarea { width: 100%; }
.ulist { list-style: none; margin: 0; padding: 0; }
.ulist li { display: grid; grid-template-columns: 44px 6px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.ulist li.zone { color: var(--ink-2); }
.ulist button { all: unset; cursor: pointer; display: contents; }
.ulist li:hover { background: var(--surface-2); }
.ulist li.sel { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.ulist .u { font-family: var(--mono); color: var(--ink-3); font-size: 12px; text-align: right; }
.ulist .bar { width: 6px; align-self: stretch; border-radius: 2px; background: var(--c, var(--st-installed)); }
.ulist .name { font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ulist .sub { color: var(--ink-2); font-size: 12px; font-family: var(--font); white-space: normal; }
.todo-group { margin-bottom: 14px; }
.todo-group h3, .pane h3 { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin: 16px 0 6px; }

/* --- Page Baies : sous-barre, vue 3D / 2D, panneau --------------------------------------- */
.page-viewer { overflow: hidden; }
.subbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.layout { flex: 1; display: flex; min-height: 0; }
.viewport { position: relative; flex: 1; min-width: 0; background: radial-gradient(ellipse at 50% 30%, #23292f 0%, var(--bg) 70%); }
.viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.legend, .scene-status { z-index: 2; }
.tooltip { z-index: 3; }
.labels.off { display: none; }
.labels[data-face="front"] .lbl.dev[data-face="rear"], .labels[data-face="rear"] .lbl.dev[data-face="front"] { display: none; }
.lbl {
  font-family: var(--mono); font-size: 11px; line-height: 1; padding: 2px 5px; border-radius: 3px;
  color: var(--ink); background: rgba(21, 24, 28, .78); border: 1px solid rgba(255,255,255,.08); white-space: nowrap;
  transform: translate(-50%, -50%);
}
.lbl.u { color: var(--ink-3); background: transparent; border: 0; font-size: 10px; }
.lbl.rack { font-family: var(--font); font-weight: 600; font-size: 13px; background: var(--surface); }
.lbl.zone { color: var(--zone); border-color: rgba(224,160,48,.4); }
.viewport.is-2d canvas, .viewport.is-2d .labels { visibility: hidden; }
.flat { position: absolute; inset: 0; z-index: 1; overflow: auto; display: flex; gap: 28px; justify-content: safe center; align-items: flex-start; padding: 14px 16px 44px; }
.flat svg { flex: 0 0 auto; height: 100%; max-width: 100%; }
.flat text { font-family: var(--mono); }
.flat .title { fill: var(--ink); font-family: var(--font); font-weight: 600; font-size: 13px; }
.flat .frame { fill: var(--surface); stroke: var(--line); }
.flat .frame.cabinet { fill: var(--bg); }
.flat .rail { stroke: var(--line); stroke-width: .5; }
.flat .u { fill: var(--ink-3); font-size: 8.5px; }
.flat .zone rect { fill: var(--zone); fill-opacity: .14; stroke: var(--zone); stroke-dasharray: 4 3; }
.flat .zone text { fill: var(--zone); font-size: 10.5px; }
.flat .dev { cursor: pointer; }
.flat .dev:focus-visible { outline: none; }
.flat .dev:focus-visible rect.body, .flat .dev.sel rect.body { stroke: var(--accent); stroke-width: 2; }
.flat .dev rect.body { stroke: #0f1215; stroke-width: 1; }
.flat .dev:hover rect.body { filter: brightness(1.18); }
.flat .c-network rect.body { fill: var(--st-installed); }
.flat .c-server rect.body { fill: var(--server); }
.flat .c-patch_panel rect.body, .flat .c-optical rect.body { fill: #8a6fae; }
.flat .c-accessory rect.body, .flat .c-other rect.body { fill: var(--accessory); }
.flat .c-pdu rect.body { fill: #23272b; stroke: #e65100; }
.flat .planned rect.body { fill: var(--st-planned); fill-opacity: .22; stroke: var(--st-planned); stroke-dasharray: 5 3; }
.flat .to_remove rect.body { fill: var(--st-remove); fill-opacity: .6; stroke: var(--st-remove); }
.flat .name { fill: var(--ink); font-size: 10.5px; }
.flat .sub { fill: var(--ink-2); font-size: 9.5px; }
.flat .other rect.body { fill-opacity: .16; stroke-dasharray: 3 3; }
.flat .other text { fill: var(--ink-3); }
.legend { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); display: inline-block; }
.tooltip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 8px; font-size: 12.5px; transform: translate(10px, 10px); max-width: 260px; }
.tooltip b { font-family: var(--mono); font-weight: 600; }
.tooltip .none { color: var(--ink-3); }
.scene-status { position: absolute; top: 12px; left: 12px; font-size: 13px; color: var(--ink-2); background: rgba(29,33,38,.85); border-radius: var(--radius); padding: 4px 9px; }
.scene-status:empty { display: none; }
.scene-status.error { color: #ffb3a7; }

.panel { width: 400px; background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs [role=tab] { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 6px; color: var(--ink-2); cursor: pointer; }
.tabs [role=tab][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs b { background: var(--st-planned); color: #062; border-radius: 999px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
.pane { overflow: auto; padding: 12px 14px 20px; }
.pane h2 { font-size: 16px; margin: 4px 0 2px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.pane .meta { color: var(--ink-2); font-size: 12.5px; margin: 0 0 10px; }
.taskblock { border-left: 3px solid var(--st-planned); padding: 6px 10px; margin: 8px 0; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; }
.taskblock.done { border-color: var(--warn); }
.taskblock.validated { border-color: var(--accent); }
.taskblock.rejected { border-color: var(--st-remove); }
.taskblock b, .taskblock a { color: var(--ink); }
.ports { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ports th { text-align: left; color: var(--ink-2); font-weight: 600; padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.ports td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ports tbody tr { cursor: pointer; }
.ports tbody tr:hover td { background: var(--surface-2); }
.ports tbody tr.sel td { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.ports tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ports .n { font-family: var(--mono); white-space: nowrap; }
.ports .none { color: var(--ink-3); }
.ports .peer { font-family: var(--mono); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.photo-grid a { display: block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.photo-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-grid .cap { font-size: 11.5px; color: var(--ink-2); padding: 4px 6px; }
.upload-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; color: var(--ink-2); }
.upload-list li.ok { color: var(--st-planned); }
.upload-list li.err { color: #ffb3a7; }

/* --- Compte -------------------------------------------------------------------------------- */
.acc-tabs { display: flex; gap: 4px; margin: 10px 0; flex-wrap: wrap; }
.acc-tabs button { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--ink-2); cursor: pointer; }
.acc-tabs button.on { color: var(--ink); border-color: var(--accent); }

/* --- Dialogues ----------------------------------------------------------------------------- */
dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; width: min(640px, 94vw); max-height: 92vh; }
dialog.wide-dialog { width: min(960px, 96vw); }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { margin: 0 0 4px; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--ink); }
dialog h3 { font-size: 13px; margin: 12px 0 6px; color: var(--ink-2); }
dialog .hint { color: var(--ink-2); margin: 0 0 12px; font-size: 13px; }
dialog .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
dialog .wide, dialog label.wide { grid-column: 1 / -1; }
dialog label.check { flex-direction: row; align-items: center; color: var(--ink); gap: 8px; }
dialog label.check input { width: 20px; height: 20px; accent-color: var(--accent); }
dialog label[hidden] { display: none; }
dialog menu { display: flex; justify-content: flex-end; gap: 8px; margin: 16px 0 0; padding: 0; flex-wrap: wrap; }
.form-error { color: #ffb3a7; font-size: 13px; margin: 10px 0 0; }
.nc-fields { border-left: 3px solid var(--warn); padding-left: 10px; display: grid; gap: 8px; }
.print-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: start; }
.print-form label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 13px; color: var(--ink-2); }
.print-form .segmented { display: flex; margin-bottom: 8px; }
.print-form .segmented button { flex: 1; font-family: var(--mono); font-size: 12px; }
.print-preview canvas { width: 100%; max-width: 440px; height: auto; background: #fff; border: 1px solid var(--line); border-radius: 4px; image-rendering: pixelated; }
#printStatus.error { color: #ffb3a7; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- Téléphone : barre d'onglets en bas, pages pleine largeur, 3D réduite ------------------- */
@media (max-width: 900px) {
  :root { --nav-h: 58px; }
  .only-mobile { display: inline-flex; }
  .topbar { padding: 6px 10px; gap: 8px; }
  .topbar #branchChip { display: none; }
  .mainnav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--nav-h); z-index: 40; background: var(--surface); border-top: 1px solid var(--line); display: flex; padding-bottom: env(safe-area-inset-bottom); }
  .mainnav a { flex: 1; flex-direction: column; gap: 2px; justify-content: center; border-radius: 0; font-size: 11px; padding: 4px 0; }
  .mainnav a .ico { width: 22px; height: 22px; }
  .mainnav b { position: absolute; top: 4px; right: calc(50% - 22px); }
  #main { padding-bottom: var(--nav-h); }
  .page-head { padding: 10px 12px 4px; gap: 8px; }
  .page-head h1 { font-size: 18px; width: 100%; }
  .page-body { padding: 4px 12px 24px; }
  .cards { grid-template-columns: 1fr; }
  .tasks li { grid-template-columns: 34px 1fr; }
  .tasks.reorder > li { grid-template-columns: 22px 34px 1fr; }
  .tasks .tact { grid-column: 1 / -1; justify-content: flex-start; }
  .banner { flex-wrap: wrap; }
  .subbar { gap: 6px; }
  .field select { min-width: 110px; }
  .layout { flex-direction: column; }
  .viewport { min-height: 46vh; }
  .panel { width: auto; border-left: 0; border-top: 1px solid var(--line); max-height: 48vh; }
  .panel.collapsed { display: none; }
  dialog { padding: 14px; }
  dialog .grid { grid-template-columns: 1fr; }
  .print-grid { grid-template-columns: 1fr; }
  .pick { max-height: 34vh; }
}