/* Feuille de style unique de la plateforme (L4). Source : DESIGN.md, d'après la maquette
   « Console des desks » (version 14). Servie par la plateforme : polices, HTMX et styles ne
   viennent d'aucun autre site (CSP, 04 §4.2). Aucune couleur n'est écrite en dur hors des
   jetons de :root. Les règles `.dk-<identifiant>` à la fin sont tirées de
   `apps/desks/palette.py` (un test vérifie qu'elles lui correspondent). */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }


/* Layout : console tech, barre latérale sombre + panneaux nets sur fond quadrillé ; une seule couleur (cyan), le rouge réservé au délai dépassé */
:root {
  --tint: 9%;
  --canvas: #F3F5F8; --sheet: #FFFFFF; --ink: #0B0E14; --muted: #4A5466; --faint: #5C6676; --line: #E1E5EC; --field: #808999; --hover: #F5F8FB;
  --grid: rgba(11,14,20,.045);
  --side: #0B0E14; --side-fg: #DCE2EC; --side-muted: #7C8798; --side-line: #1A1F29; --side-active: #151A23;
  --accent: #0E7C9B; --accent-hover: #0B6A85; --accent-ink: #0A6680; --accent-soft: #E3F5F9; --on-accent: #FFFFFF;
  --alert: #C42F2F; --alert-soft: #FDEDED; --calm: #127336; --warn: #8F5B0A; --amber: #E8A33D;
  --p1-fg: #B42323; --p1-bg: #FDEDED; --p2-fg: #8F4A0C; --p2-bg: #FCEBDB; --p3-fg: #0A6680; --p3-bg: #E3F5F9; --p4-fg: #3F4A5C; --p4-bg: #EDF0F4; --p5-fg: #4A5466; --p5-bg: #FFFFFF;
  --shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(11,14,20,.04);
  --display: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
  --side-hot: #F08A82; --side-badge-bg: #22D3EE; --side-badge-fg: #04141A; --side-dot: #F26464; --side-av: #2B2D31; --side-focus: #22D3EE; --brand-tile: #FFFFFF;
  --alert-strong: #B42323; --on-alert-strong: #FFFFFF;
  --sp-1: 4px; --sp-1h: 6px; --sp-2: 8px; --sp-2h: 10px; --sp-3: 12px; --sp-3h: 14px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --tint: 9%;
  --canvas: #07090D; --sheet: #0E121A; --ink: #E6EBF2; --muted: #A6B1C3; --faint: #909CAF; --line: #1C2330; --field: #5A6679; --hover: #131925;
  --grid: rgba(255,255,255,.035);
  --side: #05070A; --side-fg: #DCE2EC; --side-muted: #7F8B9D; --side-line: #141A24; --side-active: #0F141D;
  --accent: #22D3EE; --accent-hover: #5EE3F5; --accent-ink: #67E8F9; --accent-soft: #0B2A33; --on-accent: #04141A;
  --alert: #F26464; --alert-soft: #2A1215; --calm: #4ADE80; --warn: #E8A84A;
  --p1-fg: #FF8A8A; --p1-bg: #3A1418; --p2-fg: #F5B070; --p2-bg: #33210F; --p3-fg: #67E8F9; --p3-bg: #0B2A33; --p4-fg: #C3CCDA; --p4-bg: #1B2230; --p5-fg: #A6B1C3; --p5-bg: #0E121A;
  --shadow: 0 0 0 1px var(--line);
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --tint: 9%;
  --canvas: #07090D; --sheet: #0E121A; --ink: #E6EBF2; --muted: #A6B1C3; --faint: #909CAF; --line: #1C2330; --field: #5A6679; --hover: #131925;
  --grid: rgba(255,255,255,.035);
  --side: #05070A; --side-fg: #DCE2EC; --side-muted: #7F8B9D; --side-line: #141A24; --side-active: #0F141D;
  --accent: #22D3EE; --accent-hover: #5EE3F5; --accent-ink: #67E8F9; --accent-soft: #0B2A33; --on-accent: #04141A;
  --alert: #F26464; --alert-soft: #2A1215; --calm: #4ADE80; --warn: #E8A84A;
  --p1-fg: #FF8A8A; --p1-bg: #3A1418; --p2-fg: #F5B070; --p2-bg: #33210F; --p3-fg: #67E8F9; --p3-bg: #0B2A33; --p4-fg: #C3CCDA; --p4-bg: #1B2230; --p5-fg: #A6B1C3; --p5-bg: #0E121A;
  --shadow: 0 0 0 1px var(--line);
  color-scheme: dark; }

* { box-sizing: border-box; }
html, body { height: 100%; }
dl { margin: 0; }
h1, h2, h3, p { margin-block: 0; }
body { margin: 0; background-color: var(--canvas); color: var(--ink); font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
:root { --page: var(--canvas); }
:root.in-desk { --page: color-mix(in srgb, var(--desk) calc(var(--tint) * 2), var(--sheet)); }
body { background-color: var(--page); }
.in-desk .sheet, .in-desk .mcard { background: color-mix(in srgb, var(--desk) calc(var(--tint) / 3), var(--sheet)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk) 20%, var(--line)); }
.in-desk th, .in-desk td { border-bottom-color: color-mix(in srgb, var(--desk) 14%, var(--line)); }
.in-desk tbody tr:hover td { background: color-mix(in srgb, var(--desk) var(--tint), var(--sheet)); }
.in-desk .top { border-bottom-color: color-mix(in srgb, var(--desk) 25%, var(--line)); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.side :focus-visible, .banner :focus-visible { outline-color: var(--side-focus); }
.num, .ref { font-variant-numeric: tabular-nums; }
.ref { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }

.app { display: grid; grid-template-columns: 284px minmax(0,1fr); min-height: 100%; background: linear-gradient(90deg, var(--side) 284px, transparent 284px); }
.nav a { white-space: nowrap; overflow: hidden; }
.nav a .cnt { flex: none; }
.nav .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Barre latérale */
.side { background: var(--side); color: var(--side-fg); padding: var(--sp-5) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-6); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: var(--sp-2h); padding: 0 var(--sp-2); }
.mark { width: 26px; height: 26px; border-radius: 5px; background: var(--accent); display: grid; place-items: center; color: var(--on-accent); font: 600 13px/1 var(--mono); }
.brand span { font-weight: 600; font-size: 13.5px; letter-spacing: -.01em; }
/* Logo Ad Insertion Platform (icône seule) sur une pastille blanche de 32 px (décision du 17/10/2026). */
.brand .brand-tile { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--brand-tile); flex: none; }
.brand-logo { display: block; width: 26px; height: auto; }
.side h6 { margin: 0 0 var(--sp-1h); padding: 0 var(--sp-2h); font: 500 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--side-muted); }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a { display: flex; align-items: center; gap: var(--sp-2h); width: 100%; padding: 7px var(--sp-2h); border-radius: var(--r-sm); color: var(--side-fg); text-align: left; font-size: 13.5px; }
.nav a:hover { background: var(--side-active); }
.nav a[aria-current="true"] { background: var(--side-active); box-shadow: inset 2px 0 0 var(--accent); }
.nav .cnt { margin-left: auto; color: var(--side-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.nav .cnt.hot { color: var(--side-hot); font-weight: 600; }
.nav .cnt.new { color: var(--side-badge-fg); background: var(--side-badge-bg); font: 600 11.5px/1 var(--mono); padding: 3px 7px; border-radius: 999px; position: relative; }
.nav .cnt.new:not(.calm)::after { content: ""; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--side-dot); box-shadow: 0 0 0 2px var(--side); }
.nav .ico { width: 16px; height: 16px; flex: none; color: var(--side-muted); }
.desk-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.me { margin-top: auto; display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-2h); border-top: 1px solid var(--side-line); }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.me .av { background: var(--side-av); color: var(--side-fg); }
.me small { display: block; color: var(--side-muted); font-size: 12px; }

/* Haut de page */
.top { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3h) var(--sp-8); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 2; }
.crumb { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: 13.5px; min-width: 0; }
.crumb b { color: var(--ink); font-weight: 500; }
.switch { position: relative; display: flex; align-items: center; gap: 2px; }
.crumb-link { color: inherit; text-decoration: none; border-radius: var(--r-sm); padding: 2px 4px; }
.crumb-link:hover { background: var(--hover); color: var(--ink); }
.crumb .sep { color: var(--faint); }
.switch > button { display: flex; align-items: center; gap: var(--sp-2); padding: 5px var(--sp-2h); border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--sheet); color: var(--ink); font-weight: 500; }
.menu { position: absolute; top: calc(100% + 6px); left: 0; width: 260px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); padding: var(--sp-1h); z-index: 5; }
.menu a, .menu button { display: flex; align-items: center; gap: var(--sp-2h); width: 100%; padding: var(--sp-2) var(--sp-2h); border-radius: var(--r-sm); text-align: left; }
.menu a { color: var(--ink); }
.menu a:hover, .menu button:hover { background: var(--hover); }
.menu small { margin-left: auto; color: var(--faint); font-size: 12px; }
.search { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); width: 300px; max-width: 32vw; padding: var(--sp-1h) var(--sp-2h); border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--sheet); color: var(--faint); font-size: 13px; }
.search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--ink); padding: 0; }
.search input:focus { outline: none; }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.kbd { font: 500 11px/1 var(--mono); padding: 3px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); background: var(--canvas); }
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-3); border-radius: var(--r-sm); font-weight: 500; font-size: 13.5px; white-space: nowrap; }
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.primary .kbd { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: inherit; }
.btn.ghost { border: 1px solid var(--line); background: var(--sheet); }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--sheet); color: var(--muted); }

main { min-width: 0; }
.page { padding: var(--sp-10) var(--sp-8) var(--sp-16); max-width: 1180px; }
.eyebrow { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 0 0 var(--sp-2h); }
.live { display: inline-flex; align-items: center; gap: var(--sp-1h); color: var(--calm); }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--calm); box-shadow: 0 0 0 3px color-mix(in srgb, var(--calm) 20%, transparent); }
h1 { margin: 0; font: 600 26px/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; }
h1 em { color: var(--muted); }
.lede { margin: var(--sp-2h) 0 0; color: var(--muted); font-size: 15px; max-width: 62ch; }
h2 { margin: 0; font: 600 18px/1.2 var(--display); letter-spacing: -.01em; }

/* Vue des desks */
.desks { margin-top: var(--sp-8); display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--sp-5); }
.desk { color: inherit; text-decoration: none; background: var(--sheet); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); text-align: left; transition: transform .18s ease-out, box-shadow .18s ease-out; cursor: pointer; }
.desk { background: color-mix(in srgb, var(--desk) calc(var(--tint) * 2), var(--sheet)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk) 22%, var(--line)), 0 1px 2px rgba(11,14,20,.04); }
.desk:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk) 45%, var(--line)), 0 8px 24px -14px color-mix(in srgb, var(--desk) 50%, transparent); }
.desk .news { border-color: color-mix(in srgb, var(--desk) 30%, var(--line)); background: color-mix(in srgb, var(--desk) calc(var(--tint) * 3), var(--sheet)); }
.desk .news-head b { color: color-mix(in srgb, var(--desk) 80%, var(--ink)); }
.desk .nrow { background: color-mix(in srgb, var(--desk) calc(var(--tint) / 2), var(--sheet)); border-top-color: color-mix(in srgb, var(--desk) 18%, var(--line)); }
.desk .nrow:hover { background: color-mix(in srgb, var(--desk) calc(var(--tint) * 1.5), var(--sheet)); }
.desk-head h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--desk); margin-right: var(--sp-2h); vertical-align: 2px; }
.desk .figs, .desk .figs .fig + .fig, .desk .mrow + .mrow { border-color: color-mix(in srgb, var(--desk) 18%, var(--line)); }
.desk-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.desk-head h2 { font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .late-tag::before { animation: none; } }
.role { display: inline-flex; margin-top: var(--sp-1h); font-size: 12.5px; color: var(--muted); gap: var(--sp-1h); align-items: center; }
.open { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1h); color: var(--accent-ink); font-weight: 500; font-size: 13px; white-space: nowrap; }
.first { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3h); border-radius: var(--r-md); background: var(--alert-soft); }
.first .bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--alert); }
.first .lbl { font-size: 12px; color: var(--alert); font-weight: 600; letter-spacing: .02em; }
.first .what { font-size: 14px; }
.first .when { margin-left: auto; font-size: 13px; color: var(--alert); font-weight: 600; white-space: nowrap; }
.calm-line { display: flex; align-items: center; gap: var(--sp-2h); padding: var(--sp-3) var(--sp-3h); border-radius: var(--r-md); background: var(--hover); color: var(--muted); font-size: 13.5px; }
.calm-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--calm); }
.news { border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 55%, var(--sheet)); overflow: hidden; }
.news-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3h) var(--sp-4); }
.news-head b { font: 600 40px/1 var(--mono); letter-spacing: -.04em; color: var(--accent-ink); }
.news-head > span:not(.late-tag):not(.sample) { font-weight: 600; font-size: 15px; line-height: 1.2; }
.news-head small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.late-tag { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-1h); font: 600 12px/1 var(--mono); color: var(--alert); padding: 5px var(--sp-2); border-radius: var(--r-sm); background: var(--alert-soft); }
.late-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--alert); animation: pulse 1.6s ease-in-out infinite; }
.news-head .sample { margin-left: auto; }
@keyframes pulse { 50% { opacity: .3; } }
.nrow { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; grid-template-areas: "ref t d" "ref c d"; column-gap: var(--sp-3); row-gap: 1px; align-items: center; padding: var(--sp-2) var(--sp-4); border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); background: var(--sheet); font-size: 13.5px; }
.nrow .ref { grid-area: ref; } .nrow .t { grid-area: t; } .nrow .c { grid-area: c; } .nrow .d { grid-area: d; }
.nrow .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.nrow .c { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.nrow .d { text-align: right; font: 500 12px/1.4 var(--mono); color: var(--muted); white-space: nowrap; }
.nrow.late { box-shadow: inset 3px 0 0 var(--alert); }
.nrow.late .d { color: var(--alert); font-weight: 600; }
.figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fig { padding: var(--sp-3h) 0 var(--sp-3); }
.fig + .fig { padding-left: var(--sp-4); border-left: 1px solid var(--line); }
.fig b { display: block; font: 500 30px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fig span { display: block; margin-top: var(--sp-1h); font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.masters h3 { margin: 0 0 var(--sp-2); font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.mrow { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; gap: var(--sp-3); align-items: baseline; padding: 7px 0; font-size: 13.5px; }
.mrow + .mrow { border-top: 1px dashed var(--line); }
.mrow .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow .s { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
/* Master ticket rattaché, regroupé sous son master ticket parent (16/10/2026). */
.mrow.attached { padding-left: var(--sp-4); }
.mrow.attached .ref::before, .mcard.attached .ref::before { content: "↳ "; color: var(--muted); }
.mcard.attached { margin-left: var(--sp-4); }
.sample { font-size: 11.5px; color: var(--faint); border: 1px dashed var(--line); border-radius: 999px; padding: 2px var(--sp-2); }

/* Listes du desk */
.list-head { display: flex; align-items: flex-end; gap: var(--sp-4); }
.list-head .count { font: 500 15px/1 var(--mono); color: var(--muted); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sheet); align-self: center; }
.list-head { align-items: center !important; }
.list-head .btns { margin-left: auto; display: flex; gap: var(--sp-2); }
.sheet { margin-top: var(--sp-6); background: var(--sheet); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
th { text-align: left; font: 500 12px/1 var(--sans); color: var(--faint); padding: var(--sp-3h) var(--sp-4) var(--sp-2h); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: var(--sp-3h) var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
td:nth-child(2) { white-space: normal; min-width: 240px; }
tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: var(--hover); }
tr.late td:first-child { box-shadow: inset 3px 0 0 var(--alert); }
.desc { font-weight: 500; }
.sub { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; margin-top: 2px; }
.prio { display: inline-flex; align-items: center; gap: var(--sp-1h); font-size: 12.5px; font-weight: 500; padding: 3px var(--sp-2); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; }
.prio i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tocls { display: inline-flex; font-size: 12.5px; color: var(--muted); padding: 2px var(--sp-2); border-radius: 999px; border: 1px dashed var(--line); white-space: nowrap; }
.delay { white-space: nowrap; font-size: 13px; color: var(--muted); }
.delay.late { color: var(--alert); font-weight: 600; }
.upd { display: inline-flex; align-items: center; gap: var(--sp-1h); font-size: 12.5px; color: var(--accent-ink); }
.upd i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.unknown { color: var(--muted); font-style: italic; }
.note { margin-top: var(--sp-2h); color: var(--faint); font-size: 12.5px; }
.sec { margin-top: var(--sp-10); display: flex; align-items: baseline; gap: var(--sp-3); }
.mgrid { margin-top: var(--sp-3h); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-4); }
.mcard { background: var(--sheet); border-radius: var(--r-md); box-shadow: var(--shadow); padding: var(--sp-4) 18px; display: flex; flex-direction: column; gap: var(--sp-2h); }
.mcard .t { font-weight: 500; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); font-size: 12.5px; }
.kv dt { color: var(--faint); }
.kv dd { margin: 0; }
.status { display: inline-flex; align-items: center; gap: var(--sp-1h); font-size: 12.5px; }
.status i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--muted); }
.status.hold i { border-style: dashed; }
.status.prog i { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.status.res i { border-color: var(--calm); background: var(--calm); }

/* Fiche ticket */
.page.wide { max-width: 1320px; }
.back { color: var(--accent-ink); font: inherit; letter-spacing: inherit; text-transform: inherit; }
.t-head { display: flex; gap: var(--sp-6); align-items: flex-start; flex-wrap: wrap; margin-top: var(--sp-1h); }
.t-title { flex: 1 1 520px; min-width: 0; }
.ref.big { font-size: 13px; color: var(--muted); }
.t-title h1 { margin-top: var(--sp-1); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1h); margin-top: var(--sp-3); }
.chip { display: inline-flex; align-items: center; gap: var(--sp-1h); padding: var(--sp-1) 9px; border-radius: 999px; font-size: 12.5px; background: color-mix(in srgb, var(--sheet) 70%, transparent); border: 1px solid color-mix(in srgb, var(--desk, var(--line)) 20%, var(--line)); }
.chip.mono { font-family: var(--mono); font-size: 12px; }
.chip i { width: 7px; height: 7px; border-radius: 50%; }
.st-prog i { border: 1.5px solid var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.av.s { width: 18px; height: 18px; font-size: 8.5px; background: var(--hover); color: var(--muted); border: 1px solid var(--line); }
.av.s.acc { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.clocks { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.clock { min-width: 190px; padding: var(--sp-3) var(--sp-3h); border-radius: var(--r-md); background: var(--sheet); box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk, var(--line)) 20%, var(--line)); display: flex; flex-direction: column; gap: 3px; }
.clock .k { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.clock b { font: 600 18px/1.2 var(--mono); letter-spacing: -.02em; }
.clock.ok b { color: var(--calm); }
.clock .v { font-size: 12px; color: var(--muted); }
.clock .bar { height: 4px; border-radius: 2px; background: var(--hover); overflow: hidden; margin-top: 2px; }
.clock .bar i { display: block; height: 100%; background: var(--accent); }
.t-grid { margin-top: var(--sp-6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--sp-5); align-items: start; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.thread { list-style: none; margin: 18px 0 0; padding: 0 0 0 var(--sp-3h); border-left: 2px solid color-mix(in srgb, var(--desk, var(--line)) 22%, var(--line)); display: flex; flex-direction: column; gap: var(--sp-3h); }
.ev { position: relative; }
.ev-h { display: flex; align-items: center; gap: var(--sp-2); font-size: 13.5px; }
.ev-h .muted, .muted { color: var(--muted); font-size: 12.5px; }
.ev .t { margin-left: auto; font-size: 12px; color: var(--faint); }
.mail-card { margin-top: var(--sp-2); padding: var(--sp-3h) var(--sp-4); border-radius: var(--r-md); background: var(--sheet); box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk, var(--line)) 18%, var(--line)); }
.mail-card .subj { font-weight: 600; margin-bottom: var(--sp-1h); }
.mail-card p { margin: 0; max-width: 68ch; }
.ev.sys { display: flex; align-items: center; gap: var(--sp-2h); font-size: 13px; color: var(--muted); }
.ev.sys .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-left: -20px; box-shadow: 0 0 0 3px var(--page); }
.ev.sys .dot.acc { background: var(--accent); }
.panel { background: var(--sheet); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk, var(--line)) 22%, var(--line)), 0 8px 24px -16px rgba(11,14,20,.25); position: sticky; top: 76px; }
.panel h2 { font-size: 15px; }
.panel h2.mt { margin-top: 22px; }
.steps { list-style: none; margin: var(--sp-3h) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3h); }
.steps li { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: var(--sp-2h); }
.steps .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--mono); background: var(--hover); color: var(--muted); }
.steps li.done .n { background: color-mix(in srgb, var(--calm) 16%, var(--sheet)); color: var(--calm); }
.steps li.cur .n { background: var(--accent); color: var(--on-accent); }
.sk { font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: var(--sp-1); }
.sv { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tag { display: inline-flex; padding: 2px var(--sp-2); border-radius: var(--r-sm); background: var(--hover); font-size: 12.5px; font-weight: 500; }
.tag.strong { background: var(--alert-soft); color: var(--alert); font-family: var(--mono); }
.q { font-weight: 500; margin-bottom: var(--sp-2); }
.seg { display: inline-flex; border: 1px solid var(--field); border-radius: var(--r-sm); overflow: hidden; }
.seg button { padding: 5px var(--sp-3h); font-size: 13px; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--field); }
.seg button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.res { margin-top: var(--sp-2h); padding: var(--sp-2h) var(--sp-3); border-radius: var(--r-md); background: var(--hover); display: grid; gap: var(--sp-1); font-size: 13px; }
.res .muted { display: inline-block; min-width: 96px; }
.help { color: var(--muted); font-style: italic; font-size: 12.5px; }
.panel .kv { grid-template-columns: 120px 1fr; font-size: 13px; gap: var(--sp-1h) var(--sp-2h); }
.why { display: block; font-size: 12px; color: var(--muted); }
.master { margin-top: var(--sp-2h); padding: var(--sp-3h); border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 45%, var(--sheet)); display: flex; flex-direction: column; gap: var(--sp-2); }
.m-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.master .t { font-weight: 600; }
.master .kv { grid-template-columns: 120px 1fr; }
.m-act { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }


/* Propositions de l'IA */
.ai-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2h); padding: var(--sp-2h) var(--sp-3); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 10%, var(--sheet)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.ai-bar b { font-size: 13.5px; }
.btn.sm { padding: 5px var(--sp-2h); font-size: 13px; }
.ai-note { margin: var(--sp-1h) 2px var(--sp-4); font-size: 12px; color: var(--muted); }
.steps li.prop { grid-template-columns: 24px minmax(0,1fr); }
.ck { display: grid; place-items: center; width: 22px; height: 22px; }
.ck input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.ck.inline { display: flex; width: auto; height: auto; gap: var(--sp-2); font-size: 13px; font-weight: 500; }
.conf { display: inline-flex; margin-left: var(--sp-1h); padding: 1px var(--sp-1h); border-radius: 999px; font: 600 10.5px/1.5 var(--mono); text-transform: none; letter-spacing: 0; vertical-align: 1px; }
.conf.ok { background: color-mix(in srgb, var(--calm) 15%, var(--sheet)); color: var(--calm); }
.conf.warn { background: color-mix(in srgb, var(--amber) 18%, var(--sheet)); color: var(--warn); }
.steps li.check { padding: var(--sp-2); margin: -8px; border-radius: var(--r-md); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.why-q { margin-top: var(--sp-1h); font-size: 12px; color: var(--muted); font-style: italic; }
.why-q mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; padding: 0 2px; border-radius: 2px; font-style: normal; }
.tag.mono { font-family: var(--mono); }
.sumbox { padding: var(--sp-2h) var(--sp-3); border-radius: var(--r-sm); background: var(--sheet); border: 1px dashed var(--line); font-size: 12.5px; line-height: 1.5; }
.sumbox .sk { margin-bottom: var(--sp-1); }
@media (max-width: 1100px) { .t-grid { grid-template-columns: 1fr; } .panel { position: static; } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .side .group, .me { display: none; }
  .top { padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
  .search { order: 3; width: 100%; max-width: none; margin-left: 0; }
  .page { padding: var(--sp-7) var(--sp-4) var(--sp-12); }
  .desks { grid-template-columns: 1fr; }
  .figs { grid-template-columns: repeat(2, 1fr); }
  .fig:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .fig:nth-child(4) { border-top: 1px solid var(--line); }
  .mgrid { grid-template-columns: 1fr; }
  h1, .list-head .count { font-size: 34px; }
  .list-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .desk { transition: none; } .desk:hover { transform: none; } }

/* Écrans Superviseur, Admin et rapports : mêmes jetons, quelques composants en plus */
.side-note { margin: 2px var(--sp-2h) var(--sp-1h); font-size: 11.5px; color: var(--side-muted); }
.banner { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-8); background: var(--alert-strong); color: var(--on-alert-strong); font-size: 14px; }
.banner b { font-family: var(--mono); font-weight: 600; }
.banner .sample { color: var(--on-alert-strong); border-color: rgba(255,255,255,.5); margin-left: auto; }
.tabs { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs a, .tabs button { padding: var(--sp-2) var(--sp-3); font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a[aria-selected="true"], .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.form { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: var(--sp-4) var(--sp-6); padding: var(--sp-5); margin: 0; }
.form dt { font-size: 13px; color: var(--muted); padding-top: var(--sp-1h); }
.form dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.form .hint { flex-basis: 100%; }
.form-h { padding: var(--sp-4) var(--sp-5) 0; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.form-h + .form { padding-top: var(--sp-3); }
.form + .form-h { border-top: 1px solid var(--line); }
.input { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: 5px var(--sp-2h); border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--sheet); font-size: 13.5px; color: var(--ink); min-width: 0; max-width: 100%; }
.input.mono { font-family: var(--mono); font-size: 12.5px; }
.input.wide { width: 100%; }
.input.area { align-items: flex-start; min-height: 64px; width: 100%; color: var(--faint); }
textarea.input.area { color: var(--ink); }
.input.ph { color: var(--faint); }
.hint { display: block; font-size: 12px; color: var(--muted); }
.swatch { width: 24px; height: 24px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(11,14,20,.12); }
.swatch.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.tog { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 999px; background: var(--field); position: relative; margin: 0; cursor: pointer; flex: none; }
.tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--sheet); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.tog:checked { background: var(--accent); }
.tog:checked::after { left: 16px; }
.tog:disabled { opacity: .5; cursor: not-allowed; }
.empty { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--muted); font-size: 13.5px; }
.empty b { display: block; color: var(--ink); font-weight: 500; font-size: 14px; margin-bottom: var(--sp-1); }
.status.fail i { border-color: var(--alert); background: var(--alert); }
.status.fail { color: var(--alert); font-weight: 500; }
.status.cancel i { border-color: var(--faint); background: linear-gradient(135deg, transparent 45%, var(--faint) 45%, var(--faint) 55%, transparent 55%); }
.status.cancel { color: var(--muted); }
.status.res { margin: 0; padding: 0; background: none; border-radius: 0; display: inline-flex; }
.tag.warn { background: color-mix(in srgb, var(--amber) 16%, var(--sheet)); color: var(--warn); }
.tag.ok { background: color-mix(in srgb, var(--calm) 14%, var(--sheet)); color: var(--calm); }
.tag.alert { background: var(--alert-soft); color: var(--alert); }
.info { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); padding: var(--sp-3) var(--sp-3h); border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 55%, var(--sheet)); font-size: 13.5px; }
.info .btn { margin-left: auto; }
.first .what > span { display: block; }
.banner[hidden] { display: none; }
.box { margin-top: var(--sp-3); padding: var(--sp-3h) var(--sp-4); border-radius: var(--r-md); background: var(--sheet); box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk, var(--line)) 22%, var(--line)); display: flex; flex-direction: column; gap: var(--sp-2h); }
.box .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); margin-top: var(--sp-3h); }
.cols2 ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: var(--sp-1); }
.var-list { display: flex; flex-wrap: wrap; gap: var(--sp-1h); }
.var-list .tag { font-family: var(--mono); font-size: 12px; }
.var-list .tag.off { text-decoration: line-through; color: var(--faint); }
.input .v, .mail-prev .v { font-family: var(--mono); font-size: 12px; padding: 0 var(--sp-1); border-radius: 3px; background: var(--accent-soft); color: var(--accent-ink); }
.mail-prev { white-space: pre-line; font-size: 13.5px; line-height: 1.6; }
.figs.four { grid-template-columns: repeat(4, 1fr); }
.mv { display: inline-flex; flex-direction: column; gap: 0; margin-right: var(--sp-1h); vertical-align: middle; }
.mv button { font-size: 10px; line-height: 1; color: var(--faint); padding: 1px 3px; }
.sheet-pad { padding: var(--sp-4) var(--sp-5); }
table.compact { min-width: 0; }
table.compact td:nth-child(2) { min-width: 0; }
.sheet .sec-in { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3h) var(--sp-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sheet .sec-in h3 { margin: 0; font-size: 14px; font-weight: 600; }
.sheet .sec-in .btns { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.filters { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.filters .lbl { font-size: 12.5px; color: var(--faint); }
tr.sel td { background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); }
tr.err td { background: var(--alert-soft); }
.input { flex-wrap: wrap; }
.decl { margin: 0; font: 400 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.mail-card .kv dd, .mail-card .subj { min-width: 0; overflow-wrap: anywhere; }
.decl-x { margin-top: var(--sp-2); padding: var(--sp-2h) var(--sp-3); border-radius: var(--r-sm); border: 1px dashed var(--line); color: var(--muted); }
.decl-x b { color: var(--ink); font-weight: 600; }
.desk-cards { display: none; }
@media (max-width: 900px) { .desk-table { display: none; } .desk-cards { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); } }

/* États, priorités, erreur de champ, survol */
.status.closed i { border-radius: 2px; border-color: var(--muted); background: var(--muted); }
.status.canceled { color: var(--muted); }
.status.canceled i { border: 0; border-radius: 0; background: linear-gradient(45deg, transparent 40%, var(--muted) 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, var(--muted) 40% 60%, transparent 60%); }
.prio.p1 { color: var(--p1-fg); background: var(--p1-bg); }
.prio.p2 { color: var(--p2-fg); background: var(--p2-bg); }
.prio.p3 { color: var(--p3-fg); background: var(--p3-bg); }
.prio.p4 { color: var(--p4-fg); background: var(--p4-bg); }
.prio.p5 { color: var(--p5-fg); background: var(--p5-bg); box-shadow: inset 0 0 0 1px var(--field); }
.input.invalid { border-color: var(--alert); box-shadow: inset 0 0 0 1px var(--alert); }
.field-err { flex-basis: 100%; display: flex; align-items: center; gap: var(--sp-1h); font-size: 12.5px; font-weight: 500; color: var(--alert); }
.field-err::before { content: "!"; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--alert); color: var(--sheet); font: 700 10px/1 var(--sans); }
.btn.primary:not(:disabled):hover { background: var(--accent-hover); }
.btn.ghost:not(:disabled):hover, .icon-btn:hover, .switch > button:hover { background: var(--hover); border-color: var(--field); color: var(--ink); }
.seg button:not(.on):hover, .tabs a:hover, .tabs button:hover, .mv button:hover { color: var(--ink); }
.seg button:not(.on):hover { background: var(--hover); }
.back:hover, .open:hover, a:hover { text-decoration: underline; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.dset { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: var(--sp-6); margin-top: var(--sp-4); align-items: start; }
.dset > div { min-width: 0; }
.tabs.subnav { margin-top: 0; flex-direction: column; flex-wrap: nowrap; gap: 2px; border-bottom: 0; border-left: 1px solid var(--line); position: sticky; top: 76px; }
.tabs.subnav a, .tabs.subnav button { text-align: left; border-bottom: 0; margin: 0 0 0 -1px; border-left: 2px solid transparent; padding: var(--sp-2) var(--sp-3h); display: flex; align-items: center; gap: var(--sp-2); }
.tabs.subnav a[aria-selected="true"], .tabs.subnav button[aria-selected="true"] { border-left-color: var(--accent); background: var(--sheet); }
.dirty-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin-left: auto; }
.dsec { margin-top: 0; }
.dsec-h { display: flex; gap: var(--sp-4); align-items: flex-start; flex-wrap: wrap; padding: var(--sp-5); border-bottom: 1px solid var(--line); }
.dsec-h > div:first-child { flex: 1 1 320px; min-width: 0; }
.dsec-h h2 { font-size: 17px; }
.dsec-h .hint { margin: var(--sp-1h) 0 0; font-size: 13px; max-width: 62ch; }
.dsec-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-2h); justify-content: flex-end; }
.dsec.dirty { box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 55%, var(--line)); }
.input.changed { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--sheet)); }
.was { display: inline-block; margin-left: var(--sp-2); font-size: 12px; color: var(--muted); }
.linkrow { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3h) var(--sp-5); border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .dset { grid-template-columns: 1fr; gap: var(--sp-3); }
  .tabs.subnav { position: static; flex-direction: row; flex-wrap: wrap; border-left: 0; border-bottom: 1px solid var(--line); }
  .tabs.subnav a, .tabs.subnav button { margin: 0 0 -1px 0; border-left: 0; border-bottom: 2px solid transparent; padding: var(--sp-2) var(--sp-2h); }
  .tabs.subnav a[aria-selected="true"], .tabs.subnav button[aria-selected="true"] { border-bottom-color: var(--accent); background: none; }
  .dsec-act { justify-content: flex-start; }
}
@media (max-width: 1100px) { .t-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 900px) {
  .app { background: none; }
  .banner { padding: var(--sp-3) var(--sp-4); }
  .form { grid-template-columns: 1fr; gap: var(--sp-1h) 0; }
  .form dd { margin-bottom: var(--sp-2h); }
  .cols2 { grid-template-columns: 1fr; }
  .figs.four { grid-template-columns: repeat(2, 1fr); }
}

/* Ajouts de la base de l'interface (L4) : éléments que la maquette ne dessine pas parce qu'elle
   n'a ni serveur ni formulaires réels. Mêmes jetons, aucune couleur écrite en dur. */
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a.btn, .nav a, .tabs a, .menu a, a.desk, a.icon-btn { text-decoration: none; }
a.btn.primary { color: var(--on-accent); }
a.btn.ghost { color: var(--ink); }
.nav a { color: var(--side-fg); }
.side a:focus-visible { outline-color: var(--side-focus); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--sp-2); top: -48px; z-index: 10; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-weight: 500; }
.skip:focus { top: var(--sp-2); }
.mono { font-family: var(--mono); }
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Champs réels (la maquette dessine des <span class="input">) */
input.input, select.input, textarea.input { font-family: inherit; line-height: 1.4; }
input.input.mono, select.input.mono, textarea.input.mono { font-family: var(--mono); }
textarea.input { display: block; width: 100%; min-height: 64px; resize: vertical; }
.input[aria-invalid="true"] { border-color: var(--alert); box-shadow: inset 0 0 0 1px var(--alert); }
.input:disabled { opacity: .55; cursor: not-allowed; }
.hint a { color: inherit; }

/* Zone d'alertes et bandeau d'exploitation, sous la barre du haut */
.alerts { display: flex; flex-direction: column; gap: var(--sp-2); }
.alerts:empty { display: none; }
.alerts .flash { margin: 0; padding: var(--sp-3) var(--sp-8); font-size: 13.5px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--sheet)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.alerts .flash.error { background: var(--alert-soft); color: var(--alert); border-bottom-color: var(--alert); }
.alerts .flash.success { background: color-mix(in srgb, var(--calm) 14%, var(--sheet)); color: var(--calm); }
.live-note { font-size: 12px; color: var(--faint); }

/* Rafraîchissement automatique (HTMX) et édition concurrente */
.htmx-request .upd-pending { opacity: .6; }
.conflict { margin-top: var(--sp-4); }
.conflict .what { display: block; }
.conflict .btns { margin-top: var(--sp-2); display: flex; gap: var(--sp-2); }
.conflict:empty { display: none; }
.dirty-tag[hidden], [data-dirty-only][hidden] { display: none; }
/* Barre d'enregistrement collée en bas (maquette v17) et confirmation de sortie. */
.savebar { position: sticky; bottom: var(--sp-3); z-index: 3; margin: var(--sp-6) var(--sp-8) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--sheet); box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 55%, var(--line)), 0 10px 28px -12px rgba(11,14,20,.35); }
.savebar[hidden] { display: none; }
/* Ligne de liste retirée en attente d'enregistrement (PR 2 de la v17, listes à gestes). */
[data-row].removed > :not([data-row-remove]) { text-decoration: line-through; opacity: .55; }
[data-row][data-new] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 55%, var(--line)); }
.savebar .sb-msg { flex: 1 1 280px; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1h) var(--sp-2h); align-items: baseline; font-size: 13.5px; }
.savebar .sb-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.savebar .sb-btns[hidden] { display: none; }
.savebar .sb-msg:focus { outline: 0; }
.savebar .sb-eff { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.savebar .sb-eff:empty { display: none; }
.savebar.ok { box-shadow: 0 0 0 1px color-mix(in srgb, var(--calm) 45%, var(--line)), 0 10px 28px -12px rgba(11,14,20,.35); }
.savebar.ok b { color: var(--calm); }
.savebar.err { box-shadow: 0 0 0 1px var(--alert), 0 10px 28px -12px rgba(11,14,20,.35); }
.savebar.err .lbl { color: var(--alert); font-size: 12px; font-weight: 600; }
.savebar .sb-first { border: 0; padding: 0; background: none; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; font: inherit; font-size: 13px; cursor: pointer; }
.savebar[aria-busy="true"] .sb-btns { opacity: .6; }
.dsec [data-save-err] .first, .dsec .first[data-save-err] { margin: var(--sp-3) var(--sp-4) 0; }
dialog.leave { width: min(480px, calc(100vw - 32px)); margin: auto; border: 0; padding: var(--sp-5); border-radius: var(--r-md); background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -16px rgba(11,14,20,.45); }
dialog.leave::backdrop { background: rgba(11,14,20,.45); }
dialog.leave h2 { font-size: 17px; }
dialog.leave p { margin: var(--sp-2) 0 0; font-size: 13.5px; color: var(--muted); }
dialog.leave .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
@media (max-width: 760px) { .savebar { margin-inline: var(--sp-4); } }

/* Pages d'authentification (connexion, enrôlement, mot de passe) : une feuille de 420 px,
   centrée hors session, dans la zone de contenu quand l'utilisateur est connecté */
.auth-card { max-width: 420px; padding: var(--sp-5); }
.public .auth-card { margin: var(--sp-16) auto; }
.auth-card .brand { padding: 0; margin-bottom: var(--sp-4); }
.auth-card form { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-4) 0; }
.auth-card .btn { justify-content: center; }
.auth-card .field-err { margin: var(--sp-2) 0; }
/* exception : un code QR se lit en sombre sur blanc, dans les deux thèmes */
.auth-card .qr { display: inline-block; padding: var(--sp-3); background: #FFFFFF; border-radius: var(--r-sm); line-height: 0; }
.auth-card .codes { columns: 2; padding-left: var(--sp-5); font-size: 12.5px; }
.auth-card .lede { font-size: 14px; }
.auth-card h1 { margin-bottom: var(--sp-2h); }
body.public { min-height: 100%; }
.main-col { min-width: 0; }

/* Barre du haut : bouton de thème, langue, identité */
.top .grow { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.top .search + .grow { margin-left: 0; }
.me form { margin: 0; margin-left: auto; }
.me .link { font-size: 12px; color: var(--side-muted); text-decoration: underline; }
.me .who { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.me .who .link { color: var(--side-fg); text-decoration: none; font-size: 13.5px; }
.me .who .link:hover { text-decoration: underline; }
.me button.link { color: var(--side-muted); text-decoration: underline; cursor: pointer; }
.side .brand { color: var(--side-fg); text-decoration: none; }
.side-note { margin-top: var(--sp-1); }

/* Vue des desks */
.desks { list-style: none; padding: 0; }
.desk-dot { background: var(--desk); }

/* Écrans d'administration (L4) : choix d'une couleur, formulaires en ligne, volets repliables. */
.swatch { background: var(--desk, var(--line)); display: inline-block; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-2h); }
.swatch-pick { position: relative; cursor: pointer; display: inline-flex; }
.swatch-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch-pick input:checked + .swatch { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch-pick input:focus-visible + .swatch { outline: 2px solid var(--ink); outline-offset: 2px; }
td.stack { min-width: 280px; }
td.stack .input { display: flex; margin-bottom: var(--sp-1); }
.tablewrap { overflow-x: auto; }
form.inline { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: 0; }
details.box > summary { cursor: pointer; font-weight: 500; }
details.box[open] > summary { margin-bottom: var(--sp-3); }

/* Couleur du desk (DESIGN.md §4) : le gabarit pose `in-desk dk-<identifiant>` sur <html> ;
   un bloc de la Vue des desks ou une pastille de la barre latérale pose `dk-<identifiant>`
   sur lui-même. La CSP interdit les attributs `style` : la couleur passe par ces classes. */
.dk-indigo { --desk: #6D72F0; }
.dk-vert { --desk: #2FA67A; }
.dk-orange { --desk: #C9701F; }
.dk-rose { --desk: #D45D96; }
.dk-moutarde { --desk: #A8860F; }
.dk-olive { --desk: #8A9A2E; }
.dk-sable { --desk: #B08A5E; }
.dk-ardoise { --desk: #6F8299; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]).dk-indigo, :root:not([data-theme="light"]) .dk-indigo { --desk: #8B8FF7; }
  :root:not([data-theme="light"]).dk-vert, :root:not([data-theme="light"]) .dk-vert { --desk: #4CC79A; }
  :root:not([data-theme="light"]).dk-orange, :root:not([data-theme="light"]) .dk-orange { --desk: #F0A060; }
  :root:not([data-theme="light"]).dk-rose, :root:not([data-theme="light"]) .dk-rose { --desk: #E57FB0; }
  :root:not([data-theme="light"]).dk-moutarde, :root:not([data-theme="light"]) .dk-moutarde { --desk: #E2BD45; }
  :root:not([data-theme="light"]).dk-olive, :root:not([data-theme="light"]) .dk-olive { --desk: #A8B84E; }
  :root:not([data-theme="light"]).dk-sable, :root:not([data-theme="light"]) .dk-sable { --desk: #C9A57A; }
  :root:not([data-theme="light"]).dk-ardoise, :root:not([data-theme="light"]) .dk-ardoise { --desk: #93A4B8; }
}
:root[data-theme="dark"].dk-indigo, :root[data-theme="dark"] .dk-indigo { --desk: #8B8FF7; }
:root[data-theme="dark"].dk-vert, :root[data-theme="dark"] .dk-vert { --desk: #4CC79A; }
:root[data-theme="dark"].dk-orange, :root[data-theme="dark"] .dk-orange { --desk: #F0A060; }
:root[data-theme="dark"].dk-rose, :root[data-theme="dark"] .dk-rose { --desk: #E57FB0; }
:root[data-theme="dark"].dk-moutarde, :root[data-theme="dark"] .dk-moutarde { --desk: #E2BD45; }
:root[data-theme="dark"].dk-olive, :root[data-theme="dark"] .dk-olive { --desk: #A8B84E; }
:root[data-theme="dark"].dk-sable, :root[data-theme="dark"] .dk-sable { --desk: #C9A57A; }
:root[data-theme="dark"].dk-ardoise, :root[data-theme="dark"] .dk-ardoise { --desk: #93A4B8; }
@media (max-width: 900px) { .public .auth-card { margin: var(--sp-8) var(--sp-4); } }
@media (max-width: 900px) { .app { grid-template-rows: auto 1fr; } .side { align-content: flex-start; } }

/* Fiche ticket (L4 agent) : cadre du message, formulaires du panneau, raccourcis */
.mail-frame { display: block; width: 100%; height: 320px; margin: var(--sp-2) 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.html-mail summary { cursor: pointer; font-size: 12.5px; color: var(--muted); margin-top: var(--sp-2); }
.mail-card .body { white-space: pre-wrap; }
.mail-card mark, .why-q mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; padding: 0 2px; border-radius: 2px; }
.note-card { border-left: 3px solid var(--faint); }
.chip.warn, .tag.warn { background: color-mix(in srgb, var(--amber) 18%, var(--sheet)); color: var(--warn); }
.clock.late b { color: var(--alert); }
progress.bar { width: 100%; height: 4px; appearance: none; border: 0; border-radius: 2px; background: var(--hover); overflow: hidden; margin-top: 2px; }
progress.bar::-webkit-progress-bar { background: var(--hover); }
progress.bar::-webkit-progress-value { background: var(--accent); }
progress.bar::-moz-progress-bar { background: var(--accent); }
.dup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2h); }
label.inline { display: inline-flex; align-items: center; gap: var(--sp-1h); font-size: 13px; }
.prop { color: var(--faint); }
.ia-mark { display: inline-flex; padding: 0 var(--sp-1h); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-ink); font: 600 10px/1.6 var(--mono); }
.tag.ia { background: var(--accent-soft); color: var(--accent-ink); }
.tag.send-failed { background: var(--alert-soft); color: var(--alert); }
.tag.send-sent { background: color-mix(in srgb, var(--calm) 15%, var(--sheet)); color: var(--calm); }
.panel .input, .compose-box .input, #note .input { width: 100%; margin-bottom: var(--sp-2); }
.panel fieldset.chan { border: 0; padding: 0; margin: 0 0 var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-1h) var(--sp-3); }
.panel .row, .compose-box .row, #note .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.tree { margin-bottom: var(--sp-3); }
.tree .seg { display: inline-flex; gap: var(--sp-1h); border: 0; }
.compose-box, #note { margin-top: var(--sp-5); padding: var(--sp-4); }
.feedback-slot:empty, .conflict-slot:empty, .check-slot:empty { display: none; }
.feedback-slot, .check-slot { margin: var(--sp-2) 0; }
.atts { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1h); }

/* Fiche master ticket */
.panel .box label:not(.ck) { font-size: 12.5px; color: var(--muted); }
.panel .box .input:not(.ck) { align-self: stretch; }
.panel textarea.input { display: block; font: inherit; resize: vertical; }
.panel .box form, .panel .row form { display: inline; }
.clock.late b { color: var(--alert); }
.panel h2.mt { margin-top: var(--sp-6); }

/* Vue des desks, listes du desk, création d'un ticket, alertes à l'écran (L4 agent) */
a.nrow, a.mrow, a.fig, a.open { color: inherit; text-decoration: none; }
a.open { color: var(--accent-ink); }
a.nrow:hover { text-decoration: none; }
a.fig:hover b { color: var(--accent-ink); }
.desks { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.tabs a .num { margin-left: var(--sp-1); color: var(--faint); font-size: 12px; }
.tabs a[aria-selected="true"] .num { color: var(--muted); }
.tabs { overflow-x: auto; flex-wrap: nowrap; }
.tabs a { white-space: nowrap; }
.filters input.input, .filters select.input { min-width: 0; }
.filters input[type="search"] { min-width: 260px; }
.filters .link { font-size: 13px; }
th a { color: inherit; text-decoration: none; }
th a:hover { color: var(--ink); text-decoration: underline; }
.pager { margin-top: var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: 13px; color: var(--muted); }
.mcard[data-href] { cursor: pointer; }
.req { color: var(--alert); font-weight: 600; }
#ticket-form dd .input[type="datetime-local"] { min-width: 210px; }
#ticket-form dd textarea.input { width: 100%; max-width: 640px; color: var(--ink); }
#ticket-form dd input.input.wide { max-width: 640px; }
#ticket-form .hint { margin-left: var(--sp-1); }
#ticket-form .sheet-pad.row { display: flex; gap: var(--sp-2); border-top: 1px solid var(--line); }

.alert-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2h) var(--sp-8); font-size: 13.5px; background: var(--alert-soft); border-bottom: 1px solid color-mix(in srgb, var(--alert) 30%, var(--line)); }
.alert-item .alert-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--alert); flex: none; }
.alert-item .alert-text { flex: 1; min-width: 0; }
.alert-item .alert-text a { color: var(--ink); font-weight: 500; }
.alert-item .alert-when { color: var(--muted); font-size: 12px; }
.alert-item form { margin: 0; }
#alert-list:empty { display: none; }
.contents { display: contents; }
#ticket-form select.input { min-width: 260px; }
#ticket-form #f-impact, #ticket-form #f-vector, #ticket-form #f-urgency { min-width: 160px; }
.filters input[type="search"] { min-width: 340px; }
.tablewrap { position: relative; }
.master-thread-h, .t-head + h2 { margin-top: var(--sp-6); }
@media (max-width: 560px) {
  .desk { padding: var(--sp-4); }
  .nrow { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "ref t" "ref c" "ref d"; }
  .nrow .d { text-align: left; }
  .mrow { grid-template-columns: 76px minmax(0, 1fr); }
  .mrow .s { grid-column: 2; white-space: normal; }
  .figs { grid-template-columns: repeat(3, 1fr); }
  .fig + .fig { padding-left: var(--sp-2h); }
  .fig b { font-size: 24px; }
  .alert-item { padding: var(--sp-2h) var(--sp-4); flex-wrap: wrap; }
}
/* Fiche ticket : gestes de la revue (fusion, signalement, envoi annulé, brouillon IA) */
.inline-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.box.ai-draft { margin-top: var(--sp-2); }
#merge .dup { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
/* Rapports (L5) */
.fig .late { font-style: normal; color: var(--alert); }
.split { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-5); }
.split caption { text-align: left; padding-bottom: var(--sp-1h); font-weight: 500; }
.count-inline { color: var(--muted); font: 500 13px/1 var(--mono); }
select.input { appearance: auto; }
@media (max-width: 900px) { .figs.four { grid-template-columns: repeat(2, 1fr); } }

/* Ligne qui déplie (décision du 17/10/2026) : liste « Nouveaux tickets » (email reçu) et child
   tickets de la fiche master ticket (fil). La ligne `tr[data-preview]` porte `aria-expanded` ;
   la ligne dépliée `tr.pv` contient `.pv-box` (ouvre la fiche) et `.pv-foot`. */
tr[data-preview] { cursor: pointer; }
tr[aria-expanded="true"] td { background: color-mix(in srgb, var(--desk, var(--accent)) var(--tint), var(--sheet)); }
tr.pv { cursor: default; }
tr.pv > td, tr.pv:hover > td { background: var(--hover); padding: var(--sp-3) var(--sp-4) var(--sp-4); white-space: normal; }
.pv-box { cursor: pointer; border-radius: var(--r-md); outline-offset: 2px; }
.pv-box:hover .mail-card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--desk, var(--accent)) 55%, var(--line)); }
.pv-box .mail-card p + p { margin-top: var(--sp-1h); }
.pv-box .thread { margin-top: 0; }
.pv-foot { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); font-size: 12.5px; color: var(--muted); }
.pv-foot .btn { margin-left: auto; }

/* Fiche ticket : « Modifier » une proposition, « Champs du ticket » (décision du 17/10/2026). */
.ed { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1h); }
.ed[hidden], .sv[hidden] { display: none; }
.ed-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
/* Chaîne à choisir parmi des candidates (décision du 21/10/2026). */
.pick { border: 0; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.pick-row { display: flex; gap: var(--sp-2); align-items: center; }
.fields-kv { margin-top: var(--sp-2h); }
.next .sk { margin-bottom: var(--sp-1); }
.next ol { margin: var(--sp-1) 0 0; padding-left: 18px; }
.mail-card .kv.addr { margin-bottom: var(--sp-2h); }
.inline-set { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); border: 0; margin: 0; padding: 0; }
.info[hidden] { display: none; }